/* ============================================================
   The account (2026-10-25; inc/account.php, inc/resources.php,
   woocommerce/myaccount/*, template-parts/account/*): designs
   docs/design-renders/account-*-v1 (desktop 1440 and mobile 402;
   tablets not designed). Loaded on the account page only
   (inc/enqueue.php). Tokens in main.css ("The account").
   ============================================================ */

/* ---------- The layout: sidebar (from 1024) and bottom bar (below) ---------- */

.account__layout {
	background-color: var(--color-surface);
}

.account__main {
	padding: 48px var(--gutter) var(--section-pad-y);
}

.account__sidebar {
	display: none;
}

@media (min-width: 1024px) {
	/* The sidebar's column: the page's left margin plus the drawn 338px
	   (x 0-418 at 1440, its menu from x 80); the content from 50px further
	   on, up to the container's right edge. */
	.account__layout {
		display: grid;
		grid-template-columns: minmax(var(--gutter), 1fr) var(--account-sidebar-w) minmax(0, calc(var(--container-max) - var(--account-sidebar-w))) minmax(var(--gutter), 1fr);
		min-height: 60vh;
	}

	.account__sidebar {
		display: block;
		grid-column: 1 / 3;
		padding: 60px 12px 80px calc(100% - var(--account-sidebar-w));
		background-color: var(--account-sidebar-bg);
	}

	.account__main {
		grid-column: 3 / 5;
		padding: 56px max(var(--gutter), calc(100% - var(--container-max) + var(--account-sidebar-w))) var(--section-pad-y) 50px;
	}
}

.account__sidebar-title {
	margin: 0 0 40px;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-h3);
	line-height: 1;
}

.account__title {
	margin: 0;
	font-size: var(--fs-h2);
}

.account__intro {
	margin: 20px 0 0;
}

/* The menu */
.account-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-menu__link {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-heading-on-dark);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.account-menu__icon {
	flex: none;
	color: var(--account-menu-icon);
}

.account-menu--sidebar .account-menu__list {
	display: grid;
	gap: 18px;
}

.account-menu--sidebar .account-menu__link {
	min-height: 54px;
	padding: 0 12px;
	border-left: var(--border-accent) solid transparent;
	border-radius: 4px;
	font-size: var(--fs-account-menu);
	transition: background-color var(--transition);
}

.account-menu--sidebar .is-current .account-menu__link {
	border-left-color: var(--color-accent);
	background-color: var(--account-menu-current-bg);
}

@media (hover: hover) {
	.account-menu--sidebar .account-menu__link:hover {
		background-color: var(--account-menu-current-bg);
	}
}

.account-menu__link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Phones and tablets: the bottom bar (account-menu-mobile-v1). */
.account-menu--bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	background-color: var(--account-bar-bg);
	box-shadow: var(--shadow-account-bar);
}

.account-menu--bar .account-menu__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 40rem;
	margin-inline: auto;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.account-menu--bar .account-menu__link {
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: var(--account-bar-h);
	font-size: var(--fs-small);
}

