/*
Theme Name: Friends of Ryan 2
Theme URI: https://clone.friendsofryanalumni.org
Author: EventSync
Description: Block theme for the EventSync 2.0 rebuild. Ports the design tokens, self-hosted Oswald + Roboto, and a small set of helper functions from the legacy classic theme. Application surfaces (dashboards, sign-up flows, ticket purchase, kiosk) ship as bespoke PHP templates from the EventSync plugin.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: friends-of-ryan-2
*/

/* Self-hosted Oswald (display) + Roboto (body), latin subset.
	font-display:swap shows fallback first, then swaps in webfont when ready.
	Files in fonts/ are pre-subsetted (~13KB Oswald, ~22KB Roboto). */
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/oswald-300.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/oswald-400.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/oswald-500.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/oswald-600.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/oswald-700.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/roboto-300.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/roboto-400.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/roboto-500.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/roboto-700.woff2") format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DESIGN TOKENS — ported from legacy theme `:root` (style.css L118-235).
	Drops 8 orphans documented in docs/DESIGN-TOKENS.md §7b
	(--color-secondary-light, --color-text-disabled, --color-info,
	--color-info-light, --overlay-dark, --overlay-red, --shadow-xs).
	--fs-h5 retained at the bumped 0.875rem for h6, per A2 fix.
	The 4 broken refs documented in §7a are not present here — they were
	the references, not the definitions. */
:root {
	/* Colors: Brand */
	/* Friends of Ryan brand palette (caller-specified 2026-05-05).
	 Primary red is the canonical brand red; gold is the secondary accent;
	 black is the body / nav surface. Light/dark gray are the secondary
	 logo colors used for backgrounds + muted body text. */
	--color-primary: #cc0000;
	--color-primary-hover: #a30000;
	--color-primary-light: #fff0f0;
	--color-primary-wash: rgba(204, 0, 0, 0.1);
	--color-gold: #ead42e;
	--color-gold-hover: #c8b41f;
	--color-gold-wash: rgba(234, 212, 46, 0.12);
	--color-black: #000000;
	--color-dark-gray: #303030;
	--color-light-gray: #b0b5b5;
	--color-secondary: #000000;

	/* Colors: Neutrals */
	--color-background: #ffffff;
	--color-surface: #f8f9fc;
	--color-surface-alt: #f0f2f5;
	--color-border: #e2e5eb;
	--color-border-light: #eef0f4;
	--color-text: #1a1a2e;
	--color-text-secondary: #4a5568;
	--color-text-muted: #6b7280;

	/* Colors: Semantic */
	--color-success: #059669;
	--color-success-light: #ecfdf5;
	--color-warning: #d97706;
	--color-warning-light: #fffbeb;
	--color-error: #dc2626;
	--color-error-light: #fef2f2;

	/* Colors: Accent */
	--color-accent-gold: #8c6608;
	--color-accent-gold-light: #fdf8ee;

	/* Colors: Dark Sections */
	--color-dark-bg: #1a1a2e;
	--color-dark-surface: #252540;
	--color-dark-text: #e8e8f0;
	--color-dark-text-muted: #9898b0;
	--color-dark-border: #3a3a55;

	/* Typography */
	--font-display:
		"Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:
		"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: var(--font-display);

	--fs-display: clamp(2.5rem, 5vw, 3.5rem);
	--fs-h1: clamp(2rem, 4vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 3vw, 2rem);
	--fs-h3: clamp(1.25rem, 2vw, 1.5rem);
	--fs-h4: 1.125rem;
	--fs-h5: 1rem;
	--fs-h6: 0.875rem;
	--fs-body: 1rem;
	--fs-body-lg: 1.125rem;
	--fs-body-sm: 0.875rem;
	--fs-small: 0.8125rem;
	--fs-micro: 0.6875rem;
	--fs-caption: 0.75rem;

	--lh-tight: 1.15;
	--lh-snug: 1.3;
	--lh-normal: 1.5;
	--lh-relaxed: 1.7;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* Layout */
	--content-max: 1200px;
	--content-wide: 1400px;
	--content-narrow: 720px;
	--header-height: 72px;
	--grid-gap: 24px;
	--grid-gap-sm: 16px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

	/* Borders */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 200ms ease;
	--transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Minimal global rules. The detailed rule library from legacy style.css
	is intentionally NOT ported wholesale — Phase B will rebuild components
	on top of the FSE block system. Keep this file lean. */
body {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	color: var(--color-text);
	background: var(--color-background);
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-4);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* ====================================================================
	EVENTSYNC BLOCKS — events-list, featured-event, event-tier-sponsors,
	cta-banner. Self-scoped under es-* prefixes; no cascade leak.
	==================================================================== */

/* events-list ------------------------------------------------------- */
.es-events-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	margin: var(--space-8) auto;
}
.es-events-list__headline {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	margin: 0;
}
.es-events-list__facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: end;
	padding: var(--space-5) var(--space-6);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.es-events-list__facet {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary);
	font-weight: var(--fw-medium);
	min-width: 160px;
}
.es-events-list__facet select {
	padding: 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font: inherit;
	background: var(--color-background);
}
.es-events-list__submit,
.es-events-list__clear {
	padding: 10px 18px;
	border-radius: var(--radius-md);
	font: inherit;
	font-weight: var(--fw-medium);
	cursor: pointer;
	text-decoration: none;
	border: 0;
}
.es-events-list__submit {
	background: var(--color-primary);
	color: #fff;
}
.es-events-list__submit:hover {
	background: var(--color-primary-hover);
}
.es-events-list__clear {
	background: transparent;
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border);
}
.es-events-list__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap);
}
@media (max-width: 960px) {
	.es-events-list__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.es-events-list__grid {
		grid-template-columns: 1fr;
	}
}
.es-event-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--transition-normal),
		box-shadow var(--transition-normal);
}
.es-event-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.es-event-card.is-past .es-event-card__media {
	opacity: 0.7;
}
.es-event-card.is-past .es-event-card__title {
	color: var(--color-text-muted, #555);
}
.es-event-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.es-event-card__link:hover {
	text-decoration: none;
}
.es-event-card__media {
	aspect-ratio: 16 / 9;
	background: var(--color-surface-alt);
	overflow: hidden;
}
.es-event-card__media--placeholder {
	background: linear-gradient(
		135deg,
		var(--color-surface) 0%,
		var(--color-surface-alt) 100%
	);
}
.es-event-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.es-event-card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}
.es-event-card__date {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
}
.es-event-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
	color: var(--color-text);
}
.es-event-card__location {
	margin: 0;
	font-size: var(--fs-body-sm);
	color: var(--color-text-muted);
}
.es-events-list__pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}
.es-events-list__pagination .page-numbers {
	padding: 8px 14px;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	font-weight: var(--fw-medium);
}
.es-events-list__pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
}
.es-events-list__empty {
	padding: var(--space-10);
	text-align: center;
	color: var(--color-text-muted);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* featured-event ---------------------------------------------------- */
.es-featured-event {
	background-color: var(--color-secondary);
	background-size: cover;
	background-position: center;
	color: #fff;
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin: var(--space-8) auto;
}
.wp-block-eventsync-featured-event.alignfull,
.es-featured-event.alignfull {
	border-radius: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.es-featured-event__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--space-16) var(--space-6);
}
.es-featured-event__eyebrow {
	margin: 0 0 var(--space-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--fs-small);
	color: var(--color-primary-light);
	font-weight: var(--fw-semibold);
}
.es-featured-event__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-4);
	color: #fff;
}
.es-featured-event__title a {
	color: inherit;
	text-decoration: none;
}
.es-featured-event__title a:hover {
	text-decoration: underline;
}
.es-featured-event__date,
.es-featured-event__location {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-body-lg);
	color: rgba(255, 255, 255, 0.85);
}
.es-featured-event__excerpt {
	margin: var(--space-4) 0;
	font-size: var(--fs-body-lg);
	max-width: 640px;
	color: rgba(255, 255, 255, 0.85);
}
.es-featured-event__cta {
	display: inline-block;
	margin-top: var(--space-4);
	padding: 14px 28px;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background var(--transition-fast);
}
.es-featured-event__cta:hover {
	background: var(--color-primary-hover);
	color: #fff;
	text-decoration: none;
}

/* event-tier-sponsors ----------------------------------------------- */
.es-tier-sponsors {
	margin: var(--space-10) 0;
}
.es-tier-sponsors__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	text-align: center;
	margin: 0 0 var(--space-8);
}
.es-tier-sponsors__tier {
	margin-bottom: var(--space-8);
}
.es-tier-sponsors__tier-name {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-gold);
	margin: 0 0 var(--space-5);
}
.es-tier-sponsors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-6);
	justify-items: center;
	align-items: center;
}
.es-tier-sponsors__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	text-align: center;
}
.es-tier-sponsors__logo {
	max-width: 200px;
	max-height: 120px;
	height: auto;
	width: auto;
	object-fit: contain;
}
/* S27 — initial-letter chip when a sponsor has no logo image. */
.es-tier-sponsors__logo--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--color-surface-2, #eef1f5);
	color: var(--color-text-secondary, #556);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}
.es-tier-sponsors__title {
	font-size: var(--fs-body-sm);
	color: var(--color-text-secondary);
}
/* S52 — Friends & Family (name-only) sponsors: a tasteful thank-you list below the corporate logo wall. They have no logo/website, so they render as plain names. */
.es-tier-sponsors__people {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border, #e2e6ec);
}
.es-tier-sponsors__people-heading {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-gold);
	margin: 0 0 var(--space-5);
}
.es-tier-sponsors__people-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 60rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
}
.es-tier-sponsors__people-item {
	font-size: var(--fs-body);
	color: var(--color-text);
	text-align: center;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* Subtle middot before every item except the first; no negative margins (flex gap supplies spacing) so a long name never pushes past the 375px viewport edge. */
.es-tier-sponsors__people-item:not(:first-child)::before {
	content: "\00B7";
	color: var(--color-text-secondary, #889);
	margin-right: var(--space-3, 0.5rem);
}

/* cta-banner -------------------------------------------------------- */
.es-cta-banner {
	margin: var(--space-12) auto;
}
.wp-block-eventsync-cta-banner.alignfull,
.es-cta-banner.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	/* A full-bleed CTA is a section in its own right; its inner padding
	   supplies the spacing. The base .es-cta-banner top/bottom margin
	   (var(--space-12)) would otherwise leave a white strip between this dark
	   band and the footer at the bottom of /events/. Zero the block margin so
	   the section sits flush. */
	margin-top: 0;
	margin-bottom: 0;
}
/*
 * FSE block templates (e.g. archive-event_listing.html) wrap the footer in
 * .wp-block-template-part inside .wp-site-blocks, which inherits the root
 * block-gap as margin-block-start -- a thin white strip between the page's
 * last (full-bleed) section and the footer. Remove it so the footer is flush.
 * Classic PHP templates (homepage, /merch/, etc.) use get_footer() and are
 * unaffected.
 */
.wp-site-blocks > main + .wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
}
.es-cta-banner.is-primary {
	background: var(--color-primary);
	color: #fff;
}
.es-cta-banner.is-dark {
	background: var(--color-dark-bg);
	color: var(--color-dark-text);
}
.es-cta-banner.is-light {
	background: var(--color-surface);
	color: var(--color-text);
}
.es-cta-banner__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--space-12) var(--space-6);
	text-align: center;
}
.es-cta-banner__headline {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-4);
	color: inherit;
}
.es-cta-banner__body {
	margin: 0 auto var(--space-6);
	max-width: 640px;
	font-size: var(--fs-body-lg);
	color: inherit;
	opacity: 0.92;
}
.es-cta-banner__cta {
	margin: 0;
}
.es-cta-banner__button {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--radius-md);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	font-size: var(--fs-body);
	transition: transform var(--transition-fast);
}
.es-cta-banner.is-primary .es-cta-banner__button {
	background: #fff;
	color: var(--color-primary);
}
.es-cta-banner.is-dark .es-cta-banner__button {
	background: var(--color-primary);
	color: #fff;
}
.es-cta-banner.is-light .es-cta-banner__button {
	background: var(--color-primary);
	color: #fff;
}
.es-cta-banner__button:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

@media (max-width: 720px) {
	.es-featured-event__inner {
		padding: var(--space-10) var(--space-5);
	}
	.es-cta-banner__inner {
		padding: var(--space-10) var(--space-5);
	}
	.es-events-list__facets {
		padding: var(--space-4);
	}
}

/* ===== Admin Dashboard (Session 6) ===== */

