/* ==========================================================================
   Members area — page background
   ========================================================================== */

body.jhp-members-area-page,
body.jhp-dashboard-page {
	background: var(--bg-page);
	color: var(--t-body);
}

html {
	scroll-behavior: smooth;
}

/* ==========================================================================
   Layout — sidebar + main (+ optional right panel on dashboard)
   ========================================================================== */

.jhp-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	min-height: 100vh;
	align-items: start;
}

/* On dashboard: main + panel sit inside a body div */
.jhp-layout__body {
	display: grid;
	grid-template-columns: 1fr 280px;
	align-items: stretch;
	min-width: 0;
	min-height: 100%;
}

/* Astra sets main padding via `#primary` (an ID) and its stylesheet can load
   after ours, so !important is needed to guarantee our value overrides. Horizontal
   padding mirrors `.jhp-layout__panel` so the main column and the panel — once
   it stacks below — share the same content width. */
#primary.jhp-layout__main {
	min-width: 0;
	padding: var(--sp10) var(--sp8) !important;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

/* Nav wrapper is transparent to the desktop grid; drawer mechanics live in
   the 768px media query. */
.jhp-members-nav {
	display: contents;
}

.jhp-members-nav__bar,
.jhp-members-nav__backdrop,
.jhp-sidebar__close {
	display: none;
}

body.jhp-nav-locked {
	overflow: hidden;
}

.jhp-sidebar {
	background: var(--bg-deep);
	color: var(--t-inv);
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100vh;
	overflow-y: auto;
	padding: var(--sp8) var(--sp6);
	position: sticky;
	top: 0;
}

.jhp-sidebar-top {
	display: flex;
	gap: var(--sp4);
}

.jhp-sidebar__brand {
	display: grid;
	gap: var(--sp1);
}

.jhp-sidebar__logo-link,
.jhp-sidebar__brand-link {
	color: var(--t-inv);
	display: inline-flex;
	text-decoration: none;
}

/* Astra customizer injects `.ast-header-break-point .custom-logo-link img`
   at specificity (0,2,1); match that shape so the sidebar logo is capped
   on mobile too. */
.jhp-sidebar__brand .custom-logo-link img,
.jhp-sidebar__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 3rem;
	max-width: 100%;
	width: auto;
}

.jhp-sidebar__brand-name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.jhp-sidebar__nav {
	margin-top: var(--sp10);
}

.jhp-sidebar__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jhp-sidebar__nav-link {
	border-radius: var(--r-btn);
	color: var(--t-inv-dim);
	display: block;
	padding: var(--sp2) var(--sp3);
	text-decoration: none;
	transition: background var(--fast) var(--settl), color var(--fast) var(--settl);
}

.jhp-sidebar__nav-link:hover,
.jhp-sidebar__nav-link:focus-visible {
	background: rgba(255, 255, 255, 0.06);
	color: var(--t-inv);
}

.jhp-sidebar__nav-link.is-current {
	background: var(--bg-surface);
	color: var(--t-heading);
	font-weight: 600;
}

.jhp-sidebar__foot {
	margin-top: auto;
	padding-top: var(--sp8);
}

.jhp-sidebar__logout {
	color: var(--t-inv-dim);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--fast) var(--settl);
}

.jhp-sidebar__logout:hover {
	color: var(--t-inv);
}

.jhp-sidebar a:focus-visible,
.jhp-sidebar button:focus-visible {
	outline: 3px solid var(--t-inv);
	outline-offset: 3px;
}

/* ==========================================================================
   Sidebar — nested nav groups
   ========================================================================== */

/* Highlight group parent link when a child is active */
.jhp-sidebar__nav-item.is-current-group > .jhp-sidebar__nav-link {
	color: var(--t-inv);
}

/* Sub-item list */
.jhp-sidebar__nav-sub-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp1);
	list-style: none;
	margin: var(--sp1) 0 var(--sp3);
	padding: 0 0 0 var(--sp4);
}

/* Sub-item links */
.jhp-sidebar__nav-sub-link {
	border-radius: var(--r-btn);
	color: var(--t-inv-dim);
	display: block;
	font-size: 0.9375rem;
	padding: var(--sp2) var(--sp3);
	text-decoration: none;
	transition: background var(--fast) var(--settl), color var(--fast) var(--settl);
}

.jhp-sidebar__nav-sub-link:hover,
.jhp-sidebar__nav-sub-link:focus-visible {
	background: rgba(255, 255, 255, 0.06);
	color: var(--t-inv);
}

.jhp-sidebar__nav-sub-link.is-current {
	background: rgba(255, 255, 255, 0.1);
	color: var(--t-inv);
	font-weight: 600;
}

/* ==========================================================================
   Page heading
   ========================================================================== */

.jhp-page-head {
	margin-bottom: var(--sp8);
}

.jhp-page-head__title {
	color: var(--t-heading);
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1.15;
	margin: 0;
}

.jhp-page-head__sub {
	color: var(--t-sub);
	margin: var(--sp2) 0 0;
}

/* ==========================================================================
   Right panel (dashboard only)
   ========================================================================== */

.jhp-layout__panel {
	display: flex;
	flex-direction: column;
	gap: var(--sp4);
	padding: var(--sp10) var(--sp6) var(--sp10) 0;
}

.jhp-panel-widget {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 0 0 var(--r-card) var(--r-card);
	box-shadow: var(--s1);
	display: grid;
	gap: var(--sp2);
	padding: var(--sp5) var(--sp6);
	border-top: 3px solid var(--t-accent);
}