.account-menu--bar .is-current .account-menu__label {
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* Room under the page for the bar, and for whatever the browser brings into
   view (keyboard focus, a link to a field): never under the bar. */
body:has(.account-menu--bar) {
	padding-bottom: var(--account-bar-h);
}

html:has(.account-menu--bar) {
	scroll-padding-bottom: var(--account-bar-h);
}

@media (min-width: 1024px) {
	.account-menu--bar {
		display: none;
	}

	body:has(.account-menu--bar) {
		padding-bottom: 0;
	}

	html:has(.account-menu--bar) {
		scroll-padding-bottom: 0;
	}
}

/* ---------- My Bookings ---------- */

.account-bookings {
	margin-top: 44px;
}

.account-bookings__title {
	margin: 0 0 28px;
	font-size: var(--fs-h3);
}

.account-bookings__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.booking-card {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 32px 28px;
	border-radius: var(--radius-md);
	background-color: var(--account-card-upcoming);
}

.booking-card--past {
	background-color: var(--account-card-past);
}

.booking-card__media {
	display: none;
}

.booking-card__body {
	display: grid;
	gap: 10px;
}

.booking-card__title {
	order: 0;
	margin: 0;
	font-size: var(--fs-card-title-lg);
	line-height: 1.1;
}

.booking-card__status {
	justify-self: start;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--account-badge-booked-bg);
	color: var(--account-badge-booked-fg);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.booking-card__status--attended {
	background-color: var(--account-badge-attended-bg);
	color: var(--account-badge-attended-fg);
}

.booking-card__meta {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

.booking-card__link {
	justify-self: start;
	color: var(--account-link);
	font-weight: var(--fw-semibold);
}

.booking-card__link:focus-visible {
	outline: none;
}

.booking-card:has(.booking-card__link:focus-visible) {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

/* Hover and keyboard focus (Emma 2026-10-26): the link turns Navy, its
   arrow with it, and the arrow slides (main.css). The link is stretched
   over the card, so pointing anywhere on the card counts. */
.booking-card__link:focus-visible {
	color: var(--account-link-hover);
}

@media (hover: hover) {
	.booking-card__link:hover {
		color: var(--account-link-hover);
	}
}

@media (min-width: 768px) {
	/* Photo left (156 x 127), text, the link on the right (as drawn). */
	.booking-card {
		grid-template-columns: 156px minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 22px;
		padding: 0 14px 0 0;
		overflow: hidden;
	}

	.booking-card__media {
		display: block;
		align-self: stretch;
		min-height: 127px;
	}

	.booking-card__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	}

	.booking-card__body {
		gap: 4px;
		padding: 22px 0;
	}

	/* The badge on the photo's top-left corner. */
	.booking-card__status {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		pointer-events: none;
	}

	.booking-card:not(:has(.booking-card__media)) {
		padding-left: 22px;
	}

	.booking-card:not(:has(.booking-card__media)) .booking-card__status {
		position: static;
		margin-bottom: 6px;
	}
}

.account-empty {
	display: grid;
	gap: 20px;
	justify-items: start;
	margin-top: 40px;
	padding: 32px;
	border-radius: var(--radius-md);
	background-color: var(--account-card-upcoming);
}

.account-empty p {
	margin: 0;
}

/* ---------- One booking: the hero ---------- */

/* From 1024px the text is centred down the photo (440 x 370 at 1440, as
   drawn; About's hero starts its text at the photo's top). */
@media (min-width: 1024px) {
	.account-hero .page-hero__split {
		grid-template-columns: minmax(0, 440fr) minmax(0, 789fr);
		column-gap: 67px;
		align-items: center;
	}

	.account-hero .page-hero__media {
		aspect-ratio: 440 / 370;
	}
}

.account-hero__badge {
	justify-self: start;
	margin: 0 0 16px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background-color: var(--color-level-foundation);
	color: var(--color-navy);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.account-hero__badge--progression {
	background-color: var(--color-level-progression);
}

.account-hero__badge--development {
	background-color: var(--color-level-development);
}

.account-hero__date {
	margin: 18px 0 0;
	color: var(--color-text-on-dark);
	font-size: var(--fs-intro);
}

.account-hero__action {
	margin: 18px 0 0;
}

.account-hero__calendar {
	color: var(--color-text-on-dark);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
}

.account-hero__calendar .icon {
	color: var(--color-accent);
}

/* ---------- One booking: the sections ---------- */

.account-section-title {
	margin: 0;
	font-size: var(--fs-h2);
}

.account-section-intro {
	margin: 20px 0 0;
}

.account-details {
	background-color: var(--account-details-bg);
}

.account-details .account-section-title {
	margin-bottom: 28px;
}

/* The details (drawn as a ruled White table, three across). */
.account-details__grid {
	display: grid;
	margin: 0;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	overflow: hidden;
}

.account-details__item {
	padding: 14px 22px;
	border-bottom: var(--border-hairline) solid var(--color-border);
	font-size: var(--fs-ui-lg);
}

.account-details__item:last-child {
	border-bottom: 0;
}

.account-details__item dt,
.account-details__item dd {
	display: inline;
	margin: 0;
}

.account-details__item dt {
	font-weight: var(--fw-bold);
}

.account-details__item dt::after {
	content: ": ";
	font-weight: var(--fw-regular);
}

@media (min-width: 768px) {
	.account-details__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-details__item {
		border-right: var(--border-hairline) solid var(--color-border);
	}
}

@media (min-width: 1024px) {
	.account-details__grid {
		grid-template-columns: 2fr 3fr 2.5fr;
	}

	.account-details__item {
		font-size: 20px;
	}
}

/* The payment and the joining information (not drawn): White boxes under
   the details. */
.account-payment,
.account-joining {
	margin-top: 24px;
	padding: 22px 22px 24px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.account-payment__title,
.account-joining__title {
	margin: 0 0 12px;
	font-family: var(--font-body);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
	text-transform: none;
}

.account-payment__rows {
	display: grid;
	gap: 8px;
	margin: 0;
}

.account-payment__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 24px;
	padding-bottom: 8px;
	border-bottom: var(--border-hairline) solid var(--color-border);
}

.account-payment__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.account-payment__row dt,
.account-payment__row dd {
	margin: 0;
}

.account-payment__row dd {
	font-weight: var(--fw-semibold);
}

.account-payment__action {
	margin: 18px 0 0;
}

.account-joining__text,
.account-joining__text p {
	margin: 0;
}

.account-joining__text p + p {
	margin-top: 12px;
}

@media (min-width: 1024px) {
	.account-details .container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 24px;
	}

	.account-details .account-section-title,
	.account-details__grid,
	.account-details__help {
		grid-column: 1 / -1;
	}
}

.account-details__help {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 30px;
	margin: 40px 0 0;
}

.account-details__question {
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
}

.account-details__contact {
	color: var(--account-link);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
}

.account-details__contact:focus-visible {
	color: var(--account-link-hover);
}

@media (hover: hover) {
	.account-details__contact:hover {
		color: var(--account-link-hover);
	}
}

/* ---------- The course library ---------- */

.account-library .account-section-intro {
	color: var(--color-text-on-dark);
}

.account-library__empty {
	margin: 40px 0 0;
	color: var(--color-text-on-dark);
}

.account-library__group {
	margin-top: 56px;
}

.account-library__group + .account-library__group {
	margin-top: 80px;
}

.account-library__heading {
	margin: 0 0 8px;
	color: var(--color-heading-on-dark);
	font-size: 32px;
	line-height: 1.1;
}

.account-library__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.resource-row {
	display: grid;
	grid-template-areas: "text" "done" "link";
	gap: 12px;
	padding: 24px 0 26px;
	border-bottom: var(--border-hairline) solid var(--account-row-rule);
	color: var(--color-text-on-dark);
}

.resource-row__done {
	grid-area: done;
	margin: 0;
}

.resource-row__text {
	grid-area: text;
}

.resource-row__link {
	grid-area: link;
	justify-self: start;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-medium);
}

.resource-row__title,
.resource-row__description {
	margin: 0;
}

.resource-row__title {
	color: var(--color-heading-on-dark);
	font-weight: var(--fw-semibold);
}

.resource-row__description {
	margin-top: 4px;
}

/* The title is a link to the resource too (Emma 2026-10-26): as drawn at
   rest, Light Orange on hover as View / Download (Cream on a done row). */
.resource-row__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

@media (hover: hover) {
	.resource-row__title-link:hover {
		color: var(--account-row-link-hover);
	}

	.resource-row.is-done .resource-row__title-link:hover {
		color: var(--color-heading-on-dark);
	}
}

@media (forced-colors: active) {
	.resource-row__title-link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

/* A done row in Light Orange (the design's first row). */
.resource-row.is-done .resource-row__title,
.resource-row.is-done .resource-row__description,
.resource-row.is-done .resource-row__link,
.resource-row.is-done .resource-done {
	color: var(--account-done);
}

/* View / Download: Light Orange on hover and keyboard focus (Cream on a
   row already done, which is Light Orange at rest). */
.resource-row__link:focus-visible {
	color: var(--account-row-link-hover);
}

.resource-row.is-done .resource-row__link:focus-visible {
	color: var(--color-heading-on-dark);
}

@media (hover: hover) {
	.resource-row__link:hover {
		color: var(--account-row-link-hover);
	}

	.resource-row.is-done .resource-row__link:hover {
		color: var(--color-heading-on-dark);
	}
}

@media (min-width: 768px) {
	.resource-row {
		grid-template-columns: 200px minmax(0, 1fr) auto;
		grid-template-areas: "done text link";
		align-items: center;
		gap: 0 16px;
		padding: 26px 28px 30px 20px;
	}

	.resource-row__link {
		font-size: 20px;
	}
}

/* "Mark as done": a text button with its box (a tick once done). */
.resource-done {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-heading-on-dark);
	font: inherit;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.resource-done:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 4px;
}

.resource-done[aria-busy="true"] {
	opacity: 0.6;
}

.resource-done__tick,
.resource-done[aria-pressed="true"] .resource-done__box {
	display: none;
}

.resource-done[aria-pressed="true"] .resource-done__tick {
	display: inline-block;
}

/* ---------- Pathways ---------- */

.account-progression-section .account-section-intro {
	margin-bottom: 40px;
}

.account-pathways {
	display: grid;
	gap: 64px;
}

.account-pathway {
	padding: 32px 22px 40px;
	border-left: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-lg);
	background-color: var(--pathway-card-bg);
}

