/* LUMEN — Phase 6a: Sitewide Foundation Extension.
 *
 * v0.28.3 — RESIDUAL SPECIFICITY REPAIR (real-browser-confirmed). Full history:
 *   v0.28.0 — sitewide defaults too STRONG (element + :not() specificity
 *             beat every existing LUMEN component's own classes: giant
 *             gold pill backgrounds appeared on Session Explorer).
 *   v0.28.1 — over-corrected to zero specificity everywhere
 *             (`:where(body.lumen-scope) :where(...)`), which protected
 *             LUMEN components but let ordinary Blocksy/WooCommerce
 *             defaults beat the sitewide layer too — Cart/My Account
 *             reverted to bare theme styling, foundation had no visible
 *             effect on generic public surfaces.
 *   v0.28.2 — introduced the intended three-level cascade (below), but its
 *             WooCommerce-context button rule and My Account active-nav
 *             rule still wrapped the actually-matching compound selector
 *             in `:where()`, so those two specific rules still lost to
 *             Blocksy on element-count tie-breaks (confirmed via live
 *             `document.styleSheets` inspection on staging: Blocksy's
 *             `.woocommerce button.button` is 0,2,1 vs. our 0,2,0; Blocksy's
 *             `.woocommerce-MyAccount-navigation ul li.is-active a` is
 *             0,2,3 vs. our 0,2,0 — and that rule never even set
 *             `background`, only `color`).
 *   v0.28.3 (this file) — same three-level cascade, kept exactly as
 *             approved; only those two specific rule bodies were rewritten
 *             as plain (non-:where()) compound selectors so their real
 *             specificity (0,3,1 and 0,3,2 respectively) exceeds Blocksy's
 *             confirmed values. No other rule in this file changed.
 *
 *       LEVEL 1  Blocksy / WordPress / WooCommerce defaults
 *       LEVEL 2  LUMEN Sitewide Foundation            (fallback)
 *       LEVEL 3  Session Explorer / Booking / Contract /
 *                Checkout Gating / Order Received      (authoritative)
 *
 * HOW LEVEL 2 BEATS LEVEL 1 (see also class-lumen-sitewide.php's load
 * order, priority 20 + registered-early-for-dependency at priority 1):
 *   - `.lumen-scope` (the gate) is a REAL selector here, never inside
 *     `:where()` — every default below carries at least that one class
 *     of real specificity, beating a bare element selector outright.
 *   - Where WooCommerce's own markup uses a known, stable compound class
 *     pattern (`.woocommerce a.button`, its notices,
 *     `.woocommerce-MyAccount-navigation a`), this file mirrors that same
 *     real structure with `.lumen-scope` prefixed on top of it — the
 *     ordinary way any WooCommerce-aware theme wins that exact
 *     specificity contest, not an arbitrary escalation. As of v0.28.3, the
 *     two rules confirmed via live browser testing to need it write out
 *     the full compound selector list plainly (no `:where()`) instead of
 *     wrapping the matching part — every other rule in this file keeps its
 *     original `:where()`-wrapped target list, per the instruction not to
 *     globally increase specificity beyond what's actually needed.
 *   - The plain per-element TARGET LIST inside each *other* rule (the part
 *     listing which tags/classes it applies to) stays wrapped in
 *     `:where()`, so adding more elements to that list later never
 *     increases the rule's specificity further.
 *
 * HOW LEVEL 3 BEATS LEVEL 2:
 *   - Every LUMEN-owned surface (Session Explorer, Booking, Contract,
 *     Checkout Gating) already styles its own elements by a component
 *     class of its own (`.dbl-se-commit`, `.dbl-bcs-submit-btn`,
 *     `.dbl-bcs-contract-required-btn`, …) at or above this file's
 *     specificity floor.
 *   - Those surfaces' stylesheets now explicitly declare this file's
 *     handle (`dbl-bcs-lumen-sitewide`) as a `wp_enqueue_style`
 *     dependency (see class-lumen-sitewide.php's dependency_handles()),
 *     so WordPress guarantees they print AFTER this file — winning any
 *     remaining specificity ties by cascade order, deterministically,
 *     not by accident of class-init order.
 *
 * `.lumen-card` remains a plain opt-in utility class (normal, non-zero,
 * non-:where specificity) — nothing applies it automatically, so it can
 * never collide with anything; a later sub-phase adds it deliberately.
 *
 * Everything here is transform/opacity/filter/color based — no canvas, no
 * WebGL, nothing that runs continuously without a real trigger — per the
 * approved performance rules.
 */