.jhp-panel-widget__eyebrow,
.jhp-summary__eyebrow,
.jhp-progress-grid__eyebrow {
	color: var(--t-meta);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.jhp-panel-widget__value,
.jhp-summary__value {
	color: var(--t-accent);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

.jhp-panel-widget__title {
	color: var(--t-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.jhp-panel-widget__cost {
	color: var(--t-heading);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.jhp-panel-widget__detail {
	color: var(--t-body);
	font-size: 0.875rem;
	margin: 0;
}

.jhp-panel-widget__body {
	color: var(--t-body);
	font-size: 0.9rem;
	margin: 0;
}

.jhp-panel-widget__action {
	color: var(--t-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.jhp-panel-widget__action:hover {
	text-decoration: underline;
}

.jhp-panel-widget--stat-cancelled, .jhp-panel-widget--cta-urgent, .jhp-panel-widget--cta-action {
	border-top-color: var(--c-warn);
}

.jhp-panel-widget--stat-cancelled .jhp-panel-widget__value {
	color: var(--c-warn);
}

.jhp-panel-widget--membership.is-tier-bronze {
	border-top-color: var(--tier-bronze-accent);
}

.jhp-panel-widget--membership.is-tier-silver {
	border-top-color: var(--tier-silver-accent);
}

.jhp-panel-widget--membership.is-tier-gold {
	border-top-color: var(--tier-gold-accent);
}

.jhp-panel-widget--membership.is-tier-platinum {
	border-top-color: var(--tier-platinum-accent);
}

.jhp-panel-widget--notice {
	background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page) 100%);
	border-left: 3px solid var(--border);
}

.jhp-panel-widget--nav {
	gap: var(--sp2);
}

.jhp-panel-widget--nav .jhp-panel-widget__body {
	color: var(--t-meta);
	font-size: 0.875rem;
	margin: 0;
}

/* CTA widgets — membership renewal and enrolment prompts */
.jhp-panel-widget--cta {
	display: grid;
	gap: var(--sp3);
	padding: var(--sp5) var(--sp6);
}

.jhp-panel-widget__btn {
	background: var(--t-heading);
	border-radius: var(--r-btn);
	color: var(--t-inv);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	padding: var(--sp2) var(--sp4);
	text-align: center;
	text-decoration: none;
	transition: opacity var(--fast) var(--settl);
}

.jhp-panel-widget__btn:hover {
	opacity: 0.82;
}

.jhp-panel-widget--cta-urgent .jhp-panel-widget__btn,
.jhp-panel-widget--cta-action .jhp-panel-widget__btn {
	background: var(--c-warn);
	color: var(--t-inv);
}

/* ==========================================================================
   Cards and generic components
   ========================================================================== */

.jhp-card,
.jhp-state,
.jhp-booking,
.jhp-panel,
.jhp-action-card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: var(--s1);
}

/* ==========================================================================
   Typography tokens shared across components
   ========================================================================== */

.jhp-summary__eyebrow,
.jhp-panel__eyebrow {
	color: var(--t-meta);
	margin: 0;
}

.jhp-members__section-title,
.jhp-summary__title,
.jhp-booking__title,
.jhp-state__title,
.jhp-progress-grid__title,
.jhp-panel__title,
.jhp-action-card__label {
	color: var(--t-heading);
	margin: 0;
}

.jhp-members__section-copy,
.jhp-summary__meta,
.jhp-summary__link,
.jhp-booking__meta,
.jhp-booking__copy,
.jhp-booking__note,
.jhp-state__message,
.jhp-panel__meta,
.jhp-panel__copy,
.jhp-action-card__copy {
	margin: 0;
}

/* ==========================================================================
   Tier grid (Membership & Billing — browsable list of levels)
   ========================================================================== */

.jhp-tier-grid {
	display: grid;
	gap: var(--sp4);
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.jhp-tier-card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	border-top: 3px solid var(--border);
	box-shadow: var(--s1);
	display: grid;
	gap: var(--sp2);
	padding: var(--sp5) var(--sp6);
	position: relative;
}

.jhp-tier-card.is-tier-bronze { border-color: var(--tier-bronze-accent); }
.jhp-tier-card.is-tier-silver { border-color: var(--tier-silver-accent); }
.jhp-tier-card.is-tier-gold { border-color: var(--tier-gold-accent); }
.jhp-tier-card.is-tier-platinum { border-color: var(--tier-platinum-accent); }

.jhp-tier-card.is-current {
	box-shadow: 0 0 0 1px var(--t-accent), var(--s1);
}

.jhp-tier-card.is-current.is-tier-bronze {
	background: var(--tier-bronze-tint);
	box-shadow: 0 0 0 1px var(--tier-bronze-accent), var(--s1);
}

.jhp-tier-card.is-current.is-tier-silver {
	background: var(--tier-silver-tint);
	box-shadow: 0 0 0 1px var(--tier-silver-accent), var(--s1);
}

.jhp-tier-card.is-current.is-tier-gold {
	background: var(--tier-gold-tint);
	box-shadow: 0 0 0 1px var(--tier-gold-accent), var(--s1);
}

.jhp-tier-card.is-current.is-tier-platinum {
	background: var(--tier-platinum-tint);
	box-shadow: 0 0 0 1px var(--tier-platinum-accent), var(--s1);
}

.jhp-tier-card__badge {
	background: var(--t-accent);
	border-radius: var(--r-pill);
	color: var(--t-inv);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px var(--sp2);
	position: absolute;
	right: var(--sp4);
	text-transform: uppercase;
	top: var(--sp4);
	text-box-trim: trim-both;
}

.jhp-tier-card__name {
	color: var(--t-heading);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.jhp-tier-card__allowance {
	color: var(--t-meta);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.jhp-tier-card__price {
	color: var(--t-accent);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.jhp-tier-card__description {
	color: var(--t-body);
	font-size: 0.875rem;
	margin: 0;
}

.jhp-tier-card__action {
	background: var(--t-accent);
	border-radius: var(--r-btn);
	color: var(--t-inv);
	font-size: 0.875rem;
	font-weight: 700;
	margin-top: var(--sp2);
	padding: var(--sp2) var(--sp4);
	text-align: center;
	text-decoration: none;
	transition: background var(--fast) var(--settl);
}

.jhp-tier-card__action:hover,
.jhp-tier-card__action:focus-visible {
	background: var(--t-heading);
	color: var(--t-inv);
}

/* ==========================================================================
   Tier badges
   ========================================================================== */

.jhp-tier-badge {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	color: var(--t-heading);
	display: inline-flex;
	padding: var(--sp1) var(--sp3);
}

.jhp-tier-badge.is-tier-bronze {
	background: var(--tier-bronze-tint);
	border-color: var(--tier-bronze-accent);
	color: var(--tier-bronze-text);
}

.jhp-tier-badge.is-tier-silver {
	background: var(--tier-silver-tint);
	border-color: var(--tier-silver-accent);
	color: var(--tier-silver-text);
}

.jhp-tier-badge.is-tier-gold {
	background: var(--tier-gold-tint);
	border-color: var(--tier-gold-accent);
	color: var(--tier-gold-text);
}

.jhp-tier-badge.is-tier-platinum {
	background: var(--tier-platinum-tint);
	border-color: var(--tier-platinum-accent);
	color: var(--tier-platinum-text);
}

/* ==========================================================================
   Members content area
   ========================================================================== */

.jhp-members__content {
	display: grid;
	gap: var(--sp10);
	min-width: 0;
}

.jhp-members__section {
	display: grid;
	gap: var(--sp5);
}

.jhp-members__section-head {
	align-items: end;
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
	justify-content: space-between;
	padding-bottom: var(--sp3);
}

.jhp-dashboard-overview {
    margin-bottom: var(--sp8);
}

.jhp-members__grid,
.jhp-booking-list,
.jhp-dashboard-status,
.jhp-action-grid {
	display: grid;
	gap: var(--sp5);
}

.jhp-members__grid--overview,
.jhp-members__grid--tight {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ==========================================================================
   Summary cards
   ========================================================================== */

.jhp-summary,
.jhp-pmpro-surface,
.jhp-rich-copy,
.jhp-progress-grid,
.jhp-link-grid,
.jhp-panel {
	overflow: hidden;
}

.jhp-summary {
	align-content: start;
	display: grid;
	gap: var(--sp2);
	padding: var(--sp5) var(--sp6);
	border-top: 3px solid var(--t-accent);
}

.jhp-summary__meta {
	color: var(--t-body);
	font-size: 0.875rem;
}

.jhp-summary__links {
	display: grid;
	gap: var(--sp2);
	margin: 0;
}

/* ==========================================================================
   Next-booking panel
   ========================================================================== */

.jhp-panel {
	display: grid;
	gap: var(--sp4);
	padding: var(--sp6);
}

.jhp-panel--primary {
	background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
	border-color: var(--border-inv);
	box-shadow: var(--s3);
}

.jhp-panel--primary .jhp-panel__eyebrow,
.jhp-panel--primary .jhp-panel__meta,
.jhp-panel--primary .jhp-panel__copy,
.jhp-panel--primary .jhp-dashboard-next__item-meta {
	color: var(--t-inv-dim);
}

.jhp-panel--primary .jhp-panel__title,
.jhp-panel--primary .jhp-dashboard-next__item-title,
.jhp-panel--primary a {
	color: var(--t-inv);
}

.jhp-panel__content,
.jhp-dashboard-next,
.jhp-dashboard-next__queue {
	display: grid;
	gap: var(--sp3);
}

.jhp-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
}

.jhp-panel__actions a {
	border: 1px solid var(--border-inv);
	border-radius: var(--r-btn);
	padding: var(--sp2) var(--sp3);
	text-decoration: none;
}

.jhp-panel__actions a:hover {
	background: rgba(253, 252, 250, 0.08);
}

.jhp-dashboard-next__list {
	display: grid;
	gap: var(--sp3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jhp-dashboard-next__item {
	border-top: 1px solid var(--border-inv);
	display: grid;
	gap: var(--sp1);
	padding-top: var(--sp3);
}

.jhp-dashboard-status {
	grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   Action grid
   ========================================================================== */

.jhp-action-grid {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.jhp-action-card {
	display: grid;
	gap: var(--sp2);
	padding: var(--sp5);
	text-decoration: none;
}

.jhp-action-card:hover {
	box-shadow: var(--s2);
}

.jhp-action-card__copy {
	color: var(--t-body);
}

.jhp-link-grid {
	display: grid;
	gap: var(--sp4);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	padding: var(--sp6);
}

.jhp-link-grid a {
	border-top: 1px solid var(--border);
	color: var(--t-sub);
	display: block;
	padding-top: var(--sp3);
	text-decoration: none;
}

/* ==========================================================================
   Booking list
   ========================================================================== */

.jhp-booking-list {
	display: grid;
	gap: var(--sp3);
	grid-template-columns: 1fr;
}

.jhp-booking {
	align-items: center;
	border-left: 3px solid var(--event-color, var(--t-accent));
	display: grid;
	gap: var(--sp4);
	grid-template-columns: 4.5rem 1fr auto;
	padding: var(--sp4) var(--sp5);
	border-radius: var(--r-btn);
}

/* The card's `display: grid` overrides the `hidden` attribute's UA style,
   so month filtering needs this explicit rule to actually hide cards. */
.jhp-booking[hidden] {
	display: none;
}

.jhp-booking__date {
	align-content: center;
	background: color-mix(in srgb, var(--event-color, var(--t-accent)) 8%, var(--bg-surface));
	border-radius: var(--r-input);
	display: grid;
	justify-items: center;
	padding: var(--sp2) var(--sp3);
	text-align: center;
}

.jhp-booking__day-name,
.jhp-booking__month {
	color: var(--t-meta);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.jhp-booking__day {
	color: var(--t-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.jhp-booking__details {
	align-content: center;
	display: grid;
	gap: var(--sp1);
	min-width: 0;
}

.jhp-booking__title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp2);
	margin: 0;
}

.jhp-booking__status-badge {
	background: var(--bg-tint);
	border-radius: var(--r-chip);
	color: var(--t-meta);
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 1px var(--sp2);
}

.jhp-booking__status-badge--pending {
	background: color-mix(in srgb, var(--warn-base) 10%, transparent);
	color: var(--warn-text);
}

.jhp-booking__action {
	align-items: flex-end;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--sp2);
    height: 100%;
    justify-content: space-between;
}

/* Kebab (three-dots) menu on booking cards */

.jhp-booking-menu {
	position: relative;
}

.jhp-booking-menu__trigger {
	align-items: center;
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: color-mix(in srgb, var(--t-meta) 55%, transparent);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.125rem;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: var(--sp1);
	transition: color var(--fast) var(--settl);
}

.jhp-booking-menu__trigger:hover,
.jhp-booking-menu__trigger:focus,
.jhp-booking-menu__trigger:active,
.jhp-booking-menu__trigger[aria-expanded="true"] {
	background: none;
	box-shadow: none;
	color: var(--t-heading);
}

.jhp-booking-menu__trigger:focus-visible {
	outline: 2px solid var(--t-accent);
	outline-offset: 2px;
}

.jhp-booking-menu__panel {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	box-shadow: var(--s3);
	min-width: 11rem;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + var(--sp1));
	z-index: 10;
}

.jhp-booking-menu__panel[hidden] {
	display: none;
}

.jhp-booking-menu__panel form {
	margin: 0;
}

.jhp-booking-menu__item {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	font-size: 0.875rem;
	padding: var(--sp3) var(--sp4);
	text-align: left;
	transition: background var(--fast) var(--settl);
	width: 100%;
	box-shadow: none!important;
	border-radius: 0;
}

.jhp-booking-menu__item--danger {
	border-left: 3px solid var(--warn-base);
	color: var(--warn-text);
	padding-left: calc(var(--sp4) - 3px);
}

.jhp-booking-menu__item--danger:hover {
	background: color-mix(in srgb, var(--warn-base) 8%, transparent);
	color: var(--warn-text);
}

.jhp-booking-menu__item--book {
	border-left: 3px solid var(--t-accent);
	color: var(--t-accent);
	padding-left: calc(var(--sp4) - 3px);
}

.jhp-booking-menu__item--book:hover {
	background: color-mix(in srgb, var(--t-accent) 8%, transparent);
	color: var(--t-accent);
}

/* Greyed-out option when the action isn't available. The reason shows as a
   native tooltip via the button's title attribute (hover only). */
.jhp-booking-menu__item--disabled,
.jhp-booking-menu__item--disabled:hover {
	background: none;
	color: var(--t-meta);
	cursor: not-allowed;
	opacity: 0.55;
}

/* Hairline between the two stacked menu options. */
.jhp-booking-menu__panel > form + form .jhp-booking-menu__item,
.jhp-booking-menu__panel > form + .jhp-booking-menu__item,
.jhp-booking-menu__panel > .jhp-booking-menu__item + form .jhp-booking-menu__item,
.jhp-booking-menu__panel > .jhp-booking-menu__item + .jhp-booking-menu__item {
	border-top: 1px solid var(--border);
}

.jhp-booking__meeting-link {
    font-size: 0.875rem;
	white-space: nowrap;
}

.jhp-booking__note {
	color: var(--t-meta);
	font-size: 0.8125rem;
	margin: 0;
	max-width: 14rem;
	text-align: right;
}

/* ==========================================================================
   State / notice component
   ========================================================================== */

/* Colour-coded notice / state strip — mirrors the .jhp-schedule-credits
   banner (flat tinted background, accent left border, label-style title).
   Each variant sets its accent, tint and ink via custom properties. */
.jhp-state {
	--state-accent: var(--t-accent);
	--state-tint: color-mix(in srgb, var(--t-accent) 8%, var(--bg-surface));
	--state-ink: var(--t-heading);
	background: var(--state-tint);
	border: none;
	border-left: 3px solid var(--state-accent);
	border-radius: 0;
	box-shadow: none;
	display: grid;
	gap: var(--sp2);
	margin: 0;
	padding: var(--sp5) var(--sp6);
	position: relative;
	margin-bottom: var(--sp8);
	box-shadow: var(--s1);
}

.jhp-state--success {
	--state-accent: var(--success-base);
	--state-tint: var(--success-tint);
	--state-ink: var(--success-text);
}

.jhp-state--warning,
.jhp-state--error {
	--state-accent: var(--warn-base);
	--state-tint: var(--warn-tint);
	--state-ink: var(--warn-text);
}

.jhp-state .jhp-state__title {
	color: var(--state-ink);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.jhp-state__message {
	color: var(--t-meta);
	font-size: 0.9rem;
	margin: 0;
}

.jhp-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
	margin-top: var(--sp1);
}

/* Action links render as filled buttons in the variant's accent colour, so
   the call to action stands out within the strip (matches the panel-widget
   button style used elsewhere). */
.jhp-state__actions a {
	align-self: flex-start;
	background: var(--state-accent);
	border-radius: var(--r-btn);
	color: var(--t-inv);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	padding: var(--sp2) var(--sp4);
	text-decoration: none;
	transition: opacity var(--fast) var(--settl);
}

.jhp-state__actions a:hover,
.jhp-state__actions a:focus-visible {
	color: var(--t-inv);
	opacity: 0.85;
}

.jhp-state__close {
	appearance: none;
	background: none;
	border: none;
	box-shadow: none;
	color: var(--state-ink);
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	opacity: 0.65;
	padding: var(--sp1);
	position: absolute;
	right: var(--sp2);
	top: var(--sp2);
	transition: opacity var(--fast) var(--settl);
}

.jhp-state__close:hover,
.jhp-state__close:focus-visible {
	background: none;
	box-shadow: none;
	opacity: 1;
}

/* ==========================================================================
   Rich copy / PMPro surfaces
   ========================================================================== */

.jhp-rich-copy {
	padding: var(--sp6);
}

.jhp-rich-copy > * {
	margin-top: 0;
}

.jhp-rich-copy > * + * {
	margin-top: var(--sp3);
}

/* ==========================================================================
   Progress grid / enrolment
   ========================================================================== */

.jhp-progress-grid {
	display: grid;
	gap: var(--sp4);
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	overflow: visible;
}

.jhp-progress-grid__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp2);
	align-items: start;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	box-shadow: var(--s1);
	color: inherit;
	cursor: pointer;
	padding: var(--sp4);
	text-decoration: none;
	transition: background var(--fast) var(--settl), border-color var(--fast) var(--settl), box-shadow var(--fast) var(--settl), transform var(--fast) var(--settl);
}

.jhp-progress-grid__item:hover,
.jhp-progress-grid__item:focus-visible {
	background: var(--bg-tint);
	border-color: var(--t-accent);
	box-shadow: var(--s2);
	transform: translateY(-1px);
	text-decoration: none;
	outline: none;
}

.jhp-progress-grid__item:focus-visible {
	outline: 4px solid var(--border-focus);
}


.jhp-progress-bar {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: 999px;
	height: 1.5rem;
	overflow: hidden;
	position: relative;
}

.jhp-progress-bar__fill {
	background: var(--t-accent);
	height: 100%;
	transition: width var(--mid) var(--settl);
}

.jhp-progress-bar__label {
	color: var(--t-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.02em;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.jhp-enrolment-form {
	display: grid;
	gap: var(--sp5);
}

.jhp-enrolment-form__groups {
	display: grid;
	gap: var(--sp5);
}

.jhp-enrolment-form__group {
	border-top: 3px solid var(--t-accent);
	padding: var(--sp6);
}

.jhp-enrolment-form__group .pmpro_spacer {
	display: none;
}

.jhp-enrolment-form__group .pmpro_form_fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.jhp-enrolment-form__group .pmpro_form_fields {
	display: grid;
	gap: var(--sp5);
}

.jhp-enrolment-form__group .pmpro_form_fields-description {
	margin-bottom: var(--sp2);
}

.jhp-enrolment-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
}

/* ==========================================================================
   My Account — inline email/password edit form
   ========================================================================== */

.jhp-account-form {
	display: grid;
	gap: var(--sp4);
	padding: var(--sp6);
	max-width: 680px;
}

.jhp-account-form__field {
	display: grid;
	gap: var(--sp1);
}

.jhp-account-form__label {
	color: var(--t-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

.jhp-account-form__input {
	appearance: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	color: var(--t-body);
	font-size: 1rem;
	padding: var(--sp2) var(--sp3);
	transition: border-color var(--fast) var(--settl), box-shadow var(--fast) var(--settl);
	width: 100%;
}

.jhp-account-form__input:focus,
.jhp-account-form__input:focus-visible {
	border-color: var(--t-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
	outline: none;
}

.jhp-account-form__hint {
	color: var(--t-meta);
	font-size: 0.8125rem;
	margin: 0;
}

.jhp-account-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
	margin-top: var(--sp1);
}

.jhp-account-form__submit {
	appearance: none;
	background: var(--t-accent);
	border: 1px solid var(--t-accent);
	border-radius: var(--r-btn);
	box-shadow: none;
	color: var(--t-inv);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp5);
	transition: background var(--fast) var(--settl);
}

.jhp-account-form__submit:hover,
.jhp-account-form__submit:focus-visible {
	background: var(--t-heading);
	border-color: var(--t-heading);
	color: var(--t-inv);
}

/* ==========================================================================
   Enrolment form — input controls
   ========================================================================== */

/* Field wrapper layout: label stacked above the input(s), hint below. */
.jhp-enrolment-form .pmpro_form_field {
	display: grid;
	gap: var(--sp2);
}

.jhp-enrolment-form .pmpro_form_label {
	color: var(--t-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
}

.jhp-enrolment-form .pmpro_asterisk {
	color: var(--c-warn);
	margin-left: 2px;
}

.jhp-enrolment-form .pmpro_form_hint {
	color: var(--t-meta);
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0;
}

/* Text-style inputs + select + textarea. */
.jhp-enrolment-form input[type="text"],
.jhp-enrolment-form input[type="email"],
.jhp-enrolment-form input[type="tel"],
.jhp-enrolment-form input[type="url"],
.jhp-enrolment-form input[type="number"],
.jhp-enrolment-form input[type="date"],
.jhp-enrolment-form input[type="password"],
.jhp-enrolment-form select,
.jhp-enrolment-form textarea {
	appearance: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	box-shadow: none;
	color: var(--t-body);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.45;
	padding: var(--sp3) var(--sp4);
	transition: border-color var(--fast) var(--settl), box-shadow var(--fast) var(--settl);
	width: 100%;
}

.jhp-enrolment-form textarea {
	min-height: 6rem;
	resize: vertical;
}

.jhp-enrolment-form input[type="text"]:focus,
.jhp-enrolment-form input[type="email"]:focus,
.jhp-enrolment-form input[type="tel"]:focus,
.jhp-enrolment-form input[type="url"]:focus,
.jhp-enrolment-form input[type="number"]:focus,
.jhp-enrolment-form input[type="date"]:focus,
.jhp-enrolment-form input[type="password"]:focus,
.jhp-enrolment-form select:focus,
.jhp-enrolment-form textarea:focus {
	border-color: var(--t-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
	outline: none;
}

/* Native select arrow: replaced with a CSS chevron so it matches text inputs. */
.jhp-enrolment-form select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5 11 1.5' stroke='%231f3a5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: right var(--sp4) center;
	background-repeat: no-repeat;
	background-size: 0.75rem;
	padding-right: var(--sp8);
}

/* Custom checkbox + radio. Hide the native control's chrome via
   appearance:none and draw a bespoke box/dot using a background image for
   the check mark and a radial-gradient for the radio dot. */
.jhp-enrolment-form input[type="checkbox"],
.jhp-enrolment-form input[type="radio"] {
	appearance: none;
	background: var(--bg-surface);
	border: 1.5px solid var(--border);
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0;
	height: 1.125rem;
	margin: 0 var(--sp2) 0 0;
	transition: background var(--fast) var(--settl), border-color var(--fast) var(--settl);
	vertical-align: -2px;
	width: 1.125rem;
}

.jhp-enrolment-form input[type="checkbox"] {
	border-radius: 4px;
}

.jhp-enrolment-form input[type="radio"] {
	border-radius: 50%;
}

.jhp-enrolment-form input[type="checkbox"]:hover,
.jhp-enrolment-form input[type="radio"]:hover {
	border-color: var(--t-accent);
}

.jhp-enrolment-form input[type="checkbox"]:focus-visible,
.jhp-enrolment-form input[type="radio"]:focus-visible {
	border-color: var(--t-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
	outline: none;
}

.jhp-enrolment-form input[type="checkbox"]:checked {
	background-color: var(--t-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.2 11.4 2.6 7.8l1.2-1.2 2.4 2.4 6-6 1.2 1.2z'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;
	border-color: var(--t-accent);
}

/* Radio dot drawn via an inset shadow ring so the inner dot has crisp,
   pixel-perfect edges (radial-gradient feathered into the surface, which
   read as a fuzzy halo). The accent fills the circle and the inset ring of
   surface colour leaves a clean accent dot in the middle. */
.jhp-enrolment-form input[type="radio"]:checked {
	background: var(--t-accent);
	border-color: var(--t-accent);
	box-shadow: inset 0 0 0 3px var(--bg-surface);
}

.jhp-enrolment-form input[type="radio"]:checked:focus-visible {
	box-shadow: inset 0 0 0 3px var(--bg-surface),
		0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
}

/* Checkbox / radio item layout: a clickable row with the control on the
   left and label to its right. */
.jhp-enrolment-form .pmpro_form_label-inline {
	align-items: center;
	color: var(--t-body);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 500;
	gap: var(--sp2);
	margin: 0;
}

/* When the input lives inside an inline-flex label, the input's own right
   margin would double with the flex gap. Strip it so the spacing is purely
   driven by the label's gap value. */
.jhp-enrolment-form .pmpro_form_label-inline input[type="checkbox"],
.jhp-enrolment-form .pmpro_form_label-inline input[type="radio"] {
	margin: 0;
	vertical-align: baseline;
}

.jhp-enrolment-form .pmpro_form_field-radio-item {
	margin-bottom: var(--sp1);
}

.jhp-enrolment-form .pmpro_form_field-radio-items {
	display: grid;
	gap: var(--sp1);
}

.jhp-enrolment-form .pmpro_list-plain {
	display: grid;
	gap: var(--sp2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grouped-checkbox list rows: input on the left, label to its right, both
   clickable. PMPro renders the input inside a sibling wrapper rather than
   the label, so we lay out the row as a flex line. */
.jhp-enrolment-form .pmpro_list_item {
	align-items: center;
	display: flex;
	gap: var(--sp2);
}

.jhp-enrolment-form .pmpro_form_field-checkbox-grouped-item {
	align-items: center;
	display: inline-flex;
	line-height: 0;
}

.jhp-enrolment-form .pmpro_list_item .pmpro_form_label-inline {
	gap: 0;
}

/* Description paragraph PMPro prints at the top of a field set. */
.jhp-enrolment-form__group .pmpro_form_fields-description {
	color: var(--t-sub);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 var(--sp4);
}

/* Required-field visual flag — soften the warn colour and right-align it
   inside flex labels so it sits next to the field name not under it. */
.jhp-enrolment-form .pmpro_required {
	color: var(--warn-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin-left: var(--sp1);
	text-transform: uppercase;
}

/* Inline error message PMPro inserts when validation fails. */
.jhp-enrolment-form .pmpro_message-error,
.jhp-enrolment-form .pmpro_form_field-error {
	color: var(--warn-text);
	font-size: 0.8125rem;
	margin: var(--sp1) 0 0;
}

/* When a field has an error PMPro adds a class to the input wrapper — give
   the input a warning outline for clarity. */
.jhp-enrolment-form .has-error input[type="text"],
.jhp-enrolment-form .has-error input[type="email"],
.jhp-enrolment-form .has-error input[type="tel"],
.jhp-enrolment-form .has-error input[type="url"],
.jhp-enrolment-form .has-error input[type="number"],
.jhp-enrolment-form .has-error input[type="date"],
.jhp-enrolment-form .has-error input[type="password"],
.jhp-enrolment-form .has-error select,
.jhp-enrolment-form .has-error textarea {
	border-color: var(--warn-base);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-base) 18%, transparent);
}

/* Disabled / read-only fields look muted but still legible. */
.jhp-enrolment-form input[disabled],
.jhp-enrolment-form select[disabled],
.jhp-enrolment-form textarea[disabled],
.jhp-enrolment-form input[readonly],
.jhp-enrolment-form textarea[readonly] {
	background: var(--bg-tint);
	color: var(--t-meta);
	cursor: not-allowed;
}

.jhp-enrolment-form input[type="checkbox"][disabled],
.jhp-enrolment-form input[type="radio"][disabled] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* Date inputs have a calendar picker chrome on most browsers — make it
   blend by colouring it with our accent. */
.jhp-enrolment-form input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	filter: opacity(0.6);
}

.jhp-enrolment-form input[type="date"]:hover::-webkit-calendar-picker-indicator {
	filter: opacity(1);
}

/* Submit row — full-width button on narrow viewports so the primary action
   stays prominent on phones. */
@media (max-width: 540px) {
	.jhp-enrolment-form__actions button[type="submit"] {
		width: 100%;
	}
}

/* Submit button — uses the same primary-button language as the modal. */
.jhp-enrolment-form__actions button[type="submit"] {
	appearance: none;
	background: var(--t-accent);
	border: none;
	border-radius: var(--r-btn);
	box-shadow: none;
	color: var(--t-inv);
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	padding: var(--sp3) var(--sp5);
	transition: background var(--fast) var(--settl);
}

.jhp-enrolment-form__actions button[type="submit"]:hover,
.jhp-enrolment-form__actions button[type="submit"]:focus-visible {
	background: var(--t-heading);
	color: var(--t-inv);
}

/* ==========================================================================
   Account details (accordion)
   ========================================================================== */

.jhp-account-details {
	padding: 0;
}

.jhp-account-details__summary {
	cursor: pointer;
	list-style: none;
	padding: var(--sp5) var(--sp6);
}

.jhp-account-details__summary:focus-visible {
	outline: 4px solid var(--border-focus);
	outline-offset: 2px;
}

.jhp-account-details__summary::-webkit-details-marker {
	display: none;
}

.jhp-account-details__content {
	border-top: 1px solid var(--border);
	display: grid;
	gap: var(--sp5);
	padding: 0 var(--sp6) var(--sp6);
}

/* ==========================================================================
   PMPro card overrides
   ========================================================================== */

.jhp-pmpro-surface .pmpro_section + .pmpro_section {
	margin-top: var(--sp6);
}

.jhp-pmpro-surface .pmpro_card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: none;
	padding: var(--sp5);
}

.jhp-pmpro-surface .pmpro_card + .pmpro_card,
.jhp-pmpro-surface .pmpro_invoice_details + .pmpro_invoice_details {
	margin-top: var(--sp5);
}

.jhp-pmpro-surface .pmpro_card_content {
	padding: 0;
}

.jhp-pmpro-surface .pmpro_table,
.jhp-pmpro-surface .pmpro_table th,  
.jhp-pmpro-surface .pmpro_table td {
	background-color: transparent!important;
}

/* ==========================================================================
   Month filter (Catchups + History)
   ========================================================================== */

.jhp-month-filter {
	align-items: center;
	display: flex;
	gap: var(--sp3);
	margin-bottom: var(--sp4);
}

.jhp-month-filter__arrow {
	appearance: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	box-shadow: none;
	color: var(--t-sub);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp3);
	transition: border-color var(--fast) var(--settl), color var(--fast) var(--settl);
}

.jhp-month-filter__arrow:hover:not([disabled]) {
	border-color: var(--t-accent);
	color: var(--t-heading);
}

.jhp-month-filter__arrow[disabled] {
	color: var(--t-meta);
	cursor: not-allowed;
	opacity: 0.6;
}

.jhp-month-filter__label {
	color: var(--t-heading);
	flex: 1;
	font-weight: 600;
	text-align: center;
}

.jhp-month-summary {
	color: var(--t-meta);
	font-size: 0.875rem;
	margin: var(--sp4) 0 0;
	text-align: center;
}

/* Status-filter pill bar (History page: All / Attended / Cancelled). */
.jhp-status-filter {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp2);
	margin-bottom: var(--sp3);
}

.jhp-status-filter__pill {
	appearance: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	box-shadow: none;
	color: var(--t-sub);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp5);
	transition: background var(--fast) var(--settl), border-color var(--fast) var(--settl), color var(--fast) var(--settl);
	text-box-trim: trim-both;
}

/* Unified filter-pill hover: subtle tint background, no border or text
   recolour. Active pills keep the accent fill + inverted text on hover. */
.jhp-status-filter__pill:hover,
.jhp-status-filter__pill:focus-visible {
	background: var(--bg-tint);
	border-color: var(--border);
	box-shadow: none;
	color: var(--t-heading);
}

.jhp-status-filter__pill.is-active {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-inv);
}

.jhp-status-filter__pill.is-active:hover,
.jhp-status-filter__pill.is-active:focus-visible {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-inv);
}

/* Segmented switch — for pick-one filters where the options are mutually
   exclusive (Month/Week, List/Calendar, All/Attended/Cancelled). Reads as a
   single control rather than two separate buttons. */
.jhp-status-filter--switch {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 2px;
}

.jhp-status-filter--switch .jhp-status-filter__pill {
	background: transparent;
	border: 1px solid transparent;
	border-radius: calc(var(--r-pill) - 2px);
}

.jhp-status-filter--switch .jhp-status-filter__pill:hover {
	background: var(--bg-tint);
	border-color: transparent;
	box-shadow: none;
	color: var(--t-heading);
}

.jhp-status-filter--switch .jhp-status-filter__pill.is-active:hover {
	background: var(--t-accent);
	color: var(--t-inv);
}

.jhp-status-filter--switch .jhp-status-filter__pill.is-active {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-inv);
}

.jhp-status-filter--switch .jhp-status-filter__pill[disabled] {
	background: transparent;
	color: var(--t-meta);
	cursor: not-allowed;
	opacity: 0.55;
}

/* History page toolbar: view-toggle (List/Calendar) + status-filter pills
   sit on one row when there's space, wrap on narrow viewports. */
.jhp-history-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp4);
	justify-content: space-between;
	margin-bottom: var(--sp3);
}

.jhp-history-toolbar .jhp-status-filter {
	margin-bottom: 0;
}

.jhp-history-views {
	display: grid;
	gap: var(--sp4);
}

.jhp-history-view {
	display: grid;
	gap: var(--sp4);
}

.jhp-history-view[hidden] {
	display: none;
}

.jhp-history-calendar[hidden] {
	display: none;
}

/* ==========================================================================
   Session history list
   ========================================================================== */

/* Attended cards carry the Amelia event colour inline (same as booking cards).
   Cancelled cards are greyed back so attended sessions read as the focus. */
.jhp-booking--cancelled {
	--event-color: var(--t-meta);
	opacity: 0.7;
}

.jhp-history-badge {
	background: var(--bg-tint);
	border-radius: var(--r-chip);
	color: var(--t-meta);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 2px var(--sp2);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ==========================================================================
   Members footer
   ========================================================================== */

.jhp-members-footer {
	background: var(--bg-deep);
	color: var(--t-inv);
	/* sit in the main (second) column of .jhp-layout, not the sidebar */
	grid-column: 2;
	margin-top: auto;
}

/* On dashboard the footer is inside .jhp-layout__body — span both body columns */
.jhp-layout--dashboard .jhp-members-footer {
	grid-column: 1 / -1;
}

.jhp-members-footer__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp4);
	justify-content: space-between;
	padding: var(--sp6) var(--sp8);
}

.jhp-members-footer__copyright {
	color: var(--t-inv-dim);
	margin: 0;
}

.jhp-members-footer__brand .custom-logo-link,
.jhp-members-footer__brand-link {
	align-items: center;
	color: var(--t-inv);
	display: inline-flex;
	text-decoration: none;
}

.jhp-members-footer__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 2.5rem;
	max-width: 160px;
	width: auto;
}

.jhp-members-footer__brand-text {
	color: var(--t-inv);
}

/* ==========================================================================
   Focus styles
   ========================================================================== */

.jhp-members a:focus-visible,
.jhp-members button:focus-visible,
.jhp-members input:focus-visible,
.jhp-members select:focus-visible,
.jhp-members textarea:focus-visible,
.jhp-members-footer a:focus-visible,
.jhp-layout__main a:focus-visible,
.jhp-layout__main button:focus-visible,
.jhp-layout__main input:focus-visible,
.jhp-layout__main select:focus-visible,
.jhp-layout__main textarea:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: -1px;
}

/* ==========================================================================
   Schedule page
   ========================================================================== */

/* Credit balance banner */

.jhp-schedule-credits {
	display: grid;
	gap: var(--sp2);
	padding: var(--sp5) var(--sp6);
}

.jhp-schedule-credits--has-credits {
	background: color-mix(in srgb, var(--t-accent) 8%, var(--bg-surface));
	border-left: 3px solid var(--t-accent);
}

.jhp-schedule-credits--empty {
	background: var(--bg-tint);
	border-left: 3px solid var(--border);
}

.jhp-schedule-credits__label {
	color: var(--t-heading);
	font-weight: 600;
	margin: 0;
}

.jhp-schedule-credits__hint {
	color: var(--t-meta);
	font-size: 0.9rem;
	margin: 0;
}

.jhp-schedule-credits__hint a {
	color: var(--t-accent);
}

/* Schedule container */

.jhp-schedule {
	display: grid;
	gap: var(--sp5);
}

/* Month navigation toolbar */

.jhp-schedule__toolbar {
	align-items: center;
	display: flex;
	gap: var(--sp4);
	justify-content: space-between;
}

.jhp-schedule__month-label {
	color: var(--t-heading);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
}

/* Month/week prev-next nav — applies to <a> and <button> equally; Astra's
   default button background/box-shadow is reset so both elements match. */
.jhp-schedule__nav {
	align-items: center;
	appearance: none;
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	box-shadow: none;
	color: var(--t-sub);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.5rem;
	justify-content: center;
	line-height: 1;
	min-height: 2.25rem;
	min-width: 2.25rem;
	padding: 0;
	text-decoration: none;
	transition: border-color var(--fast) var(--settl), color var(--fast) var(--settl);
}

.jhp-schedule__nav:hover,
.jhp-schedule__nav:focus-visible {
	background: var(--bg-page);
	border-color: var(--t-accent);
	box-shadow: none;
	color: var(--t-accent);
}

.jhp-schedule__nav[disabled],
.jhp-schedule__nav[disabled]:hover,
.jhp-schedule__nav[disabled]:focus-visible {
	border-color: var(--border);
	color: var(--t-meta);
	cursor: not-allowed;
	opacity: 0.55;
}

/* Unified controls row: view toggle on the left, filters grouped on the right. */
.jhp-schedule__controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
	justify-content: space-between;
}