.account-pathway__badge {
	display: inline-block;
	margin: 0 0 18px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background-color: var(--color-navy);
	color: var(--color-white);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.account-pathway__title {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: 1.1;
}

.account-pathway__text {
	margin: 16px 0 0;
}

.account-pathway__columns {
	display: grid;
	gap: 44px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.account-pathway__column {
	position: relative;
	border-radius: var(--radius-md);
	background-color: var(--pathway-column-bg);
}

.account-pathway__chevron {
	position: absolute;
	top: -38px;
	left: 50%;
	color: var(--color-accent);
	transform: translateX(-50%) rotate(90deg);
}

.account-pathway__level {
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background-color: var(--color-level-foundation);
	color: var(--color-navy);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.account-pathway__column--progression .account-pathway__level {
	background-color: var(--color-level-progression);
}

.account-pathway__column--development .account-pathway__level {
	background-color: var(--color-level-development);
}

.account-pathway__column--leadership .account-pathway__level {
	background-color: var(--color-leadership);
	color: var(--color-white);
}

.account-pathway__steps {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 22px;
	list-style: none;
}

.pathway-step {
	position: relative;
	display: grid;
	grid-template-columns: 97px minmax(0, 1fr);
	min-height: 95px;
	border: 2px solid transparent;
	border-radius: var(--radius-xs);
	background-color: var(--pathway-step-bg);
	overflow: hidden;
}

.pathway-step:not(:has(.pathway-step__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.pathway-step--here {
	border-color: var(--pathway-here);
}

.pathway-step--next,
.pathway-step--relevant {
	border-color: var(--color-accent);
}

.pathway-step__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.pathway-step__body {
	display: grid;
	align-content: center;
	gap: 4px;
	padding: 12px 12px 12px 14px;
}

.pathway-step__mark {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--pathway-mark);
	font-size: var(--fs-badge);
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.pathway-step--here .pathway-step__mark {
	color: var(--pathway-here);
}

.pathway-step__star {
	flex: none;
}

.pathway-step__link {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	text-decoration: none;
}

.pathway-step:has(.pathway-step__link:focus-visible) {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.pathway-step__link:focus-visible {
	outline: none;
}

@media (hover: hover) {
	.pathway-step:hover .pathway-step__link {
		text-decoration: underline;
	}
}

@media (min-width: 768px) {
	.account-pathway {
		padding: 44px 32px 56px;
	}

	.account-pathway__columns {
		grid-template-columns: repeat(auto-fit, minmax(240px, 333px));
		gap: 32px 81px;
		align-items: stretch;
	}

	.account-pathway__chevron {
		top: 50%;
		left: -56px;
		transform: translateY(-50%);
	}
}

/* ---------- My Progression ---------- */

.account-stats {
	padding-block: 44px;
}

.account-stats__list {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.account-stats__item {
	display: flex;
	align-items: center;
	gap: 24px;
}

.account-stats__figure {
	color: var(--account-stat-figure);
	font-size: 48px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.account-stats__label {
	color: var(--color-heading);
	font-size: 32px;
	line-height: 1.1;
}

@media (min-width: 1024px) {
	.account-stats__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.account-stats__item {
		justify-content: center;
		padding-block: 36px;
		border-left: var(--border-hairline) solid var(--color-grey-mid);
	}

	.account-stats__item:first-child {
		justify-content: flex-start;
		border-left: 0;
	}
}

.account-next .account-section-intro {
	margin-bottom: 40px;
}

.account-next__grid {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.account-next__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.account-progress-pathways .account-section-intro {
	margin-bottom: 40px;
}

.account-progress-pathways__others {
	margin: 96px 0 40px;
}

.account-progress-pathways__others:first-child {
	margin-top: 0;
}

/* ---------- A course resource ---------- */

/* The hero has no photo, so its parts sit straight in .page-hero__inner:
   phones the checklist mark under the trail, then the eyebrow and title;
   from 768px the mark left of them, as drawn (140px both). The mark is
   aria-hidden, so its place in the grid changes nothing for screen
   readers. */
.account-resource-hero .page-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.account-resource-hero .page-hero__breadcrumb {
	grid-column: 1 / -1;
	grid-row: 1;
}

.account-resource-hero__mark {
	display: block;
	grid-row: 2;
	margin-top: 40px;
}

.account-resource-hero__mark svg {
	display: block;
	width: 140px;
	height: auto;
	fill: var(--color-cream);
}

.account-resource-hero .page-hero__eyebrow {
	grid-row: 3;
}

.account-resource-hero .page-hero__title {
	grid-row: 4;
}

@media (min-width: 768px) {
	.account-resource-hero .page-hero__inner {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 40px;
	}

	.account-resource-hero__mark {
		grid-column: 1;
		grid-row: 2 / span 2;
		align-self: center;
	}

	.account-resource-hero .page-hero__eyebrow {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
	}

	.account-resource-hero .page-hero__title {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
	}
}

.account-resource__file {
	margin: 40px 0 0;
}

.account-resource__file .btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* "Share this page" (2026-11-02, not designed): the page's own address, which
   anyone with the link can open, and "Copy link" (account.js). */
.account-resource__share {
	margin-top: 40px;
}

.account-resource__share-title {
	margin: 0 0 6px;
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-ui-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	text-transform: none;
}

.account-resource__share p {
	margin: 0;
}

.account-resource__share .account-resource__share-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 12px;
}

.account-resource__share-link a {
	color: var(--color-link);
	text-decoration: underline;
	overflow-wrap: anywhere;
}

@media (hover: hover) {
	.account-resource__share-link a:hover {
		color: var(--color-link-hover-on-light);
	}
}

.account-resource__share-link a:focus-visible {
	color: var(--color-link-hover-on-light);
}

.account-resource__questions {
	margin-top: 48px;
	padding: 24px 22px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-warm);
}

.account-resource__questions-title {
	margin: 0 0 6px;
	font-size: var(--fs-card-title-lg);
	line-height: 1.1;
}

.account-resource__questions p {
	margin: 0;
}

.account-resource__questions a {
	color: var(--color-link);
	text-decoration: underline;
}

.account-resource__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 60px;
}

.account-resource__done {
	margin: 0;
}

.resource-done-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.account-resource__back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-heading);
	font-size: 20px;
	font-weight: var(--fw-medium);
	text-decoration: none;
}

.account-resource__back-arrow {
	transform: scaleX(-1);
}

@media (hover: hover) {
	.account-resource__back:hover {
		color: var(--color-link-hover-on-light);
	}
}

/* ---------- Logged out: the login and password forms (not designed) ---------- */

.account-public .woocommerce {
	max-width: 36rem;
	margin-inline: auto;
}

.account-login,
.account-public .woocommerce-ResetPassword,
.account-public .woocommerce-form-login,
.account-public .lost_reset_password {
	padding: 32px 24px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.account-login .woocommerce-form-login {
	padding: 0;
	border: 0;
}

.account-login__title {
	margin: 0;
	font-size: var(--fs-h3);
}

.account-login__intro {
	margin: 14px 0 24px;
}

@media (min-width: 768px) {
	.account-login,
	.account-public .woocommerce-ResetPassword,
	.account-public .lost_reset_password {
		padding: 40px;
	}
}

/* Fields on the account's forms (login, password, Account Details). */
.account-public .form-row,
.account .woocommerce-EditAccountForm .form-row {
	display: grid;
	gap: 6px;
	margin: 0 0 18px;
}

.account-public label,
.account .woocommerce-EditAccountForm label {
	font-weight: var(--fw-semibold);
}

.account-public .input-text,
.account .woocommerce-EditAccountForm .input-text {
	width: 100%;
	height: var(--field-height);
	padding: 0 14px;
	border: var(--border-hairline) solid var(--color-field-border);
	border-radius: var(--field-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

.account-public .input-text:focus-visible,
.account .woocommerce-EditAccountForm .input-text:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 1px;
}

/* WooCommerce's "Show password" button (its script adds it to each password
   field; WooCommerce's own CSS is off, inc/checkout.php): an eye inside the
   field's right end, crossed out while the password shows. The icon is the
   button's ::before (a mask on the button would clip its focus ring). */
.account .password-input,
.account-public .password-input {
	position: relative;
	display: block;
}

.account .password-input .input-text,
.account-public .password-input .input-text {
	padding-right: 52px;
}

.show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--field-radius);
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color var(--transition);
}

.show-password-input::before {
	content: "";
	position: absolute;
	inset: 9px;
	background-color: currentColor;
	-webkit-mask: var(--mask-eye) center / contain no-repeat;
	mask: var(--mask-eye) center / contain no-repeat;
}

.show-password-input.display-password::before {
	-webkit-mask-image: var(--mask-eye-slash);
	mask-image: var(--mask-eye-slash);
}

.show-password-input:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 0;
}

@media (hover: hover) {
	.show-password-input:hover {
		color: var(--color-heading);
	}
}

.account-public .required {
	color: var(--color-error);
	text-decoration: none;
}

.account-login__remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: var(--fw-regular);
}

.account-public .account-login__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}

.account-login__lost {
	color: var(--color-link);
	text-decoration: underline;
}

.account-public .woocommerce-Button,
.account-public .woocommerce-button,
.account .woocommerce-EditAccountForm .woocommerce-Button {
	min-height: 52px;
	padding: 0 32px;
	border: var(--border-button) solid var(--btn-solid-border);
	border-radius: var(--radius-button);
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-fg);
	font: inherit;
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--transition);
}