.es-admin {
	background: var(--color-bg-subtle, #f6f7f8);
	min-height: calc(100vh - 200px);
}
.es-admin__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-5);
}
.es-admin__hero {
	background: var(--color-text, #0b0d0e);
	color: #fff;
	padding: var(--space-8) 0 var(--space-6);
}
.es-admin__hero h1 {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.es-admin__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-2);
}
.es-admin__kill-banner {
	background: #b91c1c;
	color: #fff;
	border-top: 4px solid #7f1d1d;
	border-bottom: 4px solid #7f1d1d;
	padding: var(--space-4) 0;
}
.es-admin__kill-banner-inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}
.es-admin__kill-banner-inner strong {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.es-admin__kill-cta {
	background: #fff;
	color: #b91c1c;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 6px;
	text-decoration: none;
	margin-left: auto;
}
.es-admin__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-5) 0 var(--space-4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: var(--space-6);
}
.es-admin__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--color-text, #0b0d0e);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.9rem;
	white-space: nowrap;
	transition:
		background 120ms ease,
		border-color 120ms ease;
}
.es-admin__tab:hover {
	background: var(--color-bg-subtle, #f0f1f3);
	text-decoration: none;
}
.es-admin__tab--active {
	background: var(--color-primary, #c8102e);
	color: #fff;
	border-color: var(--color-primary, #c8102e);
}
.es-admin__tab-divider {
	display: inline-block;
	width: 1px;
	height: 22px;
	background: rgba(0, 0, 0, 0.15);
	margin: 0 6px;
}
/* S44 Phase A: hierarchical 7-bucket nav. Main row uses base tab styling
	(above). Sub-nav row sits underneath: tighter padding, smaller text,
	subdued background, no bottom border (visually grouped with the active
	main bucket above it). */
.es-admin__tabs--main {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: var(--space-2);
}
.es-admin__tabs--sub {
	padding-top: var(--space-2);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-5);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-top: 1px dashed rgba(0, 0, 0, 0.06);
}
.es-admin__tab--sub {
	font-size: 0.82rem;
	padding: 6px 12px;
	background: transparent;
	border-color: transparent;
}
.es-admin__tab--sub:hover {
	background: var(--color-bg-subtle, #f0f1f3);
	border-color: rgba(0, 0, 0, 0.08);
}
.es-admin__tab--sub.es-admin__tab--active {
	background: var(--color-primary, #c8102e);
	color: #fff;
	border-color: var(--color-primary, #c8102e);
}
.es-admin__main {
	padding-bottom: var(--space-12);
}

.es-admin__count-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}
.es-admin__count {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: inherit;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}
.es-admin__count:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.es-admin__count-icon {
	color: var(--color-primary, #c8102e);
}
.es-admin__count-num {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: var(--font-display, inherit);
}
.es-admin__count-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	color: rgba(0, 0, 0, 0.6);
}
.es-admin__welcome {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-6);
}
.es-admin__welcome h2 {
	margin-top: 0;
}

/* ─── Phase B1: Admin Overview live widgets ─────────────────────────── */
.es-admin__overview-heading {
	margin-top: 0;
	margin-bottom: var(--space-3);
	font-family: var(--font-display, inherit);
}
.es-admin__overview-kpis,
.es-admin__overview-pending,
.es-admin__overview-activity {
	margin-bottom: var(--space-6);
}
.es-admin__kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
}
.es-admin__kpi {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: inherit;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}
.es-admin__kpi:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.es-admin__kpi-num {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: var(--font-display, inherit);
}
.es-admin__kpi-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	color: rgba(0, 0, 0, 0.6);
}
.es-admin__pending-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
}
.es-admin__pending-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
}
.es-admin__pending-card header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--space-2);
}
.es-admin__pending-card h3 {
	margin: 0;
	font-size: 0.95rem;
	font-family: var(--font-display, inherit);
}
.es-admin__pending-link {
	font-size: 0.8rem;
}
.es-admin__pending-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.es-admin__pending-list li {
	font-size: 0.85rem;
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
}
.es-admin__pending-list small {
	color: rgba(0, 0, 0, 0.5);
	font-size: 0.75rem;
}
.es-admin__pending-empty {
	color: rgba(0, 0, 0, 0.4);
	font-style: italic;
}
.es-admin__activity-feed {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
}
.es-admin__activity-row {
	display: grid;
	grid-template-columns: 110px 160px 1fr 160px;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 0.85rem;
	align-items: baseline;
}
.es-admin__activity-row:last-child {
	border-bottom: none;
}
.es-admin__activity-row time {
	color: rgba(0, 0, 0, 0.55);
}
.es-admin__activity-action {
	font-family: var(--font-mono, monospace);
	color: var(--color-primary, #cc0000);
}
.es-admin__activity-entity {
	font-family: var(--font-mono, monospace);
	color: rgba(0, 0, 0, 0.55);
	font-size: 0.8rem;
	text-align: right;
}
.es-admin__activity-empty {
	padding: var(--space-4);
	color: rgba(0, 0, 0, 0.4);
	font-style: italic;
}
.es-admin__activity-foot {
	margin-top: var(--space-2);
	color: rgba(0, 0, 0, 0.5);
}
@media (max-width: 720px) {
	.es-admin__activity-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.es-admin__activity-entity {
		text-align: left;
	}
}

.es-admin__grid-section {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-5);
}
.es-admin__grid-header h2 {
	margin: 0 0 var(--space-4);
}
.es-admin__grid-header small {
	color: #555;
	font-weight: 400;
	margin-left: 8px;
	font-size: 0.85rem;
}

.es-admin__placeholder {
	color: rgba(0, 0, 0, 0.7);
}
.es-admin__placeholder code {
	background: rgba(0, 0, 0, 0.05);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}
.es-admin__cron-table {
	width: 100%;
	border-collapse: collapse;
}
@media (max-width: 767px) {
	/* S78 P7: admin tables overflow viewport on small screens. Wrap the
	   table in a horizontally scrollable region with contain:paint so
	   the children's intrinsic width does not influence document
	   scrollWidth. body/html overflow-x:clip below acts as backstop. */
	.es-admin__main .es-admin__cron-table {
		display: block;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		max-width: calc(100vw - 2rem);
		contain: paint;
	}
	.es-admin__main {
		overflow-x: hidden;
		max-width: 100vw;
	}
}
.es-admin__cron-table th,
.es-admin__cron-table td {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 0.9rem;
}
.es-admin__cron-table th {
	background: rgba(0, 0, 0, 0.03);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
}
.es-admin__link-list {
	list-style: none;
	padding: 0;
	margin: var(--space-3) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}
.es-admin__link-list a {
	display: block;
	padding: 8px 12px;
	background: var(--color-bg-subtle, #f0f1f3);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}
.es-admin__link-list a:hover {
	background: rgba(200, 16, 46, 0.1);
	color: var(--color-primary, #c8102e);
}

.es-admin__settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-2);
}
.es-admin__settings-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	transition:
		border-color 120ms ease,
		transform 100ms ease;
}
.es-admin__settings-card:hover {
	border-color: var(--color-primary, #c8102e);
	transform: translateY(-1px);
	text-decoration: none;
}
.es-admin__settings-icon {
	color: var(--color-primary, #c8102e);
}
.es-admin__settings-card h3 {
	margin: 0;
	font-size: 1rem;
}
.es-admin__settings-card p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.65);
}
.es-admin__settings-status {
	position: absolute;
	top: 8px;
	right: 10px;
	background: #fee2e2;
	color: #b91c1c;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 700;
}
.es-admin__settings-note {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.6);
}

.es-admin--denied {
	text-align: center;
	padding: var(--space-12) var(--space-5);
}

/* ===== User Dashboard (Session 7) ===== */

.es-dash {
	background: var(--color-bg-subtle, #f6f7f8);
	min-height: calc(100vh - 200px);
}
.es-dash__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--space-5);
}
.es-dash__hero {
	background: var(--color-text, #0b0d0e);
	color: #fff;
	padding: var(--space-8) 0 var(--space-6);
}
.es-dash__hero h1 {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.es-dash__hero-sub {
	margin: var(--space-2) 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
}
.es-dash__hero-sep {
	margin: 0 6px;
	opacity: 0.5;
}
.es-dash__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-2);
}
.es-dash--gated {
	padding-bottom: var(--space-12);
}
.es-dash__gated-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: var(--space-8);
	margin: var(--space-6) auto;
	max-width: 520px;
	text-align: center;
}
/* S149 C.5 — logged-out tease section (fills dead space below the
	gated sign-in card). Symmetric responsive grid: 1 / 2 / 4 columns. */