.jhp-schedule__controls .jhp-status-filter {
	margin-bottom: 0;
}

.jhp-schedule__filters {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
}

/* Week view */
.jhp-schedule__week-toolbar {
	align-items: center;
	display: flex;
	gap: var(--sp4);
	justify-content: space-between;
}

.jhp-schedule__week-label {
	color: var(--t-heading);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: center;
}

.jhp-schedule-week-list {
	display: grid;
	gap: var(--sp4);
}

.jhp-schedule-week {
	display: grid;
	gap: var(--sp3);
}

.jhp-schedule-week[hidden] {
	display: none;
}

.jhp-schedule-week__item[hidden] {
	display: none;
}

/* Weekday header row */

.jhp-schedule__weekday-row {
	display: grid;
	gap: var(--sp2);
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.jhp-schedule__weekday {
	color: var(--t-meta);
	font-size: 0.8125rem;
	text-align: center;
}

/* Calendar grid */

.jhp-schedule__grid {
	display: grid;
	padding: var(--sp1);
	gap: var(--sp1);
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-radius: var(--r-modal);
}

.jhp-schedule__cell {
	background: var(--bg-surface);
	border-radius: var(--r-input);
	display: flex;
	flex-direction: column;
	gap: var(--sp2);
	min-height: 6rem;
	padding: var(--sp3);
	border: 1px solid var(--border);
	box-shadow: var(--elevation-1);
}

.jhp-schedule__cell--pad {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.jhp-schedule__cell.is-today {
	border-color: var(--t-accent);
}

.jhp-schedule__cell.is-today .jhp-schedule__event-chip--past {
	opacity: 0.5;
}

/* Past days are dimmed as a whole, so their chips need no separate styling. */
.jhp-schedule__cell.is-past {
	opacity: 0.5;
}

.jhp-schedule__cell--has-events {
	cursor: pointer;
}

.jhp-schedule__cell.is-selected {
	border-color: var(--t-accent);
	box-shadow: var(--s2);
}

.jhp-schedule__day-number {
	appearance: none;
	align-self: flex-start;
	background: none;
	border: none;
	box-shadow: none;
	color: var(--t-sub);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
}

button.jhp-schedule__day-number {
	cursor: pointer;
}

.jhp-schedule__cell.is-today .jhp-schedule__day-number {
	color: var(--t-accent);
}

.jhp-schedule__event-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jhp-schedule__empty {
	color: var(--t-meta);
	text-align: center;
}

/* Colour key / per-class filter */

.jhp-schedule__legend {
	position: relative;
	display: flex;
}

/* Legend toggle reuses the status-filter pill look so it sits alongside the
   other filter pills in the controls row. */
.jhp-schedule__legend-toggle {
	align-items: center;
	appearance: none;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	box-shadow: none;
	color: var(--t-sub);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: var(--sp2);
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp5);
	transition: background var(--fast) var(--settl), border-color var(--fast) var(--settl), color var(--fast) var(--settl);
}

.jhp-schedule__legend-toggle:hover,
.jhp-schedule__legend-toggle:focus-visible {
	background: var(--bg-tint);
	border-color: var(--border);
	box-shadow: none;
	color: var(--t-heading);
}

.jhp-schedule__legend-toggle[aria-expanded="true"],
.jhp-schedule__legend-toggle[aria-expanded="true"]:hover,
.jhp-schedule__legend-toggle[aria-expanded="true"]:focus-visible {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-inv);
}