@media (hover: hover) {
	.account-public .woocommerce-Button:hover,
	.account-public .woocommerce-button:hover,
	.account .woocommerce-EditAccountForm .woocommerce-Button:hover {
		background-color: var(--btn-primary-bg-hover);
	}
}

/* Account Details: the form at the content's width. */
.account .woocommerce-EditAccountForm {
	max-width: 44rem;
	margin-top: 32px;
}

.account .woocommerce-EditAccountForm fieldset {
	margin: 24px 0;
	padding: 24px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
}

.account .woocommerce-EditAccountForm legend {
	padding: 0 6px;
	font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
	.account .woocommerce-EditAccountForm .form-row-first,
	.account .woocommerce-EditAccountForm .form-row-last {
		display: inline-grid;
		width: calc(50% - 12px);
	}

	.account .woocommerce-EditAccountForm .form-row-first {
		margin-right: 20px;
	}
}

/* ---------- One booking's FAQs ---------- */

/* The course page's FAQ section on Secondary Navy, as the booking page is
   drawn, so it stands apart from the footer (Emma 2026-10-26); its tabs
   then take Primary Navy, as drawn. The course pages keep theirs. */
.offering-faqs.account-faqs {
	background-color: var(--account-faqs-bg);
}

.account-faqs .faq-tabs {
	--faqs-tab-bg: var(--account-faqs-tab-bg);
	--faqs-tab-selected-bg: var(--account-faqs-tab-bg);
}