.es-dash__tease {
	margin: var(--space-8) 0 var(--space-12);
}
.es-dash__tease-title {
	text-align: center;
	margin: 0 0 var(--space-5);
	font-size: 1.25rem;
	color: var(--color-text, #0b0d0e);
}
.es-dash__tease-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 600px) {
	.es-dash__tease-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.es-dash__tease-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.es-dash__tease-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.es-dash__tease-card h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--color-text, #0b0d0e);
}
.es-dash__tease-card p {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(0, 0, 0, 0.7);
	line-height: 1.45;
}
.es-dash__tease-icon {
	color: var(--color-primary, #c8102e);
}
.es-dash__tease-cta {
	text-align: center;
	margin: var(--space-5) 0 0;
	font-size: 0.95rem;
}
.es-dash__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-5) 0 var(--space-4);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: var(--space-6);
}
.es-dash__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	text-decoration: none;
	color: var(--color-text, #0b0d0e);
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.9rem;
	white-space: nowrap;
	transition:
		background 120ms ease,
		border-color 120ms ease;
}
.es-dash__tab:hover {
	background: var(--color-bg-subtle, #f0f1f3);
	text-decoration: none;
}
.es-dash__tab--active {
	background: var(--color-primary, #c8102e);
	color: #fff;
	border-color: var(--color-primary, #c8102e);
}
.es-dash__tab--admin {
	border-color: rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.04);
	margin-left: auto;
}
.es-dash__tab--logout {
	border-color: rgba(0, 0, 0, 0.2);
	background: transparent;
	color: rgba(0, 0, 0, 0.6);
}
.es-dash__main {
	padding-bottom: var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.es-dash__welcome {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: var(--space-5);
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.es-dash__welcome-avatar {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--color-primary, #c8102e);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	flex-shrink: 0;
}
.es-dash__welcome-body h2 {
	margin: 0 0 2px;
	font-size: 1.1rem;
}
.es-dash__welcome-sub {
	margin: 0;
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.85rem;
}
.es-dash__chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}
.es-dash__chip {
	display: inline-block;
	padding: 2px 10px;
	background: var(--color-bg-subtle, #f0f1f3);
	border-radius: 999px;
	font-size: 0.75rem;
	color: rgba(0, 0, 0, 0.7);
}
.es-dash__chip--admin {
	background: var(--color-primary, #c8102e);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.es-dash__count-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-3);
}
.es-dash__count {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	color: inherit;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}
.es-dash__count:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.es-dash__count-icon {
	color: var(--color-primary, #c8102e);
}
.es-dash__count-num {
	font-size: 1.75rem;
	font-weight: 700;
	font-family: var(--font-display, inherit);
}
.es-dash__count-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.7rem;
	color: rgba(0, 0, 0, 0.6);
}

.es-dash__quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.es-dash__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 8px;
	text-decoration: none;
	background: var(--color-primary, #c8102e);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	border: 1px solid var(--color-primary, #c8102e);
	transition:
		background 120ms ease,
		border-color 120ms ease;
}
.es-dash__btn:hover {
	background: var(--color-primary-hover, #a30000);
	border-color: var(--color-primary-hover, #a30000);
	text-decoration: none;
	color: #fff;
}
.es-dash__btn--ghost {
	background: #fff;
	color: var(--color-text, #0b0d0e);
	border-color: rgba(0, 0, 0, 0.15);
}
.es-dash__btn--ghost:hover {
	background: var(--color-bg-subtle, #f0f1f3);
	color: var(--color-text, #0b0d0e);
	border-color: rgba(0, 0, 0, 0.25);
}
.es-dash__btn--primary {
	background: var(--color-primary, #c8102e);
	color: #fff;
}
.es-dash__btn--sm {
	padding: 5px 10px;
	font-size: 0.8rem;
}

.es-dash__section {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: var(--space-5);
}
.es-dash__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	flex-wrap: wrap;
}
.es-dash__section-header h2 {
	margin: 0;
	font-size: 1.15rem;
}
.es-dash__section-header h2 small {
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
	margin-left: 6px;
	font-size: 0.9rem;
}

.es-dash__table-wrap {
	width: 100%;
	overflow-x: auto;
}
.es-dash__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.es-dash__table th,
.es-dash__table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: middle;
}
.es-dash__table thead th {
	background: rgba(0, 0, 0, 0.03);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
	color: rgba(0, 0, 0, 0.6);
	font-weight: 600;
}
.es-dash__cell-title {
	font-weight: 600;
}
.es-dash__cell-items {
	color: rgba(0, 0, 0, 0.65);
	max-width: 280px;
}
.es-dash__col-actions {
	text-align: right;
	white-space: nowrap;
}
.es-dash__badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.7);
	letter-spacing: 0.04em;
}
.es-dash__badge--green {
	background: #dcfce7;
	color: #166534;
}
.es-dash__badge--blue {
	background: #dbeafe;
	color: #1e40af;
}
.es-dash__badge--gold {
	background: #fef3c7;
	color: #92400e;
}
.es-dash__badge--gray {
	background: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.6);
}

.es-dash__empty {
	background: #fff;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: var(--space-8) var(--space-5);
	text-align: center;
}
.es-dash__empty-icon {
	color: rgba(0, 0, 0, 0.35);
	margin-bottom: var(--space-3);
}
.es-dash__empty-title {
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 4px;
}
.es-dash__empty-text {
	color: rgba(0, 0, 0, 0.6);
	margin: 0;
	font-size: 0.9rem;
}

.es-dash__placeholder {
	color: rgba(0, 0, 0, 0.7);
	background: #fff;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: var(--space-5);
}
.es-dash__placeholder code {
	background: rgba(0, 0, 0, 0.05);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}

.es-dash__card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
}
.es-dash__card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}
.es-dash__card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.es-dash__card-image {
	aspect-ratio: 16 / 9;
	background: var(--color-bg-subtle, #f0f1f3);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.es-dash__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.es-dash__card-placeholder {
	font-size: 2.5rem;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.2);
}
.es-dash__card-body {
	padding: var(--space-3) var(--space-4);
}
.es-dash__card-body h3 {
	margin: 0 0 4px;
	font-size: 1rem;
}
.es-dash__card-meta {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}
.es-dash__card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.es-dash__profile-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	padding: var(--space-5);
}
.es-dash__profile-card dl {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
}
.es-dash__profile-card dt {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(0, 0, 0, 0.5);
	margin-bottom: 2px;
}
.es-dash__profile-card dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
}
.es-dash__profile-note {
	margin: var(--space-4) 0 var(--space-3);
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.6);
}
.es-dash__profile-card--note p {
	margin: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 0.9rem;
}

.es-dash__role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-3);
}
.es-dash__role-card {
	background: var(--color-bg-subtle, #f6f7f8);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	padding: var(--space-4);
}
.es-dash__role-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
.es-dash__role-card-head h3 {
	margin: 0;
	font-size: 1rem;
}
.es-dash__role-card-icon {
	color: var(--color-primary, #c8102e);
	display: inline-flex;
}
.es-dash__role-card p {
	margin: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 0.85rem;
}

.es-dash__award-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-3);
}
.es-dash__award-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 10px;
	padding: var(--space-4);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease;
}
.es-dash__award-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.es-dash__award-photo {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	object-fit: cover;
	margin-bottom: var(--space-3);
}
.es-dash__award-photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-subtle, #f0f1f3);
	color: var(--color-primary, #c8102e);
}
.es-dash__award-tag {
	display: inline-block;
	padding: 2px 10px;
	background: var(--color-primary-light, #fff0f0);
	color: var(--color-primary, #c8102e);
	border-radius: 999px;
	font-size: 0.7rem;
	margin-bottom: 6px;
	letter-spacing: 0.04em;
}
.es-dash__award-card h3 {
	margin: 0 0 2px;
	font-size: 1rem;
}
.es-dash__award-year {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 640px) {
	.es-dash__welcome {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.es-dash__tab--admin,
	.es-dash__tab--logout {
		margin-left: 0;
	}
}

/* ===== Signup hub + apply forms (Session 8) ===== */

.es-signup,
.es-apply {
	background: var(--color-bg-subtle, #f6f7f8);
	min-height: calc(100vh - 200px);
}
.es-signup__container,
.es-apply__container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 var(--space-5);
	/* S28: without border-box the horizontal padding was added OUTSIDE the
	 * content width, pushing the container ~30px past a 390px viewport (axe/
	 * overflow on all apply-* forms at mobile). */
	box-sizing: border-box;
	width: 100%;
}
.es-signup__hero,
.es-apply__hero {
	background: var(--color-text, #0b0d0e);
	color: #fff;
	padding: var(--space-8) 0 var(--space-6);
}
.es-signup__hero h1,
.es-apply__hero h1 {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.es-signup__hero-sub,
.es-apply__hero-sub {
	margin: var(--space-2) 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	max-width: 60ch;
}
.es-signup__overline,
.es-apply__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-2);
}
.es-apply__overline a {
	color: rgba(255, 255, 255, 0.85);
}

.es-signup__tiles {
	list-style: none;
	margin: var(--space-6) 0 var(--space-8);
	padding: 0;
	display: grid;
	/* S149 C.4 — symmetric 3-col grid (2 rows of 3) at desktop;
	   tablet drops to 2 columns; mobile single. */
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 600px) {
	.es-signup__tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 900px) {
	.es-signup__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}
.es-signup__tiles > li {
	display: flex;
	margin: 0;
}
.es-signup__tile {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: var(--space-5);
	width: 100%;
	transition:
		transform 100ms ease,
		box-shadow 100ms ease,
		border-color 120ms ease;
}
.es-signup__tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	border-color: var(--color-primary, #c8102e);
	text-decoration: none;
}
.es-signup__tile-icon {
	color: var(--color-primary, #c8102e);
	margin-bottom: var(--space-2);
}
.es-signup__tile-label {
	font-size: 1.25rem;
	font-weight: 700;
}
.es-signup__tile-desc {
	font-size: 0.9rem;
	color: rgba(0, 0, 0, 0.65);
	flex-grow: 1;
}
.es-signup__tile-count {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(0, 0, 0, 0.65); /* S28 a11y: 0.5 (#808080, 3.95:1) failed AA; 0.65 matches tile-desc (passes) */
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: var(--space-2);
	margin-top: var(--space-2);
}
.es-signup__login-note {
	margin-top: var(--space-6);
	text-align: center;
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.9rem;
}
/* S28 a11y: the login link in this note was color-only — add the non-color cue
 * (axe link-in-text-block on /signup/). */
.es-signup__login-note a {
	text-decoration: underline;
}

.es-apply__form {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: var(--space-6);
	margin: var(--space-6) auto var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 760px;
	width: 100%;
	/* S28: content-box made width:100% + padding overflow the container by the
	 * padding amount (~30px past a 390px viewport on all apply-* forms). */
	box-sizing: border-box;
}
.es-apply__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* S35 Phase 4 — conditional show/hide. The .es-apply__field rule above
	sets display:flex which would otherwise win against the [hidden] HTML
	attribute (per ~/.claude/memory feedback_hidden-attr-loses-to-css.md);
	this !important rule + the [hidden] attribute together make sure a
	conditionally-hidden field never paints. */
.es-apply__field--hidden {
	display: none !important;
}
.es-apply__field label {
	font-weight: 600;
	font-size: 0.9rem;
}
.es-apply__field input,
.es-apply__field select,
.es-apply__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid rgba(0, 0, 0, 0.28);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: #1a1a2e;
	box-sizing: border-box;
}
.es-apply__field input:hover,
.es-apply__field select:hover,
.es-apply__field textarea:hover {
	border-color: rgba(0, 0, 0, 0.45);
}
.es-apply__field input:focus,
.es-apply__field select:focus,
.es-apply__field textarea:focus {
	outline: 2px solid var(--color-primary, #c8102e);
	outline-offset: 1px;
}
.es-apply__help {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.55);
}
.es-apply__required {
	color: var(--color-primary, #c8102e);
}
.es-apply__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}
.es-apply__field--checkbox label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400;
}
.es-apply__field--checkbox input {
	width: auto;
	margin-top: 4px;
}
.es-apply__event-pinned {
	background: var(--color-bg-subtle, #f0f1f3);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 0.95rem;
}
.es-apply__event-pinned span {
	color: rgba(0, 0, 0, 0.6);
	margin-left: 6px;
}

.es-apply__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid var(--color-primary, #c8102e);
	background: var(--color-primary, #c8102e);
	color: #fff;
	cursor: pointer;
	align-self: flex-start;
}
.es-apply__btn:hover {
	background: var(--color-primary-hover, #a30000);
	border-color: var(--color-primary-hover, #a30000);
	color: #fff;
	text-decoration: none;
}
.es-apply__btn[disabled],
.es-apply__btn.is-busy {
	opacity: 0.6;
	cursor: progress;
}
.es-apply__btn--primary {
	/* alias of base */
}

.es-apply__alert {
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 0.9rem;
}
.es-apply__alert--success {
	background: #dcfce7;
	border: 1px solid #16a34a;
	color: #166534;
}
.es-apply__alert--error {
	background: #fee2e2;
	border: 1px solid #b91c1c;
	color: #991b1b;
}

.es-apply__gated,
.es-apply__empty {
	background: #fff;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: var(--space-8) var(--space-5);
	text-align: center;
	margin: var(--space-6) 0 var(--space-12);
	max-width: 560px;
}
.es-apply__gated-icon,
.es-apply__empty-icon {
	color: rgba(0, 0, 0, 0.35);
	margin-bottom: var(--space-3);
}
.es-apply__gated h2,
.es-apply__empty-title {
	margin: 0 0 var(--space-2);
	font-size: 1.15rem;
}
.es-apply__empty-text {
	color: rgba(0, 0, 0, 0.6);
	margin: 0;
	font-size: 0.9rem;
}

@media (max-width: 640px) {
	.es-apply__field-row {
		grid-template-columns: 1fr;
	}
}

/* ===== Newsletter signup public page (S152) =====
	page-newsletter.php was shipped without its stylesheet block. The
	markup uses .es-newsletter__* classes that had ZERO rules in
	style.css, so the page rendered as unstyled HTML. Mirrors the
	.es-apply layout family. */

.es-newsletter {
	background: var(--color-bg-subtle, #f6f7f8);
	min-height: calc(100vh - 200px);
}
.es-newsletter__container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 var(--space-5);
}
.es-newsletter__hero {
	background: var(--color-text, #0b0d0e);
	color: #fff;
	padding: var(--space-8) 0 var(--space-6);
}
.es-newsletter__hero h1 {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.es-newsletter__hero-sub {
	margin: var(--space-2) 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	max-width: 60ch;
}
.es-newsletter__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: var(--space-2);
}
.es-newsletter__form {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: var(--space-6);
	margin: var(--space-6) auto var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 640px;
	/* N14 — cap at the container width so a flex/grid child with intrinsic
	   min-width can't force the form wider than the viewport (the symptom was
	   a computed negative auto margin-right pushing the form 30px off-screen on
	   375px mobile). min-width:0 lets flex children shrink below content size. */
	width: 100%;
	max-width: min(640px, 100%);
	min-width: 0;
	box-sizing: border-box;
}
.es-newsletter__form * {
	min-width: 0;
}
.es-newsletter__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.es-newsletter__field label {
	font-weight: 600;
	font-size: 0.9rem;
}
.es-newsletter__field input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid rgba(0, 0, 0, 0.28);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: #1a1a2e;
	box-sizing: border-box;
}
.es-newsletter__field input:hover {
	border-color: rgba(0, 0, 0, 0.45);
}
.es-newsletter__field input:focus {
	outline: 2px solid var(--color-primary, #c8102e);
	outline-offset: 1px;
}
.es-newsletter__required {
	color: var(--color-primary, #c8102e);
}
.es-newsletter__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}
.es-newsletter__legal {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.55);
}
.es-newsletter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid var(--color-primary, #c8102e);
	background: var(--color-primary, #c8102e);
	color: #fff;
	cursor: pointer;
	align-self: flex-start;
}
.es-newsletter__btn:hover {
	background: var(--color-primary-hover, #a30000);
	border-color: var(--color-primary-hover, #a30000);
	color: #fff;
	text-decoration: none;
}
.es-newsletter__btn[disabled],
.es-newsletter__btn.is-busy {
	opacity: 0.6;
	cursor: progress;
}
.es-newsletter__btn--primary {
	/* alias of base */
}
.es-newsletter__alert {
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 0.9rem;
}
.es-newsletter__alert--success {
	background: #dcfce7;
	border: 1px solid #16a34a;
	color: #166534;
}
.es-newsletter__alert--error {
	background: #fee2e2;
	border: 1px solid #b91c1c;
	color: #991b1b;
}
@media (max-width: 640px) {
	.es-newsletter__field-row {
		grid-template-columns: 1fr;
	}
}

/* ===== S152 H1: mobile sticky-nav scroll-padding =====
	Apply forms + sponsor form had their top fields visually hidden
	behind the sticky nav during mid-scroll. Adding scroll-padding-top
	to html ensures anchor jumps + focus-into-view stay clear of the
	nav. ~80px covers the site-header at mobile widths. */
html {
	scroll-padding-top: 80px;
}

/* ===== S152 H5: access-denied dead-space fix =====
	.es-admin parent has min-height: calc(100vh - 200px) which makes
	the small "Access denied" message sit in a ~700px box, leaving
	~600px of empty whitespace. Override the denied state to use
	natural height so the box collapses to fit its content. Padding
	gives breathing room without filling the viewport. Flex centering
	keeps the small message visually centered within its own padding. */
.es-admin--denied {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: auto;
	padding: var(--space-10) var(--space-5);
}

/* ===== S152 H4 + M8: admin table mobile overflow =====
	Admin-dashboard tables (audit-log, orders) have scrollWidth ~1500px
	on mobile but the parent .es-admin__placeholder had overflow:visible.
	Columns 5-6 (Extra, IP for audit-log; Stripe PI, Delete for orders)
	were invisible without horizontal scroll. Adding overflow-x:auto
	to the placeholder is no-op when content fits, and provides a
	horizontal scrollbar when content overflows. */
.es-admin__placeholder {
	overflow-x: auto;
}

/* ===== S152 Phase 4 (H2): volunteer shift picker =====
	Inside the /apply-volunteer/ form, lists available shifts for the
	selected event. Hidden when no shifts exist on the event. */
.es-apply__shifts {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.es-apply__shift-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1.5px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
	transition:
		border-color 100ms ease,
		background 100ms ease;
}
.es-apply__shift-option:hover {
	border-color: rgba(0, 0, 0, 0.35);
	background: var(--color-bg-subtle, #f6f7f8);
}
.es-apply__shift-option:has(input[type="radio"]:checked) {
	border-color: var(--color-primary, #c8102e);
	background: rgba(200, 16, 46, 0.04);
}
/* S55 — a full (at-capacity) shift: muted + not selectable. */
.es-apply__shift-option--full {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--color-bg-subtle, #f6f7f8);
}
.es-apply__shift-option--full:hover {
	border-color: rgba(0, 0, 0, 0.15);
	background: var(--color-bg-subtle, #f6f7f8);
}
.es-apply__shift-cap--full {
	color: var(--color-error, #c00);
	font-weight: 600;
}
.es-apply__shift-option input[type="radio"] {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}
.es-apply__shift-text {
	flex: 1;
	font-size: 0.95rem;
	font-weight: 500;
}
.es-apply__shift-cap {
	color: rgba(0, 0, 0, 0.55);
	font-weight: 400;
	font-size: 0.85rem;
}
.es-apply__shift-notes {
	flex-basis: 100%;
	margin-top: 4px;
	color: rgba(0, 0, 0, 0.6);
	font-style: italic;
	font-size: 0.85rem;
}

/* ===== Stripe settings form (Session 9) ===== */

.es-stripe-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 720px;
}
.es-stripe-form__fieldset {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.es-stripe-form__fieldset legend {
	font-weight: 600;
	padding: 0 8px;
}
.es-stripe-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.es-stripe-form__field label {
	font-weight: 600;
	font-size: 0.9rem;
}
.es-stripe-form__field input,
.es-stripe-form__field select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: ui-monospace, SFMono-Regular, monospace;
	background: #fff;
}
.es-stripe-form__field select {
	font-family: inherit;
}
.es-stripe-form__field input:focus,
.es-stripe-form__field select:focus {
	outline: 2px solid var(--color-primary, #c8102e);
	outline-offset: 1px;
}
.es-stripe-form__help {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.55);
}
.es-stripe-form__help code {
	background: rgba(0, 0, 0, 0.05);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 0.85em;
}
.es-stripe-form__alert {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.9rem;
}
.es-stripe-form__alert--success {
	background: #dcfce7;
	border: 1px solid #16a34a;
	color: #166534;
}
.es-stripe-form__alert--error {
	background: #fee2e2;
	border: 1px solid #b91c1c;
	color: #991b1b;
}
.es-stripe-form__row {
	display: flex;
	justify-content: flex-end;
}
.es-stripe-form__webhook-hint {
	margin-top: var(--space-5);
	padding: var(--space-4);
	background: rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	font-size: 0.9rem;
}
.es-stripe-form__webhook-hint h3 {
	margin: 0 0 var(--space-2);
	font-size: 1rem;
}
.es-stripe-form__webhook-hint code {
	display: inline-block;
	background: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 0.85rem;
	word-break: break-all;
}
.es-admin__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--color-primary, #c8102e);
	background: var(--color-primary, #c8102e);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
}
.es-admin__btn:hover {
	background: var(--color-primary-hover, #a30000);
	border-color: var(--color-primary-hover, #a30000);
}
.es-admin__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.es-admin__btn--primary {
	/* alias of base */
}

/* ─── Session 9: Commerce surfaces ───────────────────────────────── */

/* Commerce admin tab */
.es-commerce__panel {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #e7e5df;
	border-radius: 0.5rem;
}
.es-commerce__panel h3 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}
.es-commerce__alert {
	margin: 0.5rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.4rem;
	font-size: 0.95rem;
}
.es-commerce__alert--success {
	background: #e6f4ea;
	border: 1px solid #82c69b;
	color: #1e6033;
}
.es-commerce__alert--error {
	background: #fceaea;
	border: 1px solid #df8a8a;
	color: #8a1f1f;
}
.es-commerce__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.75rem;
}
.es-commerce__table th,
.es-commerce__table td {
	padding: 0.5rem;
	text-align: left;
	border-bottom: 1px solid #f0eee8;
	font-size: 0.9rem;
}
.es-commerce__inp {
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid #d9d5cb;
	border-radius: 0.3rem;
	font: inherit;
}
.es-commerce__row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.es-commerce__rm {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 1.25rem;
	color: #a13b3b;
	padding: 0.1rem 0.4rem;
}
.es-commerce__rm:hover {
	color: #741f1f;
}
.es-commerce__test-card {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
}
.es-commerce__test-card li {
	margin: 0.15rem 0;
}
.es-commerce__migration-result {
	margin-top: 1rem;
	padding: 0.75rem;
	background: #f7f6f1;
	border-radius: 0.4rem;
	font-size: 0.9rem;
}
.es-commerce__migration-result table {
	margin-bottom: 0.5rem;
}
.es-commerce__migration-result details {
	margin-top: 0.5rem;
}
.es-commerce__migration-result summary {
	cursor: pointer;
	font-weight: 600;
}
.es-commerce__migration-result ul {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.82rem;
}

/* Shared form patterns for donate/tickets/sponsor */
.es-donate,
.es-tickets,
.es-sponsor {
	padding: 0 0 4rem;
}
.es-donate__hero,
.es-tickets__hero,
.es-sponsor__hero {
	padding: 3rem 0 2rem;
	background: linear-gradient(180deg, #f7f6f1 0%, #fff 100%);
}
.es-donate__container,
.es-tickets__container,
.es-sponsor__container {
	max-width: 740px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.es-donate__overline,
.es-tickets__overline,
.es-sponsor__overline {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #876c34;
}
.es-donate__hero h1,
.es-tickets__hero h1,
.es-sponsor__hero h1 {
	margin: 0.4rem 0 0.5rem;
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 2.4rem;
}
.es-donate__hero-sub,
.es-tickets__hero-sub,
.es-sponsor__hero-sub {
	color: #5a5246;
	font-size: 1.05rem;
	margin: 0;
}
.es-donate__alert,
.es-tickets__alert,
.es-sponsor__alert {
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	border-radius: 0.4rem;
}
.es-donate__alert--success {
	background: #e6f4ea;
	border: 1px solid #82c69b;
	color: #1e6033;
}
.es-donate__alert--error,
.es-tickets__alert--error,
.es-sponsor__alert--error {
	background: #fceaea;
	border: 1px solid #df8a8a;
	color: #8a1f1f;
}
.es-donate__field,
.es-tickets__field,
.es-sponsor__field {
	margin: 1.1rem 0;
}
/* S54 — sponsor checkout logo preview (logged-out logo upload). */
.es-sponsor__logo-preview {
	margin-bottom: 0.5rem;
}
.es-sponsor__logo-preview img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border: 1px solid var(--color-border, #ddd);
	border-radius: var(--radius-md, 6px);
	padding: 4px;
	background: #fff;
}
.es-donate__field legend,
.es-sponsor__field legend {
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.es-donate__field label,
.es-tickets__field label,
.es-sponsor__field label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.35rem;
}
.es-donate__field input,
.es-donate__field select,
.es-tickets__field input,
.es-tickets__field select,
.es-sponsor__field input,
.es-sponsor__field select,
.es-sponsor__field textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1.5px solid #b8b0a0;
	border-radius: 0.4rem;
	font: inherit;
	background: #fff;
	color: #1a1a2e;
	box-sizing: border-box;
}
.es-donate__field input:hover,
.es-donate__field select:hover,
.es-tickets__field input:hover,
.es-tickets__field select:hover,
.es-sponsor__field input:hover,
.es-sponsor__field select:hover,
.es-sponsor__field textarea:hover {
	border-color: #7a6f5d;
}
/* Radio + checkbox inputs must NOT inherit width:100% from the rule above —
 * they'd stretch to fill the row and push their visible label way off
 * to the side. */
.es-donate__field input[type="radio"],
.es-donate__field input[type="checkbox"],
.es-tickets__field input[type="radio"],
.es-tickets__field input[type="checkbox"],
.es-sponsor__field input[type="radio"],
.es-sponsor__field input[type="checkbox"] {
	width: auto;
	padding: 0;
	flex: 0 0 auto;
}
.es-donate__field-row,
.es-tickets__field-row,
.es-sponsor__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 540px) {
	.es-donate__field-row,
	.es-tickets__field-row,
	.es-sponsor__field-row {
		grid-template-columns: 1fr;
	}
}
.es-donate__required,
.es-tickets__required,
.es-sponsor__required {
	color: #a13b3b;
}
.es-donate__btn,
.es-tickets__btn,
.es-sponsor__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: 0.4rem;
	border: 1px solid #c8b96a;
	background: #fff;
	font: inherit;
	cursor: pointer;
}
.es-donate__btn--primary,
.es-tickets__btn--primary,
.es-sponsor__btn--primary {
	background: #a93226;
	color: #fff;
	border-color: #a93226;
	font-weight: 600;
}
.es-donate__btn--primary:hover,
.es-tickets__btn--primary:hover,
.es-sponsor__btn--primary:hover {
	background: #8b271e;
	border-color: #8b271e;
}
.es-donate__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Donate-specific */
.es-donate__radio-group {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.es-donate__radio-group label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
}
.es-donate__tier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}
.es-donate__tier {
	padding: 0.85rem 0.5rem;
	border: 1.5px solid #d9d5cb;
	background: #fff;
	border-radius: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
}
.es-donate__tier:hover {
	border-color: #876c34;
}
.es-donate__tier--active {
	border-color: #876c34;
	background: #f8f3e6;
	color: #5a4a1d;
}
.es-donate__tier--custom {
	border-style: dashed;
	font-weight: 500;
}
.es-donate__custom-amount {
	margin-top: 0.6rem;
}
.es-donate__amount-display {
	margin: 0.6rem 0 0;
	font-size: 1.05rem;
}
.es-donate__amount-display strong {
	font-size: 1.4rem;
	color: #876c34;
}
.es-donate__legal {
	font-size: 0.82rem;
	color: #7a6f5d;
	margin-top: 0.6rem;
}

/* Tickets-specific */
.es-tickets__tier-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
.es-tickets__tier-table th,
.es-tickets__tier-table td {
	padding: 0.65rem;
	text-align: left;
	border-bottom: 1px solid #ece9df;
}
.es-tickets__tier-table th {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #7a6f5d;
}
.es-tickets__qty-col {
	width: 90px;
	text-align: right;
}
.es-tickets__tier-table input[type="number"] {
	width: 80px;
	padding: 0.4rem;
	border: 1px solid #d9d5cb;
	border-radius: 0.3rem;
	font: inherit;
	text-align: center;
}
.es-tickets__tier-desc {
	display: block;
	font-size: 0.85rem;
	color: #7a6f5d;
	margin-top: 0.15rem;
}
.es-tickets__tier-stock {
	display: inline-block;
	margin-top: 0.2rem;
	padding: 0.1rem 0.4rem;
	background: #f8f3e6;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	color: #5a4a1d;
}
/* S26 -- date/qty tier status badge on the buy page */
.es-tickets__tier-status {
	display: inline-block;
	margin-top: 0.2rem;
	padding: 0.1rem 0.45rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: #ece7dd;
	color: #6b5e49;
}
.es-tickets__tier-status--soldout,
.es-tickets__tier-status--ended {
	background: #f3e2e2;
	color: #8a2b2b;
}
.es-tickets__tier-status--upcoming,
.es-tickets__tier-status--queued {
	background: #e7eef5;
	color: #2f5573;
}
.es-tickets__tier--unavailable td:first-child strong {
	color: #6e6655; /* S28 a11y: #9a917f was 3.0:1 on white; #6e6655 is 5.7:1 (AA), keeps the warm muted sold-out feel */
}
.es-tickets__tier--unavailable .es-tickets__qty-col input {
	opacity: 0.5;
}
/* S26 -- admin Tickets Manager status badges + window hint */
.es-tixmgr__hint {
	font-size: 0.85rem;
	color: #6b6256;
	margin-top: 0.25rem;
}
.es-tixmgr__badge {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	background: #ece7dd;
	color: #6b5e49;
}
.es-tixmgr__badge--live {
	background: #e2f0e4;
	color: #256b34;
}
.es-tixmgr__badge--queued {
	background: #e7eef5;
	color: #2f5573;
}
.es-tixmgr__badge--off {
	background: #f3e2e2;
	color: #8a2b2b;
}
.es-tixmgr__badge-sub {
	display: block;
	font-size: 0.7rem;
	color: #7a7163;
	margin-top: 0.15rem;
}
.es-tixmgr__window-cell {
	white-space: nowrap;
}
.es-tixmgr__window-field {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.es-tixmgr__window-field + .es-tixmgr__window-field {
	margin-top: 0.25rem;
}
.es-tixmgr__window-field > span {
	display: inline-block;
	width: 3.2em;
	font-size: 0.75rem;
	color: #6b6256;
	text-align: right;
}
.es-tixmgr__window-field input {
	font-size: 0.8rem;
}
.es-tickets__total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	background: #f7f6f1;
	border-radius: 0.4rem;
	font-size: 1.1rem;
}
.es-tickets__total-row strong {
	font-size: 1.4rem;
	color: #876c34;
}
/* S60 — bundle tier radio group + promo field + event photos. */
.es-tickets__bundle-tiers {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.es-tickets__bundle-opt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 0.98rem;
	line-height: 1.3;
}
.es-tickets__bundle-opt input[type="radio"] {
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
	margin: 0;
}
.es-tickets__field--promo {
	margin: 1rem 0;
}
.es-tickets__field--promo input {
	max-width: 18rem;
}
.es-tickets__optional {
	color: #8a8a8a;
	font-weight: 400;
	font-size: 0.85em;
}
.es-event-photos {
	margin: 1.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.es-event-photos__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
/* S60 — the bundle row adds a radio group in the Price cell; on narrow screens
	the 3-column table can push the Qty input off the right edge. Below 600px,
	collapse a bundle row to a stacked block so radios + qty wrap cleanly. Only
	rows that contain the bundle fieldset are affected; plain tiers stay tabular. */
@media (max-width: 600px) {
	.es-tickets__tier-table tr:has(.es-tickets__bundle-tiers) {
		display: block;
		padding: 0.5rem 0;
	}
	.es-tickets__tier-table tr:has(.es-tickets__bundle-tiers) > td {
		display: block;
		width: auto;
		text-align: left;
		border: 0;
		padding: 0.25rem 0;
	}
	.es-tickets__tier-table tr:has(.es-tickets__bundle-tiers) .es-tickets__qty-col input[type="number"] {
		width: 90px;
	}
	.es-tickets__bundle-tiers {
		gap: 0.6rem;
	}
}
.es-tickets__event-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.es-tickets__event-list li {
	margin: 0.5rem 0;
}
.es-tickets__event-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	text-decoration: none;
	color: inherit;
}
.es-tickets__event-list a:hover {
	border-color: #876c34;
	background: #fafaf6;
}
.es-tickets__event--unavailable {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #f7f6f1;
	border: 1px dashed #d9d5cb;
	border-radius: 0.4rem;
	color: #5a5246;
}
.es-tickets__event-status {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #876c34;
	background: #fff7e0;
	padding: 0.25rem 0.6rem;
	border-radius: 0.3rem;
	border: 1px solid #ecddb0;
}
.es-tickets__empty {
	padding: 2rem;
	text-align: center;
	background: #f7f6f1;
	border-radius: 0.4rem;
}

/* Sponsor-specific */
.es-sponsor__tier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.85rem;
}
.es-sponsor__tier {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.1rem;
	border: 1.5px solid #d9d5cb;
	border-radius: 0.5rem;
	cursor: pointer;
	background: #fff;
}
.es-sponsor__tier:hover {
	border-color: #876c34;
}
.es-sponsor__tier input {
	margin-bottom: 0.4rem;
}
.es-sponsor__tier:has(input:checked) {
	border-color: #876c34;
	background: #f8f3e6;
}
.es-sponsor__tier-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.es-sponsor__tier-name {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.25;
}
.es-sponsor__tier-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: #876c34;
	white-space: nowrap;
}
.es-sponsor__tier-tickets {
	align-self: flex-start;
	font-size: 0.78rem;
	font-weight: 600;
	color: #6f5821;
	background: #f3ebd8;
	border: 1px solid #e3d4a8;
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
}
.es-sponsor__tier-benefits {
	margin: 0.1rem 0 0;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.es-sponsor__tier-benefits li {
	font-size: 0.85rem;
	color: #5f5848;
	line-height: 1.35;
}
.es-sponsor__legal {
	font-size: 0.85rem;
	color: #5a5246;
	background: #f7f6f1;
	padding: 0.7rem 1rem;
	border-radius: 0.4rem;
	margin-bottom: 0.5rem;
}
.es-sponsor__sig-preview {
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	border: 1.5px dashed #c8b96a;
	border-radius: 0.4rem;
	font-family: "Caveat", cursive;
	font-size: 1.6rem;
	color: #5a4a1d;
	min-height: 2.4rem;
	background: #fffdf6;
}
.es-sponsor__field--checkbox label {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
}
/* The generic .es-sponsor__field input rule sets width:100% (correct for
 * text/email/number inputs) — but a checkbox should stay its native size
 * or it stretches to fill the row and pushes the label to the far right. */
.es-sponsor__field--checkbox input[type="checkbox"] {
	width: auto;
	flex: 0 0 auto;
	margin-top: 0.3rem;
}
.es-sponsor__event-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.es-sponsor__event-list li {
	margin: 0.5rem 0;
}
.es-sponsor__event-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	text-decoration: none;
	color: inherit;
}
.es-sponsor__event-list a:hover {
	border-color: #876c34;
	background: #fafaf6;
}
.es-sponsor__empty {
	padding: 2rem;
	text-align: center;
	background: #f7f6f1;
	border-radius: 0.4rem;
}

/* Session 10: event-tickets block (inline picker on event detail) */
.es-tickets-block {
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
}
.es-tickets-block__heading {
	margin: 0 0 1rem;
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 1.5rem;
}
.es-tickets-block--error,
.es-tickets-block--empty {
	padding: 1rem;
	background: #f7f6f1;
	border: 1px dashed #c8b96a;
	border-radius: 0.4rem;
	font-size: 0.9rem;
	color: #5a5246;
}
/* S78 V2: tickets-block placeholder/error messages contain inline
	links that must be distinguishable without color alone. */
.es-tickets-block--error a,
.es-tickets-block--empty a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.es-tickets-block__form {
	margin: 0;
}
.es-tickets-block__form .es-tickets__total-row {
	margin-top: 1rem;
}
.es-tickets-block-placeholder {
	padding: 1.5rem;
	text-align: center;
	background: #f7f6f1;
	border: 1px dashed #c8b96a;
	border-radius: 0.4rem;
	color: #876c34;
	font-style: italic;
}

/* Session 10: kiosk + POS surfaces */
.es-pos {
	padding: 0 0 4rem;
}
.es-pos__container {
	max-width: 780px;
	margin: 0 auto;
	padding: 1.5rem;
}
.es-pos__hero {
	margin-bottom: 1.25rem;
}
.es-pos__overline {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #876c34;
}
.es-pos__hero h1 {
	margin: 0.4rem 0 0.25rem;
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 2rem;
}
.es-pos__step {
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}
.es-pos__step--success {
	text-align: center;
	padding: 2.5rem 1.5rem;
}
.es-pos__success-icon {
	color: #1e6033;
	margin-bottom: 0.75rem;
}
.es-pos__row {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1rem;
}
.es-pos__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: 0.4rem;
	border: 1px solid #c8b96a;
	background: #fff;
	font: inherit;
	cursor: pointer;
}
.es-pos__btn--primary {
	background: #876c34;
	color: #fff;
	border-color: #876c34;
	font-weight: 600;
}
.es-pos__btn--primary:hover {
	background: #6f5527;
	color: #fff;
}
/* es-pos__btn is used as an <a> in several places; keep the theme's
 * a:hover (red + underline) from bleeding into button styling. */
.es-pos__btn:hover,
.es-pos__btn:focus {
	text-decoration: none;
}
.es-pos__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}
.es-pos__error {
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	background: #fceaea;
	border: 1px solid #df8a8a;
	border-radius: 0.4rem;
	color: #8a1f1f;
}
.es-pos__event-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.es-pos__event-list li {
	margin: 0.5rem 0;
}
.es-pos__event-list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	text-decoration: none;
	color: inherit;
}
.es-pos__event-list a:hover {
	border-color: #876c34;
	background: #fafaf6;
}
#es-kiosk-payment-element,
#es-pos-payment-element {
	margin: 1rem 0;
	padding: 1rem;
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	min-height: 200px;
}
.es-pos--kiosk {
	font-size: 1.1rem;
}
.es-pos--kiosk .es-pos__btn {
	padding: 1.1rem 1.6rem;
	font-size: 1.1rem;
}

/* Session 10: documents tab editor */
.es-docs__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 1.25rem;
	align-items: start;
}
@media (max-width: 780px) {
	.es-docs__layout {
		grid-template-columns: 1fr;
	}
}
/* S158 P8 -- browser-tester caught the rail overflowing the viewport by
 * ~25px at 375px width (rail rendered 358px wide starting at x=41px,
 * right edge 399px vs 375px viewport). max-width:100% + min-width:0
 * contains it inside the grid track. */
@media (max-width: 480px) {
	.es-docs__rail {
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;
	}
}
.es-docs__rail {
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	padding: 0.75rem;
}
.es-docs__rail-actions {
	margin-bottom: 0.75rem;
}
.es-docs__list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.es-docs__list-item {
	margin: 0.25rem 0;
}
.es-docs__list-btn {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.es-docs__list-btn:hover {
	background: #f8f3e6;
	border-color: #876c34;
}
.es-docs__list-item--active .es-docs__list-btn {
	background: #f8f3e6;
	border-color: #876c34;
}
.es-docs__list-meta {
	font-size: 0.78rem;
	color: #7a6f5d;
	margin-top: 0.15rem;
}
.es-docs__editor {
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	padding: 1.25rem;
}
.es-docs__editor-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.es-docs__field {
	display: flex;
	flex-direction: column;
}
.es-docs__field label {
	font-weight: 500;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
}
.es-docs__field--checkbox label {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.es-docs__field input,
.es-docs__field select,
.es-docs__field textarea {
	padding: 0.5rem 0.65rem;
	border: 1px solid #d9d5cb;
	border-radius: 0.3rem;
	font: inherit;
}
.es-docs__field textarea {
	font-family: ui-monospace, Menlo, monospace;
	font-size: 0.88rem;
}
.es-docs__variables {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}
.es-docs__var-chip {
	padding: 0.2rem 0.55rem;
	background: #f7f6f1;
	border: 1px solid #c8b96a;
	border-radius: 0.3rem;
	font-size: 0.78rem;
	font-family: ui-monospace, Menlo, monospace;
	cursor: pointer;
}
.es-docs__var-chip:hover {
	background: #f8f3e6;
}
.es-docs__editor-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #ece9df;
}
.es-docs__btn--danger {
	background: #a13b3b;
	color: #fff;
	border-color: #a13b3b;
	margin-left: auto;
}
.es-docs__btn--danger:hover {
	background: #741f1f;
}
.es-docs__alert {
	margin: 0.5rem 0;
	padding: 0.7rem 1rem;
	border-radius: 0.4rem;
	font-size: 0.9rem;
}
.es-docs__alert--success {
	background: #e6f4ea;
	border: 1px solid #82c69b;
	color: #1e6033;
}
.es-docs__alert--error {
	background: #fceaea;
	border: 1px solid #df8a8a;
	color: #8a1f1f;
}

/* Session 10: wallet admin tab + dashboard tickets tab buttons */
.es-admin__pill {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 0.3rem;
	font-size: 0.75rem;
	font-weight: 600;
}
.es-admin__pill--ok {
	background: #e6f4ea;
	color: #1e6033;
	border: 1px solid #82c69b;
}
.es-admin__pill--off {
	background: #fceaea;
	color: #8a1f1f;
	border: 1px solid #df8a8a;
}
.es-wallet pre {
	background: #0f1115;
	color: #cdd6e2;
	padding: 0.75rem 1rem;
	border-radius: 0.4rem;
	font-size: 0.82rem;
	overflow-x: auto;
	margin: 0.5rem 0;
}
.es-dash__cell-sub {
	display: block;
	font-size: 0.78rem;
	color: #7a6f5d;
	margin-top: 0.15rem;
}

/* S28 a11y: inline prose links inside content cards must carry a non-color cue
 * (WCAG 1.4.1) -- axe flagged `link-in-text-block` on /contact/ where a link sat
 * mid-sentence distinguished only by color. Underline links inside card body
 * paragraphs; standalone mailto links in their own <p> get it too (acceptable). */
.fp-page .card p a {
	text-decoration: underline;
}
/* Same non-color-cue requirement for inline links in admin dashboard grid-header
 * intro paragraphs (axe link-in-text-block on /email-dashboard/ emails+campaigns). */
.es-admin__grid-header p a {
	text-decoration: underline;
}
/* S28: long unbreakable code identifiers in dashboard prose (e.g.
 * EventSync_Social::scope_guard_check()) overflowed the viewport on mobile.
 * Let them wrap. */
.dash-main-content code,
.es-admin__main code {
	overflow-wrap: anywhere;
}
/* S28 a11y: external links in the WooCommerce checkout disclaimer (Terms /
 * Privacy, target=_blank) were color-only — give them the required non-color
 * cue (axe link-in-text-block on /checkout/). */
.woocommerce-checkout a[target="_blank"] {
	text-decoration: underline;
}

/* Session 11: a11y improvements (skip-link, sr-only, focus rings) */
.es-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
	background: #876c34;
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: 0 0 0.3rem 0;
	text-decoration: none;
	font-weight: 600;
}
.es-skip-link:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	outline: 3px solid #f8f3e6;
	outline-offset: 2px;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.es-tickets__btn:focus-visible,
.es-donate__btn:focus-visible,
.es-sponsor__btn:focus-visible,
.es-pos__btn:focus-visible,
.es-admin__btn:focus-visible,
.es-admin__tab:focus-visible,
.es-dash__tab:focus-visible {
	outline: 3px solid #876c34;
	outline-offset: 2px;
}
.es-donate__tier:focus-visible,
.es-sponsor__tier:focus-within {
	outline: 3px solid #876c34;
	outline-offset: 2px;
}

/* Session 11: unmatched-product triage rows */
.es-commerce__unmatched {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.es-commerce__unmatched-row {
	padding: 0.7rem;
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.es-commerce__unmatched-row--done {
	background: #e6f4ea;
	border-color: #82c69b;
}
.es-commerce__unmatched-title {
	font-size: 0.92rem;
}
.es-commerce__unmatched-controls {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
}
.es-commerce__unmatched-controls select {
	flex: 1 1 auto;
	min-width: 160px;
}

/* Session 12: tickets-manager admin tab + dashboard badges */
.es-tixmgr__alert {
	margin: 0.5rem 0;
	padding: 0.7rem 1rem;
	border-radius: 0.4rem;
	font-size: 0.9rem;
}
.es-tixmgr__alert--success {
	background: #e6f4ea;
	border: 1px solid #82c69b;
	color: #1e6033;
}
.es-tixmgr__alert--error {
	background: #fceaea;
	border: 1px solid #df8a8a;
	color: #8a1f1f;
}
.es-tixmgr__list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.es-tixmgr__list-header h3 {
	margin: 0;
}
.es-tixmgr__loading {
	padding: 1rem;
	text-align: center;
	color: #7a6f5d;
	font-style: italic;
}
.es-dash__badge--blue {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #93c5fd;
}
.es-dash__badge--gold {
	background: #f8f3e6;
	color: #5a4a1d;
	border: 1px solid #c8b96a;
}

/* Session 13: QR-mode kiosk/POS step */
.es-pos__mode-picker {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	border: 0;
}
.es-pos__mode-option {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
}
.es-pos__mode-option input {
	margin: 0;
}
.es-pos__step--qr {
	text-align: center;
}
.es-pos__qr-instructions {
	font-size: 1.05rem;
	color: #5a5246;
	margin: 0.75rem 0 1rem;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}
.es-pos__qr-frame {
	display: inline-block;
	padding: 1rem;
	background: #fff;
	border: 2px solid #876c34;
	border-radius: 0.5rem;
	margin: 0.5rem 0;
}
.es-pos__qr-image {
	display: block;
	max-width: 320px;
	height: auto;
}
.es-pos__qr-status {
	font-size: 1.05rem;
	font-weight: 600;
	color: #876c34;
	margin: 0.6rem 0;
}
.es-pos__qr-expires {
	font-size: 0.9rem;
	color: #7a6f5d;
	margin: 0.25rem 0 1rem;
}

/* S166: POS card reader (Stripe Terminal) + WooCommerce-app handoff */
/* The author display rules below outrank the UA [hidden] rule, so the
 * hidden attribute must be re-asserted for these elements. */
.es-pos__reader-bar[hidden],
.es-pos__offline-banner[hidden],
.es-pos__queue-status[hidden],
.es-pos__btn[hidden] {
	display: none;
}
.es-pos__reader-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
}
.es-pos__reader-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.es-pos__reader-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: #bbb;
	flex: 0 0 auto;
}
.es-pos__reader-dot--on {
	background: #1e6033;
}
.es-pos__reader-dot--pending {
	background: #c8950a;
}
.es-pos__reader-dot--off {
	background: #bbb;
}
.es-pos__reader-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}
.es-pos__reader-select {
	padding: 0.45rem 0.6rem;
	border: 1px solid #c8b96a;
	border-radius: 0.35rem;
	font: inherit;
	max-width: 240px;
}
.es-pos__btn--sm {
	padding: 0.5rem 0.9rem;
	font-size: 0.9rem;
}
.es-pos__reader-msg {
	flex: 1 1 100%;
	margin: 0.2rem 0 0;
	font-size: 0.88rem;
	color: #7a6f5d;
}
.es-pos__reader-msg--error {
	color: #8a1f1f;
}
.es-pos__reader-msg:empty {
	display: none;
}
.es-pos__step--terminal {
	text-align: center;
}
.es-pos__terminal-visual {
	color: #876c34;
	margin: 0.5rem 0 0.75rem;
}
.es-pos__terminal-instructions {
	font-size: 1.05rem;
	font-weight: 600;
	color: #5a5246;
	margin: 0.5rem auto 1rem;
	max-width: 460px;
}
.es-pos__step--wcapp {
	text-align: center;
}
.es-pos__wcapp-steps {
	max-width: 460px;
	margin: 1rem auto;
	padding-left: 1.3rem;
	text-align: left;
	line-height: 1.6;
}
.es-pos__wcapp-steps li {
	margin: 0.35rem 0;
}
.es-pos__wcapp-status {
	font-size: 1.05rem;
	font-weight: 600;
	color: #876c34;
	margin: 0.6rem 0;
}
.es-pos__offline-banner {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	background: #fde6d6;
	border: 1px solid #e0a44e;
	border-radius: 0.4rem;
	color: #7a4a08;
	font-size: 0.92rem;
}
.es-pos__offline-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: #e0a44e;
	flex: 0 0 auto;
}
.es-pos__queue-status {
	margin: 0 0 1rem;
	padding: 0.5rem 0.85rem;
	background: #eef4ec;
	border: 1px solid #bcd6b8;
	border-radius: 0.35rem;
	color: #2c5e2c;
	font-size: 0.88rem;
}
.es-pos__queue-status--error {
	background: #fceaea;
	border-color: #df8a8a;
	color: #8a1f1f;
}
.es-pos__mode-option--disabled {
	opacity: 0.45;
}

/* S166: Kiosk operator dashboard */
.es-kioskdash__intro {
	color: #5a5246;
	margin: 0 0 1rem;
}
.es-kioskdash__stats {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
}
.es-kioskdash__stat {
	flex: 1 1 200px;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
}
.es-kioskdash__stat-label {
	display: block;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #876c34;
}
.es-kioskdash__stat-value {
	display: block;
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 2.2rem;
	line-height: 1.1;
	margin: 0.2rem 0;
}
.es-kioskdash__stat-sub {
	color: #7a6f5d;
	font-size: 0.95rem;
}
.es-kioskdash__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}
.es-kioskdash__h2 {
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 1.4rem;
	margin: 1rem 0 0.6rem;
}
.es-kioskdash__empty {
	color: #7a6f5d;
}
.es-kioskdash__table-wrap {
	overflow-x: auto;
}
.es-kioskdash__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
}
.es-kioskdash__table th,
.es-kioskdash__table td {
	padding: 0.6rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid #ece9df;
	font-size: 0.95rem;
	white-space: nowrap;
}
.es-kioskdash__table th {
	background: #fafaf6;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #876c34;
}
.es-kioskdash__table tr:last-child td {
	border-bottom: 0;
}