/* ── Base page canvas ────────────────────────────────────────────────
   A dark fallback so a page only relying on this foundation (with DBL
   Visual Engine off) never falls back to a bare white WordPress page. */
body.lumen-scope {
	background-color: var(--lumen-ground);
}

/* ── Links (Level 2 default) ─────────────────────────────────────────
   Specificity: one class (.lumen-scope). Beats a bare `a`, loses to any
   surface or theme selector with its own class — which is the intended
   fallback behavior for plain links with no other styling claim on them. */
.lumen-scope :where(a) {
	color: var(--lumen-gold);
	text-decoration-color: rgba(217, 164, 65, 0.35);
}
.lumen-scope :where(a:hover, a:focus-visible) {
	color: var(--lumen-gold-bright);
}

/* ── Shared button component — generic default (Level 2) ─────────────
   Catches plain buttons/submits and core block buttons that carry no
   other framework class. Specificity: one class. */
.lumen-scope :where(
	button,
	input[type="submit"],
	input[type="button"],
	.button,
	.wp-block-button__link
) {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--lumen-gold);
	color: #17140d;
	border: 1px solid var(--lumen-gold);
	border-radius: 999px;
	padding: 12px 26px;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: none;
}
.lumen-scope :where(
	button:hover:not(:disabled),
	input[type="submit"]:hover:not(:disabled),
	input[type="button"]:hover:not(:disabled),
	.button:hover,
	.wp-block-button__link:hover
) {
	background: var(--lumen-gold-bright);
	border-color: var(--lumen-gold-bright);
	box-shadow: 0 6px 22px rgba(217, 164, 65, 0.3);
	transform: translateY(-1px);
}

/* ── Shared button component — WooCommerce-context default (Level 2) ──
   WooCommerce always wraps its own templates in a `.woocommerce`
   container, and Blocksy's own theme CSS matches that context with real,
   non-:where() compound selectors — confirmed via live inspection on
   staging (main.min.css: `.woocommerce button.button { ... }`, no
   !important, specificity 0,2,1). A `:where()`-wrapped version of this
   rule only reaches 0,2,0 and LOSES that tie-break on element count, which
   is exactly why Cart's Apply Coupon / Update Cart stayed theme-red under
   v0.28.2. Fix: write these as plain compound selectors (no :where())
   mirroring Blocksy's real structure with `.lumen-scope` prefixed on top,
   which reaches 0,3,1 — beating Blocksy's 0,2,1 on class count before
   element count is even compared. Still requires `.woocommerce` as an
   ancestor, so this structurally can't reach Session Explorer, Booking, or
   Contract — none of those render inside a `.woocommerce` container. */
.lumen-scope .woocommerce a.button,
.lumen-scope .woocommerce button.button,
.lumen-scope .woocommerce input.button,
.lumen-scope .woocommerce #respond input#submit {
	font-family: 'Space Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--lumen-gold);
	color: #17140d;
	border: 1px solid var(--lumen-gold);
	border-radius: 999px;
	padding: 12px 26px;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	box-shadow: none;
}
.lumen-scope .woocommerce a.button:hover,
.lumen-scope .woocommerce button.button:hover:not(:disabled),
.lumen-scope .woocommerce input.button:hover:not(:disabled),
.lumen-scope .woocommerce #respond input#submit:hover {
	background: var(--lumen-gold-bright);
	border-color: var(--lumen-gold-bright);
	box-shadow: 0 6px 22px rgba(217, 164, 65, 0.3);
	transform: translateY(-1px);
}

/* A secondary/quiet button variant, opt-in via class — for later
   sub-phases that need a lower-emphasis action without every button on
   the page being solid gold. */