/* ---------- The Medical, Emergency & Consent Form ---------- */

/* Each participant's form: a row of the course library's "Before you
   come" (template-parts/account/health.php; the library's resource rows).
   Its Done / To complete is a state, not a button. */
.resource-done--status {
	cursor: default;
}

/* After a form was sent or a link emailed. */
.account-library__notice {
	margin: 16px 0 8px;
	padding: 4px 0 4px 14px;
	border-left: 3px solid var(--account-done);
	color: var(--color-text-on-dark);
	font-weight: var(--fw-semibold);
}

/* "Send ... their own link": under the row's state, on navy. */
.account-health__send {
	margin-top: 12px;
}

.account-health__send summary {
	width: fit-content;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	cursor: pointer;
}

.resource-row.is-done .account-health__send summary {
	color: var(--account-done);
}

.account-health__send summary:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.account-health__send-form {
	display: grid;
	gap: 6px;
	max-width: 34rem;
	margin-top: 12px;
	color: var(--color-text-on-dark);
	font-size: var(--fs-small);
}

.account-health__send-form label {
	font-weight: var(--fw-semibold);
}

.account-health__send-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.account-health__email {
	flex: 1 1 14rem;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: var(--border-hairline) solid var(--color-field-border);
	border-radius: var(--field-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

.account-health__email:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* The form's page (account, or a private link): one column on the
   container's left edge, under the hero's text. */
.health-page__inner > * {
	max-width: var(--health-form-max);
}

.health-page__intro p,
.health-page__note {
	margin: 0 0 12px;
}

.health-page__lead {
	font-size: var(--fs-lead);
}

.health-page__small {
	color: var(--color-text-muted);
}

.health-page__note {
	padding: 12px 16px;
	border-left: 3px solid var(--health-done);
	background-color: var(--health-statement-bg);
}

.health-page__thanks {
	display: grid;
	justify-items: start;
	gap: 8px;
	padding: 24px;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--health-done);
}

.health-page__thanks-title {
	margin: 0;
	font-size: var(--fs-h3);
}

.health-page__thanks p {
	margin: 0;
	color: var(--color-text);
}

.health-form__summary {
	margin: 24px 0;
	padding: 16px 20px;
	border: 2px solid var(--health-error);
	border-radius: var(--radius-md);
}

.health-form__summary-title {
	margin: 0 0 6px;
	font-weight: var(--fw-bold);
}

.health-form__summary ul {
	margin: 0;
	padding-left: 20px;
}

.health-form__summary a {
	color: var(--health-error);
}

.health-form {
	margin-top: 24px;
}

.health-form__group {
	display: grid;
	gap: 16px 24px;
	min-width: 0;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
}

.health-form__legend {
	margin-bottom: 4px;
	padding: 0;
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: var(--fs-card-title-lg);
	line-height: 1.1;
	text-transform: uppercase;
}

/* The section's number in Poppins: Koulen's "1" reads as "I". */
.health-form__number {
	margin-right: 6px;
	font-family: var(--font-body);
	font-size: 0.8em;
	font-weight: var(--fw-semibold);
}

/* The course and its dates, shown (not asked). */
.health-form__booking {
	display: grid;
	gap: 8px 24px;
	margin: 0;
	padding: 14px 18px;
	border-radius: var(--radius-md);
	background-color: var(--health-statement-bg);
}

.health-form__booking dt {
	font-weight: var(--fw-semibold);
}

.health-form__booking dd {
	margin: 0;
}

.health-form__note {
	margin: 0;
	color: var(--color-text-muted);
}

.health-form__row {
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0;
}

.health-form__row label {
	font-weight: var(--fw-semibold);
}

.health-form__required {
	color: var(--health-error);
}

.health-form__input {
	width: 100%;
	min-height: var(--field-height);
	padding: 0 14px;
	border: var(--border-hairline) solid var(--color-field-border);
	border-radius: var(--field-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	font: inherit;
}

textarea.health-form__input {
	padding-block: 12px;
	resize: vertical;
}

.health-form__input:focus-visible,
.health-form__tick input:focus-visible,
.health-form__answer input:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 1px;
}

.health-form__input[aria-invalid="true"] {
	border: 2px solid var(--health-error);
}

.health-form__hint {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.health-form__error {
	color: var(--health-error);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.health-form__question {
	display: grid;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-top: var(--border-hairline) solid var(--color-border);
}

.health-form__question.has-error .health-form__question-text {
	color: var(--health-error);
}

/* Floated, so the legend leaves the fieldset's top rule and takes a grid
   row of its own under it. */
.health-form__question-text {
	float: left;
	width: 100%;
	padding: 0;
	font-weight: var(--fw-semibold);
}

.health-form__answers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

.health-form__answer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	cursor: pointer;
}

.health-form__answer input,
.health-form__tick input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-heading);
}

