/*
 * Wallingford CERT Core: framework styles (Phase 1).
 * Structure only: section spacing, content width, cards, placeholders and the section menu.
 * Colors, type, imagery and polish come in Phase 2.
 */

/* A section is a full-width band; its inner wrapper holds content to the site's content width. */
.wcert-section {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.wcert-section__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--global-content-width, 1290px);
	margin-inline: auto;
	padding-inline: var(--global-content-edge-padding, 1.5rem);
}

.wcert-section__inner > :first-child {
	margin-top: 0;
}

.wcert-section__inner > :last-child {
	margin-bottom: 0;
}

/* Section header: the heading and a "view all" link, wrapping on narrow screens. */
.wcert-section__header {
	margin-bottom: 1.5rem;
}

.wcert-section__header > * {
	margin-block: 0;
}

/* Cards inside Query Loops. */
.wcert-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
}

.wcert-card > * {
	margin-block: 0;
}

.wcert-card__details:empty,
.wcert-card .wp-block-button__link:not([href]) {
	display: none;
}

/* Placeholders mark where Phase 3 content or a later setup step goes. */
.wcert-placeholder {
	border: 2px dashed currentColor;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	opacity: 0.75;
}

.wcert-placeholder > :first-child {
	margin-top: 0;
}

.wcert-placeholder > :last-child {
	margin-bottom: 0;
}

/* Member login and signed-in cards on the Members page. */
.wcert-login-card {
	border: 1.5px solid currentColor;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
}

.wcert-login-card > :first-child {
	margin-top: 0;
}

.wcert-login-card input[type="text"],
.wcert-login-card input[type="email"],
.wcert-login-card input[type="password"] {
	box-sizing: border-box;
	width: 100%;
}

/* The email-and-Google form that replaces the Log in/out block's form (0.25.0, sso.php). */
.wcert-sso-form--inline label {
	display: block;
	margin-bottom: 0.35rem;
}

.wcert-sso-form--inline input[type="email"] {
	box-sizing: border-box;
	width: 100%;
}

/* Tool boxes for one audience: Leadership Tools, Post an Update. */
.wcert-leaders-box,
.wcert-tools-box {
	border: 2px solid currentColor;
	border-radius: 8px;
	padding: 1rem 1.25rem;
}

/* Org chart cards printed by [wcert_leadership]. */
.wcert-leaders {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-block: 1.5rem;
}