/* S51: Staff Help in-site guide (/staff-help/) */
.es-staffhelp .es-pos__hero p {
	max-width: 60ch;
	margin: 0.5rem 0 0;
	color: #4a4536;
}
.es-staffhelp__toc {
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.es-staffhelp__toc strong {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #876c34;
	margin-bottom: 0.5rem;
}
.es-staffhelp__toc ol {
	margin: 0;
	padding-left: 1.25rem;
	columns: 2;
	column-gap: 2rem;
}
.es-staffhelp__toc li {
	margin-bottom: 0.3rem;
	break-inside: avoid;
}
.es-staffhelp__section {
	margin: 2rem 0;
	scroll-margin-top: 1rem;
}
.es-staffhelp__section h2 {
	font-size: 1.35rem;
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid #ece9df;
}
.es-staffhelp__section p,
.es-staffhelp__section li {
	max-width: 70ch;
	line-height: 1.55;
}
.es-staffhelp__section code {
	background: #f4f1e8;
	border: 1px solid #ece9df;
	border-radius: 0.25rem;
	padding: 0.05rem 0.35rem;
	font-size: 0.9em;
}
.es-staffhelp__callout {
	background: #fbf7e9;
	border-left: 4px solid #d6b85a;
	border-radius: 0 0.4rem 0.4rem 0;
	padding: 0.85rem 1rem;
	margin: 1rem 0;
}
.es-staffhelp__table {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	margin: 0.75rem 0;
}
.es-staffhelp__table th,
.es-staffhelp__table td {
	padding: 0.6rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid #ece9df;
	font-size: 0.95rem;
	vertical-align: top;
}
.es-staffhelp__table th {
	background: #fafaf6;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #876c34;
}
.es-staffhelp__table tr:last-child td {
	border-bottom: 0;
}
@media (max-width: 640px) {
	.es-staffhelp__toc ol {
		columns: 1;
	}
	/* Wrap table columns to the viewport instead of forcing the table
	   wider than the screen (375px overflow fix, S51 retest P4). fixed
	   layout makes columns honor the container width; long words/URLs
	   break instead of pushing the cell — and the table edge wide. */
	.es-staffhelp__table {
		table-layout: fixed;
		width: 100%;
	}
	.es-staffhelp__table th,
	.es-staffhelp__table td {
		font-size: 0.85rem;
		padding: 0.5rem 0.6rem;
		overflow-wrap: break-word;
		word-break: break-word;
	}
}

/* S166: POS refund screen */
.es-posrefund__summary {
	background: #fafaf6;
	border: 1px solid #ece9df;
	border-radius: 0.4rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}
.es-posrefund__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.2rem 0;
	font-size: 0.95rem;
}
.es-posrefund__note {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.8rem;
	background: #fdf3d4;
	border: 1px solid #d8b860;
	border-radius: 0.3rem;
	font-size: 0.85rem;
	color: #5a4604;
}
.es-posrefund__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.5rem;
}
.es-posrefund__table th,
.es-posrefund__table td {
	padding: 0.5rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid #ece9df;
	font-size: 0.95rem;
}
.es-posrefund__table th {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #876c34;
}
.es-posrefund__table input {
	width: 100px;
	padding: 0.4rem 0.5rem;
	border: 1px solid #c8b96a;
	border-radius: 0.3rem;
	font: inherit;
}
.es-postransfer__select {
	padding: 0.55rem 0.7rem;
	border: 1px solid #c8b96a;
	border-radius: 0.35rem;
	font: inherit;
	max-width: 360px;
	width: 100%;
}