.health-form__details {
	display: grid;
	gap: 16px;
}

.health-form__details[hidden],
html.has-js .health-form__details[data-health-closed] {
	display: none;
}

.health-form__statement-title {
	margin: 0;
	font-weight: var(--fw-bold);
}

.health-form__statement-text {
	margin: 0;
}

.health-form__tick {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 4px 12px;
	margin: 0;
}

.health-form__tick input {
	margin-top: 3px;
}

.health-form__tick .health-form__error {
	grid-column: 2;
}

/* The parent or guardian's parts (sections 01 and 12): for a participant
   under 18 on the first day, the form's is-minor (set by the page from what
   it knows, then by account.js from the date of birth). Without JS they
   always show. */
.health-form__guardian {
	display: grid;
	gap: 16px 24px;
	padding: 16px 20px;
	border-left: 3px solid var(--health-done);
	background-color: var(--health-statement-bg);
}

html.has-js .health-form.is-adult [data-health-guardian] {
	display: none;
}

/* The photography choice: worded for the participant, or for their parent
   or guardian. */
.health-form.is-minor .health-form__for-adult,
.health-form.is-adult .health-form__for-minor {
	display: none;
}

.health-form__photo.has-error .health-form__legend {
	color: var(--health-error);
}

.health-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 8px 0 0;
}