.wcert-leader {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.wcert-leader > * {
	margin: 0;
}

.wcert-leader__photo img,
.wcert-leader__photo--empty {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
}

.wcert-leader__photo--empty {
	background: rgba(0, 0, 0, 0.06);
}

.wcert-leader__role {
	font-weight: 600;
}

/* Document lists printed by [wcert_documents]. */
.wcert-documents {
	margin: 0 0 1.5rem;
	padding-left: 1.25rem;
}

.wcert-documents__item + .wcert-documents__item {
	margin-top: 0.5rem;
}

.wcert-documents__date,
.wcert-documents__note {
	font-size: 0.9em;
	opacity: 0.8;
}

.wcert-documents__badge {
	font-size: 0.8em;
	font-weight: 600;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0 0.35em;
}

/* Menus printed by [wcert_menu], such as the Member Portal navigation. */
.wcert-menu__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-menu__list .current-menu-item > a {
	font-weight: 700;
}

/* Messages after a form is sent. */
.wcert-notice {
	border-left: 4px solid currentColor;
	padding: 0.75rem 1rem;
	background: rgba(0, 0, 0, 0.04);
}

.wcert-notice--success {
	border-left-color: #2e7d32;
}

.wcert-notice--error {
	border-left-color: #b32d2e;
}

/* Member forms, such as Share Photos. The class twice outweighs the theme's own width for fields. */
.wcert-form__wide.wcert-form__wide {
	box-sizing: border-box;
	width: 100%;
	max-width: 40rem;
}

.wcert-form__help,
.wcert-submissions__meta,
.wcert-directory__note,
.wcert-directory__count {
	font-size: 0.9em;
	opacity: 0.8;
}

.wcert-submissions {
	padding-left: 1.25rem;
}

/* Two short fields side by side (Send a News Story: the event and its date). */
.wcert-form__pair {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	max-width: 40rem;
}

.wcert-form__pair > p:first-child {
	flex: 1 1 18rem;
}

/* Drop zones on member forms (0.20.0): a box to drag files onto, or click to choose them. Without
   scripts (no wc-js on the page) the ordinary file field shows instead. */
.wcert-drop-zone {
	position: relative;
	max-width: 40rem;
	margin: 0 0 1.25rem;
}

.wcert-drop-zone .wcert-drop-zone__label {
	margin: 0 0 6px;
}

.wcert-drop-zone__area {
	display: none;
}

.wc-js .wcert-drop-zone__input {
	position: absolute;
	left: 24px;
	top: 48px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.wc-js .wcert-drop-zone__area {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 2px dashed var(--wc-edge2, rgba(29, 52, 38, 0.2));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface2, #f6f8f5);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.wc-js .wcert-drop-zone__area:hover,
.wc-js .wcert-drop-zone.is-over .wcert-drop-zone__area {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-gold-soft, #f4e9cc);
}

.wc-js .wcert-drop-zone.is-over .wcert-drop-zone__area {
	border-style: solid;
}

.wcert-drop-zone__input:focus-visible + .wcert-drop-zone__area {
	outline: 3px solid var(--wc-gold, #c19a4a);
	outline-offset: 3px;
}

.wc-js .wcert-drop-zone.has-files .wcert-drop-zone__area {
	border-style: solid;
	border-color: var(--wc-green, #4f9e43);
}

.wc-js .wcert-drop-zone.is-bad .wcert-drop-zone__area {
	border-color: #b32d2e;
}

.wcert-drop-zone__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(140deg, #efd9a3, #cfa752 55%, #ad7f33);
	color: #20180a;
}

.wcert-drop-zone__icon svg {
	width: 22px;
	height: 22px;
}

.wcert-drop-zone__prompt {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.wcert-drop-zone__prompt span {
	font-size: 0.92em;
	opacity: 0.8;
}

.wcert-drop-zone__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.wcert-drop-zone__list li {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 3px 4px 3px 12px;
	border: 1px solid var(--wc-edge2, rgba(29, 52, 38, 0.2));
	border-radius: 999px;
	background: var(--wc-surface, #fff);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.wcert-drop-zone__remove.wcert-drop-zone__remove {
	min-height: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
}

.wcert-drop-zone__remove.wcert-drop-zone__remove:hover {
	background: var(--wc-bg2, #e9efe7);
	color: inherit;
}

.wcert-drop-zone .wcert-drop-zone__msg {
	margin: 6px 0 0;
	font-size: 0.9em;
}

.wcert-drop-zone__msg:empty {
	display: none;
}

.wcert-drop-zone.is-bad .wcert-drop-zone__msg,
.wcert-drop-zone.has-note .wcert-drop-zone__msg {
	color: #b32d2e;
}

html.wc-dark .wcert-drop-zone.is-bad .wcert-drop-zone__msg,
html.wc-dark .wcert-drop-zone.has-note .wcert-drop-zone__msg {
	color: #ff8f86;
}

.wcert-drop-zone .wcert-form__help {
	display: block;
	margin-top: 6px;
}

/* The Leader Dashboard's Stories (0.20.0): a story's photos, each ticked to go in. */
.wcert-story-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin: 12px 0 16px;
}

.wcert-story-photos figure {
	margin: 0;
}

.wcert-story-photos img {
	display: block;
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.06);
}

.wcert-story-photos figcaption {
	margin-top: 6px;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.wcert-stories-done {
	padding-left: 1.25rem;
}

/* The Member Directory printed by [wcert_member_directory]. */
.wcert-directory {
	width: 100%;
	border-collapse: collapse;
}

.wcert-directory th,
.wcert-directory td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	text-align: left;
	overflow-wrap: anywhere;
}

/* My Records, printed by [wcert_my_records]: facts as label and value pairs. */
.wcert-records__facts {
	display: grid;
	grid-template-columns: minmax(9rem, max-content) 1fr;
	gap: 0.35rem 1.25rem;
	margin: 0 0 1.5rem;
}

.wcert-records__fact {
	display: contents;
}

.wcert-records__fact dt {
	font-weight: 700;
}

.wcert-records__fact dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.wcert-records__late {
	color: #b32d2e;
	font-weight: 700;
}

.wcert-records__soon {
	color: #8a4200;
	font-weight: 700;
}

.wcert-records__meta {
	font-size: 0.9em;
	opacity: 0.8;
}

.wcert-records__list {
	padding-left: 1.25rem;
}

.wcert-records__form {
	margin-bottom: 2rem;
}

@media (max-width: 600px) {
	.wcert-records__facts {
		grid-template-columns: 1fr;
		gap: 0 1rem;
	}

	.wcert-records__fact dd {
		margin-bottom: 0.5rem;
	}
}

/* Events printed by [wcert_events]. Scoped by the list's wrapper so they win over Kadence's
   page text spacing (.single-content ul, h3 and p), which would indent the list and space it out. */
.wcert-events-list .wcert-events {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-events-list .wcert-events__item {
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.wcert-events__item--cancelled .wcert-events__title,
.wcert-events__item--cancelled .wcert-events__when {
	text-decoration: line-through;
	opacity: 0.7;
}

.wcert-events-list .wcert-events__when,
.wcert-events-list .wcert-events__meta {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.wcert-events-list .wcert-events__title {
	margin: 0.2rem 0;
}

.wcert-events-list .wcert-events__description p {
	margin: 0.35rem 0 0;
}

.wcert-events__badge {
	display: inline-block;
	padding: 0 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.7em;
	font-weight: 400;
	vertical-align: middle;
	text-decoration: none;
}

.wcert-events__badge--cancelled {
	color: #b32d2e;
}

.wcert-events__description > :last-child {
	margin-bottom: 0;
}

/* Subscribing to the members calendar, under the members' event lists. */
.wcert-events__subscribe {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.wcert-events__subscribe .wcert-events__subscribe-title {
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.wcert-events__subscribe .wcert-events__subscribe-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.wcert-events__subscribe .wcert-events__subscribe-link {
	display: inline-block;
	padding: 0.35em 0.9em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--global-palette1, #1d4e89);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.wcert-events__subscribe .wcert-events__subscribe-help {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.8;
}

/* Shift sign-ups in the Member Portal ([wcert_events], [wcert_shifts]). The theme spaces every
   paragraph and list in page content widely, so these selectors carry two classes. */
.wcert-shifts {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.wcert-shifts-block .wcert-shifts + .wcert-shifts {
	margin-top: 1rem;
}

.wcert-shifts .wcert-shifts__heading {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.wcert-shifts .wcert-shifts__list,
.wcert-shifts .wcert-shifts__events {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-shifts .wcert-shifts__title {
	margin: 0 0 0.25rem;
	font-weight: 600;
}

.wcert-shifts .wcert-shifts__empty,
.wcert-shifts .wcert-shifts__more {
	margin: 0;
	opacity: 0.8;
}

.wcert-shifts .wcert-shift {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid var(--global-palette1, #1d4e89);
	border-radius: 4px;
	background: #fff;
}

.wcert-shifts .wcert-shift--mine {
	border-left-color: #2e7d32;
	background: #eef7f0;
}

.wcert-shifts .wcert-shift__when,
.wcert-shifts .wcert-shift__who {
	margin: 0;
	line-height: 1.4;
}

.wcert-shifts .wcert-shift__who {
	flex: 1 1 100%;
	font-size: 0.9em;
}

.wcert-shifts .wcert-shift__count {
	font-weight: 600;
}

.wcert-shifts .wcert-shift__count--full {
	color: #a3231f;
}

.wcert-shifts .wcert-shift__waiting {
	display: inline-block;
	margin-left: 0.35em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: #fff1cc;
	color: #6b4700;
	font-size: 0.85em;
	font-weight: 600;
}

.wcert-shifts .wcert-shift__action {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.wcert-shifts .wcert-shift__mine {
	color: #1e6b34;
	font-weight: 600;
}

.wcert-shifts .wcert-shift__form {
	display: inline;
	margin: 0;
}

.wcert-shifts .wcert-shift__button {
	padding: 0.35em 0.9em;
	font-size: 0.9rem;
	line-height: 1.4;
}

.wcert-shifts .wcert-shift__button--leave {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--global-palette1, #1d4e89);
}

@media (min-width: 700px) {
	.wcert-shifts .wcert-shift__who {
		flex: 1 1 auto;
	}
}

/* The Leader Dashboard ([wcert_leader_dashboard]): CERT Operations' screens in the Member Portal. */
.wcert-dashboard {
	--wcert-line: rgba(0, 0, 0, 0.15);
	--wcert-accent: var(--global-palette1, #1d4e89);
}

/* The dashboard's menu, a row of icons (0.35.1). Its look is in site.css; without the site design,
   a plain row with the current screen marked. */
body:not(.wcert-site) .wcert-dashboard__nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 1rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--wcert-line);
}

body:not(.wcert-site) .wcert-dashboard__nav .wc-portal-nav__scroll {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 4px;
	min-width: 0;
}

body:not(.wcert-site) .wcert-dashboard__nav .wc-ic {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body:not(.wcert-site) .wcert-dashboard__nav a {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

body:not(.wcert-site) .wcert-dashboard__nav a.wc-is-current {
	background: var(--wcert-accent);
	color: #fff;
}

body:not(.wcert-site) .wcert-dashboard__nav .wc-portal-badge {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	border-radius: 8px;
	background: #c19a4a;
	color: #000;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.wcert-dashboard__title {
	margin-top: 0;
}

.wcert-dashboard .wcert-box {
	margin: 1rem 0;
	padding: 0.5rem 1rem 1rem;
	border: 1px solid var(--wcert-line);
	border-radius: 4px;
	background: transparent;
}

.wcert-dashboard table.widefat {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.wcert-dashboard table.widefat th,
.wcert-dashboard table.widefat td {
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid var(--wcert-line);
	text-align: left;
	vertical-align: top;
}

.wcert-dashboard table.striped > tbody > tr:nth-child(odd) {
	background: rgba(0, 0, 0, 0.03);
}

.wcert-dashboard .check-column {
	width: 2rem;
}

.wcert-dashboard__scroll {
	overflow-x: auto;
}

.wcert-dashboard .form-table {
	width: 100%;
	border-collapse: collapse;
}

.wcert-dashboard .form-table th {
	width: 13rem;
	padding: 0.5rem 1rem 0.5rem 0;
	font-weight: 600;
	text-align: left;
	vertical-align: top;
}

.wcert-dashboard .form-table td {
	padding: 0.4rem 0;
}

.wcert-dashboard .description {
	display: block;
	font-size: 0.85em;
	opacity: 0.8;
}

.wcert-dashboard .regular-text {
	width: 25em;
	max-width: 100%;
}

.wcert-dashboard .large-text {
	box-sizing: border-box;
	width: 100%;
}

.wcert-dashboard .notice {
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	border-left: 4px solid #72aee6;
	background: rgba(0, 0, 0, 0.04);
}

.wcert-dashboard .notice p {
	margin: 0.25rem 0;
}

.wcert-dashboard .notice-success {
	border-left-color: #2e7d32;
}

.wcert-dashboard .notice-error {
	border-left-color: #b32d2e;
}

.wcert-dashboard .notice-warning {
	border-left-color: #dba617;
}

.wcert-dashboard .button {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wcert-accent);
	border-radius: 4px;
	background: transparent;
	color: var(--wcert-accent);
	font: inherit;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.wcert-dashboard .button-primary {
	background: var(--wcert-accent);
	color: #fff;
}

.wcert-dashboard .button-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.wcert-dashboard .subsubsub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0.5rem 0;
	padding: 0;
	list-style: none;
}

.wcert-dashboard .subsubsub .current {
	font-weight: 700;
}

.wcert-dashboard__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: flex-end;
	margin: 1rem 0;
}

.wcert-dashboard__filters label {
	display: flex;
	flex-direction: column;
	font-size: 0.85em;
}

/* Flags: expired red and expiring orange, both bold; other notes plain. */
.wcert-flag {
	display: inline-block;
	margin: 0 0.3em 0.25em 0;
	padding: 0 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.8em;
	white-space: nowrap;
}

.wcert-flag--late {
	color: #b32d2e;
	font-weight: 700;
}

.wcert-flag--soon {
	color: #b45309;
	font-weight: 700;
}

.wcert-flag--note {
	color: #50575e;
}

.wcert-flag--good {
	color: #1e6b34;
}

/* Missing records (0.30.0): one member a row, one record a column. */
.wcert-missing td,
.wcert-missing th {
	white-space: nowrap;
}

/* Records in Drive on the profile (0.31.0): a small picture of each file, its name and dates. */
.wcert-drive-records__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin: 0.5rem 0 1rem;
	padding: 0;
	list-style: none;
}

.wcert-drive-records__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.wcert-drive-records__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px;
	border: 1px solid var(--wcert-line, #dcdcde);
	border-radius: 8px;
	background: #f6f7f7;
	overflow: hidden;
}

.wcert-drive-records__thumb img {
	max-width: 100%;
	max-height: 128px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* A call-out's board (0.34.0): the four answers side by side, the actions in a row. */
.wcert-callout__board {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	margin: 0.75rem 0;
}

.wcert-ops .wcert-callout__board .wcert-box {
	margin: 0;
}

.wcert-callout__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: flex-end;
}

.wcert-callout__counts .wcert-flag {
	font-size: 0.95em;
}

/* Volunteer hours (0.31.0). */
.wcert-hours__big {
	margin: 0.25rem 0;
	font-size: 1.4em;
}

.wcert-hours__big strong {
	font-size: 1.6em;
}

/* My Records (0.31.0): the way to the team for a member in training, and how to send records. */
.wcert-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0.5rem 0 0.75rem;
	padding: 0;
	list-style: none;
}

.wcert-progress__step {
	flex: 1 1 140px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #f6f7f7;
	color: #50575e;
}

.wcert-progress__step.is-done {
	border-color: #68de7c;
	background: #edfaef;
	color: #1d2327;
}

.wcert-progress__step.is-now {
	border-color: #2271b1;
	background: #f0f6fc;
	color: #1d2327;
	font-weight: 600;
}

.wcert-progress__mark {
	display: inline-block;
	min-width: 1.4em;
	font-weight: 700;
}

.wcert-records__help {
	margin: 1rem 0;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wcert-line, #dcdcde);
	border-radius: 8px;
}

.wcert-records__help > summary {
	cursor: pointer;
	font-weight: 600;
}

html.wc-dark .wcert-drive-records__thumb,
html.wc-dark .wcert-progress__step {
	background: var(--wc-surface2, #1f2428);
	border-color: var(--wc-edge2, #3c434a);
	color: inherit;
}

html.wc-dark .wcert-progress__step.is-done {
	border-color: #3f8f4f;
}

html.wc-dark .wcert-progress__step.is-now {
	border-color: #72aee6;
}

/* ---------- My Records in panels (0.35.0) ----------
   The member's card with their framed ID badge photo, certifications as tiles, "Your details"
   with its edit window, and a drop-down panel for each record to send. The theme's page text
   spacing loads after this sheet, so the rules below carry two classes. */
.wcert-records.wcert-records--mine {
	display: grid;
	gap: 22px;
	container-type: inline-size;
}

.wcert-records.wcert-records--mine > * {
	margin: 0;
}

.wcert-records__ic {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wcert-records .wcert-btn .wcert-records__ic {
	width: 18px;
	height: 18px;
}

.wcert-btn.wcert-btn--small {
	min-height: 36px;
	padding: 0 14px;
	font-size: 14px;
}

.wcert-records .wcert-records__section > h2,
.wcert-records .wcert-records__head > h2 {
	margin: 0 0 14px;
	font-size: clamp(21px, 2vw, 26px);
	line-height: 1.2;
}

.wcert-records .wcert-records__section > p,
.wcert-records .wcert-records__section > ul,
.wcert-records .wcert-records__section > ol,
.wcert-records .wcert-records__section > dl {
	margin: 0 0 14px;
}

.wcert-records .wcert-records__section > :last-child {
	margin-bottom: 0;
}

.wcert-records__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.wcert-records .wcert-records__head > h2 {
	margin: 0;
}

/* The member's card. */
.wcert-records .wcert-me {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px 32px;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 0% 0%, var(--wc-gold-soft, #f4e9cc) 0%, transparent 48%),
		linear-gradient(160deg, var(--wc-surface, #fff) 45%, var(--wc-surface2, #f6f8f5));
}

.wcert-records .wcert-me::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, var(--wc-green, #4f9e43), var(--wc-gold, #c19a4a));
}

.wcert-records .wcert-me__photo {
	flex: none;
	margin: 0;
	text-align: center;
}

/* The photo's frame: a green-to-gold border, a light inner edge and a soft shadow, in the
   site's leaf-shaped corners. */
.wcert-me__frame {
	display: block;
	padding: 5px;
	border-radius: var(--wc-soft, 28px 10px 28px 10px);
	background: linear-gradient(145deg, var(--wc-green, #4f9e43), var(--wc-gold, #c19a4a) 62%, #efd9a3);
	box-shadow: 0 16px 32px rgba(28, 58, 40, 0.22), 0 2px 6px rgba(28, 58, 40, 0.12);
}

.wcert-me__frame img,
.wcert-me__initials {
	display: block;
	box-sizing: border-box;
	width: 150px;
	height: 188px;
	border: 4px solid var(--wc-surface, #fff);
	border-radius: 23px 6px 23px 6px;
	object-fit: cover;
	object-position: 50% 25%;
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-me__initials {
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--wc-surface2, #f6f8f5), var(--wc-bg2, #e9efe7));
	color: var(--wc-green-t, #2b6f33);
	font-size: 46px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.wcert-records .wcert-me__photo figcaption {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.wcert-me__who {
	flex: 1 1 300px;
	min-width: 0;
}

.wcert-records .wcert-me__name {
	margin: 2px 0 10px;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.wcert-records .wcert-me__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.wcert-records__status,
.wcert-records__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
}

.wcert-records__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.wcert-records__status.is-active {
	background: rgba(79, 158, 67, 0.15);
	color: var(--wc-green-t, #2b6f33);
}

.wcert-records__status.is-training {
	background: var(--wc-gold-soft, #f4e9cc);
	color: var(--wc-gold-t, #84602a);
}

.wcert-records__status.is-other {
	background: var(--wc-bg2, #e9efe7);
	color: var(--wc-muted, #56655d);
}

.wcert-records__chip {
	border: 1px solid var(--wc-edge2, rgba(29, 52, 38, 0.2));
	background: var(--wc-surface, #fff);
	color: var(--wc-text, #1d2a23);
	font-variant-numeric: tabular-nums;
}

.wcert-records .wcert-me__facts {
	grid-template-columns: minmax(7rem, max-content) 1fr;
	gap: 6px 18px;
	margin: 0 0 18px;
}

.wcert-records .wcert-me__facts dt,
.wcert-records .wcert-records__details dt {
	color: var(--wc-muted, #56655d);
	font-weight: 600;
}

.wcert-records .wcert-me__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* Certifications: a tile each, with a mark for how it stands. */
.wcert-records__facts.wcert-certs {
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}

.wcert-certs .wcert-records__fact.wcert-cert {
	position: relative;
	display: block;
	box-sizing: border-box;
	min-height: 76px;
	padding: 14px 14px 14px 54px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface2, #f6f8f5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wcert-certs .wcert-cert:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(28, 58, 40, 0.08);
}

.wcert-cert::before,
.wcert-cert::after {
	content: "";
	position: absolute;
}

.wcert-cert::before {
	left: 14px;
	top: 14px;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wcert-tone-bg);
}

.wcert-cert::after {
	left: 20px;
	top: 20px;
	width: 16px;
	height: 16px;
	background: var(--wcert-tone);
	-webkit-mask: var(--wcert-tone-ic) center / contain no-repeat;
	mask: var(--wcert-tone-ic) center / contain no-repeat;
}

.wcert-cert.is-ok {
	--wcert-tone: var(--wc-green-t, #2b6f33);
	--wcert-tone-bg: rgba(79, 158, 67, 0.16);
	--wcert-tone-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}

.wcert-cert.is-soon {
	--wcert-tone: #8a4200;
	--wcert-tone-bg: rgba(193, 154, 74, 0.22);
	--wcert-tone-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	border-color: rgba(193, 154, 74, 0.45);
}

.wcert-cert.is-late {
	--wcert-tone: #b32d2e;
	--wcert-tone-bg: rgba(179, 45, 46, 0.12);
	--wcert-tone-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v8.5M12 18.5v.5'/%3E%3C/svg%3E");
	border-color: rgba(179, 45, 46, 0.35);
}

.wcert-certs .wcert-records__fact.wcert-cert.is-none {
	border-style: dashed;
	background: transparent;
}

.wcert-cert.is-none {
	--wcert-tone: var(--wc-muted, #56655d);
	--wcert-tone-bg: transparent;
	--wcert-tone-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
}

.wcert-cert.is-none::before {
	border: 1.5px dashed var(--wc-edge2, rgba(29, 52, 38, 0.2));
}

.wcert-certs .wcert-cert dt {
	margin: 0 0 3px;
	font-weight: 700;
	line-height: 1.25;
}

.wcert-certs .wcert-cert dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wc-muted, #56655d);
}

.wcert-certs .wcert-cert dd.wcert-records__late {
	color: #b32d2e;
}

.wcert-certs .wcert-cert dd.wcert-records__soon {
	color: #8a4200;
}

/* Folded lists: the CERT Basic units, other training, how to send records. */
.wcert-records .wcert-records__fold,
.wcert-records .wcert-records__help {
	margin: 0 0 12px;
	padding: 0;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface, #fff);
}

.wcert-records .wcert-records__help {
	border-style: dashed;
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-records__fold > summary,
.wcert-records .wcert-records__help > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 12px 16px;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}

.wcert-records__fold > summary::-webkit-details-marker,
.wcert-records__help > summary::-webkit-details-marker {
	display: none;
}

.wcert-records__fold > summary::after,
.wcert-records .wcert-records__help > summary::after {
	content: "";
	align-self: center;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.6;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.wcert-records__fold[open] > summary::after,
.wcert-records .wcert-records__help[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.wcert-records .wcert-records__fold > .wcert-records__list,
.wcert-records .wcert-records__help > .wcert-records__list {
	margin: 0;
	padding: 0 16px 14px 36px;
}

.wcert-records .wcert-records__fold > .wcert-units {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px 18px;
	padding: 2px 16px 16px;
	list-style: none;
}

.wcert-records .wcert-unit {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: start;
	margin: 0;
	line-height: 1.35;
}

.wcert-unit__n {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	grid-row: span 2;
	border: 1.5px dashed var(--wc-edge2, rgba(29, 52, 38, 0.2));
	border-radius: 50%;
	color: var(--wc-muted, #56655d);
	font-size: 12px;
	font-weight: 800;
}

.wcert-unit--done .wcert-unit__n {
	border: 0;
	background: var(--wc-green, #4f9e43);
	color: #fff;
}

.wcert-unit .wcert-records__meta {
	grid-column: 2;
}

/* "Your details" and Attendance, side by side where there is room. */
.wcert-records__pair {
	display: grid;
	gap: 22px;
	align-items: start;
}

@container (min-width: 860px) {
	.wcert-records__pair {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.wcert-records .wcert-records__events {
		max-height: 26rem;
		overflow-y: auto;
	}
}

.wcert-records__facts.wcert-records__details {
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0;
	margin: 0;
}

.wcert-records__details .wcert-records__fact dt,
.wcert-records__details .wcert-records__fact dd {
	padding: 9px 0;
	border-bottom: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
}

.wcert-records__details .wcert-records__fact dt {
	padding-right: 16px;
}

.wcert-records__details .wcert-records__fact:last-child > * {
	border-bottom: 0;
}

.wcert-records .wcert-records__none {
	color: var(--wc-muted, #56655d);
	font-style: italic;
}

.wcert-records .wcert-records__years {
	font-weight: 700;
}

.wcert-records .wcert-records__hours {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wc-gold-soft, #f4e9cc);
	color: var(--wc-gold-t, #84602a);
	font-weight: 700;
}

.wcert-records .wcert-records__events {
	padding: 0;
	list-style: none;
}

.wcert-records__events li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
}

.wcert-records__events li:last-child {
	border-bottom: 0;
}

/* Tags for how something stands. */
.wcert-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.wcert-tag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.wcert-tag.is-ok {
	background: rgba(79, 158, 67, 0.15);
	color: var(--wc-green-t, #2b6f33);
}

.wcert-tag.is-soon {
	background: rgba(193, 154, 74, 0.22);
	color: #8a4200;
}

.wcert-tag.is-need {
	background: rgba(179, 45, 46, 0.1);
	color: #b32d2e;
}

.wcert-tag.is-wait {
	background: rgba(34, 113, 177, 0.1);
	color: #1d5f96;
}

/* Send a record: a drop-down panel for each kind. */
.wcert-records .wcert-send-list {
	display: grid;
	gap: 12px;
	margin: 14px 0 0;
}

.wcert-records .wcert-send {
	margin: 0;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface, #fff);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wcert-records .wcert-send[open] {
	border-color: var(--wc-gold, #c19a4a);
	box-shadow: 0 16px 34px rgba(28, 58, 40, 0.12);
}

.wcert-send__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 6px 14px;
	padding: 14px 16px;
	border-radius: inherit;
	cursor: pointer;
	list-style: none;
}

.wcert-send__head::-webkit-details-marker {
	display: none;
}

.wcert-send__head:hover {
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-send__head:focus-visible {
	outline: 3px solid var(--wc-gold, #c19a4a);
	outline-offset: 2px;
}

.wcert-send__icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 15px 5px 15px 5px;
	background: linear-gradient(140deg, #efd9a3, #cfa752 55%, #ad7f33);
	color: #20180a;
	box-shadow: 0 8px 18px rgba(193, 154, 74, 0.3);
}

.wcert-send--license .wcert-send__icon {
	background: linear-gradient(140deg, #cfe9c6, #74b765 55%, #3f8a37);
	color: #0f2a12;
	box-shadow: 0 8px 18px rgba(79, 158, 67, 0.28);
}

.wcert-send--photo .wcert-send__icon {
	background: linear-gradient(140deg, #d9ead0, #9fc47c 45%, #c19a4a);
	color: #1a2410;
	box-shadow: 0 8px 18px rgba(120, 150, 70, 0.28);
}

.wcert-send__icon .wcert-records__ic {
	width: 26px;
	height: 26px;
	stroke-width: 1.7;
}

.wcert-send__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.wcert-send__title {
	font-size: 17px;
}

.wcert-send__about {
	color: var(--wc-muted, #56655d);
	font-size: 14px;
}

.wcert-send__chev {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wc-surface2, #f6f8f5);
	transition: transform 0.25s ease;
}

.wcert-send[open] .wcert-send__chev {
	transform: rotate(180deg);
}

.wcert-send__body {
	padding: 16px 18px 20px;
	border-top: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
}

.wcert-records .wcert-send__body > p,
.wcert-records .wcert-send__body .wcert-records__form {
	margin: 0 0 14px;
}

.wcert-records .wcert-send__body > :last-child {
	margin-bottom: 0;
}

@container (max-width: 560px) {
	.wcert-send__head {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.wcert-send__icon {
		grid-row: span 2;
	}

	.wcert-send__head .wcert-tag {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.wcert-send__chev {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

/* Fields in the panels and the edit window: the label above, full width. */
.wcert-records .wcert-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	min-width: 0;
}

.wcert-records .wcert-field > label {
	font-weight: 700;
}

.wcert-records .wcert-field input:not([type="file"]),
.wcert-records .wcert-field select {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 44px;
}

.wcert-records .wcert-field--wide {
	grid-column: 1 / -1;
}

.wcert-records .wcert-records__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 18px;
	margin: 0 0 16px;
}

.wcert-records .wcert-records__sides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 18px;
}

.wcert-records__side {
	min-width: 0;
}

.wcert-records .wcert-records__send {
	margin: 4px 0 0;
}

/* Your uploads. */
.wcert-records .wcert-uploads {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-records .wcert-upload {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-upload__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: 50%;
	background: var(--wc-surface, #fff);
	color: var(--wc-green-t, #2b6f33);
}

.wcert-upload__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.35;
}

.wcert-upload__what {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wcert-upload__note {
	font-size: 14px;
	font-style: italic;
}

.wcert-upload__note::before {
	content: "From leadership: ";
	font-style: normal;
	font-weight: 600;
}

/* The edit window. */
.wcert-dialog {
	box-sizing: border-box;
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--wc-soft, 28px 10px 28px 10px);
	background: var(--wc-surface, #fff);
	color: var(--wc-text, #1d2a23);
	box-shadow: var(--wc-shadow-lg, 0 30px 60px rgba(20, 48, 30, 0.18));
	overflow: hidden;
}

.wcert-dialog[open] {
	display: flex;
}

.wcert-dialog::backdrop {
	background: rgba(12, 24, 18, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

html:has(.wcert-dialog:modal) {
	overflow: hidden;
}

.wcert-records .wcert-dialog__form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	margin: 0;
}

.wcert-dialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	background: linear-gradient(90deg, var(--wc-gold-soft, #f4e9cc), transparent 75%);
}

.wcert-records .wcert-dialog__head h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 21px;
	line-height: 1.2;
}

.wcert-records .wcert-dialog__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wc-surface2, #f6f8f5);
	color: var(--wc-text, #1d2a23);
	text-decoration: none;
}

.wcert-records .wcert-dialog__close:hover,
.wcert-records .wcert-dialog__close:focus-visible {
	background: var(--wc-bg2, #e9efe7);
	color: var(--wc-text, #1d2a23);
}

.wcert-dialog__body {
	display: grid;
	flex: 1 1 auto;
	gap: 20px;
	min-height: 0;
	padding: 18px 22px;
	overflow-y: auto;
}

.wcert-records .wcert-dialog__group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wcert-records .wcert-dialog__group legend {
	margin: 0 0 10px;
	padding: 0;
	color: var(--wc-gold-t, #84602a);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wcert-dialog__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
}

.wcert-dialog__group--address .wcert-dialog__fields {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

.wcert-records .wcert-dialog__error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(179, 45, 46, 0.1);
	color: #b32d2e;
	font-weight: 600;
}

.wcert-dialog__foot {
	padding: 14px 22px 18px;
	border-top: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-records .wcert-dialog__foot .wcert-form__help {
	margin: 0 0 12px;
	font-size: 13.5px;
}

.wcert-records .wcert-dialog__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
}

/* Without scripts (?wcert_edit=details) the window shows in its place on the page. */
.wcert-dialog[open]:not(:modal) {
	position: static;
	display: block;
	width: auto;
	max-height: none;
	margin: 18px 0 0;
	border: 1px solid var(--wc-edge2, rgba(29, 52, 38, 0.2));
	box-shadow: none;
}

@media (max-width: 560px) {
	.wcert-records .wcert-dialog .wcert-dialog__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.wcert-dialog__head,
	.wcert-dialog__body,
	.wcert-dialog__foot {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@container (max-width: 560px) {
	.wcert-records .wcert-me {
		flex-direction: column;
		align-items: stretch;
	}

	.wcert-records .wcert-me__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.wcert-records .wcert-me__facts dd {
		margin-bottom: 8px;
	}

	.wcert-records__facts.wcert-certs {
		gap: 8px;
	}

	.wcert-certs .wcert-records__fact.wcert-cert {
		min-height: 0;
		padding: 10px 12px 10px 50px;
	}

	.wcert-cert::before {
		top: 11px;
	}

	.wcert-cert::after {
		top: 17px;
	}

	.wcert-records .wcert-upload {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.wcert-upload__icon {
		grid-row: span 2;
		align-self: start;
	}

	.wcert-records .wcert-upload .wcert-tag {
		grid-column: 2;
		justify-self: start;
	}

	.wcert-records .wcert-me__photo {
		align-self: center;
	}

	.wcert-me__frame img,
	.wcert-me__initials {
		width: 132px;
		height: 165px;
	}
}

@container (max-width: 400px) {
	.wcert-records__facts.wcert-records__details {
		grid-template-columns: minmax(0, 1fr);
	}

	.wcert-records__details .wcert-records__fact dt {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.wcert-records__details .wcert-records__fact dd {
		padding-top: 2px;
	}
}

/* The Leader Dashboard's profile photo, framed to match. */
.wcert-profile__photo {
	flex: none;
	padding: 4px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--wc-green, #4f9e43), var(--wc-gold, #c19a4a) 62%, #efd9a3);
	box-shadow: 0 10px 24px rgba(28, 58, 40, 0.2);
}

.wcert-profile__photo img,
.wcert-profile__photo .wcert-profile__initials {
	box-sizing: border-box;
	border: 3px solid var(--wc-surface, #fff);
}

html.wc-dark .wcert-site .wcert-cert.is-soon {
	--wcert-tone: #f0b35e;
}

html.wc-dark .wcert-site .wcert-cert.is-late {
	--wcert-tone: #ff8f80;
}

html.wc-dark .wcert-site .wcert-tag.is-soon {
	color: #f0b35e;
}

html.wc-dark .wcert-site .wcert-tag.is-need,
html.wc-dark .wcert-site .wcert-records .wcert-dialog__error {
	color: #ff8f80;
}

html.wc-dark .wcert-site .wcert-certs .wcert-cert dd.wcert-records__late {
	color: #ff8f80;
}

html.wc-dark .wcert-site .wcert-certs .wcert-cert dd.wcert-records__soon {
	color: #f0b35e;
}

html.wc-dark .wcert-site .wcert-tag.is-wait {
	background: rgba(114, 174, 230, 0.16);
	color: #9cc8f0;
}

html.wc-dark .wcert-site .wcert-tag.is-ok,
html.wc-dark .wcert-site .wcert-records__status.is-active {
	background: rgba(124, 196, 107, 0.16);
}

html.wc-dark .wcert-site .wcert-dialog::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

/* ---------- An event's page on the Leader Dashboard (0.37.0) ----------
   A header card with Edit and More, the paperwork's tracker, then the panels with who is coming
   beside them. The rules carry the dashboard's class to outweigh the screen's own small styles. */
.wcert-dashboard .wcert-evt__back {
	margin: 0 0 12px;
}

.wcert-dashboard .wcert-ops .wcert-box.wcert-evt__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 18px;
	padding: 24px 26px 20px;
	overflow: visible;
	border: 1px solid var(--wc-edge, var(--wcert-line));
	border-radius: var(--wc-soft, 14px);
	background:
		radial-gradient(120% 150% at 0% 0%, var(--wc-gold-soft, #f4e9cc) 0%, transparent 50%),
		linear-gradient(160deg, var(--wc-surface, #fff) 45%, var(--wc-surface2, #f6f8f5));
	box-shadow: var(--wc-shadow, 0 12px 28px rgba(28, 58, 40, 0.1));
}

.wcert-dashboard .wcert-evt__head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	border-radius: var(--wc-soft, 14px) var(--wc-soft, 14px) 0 0;
	background: linear-gradient(90deg, var(--wc-green, #4f9e43), var(--wc-gold, #c19a4a));
}

.wcert-evt__who {
	flex: 1 1 340px;
	min-width: 0;
}

.wcert-dashboard .wcert-evt__eyebrow {
	margin: 0 0 4px;
	color: var(--wc-gold-t, #84602a);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wcert-dashboard .wcert-evt__title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.wcert-dashboard .wcert-evt__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.wcert-dashboard .wcert-evt__facts li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-weight: 600;
}

.wcert-dashboard .wcert-evt__facts .wc-ic {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--wc-green-t, #2b6f33);
}

.wcert-dashboard .wcert-evt__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.wcert-dashboard .wcert-evt__chips .wcert-pill {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}

.wcert-dashboard .wcert-evt__chip {
	border-color: var(--wc-edge2, #c3c4c7);
	background: var(--wc-surface, #fff);
	color: var(--wc-text, inherit);
}

.wcert-dashboard .wcert-evt__about {
	max-width: 75ch;
	margin: 0 0 8px;
	color: var(--wc-muted, inherit);
}

.wcert-dashboard .wcert-evt__notes {
	max-width: 75ch;
	margin: 8px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--wc-gold, #c19a4a);
	border-radius: 0 8px 8px 0;
	background: var(--wc-gold-soft, #f4e9cc);
	font-size: 0.95em;
}

.wcert-dashboard .wcert-evt__head .wcert-attention {
	margin: 10px 0 0;
}

.wcert-dashboard .wcert-evt__actions {
	display: flex;
	flex: none;
	align-items: flex-start;
	gap: 8px;
}

.wcert-dashboard .wcert-evt__actions .button,
.wcert-dashboard .wcert-evt__panel-head .button,
.wcert-dashboard .wcert-evt__track-actions .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	font-weight: 700;
}

.wcert-dashboard .wcert-evt__actions .wc-ic {
	width: 16px;
	height: 16px;
}

.wcert-evt__menu {
	position: relative;
}

.wcert-evt__menu > summary {
	list-style: none;
}

.wcert-evt__menu > summary::-webkit-details-marker {
	display: none;
}

.wcert-evt__menu > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.wcert-dashboard .wcert-evt__menu-list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	width: min(290px, 80vw);
	padding: 8px;
	border: 1px solid var(--wc-edge2, #c3c4c7);
	border-radius: 14px;
	background: var(--wc-surface, #fff);
	box-shadow: var(--wc-shadow-lg, 0 20px 40px rgba(0, 0, 0, 0.18));
}

.wcert-dashboard .wcert-evt__menu-list form {
	margin: 0;
}

.wcert-dashboard .wcert-evt__menu-item {
	display: block;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--wc-text, inherit);
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.wcert-dashboard .wcert-evt__menu-item:hover,
.wcert-dashboard .wcert-evt__menu-item:focus-visible {
	background: var(--wc-bg2, #e9efe7);
	color: var(--wc-text, inherit);
}

.wcert-dashboard .wcert-evt__menu-item--danger {
	color: #b32d2e;
}

.wcert-dashboard .wcert-evt__menu-note {
	margin: 0 10px 8px;
	color: var(--wc-muted, #50575e);
	font-size: 12.5px;
	line-height: 1.4;
}

/* The paperwork's tracker, large, under the header. */
.wcert-dashboard .wcert-ops .wcert-box.wcert-evt__track,
.wcert-dashboard .wcert-ops .wcert-evt__main > .wcert-box,
.wcert-dashboard .wcert-ops .wcert-box.wcert-coming {
	margin: 0 0 18px;
	padding: 18px 22px;
	border: 1px solid var(--wc-edge, var(--wcert-line));
	border-radius: var(--wc-soft-sm, 12px);
	background: var(--wc-surface, #fff);
	box-shadow: 0 10px 24px rgba(28, 58, 40, 0.06);
}

.wcert-dashboard .wcert-evt__track-head,
.wcert-dashboard .wcert-evt__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 6px;
}

.wcert-dashboard .wcert-evt__track-head h2,
.wcert-dashboard .wcert-evt__panel-head h2,
.wcert-dashboard .wcert-evt__main > .wcert-box > h2,
.wcert-dashboard .wcert-coming > h2 {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.2;
}

.wcert-dashboard .wcert-evt__track-head h2,
.wcert-dashboard .wcert-evt__panel-head h2 {
	margin: 0;
}

.wcert-dashboard .wcert-evt__track-actions,
.wcert-dashboard .wcert-evt__panel-head p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.wcert-evt__form-name {
	margin-left: 6px;
	color: var(--wc-muted, #646970);
	font-size: 13px;
	font-weight: 600;
}

.wcert-dashboard .wcert-evt__track .wcert-track {
	gap: 10px;
	margin: 14px 0 8px;
}

.wcert-dashboard .wcert-evt__track .wcert-track__step {
	position: relative;
	flex: 1 1 170px;
	min-height: 54px;
	padding: 10px 12px 10px 52px;
	border: 1px solid var(--wc-edge2, #c3c4c7);
	border-radius: 12px;
	background: var(--wc-surface2, #f6f7f7);
	color: var(--wc-text, inherit);
}

.wcert-dashboard .wcert-evt__track .wcert-track__mark {
	position: absolute;
	top: 50%;
	left: 12px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	margin: 0;
	border: 2px solid var(--wc-edge2, #c3c4c7);
	border-radius: 50%;
	background: var(--wc-surface, #fff);
	color: var(--wc-muted, #646970);
	font-size: 14px;
	transform: translateY(-50%);
}

.wcert-dashboard .wcert-evt__track .wcert-track__label {
	display: block;
	font-weight: 700;
	line-height: 1.25;
}

.wcert-dashboard .wcert-evt__track .wcert-track__when {
	color: var(--wc-muted, #50575e);
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--done {
	border-color: rgba(79, 158, 67, 0.45);
	background: rgba(79, 158, 67, 0.1);
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--done .wcert-track__mark {
	border-color: var(--wc-green, #4f9e43);
	background: var(--wc-green, #4f9e43);
	color: #fff;
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--now {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-gold-soft, #fcf9e8);
	box-shadow: 0 0 0 3px rgba(193, 154, 74, 0.18);
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--now .wcert-track__mark {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-gold, #c19a4a);
	color: #20180a;
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--wait {
	border-color: rgba(34, 113, 177, 0.45);
	background: rgba(34, 113, 177, 0.08);
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--wait .wcert-track__mark {
	border-color: #2271b1;
	color: #2271b1;
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--no {
	border-color: rgba(179, 45, 46, 0.5);
	background: rgba(179, 45, 46, 0.08);
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--no .wcert-track__mark {
	border-color: #b32d2e;
	background: #b32d2e;
	color: #fff;
}

.wcert-dashboard .wcert-evt__track .wcert-track__step--skip {
	border-style: dashed;
	background: transparent;
	color: var(--wc-muted, #646970);
}

.wcert-dashboard .wcert-evt__track .wcert-attention {
	margin: 10px 0 0;
}

/* The panels, with who is coming beside them where there is room. */
.wcert-evt__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 20px;
	align-items: start;
}

.wcert-evt__main,
.wcert-evt__side {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (min-width: 1100px) {
	.wcert-evt__cols {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
	}

	.wcert-dashboard .wcert-evt__side {
		position: sticky;
		top: calc(var(--wc-hdr-foot, 0px) + 72px);
		max-height: calc(100vh - var(--wc-hdr-foot, 0px) - 90px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

@media (max-width: 1099px) {
	/* On a phone or tablet, who is coming comes right after the tracker. */
	.wcert-evt__side {
		order: -1;
	}
}

.wcert-dashboard .wcert-evt__main .wcert-shift-admin {
	margin: 10px 0;
	padding: 10px 14px 12px;
	border: 1px solid var(--wc-edge, var(--wcert-line));
	border-radius: 12px;
	background: var(--wc-surface2, #f6f7f7);
}

.wcert-dashboard .wcert-evt__main .wcert-shift-admin h3 {
	margin: 2px 0 6px;
	font-size: 16px;
}

/* Who's coming. */
.wcert-dashboard .wcert-coming h3 {
	margin: 16px 0 6px;
	color: var(--wc-gold-t, #84602a);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wcert-dashboard .wcert-coming__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-dashboard .wcert-coming__stats li {
	margin: 0;
	padding: 8px 4px;
	border-radius: 10px;
	background: var(--wc-surface2, #f6f7f7);
	color: var(--wc-muted, #50575e);
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}

.wcert-dashboard .wcert-coming__stats strong {
	display: block;
	color: var(--wc-text, inherit);
	font-size: 22px;
}

.wcert-dashboard .wcert-coming__shift {
	padding: 8px 0;
	border-top: 1px solid var(--wc-edge, var(--wcert-line));
}

.wcert-dashboard .wcert-coming__shift-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
}

.wcert-dashboard .wcert-coming__shift-head .wcert-pill {
	flex: none;
	margin: 0;
	border-radius: 999px;
}

.wcert-dashboard .wcert-coming__people {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-dashboard .wcert-coming__people li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 3px 0;
}

.wcert-dashboard .wcert-coming__label {
	margin-right: 4px;
	color: var(--wc-muted, #50575e);
	font-size: 12.5px;
	font-weight: 700;
}

.wcert-dashboard .wcert-coming__waiting,
.wcert-dashboard .wcert-coming__list {
	margin: 4px 0 0;
	font-size: 14px;
}

/* The pop-up windows on CERT Operations' screens. */
.wcert-ops-dialog[open] {
	flex-direction: column;
	width: min(760px, calc(100vw - 32px));
}

#wcert-event-edit[open] {
	width: min(940px, calc(100vw - 32px));
}

.wcert-ops-dialog .wcert-dialog__head h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.wcert-ops-dialog .wcert-dialog__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wc-surface2, #f6f8f5);
	color: var(--wc-text, inherit);
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.wcert-ops-dialog .wcert-dialog__close:hover {
	background: var(--wc-bg2, #e9efe7);
	color: var(--wc-text, inherit);
}

.wcert-ops-dialog .wcert-dialog__body {
	display: block;
	padding: 16px 22px 20px;
}

.wcert-ops-dialog .wcert-dialog__buttons,
.wcert-ops-dialog p.submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 16px 0 0;
}

.wcert-ops-dialog .wcert-evt__form .form-table th {
	width: 11rem;
}

.wcert-ops-dialog .wcert-answer-choices {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}

.wcert-ops-dialog .wcert-answer-choices label {
	display: block;
	margin: 0 0 6px;
	padding: 10px 12px;
	border: 1px solid var(--wc-edge2, #c3c4c7);
	border-radius: 10px;
	cursor: pointer;
}

.wcert-ops-dialog .wcert-answer-choices label:has(input:checked) {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-gold-soft, #fcf9e8);
}

@media (max-width: 640px) {
	.wcert-dashboard .wcert-ops .wcert-box.wcert-evt__head {
		padding: 22px 16px 16px;
	}

	.wcert-dashboard .wcert-evt__actions {
		width: 100%;
	}

	.wcert-ops-dialog .form-table th,
	.wcert-ops-dialog .form-table td {
		display: block;
		width: auto;
		padding: 4px 0;
	}

	.wcert-ops-dialog .wcert-dialog__body {
		padding: 14px 16px 18px;
	}
}

html.wc-dark .wcert-site .wcert-dashboard .wcert-evt__track .wcert-track__step--wait .wcert-track__mark {
	border-color: #72aee6;
	color: #9cc8f0;
}

/* A button that links within the page keeps its colours once visited (the theme greys visited links). */
.wcert-dashboard a.button:visited {
	color: var(--wcert-accent);
}

.wcert-dashboard a.button-primary:visited {
	color: #fff;
}

html.wc-dark .wcert-site .wcert-dashboard a.button-primary:visited {
	color: #10180f;
}

html.wc-dark .wcert-site .wcert-dashboard .wcert-evt__menu-item--danger {
	color: #ff8f80;
}

/* ---------- 0.39.0: folded panels on an event's page, sign-up notes, the members' event cards ---------- */
.wcert-evt__fold {
	scroll-margin-top: calc(var(--wc-hdr-foot, 0px) + 76px);
}

.wcert-evt__fold > summary.wcert-evt__fold-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	cursor: pointer;
	list-style: none;
}

.wcert-evt__fold > summary.wcert-evt__fold-head::-webkit-details-marker {
	display: none;
}

.wcert-evt__fold > summary.wcert-evt__fold-head::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.6;
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.2s ease;
}

.wcert-evt__fold[open] > summary.wcert-evt__fold-head::after {
	transform: translateY(2px) rotate(-135deg);
}

.wcert-dashboard .wcert-evt__fold > summary.wcert-evt__fold-head h2 {
	margin: 0;
}

.wcert-evt__fold-note {
	color: var(--wc-muted, #646970);
	font-size: 13.5px;
	font-weight: 600;
}

.wcert-evt__fold[open] > summary.wcert-evt__fold-head {
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wc-edge, rgba(0, 0, 0, 0.1));
}

.wcert-dashboard .wcert-coming__notify {
	margin: 0 0 12px;
}

.wcert-dashboard .wcert-coming__notify .button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	border-radius: 999px;
	font-weight: 700;
}

.wcert-notify__who {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

.wcert-notify__who legend {
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-weight: 700;
}

.wcert-dashboard .wcert-shift-admin__name {
	min-width: min(22em, 100%);
}

/* Sign-up notes: a member's note for everyone, and (for leaders only) the one only to leaders. */
.wcert-shift__note {
	color: var(--wc-muted, #646970);
	font-size: 0.92em;
	font-style: italic;
}

.wcert-shift__leader-note {
	display: inline-block;
	margin: 2px 0 0 4px;
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--wc-gold-soft, #fcf9e8);
	color: var(--wc-gold-t, #6d4b00);
	font-size: 12.5px;
	line-height: 1.4;
}

.wcert-shifts .wcert-shift__form--join {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.wcert-shifts .wcert-shift__notes {
	flex: 1 1 100%;
	margin: 6px 0 0;
}

.wcert-shifts .wcert-shift__notes > summary {
	color: var(--wc-green-t, #2b6f33);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.wcert-shifts .wcert-shift__notes p {
	margin: 8px 0 0;
}

.wcert-shifts .wcert-shift__notes label {
	display: block;
	margin: 0 0 3px;
	font-size: 14px;
	font-weight: 600;
}

.wcert-shifts .wcert-shift__notes input,
.wcert-shifts .wcert-shift__notes textarea {
	box-sizing: border-box;
	width: 100%;
}

.wcert-shifts .wcert-shift__notes .wcert-shift__button {
	margin-top: 8px;
}

.wcert-shift__hint {
	color: var(--wc-muted, #646970);
	font-weight: 400;
}

/* The members' Upcoming Events: a card for each, the date in a block. */
.wcert-events-list .wcert-events {
	display: grid;
	gap: 14px;
}

.wcert-events-list .wcert-events__item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: start;
	gap: 4px 18px;
	padding: 16px 18px;
	border: 1px solid var(--wc-edge, rgba(0, 0, 0, 0.12));
	border-radius: var(--wc-soft-sm, 14px);
	background: var(--wc-surface, #fff);
	box-shadow: 0 8px 22px rgba(28, 58, 40, 0.07);
}

.wcert-events-list .wcert-events__item {
	scroll-margin-top: calc(var(--wc-hdr-foot, 90px) + 12px);
}

.wcert-events-list .wcert-events__item.is-target {
	box-shadow: 0 0 0 3px var(--wc-gold, #c19a4a), 0 8px 22px rgba(28, 58, 40, 0.07);
}

.wcert-events-list .wcert-events__item[hidden] {
	display: none;
}

.wcert-events-list .wcert-events__item--needs {
	border-left: 5px solid var(--wc-gold, #e0952c);
	padding-left: 14px;
}

.wcert-events-list .wcert-events__item--mine {
	border-left: 5px solid var(--wc-green, #4f9e43);
	padding-left: 14px;
}

.wcert-events-list .wcert-events__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 9px 4px 8px;
	border-radius: 14px 5px 14px 5px;
	background: linear-gradient(160deg, var(--wc-green-t, #2b6f33), var(--wc-green, #4f9e43));
	color: #fff;
	line-height: 1.05;
	text-align: center;
}

.wcert-events__item--cancelled .wcert-events__date {
	background: #8c8f94;
}

.wcert-events__month,
.wcert-events__weekday {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wcert-events__weekday {
	font-weight: 600;
	opacity: 0.9;
}

.wcert-events__day {
	margin: 2px 0;
	font-size: 30px;
	font-weight: 800;
}

.wcert-events__body {
	min-width: 0;
}

.wcert-events-list .wcert-events__title {
	margin: 2px 0 8px;
	font-size: clamp(18px, 2.2vw, 23px);
	line-height: 1.2;
}

.wcert-events-list .wcert-events__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
}

.wcert-events-list .wcert-events__chips .wcert-events__badge {
	padding: 2px 10px;
	border: 1px solid var(--wc-edge2, rgba(0, 0, 0, 0.2));
	background: var(--wc-surface2, #f6f8f5);
	color: var(--wc-text, inherit);
	font-size: 12.5px;
	font-weight: 600;
}

.wcert-events-list .wcert-events__chips .wcert-events__badge--cancelled {
	border-color: rgba(179, 45, 46, 0.45);
	background: rgba(179, 45, 46, 0.08);
	color: #b32d2e;
}

.wcert-events-list .wcert-events__cancelled {
	margin: 4px 0;
	color: #b32d2e;
	font-weight: 700;
}

.wcert-events-list .wcert-events__body > details.wcert-shifts {
	margin-top: 12px;
}

.wcert-events-list .wcert-events__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.wcert-events-list .wcert-events__filter {
	padding: 7px 16px;
	border: 1px solid var(--wc-edge2, rgba(0, 0, 0, 0.2));
	border-radius: 999px;
	background: var(--wc-surface, #fff);
	color: var(--wc-text, inherit);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.wcert-events-list .wcert-events__filter.is-on {
	border-color: var(--wc-green-t, #2b6f33);
	background: var(--wc-green-t, #2b6f33);
	color: #fff;
}

@media (max-width: 560px) {
	.wcert-events-list .wcert-events__item {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 4px 12px;
		padding: 14px 12px;
	}

	.wcert-events__day {
		font-size: 24px;
	}
}

html.wc-dark .wcert-site .wcert-events-list .wcert-events__cancelled,
html.wc-dark .wcert-site .wcert-events-list .wcert-events__chips .wcert-events__badge--cancelled {
	color: #ff8f80;
}

html.wc-dark .wcert-site .wcert-events-list .wcert-events__filter.is-on {
	color: #10180f;
}

/* ---------- RSVPs on the members' event cards (0.40.0) ---------- */
.wcert-events-list .wcert-rsvp {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid var(--wc-edge, rgba(0, 0, 0, 0.12));
	border-radius: 12px;
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-events-list .wcert-rsvp__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
}

.wcert-rsvp__ask {
	font-weight: 700;
}

.wcert-rsvp__buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wcert-events-list .wcert-rsvp__button {
	min-height: 36px;
	padding: 0 14px;
	border: 1.5px solid var(--wc-edge2, rgba(0, 0, 0, 0.2));
	border-radius: 999px;
	background: var(--wc-surface, #fff);
	color: var(--wc-text, inherit);
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.wcert-events-list .wcert-rsvp__button:hover,
.wcert-events-list .wcert-rsvp__button:focus-visible {
	border-color: var(--wc-gold, #c19a4a);
}

.wcert-events-list .wcert-rsvp__button--going.is-on {
	border-color: var(--wc-green-t, #2b6f33);
	background: var(--wc-green-t, #2b6f33);
	color: #fff;
}

.wcert-events-list .wcert-rsvp__button--maybe.is-on {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-gold-soft, #f4e9cc);
	color: var(--wc-gold-t, #84602a);
}

.wcert-events-list .wcert-rsvp__button--no.is-on {
	border-color: #8c8f94;
	background: #8c8f94;
	color: #fff;
}

.wcert-events-list .wcert-rsvp__count,
.wcert-events-list .wcert-rsvp__who,
.wcert-events-list .wcert-rsvp__thanks {
	margin: 6px 0 0;
	font-size: 14px;
}

.wcert-rsvp__count {
	color: var(--wc-muted, #646970);
	font-weight: 600;
}

.wcert-rsvp__label {
	font-weight: 700;
}

.wcert-rsvp__thanks {
	color: var(--wc-green-t, #2b6f33);
	font-weight: 600;
}

.wcert-rsvp__thanks--error {
	color: #b32d2e;
}

.wcert-dashboard .wcert-coming__quiet {
	margin: 4px 0 0;
	font-size: 14px;
}

.wcert-dashboard .wcert-coming__quiet > summary {
	cursor: pointer;
	color: var(--wc-muted, #646970);
	font-weight: 600;
}

.wcert-dashboard .wcert-coming__quiet p {
	margin: 4px 0 0;
}

html.wc-dark .wcert-site .wcert-events-list .wcert-rsvp__button--going.is-on {
	color: #10180f;
}

/* The theme spaces every paragraph and form in page content by 2rem (and its stylesheet loads
   after this one), so the dashboard's own spacing below uses selectors with enough weight. */
.wcert-dashboard .wcert-dashboard__summary,
.wcert-dashboard .wcert-dashboard__add,
.wcert-dashboard .wcert-next-event {
	margin: 0 0 0.75rem;
}

.wcert-dashboard .wcert-dashboard__filters {
	margin: 0 0 0.75rem;
}

/* The Leader Dashboard page itself: a slim title band, less space around the content, and more
   width on big screens. */
.wcert-dashboard-page .entry-hero.page-hero-section .entry-header {
	min-height: 0;
	padding: 1rem 0;
}

.wcert-dashboard-page .content-area {
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}

.wcert-dashboard-page .entry-content-wrap {
	padding: 1.25rem;
}

@media (min-width: 1025px) {
	.wcert-dashboard-page .content-container.site-container,
	.wcert-dashboard-page .entry-hero .site-container {
		max-width: 1600px;
	}
}

@media (max-width: 767px) {
	.wcert-dashboard-page .entry-content-wrap {
		padding: 1rem;
	}
}

/* Back to the top, once the page has scrolled. */
.wcert-dashboard .wcert-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wcert-accent, #1d4e89);
	color: #fff;
	font-size: 1.3rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.wcert-dashboard .wcert-to-top:hover,
.wcert-dashboard .wcert-to-top:focus-visible {
	background: #1d2327;
	color: #fff;
}

.wcert-dashboard .wcert-to-top[hidden] {
	display: none;
}

/* Icons, status dots, the member list's cells, and the actions above it. */
.wcert-icon {
	vertical-align: -0.15em;
}

.wcert-icon-link,
.wcert-icon-tag {
	display: inline-block;
	margin-left: 0.15rem;
	text-decoration: none;
}

.wcert-dashboard__contact .wcert-icon-link {
	margin: 0 0.35rem 0 0;
	font-size: 1.1em;
}

.wcert-nowrap {
	white-space: nowrap;
}

.wcert-radio {
	color: var(--wcert-accent, #1d4e89);
}

.wcert-fire {
	color: #d4480f;
}

/* Status dots: green Active, blue In Training, orange Leave of Absence, red Inactive, black
   Resigned and Removed. They print in colour too. */
.wcert-dot {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: #8c8f94;
	vertical-align: -0.05em;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.wcert-dot--active {
	background: #2e7d32;
}

.wcert-dot--in-training {
	background: #1565c0;
}

.wcert-dot--leave-of-absence {
	background: #ef6c00;
}

.wcert-dot--inactive {
	background: #c62828;
}

.wcert-dot--resigned,
.wcert-dot--removed {
	background: #1d2327;
}

.wcert-dashboard__count {
	white-space: nowrap;
}

.wcert-dashboard__count .wcert-dot {
	margin-right: 0.3em;
}

.wcert-dashboard table.widefat .wcert-dashboard__pick {
	width: 1.5rem;
	padding-right: 0;
}

.wcert-dashboard table.widefat .wcert-dashboard__dot {
	width: 1rem;
	padding-right: 0;
}

.wcert-dashboard__name {
	line-height: 1.3;
}

.wcert-dashboard__title-line {
	display: block;
	font-size: 0.82em;
	line-height: 1.25;
	opacity: 0.8;
}

/* A committee lead. */
.wcert-lead {
	display: inline-block;
	margin-left: 0.25em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: #fff1cc;
	color: #6b4700;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 0.1em;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.wcert-dashboard .wcert-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 0.75rem;
}

.wcert-dashboard .wcert-dashboard__actions form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.wcert-dashboard__picked {
	font-size: 0.85em;
	opacity: 0.8;
}

.wcert-dashboard__picks select {
	max-width: 16rem;
}

.wcert-dashboard .button[aria-disabled="true"],
.wcert-dashboard .button:disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* A member's profile. */
.wcert-profile {
	container-type: inline-size;
}

.wcert-dashboard .wcert-profile__back {
	margin: 0 0 0.75rem;
}

.wcert-profile__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: flex-start;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wcert-line, rgba(0, 0, 0, 0.15));
}

.wcert-profile__photo img,
.wcert-profile__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.wcert-profile__initials {
	background: var(--wcert-accent, #1d4e89);
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
}

.wcert-profile__who {
	flex: 1 1 16rem;
	line-height: 1.4;
}

.wcert-dashboard .wcert-profile__who > * {
	margin: 0 0 0.15rem;
}

.wcert-dashboard .wcert-profile__who > :last-child {
	margin-bottom: 0;
}

.wcert-dashboard .wcert-profile__name {
	margin-bottom: 0.25rem;
	line-height: 1.2;
}

.wcert-profile__legal {
	opacity: 0.8;
}

.wcert-profile__flags {
	padding-top: 0.2rem;
}

.wcert-profile__actions {
	margin-left: auto;
}

.wcert-badge {
	display: inline-block;
	margin-right: 0.1em;
	padding: 0 0.6em;
	border-radius: 999px;
	background: #e9e9ea;
	color: #1d2327;
	font-size: 0.85em;
	font-weight: 600;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.wcert-badge--active {
	background: #e3f2e5;
	color: #1e6b34;
}

.wcert-badge--in-training {
	background: #e3edfb;
	color: #0d4a94;
}

.wcert-badge--leave-of-absence {
	background: #fdefe0;
	color: #9a4700;
}

.wcert-badge--inactive {
	background: #fbe9e9;
	color: #a3231f;
}

.wcert-badge--resigned,
.wcert-badge--removed {
	background: #1d2327;
	color: #fff;
}

/* The cards: one column on a phone; Personal Data and Training side by side with Uploads below
   them; on a wide page three columns, Personal Data the widest (so email addresses stay on one
   line) and Uploads the narrowest. Attendance and the notes run across under them. */
.wcert-profile__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@container (min-width: 40rem) {
	.wcert-profile__cards {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}

	.wcert-profile__card--uploads {
		grid-column: 1 / -1;
	}
}

@container (min-width: 62rem) {
	.wcert-profile__cards {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
	}

	.wcert-profile__card--uploads {
		grid-column: auto;
	}
}

.wcert-profile__card {
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wcert-line, rgba(0, 0, 0, 0.15));
	border-radius: 6px;
}

.wcert-dashboard .wcert-profile__card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05em;
}

.wcert-dashboard .wcert-profile__card p,
.wcert-dashboard .wcert-profile__card ul {
	margin: 0 0 0.5rem;
}

.wcert-dashboard .wcert-profile__card > :last-child {
	margin-bottom: 0;
}

.wcert-profile__card--wide {
	grid-column: 1 / -1;
}

.wcert-profile dl {
	display: grid;
	grid-template-columns: fit-content(45%) minmax(0, 1fr);
	gap: 0.3rem 0.75rem;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.45;
}

/* Labels plain and quieter, so the bold red and orange of expired and expiring items stand out. */
.wcert-profile dt {
	font-weight: 400;
	opacity: 0.75;
}

.wcert-profile dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: break-word;
}

/* Email addresses stay on one line; one too long for its card ends in "…" (hover shows it all,
   and a click still uses the whole address). */
.wcert-profile__email {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

@container (max-width: 30rem) {
	.wcert-profile dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.wcert-profile dt {
		margin-top: 0.4rem;
		font-size: 0.85em;
	}

	.wcert-profile dt:first-child {
		margin-top: 0;
	}
}

.wcert-profile .wcert-records__late {
	color: #b32d2e;
	font-weight: 700;
}

.wcert-profile .wcert-records__soon {
	color: #b45309;
	font-weight: 700;
}

.wcert-muted {
	opacity: 0.6;
}

.wcert-dashboard .wcert-profile__list {
	padding-left: 1.1rem;
}

/* Attendance: Meetings & Drills, Events and Special training side by side (stacked on a phone). */
.wcert-attendance {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem 1.5rem;
}

@container (min-width: 40rem) {
	.wcert-attendance {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wcert-dashboard .wcert-attendance h4 {
	margin: 0 0 0.35rem;
	font-size: 0.95em;
}

.wcert-attendance__count {
	margin-left: 0.25em;
	font-size: 0.9em;
	font-weight: 400;
	opacity: 0.75;
}

.wcert-dashboard .wcert-attendance__column > :last-child {
	margin-bottom: 0;
}

/* Committees. */
.wcert-dashboard .wcert-committee__purpose,
.wcert-dashboard .wcert-committee__leads {
	margin: 0 0 0.5rem;
}

.wcert-dashboard .wcert-inline-form {
	display: inline;
	margin: 0 0.6rem 0 0;
}

.wcert-dashboard__change {
	white-space: nowrap;
}

.wcert-pick-list {
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wcert-line, rgba(0, 0, 0, 0.15));
	border-radius: 4px;
}

.wcert-pick-list label {
	display: block;
	padding: 0.15rem 0;
}

.wcert-committee-edit summary {
	font-weight: 600;
	cursor: pointer;
}

.wcert-dashboard .wcert-box h3 {
	margin: 0.5rem 0;
}

/* Printing the dashboard prints just its content. */
@media print {
	body * {
		visibility: hidden;
	}

	.wcert-dashboard,
	.wcert-dashboard * {
		visibility: visible;
	}

	.wcert-dashboard {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.wcert-dashboard__nav,
	.wcert-dashboard__filters,
	.wcert-dashboard__actions,
	.wcert-dashboard__pick,
	.wcert-dashboard .button,
	.wcert-dashboard .wcert-to-top,
	.wcert-icon-link {
		display: none !important;
	}

	.wcert-dashboard a {
		color: inherit;
		text-decoration: none;
	}
}

@media (max-width: 700px) {
	.wcert-dashboard .form-table th,
	.wcert-dashboard .form-table td {
		display: block;
		width: auto;
		padding: 0.25rem 0;
	}

	.wcert-dashboard table.widefat {
		display: block;
		overflow-x: auto;
	}

	/* The member list as cards: the tick box and status dot at the left; the name and title; the
	   platoon and contact icons; then the notes. */
	.wcert-dashboard table.wcert-dashboard__members,
	.wcert-dashboard table.wcert-dashboard__members tbody,
	.wcert-dashboard table.wcert-dashboard__members tr {
		display: block;
		overflow: visible;
	}

	.wcert-dashboard table.wcert-dashboard__members thead {
		display: none;
	}

	.wcert-dashboard table.wcert-dashboard__members tr {
		position: relative;
		padding: 0.5rem 0 0.5rem 2.7rem;
		border-bottom: 1px solid var(--wcert-line);
	}

	.wcert-dashboard table.wcert-dashboard__members--plain tr {
		padding-left: 1.4rem;
	}

	.wcert-dashboard table.wcert-dashboard__members td {
		display: inline;
		padding: 0 0.6rem 0 0;
		border: 0;
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__pick {
		position: absolute;
		top: 0.4rem;
		left: 0.15rem;
		width: auto;
		padding: 0;
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__dot {
		position: absolute;
		top: 0.5rem;
		left: 1.6rem;
		width: auto;
		padding: 0;
	}

	.wcert-dashboard table.wcert-dashboard__members--plain td.wcert-dashboard__dot {
		left: 0.25rem;
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__name,
	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__notes,
	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__change {
		display: block;
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__notes {
		padding-top: 0.25rem;
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__platoon:not(:empty)::before {
		content: "Platoon ";
	}

	.wcert-dashboard table.wcert-dashboard__members td.wcert-dashboard__platoon:empty {
		display: none;
	}

	.wcert-flag {
		white-space: normal;
	}
}

/* ---------- The Member Portal in the new design (0.17.0) ----------
   Colours and corners come from the site design's tokens when it is on, with plain values
   otherwise. Some selectors repeat a class to outweigh the theme's link and button styles. */

/* Classic themes such as Kadence wrap a group's blocks in one more box: here it takes no part in
   the layout, so the panels and grids below work with or without it. */
.wcert-panel > .wp-block-group__inner-container,
.wcert-portal-home > .wp-block-group__inner-container,
.wcert-portal-top > .wp-block-group__inner-container,
.wcert-portal-grid > .wp-block-group__inner-container,
.wcert-member-access > .wp-block-group__inner-container {
	display: contents;
}

/* Panels: the portal's boxes, like the public pages' cards. */
.wcert-panel {
	box-sizing: border-box;
	background: var(--wc-surface, #fff);
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft, 28px 10px 28px 10px);
	box-shadow: var(--wc-shadow, 0 18px 40px rgba(28, 58, 40, 0.1));
	padding: 24px 26px;
}

.wcert-panel > :first-child,
.wcert-panel > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

.wcert-panel > :last-child,
.wcert-panel > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

.wcert-panel .wcert-panel__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wc-gold-t, #84602a);
}

.wcert-panel .wcert-panel__eyebrow::before {
	content: "";
	width: 22px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wc-green, #4f9e43), var(--wc-gold, #c19a4a));
}

.wcert-panel .wcert-panel__title,
.wcert-panel > h2,
.wcert-panel > .wp-block-group__inner-container > h2 {
	margin: 0 0 12px;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.15;
}

.wcert-panel .wcert-panel__more {
	margin: 14px 0 0;
	font-weight: 700;
}

@media (max-width: 600px) {
	.wcert-panel {
		padding: 20px 16px;
	}
}

/* Buttons: gold, and outlined. */
.wcert-btn.wcert-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	color: #20180a;
	background: linear-gradient(115deg, #efd9a3, #cfa752 50%, #ad7f33);
	background-size: 180% 100%;
	box-shadow: 0 10px 22px rgba(193, 154, 74, 0.28);
	transition: transform 0.25s ease, background-position 0.5s ease, box-shadow 0.25s ease;
}

.wcert-btn.wcert-btn:hover,
.wcert-btn.wcert-btn:focus-visible {
	color: #20180a;
	background: linear-gradient(115deg, #efd9a3, #cfa752 50%, #ad7f33);
	background-size: 180% 100%;
	background-position: 100% 0;
	transform: translateY(-2px);
}

.wcert-btn.wcert-btn--line,
.wcert-btn.wcert-btn--line:hover,
.wcert-btn.wcert-btn--line:focus-visible {
	color: var(--wc-text, #1d2a23);
	background: var(--wc-surface, #fff);
	border-color: var(--wc-edge2, rgba(29, 52, 38, 0.2));
	box-shadow: none;
}

.wcert-btn.wcert-btn--line:hover,
.wcert-btn.wcert-btn--line:focus-visible {
	background: var(--wc-bg2, #e9efe7);
	border-color: var(--wc-gold, #c19a4a);
}

.wcert-btn.wcert-btn--text,
.wcert-btn.wcert-btn--text:hover {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wc-green-t, #2b6f33);
	text-decoration: underline;
	transform: none;
}

.wcert-btn.wcert-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.wcert-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* Signed in: who, and their account links, in one line. */
.wcert-signed-in {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding: 14px 18px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft, 28px 10px 28px 10px);
	background: var(--wc-surface, #fff);
	box-shadow: var(--wc-shadow, 0 18px 40px rgba(28, 58, 40, 0.1));
}

.wcert-signed-in__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(140deg, #5aa94b, #2b6f33);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.wcert-signed-in .wcert-signed-in__who {
	margin: 0;
	line-height: 1.3;
}

.wcert-signed-in__label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wc-muted, #56655d);
}

.wcert-signed-in__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.wcert-signed-in .wcert-signed-in__links a {
	padding: 6px 12px;
	border: 1px solid var(--wc-edge2, rgba(29, 52, 38, 0.2));
	border-radius: 999px;
	color: var(--wc-text, #1d2a23);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wcert-signed-in .wcert-signed-in__links a:hover,
.wcert-signed-in .wcert-signed-in__links a:focus-visible {
	border-color: var(--wc-gold, #c19a4a);
	background: var(--wc-bg2, #e9efe7);
}

/* Signed in: the member's committees, under the buttons (0.22.0). */
.wcert-signed-in .wcert-signed-in__committees {
	flex: 1 0 100%;
	margin: 2px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	font-size: 14.5px;
	line-height: 1.5;
}

.wcert-signed-in__committees .wcert-signed-in__label {
	margin-bottom: 2px;
}

/* "You": the signed-in member, in committee lists (0.22.0). */
.wcert-you {
	display: inline-block;
	margin-left: 0.25em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: #e2f2dd;
	color: #1d5a2a;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 0.1em;
}

/* The portal's Committees card: each committee and its lead (0.22.0). The class twice outweighs
   the theme's list indent. */
.wcert-committees-card.wcert-committees-card {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-committees-card .wcert-committees-card__item {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
}

.wcert-committees-card__name {
	display: block;
	font-weight: 700;
}

.wcert-committees-card__people {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	line-height: 1.6;
}

.wcert-committees-card__sep {
	color: var(--wc-muted, #56655d);
}

/* A committee's lead (0.23.0): a gold star before the name. */
.wcert-star {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.2em;
	vertical-align: -0.15em;
}

.wcert-star svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: #d9a520;
	stroke: #a8780f;
	stroke-width: 1;
	stroke-linejoin: round;
}

.wcert-signed-in__committees .wcert-star {
	margin: 0 0 0 0.25em;
}

.wcert-committees-key {
	margin: 12px 0 0;
	color: var(--wc-muted, #56655d);
	font-size: 13.5px;
}

/* The Committees page: a panel for each (0.22.0). */
.wcert-committees {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 20px;
	align-items: start;
}

.wcert-committee {
	scroll-margin-top: 140px;
}

.wcert-committee.is-mine {
	border-color: var(--wc-gold, #c19a4a);
}

.wcert-committee .wcert-committee__purpose {
	margin: 0 0 8px;
	color: var(--wc-muted, #56655d);
}


.wcert-committee .wcert-committee__people {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-committee__people li {
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--wc-edge2, rgba(29, 52, 38, 0.2));
	border-radius: 999px;
	background: var(--wc-surface2, #f6f8f5);
	font-size: 14.5px;
}

.wcert-committee__people li.is-lead {
	border-color: var(--wc-gold, #c19a4a);
}

.wcert-committees__note {
	margin-top: 22px;
	color: var(--wc-muted, #56655d);
}

/* Under Signed in: the member's next shift (0.17.1). */
.wcert-portal-me {
	display: grid;
	gap: 14px;
}

.wcert-next-shift {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	padding: 14px 18px 16px 24px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft, 28px 10px 28px 10px);
	background: var(--wc-surface, #fff);
	box-shadow: var(--wc-shadow, 0 18px 40px rgba(28, 58, 40, 0.1));
}

.wcert-next-shift::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background: linear-gradient(180deg, #5aa94b, #2b6f33);
}

.wcert-next-shift--waiting::before {
	background: linear-gradient(180deg, #f0b35e, #e0952c);
}

.wcert-next-shift--none::before {
	background: var(--wc-edge2, rgba(29, 52, 38, 0.2));
}

.wcert-next-shift.wcert-next-shift p {
	margin: 0;
}

.wcert-next-shift .wcert-next-shift__label {
	margin-bottom: 4px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wc-muted, #56655d);
}

.wcert-next-shift .wcert-next-shift__when {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--wc-text, #1d2a23);
}

.wcert-next-shift .wcert-next-shift__what {
	margin-top: 2px;
	line-height: 1.35;
}

.wcert-next-shift .wcert-next-shift__where {
	margin-top: 2px;
	font-size: 14px;
	color: var(--wc-muted, #56655d);
}

.wcert-next-shift .wcert-next-shift__wait {
	display: inline-block;
	margin-top: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #fff1d6;
	color: #7a4b00;
	font-size: 13px;
	font-weight: 700;
}

.wcert-next-shift .wcert-next-shift__link {
	display: inline-block;
	margin-top: 10px;
	font-weight: 700;
}

/* The portal's home page: the welcome and Signed in side by side, then panels in two columns. */
.wcert-portal-top,
.wcert-portal-grid {
	display: grid;
	gap: 20px;
	align-items: start;
	margin-bottom: 24px;
}

.wcert-portal-top {
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.wcert-portal-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wcert-portal-top > *,
.wcert-portal-grid > *,
.wcert-portal-top > .wp-block-group__inner-container > *,
.wcert-portal-grid > .wp-block-group__inner-container > * {
	margin: 0;
}

.wcert-portal-home > .wcert-panel,
.wcert-portal-home > .wp-block-group__inner-container > .wcert-panel,
.wcert-leadership-wrap > .wcert-panel {
	margin: 0 0 24px;
}

/* Lists of posts inside a panel (the announcements): one line between them, the date small. */
.wcert-panel .wcert-query .wcert-card {
	gap: 4px;
	margin: 0;
	padding: 14px 0;
	border-top: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.wcert-panel .wcert-query .wcert-card > .wp-block-group__inner-container {
	display: contents;
}

.wcert-panel .wcert-query .wcert-card .wp-block-post-date,
.wcert-panel .wcert-query .wcert-card .wp-block-post-excerpt,
.wcert-panel .wcert-query .wcert-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wcert-panel .wcert-query .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-panel .wcert-query li:first-child .wcert-card {
	border-top: 0;
	padding-top: 4px;
}

.wcert-panel .wcert-query .wp-block-post-date {
	font-size: 13.5px;
	color: var(--wc-muted, #5b6b60);
}

.wcert-panel .wcert-query .wp-block-post-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
}

.wcert-panel .wcert-query .wp-block-post-excerpt__excerpt {
	margin: 0;
}

@media (max-width: 900px) {
	.wcert-portal-top,
	.wcert-portal-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Events whose shifts still need people, and the shifts folded under each event. */
.wcert-events__item--needs {
	border-left: 4px solid #e0952c;
	padding-left: 12px;
}

details.wcert-shifts {
	border-color: var(--wc-edge2, rgba(0, 0, 0, 0.15));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
}

.wcert-shifts > .wcert-shifts__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	cursor: pointer;
	list-style: none;
}

.wcert-shifts > .wcert-shifts__summary::-webkit-details-marker {
	display: none;
}

.wcert-shifts > .wcert-shifts__summary::before {
	content: "";
	width: 8px;
	height: 8px;
	margin: 0 2px 2px 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.wcert-shifts[open] > .wcert-shifts__summary::before {
	transform: rotate(45deg);
}

.wcert-shifts .wcert-shifts__summary .wcert-shifts__heading {
	margin: 0;
}

.wcert-shifts__count {
	font-size: 0.9em;
	font-weight: 600;
	opacity: 0.75;
}

.wcert-shifts__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 700;
	vertical-align: middle;
}

.wcert-shifts__badge--needs {
	border-color: #e3b54e;
	background: #fdf0d2;
	color: #7a4b00;
}

.wcert-shifts__badge--needs::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e0952c;
	animation: wcert-needs-pulse 2.2s ease-out infinite;
}

.wcert-shifts__badge--mine {
	border-color: #9bd3a5;
	background: #e3f2e5;
	color: #1e6b34;
}

.wcert-shifts[open] .wcert-shifts__list {
	margin-top: 0.75rem;
}

@keyframes wcert-needs-pulse {
	0% { box-shadow: 0 0 0 0 rgba(224, 149, 44, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(224, 149, 44, 0); }
	100% { box-shadow: 0 0 0 0 rgba(224, 149, 44, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wcert-shifts__badge--needs::before {
		animation: none;
	}
}

/* My Security. */
.wcert-security {
	display: grid;
	gap: 20px;
}

.wcert-security .wcert-security__form p {
	margin: 0 0 12px;
}

.wcert-security .wcert-security__form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.wcert-security .wcert-security__form input[type="password"],
.wcert-security .wcert-security__form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
}

.wcert-security .wcert-security__help {
	font-size: 14px;
	color: var(--wc-muted, #56655d);
}

.wcert-security__reset {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
}

.wcert-security__reset p {
	margin: 0 0 10px;
}

.wcert-security__inline {
	display: inline;
	margin: 0;
}

.wcert-security .wcert-security__status {
	display: inline-flex;
	margin: 6px 0 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-weight: 700;
	background: #fdf0d2;
	color: #7a4b00;
}

.wcert-security .wcert-security__status.is-on {
	background: #e3f2e5;
	color: #1e6b34;
}

.wcert-security .wcert-security__methods {
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.wcert-security__method {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	align-items: center;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--wc-edge, rgba(29, 52, 38, 0.1));
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-surface2, #f6f8f5);
}

.wcert-security__method h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
}

.wcert-security__method .wcert-security__what p {
	margin: 4px 0 0;
	font-size: 14.5px;
	color: var(--wc-muted, #56655d);
}

.wcert-security__pill {
	padding: 1px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--wc-bg2, #e9efe7);
}

.wcert-security__method.is-on .wcert-security__pill {
	background: #e3f2e5;
	color: #1e6b34;
}

.wcert-security__setup {
	grid-column: 1 / -1;
	padding-top: 12px;
	border-top: 1px dashed var(--wc-edge2, rgba(29, 52, 38, 0.2));
}

.wcert-security__setup ol {
	display: grid;
	gap: 14px;
	margin: 0 0 10px 1.3em;
	padding: 0;
}

.wcert-security__qr {
	margin: 10px 0;
}

.wcert-security__qr svg {
	display: block;
	width: 184px;
	height: 184px;
	padding: 8px;
	border-radius: 10px;
	background: #fff;
}

.wcert-security__key {
	padding: 2px 6px;
	font-size: 15px;
	letter-spacing: 0.06em;
}

.wcert-security .wcert-security__confirm-code input {
	max-width: 180px;
	font-size: 20px;
	letter-spacing: 0.15em;
}

.wcert-security__codes {
	margin: 14px 0;
	padding: 16px 18px;
	border: 2px dashed var(--wc-gold, #c19a4a);
	border-radius: var(--wc-soft-sm, 16px 5px 16px 5px);
	background: var(--wc-gold-soft, #f4e9cc);
}

.wcert-security__codes h3 {
	margin: 0 0 6px;
}

.wcert-security .wcert-security__code-list {
	margin: 10px 0 10px 1.4em;
	columns: 2;
	font-size: 17px;
}

.wcert-security__confirm {
	margin: 12px 0;
	padding: 12px 16px;
	border-left: 4px solid #dba617;
	border-radius: 6px;
	background: rgba(219, 166, 23, 0.1);
}

.wcert-security__confirm p {
	margin: 0 0 8px;
}

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

/* The org chart ([wcert_leadership]): rows of boxes on a centre line, as in the team's chart. */
.wcert-org {
	--wcert-org-line: var(--wc-green-t, #2b6f33);
	position: relative;
	display: grid;
	gap: 22px;
	max-width: 900px;
	margin: 12px auto 8px;
	padding: 6px 0;
}

.wcert-org::before {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--wcert-org-line);
	opacity: 0.55;
}

.wcert-org__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 18px;
	align-items: center;
}

.wcert-org__row--pair::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16.66%;
	left: 16.66%;
	height: 2px;
	margin-top: -1px;
	background: var(--wcert-org-line);
	opacity: 0.55;
}

.wcert-org__slot {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 10px;
}

.wcert-org__slot--left {
	grid-column: 1;
	justify-items: end;
}

.wcert-org__slot--center {
	grid-column: 2;
	justify-items: center;
}

.wcert-org__slot--right {
	grid-column: 3;
	justify-items: start;
}

/* The top row: its box on the centre line (equal outer columns), staff positions to the right. */
.wcert-org__row--top {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.wcert-org__side {
	position: relative;
	display: grid;
	gap: 10px;
	justify-items: start;
	padding-left: 28px;
}

.wcert-org__side::before {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 26px;
	left: 0;
	width: 2px;
	background: var(--wcert-org-line);
	opacity: 0.55;
}

.wcert-org__side .wcert-org__box::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: 28px;
	height: 2px;
	margin-top: -1px;
	background: var(--wcert-org-line);
	opacity: 0.55;
}

.wcert-org__box {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	gap: 1px;
	justify-items: center;
	min-width: 190px;
	max-width: 260px;
	padding: 11px 18px 12px;
	border: 2px solid var(--wc-green, #4f9e43);
	border-radius: 18px 6px 18px 6px;
	background: linear-gradient(180deg, #e3f2dc, #cfe8c4);
	color: #183022;
	text-align: center;
	box-shadow: 0 8px 18px rgba(28, 58, 40, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wcert-org__box:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(28, 58, 40, 0.18);
}

.wcert-org__box--small {
	min-width: 150px;
	padding: 8px 12px 9px;
}

.wcert-org__box--group {
	min-width: 220px;
	border-color: #184d2c;
	background: linear-gradient(180deg, #2b6f33, #1f5a32);
	color: #fff;
}

.wcert-org__role {
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.25;
	color: #184d2c;
}

.wcert-org__box--group .wcert-org__role {
	font-size: 16px;
	color: #fff;
}

.wcert-org__name {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.3;
}

.wcert-org__note {
	font-size: 13px;
	color: #3f5a48;
}

/* Phones: the pairs stay side by side on the centre line, the staff positions under the top box. */
@media (max-width: 760px) {
	.wcert-org {
		gap: 12px;
	}

	.wcert-org__side::before,
	.wcert-org__side .wcert-org__box::before {
		display: none;
	}

	.wcert-org__row--top {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		justify-items: center;
	}

	.wcert-org__row--top .wcert-org__spacer {
		display: none;
	}

	.wcert-org__row--top .wcert-org__slot {
		grid-column: auto;
	}

	.wcert-org__side {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: stretch;
		padding-left: 0;
	}

	.wcert-org__row--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 16px;
	}

	.wcert-org__row--pair::after {
		right: 25%;
		left: 25%;
	}

	.wcert-org__row--pair .wcert-org__slot--left {
		grid-column: 1;
		justify-items: stretch;
	}

	.wcert-org__row--pair .wcert-org__slot--right {
		grid-column: 2;
		justify-items: stretch;
	}

	.wcert-org__row--pair .wcert-org__slot--center {
		grid-column: 1 / -1;
		order: -1;
	}

	.wcert-org__slot:empty {
		display: none;
	}

	.wcert-org__row--single {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.wcert-org__row--single .wcert-org__slot {
		grid-column: auto;
	}

	.wcert-org__box,
	.wcert-org__box--small {
		width: 100%;
		min-width: 0;
		max-width: none;
		padding: 9px 10px 10px;
	}

	.wcert-org__row--top .wcert-org__slot .wcert-org__box,
	.wcert-org__row--single .wcert-org__box {
		width: auto;
		min-width: 60%;
	}

	.wcert-org__role {
		font-size: 13px;
	}

	.wcert-org__name {
		font-size: 14px;
	}

	.wcert-org__note {
		font-size: 12px;
	}
}

html.wc-dark .wcert-org {
	--wcert-org-line: #7cc46b;
}

html.wc-dark .wcert-org__box {
	border-color: #58a848;
	background: linear-gradient(180deg, #1f3a27, #18301f);
	color: #e3e9e5;
}

html.wc-dark .wcert-org__role {
	color: #a8dd98;
}

html.wc-dark .wcert-org__note {
	color: #9fb0a7;
}

html.wc-dark .wcert-org__box--group {
	border-color: #7cc46b;
	background: linear-gradient(180deg, #58a848, #3f8a33);
	color: #0f1a12;
}

html.wc-dark .wcert-org__box--group .wcert-org__role {
	color: #0f1a12;
}

/* 0.27.0: a box's pop-out, with each person's email: on hover, keyboard focus, or a tap (site.js). */
.wcert-org__item {
	position: relative;
	z-index: 1;
}

.wcert-org__item:hover,
.wcert-org__item:focus-within,
.wcert-org__item.is-open {
	z-index: 6;
}

/* Each slot is a layer of its own (above the chart's lines): the one with the open pop-out comes
   above the rows after it. site.js marks it for focus and taps; :has() for hover, in a rule of its
   own so browsers without it skip only that. */
.wcert-org__slot.is-raised {
	z-index: 8;
}

.wcert-org__slot:has(.wcert-org__item:hover) {
	z-index: 8;
}

.wcert-org button.wcert-org__box--pop {
	margin: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* The theme restyles every button on hover, focus and tap; a box keeps its own look. */
.wcert-org button.wcert-org__box--pop:hover,
.wcert-org button.wcert-org__box--pop:focus,
.wcert-org button.wcert-org__box--pop:active {
	border: 2px solid var(--wc-green, #4f9e43);
	background: linear-gradient(180deg, #e3f2dc, #cfe8c4);
	color: #183022;
}

html.wc-dark .wcert-org button.wcert-org__box--pop:hover,
html.wc-dark .wcert-org button.wcert-org__box--pop:focus,
html.wc-dark .wcert-org button.wcert-org__box--pop:active {
	border-color: #58a848;
	background: linear-gradient(180deg, #1f3a27, #18301f);
	color: #e3e9e5;
}

.wcert-org button.wcert-org__box--pop:focus-visible {
	outline: 3px solid var(--wc-gold, #c19a4a);
	outline-offset: 3px;
}

.wcert-org__pop {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 7;
	box-sizing: border-box;
	width: max-content;
	min-width: 200px;
	max-width: min(300px, 86vw);
	padding: 12px 15px 13px;
	border: 1px solid rgba(29, 52, 38, 0.16);
	border-radius: 14px 5px 14px 5px;
	background: #ffffff;
	color: #183022;
	text-align: left;
	box-shadow: 0 18px 36px rgba(20, 48, 30, 0.22);
	transform: translateX(-50%);
}

/* A bridge over the gap, so the pointer can move from the box onto the pop-out. */
.wcert-org__pop::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 12px;
}

.wcert-org__item:hover .wcert-org__pop,
.wcert-org__item.is-open .wcert-org__pop {
	display: block;
}

/* Focus on the box or its email links (site.js). */
.wcert-org__item.is-focused .wcert-org__pop {
	display: block;
}

/* Closed with a second tap or Escape: hidden until the pointer or focus leaves the box. */
.wcert-org__item.is-dismissed .wcert-org__pop {
	display: none;
}

.wcert-org .wcert-org__pop-role {
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	color: #84602a;
}

.wcert-org ul.wcert-org__pop-people {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wcert-org .wcert-org__pop-people li {
	display: grid;
	margin: 0;
	padding: 0;
}

.wcert-org__pop-name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

.wcert-org .wcert-org__pop a {
	font-size: 14px;
	color: #2b6f33;
	overflow-wrap: anywhere;
}

.wcert-org .wcert-org__pop-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: #56655d;
}

html.wc-dark .wcert-org__pop {
	border-color: rgba(255, 255, 255, 0.14);
	background: #1a2520;
	color: #e3e9e5;
}

html.wc-dark .wcert-org .wcert-org__pop-role {
	color: #d9bd78;
}

html.wc-dark .wcert-org .wcert-org__pop a {
	color: #7cc46b;
}

html.wc-dark .wcert-org .wcert-org__pop-note {
	color: #9fb0a7;
}

/* Near the edges the pop-out lines up with its box rather than overhanging the page. */
@media (max-width: 760px) {
	.wcert-org__slot--left .wcert-org__pop {
		left: 0;
		transform: none;
	}

	.wcert-org__slot--right .wcert-org__pop {
		right: 0;
		left: auto;
		transform: none;
	}
}

/* 0.28.0: the photo review's album: the list, why one is suggested, and a new album's name. */
.wcert-album-select {
	max-width: 100%;
}

.wcert-album-why {
	margin: 6px 0 0;
}

.wcert-album-new {
	margin: 10px 0 4px;
}

.wcert-album-new[hidden] {
	display: none;
}

.wcert-album-new label {
	display: block;
	margin-bottom: 3px;
	font-weight: 600;
}