.jhp-schedule__legend-toggle:focus-visible {
	outline: 2px solid var(--t-accent);
	outline-offset: 2px;
}

.jhp-schedule__legend-chevron {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
	height: 0.4375rem;
	transform: rotate(-135deg);
	transition: transform var(--fast) var(--settl);
	width: 0.4375rem;
}

.jhp-schedule__legend-toggle[aria-expanded="false"] .jhp-schedule__legend-chevron {
	transform: rotate(45deg);
}

/* Expanded legend pills float as a dropdown so toggling them open doesn't
   reflow the surrounding controls row. */
.jhp-schedule__legend-list {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: var(--s2);
	display: flex;
	flex-direction: column;
	gap: var(--sp2);
	margin-top: var(--sp2);
	max-width: 16rem;
	min-width: 14rem;
	padding: var(--sp3);
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
}

.jhp-schedule__legend-list[hidden] {
	display: none;
}

/* Legend item — a list row with a coloured swatch, class name, and a
   tick that fades in when the class is selected. Cleaner than full coloured
   pills inside the dropdown card. */
.jhp-schedule__legend-item {
	align-items: center;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: var(--r-input);
	box-shadow: none;
	color: var(--t-heading);
	cursor: pointer;
	display: flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: var(--sp2);
	line-height: 1.2;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp3);
	text-align: left;
	transition: background var(--fast) var(--settl);
	width: 100%;
}