.health-page__cancel {
	color: var(--color-link);
}

/* Two fields to a row from 768px: the short ones side by side. */
@media (min-width: 768px) {
	.health-form__group,
	.health-form__guardian,
	.health-form__booking {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.health-form__legend,
	.health-form__note,
	.health-form__question,
	.health-form__statement-title,
	.health-form__statement-text,
	.health-form__tick,
	.health-form__booking,
	.health-form__guardian,
	.health-form__group > .health-form__error,
	.health-form__row--address,
	.health-form__row--signature,
	.health-form__row--g_signature {
		grid-column: 1 / -1;
	}
}

/* ---------- My Progression: "Private & Bespoke Services" ---------- */

/* The homepage's section (ldm_front_page_section()) with its two navies
   swapped, as drawn (account-progression-desktop-v1, Emma 2026-10-26), so
   the band stands apart from the footer below it. Other pages keep it as
   it is. */
.account-services .services {
	background-color: var(--account-services-bg);
}

.account-services .services__row {
	background-color: var(--account-services-row-bg);
}

/* Windows High Contrast: the cards and states keep their outlines. */
@media (forced-colors: active) {
	.booking-card,
	.account-pathway,
	.pathway-step,
	.account-details__grid,
	.account-payment,
	.account-joining,
	.health-page__thanks,
	.health-form__booking,
	.health-form__guardian {
		border: 1px solid var(--color-forced-line);
	}

	.account-menu--sidebar .is-current .account-menu__link {
		outline: 2px solid var(--color-forced-line);
	}

	.show-password-input::before {
		forced-color-adjust: none;
		background-color: var(--color-forced-line);
	}
}