/* S166: unified check-in hub */
.es-checkinhub__progress {
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}
.es-checkinhub__count {
	font-family: var(--for-font-display, Oswald), sans-serif;
	font-size: 1.8rem;
}
.es-checkinhub__count strong {
	color: #1e6033;
}
.es-checkinhub__bar {
	height: 0.7rem;
	background: #ece9df;
	border-radius: 0.4rem;
	overflow: hidden;
	margin: 0.6rem 0 0.4rem;
}
.es-checkinhub__bar-fill {
	height: 100%;
	width: 0;
	background: #1e6033;
	transition: width 0.4s ease;
}
.es-checkinhub__pct {
	margin: 0;
	color: #5a5246;
	font-size: 0.92rem;
}
.es-checkinhub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.85rem;
	margin-bottom: 1.25rem;
}
.es-checkinhub__tile {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	border: 1px solid #ece9df;
	border-radius: 0.5rem;
	text-decoration: none;
	color: inherit;
}
.es-checkinhub__tile:hover {
	border-color: #876c34;
	background: #fafaf6;
	color: inherit;
	text-decoration: none;
}
.es-checkinhub__tile--primary {
	background: #876c34;
	border-color: #876c34;
	color: #fff;
}
.es-checkinhub__tile--primary:hover {
	background: #6f5527;
	border-color: #6f5527;
	color: #fff;
	text-decoration: none;
}
.es-checkinhub__tile-title {
	font-weight: 600;
	font-size: 1.1rem;
}
.es-checkinhub__tile-sub {
	font-size: 0.85rem;
	opacity: 0.85;
}
.es-checkinhub__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Session 18: past-event banner on /tickets/ page */
.es-tickets__past-banner {
	margin: 0.6rem 0 0;
	padding: 0.6rem 1rem;
	background: #fdf3d4;
	border: 1px solid #d8b860;
	border-radius: 0.3rem;
	color: #5a4604;
	font-weight: 600;
	font-size: 0.95rem;
}