.jhp-schedule__legend-item:hover,
.jhp-schedule__legend-item:focus-visible {
	background: var(--bg-tint);
	box-shadow: none;
}

.jhp-schedule__legend-swatch {
	background: var(--event-color, var(--t-accent));
	border-radius: var(--r-pill);
	display: inline-block;
	flex-shrink: 0;
	height: 0.75rem;
	width: 0.75rem;
}

.jhp-schedule__legend-name {
	flex: 1;
}

/* Checkbox indicator — rounded square that fills with the accent and a
   white tick when the row is selected. */
.jhp-schedule__legend-check {
	background: transparent;
	border: 1.5px solid var(--border);
	border-radius: 4px;
	flex-shrink: 0;
	height: 1.125rem;
	position: relative;
	transition: background var(--fast) var(--settl), border-color var(--fast) var(--settl);
	width: 1.125rem;
}

.jhp-schedule__legend-check::after {
	border-bottom: 2px solid var(--t-inv);
	border-right: 2px solid var(--t-inv);
	content: "";
	height: 0.6rem;
	left: 0.32rem;
	opacity: 0;
	position: absolute;
	top: 0.08rem;
	transform: rotate(45deg);
	transition: opacity var(--fast) var(--settl);
	width: 0.3rem;
}

.jhp-schedule__legend-item[aria-pressed="true"] .jhp-schedule__legend-check {
	background: var(--t-accent);
	border-color: var(--t-accent);
}

.jhp-schedule__legend-item[aria-pressed="true"] .jhp-schedule__legend-check::after {
	opacity: 1;
}

.jhp-schedule__legend-item[aria-pressed="false"] {
	color: var(--t-meta);
}

.jhp-schedule__legend-item[aria-pressed="false"] .jhp-schedule__legend-swatch {
	opacity: 0.4;
}

/* "All" row — no per-class swatch; reserve space for alignment. */
.jhp-schedule__legend-item--all {
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	font-weight: 600;
	margin-bottom: var(--sp1);
	padding-bottom: var(--sp3);
}

.jhp-schedule__legend-item--all .jhp-schedule__legend-swatch {
	visibility: hidden;
}

.jhp-schedule__legend-item[aria-pressed="false"]:hover,
.jhp-schedule__legend-item[aria-pressed="false"]:focus,
.jhp-schedule__legend-item[aria-pressed="false"]:active {
	background: transparent;
}

/* Event chips */

.jhp-schedule__event-list li.is-filtered-out {
	display: none;
}

.jhp-schedule__event-chip {
	align-items: flex-start;
	background: color-mix(in srgb, var(--event-color, var(--t-accent)) 10%, transparent);
	border: 1px solid transparent;
	border-radius: var(--r-chip);
	color: var(--t-meta);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: 0.75rem;
	gap: 1px;
	line-height: 1.3;
	padding: var(--sp1) var(--sp2);
	text-align: left;
	transition: opacity var(--fast) var(--settl), transform var(--fast) var(--calm);
	width: 100%;
	box-shadow: var(--elevation-2);
}

.jhp-schedule__event-chip:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.jhp-schedule__event-chip[aria-pressed="true"] {
	box-shadow: var(--s2);
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

/* Two-tone scheme: sessions the member is booked onto get a stronger fill of
   the event colour; every other state keeps the lighter default above. Past
   sessions are dimmed by the .jhp-schedule__cell.is-past opacity rule, so
   they need no separate colour — only the strikethrough. */
.jhp-schedule__event-chip--booked {
	background: color-mix(in srgb, var(--event-color, var(--t-accent)) 35%, transparent);
	border-color: var(--event-color, var(--t-accent));
}

.jhp-schedule__event-chip--past {
	text-decoration: line-through;
}

/* Each schedule view container stacks its toolbar and content with a clear
   gap so the date toolbar doesn't crowd the calendar grid / week list. */
[data-jhp-schedule-view] {
	display: grid;
	gap: var(--sp4);
}

[data-jhp-schedule-view][hidden] {
	display: none;
}

/* History read-only chips: attended uses the theme success tint, cancelled
   uses the warning tint. Both ignore --event-color since they're a fixed
   semantic colour-code rather than per-class. */
.jhp-schedule__event-chip--attended {
	background: var(--success-tint);
	color: var(--success-text);
}

.jhp-schedule__event-chip--cancelled {
	background: var(--warn-tint);
	color: var(--warn-text);
	text-decoration: line-through;
}

.jhp-schedule__chip-time {
	font-size: 0.6875rem;
	opacity: 0.8;
}

.jhp-schedule__chip-name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-weight: 600;
	line-clamp: 2;
	overflow: hidden;
	width: 100%;
}

/* Event detail panel */

.jhp-schedule-detail {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: var(--s3);
	display: grid;
	gap: var(--sp4);
	padding: var(--sp5) var(--sp6);
}

/* `display: grid` overrides the `hidden` attribute's UA style, so the panel
   needs this rule to actually disappear when closed. */
.jhp-schedule-detail[hidden] {
	display: none;
}

.jhp-schedule-detail__bar {
	align-items: center;
	display: flex;
	gap: var(--sp3);
	justify-content: space-between;
}

