/*
 * HertsPartners Partner Hub — public styles.
 * Palette matches the live site: black/white foundation, purple accents.
 * Mobile-first; every interactive element has a visible focus state and
 * respects prefers-reduced-motion.
 *
 * Token adoption (Milestone 4, wider-rebuild platform repo): the values
 * below that are an exact, provable match for the shared platform design
 * tokens (`hertspartners-platform` repo, docs/DESIGN_SYSTEM.md) now
 * reference them via var(), each with its own original literal kept as
 * the fallback. On the real site the platform child theme's tokens.css
 * loads on every front-end page (including every page carrying one of
 * this plugin's shortcodes — see Core/Assets.php), so these resolve to
 * the shared source of truth there; if this plugin ever runs under a
 * different theme, the fallback reproduces today's exact values, so
 * nothing here depends on the platform theme being active. Values with
 * no exact platform equivalent (the grey scale, --hp-black, --hp-shadow)
 * are deliberately left as their own literals — not proven identical to
 * anything in the shared system, so not merged (see COMPONENT_LIBRARY.md,
 * "Partner Hub: tokens adopted, components not migrated").
 */

:root {
	--hp-purple-700: var(--hp-color-primary-700, #6d28d9);
	--hp-purple-600: var(--hp-color-primary-500, #7c3aed);
	--hp-purple-500: var(--hp-color-primary-400, #8b5cf6);
	--hp-purple-300: var(--hp-color-primary-200, #c4b5fd);
	--hp-black: #0b0b0f;
	--hp-white: var(--hp-color-white, #ffffff);
	--hp-gray-50: #f9fafb;
	--hp-gray-100: #f3f4f6;
	/* Measured at 4.49:1 on the real rendered account and login pages -- just
	   under the 4.5 threshold, across all 43 muted-text uses. Darkened one
	   step; the role and every consumer are unchanged. */
	--hp-gray-500: #616874;
	--hp-gray-700: #374151;
	--hp-radius: var(--hp-radius-md, 14px);
	--hp-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

	/*
	 * Dark mode (L01.1, 2026-09-12). The block below was the actual cause of
	 * the hub's dark-mode failures, not the individual components: every hub
	 * surface and text colour resolves through these six tokens, and they had
	 * no dark values, so the platform theme recoloured inherited text to
	 * near-white while the hub kept painting its cards #fff -- near-white text
	 * on white cards across /partner-application/, /partner-login/ and the
	 * advertise page. Redefining the tokens once fixes every hub surface,
	 * instead of adding another per-component override.
	 *
	 * Two roles had to be separated first, because they were sharing a token
	 * with a role that must NOT flip:
	 *   --hp-on-accent  text sitting on a purple/dark panel; always white.
	 *   --hp-panel-dark the two deliberately dark panels (the Facebook CTA
	 *                   and the stat card), which stay dark in both themes.
	 * Every other use of --hp-white/--hp-black is a genuine light-surface or
	 * dark-ink role and is safe to flip.
	 */
	--hp-on-accent: #ffffff;
	--hp-panel-dark: #0b0b0f;
}

html.hp-experience-dark {
	--hp-black: #f5effb;
	/* The secondary button is transparent-backed, so its brand-purple label
	   sits directly on the dark canvas (3.26:1 measured on /my-cvs/). It has
	   its own light value here rather than flipping --hp-purple-600, which is
	   a button and badge BACKGROUND elsewhere. */
	--hp-purple-secondary-ink: #d6b4ff;
	--hp-white: #21162c;
	--hp-gray-50: #191120;
	--hp-gray-100: #3a2b49;
	--hp-gray-500: #c3b6d0;
	--hp-gray-700: #e8dbf4;
	/* purple-700 is 21 text uses and 1 background; lightened so hub links and
	   eyebrows are readable on a dark canvas. purple-600 is deliberately NOT
	   redefined -- it is a button/badge background carrying --hp-on-accent
	   text, and lightening it would reduce that pairing's contrast. */
	--hp-purple-700: #cc9cff;
	--hp-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.hp-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem;
	color: var(--hp-gray-700);
}

.hp-section__heading {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--hp-black);
	margin-bottom: 0.5rem;
}

.hp-section__subheading {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 2rem 0 1rem;
	color: var(--hp-black);
}

.hp-section__intro {
	font-size: 1.05rem;
	max-width: 65ch;
	margin-bottom: 2rem;
}

.hp-section__note {
	font-size: 0.9rem;
	color: var(--hp-gray-500);
	margin-top: 0.75rem;
}

/* Buttons */

/*
 * button.hp-btn (etc.) alongside the plain .hp-btn class below: the Hello
 * Elementor parent theme's own reset.css ships a same-specificity
 * [type="button"],[type="submit"],button rule (crimson placeholder
 * border/color, display:inline-block, white-space:nowrap) intended to be
 * overridden by whichever child theme/page builder actually styles the
 * page. Tied specificity means load order decides the winner, which is
 * fragile -- qualifying with the button/input tag raises our own rule's
 * specificity just enough to win unconditionally, for real <button>
 * elements, without changing anything for the <a class="hp-btn"> links
 * this same class is also used on throughout the Partner Hub.
 */
.hp-btn,
button.hp-btn,
input.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.75em 1.4em;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	min-height: 44px;
	line-height: 1.2;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hp-btn--primary,
button.hp-btn--primary {
	background: var(--hp-purple-600);
	color: var(--hp-on-accent);
}

.hp-btn--primary:hover,
.hp-btn--primary:focus-visible,
button.hp-btn--primary:hover,
button.hp-btn--primary:focus-visible {
	background: var(--hp-purple-700);
}

.hp-btn--secondary,
button.hp-btn--secondary {
	background: transparent;
	color: var(--hp-purple-secondary-ink, var(--hp-purple-600));
	border-color: var(--hp-purple-300);
}

.hp-btn--secondary:hover,
.hp-btn--secondary:focus-visible,
button.hp-btn--secondary:hover,
button.hp-btn--secondary:focus-visible {
	background: var(--hp-gray-50);
}

.hp-btn:disabled,
button.hp-btn:disabled {
	background: var(--hp-gray-100);
	color: var(--hp-gray-500);
	border-color: var(--hp-gray-100);
	cursor: not-allowed;
}

.hp-btn:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--hp-purple-500);
	outline-offset: 2px;
}

/* Channels */

.hp-channel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.hp-channel-card {
	background: var(--hp-white);
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.5rem;
	box-shadow: var(--hp-shadow);
	text-align: center;
}

.hp-channel-card__logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 0.75rem;
	display: block;
	object-fit: contain;
}

.hp-channel-card__platform {
	font-size: 1.1rem;
	margin: 0 0 0.25rem;
	color: var(--hp-black);
}

.hp-channel-card__handle {
	color: var(--hp-gray-500);
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.hp-channel-card__packages {
	width: 100%;
	font-size: 0.85rem;
	margin-bottom: 1rem;
	border-collapse: collapse;
}

.hp-channel-card__packages th,
.hp-channel-card__packages td {
	text-align: left;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--hp-gray-100);
}

.hp-channel-card__link {
	width: 100%;
	justify-content: center;
}

.hp-pill {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.hp-pill--included {
	background: #ede9fe;
	color: var(--hp-purple-700);
}

.hp-pill--excluded {
	background: var(--hp-gray-100);
	color: var(--hp-gray-700); /* M40: gray-500 measured ~4.1:1 on this background, failing AA */
}

.hp-pill--muted {
	background: var(--hp-gray-100);
	color: var(--hp-gray-700);
}

.hp-external-icon {
	font-size: 0.9em;
}

.hp-facebook-cta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--hp-panel-dark);
	color: var(--hp-on-accent);
	border-radius: var(--hp-radius);
	padding: 1.5rem;
	flex-wrap: wrap;
}

.hp-facebook-cta img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 50%;
	flex-shrink: 0;
}

.hp-facebook-cta__text {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

/* Packages */

.hp-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.hp-package-card {
	position: relative;
	background: var(--hp-white);
	border: 2px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.75rem;
	box-shadow: var(--hp-shadow);
	display: flex;
	flex-direction: column;
}

.hp-package-card--featured {
	border-color: var(--hp-package-accent, var(--hp-purple-600));
}

.hp-package-card__badge {
	position: absolute;
	top: -0.75rem;
	left: 1.5rem;
	background: var(--hp-package-accent, var(--hp-purple-600));
	color: var(--hp-on-accent);
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.25rem 0.9rem;
	border-radius: 999px;
}

.hp-package-card__name {
	font-size: 1.3rem;
	margin: 0.5rem 0 0.25rem;
	color: var(--hp-black);
}

.hp-package-card__subtitle {
	color: var(--hp-gray-500);
	margin-bottom: 1rem;
	font-size: 0.9rem;
}

.hp-package-card__price-amount {
	font-size: 2rem;
	font-weight: 800;
	color: var(--hp-black);
}

.hp-package-card__price-period {
	color: var(--hp-gray-500);
	margin-left: 0.35rem;
}

.hp-package-card__description {
	font-size: 0.9rem;
	margin: 0.75rem 0 1rem;
}

.hp-package-card__inclusions,
.hp-package-card__exclusions {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.9rem;
	flex-grow: 1;
}

.hp-package-card__inclusions li,
.hp-package-card__exclusions li {
	display: flex;
	gap: 0.5em;
	margin-bottom: 0.5rem;
	align-items: flex-start;
}

.hp-tick {
	color: var(--hp-purple-600);
	font-weight: 700;
}

.hp-cross {
	color: var(--hp-gray-500);
}

.hp-package-card__exclusions {
	color: var(--hp-gray-500);
}

.hp-package-card__cta {
	width: 100%;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 0.75rem;
}

/*
 * Wave 4 commercial-UX pass (2026-08-08): condensed highlight bullets +
 * "More info" disclosure, replacing the old always-expanded full inclusions/
 * exclusions list -- same visual language as the application wizard's own
 * package cards (.hp-radio-card__highlights/__details in the "Wave 4
 * configurator" section below), reused here under the ".hp-package-card__"
 * prefix since this card is a plain link-out card, not a radio control.
 */
.hp-package-card__highlights {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.hp-package-card__highlights li {
	background: var(--hp-gray-50);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.78rem;
	color: var(--hp-gray-700);
}

.hp-package-card__details {
	margin-top: 0.25rem;
	border-top: 1px dashed var(--hp-gray-100);
	padding-top: 0.75rem;
}

.hp-package-card__details-toggle {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hp-purple-700);
	list-style: none;
}

.hp-package-card__details-toggle::-webkit-details-marker {
	display: none;
}

.hp-package-card__details-toggle::before {
	content: '+ ';
}

.hp-package-card__details[open] > .hp-package-card__details-toggle::before {
	content: '\2212 ';
}

.hp-package-card__details .hp-package-card__inclusions,
.hp-package-card__details .hp-package-card__exclusions {
	margin-top: 0.75rem;
}

/* Overview */

.hp-overview__lede {
	font-size: 1.1rem;
	max-width: 70ch;
	margin-bottom: 2rem;
}

.hp-overview__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.hp-overview__item {
	background: var(--hp-gray-50);
	border-radius: var(--hp-radius);
	padding: 1.25rem;
}

.hp-overview__item h3 {
	margin: 0 0 0.4rem;
	color: var(--hp-black);
	font-size: 1.05rem;
}

.hp-overview__may-include {
	columns: 2;
	gap: 2rem;
}

@media (max-width: 480px) {
	.hp-overview__may-include {
		columns: 1;
	}
}

.hp-disclaimer {
	font-size: 0.85rem;
	color: var(--hp-gray-500);
	background: var(--hp-gray-50);
	border-radius: var(--hp-radius);
	padding: 1rem 1.25rem;
	margin-top: 1rem;
}

/* Social reach */

.hp-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.hp-stat-card {
	background: var(--hp-panel-dark);
	color: var(--hp-on-accent);
	border-radius: var(--hp-radius);
	padding: 1.25rem;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.hp-stat-card__value {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--hp-purple-300);
}

.hp-stat-card__label {
	font-weight: 600;
	margin-top: 0.25rem;
}

.hp-stat-card__note {
	font-size: 0.75rem;
	opacity: 0.75;
	margin-top: 0.25rem;
}

/* Testimonials */

.hp-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}

.hp-testimonial-card {
	background: var(--hp-gray-50);
	border-left: 4px solid var(--hp-purple-600);
	border-radius: var(--hp-radius);
	padding: 1.25rem;
	margin: 0;
}

.hp-testimonial-card__text {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.hp-testimonial-card__footer {
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
	color: var(--hp-gray-500);
}

.hp-testimonial-card__footer strong {
	color: var(--hp-black);
}

/* Coming soon */

.hp-coming-soon {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
	background: var(--hp-gray-50);
	border-radius: var(--hp-radius);
	text-align: center;
	color: var(--hp-gray-700);
}

/* Admin-only feature preview banner (M43: HertsJobs board preview while gated) */

.hp-jobs-admin-preview {
	max-width: 1100px;
	margin: 0 auto 1.25rem;
	padding: 0.85rem 1.25rem;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: var(--hp-radius);
	color: #92400e;
}

/* Utility */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.hp-btn {
		transition: none;
	}
}

/* ===================================================================
   Application wizard
   =================================================================== */

.hp-wizard {
	max-width: 900px;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.hp-wizard-progress {
	margin-bottom: 2rem;
	overflow-x: auto;
}

.hp-wizard-progress ol {
	list-style: none;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	min-width: max-content;
}

.hp-wizard-progress__step {
	display: flex;
	align-items: center;
}

.hp-wizard-progress__step a,
.hp-wizard-progress__step span[aria-current] {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--hp-gray-500);
	white-space: nowrap;
}

.hp-wizard-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--hp-gray-100);
	color: var(--hp-gray-500);
	font-size: 0.75rem;
}

.hp-wizard-progress__step.is-current a,
.hp-wizard-progress__step.is-current span[aria-current] {
	color: var(--hp-black);
}

.hp-wizard-progress__step.is-current .hp-wizard-progress__num {
	background: var(--hp-purple-600);
	color: var(--hp-on-accent);
}

.hp-wizard-progress__step.is-done a {
	color: var(--hp-purple-700);
}

.hp-wizard-progress__step.is-done .hp-wizard-progress__num {
	background: #ede9fe;
	color: var(--hp-purple-700);
}

@media (max-width: 600px) {
	.hp-wizard-progress__label {
		display: none;
	}
}

.hp-wizard-step__heading {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hp-black);
	margin-bottom: 0.4rem;
}

.hp-wizard-step__intro {
	color: var(--hp-gray-500);
	margin-bottom: 1.5rem;
	max-width: 65ch;
}

.hp-wizard-step__subheading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hp-black);
	margin: 2rem 0 0.4rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hp-gray-200, #e5e5e5);
}

/* Foundational batch, item 2 (2026-08-06): .hp-notice (base + info/error/
 * warning/success) moved to the theme's shared components.css, which loads
 * unconditionally on every front-end page in both repos -- this file only
 * loads on pages containing a Partner Hub shortcode, so a theme-owned page
 * had no notice styling available at all. One canonical definition now;
 * see theme/hertspartners-hello-child/assets/css/components.css. */

.hp-error-summary {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--hp-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.hp-error-summary__title {
	font-weight: 700;
	color: #b91c1c;
	margin: 0 0 0.5rem;
}

.hp-error-summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

.hp-error-summary a {
	color: #b91c1c;
}

/* Package radio cards (step 1) */

.hp-radio-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.hp-radio-card {
	position: relative;
	display: block;
	background: var(--hp-white);
	border: 2px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.5rem;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-radio-card:hover {
	border-color: var(--hp-purple-300);
}

.hp-radio-card.is-selected {
	border-color: var(--hp-purple-600);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.hp-radio-card input[type="radio"] {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--hp-purple-600);
}

.hp-radio-card:focus-within {
	outline: 3px solid var(--hp-purple-500);
	outline-offset: 2px;
}

.hp-platform-summary {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.85rem;
	color: var(--hp-gray-700);
}

.hp-platform-summary li {
	padding: 0.2rem 0;
	border-bottom: 1px dashed var(--hp-gray-100);
}

.hp-totals-box {
	background: var(--hp-gray-50);
	border-radius: var(--hp-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.hp-totals-box__row {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0;
}

.hp-totals-box__row--emphasis strong {
	color: var(--hp-purple-700);
	font-size: 1.1rem;
}

.hp-totals-box__note {
	font-size: 0.78rem;
	color: var(--hp-gray-500);
	margin-top: 0.5rem;
}

.hp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * Wave 4 configurator (2026-08-08): package + add-ons merged into one
 * compact screen (step 1) with a persistent order summary, replacing the
 * old separate package-picker / add-ons-list screens. Package-card and
 * totals-box rules above are reused as-is; everything below is new.
 * Breakpoints match the 700px/1100px convention already used for the
 * Jobs/Events board grids elsewhere in this plugin.
 * ------------------------------------------------------------------- */

.hp-configurator__grid {
	display: grid;
	gap: 2rem;
}

.hp-configurator__main {
	min-width: 0;
}

.hp-configurator__addons {
	margin-top: 2rem;
}

/* Package "More info" disclosure -- native <details>, no JS required. */
.hp-radio-card__highlights {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.hp-radio-card__highlights li {
	background: var(--hp-gray-50);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.78rem;
	color: var(--hp-gray-700);
}

.hp-radio-card__details {
	margin-top: 0.5rem;
	border-top: 1px dashed var(--hp-gray-100);
	padding-top: 0.75rem;
}

.hp-radio-card__details-toggle {
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hp-purple-700);
	list-style: none;
}

.hp-radio-card__details-toggle::-webkit-details-marker {
	display: none;
}

.hp-radio-card__details-toggle::before {
	content: '+ ';
}

.hp-radio-card__details[open] > .hp-radio-card__details-toggle::before {
	content: '\2212 ';
}

.hp-radio-card__details .hp-platform-summary {
	margin-top: 0.75rem;
}

/* Shared "Compare all packages" table -- one instance, not per-card. */
.hp-package-compare {
	margin-top: 1rem;
}

.hp-package-compare__toggle {
	cursor: pointer;
	font-weight: 600;
	color: var(--hp-purple-700);
	font-size: 0.9rem;
}

.hp-package-compare__table-wrap {
	margin-top: 1rem;
	overflow-x: auto;
}

.hp-package-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.hp-package-compare__table th,
.hp-package-compare__table td {
	text-align: left;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--hp-gray-100);
	white-space: nowrap;
}

.hp-package-compare__table thead th {
	color: var(--hp-black);
	font-weight: 700;
}

.hp-package-compare__table tbody th {
	color: var(--hp-gray-700);
	font-weight: 600;
}

/* Add-on tiles (replaces the old plain checkbox-row list). */
.hp-addon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}

.hp-addon-tile {
	position: relative;
	display: block;
	background: var(--hp-white);
	border: 2px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.1rem;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-addon-tile:hover {
	border-color: var(--hp-purple-300);
}

.hp-addon-tile.is-selected {
	border-color: var(--hp-purple-600);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.hp-addon-tile:focus-within {
	outline: 3px solid var(--hp-purple-500);
	outline-offset: 2px;
}

.hp-addon-tile__top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.hp-addon-tile__input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--hp-purple-600);
	flex-shrink: 0;
}

button.hp-addon-tile__info-toggle {
	margin-left: auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid var(--hp-gray-100);
	background: var(--hp-gray-50);
	color: var(--hp-gray-700);
	font-size: 0.75rem;
	font-style: italic;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
}

button.hp-addon-tile__info-toggle:hover {
	border-color: var(--hp-purple-300);
}

.hp-addon-tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 0.5rem;
}

.hp-addon-tile__name {
	font-weight: 600;
	color: var(--hp-black);
	font-size: 0.95rem;
}

.hp-addon-tile__price {
	font-weight: 700;
	color: var(--hp-purple-700);
	font-size: 0.85rem;
}

.hp-addon-tile__desc {
	font-size: 0.82rem;
	color: var(--hp-gray-500);
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease;
}

.hp-addon-tile__desc.is-expanded {
	max-height: 12em;
	margin-top: 0.5rem;
}

.hp-addon-tile__qty {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.hp-addon-tile__qty[hidden] {
	display: none;
}

button.hp-addon-tile__qty-dec,
button.hp-addon-tile__qty-inc {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hp-gray-100);
	background: var(--hp-white);
	color: var(--hp-purple-700);
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}

button.hp-addon-tile__qty-dec:hover,
button.hp-addon-tile__qty-inc:hover {
	border-color: var(--hp-purple-300);
}

.hp-addon-tile__qty-value {
	width: 2.5rem;
	text-align: center;
	padding: 0.3rem;
	border: 1px solid var(--hp-gray-100);
	border-radius: 8px;
}

/* Order summary -- sticky rail on desktop, fixed bottom bar on mobile/tablet. */
.hp-order-summary {
	background: var(--hp-white);
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	box-shadow: var(--hp-shadow);
}

.hp-order-summary__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}