/* Session 18: event-meta block (date / venue / map / apply CTAs) */
.es-event-meta {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.es-event-meta__past-banner {
	padding: 0.6rem 1rem;
	background: #fdf3d4;
	border: 1px solid #d8b860;
	border-radius: 0.3rem;
	color: #5a4604;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
}
.es-event-meta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}
.es-event-meta__cell {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.es-event-meta__heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #7a6f5d;
	margin: 0;
}
.es-event-meta__when,
.es-event-meta__where {
	margin: 0.1rem 0 0;
	font-size: 1.1rem;
	line-height: 1.45;
	color: #1a1a1a;
}
.es-event-meta__map iframe {
	display: block;
	width: 100%;
}
.es-event-meta__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.es-event-meta__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.1rem;
	border: 1px solid #876c34;
	border-radius: 0.3rem;
	background: #fff;
	color: #5a4604;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
}
.es-event-meta__cta:hover {
	background: #f7f1e3;
	text-decoration: none;
}
.es-event-meta__cta--primary {
	background: #a93226;
	border-color: #a93226;
	color: #fff;
}
.es-event-meta__cta--primary:hover {
	background: #8b271e;
	color: #fff;
}
/* S37 -- "RSVP on Facebook" external CTA (opens new tab). */
.es-event-meta__cta--external {
	border-color: #1877f2;
	color: #1877f2;
}
.es-event-meta__cta--external:hover {
	background: #1877f2;
	color: #fff;
}
.es-event-meta--past .es-event-meta__map {
	opacity: 0.7;
}

/* Session 18: header auth-cta (sign-in / dashboard) */
.es-auth-cta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: 0.75rem;
}
.es-auth-cta__link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}
.es-auth-cta__link:hover {
	text-decoration: underline;
}
.es-auth-cta__link--cta {
	padding: 0.4rem 0.9rem;
	background: #a93226;
	color: #fff;
	border-radius: 0.3rem;
}
/* S64 — resume-checkout cart icon + count badge in the header. */
.es-auth-cta__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	line-height: 0;
}
.es-auth-cta__cart:hover {
	color: var(--wp--preset--color--gold, #ead42e);
}
.es-auth-cta__cart-badge {
	position: absolute;
	top: -0.45rem;
	right: -0.55rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: #a93226;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}
.es-auth-cta__link--cta:hover {
	background: #8b271e;
	text-decoration: none;
}
.es-auth-cta__link--muted {
	color: #7a6f5d;
	font-weight: 500;
	white-space: nowrap;
}

/* Session 19: header layout polish.
 *
 * The FSE header part puts the site title, primary nav, and auth/cart cluster
 * in one row (`flexWrap: nowrap`). At desktop widths the title was wrapping
 * to two lines, the nav was wrapping to two rows, and "Sign out" was breaking
 * onto its own line because the auth-cta column was being squeezed. The
 * Woo-injected customer-account icon also duplicates the auth-cta link.
 */
.wp-block-site-title {
	white-space: nowrap;
	flex-shrink: 0;
}
.wp-block-site-title a {
	font-size: var(--wp--preset--font-size--h4) !important;
	line-height: 1.1;
}
header .wp-block-navigation {
	flex-wrap: nowrap;
}
header .wp-block-navigation .wp-block-navigation__container {
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 1.25rem;
}
header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--body-sm);
}
.es-auth-cta {
	flex-shrink: 0;
	white-space: nowrap;
}
.es-auth-cta__link {
	white-space: nowrap;
}
/* Hide Woo's auto-injected customer-account icon — auth-cta already shows
 * the user's display name and a Sign out link. */
header .wp-block-woocommerce-customer-account {
	display: none;
}
/* Hide Woo's auto-injected mini-cart -- this site uses dedicated
 * conversion paths (/donate/, /sponsor/, /tickets/) and the side-drawer
 * mini-cart was non-functional in legacy port verification. */
header .wp-block-woocommerce-mini-cart,
.es-site-header .wp-block-woocommerce-mini-cart {
	display: none !important;
}

/* ===================================================================
 * Brand identity (caller spec 2026-05-05)
 *   Red    #cc0000   primary CTAs, accents
 *   Gold   #EAD42E   secondary accents, dividers, highlights
 *   Black  #000000   nav surface, body text, footer
 *   Light  #B0B5B5   muted body, dividers on dark
 *   Dark   #303030   secondary surface, captions
 * =================================================================== */

/* Site logo lockup in header. SVG is responsive; constrains to a sensible
 * max so it never overpowers the nav cluster on wide screens. */
.es-site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: 0 0 auto;
}
/* Legacy parity: dark navy sticky header, AR logo on left, white nav,
 * red Donate CTA. Matches friendsofryan.aftershockfam.org style. */
.es-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #1a1a2e !important;
}
/* Force inner clusters to stay inside the header's box. */
.es-site-header > .wp-block-group,
.es-site-header .wp-block-group.is-content-justification-right {
	max-width: 100%;
	min-width: 0;
}
.es-site-header .wp-block-group {
	gap: 0.5rem;
}
/* AR badge logo: square, transparent-bg PNG with white-card framing
 * built into the design — no extra padding needed. */
.es-site-logo img {
	display: block;
	height: 56px;
	width: 56px;
	max-width: 100%;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
@media (max-width: 1024px) {
	.es-site-logo img {
		height: 48px;
		width: 48px;
	}
}
@media (max-width: 640px) {
	.es-site-logo img {
		height: 44px;
		width: 44px;
	}
}

/* Hide secondary header items on tablet/mobile, the hamburger nav covers
 * everything else. The DONATE button stays visible since it's the primary
 * conversion CTA. */
@media (max-width: 1024px) {
	.es-site-header .es-auth-cta,
	.es-site-header .wp-block-woocommerce-mini-cart {
		display: none;
	}
	/* S64 — but keep the resume-checkout CART icon visible on mobile (it's a
	   conversion reminder, like DONATE). Un-hide the auth-cta container ONLY when
	   it contains the cart link, and hide the name/sign-out links so just the
	   cart shows next to DONATE. */
	.es-site-header .es-auth-cta:has(.es-auth-cta__cart) {
		display: flex;
	}
	.es-site-header .es-auth-cta:has(.es-auth-cta__cart) .es-auth-cta__link {
		display: none;
	}
	.es-header-cta {
		padding: 0.4rem 0.7rem;
		font-size: 0.8rem;
	}
	/* Collapse the whole primary nav into the hamburger overlay at <=1024px.
	   The FSE nav's own responsive breakpoint is ~600px, so between 600-1024
	   the full inline menu (11+ items + Donate + auth) overflowed and overlapped
	   the right cluster (operator report). Force the hamburger here; the inline
	   list shows only inside the opened overlay (.is-menu-open). Higher
	   specificity than WP's `.wp-block-navigation__responsive-container-open`
	   rule, so it wins over the min-width:600 display:none. */
	.es-site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.es-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: none !important;
	}
}

/* S153 C.2: at narrow-desktop widths (1025-1366px) the auth-cta display
 * name + Sign-out + Donate + primary nav can overflow when the
 * display_name is long. Cap the name link at 9rem with ellipsis. */
@media (min-width: 1025px) and (max-width: 1366px) {
	.es-site-header
		.es-auth-cta__link:not(.es-auth-cta__link--muted):not(
			.es-auth-cta__link--cta
		) {
		max-width: 9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.es-site-header .wp-block-navigation .wp-block-navigation-item__content {
		padding: 0.45rem 0.4rem;
	}
}
@media (max-width: 480px) {
	.es-header-cta {
		padding: 0.35rem 0.6rem;
		font-size: 0.75rem;
		margin: 0 0.25rem;
	}
}
.es-header-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	background: var(--color-primary, #cc0000);
	color: #fff;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
	margin: 0 0.4rem;
}
.es-header-cta:hover {
	background: var(--color-primary-hover, #c80000);
	color: #fff;
	text-decoration: none;
}

/* Header navigation styling -- collegiate sans, uppercase, gold underline on
 * hover/current matches the brand mark's gold outline. */
/* Header right cluster must stay inside the viewport at all widths.
 * The nav + auth + cart was overflowing at 1280px until we tightened
 * paddings and made it shrink-able. */
.es-site-header .wp-block-navigation {
	flex: 1 1 auto;
	min-width: 0;
}
.es-site-header .wp-block-navigation .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0.1rem;
}
.es-site-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 0.45rem 0.55rem;
	font-family: var(--font-body, "Roboto"), sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	color: #ffffff;
	white-space: nowrap;
}
.es-site-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 3px;
	background: var(--color-gold, #ead42e);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 140ms ease;
}
.es-site-header
	.wp-block-navigation
	.wp-block-navigation-item__content:hover::after,
.es-site-header
	.wp-block-navigation
	.current-menu-item
	.wp-block-navigation-item__content::after {
	transform: scaleX(1);
}
.es-site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--color-gold, #ead42e);
}
/* Auth-cta in header: white text on dark navy. Full opacity (not 0.85) so the
 * --cta "Sign in" button, which sits on brand-red #cc0000, clears WCAG AA
 * (0.85 white on #cc0000 = 4.45:1, just under 4.5:1; full white = 5.89:1).
 * White-on-navy for the plain links stays on-brand and readable. */
.es-site-header .es-auth-cta a {
	color: #ffffff;
}
.es-site-header .es-auth-cta a:hover {
	color: #ffffff;
}
/* Single Sign In button via es-header-cta + auth-cta link is one too many.
 * Render the auth-cta link as a plain text link (no button styling), so the
 * row reads: nav .. cart .. DONATE-cta .. SignIn-link */