.jhp-schedule-detail__heading {
	color: var(--t-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0;
}

.jhp-schedule-detail__close {
	align-items: center;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: var(--r-pill);
	box-shadow: none;
	color: var(--t-meta);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 1.25rem;
	justify-content: center;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	padding: 0;
	transition: color var(--fast) var(--settl);
}

.jhp-schedule-detail__close:hover {
	border-color: var(--t-sub);
	color: var(--t-sub);
	background: transparent;
	box-shadow: none;
}

.jhp-schedule-detail__close:focus {
	border-color: var(--t-sub);
	color: var(--t-sub);
	background: transparent;
}

.jhp-schedule-detail__body {
	display: grid;
	gap: var(--sp4);
}

/* Individual session card within the panel — reuses the .jhp-card .jhp-booking
   layout (see above) so it matches the upcoming-classes list. Only the
   schedule-specific status badge, excerpt and notes are styled here. */

.jhp-schedule-session__status {
	border-radius: var(--r-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 3px var(--sp2);
	text-transform: uppercase;
	width: fit-content;
	text-box-trim: trim-both;
}

.jhp-schedule-session__status--bookable {
	background: color-mix(in srgb, var(--t-accent) 12%, transparent);
	color: var(--t-accent);
}

.jhp-schedule-session__status--booked {
	background: color-mix(in srgb, var(--tier-silver-accent) 12%, transparent);
	color: var(--tier-silver-text);
}

.jhp-schedule-session__status--full,
.jhp-schedule-session__status--past {
	background: var(--bg-tint);
	color: var(--t-meta);
}

.jhp-schedule-session__status--no_credits {
	background: color-mix(in srgb, var(--warn-base) 12%, transparent);
	color: var(--warn-text);
}

.jhp-schedule-session__excerpt {
	color: var(--t-body);
	font-size: 0.9375rem;
	margin: 0;
}

/* ==========================================================================
   Responsive — 1200px: collapse right panel below main
   ========================================================================== */

@media (max-width: 1200px) {
	.jhp-layout__body {
		grid-template-columns: 1fr;
	}

	.jhp-layout__panel {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 var(--sp8) var(--sp8);
	}

	.jhp-panel-widget {
		flex: 1 1 240px;
	}
}

/* ==========================================================================
   Responsive — 900px: narrow sidebar
   ========================================================================== */

@media (max-width: 900px) {
	.jhp-layout {
		grid-template-columns: 200px 1fr;
	}

	.jhp-sidebar {
		padding: var(--sp6) var(--sp4);
	}
}

/* ==========================================================================
   Responsive — 768px: sidebar collapses to sticky top strip
   ========================================================================== */

@media (max-width: 768px) {
	.jhp-layout,
	.jhp-layout--dashboard {
		grid-template-columns: 1fr;
	}

	.jhp-layout__body {
		grid-template-columns: 1fr;
	}

	.jhp-members-footer {
		grid-column: 1;
	}

	/* Mobile top bar — fixed height; logo + hamburger sit inside it */
	.jhp-members-nav__bar {
		align-items: center;
		background: var(--bg-dark);
		color: var(--t-inv);
		display: flex;
		gap: var(--sp4);
		height: 4.5rem;
		padding: 0 var(--sp5);
		position: sticky;
		top: 0;
		z-index: 90;
	}

	/* Logo takes the space left of the hamburger; the image is scaled to fit
	   that box with object-fit, so the bar's height drives the logo size. */
	.jhp-members-nav__bar .custom-logo-link {
		display: block;
		flex: 1 1 auto;
		height: 100%;
		min-width: 0;
		padding: var(--sp3) 0;
	}

	/* Higher specificity (0,3,0) than Astra's .ast-header-break-point
	   .custom-logo-link img rule, so the 48px cap is overridden here. */
	.jhp-members-nav__bar .custom-logo-link .custom-logo {
		display: block;
		height: 100%;
		max-width: none;
		object-fit: contain;
		object-position: left center;
		width: 100%;
	}

	.jhp-members-nav__toggle {
		align-items: center;
		appearance: none;
		background: none;
		border: none;
		box-shadow: none;
		color: var(--t-inv);
		cursor: pointer;
		display: inline-flex;
		flex: 0 0 auto;
		font-size: 0.875rem;
		font-weight: 600;
		gap: var(--sp2);
		margin-left: auto;
		padding: var(--sp2);
	}

	.jhp-members-nav__toggle-icon {
		display: block;
		height: 10px;
		position: relative;
		width: 1.25rem;
	}

	.jhp-members-nav__toggle-icon::before,
	.jhp-members-nav__toggle-icon::after {
		background: currentColor;
		border-radius: 2px;
		content: "";
		height: 2px;
		left: 0;
		position: absolute;
		width: 100%;
	}

	.jhp-members-nav__toggle-icon::before {
		box-shadow: 0 4px 0 currentColor;
		top: 0;
	}

	.jhp-members-nav__toggle-icon::after {
		bottom: 0;
	}

	/* Dimmed backdrop */
	.jhp-members-nav__backdrop {
		background: rgba(0, 0, 0, 0.5);
		display: block;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		transition: opacity var(--mid) var(--settl);
		z-index: 100;
	}

	.jhp-members-nav.is-nav-open .jhp-members-nav__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Sidebar as off-canvas drawer */
	.jhp-sidebar {
		bottom: 0;
		height: auto;
		left: 0;
		max-width: 82vw;
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: transform var(--mid) var(--settl), visibility 0s linear var(--mid);
		visibility: hidden;
		width: 280px;
		z-index: 110;
	}

	.jhp-members-nav.is-nav-open .jhp-sidebar {
		transform: translateX(0);
		transition: transform var(--mid) var(--settl), visibility 0s;
		visibility: visible;
	}

	/* Close (X) button inside the drawer */
	.jhp-sidebar__close {
		appearance: none;
		background: none;
		border: none;
		box-shadow: none;
		color: var(--t-inv-dim);
		cursor: pointer;
		display: block;
		font-size: 1.5rem;
		line-height: 1;
		margin: 0 0 var(--sp1) auto;
		padding: var(--sp1);
	}

	.jhp-sidebar__close:hover {
		color: var(--t-inv);
	}

	#primary.jhp-layout__main {
		padding: var(--sp6) var(--sp5) !important;
	}

	.jhp-layout__panel {
		padding: 0 var(--sp5) var(--sp6);
	}

	.jhp-members__grid--overview,
	.jhp-members__grid--tight,
	.jhp-action-grid,
	.jhp-link-grid,
	.jhp-progress-grid {
		grid-template-columns: 1fr;
	}

	.jhp-schedule__cell {
		min-height: 4.5rem;
		padding: var(--sp2);
	}

	.jhp-schedule__day-number {
		font-size: 0.75rem;
	}

	.jhp-schedule__chip-name {
		display: none;
	}

	.jhp-schedule__event-chip {
		padding: var(--sp1);
	}

	.jhp-schedule__chip-time {
		font-size: 0.625rem;
	}

	.jhp-schedule-detail {
		padding: var(--sp5);
	}
}

/* ==========================================================================
   Responsive — 640px: tighten padding on all cards
   ========================================================================== */

@media (max-width: 640px) {
	.jhp-panel,
	.jhp-panel-widget,
	.jhp-summary,
	.jhp-booking,
	.jhp-rich-copy,
	.jhp-progress-grid,
	.jhp-enrolment-form__group,
	.jhp-state,
	.jhp-action-card,
	.jhp-link-grid {
		padding: var(--sp4);
	}

	.jhp-account-details__summary {
		padding: var(--sp4);
	}

	.jhp-account-details__content {
		padding: 0 var(--sp4) var(--sp4);
	}

	.jhp-members-footer__inner {
		padding-block: var(--sp5);
	}

	.jhp-booking {
		grid-template-columns: 4.5rem 1fr;
	}

	.jhp-booking__date {
		grid-row: span 2;
	}

	.jhp-booking__action {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Responsive — 480px: schedule chips become dots
   ========================================================================== */

@media (max-width: 480px) {
	.jhp-schedule__cell {
		min-height: 3rem;
		padding: var(--sp1);
	}

	.jhp-schedule__chip-time {
		display: none;
	}

	.jhp-schedule__event-chip {
		align-items: center;
		background: color-mix(in srgb, var(--event-color, var(--t-accent)) 45%, transparent);
		border-radius: var(--r-pill);
		height: 8px;
		min-width: 8px;
		overflow: hidden;
		padding: 0;
		pointer-events: none;
		text-indent: -9999px;
		width: 8px;
	}

	/* Booked dots show the full event colour; un-booked ones the lighter mix. */
	.jhp-schedule__event-chip--booked {
		background: var(--event-color, var(--t-accent));
	}

	/* History dots: keep the attended/cancelled tints distinct from event colour. */
	.jhp-schedule__event-chip--attended {
		background: var(--success-base);
	}

	.jhp-schedule__event-chip--cancelled {
		background: var(--warn-base);
	}
}

/* ==========================================================================
   Confirmation modal
   ========================================================================== */

.jhp-modal {
	align-items: center;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	padding: var(--sp5);
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1000;
}

/* `display: flex` overrides the UA `hidden` style, so hide explicitly. */
.jhp-modal[hidden] {
	display: none;
}

.jhp-modal__backdrop {
	background: rgba(13, 27, 42, 0.55);
	inset: 0;
	position: absolute;
}

.jhp-modal__dialog {
	background: var(--bg-surface);
	border-radius: var(--r-modal);
	box-shadow: var(--s5);
	display: grid;
	gap: var(--sp4);
	max-width: 26rem;
	padding: var(--sp6);
	position: relative;
	width: 100%;
}

.jhp-modal__title {
	color: var(--t-heading);
	font-size: 1.375rem;
	margin: 0;
}

.jhp-modal__body {
	color: var(--t-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0;
}

.jhp-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp2);
	justify-content: flex-end;
}

.jhp-modal__btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--r-btn);
	box-shadow: none;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 0;
	min-width: 0;
	padding: var(--sp2) var(--sp4);
	transition: background var(--fast) var(--settl);
}

.jhp-modal__btn--ghost {
	background: none;
	border-color: var(--border);
	color: var(--t-body);
}

.jhp-modal__btn--ghost:hover,
.jhp-modal__btn--ghost:focus-visible {
	background: var(--bg-tint);
	color: var(--t-heading);
}

.jhp-modal__btn--danger {
	background: var(--warn-base);
	color: var(--t-inv);
}

.jhp-modal__btn--danger:hover,
.jhp-modal__btn--danger:focus-visible {
	background: var(--warn-emphasis);
	color: var(--t-inv);
}

.jhp-modal__btn--primary {
	background: var(--t-accent);
	color: var(--t-inv);
}

.jhp-modal__btn--primary:hover,
.jhp-modal__btn--primary:focus-visible {
	background: var(--t-heading);
	color: var(--t-inv);
}

/* ==========================================================================
   Login splash — split brand / form layout
   ========================================================================== */

.jhp-login-splash-body {
	background: var(--bg-page);
	color: var(--t-body);
	margin: 0;
}

/* Hide any chrome the active theme might still try to render. */
.jhp-login-splash-body > .site,
.jhp-login-splash-body > header,
.jhp-login-splash-body > footer,
.jhp-login-splash-body .ast-mobile-menu-trigger-fill,
.jhp-login-splash-body #masthead {
	display: none;
}

.jhp-login-splash {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	min-height: 100vh;
}

/* ── Left: brand panel ──────────────────────────────────────────────── */

.jhp-login-splash__brand-panel {
	background: linear-gradient(160deg, var(--bg-deep, var(--bg-dark)) 0%, var(--bg-dark) 100%);
	color: var(--t-inv);
	display: flex;
	overflow: hidden;
	padding: var(--sp10) var(--sp10);
	position: relative;
}