.hp-order-summary__label {
	font-weight: 700;
	color: var(--hp-black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-order-summary__bar-total {
	font-weight: 700;
	color: var(--hp-purple-700);
	margin-left: auto;
	white-space: nowrap;
}

button.hp-order-summary__toggle {
	display: none;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--hp-gray-100);
	background: var(--hp-gray-50);
	color: var(--hp-purple-700);
	cursor: pointer;
	flex-shrink: 0;
}

.hp-order-summary__chevron {
	display: inline-block;
	transition: transform 0.15s ease;
}

.hp-order-summary.is-expanded .hp-order-summary__chevron {
	transform: rotate(180deg);
}

.hp-order-summary__cta {
	flex-shrink: 0;
}

/* L01.1 (2026-09-12): `flex-shrink: 0` keeps the checkout action at its full
   label width, so on a 390px phone the sticky summary row -- price label plus
   button -- ran 6px past the viewport and the button's right edge was clipped.
   Measured on real staging. The row wraps on phones instead, with the action
   full width, so nothing is cut off. */
@media (max-width: 560px) {
	.hp-order-summary__header {
		flex-wrap: wrap;
	}

	.hp-order-summary__cta {
		flex: 1 1 100%;
		justify-content: center;
	}
}

.hp-order-summary__panel {
	padding: 0 1.25rem 1.25rem;
}

.hp-order-summary__lines {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: 0.85rem;
	color: var(--hp-gray-700);
}

.hp-order-summary__lines li {
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--hp-gray-100);
}

.hp-order-summary .hp-totals-box {
	margin-bottom: 0;
}

@media (min-width: 1100px) {
	.hp-configurator__grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}

	.hp-order-summary {
		position: sticky;
		top: 24px;
	}

	.hp-order-summary__panel {
		display: block !important;
	}
}

@media (max-width: 1099px) {
	.hp-order-summary {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 40;
		border-radius: 0;
		border-width: 1px 0 0;
	}

	button.hp-order-summary__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hp-order-summary__panel {
		display: none;
		max-height: 60vh;
		overflow-y: auto;
	}

	.hp-order-summary.is-expanded .hp-order-summary__panel {
		display: block;
	}

	/* Room for the fixed order-summary bar so it never covers content. */
	#hp-wizard-step-1 {
		padding-bottom: 5rem;
	}
}

@media (max-width: 699px) {
	.hp-configurator__packages .hp-radio-card-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding-bottom: 0.5rem;
		margin-bottom: 1.25rem;
	}

	.hp-configurator__packages .hp-radio-card {
		flex: 0 0 82vw;
		scroll-snap-align: start;
	}

	.hp-addon-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-order-summary__label {
		max-width: 40vw;
	}
}

/* Form fields (steps 2-5) */

.hp-wizard-form {
	max-width: 100%;
}

.hp-field {
	margin-bottom: 1.25rem;
}

.hp-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem 1.25rem;
}

.hp-field label,
.hp-field legend {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--hp-black);
}

.hp-required {
	color: #b91c1c;
}

.hp-field__hint {
	font-size: 0.85rem;
	color: var(--hp-gray-500);
	margin: -0.15rem 0 0.5rem;
}

.hp-field input:not([type]),
.hp-field input[type="text"],
.hp-field input[type="email"],
.hp-field input[type="tel"],
.hp-field input[type="url"],
.hp-field input[type="date"],
.hp-field input[type="time"],
.hp-field input[type="datetime-local"],
.hp-field input[type="password"],
.hp-field input[type="search"],
.hp-field input[type="number"],
.hp-field input[type="file"],
.hp-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--hp-gray-300, #d1d5db);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	background: var(--hp-white);
	color: var(--hp-black);
}

.hp-field textarea { min-height: 120px; resize: vertical; }

.hp-field input:focus-visible,
.hp-field textarea:focus-visible {
	outline: 3px solid var(--hp-purple-500);
	outline-offset: 1px;
	border-color: var(--hp-purple-500);
}

.hp-field__help {
	font-size: 0.82rem;
	color: var(--hp-gray-500);
	margin: 0.25rem 0;
}

.hp-field__error {
	font-size: 0.82rem;
	color: #b91c1c;
	margin: 0.35rem 0 0;
}

.hp-field.has-error input,
.hp-field.has-error textarea {
	border-color: #f87171;
}

.hp-form-surface {
	width: min(100%, 920px);
	margin: 0 auto clamp(2.5rem, 7vw, 5rem);
	padding: clamp(1rem, 3vw, 1.75rem);
	border: 1px solid var(--hp-gray-100);
	border-radius: 22px;
	background: var(--hp-white);
	box-shadow: 0 18px 54px rgba(41, 25, 86, 0.08);
}

.hp-form-section {
	margin: 0;
	padding: clamp(1rem, 3vw, 1.75rem) 0;
	border: 0;
}

.hp-form-section + .hp-form-section { border-top: 1px solid var(--hp-gray-100); }
.hp-form-section__heading { margin-bottom: 1.25rem; }
.hp-form-section__heading p { margin: 0 0 .25rem; color: var(--hp-purple-700); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hp-form-section__heading h2 { margin: 0 0 .35rem; color: var(--hp-black); font-size: clamp(1.25rem, 3vw, 1.65rem); }
.hp-form-section__heading span { color: var(--hp-gray-500); line-height: 1.55; }
.hp-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--hp-gray-100); }
.hp-form-actions p { flex: 1 1 320px; margin: 0; color: var(--hp-gray-500); font-size: .88rem; line-height: 1.5; }
.hp-form-surface--gate { text-align: center; }
.hp-form-surface--gate h2 { margin-top: 0; }
.hp-submit-event-page .page-header { display: none; }
.hp-event-submission { width: 100%; }

@media (max-width: 599px) {
	.hp-form-surface { padding: 1rem; border-radius: 16px; }
	.hp-field-row { grid-template-columns: 1fr; gap: 0; }
	.hp-form-actions .hp-btn { width: 100%; text-align: center; }
}

.hp-radio-inline {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-right: 1.5rem;
	font-weight: 400 !important;
	cursor: pointer;
}

/* Consent (step 6) */

.hp-consent-list.has-error {
	border: 1px solid #fecaca;
	border-radius: var(--hp-radius);
	padding: 1rem;
	background: #fef2f2;
}

.hp-consent-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-bottom: 1rem;
	cursor: pointer;
	font-size: 0.92rem;
}

.hp-consent-item input {
	margin-top: 0.2rem;
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	accent-color: var(--hp-purple-600);
}

.hp-consent-divider {
	border: none;
	border-top: 1px solid var(--hp-gray-100);
	margin: 1.5rem 0;
}

.hp-consent-item--optional {
	color: var(--hp-gray-500);
}

/* Review (step 7) */

.hp-review-section {
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
}

.hp-review-section__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.hp-review-section__header h3 {
	margin: 0;
	font-size: 1.05rem;
}

.hp-review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

.hp-review-list li {
	padding: 0.2rem 0;
}

/* Nav row */

.hp-wizard-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.hp-wizard-nav .hp-btn {
	min-width: 140px;
	justify-content: center;
}

.hp-btn:disabled[aria-busy="true"] {
	background: var(--hp-purple-500);
	color: var(--hp-on-accent);
	cursor: wait;
}

/* Success screen */

.hp-wizard-success {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.hp-wizard-success__icon {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50%;
	background: var(--hp-purple-600);
	color: var(--hp-on-accent);
	font-size: 2rem;
	margin: 0 auto 1rem;
}

.hp-wizard-success__reference {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

.hp-wizard-success .hp-review-section {
	text-align: left;
}

@media (max-width: 480px) {
	.hp-wizard {
		padding: 1rem 0.75rem 2rem;
	}

	.hp-wizard-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.hp-wizard-nav .hp-btn {
		width: 100%;
	}
}

/* Asset uploader (step 5) */

.hp-asset-uploader {
	margin-bottom: 2rem;
}

.hp-asset-add-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.hp-asset-add-row select,
.hp-asset-add-row input[type="file"] {
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--hp-gray-100);
	border-radius: 10px;
	font-size: 0.9rem;
	max-width: 100%;
}

.hp-asset-add-row input[type="file"] {
	flex: 1 1 220px;
	min-width: 0;
}

.hp-asset-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.hp-asset-list__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--hp-gray-100);
	border-radius: 10px;
	flex-wrap: wrap;
}

.hp-asset-list__thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.hp-asset-list__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.hp-asset-list__name {
	flex: 1 1 auto;
	font-size: 0.9rem;
	min-width: 120px;
	word-break: break-word;
}

.hp-asset-list__view {
	font-size: 0.85rem;
	color: var(--hp-purple-700);
	white-space: nowrap;
}

.hp-asset-list__remove {
	background: none;
	border: 1px solid #f87171;
	color: #b91c1c;
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.8rem;
	cursor: pointer;
	white-space: nowrap;
}

.hp-asset-list__remove:disabled {
	opacity: 0.5;
	cursor: wait;
}

@media (max-width: 480px) {
	.hp-asset-add-row {
		flex-direction: column;
		align-items: stretch;
	}

	.hp-asset-list__item {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ===================================================================
   Partner portal (Milestone 20)
   =================================================================== */

.hp-portal-login {
	max-width: 480px;
}

.hp-portal-welcome {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.hp-portal-welcome__logo {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--hp-radius);
	flex-shrink: 0;
}

.hp-portal-welcome__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--hp-gray-500);
	margin-top: 0.35rem;
}

.hp-portal-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.hp-portal-summary__item {
	background: var(--hp-gray-50);
	border-radius: var(--hp-radius);
	padding: 1rem 1.25rem;
}

.hp-portal-summary__item h3 {
	margin: 0 0 0.3rem;
	font-size: 0.85rem;
	color: var(--hp-gray-500);
}

.hp-portal-summary__item p {
	margin: 0;
	font-weight: 700;
	color: var(--hp-black);
}

.hp-portal-form {
	max-width: 640px;
	margin-bottom: 2.5rem;
}

@media (max-width: 480px) {
	.hp-portal-welcome {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------
 * CV Creator (Milestone 13)
 * ------------------------------------------------------------------- */

.hp-cv-repeat-entry {
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.25rem;
	margin: 0 0 1.5rem;
}

.hp-cv-repeat-entry legend {
	font-weight: 700;
	color: var(--hp-black);
	padding: 0 0.4rem;
}

.hp-field--checkbox {
	display: flex;
	align-items: flex-end;
	padding-bottom: 0.6rem;
}

.hp-field--checkbox label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 400;
}

/* CV-24: a one-time "well done" moment, never repeated on a later revisit. */
.hp-cv-complete-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: var(--hp-purple-600);
	color: var(--hp-on-accent);
	border-radius: var(--hp-radius);
	padding: 1.1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.hp-cv-complete-banner__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	font-weight: 700;
}

.hp-cv-complete-banner__title {
	margin: 0 0 0.2rem;
	font-weight: 700;
	font-size: 1.05rem;
}

.hp-cv-complete-banner__body {
	margin: 0;
	opacity: 0.92;
	font-size: 0.92rem;
}

/* M43: CV Creator entry experience (account-prompt.php) -- badges, a short
   how-it-works flow, and honest template preview swatches for a first-time,
   not-yet-logged-in visitor. */

.hp-cv-account-prompt {
	max-width: 46rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
}

.hp-cv-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.hp-cv-badges li {
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--hp-gray-100);
	color: var(--hp-gray-700);
	font-size: 0.85rem;
	font-weight: 600;
}

.hp-cv-account-prompt__cta {
	margin-bottom: 2rem;
}

.hp-cv-how-it-works,
.hp-cv-template-gallery {
	margin: 2.25rem 0;
}

.hp-cv-how-it-works h3,
.hp-cv-template-gallery h3 {
	margin: 0 0 0.75rem;
}