body.lumen-scope .lumen-btn-quiet {
	background: transparent;
	color: var(--lumen-ink);
	border-color: rgba(217, 164, 65, 0.4);
}
body.lumen-scope .lumen-btn-quiet:hover {
	background: rgba(217, 164, 65, 0.1);
	color: var(--lumen-gold-bright);
	box-shadow: none;
}

/* ── My Account navigation (Level 2 default, WooCommerce-context) ─────
   WooCommerce's own My Account tabs render inside
   `.woocommerce-MyAccount-navigation` — a real, stable class WooCommerce
   itself defines, so this can target it directly with real specificity
   rather than relying on the generic link default above.
   Confirmed via live inspection on staging: Blocksy's woocommerce.min.css
   sets the active tab's (e.g. "Dashboard") background directly on the
   `<a>` via `.woocommerce-MyAccount-navigation ul li.is-active a`
   (specificity 0,2,3, no !important) — driven by
   `var(--account-nav-background-active-color, var(--theme-palette-color-1))`,
   which is why it renders as a bright theme-red block. The prior
   :where()-wrapped rule here only reached 0,2,0 AND never set `background`
   at all — it only ever touched `color`, so it could not have won this
   even at full strength. Fix: a plain (non-:where()) selector reaching
   0,3,2 — beating Blocksy's 0,2,3 on class count — that sets both
   `background` and `color` for the active tab, giving Phase 6a's fallback
   a coherent LUMEN active-navigation state instead of leaving the old
   theme-red block. Presentation only; WooCommerce's own active/current-tab
   behavior is untouched. */
.lumen-scope .woocommerce-MyAccount-navigation a {
	color: var(--lumen-ink-dim);
	border-color: rgba(217, 164, 65, 0.15);
}
.lumen-scope .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--lumen-gold);
	color: #17140d;
	border-color: var(--lumen-gold);
}
.lumen-scope .woocommerce-MyAccount-navigation a:hover,
.lumen-scope .woocommerce-MyAccount-navigation a:focus-visible {
	color: var(--lumen-gold-bright);
}

/* ── Shared form input component (Level 2 default) ────────────────────
   input[type="password"] is deliberately EXCLUDED: password fields
   commonly have a theme/browser-supplied show/hide "eye" control
   positioned against the field's default box model, and changing that
   field's padding/box-sizing sitewide previously produced a duplicate-
   icon report on My Account → Account Details. Leaving password fields
   fully unstyled here keeps their pre-Phase-6a rendering. */