/* Page featured image powers the background when present. */
.jhp-login-splash__brand-panel.has-image {
	background-image: var(--brand-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Blue accent overlay tinting the featured image so the logo / tagline
   remain readable. */
.jhp-login-splash__brand-panel.has-image::before {
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--bg-dark) 78%, transparent) 0%,
		color-mix(in srgb, var(--t-accent) 70%, transparent) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.jhp-login-splash__brand-inner {
	align-self: flex-start;
	display: grid;
	gap: var(--sp3);
	position: relative;
	z-index: 1;
}

.jhp-login-splash__brand-link {
	color: var(--t-inv);
	display: inline-flex;
	text-decoration: none;
}

/* Force the WP custom logo to render light so it's visible on the dark /
   blue overlay regardless of its native colour. get_custom_logo() wraps the
   <img> in its own <a class="custom-logo-link">, so we anchor selectors on
   the always-present .jhp-login-splash__brand-inner wrapper and match both
   the custom-logo and the fallback brand-link paths. */
.jhp-login-splash__brand-inner .custom-logo-link img,
.jhp-login-splash__brand-inner .custom-logo,
.jhp-login-splash__brand-inner img,
.jhp-login-splash__brand-link .custom-logo,
.jhp-login-splash__brand-link img {
	filter: brightness(0) invert(1);
	height: auto;
	max-height: 3.25rem;
	max-width: 15rem;
	width: auto;
}

.jhp-login-splash__brand-name {
	color: var(--t-inv);
	display: block;
	font-family: var(--ff-display, inherit);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Tagline reads as an elegant pull-quote in the heading family, italic. */
.jhp-login-splash__brand-tagline {
	color: color-mix(in srgb, var(--t-inv) 88%, transparent);
	font-family: var(--ff-display, serif);
	font-size: clamp(1rem, 1.8vw, 2rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.45;
	margin: 0;
}

/* ── Right: form panel ─────────────────────────────────────────────── */

.jhp-login-splash__form-panel {
	align-items: center;
	background: var(--bg-surface);
	display: flex;
	justify-content: center;
	padding: var(--sp10) var(--sp16);
}

.jhp-login-splash__form-inner {
	display: grid;
	gap: var(--sp6);
	width: 100%;
}

.jhp-login-splash__heading {
	display: grid;
	gap: var(--sp2);
}

.jhp-login-splash__eyebrow {
	color: var(--t-meta);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.jhp-login-splash__title {
	color: var(--t-heading);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1.15;
	margin: 0;
}

.jhp-login-splash__intro {
	color: var(--t-sub);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
}

/* Tame PMPro's default login-form output so it integrates cleanly. */
.jhp-login-splash__form .pmpro_login_wrap,
.jhp-login-splash__form .pmpro_card,
.jhp-login-splash__form .pmpro_card_content,
.jhp-login-splash__form #loginform {
	background: transparent;
	border: 0;
	box-shadow: none;
	display: grid;
	gap: var(--sp3);
	margin: 0;
	padding: 0;
}

.jhp-login-splash__form .pmpro_login_wrap > p,
.jhp-login-splash__form #loginform p {
	margin: 0;
}

.jhp-login-splash__form label {
	color: var(--t-heading);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: var(--sp1);
}

.jhp-login-splash__form input[type="text"],
.jhp-login-splash__form input[type="email"],
.jhp-login-splash__form input[type="password"] {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	color: var(--t-body);
	font-size: 1rem;
	padding: var(--sp3) var(--sp3);
	transition: border-color var(--fast) var(--settl), box-shadow var(--fast) var(--settl);
	width: 100%;
}

.jhp-login-splash__form input[type="text"]:focus,
.jhp-login-splash__form input[type="email"]:focus,
.jhp-login-splash__form input[type="password"]:focus {
	border-color: var(--t-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 18%, transparent);
	outline: none;
}

/* Password row: align the field with PMPro's "Show password" eye toggle. */
.jhp-login-splash__form .pmpro_input_password_wrap,
.jhp-login-splash__form .pmpro_password_wrap {
	display: grid;
	gap: var(--sp1);
}

.jhp-login-splash__form .pmpro_show_password,
.jhp-login-splash__form .pmpro_btn-show_hide_password {
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--t-meta);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	justify-self: end;
	padding: 0;
}

.jhp-login-splash__form .pmpro_show_password:hover,
.jhp-login-splash__form .pmpro_btn-show_hide_password:hover {
	background: transparent;
	color: var(--t-heading);
}

.jhp-login-splash__form .login-remember label {
	align-items: center;
	color: var(--t-sub);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: var(--sp2);
	margin: 0;
}

.jhp-login-splash__form .login-remember input[type="checkbox"] {
	accent-color: var(--t-accent);
	height: 1rem;
	width: 1rem;
}

.jhp-login-splash__form .login-submit,
.jhp-login-splash__form #wp-submit,
.jhp-login-splash__form input[type="submit"],
.jhp-login-splash__form button[type="submit"] {
	margin-top: var(--sp2);
}

.jhp-login-splash__form .login-submit input[type="submit"],
.jhp-login-splash__form #wp-submit,
.jhp-login-splash__form input[type="submit"],
.jhp-login-splash__form button[type="submit"] {
	appearance: none;
	background: var(--t-accent);
	border: 1px solid var(--t-accent);
	border-radius: var(--r-btn);
	box-shadow: none;
	color: var(--t-inv);
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 700;
	padding: var(--sp3) var(--sp5);
	transition: background var(--fast) var(--settl);
	width: 100%;
}

.jhp-login-splash__form .login-submit input[type="submit"]:hover,
.jhp-login-splash__form #wp-submit:hover,
.jhp-login-splash__form input[type="submit"]:hover,
.jhp-login-splash__form button[type="submit"]:hover {
	background: var(--t-heading);
	border-color: var(--t-heading);
}

/* "Lost Password?" link — PMPro renders it inside a separate band; drop the
   band styling and float it inline below the submit. */
.jhp-login-splash__form #nav,
.jhp-login-splash__form .pmpro_actions_nav,
.jhp-login-splash__form .pmpro_login_wrap nav {
	background: transparent;
	border: 0;
	margin: 0;
	padding: var(--sp1) 0 0;
	text-align: center;
}

.jhp-login-splash__form #nav a,
.jhp-login-splash__form .pmpro_actions_nav a,
.jhp-login-splash__form .pmpro_login_wrap nav a {
	color: var(--t-accent);
	font-size: 0.875rem;
	text-decoration: none;
}

.jhp-login-splash__form #nav a:hover,
.jhp-login-splash__form .pmpro_actions_nav a:hover,
.jhp-login-splash__form .pmpro_login_wrap nav a:hover {
	text-decoration: underline;
}

.jhp-login-splash__back {
	margin: 0;
	text-align: center;
}

.jhp-login-splash__back a {
	color: var(--t-meta);
	font-size: 0.875rem;
	text-decoration: none;
	transition: color var(--fast) var(--settl);
}

.jhp-login-splash__back a:hover {
	color: var(--t-heading);
}

/* ── Responsive: stack panels below 768px ─────────────────────────── */

@media (max-width: 768px) {
	.jhp-login-splash {
		display: flex;
		flex-direction: column;
	}

	/* Mobile: keep it minimal — solid brand bar with just the logo. The
	   featured image background and the tagline both drop out so the bar
	   stays as a clean header strip. */
	.jhp-login-splash__brand-panel,
	.jhp-login-splash__brand-panel.has-image {
		background: var(--bg-dark);
		min-height: 0;
		padding: var(--sp5) var(--sp5);
	}

	.jhp-login-splash__brand-panel.has-image::before {
		display: none;
	}

	.jhp-login-splash__brand-inner {
		gap: 0;
	}

	.jhp-login-splash__brand-tagline {
		display: none;
	}

	.jhp-login-splash__brand-name {
		font-size: 1.75rem;
	}

	.jhp-login-splash__form-panel {
		padding: var(--sp10) var(--sp10);
		flex-grow: 1;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Admin dashboard — member directory listing + drill-down
   ========================================================================== */

.jhp-admin {
	display: grid;
	gap: var(--sp4);
}

.jhp-admin-directory__toolbar {
	align-items: center;
	display: grid;
	gap: var(--sp3);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.jhp-admin-directory__toolbar {
		grid-template-columns: minmax(14rem, 1fr) auto auto;
	}
}

.jhp-admin-directory__search input[type="search"] {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	font-size: 0.9375rem;
	padding: var(--sp2) var(--sp3);
	width: 100%;
}

.jhp-admin-directory__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp2) var(--sp3);
}

.jhp-admin-directory__filter select {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	font-size: 0.875rem;
	padding: var(--sp1) var(--sp3);
}

.jhp-admin-directory__filter--check {
	align-items: center;
	color: var(--t-body);
	display: inline-flex;
	font-size: 0.875rem;
	gap: var(--sp2);
}

.jhp-admin-directory__actions {
	align-items: center;
	display: flex;
	gap: var(--sp2);
}

.jhp-admin-directory__submit {
	background: var(--t-heading);
	border: none;
	border-radius: var(--r-btn);
	color: var(--t-inv);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 700;
	padding: var(--sp2) var(--sp4);
	transition: opacity var(--fast) var(--settl);
}

.jhp-admin-directory__submit:hover,
.jhp-admin-directory__submit:focus-visible {
	opacity: 0.82;
}

.jhp-admin-directory__clear {
	color: var(--t-meta);
	font-size: 0.875rem;
	text-decoration: underline;
}

.jhp-admin-directory__count {
	color: var(--t-meta);
	font-size: 0.875rem;
	margin: 0;
}

.jhp-admin-directory__table {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-collapse: separate;
	border-radius: var(--r-card);
	border-spacing: 0;
	width: 100%;
	/* No overflow:hidden — the kebab dropdown needs to escape. Corner cells
	   below carry matching border-radius so the rounded outline still works. */
}

.jhp-admin-directory__table thead th {
	background: var(--bg-tint);
	border-bottom: 1px solid var(--border);
	color: var(--t-meta);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: var(--sp3) var(--sp4);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.jhp-admin-directory__table thead th:first-child {
	border-top-left-radius: var(--r-card);
}

.jhp-admin-directory__table thead th:last-child {
	border-top-right-radius: var(--r-card);
}

.jhp-admin-directory__table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--r-card);
}

.jhp-admin-directory__table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--r-card);
}

.jhp-admin-directory__col-center {
	text-align: center;
}

.jhp-admin-directory__col-actions {
	text-align: right;
	width: 3rem;
}

.jhp-admin-directory__row td {
	border-bottom: 1px solid var(--border);
	font-size: 0.9375rem;
	padding: var(--sp3) var(--sp4);
	vertical-align: middle;
}

.jhp-admin-directory__row:last-child td {
	border-bottom: none;
}

.jhp-admin-directory__row {
	transition: background var(--fast) var(--settl);
}

.jhp-admin-directory__row:hover {
	background: color-mix(in srgb, var(--t-accent) 4%, var(--bg-surface));
}

.jhp-admin-directory__row.is-inactive {
	opacity: 0.7;
}

.jhp-admin-directory__member {
	color: var(--t-heading);
	display: grid;
	gap: 0;
	text-decoration: none;
}

.jhp-admin-directory__member:hover .jhp-admin-directory__member-name {
	text-decoration: underline;
}

.jhp-admin-directory__member-name {
	font-weight: 600;
}

.jhp-admin-directory__member-email {
	color: var(--t-meta);
	font-size: 0.8125rem;
}

.jhp-admin-directory__tier {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp1);
}

.jhp-admin-directory__status-flag {
	background: var(--warn-tint);
	border-radius: var(--r-pill);
	color: var(--c-warn);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px var(--sp2);
	text-transform: uppercase;
}

.jhp-admin-directory__check {
	display: inline-grid;
	font-size: 1rem;
	height: 1.5rem;
	place-items: center;
	width: 1.5rem;
}

.jhp-admin-directory__check.is-ok {
	color: var(--c-success);
}

.jhp-admin-directory__check.is-warn {
	color: var(--c-warn);
}

.jhp-admin-directory__credits {
	font-weight: 600;
}

.jhp-admin-directory__next {
	color: var(--t-body);
	display: grid;
	font-size: 0.875rem;
	gap: 0;
	line-height: 1.3;
}

.jhp-admin-directory__next.has-event {
	border-left: 3px solid var(--event-color, var(--t-accent));
	padding-left: var(--sp2);
}

.jhp-admin-directory__next-name {
	color: var(--t-heading);
	font-weight: 600;
}

.jhp-admin-directory__next-when {
	color: var(--t-meta);
	font-size: 0.8125rem;
}

.jhp-admin-directory__muted {
	color: var(--t-meta);
}

.jhp-admin-directory__row-actions {
	display: inline-flex;
	justify-content: flex-end;
}

/* Kebab menu inside directory rows — anchor menu panel to the right edge. */
.jhp-admin-directory__row-actions .jhp-booking-menu__panel {
	min-width: 12rem;
}

.jhp-admin-directory__row-actions .jhp-booking-menu__item {
	color: var(--t-heading);
	text-decoration: none;
}

.jhp-admin-directory__row-actions .jhp-booking-menu__item:hover {
	background: color-mix(in srgb, var(--t-accent) 8%, transparent);
}

/* Mobile: keep the table tabular but allow horizontal scroll
   if the viewport can't fit every column. */