.es-site-header .es-auth-cta__link--cta {
	background: transparent;
	color: #ffffff;
	padding: 0.4rem 0.5rem;
	border: 0;
	font-weight: 500;
	font-size: 0.9rem;
}
.es-site-header .es-auth-cta__link--cta:hover {
	background: transparent;
	color: var(--color-gold, #ead42e);
}

/* Mobile overlay nav -- dark background to stay on-brand and stay readable.
 * WordPress core injects an inline rule
 *   .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open
 * (specificity 0,3,0, white background). We add `.es-site-header` AND the
 * `.wp-block-navigation` middle class to reach 0,4,0 and we also append
 * `!important` because the inline <style> tag is emitted after the theme
 * stylesheet on every page render. */
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #1a1a2e !important;
	color: #ffffff !important;
	padding-top: 4rem;
}
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	a,
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: #ffffff !important;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	a:hover,
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	color: var(--color-gold, #ead42e) !important;
}
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close,
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close
	svg {
	color: #ffffff !important;
	fill: #ffffff !important;
}
.es-site-header .wp-block-navigation__responsive-container-open svg,
.es-site-header .wp-block-navigation__responsive-container-open {
	color: #ffffff;
	fill: #ffffff;
}

/* Wrapper itself must not stretch past viewport. */
html,
body {
	overflow-x: clip;
}

/* Sign-in / Sign-out CTA: pull into brand red instead of mustard */
.es-site-header .es-auth-cta__link--cta,
.es-auth-cta__link--cta {
	background: var(--color-primary, #cc0000);
	color: #ffffff;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.es-site-header .es-auth-cta__link--cta:hover,
.es-auth-cta__link--cta:hover {
	background: var(--color-primary-hover, #c80000);
}

/* Page hero -- branded section banner used by /about/, /board/, /contact/,
 * and other content pages. Black background, gold accent rule, large
 * display heading. Use with: <section class="es-page-hero">. */
.es-page-hero {
	background: var(--color-black, #000000);
	color: #ffffff;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
	border-bottom: 4px solid var(--color-gold, #ead42e);
	position: relative;
	overflow: hidden;
}
.es-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			ellipse at top right,
			rgba(255, 0, 0, 0.15),
			transparent 60%
		),
		radial-gradient(
			ellipse at bottom left,
			rgba(234, 212, 46, 0.1),
			transparent 60%
		);
	pointer-events: none;
}
.es-page-hero__inner {
	position: relative;
	max-width: var(--content-max, 1200px);
	margin: 0 auto;
	text-align: center;
}
.es-page-hero__eyebrow {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.3rem 0.7rem;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-gold, #ead42e);
	border: 1.5px solid var(--color-gold, #ead42e);
	border-radius: 2px;
}
.es-page-hero__title {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0 0 1rem;
	color: #ffffff;
}
.es-page-hero__title em,
.es-page-hero__title .accent {
	color: var(--color-primary, #cc0000);
	font-style: normal;
}
.es-page-hero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	max-width: 56ch;
	margin: 0;
	color: var(--color-light-gray, #b0b5b5);
	line-height: 1.55;
}

/* Photo hero used by page-with-hero.php for legacy-imported pages
 * (past-event landings, spirit-of-ryan, team, merch, galleries, etc).
 * Renders the page's _hero_image meta as a full-bleed banner with a
 * dark scrim + page title centered. */
.es-page-photo-hero {
	position: relative;
	min-height: clamp(220px, 32vw, 380px);
	background-color: #1a1a2e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom: 4px solid var(--color-gold, #ead42e);
}
.es-page-photo-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.6) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
}
.es-page-photo-hero__inner {
	text-align: center;
	padding: 2rem 1.5rem;
	max-width: 1100px;
	width: 100%;
}
.es-page-photo-hero__inner h1 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.5rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #ffffff;
	margin: 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Content body for branded pages -- reads like a magazine column,
 * generous line-height, branded h2 with red bottom-rule. */
.es-page-body {
	max-width: var(--content-max, 1200px);
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 3rem);
}
.es-page-body h2 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 2rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--color-primary, #cc0000);
	display: inline-block;
}
.es-page-body p {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-dark-gray, #303030);
}
.es-page-body a {
	color: var(--color-primary, #cc0000);
	font-weight: 500;
}

/* Branded card grid for board / about modules */
.es-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.es-brand-card {
	background: #ffffff;
	border: 1px solid var(--color-light-gray, #b0b5b5);
	border-top: 4px solid var(--color-primary, #cc0000);
	border-radius: 6px;
	padding: 1.5rem;
}
.es-brand-card h3 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
	color: var(--color-black, #000000);
}
.es-brand-card p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-dark-gray, #303030);
	line-height: 1.5;
}

/* Footer brand polish -- replace plain h3 column titles with gold dividers */
footer.wp-block-template-part h2,
footer.wp-block-template-part h3 {
	position: relative;
	padding-bottom: 0.5rem;
	margin-bottom: 0.75rem;
}
footer.wp-block-template-part h2::after,
footer.wp-block-template-part h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--color-gold, #ead42e);
}

/* ===================================================================
 * Front-page (legacy port from friendsofryan.aftershockfam.org)
 * f-prefixed classes -- keeps the legacy storytelling layout but applies
 * the new brand tokens (red #cc0000, gold #EAD42E, navy header).
 * Mobile-first, breakpoints at 640 / 1024.
 * =================================================================== */
.fcontainer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
.fcontainer--narrow {
	max-width: 760px;
}

/* Hero */
.fhero--home {
	position: relative;
	padding: 4rem 1.5rem 3rem;
	text-align: center;
	color: #fff;
	background-color: #1a1a2e;
	background-image:
		linear-gradient(135deg, rgba(26, 26, 46, 0.85), rgba(0, 0, 0, 0.7)),
		var(--fhero-bg, none);
	background-size: cover;
	background-position: center;
}
@media (min-width: 1024px) {
	.fhero--home {
		padding: 6rem 1.5rem 4rem;
		background-image:
			linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(0, 0, 0, 0.65)),
			var(--fhero-bg-desktop, var(--fhero-bg, none));
	}
}
/*
 * The Events archive (archive-event_listing.html) renders the hero inside a
 * constrained block-group <main>, whose layout caps direct children to
 * content-width and centers them -- cropping the hero image and squeezing it
 * into a narrow box. Force the hero full-bleed like the homepage. This beats
 * WordPress's constrained-layout rule, which is authored with :where() (zero
 * specificity). Scoped to .fhero so only the hero breaks out, not the page.
 */
.is-layout-constrained > .fhero {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.fhero__content {
	max-width: 780px;
	margin: 0 auto;
	position: relative;
}
.fhero__title {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: 1.05;
	margin: 0.5rem 0 1rem;
	color: #fff;
}
.fhero__subtitle {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.55;
	max-width: 600px;
	margin: 0 auto 2rem;
	color: rgba(255, 255, 255, 0.85);
}
.overline {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-primary, #cc0000);
}
.overline--on-dark {
	color: var(--color-gold, #ead42e);
}

/* Stats bar */
.stats-bar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	max-width: 900px;
	margin: 3rem auto 0;
	padding: 1.5rem;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
}
@media (min-width: 640px) {
	.stats-bar {
		grid-template-columns: repeat(4, 1fr);
	}
}
.stat {
	text-align: center;
}
.stat__number {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--color-gold, #ead42e);
	line-height: 1;
}
.stat__label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 0.25rem;
}

/* Sections */
.fsection {
	padding: 4rem 0;
}
@media (min-width: 1024px) {
	.fsection {
		padding: 5rem 0;
	}
}
.fsection--surface {
	background: #f8f9fc;
}
.fsection--dark {
	background: #1a1a2e;
	color: #fff;
}
.fsection--dark h2 {
	color: #fff;
}
.fsection--dark p {
	color: rgba(255, 255, 255, 0.8);
}
.fsection--cta {
	text-align: center;
}
.fsection__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem;
}
.fsection__header h2 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
	margin: 0.5rem 0 1rem;
}
.fsection__header p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.65);
}
.fsection--dark .fsection__header p {
	color: rgba(255, 255, 255, 0.8);
}
.fsection__cta {
	text-align: center;
	margin-top: 2.5rem;
}

/*
 * Report / KPI summary cards (.es-rep__card*). Used by admin-dashboard
 * tab-reports.php AND financial-dashboard/_kpi-cards.php. These rules
 * previously lived in an inline <style> inside tab-reports.php, so the
 * financial dashboard's KPI bar (which reuses only the markup) rendered the
 * label/value/sub spans inline + run-together ("Total sponsorships$5,000.003
 * records"). Moved here so every surface that uses the markup is styled.
 */