.lumen-scope :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="search"],
	input[type="url"],
	select,
	textarea
) {
	background: var(--lumen-ground-raised);
	color: var(--lumen-ink);
	border: 1px solid rgba(217, 164, 65, 0.3);
	border-radius: 3px;
	padding: 10px 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lumen-scope :where(input:focus, select:focus, textarea:focus) {
	outline: none;
	border-color: var(--lumen-gold);
	box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
}
/* ::placeholder can't sit inside :where() reliably across browsers, so
   this keeps small non-zero specificity — low risk, rarely contested. */
body.lumen-scope input::placeholder,
body.lumen-scope textarea::placeholder {
	color: var(--lumen-ink-faint);
}

/* ── Shared notice component (Level 2 default) ────────────────────────
   General-purpose dark/gold notice treatment for any WooCommerce message
   this plugin doesn't already give its own specific styling to.
   checkout-guard.css's cart/checkout-scoped rules use body-class-scoped
   selectors WITH !important and remain authoritative there regardless;
   this is the sitewide fallback for everywhere else (e.g. My Account). */
.lumen-scope :where(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	background: var(--lumen-ground-raised);
	color: var(--lumen-ink);
	border-top-color: var(--lumen-gold);
}
.lumen-scope :where(.woocommerce-error) {
	border-top-color: var(--lumen-status-attention);
}

/* ── Shared card component (utility class, opt-in only) ───────────────
   Not applied automatically to any WooCommerce or LUMEN markup — that's
   for Phase 6b/6c/6d to opt individual surfaces into once their own
   layout work happens. */
body.lumen-scope .lumen-card {
	background: var(--lumen-ground-raised);
	border: 1px solid rgba(217, 164, 65, 0.18);
	border-radius: 4px;
	padding: 24px;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.lumen-scope .lumen-card:hover {
	border-color: rgba(217, 164, 65, 0.45);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.lumen-scope :where(button, .button, a.button),
	body.lumen-scope .lumen-card {
		transition: none !important;
		transform: none !important;
	}
}

/* v0.39.8 added a `.grecaptcha-badge { z-index: 2 !important; }` rule
   here to address mobile regression testing showing Google reCAPTCHA
   v3's fixed-position corner badge sitting on top of page content and
   controls in some views. REMOVED in v0.39.9: simply lowering the
   badge's own stacking priority is not, by itself, a proven fix — it
   only fixes ordering relative to elements that also set a z-index
   higher than 2; ordinary in-flow page content with no stacking context
   of its own can still end up painted on top of a fixed-position element
   depending on DOM order and each element's own stacking context, so
   this could just as easily let ordinary content cover the badge instead
   of the other way around, without real browser rendering to verify
   which actually happens on the affected mobile views. Per this pass's
   explicit instruction, this is intentionally left UNFIXED here rather
   than shipping an unproven change: the badge is not hidden, reCAPTCHA
   is not disabled, and no third-party integration behavior is touched.
   This remains a required staging item — reproduce the exact overlap on
   a real mobile device/browser, identify which specific element(s) sit
   over the badge (or vice versa) and why, and only then apply a
   positioning correction verified against that real rendering. */

/* ════════════════════════════════════════════════════════════════════
 * v0.45.0 — SITEWIDE LUMEN COMPONENT LANGUAGE EXTENSION.
 *
 * Builds directly on the three-level cascade already established above
 * (v0.28.0–v0.28.3) — nothing here changes that architecture. This
 * section is additive only: it (a) reaches a handful of generic
 * WooCommerce surfaces the original Phase 6a pass didn't yet cover
 * (login/register/lost-password forms, checkboxes/radios, order &
 * downloads tables, pagination), and (b) introduces a small, reusable
 * signature-motif vocabulary (Lightline, Frame Corners, Focus Halo,
 * Exposure Sweep, Status Pulse) as opt-in utility classes, plus the
 * Journey Rail and Account Dashboard components used by the new PHP in
 * includes/class-lumen-journey-rail.php and includes/class-lumen-
 * account.php. Every rule below follows the same specificity discipline
 * as the rules above it: `.lumen-scope` (or `body.lumen-scope`) stays a
 * real selector (the gate), and per-element/class TARGET LISTS stay
 * wrapped in `:where()` so adding more targets later never escalates
 * specificity. Transform/opacity/box-shadow only; every animation below
 * has a matching `prefers-reduced-motion: reduce` override.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Checkboxes / radios (Level 2 default) ───────────────────────────
   Left mostly native (never reimplementing OS-level accessibility
   affordances) — just recolors the accent to match the LUMEN gold
   instead of the browser/theme default blue, and gives the focus ring
   the same treatment other inputs already get above. */
.lumen-scope :where(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--lumen-gold);
}
.lumen-scope :where(input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible) {
	outline: 2px solid var(--lumen-gold);
	outline-offset: 2px;
}

/* ── Login / Register / Lost Password (Level 2 default) ──────────────
   WooCommerce's own stable form classes — never touches field names,
   IDs, or validation, only presentation. */
.lumen-scope :where(
	form.woocommerce-form-login,
	form.woocommerce-form-register,
	form.woocommerce-ResetPassword,
	form.lost_reset_password
) {
	background: var(--lumen-ground-raised);
	border: 1px solid rgba(217, 164, 65, 0.18);
	border-radius: 6px;
	padding: 28px;
	max-width: 480px;
}
.lumen-scope :where(
	form.woocommerce-form-login .form-row label,
	form.woocommerce-form-register .form-row label,
	form.woocommerce-ResetPassword .form-row label,
	form.lost_reset_password .form-row label
) {
	color: var(--lumen-ink-dim);
	font-size: 13px;
	letter-spacing: 0.02em;
}
.lumen-scope :where(
	.woocommerce-form-login__rememberme,
	.woocommerce-form-register__generate-password
) {
	color: var(--lumen-ink-dim);
}
.lumen-scope :where(.woocommerce-LostPassword, .woocommerce-form-login__submit + p) {
	margin-top: 14px;
}
.lumen-scope :where(.u-column1, .u-column2) {
	background: transparent;
}

/* A short, restrained branded intro line above the login/lost-password
   form — opt-in only via .lumen-auth-intro, added by
   includes/class-lumen-account.php's safe, documented hook usage
   (woocommerce_before_customer_login_form). Never wraps or alters the
   actual <form> WooCommerce renders. */
body.lumen-scope .lumen-auth-intro {
	max-width: 480px;
	margin: 0 0 18px;
	color: var(--lumen-ink-dim);
	font-size: 14px;
	line-height: 1.6;
}
body.lumen-scope .lumen-auth-intro strong {
	color: var(--lumen-ink);
}

/* ── Orders / Downloads tables (Level 2 default) ─────────────────────
   WooCommerce's own real, stable table classes. */
.lumen-scope :where(
	table.woocommerce-orders-table,
	table.woocommerce-table--order-downloads,
	table.shop_table
) {
	background: transparent;
	border-collapse: separate;
	border-spacing: 0 8px;
	width: 100%;
}
.lumen-scope :where(
	table.woocommerce-orders-table thead th,
	table.woocommerce-table--order-downloads thead th,
	table.shop_table thead th
) {
	color: var(--lumen-ink-faint);
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	border: none;
	padding: 0 14px 8px;
}
.lumen-scope :where(
	table.woocommerce-orders-table tbody tr,
	table.woocommerce-table--order-downloads tbody tr
) {
	background: var(--lumen-ground-raised);
}
.lumen-scope :where(
	table.woocommerce-orders-table tbody td,
	table.woocommerce-table--order-downloads tbody td,
	table.shop_table tbody td
) {
	color: var(--lumen-ink);
	border-top: 1px solid rgba(217, 164, 65, 0.12);
	border-bottom: 1px solid rgba(217, 164, 65, 0.12);
	padding: 14px;
}
.lumen-scope :where(
	table.woocommerce-orders-table tbody td:first-child,
	table.woocommerce-table--order-downloads tbody td:first-child
) {
	border-left: 1px solid rgba(217, 164, 65, 0.12);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.lumen-scope :where(
	table.woocommerce-orders-table tbody td:last-child,
	table.woocommerce-table--order-downloads tbody td:last-child
) {
	border-right: 1px solid rgba(217, 164, 65, 0.12);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
/* Order status pill — reuses the Status Pulse language below instead of
   WooCommerce/theme's own plain colored-text status class. */
.lumen-scope :where(.woocommerce-orders-table__cell-order-status) {
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ── Pagination (Level 2 default) ─────────────────────────────────── */
.lumen-scope :where(.woocommerce-pagination ul.page-numbers) {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	flex-wrap: wrap;
}
.lumen-scope :where(.woocommerce-pagination .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	color: var(--lumen-ink-dim);
	border: 1px solid rgba(217, 164, 65, 0.18);
	border-radius: 3px;
	font-family: 'Space Mono', monospace;
	font-size: 12px;
}
.lumen-scope :where(.woocommerce-pagination .page-numbers.current) {
	background: var(--lumen-gold);
	color: #17140d;
	border-color: var(--lumen-gold);
}

/* ── Breadcrumbs (Level 2 default) ───────────────────────────────────
   Only applied inside .lumen-scope, and only WooCommerce's own real
   breadcrumb wrapper class — never a generic ".breadcrumb" guess that
   could collide with unrelated theme markup. */
.lumen-scope :where(.woocommerce-breadcrumb) {
	color: var(--lumen-ink-faint);
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.lumen-scope :where(.woocommerce-breadcrumb a) {
	color: var(--lumen-ink-dim);
}

/* ── Premium empty-state component (opt-in, used by class-lumen-
   account.php and the wc_empty_cart_message filter) ─────────────────
   A single, reusable shape for "Your next frame starts here." /
   "Your lightbox is waiting." / etc. — never auto-applied to anything,
   so it can never collide with unrelated markup. */
body.lumen-scope .lumen-empty-state {
	text-align: center;
	padding: 56px 24px;
	border: 1px dashed rgba(217, 164, 65, 0.25);
	border-radius: 6px;
	background: var(--lumen-ground-raised);
}
body.lumen-scope .lumen-empty-state__line {
	display: block;
	width: 46px;
	height: 1px;
	margin: 0 auto 18px;
	background: linear-gradient(90deg, transparent, var(--lumen-gold), transparent);
}
body.lumen-scope .lumen-empty-state__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 22px;
	color: var(--lumen-ink);
	margin: 0 0 10px;
}
body.lumen-scope .lumen-empty-state__body {
	color: var(--lumen-ink-dim);
	font-size: 14px;
	margin: 0 0 22px;
}

/* ══════════════ SIGNATURE MOTIF VOCABULARY (opt-in only) ══════════════ */

/* LUMEN LIGHTLINE — a thin gold directional line that sweeps across the
   edge of a card/panel on entrance or activation. Applied via the
   .lumen-lightline class on an element; the sweep itself is a
   ::after pseudo-element so it never affects layout. */
body.lumen-scope .lumen-lightline {
	position: relative;
	overflow: hidden;
}
body.lumen-scope .lumen-lightline::after {
	content: "";
	position: absolute;
	top: 0;
	left: -40%;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(217, 164, 65, 0.35), transparent);
	transform: translateX(0);
	animation: lumen-lightline-sweep 1100ms ease-out 1;
	pointer-events: none;
}
@keyframes lumen-lightline-sweep {
	from { transform: translateX(0); }
	to { transform: translateX(350%); }
}

/* LUMEN FRAME CORNERS — small viewfinder-style corner marks, already
   used by Session Explorer/Home; formalized here as a reusable utility
   for any other card that wants the same photographic language. */
body.lumen-scope .lumen-frame-corners {
	position: relative;
}
body.lumen-scope .lumen-frame-corners::before,
body.lumen-scope .lumen-frame-corners::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: var(--lumen-gold);
	opacity: 0.65;
	pointer-events: none;
}
body.lumen-scope .lumen-frame-corners::before {
	top: 8px;
	left: 8px;
	border-top: 1px solid var(--lumen-gold);
	border-left: 1px solid var(--lumen-gold);
}
body.lumen-scope .lumen-frame-corners::after {
	bottom: 8px;
	right: 8px;
	border-bottom: 1px solid var(--lumen-gold);
	border-right: 1px solid var(--lumen-gold);
}

/* LUMEN FOCUS HALO — controlled warm glow for a selected/active card. */
body.lumen-scope .lumen-focus-halo {
	box-shadow: 0 0 0 1px var(--lumen-gold), 0 0 26px rgba(217, 164, 65, 0.22);
}

/* LUMEN STATUS PULSE — small restrained status chip for READY / SIGNED /
   PAID / AVAILABLE / COMPLETE and similar states. Color communicated via
   both the dot AND the text label, never color alone. */
body.lumen-scope .lumen-status-pulse {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lumen-ink-dim);
}
body.lumen-scope .lumen-status-pulse::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lumen-status-off);
	flex: none;
}
body.lumen-scope .lumen-status-pulse.is-ready::before,
body.lumen-scope .lumen-status-pulse.is-available::before { background: var(--lumen-gold); }
body.lumen-scope .lumen-status-pulse.is-signed::before,
body.lumen-scope .lumen-status-pulse.is-paid::before,
body.lumen-scope .lumen-status-pulse.is-complete::before,
body.lumen-scope .lumen-status-pulse.is-healthy::before { background: var(--lumen-status-healthy); }
body.lumen-scope .lumen-status-pulse.is-attention::before { background: var(--lumen-status-attention); }
body.lumen-scope .lumen-status-pulse.is-ready,
body.lumen-scope .lumen-status-pulse.is-signed,
body.lumen-scope .lumen-status-pulse.is-paid,
body.lumen-scope .lumen-status-pulse.is-complete,
body.lumen-scope .lumen-status-pulse.is-available,
body.lumen-scope .lumen-status-pulse.is-healthy { color: var(--lumen-ink); }
body.lumen-scope .lumen-status-pulse.is-attention { color: var(--lumen-status-attention); }
body.lumen-scope .lumen-status-pulse:not(.is-static)::before {
	animation: lumen-status-pulse-anim 2.2s ease-in-out infinite;
}
@keyframes lumen-status-pulse-anim {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* ══════════════════ LUMEN JOURNEY RAIL ══════════════════
   Used by includes/class-lumen-journey-rail.php on Booking, Contract,
   Checkout, and Order Received. Purely presentational — reflects
   existing page/context state, never itself a workflow gate. */
body.lumen-scope .lumen-journey-rail {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex-wrap: wrap;
	font-family: 'Space Mono', monospace;
}
body.lumen-scope .lumen-journey-rail__step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(217, 164, 65, 0.18);
	color: var(--lumen-ink-faint);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
body.lumen-scope .lumen-journey-rail__step-index {
	opacity: 0.7;
}
body.lumen-scope .lumen-journey-rail__step.is-complete {
	color: var(--lumen-status-healthy);
	border-color: rgba(111, 191, 138, 0.35);
}
body.lumen-scope .lumen-journey-rail__step.is-active {
	color: #17140d;
	background: var(--lumen-gold);
	border-color: var(--lumen-gold);
}
body.lumen-scope .lumen-journey-rail__connector {
	width: 16px;
	height: 1px;
	background: rgba(217, 164, 65, 0.25);
	flex: none;
}
@media (max-width: 640px) {
	body.lumen-scope .lumen-journey-rail {
		gap: 6px;
	}
	body.lumen-scope .lumen-journey-rail__connector {
		display: none;
	}
	body.lumen-scope .lumen-journey-rail__step {
		padding: 7px 10px;
		font-size: 10px;
	}
}

/* ══════════════════ ACCOUNT DASHBOARD ══════════════════
   Used by includes/class-lumen-account.php's woocommerce_account_
   dashboard addition. */
body.lumen-scope .lumen-account-intro {
	margin: 0 0 24px;
}
body.lumen-scope .lumen-account-intro__title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 26px;
	color: var(--lumen-ink);
	margin: 0 0 6px;
}
body.lumen-scope .lumen-account-intro__line {
	color: var(--lumen-ink-dim);
	font-size: 14px;
	margin: 0;
}
body.lumen-scope .lumen-account-quick-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
body.lumen-scope .lumen-account-quick-actions a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid rgba(217, 164, 65, 0.3);
	border-radius: 999px;
	font-family: 'Space Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lumen-ink);
	transition: border-color 0.2s ease, color 0.2s ease;
}
body.lumen-scope .lumen-account-quick-actions a:hover,
body.lumen-scope .lumen-account-quick-actions a:focus-visible {
	border-color: var(--lumen-gold);
	color: var(--lumen-gold-bright);
}
body.lumen-scope .lumen-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin: 0 0 30px;
}
body.lumen-scope .lumen-account-card {
	background: var(--lumen-ground-raised);
	border: 1px solid rgba(217, 164, 65, 0.16);
	border-radius: 5px;
	padding: 18px;
}
body.lumen-scope .lumen-account-card__label {
	display: block;
	color: var(--lumen-ink-faint);
	font-family: 'Space Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
body.lumen-scope .lumen-account-card__value {
	display: block;
	color: var(--lumen-ink);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 10px;
	word-break: break-word;
}
body.lumen-scope .lumen-account-card__action {
	font-size: 12px;
	color: var(--lumen-gold);
}
body.lumen-scope .lumen-account-card.is-empty .lumen-account-card__value {
	color: var(--lumen-ink-faint);
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.lumen-lightline::after,
	.lumen-status-pulse::before {
		animation: none !important;
	}
}