@media (max-width: 60rem) {
	.jhp-admin-directory__table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Drill-down member detail */

.jhp-admin-detail {
	display: grid;
	gap: var(--sp4);
}

.jhp-admin-detail__back {
	color: var(--t-meta);
	font-size: 0.875rem;
	text-decoration: none;
	width: fit-content;
}

.jhp-admin-detail__back:hover {
	color: var(--t-accent);
}

.jhp-admin-detail__header {
	align-items: center;
	display: flex;
	gap: var(--sp3);
	justify-content: space-between;
}

.jhp-admin-detail__name {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.jhp-admin-detail__sub {
	color: var(--t-meta);
	margin: 0;
}

.jhp-admin-detail__sub a {
	color: inherit;
	text-decoration: none;
}

.jhp-admin-detail__sub a:hover {
	text-decoration: underline;
}

.jhp-admin-detail__grid {
	display: grid;
	gap: var(--sp3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.jhp-admin-detail__section {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	display: grid;
	gap: var(--sp3);
	padding: var(--sp5) var(--sp6);
}

.jhp-admin-detail__section--danger {
	border-color: var(--warn-base);
}

.jhp-admin-detail__credit-grid {
	display: grid;
	gap: var(--sp3);
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.jhp-admin-detail__credit-month {
	display: grid;
	gap: var(--sp1);
}

.jhp-admin-detail__credit-month-label {
	color: var(--t-meta);
	font-size: 0.8125rem;
}

.jhp-admin-detail__credit-month input[type="number"] {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	font-size: 1rem;
	padding: var(--sp1) var(--sp2);
	width: 100%;
}

.jhp-admin-detail__tier-select {
	display: grid;
	gap: var(--sp1);
	max-width: 24rem;
}

.jhp-admin-detail__tier-select select {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	font-size: 0.9375rem;
	padding: var(--sp1) var(--sp3);
}

.jhp-admin-detail__danger-btn {
	background: var(--c-warn);
	border-color: var(--c-warn);
	color: var(--t-inv);
}

/* Admin: today's classes ────────────────────────────────────────────── */

.jhp-admin-today__date {
	color: var(--t-meta);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	margin: 0 0 var(--sp2);
	text-transform: uppercase;
}

.jhp-admin-today {
	display: grid;
	gap: var(--sp3);
}

.jhp-admin-class {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	box-shadow: var(--s1);
}

.jhp-admin-class[open] {
	box-shadow: var(--s2);
}

/* The summary carries the booking-card grid (.jhp-booking is on it).
   Override the card background/border/shadow that .jhp-booking inherits
   so the chrome lives on the details parent, not the summary. */
.jhp-admin-class__summary {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	list-style: none;
}

.jhp-admin-class__summary::-webkit-details-marker {
	display: none;
}

.jhp-admin-class__time {
	display: grid;
	gap: 0;
}

.jhp-admin-class__time-start {
	color: var(--t-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.1;
}

.jhp-admin-class__time-end {
	color: var(--t-meta);
	font-size: 0.8125rem;
	font-weight: 500;
}

.jhp-admin-class__name-link {
	color: inherit;
	text-decoration: none;
}

.jhp-admin-class__name-link:hover {
	color: var(--event-color, var(--t-accent));
	text-decoration: underline;
}

.jhp-admin-class__capacity {
	font-weight: 600;
}

.jhp-admin-class__capacity.is-full {
	color: var(--c-warn);
}

.jhp-admin-class__action {
	align-items: center;
	flex-direction: row;
	gap: var(--sp3);
	height: auto;
	justify-content: flex-end;
}

.jhp-admin-class__add {
	font-size: 0.8125rem;
	padding: var(--sp1) var(--sp3);
}

.jhp-admin-class__toggle {
	align-items: center;
	color: var(--t-meta);
	display: inline-flex;
	justify-content: center;
	transition: transform var(--fast) var(--settl);
}

.jhp-admin-class[open] .jhp-admin-class__toggle {
	transform: rotate(180deg);
}

.jhp-admin-class__body {
	border-top: 1px solid var(--border);
}

.jhp-admin-today__empty {
	color: var(--t-meta);
	margin: 0;
	padding: var(--sp4) var(--sp5) var(--sp5);
}

.jhp-admin-today__attendees {
	border-top: 1px solid var(--border);
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.jhp-admin-today__attendee {
	align-items: center;
	border-bottom: 1px solid var(--border);
	display: grid;
	gap: var(--sp3);
	grid-template-columns: minmax(0, 2fr) auto auto;
	padding: var(--sp3) var(--sp5);
}

.jhp-admin-today__attendee:last-child {
	border-bottom: none;
}

.jhp-admin-today__attendee-id {
	display: grid;
	gap: 0;
	line-height: 1.3;
}

.jhp-admin-today__attendee-name {
	color: var(--t-heading);
	font-weight: 600;
}

.jhp-admin-today__attendee-email {
	color: var(--t-meta);
	font-size: 0.8125rem;
	text-decoration: none;
}

.jhp-admin-today__attendee-email:hover {
	text-decoration: underline;
}

.jhp-admin-today__attendance-form {
	display: inline-flex;
	gap: var(--sp1);
}

.jhp-admin-today__attendance-btn {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	color: var(--t-body);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: var(--sp1) var(--sp3);
}

.jhp-admin-today__attendance-btn:hover {
	background: color-mix(in srgb, var(--t-accent) 8%, var(--bg-page));
}

.jhp-admin-today__attendance-btn.is-active {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-inv);
}

.jhp-admin-today__attendance-btn--miss.is-active {
	background: var(--c-warn);
	border-color: var(--c-warn);
}

.jhp-admin-today__attendance-btn--clear {
	background: transparent;
	border-color: transparent;
	color: var(--t-meta);
}

.jhp-admin-today__attendance-muted {
	color: var(--t-meta);
	font-size: 0.8125rem;
	font-style: italic;
}

.jhp-admin-today__cancel-btn {
	background: transparent;
	border: 1px solid var(--c-warn);
	border-radius: var(--r-btn);
	color: var(--c-warn);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: var(--sp1) var(--sp3);
}

.jhp-admin-today__cancel-btn:hover {
	background: color-mix(in srgb, var(--c-warn) 8%, transparent);
}

@media (max-width: 48rem) {
	.jhp-admin-today__summary {
		grid-template-columns: 4rem 1fr auto;
		grid-template-areas:
			"time name capacity"
			"add  add  add";
		row-gap: var(--sp2);
	}
	.jhp-admin-today__time { grid-area: time; }
	.jhp-admin-today__name { grid-area: name; }
	.jhp-admin-today__capacity { grid-area: capacity; justify-self: end; }
	.jhp-admin-today__add { grid-area: add; }

	.jhp-admin-today__attendee {
		grid-template-columns: 1fr;
		gap: var(--sp2);
	}
}

/* Admin: manual booking form ────────────────────────────────────────── */

.jhp-admin-book {
	background: none;
	border: none;
	border-radius: 0;
	display: grid;
	gap: var(--sp4);
	padding: 0;
	max-width: none;
}

.jhp-admin-book__member-form {
	display: flex;
	gap: var(--sp3);
	flex-wrap: wrap;
}

.jhp-admin-book__field {
	display: grid;
	flex: 1 1 16rem;
	gap: var(--sp1);
	min-width: 0;
}

.jhp-admin-book__field > span {
	color: var(--t-heading);
	font-size: 0.875rem;
	font-weight: 600;
}

.jhp-admin-book__field select {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	font-size: 0.9375rem;
	padding: var(--sp2) var(--sp3);
}

.jhp-admin-book__member-card {
	display: grid;
	gap: var(--sp3);
	padding: var(--sp4) var(--sp5);
}

.jhp-admin-book__member-header {
	align-items: center;
	display: flex;
	gap: var(--sp3);
	justify-content: space-between;
}

.jhp-admin-book__member-name {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.jhp-admin-book__member-sub {
	color: var(--t-meta);
	margin: 0;
}

.jhp-admin-book__stats {
	display: grid;
	gap: var(--sp3);
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin: 0;
}

.jhp-admin-book__stats > div {
	background: var(--bg-page);
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	padding: var(--sp3);
}

.jhp-admin-book__stats dt {
	color: var(--t-meta);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 var(--sp1);
	text-transform: uppercase;
}

.jhp-admin-book__stats dd {
	color: var(--t-heading);
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.jhp-admin-book__form {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	display: grid;
	gap: var(--sp4);
	padding: var(--sp4) var(--sp5);
}

.jhp-admin-book__calendar-head {
	align-items: center;
	display: flex;
	gap: var(--sp3);
	justify-content: center;
}

.jhp-admin-book__month-nav {
	color: var(--t-meta);
	font-size: 1.5rem;
	line-height: 1;
	padding: var(--sp1) var(--sp2);
	text-decoration: none;
}

.jhp-admin-book__month-nav:hover {
	color: var(--t-accent);
}

.jhp-admin-book__month-nav.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.jhp-admin-book__month-label {
	color: var(--t-heading);
	font-size: 1rem;
	font-weight: 700;
}

.jhp-admin-book__legend {
	align-items: center;
	color: var(--t-meta);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: var(--sp2) var(--sp3);
}

.jhp-admin-book__legend-swatch {
	border: 1px solid var(--border);
	border-radius: var(--r-input);
	display: inline-block;
	height: 1rem;
	margin-right: var(--sp1);
	width: 1.5rem;
}

.jhp-admin-book__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp3);
	justify-content: space-between;
}

.jhp-admin-book__comp {
	align-items: center;
	color: var(--t-body);
	display: inline-flex;
	font-size: 0.9375rem;
	gap: var(--sp2);
}

/* Admin-book chip — checkbox-label variant. */
.jhp-schedule__event-chip--check {
	cursor: pointer;
	position: relative;
}

.jhp-schedule__event-chip--check input[type="checkbox"] {
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
}

.jhp-schedule__event-chip--check:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.55;
}

.jhp-schedule__event-chip--check.is-selected,
.jhp-schedule__event-chip--check:has(input:checked) {
	background: var(--event-color, var(--t-accent));
	border-color: var(--event-color, var(--t-accent));
	color: var(--t-inv);
	outline: 2px solid var(--event-color, var(--t-accent));
	outline-offset: 1px;
}

.jhp-schedule__event-chip--full {
	background: color-mix(in srgb, var(--c-warn) 12%, transparent);
	border-color: var(--c-warn);
	color: var(--warn-text);
}

.jhp-schedule__event-chip--past {
	opacity: 0.4;
}

/* Admin: cancellation queue ─────────────────────────────────────────── */

.jhp-admin-queue__filters {
	margin-bottom: var(--sp3);
}

.jhp-admin-queue {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.jhp-admin-queue__item {
	align-items: center;
	border-bottom: 1px solid var(--border);
	display: grid;
	gap: var(--sp3);
	grid-template-columns: 1fr auto;
	padding: var(--sp4) var(--sp5);
}

.jhp-admin-queue__item:last-child {
	border-bottom: none;
}

.jhp-admin-queue__item.is-acknowledged {
	background: color-mix(in srgb, var(--c-success) 4%, var(--bg-surface));
}

.jhp-admin-queue__title {
	color: var(--t-heading);
	font-size: 1rem;
	margin: 0;
}

.jhp-admin-queue__meta {
	color: var(--t-meta);
	font-size: 0.875rem;
	margin: var(--sp1) 0 0;
}

.jhp-admin-queue__meta--ack {
	color: var(--c-success);
}

.jhp-admin-queue__ack-btn {
	background: var(--t-heading);
	border: none;
	border-radius: var(--r-btn);
	color: var(--t-inv);
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 700;
	padding: var(--sp2) var(--sp4);
	transition: opacity var(--fast) var(--settl);
}

.jhp-admin-queue__ack-btn:hover {
	opacity: 0.82;
}

.jhp-admin-queue__ack-tag {
	background: color-mix(in srgb, var(--c-success) 16%, transparent);
	border-radius: var(--r-pill);
	color: var(--c-success);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px var(--sp2);
	text-transform: uppercase;
}

@media (max-width: 48rem) {
	.jhp-admin-queue__item {
		grid-template-columns: 1fr;
	}
	.jhp-admin-queue__actions {
		justify-self: start;
	}
}

/* ==========================================================================
   Admin: single-class detail page
   ========================================================================== */

.jhp-admin-class-detail {
	display: grid;
	gap: var(--sp4);
}

.jhp-admin-class-detail__header {
	align-items: center;
	border-left: 4px solid var(--event-color, var(--t-accent));
	display: flex;
	gap: var(--sp3);
	justify-content: space-between;
	padding-left: var(--sp3);
}

.jhp-admin-class-detail__name {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
}

.jhp-admin-class-detail__sub {
	color: var(--t-meta);
	margin: var(--sp1) 0 0;
}

.jhp-admin-class-detail__meta {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	display: grid;
	gap: var(--sp2);
	padding: var(--sp4) var(--sp5);
}

.jhp-admin-class-detail__meta-line {
	color: var(--t-body);
	font-size: 0.9375rem;
	margin: 0;
}

.jhp-admin-class-detail__meta-line strong {
	color: var(--t-heading);
	margin-right: var(--sp1);
}

.jhp-admin-class-detail__description {
	color: var(--t-body);
	font-size: 0.9375rem;
}

.jhp-admin-class-detail__description p {
	margin: 0;
}

.jhp-admin-class-detail__lists {
	display: grid;
	gap: var(--sp4);
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.jhp-admin-class-detail__list {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: var(--sp4) var(--sp5);
}

.jhp-admin-class-detail__list-title {
	color: var(--t-heading);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 var(--sp3);
}

.jhp-admin-class-detail__attendees {
	display: grid;
	gap: var(--sp2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.jhp-admin-class-detail__attendee {
	border-bottom: 1px solid var(--border);
	display: grid;
	gap: 0;
	line-height: 1.3;
	padding-bottom: var(--sp2);
}

.jhp-admin-class-detail__attendee:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.jhp-admin-class-detail__attendee-name {
	color: var(--t-heading);
	font-weight: 600;
}

.jhp-admin-class-detail__attendee-email {
	color: var(--t-meta);
	font-size: 0.8125rem;
	text-decoration: none;
}

.jhp-admin-class-detail__attendee-email:hover {
	text-decoration: underline;
}

.jhp-admin-class-detail__attendees--cancelled .jhp-admin-class-detail__attendee-name {
	color: var(--c-warn);
	text-decoration: line-through;
	text-decoration-color: color-mix(in srgb, var(--c-warn) 50%, transparent);
}

.jhp-admin-class-detail__empty {
	color: var(--t-meta);
	font-size: 0.875rem;
	font-style: italic;
	margin: 0;
}


/* ==========================================================================
   Nav: Account dropdown
   ========================================================================== */

.jhp-public-nav__submenu {
	background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--s2);
    display: flex;
    flex-direction: column;
    gap: var(--sp2);
    margin-top: var(--sp2);
	padding: var(--sp3);
}