.es-rep__cards { margin-bottom: 1.5rem; }
.es-rep__card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.es-rep__card--gold { border-left: 3px solid #f59e0b; }
.es-rep__card--green { border-left: 3px solid #10b981; }
.es-rep__card-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.es-rep__card-value { font-size: 1.55rem; font-weight: 700; color: #111827; line-height: 1.2; }
.es-rep__card-sub { font-size: 0.78rem; color: #6b7280; } /* S28 a11y: #9ca3af on white was 2.5:1; #6b7280 is 4.85:1 (AA) */

/* Cards */
.fcard-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.fcard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.fcard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.fcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition:
		transform 160ms ease,
		box-shadow 160ms ease;
}
.fcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	text-decoration: none;
}
.fcard__image {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #ece9df;
	overflow: hidden;
}
.fcard__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fcard__image-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		var(--color-primary, #cc0000),
		var(--color-dark-gray, #303030)
	);
}
.fcard__date-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--color-primary, #cc0000);
	color: #fff;
	border-radius: 4px;
	padding: 0.4rem 0.7rem;
	text-align: center;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	line-height: 1;
}
.fcard__date-badge div:first-child {
	font-size: 1.4rem;
}
.fcard__date-badge div:last-child {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	margin-top: 2px;
}
.fcard__body {
	padding: 1.25rem 1.5rem 1.5rem;
	flex: 1;
}
.fcard__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary, #cc0000);
	background: var(--color-primary-light, #fff5f5);
	padding: 0.25rem 0.6rem;
	border-radius: 99px;
	margin-bottom: 0.5rem;
}
.fcard__title {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: var(--color-black, #000);
	line-height: 1.25;
}
.fcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.85rem;
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 0.6rem;
}
.fcard__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.fcard__excerpt {
	margin: 0;
	font-size: 0.95rem;
	color: rgba(0, 0, 0, 0.7);
	line-height: 1.5;
}
.fcard--stat {
	text-align: center;
	padding: 2.5rem 1.5rem;
}
.fcard--stat .fcard__icon {
	color: var(--color-primary, #cc0000);
	margin-bottom: 1rem;
}
.fcard--stat h3 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: 1.4rem;
	margin: 0.25rem 0 0.75rem;
}
.fcard--stat p {
	margin: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* Buttons */
.fbtn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}
.fbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border-radius: 4px;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 140ms ease;
	white-space: nowrap;
}
.fbtn--lg {
	padding: 0.95rem 1.8rem;
	font-size: 1rem;
}
.fbtn--primary {
	background: var(--color-primary, #cc0000);
	color: #fff;
	border-color: var(--color-primary, #cc0000);
}
.fbtn--primary:hover {
	background: var(--color-primary-hover, #c80000);
	border-color: var(--color-primary-hover, #c80000);
	color: #fff;
	text-decoration: none;
}
.fbtn--white {
	background: #fff;
	color: var(--color-black, #000);
	border-color: #fff;
}
.fbtn--white:hover {
	background: var(--color-gold, #ead42e);
	border-color: var(--color-gold, #ead42e);
	color: var(--color-black, #000);
	text-decoration: none;
}
.fbtn--secondary {
	background: transparent;
	color: var(--color-primary, #cc0000);
	border-color: var(--color-primary, #cc0000);
}
.fbtn--secondary:hover {
	background: var(--color-primary, #cc0000);
	color: #fff;
	text-decoration: none;
}
.fbtn--donate {
	background: var(--color-primary, #cc0000);
	color: #fff;
	border-color: var(--color-primary, #cc0000);
}
.fbtn--donate:hover {
	background: var(--color-primary-hover, #c80000);
	border-color: var(--color-primary-hover, #c80000);
	color: #fff;
	text-decoration: none;
}
.fbtn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}
.fbtn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

/* Footer logo lockup */
.es-footer-logo {
	display: block;
	margin-bottom: 1rem;
}
.es-footer-logo img,
.es-footer-logo__svg {
	display: block;
	width: 120px;
	height: 120px;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Legacy content-page styles (used by /giving/, /trust/ Gutenberg pages
 * imported from friendsofryan.aftershockfam.org). These classes are baked
 * into the imported HTML; we re-style them on-brand instead of rewriting
 * the body content.
 * ------------------------------------------------------------------------ */
.content-hero {
	background: var(--color-black, #000);
	color: #fff;
	padding: 4rem 1.5rem 3rem;
	text-align: center;
	border-bottom: 4px solid var(--color-gold, #ead42e);
}
.content-hero h1 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	margin: 0 0 0.75rem;
}
.content-hero p {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.85);
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.6;
}

.content-section {
	padding: 3.5rem 1.5rem;
	background: #ffffff;
}
.content-section.bg-dark {
	background: #1a1a2e;
	color: #fff;
}
.content-section.bg-dark h2,
.content-section.bg-dark p,
.content-section.bg-dark .stat-number,
.content-section.bg-dark .stat-label {
	color: #fff;
}
.content-section.text-center {
	text-align: center;
}
.content-section-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.content-section h2 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 1rem;
	color: var(--color-black, #000);
}
.content-section .section-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--color-text-secondary, #555);
	max-width: 820px;
	margin: 0 auto 2rem;
}
.content-section.text-center .section-lead {
	margin-left: auto;
	margin-right: auto;
}

.content-section .card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.content-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition:
		transform 140ms ease,
		box-shadow 140ms ease;
}
.content-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.content-card .card-icon {
	font-size: 2.5rem;
	margin-bottom: 0.75rem;
	line-height: 1;
}
.content-card h3 {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
	color: var(--color-black, #000);
}
.content-card p {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--color-text-secondary, #555);
	margin: 0;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1.5rem;
	max-width: 900px;
	margin: 2rem auto;
}
.stat-block {
	text-align: center;
	padding: 1rem;
}
.stat-number {
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--color-gold, #ead42e);
	line-height: 1.1;
}
.stat-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 0.25rem;
}
.content-section:not(.bg-dark) .stat-label {
	color: var(--color-text-secondary, #555);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.5rem;
}
.btn-primary,
.btn-outline {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 0.4rem;
	font-family: var(--font-display, "Oswald"), sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 2px solid transparent;
	transition:
		background-color 140ms ease,
		color 140ms ease,
		border-color 140ms ease;
}
.btn-primary,
.es-page-body a.btn-primary,
.content-section a.btn-primary {
	background: var(--color-primary, #cc0000);
	color: #fff;
	border-color: var(--color-primary, #cc0000);
}
.btn-primary:hover,
.es-page-body a.btn-primary:hover,
.content-section a.btn-primary:hover {
	background: var(--color-primary-hover, #c80000);
	border-color: var(--color-primary-hover, #c80000);
	color: #fff;
	text-decoration: none;
}
.btn-outline,
.es-page-body a.btn-outline,
.content-section a.btn-outline {
	background: transparent;
	color: var(--color-primary, #cc0000);
	border-color: var(--color-primary, #cc0000);
}
.btn-outline:hover,
.es-page-body a.btn-outline:hover,
.content-section a.btn-outline:hover {
	background: var(--color-primary, #cc0000);
	color: #fff;
}
/* The .content-section.bg-dark variant inverts the outline button to read
 * on dark navy backgrounds. */
.content-section.bg-dark a.btn-outline {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}
.content-section.bg-dark a.btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

/* ============================================================
 * Header navigation submenu — fix the empty-white-subgrid bug
 * (Session 9 port). Default WP nav submenu inherits the header
 * dark text on a white background, so it appeared blank/broken.
 * ============================================================ */

.es-site-header
	.wp-block-navigation
	.wp-block-navigation-submenu
	.wp-block-navigation__submenu-container,
.es-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #1a1a2e !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	min-width: 220px;
	padding: 6px 0;
	margin-top: 4px;
}

.es-site-header
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content,
.es-site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: #ffffff !important;
	padding: 10px 18px !important;
	display: block;
	font-size: 0.92rem;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
}

.es-site-header
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover,
.es-site-header
	.wp-block-navigation
	.wp-block-navigation__submenu-container
	a:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: var(--color-gold, #ead42e) !important;
}

/* Submenu indicator arrow alignment */
.es-site-header .wp-block-navigation__submenu-icon {
	fill: currentColor;
	margin-left: 4px;
}

/* ============================================================
 * Footer (legacy 4-col port) — sitewide so the footer renders
 * correctly on every page, not just the 6 ported templates.
 * Session 9 (Date 2026-05-05).
 * ============================================================ */

.es-footer {
	background: var(--color-dark-bg, #1a1a2e);
	color: var(--color-dark-text, #e8e8f0);
	padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px) 0;
}
.es-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
	gap: clamp(24px, 4vw, 60px);
	padding-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 900px) {
	.es-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.es-footer__inner {
		grid-template-columns: 1fr;
	}
}
.es-footer h4 {
	color: #fff;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 var(--space-3, 12px);
	font-weight: 700;
}
.es-footer p,
.es-footer li,
.es-footer a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.92rem;
	line-height: 1.55;
}
.es-footer a {
	text-decoration: none;
}
.es-footer a:hover {
	color: #fff;
}
.es-footer__brand {
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--space-3, 12px);
}
.es-footer__brand-mission {
	margin: 0 0 var(--space-3, 12px);
}
.es-footer__contact-line {
	display: block;
	margin-bottom: 4px;
}
.es-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.es-footer__social {
	display: flex;
	gap: var(--space-3, 12px);
}
.es-footer__social a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #fff;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.es-footer__social a:hover {
	background: var(--color-primary, #cc0000);
	border-color: var(--color-primary, #cc0000);
}
.es-footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
#footerNewsletterForm {
	display: flex;
	gap: var(--space-2, 8px);
	flex-wrap: wrap;
}
#footerNewsletterEmail {
	flex: 1 1 180px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border-radius: 6px;
	font-size: 0.9rem;
}
#footerNewsletterEmail::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
#footerNewsletterEmail:focus {
	outline: none;
	border-color: var(--color-primary, #cc0000);
}
#footerNewsletterForm button {
	padding: 10px 20px;
	background: var(--color-primary, #cc0000);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.9rem;
}
#footerNewsletterForm button:hover {
	background: var(--color-primary-hover, #c80000);
}
.es-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: var(--space-5, 20px) 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3, 12px);
	font-size: 0.85rem;
	max-width: 1200px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.7);
}
.es-footer__bottom a {
	color: rgba(255, 255, 255, 0.7);
}
.es-footer__bottom a:hover {
	color: #fff;
}
.es-footer__bottom-links {
	display: flex;
	gap: var(--space-4, 16px);
	flex-wrap: wrap;
}

/* S26 Phase B-1 — inline profile editor (dashboard/tab-profiles.php) */
.es-profile {
	display: flex;
	flex-direction: column;
	gap: var(--space-5, 20px);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md, 8px);
	padding: var(--space-5, 20px);
}
.es-profile__alert {
	padding: var(--space-3, 12px) var(--space-4, 16px);
	border-radius: var(--radius-sm, 6px);
	font-size: 0.9rem;
}
.es-profile__alert--success {
	background: #e6f6ec;
	color: #0f5132;
	border: 1px solid #b6e2c2;
}
.es-profile__alert--error {
	background: #fde7e9;
	color: #842029;
	border: 1px solid #f1aeb5;
}
.es-profile__fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}
.es-profile__fieldset legend {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-text, #1a1a1a);
	padding-bottom: var(--space-2, 8px);
	border-bottom: 1px solid var(--color-border, #e5e5e5);
	margin-bottom: var(--space-3, 12px);
	width: 100%;
}
.es-profile__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4, 16px);
}
.es-profile__row--readonly input {
	background: #f7f7f7;
	color: #555;
}
@media (max-width: 720px) {
	.es-profile__row {
		grid-template-columns: 1fr;
	}
}
.es-profile__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1, 4px);
}
.es-profile__field--narrow {
	max-width: 8rem;
}
.es-profile__field label {
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--color-text, #1a1a1a);
}
.es-profile__field input {
	padding: var(--space-2, 8px) var(--space-3, 12px);
	border: 1px solid var(--color-border, #d4d4d4);
	border-radius: var(--radius-sm, 6px);
	font-size: 1rem;
	background: #fff;
}
.es-profile__field input:focus {
	outline: 2px solid var(--color-accent, #c8102e);
	outline-offset: 2px;
}
.es-profile__field input[readonly] {
	background: #f7f7f7;
	color: #555;
	cursor: not-allowed;
}
.es-profile__hint {
	font-size: 0.8rem;
	color: var(--color-text-muted, #666);
	margin: 0;
}
.es-profile__checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	cursor: pointer;
}
.es-profile__checkbox input {
	width: 1.1rem;
	height: 1.1rem;
}
.es-profile__actions {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--space-3, 12px);
	border-top: 1px solid var(--color-border, #e5e5e5);
}

/* S26 Phase B-3 — overview tab primary CTA card */
.es-dash__primary-cta {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-4, 16px);
	padding: var(--space-5, 20px);
	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md, 8px);
	margin-bottom: var(--space-5, 20px);
}
.es-dash__primary-cta-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent, #c8102e);
	color: #fff;
	border-radius: var(--radius-md, 8px);
	flex-shrink: 0;
}
.es-dash__primary-cta-body h2 {
	margin: 0 0 4px 0;
	font-size: 1.1rem;
}
.es-dash__primary-cta-body p {
	margin: 0;
	color: var(--color-text-muted, #666);
	font-size: 0.9rem;
}
@media (max-width: 600px) {
	.es-dash__primary-cta {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.es-dash__primary-cta-icon {
		margin: 0 auto;
	}
}

/* S26 Phase B-3 — overview recent orders mini-list */
.es-dash__recent-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
}
.es-dash__recent-order + .es-dash__recent-order {
	border-top: 1px solid var(--color-border, #e5e5e5);
}
.es-dash__recent-order a {
	display: grid;
	grid-template-columns: 5rem 1fr 1fr auto;
	gap: var(--space-3, 12px);
	align-items: center;
	padding: var(--space-3, 12px) var(--space-4, 16px);
	color: inherit;
	text-decoration: none;
	background: #fff;
	transition: background 0.15s;
}
.es-dash__recent-order a:hover {
	background: #f7f7f7;
}
.es-dash__recent-order-id {
	font-weight: 600;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.875rem;
}
.es-dash__recent-order-date {
	color: var(--color-text-muted, #666);
	font-size: 0.85rem;
}
.es-dash__recent-order-status {
	font-size: 0.85rem;
	text-transform: capitalize;
}
.es-dash__recent-order-total {
	font-weight: 600;
	text-align: right;
}
@media (max-width: 600px) {
	.es-dash__recent-order a {
		grid-template-columns: 1fr 1fr;
		row-gap: 4px;
	}
}

/* S26 Phase B-3 — section header actions (right-side button cluster) */
.es-dash__section-actions {
	display: inline-flex;
	gap: var(--space-2, 8px);
	align-items: center;
}

/* S26 Phase B-2 — user dashboard Settings tab */
.es-settings__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4, 16px);
}
.es-settings__card {
	background: #fff;
	border: 1px solid var(--color-border, #e5e5e5);
	border-radius: var(--radius-md, 8px);
	padding: var(--space-4, 16px);
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}
.es-settings__card--danger {
	border-color: #f1aeb5;
}
.es-settings__card-head {
	display: flex;
	align-items: center;
	gap: var(--space-2, 8px);
	flex-wrap: wrap;
}
.es-settings__card-head h3 {
	margin: 0;
	font-size: 1rem;
	flex: 1;
}
.es-settings__card-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	border-radius: var(--radius-sm, 6px);
	color: var(--color-text, #1a1a1a);
}
.es-settings__card--danger .es-settings__card-icon {
	background: #fde7e9;
	color: #842029;
}
.es-settings__card p {
	margin: 0;
	color: var(--color-text-muted, #555);
	font-size: 0.9rem;
	line-height: 1.5;
}
.es-settings__danger-details {
	border: 1px solid #f1aeb5;
	border-radius: var(--radius-sm, 6px);
	padding: var(--space-3, 12px);
}
.es-settings__danger-details summary {
	cursor: pointer;
	font-weight: 600;
	color: #842029;
}
.es-settings__danger-form {
	margin-top: var(--space-3, 12px);
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}
.es-settings__danger-form textarea,
.es-settings__danger-form input[type="text"] {
	padding: var(--space-2, 8px) var(--space-3, 12px);
	border: 1px solid var(--color-border, #d4d4d4);
	border-radius: var(--radius-sm, 6px);
	font-size: 0.95rem;
	width: 100%;
	font-family: inherit;
}
.es-settings__danger-form textarea {
	resize: vertical;
	min-height: 80px;
}
.es-dash__btn--danger {
	background: #c8102e;
	color: #fff;
	border-color: #c8102e;
}
.es-dash__btn--danger:hover {
	background: #a30c25;
	border-color: #a30c25;
}

/* ===== S43 follow-up: shared modal + bulk-select for admin-dashboard tables ===== */

.es-modal {
	border: none;
	border-radius: 0.5rem;
	padding: 0;
	width: min(90vw, 32rem);
	max-height: 85vh;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.es-modal::backdrop {
	background: rgba(20, 20, 20, 0.45);
}
.es-modal__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: #fafafa;
}
.es-modal__hdr h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}
.es-modal__close {
	background: transparent;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: #555;
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
}
.es-modal__close:hover {
	background: rgba(0, 0, 0, 0.08);
	color: #111;
}
.es-modal__body {
	padding: 1rem 1.1rem;
	overflow-y: auto;
}
.es-modal__body label {
	display: grid;
	gap: 0.25rem;
	margin-bottom: 0.8rem;
	font-size: 0.92rem;
}
.es-modal__body label > span:first-child {
	font-weight: 600;
}
.es-modal__body input[type="text"],
.es-modal__body input[type="email"],
.es-modal__body input[type="number"],
.es-modal__body select,
.es-modal__body textarea {
	width: 100%;
	padding: 0.45rem 0.55rem;
	border: 1px solid #c8c8c8;
	border-radius: 0.3rem;
	font: inherit;
	background: #fff;
}
.es-modal__body input:focus,
.es-modal__body select:focus,
.es-modal__body textarea:focus {
	outline: 2px solid #1c4e80;
	outline-offset: 1px;
}
.es-modal__markers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 0.4rem;
	margin-top: 0.3rem;
}
.es-modal__markers label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
	font-size: 0.9rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid #ddd;
	border-radius: 0.3rem;
	cursor: pointer;
	background: #fff;
}
.es-modal__markers label:hover {
	background: #f5f5f5;
}
.es-modal__markers input[type="checkbox"] {
	margin: 0;
}
.es-modal__ftr {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.8rem 1.1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	background: #fafafa;
}

/* Bulk-select toolbar + row checkboxes */
.es-admin__bulk-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.7rem;
	background: #f7f7f5;
	border: 1px solid #e2e0d8;
	border-radius: 0.35rem;
	flex-wrap: wrap;
}
.es-admin__bulk-bar[hidden] {
	display: none;
}
.es-admin__bulk-bar select {
	padding: 0.35rem 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid #c8c8c8;
}
.es-admin__bulk-bar .es-admin__bulk-count {
	font-size: 0.85rem;
	color: #5a5a5a;
}
.es-admin__cron-table th input[type="checkbox"],
.es-admin__cron-table td input[type="checkbox"].es-admin__row-check {
	margin: 0;
	cursor: pointer;
}
.es-admin__cron-table tbody tr:has(input.es-admin__row-check:checked) {
	background: #eef4fb;
}

/* Phase A5 -- print baseline. Hides chrome, forces white background, keeps body content readable in print preview. Page-level templates (page-my-ticket, page-donate-qr) supply additional rules. */
@media print {
	.es-site-header,
	.es-site-footer,
	footer.wp-block-template-part,
	header.wp-block-template-part,
	.es-tab-nav,
	.es-admin__tabs,
	.es-dash__tabs,
	.es-skip-link,
	nav,
	.es-header-cta,
	.wp-block-navigation {
		display: none \!important;
	}
	body {
		background: #fff \!important;
		color: #000 \!important;
	}
	a {
		color: #000 \!important;
		text-decoration: underline;
	}
	main,
	#main-content {
		display: block;
		max-width: none;
		margin: 0;
		padding: 0;
	}
}