.hp-cv-how-it-works ol {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-cv-how-it-works li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.hp-cv-how-it-works__step {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--hp-color-primary-100, #f2ebff);
	color: var(--hp-color-primary, #6d28d9);
	font-weight: 700;
}

.hp-cv-how-it-works li p {
	margin: 0.15rem 0 0;
	font-size: 0.92rem;
	color: var(--hp-gray-700);
}

.hp-cv-template-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem 1.25rem;
	align-items: start;
}

.hp-cv-template-gallery__label {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: var(--hp-gray-700);
}

/* Real colours/fonts of the three locked render templates (.hp-cv--signature/
   --refined/--contemporary above) -- a small, honest representation of each
   template's actual visual identity, not a screenshot of a real CV. */
.hp-cv-template-swatch {
	aspect-ratio: 3/4;
	border: 1px solid var(--hp-gray-100);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 14px rgba(25, 15, 35, 0.08);
}

.hp-cv-template-swatch__header {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	justify-content: center;
	padding: 0.6rem 0.7rem;
}

.hp-cv-template-swatch__lines {
	padding: 0.7rem;
	display: grid;
	gap: 0.4rem;
}

.hp-cv-template-swatch__lines i {
	display: block;
	height: 0.35rem;
	border-radius: 2px;
	background: var(--hp-gray-100);
}

.hp-cv-template-swatch__lines i:first-child {
	width: 70%;
}

.hp-cv-template-swatch--signature .hp-cv-template-swatch__header {
	background: #f3eefa;
	height: 2.4rem;
}

.hp-cv-template-swatch--signature .hp-cv-template-swatch__header span {
	display: block;
	height: 0.4rem;
	border-radius: 2px;
	background: #5b2c8c;
}

.hp-cv-template-swatch--signature .hp-cv-template-swatch__header span:first-child {
	width: 55%;
}

.hp-cv-template-swatch--signature .hp-cv-template-swatch__header span:last-child {
	width: 35%;
	opacity: 0.5;
}

.hp-cv-template-swatch--refined .hp-cv-template-swatch__header {
	height: 2.8rem;
	justify-content: flex-end;
	padding-bottom: 0.4rem;
}

.hp-cv-template-swatch--refined .hp-cv-template-swatch__header span {
	display: block;
	height: 0.5rem;
	width: 60%;
	margin: 0 auto;
	border-radius: 1px;
	background: #4a2470;
	font-family: Georgia, serif;
}

.hp-cv-template-swatch--refined .hp-cv-template-swatch__lines i {
	background: var(--hp-gray-50);
	border-bottom: 1px solid var(--hp-gray-100);
	border-radius: 0;
}

.hp-cv-template-swatch--contemporary .hp-cv-template-swatch__header {
	background: #4c2680;
	height: 2.4rem;
}

.hp-cv-template-swatch--contemporary .hp-cv-template-swatch__header span {
	display: block;
	height: 0.4rem;
	border-radius: 2px;
	background: #ffffff;
}

.hp-cv-template-swatch--contemporary .hp-cv-template-swatch__header span:first-child {
	width: 60%;
}

.hp-cv-template-swatch--contemporary .hp-cv-template-swatch__header span:last-child {
	width: 40%;
	opacity: 0.7;
}

@media (max-width: 480px) {
	.hp-cv-template-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-cv-template-gallery__item:last-child {
		grid-column: 1 / -1;
		max-width: 50%;
		margin: 0 auto;
	}

	.hp-cv-template-gallery__label {
		font-size: 0.75rem;
	}
}

.hp-cv-preview-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.hp-cv-preview-toolbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.hp-cv-preview-toolbar__export {
	margin: 0;
	display: contents;
}

.hp-cv-preview-toolbar__note {
	margin: 0;
	font-size: 0.85rem;
	color: var(--hp-gray-500);
}

.hp-cv-preview-frame {
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	overflow: hidden;
	background: var(--hp-white);
	max-width: 210mm;
	margin-inline: auto;
	box-shadow: 0 18px 50px rgba(34, 27, 46, 0.12);
}

/* CV-23: locked render — shared structure across all three approved templates */
.hp-cv {
	color: var(--cv-ink, #1a1a1a);
	font-family: var(--cv-body-font, Calibri, "Carlito", Arial, sans-serif);
	font-size: var(--cv-body-size, 10.5pt);
	line-height: 1.6;
	box-sizing: border-box;
}

.hp-cv *,
.hp-cv *::before,
.hp-cv *::after {
	box-sizing: inherit;
}

.hp-cv__header {
	background: var(--cv-header-bg, transparent);
	color: var(--cv-header-text, var(--cv-ink, #1a1a1a));
	padding: var(--cv-margin-y, 14mm) var(--cv-margin-x, 16mm) 14pt;
}

.hp-cv__name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14pt;
}

.hp-cv__name-block {
	flex: 1;
	min-width: 0;
}

.hp-cv__name {
	font-family: var(--cv-name-font, Calibri, "Carlito", Arial, sans-serif);
	font-weight: var(--cv-name-weight, 700);
	font-size: var(--cv-name-size, 20pt);
	color: var(--cv-name-color, var(--cv-header-text, inherit));
	margin: 0;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.hp-cv__role {
	font-size: 12pt;
	margin: 4pt 0 7pt;
	color: var(--cv-role-color, var(--cv-accent, #5b2c8c));
	letter-spacing: 0.03em;
}

.hp-cv__contact-line {
	font-size: 9.5pt;
	color: var(--cv-header-text, inherit);
	opacity: 0.85;
	margin: 0;
	overflow-wrap: anywhere;
}

.hp-cv__contact-line span:not(:last-child)::after {
	content: "  ·  ";
	white-space: pre;
}

.hp-cv__document-label {
	margin: 0;
}

.hp-cv__contact-grid {
	margin: 0;
}

.hp-cv__contact-item dt,
.hp-cv__contact-item dd {
	margin: 0;
}

.hp-cv__monogram {
	flex-shrink: 0;
	width: 46pt;
	height: 46pt;
	border-radius: 50%;
	border: 1.2pt solid var(--cv-accent-soft, #e4d8f2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, serif;
	font-size: 15pt;
	color: var(--cv-accent, #4a2470);
}

.hp-cv__body {
	padding: 0 var(--cv-margin-x, 16mm) var(--cv-margin-y, 14mm);
}

.hp-cv__section {
	margin-bottom: var(--cv-section-gap, 14pt);
}

.hp-cv__section:last-child {
	margin-bottom: 0;
}

.hp-cv__section h2 {
	font-family: var(--cv-head-font, Calibri, "Carlito", Arial, sans-serif);
	font-size: var(--cv-head-size, 10.5pt);
	font-weight: var(--cv-head-weight, 700);
	text-transform: var(--cv-head-transform, uppercase);
	font-variant: var(--cv-head-variant, normal);
	letter-spacing: 0.06em;
	color: var(--cv-accent, #5b2c8c);
	margin: 0 0 8pt;
	padding: 2pt 0 2pt 9pt;
	border-left: var(--cv-head-border-left, 3pt solid var(--cv-accent, #5b2c8c));
	display: inline-block;
}

.hp-cv__entry {
	margin-bottom: var(--cv-entry-gap, 9pt);
	break-inside: avoid;
	page-break-inside: avoid;
}

.hp-cv__entry:last-child {
	margin-bottom: 0;
}

.hp-cv__entry-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8pt;
	flex-wrap: wrap;
}

.hp-cv__entry-title {
	font-weight: 700;
	font-size: 11pt;
	color: var(--cv-ink, inherit);
	overflow-wrap: anywhere;
	min-width: 0;
}

.hp-cv__entry-date {
	font-size: 8.8pt;
	color: var(--cv-accent, #5b2c8c);
	background: var(--cv-accent-soft, #e4d8f2);
	border-radius: 20pt;
	padding: 2pt 8pt;
	white-space: nowrap;
	font-weight: 600;
}

.hp-cv__entry-employer {
	font-size: 10pt;
	color: var(--cv-accent, #5b2c8c);
	font-weight: 600;
	margin: 2pt 0 5pt;
	overflow-wrap: anywhere;
}

.hp-cv__entry ul {
	margin: 4pt 0 0;
	padding-left: 17pt;
	list-style: disc outside;
}

.hp-cv__entry li {
	margin-bottom: 3pt;
	padding-left: 2pt;
	break-inside: avoid;
	page-break-inside: avoid;
}

.hp-cv__skill-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 18pt;
	row-gap: 4pt;
	margin: 0;
	padding-left: 17pt;
	list-style: disc outside;
}

.hp-cv__skill-list li {
	padding-left: 2pt;
	break-inside: avoid;
	page-break-inside: avoid;
	overflow-wrap: anywhere;
}

/* Signature -- canonical editorial resident presentation. */
.hp-cv--signature {
	--cv-ink: #221b2e;
	--cv-muted: #655d6d;
	--cv-accent: #6425a8;
	--cv-accent-strong: #4b176f;
	--cv-accent-soft: #e5d9ef;
	--cv-margin-y: 16mm;
	--cv-margin-x: 18mm;
	background: #ffffff;
	border-top: 5pt solid var(--cv-accent);
	font-size: 10.4pt;
	line-height: 1.52;
}

.hp-cv--signature .hp-cv__header {
	background: #ffffff;
	padding: 11mm var(--cv-margin-x) 0;
}

.hp-cv--signature .hp-cv__identity {
	padding-left: 13pt;
	border-left: 3pt solid var(--cv-accent);
}

.hp-cv--signature .hp-cv__document-label {
	font-size: 7.5pt;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cv-muted);
	margin-bottom: 5pt;
}

.hp-cv--signature .hp-cv__name {
	font-size: 28pt;
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--cv-ink);
}

.hp-cv--signature .hp-cv__role {
	font-size: 12pt;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.035em;
	color: var(--cv-accent);
	margin: 6pt 0 0;
}

.hp-cv--signature .hp-cv__contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(115pt, 1fr));
	margin-top: 7mm;
	border-top: 0.75pt solid #d8d1df;
	border-bottom: 0.75pt solid #d8d1df;
}

.hp-cv--signature .hp-cv__contact-grid--3 {
	grid-template-columns: 0.75fr 1.25fr;
}

.hp-cv--signature .hp-cv__contact-grid--2 {
	grid-template-columns: 1.35fr 1fr;
}

.hp-cv--signature .hp-cv__contact-grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.hp-cv--signature .hp-cv__contact-item {
	min-width: 0;
	padding: 7pt 11pt 7pt 0;
}

.hp-cv--signature .hp-cv__contact-grid--3 .hp-cv__contact-item--email {
	grid-column: 1 / -1;
	padding-right: 0;
	border-bottom: 0.75pt solid #e4dfe8;
}

.hp-cv--signature .hp-cv__contact-grid--3 .hp-cv__contact-item--location,
.hp-cv--signature .hp-cv__contact-grid--2 .hp-cv__contact-item + .hp-cv__contact-item {
	padding-left: 11pt;
	border-left: 0.75pt solid #e4dfe8;
}

.hp-cv--signature .hp-cv__contact-item dt {
	font-size: 7.2pt;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cv-accent);
	margin-bottom: 2.5pt;
}

.hp-cv--signature .hp-cv__contact-item dd {
	font-size: 8.7pt;
	line-height: 1.3;
	color: var(--cv-ink);
	overflow-wrap: anywhere;
}

.hp-cv--signature .hp-cv__body {
	padding-top: 7mm;
}

.hp-cv--signature .hp-cv__section {
	margin-bottom: 12pt;
}

.hp-cv--signature .hp-cv__section h2 {
	display: flex;
	align-items: center;
	gap: 9pt;
	width: 100%;
	padding: 0;
	border: 0;
	font-size: 9pt;
	line-height: 1.2;
	letter-spacing: 0.13em;
	color: var(--cv-accent-strong);
	margin-bottom: 9pt;
}

.hp-cv--signature .hp-cv__section h2::before {
	content: "";
	width: 17pt;
	height: 2.2pt;
	background: var(--cv-accent);
	flex: 0 0 17pt;
}

.hp-cv--signature .hp-cv__section h2::after {
	content: "";
	height: 0.75pt;
	background: #d8d1df;
	flex: 1 1 auto;
}

.hp-cv--signature .hp-cv__section--summary p {
	font-size: 10.8pt;
	line-height: 1.55;
	color: #312a39;
	margin: 0 0 7pt;
}

.hp-cv--signature .hp-cv__section--summary p:last-child {
	margin-bottom: 0;
}

.hp-cv--signature .hp-cv__entry {
	position: relative;
	padding-left: 13pt;
	border-left: 1.25pt solid #ded5e7;
	margin-bottom: 12pt;
}

.hp-cv--signature .hp-cv__entry::before {
	content: "";
	position: absolute;
	left: -2.65pt;
	top: 4.5pt;
	width: 4pt;
	height: 4pt;
	border-radius: 50%;
	background: var(--cv-accent);
}

.hp-cv--signature .hp-cv__entry-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 8pt 14pt;
}

.hp-cv--signature .hp-cv__entry-title {
	font-size: 11.2pt;
	line-height: 1.28;
	font-weight: 700;
	color: var(--cv-ink);
}

.hp-cv--signature .hp-cv__entry-date {
	font-size: 8.2pt;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: var(--cv-muted);
	background: transparent;
	border-radius: 0;
	padding: 1.5pt 0 0;
}

.hp-cv--signature .hp-cv__entry-employer {
	font-size: 8.8pt;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: 0.055em;
	color: var(--cv-accent);
	margin: 3pt 0 6pt;
}

.hp-cv--signature .hp-cv__entry ul {
	margin-top: 5pt;
	padding-left: 15pt;
}

.hp-cv--signature .hp-cv__entry li {
	padding-left: 3pt;
	margin-bottom: 2.5pt;
}

.hp-cv--signature li::marker {
	color: var(--cv-accent);
}

.hp-cv--signature .hp-cv__skill-list {
	column-gap: 25pt;
	row-gap: 3pt;
	padding-left: 15pt;
}

.hp-cv--signature .hp-cv__skill-list li {
	padding-left: 3pt;
}

/* Refined -- editorial, most premium of the three */
.hp-cv--refined {
	--cv-ink: #241c30;
	--cv-accent: #4a2470;
	--cv-accent-soft: #e7daf4;
	--cv-name-font: Georgia, "Cambria", serif;
	--cv-name-weight: 400;
	--cv-name-size: 26pt;
	--cv-head-font: Georgia, "Cambria", serif;
	--cv-head-weight: 400;
	--cv-head-size: 12pt;
	--cv-head-transform: none;
	--cv-head-variant: small-caps;
	--cv-head-border-left: none;
	--cv-margin-y: 22mm;
	--cv-margin-x: 24mm;
	--cv-section-gap: 18pt;
	--cv-entry-gap: 11pt;
}

.hp-cv--refined .hp-cv__section h2 {
	padding-left: 0;
}

.hp-cv--refined .hp-cv__role {
	font-style: italic;
}

.hp-cv--refined .hp-cv__entry-date {
	background: transparent;
	padding: 0;
	font-style: italic;
	color: var(--cv-ink, inherit);
	opacity: 0.7;
}

.hp-cv--refined .hp-cv__entry li::before,
.hp-cv--refined .hp-cv__skill-list li::before {
	content: "\2013";
	font-size: 9pt;
}

/* Contemporary -- bold, modern masthead */
.hp-cv--contemporary {
	--cv-ink: #1d1926;
	--cv-accent: #6d28d9;
	--cv-accent-soft: #efe4fb;
	--cv-name-font: Verdana, Geneva, sans-serif;
	--cv-name-size: 17pt;
	--cv-name-color: #ffffff;
	--cv-header-bg: #4c2680;
	--cv-header-text: #ffffff;
	--cv-role-color: #d9c2f7;
	--cv-head-font: Verdana, Geneva, sans-serif;
	--cv-head-size: 9pt;
	--cv-head-border-left: none;
	--cv-margin-y: 16mm;
	--cv-margin-x: 18mm;
	--cv-section-gap: 12pt;
	--cv-entry-gap: 8pt;
}

.hp-cv--contemporary .hp-cv__section h2 {
	color: #ffffff;
	background: var(--cv-accent, #6d28d9);
	padding: 3pt 9pt;
	border-radius: 2pt;
}

.hp-cv--contemporary .hp-cv__entry li::before,
.hp-cv--contemporary .hp-cv__skill-list li::before {
	content: "\25cf";
}

@media (max-width: 700px) {
	.hp-cv {
		padding: 0;
	}
	.hp-cv__header,
	.hp-cv__body {
		padding-left: 6mm;
		padding-right: 6mm;
	}
	.hp-cv__name-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8pt;
	}
	.hp-cv__skill-list {
		grid-template-columns: 1fr;
	}
	.hp-cv--signature {
		font-size: 10pt;
	}
	.hp-cv--signature .hp-cv__header {
		padding-top: 8mm;
	}
	.hp-cv--signature .hp-cv__name {
		font-size: 21pt;
	}
	.hp-cv--signature .hp-cv__contact-grid {
		grid-template-columns: 1fr;
		margin-top: 7mm;
	}
	.hp-cv--signature .hp-cv__contact-item,
	.hp-cv--signature .hp-cv__contact-grid--3 .hp-cv__contact-item--email,
	.hp-cv--signature .hp-cv__contact-grid--3 .hp-cv__contact-item--location,
	.hp-cv--signature .hp-cv__contact-grid--2 .hp-cv__contact-item + .hp-cv__contact-item {
		padding: 5pt 0;
		border-left: 0;
		border-bottom: 0.5pt solid #ebe7ee;
	}
	.hp-cv--signature .hp-cv__contact-item:last-child {
		border-bottom: 0;
	}
	.hp-cv--signature .hp-cv__body {
		padding-top: 8mm;
	}
	.hp-cv--signature .hp-cv__section h2 {
		gap: 7pt;
	}
	.hp-cv--signature .hp-cv__entry-top {
		grid-template-columns: 1fr;
		gap: 1pt;
	}
	.hp-cv--signature .hp-cv__entry-date {
		white-space: normal;
	}
}

@media print {
	@page {
		size: A4 portrait;
		/*
		 * Horizontal page margin, added after the L02.3 funded export proof.
		 * It used to be `10mm 0`, which was fine only because the CV was
		 * trapped in the theme's 600px reading column and never reached the
		 * paper's edge. Now that it fills the page (see below), the paper
		 * itself has to provide the side margin.
		 */
		margin: 10mm 12mm;
	}

	.hp-wizard-progress,
	.hp-cv-preview-toolbar,
	.hp-cv-gallery,
	.hp-cv-holistic,
	/*
	 * "Your CV is ready. Have a careful look below, then print or save it as
	 * a PDF..." -- a congratulation addressed to the person using the site,
	 * which the L02.3 export proof found printed at the top of the first page
	 * of the document they send to an employer. It is site chrome like
	 * everything else in this list, and it also breaks the reading-order
	 * argument made below.
	 */
	.hp-cv-complete-banner,
	.skip-link {
		display: none !important;
	}

	/*
	 * Let the CV have the whole page.
	 *
	 * Measured under print media emulation during the L02.3 export proof:
	 * main.site-main carries the theme's 600px reading measure, which is
	 * right for an article and wrong for an A4 document. The exported PDF
	 * came out as a narrow column down the middle of the sheet with a third
	 * of the width blank, and spilled a short CV onto a second page.
	 *
	 * Scoped to body.hp-cv-page (set by WizardController::add_body_class())
	 * so no other printed page on the site is affected.
	 */
	body.hp-cv-page main.site-main,
	body.hp-cv-page .hp-wizard {
		max-width: none;
		width: auto;
	}
	body.hp-cv-page .hp-wizard {
		padding: 0;
	}
	body.hp-cv-page {
		padding-bottom: 0;
	}

	/*
	 * Trailing whitespace at the foot of the document, measured during the
	 * same proof: the CV's own CONTENT ended 63px inside the page box, but
	 * the container's bottom padding carried the box 9px past it, so Chrome
	 * broke the page and orphaned the Skills section alone on a near-empty
	 * second sheet. Empty space below the last line cannot be worth a page,
	 * and removing it can never remove content.
	 */
	body.hp-cv-page .hp-cv,
	body.hp-cv-page .hp-cv__body {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	body.hp-cv-page .hp-cv__section:last-child {
		margin-bottom: 0;
	}
	.hp-cv-preview-frame {
		border: none;
		border-radius: 0;
		max-width: none;
		margin: 0;
		box-shadow: none;
	}
	.hp-cv {
		background: #ffffff !important;
		color: #221b2e !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.hp-cv--signature .hp-cv__header {
		padding-top: 8mm;
	}
	.hp-cv--signature .hp-cv__contact-grid {
		margin-top: 5mm;
	}
	.hp-cv--signature .hp-cv__body {
		padding-top: 6mm;
	}
	.hp-cv--signature .hp-cv__section {
		margin-bottom: 9pt;
	}
	.hp-cv--signature .hp-cv__skill-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 16pt;
		font-size: 9.2pt;
	}
	.hp-cv--signature .hp-cv__skill-list li {
		white-space: nowrap;
	}
	.hp-cv__header {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.hp-cv__section h2 {
		break-after: avoid;
		page-break-after: avoid;
	}
	.hp-cv__entry {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	.hp-cv--signature .hp-cv__contact-item--email dd {
		white-space: nowrap;
	}

	/* Print / Save as PDF must produce the CV alone, not the
	 * surrounding site (nav, cookie banner, footer). Real testing during
	 * the CV Creator recruiter-quality
	 * assessment found the un-scoped page also produced an unreliable
	 * text-extraction reading order once that site chrome was included
	 * (a naive PDF text reader's column-detection gets confused by the
	 * nav/footer's own multi-item rows), which matters for ATS parsing —
	 * hiding it fixes both the visual leak and the reading order.
	 * `.hp-cv-page` is set by WizardController::add_body_class() rather
	 * than targeting a specific page ID, which isn't safe to hard-code. */
	body.hp-cv-page header.hp-nav,
	body.hp-cv-page nav.hp-tabbar,
	body.hp-cv-page .page-header,
	body.hp-cv-page aside.hp-community,
	body.hp-cv-page footer.hp-footer,
	body.hp-cv-page #cmplz-cookiebanner-container,
	body.hp-cv-page #cmplz-manage-consent-container {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------
 * "Improve my whole CV" holistic AI action (CV-26)
 * ------------------------------------------------------------------- */

.hp-cv-holistic {
	margin-bottom: 1.5rem;
}

.hp-cv-holistic__prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #ede9fe;
	border-radius: var(--hp-radius);
	padding: 1.1rem 1.3rem;
}

.hp-cv-holistic__prompt-title {
	font-weight: 600;
	margin: 0 0 0.3rem;
	color: var(--hp-purple-700, var(--hp-purple-600));
}

.hp-cv-holistic__prompt-body {
	margin: 0;
	font-size: 0.9rem;
	color: var(--hp-gray-700, #374151);
	max-width: 42rem;
}

.hp-cv-holistic__notice {
	background: #fff7ed;
	color: #9a3412;
	border-radius: var(--hp-radius);
	padding: 0.9rem 1.1rem;
}

.hp-cv-holistic__notice p {
	margin: 0;
}

.hp-cv-holistic__review {
	background: var(--hp-white);
	border: 1.5px solid var(--hp-purple-300);
	border-radius: var(--hp-radius);
	padding: 1.3rem;
}

.hp-cv-holistic__compare {
	margin: 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--hp-gray-100);
}

.hp-cv-holistic__compare h4 {
	margin: 0 0 0.5rem;
}

.hp-cv-holistic__before-after {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 640px) {
	.hp-cv-holistic__before-after {
		grid-template-columns: 1fr;
	}
}

.hp-cv-holistic__before-after p {
	margin: 0;
	font-size: 0.9rem;
}

.hp-cv-holistic__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hp-gray-500);
	margin-bottom: 0.3rem !important;
}

.hp-cv-holistic__actions {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.2rem;
}

.hp-cv-gallery {
	margin-bottom: 1.5rem;
}

.hp-cv-gallery__label {
	font-size: 0.9rem;
	color: var(--hp-gray-500);
	margin: 0 0 0.75rem;
}

.hp-cv-gallery__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
}

.hp-cv-gallery__form {
	margin: 0;
}

/* button.hp-cv-gallery__option: same Hello Elementor reset.css tied-specificity issue as .hp-btn above -- see that comment. */
.hp-cv-gallery__option,
button.hp-cv-gallery__option {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	border: 1.5px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 0.9rem 1rem;
	background: var(--hp-white);
	color: var(--hp-gray-700);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	white-space: normal;
	transition: border-color 0.15s ease;
}

.hp-cv-gallery__option:hover,
button.hp-cv-gallery__option:hover {
	border-color: var(--hp-purple-500);
}

.hp-cv-gallery__option--active,
button.hp-cv-gallery__option--active {
	border-color: var(--hp-purple-600);
	box-shadow: 0 0 0 1px var(--hp-purple-600);
}

.hp-cv-gallery__option:disabled[aria-busy="true"],
button.hp-cv-gallery__option:disabled[aria-busy="true"] {
	cursor: wait;
	opacity: 0.6;
}

.hp-cv-gallery__swatch {
	display: block;
	width: 100%;
	height: 28px;
	border-radius: 4px;
}

.hp-cv-gallery__swatch--signature {
	background: linear-gradient(90deg, #f3eefa 0 55%, #5b2c8c 55% 60%);
}

.hp-cv-gallery__swatch--refined {
	background: linear-gradient(90deg, #ffffff 0 70%, #4a2470 70% 74%);
}

.hp-cv-gallery__swatch--contemporary {
	background: #4c2680;
}

.hp-cv-gallery__name {
	font-weight: 600;
	font-size: 0.95rem;
}

.hp-cv-gallery__badge {
	font-size: 0.75rem;
	color: var(--hp-purple-600);
}

.hp-cv-gallery__current {
	font-size: 0.75rem;
	color: var(--hp-gray-500);
}

/* ---------------------------------------------------------------------
 * CV Creator — account gate, community messaging (CV-14)
 * ------------------------------------------------------------------- */

.hp-cv-account-prompt {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding: 2rem 1rem;
}

.hp-cv-account-prompt .hp-notice {
	text-align: left;
	margin: 1.5rem 0;
}

.hp-cv-account-prompt .hp-btn {
	margin: 0.3rem;
}

.hp-cv-preview-toolbar__community {
	color: var(--hp-purple-600);
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.hp-cv-preview-toolbar__mycvs {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	color: var(--hp-gray-500);
}

/* ---------------------------------------------------------------------
 * My CVs dashboard (CV-15)
 * ------------------------------------------------------------------- */

.hp-cv-dashboard__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.hp-cv-dashboard__table {
	width: 100%;
	border-collapse: collapse;
}

.hp-cv-dashboard__table th,
.hp-cv-dashboard__table td {
	text-align: left;
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--hp-gray-100);
	font-size: 0.9rem;
	vertical-align: top;
}

.hp-cv-dashboard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-start;
}

.hp-cv-dashboard__inline-form {
	display: inline-block;
	margin: 0;
}

.hp-link-btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--hp-purple-600);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.hp-link-btn--danger {
	color: #b91c1c;
}

.hp-cv-dashboard__rename summary {
	color: var(--hp-purple-600);
	cursor: pointer;
	text-decoration: underline;
}

.hp-cv-dashboard__inline-form--rename {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.hp-cv-dashboard__inline-form--rename input[type="text"] {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--hp-gray-100);
	border-radius: 6px;
}

/* Public-facing status badge — the admin equivalent lives in admin.css,
   which is never enqueued on this front-end page. */
.hp-status-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.hp-status-badge--draft { background: #fef3c7; color: #92400e; }
.hp-status-badge--complete { background: #dcfce7; color: #166534; }
.hp-status-badge--warning { background: #fef3c7; color: #92400e; }

/* Same premium gold treatment as every other real Boost badge sitewide
   (--hp-accent-gold, #B8901F -- see .hp-hertsoffers-card__boost below and
   directorist.css's .hp-directory-card-state--boost) -- search results
   span every content type, not just Directorist business listings, so
   this reuses the plugin's own status-badge system rather than a
   Directorist-specific class this page never loads CSS for. */
.hp-status-badge--boost { background: var(--hp-accent-gold, #B8901F); color: #fff; font-weight: 700; }

/* Owner-caught bug (2026-08-22): this list had no dedicated CSS at all, so
   it fell back to a raw bulleted <ul> with default blue/underlined <a>
   text -- reads as an unfinished, unstyled page against the rest of the
   site's branded card language. Reuses the theme's own shared .hp-c-card
   component (each result is now one .hp-c-card--interactive, matching the
   hover/elevation convention used everywhere else) rather than inventing a
   parallel visual style. */
.hp-search__results { display: grid; gap: var(--hp-space-4, 1rem); list-style: none; margin: var(--hp-space-4, 1rem) 0 0; padding: 0; }
.hp-search__result { padding: 0; overflow: hidden; }
/* !important on text-decoration/color: the parent hello-elementor theme's
   own .page-content a rule (an ancestor-class + bare element selector) is
   marginally more specific than a single class here and was winning,
   leaving every result underlined blue/purple like a raw text link. */
.hp-search__result-link { display: block; padding: var(--hp-space-5, 1.25rem); color: inherit !important; text-decoration: none !important; }
.hp-search__result-badges { display: flex; gap: var(--hp-space-2, .5rem); margin-bottom: var(--hp-space-2, .5rem); }
.hp-search__result h2 { margin: 0 0 var(--hp-space-2, .5rem); font-size: 1.1rem; color: var(--hp-color-ink, #1f2937); }
.hp-search__result p { margin: 0 0 var(--hp-space-1, .35rem); color: var(--hp-color-body, #4b5563); }
.hp-search__result p:last-child { margin-bottom: 0; }
.hp-search__result-link:hover h2,
.hp-search__result-link:focus-visible h2 { color: var(--hp-color-primary-600, #7c3aed); }

@media (max-width: 700px) {
	.hp-cv-dashboard__table thead {
		display: none;
	}
	.hp-cv-dashboard__table,
	.hp-cv-dashboard__table tbody,
	.hp-cv-dashboard__table tr,
	.hp-cv-dashboard__table td {
		display: block;
		width: 100%;
	}
	.hp-cv-dashboard__table tr {
		margin-bottom: 1.25rem;
		border-bottom: 2px solid var(--hp-gray-100);
	}
	.hp-cv-dashboard__table td {
		border-bottom: none;
		padding: 0.3rem 0;
	}
	.hp-cv-dashboard__table td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--hp-gray-500);
	}
}

/* ---------------------------------------------------------------------
 * "Improve an existing CV" upload (CV-16)
 * ------------------------------------------------------------------- */

.hp-cv-upload {
	max-width: 640px;
	margin: 0 auto;
}

.hp-cv-upload-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	text-align: center;
	border: 2px dashed var(--hp-gray-200, #d1d5db);
	border-radius: var(--hp-radius);
	padding: 2.5rem 1.5rem;
	margin: 1.5rem 0;
	color: var(--hp-gray-500);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hp-cv-upload-dropzone:hover,
.hp-cv-upload-dropzone:focus-within {
	border-color: var(--hp-purple-600);
	background: #faf9ff;
}

.hp-cv-upload-dropzone--active {
	border-color: var(--hp-purple-600);
	background: #ede9fe;
}

.hp-cv-upload-dropzone__label {
	font-weight: 600;
	color: var(--hp-purple-700, var(--hp-purple-600));
}

.hp-cv-upload-dropzone__filename {
	font-size: 0.9rem;
	color: var(--hp-gray-700, #374151);
}

.hp-cv-upload-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.hp-cv-upload-origin {
	background: #ede9fe;
	border-radius: var(--hp-radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	color: var(--hp-purple-700, var(--hp-purple-600));
}

.hp-cv-upload-origin__actions {
	margin-top: 0.4rem;
}

.hp-cv-upload-origin__actions form {
	display: inline;
}

.hp-cv-reference-panel {
	background: var(--hp-gray-50, #f9fafb);
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1rem 1.1rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}

.hp-cv-reference-panel__title {
	font-weight: 600;
	margin: 0 0 0.4rem;
	color: var(--hp-gray-700, #374151);
}

.hp-cv-reference-panel__text {
	white-space: pre-wrap;
	margin: 0;
	color: var(--hp-gray-500);
	max-height: 12rem;
	overflow-y: auto;
}

/* ---------------------------------------------------------------------
 * "Improve wording" mock-AI suggestion box (CV-17)
 * ------------------------------------------------------------------- */

.hp-cv-improve-btn {
	margin-top: 0.4rem;
}

.hp-cv-suggestion {
	background: #ede9fe;
	border-radius: var(--hp-radius);
	padding: 0.9rem 1.1rem;
	margin: 0.6rem 0 1.2rem;
	font-size: 0.9rem;
}

.hp-cv-suggestion--blocked {
	background: #fff7ed;
	color: #9a3412;
}

.hp-cv-suggestion--blocked p {
	margin: 0;
}

.hp-cv-suggestion__label {
	font-weight: 600;
	margin: 0 0 0.3rem;
	color: var(--hp-purple-700, var(--hp-purple-600));
}

.hp-cv-suggestion__block {
	margin: 0 0 0.5rem;
}

.hp-cv-suggestion__block-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hp-gray-500);
	margin-bottom: 0.15rem;
}

.hp-cv-suggestion__text {
	white-space: pre-wrap;
	margin: 0;
}

.hp-cv-suggestion__actions {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
 * M24: "Advertise With HertsPartners" journey page — custom narrative
 * sections that sit between the existing, already-approved shortcodes
 * (overview/social-reach/channels/packages/testimonials). Deliberately
 * reuses .hp-section/.hp-overview__* rather than inventing a parallel
 * set of classes, so this page stays visually identical to the sections
 * either side of it.
 * ------------------------------------------------------------------- */

.hp-advertise-hero {
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 2.5rem;
}

.hp-advertise-hero__eyebrow {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hp-purple-600);
	margin-bottom: 0.75rem;
}

.hp-advertise-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--hp-black);
	max-width: 46rem;
	margin: 0 auto 1.25rem;
	line-height: 1.15;
}

.hp-advertise-hero .hp-overview__lede {
	margin-left: auto;
	margin-right: auto;
}

.hp-advertise-hero__cta {
	display: inline-flex;
}

.hp-advertise-journey__steps {
	max-width: 60ch;
	margin: 0;
	padding-left: 1.25rem;
	line-height: 1.7;
}

.hp-advertise-journey__steps li {
	margin-bottom: 0.75rem;
}

.hp-advertise-final-cta {
	text-align: center;
}

.hp-advertise-directory-note p {
	max-width: 70ch;
}

/*
 * Wave 4 commercial-UX pass (2026-08-08): the bridge line between the
 * package cards (now near the top of the page) and the supporting trust/
 * detail content below -- deliberately calm, not another CTA, framed as
 * an invitation to keep reading rather than a decision.
 */
.hp-advertise-bridge {
	padding-top: 0;
	padding-bottom: 1.5rem;
	text-align: center;
}

.hp-advertise-bridge__text {
	max-width: 50ch;
	margin: 0 auto;
	color: var(--hp-gray-500);
	font-size: 0.95rem;
}

.hp-newsletter-signup {
	max-width: 480px;
}

.hp-newsletter-signup__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hp-newsletter-signup__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hp-newsletter-signup__consent {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-size: 0.9rem;
	line-height: 1.4;
}

.hp-newsletter-signup__consent input {
	margin-top: 0.2rem;
}

.hp-newsletter-signup__privacy-link {
	font-size: 0.85rem;
	margin: 0;
}

.hp-newsletter-signup__message {
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
}

.hp-newsletter-signup__message--success {
	background: #e6f4ea;
	color: #1e4620;
}

.hp-newsletter-signup__message--error {
	background: #fdecea;
	color: #611a15;
}

/* PX4: HertsJobs public board/detail/My Applications -- reuses .hp-field/.hp-btn/.hp-notice/.hp-status-badge/.hp-link-btn/.hp-table-scroll rather than inventing parallel form/button/table styles. */

/* .hp-table-scroll was referenced by every public dashboard table above
   (Jobs employer, Volunteering host, HertsOffers business, My
   Applications/My Volunteering, CV dashboard) but was only ever defined
   in assets/css/admin.css -- a real gap found during PX9-B browser
   verification: on every one of these public-facing pages the class did
   nothing, so a wide table simply overflowed its container with no
   horizontal-scroll affordance at mobile widths instead of scrolling
   within it. Defined here too, matching admin.css's own rule exactly. */
.hp-table-scroll {
	overflow-x: auto;
}

/* PX6: positive community engagement. */
.hp-community-hub,
.hp-community-box {
	color: var(--hp-color-text, #23213a);
}
.hp-community-page .entry-title {
	color: #fff;
}
.hp-community-hub {
	padding: clamp(1rem, 3vw, 2rem);
	border-radius: var(--hp-radius-lg, 16px);
	background: #fff;
}
.hp-community-box .hp-btn--primary,
.hp-community-box button.hp-btn--primary {
	color: #fff;
}
.hp-community-box .hp-btn--secondary,
.hp-community-box button.hp-btn--secondary {
	color: #6d28d9;
}
.hp-community-hub h1,
.hp-community-hub h2,
.hp-community-hub h3 {
	color: #24123d;
}
.hp-community-box {
	margin-block: 1.25rem;
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--hp-color-border, #dedbea);
	border-radius: var(--hp-radius-lg, 16px);
	background: #fff;
}
/* Owner-flagged (2026-08-20): the "Support this business" heading had no
   size of its own, so it inherited the page's full desktop-scaled h2 --
   fine in that context, but disproportionate inside this compact card,
   where it wrapped to two lines and dominated its own one-line body copy
   and button. Scoped to the box's own heading only, not a global h2 change. */
.hp-community-box h2 {
	font-size: 1.15rem;
	line-height: 1.3;
}
@media (max-width: 480px) {
	.hp-community-box h2 {
		font-size: 1.05rem;
	}
}
.hp-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	align-items: center;
}
.hp-reactions form { margin: 0; }
.hp-community-form {
	display: grid;
	gap: 1rem;
	max-width: 48rem;
}
.hp-community-option {
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 44px;
}
.hp-community-option input { width: 22px; height: 22px; }
.hp-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
}
.hp-field select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--hp-gray-300, #d1d5db);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	background: var(--hp-white);
}

.hp-field select:focus-visible {
	outline: 3px solid var(--hp-purple-500);
	outline-offset: 1px;
	border-color: var(--hp-purple-500);
}

/* Standard-masthead spacing correction (2026-08-07, Platform repo): the
   1.5rem top margin here used to duplicate the shared masthead's own
   bottom margin (block-margin-collapse mostly hid this, but it was a
   second, redundant rule doing the same job with a different value) --
   removed so the masthead's own margin-block-end is the only source of
   this gap, matching every other standard-masthead page. */
.hp-jobs-board__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--hp-gray-50, #f8f8fb);
	border-radius: var(--hp-radius);
}

.hp-jobs-board__filter {
	flex: 1 1 160px;
	min-width: 160px;
	margin-bottom: 0;
}

.hp-jobs-board__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.hp-marketplace-empty {
	margin: 1.5rem 0 0;
	padding: clamp(1.35rem, 4vw, 2.25rem);
	border: 1px solid var(--hp-purple-200, #ddd0ff);
	border-radius: 20px;
	background: linear-gradient(135deg, #fff 0%, var(--hp-purple-50, #f8f5ff) 100%);
	box-shadow: 0 12px 36px rgba(55, 31, 86, .08);
}

.hp-marketplace-empty__eyebrow {
	margin: 0 0 .35rem;
	color: var(--hp-purple-600, #6d28d9);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hp-marketplace-empty h3 {
	margin: 0 0 .6rem;
	color: var(--hp-black, #17131f);
	font-size: clamp(1.45rem, 4vw, 2rem);
	line-height: 1.15;
}

.hp-marketplace-empty > p:last-of-type {
	max-width: 58ch;
	margin-bottom: 0;
	color: var(--hp-gray-600, #5d5666);
	line-height: 1.6;
}

.hp-marketplace-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
}

.hp-marketplace-empty__actions .hp-btn {
	min-height: 44px;
}

/*
 * V13 (Stage B Wave 5, 2026-08-06): rebuilt from a bare text row into a
 * real card with an employer logo/fallback media area, matching the
 * owner's own HertsJobs card direction (employer logo, clear meta chips,
 * Save action, View role CTA, white/lilac surfaces, controlled purple
 * accents). Base padding/border/radius below is unchanged from before --
 * only the layout (media + body side by side) and new elements are added.
 */
.hp-job-card {
	display: flex;
	gap: 1rem;
	background: var(--hp-white);
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.5rem;
	transition: box-shadow .2s ease, transform .2s ease;
}

.hp-job-card:hover {
	box-shadow: 0 12px 30px rgba(55, 31, 86, .08);
	transform: translateY(-2px);
}

.hp-job-card__media {
	display: grid;
	flex: none;
	width: 64px;
	height: 64px;
	place-items: center;
	overflow: hidden;
	border-radius: 14px;
	background: var(--hp-purple-50, #f8f5ff);
}

.hp-job-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* A real uploaded logo fills the tile; the decorative brand-mark fallback stays small and centred, matching the same "never a mostly-empty frame" fix used for Local Updates cards (V12). */
.hp-job-card__media--fallback img {
	width: 34px;
	height: auto;
}

/* Owner remediation (2026-08-18): the real canonical card artwork is a
   landscape editorial image, not a small square logo -- object-fit:contain
   (the default above) would shrink it into the same 64px tile with large
   empty bars either side. cover fills the tile with a sensible centred
   crop instead, same tile size as the logo/fallback cases so the card
   row's own layout needs no restructuring. */
.hp-job-card__media--artwork img {
	object-fit: cover;
}

/* Owner remediation (2026-08-18): real canonical card artwork on the
   single-vacancy detail page -- previously generated (once wired) but
   never displayed anywhere. */
.hp-job-detail__media {
	margin: 1.5rem 0;
	border-radius: var(--hp-radius);
	overflow: hidden;
}
.hp-job-detail__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-job-card__body {
	flex: 1;
	min-width: 0;
}

.hp-job-card__top {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 0.75rem;
}

.hp-job-card__save {
	flex: none;
}

.hp-jobs-board .hp-job-card__save-btn {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 1px solid var(--hp-purple-300, #c4b5fd);
	border-radius: 999px;
	background: var(--hp-purple-50, #f8f5ff);
	color: var(--hp-purple-700, #6d28d9);
	cursor: pointer;
}

.hp-job-card__save-btn svg {
	width: 20px;
	height: 20px;
}

.hp-jobs-board .hp-job-card__save-btn:hover {
	border-color: var(--hp-purple-300, #c4b5fd);
	color: var(--hp-purple-600);
}

.hp-jobs-board .hp-job-card__save-btn--active {
	border-color: var(--hp-purple-300, #c4b5fd);
	background: var(--hp-purple-50, #f8f5ff);
	color: var(--hp-purple-600);
}

.hp-jobs-board .hp-job-card__save-btn:focus-visible {
	outline: 3px solid var(--hp-purple-400, #a78bfa);
	outline-offset: 2px;
}

.hp-job-card__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin: 0 0 1rem;
	color: var(--hp-gray-500);
	font-size: 0.85rem;
}

.hp-job-card__cta {
	min-height: 44px;
}

@media (max-width: 480px) {
	.hp-job-card {
		flex-direction: column;
	}
	.hp-job-card__media {
		width: 48px;
		height: 48px;
	}
}

/* V09 (Stage B Wave 6): shared Rewards sub-nav across Browse/Wallet/History */
.hp-hertsoffers-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.hp-hertsoffers-subnav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--hp-gray-100);
	border-radius: 999px;
	background: var(--hp-white);
	color: var(--hp-gray-500);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.hp-hertsoffers-subnav__link:hover {
	border-color: var(--hp-purple-300, #c4b5fd);
	color: var(--hp-purple-600);
}

.hp-hertsoffers-subnav__link--active {
	border-color: var(--hp-purple-300, #c4b5fd);
	background: var(--hp-purple-50, #f8f5ff);
	color: var(--hp-purple-600);
}

.hp-hertsoffers-subnav__link:focus-visible {
	outline: 3px solid var(--hp-purple-400, #a78bfa);
	outline-offset: 2px;
}

.hp-job-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.2rem;
}

.hp-job-card__title a,
.hp-jobs-board > p > a {
	color: var(--hp-purple-700);
	text-decoration-color: var(--hp-purple-300);
	text-underline-offset: 0.16em;
}

.hp-job-card__title a:hover,
.hp-job-card__title a:focus-visible,
.hp-jobs-board > p > a:hover,
.hp-jobs-board > p > a:focus-visible {
	color: var(--hp-purple-600);
	text-decoration-color: currentColor;
}

.hp-job-card__employer {
	color: var(--hp-gray-500);
	margin: 0 0 0.75rem;
}

.hp-job-card__meta,
.hp-job-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
	color: var(--hp-gray-500);
	margin-bottom: 1rem;
}

.hp-status-badge--featured {
	background: var(--hp-purple-100, #ede9fe);
	color: var(--hp-purple-600, #6d28d9);
}

/* PX8-C: private safety reports and public-safe verification explanations. */
.hp-safety-centre {
	max-width: 900px;
	margin-inline: auto;
}

.hp-safety-centre > section,
.hp-trust-badges {
	margin-block: 1.5rem;
}

.hp-safety-centre .hp-card-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.hp-safety-centre .hp-card,
.hp-trust-badge {
	background: #fff;
	border: 1px solid var(--hp-border, #d8dee8);
	border-radius: var(--hp-radius-lg, 16px);
	padding: clamp(1rem, 3vw, 1.5rem);
	overflow-wrap: anywhere;
}

.hp-trust-badge {
	border-left: 4px solid var(--hp-brand, #3154a5);
}

.hp-safety-centre textarea {
	width: 100%;
}

.hp-job-detail__employer {
	color: var(--hp-gray-500);
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

.hp-job-detail__description {
	min-width: 0;
	max-width: 100%;
	margin: 1.5rem 0;
	overflow-wrap: anywhere;
}

.hp-job-detail__actions {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.hp-job-detail__application-status {
	padding: 1.25rem;
	background: var(--hp-gray-50, #f8f8fb);
	border-radius: var(--hp-radius);
	margin-bottom: 1.5rem;
}

.hp-job-detail__apply-form {
	max-width: 40rem;
}

@media (max-width: 600px) {
	.hp-jobs-board__filters {
		flex-direction: column;
		align-items: stretch;
	}
	.hp-job-detail__actions {
		flex-direction: column;
	}
	.hp-job-detail {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}
	.hp-job-detail .hp-page-masthead--record {
		width: calc(100% - 24px);
		max-width: calc(100% - 24px);
		margin-inline: 12px;
		padding: 18px;
	}
	.hp-job-detail .hp-page-masthead__signals {
		min-width: 0;
		max-width: 100%;
		gap: 6px;
	}
	.hp-job-detail .hp-page-masthead__signal {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.hp-job-detail .hp-notice,
	.hp-job-detail__description,
	.hp-job-detail__application-status,
	.hp-job-detail__apply-form,
	.hp-job-detail > p,
	.hp-job-detail > a,
	.hp-job-detail__actions {
		max-width: calc(100% - 24px);
		margin-inline: 12px;
	}
	.hp-job-detail__actions form,
	.hp-job-detail__actions .hp-btn {
		width: 100%;
	}
	.hp-marketplace-empty__actions .hp-btn {
		width: 100%;
	}
}

/* PX9-C: public HertsOffers discovery board/detail/wallet -- reuses the exact
   Jobs board layout rules above under its own selectors, so the two boards
   feel like the same platform rather than two independently-styled surfaces. */
.hp-hertsoffers-board__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	background: var(--hp-gray-50, #f8f8fb);
	border-radius: var(--hp-radius);
}

.hp-hertsoffers-board__filter {
	flex: 1 1 160px;
	min-width: 160px;
	margin-bottom: 0;
}

.hp-hertsoffers-board__list {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
/* Wave 3 (2026-08-08, discovery-page consolidation): matches the same
   700px/1100px breakpoints already used by Jobs/Events' own result grids
   -- a single column here left the full offers board reading as an
   unusually tall list on desktop next to every other board on the site. */
@media (min-width: 700px) {
	.hp-hertsoffers-board__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.hp-hertsoffers-board__list { grid-template-columns: repeat(3, 1fr); }
}

.hp-hertsoffers-card {
	background: var(--hp-white);
	border: 1px solid var(--hp-gray-100);
	border-radius: var(--hp-radius);
	padding: 1.5rem;
	overflow: hidden; /* Keeps the bled-edge media (below) inside the card's own rounded corners. */
}

/* Owner remediation (2026-08-18): real per-offer artwork, previously
   generated but never displayed anywhere on this board. Bleeds to the
   card's own edges via the negative margins matching its parent's padding
   -- the established pattern for "full-width media, padded text" cards
   elsewhere on this site -- rather than restructuring the card's own
   padding model. Only rendered when a real image is actually resolved
   (see the template); no placeholder box reserves this space otherwise. */
.hp-hertsoffers-card__media {
	display: block;
	margin: -1.5rem -1.5rem 1rem;
}
.hp-hertsoffers-card__media img {
	display: block;
	width: 100%;
	height: 12rem;
	object-fit: cover;
}

.hp-hertsoffers-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

/* V51 (Stage B Wave 6): the discount is the whole reason a resident opens this card -- give it the same visual weight a price gets on a real offer/coupon, not a small chip buried after the business name. */
.hp-hertsoffers-card__discount {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--hp-purple-50, #f8f5ff);
	color: var(--hp-purple-700);
	font-weight: 700;
	font-size: 1rem;
}

.hp-hertsoffers-card__save {
	flex: none;
}

/* Website Boost (D018): same premium gold treatment as the Homepage/Directory Boost badges (--hp-accent-gold, #B8901F, in the theme's tokens.css). */
.hp-hertsoffers-card__boost {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: #B8901F;
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
}

.hp-hertsoffers-card__save-btn {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 1px solid var(--hp-gray-100);
	border-radius: 999px;
	background: var(--hp-white);
	color: var(--hp-gray-500);
	cursor: pointer;
}

.hp-hertsoffers-card__save-btn svg {
	width: 20px;
	height: 20px;
}

.hp-hertsoffers-card__save-btn:hover {
	border-color: var(--hp-purple-300, #c4b5fd);
	color: var(--hp-purple-600);
}

.hp-hertsoffers-card__save-btn--active {
	border-color: var(--hp-purple-300, #c4b5fd);
	background: var(--hp-purple-50, #f8f5ff);
	color: var(--hp-purple-600);
}

.hp-hertsoffers-card__save-btn:focus-visible {
	outline: 3px solid var(--hp-purple-400, #a78bfa);
	outline-offset: 2px;
}

.hp-hertsoffers-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.2rem;
}

.hp-hertsoffers-card__title a,
.hp-hertsoffers-board > p > a {
	color: var(--hp-purple-700);
	text-decoration-color: var(--hp-purple-300);
	text-underline-offset: 0.16em;
}

.hp-hertsoffers-card__title a:hover,
.hp-hertsoffers-card__title a:focus-visible,
.hp-hertsoffers-board > p > a:hover,
.hp-hertsoffers-board > p > a:focus-visible {
	color: var(--hp-purple-600);
	text-decoration-color: currentColor;
}

.hp-hertsoffers-card__business {
	color: var(--hp-gray-500);
	margin: 0 0 0.75rem;
}

.hp-hertsoffers-card__meta,
.hp-hertsoffers-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.9rem;
	color: var(--hp-gray-500);
	margin-bottom: 1rem;
}

.hp-hertsoffers-detail__business {
	color: var(--hp-gray-500);
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

/* Owner remediation (2026-08-18): real per-offer artwork, previously
   generated but never displayed anywhere on this page. */
.hp-hertsoffers-detail__media {
	margin: 1.5rem 0;
	border-radius: var(--hp-radius);
	overflow: hidden;
}
.hp-hertsoffers-detail__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hp-hertsoffers-detail__description,
.hp-hertsoffers-detail__terms {
	margin: 1.5rem 0;
}

.hp-hertsoffers-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
	.hp-hertsoffers-board__filters {
		flex-direction: column;
		align-items: stretch;
	}
	.hp-hertsoffers-detail__actions {
		flex-direction: column;
	}
}

/* PX4: employer self-service dashboard */
.hp-employer-jobs__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 1.5rem;
}

.hp-employer-jobs__actions {
	display: flex;
	gap: 1rem;
}

.hp-employer-vacancy-form__status-actions {
	margin-top: 2rem;
	padding: 1.25rem;
	background: var(--hp-gray-50, #f8f8fb);
	border-radius: var(--hp-radius);
}

.hp-employer-vacancy-form__status-actions form {
	display: inline-block;
	margin: 0 0.75rem 0.75rem 0;
}

.hp-employer-applicant-detail__section {
	margin: 2rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hp-gray-100);
}

.hp-employer-applicant-detail__entry {
	margin-bottom: 1rem;
}

/* PX9 closure: the standalone (no theme header/footer) redemption screen
   rendered directly by WalletController::handle_get_code() -- see its own
   doc comment for why this bypasses the normal template/theme path. Basic
   body reset here since the theme's own global reset never loads. Built
   deliberately high-contrast and legible in low light (a shop till at
   dusk, a phone screen at max brightness in bright sun) rather than
   subtle -- this screen has exactly one job. */
.hp-hertsoffers-wallet-code-page {
	margin: 0;
	padding: 0;
	font-family: var(--hp-font-body, system-ui, -apple-system, sans-serif);
	color: var(--hp-gray-900, #1a1a2e);
	background: var(--hp-gray-50, #f4f4f8);
}

.hp-hertsoffers-redemption {
	max-width: 26rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	text-align: center;
}

/* Full-screen mode: covers the viewport so a resident can hand over their
   phone (or hold it up) without the browser chrome/URL bar competing for
   attention. A plain CSS overlay, not the Fullscreen API -- far more
   reliable across iOS Safari/Android Chrome, which have inconsistent
   Fullscreen API support, and needs no permission prompt. */
.hp-hertsoffers-redemption--fullscreen {
	position: fixed;
	inset: 0;
	max-width: none;
	z-index: 9999;
	background: var(--hp-white, #fff);
	overflow-y: auto;
	padding-top: 2rem;
}

.hp-hertsoffers-redemption__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 1.25rem 0 1.5rem;
	margin-bottom: 1rem;
}

.hp-hertsoffers-redemption__brand-mark {
	font-size: 1.4rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--hp-purple-600);
}

.hp-hertsoffers-redemption__brand-sub {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--hp-gray-500);
}

.hp-hertsoffers-redemption__business {
	margin: 0;
	color: var(--hp-gray-500);
	font-size: 1rem;
}

.hp-hertsoffers-redemption__offer-title {
	margin: 0.15rem 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.2;
}

.hp-hertsoffers-redemption__summary {
	margin: 0 0 1rem;
}

.hp-hertsoffers-redemption__instruction {
	font-weight: 600;
	margin-bottom: 1rem;
}

.hp-hertsoffers-redemption__card {
	margin: 1.25rem 0;
	padding: 1.5rem 1.25rem;
	border-radius: var(--hp-radius-lg, 16px);
	border: 1px solid var(--hp-gray-100);
}

.hp-hertsoffers-redemption__qr-card {
	background: var(--hp-white, #fff);
	/* High-contrast border rather than a subtle shadow -- stays visible
	   under bright shop lighting and on lower-quality screens. */
	border: 2px solid var(--hp-gray-900, #1a1a2e);
}

.hp-hertsoffers-redemption__qr-card--expired {
	opacity: 0.35;
}

.hp-hertsoffers-redemption__qr {
	margin: 0 auto 1rem;
	max-width: 240px;
}

/* Never constrain the SVG's own quiet-zone/contrast -- only its display
   size. The library's own margin/foreground/background choices (opaque
   black on white, generous margin) are left completely untouched. */
.hp-hertsoffers-redemption__qr svg {
	display: block;
	width: 100%;
	height: auto;
}

.hp-hertsoffers-redemption__label {
	margin: 0.75rem 0 0.25rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hp-gray-500);
}

.hp-hertsoffers-redemption__code {
	margin: 0;
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.hp-hertsoffers-redemption__code--small {
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.hp-hertsoffers-redemption__countdown {
	font-weight: 700;
	font-size: 1.05rem;
}

.hp-hertsoffers-redemption__countdown--expired {
	color: var(--hp-red-600, #b91c1c);
}

.hp-hertsoffers-redemption__fullscreen {
	margin: 1rem 0;
}

.hp-hertsoffers-redemption__regenerate {
	margin-top: 0.5rem;
}

/* State cards (withdrawn/paused/expired/already-redeemed/limit-reached) --
   semantic colour, distinct from the brand accent, so a resident or
   member of staff can tell "this isn't going to work" at a glance. */
.hp-hertsoffers-redemption__state-label {
	margin: 0 0 0.35rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
}

.hp-hertsoffers-redemption__card--invalid,
.hp-hertsoffers-redemption__card--withdrawn,
.hp-hertsoffers-redemption__card--already_redeemed,
.hp-hertsoffers-redemption__card--limit_reached {
	background: #fef2f2;
	border-color: #fecaca;
}
.hp-hertsoffers-redemption__card--invalid .hp-hertsoffers-redemption__state-label,
.hp-hertsoffers-redemption__card--withdrawn .hp-hertsoffers-redemption__state-label,
.hp-hertsoffers-redemption__card--already_redeemed .hp-hertsoffers-redemption__state-label,
.hp-hertsoffers-redemption__card--limit_reached .hp-hertsoffers-redemption__state-label {
	color: #b91c1c;
}

.hp-hertsoffers-redemption__card--paused,
.hp-hertsoffers-redemption__card--expired {
	background: #fef3c7;
	border-color: #fde68a;
}
.hp-hertsoffers-redemption__card--paused .hp-hertsoffers-redemption__state-label,
.hp-hertsoffers-redemption__card--expired .hp-hertsoffers-redemption__state-label {
	color: #92400e;
}

@media (max-width: 400px) {
	.hp-hertsoffers-redemption__code {
		font-size: 1.85rem;
	}
}

.hp-hertsoffers-business__staff {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hp-gray-100);
}

.hp-hertsoffers-business__staff-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.hp-hertsoffers-business__staff-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.75rem;
	background: var(--hp-gray-50, #f8f8fb);
	border-radius: var(--hp-radius);
}

.hp-hertsoffers-business__staff-add {
	max-width: 24rem;
}

/* Stage B V15: staging-only "test data" badge on public cards -- never
   rendered in production (see SyntheticDataAuditor::render_badge_if_test_owned()). */
.hp-synthetic-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

/* Premium read-only customer content workspace. */
.hp-customer-workspace{--hp-portal-ink:#21172d;--hp-portal-muted:#706778;--hp-portal-purple:#7625d9;max-width:1180px}.hp-preview-banner{align-items:center;background:#21132e;border-radius:12px;color:#fff;display:flex;gap:14px;margin-bottom:16px;padding:12px 16px}.hp-preview-banner strong{background:#8c3ff0;border-radius:999px;padding:4px 9px}.hp-preview-banner span{opacity:.78}.hp-workspace-hero{align-items:center;background:linear-gradient(135deg,#1f102e,#5f1ca7 65%,#8b41ed);border-radius:24px;box-shadow:0 22px 50px rgba(74,25,124,.2);color:#fff;display:grid;gap:18px;grid-template-columns:auto 1fr auto;margin-bottom:18px;overflow:hidden;padding:28px 30px;position:relative}.hp-workspace-hero:after{background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);content:"";height:300px;position:absolute;right:-100px;top:-170px;width:300px}.hp-workspace-brand{align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:18px;display:flex;height:72px;justify-content:center;overflow:hidden;width:72px}.hp-workspace-brand img{height:100%;object-fit:cover;width:100%}.hp-workspace-brand span{font-size:30px;font-weight:800}.hp-workspace-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;margin:0 0 5px;text-transform:uppercase}.hp-workspace-hero h1{color:#fff;font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;margin:0}.hp-workspace-hero p:last-child{margin:5px 0 0;opacity:.78}.hp-account-chip{align-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;display:flex;font-size:13px;font-weight:700;gap:7px;padding:9px 13px;position:relative;z-index:1}.hp-account-chip i{background:#39dd8d;border-radius:50%;box-shadow:0 0 0 4px rgba(57,221,141,.14);height:8px;width:8px}.hp-workspace-overview{background:#fff;border:1px solid #ece6f2;border-radius:18px;box-shadow:0 8px 26px rgba(43,22,62,.05);display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:36px}.hp-workspace-overview>div{padding:18px 22px}.hp-workspace-overview>div+div{border-left:1px solid #eee8f3}.hp-workspace-overview span,.hp-workspace-overview small{color:var(--hp-portal-muted);display:block;font-size:12px}.hp-workspace-overview strong{color:var(--hp-portal-ink);display:block;font-size:19px;margin-top:3px}.hp-workspace-section-heading{align-items:end;display:flex;justify-content:space-between;margin:30px 0 16px}.hp-workspace-section-heading p{color:var(--hp-portal-purple);font-size:11px;font-weight:800;letter-spacing:.15em;margin:0 0 4px;text-transform:uppercase}.hp-workspace-section-heading h2{color:var(--hp-portal-ink);font-size:26px;letter-spacing:-.025em;margin:0}.hp-workspace-section-heading>span{background:#f2ebfa;border-radius:999px;color:#6c2aae;font-size:12px;font-weight:700;padding:7px 11px}.hp-customer-post-grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.hp-customer-post-card{background:#fff;border:1px solid #eae3f0;border-radius:20px;box-shadow:0 12px 34px rgba(38,17,55,.07);overflow:hidden}.hp-customer-post-card__media{aspect-ratio:16/9;background:linear-gradient(135deg,#e9dcf7,#faf7fd);overflow:hidden;position:relative}
.hp-onboarding-status{align-items:center;background:linear-gradient(135deg,#f8f2ff,#fff);border:1px solid #dcc8f2;border-radius:18px;box-shadow:0 8px 26px rgba(43,22,62,.05);display:grid;gap:16px;grid-template-columns:auto 1fr auto;margin:-18px 0 34px;padding:20px 22px}.hp-onboarding-status__icon{align-items:center;background:#7625d9;border-radius:50%;color:#fff;display:flex;font-size:20px;font-weight:800;height:44px;justify-content:center;width:44px}.hp-onboarding-status p{color:var(--hp-portal-muted);margin:3px 0}.hp-onboarding-status>div>p:first-child{color:var(--hp-portal-purple);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hp-onboarding-status h2{color:var(--hp-portal-ink);font-size:21px;margin:1px 0}.hp-onboarding-status__due{background:#fff;border:1px solid #e6d9f2;border-radius:12px;padding:12px 15px}.hp-onboarding-status__due span,.hp-onboarding-status__due strong{display:block}.hp-onboarding-status__due span{color:var(--hp-portal-muted);font-size:11px}.hp-onboarding-status__note{background:#fff3d6;border-radius:10px;color:#684b00;display:flex;flex-direction:column;margin-top:10px;padding:10px 12px}.hp-onboarding-status--active{background:#eefaf3;border-color:#bfe5ce}.hp-onboarding-status--active .hp-onboarding-status__icon{background:#27a965}
.hp-customer-post-card__media a{display:block;height:100%}.hp-customer-post-card__media img{height:100%;object-fit:contain;width:100%;cursor:pointer}.hp-customer-post-card__media>div{align-items:center;color:#71419e;display:flex;flex-direction:column;gap:7px;height:100%;justify-content:center}.hp-customer-post-card__media>div span{font-size:34px}.hp-platform-chip{background:#fff;border-radius:999px;bottom:12px;box-shadow:0 4px 15px rgba(32,16,45,.16);font-size:12px;font-weight:800;left:12px;padding:7px 11px;position:absolute}.hp-platform-chip--facebook{color:#1769d2}.hp-platform-chip--instagram{color:#b6237e}.hp-platform-chip--tiktok{color:#1f1925}.hp-customer-post-card__body{padding:20px}.hp-customer-post-card__top{align-items:center;display:flex;justify-content:space-between}.hp-customer-post-card__top span{color:#6e2eb0;font-size:12px;font-weight:800;text-transform:uppercase}.hp-customer-post-card__top b{background:#f0e9f8;border-radius:999px;color:#694083;font-size:11px;padding:5px 8px}.hp-customer-post-card time{color:var(--hp-portal-muted);display:block;font-size:13px;font-weight:600;margin:16px 0 5px}.hp-customer-post-card h3{color:var(--hp-portal-ink);font-size:20px;line-height:1.25;margin:0}.hp-caption-preview{background:#faf8fc;border-radius:12px;margin-top:16px;padding:13px}.hp-caption-preview span{color:#6d6376;font-size:11px;font-weight:800;text-transform:uppercase}.hp-caption-preview p{color:#4f4756;font-size:14px;line-height:1.55;margin:5px 0 0}.hp-caption-pending{color:#827887;font-size:13px;font-style:italic;margin:16px 0 0}.hp-workspace-empty{background:linear-gradient(135deg,#faf7fd,#f4ecfb);border:1px dashed #cbb7dc;border-radius:18px;padding:36px;text-align:center}.hp-workspace-empty strong{color:var(--hp-portal-ink);font-size:18px}.hp-workspace-empty p{color:var(--hp-portal-muted);margin:5px 0 0}.hp-workspace-empty--small{padding:20px}.hp-paid-area{margin-top:38px}.hp-paid-confirm{align-items:center!important;background:#e9f8f0!important;color:#137544!important;display:flex;gap:7px}.hp-paid-confirm i,.hp-paid-document-list i{align-items:center;background:#27b56b;border-radius:50%;color:#fff;display:flex;font-style:normal;height:24px;justify-content:center;width:24px}.hp-workspace-note{color:var(--hp-portal-muted);margin:-10px 0 15px}.hp-paid-document-list{display:flex;flex-direction:column;gap:10px}.hp-paid-document-list a{align-items:center;background:#f1faf5;border:1px solid #bfe6d0;border-radius:14px;color:#174e35;display:grid;gap:12px;grid-template-columns:auto 1fr auto;padding:14px 16px;text-decoration:none}.hp-paid-document-list small{color:#5c786a;display:block}.hp-paid-document-list b{font-size:13px}.hp-delivered-list{display:flex;flex-direction:column;gap:8px}.hp-delivered-list>div{align-items:center;background:#fff;border:1px solid #ece7f0;border-radius:12px;display:grid;gap:12px;grid-template-columns:120px 1fr auto;padding:13px 15px}.hp-delivered-list>div span{color:#765392;font-size:12px;font-weight:800}.hp-support-strip{align-items:center;background:#21142c;border-radius:18px;color:#fff;display:flex;justify-content:space-between;margin-top:38px;padding:22px 24px}.hp-support-strip strong{font-size:18px}.hp-support-strip p{margin:3px 0 0;opacity:.72}.hp-support-strip a{background:#fff;border-radius:999px;color:#5c1aa1;font-weight:800;padding:10px 15px;text-decoration:none}.hp-customer-tools{background:#fff;border:1px solid #e8e1ed;border-radius:18px;margin-top:22px;padding:20px}.hp-customer-tools summary{cursor:pointer;display:flex;justify-content:space-between}.hp-customer-tools summary span{color:var(--hp-portal-muted);font-size:13px}.hp-customer-tools>h2{font-size:21px;margin-top:28px}
@media(max-width:760px){.hp-workspace-hero{grid-template-columns:auto 1fr;padding:22px}.hp-account-chip{grid-column:1/-1;justify-self:start}.hp-customer-post-grid{grid-template-columns:1fr}.hp-workspace-overview>div+div{border-left:0;border-top:1px solid #eee8f3}.hp-workspace-section-heading{align-items:flex-start;gap:10px}.hp-support-strip{align-items:flex-start;flex-direction:column;gap:15px}.hp-delivered-list>div{grid-template-columns:1fr}.hp-preview-banner{align-items:flex-start;flex-direction:column}}
.hp-purchase{max-width:920px}.hp-purchase>h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.04em}.hp-purchase-plans{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:28px 0}.hp-purchase-plans a{background:#fff;border:1px solid #e4d9ee;border-radius:15px;color:#2b1b39;display:flex;flex-direction:column;padding:16px;text-decoration:none}.hp-purchase-plans a.is-selected{background:#f6effd;border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.12)}.hp-purchase-plans span{color:#6e5e79;font-size:13px}.hp-purchase-form{background:#fff;border:1px solid #e7ddec;border-radius:22px;box-shadow:0 18px 50px rgba(42,20,61,.08);padding:26px}.hp-purchase-form h2{font-size:21px;margin:28px 0 12px}.hp-purchase-summary{background:linear-gradient(135deg,#2b123e,#7c2edd);border-radius:15px;color:#fff;display:grid;grid-template-columns:1fr 1fr;margin-bottom:26px;padding:18px}.hp-purchase-summary div+div{border-left:1px solid rgba(255,255,255,.2);padding-left:18px}.hp-purchase-summary span,.hp-purchase-summary strong{display:block}.hp-purchase-summary span{font-size:12px;opacity:.7}.hp-purchase-summary strong{font-size:20px}.hp-purchase-addons{display:flex;flex-direction:column;gap:8px}.hp-purchase-addons label{align-items:center;background:#faf8fc;border:1px solid #ece5f1;border-radius:12px;display:flex;gap:16px;justify-content:space-between;padding:12px}.hp-purchase-addons label>span:first-child{display:flex;flex-direction:column}.hp-purchase-addons small{color:#746b7b}.hp-purchase-addons input{margin-left:8px;width:60px}.hp-honeypot{left:-9999px;position:absolute}.hp-purchase .hp-consent-list{display:flex;flex-direction:column;gap:10px}@media(max-width:600px){.hp-purchase-form{padding:18px}.hp-purchase-summary{grid-template-columns:1fr}.hp-purchase-summary div+div{border-left:0;border-top:1px solid rgba(255,255,255,.2);margin-top:12px;padding-left:0;padding-top:12px}.hp-purchase-addons label{align-items:flex-start;flex-direction:column}}

/* Paid partnership onboarding workspace: concise, private and mobile-first. */
.hp-onboarding-workspace{background:linear-gradient(160deg,#fff 0%,#fbf8ff 100%);border:1px solid #e4d6f0;border-radius:22px;box-shadow:0 16px 40px rgba(51,22,76,.08);margin:0 0 38px;padding:6px 26px 26px}.hp-onboarding-form{display:flex;flex-direction:column;gap:18px}.hp-onboarding-form__group{background:#fff;border:1px solid #eee7f3;border-radius:16px;padding:20px}.hp-onboarding-form__group h3,.hp-onboarding-assets h3{color:var(--hp-portal-ink);font-size:19px;margin:0 0 14px}.hp-onboarding-form .hp-field{display:flex;flex:1;flex-direction:column;gap:6px}.hp-onboarding-form .hp-field label,.hp-onboarding-assets .hp-field label{color:#33243f;font-size:13px;font-weight:750}.hp-onboarding-form .hp-field small{color:var(--hp-portal-muted);font-size:12px}.hp-onboarding-form input,.hp-onboarding-form textarea,.hp-onboarding-form select,.hp-onboarding-assets input,.hp-onboarding-assets select{background:#fcfbfd;border:1px solid #dcd2e4;border-radius:10px;color:#281c31;min-height:44px;padding:10px 12px;width:100%}.hp-onboarding-form textarea{min-height:86px;resize:vertical}.hp-onboarding-form input:focus,.hp-onboarding-form textarea:focus,.hp-onboarding-form select:focus,.hp-onboarding-assets input:focus,.hp-onboarding-assets select:focus{border-color:#7c31cf;box-shadow:0 0 0 3px rgba(124,49,207,.12);outline:0}.hp-onboarding-form__actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.hp-onboarding-assets{border-top:1px solid #e7ddec;margin-top:26px;padding-top:24px}.hp-onboarding-assets>p{color:var(--hp-portal-muted)}.hp-onboarding-asset-list{display:grid;gap:8px;list-style:none;margin:18px 0 0;padding:0}.hp-onboarding-asset-list li{align-items:center;background:#fff;border:1px solid #e8e0ee;border-radius:12px;display:grid;gap:10px;grid-template-columns:1fr auto;padding:12px 14px}.hp-onboarding-asset-list a{color:#54208a;display:flex;flex-direction:column;overflow:hidden;text-decoration:none}.hp-onboarding-asset-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hp-onboarding-asset-list small{color:var(--hp-portal-muted)}.hp-link-button{background:transparent;border:0;color:#9e285b;cursor:pointer;font:inherit;font-size:12px;font-weight:800;padding:7px}.hp-link-button:hover{text-decoration:underline}@media(max-width:760px){.hp-onboarding-workspace{padding:4px 16px 20px}.hp-onboarding-form__group{padding:16px}.hp-onboarding-form__actions{align-items:stretch;flex-direction:column}.hp-onboarding-form__actions .hp-btn{width:100%}.hp-onboarding-asset-list li{align-items:start}.hp-onboarding-assets .hp-field-row{grid-template-columns:1fr}}
.hp-purchased-addons{align-items:start;background:#f6fbf8;border:1px solid #cfe8da;border-radius:18px;display:grid;gap:24px;grid-template-columns:minmax(180px,.45fr) 1fr;margin:-18px 0 34px;padding:20px 22px}.hp-purchased-addons p{color:#167345;font-size:11px;font-weight:800;letter-spacing:.13em;margin:0 0 4px;text-transform:uppercase}.hp-purchased-addons h2{color:var(--hp-portal-ink);font-size:21px;margin:0}.hp-purchased-addons ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}.hp-purchased-addons li{align-items:start;background:#fff;border:1px solid #dcebe3;border-radius:11px;display:grid;gap:10px;grid-template-columns:auto 1fr;padding:11px 12px}.hp-purchased-addons li>span{align-items:center;background:#2cb36d;border-radius:50%;color:#fff;display:flex;font-size:11px;height:22px;justify-content:center;width:22px}.hp-purchased-addons strong,.hp-purchased-addons small{display:block}.hp-purchased-addons small{color:var(--hp-portal-muted);margin-top:2px}.hp-onboarding-confirmations{background:#f7f2fb;border-radius:12px;display:flex;flex-direction:column;gap:11px;margin-top:18px;padding:15px}.hp-onboarding-confirmations label{align-items:flex-start;color:#473850;display:flex;font-size:13px;gap:9px;line-height:1.45}.hp-onboarding-confirmations input{flex:0 0 auto;margin-top:3px;min-height:0;width:auto}.hp-onboarding-confirmations a{font-weight:800}.hp-onboarding-asset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-onboarding-asset-list li{grid-template-columns:auto 1fr auto}.hp-onboarding-asset-list__preview{border-radius:8px;height:52px;overflow:hidden;width:64px}.hp-onboarding-asset-list__preview img{height:100%;object-fit:cover;width:100%}@media(max-width:760px){.hp-purchased-addons{grid-template-columns:1fr}.hp-onboarding-asset-list{grid-template-columns:1fr}}

/* Payment details retain readable contrast on normal and hovered receipt surfaces. */
.hp-paid-document-list a small { color: #3e5c4c !important; }

/* Quiet, optional CV question cards. No colour inherited from unrelated panels. */
.hp-cv-guidance{margin:14px 0 22px;padding:18px;border:1px solid #d8c4ee;border-radius:16px;background:#f7f2fc;color:#39244e}
.hp-cv-guidance summary{cursor:pointer;font-weight:650;font-size:15px}
.hp-cv-guidance p,.hp-cv-guidance label{color:inherit!important;font-size:14px;line-height:1.6}
.hp-cv-guidance label{display:block;font-weight:650;margin-top:16px}
.hp-cv-guidance__chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.hp-cv-guidance__chips button{white-space:normal;min-height:42px;padding:9px 14px;border:1px solid #b999d6;border-radius:999px;background:#fff;color:#452568;font:inherit;font-size:14px;cursor:pointer}
.hp-cv-guidance__chips button[aria-pressed=true]{background:#6530a8;color:#fff;border-color:#6530a8}
.hp-cv-guidance button:focus-visible,.hp-cv-guidance summary:focus-visible{outline:3px solid #9250e6;outline-offset:3px}
.hp-cv-guidance textarea{width:100%;box-sizing:border-box;background:#fff;color:#291b38;border:1px solid #ac8cc8;border-radius:10px;padding:12px}
.hp-experience-dark .hp-cv-guidance{background:#291c36;color:#eee5f8;border-color:#62467c}
.hp-experience-dark .hp-cv-guidance__chips button{background:#382447;color:#f3eafa;border-color:#8863a5}
.hp-experience-dark .hp-cv-guidance__chips button[aria-pressed=true]{background:#743bb4;color:#fff}
.hp-experience-dark .hp-cv-guidance textarea{background:#171020;color:#f3eafa;border-color:#8863a5}

/* Explicit month/year fields replace inconsistent native month widgets. */
.hp-wizard-step .hp-cv-date{border:0;padding:0;margin:0;min-width:0}
.hp-wizard-step .hp-cv-date legend{font-weight:650;margin-bottom:10px;font-size:15px}
.hp-cv-date__controls{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(85px,1fr);gap:10px}
.hp-wizard-step .hp-cv-date__controls label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}
.hp-wizard-step .hp-cv-date__controls :is(select,input){width:100%;min-width:0;box-sizing:border-box;min-height:48px;padding:10px 12px;border:1px solid #bda7d0;border-radius:10px;background:#fff;color:#2e1c3f;font:inherit;font-size:16px;line-height:1.4}
.hp-wizard-step .hp-cv-date__hint{font-size:12px;line-height:1.5;margin:8px 0;color:#675370}
.hp-experience-dark .hp-wizard-step .hp-cv-date__controls :is(select,input){background:#20142c;color:#f3eafa;border-color:#876a9d;color-scheme:dark}
.hp-experience-dark .hp-wizard-step .hp-cv-date__hint{color:#cdbbdc}
.hp-wizard-step .hp-cv-date__controls :disabled{opacity:.55}
.hp-wizard-step label[hidden]{display:none!important}
.hp-wizard-step .hp-field-row:has(.hp-cv-date){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.hp-wizard-step .hp-field-row:has(.hp-cv-date)>.hp-field--checkbox{grid-column:1/-1}
@media(max-width:600px){.hp-wizard-step .hp-field-row:has(.hp-cv-date){grid-template-columns:minmax(0,1fr)}}

.hp-wizard-step :is(input,textarea)::placeholder{color:#74617f;opacity:1}
.hp-experience-dark .hp-wizard-step :is(input,textarea)::placeholder{color:#bdaccb;opacity:1}
.hp-wizard-step .hp-cv-repeat-entry{min-width:0;box-sizing:border-box}
.hp-wizard-step .hp-field{min-width:0}
@media(max-width:600px){.hp-wizard-step .hp-field-row{display:grid;grid-template-columns:minmax(0,1fr)}.hp-wizard-step :is(input,textarea,select){max-width:100%;box-sizing:border-box}}
.hp-wizard-step .hp-wizard-nav .hp-btn{box-sizing:border-box;min-width:0;max-width:100%}

.hp-experience-dark .hp-wizard-step :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select){background:#20142c;color:#f3eafa;border-color:#876a9d;color-scheme:dark}
.hp-experience-dark .hp-wizard-step{color:#f3eafa}
.hp-experience-dark .hp-wizard-step :is(h2,h3,h4,label,legend){color:#f3eafa}
.hp-experience-dark .hp-wizard-step :is(.hp-description,.hp-help,small){color:#cdbbdc}
.hp-experience-dark .hp-wizard-step .hp-cv-repeat-entry{border-color:#62467c}
.hp-experience-dark .hp-wizard-step :is(.hp-wizard-step__intro,.hp-field__help){color:#cdbbdc}
/* HP-SOL-009: headings sit on the theme surface, so pair their dark-theme foreground explicitly. */
.hp-experience-dark .hp-customer-workspace .hp-workspace-section-heading h2{color:#f7f2fb}
.hp-experience-dark .hp-customer-workspace .hp-workspace-note{color:#cfc3d8}
/* Canonical plan Terms stay readable instead of compressing four columns on phones. */
.hp-terms-pricing{width:100%;border-collapse:collapse;line-height:1.6;color:inherit}
.hp-terms-pricing th,.hp-terms-pricing td{padding:16px;text-align:left;vertical-align:top;border-bottom:1px solid #b5a4c6;color:inherit;background:transparent}
.hp-terms-pricing ul{padding-left:20px;margin:12px 0 0}
@media(max-width:600px){
 .hp-terms-pricing thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .hp-terms-pricing,.hp-terms-pricing tbody{display:block}
 .hp-terms-pricing tr{display:block;margin:16px 0;border:1px solid #b5a4c6;border-radius:14px;padding:8px}
 .hp-terms-pricing td{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;padding:12px 8px;overflow-wrap:anywhere}
 .hp-terms-pricing td:last-child{border-bottom:0}
 .hp-terms-pricing td::before{content:attr(data-label);font-weight:700}
}
.hp-paid-document-list a,.hp-paid-document-list a:visited{color:#351052!important}.hp-paid-document-list a strong,.hp-paid-document-list a b{color:#351052!important}.hp-paid-document-list a:hover{background:#e4f6ec;border-color:#76c79b}.hp-paid-document-list a:focus-visible,.hp-support-strip a:focus-visible{outline:3px solid #5b179a;outline-offset:3px}.hp-support-strip a,.hp-support-strip a:visited{color:#4b117d!important}.hp-renewal-pending{align-items:center;background:#fbf7ff;border:1px solid #d9c8e7;border-radius:14px;color:#2c2034;display:grid;gap:12px;grid-template-columns:auto 1fr;padding:14px 16px}.hp-renewal-pending i{align-items:center;background:#7b3ab6;border-radius:50%;color:#fff;display:flex;font-style:normal;font-weight:800;height:24px;justify-content:center;width:24px}.hp-renewal-pending small{color:#594d62;display:block;margin-top:3px}

/* Shared unavailable-feature destination: honest, useful, and readable in both themes. */
.hp-coming-soon.hp-feature-unavailable {
 max-width: 1040px; margin: 0 auto; padding: clamp(36px, 7vw, 88px) clamp(20px, 4vw, 48px);
 background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left; color: #52445e;
}
.hp-feature-unavailable .hp-feature-unavailable__eyebrow {color:#6d28d9; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;}
.hp-feature-unavailable :is(h1,h2) {color:#251331; font-size:clamp(32px, 5vw, 58px); line-height:1.1; letter-spacing:-.035em; margin:20px 0;}
.hp-feature-unavailable p {max-width:640px; font-size:17px; line-height:1.65; color:inherit;}
.hp-feature-unavailable .hp-feature-unavailable__reason {font-weight:600; color:#35223f;}
.hp-feature-unavailable__links {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:32px 0 24px;}
.hp-feature-unavailable__links a {display:flex; justify-content:space-between; gap:16px; align-items:center; padding:24px; border:1px solid #d6c4e7; border-radius:18px; background:#f7f1fc; color:#53218b; font-size:17px; font-weight:650; text-decoration:none;}
.hp-feature-unavailable__links a:hover {background:#eee2fb; border-color:#8953bd;}
.hp-feature-unavailable a:focus-visible {outline:3px solid #9055ec; outline-offset:4px;}
.hp-feature-unavailable a.hp-feature-unavailable__home {color:#652ba3; text-underline-offset:4px;}
.hp-experience-dark .hp-coming-soon.hp-feature-unavailable {color:#d5c7df;}
.hp-experience-dark .hp-feature-unavailable :is(h1,h2), .hp-experience-dark .hp-feature-unavailable .hp-feature-unavailable__reason {color:#f5effb;}
.hp-experience-dark .hp-feature-unavailable .hp-feature-unavailable__eyebrow, .hp-experience-dark .hp-feature-unavailable a.hp-feature-unavailable__home {color:#d2b2ff;}
.hp-experience-dark .hp-feature-unavailable__links a {background:#24192f; border-color:#503662; color:#f5effb;}
.hp-experience-dark .hp-feature-unavailable__links a:hover {background:#342043; border-color:#a06fce;}
@media(max-width:600px){.hp-feature-unavailable__links {grid-template-columns:1fr;} .hp-feature-unavailable__links a {padding:20px;}}

.hp-feature-unavailable h2 {font-size:clamp(28px,3vw,40px);}
/* Jobs and Volunteers share the same filter and empty-result components. */
.hp-experience-dark .hp-jobs-board__filters label {color:#e0cdef;}
.hp-experience-dark .hp-jobs-board__filters input,
.hp-experience-dark .hp-jobs-board__filters select {background:#18111f;color:#f5effb;border-color:#705384;}
.hp-experience-dark .hp-jobs-board__filters input::placeholder {color:#c4b0d3;opacity:1;}
.hp-experience-dark .hp-jobs-board__filters .hp-compact-filters__toggle {color:#dec7ff;border-color:#9971c4;}
.hp-experience-dark .hp-marketplace-empty {background:#21182b;border-color:#503662;box-shadow:none;}
.hp-experience-dark .hp-marketplace-empty h3 {color:#f5effb;}
.hp-experience-dark .hp-marketplace-empty > p:last-of-type {color:#d5c7df;}
.hp-experience-dark .hp-marketplace-empty .hp-marketplace-empty__eyebrow {color:#d2b2ff;}
.hp-experience-dark .hp-marketplace-empty .hp-btn--secondary {color:#dec7ff;background:transparent;border-color:#8e69b7;}

/* =========================================================
   DARK VALUES FOR TWO SURFACES THAT SET THEIR OWN LITERALS
   L01.1 (2026-09-12)
   -------------------------------------------------------
   Measured on real staging, which has the offers and polls content Local
   does not. Both of these bypass the palette tokens above with literal
   colours, so the dark token block never reached them.

   The community hub painted itself #fff with a hard dark heading colour, so
   in dark mode its copy sat at 1.21:1 on a white panel. The HertsOffers
   subnav's active chip is --hp-purple-50 with --hp-purple-600 text; both
   stay light, and the active item measured 2:1.
   ========================================================= */

.hp-experience-dark .hp-community-hub {
	background: var( --hp-color-surface, #21162c );
	border: 1px solid var( --hp-color-border, #44334f );
}

.hp-experience-dark .hp-community-hub,
.hp-experience-dark .hp-community-box {
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-community-hub h1,
.hp-experience-dark .hp-community-hub h2,
.hp-experience-dark .hp-community-hub h3 {
	color: var( --hp-color-ink, #eee6f7 );
}

.hp-experience-dark .hp-community-hub p,
.hp-experience-dark .hp-community-box p {
	color: var( --hp-color-text-muted, #c3b6d0 );
}

.hp-experience-dark .hp-community-box .hp-btn--secondary,
.hp-experience-dark .hp-community-box button.hp-btn--secondary {
	color: #d6b4ff;
}

.hp-experience-dark .hp-hertsoffers-subnav__link {
	background: var( --hp-color-surface, #21162c );
	border-color: var( --hp-color-border, #44334f );
	color: var( --hp-color-text-muted, #c3b6d0 );
}

.hp-experience-dark .hp-hertsoffers-subnav__link:hover {
	border-color: #8b5cf6;
	color: #e2cfff;
}

.hp-experience-dark .hp-hertsoffers-subnav__link--active {
	background: #3a2458;
	border-color: #8b5cf6;
	color: #f1e6ff;
}

/* Customer workspace surfaces follow the shared site theme as a single system. */
.hp-experience-dark .hp-customer-workspace {
 --hp-portal-ink:#f5effb; --hp-portal-muted:#c9bdd5; --hp-portal-purple:#c69aff;
 color:var(--hp-portal-ink);
}
.hp-experience-dark .hp-customer-workspace :is(.hp-workspace-overview,.hp-customer-post-card,.hp-customer-tools,.hp-delivered-list>div,.hp-onboarding-form__group,.hp-onboarding-asset-list li) {
 background:#241b30; border-color:#51405f; color:var(--hp-portal-ink);
}
.hp-experience-dark .hp-customer-workspace .hp-workspace-overview>div+div {border-color:#51405f}
.hp-experience-dark .hp-customer-workspace :is(.hp-caption-preview,.hp-onboarding-confirmations) {background:#191220}
.hp-experience-dark .hp-customer-workspace :is(.hp-caption-preview span,.hp-caption-preview p,.hp-caption-pending,.hp-customer-tools summary span,.hp-onboarding-confirmations label,.hp-delivered-list>div span) {color:var(--hp-portal-muted)}
.hp-experience-dark .hp-customer-workspace :is(.hp-customer-post-card__top span,.hp-onboarding-asset-list a) {color:#d1afff}
.hp-experience-dark .hp-customer-workspace :is(.hp-customer-post-card__top b,.hp-workspace-section-heading>span:not(.hp-paid-confirm)) {background:#3b2751;color:#e0c9fa}
.hp-experience-dark .hp-customer-workspace :is(.hp-workspace-empty,.hp-customer-post-card__media,.hp-onboarding-workspace) {background:linear-gradient(135deg,#30213e,#201629);border-color:#624b76}
.hp-experience-dark .hp-customer-workspace .hp-customer-post-card__media>div {color:#d5bee9}
.hp-experience-dark .hp-customer-workspace :is(.hp-portal-form label,.hp-onboarding-form .hp-field label,.hp-onboarding-assets .hp-field label) {color:#eee4f7}
.hp-experience-dark .hp-customer-workspace :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) {background:#191220;color:#f5effb;border-color:#806791;color-scheme:dark}
.hp-experience-dark .hp-customer-workspace :is(input,textarea)::placeholder {color:#bdaccb;opacity:1}
.hp-customer-workspace :is(.hp-workspace-overview>div,.hp-customer-post-card__body,.hp-paid-document-list a>span,.hp-delivered-list>div>strong) {min-width:0;overflow-wrap:anywhere}
.hp-customer-workspace .hp-workspace-brand img {object-fit:contain}
.hp-portal-login .hp-section__note a {text-decoration:underline;text-underline-offset:3px}

/* CV journey: all five labelled steps remain visible without a scroll strip. */
.hp-wizard-progress.hp-cv-progress{overflow:visible}
.hp-cv-progress ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-width:0;gap:6px}
.hp-cv-progress .hp-wizard-progress__step{min-width:0;align-items:stretch}
.hp-cv-progress .hp-wizard-progress__step>a,.hp-cv-progress .hp-wizard-progress__step>span[aria-current]{width:100%;min-width:0;box-sizing:border-box;flex-direction:column;text-align:center;white-space:normal;padding:10px 4px;gap:6px;border-radius:12px;line-height:1.35}
.hp-cv-progress .hp-wizard-progress__label{display:block;overflow-wrap:normal}
.hp-cv-progress .hp-wizard-progress__num{flex-shrink:0}
@media(max-width:600px){.hp-cv-progress ol{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-cv-progress .hp-wizard-progress__label{font-size:12px}}

/* ------------------------------------------------------------------ *
 * Live Signals — report and block
 *
 * Quiet by design. A report control that shouts invites reporting as a
 * reaction to disagreement; one that is hard to find fails the people who
 * actually need it. So: a small always-present affordance, a real sheet.
 *
 * Light and dark are both defined from tokens rather than one being a
 * filtered version of the other, and every transition is dropped under
 * prefers-reduced-motion.
 * ------------------------------------------------------------------ */

/*
 * Every control on this surface is a <button>, and hello-elementor's reset.css
 * styles buttons via `[type=button], [type=submit], button` -- an ATTRIBUTE
 * selector, which carries exactly the same specificity as one class, loaded
 * after this file. A bare `.hp-signal-report` therefore lost the cascade and
 * the whole Live Signals surface rendered in the parent theme's crimson
 * default: 3px corners, #c36 border and text, inline-block, nowrap.
 *
 * The compound `button.hp-x` form below is the same fix already used for the
 * CV buttons (see button.hp-btn, ~line 130) -- it raises specificity by one
 * element and wins regardless of load order, while leaving the `<a>` variants
 * of the same classes untouched. It is asserted by a regression guard, because
 * deleting the `button.` half silently restores the crimson buttons.
 */
.hp-signal-report,
button.hp-signal-report {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hp-color-ink-muted, #6b7280);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: .55;
	transition: opacity .18s ease, background-color .18s ease;
}

.hp-signal-report:hover,
button.hp-signal-report:hover,
.hp-signal-report:focus-visible,
button.hp-signal-report:focus-visible {
	opacity: 1;
	/* The parent theme's reset also carries a :hover rule (crimson fill, white
	   text) at the same specificity as a single class, so stating both colours
	   here is what actually keeps this control looking like itself. */
	color: var(--hp-color-ink-muted, #6b7280);
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.hp-signal-report:focus-visible,
button.hp-signal-report:focus-visible {
	outline: 2px solid var(--hp-color-primary-500, #6d28d9);
	outline-offset: 2px;
}

.hp-signal-sheet {
	width: min(480px, calc(100% - 2rem));
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--hp-color-surface, #fff);
	color: var(--hp-color-ink, #111827);
	box-shadow: 0 24px 60px rgba(17, 24, 39, .28);
}

.hp-signal-sheet::backdrop {
	background: rgba(17, 24, 39, .55);
	backdrop-filter: blur(2px);
}

.hp-signal-sheet__inner { padding: 1.25rem 1.25rem 1rem; }

.hp-signal-sheet__grip {
	width: 40px;
	height: 4px;
	margin: 0 auto .9rem;
	border-radius: 999px;
	background: var(--hp-color-ink-muted, #9ca3af);
	opacity: .35;
}

.hp-signal-sheet__title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; }
.hp-signal-sheet__lead  { margin: 0 0 .9rem; font-size: .85rem; color: var(--hp-color-ink-muted, #6b7280); }
.hp-signal-sheet__reasons { display: grid; gap: .25rem; margin-bottom: .9rem; }

.hp-signal-reason {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .5rem .6rem;
	border-radius: 10px;
	font-size: .9rem;
	cursor: pointer;
}

.hp-signal-reason:hover { background: color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 7%, transparent); }
.hp-signal-reason input { margin-top: .2rem; accent-color: var(--hp-color-primary-500, #6d28d9); }

.hp-signal-sheet__status { min-height: 1.2em; margin: 0 0 .75rem; font-size: .85rem; }
.hp-signal-sheet__status[data-tone="ok"]    { color: #15803d; }
.hp-signal-sheet__status[data-tone="error"] { color: #b91c1c; }

.hp-signal-sheet__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.hp-signal-btn,
button.hp-signal-btn {
	flex: 1 1 auto;
	padding: .6rem .9rem;
	border: 1px solid var(--hp-color-card-border, #e5e7eb);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.hp-signal-btn--primary,
button.hp-signal-btn--primary {
	border-color: transparent;
	background: var(--hp-color-primary-500, #6d28d9);
	color: #fff;
}

.hp-signal-btn--quiet,
button.hp-signal-btn--quiet { flex: 0 0 auto; border-color: transparent; opacity: .7; font-weight: 500; }
.hp-signal-btn[disabled] { opacity: .5; cursor: progress; }

/*
 * Hover states, for the same reason as the compound selectors above: the
 * parent theme's reset paints EVERY button crimson with white text on hover,
 * at a specificity a lone class cannot beat. A control with no :hover rule of
 * its own therefore had one -- the wrong one.
 */
.hp-signal-btn:hover,
.hp-signal-btn:focus-visible,
button.hp-signal-btn:hover,
button.hp-signal-btn:focus-visible {
	background: color-mix(in srgb, currentColor 7%, transparent);
	color: inherit;
}

.hp-signal-btn--primary:hover,
.hp-signal-btn--primary:focus-visible,
button.hp-signal-btn--primary:hover,
button.hp-signal-btn--primary:focus-visible {
	background: var(--hp-color-primary-700, #5b21b6);
	color: #fff;
}

.hp-signal-sheet__note {
	margin: .85rem 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--hp-color-ink-muted, #6b7280);
}

@media (max-width: 600px) {
	/* On a phone this is a bottom sheet, not a floating box. */
	.hp-signal-sheet {
		width: 100%;
		max-width: none;
		margin: auto auto 0;
		border-radius: 18px 18px 0 0;
	}
	.hp-signal-sheet__actions .hp-signal-btn { flex: 1 1 100%; }
}

/*
 * Dark mode on this site is a CLASS (.hp-experience-dark), and ONLY a class.
 *
 * These components briefly also carried @media (prefers-color-scheme: dark)
 * copies, on the reasoning that an OS-dark visitor should be covered before
 * the theme's toggle script sets the class. That reasoning was wrong in a way
 * the rest of the site is not: site-experience.js follows the OS only until
 * the visitor CHOOSES, so someone on a dark device who picks the light theme
 * keeps matching the media query for good -- and got dark component colours
 * painted onto a light page. Harper's body text landed at roughly 2:1 against
 * white that way.
 *
 * Every declaration in those blocks was already duplicated below as a class
 * rule, so they bought nothing but the bug. The theme's other ~310 dark rules
 * use the class alone; these now do too.
 */
.hp-experience-dark .hp-signal-sheet,
.hp-experience-dark ~ * .hp-signal-sheet {
	background: #181227;
	color: #f3f4f6;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.hp-experience-dark .hp-signal-sheet::backdrop { background: rgba(0, 0, 0, .66); }
.hp-experience-dark .hp-signal-sheet__lead,
.hp-experience-dark .hp-signal-sheet__note { color: #c9c2d6; }
.hp-experience-dark .hp-signal-btn { border-color: rgba(255, 255, 255, .18); }
.hp-experience-dark .hp-signal-sheet__status[data-tone="ok"]    { color: #4ade80; }
.hp-experience-dark .hp-signal-sheet__status[data-tone="error"] { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
	.hp-signal-report,
	button.hp-signal-report { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Live Now — structured local telemetry, not a social feed.
 *
 * The difference is not decoration. A feed rewards posting; a telemetry
 * surface rewards being useful and then getting out of the way. So a card
 * leads with WHAT and WHEN, the person is a quiet byline at the foot, bodies
 * are clamped rather than expanded, and there is nothing to farm.
 * ------------------------------------------------------------------ */

.hp-live-now { margin: 0; }

/*
 * When the host page supplies the heading, the head row carries only the
 * pulse and the count, so it must not reserve a title's worth of space.
 */
.hp-live-now--headed-by-host .hp-live-now__head { align-items: center; gap: .5rem; }
.hp-live-now--headed-by-host .hp-live-now__pulse { flex: 0 0 auto; }

.hp-live-now__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .75rem;
}

.hp-live-now__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hp-color-primary-700, #5b21b6);
}

/* The heartbeat. One small living thing on the page, not a light show. */
.hp-live-now__pulse {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--hp-color-primary-500, #6d28d9);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 60%, transparent);
	animation: hp-live-pulse 2.4s ease-out infinite;
}

@keyframes hp-live-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 55%, transparent); }
	70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 0%, transparent); }
}

.hp-live-now__count { margin: 0; font-size: .8rem; color: var(--hp-color-ink-muted, #6b7280); }
.hp-live-now__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.hp-live-card {
	position: relative;
	padding: .75rem .85rem;
	border: 1px solid var(--hp-color-card-border, #e5e7eb);
	border-left-width: 3px;
	border-radius: 12px;
	background: var(--hp-color-surface, #fff);
}

.hp-live-card--urgent { border-left-color: #d97706; }
.hp-live-card--warm   { border-left-color: #db2777; }
.hp-live-card--live   { border-left-color: var(--hp-color-primary-500, #6d28d9); }
.hp-live-card--calm   { border-left-color: #94a3b8; }
.hp-live-card.is-resolved { opacity: .72; }

/*
 * The meta row wraps as a ROW, never inside its own labels. On a phone
 * "Lost & Found" was breaking across two lines and shoving "Still happening"
 * onto two more, so a card's first line -- the part that is scanned -- was
 * the messiest thing on the surface. The category and the state each stay
 * whole; if they cannot all fit, the row wraps between them instead.
 */
.hp-live-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .35rem; }

.hp-live-chip {
	padding: .12rem .5rem;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 10%, transparent);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hp-live-card__age { font-size: .72rem; color: var(--hp-color-ink-muted, #6b7280); white-space: nowrap; }

.hp-live-card__state {
	margin-inline-start: auto;
	font-size: .7rem;
	color: var(--hp-color-ink-muted, #6b7280);
	white-space: nowrap;
}

.hp-live-card__state--live { color: #15803d; }

.hp-live-card__body {
	margin: 0 0 .4rem;
	font-size: .92rem;
	line-height: 1.45;
	/* Clamped on purpose: the feed stays scannable and the thread is where
	   the full thing lives. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hp-live-card__foot { display: flex; align-items: center; gap: .6rem; font-size: .76rem; }
.hp-live-card__who { color: var(--hp-color-ink-muted, #6b7280); font-weight: 600; }

.hp-live-card__replies,
button.hp-live-card__replies {
	padding: 0;
	border: 0;
	background: none;
	color: var(--hp-color-primary-700, #5b21b6);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hp-live-card__replies:hover,
.hp-live-card__replies:focus-visible,
button.hp-live-card__replies:hover,
button.hp-live-card__replies:focus-visible {
	background: none;
	color: var(--hp-color-primary-700, #5b21b6);
}

.hp-live-now__empty {
	padding: 1.25rem;
	border: 1px dashed var(--hp-color-card-border, #e5e7eb);
	border-radius: 12px;
	text-align: center;
}

.hp-live-now__empty-title { margin: 0 0 .3rem; font-weight: 700; }
.hp-live-now__empty-note  { margin: 0; font-size: .82rem; color: var(--hp-color-ink-muted, #6b7280); }

/* Same reasoning as the sheet above: the site's dark mode is a class. */
.hp-experience-dark .hp-live-now__title { color: #c4b5fd; }
/*
 * Three sides, not four. `border-color` is a shorthand, and at 0-2-0 it beat
 * the 0-1-0 tone rules below -- so in dark mode every card lost the coloured
 * left edge that says whether it is traffic, a lost pet or a question. The
 * category tone is the fastest thing to read on the surface; it should not
 * depend on which theme someone happens to be in.
 */
.hp-experience-dark .hp-live-card {
	background: rgba(255, 255, 255, .04);
	border-top-color: rgba(255, 255, 255, .1);
	border-right-color: rgba(255, 255, 255, .1);
	border-bottom-color: rgba(255, 255, 255, .1);
	color: #f3f4f6;
}
.hp-experience-dark .hp-live-card__body { color: #ece9f2; }
.hp-experience-dark .hp-live-card__age,
.hp-experience-dark .hp-live-card__who,
.hp-experience-dark .hp-live-card__state { color: #b6aec6; }
.hp-experience-dark .hp-live-card__state--live { color: #4ade80; }
.hp-experience-dark .hp-live-card__replies { color: #c4b5fd; }
.hp-experience-dark .hp-live-now__count { color: #b6aec6; }
.hp-experience-dark .hp-live-now__empty { border-color: rgba(255, 255, 255, .16); }
.hp-experience-dark .hp-live-now__empty-note { color: #b6aec6; }

@media (prefers-reduced-motion: reduce) {
	.hp-live-now__pulse { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Live Signal thread.
 *
 * The feed stays compact and the conversation lives here. A surface that
 * expands every card into its replies becomes a comment feed within a week,
 * and a comment feed rewards argument rather than usefulness. So: the
 * subject is pinned, replies are plain and chronological, and there is
 * nothing to react to.
 * ------------------------------------------------------------------ */

.hp-thread-sheet {
	width: min(560px, calc(100% - 2rem));
	max-height: min(80vh, 720px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--hp-color-surface, #fff);
	color: var(--hp-color-ink, #111827);
	box-shadow: 0 24px 60px rgba(17, 24, 39, .28);
}

.hp-thread-sheet::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); }
.hp-thread-sheet__inner { display: flex; flex-direction: column; max-height: inherit; padding: 1rem 1.15rem 1.15rem; }
.hp-thread-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hp-thread-sheet__title { margin: 0; font-size: 1rem; font-weight: 700; }

.hp-thread-sheet__close,
button.hp-thread-sheet__close {
	width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 999px;
	background: transparent; color: inherit;
	font-size: 22px; line-height: 1; cursor: pointer; opacity: .6;
}
.hp-thread-sheet__close:hover,
.hp-thread-sheet__close:focus-visible,
button.hp-thread-sheet__close:hover,
button.hp-thread-sheet__close:focus-visible { opacity: 1; background: transparent; color: inherit; }

/* Pinned, so the conversation always has its subject in view. */
.hp-thread-parent {
	margin: .6rem 0 .8rem;
	padding: .7rem .85rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 7%, transparent);
}

.hp-thread-replies {
	flex: 1 1 auto;
	margin: 0;
	padding: 0 .1rem;
	overflow-y: auto;
	list-style: none;
}

.hp-thread-reply { padding: .55rem 0; border-top: 1px solid var(--hp-color-card-border, #e5e7eb); }
.hp-thread-reply:first-child { border-top: 0; }
.hp-thread-reply--empty { color: var(--hp-color-ink-muted, #6b7280); font-size: .85rem; }
.hp-thread-reply__meta { margin: 0 0 .15rem; font-size: .73rem; font-weight: 600; color: var(--hp-color-ink-muted, #6b7280); }
.hp-thread-reply__text { margin: 0; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }

.hp-thread-sheet__status { min-height: 1.1em; margin: .5rem 0 0; font-size: .82rem; }
.hp-thread-sheet__status[data-tone="ok"]    { color: #15803d; }
.hp-thread-sheet__status[data-tone="error"] { color: #b91c1c; }

.hp-thread-compose { display: flex; gap: .5rem; align-items: flex-end; margin-top: .6rem; }
.hp-thread-compose textarea {
	flex: 1 1 auto;
	padding: .55rem .7rem;
	border: 1px solid var(--hp-color-card-border, #e5e7eb);
	border-radius: 10px;
	font: inherit;
	font-size: .9rem;
	resize: vertical;
	background: transparent;
	color: inherit;
}
.hp-thread-compose .hp-signal-btn { flex: 0 0 auto; }

.hp-thread-sheet__note { margin: .7rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--hp-color-ink-muted, #6b7280); }

@media (max-width: 600px) {
	.hp-thread-sheet { width: 100%; max-width: none; max-height: 88vh; margin: auto auto 0; border-radius: 18px 18px 0 0; }
}

/* The site's dark mode is a class, not the OS preference -- see the note on
   the report sheet above. Both are declared. */
.hp-experience-dark .hp-thread-sheet { background: #181227; color: #f3f4f6; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.hp-experience-dark .hp-thread-sheet::backdrop { background: rgba(0, 0, 0, .66); }
.hp-experience-dark .hp-thread-reply { border-top-color: rgba(255, 255, 255, .1); }
.hp-experience-dark .hp-thread-reply__meta,
.hp-experience-dark .hp-thread-reply--empty,
.hp-experience-dark .hp-thread-sheet__note { color: #b6aec6; }
.hp-experience-dark .hp-thread-reply__text { color: #ece9f2; }
.hp-experience-dark .hp-thread-compose textarea { border-color: rgba(255, 255, 255, .18); color: #f3f4f6; }

/* ------------------------------------------------------------------ *
 * Harper · HertsPartners Bot
 *
 * Rendered in its own region, never as a list item beside residents'
 * signals, and visually distinct from them: a dashed edge and the byline
 * first, so nobody has to read carefully to work out it is automated.
 * ------------------------------------------------------------------ */

.hp-harper { display: grid; gap: .5rem; margin-top: .6rem; }

.hp-harper-card {
	padding: .7rem .85rem;
	border: 1px dashed color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 40%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--hp-color-primary-500, #6d28d9) 4%, transparent);
}

/* The byline comes FIRST and is never styled to look like a nickname. */
.hp-harper-card__who {
	margin: 0 0 .2rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hp-color-primary-700, #5b21b6);
}

.hp-harper-card__title { margin: 0 0 .2rem; font-size: .9rem; font-weight: 700; }
.hp-harper-card__body  { margin: 0 0 .4rem; font-size: .82rem; line-height: 1.45; color: var(--hp-color-ink-muted, #6b7280); }

.hp-harper-card__action {
	font-size: .8rem;
	font-weight: 600;
	color: var(--hp-color-primary-700, #5b21b6);
	text-decoration: none;
}
.hp-harper-card__action:hover { text-decoration: underline; text-underline-offset: 2px; }

/*
 * The site's dark mode is a class, not the OS preference.
 *
 * A `prefers-color-scheme: dark` block used to sit here and repainted these
 * three colours for every visitor whose DEVICE was in dark mode, including
 * the overwhelming majority reading the site in its light theme. It dropped
 * Harper's body text to #b6aec6 and its link to #c4b5fd on a white card --
 * about 2:1 against the background, against the 4.5:1 that body text needs.
 * The bot's own explanation of how moderation works was the least readable
 * text on the page, on exactly the devices most people hold.
 */
.hp-experience-dark .hp-harper-card { border-color: rgba(196, 181, 253, .35); background: rgba(196, 181, 253, .06); }
.hp-experience-dark .hp-harper-card__who,
.hp-experience-dark .hp-harper-card__action { color: #c4b5fd; }
.hp-experience-dark .hp-harper-card__title { color: #f3f4f6; }
.hp-experience-dark .hp-harper-card__body { color: #b6aec6; }

/* ------------------------------------------------------------------ *
 * Joining in: the invitation, and the compose control.
 * ------------------------------------------------------------------ */

.hp-join-sheet, .hp-compose-sheet {
	width: min(480px, calc(100% - 2rem));
	padding: 0; border: 0; border-radius: 18px;
	background: var(--hp-color-surface, #fff);
	color: var(--hp-color-ink, #111827);
	box-shadow: 0 24px 60px rgba(17, 24, 39, .28);
}
.hp-join-sheet::backdrop, .hp-compose-sheet::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); }
.hp-join-sheet__inner { padding: 1.25rem 1.25rem 1.1rem; }
.hp-join-sheet__title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; }
.hp-join-sheet__body { margin: 0 0 1rem; font-size: .87rem; line-height: 1.5; color: var(--hp-color-ink-muted, #6b7280); }
.hp-join-sheet__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hp-join-sheet__actions .hp-signal-btn { text-align: center; text-decoration: none; }

/* Posting sits below the signals: this surface is for reading first. */
.hp-live-compose { margin-top: .6rem; }

.hp-live-compose__open,
button.hp-live-compose__open {
	display: flex; flex-direction: column; gap: 2px;
	width: 100%; padding: .7rem .85rem;
	border: 1px dashed var(--hp-color-card-border, #d8d3e2);
	border-radius: 12px;
	background: transparent; color: inherit; font: inherit;
	text-align: left; cursor: pointer;
}
.hp-live-compose__open:hover,
button.hp-live-compose__open:hover { border-color: var(--hp-color-primary-500, #6d28d9); background: transparent; color: inherit; }
.hp-live-compose__open:focus-visible,
button.hp-live-compose__open:focus-visible { outline: 2px solid var(--hp-color-primary-500, #6d28d9); outline-offset: 2px; }
.hp-live-compose__prompt { font-size: .9rem; font-weight: 600; }
.hp-live-compose__hint { font-size: .76rem; color: var(--hp-color-primary-700, #5b21b6); font-weight: 600; }

.hp-compose-categories { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; }
.hp-compose-category { cursor: pointer; }
.hp-compose-category input { position: absolute; opacity: 0; pointer-events: none; }
.hp-compose-category span {
	display: inline-block; padding: .3rem .65rem;
	border: 1px solid var(--hp-color-card-border, #e5e7eb);
	border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.hp-compose-category input:checked + span {
	border-color: transparent;
	background: var(--hp-color-primary-500, #6d28d9);
	color: #fff;
}
.hp-compose-category input:focus-visible + span { outline: 2px solid var(--hp-color-primary-500, #6d28d9); outline-offset: 2px; }

.hp-compose-sheet textarea {
	width: 100%; padding: .6rem .7rem; margin-bottom: .6rem;
	border: 1px solid var(--hp-color-card-border, #e5e7eb);
	border-radius: 10px; font: inherit; font-size: .9rem;
	background: transparent; color: inherit; resize: vertical;
}

@media (max-width: 600px) {
	.hp-join-sheet, .hp-compose-sheet { width: 100%; max-width: none; margin: auto auto 0; border-radius: 18px 18px 0 0; }
	.hp-join-sheet__actions .hp-signal-btn { flex: 1 1 100%; }
}

/* The site's dark mode is a class, not the OS preference. */
.hp-experience-dark .hp-join-sheet,
.hp-experience-dark .hp-compose-sheet { background: #181227; color: #f3f4f6; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.hp-experience-dark .hp-join-sheet__body { color: #b6aec6; }
.hp-experience-dark .hp-live-compose__open { border-color: rgba(255, 255, 255, .2); }
.hp-experience-dark .hp-live-compose__hint { color: #c4b5fd; }
.hp-experience-dark .hp-compose-category span { border-color: rgba(255, 255, 255, .2); }
.hp-experience-dark .hp-compose-sheet textarea { border-color: rgba(255, 255, 255, .2); color: #f3f4f6; }

/* ------------------------------------------------------------------ *
 * Tonight — immediate utility, not event discovery.
 *
 * Three short windows, and a window with nothing in it is not drawn at
 * all. A quiet evening is allowed to look quiet.
 * ------------------------------------------------------------------ */

.hp-tonight { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--hp-color-card-border, #e5e7eb); }
.hp-tonight__title { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-color-primary-700, #5b21b6); }
.hp-tonight__window { margin-bottom: .55rem; }
.hp-tonight__label { margin: 0 0 .2rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hp-color-ink-muted, #6b7280); }
.hp-tonight__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.hp-tonight__item { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-size: .85rem; }
.hp-tonight__item a { color: inherit; font-weight: 600; text-decoration: none; }
.hp-tonight__item a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hp-tonight__meta { font-size: .76rem; color: var(--hp-color-ink-muted, #6b7280); }

/* The site's dark mode is a class, not the OS preference. */
.hp-experience-dark .hp-tonight { border-top-color: rgba(255, 255, 255, .1); }
.hp-experience-dark .hp-tonight__title { color: #c4b5fd; }
.hp-experience-dark .hp-tonight__label,
.hp-experience-dark .hp-tonight__meta { color: #b6aec6; }
.hp-experience-dark .hp-tonight__item a { color: #f3f4f6; }