/**
 * Psychospiritualist Companion -- companion.css
 *
 * Tenant-specific overrides layered ON TOP of the mylivingos-for-wp framework fork's own
 * console-tokens.css (enqueued as a dependency -- see psc_enqueue_assets() -- so this file
 * always loads after it and wins the cascade on matching selector specificity). The framework
 * fork itself is NEVER edited; every rule below either matches an existing framework selector
 * (same or higher specificity, later source order) or introduces new companion-owned classes
 * (the `.psc-` prefix) for the FR-4 overlay this plugin adds.
 *
 * Everything here is gated server-side to render only when the psychospiritualist tenant's
 * console is on-screen (see psc_is_active_context()) -- the `.lpos-blueprint` ancestor prefix
 * on every override below is belt-and-suspenders scoping on top of that, not the only guard.
 */

/* =====================================================================================
   CARD MEDIA FRAME -- DELIBERATELY NOT STYLED HERE (2026-08-11)

   There is no companion rule for `.lpos-m8card.-product .lpos-m8card__frame--video`, and adding one
   is the thing to avoid. Two have been tried and both were wrong in the same way -- they pinned the
   frame unconditionally, and an unconditional rule of equal specificity in THIS file also wins
   inside the framework's own media queries, where the framework is deliberately doing something else.

     FR-3 pinned `aspect-ratio: 11/19` to give the tarot deck a portrait window. It could not fit:
     the framework pairs its ratio with `flex: 0 0 auto` (console-tokens.css:3323), so at 282px wide
     a portrait frame demanded 469.8px inside a 400.5px card -- 164px clipped, the excerpt crushed to
     10px, and the frame, text box AND the whole button row painting past the card's bottom edge.

     Its replacement set `flex: 1 1 auto; aspect-ratio: auto; min-height: 0`, which stopped the
     clipping but is character-for-character the framework's own SHORT-VIEWPORT GUARD
     (console-tokens.css:3343) hoisted to every viewport. So the featured image had no ratio at all,
     and the guard it was copied from could never fire, because this file's copy outranked it inside
     its own `@media (max-height: 900px)` block. The first bug removed, then re-created.

   The framework authors both halves correctly and they only work as a pair:
     :3323  flex: 0 0 auto; aspect-ratio: 16/9; min-height: 0        <- the featured-image ratio
     :3343  @media (max-height:900px){ flex: 1 1 auto; aspect-ratio: auto }  <- art absorbs the squeeze,
            because art can crop harmlessly and text tears
   Deleting the companion rule restores both at once. A tarot card is a portrait CARD, not a card with
   a portrait window -- that proportion belongs to `.lpos-m8card.-tarot` (console-tokens.css:3505,
   beside `.-playing` 5:7 and `.-collector` 63:88), which is where the variant block later in this
   file leaves it.

   KNOWN GAP, deliberately not closed from here: :3323 hardcodes `16/9` while the token
   `--lpos-card-media-ratio` exists (console-tokens.css:259) and its sibling component already honours
   it (`.lpos-c-archive-card__media`, :1959). Making the token govern is a one-line additive framework
   change at :3323; it is recorded in DEC-CR-777Z9D for the next framework pass rather than duplicated
   here, because every companion-side way of honouring the token re-introduces the defect above.
   ===================================================================================== */

/* =====================================================================================
   PINK -> GOLD

   FINDING (verified by grepping the entire framework fork -- console-tokens.css, every
   other CSS/JS/PHP file under psychospiritualist-console/ -- for "cc3366", "CC3366", and
   "204, 51, 102" in every spacing variant): there is NO hardcoded pink hex or rgb() literal
   anywhere in the framework. `.lpos-menu__link--go` and the commerce CTA buttons
   (`.lpos-c-cta__buy` / `.lpos-c-cta__buy--secondary`, which render the Add to Cart / Buy
   Now labels) both derive their color purely from the `--lpos-accent` design token
   (console-tokens.css lines 947-949 and 2375-2382/2498) -- there is nothing hardcoded to
   "override a selector" on. The framework already follows the no-hardcoding law here.

   `--lpos-accent` itself is emitted per-tenant at runtime by BrandTokens::emit(), sourced
   from that tenant's brand-pack row in the database (ConsoleRenderer::brand_theme(),
   color_tokens['color.primary'] -- see includes/Frontend/BrandTokens.php and
   ConsoleRenderer.php lines ~1044-1108). The pink is almost certainly the psychospiritualist
   tenant's OWN brand-pack accent value (#CC3366) cascading through that one shared token into
   every accent-colored surface, including these two -- not a framework bug. Editing that DB
   row is out of this plugin's scope (no DB write access from a companion CSS/JS plugin, and
   changing a tenant's stored brand pack is a data change, not a framework-fork workaround).

   The in-scope, zero-hardcode-violation fix: re-scope `--lpos-accent` to a companion gold
   value LOCALLY on just these two selector families. CSS custom properties resolve per
   element, so every existing framework declaration that already reads `var(--lpos-accent)` --
   or a value derived from it, like `--lpos-accent-soft`/`--lpos-accent-glass-strong`'s
   `color-mix(in srgb, var(--lpos-accent) ...)` -- re-resolves to gold inside these elements
   (including their own :hover/:focus-visible states and child SVGs) with ZERO new hardcoded
   selectors and ZERO !important. Every other accent-driven surface for this tenant (focus
   rings, unrelated borders, etc.) is untouched -- this only touches the two families named.
   ===================================================================================== */
.lpos-blueprint {
	--psc-gold: var(--lpos-accent);
}
.lpos-blueprint .lpos-menu__link--go,
.lpos-blueprint .lpos-c-cta__buy,
.lpos-blueprint .lpos-c-cta__buy--secondary {

}

/* =====================================================================================
   FR-4: 777 CORRESPONDENCE OVERLAY

   Companion-owned (`.psc-` prefixed) -- an overlay, not an in-single injection (the
   framework fork exposes no hook to inject into the single view, per the FR-4 brief; a
   fixed modal/drawer triggered from the card is the pristine option under that constraint).
   Styled to match the framework's own glass panels: same radius/blur/border-tint tokens,
   same no-scrollbar law (pagination flips family groups; overflow:hidden, no scroll chrome).
   ===================================================================================== */

/* Trigger button: reuses the framework's own `.lpos-c-subpanel .lpos-m8card__btn` chrome
   (companion-777.js adds those classes alongside `.psc-777-trigger`), so it matches "Learn
   More" / "Open" exactly with no restyling here -- only the icon needs its own sizing. */
.psc-777-trigger__icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	margin-right: var(--lpos-space-xs, 4px);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.psc-777 {
	position: fixed;
	inset: 0;
	z-index: 9400; /* below --lpos-z-loadscreen (100000), above --lpos-z-drawer (9000) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--lpos-gap, 16px);
}
.psc-777[hidden] {
	display: none;
}
.psc-777__backdrop {
	position: absolute;
	inset: 0;
	background: var(--lpos-overlay, rgba(6, 9, 16, 0.72)); /* token-first (2026-08-16 sweep); literal is the out-of-scope fallback -- the 777 modal mounts on body. Full modal tokenization tracked in FR-C31. */
	-webkit-backdrop-filter: var(--lpos-blur-sm, blur(14px) saturate(140%));
	backdrop-filter: var(--lpos-blur-sm, blur(14px) saturate(140%));
}
.psc-777__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(var(--psc-777-panel-w, 560px), 100%);
	max-height: min(var(--psc-777-panel-h, 720px), 88vh);
	overflow: hidden; /* no-scrollbar law: content is paginated/clipped, never scrolled */
	background: var(--lpos-glass-panel, linear-gradient(180deg, rgba(30, 42, 66, 0.34), rgba(16, 24, 40, 0.45)));
	-webkit-backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%));
	backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%));
	border: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-3, 55%), transparent);
	border-radius: var(--lpos-radius-panel, 10px);
	color: var(--lpos-ink, var(--lpos-ink));
	font-family: var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
}

.psc-777__close {
	all: unset;
	position: absolute;
	top: var(--lpos-space-sm, 8px);
	right: var(--lpos-space-sm, 8px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
	cursor: pointer;
	color: var(--lpos-muted, var(--lpos-muted));
	border-radius: var(--lpos-radius-control, 8px);
}
.psc-777__close:hover {
	color: var(--lpos-ink, var(--lpos-ink));
	background: var(--lpos-accent-soft, color-mix(in srgb, var(--lpos-accent) 10%, transparent));
}
.psc-777__close:focus-visible {
	outline: none;
	box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0, 212, 255, 0.9), 0 0 12px rgba(0, 212, 255, 0.6));
}
.psc-777__close svg {
	width: var(--lpos-icon-size-xs, 20px);
	height: var(--lpos-icon-size-xs, 20px);
	fill: none;
	stroke: currentColor;
}

.psc-777__head {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-xs, 4px);
	padding: var(--lpos-panel-pad, 16px) calc(var(--lpos-control-size, 46px) + var(--lpos-space-sm, 8px)) var(--lpos-space-md, 12px)
		var(--lpos-panel-pad, 16px);
	border-bottom: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
}
.psc-777__eyebrow {
	font: 600 var(--lpos-text-xs, 13px) / 1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-accent, var(--lpos-secondary));
}
.psc-777__title {
	margin: 0;
	font: 700 var(--lpos-text-lg, 20px) / 1.25 var(--lpos-font-display, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, var(--lpos-ink));
}
.psc-777__meta {
	font: 400 var(--lpos-text-xs, 13px) / 1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-muted));
}

.psc-777__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden; /* pagination replaces the visible family group -- content never scrolls */
	display: flex;
	flex-direction: column;
	padding: var(--lpos-panel-pad, 16px);
}

.psc-777__empty {
	margin: auto;
	max-width: 32em;
	text-align: center;
	font: 500 var(--lpos-text-sm, 14px) / 1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-muted));
}

.psc-777__family {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	overflow-y: auto; /* framework's own hidden-scrollbar-chrome pattern: visible chrome hidden, content still reachable if a single family runs long */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.psc-777__family::-webkit-scrollbar {
	width: 0;
	height: 0;
}
.psc-777__family-name {
	flex: 0 0 auto;
	margin: 0 0 var(--lpos-space-xs, 4px);
	font: 700 var(--lpos-text-sm, 14px) / 1.2 var(--lpos-font-display, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-accent, var(--lpos-secondary));
}

.psc-777__column {
	flex: 0 0 auto;
	padding: var(--lpos-space-sm, 8px) var(--lpos-panel-pad, 16px);
	background: var(--lpos-glass-1, rgba(255, 255, 255, 0.035));
	border: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
	border-radius: calc(var(--lpos-radius-panel, 10px) - var(--lpos-subpanel-pad, 6px));
}
.psc-777__column-head {
	display: flex;
	align-items: baseline;
	gap: var(--lpos-space-xs, 4px);
	margin-bottom: var(--lpos-space-xs, 4px);
}
.psc-777__column-roman {
	flex: 0 0 auto;
	font: 700 var(--lpos-text-xs, 13px) / 1.2 var(--lpos-font-display, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-muted));
}
.psc-777__column-title {
	flex: 1 1 auto;
	font: 600 var(--lpos-text-sm, 14px) / 1.3 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, var(--lpos-ink));
}

.psc-777__entry {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--lpos-space-xs, 4px);
	padding: var(--lpos-space-xs, 4px) 0;
	font: 400 var(--lpos-text-sm, 14px) / 1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, var(--lpos-ink));
}
.psc-777__entry + .psc-777__entry {
	border-top: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
}
.psc-777__entry-label {
	font-weight: 600;
}
.psc-777__entry-system {
	flex: 0 0 auto;
	padding: 0 var(--lpos-space-xs, 4px);
	font: 600 var(--lpos-text-2xs, 12px) / 1.6 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-accent, var(--lpos-secondary));
	background: var(--lpos-accent-soft, color-mix(in srgb, var(--lpos-accent) 10%, transparent));
	border-radius: var(--lpos-radius-sm, 4px);
}
.psc-777__entry-citation {
	flex: 1 1 100%;
	font: 400 var(--lpos-text-xs, 13px) / 1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-muted));
}

.psc-777__pager {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpos-space-sm, 8px);
	padding: var(--lpos-space-md, 12px) var(--lpos-panel-pad, 16px);
	border-top: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
}
.psc-777__pager-btn {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
	cursor: pointer;
	color: var(--lpos-ink, var(--lpos-ink));
	background: var(--lpos-glass-1, rgba(255, 255, 255, 0.035));
	border: var(--lpos-border-width, 1px) solid
		color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent);
	border-radius: var(--lpos-radius-control, 8px);
}
.psc-777__pager-btn:hover {
	color: var(--lpos-accent, var(--lpos-secondary));
	border-color: var(--lpos-accent, var(--lpos-secondary));
}
.psc-777__pager-btn:focus-visible {
	outline: none;
	box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0, 212, 255, 0.9), 0 0 12px rgba(0, 212, 255, 0.6));
}
.psc-777__pager-btn[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.psc-777__pager-btn svg {
	width: var(--lpos-icon-size-xs, 20px);
	height: var(--lpos-icon-size-xs, 20px);
	fill: none;
	stroke: currentColor;
}
.psc-777__pager-count {
	font: 600 var(--lpos-text-xs, 13px) / 1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	letter-spacing: var(--lpos-tracking-label, 0.08em);
	text-transform: uppercase;
	color: var(--lpos-muted, var(--lpos-muted));
}

@media (prefers-reduced-motion: no-preference) {
	.psc-777__panel {
		animation: psc-777-in var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
	}
}
@keyframes psc-777-in {
	from {
		opacity: 0;
		transform: translateY(var(--psc-777-enter-offset, 8px)) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 640px) {
	.psc-777 {
		padding: 0;
		align-items: flex-end;
	}
	.psc-777__panel {
		width: 100%;
		max-height: 88vh;
		border-radius: var(--lpos-radius-panel, 10px) var(--lpos-radius-panel, 10px) 0 0;
	}
}

/* ============================================================================
 * JD 2026-08-10 live-QA fixes (tenant-scoped; framework fork untouched)
 * ==========================================================================*/

/* Lower the ambient background-video blur (JD: "lower the blur"). The framework drives it from a
 * token declared in :where(:root) (specificity 0,0,0); a real :root (0,1,0) wins regardless of load
 * order. 1px keeps a faint edge-defocus (framework's legibility note) but shows the video far clearer. */
:root {
	--lpos-bgvideo-blur: 1px;
	--lpos-glass-veil: color-mix(in srgb, var(--lpos-bg) 28%, transparent);
}

/*
 * Framework dark-HUD lock (.lpos-blueprint--console/--magick8/--gate in console-tokens.css ~828)
 * re-declares --lpos-bg / --lpos-glass-panel to the Biolimitless blue gradient on the subtree,
 * which beats the brand-pack :root tokens. Same selectors, companion loads later → maps-engine
 * void + hermetic gold chrome (JD 2026-08-11: black panels, gold outlines, white icons).
 */
.lpos-blueprint--console,
.lpos-blueprint--gate,
.lpos-blueprint--magick8 {
	/* Page plate stays opaque void; every *surface* token is translucent glass. */
	/*
	 * FR-17: --lpos-panel / hover / overlay were flat opaque hex while only
	 * --lpos-glass-panel was translucent — framework consumers of panel/hover/overlay
	 * painted solid black. Align them to the ONE atomic glass recipe.
	 *
	 * FR-36 glass ladder (JD 2026-08-12): the dark rungs were lightened 58% -> 30% so the Step
	 * rail's featured images read through their scrim -- measured 40% -> 67% of the photograph's
	 * unscrimmed contrast. hover moves with panel because it must stay the LIGHTER of the pair;
	 * leaving it at 45% under a 30% panel would invert what hovering does.
	 *
	 * --lpos-overlay is NOT scaled. It is the drawer dim (its only consumer is
	 * .lpos-drawer-scrim.is-open), its job is to hide the page rather than to frost a surface, and
	 * it is the one token here whose backdrop is real content -- so it is the one place lowering
	 * alpha would actually cost legibility.
	 */
	--lpos-panel: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
	--lpos-panel-hover: color-mix(in srgb, var(--lpos-bg) 16%, transparent);
	--lpos-overlay: color-mix(in srgb, var(--lpos-bg) 72%, transparent);
	/*
	 * DERIVED, NOT TYPED (2026-08-16, found by tools/_lint_companion_css.mjs).
	 *
	 * This was `#0a0a0a` -- the last hardcoded colour in the file, and it survived the sweep that
	 * moved 160 others onto tokens precisely because it sits among token definitions and reads like
	 * one. It is the colour text takes ON a filled/accent surface, so the right value is the app's
	 * own ground, and pinning it meant a tenant whose brand ground is not near-black got inverted
	 * text mixed from someone else's palette.
	 *
	 * Every neighbour above already derives from --lpos-bg; this now matches them, so the whole
	 * group moves together when a brand pack changes.
	 */
	--lpos-ink-inverted: var(--lpos-bg);
	--lpos-muted: var(--lpos-ink-secondary, var(--lpos-ink));

	/*
	 * ONE atomic glassmorphism-black panel recipe (JD 2026-08-11 / FR-17).
	 * Translucent void — NOT opaque var(--lpos-bg) solid.
	 * Chrome alias equals the panel fill so cells / subpanels / rails never diverge.
	 */
	/*
	 * FR-36 atom: the shared recipe, 58% -> 30%. Every other glass surface aliases this one value,
	 * so it is the whole point of the change; --psc-panel-bg and --lpos-glass-panel-chrome inherit
	 * it by reference and need no edit of their own.
	 */
	--lpos-glass-panel: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
	--lpos-glass-panel-chrome: var(--lpos-glass-panel);
	/*
	 * --lpos-glass-veil is NOT scaled, despite sitting in this block and reading like a rung. Its
	 * only consumers are .lpos-blueprint__bgvideo-veil, so it tints the background VIDEO for
	 * legibility rather than frosting a panel -- same category as --lpos-overlay, opposite category
	 * to everything else here. It is also declared a second time at :root above, so scaling it here
	 * alone would have left the two copies disagreeing.
	 */
	--lpos-glass-veil: color-mix(in srgb, var(--lpos-bg) 28%, transparent);
	/* Nested-control tiers (no panel-in-panel mud): light frost over an already-frosted parent.
	 * FR-36 scales these with the panel for exactly that reason -- at a 30% parent, a 28% child is
	 * within two points of it and the tier stops being a tier. --lpos-glass-1 is a LIGHT frost on a
	 * different axis and is left alone. */
	--lpos-glass-1: color-mix(in srgb, var(--lpos-ink) 4%, transparent);
	--lpos-glass-2: color-mix(in srgb, var(--lpos-bg) 8%, transparent);
	--lpos-glass-3: color-mix(in srgb, var(--lpos-bg) 14%, transparent);
	--lpos-blur-md: blur(16px) saturate(140%);
	--lpos-blur-sm: blur(8px) saturate(130%);
	/* The --psc-panel-bg/-blur/-radius and --psc-nested-* shadow aliases were RETIRED (YV8 audit
	 * fix 1, 2026-08-18): every consumer now reads the framework token directly, so the parallel
	 * chrome family cannot silently diverge. --psc-panel-border stays: a genuinely DERIVED tenant
	 * value (accent hairline at the tenant alpha), not an alias. */
	--psc-panel-border: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-1, 38%),
		transparent
	);
	/* Chat message component tokens (JD 2026-08-16, law flag): every value the bubbles paint,
	 * named by ROLE and derived from the app layer -- no literal in a rule below. */
	--psc-chat-msg-maxw: 82%;
	--psc-chat-avatar-scale: 0.6;
	--psc-chat-avatar-radius: var(--lpos-radius-panel, 10px); /* DEC-CR-777YZ7: the panel radius token, never a circle literal */
	--psc-chat-para-gap: var(--lpos-space-sm);
	--psc-chat-item-gap: var(--lpos-space-xs);
	--psc-chat-list-indent: calc(var(--lpos-space-md) * 2);
	--lpos-border-tint: var(--lpos-accent);
	/* Inactive borders = subtler gold; active uses full accent (see rules below). */
	--lpos-border-alpha-1: 38%;
	--lpos-border-alpha-2: 55%;
	--lpos-border-alpha-3: 78%;
	/* DEC-CR-777YZ2 audit HIGH #1: the disabled-control opacity, DECLARED (the YZ1 rule had
	 * used an undeclared --lpos- name that only ever resolved through its fallback). */
	--psc-disabled-alpha: 0.45;
	/* AI-code-scan token additions (2026-08-17): literals that were painting chrome now resolve
	 * through named tokens so a brand pack can retune them in one place. */
	--lpos-blur-veil: blur(6px) saturate(120%);
	--lpos-space-2xs: 2px;
	--lpos-tracking-tight: 0.02em;
	--psc-idle-well-min-h: calc(var(--lpos-control-size, 46px) * 2.6);
	--psc-777-panel-w: 560px;
	--psc-777-panel-h: 720px;
	--psc-777-enter-offset: 8px;
	--psc-magick8-logo-min-h: 84px;
	--psc-magick8-logo-max-h: 150px;
	--psc-play-glyph-nudge: 3px;
	--lpos-focus-ring: 0 0 0 2px color-mix(in srgb, var(--lpos-accent) 90%, transparent),
		0 0 12px color-mix(in srgb, var(--lpos-accent) 45%, transparent);
	--lpos-accent-glow-sm: 0 0 12px color-mix(in srgb, var(--lpos-accent) 40%, transparent);
	--lpos-accent-glow-lg: 0 0 24px color-mix(in srgb, var(--lpos-accent) 35%, transparent);
	/* DEC-CR-777 q6 (JD 2026-08-17): the order view's fallback backdrop — a gradient pattern,
	 * every colour derived from the app layer so a portal restyles it by retinting its accent,
	 * never by editing these rules. Tint/line/base are separately overridable per portal. */
	--psc-orderview-tint: var(--lpos-accent);
	--psc-orderview-line: var(--lpos-ink, #fff);
	--psc-orderview-base: transparent;
	--psc-orderview-grad:
		radial-gradient(120% 85% at 18% 0%, color-mix(in srgb, var(--psc-orderview-tint) 20%, transparent) 0%, transparent 62%),
		radial-gradient(95% 75% at 85% 95%, color-mix(in srgb, var(--psc-orderview-tint) 12%, transparent) 0%, transparent 58%),
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--psc-orderview-line) 4%, transparent) 0 2px, transparent 2px 16px);
}

/* ============================================================================
 * FR-7 → FR-8: ONE glassmorphism-black panel atom + gold outlines + white icons
 * ==========================================================================*/

/*
 * Shared panel surface — every chrome panel resolves to the same tokens.
 * Nested “chip” exceptions (top-bar inners) are cleared later so glass does not double-stack.
 */
.lpos-blueprint .lpos-cell,
.lpos-blueprint .lpos-c-panel,
.lpos-blueprint .lpos-c-subpanel,
.lpos-blueprint .lpos-c-title-panel,
.lpos-blueprint .lpos-rail,
/* Drawer shell is styled in FR-10 (edge borders differ left/right — avoid border-color shorthand here). */
.lpos-blueprint .lpos-menu__toggle,
.lpos-blueprint .lpos-menu__link,
.lpos-drawer .lpos-menu__toggle,
.lpos-drawer .lpos-menu__link,
.lpos-blueprint .lpos-menu__item--haskids,
.lpos-drawer .lpos-menu__item--haskids,
.lpos-blueprint .lpos-c-icon-btn,
.lpos-blueprint .lpos-switch__thumb,
.lpos-blueprint .psc-step,
.lpos-blueprint .lpos-magick8__welcome,
.lpos-blueprint .lpos-m8slide__tab,
.lpos-blueprint .lpos-m8slide__stagepane,
.lpos-blueprint .lpos-m8slide__thumb,
.lpos-blueprint .lpos-m8slide__callout,
.lpos-blueprint .lpos-m8slide__cta,
.lpos-blueprint .lpos-m8card__btn,
.lpos-blueprint .lpos-c-cta,
.lpos-blueprint .lpos-c-cta__actionbar,
.lpos-blueprint .lpos-feat__toolbar,
.lpos-blueprint .lpos-feat__actions > .lpos-c-skip-action,
.lpos-blueprint .lpos-topbar__panel,
.lpos-blueprint .lpos-c-cta__buy,
.lpos-blueprint .lpos-c-cta__buy--secondary {
	background: var(--lpos-glass-panel) !important;
	background-color: color-mix(in srgb, var(--lpos-bg) 22%, transparent) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	border-color: var(--psc-panel-border) !important;
}

/* Gold outlines — hover bumps to full accent (same border token family). */
.lpos-blueprint .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-menu__link:hover,
.lpos-drawer .lpos-menu__link:hover,
.lpos-blueprint .lpos-menu__item--haskids:hover,
.lpos-drawer .lpos-menu__item--haskids:hover,
.lpos-blueprint .lpos-m8slide__tab:hover,
.lpos-blueprint .lpos-m8slide__cta:hover,
.lpos-blueprint .lpos-m8card__btn:hover,
.lpos-blueprint .lpos-switch__thumb:hover,
.lpos-blueprint .psc-step:hover,
.lpos-blueprint .lpos-c-cta__buy:hover,
.lpos-blueprint .lpos-feat__actions > .lpos-c-skip-action:hover {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* White icons — chrome glyphs use ink; SVGs inherit via currentColor. */
.lpos-blueprint .lpos-c-icon-btn,
.lpos-blueprint .lpos-c-icon-btn svg,
.lpos-blueprint .lpos-switch__thumb,
.lpos-blueprint .lpos-switch__thumb svg,
.lpos-blueprint .psc-step,
.lpos-blueprint .psc-step svg,
.lpos-blueprint .lpos-menu__chev svg,
.lpos-blueprint .elementor-icon,
.lpos-blueprint .elementor-icon i,
.lpos-blueprint .elementor-icon svg,
.lpos-blueprint .lpos-media__bar button,
.lpos-blueprint .lpos-media__bar button svg,
.lpos-blueprint [class*="lpos-"] > svg,
.lpos-blueprint i.fa,
.lpos-blueprint i.fas,
.lpos-blueprint i.far,
.lpos-blueprint i.fab {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	fill: none !important;
	stroke: currentColor;
}

.lpos-blueprint .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-switch__thumb:hover,
.lpos-blueprint .psc-step:hover {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/* Active / pressed — stronger solid gold outline. */
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint .lpos-c-icon-btn.is-active,
.lpos-blueprint .lpos-c-icon-btn.-active,
.lpos-blueprint .lpos-switch__thumb[aria-pressed="true"],
.lpos-blueprint .psc-step[aria-pressed="true"],
.lpos-blueprint .lpos-m8slide__tab[aria-pressed="true"],
.lpos-blueprint .lpos-m8slide__tab.is-active,
.lpos-blueprint .lpos-c-subpanel[aria-pressed="true"],
.lpos-blueprint .lpos-menu__link--primary,
.lpos-blueprint .lpos-menu__link[aria-current="page"],
.lpos-blueprint .lpos-menu__link.is-active,
.lpos-blueprint [data-lpos-m8tab][aria-pressed="true"],
.lpos-blueprint .lpos-feat__tab.is-active,
.lpos-blueprint .lpos-feat__tab[aria-selected="true"],
/* DEC-CR-777ZB5: the active ITEM tab (and the category crumb) wear the same active skin as every
 * other active control — JD "the active one should be styled as active like the other active
 * button stylings". */
.lpos-blueprint .psc-primary-tabs__tab[aria-pressed="true"],
.lpos-blueprint .psc-cat-crumb[aria-pressed="true"] {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: 0 0 0 1px var(--lpos-accent, var(--lpos-accent)),
		var(--lpos-accent-glow-sm, 0 0 12px color-mix(in srgb, var(--lpos-accent) 40%, transparent));
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/*
 * A little glassmorphism over the bg video (JD 2026-08-10): the framework veil is a flat tint.
 * Add a light frost + hairline specular so gaps between panels read as glass over the motion,
 * without heavy blur (video stays clearly visible — pairs with --lpos-bgvideo-blur: 1px).
 */
.lpos-blueprint .lpos-blueprint__bgvideo-veil {
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--lpos-ink) 6%, transparent) 0%,
		var(--lpos-glass-veil, color-mix(in srgb, var(--lpos-bg) 28%, transparent)) 28%,
		var(--lpos-glass-veil, color-mix(in srgb, var(--lpos-bg) 28%, transparent)) 100%
	);
	-webkit-backdrop-filter: var(--lpos-blur-veil, blur(6px) saturate(120%));
	backdrop-filter: var(--lpos-blur-veil, blur(6px) saturate(120%));
	box-shadow: inset 0 var(--lpos-border-width, 1px) 0 color-mix(in srgb, var(--lpos-ink) 10%, transparent);
}

/* Neutralize the WordPress THEME's link color leaking into the console. The pink rgb(204,51,102)
 * (#CC3366) is NOT a framework token (grep-confirmed absent) -- it is the active theme's <a>/<button>
 * link color bleeding onto the console's menu links and commerce CTAs. Force console interactive text
 * back onto the token system: ink for nav, gold for the primary CTA. Scoped under .lpos-blueprint so
 * only the console is affected, nothing else on the site. */
.lpos-blueprint a,
.lpos-blueprint .lpos-menu__link,
.lpos-blueprint .lpos-menu__link--go { color: var(--lpos-ink, var(--lpos-ink)); }
.lpos-blueprint .lpos-menu__link--go:hover,
.lpos-blueprint .lpos-menu__link:hover { color: var(--lpos-accent, var(--lpos-accent)); }
/* FR-17 §2: commerce CTA label+icon = ink (white) on resting glass — not accent gold.
 * Primary filled Buy Now keeps ink on accent-glass-strong (framework); if a solid accent
 * fill ever wins, ink-inverted is applied via the :not(--secondary) solid guard below. */
.lpos-blueprint .lpos-c-cta__buy,
.lpos-blueprint .lpos-c-cta__buy *,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy * {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}
.lpos-blueprint .lpos-c-cta__buy svg {
	stroke: currentColor !important;
	fill: none !important;
}

/* =====================================================================================
   FR-8: ANNOTATED CONSOLE CHROME FIXES (companion 1.0.3)
   - Halve global spacing tokens app-wide (gaps / pads / space ladder)
   - Kill faint center vertical hairline / nested midcenter chrome
   - One outline layer on the top bar (no nested panel stacks)
   - Coming Soon / center carousel: full-bleed panel; hide overlay nav + dots
   - Toolbar: labeled prev/next + glass/gold mid CTA (wiring in companion-toolbar.js)
   - Align Add to Cart / Buy Now on one baseline
   ===================================================================================== */

/*
 * Global spacing ≈ 67% of framework defaults (JD 2026-08-11).
 * Half (50%) read too tight; full original too loose — land between.
 * Framework → companion:
 *   --lpos-gap           12px → 8px
 *   --lpos-pad           20px → 14px
 *   --lpos-panel-pad     12px → 8px
 *   --lpos-subpanel-pad   6px → 4px
 *   --lpos-space-xs       4px → 3px
 *   --lpos-space-sm       8px → 5px
 *   --lpos-space-md      12px → 8px
 * Derived consumers (--lpos-titlebar-h, --lpos-rail-w*) recalculate automatically.
 */
.lpos-blueprint,
.lpos-blueprint--console,
.lpos-blueprint--magick8,
.lpos-blueprint--gate {
	--lpos-gap: 8px;
	--lpos-pad: 14px;
	--lpos-panel-pad: 8px;
	--lpos-subpanel-pad: 4px;
	--lpos-space-xs: 3px;
	--lpos-space-sm: 5px;
	--lpos-space-md: 8px;
}

/* Grid overlay was a faint cyan sheet; with gold border-tint it reads as a center seam. */
.lpos-blueprint--console {
	--lpos-grid-line: transparent;

	/*
	 * FR-39 primary bar budget (JD 2026-08-13, DEC-CR-777ZZ6). Replaces FR-38's viewport ramp.
	 *
	 * How much taller -- or shorter -- a control inside the two bars framing the primary player is
	 * than the console's shared control. FR-38 ramped this on viewport height and verified it at
	 * 1920x1080 and 1280x720, the two sizes with the MOST vertical slack, because both use a monitor
	 * height as a viewport height. At the heights a real window actually has, the ramp was too
	 * generous and the player went from width-constrained to height-constrained: it narrowed to keep
	 * its ratio and the panel showed 29.5px of glass down each side at 1920x945.
	 *
	 * So this is no longer a function of the viewport. `--psc-primary-bar-fit` is written by
	 * companion-media-aspect.js from the geometry it already computes: with W the panel's content
	 * width, r the media's own ratio and stageMaxH the height budget, `spare = stageMaxH - W / r` is
	 * the unused height, each bar spends stage height one-for-one, and `g = g0 + spare / 2` is
	 * therefore the exact size at which the player fills the panel's width with nothing left over.
	 * The bars grow when there is genuine slack and shrink when there is not, and pillarboxing cannot
	 * come back by construction rather than by having been tested for.
	 *
	 * The default is 0px and is deliberately a PLAIN LENGTH, not a calc(): the sizer reads its own
	 * previous answer back through getComputedStyle, and an unregistered custom property returns its
	 * token stream rather than a resolved value, so a calc() default would read as NaN and the first
	 * correction would be computed from the wrong starting point.
	 *
	 * THE CLAMP IS NO LONGER SYMMETRIC, and the two bounds are doing different jobs.
	 *
	 * FR-42 ceiling raised to 5 steps (JD 2026-08-13). The ceiling was 2 steps, and at 1920x1080 it was
	 * the binding constraint: the fit token sat pinned at exactly 16.00px with 99.75px of the column's
	 * height going unused. Five steps lets the bars take 40px of that -- 96/94px bars, an 86px control,
	 * a 46px glyph and a 24px label, all measured on live before shipping. Nine steps would absorb the
	 * whole 99.75px and was rejected on sight: 121.4px bars stand each button taller than the entire
	 * toolbar was, with heading-sized labels.
	 *
	 * THE FLOOR STAYS AT 2 STEPS, deliberately, and must not be "tidied" to match the ceiling. -16px is
	 * where a 30px control and a 10px label stop being usable, and the sizer's matching bound is what
	 * triggers its "out of reach, do not chase" branch -- the thing that keeps a portrait 3D object and
	 * the 1920x900 near-miss from crushing every control instead of accepting side glass. Widening the
	 * floor to -40px would re-open both, and would look like a consistency fix.
	 *
	 * companion-media-aspect.js caps the value BEFORE it reaches this clamp, so these two numbers are one
	 * decision in two files. See REACH_UP_STEPS / REACH_DOWN_STEPS there.
	 */
	--psc-primary-bar-fit: 0px;
	--psc-primary-bar-grow: clamp(
		calc(-2 * var(--lpos-space-md, 8px)),
		var(--psc-primary-bar-fit, 0px),
		calc(5 * var(--lpos-space-md, 8px))
	);
	/* Derived, never authored: a control, a glyph and a label that scale together off one budget. */
	--psc-primary-bar-control: calc(var(--lpos-control-size, 46px) + var(--psc-primary-bar-grow));
	--psc-primary-bar-icon: calc(var(--lpos-icon-size, 26px) + var(--psc-primary-bar-grow) / 2);
	--psc-primary-bar-text: calc(var(--lpos-text-sm, 14px) + var(--psc-primary-bar-grow) / 4);
}

/*
 * The two bars re-point the SHARED tokens rather than declaring sizes of their own.
 *
 * Every control in both bars is the same `.lpos-c-icon-btn` atom the rest of the console uses, and
 * the companion already sizes it through these three tokens. Re-declaring them here means the skip
 * button's `calc(control-size + 2*subpanel-pad + 2*border)` height, its `min-width` floor, its icon
 * inset, the transport button's height and min-width and the label's `font: 600 var(--lpos-text-sm)`
 * all move together with no rule of their own -- so this is not a fork of the atom, and nothing
 * outside these two elements can see it.
 */
/*
 * FR-40 any medium: bar contents follow the same budget (JD 2026-08-13, DEC-CR-777ZD2).
 *
 * Widened from `.lpos-media.-video`. FR-39 derives one growth value for both bars framing the primary
 * player and re-points the shared control / icon / label tokens at it; a 3D or future medium's bar is
 * the same atom in the same slot and must read the same budget, or its controls would sit at the
 * console's default size inside a bar sized for a different one.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport {
	--lpos-control-size: var(--psc-primary-bar-control);
	--lpos-icon-size: var(--psc-primary-bar-icon);
	--lpos-icon-size-sm: var(--psc-primary-bar-icon);
	--lpos-text-sm: var(--psc-primary-bar-text);
}

/*
 * The glyphs need `!important` and the rest of the ship does not, which is a measurement rather
 * than a habit: the framework's icon rule carries `!important` and the companion's FR-8 rule does
 * not, so the skip buttons render their glyphs at the framework's 26px while companion CSS asks for
 * 24px. Re-pointing the token alone would therefore have moved every size in these bars except the
 * icons -- the one part of JD's ask that would have silently gone missing.
 */
/*
 * FR-40 any medium: glyph size needs the same !important. The framework's icon rule carries it and the
 * companion's does not, so without this a widened bar would scale everything except its glyphs -- the
 * one part of the ask that goes missing silently.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions .lpos-c-icon-btn svg,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport .lpos-c-icon-btn svg {
	width: var(--lpos-icon-size) !important;
	height: var(--lpos-icon-size) !important;
}

/* Top-bar short gold rule (portal | tabs) — remove so chrome stays a single outline layer. */
.lpos-blueprint .lpos-cell--topcenter .lpos-topbar__rule {
	display: none !important;
}

/*
 * Top bar: ONE outline on the outer topbar panels / cells.
 * Inner selects, icon buttons, and subpanels shed their own borders + solid fills so they
 * no longer stack as nested rounded rectangles inside the bar.
 */
/* Top cells: transparent shell; the .lpos-topbar__panel (or topright cell) wears the glass atom. */
.lpos-blueprint .lpos-cell--topleft,
.lpos-blueprint .lpos-cell--topcenter {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint .lpos-cell--topcenter .lpos-topbar__panel,
.lpos-blueprint .lpos-cell--topleft .lpos-topbar__panel {
	border-color: var(--psc-panel-border) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

/* Avoid double outline: cell + inner topbar panel both bordered → keep panel, clear cell. */
.lpos-blueprint .lpos-cell--topcenter,
.lpos-blueprint .lpos-cell--topleft {
	border-color: transparent !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--topleft .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--topleft .lpos-c-subpanel,
.lpos-blueprint .lpos-cell--topleft .lpos-c-select__value,
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--topcenter .lpos-c-subpanel,
.lpos-blueprint .lpos-cell--topcenter .lpos-c-select__value,
.lpos-blueprint .lpos-cell--topright .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--topright .lpos-c-subpanel {
	border-color: transparent !important;
	box-shadow: none !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/*
 * DEC-CR-777YQ2 — Menu and Sign in keep a gold ring AND the nested glass fill.
 * FR-8 above clears every top-cell icon-btn; this restores the two that are
 * controls, not chrome-on-chrome. Utils are restored in their own block.
 */
.lpos-blueprint .lpos-cell--topleft .lpos-topbar__panel .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--topright .lpos-topbar__panel:not(.lpos-topbar__panel--utils) .lpos-c-icon-btn {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 12px) !important;
	background: var(--lpos-glass-2) !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
	box-shadow: none !important;
}

/* Active tab in top bar still earns a gold outline (single layer, on the control itself).
 * `aria-current` joins the list rather than getting a rule of its own: a crumb is a tab, and
 * the crumb marks its current entry with aria-current because aria-pressed would hand the
 * trail to the framework's exclusive toggle group (JD 2026-08-12, crumbs styled as tabs). */
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn[aria-current="page"],
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn.is-active,
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn.-active {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: 0 0 0 var(--lpos-border-width, 1px) var(--lpos-accent, var(--lpos-accent)) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

/*
 * Midcenter: drop nested panel borders that stack into a vertical gold seam through Coming Soon.
 * Outer cell keeps the outline; inner feat body / slide / toolbar shed competing edges.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming,
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__slide,
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__dots,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__toolbar {
	border-color: transparent !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body::before,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body::after,
.lpos-blueprint .lpos-cell--midcenter::before,
.lpos-blueprint .lpos-cell--midcenter::after {
	background-image: none !important;
	/* Keep a flat void veil so ambient art never paints a center seam. */
	background-color: transparent !important;
	opacity: 0 !important;
}

/* Hide overlay carousel chrome inside the primary content panel (controls live in toolbar). */
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__nav,
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__dots,
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__dot {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Coming Soon / center carousel: full-bleed of the primary content panel. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming {
	padding: 0 !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	height: 100% !important;
	/* Transparent — outer midcenter cell already wears the shared glass atom. */
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	min-height: 0 !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__stage {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide {
	position: absolute !important;
	inset: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	transform: none !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]) {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-coming {
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
	box-sizing: border-box;
	padding: var(--lpos-panel-pad, 12px);
}

/* Also full-bleed non-coming carousels that land in midcenter (same chrome asks). */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming) .lpos-c-carousel__nav,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming) .lpos-c-carousel__dots {
	display: none !important;
}

/* ---- Primary content toolbar: labeled skip + mid CTA ---- */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > .lpos-c-skip-action.psc-skip-labeled {
	position: relative !important;
	width: auto !important;
	/*
	 * A FLOOR THAT CAN YIELD (FR-34, DEC-CR-777ZP2). The floor itself was the entire defect: two
	 * labelled skips each demanding 8 control-widths is 736px, the Step nav row at 1280x720 is
	 * 713px, and the CTA between them -- the only item in the row with `min-width: 0` -- absorbed
	 * the whole shortfall. It measured 0x56 with its "Add to Cart" glyph box still 109px wide in the
	 * DOM, and Next still overflowed to x=846 in a row ending at 807.
	 *
	 * MEASURED, NOT MODELLED, because the row's live 409/307/409 at 1920 is not what the flex
	 * algorithm predicts on paper, so any value derived from that reading would inherit the same
	 * wrong model. Driven on the live page through CSSOM at five widths: min() capped at 34%, at 30%,
	 * at 26%, and NO FLOOR AT ALL all produce byte-identical layouts from 1024 to 1920 -- unchanged
	 * 409/307/409 at 1920, 318/216/318 at 1512, 266/164/266 at 1280 -- because the flex-grow share
	 * exceeds the floor at every one of those widths. The floor was doing nothing except breaking the
	 * 1152-1280 band, where it collapsed the CTA and overflowed the row.
	 *
	 * So it is capped rather than deleted: it still says "a labelled control wants room" at any width
	 * where that would bite, and the 26% cap guarantees the commerce action roughly half the row in
	 * the worst case instead of nothing.
	 */
	min-width: min(calc(8 * var(--lpos-control-size, 46px)), 26%) !important;
	max-width: 42% !important;
	flex: 1 1 0 !important;
	height: calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-subpanel-pad, 6px) + 2 * var(--lpos-border-width, 1px)) !important;
	padding: 0 calc(var(--lpos-control-size, 46px) + var(--lpos-subpanel-pad, 6px)) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > .psc-skip-labeled svg {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--lpos-icon-size-sm, 24px);
	height: var(--lpos-icon-size-sm, 24px);
	flex: 0 0 auto;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > .psc-skip-labeled--prev svg {
	/* FR-14 §7: inset icons from the gold control border (was subpanel-pad only). */
	left: calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px));
	right: auto;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > .psc-skip-labeled--next svg {
	right: calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px));
	left: auto;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > .psc-skip-labeled .psc-skip-label {
	display: block;
	width: 100%;
	text-align: center;
	font: 600 var(--lpos-text-sm, 14px) / 1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, var(--lpos-ink));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/*
 * DEC-CR-777YS0 — Back/Next labels sit with their icons
 *
 * The labelled skips flex-grow into a wide share of the row. The icons were
 * absolutely pinned to the ends and the label was text-align:center in the
 * leftover, so "Back" and "Next" floated in the middle of a 200–400px button.
 * JD: Back is a left-aligned group (icon then text); Next is a right-aligned
 * group (text then icon). Token padding only. The mid CTA is not selected.
 * Sibling stage chrome and the tenant mark are not selected.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action].psc-skip-labeled,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action].psc-skip-labeled {
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action].psc-skip-labeled {
	justify-content: flex-start !important;
	padding-inline: calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px)) var(--lpos-space-md, 8px) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action].psc-skip-labeled {
	justify-content: flex-end !important;
	padding-inline: var(--lpos-space-md, 8px) calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px)) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action].psc-skip-labeled svg,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action].psc-skip-labeled svg {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	flex: 0 0 auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action].psc-skip-labeled .psc-skip-label,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action].psc-skip-labeled .psc-skip-label {
	width: auto !important;
	flex: 0 1 auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action].psc-skip-labeled .psc-skip-label {
	text-align: start !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action].psc-skip-labeled .psc-skip-label {
	text-align: end !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__toolbar {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: var(--lpos-subpanel-pad, 6px) !important;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Mid toolbar CTA (replaces carousel dots): the framework's lpos-c-cta__buy component owns the
 * skin (YV8 audit #3 — the all:unset hand-rebuild is retired). This modifier carries ONLY the
 * button's deliberate divergences: the toolbar-height cap, the wide floor, the solid accent
 * outline + glow, and label ellipsis. */
.lpos-blueprint .psc-center-cta {
	min-width: calc(6 * var(--lpos-control-size, 46px));
	max-width: 100%;
	height: var(--lpos-control-size, 46px) !important;
	min-height: 0 !important;
	border-color: var(--lpos-accent) !important;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lpos-ink) 12%, transparent),
		var(--lpos-accent-glow-sm, 0 0 12px color-mix(in srgb, var(--lpos-accent) 40%, transparent));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lpos-blueprint .psc-center-cta:focus-visible {
	outline: none;
	box-shadow: var(--lpos-focus-ring);
}

/* ---- Commerce: Add to Cart / Buy Now same baseline ---- */
.lpos-blueprint .lpos-c-cta__actionbar,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__actionbar,
.lpos-blueprint .lpos-cell--midright > .lpos-c-cta__actionbar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	align-content: stretch !important;
	gap: var(--lpos-gap, 12px) !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__actionbar .lpos-c-cta__buy {
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	top: auto !important;
	margin: 0 !important;
	transform: none !important;
	align-self: stretch !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: 100% !important;
	min-height: var(--lpos-control-size, 46px) !important;
	box-sizing: border-box !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:hover,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__actionbar .lpos-c-cta__buy:hover {
	transform: none !important;
}

/* =====================================================================================
   FR-9: GUEST MAGICK8 (companion 1.0.4)
   - Hide overlay carousel arrows + dots (same intent as console midcenter)
   - Explore / Get Started: breathe the CTA pair (still on ~67% stack tokens)
   - Invalid tenant logo srcs: honest-empty (hide broken img + logopanel)
   - Magick8 CTA ink/border: gold, not theme pink bleed
   ===================================================================================== */

/* Magick8 carousel: no overlay nav/dots — swipe / stage only (no midcenter toolbar here). */
.lpos-blueprint--magick8 .lpos-c-carousel__nav,
.lpos-blueprint--magick8 .lpos-c-carousel__dots,
.lpos-blueprint--magick8 .lpos-c-carousel__dot {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/*
 * FR-9 EXCEPTION -- THE GUEST DECK GETS ITS PAGER BACK, AND ONLY WHEN THERE IS SOMETHING TO PAGE.
 *
 * JD: "on dashboard i need to pagination icon buttons (larger) whenever the DASHBOARD slider has
 * more than one slide". The rule immediately above hides the framework's prev/next AND the dot
 * strip for every Magick8 carousel. This block re-shows the two NAV buttons only; the dots stay
 * hidden, because they were not asked for and hiding them is a standing ruling.
 *
 * ONE BORDER PER CONTROL -- THE SAME LAW AS THE CTA GLYPHS, NOT ITS OPPOSITE. The two CTA glyph
 * hosts lost their panels (DEC-CR-777YE0) because each sits INSIDE an already-bordered button:
 * chrome within chrome. These chevrons sit inside no button at all -- they are standalone controls
 * floating over the stage -- so the same law gives them exactly one panel of their own. They
 * already instance `.lpos-c-icon-btn` in the framework's markup, so the panel, glass fill, gold
 * hairline and control radius all arrive from the shared atom: nothing here re-paints chrome. The
 * FR-8 strip does not reach them -- it is scoped to `.lpos-cell--top*`, and this deck is in the
 * Magick8 stack, which has no cells.
 *
 * THE COUNT COMES FROM THE SERVER'S MARKUP, SO NOTHING FLASHES IN. The renderer emits one
 * `[data-lpos-slide="n"]` per slide before any script runs, so `:has()` can ask the deck whether a
 * second slide exists at first paint. A one-slide deck never matches and its buttons keep FR-9's
 * `display: none`: ABSENT, not disabled and not invisible-but-occupying-space. A browser that
 * cannot parse `:has()` drops the whole rule and the deck stays exactly as it is today, which is
 * the right way to fail.
 *
 * `:not(.psc-slider)` KEEPS THIS OFF THE COMPANION'S OWN SLIDER, whose nav is hidden by a separate
 * rule and whose deck is a single slide today -- a count that could change without anyone thinking
 * about this block.
 *
 * LARGER, FROM THE RUNG. The framework already sizes these at 1.4x the control rung; the guest view
 * wants a primary control beside the media panel, so the multiplier moves to 1.6x (73.6px against
 * the atom's 46px and the framework's 64.4px -- still under the 80px play overlay, which stays the
 * loudest control on the panel) and the glyph follows at 1.6x the small icon rung. Both values live
 * in guest-scoped tokens beside --psc-magick8-cta-gap and --psc-magick8-bicon-size, so guest-view
 * tuning keeps living in guest tokens. PLACEMENT IS THE FRAMEWORK'S OWN and is deliberately not
 * forked: two gaps in from the stage edge, vertically centred on the stage.
 */
.lpos-blueprint--magick8 .lpos-c-carousel {
	--psc-magick8-nav-size: calc(1.6 * var(--lpos-control-size, 46px));
	--psc-magick8-nav-icon: calc(1.6 * var(--lpos-icon-size-sm, 24px));
}

.lpos-blueprint--magick8 .lpos-c-carousel:not(.psc-slider):has(.lpos-c-carousel__slide[data-lpos-slide="1"]) .lpos-c-carousel__nav {
	display: inline-flex !important;
	visibility: visible !important;
	pointer-events: auto !important;
	width: var(--psc-magick8-nav-size, calc(1.6 * var(--lpos-control-size, 46px))) !important;
	height: var(--psc-magick8-nav-size, calc(1.6 * var(--lpos-control-size, 46px))) !important;
}

.lpos-blueprint--magick8 .lpos-c-carousel:not(.psc-slider):has(.lpos-c-carousel__slide[data-lpos-slide="1"]) .lpos-c-carousel__nav svg {
	width: var(--psc-magick8-nav-icon, calc(1.6 * var(--lpos-icon-size-sm, 24px))) !important;
	height: var(--psc-magick8-nav-icon, calc(1.6 * var(--lpos-icon-size-sm, 24px))) !important;
}

/*
 * FR-9 FLANK -- PEEK VISIBLE, NOT HITTABLE. Reverses the visual hide of 777YL0 / 1.0.145.
 *
 * The user likes seeing part of the last and next slides on either side of the guest
 * Dashboard. 1.0.145 hid those neighbors with clip-path, visibility:hidden and filter:none.
 * That was the opposite of the ruling. Those three declarations go. The engine's own
 * filmstrip (opacity 0.82, blur, z-index 2000, translate3d) paints the peek again.
 *
 * WHAT STAYS is the click-safety, which was a real defect and a different one. Offset-1
 * Learn More at x=115.63 and Shop Now at x=293.90 hit-tested to themselves. A peek that
 * steals the left third is worse than a peek. pointer-events:none on the off-center
 * slide AND on its buttons/anchors, so a descendant with pointer-events:auto cannot
 * re-arm the hijack. The centred slide is not selected. :not(.psc-slider) keeps this
 * off the product slider.
 *
 * No overflow, no mask, no transform, no z-index, no opacity, no nav selector.
 * Pager placement is the framework's and is not named here (DEC-CR-777YJ0).
 */
.lpos-blueprint--magick8 .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]),
.lpos-blueprint--magick8 .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]) button,
.lpos-blueprint--magick8 .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]) a {
	pointer-events: none !important;
}

/*
 * GUEST DASHBOARD TENANT MARK -- SAME SOURCE AS THE CONSOLE TAB-BAR LOGO (DEC-CR-777YO0 / 777YO1).
 *
 * Image URL and fallback text come from pscLayout.brand (psc_layout_config):
 * lpos_tenant_logo_<tenant> / lpos_console_logo, and psc_tenant_name() via
 * lpos_topbar_brand. Not a Magick8 literal. Tagline (blogdescription) stays out.
 *
 * JD: the mark is not its own panel -- no border, no glass, no chrome of its own.
 * Size is a guest-scoped token on the logo-height ladder, not a magic pixel.
 * 777YO1: width is half the 1.0.148 cap via --psc-magick8-logo-w (6 × logo-h),
 * not a magic half-pixel. Height is 1× --lpos-logo-h so the wordmark does not stay
 * twice as tall on a half-width box. Image and fallback text share those tokens.
 * Air below the mark is --lpos-pad (the pad step of the spacing ladder), on top
 * of the stack's existing --lpos-gap. Not a magic 8px.
 *
 * Does not name the pager, the peek slides, or the Console tab-bar.
 */
.lpos-blueprint--magick8 {
	--psc-magick8-logo-h: var(--lpos-logo-h, var(--lpos-control-size, 46px));
	--psc-magick8-logo-w: calc(6 * var(--psc-magick8-logo-h));
}

.lpos-blueprint--magick8 .psc-tenant-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0;
	margin: 0 0 var(--lpos-pad, var(--lpos-gap, 16px));
	min-height: var(--psc-magick8-logo-h);
	width: auto;
	max-width: min(46vw, var(--psc-magick8-logo-w));
	pointer-events: none;
}

.lpos-blueprint--magick8 .psc-tenant-logo .lpos-topbar__logo-img {
	height: var(--psc-magick8-logo-h);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.lpos-blueprint--magick8 .psc-tenant-logo .lpos-topbar__brand {
	font-family: var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	font-size: var(--psc-magick8-logo-h);
	line-height: 1;
	color: var(--lpos-logo-word-color, var(--lpos-ink));
	letter-spacing: var(--lpos-tracking-tight, 0.02em);
	text-align: center;
	white-space: nowrap;
}

/*
 * YOUTUBE PREVIEW/LOOP CHROME (DEC-CR-777YT4, drops the 777YT3 play plate).
 *
 * Crop 2.05 + pointer-events none stay. The inset veil and center plate behind
 * the play chip are gone — only the shared gold-bordered play overlay remains.
 * Preview src is never rewritten. Vimeo not selected. Logo / glass / flipbook
 * are not this window.
 */
.lpos-media:has(iframe.lpos-media__preview[src*="youtube"]) .lpos-media__embedwrap,
.lpos-magick8__player:has(iframe.lpos-media__preview[src*="youtube"]) .lpos-media__embedwrap {
	overflow: hidden !important;
}

.lpos-media iframe.lpos-media__preview[src*="youtube"],
.lpos-magick8__player iframe.lpos-media__preview[src*="youtube"] {
	pointer-events: none !important;
}

.lpos-blueprint--magick8 .lpos-magick8__player .lpos-media .lpos-media__embedwrap iframe.lpos-media__preview[src*="youtube"] {
	transform: translate(-50%, -50%) scale(var(--psc-yt-preview-scale, 2.05));
	pointer-events: none !important;
}

.lpos-blueprint--console .lpos-media iframe.lpos-media__preview[src*="youtube"] {
	transform: scale(var(--psc-yt-preview-scale, 2.05));
	transform-origin: center center;
	pointer-events: none !important;
}

.lpos-blueprint--magick8 .lpos-magick8__player .lpos-media:has(iframe.lpos-media__preview[src*="youtube"]) .lpos-media__hoverplay,
.lpos-blueprint--magick8 .lpos-magick8__player .lpos-media:has(iframe.lpos-media__preview[src*="youtube"]) .lpos-media__timeline {
	display: none !important;
}

.lpos-media.-playing iframe[src*="youtube"]:not(.lpos-media__preview) {
	pointer-events: none !important;
}

.lpos-blueprint--magick8 .lpos-magick8__player .lpos-media.-playing .lpos-media__embedwrap iframe[src*="youtube"]:not(.lpos-media__preview) {
	transform: translate(-50%, -50%) scale(1.12);
	pointer-events: none !important;
}

/*
 * Explore / Get Started gap — DELIBERATE 12px, exempt from FR-8 ~67% spacing ladder.
 * --lpos-gap / --lpos-space-* stay at 8/5/… for the rest of Magick8; this row alone
 * keeps the pre-scale framework CTA breathing room via a dedicated token so later
 * token passes cannot shrink it by cascade luck.
 * (Do not confuse with .lpos-m8slide__cta / .lpos-m8slide__ctarow — those are
 * in-card Learn More / Shop Now controls and correctly use the ~67% ladder.)
 */
.lpos-blueprint--magick8 {
	--psc-magick8-cta-gap: 12px;
}

.lpos-blueprint--magick8 .lpos-magick8__ctas.lpos-menu__ctas,
.lpos-blueprint--magick8 .lpos-magick8__ctas {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	gap: var(--psc-magick8-cta-gap, 12px) !important;
	column-gap: var(--psc-magick8-cta-gap, 12px) !important;
	row-gap: var(--psc-magick8-cta-gap, 12px) !important;
}

/* Broken logo from numeric option / esc_url(id) → http://0.0.1.N/ or http://347 (JS also hides). */
.lpos-blueprint--magick8 .lpos-magick8__logo[src^="http://0.0."],
.lpos-blueprint--magick8 .lpos-magick8__logo[src^="https://0.0."],
.lpos-blueprint .lpos-c-select__panel-logo[src^="http://0.0."],
.lpos-blueprint .lpos-c-select__panel-logo[src^="https://0.0."],
.lpos-blueprint--magick8 .lpos-magick8__logo[hidden],
.lpos-blueprint--magick8 .lpos-magick8__logopanel[hidden] {
	display: none !important;
}

/* Magick8 Explore / Get Started — gold accent chrome (kill residual theme pink on <a>). */
.lpos-blueprint--magick8 .lpos-magick8__ctas .lpos-menu__cta,
.lpos-blueprint--magick8 .lpos-magick8__ctas .lpos-menu__cta * {

	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-color: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-2, 55%),
		transparent
	) !important;
}

.lpos-blueprint--magick8 .lpos-magick8__ctas .lpos-menu__cta:hover,
.lpos-blueprint--magick8 .lpos-magick8__ctas .lpos-menu__cta:hover * {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/*
 * GUEST CTA GLYPH HOSTS ARE CHROMELESS -- one border per button, not two.
 *
 * `.lpos-magick8__bicon` is a span INSIDE `.lpos-menu__cta`, and the framework paints a whole
 * icon-button panel on it (console-tokens.css: a --lpos-control-size box, a glass-1 fill, a 1px
 * gold edge, the control radius) nested inside an already-bordered CTA. Chrome within chrome: the
 * failure mode named in DEC-CR-777Z69, and the same defect FR-23 fixed on
 * `.lpos-switch__thumb-badge`. Fixed the same way rather than a second way -- the host keeps the
 * glyph and loses the panel, and the CTA keeps the single border it always had.
 *
 * SCOPED TO THE TWO GUEST CTAs DELIBERATELY. `.lpos-magick8__ctas` reaches the compass in EXPLORE
 * and the forward arrow in GET STARTED and nothing else -- not the shared `.lpos-c-icon-btn`, not
 * the top bar, not the rail, not `.lpos-magick8__sicon` in the login form. A blanket rule would
 * strip the icon-button chrome another pass is currently ADDING to the menu and login controls,
 * and the two changes would be indistinguishable afterwards.
 *
 * ORDER IS LOAD-BEARING: the FR-9 `.lpos-menu__cta *` rule above has the same specificity, so this
 * block only wins by following it. The `:hover *` rule is heavier and still sets border-COLOUR on
 * this host, which is why the WIDTH is zeroed explicitly and not left to the shorthand.
 *
 * The box stays so the glyph does not move -- only its chrome goes.
 */
.lpos-blueprint--magick8 {
	--psc-magick8-bicon-size: var(--lpos-control-size, 46px);
}

.lpos-blueprint--magick8 .lpos-magick8__ctas .lpos-magick8__bicon {
	width: var(--psc-magick8-bicon-size, var(--lpos-control-size, 46px)) !important;
	height: var(--psc-magick8-bicon-size, var(--lpos-control-size, 46px)) !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 0 !important;
	border-width: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

/* =====================================================================================
   FR-10: MENU FLYOUT + PANEL-RESTORE PASS (companion 1.0.5)
   - Drawer/menu items: shared glass atom, gold outlines, ink→gold hover (no theme pink)
   - Section dividers / back rows: gold hairline only (kill pink button bleed)
   - ~67% spacing tokens already on .lpos-blueprint; keep menu gaps on that ladder
   - Companion hide rules stay surgical (carousel overlay chrome only) — do NOT hide cells
   ===================================================================================== */

/*
 * Drawer can sit outside .lpos-blueprint in the DOM; still inherit brand tokens so the
 * flyout matches every other glass panel (alpha/blur/gold edge).
 */
.lpos-drawer {
	--lpos-muted: var(--lpos-ink-secondary, var(--lpos-ink));

	/* 2026-08-16 sweep: the drawer sits outside the blueprint token scope (the reason this block
	 * exists), so it needs its own focus ring or consumers fall to a literal. Same recipe as the
	 * dictionary at the top of this file. */
	--lpos-focus-ring: 0 0 0 2px color-mix(in srgb, var(--lpos-accent) 90%, transparent),
		0 0 12px color-mix(in srgb, var(--lpos-accent) 45%, transparent);
	--lpos-border-tint: var(--lpos-accent);
	/* FR-36 drawer flyout glass: the flyout exists to match every other glass panel, so it tracks
	   the atom rather than holding its own copy of the old 58%. */
	--lpos-glass-panel: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
	--lpos-blur-md: blur(16px) saturate(140%);
	--psc-panel-border: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-1, 38%),
		transparent
	);
	--lpos-border-alpha-1: 38%;
	--lpos-border-alpha-2: 55%;
	--lpos-border-alpha-3: 78%;
	--lpos-gap: 8px;
	--lpos-pad: 14px;
	--lpos-panel-pad: 8px;
	--lpos-space-xs: 3px;
	--lpos-space-sm: 5px;
	--lpos-space-md: 8px;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink));
}

.lpos-drawer.lpos-drawer--left {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	border-left-color: transparent !important;
	border-right: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
}

.lpos-drawer.lpos-drawer--right {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	border-right-color: transparent !important;
	border-left: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
}

.lpos-drawer__header {
	border-bottom-color: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-2, 55%),
		transparent
	) !important;
	padding: var(--lpos-space-sm, 5px) var(--lpos-panel-pad, 8px) !important;
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-drawer__title {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-drawer__body {
	padding: var(--lpos-panel-pad, 8px) !important;
	gap: var(--lpos-gap, 8px) !important;
}

.lpos-drawer__heading {
	color: var(--lpos-muted, var(--lpos-ink-secondary, var(--lpos-ink))) !important;
}

/* Menu stack gaps — same ~67% ladder as the rest of the console. */
.lpos-drawer .lpos-menu,
.lpos-drawer .lpos-menu__home,
.lpos-drawer .lpos-menu__section,
.lpos-drawer .lpos-menu__list,
.lpos-drawer .lpos-menu__step {
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-drawer .lpos-menu__item {
	gap: var(--lpos-space-sm, 5px) !important;
}

/*
 * Theme pink (#CC3366) bleeds onto bare <button> chrome after framework `all:unset`.
 * Force gold hairlines + ink/muted labels on section headers, back rows, and step-ins.
 */
.lpos-drawer .lpos-menu__divider,
.lpos-drawer .lpos-menu__back {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 0 !important;
	border-bottom: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--lpos-muted, var(--lpos-ink-secondary, var(--lpos-ink))) !important;
	padding: var(--lpos-space-sm, 5px) var(--lpos-space-md, 8px) !important;
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-drawer .lpos-menu__divider:hover,
.lpos-drawer .lpos-menu__back:hover {
	color: var(--lpos-accent, var(--lpos-accent)) !important;
	border-bottom-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

.lpos-drawer .lpos-menu__divider[aria-expanded="true"] {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-bottom-color: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-3, 78%),
		transparent
	) !important;
}

.lpos-drawer .lpos-menu__divider .lpos-menu__chev,
.lpos-drawer .lpos-menu__divider .lpos-menu__chev svg,
.lpos-drawer .lpos-menu__back svg,
.lpos-drawer .lpos-menu__stepin,
.lpos-drawer .lpos-menu__stepin svg {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	stroke: currentColor !important;
	fill: none !important;
}

.lpos-drawer .lpos-menu__divider:hover .lpos-menu__chev,
.lpos-drawer .lpos-menu__divider:hover .lpos-menu__chev svg,
.lpos-drawer .lpos-menu__back:hover svg,
.lpos-drawer .lpos-menu__stepin:hover,
.lpos-drawer .lpos-menu__stepin:hover svg {
	color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* Item rows — single glass outline (no nested double border on has-kids inners). */
.lpos-drawer .lpos-menu__link,
.lpos-drawer .lpos-menu__toggle {
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	padding: 0 var(--lpos-space-md, 8px) !important;
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-drawer .lpos-menu__link:hover,
.lpos-drawer .lpos-menu__toggle:hover,
.lpos-drawer .lpos-menu__link:hover .lpos-menu__label,
.lpos-drawer .lpos-menu__link:focus-visible {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	color: var(--lpos-accent, var(--lpos-accent)) !important;
}

.lpos-drawer .lpos-menu__link--primary,
.lpos-drawer .lpos-menu__link[aria-current="page"],
.lpos-drawer .lpos-menu__link.is-active,
.lpos-drawer .lpos-menu__link--go:hover {
	/* Solid gold edge only — no second ring (avoids double-outline). */
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: var(--lpos-accent-glow-sm, 0 0 12px color-mix(in srgb, var(--lpos-accent) 40%, transparent));
}

.lpos-drawer .lpos-menu__item--haskids {
	background: var(--lpos-glass-panel) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	box-shadow: none !important;
	gap: 0 !important;
}

.lpos-drawer .lpos-menu__item--haskids .lpos-menu__link {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.lpos-drawer .lpos-menu__item--haskids:hover,
.lpos-drawer .lpos-menu__item--haskids:focus-within {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

.lpos-drawer .lpos-menu__item--haskids:hover .lpos-menu__link,
.lpos-drawer .lpos-menu__item--haskids:focus-within .lpos-menu__link {
	color: var(--lpos-accent, var(--lpos-accent)) !important;
}

.lpos-drawer .lpos-menu__panel {
	padding-left: var(--lpos-space-md, 8px) !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Kill any residual theme link/button pink inside the open flyout. */
.lpos-drawer a,
.lpos-drawer button,
.lpos-drawer .lpos-menu__link,
.lpos-drawer .lpos-menu__link--go,
.lpos-drawer .lpos-menu__cta {
	color: var(--lpos-ink, var(--lpos-ink));
}

.lpos-drawer a:hover,
.lpos-drawer button:hover,
.lpos-drawer .lpos-menu__link:hover,
.lpos-drawer .lpos-menu__link--go:hover,
.lpos-drawer .lpos-menu__cta:hover {
	color: var(--lpos-accent, var(--lpos-accent));
}

.lpos-drawer .lpos-c-icon-btn {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-color: var(--psc-panel-border) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

.lpos-drawer .lpos-c-icon-btn:hover {
	color: var(--lpos-accent, var(--lpos-accent)) !important;
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* Tab strip + CTA row: layout only — each control keeps its own glass outline (no wrapper ring). */
.lpos-drawer .lpos-drawer__tabs,
.lpos-drawer .lpos-menu__ctas,
.lpos-drawer .lpos-c-subpanel--cluster,
.lpos-drawer .lpos-c-subpanel--tabbar {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-drawer .lpos-menu__ctas {
	display: flex !important;
	gap: var(--lpos-space-md, 8px) !important;
	align-items: stretch;
}

/* ============================================================================
 * FR-11: Topbar column alignment + menu corner glass
 * Under .-left-collapsed the blueprint is
 *   titlebar-h | 2fr (midcenter) | 1fr (midright) | titlebar-h
 * and topcenter spans the 2fr+1fr tracks. Stretch the two topbar panels
 * onto those same tracks so their outer edges match midcenter / midright.
 * Menu (topleft) wears the shared glass atom on the cell (button stays chromeless).
 * ==========================================================================*/

/*
 * Topleft Menu: restore shared glass on the CELL.
 * Earlier FR-8 cleared cell + icon-btn chrome so the hamburger looked naked;
 * the cell is the panel shell (same recipe as every other chrome panel).
 */
.lpos-blueprint .lpos-cell--topleft {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	box-shadow: none !important;
}

/*
 * Topcenter → two-track grid matching blueprint columns 2 + 3 (2fr | 1fr).
 * Zero horizontal padding so panel edges land on the same column seams as
 * midcenter / midright below (gap = --lpos-gap).
 */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topcenter {
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
	column-gap: var(--lpos-gap, 8px) !important;
	row-gap: 0 !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	padding: 0 !important;

	/*
	 * FR-38: THE TOP ROW'S TRACK NOW EQUALS WHAT THE TOP BAR PAINTS.
	 *
	 * JD: "the spacing at the top and bottom of the top header row still has too much gap below it and
	 * above it ... the top row needs to move up after you remove that not token driven spacing rule and
	 * remove the lower spacing by assigning token which will shorten it and then the middle row content
	 * can increase in height."
	 *
	 * Measured, both gaps were 14px against 8px everywhere else in the layout:
	 *
	 *     above:  8px blueprint padding + 1px cell border + 5px cell padding  = 14
	 *     below:  5px cell padding      + 1px cell border + 8px grid row-gap  = 14
	 *
	 * The shared spacing tokens were never the problem. The vertical padding above WAS: this was the
	 * only top cell carrying any, and its own fallback reads 8px while --lpos-space-sm actually resolves
	 * to 5px -- so it was written believing it matched the sibling panels and never did. That is also
	 * why "just use the sibling's 8px" would have made the gap LARGER rather than smaller.
	 *
	 * The borders go with it, which is FR-18's fix applied to the other axis rather than a new idea:
	 * FR-18 zeroed this cell's LEFT and RIGHT borders because they are transparent, paint nothing, and
	 * only ate content width. The top and bottom hairlines were left behind and were still eating 2px of
	 * height for nothing.
	 */
	border-width: 0 !important;
}

/*
 * The first row is sized by what the bar paints instead of by --lpos-titlebar-h.
 *
 * The bar is --psc-topbar-panel-h (52px) inside a 64px track, so 12px of that track was unusable
 * whitespace that no one authored -- and with the cell's own padding and border now gone, the bar
 * simply sits in a track the right size for it. Both gaps become the same 8px seam every other panel
 * in the layout uses, and the 12px is handed to the middle row's minmax(0,1fr), which is the part JD
 * asked for: "then the middle row content can increase in height".
 *
 * --lpos-titlebar-h IS DELIBERATELY NOT RE-POINTED. The same token sizes the outer COLUMN tracks at
 * console-tokens.css:1665, so changing it to fix a row height would silently narrow both rails.
 *
 * THE MEDIA QUERY IS LOad-BEARING, NOT CAUTION. The framework declares this template unconditionally
 * (console-tokens.css:1666) and then re-declares row 1 as `auto` at <=1100px and again at <=640px.
 * The companion loads afterwards, so an unscoped override here would beat BOTH of those and pin the
 * tablet and phone stacks to a desktop row height. Note the direction of that: the framework already
 * sizes this row to its content at every other breakpoint, so desktop was the outlier being corrected
 * here rather than a new opinion being introduced.
 */
@media (min-width: 1101px) {
	.lpos-blueprint--console.-left-collapsed {
		grid-template-rows: var(--psc-topbar-panel-h) minmax(0, 1fr) var(--lpos-titlebar-h, 64px) !important;
	}
}

.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--tabs {
	grid-column: 1 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
	margin: 0 !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--utils {
	grid-column: 2 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: none !important;
	margin-left: 0 !important;
	height: 100% !important;
	box-sizing: border-box !important;
	/* Icon distribution set below (space-between after portal twin vacated). */
}

/* Pager rides the right end of the (now full-width) tabs track. */
.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--tabs .lpos-pagination--nav {
	margin-left: auto !important;
}

/* ============================================================================
 * FR-12: Corner topbar painted-box match + active slide outline + full-bleed Coming Soon
 * ==========================================================================*/

/*
 * Tabs/utils painted height = titlebar row minus topcenter's border-box chrome:
 *   2× border-width + 2× space-sm padding  →  64 - 2 - 10 = 52
 * Corner cells are NOT blueprint grid items (they sit inside regions), so margin
 * stretch cannot match that track. Pin the painted cell box to the same token and
 * flex-center it inside the full-height region.
 */
.lpos-blueprint--console.-left-collapsed {
	/*
	 * ITEM 6 (JD 2026-08-13): "there is not enough spacing above and below the tab buttons and the
	 * top right icon buttons."
	 *
	 * THE FORMULA IS REWRITTEN BEFORE IT IS RETUNED, because the one that stood here described a box
	 * that no longer exists. It read "titlebar height minus two borders minus two space-sm paddings",
	 * which was true when the cell had that padding and those borders; the pass that shortened this
	 * row deleted both and left the arithmetic behind. It still evaluated to 52px, so nothing looked
	 * wrong -- an expression can be entirely stale and still land on the right number, which is
	 * exactly why the next person to tune it would have tuned the wrong term.
	 *
	 * What the row actually is: ONE CONTROL, plus the same inset above and below it. That is now what
	 * it says, so the inset is a term you can move rather than a residue of a subtraction.
	 *
	 * AND MOVING IT IS THE FIX. At the old 52px the row held a 46px control with 3px of air either
	 * side -- measured, and identically so on all of the tab crumbs, the utils icons, the menu and
	 * the login. JD's two complaints about this row are compatible and both are honoured here: it
	 * stays far shorter than the 64px they called far too large, and its contents stop being flush.
	 * The inset moves from what centring in 52px was silently producing (3px) to --lpos-space-sm
	 * (5px), and the row grows 52 -> 56.
	 *
	 * THE COST, STATED RATHER THAN ABSORBED: row 1 takes those 4px from the middle row's
	 * minmax(0, 1fr), so the mid row goes 572 -> 568 at 1280 and 932 -> 928 at 1920. There is no way
	 * to give the controls room from inside a row pinned to the control's own height, and shrinking
	 * the control instead would break the 46px --lpos-control-size that every other control in the
	 * console is built from.
	 *
	 * The fallback is written as what the token RESOLVES to, not as what the old ones claimed:
	 * --lpos-space-sm is declared 8px in fallbacks all over this file and resolves to 5px, which is a
	 * recorded pending audit. Repeating the wrong number here would spread it.
	 */
	--psc-topbar-ctrl-inset: var(--lpos-space-sm, 5px);
	--psc-topbar-panel-h: calc(var(--lpos-control-size, 46px) + 2 * var(--psc-topbar-ctrl-inset));
}

.lpos-blueprint--console.-left-collapsed .lpos-blueprint__region--topleft,
.lpos-blueprint--console.-left-collapsed .lpos-blueprint__region--topright {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright {
	margin: 0 !important;
	padding: 0 !important;
	height: var(--psc-topbar-panel-h) !important;
	max-height: var(--psc-topbar-panel-h) !important;
	min-height: var(--psc-topbar-panel-h) !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	align-self: center !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Inner icon/avatar stays control-size; chromeless inside the painted cell. */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright .lpos-c-icon-btn {
	width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-width: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-width: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	flex: 0 0 auto !important;
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Topright keeps the shared glass atom on the cell (same recipe as topleft / FR-11). */
.lpos-blueprint .lpos-cell--topright {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	box-shadow: none !important;
}

/*
 * Active primary slide: restore shared gold outline + glass (FR-8 had stripped nested
 * slide chrome so only the midcenter cell outlined — JD wants the slide surface itself
 * to read as a panel). Inactive offsets stay hidden.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__slide[data-offset="0"],
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"],
.lpos-blueprint .lpos-cell--midcenter .lpos-c-carousel__slide:not([data-offset]) {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

/* Coming-soon full-bleed rules set border:0 / transparent — win back the active slide only. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"] {
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

/*
 * Coming Soon CTA: stretch with Previous/Next (actions row), then fill the toolbar
 * cell edge-to-edge. Base .psc-center-cta height:control-size must not win.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions {
	align-items: stretch !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__toolbar {
	position: relative !important;
	padding: 0 !important;
	margin: 0 !important;
	align-self: stretch !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	display: flex !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	background: transparent !important;
	/* Zero border so height:100% CTA isn't inset by a transparent hairline. */
	border: 0 !important;
	border-width: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__toolbar .psc-center-cta {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 100% !important;
	min-height: 100% !important;
	max-height: none !important;
	box-sizing: border-box !important;
	padding-block: 0 !important;
	margin: 0 !important;
}

/* ==========================================================================
 * FR-13: Top-right utils icon buttons — shared gold outlines inside the bar
 * ==========================================================================
 * JD: chromeless utils icons need their own borders. Keep the utils panel tray
 * outline (intentional buttons-in-bar). Do NOT add box-shadow rings — that was
 * the FR-8/FR-10 nested-ring look. Avatar stays chromeless: the painted topright
 * cell already is the bordered control (inner ring would double-outline).
 * Panel painted height stays --psc-topbar-panel-h (52); controls stay 46 box.
 */
.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 12px) !important;
	background: var(--lpos-glass-2) !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	box-sizing: border-box !important;
	width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-width: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-width: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	flex: 0 0 auto !important;
}

.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn:focus-visible,
.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn:active {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	background: var(--lpos-glass-2) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn.is-active,
.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn.-active {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	background: var(--lpos-glass-2) !important;
	/* Suppress global active glow ring — panel + button border is enough. */
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint .lpos-topbar__panel--utils .lpos-c-icon-btn svg {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	fill: none !important;
	stroke: currentColor;
}

/* ==========================================================================
 * FR-14: Topbar reorg + midright span stack + pager chip + menu border
 * ========================================================================== */

/* §2 — Tabs flush left once portal twin leaves; pager still rides the right end. */
.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--tabs {
	justify-content: flex-start !important;
	gap: var(--lpos-space-sm, 5px) !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--tabs .lpos-topbar__rule[data-psc-hidden-rule],
.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--tabs .lpos-topbar__rule[hidden] {
	display: none !important;
}

/*
 * §1 — Utils tray: portal twin vacated → bell–cart reclaim width.
 * Buttons keep control-size panel chrome; distribution from token gap +
 * space-between over live tray width (no hardcoded widths / button counts).
 */
.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--utils {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex-wrap: nowrap !important;
	overflow: hidden !important;
	min-width: 0 !important;
	width: 100% !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-topbar__panel--utils > .lpos-c-icon-btn {
	flex: 0 0 var(--lpos-control-size, 46px) !important;
}

/* Portal select twin parked at top of hamburger flyout (FR-28 relocate). */
.lpos-drawer .psc-drawer-portal.lpos-c-select-twin,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] {
	display: flex !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	margin: 0 0 var(--lpos-space-sm, 5px) !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	order: -1 !important;
}

.lpos-drawer .psc-drawer-portal .lpos-c-select,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	gap: var(--lpos-space-sm, 5px) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * Flyout item recipe (FR-10): one glass outline on the value control —
 * match .lpos-menu__link, not the top-bar twin treatment.
 */
.lpos-drawer .psc-drawer-portal .lpos-c-select__value,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select__value {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	justify-content: flex-start !important;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	padding: 0 var(--lpos-space-md, 8px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
}

.lpos-drawer .psc-drawer-portal .lpos-c-select__value:hover,
.lpos-drawer .psc-drawer-portal .lpos-c-select:focus-within .lpos-c-select__value,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select__value:hover,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select:focus-within .lpos-c-select__value {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	color: var(--lpos-accent, var(--lpos-accent)) !important;
}

.lpos-drawer .psc-drawer-portal .lpos-c-select__brandname,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select__brandname {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	min-width: 0 !important;
	color: inherit !important;
}

.lpos-drawer .psc-drawer-portal .lpos-c-select > .lpos-c-icon-btn,
.lpos-drawer .lpos-c-select-twin[data-psc-moved='drawer-portal'] .lpos-c-select > .lpos-c-icon-btn {
	flex: 0 0 var(--lpos-control-size, 46px) !important;
	width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/* §3 — Menu icon gets its own gold hairline inside the topleft painted cell. */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 12px) !important;
	background: var(--lpos-glass-2) !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn:hover,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn:focus-visible,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn.-active {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/* §8 — Pagination chevrons wrapped as a bordered chip inside the tabs tray.
 * Inner icon-btns stay chromeless (FR-8 strip) so we don't stack rings. */
.lpos-blueprint .lpos-topbar__panel--tabs .lpos-pagination--nav[data-psc-pager-panel],
.lpos-blueprint .lpos-topbar__panel--tabs .lpos-pagination--nav {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--lpos-space-xs, 3px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	padding: 0 var(--lpos-space-xs, 3px) !important;
	margin-left: auto !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-topbar__panel--tabs .lpos-pagination--nav .lpos-c-icon-btn {
	width: calc(var(--lpos-control-size, 46px) - 2 * var(--lpos-space-xs, 3px)) !important;
	height: calc(var(--lpos-control-size, 46px) - 2 * var(--lpos-space-xs, 3px)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	border-color: transparent !important;
	background: transparent !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-topbar__panel--tabs .lpos-pagination--nav .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-topbar__panel--tabs .lpos-pagination--nav .lpos-c-icon-btn:focus-visible {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: none !important;
}

/*
 * DEC-CR-777YN0 — Console Displays drop the tab-bar pager. Magick8 keeps its own.
 * Plus stays docked in that slot when the session has one (logged-in).
 * JD 2026-08-18 ("there should be 8 cards per on the shop"): a MULTI-PAGE archive needs the
 * chevrons back — companion-layout's syncPager() stamps `data-psc-pager-live` on the pager
 * ONLY while the centre holds more than one 8-card page, and this rule lets that state
 * through. Default (no stamp) stays hidden, so nothing flashes on non-archive views.
 */
.lpos-blueprint.lpos-blueprint--console .lpos-topbar__panel--tabs .lpos-pagination--nav:not([data-psc-pager-live]) {
	display: none !important;
}

/* §4–5 — QTY/availability row becomes ONE unified span-button panel (placeholder only).
 * Existing `.lpos-c-cta__info` below is the content panel — no extra stack wrapper. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice.psc-qty-span-host,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice[data-psc-span-host] {
	grid-column: 1 / -1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: var(--lpos-space-sm, 5px) !important;
	padding: var(--lpos-space-xs, 3px) !important;
	box-sizing: border-box !important;
	min-height: var(--lpos-control-size, 46px) !important;
	border: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice[data-psc-span-host] > [data-psc-commerce-hidden],
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice[data-psc-span-host] > .lpos-c-cta__qtypanel[hidden],
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice[data-psc-span-host] > .lpos-c-cta__pricepanel[hidden] {
	display: none !important;
}

.lpos-blueprint .lpos-cell--midright .psc-spanbar {
	display: flex !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 12px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn:focus-visible,
.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn[aria-pressed="true"] {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn[disabled],
.lpos-blueprint .lpos-cell--midright .psc-spanbar .lpos-c-icon-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
}

/* Content panel below the span row — reuse framework `.lpos-c-cta__info`. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__info[data-psc-span-panel] {
	grid-column: 1 / -1 !important;
	min-height: calc(2 * var(--lpos-control-size, 46px)) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	padding: var(--lpos-space-sm, 5px) !important;
}

/* ==========================================================================
 * FR-15: Rails end at mid-row; bottom bars claim vacated corner tracks
 * ==========================================================================
 * Framework pins rails to grid-row 2/4 (mid + bot). JD: rail bottoms flush with
 * midcenter bottom; botcenter grows left under the left rail; midright actionbar
 * grows right under the right rail. Outer tracks use --lpos-titlebar-h (framework
 * grid-template-columns), NOT --lpos-rail-w (inner control+pad). Gap + titlebar-h
 * = vacated column. Empty botleft/botright shells stay hidden so spanning bars win.
 */
.lpos-blueprint--console.-left-collapsed .lpos-rail--left,
.lpos-blueprint--console.-left-collapsed .lpos-rail--right {
	grid-row: 2 / 3 !important;
	height: auto !important;
	max-height: 100% !important;
	min-height: 0 !important;
	align-self: stretch !important;
	box-sizing: border-box !important;
	/* Safety if icon count ever exceeds mid-row height — never clip silently. */
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

/* §4 — Composer / search claims left rail column + midcenter track. */
.lpos-blueprint--console.-left-collapsed > .lpos-blueprint__row > .lpos-blueprint__region--botcenter {
	grid-column: 1 / 3 !important;
	grid-row: 3 !important;
}

/* Vacated corner tracks must not paint over the spanning bars. */
.lpos-blueprint--console.-left-collapsed > .lpos-blueprint__row > .lpos-blueprint__region--botleft,
.lpos-blueprint--console.-left-collapsed > .lpos-blueprint__row > .lpos-blueprint__region--botright {
	display: none !important;
}

/*
 * §3 — Actionbar reaches the outer right track edge (midright + gap + titlebar col).
 *
 * RESTORED (JD 2026-08-15). A pass in between narrowed this to `width: 100%`, reading the row
 * extending past its column as a defect introduced by the rail swap. The owner then supplied a
 * side-by-side and asked for the buttons to span FURTHER right, not less -- the wide row is the
 * intended look, and the fact that it passes under the rail track is deliberate.
 *
 * Kept as a note rather than a silent revert because the narrow version was measured, verified and
 * confidently wrong: alignment with the panel above is not the goal here, reaching the canvas edge
 * is. `overflow: visible` above is what allows the escape and must stay.
 */
.lpos-blueprint--console.-left-collapsed .lpos-blueprint__region--midright,
.lpos-blueprint--console.-left-collapsed .lpos-cell--midright {
	overflow: visible !important;
}

.lpos-blueprint--console.-left-collapsed .lpos-cell--midright > .lpos-c-cta__actionbar {
	width: calc(100% + var(--lpos-gap, 8px) + var(--lpos-titlebar-h, 64px)) !important;
	max-width: none !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Tablet stack (framework ≤1100px): 3 cols, content stacked, rails were 2/5 into composer.
 * Stop rails above the composer row; composer spans full width under both rails.
 * Outer cols still use --lpos-rail-w-md on that breakpoint. */
@media (max-width: 1100px) {
	.lpos-blueprint--console.-left-collapsed .lpos-rail--left,
	.lpos-blueprint--console.-left-collapsed .lpos-rail--right {
		grid-row: 2 / 4 !important; /* midcenter + midright only — not bot row 4 */
	}

	.lpos-blueprint--console.-left-collapsed > .lpos-blueprint__row > .lpos-blueprint__region--botcenter {
		grid-column: 1 / -1 !important;
		grid-row: 4 !important;
	}

	/* Matches §3 at the tablet breakpoint: the row reaches the outer track edge here too, using the
	 * rail width token that applies at this size. */
	.lpos-blueprint--console.-left-collapsed .lpos-cell--midright > .lpos-c-cta__actionbar {
		width: calc(100% + var(--lpos-gap, 8px) + var(--lpos-rail-w-md, 52px)) !important;
	}
}

/* ==========================================================================
 * FR-16: Utils Power removal chrome + left-rail distribution
 * ==========================================================================
 * §1 Power node is removed in companion-layout.js (not display:none). No CSS
 * hide needed — keep utils tray flex as-is so remaining icons reflow.
 *
 * §2 WITHDRAWN 2026-08-12. This mirrored the right rail's even distribution onto the left rail at
 * JD's earlier request; JD has since reversed it: "the left vertical icon button tool panel let's
 * remove the even distribution ... the left ones (crosshair -> Share icon button) can just have the
 * normal button spacing from the top". Even distribution and the connector hairline are now
 * RIGHT-RAIL-ONLY, which is what the hairline always was.
 *
 * `justify-content` and `gap` are DELETED rather than overridden with new values. Underneath them the
 * framework's own `.lpos-rail` already declares `flex-start` with `gap: var(--lpos-gap)`, so deleting
 * uncovers the shared spacing token every other button group uses instead of introducing a second
 * opinion about the left rail on top of the first. A rule whose job is to undo another rule is how
 * this stylesheet accumulated the contradictions being unwound this week.
 *
 * The padding STAYS: it is rail padding, not distribution -- it holds the crosshair and the Share
 * button off the rail's ends, and the framework applies its equivalent to the right rail only.
 */
.lpos-blueprint--console.-left-collapsed .lpos-rail--left {
	padding-top: var(--lpos-gap, 8px) !important;
	padding-bottom: var(--lpos-gap, 8px) !important;
}

/* ==========================================================================
 * FR-17: Translucent surfaces everywhere + white commerce CTA ink
 * ==========================================================================
 * Token fix (above): --lpos-panel / hover / overlay → translucent.
 * Below: nested-control tiers (avoid stacking another 58% void on a frosted parent),
 * unstack slide-in-midcenter, CTA resting ink + primary fill contrast.
 */

/* Nested controls inside already-frosted parents → glass-2 tier (not full panel atom).
 * Actionbar CTAs: resting only — exclude filled/solid so accent-glass can win. */
.lpos-blueprint .lpos-rail .lpos-c-icon-btn,
.lpos-blueprint .lpos-rail .lpos-switch__thumb,
.lpos-blueprint .lpos-rail .psc-step,
.lpos-blueprint .lpos-feat__actions > .lpos-c-skip-action,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.is-filled):not([data-lpos-cta="filled"]):not(.is-solid):not([data-psc-solid="1"]),
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary,
.lpos-drawer .lpos-menu__link,
.lpos-drawer .lpos-menu__toggle,
.lpos-drawer .lpos-menu__item--haskids,
.lpos-drawer .lpos-c-icon-btn {
	background-color: var(--lpos-glass-2) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
}

/* DEC-CR-777YQ2 — utils keep the nested glass fill; FR-8 no longer strips them. */
.lpos-blueprint .lpos-topbar__panel--utils > .lpos-c-icon-btn {
	background: var(--lpos-glass-2) !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
}

/*
 * Coming Soon: slide wears the atomic glass (JD called out "the slide").
 * Midcenter cell + any sibling/parent .lpos-feat__body go chromeless so we do not
 * stack two 58% voids (reads as opaque black — live stack had feat__body @ 58%
 * under the frosted slide with no blur).
 * Outer gold border stays on the cell; slide keeps its own FR-12 outline + frost.
 */
.lpos-blueprint .lpos-cell--midcenter:has(.lpos-feat__body--coming),
.lpos-blueprint .lpos-cell--midcenter:has(.lpos-c-carousel__slide[data-offset="0"]),
.lpos-blueprint .lpos-cell--midcenter:has(.lpos-feat__body--coming) .lpos-feat__body,
.lpos-blueprint .lpos-cell--midcenter:has(.lpos-c-carousel__slide[data-offset="0"]) .lpos-feat__body {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/*
 * Resting CTAs (honest-empty / disabled): nested glass-2 + --lpos-ink (above).
 * Filled/active product state: opt-in via .is-filled / [data-lpos-cta="filled"].
 * ink-inverted on gold-glass — white-on-gold is weak (JD FR-17 §2).
 * Do NOT auto-fill on :not([disabled]) — that fights honest-empty + Magick8.
 */
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-filled,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-lpos-cta="filled"],
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-filled,
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-lpos-cta="filled"] {
	background-color: var(--lpos-accent-glass-strong, color-mix(in srgb, var(--lpos-accent) 46%, transparent)) !important;
	background-image: none !important;
	color: var(--lpos-ink-inverted, var(--lpos-ink-inverted)) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-filled *,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-lpos-cta="filled"] *,
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-filled *,
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-lpos-cta="filled"] * {
	color: var(--lpos-ink-inverted, var(--lpos-ink-inverted)) !important;
}

/* Solid opaque accent — same inverted ink (stronger than glass-strong). */
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-solid,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-psc-solid="1"],
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-solid,
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-psc-solid="1"] {
	background-color: var(--lpos-accent, var(--lpos-accent)) !important;
	background-image: none !important;
	color: var(--lpos-ink-inverted, var(--lpos-ink-inverted)) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).is-solid *,
.lpos-blueprint .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary)[data-psc-solid="1"] * {
	color: var(--lpos-ink-inverted, var(--lpos-ink-inverted)) !important;
}

/* Drawer inherits the same translucent surface tokens (sits outside .lpos-blueprint).
   FR-36 drawer late-cascade glass: this block redeclares the tokens AFTER the flyout block above,
   so it is the one that wins for .lpos-drawer. It has to move with the atom or the drawer keeps the
   old 58% while every panel around it lightens. --lpos-overlay stays at 72%: it is the dim behind
   the drawer, not a surface. */
.lpos-drawer {
	--lpos-panel: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
	--lpos-panel-hover: color-mix(in srgb, var(--lpos-bg) 16%, transparent);
	--lpos-overlay: color-mix(in srgb, var(--lpos-bg) 72%, transparent);
	--lpos-glass-2: color-mix(in srgb, var(--lpos-bg) 8%, transparent);
}

/*
 * Midright commerce: .lpos-c-cta wrapper must NOT wear the panel atom on top of
 * media/info/tab children that already do (58%×58% reads as opaque black).
 * Wrapper goes chromeless; children keep --psc-panel-bg (one atom each).
 */
.lpos-blueprint .lpos-cell--midright > .lpos-c-cta,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta.lpos-c-cta--adaptive {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* ==========================================================================
 * FR-18 / FR-22 / FR-25: Complete label centered; arrow pinned right
 * ==========================================================================
 * Icon uses currentColor → FR-17 resting --lpos-ink / filled --lpos-ink-inverted.
 * FR-22 used margin-left:auto on the SVG, which left-biased the label.
 * FR-25: three-column grid (1fr auto 1fr) — label in the center track, glyph in
 * the right track justify-self:end. Equal 1fr side tracks keep the label centered
 * on the full button width while the arrow stays at the right inset.
 * Absolute glyph was rejected: buy buttons are position:static !important (FR-8).
 */
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary) {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
	align-items: center !important;
	justify-content: stretch !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
	gap: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary) > span {
	grid-column: 2 !important;
	grid-row: 1 !important;
	justify-self: center !important;
	text-align: center !important;
	margin: 0 !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary) > svg {
	grid-column: 3 !important;
	grid-row: 1 !important;
	justify-self: end !important;
	margin: 0 !important;
	fill: none !important;
	stroke: currentColor !important;
	color: inherit !important;
	background: transparent !important;
}

/* Get Started: text-only — keep label optically centered on the full button. */
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary > span {
	margin: 0 !important;
	text-align: center !important;
}

.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary[data-psc-no-icon] > svg,
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary[data-psc-no-icon] .lpos-magick8__bicon {
	display: none !important;
}

/* ==========================================================================
 * FR-22: Toolbar row width = active slide track (CSS vars from syncToolbarTrack)
 * ==========================================================================
 * Vars are measured from the slide vs the actions' parent slot — same painted
 * track, no magic pixels.
 */
.lpos-blueprint .lpos-cell--midcenter[data-psc-toolbar-track] .lpos-feat__actions {
	margin-left: var(--psc-slide-inline-start, 0px) !important;
	margin-right: var(--psc-slide-inline-end, 0px) !important;
	width: auto !important;
	max-width: none !important;
	box-sizing: border-box !important;
	align-self: stretch !important;
}

/* ==========================================================================
 * FR-22 / FR-24 glass unstack — nested atoms + cumulative stack
 * ==========================================================================
 * FR-22 cleared the midright col *element* fill but left framework
 * `.lpos-cell--midright > .lpos-col::before/::after` (card cover + 40% panel veil).
 * That veil stacks under every 0.58 atom → effective ~0.68 and reads near-opaque
 * while the center slide (single 0.58, no column veil) stays frosted.
 * Also: media inner wrap kept a nested gold border (looked like a clipped bottom edge).
 */
.lpos-blueprint .lpos-c-cta__media .lpos-media-image-wrap,
.lpos-blueprint .lpos-media-image-wrap--empty {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	/* FR-24: chromeless well — no nested border inside the media panel atom */
	border: 0 !important;
	border-width: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midright > .lpos-col,
.lpos-blueprint .lpos-cell--midright .lpos-col.-docked,
.lpos-blueprint [data-lpos-view-host="midright"] {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 0 !important;
	border-width: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* FR-24: kill framework midright column ambient cover + veil (pseudos). */
.lpos-blueprint .lpos-cell--midright > .lpos-col::before,
.lpos-blueprint .lpos-cell--midright > .lpos-col::after,
.lpos-blueprint .lpos-cell--midright .lpos-col.-docked::before,
.lpos-blueprint .lpos-cell--midright .lpos-col.-docked::after,
.lpos-blueprint [data-lpos-view-host="midright"]::before,
.lpos-blueprint [data-lpos-view-host="midright"]::after {
	background: transparent !important;
	background-image: none !important;
	background-color: transparent !important;
	opacity: 0 !important;
	filter: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

/*
 * FR-24: media panel owns the single border. overflow:hidden + nested well border
 * made the bottom edge read as clipped where the inset well stopped short of the
 * outer left edge. Keep empty media overflow visible so the atom border paints clean.
 */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media {
	overflow: visible !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .lpos-media-image-wrap--empty,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .lpos-media-image-wrap {
	overflow: hidden !important; /* still clip real media assets inside the well */
}

/*
 * DEC-CR-777YR0 — secondary featured-image slot is the shared Video Player atom
 * in the hover-nav / no-autoplay variant.
 *
 * The primary player keeps its persistent-under transport (relocateMediaTransport,
 * scoped to midcenter). This variant leaves the framework overlays ON the stage
 * and shows them on hover only. No teaser loop: preview is opted out in PHP.
 *
 * FR-49 flipbook rules (midcenter .-flip) are not this window.
 */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media:has(.psc-player--hover-nav),
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media:has(.lpos-media.-video) {
	overflow: hidden !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .psc-player--hover-nav {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	position: relative !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .psc-player--hover-nav .lpos-media.-video {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .psc-player--hover-nav .lpos-media__stagev,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .psc-player--hover-nav .lpos-media__embedwrap,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__media .psc-player--hover-nav .lpos-media__embedposter {
	width: 100% !important;
	height: 100% !important;
	inset: 0;
}

.lpos-blueprint .lpos-cell--midright .psc-player--hover-nav iframe.lpos-media__preview {
	display: none !important;
}

.lpos-blueprint .lpos-c-cta > .psc-player--hover-nav {
	display: none !important;
}

.lpos-blueprint .lpos-cell--midright .psc-player--hover-nav .lpos-media__bar {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--lpos-duration-reveal, 180ms);
}

.lpos-blueprint .lpos-cell--midright .psc-player--hover-nav:hover .lpos-media__bar,
.lpos-blueprint .lpos-cell--midright .psc-player--hover-nav:focus-within .lpos-media__bar {
	opacity: 1;
	pointer-events: auto;
}

/* DEC-CR-777YQ1 — span buttons keep the panel recipe; the host is chromeless. */

/*
 * FR-23: Home rail entry is `.lpos-switch__thumb` with an inner
 * `.lpos-switch__thumb-badge`. Framework (+ prior companion glass) painted a
 * second border/panel on the badge → double ring. Badge is a glyph host only;
 * the thumb button owns the single border (glass-2 nested tier above).
 */
.lpos-blueprint .lpos-rail .lpos-switch__thumb-badge,
.lpos-blueprint .lpos-switch__thumb-badge {
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 0 !important;
	border-width: 0 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

/*
 * Active rail entry: one border (full accent) + soft glow — do NOT stack a
 * second `0 0 0 Npx` ring on top of the border (framework + FR-7 did that).
 */
.lpos-blueprint .lpos-rail .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint .lpos-rail .lpos-c-icon-btn.is-active,
.lpos-blueprint .lpos-rail .lpos-c-icon-btn.-active,
.lpos-blueprint .lpos-rail .lpos-switch__thumb[aria-pressed="true"],
.lpos-blueprint .lpos-rail .psc-step[aria-pressed="true"] {
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: var(
		--lpos-accent-glow-sm,
		0 0 12px color-mix(in srgb, var(--lpos-accent) 40%, transparent)
	) !important;
}

/* ==========================================================================
 * FR-19 / FR-26 / FR-28: Right rail Process Panel (Steps)
 * ==========================================================================
 * Soft-default N Steps. Control size from live geometry (syncRailGeometry) —
 * fixed ≤1360×900 media query retired (Slice 2).
 *
 * DEC-CR-777YN2 — page capacity. Authored `psc_rail_page_size` wins in JS;
 * this token is the component default. Not a pixel and not a Display.
 */
.lpos-blueprint .lpos-rail--right {
	--psc-rail-page-size: 7;
}

.lpos-blueprint .lpos-rail--right[data-psc-rail-composed] .lpos-c-icon-btn,
.lpos-blueprint .lpos-rail--right[data-psc-rail-composed] .lpos-switch__thumb,
.lpos-blueprint .lpos-rail--right[data-psc-rail-composed] .psc-step {
	flex: 0 0 auto !important;
}

.lpos-blueprint .lpos-rail--right .psc-step {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	background-size: cover;
	background-position: center;
	/* Shared panel chrome via .psc-step selectors above — no .lpos-switch__thumb. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	cursor: pointer;
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
	min-width: var(--lpos-control-size, 46px);
	min-height: var(--lpos-control-size, 46px);
}

.lpos-blueprint .lpos-rail--right .psc-step__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 0;
}

/*
 * FR-26 step glass: the featured image is the button's background, so the glyph needs a layer
 * between it and the photograph or it disappears over a light frame. Layering is explicit and
 * the three values are the whole contract:
 *
 *   z-index 0  .psc-step__img   the Step's featured image, object-fit: cover
 *   z-index 1  .psc-step::after the glass scrim (shared --psc-panel-* recipe)
 *   z-index 2  the badge        the down-arrow glyph, always on top
 *
 * The scrim uses backdrop-filter rather than a solid tint on purpose: an opaque wash would hide
 * the image this button exists to show, and the point is a frosted tile with the product visible
 * through it. No new custom property is introduced -- --psc-panel-bg / --psc-panel-blur /
 * --psc-panel-radius are the same tokens every other glass surface in this file instances, so a
 * change to the glass recipe reaches the rail without anyone remembering the rail exists.
 */
.lpos-blueprint .lpos-rail--right .psc-step::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	background: var(--lpos-glass-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
}

.lpos-blueprint .lpos-rail--right .psc-step > .lpos-switch__thumb-badge {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
 * FR-28: Transport below video (atomic glass panel); topbar logo; Back disabled
 * ==========================================================================
 * Outer bar = one glass host (shared --psc-panel-* / FR-14 qty-span-host recipe).
 * Inner groups are chromeless; buttons reuse FR-14 .psc-spanbar icon-btn chrome.
 * Primaries (skip-back / play / skip-forward) take a larger flex share.
 */
/*
 * FR-40 any medium docks below the stage, not only video (JD 2026-08-13, DEC-CR-777ZD2).
 *
 * "regardless of the media type" -- so the geometry below is claimed by whatever bar the companion has
 * put in the transport slot, and the medium's own class no longer decides whether it is allowed to sit
 * in flow. Everything inside this rule is FR-35's and is unchanged; only this line moved.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex: 0 0 auto !important;
	/*
	 * FR-35: IN FLOW, BELOW THE STAGE (JD 2026-08-12, DEC-CR-777ZQ3). This reverts FR-32's overlay,
	 * deliberately and with the arithmetic in hand rather than on preference.
	 *
	 * FR-32 pinned the bar over the video because in flow it cost the stage a 54px box plus its
	 * margin, which pushed a width-driven 16:9 out of the available height and handed the panel to
	 * the framework's letterbox path. That cost has not changed -- 58px, measured. What changed is
	 * that the title panel above the video is deleted IN THIS SAME SHIP, returning 90.8px. Net
	 * +32.8px at both 1920 and 1280, and at 1280 the video gains 40px of WIDTH because the letterbox
	 * path stands down on its own.
	 *
	 * THIS RULE ALONE IS A REGRESSION. In flow with the title panel still present the video drops to
	 * 570px at 1280, worse than either endpoint, because the bar is charged while the panel's height
	 * is still spent. If a future pass reverts the panel's deletion it must revert this too.
	 *
	 * AT 1280 THERE ARE 9px OF SLACK LEFT AND NOTHING BEHIND THEM. The panel was the only thing
	 * absorbing pressure here, so a taller transport, a wrapped nav row or a shifted padding token
	 * puts the video straight back on the letterbox path. That is why the sizer now records a
	 * shortfall and says so loudly -- see the LETTERBOX SHORTFALL block in companion-media-aspect.js.
	 *
	 * `margin-top` is the same subpanel-pad FR-32 used as its bottom inset, so the gap between the
	 * video and the bar is unchanged from the overlay this replaces.
	 */
	position: relative !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: var(--lpos-subpanel-pad, 4px) 0 0 0 !important;
	z-index: auto !important;
	box-sizing: border-box !important;
	padding: var(--lpos-space-xs, 3px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	/* Atomic panel — same tokens as FR-14 span host / pager. */
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	box-shadow: none !important;
}

/*
 * Groups stay in the DOM for framework ownership, but display:contents so
 * every control flexes in ONE span row (FR-14 fill law). Absent controls
 * simply omit a flex item — no empty mid-column balloon.
 */
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-feat__toolbar,
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-feat__toolbar--left,
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-feat__toolbar--mid,
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-feat__toolbar--right {
	display: contents !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/*
 * FR-14 span-button chrome (same recipe as .psc-spanbar .lpos-c-icon-btn).
 * flex:1 fills the row; absent controls just redistribute.
 */
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn:hover,
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn:focus-visible,
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn.-on {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/* Primaries: skip-back, play, skip-forward — wider share than secondaries. */
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport [data-lpos-vt="back"],
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport [data-lpos-vt="toggle"],
.lpos-blueprint .lpos-cell--midcenter .psc-media-transport [data-lpos-vt="fwd"] {
	flex: 1.75 1 0 !important;
}

/* Orphan / leftover hairlines after relocation — not intentional pager chrome. */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video > .lpos-media__bar.psc-media-transport::before,
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video > .lpos-media__bar.psc-media-transport::after,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video::after,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video::before,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat[data-psc-transport-relocated] > hr,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated]::before,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated]::after,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat[data-psc-transport-relocated] .lpos-feat__body::after,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat[data-psc-transport-relocated] .lpos-feat__body::before {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: none !important;
	height: 0 !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated] {
	border-top: 0 !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video[data-psc-transport-host] {
	/* Stage box ends above the bar — bar is in-flow sibling, not overlay. */
	overflow: visible !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video[data-psc-transport-host] > .lpos-media__stagev,
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video[data-psc-transport-host] > .lpos-media__stage {
	margin-bottom: 0 !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated] > .lpos-feat__toolbar--left,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated] > .lpos-feat__toolbar--mid,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions[data-psc-transport-relocated] > .lpos-feat__toolbar--right {
	display: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > [data-psc-cta-host] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-prev-action][aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

/* Logo panel — first child of tabs bar; sibling of tab list (not a crumb). */
.lpos-blueprint--console .lpos-topbar__panel--tabs {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.lpos-blueprint--console .psc-topbar-logo {
	display: flex !important;
	align-items: center !important;
	order: -1 !important; /* belt: visual first even if a dyn node races ahead */
	flex: 0 1 auto !important;
	margin-right: var(--lpos-space-sm, 5px) !important;
	padding-inline: var(--lpos-space-sm, 5px) !important;
	max-width: 28%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box !important;
	min-height: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-logo-h, var(--lpos-control-size, 46px)) !important;
}

/* ==========================================================================
 * psc-topbar-chip -- THE TOPBAR TRAY'S CONTROLS ARE PANELS (JD/QA 2026-08-12, P3a + P3c)
 *
 * WHY THE `+` HAD NO OUTLINE, read rather than guessed. It is already an instance of the shared
 * `.lpos-c-icon-btn` -- all three `[data-lpos-tabbar="plus"]` buttons carry that class -- and the
 * component's own chrome is fine. This file then STRIPS it: the FR-8 rule at companion.css:678-691
 * clears border, background and blur from every `.lpos-c-icon-btn` inside the top cells, on the
 * stated grounds that the cell is already the bordered control and an inner ring would double up.
 * The tabs tray sits in `.lpos-cell--topcenter`, so the `+` is caught by it.
 *
 * SO THIS IS NOT A BESPOKE RULE -- IT IS THIS FILE'S ESTABLISHED EXCEPTION PATTERN, and the fifth
 * instance of it. The strip is deliberate and blanket, and every control that needs chrome back gets
 * it granted through a scoped rule using the same `--psc-panel-*` tokens: the ACTIVE TAB at :693
 * (immediately after the strip), the UTILS TRAY icon buttons at :1508, the TOPLEFT menu icon at
 * :1669, and the PAGINATION chip at :1690. Adding a sixth selector to that pattern is what the
 * codebase does; re-pointing the strip would silently re-chrome the inactive tabs too.
 *
 * The tokens are the pagination chip's own four, reused verbatim rather than re-derived, because the
 * chip is the nearest sibling and the tray's controls should read as one family. Note the chip's
 * ring is on the WRAPPER `.lpos-pagination--nav`: its inner arrows stay chromeless by design
 * (:1712, "so we don't stack rings"), which is why a screenshot of the tray shows ringless arrows
 * beside a ringed `+` -- correct, not an inconsistency. The chip's LAYOUT half is deliberately not
 * copied: `margin-left: auto` would push the `+` to the far end of the tray.
 *
 * RULING REVERSED 2026-08-12, AND THE LOGO IS NO LONGER ONE OF THE ELEMENTS THIS RULE DRESSES.
 * JD: "The logo at the top panel should not have its own panel or border just the logo (or fallback
 * tennant name) no border or panel of its own." The paragraph that stood here argued the opposite --
 * that the tray's other members wear their own glass, so the logo should too -- and it is deleted
 * rather than left standing, because a comment still making the case for a rule JD removed is how the
 * rule grows back on the next pass that reads it.
 *
 * The declarations below are UNCHANGED and still belong to the `+` button, which is a control and
 * reads as one of the tray's icon buttons. Only the logo comes off the selector list; a wholesale
 * deletion would have stripped the `+` as collateral, on a surface another pass owns.
 *
 * The logo's own alignment does not depend on the chrome being taken away: :2457 sets an explicit
 * `height` and `min-height` from --lpos-control-size, so its box does not shrink by the border it no
 * longer draws, and the tray centres it either way.
 * ========================================================================== */
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"] {
	margin-left: auto !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
}

/* The `+` takes the accent hairline on hover/focus exactly as the tray's other icon buttons do,
 * so it reads as the same component in every state rather than only at rest. */
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"]:hover,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"]:focus-visible {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
	box-shadow: none !important;
}

/*
 * DEC-CR-777XE0 — Logged-in plus docks right; crumb tabs keep the guest origin
 *
 * Console tab tray only. Magick8 guest is not selected. Framework not edited.
 * YN0 pager-hide, XA5 Highlight, XB0/XD0 under-media stay.
 *
 * YN0 gave plus margin-left:auto so it could occupy the pager's right dock.
 * Plus is FIRST in the tabbar map (grid dropped; crumbs appended after the
 * remaining keys), so that auto-margin ate space to the LEFT of plus and
 * dragged the Display-trail pills with it. Guest has no plus, so crumbs sit
 * after the logo — that x-origin is the source of truth.
 *
 * order:1 puts plus after the crumbs in the flex row. Auto-margin then docks
 * plus at the right of .lpos-topbar__panel--tabs. Crumbs stay order 0 at
 * flex-start with no auto margin. Control size 46 / glass tokens unchanged.
 */
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"] {
	order: 1 !important;
	margin-left: auto !important;
	flex: 0 0 auto !important;
}
.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
	order: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.lpos-blueprint--console .psc-topbar-logo .lpos-topbar__logo-img {
	height: calc(var(--lpos-logo-h, var(--lpos-control-size, 46px)) - 2 * var(--lpos-space-xs, 3px));
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	display: block;
}

.lpos-blueprint--console .psc-topbar-logo .lpos-topbar__brand {
	font-family: var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
	font-weight: 700;
	line-height: 1;
	color: var(--lpos-logo-word-color, var(--lpos-ink));
	letter-spacing: var(--lpos-tracking-tight, 0.02em);
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
	/* Size set by fitTopbarWordmark() from token ladder — never ellipsis. */
}

/* Floor robustness: two-line wrap (JS sets data-psc-logo-wrap). No ellipsis. */
.lpos-blueprint--console .psc-topbar-logo[data-psc-logo-wrap='2'] .lpos-topbar__brand {
	white-space: normal;
	line-height: 1.15;
	text-align: left;
	max-width: 100%;
}

/* ==========================================================================
 * FR-20: Utils flyout drawers must sit above console chrome (scrim + panel)
 * ==========================================================================
 * Root cause was NOT FR-17 tokens — framework dockDrawerPane() relocates utility
 * drawer bodies into midright whenever -left-collapsed (permanent one-state).
 * Companion JS restores slide-open for utils tray keys; keep z-index/scrim intact.
 */
.lpos-drawer-scrim.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
	background: var(--lpos-overlay, color-mix(in srgb, var(--lpos-bg) 72%, transparent)) !important;
}

.lpos-drawer.is-open {
	visibility: visible !important;
	pointer-events: auto !important;
	/* Also set in openUtilsFlyout() inline — cascade can lose to --right alone. */
	transform: translateX(0) !important;
}

.lpos-drawer.lpos-drawer--right.is-open,
.lpos-drawer.lpos-drawer--left.is-open {
	transform: translateX(0) !important;
}

/* ==========================================================================
 * FR-21: Magick8 guest — pink CTAs → gold; card pane darkness parity
 * ==========================================================================
 * §1 Learn More / Shop Now (.lpos-m8slide__cta) + card btns: theme pink bleed +
 * missing --lpos-accent local override (Explore/Get Started already gold in FR-9).
 * §2 Same FR-17 stack class: outer card/slide zones wore full 58% panel atom +
 * nested titlebar/textbox/stagepane also frosted → reads darker than Coming Soon.
 * Outer panel keeps atomic glass; nested zones drop to glass-2 (or chromeless fill).
 */

.lpos-blueprint--magick8 .lpos-m8slide__cta,
.lpos-blueprint--magick8 .lpos-m8card__btn,
.lpos-blueprint .lpos-m8slide__cta,
.lpos-blueprint .lpos-m8card__btn {

	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-color: color-mix(
		in srgb,
		var(--lpos-accent, var(--lpos-accent)) var(--lpos-border-alpha-2, 55%),
		transparent
	) !important;
	background-color: var(--lpos-glass-2) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
}

.lpos-blueprint--magick8 .lpos-m8slide__cta:hover,
.lpos-blueprint--magick8 .lpos-m8card__btn:hover,
.lpos-blueprint .lpos-m8slide__cta:hover,
.lpos-blueprint .lpos-m8card__btn:hover {
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* Unstack Magick8 card / slide nested panes (parity with Coming Soon slide). */
.lpos-blueprint--magick8 .lpos-m8card.-product .lpos-m8card__titlebar,
.lpos-blueprint--magick8 .lpos-m8card.-product .lpos-m8card__textbox,
.lpos-blueprint .lpos-m8card.-product .lpos-m8card__titlebar,
.lpos-blueprint .lpos-m8card.-product .lpos-m8card__textbox {
	background: var(--lpos-glass-2) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
}

.lpos-blueprint--magick8 .lpos-m8slide__stagepane,
.lpos-blueprint--magick8 .lpos-m8slide__callout,
.lpos-blueprint--magick8 .lpos-m8slide__thumb,
.lpos-blueprint--magick8 .lpos-m8slide__tab {
	background: var(--lpos-glass-2) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
}

/* ==========================================================================
 * FR-27: Primary media keeps intrinsic aspect; leftover = panel glass
 * ==========================================================================
 * Ratio applies to the media BOX (stage), not the cell / Step toolbar.
 * Player transport bar (`.lpos-media__bar`) sits BELOW the stage inside the
 * media root; available stage height = body − measured bar (--psc-media-stage-max-h).
 * Step nav row (`.lpos-feat__actions`) is a separate Display toolbar — untouched.
 * Flipbook left unconstrained so .lpos-cell shape still drives two-page spread.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming):not(.lpos-feat__body--archive):not(.lpos-feat__body--dashboard) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 0 !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming) > .lpos-media.-video,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming) > .lpos-media.-image,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming) > .lpos-media.-model {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	flex: 0 1 auto !important;
	margin-inline: auto !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	/* DOCUMENTS ARE READ, NOT ADMIRED (JD 2026-08-19: the PDF "is blurry because it is behind
	   2 other panels instead of inside the same primary content panel that other media shows
	   in"). --lpos-asset-alpha ghosts assets to 0.9 so the ambient motion shows through, which
	   is right for imagery and video and wrong for a page of text: at 0.9 the blurred backdrop
	   of the panel underneath bleeds through every line, which is the blur JD sees -- it was
	   never raster resolution. Documents get their own alpha, opaque by default, so the
	   flipbook sits IN the panel like the other media instead of floating over it. */
	opacity: var(--lpos-asset-alpha-doc, 1);
}

/* Video stage: JS fit vars beat framework !important width/height. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video .lpos-media__stagev {
	width: var(--psc-media-fit-w, min(100%, calc(var(--psc-media-stage-max-h, 100%) * 16 / 9))) !important;
	height: var(--psc-media-fit-h, auto) !important;
	max-width: 100% !important;
	max-height: var(--psc-media-stage-max-h, 100%) !important;
	aspect-ratio: var(--lpm-aspect, var(--lpos-media-switch-ratio, 16 / 9)) !important;
	flex: 0 0 auto !important;
	margin-inline: auto !important;
	box-sizing: border-box !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video .lpos-media__embedwrap,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video .lpos-media__embedwrap iframe,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video .lpos-media__embedposter {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: auto !important;
}

/* Player transport bar. SUPERSEDED FOR VIDEO by FR-32 (DEC-CR-777ZM4), which lifts the video's
 * bar out of flow onto the stage; these declarations still govern the image / 3D branches, whose
 * bars remain in flow. Nothing here is load-bearing for the overlay -- FR-32 outranks it. */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video > .lpos-media__bar,
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video > .lpos-media__bar--below {
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	position: relative !important;
	margin-top: var(--lpos-space-xs, 4px);
}

/* Image: intrinsic ratio box, cover inside without stretching the box. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-image .lpos-media__stage,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-image .lpos-media-image-wrap {
	width: var(--psc-media-fit-w, auto) !important;
	height: var(--psc-media-fit-h, auto) !important;
	max-width: 100% !important;
	max-height: var(--psc-media-stage-max-h, 100%) !important;
	aspect-ratio: var(--lpm-aspect, var(--lpos-cta-media-ratio, 4 / 3)) !important;
	flex: 0 0 auto !important;
	margin-inline: auto !important;
	overflow: hidden !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* 3D: landscape token box (engines fill the stage); do not portrait the cell. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-model .lpos-media__mv {
	width: var(--psc-media-fit-w, auto) !important;
	height: var(--psc-media-fit-h, auto) !important;
	max-width: 100% !important;
	max-height: var(--psc-media-stage-max-h, 100%) !important;
	aspect-ratio: var(--lpm-aspect, var(--lpos-media-switch-ratio, 16 / 9)) !important;
	flex: 0 0 auto !important;
	margin-inline: auto !important;
}

/*
 * Flipbook: leave unconstrained so Media/media.php cell-shape spread law holds.
 * (Portrait cell ⇒ single page — do not force a portrait media aspect here.)
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-flipbook {
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	/* DOCUMENTS ARE READ, NOT ADMIRED (JD 2026-08-19: the PDF "is blurry because it is behind
	   2 other panels instead of inside the same primary content panel that other media shows
	   in"). --lpos-asset-alpha ghosts assets to 0.9 so the ambient motion shows through, which
	   is right for imagery and video and wrong for a page of text: at 0.9 the blurred backdrop
	   of the panel underneath bleeds through every line, which is the blur JD sees -- it was
	   never raster resolution. Documents get their own alpha, opaque by default, so the
	   flipbook sits IN the panel like the other media instead of floating over it. */
	opacity: var(--lpos-asset-alpha-doc, 1);
}

/* Carousel composite: keep slide glass full-bleed; ratio-lock media inside the active slide. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"] .lpos-media.-video,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"] .lpos-media.-image,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"] .lpos-media.-model {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	/* DOCUMENTS ARE READ, NOT ADMIRED (JD 2026-08-19: the PDF "is blurry because it is behind
	   2 other panels instead of inside the same primary content panel that other media shows
	   in"). --lpos-asset-alpha ghosts assets to 0.9 so the ambient motion shows through, which
	   is right for imagery and video and wrong for a page of text: at 0.9 the blurred backdrop
	   of the panel underneath bleeds through every line, which is the blur JD sees -- it was
	   never raster resolution. Documents get their own alpha, opaque by default, so the
	   flipbook sits IN the panel like the other media instead of floating over it. */
	opacity: var(--lpos-asset-alpha-doc, 1);
}

.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--coming .lpos-c-carousel__slide[data-offset="0"] .lpos-media.-video .lpos-media__stagev {
	width: var(--psc-media-fit-w, min(100%, calc(var(--psc-media-stage-max-h, 100%) * 16 / 9))) !important;
	height: var(--psc-media-fit-h, auto) !important;
	max-width: 100% !important;
	max-height: var(--psc-media-stage-max-h, 100%) !important;
	aspect-ratio: var(--lpm-aspect, var(--lpos-media-switch-ratio, 16 / 9)) !important;
	flex: 0 0 auto !important;
	margin-inline: auto !important;
	box-sizing: border-box !important;
}

/* ==========================================================================
 * FR-29 §1 — Utils tray icon buttons SPAN the tray (equal widths, no leftover)
 * ==========================================================================
 * JD: "span equally inline to fill their panel". This restores the framework's
 * own topright distribute law (console-tokens.css:1378-1380 -- "the buttons
 * themselves widen to share the full row, glyphs stay centered", with the
 * WCAG 2.5.8 control-size floor) which the FR-13/FR-14 46px clamps had
 * overridden back to fixed squares + space-between voids.
 *
 * flex-basis 0 (not auto) so every button gets an IDENTICAL share of the tray
 * regardless of glyph content: width = (trayW - 2*pad - (n-1)*gap) / n, resolved
 * by flexbox from live geometry. Nothing here knows how many buttons exist, so
 * the row stays correct at N-1 (portal twin already left, FR-28) and at N+1.
 *
 * Chrome is deliberately UNCHANGED from the FR-13 recipe -- control-size tall,
 * single gold hairline at --psc-panel-border, transparent fill inside the glass
 * tray. Widening a button must not also give it a second glass fill or a second
 * ring: that nested-chrome look is the standing regression.
 */
.lpos-blueprint .lpos-topbar__panel.lpos-topbar__panel--utils {
	display: flex !important;
	align-items: center !important;
	/* Nothing left to distribute once children absorb the free space. */
	justify-content: flex-start !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex-wrap: nowrap !important;
	min-width: 0 !important;
	width: 100% !important;
}

/*
 * FR-29 §2 / DEC-CR-777YN1 — last-Step Next, locked. Same treatment as the
 * first-Step Back (one shared style for an honest-unavailable pager end).
 * The label stays Next; the lock is only "nowhere to go".
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__actions > [data-lpos-center-next-action][data-psc-continue-locked] {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

.lpos-blueprint .lpos-topbar__panel.lpos-topbar__panel--utils > .lpos-c-icon-btn {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	/* Never shrink under a touch target (framework RESPONSIVE AUDIT floor). */
	min-width: var(--lpos-control-size, 46px) !important;
	/* Height + vertical box stay the shared control size: row keeps its band. */
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* ============================================================================
 * FR-31 — Secondary Content group panel (shared-panel instance, --group variant)
 *
 * JD 2026-08-11: the right-hand Secondary Content column had no containing panel.
 * The gold ring in JD's capture was a transient focus/selection outline, not a
 * panel. The framework already scopes the column surface + ambient to `.lpos-col`
 * (line ~3289) precisely so the Get Started / Complete actionbar stays a sibling
 * OUTSIDE it, and FR-24 turned off the cumulative `.lpos-col::after` veil that used
 * to fill the column and read as opaque.
 *
 * This restores the fill correctly as ONE real panel rather than a veil:
 * companion-layout makes `.lpos-col` an instance of the shared `.lpos-c-panel`
 * component (with this `--group` modifier) and moves the Display title inside it,
 * so the group runs title -> content. `.lpos-col` stays a DIRECT child of the cell,
 * so every framework `> .lpos-col` sizing / overflow / ambient rule keeps matching
 * and the actionbar stays outside natively.
 *
 * Chrome ownership: the GROUP owns the single glass fill + gold outline; the inner
 * container atoms drop their own fill so the glass never stacks (the FR-24 veil the
 * cumulative opacity recreated). Result: column opacity == center Primary Content
 * Panel, no borders-inside-borders at the group edge. Every value is an existing
 * token — no literal colours, radii, spacings, or opacities.
 * ==========================================================================*/
.lpos-blueprint .lpos-cell--midright > .lpos-col.lpos-c-panel--group {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	padding: var(--lpos-panel-pad, 12px) !important;
	gap: var(--lpos-space-md, 12px);
	display: flex;
	flex-direction: column;
}

/* Display title leads the group as its heading — the panel owns the chrome, so the
 * title drops its own fill / border (no border hugging the group's top edge). */
.lpos-blueprint .lpos-col.lpos-c-panel--group > .lpos-c-title-panel--display {
	margin: 0 !important;
	background: transparent !important;
	border-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Single glass layer: the group's structural containers drop their own fill / blur
 * so the panel's fill is the ONLY layer — this is what keeps the column's opacity
 * equal to the center panel and prevents the cumulative veil FR-24 removed. Leaf
 * controls (toggles, tabs, buy buttons) keep their own chrome and read as atoms
 * inside the panel. */
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-subpanel,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-cta,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-cta__media,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-cta__info,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-cta__qtyprice,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-c-title-panel--secondary,
.lpos-blueprint .lpos-col.lpos-c-panel--group .lpos-archive-related {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Keep the FR-24 cumulative-opacity veil dead regardless of structure. */
.lpos-blueprint .lpos-cell--midright .lpos-col::after {
	background: transparent !important;
	opacity: 0 !important;
}

/* ============================================================================
 * SECONDARY CONTENT WEARS THE ITEM'S OWN FEATURED IMAGE, THE WAY THE PRODUCT CARD DOES
 * (JD 2026-08-13: "the background of the secondary content should have that items featured
 * image as the glassmorphism overlay background like the single product card has and it's
 * outline borders and styling (not structure) should also match the single product card".)
 *
 * ONE OF THE TWO KILLED LAYERS COMES BACK, AND WHICH ONE IS THE ENTIRE POINT.
 * The framework paints this column with a pair of pseudos: '::before' is the image cover,
 * '::after' is a flat dark scrim laid OVER it. FR-24 killed both, correctly, because the
 * SCRIM was composing under every 0.58 atom and the column read as opaque black -- the
 * regression JD has rejected twice, most recently as "IT LOOKS LIKE YOU CHANGED THE COLOR
 * OR BROKE THE STYLING". The scrim is the layer that caused that and it STAYS DEAD: the
 * rule directly above is untouched and still wins on '::after'. Only the image returns.
 *
 * WHY THIS CANNOT RE-CREATE THAT DEFECT -- by construction, not by tuning:
 *   - '::after' is still forced to 'opacity: 0' by the rule immediately above this one.
 *   - the layer restored here is an IMAGE at 0.22 alpha sitting BEHIND the column's own
 *     'var(--lpos-bg) @ 30%' fill, so it LIGHTENS the surface. The defect was a dark scrim ON TOP
 *     of the image: the opposite composition, not a milder amount of the same one.
 *   - measured before this shipped, the column was already the DARKEST surface in frame
 *     (median luminance 9, against 23.4 for the primary content panel beside it). The
 *     failure mode being guarded against is this panel going darker than its neighbours;
 *     it starts darker and this moves it toward them.
 *   - 0.22 is the CARD's value. The framework's own midright tuning for this same layer was
 *     0.5 -- more than double -- and that hotter value is deliberately NOT restored.
 *
 * THE RECIPE IS THE CARD'S AGAIN, ALL FOUR VALUES, AFTER THREE ROUNDS OF TUNING AWAY FROM IT.
 * '.lpos-m8card.-product::before' computes 'opacity 0.22', 'filter blur(18px) saturate(1.15)',
 * 'inset -24px', reading the same '--lpos-m8card-bg' custom property this rule reads. The tokens
 * below now hold exactly those numbers. That is not a decision to copy the card -- it is where
 * three rounds of measurement independently landed, and the route there is the useful part of this
 * comment.
 *
 * THREE STATES WERE JUDGED BY EYE, AND EACH WAS REJECTED FOR A DIFFERENT REASON:
 *
 *     0.22 / 1.15   "purple"                            the panel read as a violet panel
 *     0.06 / 1.15   "lost their background images"      the image was imperceptible
 *     0.28 / 0.12   "i dont like the color grading"     the picture stopped looking like itself
 *
 * The middle failure produced the instrument this file now relies on, so it is recorded rather
 * than summarised. PRESENCE is the SPREAD of luminance across the panel -- plain glass is a flat
 * fill and sits at a floor, a perceptible image raises it -- read as p90 minus p10 and NOT as a
 * standard deviation, because the panel carries text whose own contrast dominates a standard
 * deviation and hides the backdrop entirely. It is the only metric that has ever detected ABSENCE:
 * 0.06 measured barely above the no-image floor while passing every colour test it was given,
 * which is why "lost their background images again" was an accurate report and not a matter of
 * taste.
 *
 * THE THIRD FAILURE IS WHY SATURATION IS NO LONGER A LEVER. Desaturating did decouple presence
 * from hue exactly as measured -- the numbers were right -- but taking the colour out is itself
 * VISIBLE, as a treatment applied to the photograph. Read across all three judgements the
 * constraint was never "less purple" and never "more texture": it is that the featured image
 * should look like the featured image. Any value below the card's 1.15 is the grading that was
 * rejected, so the sweep went back to one dimension.
 *
 * AND THEN THE ONE-DIMENSIONAL SWEEP SAID SOMETHING WORTH KNOWING: AT FULL SATURATION, OPACITY IS
 * NOT A LEVER FOR HUE EITHER. Measured on the content panel beneath the QTY row, all at 1.15:
 *
 *     opacity | presence over floor | purple % of panel | purple % of coloured px | mean sat
 *     0.30    | +26.50              | 42.50             | 87.65                   | 38.89%
 *     0.26    | +22.62              | 40.90             | 87.67                   | 36.77%
 *     0.22    | +18.56              | 39.33             | 90.10                   | 35.32%
 *     0.19    | +16.42              | 36.50             | 90.79                   | 33.28%
 *     0.16    | +13.57              | 33.20             | 95.23                   | 31.88%
 *     0.13    | +11.06              | 29.74             | 97.39                   | 28.89%
 *     0       | floor               |  0.00             |  0.00                   |  0.00%
 *
 * Dropping opacity from 0.30 to 0.13 costs 58% of the image's presence and removes only a quarter
 * of the purple. Worse, purple's share of the COLOURED pixels climbs from 87.65% to 97.39% as the
 * image fades: what recedes first is the panel's own gold chrome relative to the violet, so a
 * dimmer panel is a MORE purple-dominated one, not a less. There is therefore no value below the
 * reference worth having -- hedging downward would buy a rounding error of hue for a visible loss
 * of picture -- and 0.22 is shipped because it is the state whose colour was endorsed, not because
 * it split a difference.
 *
 * SAY THE TENSION OUT LOUD RATHER THAN LET A FOURTH ROUND DISCOVER IT. At full saturation this
 * panel IS purple, because the Cell Signals product shot is purple; 39% of the panel's pixels and
 * 90% of its coloured ones sit in the violet band, and the table above shows no opacity that
 * changes this while leaving a picture behind. If it reads too violet, the remaining honest levers
 * are a DIFFERENT IMAGE PER STEP -- all six Steps currently resolve one artwork, which is
 * authoring and is to be done later -- or accepting the product's own colour. A fourth opacity is
 * not one of them.
 *
 * NUMBERS ARE COMPARABLE WITHIN A SWEEP AND NOT ACROSS SWEEPS. The floor itself moves between
 * sessions as the panel's own content changes -- it measured 3 in one sweep and 4 in the next, and
 * 0.22 measured +9.92 against the first and +18.56 against the second. Each table above is
 * internally consistent and the ORDERING has held every time; an absolute presence figure lifted
 * from one and compared against the other means nothing. Re-measure the floor in the same run.
 *
 * THE SCRIM IS STILL NOT RESTORED, and it has now survived three rounds in which it looked like
 * the answer. Laying something dark over the picture to tame its hue is precisely the FR-24
 * cumulative-opacity defect; the '::after' kill above stays armed and every ship asserts it
 * survived. Median luminance sits ABOVE the plain-glass floor, which is the standing proof that
 * nothing has been darkened to buy any of this.
 *
 * BOTH TOKENS REMAIN THE TUNING POINTS even though both now hold the card's values, and that is
 * deliberate rather than redundant: the next tune must stay a value change, and the two axes have
 * proven to be independently wanted -- presence via '--psc-cover-opacity', hue via
 * '--psc-cover-saturate'. A Step whose artwork is calmer can carry more of either without a code
 * change. The value also propagates for free: the parity audit found this cover is painted by the
 * group panel's '::before' on all four surfaces, each resolving its OWN image, so the archives
 * inherit whatever is set here. The card itself is still NOT re-pointed at these tokens: it
 * belongs to another pass, so this declares the shared vocabulary and leaves that one-line
 * adoption to whoever owns it.
 *
 * THE REST OF THE CHROME ALREADY MATCHES AND IS DELIBERATELY NOT RESTATED. Measured on live,
 * the column and the product card are already identical: border '1px solid rgba(212,168,87,
 * 0.38)', 'border-radius: 12px', background 'var(--lpos-bg) @ 30%', backdrop 'blur(16px)
 * saturate(1.4)'. The featured image was the only difference between the two surfaces.
 * Re-declaring values that already agree would create a second place for them to drift.
 *
 * PER STEP, HONEST-EMPTY, AND WITH NO WORK FROM THIS FILE. '--lpos-m8card-bg' is stamped on
 * the midright CELL by 'BlueprintRenderer::midright_cell_open()', and the whole cell is
 * re-rendered by the Step swap, so each Step wears its OWN featured image and a Step holding
 * none falls to 'none' -- plain glass, never the previous Step's picture left behind. That is
 * why this is a stylesheet change and not an authoring one: the per-item resolution already
 * exists server-side and was simply not being painted.
 *
 * SPECIFICITY, deliberately rather than by escalation. The FR-24 kill above is (0,3,1) with
 * '!important', and it is CORRECT for '::after'. Editing that grouped rule would also disarm
 * the scrim guard other passes rely on, so this out-specifies it at (0,5,1) using attributes
 * the cell and the column already carry, and reaches ONLY '::before'.
 * ========================================================================== */
.lpos-blueprint--console,
.lpos-blueprint--gate,
.lpos-blueprint--magick8 {
	--psc-cover-opacity: 0.22;
	--psc-cover-blur: 18px;
	--psc-cover-saturate: 1.15;
	--psc-cover-inset: -24px;
}

.lpos-blueprint .lpos-cell--midright[data-lpos-midright-cell] > .lpos-col[data-lpos-view-host="midright"]::before {
	content: '' !important;
	position: absolute !important;
	inset: var(--psc-cover-inset) !important;
	z-index: -1 !important;
	background-image: var(--lpos-m8card-bg, none) !important;
	background-size: cover !important;
	background-position: center !important;
	background-color: transparent !important;
	filter: blur(var(--psc-cover-blur)) saturate(var(--psc-cover-saturate)) !important;
	opacity: var(--psc-cover-opacity) !important;
	pointer-events: none !important;
}

/*
 * DEC-CR-777YS1 — glass recipe 30/14 → 22/8; no-image secondary still a panel
 *
 * FR-24 cleared the midright column fill so a featured-image ::before could sit
 * behind one glass layer. Archives that stamp --lpos-m8card-bg as none then
 * have no image and no fill — a hole. The column is still the shared panel
 * atom (--psc-panel-bg / blur / gold hairline). The image layer stays an
 * image: transparent when none, the item's artwork when present. Not a second
 * glass. Flip-stage transport and the tenant mark are not selected.
 */
.lpos-blueprint--console .lpos-cell--midright[data-lpos-midright-cell] > .lpos-col[data-lpos-view-host="midright"] {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
}

/*
 * DEC-CR-777YU6 — featured image + secondary media wear YS1 glass
 *
 * YS1 glass is the panel around the media, not a veil on the photograph.
 * FR-24 / FR-22 stripped fill+blur off featured-image and buy-box media hosts
 * so they read as opaque chromeless photos. Restore the shared 22/8 atom on
 * the HOST only. Inner img / iframe / poster stay unfiltered. Console only.
 * Guest-player crop tokens and the Step 2 book are not selected.
 */
.lpos-blueprint--console .lpos-cell--midright .lpos-col.lpos-c-panel--group .lpos-c-cta__media,
.lpos-blueprint--console .lpos-cell--midright[data-lpos-midright-cell] .lpos-c-cta__media,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-image,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video:not(.-flip) {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
}

/*
 * DEC-CR-777YU0 — archive secondary: no spanbar; title/subtitle/toggles; listing slider fills
 *
 * Archives only ([data-psc-archive-secondary], stamped when the centre is an
 * archive grid). Singles keep the three-icon spanbar (777ZZ6 / 777YQ1).
 * Title + subtitle slot + What's Next/New stay; the leftover media well and
 * placeholder QTY/span row go; the listing slider fills the rest. The column
 * already wears YS1 glass — this makes that fill the whole leftover height.
 * Flip-stage transport and the tenant mark are not selected.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	height: 100% !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] > .lpos-col[data-lpos-view-host="midright"] {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-title-panel--display {
	flex: 0 0 auto !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-title-panel,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-title-panel--display {
	flex: 0 0 auto !important;
	grid-column: 1 / -1 !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-title-panel > h3,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-title-panel--display > h3,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-subtitle] {
	display: block !important;
	min-height: calc(var(--lpos-text-sm, 14px) * 1.3);
	margin: var(--lpos-space-sm, 5px) 0 0 !important;
	font: 500 var(--lpos-text-sm, 14px) / 1.3 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-ink-secondary, var(--lpos-ink)));
	visibility: visible !important;
}

/*
 * DEC-CR-777YU2 — archive default: inline 50/50 toggles; no QTY/ATC
 *
 * The YU0 column flex on .lpos-c-cta stacked What's Next / What's New as full-width
 * blocks. The buy-mode pair is a 1fr 1fr grid (same atom as Cell Signals Subscribe /
 * One-Time). Restore that grid; hide archive-default commerce (QTY / price / ATC).
 * Info peek drops this stamp, so the item's Step 1 secondary keeps its commerce.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta {
	min-height: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-auto-rows: auto !important;
	align-content: start !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__tabs,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__buytabs,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-buytoggle {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	grid-column: 1 / -1 !important;
	width: 100% !important;
	gap: var(--lpos-gap, 8px);
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-lpos-buytab],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__tab,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-buytoggle__opt {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-spanbar,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-spanbar],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__qtyprice,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-qty-cart,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__qtyprice [data-lpos-add-to-cart],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__media,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__info[data-psc-span-panel] {
	display: none !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host--listing {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host > .psc-slider,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host .lpos-c-carousel__stage {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}


/* ============================================================================
 * PSC SLIDER WIDTH -- the component is PARAMETERISED, and instancing it means supplying its
 * parameter (2026-08-11).
 *
 * The 1240px was never intrinsic sizing. `console-tokens.css` declares:
 *
 *     .lpos-c-carousel { width: var(--lpos-m8-car-w, min(96vw,1240px)); display:flex; ... }
 *
 * -- an EXPLICIT declared width whose default resolves to 1240px on this viewport. That is why
 * three successive attempts at intrinsic-size levers (`min-width: 0`, a clipping stage, spanning
 * both tracks) all failed: none of them touch a declared width. It also rules the slides out as a
 * cause -- `.lpos-c-carousel__slide` is `position: absolute`, so 16 slides contribute nothing to
 * flow in the first place.
 *
 * The component is designed to be resized by its token, not overridden: the stage's height calc
 * reads the SAME `--lpos-m8-car-w`, so supplying the token keeps width and height coherent, where
 * a `width` override would have desynchronised them. Setting it to 100% derives the slider from
 * whatever the column is, at any width -- no literal, and no second declaration to drift.
 *
 * The span stays: the pane is `grid-template-columns: 1fr 1fr`, and without it the slider sits in
 * one of the two toggle columns.
 * ========================================================================= */
.lpos-blueprint .lpos-c-cta > .psc-slider {
	grid-column: 1 / -1 !important;
	--lpos-m8-car-w: 100%;
	min-width: 0;
	max-width: 100%;
}

/* ==========================================================================
   PSC COLUMN WIDTH TOKEN (DEC-CR-777Z88)
   --lpos-col-w is the usable content width of the midright (Secondary Content) column.
   That quantity had no token because the column is GRID-sized -- it has a track, not a
   width declaration -- so nothing in the system named it. The QTY row wants the same
   quantity, so it is a token rather than a one-off.
   Value is 100cqw against a container established on the slider's span host: a real
   LENGTH (the component's height calc() rejects percentages), derived rather than
   pinned, and it holds if the column's width changes.
   ========================================================================== */
.lpos-blueprint .lpos-c-cta > .psc-slider-host {
	grid-column: 1 / -1;
	container-type: inline-size;
	min-width: 0;
	--lpos-col-w: 100cqw;
}

.lpos-blueprint .psc-slider-host > .psc-slider {
	--lpos-m8-car-w: var(--lpos-col-w);
	min-width: 0;
	max-width: 100%;
}

/* =====================================================================================
   TAROT CARD VARIANT (2026-08-11)

   JD: "we can have different style cards. tarot uses their cards and then the default cards are
   where we use everywhere else unless I say otherwise."

   Same component, same chrome, same four zones, same frame rule, same 4x2 grid -- the ONLY
   difference is the card's proportion, which is already the framework's own axis of variation
   (`.-playing` 5:7, `.-tarot` 11:19, `.-collector` 63:88 at console-tokens.css:3504-3506). The ratio
   is NOT re-declared here; `.lpos-m8card.-tarot` supplies it and this block only lets it apply.

   Why it needs anything at all: the framework gives `.-product` cards `height:100%` AND `width:100%`,
   and `aspect-ratio` has nothing to resolve between two definite sizes. Releasing the width hands the
   proportion back to the ratio.

   `justify-items:center` distributes the slack symmetrically. Without it the card sits at its track's
   leading edge, which is invisible while the tracks equal the card width but reappears as a lopsided
   8.1px offset the moment anything gives the tracks width of their own. Centring makes the symmetry a
   property of the rule rather than a coincidence.

   Measured with 8 cards: card 231.9 x 400.5 -- 0.579, which is 11:19 exactly -- with all four zones
   inside (title bar 26.8, frame 153.5, text box 161.5, button row 36.8), art filling its window (the
   framework's own `.-tarot` rules, console-tokens.css:3550) and object-fit:cover unchanged. Still
   4x2, no scrollbar on the grid or any ancestor, nothing clipped. The narrower cards leave the grid
   939.4 wide inside the 1142 container, painting an even 101.3px margin on BOTH sides.

   DORMANT BY DESIGN until two things exist: the variant stamper that adds `psc-cards--tarot` from
   authored content data, and a tarot collection to stamp. Neither is live today -- the console's
   served HTML contains no tarot content at all -- so this block currently matches nothing. It ships
   now so the design system holds the definition before the content arrives, which is also why the
   frame rule above had to stop being the deck's portrait window.
   ===================================================================================== */
.lpos-blueprint .lpos-magick8__productgrid.psc-cards--tarot {
	justify-items: center;
}

.lpos-blueprint .lpos-magick8__productgrid.psc-cards--tarot > .lpos-m8card.-tarot {
	width: auto;
	max-width: 100%;
}

/* =====================================================================================
   THUMBNAIL CONTAINMENT ON THE PRODUCT CARD (JD 2026-08-13, DEC-CR-777ZZ1)

   The art box was 445px tall inside a 153px frame, spilling 146px above and below it.
   `.lpos-m8card__art` is an in-flow flex item with no definite cross size, so the
   framework's own `.lpos-m8card__img{width:100%;height:100%}` (console-tokens :3546)
   resolved `height:100%` against an indefinite parent, fell back to the image's
   intrinsic height, and the frame's `overflow:hidden` took the difference. Because the
   spill was symmetric and the box matched the source's aspect ratio exactly, what you
   SAW was already the centred band `object-fit:cover` would have produced -- the defect
   was invisible and only the box model showed it.

   The framework fixed this for `-tarot` and `-collector` with `position:absolute;
   inset:0` (:3551, "art FILLS its window -- cover, never a letterboxed strip"). That
   rule cannot be reused here: it takes the art out of flow, and the product frame's own
   height IS derived from flow at short viewports (`flex:1 1 auto; aspect-ratio:auto`,
   :3343, whose flex basis is the content height). This keeps the art in flow and takes
   both axes from the frame instead.

   BOTH DECLARATIONS ARE LOAD-BEARING. `align-self:stretch` alone was rehearsed on live
   and is wrong: with the cross size definite and the main size still content-derived,
   `width:100%` turns circular, the art collapses to the image's aspect at the new
   height and the frame paints a 91px sliver.

   Measured on live at 1920x1080 and 1280x720: image box 270x445.36 -> 270x151 and
   163.33x269.41 -> 163.33x134.72, spill 146/146 and 66/66 -> none, with the frame, the
   card and the text panel unmoved, and the painted frame differing from its own before
   by 0.78 / 1.34 mean channel levels against a no-change control floor of 0.24 / 0.32.

   No length is authored here. Both values are derived from the frame.
   ===================================================================================== */
.lpos-blueprint .lpos-m8card.-product .lpos-m8card__frame > .lpos-m8card__art {
	align-self: stretch;
	width: 100%;
}

/* =====================================================================================
   SLIDES CONTAINER -- "A FULL WIDTH HEIGHT SLIDE ONLY PANEL" (R6 / G8, 2026-08-11)

   JD, 20:58: "remove the description tab button and panel and the other panel and the
   pagination tabs and dot bar and just make it a full width height slide only panel".

   Three separate things were painting around the slide, and they are removed by three
   different mechanisms because they fail in three different ways:

   1. THE FR-14 SPAN PANEL. `.lpos-c-cta__info[data-psc-span-panel]` is the interim host
      built when the column still had a tab system (R5). It holds `.psc-spanbar` with two
      surviving icon buttons -- one document glyph, one blank -- above ~74px of empty
      panel. One rule removes the buttons AND the panel because the buttons are its
      children; hiding them individually would have left the bordered empty box behind,
      which is the residue pattern JD keeps catching. `display: none` is correct here
      rather than the clip technique used for the dots below: these controls are being
      removed, not hidden, so they SHOULD leave the tab order.

   2. THE PREV/NEXT CHEVRONS. Absolutely positioned at z-index 4000, so they contribute
      no layout and removing them frees no space -- there is no gap to close afterwards.
      The keyboard path survives their removal because the sixteen dots below are real
      buttons wired to the same seek handler and stay reachable (see the reveal rule).

   3. THE DOT BAR is NOT removed -- see the reveal block further down. It is the one piece
      of chrome with a verified keyboard path through it.

   Deliberately NOT touched: `.lpos-c-subpanel--tabbar` is already `display: none` in the
   painted column (measured 0x0), so a rule here would be a second declaration of an
   existing fact -- the kind that later reads as load-bearing and gets preserved forever.
   ===================================================================================== */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__info[data-psc-span-panel] {
	display: none !important;
}

/* DEC-CR-777YQ1 — the third span button actuates this panel; hide only when inert. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__info[data-psc-span-panel].is-active {
	display: flex !important;
}

/* JD 2026-08-18 (peek content panel): an Info peek IS the product's expanded card, so its
 * description panel shows WITHOUT an actuator — XU3 banned the 3-icon span bar on Console,
 * which left [data-psc-span-panel] with no path to .is-active there, so the peek's product
 * text (verified present in the DOM) sat display:none'd by the inert-hidden default above.
 * Peek only; every other surface keeps that default. */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__info[data-psc-span-panel] {
	display: flex !important;
}

.lpos-blueprint .psc-slider-host .lpos-c-carousel__nav {
	display: none !important;
}

/* -------------------------------------------------------------------------------------
   FULL-BLEED SLIDE

   The stage is the fixed quantity and must stay 566x194: it is the box `--lpos-col-w`
   (100cqw) resolves against via `.psc-slider-host`'s `container-type: inline-size`, so
   growing it would silently change every derived length in the column. Only the slide
   INSIDE it changes -- from the framework's centred 317x178 coverflow card to the stage's
   full 566x194.

   The framework's carousel writes `transform: translate(-50%,-50%) translate3d(...)
   scale(...)` INLINE on every slide on every seek, pairing it with `left/top: 50%`
   centring. An author `!important` declaration outbeats a non-important inline one, which
   is why `transform: none` holds here and why this cannot be done by matching the
   framework's own specificity.

   Inactive slides are faded rather than hidden. They sit behind the active slide at a
   lower z-index, and the active slide's fill is GLASS -- semi-transparent by law (J3) --
   so the blurred neighbours would otherwise read straight through the panel that is
   supposed to be the only thing on screen. `opacity` is the lever that costs nothing:
   `display`/`visibility` would drop any future focusable slide content out of the tab
   order, and the framework re-asserts opacity per offset on each seek anyway, so the
   newly-active slide is revealed by the same rule that hid it a moment earlier.
   ------------------------------------------------------------------------------------- */
/* The host is a grid item and STRETCHES to its row. Removing the span panel above handed that row
 * an extra 136px, and the carousel kept its own 194px height calc, so the freed space turned into
 * dead air below the slide -- the "leftover gap" item 2 exists to prevent, just moved. The carousel
 * is filled to the host and the stage takes the slack as the only flexible child (the two navs are
 * display:none and the dot bar is absolutely positioned), so the slide inherits the full box.
 *
 * The stage's WIDTH is the load-bearing measurement and is untouched at 566px: `--lpos-col-w` is
 * 100cqw against the host's inline size, so every derived length in this column depends on it.
 * Its height is not part of that contract. Holding the pre-removal 194px would have meant keeping
 * the gap, which is the one thing the item rules out. */
.lpos-blueprint .psc-slider-host > .psc-slider {
	height: 100% !important;
}

.lpos-blueprint .psc-slider-host .lpos-c-carousel__stage {
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
}

/*
 * DEC-CR-777YU5 — unbooted peek slider still paints slide 0
 *
 * Companion CSS only paints the current slide. The framework stamps data-offset
 * in carouselBoot() / carRender(), which replaceMidCell calls and the Info swap
 * did not. :not([data-offset="0"]) also matched slides with NO offset, so the
 * arriving description slider was a glass well with 16 invisible slides.
 * Show the opening slide before the engine latches; hide only offset siblings.
 */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide[data-lpos-slide="0"]:not([data-offset]),
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide[data-offset="0"] {
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
	box-sizing: border-box !important;
}

.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]) {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ==========================================================================
 * ONE RING PER SLIDE (JD/QA 2026-08-12, P3b)
 *
 * The slide and its only child were both drawing a 1px 0.38-gold hairline -- measured 566x330.83
 * and 548x312.83, concentric, 9px apart. The SLIDE keeps the chrome: it is the box the carousel
 * positions and animates, it is the edge the customer reads as the card, and this file already
 * restores its ring on purpose. The callout is a single full-bleed child whose border can only
 * retrace that edge from the inside.
 *
 * Scoped to my own `.psc-slide__callout` (product-tabs.php) inside `.psc-slider-host`, so the
 * shared `.lpos-c-subpanel` keeps its chrome everywhere else, including the midcenter coverflow.
 * ========================================================================== */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide > .psc-slide__callout,
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide .psc-slide__callout {
	border-color: transparent !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
 * WHOLE-LINE CAP ON THE SLIDE'S BODY COPY (JD/QA 2026-08-12, P2b)
 *
 * The framework already truncates this paragraph correctly with a `-webkit-box` line clamp
 * (console-tokens.css:3196 -- it matches because product-tabs.php:121 gives the callout BOTH
 * `lpos-m8slide__callout` and `psc-slide__callout`). The theme overrides the paragraph's `display`
 * to `flow-root`, which makes the clamp inert while leaving `overflow: hidden` to slice through a
 * glyph. Measured on the live element rather than assumed: computed `-webkit-line-clamp: 4` and
 * `-webkit-box-orient: vertical` both present, `display: flow-root`, scrollHeight 61 against
 * clientHeight 41. The framework hit the same thing on the archive cards and names the same cause
 * in its own margin note at console-tokens.css:3334, "beaten by a theme flow-root".
 *
 * NO ELLIPSIS, DELIBERATELY. `text-overflow` cannot mark a multi-line truncation outside
 * `-webkit-box`, so the copy ends on a clean word rather than an ellipsis. The alternative is to
 * force `display: -webkit-box` back over the theme, and the framework specifically declined to
 * fight that battle -- it left the clamp inert as a "safety net" and made the `lh` cap the real
 * bound. Following its call rather than reversing it: a torn glyph is a defect, an unmarked
 * truncation is a trade, and consistency with the archive cards is worth more than the ellipsis.
 *
 * `max-height` in `lh` units is the fix the framework's own margin note recommends after the same
 * trap was hit on the archive cards -- "text ends on a full line, never a torn half-row; immune to
 * external display overrides". A whole number of the paragraph's own line boxes cannot cut through
 * one, no matter what `display` resolves to. The count is measured by `syncSlideClamp()`, the one
 * quantity CSS cannot derive: how many whole lines remain after the heading. The 4-line default
 * agrees with the framework's `-webkit-line-clamp: 4` (DEC-CR-777YQ3) -- it may truncate early,
 * never mid-glyph, and never invent a shorter floor than the clamp already named.
 * ========================================================================== */
.lpos-blueprint .psc-slider-host .psc-slide__callout > p {
	max-height: calc(var(--psc-slide-lines, 4) * 1lh) !important;
	overflow: hidden !important;
}

/* -------------------------------------------------------------------------------------
   STAGE EDGE MASK -- OFF FOR THE SINGLE FULL-BLEED SLIDE (JD: "the overlay on the sides of
   the slider are coloring over the text")

   `console-tokens.css` gives every carousel stage a horizontal mask:

       mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.2) 4%,
                   rgba(0,0,0,.72) 10%, #000 16%, #000 84%, rgba(0,0,0,.72) 90%,
                   rgba(0,0,0,.2) 96%, transparent 100%)

   It is the coverflow depth effect: the flanking slides dissolve at the stage's edges instead
   of being hard-cut by `overflow: hidden`. Only the middle 16%-84% band is fully opaque.

   It is a MASK, not a tint -- it removes alpha rather than painting anything -- which is why
   the text reads as veiled rather than as sitting under a coloured layer, and why there is
   nothing to find by looking for an overlay element or a gradient background.

   It was harmless until this pass. The framework slide is `width: 56%` centred, spanning
   22%-78% of the stage, so it sat entirely inside the opaque band and only the flanks were
   ever faded. Making the active slide full-bleed spans it 0%-100%, so its outer 16% at each
   end -- about 90px of a 566px panel -- now sits under the ramp. The heading starts one
   padding-step in from the edge, which is the deepest part of it.

   Turned off rather than compensated for: with one full-bleed slide there are no flanks to
   dissolve, so the effect has nothing left to do here and adding a counter-layer on top would
   just be two wrongs. Scoped to this instance -- the midcenter carousel still shows multiple
   slides, and its mask is untouched.

   This is not a new decision. `.lpos-feat__body--coming` above already pairs exactly these two
   things: the moment it makes its slide full-bleed (`inset: 0`, 100% x 100%) it also sets
   `mask-image: none` on its stage. Full-bleed slide and stage mask are a matched pair in this
   file and this pass shipped one half of it. Anything that makes a slide fill its stage in
   future has to turn the mask off in the same rule.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__stage {
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

/* -------------------------------------------------------------------------------------
   HOVER REVEAL -- ON THE SHARED UTILITY (`psc-reveal-host` / `psc-reveal`, `777ZM5`)

   There is no reveal mechanism in this block. The dot bar is a consumer of the shared
   utility: `psc-reveal-host` goes on `.psc-slider-host`, `psc-reveal` on the dots container,
   both applied by `syncSliderReveal()` in companion-layout.js because the bar is
   framework-rendered and has no companion markup to carry a class.

   The utility hides by `clip-path`, and this pass is half of why. It measured that **opacity
   does not lift on this element** -- with the host confirmed matching `:focus-within` and
   `clip-path` flipping correctly in both directions on the same rule, computed opacity stayed
   0 half a second later, with and without `!important` on both arms, and the cascade could
   not be inspected to find out why because `cssRules` reads back empty for all 77 stylesheets
   on this page. The media-fit pass had independently arrived at `opacity` + `pointer-events`.
   A shared `opacity: 0` rest state can strand a consumer permanently invisible while still
   occupying its box -- the state this bar was already in once, and the reason its styling
   reached JD unreviewed -- so clipping is the default hide and the fade is opt-in per
   instance, only after measuring that opacity lifts on that element. **Neither consumer opts
   in.** Knobs available if that changes: `--psc-reveal-clip`, `--psc-reveal-shift`,
   `--psc-reveal-rest-opacity`, `--psc-reveal-dur`. This instance takes all four defaults: the
   default hidden clip is `inset(100% 0 0 0)`, which collapses to the BOTTOM edge, and this bar
   is bottom-anchored, so the wipe already runs the right way.

   `display: none` and `visibility: hidden` are ruled out in the utility's own comment: they
   take the sixteen seek buttons out of the tab order and silently break the keyboard path,
   verified with real Enter presses including the wrap at both ends. `:focus-within` is what
   keeps the hidden state honest rather than a trap -- tabbing into the bar reveals it, so a
   keyboard user can see which dot they are on.

   The `:focus-visible` gold ring at the end of this block is this instance's own, not the
   utility's.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .psc-slider {
	position: relative !important;
}

/* -------------------------------------------------------------------------------------
   DOT BAR -- A CONTAINED CONTROL, NOT A ROW OF LOOSE CHIPS

   Two separate faults, both of this pass's own making.

   WHY IT OVERFLOWED. The framework's dot bar is `width: max-content` with
   `gap: calc(6 * var(--lpos-subpanel-pad))` and `padding: … calc(6 * var(--lpos-panel-pad))`.
   At the default 1240px carousel that is a generous, correct bar. In a 566px column it is
   16 x 14px + 15 x 36px gap + 144px of side padding = about 908px, and `max-content` means it
   will not shrink to fit -- it overflows instead. The previous revision answered that by
   giving the dots `flex: 1 1 0` so they shared the width, which fixed the arithmetic and
   caused the second fault.

   WHY IT LOOKED RAW. `flex: 1 1 0` stretched 14px pills into ~34x18 rectangles. The
   framework's dot IS a designed control -- 14px, `border-radius: var(--lpos-radius-pill)`,
   glass fill, hairline border. Stretching it destroyed the shape while keeping the pill
   radius, which is what read as unstyled chips. The fix is to stop overriding the size and
   let the component be itself; the sizing problem is solved on the BAR instead.

   SIXTEEN DOTS DO FIT, at the design system's own dimensions -- what did not fit was a gap
   tuned for a panel twice this wide. At `--lpos-subpanel-pad` (4px here) the row measures
   16 x 14 + 15 x 4 = 284px inside a 546px usable width. The bar holds 30 dots before it runs
   out, so the slide count can roughly double before this needs revisiting. Nothing is shrunk
   below its designed size to make this work. If the count ever does pass 30, the design
   system's `.lpos-pagination__count` / `__jump` counter is the replacement, not smaller dots.

   CONTAINED IN THE PANEL. The bar is inset by `--lpos-space-sm` on three sides instead of
   sitting at 0, so it lands inside the slide's padding box rather than across its hairline and
   rounded corners -- which is what "running out of the panel slider component area" was. It is
   centred at its own content width, and the `max-width` guard keeps it inside the panel even
   if the count ever passes the 30 above.

   It also takes the shared subpanel chrome -- same glass fill, same gold hairline, same blur
   as every other nested control in this console -- so it reads as a deliberate object floating
   over the slide rather than buttons scattered on it.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots {
	position: absolute !important;
	/* `top: auto` is load-bearing: the framework sets `top: 0`, and an absolutely positioned box
	 * with top, bottom AND a definite height is over-constrained, so the browser drops `bottom`
	 * and pins the bar to the TOP of the stage, across the slide's heading. Measured. */
	top: auto !important;
	bottom: var(--lpos-space-sm, 5px) !important;
	/* Centred by auto margins inside the inset box, NOT by `left: 50%` + `translateX(-50%)`.
	 * The utility animates `transform` (`translateY(var(--psc-reveal-shift))` at rest, `none`
	 * when revealed), so a transform here would have to be `!important` to survive its own
	 * reveal and would then override the utility's property in both states -- overriding a
	 * shared component's animated property from a consumer is how the next person ends up
	 * debugging why `--psc-reveal-shift` silently does nothing on one instance. Auto margins
	 * centre just as well and leave `transform` entirely to the utility. */
	left: var(--lpos-space-sm, 5px) !important;
	right: var(--lpos-space-sm, 5px) !important;
	z-index: 4000;
	width: max-content !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: var(--lpos-subpanel-pad, 4px) !important;
	gap: var(--lpos-subpanel-pad, 4px) !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: nowrap !important;
	/* Reading order, dot 1 at left. The framework ships `row-reverse`, which is defensible for a
	 * coverflow ring but wrong for what this instance now is: a jump control under a single
	 * full-bleed slide, where the dots read as a position indicator. It also un-crosses the tab
	 * path -- the buttons are in DOM order 1..16, so reversed painting sent keyboard focus
	 * visually backwards along the bar while advancing through the markup. Scoped to
	 * `.psc-slider-host` exactly like the stage mask above: the midcenter carousel is still a
	 * coverflow ring and keeps the framework's behaviour. See `777ZS3`. */
	flex-direction: row !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

/* Hand the dots back to the framework's own sizing -- `flex: 0 0 auto` is the whole of it.
 * Only the border colour is corrected: inactive dots ship as #cc3366, the theme pink this file
 * already corrects on the Magick8 CTAs. It went unnoticed while the bar was permanently on
 * screen and slated for deletion. */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots > .lpos-c-carousel__dot {
	/* THE DOT IS 14px BECAUSE THE FRAMEWORK SAYS SO -- 777ZSA.
	 *
	 * Measured on the live single after 1.0.78: each dot renders **34x18**, not the 14x14
	 * `console-tokens.css` declares for `.lpos-c-carousel__dot`. Sixteen of them plus gaps need
	 * 612px, the panel gives 556, and the bar overflowed 5px past its right inset -- which is the
	 * "running out of the panel slider component area" JD reported, still true after the bar
	 * itself was contained.
	 *
	 * WHY THE FRAMEWORK LOSES ITS OWN COMPONENT. `reset.css` (theme, v3.4.9) sets
	 * `padding: 0.5rem 1rem` and `width: auto` on `[type="button"], [type="submit"], button`.
	 * That is specificity (0,1,0) -- identical to `.lpos-c-carousel__dot` -- and it loads AFTER
	 * `console-tokens.css`, so it wins on source order alone. Neither declaration is
	 * `!important`; nothing is fighting. The dot is a button with no text content, so the
	 * theme's padding is the entire box: 32px of inline padding + 2px border = the 34px measured.
	 * This is the same theme override already documented on the QTY field in this file (16px of
	 * side padding "the framework never asks for") -- one reset, two victims.
	 *
	 * `min-width: 0` is not decoration. A flex item's automatic minimum size is its min-content
	 * width, which INCLUDES that padding, so while the padding stands the item cannot shrink
	 * below 34px no matter what `width` says -- setting width alone changes nothing. Measured
	 * exactly that way before the cause was found.
	 *
	 * RESTORING, NOT SHRINKING. 14px is the framework's own declared dot size, lifted from
	 * `console-tokens.css` and named here so there is one place to change it and its provenance
	 * is explicit. Nothing is reduced below its designed size: at 14px the row measures
	 * 16 x 14 + 15 x 4 gap + 8 padding + 2 border = 294px inside 556px of usable width, so the
	 * bar hugs its content and centres, and the slide count can roughly double before this needs
	 * revisiting. If it ever does, the design system's pagination counter is the replacement --
	 * not smaller dots.
	 *
	 * THE SAME RESET TAKES THE SHAPE AND THE FILL, which is the rest of "not styled great":
	 *   - `border-radius: 3px` beats `var(--lpos-radius-pill, 999px)` the same way the padding
	 *     does -- equal specificity, later sheet -- so the dots painted as small squares.
	 *   - `* , ::after, ::before { background: transparent !important }` is a universal
	 *     **important** rule, so the framework's `--lpos-glass-1` fill never had a chance and
	 *     every inactive dot rendered with no fill at all. That one needs `!important` back;
	 *     specificity alone does not beat it.
	 * Restated together here so the dot is the control the design system describes: a glass pill
	 * with a gold hairline. The active dot keeps its accent fill from the `[aria-pressed]` rule
	 * below, which is more specific than this one and so still wins. */
	--psc-dot-size: 14px;

	flex: 0 0 auto !important;
	width: var(--psc-dot-size) !important;
	height: var(--psc-dot-size) !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: var(--lpos-radius-pill, 999px) !important;
	background: var(--lpos-glass-1, rgba(255, 255, 255, 0.035)) !important;
	border-color: var(--psc-panel-border) !important;
}

/* The selected and interacted states fill with #cc3366 too -- measured on the dot carrying
 * `aria-pressed="true"`, and again when a dot took keyboard focus, so the one chip that is
 * always lit was the pink one and tabbing dragged a pink block along the bar. Which dot is
 * selected stays entirely the framework's logic; only the two colours change. */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots > .lpos-c-carousel__dot[aria-pressed="true"],
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots > .lpos-c-carousel__dot:hover,
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots > .lpos-c-carousel__dot:focus-visible {
	background-color: var(--lpos-accent, var(--lpos-accent)) !important;
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* The reveal is the only thing that makes these dots visible, so keyboard focus has to be
 * unmistakable once it lands -- same gold ring the rest of the console uses. */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__dots > .lpos-c-carousel__dot:focus-visible {
	outline: none !important;
	box-shadow: var(--lpos-focus-ring) !important;
}

/* -------------------------------------------------------------------------------------
   BOTTOM CTA -- NO ICON, NO SPACE WHERE THE ICON WAS (R1 / H3, JD 21:45)

   "REMOVE THE ICON FROM THE COMPLETE BUTTON BUT LEAVE THE BUTTON TEXT COMPLETE."

   The glyph itself is removed in JS, by `stripBuyNowIcon()` in companion-layout.js -- it has
   to be, because the companion was actively cloning the toolbar's next-arrow into this button
   and re-asserting it on every scan, so a CSS-only removal would have been undone the moment
   the observer next fired.

   This rule handles the other half of the acceptance test: the button is `display: grid` with
   three tracks (measured 112.4 / 76.1 / 112.4), the third of which existed to hold the glyph.
   Deleting the icon without collapsing the track leaves the label centred inside a box that is
   still reserving room for something that is gone -- the orphaned-track residue pattern. Flex
   centring removes the track concept altogether, so the label is centred on the button rather
   than on a leftover column.

   Keyed on `data-psc-no-icon`, which BOTH bottom buttons now carry, so Get Started and Complete
   are centred by the same rule and cannot drift apart.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .lpos-c-cta__actionbar .lpos-c-cta__buy[data-psc-no-icon="1"] {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	grid-template-columns: none !important;
	text-align: center !important;
}


/* -------------------------------------------------------------------------------------
   SLIDE CONTENT FILLS THE FULL-BLEED SLIDE

   Making the slide full-bleed is only half of "a full width height slide panel". The
   slide's own content box was sized for the old 317x178 coverflow card: `.psc-slide__callout`
   measured 548x18 with `overflow: hidden`, which clipped the heading (20px in an 18px box)
   and collapsed the description paragraph to ZERO height. The result passed every geometric
   check for item 2 while painting as an empty glass rectangle -- the slide filled the panel
   and the panel was blank.

   The content stack is given the slide's height so the text has somewhere to go. The
   paragraph keeps the framework's own `-webkit-line-clamp: 4`, which is what holds project
   law J7 here: the copy is truncated at a line count rather than being allowed to overflow
   into a scroller.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide[data-offset="0"] > .lpos-m8slide__side {
	height: 100% !important;
	min-height: 0 !important;
	align-items: stretch !important;
}

.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide[data-offset="0"] .psc-slide__callout {
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* =====================================================================================
   F8-F11: QTY ROW -- ONE INLINE ROW (QTY | two-digit field | price + duration | Add to Cart)

   LAYOUT ONLY. There is not one colour, background, border, blur or radius below: the row's
   three members are existing shared components (`.lpos-c-panel` x2 and `.lpos-c-cta__buy
   --secondary`) and they keep every gram of chrome they already inherit from the framework's
   component rules and this file's own glass/ink blocks above. This block decides widths and
   order and nothing else, which is the only way to add a member to this row without minting a
   fourth chrome source for it.

   NO HARDCODED LENGTHS. Every length is a token or a calc over tokens; the one derived value
   (`--psc-qty-field-w`) is composed rather than measured -- see its own note.

   WHY `!important` HERE. Companion is the override layer for a framework fork that is pristine
   by law, and the field's width in particular is currently being won by a THEME rule on
   `input[type="number"]` (the framework asks for 56px via `.lpos-c-cta__qty`, specificity 0,1,0;
   the field measures 234px on the live page with 16px side padding that the framework never
   asks for). These selectors are already specific enough to win on the cascade alone; the
   `!important` is there so the outcome does not depend on which theme rule is loaded, matching
   the idiom every other override block in this file uses.

   WHY THE PRICE PANEL IS THE ONLY MEMBER THAT MAY SHRINK. Measured on the live single: the row
   is 459.3px at a 1512 viewport and 566px-class widths only appear at 1920. Laid out inline at
   the narrow end the members want 122 + 206 + 138 + 16 of gap = 482px, which overflows 459.3.
   Rather than pick a breakpoint, the price panel is allowed to wrap its duration suffix under
   its price when the row is tight (127px instead of 206px, total 403px) and to sit fully inline
   the moment there is room. Fluid, no container query, no magic width, and the ROW itself never
   wraps -- `flex-wrap: nowrap` on the row is what makes "one inline row" a structural guarantee
   rather than a coincidence of the current strings.
   ===================================================================================== */

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) {
	/* Two digits, sized from the control system rather than from a measurement: one control
	 * square of digit space plus a space-md inset either side. Resolves to 70px against
	 * today's tokens (46 + 12 + 12), a two-thirds reduction from the 234px measured live, and
	 * it re-derives automatically if the control scale ever moves. */
	--psc-qty-field-w: calc(var(--lpos-control-size, 46px) + (2 * var(--lpos-space-md, 12px)));

	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: var(--lpos-space-sm, 8px) !important;
}

/* QTY label + field: intrinsic width, never a flex-grower (it is what stretched to 290.5px). */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .lpos-c-cta__qtypanel {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

/* The two-digit field itself. Native spinners are deliberately left alone -- they are the only
 * stepper this control has ever had, and 70px seats "99" plus the spinner without crowding. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) input.lpos-c-cta__qty {
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	width: var(--psc-qty-field-w) !important;
	min-width: var(--psc-qty-field-w) !important;
	max-width: var(--psc-qty-field-w) !important;
	padding-inline: var(--lpos-space-sm, 8px) !important;
	text-align: center !important;
}

/* JD 2026-08-13: "the qty input box is not rounded like everything else".
 *
 * WHY `--lpos-radius-panel` AND NOT `--lpos-radius-control`. The obvious token for a control is the
 * wrong one. Asked on the live element, `--lpos-radius-control` resolves to 8px and NOTHING in this
 * column uses it; every neighbour -- the buy toggles, the qty panel, the price panel, the Add to
 * Cart button, the panel group around them -- computes 12px, which is `--lpos-radius-panel`. Reading
 * the stylesheet source would have picked 8px and re-reported the same defect one notch smaller.
 * The framework's own law, stated above `.lpos-c-panel`, is why they agree: "the ONE atomic panel is
 * EVERY component's frame too ... cards, CTAs, media viewers, thumbnails, buttons, INPUTS ... render
 * container chrome (glass, blur, border, radius, shadow) from the SAME atomic panel definition."
 *
 * WHY A SEPARATE RULE rather than a line inside the block above. That selector is scoped
 * `:not([data-psc-span-host])` -- the row's other layout mode -- so a radius written there would
 * silently square the corners again whenever the span host is active. The corner is not a property
 * of the layout mode.
 *
 * `!important` matches its neighbours and is required regardless: the framework resets this input
 * with `all: unset`, which is what strips the radius in the first place. */

/* THE ROOT CAUSE OF ALL THREE, FOUND BY ASKING CHROME FOR MATCHED STYLES BY ORIGIN RATHER THAN BY
 * READING STYLESHEETS. The framework already authors correct token chrome for this control --
 * `.lpos-c-cta__qty` sets a `color-mix` gold border and `var(--lpos-glass-1)`. It never wins: a
 * generic theme rule, `input[type="date"], ... input[type="number"], ...`, declares
 * `border: 1px solid #666; border-radius: 3px` and specificity (0,1,1) beats the component class's
 * (0,1,0). So the grey box was a LITERAL from a foreign stylesheet outranking the design system,
 * not a missing token -- which is why the fix restores tokens at a weight the theme cannot beat
 * rather than inventing values.
 *
 * WHY `--psc-panel-border` AND NOT THE FRAMEWORK'S OWN EXPRESSION. Reusing
 * `color-mix(... var(--lpos-border-alpha-2, 40%) ...)` -- the obvious move, since that IS how the
 * framework draws panel borders -- was tried on the live DOM first and computed alpha **0.55**
 * against the neighbours' **0.38**. The neighbours do not paint the framework expression: the
 * companion overrides every panel's border with `--psc-panel-border`, so that is the token a peer
 * genuinely resolves. Same trap as the radius (`--lpos-radius-control` sounds right, resolves 8px,
 * used by nothing here), one property over. The framework expression is kept as the fallback, so an
 * unset `--psc-panel-border` degrades to gold rather than to the theme's grey.
 *
 * WHY THE PANEL'S BLACK GLASS AND NOT THE FRAMEWORK'S `--lpos-glass-1`. That token is the field
 * glass and resolves to near-white at 4% here, which is the "black instead of transparent
 * glassmorphism" JD keeps catching. Every neighbour in the row -- qty panel, price panel, buy
 * toggles, slides host -- paints `--psc-panel-bg` over `--lpos-glass-panel` with `--lpos-blur-md`.
 * MEASURED CONSEQUENCE, since the input sits INSIDE `.lpos-c-cta__qtypanel`: the two 30% fills
 * stack, so the field reads as a recessed well within its panel. Digits stay `--lpos-ink` at a
 * measured 18.4:1 against the composited fill, well past WCAG AAA.
 *
 * THE DISABLED RENDERING IS UNTOUCHED AND STILL DISTINCT. On Steps 2-6 the framework's honest-empty
 * branch emits this input disabled; measured on Step 2 (Content 932) after these rules: opacity 0.4
 * and ink rgb(95,90,82) against the enabled rgb(244,243,239). The disabled signal was never carried
 * by the border or the fill -- those were identical in both states -- so restoring them cannot make
 * an editable control look dead or a dead one look editable. */
.lpos-blueprint input.lpos-c-cta__qty {
	border-radius: var(--lpos-radius-panel) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent)) !important;
	background: var(--lpos-glass-panel) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

/* A KEYBOARD USER COULD NOT SEE THIS FIELD AT ALL. The framework ships the right rule --
 * `.lpos-c-cta__qty:focus-visible { box-shadow: var(--lpos-focus-ring) }` -- and a blanket
 * `.lpos-blueprint * { box-shadow: none !important }` silently annuls it. That blanket kills
 * decorative shadows by design and takes every focus ring in the console with it; a focus ring is
 * not decoration. This restores the framework's OWN ring token for this one control by
 * out-specifying the blanket, rather than inventing an outline with literal pixels.
 *
 * VERIFIED WITH THE REAL KEYBOARD, per DEC-CR-777ZNH: `:focus-visible` is a judgement about input
 * MODALITY, and a scripted `.focus()` inherits the modality of whatever preceded it, so a script
 * focus test can end up reporting on its own last keystroke. Tabbed to (13 presses from the page
 * body), the ring paints gold 90% at 2px with a 12px 45% glow. It also rings on pointer click, which
 * is correct rather than a leak: a text field always matches `:focus-visible` because it accepts
 * keyboard input.
 *
 * NOW SUBSUMED by the console-wide exemption immediately below, which reaches this input too. The
 * rule is kept rather than deleted: it is narrower, it agrees with the general rule to the byte, and
 * deleting a shipped rule to prove a new one works is a worse trade than leaving it. */
.lpos-blueprint input.lpos-c-cta__qty:focus-visible {
	box-shadow: var(--lpos-focus-ring) !important;
}

/* EVERY OTHER CONTROL IN THE CONSOLE. One rule, because a rule per component means the next authored
 * button arrives ringless again.
 *
 * WHAT WAS MEASURED BEFORE WRITING THIS. Tabbed with a real keyboard through both routes of the plain
 * visitor URL, at 1280x720 and 1920x1080: of 47 painted console controls on the product single and 28
 * on the explore route, exactly ONE painted a focus ring -- the QTY input fixed above. The buy
 * toggles, Add to Cart, Buy Now, Continue, the six Step rail tiles, the eight top-bar icon buttons,
 * the breadcrumb tabs, Back/Continue and the whole media transport all measured `box-shadow: none`
 * on keyboard focus.
 *
 * WHY IT IS SCOPED TO THE FOCUS STATE AND NOT TO `box-shadow`. The blanket this out-specifies --
 * `.lpos-blueprint, .lpos-blueprint *, ... { box-shadow: none !important }` in the framework's
 * console-tokens.css -- kills decorative shadows DELIBERATELY, and the console's flat glass depends
 * on that. So the exemption names `:focus-visible` and declares nothing but `box-shadow`. It cannot
 * bring a decorative shadow back, because there is no state in which it applies and the control is
 * not focused from the keyboard. Panel shadows were measured `none` before and after.
 *
 * WHY THE SPECIFICITY LADDER, WHICH IS THE ONLY UGLY THING HERE. The blanket is (0,1,0), so beating
 * it needs almost nothing -- but it is not the only competitor. Ranked by specificity, this file
 * already carries 187 `box-shadow: none !important` selectors, seven of them at (0,6,x), and six that
 * name `:focus-visible` explicitly: the top-bar utility icon buttons at (0,4,0), the tab-bar plus
 * button at (0,4,1), and the collapsed-topleft, tab-bar pager, span-bar and media-transport icon
 * buttons at (0,5,0). Those were written to suppress a decorative GLOW on hover/active and swept the
 * focus state up with it. An exemption written at the obvious (0,2,0) would have covered most of the
 * console and silently missed the top-bar icon buttons and the tab-bar pager -- two of the controls
 * this exists to fix. The measured ceiling is (0,6,2); five repeats of the root class plus
 * `:focus-visible` plus the `:not()` reaches (0,7,0), which clears it. The number is derived from a
 * measurement (`tools/_focusring_ceiling.mjs`), so re-derive it rather than trusting it if this file
 * grows more suppressors.
 *
 * WHY NOT SURGERY ON THOSE SIX RULES INSTEAD. Each groups `:hover, :focus-visible, :active` and sets
 * border-colour, background and colour alongside the shadow. Dropping `:focus-visible` from the group
 * would take the gold border treatment off keyboard focus as well, and deleting the shadow line would
 * let the decorative glow back on hover. Both change more than focus rings. This changes only the
 * focus state, and leaves all six rules exactly as they are.
 *
 * WHY `*:focus-visible:not([tabindex="-1"])` AND NOT A LIST OF TAG NAMES. An element with no tabindex
 * cannot be focused at all, so `*` minus `tabindex="-1"` IS the set of things a user can focus --
 * natively focusable controls plus anything given `tabindex="0"` -- with no enumeration to fall out of
 * date. Excluding `tabindex="-1"` matters: those are script-only focus targets, and several are large
 * containers (the background-video iframe, drawer panels) that would have taken a gold rectangle.
 *
 * WHY `outline` IS NOT TOUCHED. 36 of the stops carry the user agent's own `outline: auto`, which is
 * the only indicator some of them have today. The framework's focus rules pair `outline: none` with
 * their ring; this one deliberately does not, so the change is purely additive and cannot remove an
 * indicator from a control it fails to reach.
 *
 * THE VALUE IS THE FRAMEWORK'S OWN RING TOKEN, with the framework's own default as the `var()`
 * fallback. Measured on the live controls, `--lpos-focus-ring` resolves to
 * `0 0 0 2px color-mix(in srgb, var(--lpos-accent) 90%, transparent), 0 0 12px color-mix(in srgb, var(--lpos-accent) 45%,
 * transparent)` -- the design system's gold, because the companion re-scopes the token on
 * `.lpos-blueprint--console/--gate/--magick8`. Nothing here restates a colour or a length of its own.
 * The fallback is not decoration either: without it an unset token computes `box-shadow` back to
 * `none`, which is the exact defect being fixed, failing silently.
 *
 * `.lpos-drawer` IS INCLUDED because it carries its own entry in the same blanket and its menu links
 * were equally ringless; it is walked in verification for that reason. */
.lpos-blueprint.lpos-blueprint.lpos-blueprint.lpos-blueprint.lpos-blueprint *:focus-visible:not([tabindex="-1"]),
.lpos-drawer.lpos-drawer.lpos-drawer.lpos-drawer.lpos-drawer *:focus-visible:not([tabindex="-1"]) {
	box-shadow: var(--lpos-focus-ring) !important;
}

/* Price + duration: NEVER STACKS, at any width.
 *
 * This rule previously read "the row's only shrinkable member, and the only one allowed to wrap
 * INTERNALLY (price on top, duration under it) when the row runs out of width" -- and that wrap is
 * the defect QA measured at 1280 (price panel 113.89px, "/month" pushed onto a second line beneath
 * "$80.75"). "One inline row" is about what the customer reads, not about the row element's own
 * `flex-wrap`, so the panel is now rigid: it neither shrinks nor wraps, and the row's deficit is
 * paid by the button below instead of by the price's unit. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .lpos-c-cta__pricepanel {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	align-content: center !important;
	justify-content: center !important;
	column-gap: var(--lpos-space-sm, 8px) !important;
	row-gap: 0 !important;
}

/* The duration suffix reads as the price's unit and stays on the price's line. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) [data-lpos-price-mode] {
	flex: 0 0 auto !important;
	min-width: 0 !important;
	white-space: nowrap !important;
	text-align: center !important;
}

/* Inline Add to Cart: a real `.lpos-c-cta__buy--secondary` instance (all chrome inherited), taking
 * the ROW'S REMAINDER so no dead gap can open beside it (JD 2026-08-12, annotation 1), and GIVING
 * ground first when the row is tight.
 *
 * `flex: 1 1 auto` is the whole mechanism and there is deliberately no length in this rule. Grow
 * absorbs whatever the QTY and price panels leave -- measured 281.73px at 1920 with the row's
 * children ending flush at its content edge. Shrink is now 1 rather than 0: something has to yield
 * at 1280, and a commit button losing padding is a smaller loss than a price losing its unit to a
 * second line. Its own label remains the practical floor because compact scale (below) frees more
 * width than the row is short.
 *
 * THE AUTO MARGIN STAYS GONE. Auto margins consume free space before flex-grow is considered, so
 * `margin-left: auto` and `flex-grow: 1` cannot coexist -- the margin was what held JD's dead gap
 * open, and leaving it would have made the grow silently inert. */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .psc-qty-cart {
	flex: 1 1 auto !important;
	align-self: stretch !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: var(--lpos-control-size, 46px) !important;
	padding-inline: var(--lpos-space-md, 12px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	transform: none !important;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .psc-qty-cart:hover {
	transform: none !important;
}

/* ==========================================================================
 * COMPACT SCALE -- psc-qty-compact (JD/QA 2026-08-12, P2a)
 *
 * Below the width where full-scale type fits, the row keeps all four strings on one line by
 * stepping DOWN THE EXISTING TOKEN LADDER rather than by hiding, truncating or stacking anything.
 * Nothing here is a new value: --lpos-text-lg and --lpos-text-2xs are rungs the file already uses,
 * and the insets are existing space tokens.
 *
 * WHAT THE FIRST VERSION OF THIS BLOCK GOT WRONG, measured by injecting it into the live page
 * before shipping. Five steps closed the gap but landed the row at EXACTLY its limit: 110.53 +
 * 130.41 + 102.23 + 10 of gap = 353.17 against 352.66 available, so the cart shrank half a pixel
 * BELOW its own label. Nothing visibly broke -- the label is `nowrap` with visible overflow -- but a
 * row with no slack is a row that the next authored label breaks, and "it fits to within half a
 * pixel" is not a guarantee. So the compact tier also tightens the QTY panel's own inset, which is
 * CHROME rather than information and is therefore the right thing to spend:
 *
 *     price 24px -> --lpos-text-lg (20px)         -13.9px  (measured 85.72 -> 71.83)
 *     suffix 13px -> --lpos-text-2xs (12px)        -3.4px  (measured 47.02 -> 43.58)
 *     price panel inset 12px -> space-sm          -14.0px
 *     qty field 70px -> control + one space-md     -8.0px  (measured 118.53 -> 110.53)
 *     qty panel inset 12px -> space-sm            -14.0px  <- added after measuring
 *     cart inset 12px -> space-sm                  -6.0px
 *     ---------------------------------------------------
 *     against a 37.83px deficit, leaving real slack rather than a rounding error
 *
 * The 1360px threshold is derived, not chosen for looks: the column is 352.66px at 1280 and 459.3px
 * at 1512, so it passes the 390.49px the row needs at ~1362px.
 * ========================================================================== */
@media (max-width: 1360px) {
	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) {
		--psc-qty-compact: 1;
		--psc-qty-field-w: calc(var(--lpos-control-size, 46px) + var(--lpos-space-md, 12px));
	}

	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .lpos-c-cta__qtypanel {
		padding-inline: var(--lpos-space-sm, 8px) !important;
	}

	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .lpos-c-cta__pricepanel {
		padding-inline: var(--lpos-space-sm, 8px) !important;
		column-gap: var(--lpos-space-xs, 3px) !important;
	}

	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) [data-lpos-price] {
		font-size: var(--lpos-text-lg, 20px) !important;
	}

	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) [data-lpos-price-mode] {
		font-size: var(--lpos-text-2xs, 12px) !important;
	}

	.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .psc-qty-cart {
		padding-inline: var(--lpos-space-sm, 8px) !important;
	}
}

/*
 * DEC-CR-777YU2b — late hide archive-default QTY/ATC; slider fills leftover
 *
 * After the FR-20 qty row (display:flex !important). Archives only. Info peek
 * drops [data-psc-archive-secondary], so the item Step 1 commerce stays.
 * Guest player overlay and flip-stage transport are not selected.
 */
/* DEC-CR-777YU2d — archive CTA is a column; slider fills leftover */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	align-content: stretch !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	grid-auto-rows: auto !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__qtyprice,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__qtyprice:not([data-psc-span-host]),
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .psc-qty-cart,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__qtyprice [data-lpos-add-to-cart] {
	display: none !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-toggle-row] {
	display: flex !important;
	flex-direction: row !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	gap: var(--lpos-gap, 8px);
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-toggle-row] > * {
	flex: 1 1 0 !important;
	width: auto !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .psc-slider-host,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .psc-slider-host--listing {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	height: auto !important;
	grid-row: auto !important;
	grid-column: auto !important;
}

/* ==========================================================================
 * PSC-REVEAL: the one hover/focus reveal treatment (DEC-CR-777ZM5)
 * ==========================================================================
 * Hidden at rest, shown when the pointer is over the host OR when keyboard focus lands inside it.
 * Extracted rather than duplicated: this is its SECOND consumer in one night -- the primary
 * player's transport (FR-32, below) and the Secondary Content slider's dot bar -- and a repeated
 * treatment becomes a component here rather than two recipes that drift.
 *
 * USAGE. Put `psc-reveal-host` on the element the user hovers or focuses into, and `psc-reveal` on
 * the thing that appears. The host must be the revealed element's ancestor. Nothing else is needed;
 * per-instance tuning is the four custom properties below, all of which default to the safe value.
 *
 *   --psc-reveal-clip          the hidden clip. Default `inset(100% 0 0 0)` -- collapses to the
 *                              BOTTOM edge, right for bottom-anchored chrome. Top-anchored chrome
 *                              wants `inset(0 0 100% 0)`.
 *   --psc-reveal-shift         how far it travels in. Default `0px`.
 *   --psc-reveal-rest-opacity  `0` to add a fade. Default `1`, i.e. NO fade -- see below.
 *   --psc-reveal-dur           transition duration. Default: the framework's reveal token.
 *
 * HIDING IS DONE BY `clip-path`, NOT BY OPACITY, AND THAT IS A MEASURED DECISION rather than a
 * stylistic one. The slider pass instrumented its dot bar and found that **opacity does not lift on
 * that element**: with the host confirmed matching `:focus-within`, `clip-path` flipped correctly in
 * both directions on the same rule while computed opacity stayed 0 half a second later, with and
 * without `!important` on both arms, and the cascade could not be inspected because `cssRules` reads
 * back empty for all 77 stylesheets on that page. Whatever pins it, the consequence for a shared
 * utility is decisive: **a rest state that sets `opacity: 0` can strand a consumer permanently
 * invisible while still occupying its box** -- exactly the state that dot bar was already in once
 * that evening, and the reason its styling went unreviewed. Clipping is reversible on the element
 * where opacity was not, so clipping is what the default rest state uses.
 *
 * The fade is therefore OPT-IN, per instance, and only after measuring that opacity lifts on that
 * particular element. `--psc-reveal-rest-opacity` defaults to `1` so that forgetting to measure
 * costs you a fade, not a component.
 *
 * DO NOT "OPTIMISE" THIS TO display:none OR visibility:hidden. Both remove the revealed controls
 * from the tab order, which silently makes them unreachable by keyboard -- and because two
 * components share this rule, that single edit would break both at once. `clip-path` and
 * `pointer-events` hide the control while leaving it focusable, so tabbing to it fires the focus
 * arm on the host and brings it back. That arm is not redundant with `:hover`, and removing it
 * turns a hidden control into a keyboard trap. Verified on the dot bar with real Enter presses,
 * including the wrap at both ends.
 *
 * THE FOCUS ARM IS `:has(:focus-visible)`, NOT `:focus-within` (DEC-CR-777ZN5). Measured on the
 * player's transport: `:focus-within` is satisfied by a MOUSE CLICK, so pressing play on the bar
 * left the bar focused and therefore revealed for the entire video, with the pointer parked at the
 * far corner of the screen. That is the user's report -- chrome that will not go away -- and it is
 * latent in every consumer of this utility, the dot bar included.
 *
 * `:focus-visible` is the browser's own answer to the question this arm is actually asking: not
 * "is something in here focused" but "is something in here focused in a way that warrants showing
 * an indicator". On the same mouse click that pins `:focus-within` open, `:has(:focus-visible)`
 * reads false; on a Tab it reads true. So this STRENGTHENS the keyboard path rather than trading it
 * away -- the reveal now happens in exactly the cases where a focus ring is painted, which is the
 * set of cases where a hidden control would otherwise be a trap.
 *
 * `pointer-events: none` at rest means the HOST is what must be hovered, never the hidden element
 * itself. Both consumers are chrome overlaying their host, so this is the correct way round.
 *
 * Setting `transform` creates a containing block for fixed-position descendants. Both consumers are
 * absolutely positioned overlay chrome with no such descendants; a future consumer that has them
 * should leave `--psc-reveal-shift` at its `0px` default.
 */
.psc-reveal-host .psc-reveal {
	clip-path: var(--psc-reveal-clip, inset(100% 0 0 0));
	opacity: var(--psc-reveal-rest-opacity, 1);
	transform: translateY(var(--psc-reveal-shift, 0px));
	pointer-events: none;
	transition:
		clip-path var(--psc-reveal-dur, var(--lpos-duration-reveal, 180ms)),
		opacity var(--psc-reveal-dur, var(--lpos-duration-reveal, 180ms)),
		transform var(--psc-reveal-dur, var(--lpos-duration-reveal, 180ms));
}

.psc-reveal-host:hover .psc-reveal,
.psc-reveal-host:has(:focus-visible) .psc-reveal {
	clip-path: inset(0);
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* ==========================================================================
 * FR-32: Primary transport overlays the video -- SUPERSEDED BY FR-35, 2026-08-12
 * ==========================================================================
 * DO NOT REINSTATE FROM THIS BLOCK. FR-28 put the transport in a panel BELOW the video on JD's
 * instruction; FR-32 overlaid it after JD, shown the trade-off, chose the video filling the panel
 * (DEC-CR-777ZM0); FR-35 has put it back below the video (DEC-CR-777ZQ3), which is possible now only
 * because the title panel above the video was deleted in the same ship to pay for it. The reasoning
 * below is kept because it is still TRUE about the cost -- 58px, and it is what re-triggers the
 * letterbox path if the budget is ever spent elsewhere -- but its conclusion no longer holds.
 *
 * This is the third instruction in one thread on this one bar. The record is therefore explicit about
 * which way round it currently is, because this project has already had a superseded instruction
 * re-actioned in good faith.
 *
 * The two rules that used to sit at the end of this block are DELETED rather than left inert: both
 * were keyed on `.lpos-media.-video.-barin`, and nothing adds `-barin` in the centre now that
 * `relocateMediaTransport()` has stopped. The in-flow declarations live in the FR-28 block above,
 * amended by FR-35.
 *
 * WHY IT CLOSES THE SIDE GAPS. In flow the bar cost the stage its 54px box plus 13px of margin.
 * With only ~610px of body height available and ~646px needed for a width-driven 16:9 at this
 * width, the ratio no longer fit, so the framework's own letterbox path engaged exactly as its
 * author intended (console-tokens.css:1285-1289) and centred a narrower video in a full-width
 * panel -- the ~34px of "dead space" per side JD reported. Out of flow the bar costs the stage
 * nothing, the ratio fits again, and the letterbox path stands down on its own. No width is
 * overridden anywhere; the framework's authored intent is restored rather than fought.
 *
 * WHAT IS REUSED, AND WHAT COULD NOT BE. The framework already has this affordance in CSS:
 * `.lpos-media.-barin .lpos-media__bar` (media.php:1662-1667) is an absolutely positioned,
 * scrim-backed, auto-hiding overlay, and `-barin` is what companion-layout.js now puts on the
 * media root so that geometry governs. Its DRIVER could not be reused: the `-idle` class is
 * toggled by glue bound to a native <video> element (media.php:2583-2587), and the primary panel
 * is a Vimeo iframe embed, so that listener never binds. The reveal is therefore driven by
 * `psc-reveal` above -- which is also what makes the transport keyboard reachable, where the
 * framework's pointer-driven version would have left a focused button invisible.
 */
/* FR-35: the two `-barin` rules that stood here are deleted -- see this block's header. The media
 * root still gets `overflow: visible` from the FR-28 `[data-psc-transport-host]` rule, which is keyed
 * on an attribute `relocateMediaTransport()` still sets. */

/* ==========================================================================
 * FR-32b: uniform panel inset on the top bar (DEC-CR-777ZM2)
 * ==========================================================================
 * The framework insets the two top-bar panels by `--lpos-space-sm` (console-tokens.css:4551)
 * while every other panel in the console uses `--lpos-panel-pad`. At this project's token values
 * that is 5px against 8px, and it is the "no longer uniform padding" JD reported -- two different
 * tokens doing one job, not a hardcoded value. The framework is pristine by law, so the token is
 * corrected here rather than there.
 *
 * Height-neutral by construction: the declaration is horizontal-only (`0` vertical), and the row
 * itself is pinned to `--lpos-titlebar-h` by the grid (console-tokens.css:1666), so this moves the
 * logo, tabs, pager and utility icons inward by one ladder step and changes no geometry below it.
 *
 * NOT DONE HERE, AND DELIBERATELY SO: the console grid's row-gap was going to be tightened one
 * ladder step alongside this. It was dropped -- see DEC-CR-777ZM6 for why, before re-proposing it.
 */
.lpos-blueprint .lpos-topbar__panel {
	padding: 0 var(--lpos-panel-pad, 8px) !important;
}



/* ==========================================================================
 * FR-33: what the primary player shows when nobody is touching it
 * ==========================================================================
 * Three reports, one question. JD, in the user's words:
 *   1. "when the video is playing the video player toolbar that shows on hover when not playing
 *      also needs to auto hide when playing until hovered over in both states"
 *   2. "when paused the center middle play button in the middle center oif the video should show
 *      just like when it hasnt been played yet"
 *   3. "our video player component was supposed to have the auto play loop"
 *
 * The state model they add up to: the player has ONE resting appearance -- centre play button up,
 * transport hidden -- and playback is the only state that differs. Paused and never-played are one
 * visual state rather than two, and the muted teaser loop is motion inside the resting state rather
 * than a fourth state of its own.
 *
 * Report 1 needs no rule here: the transport already hides while playing. What it did not survive
 * was being STARTED from the bar. Pressing a control leaves it focused, `psc-reveal` revealed on
 * `:focus-within`, and a mouse click satisfies `:focus-within` -- so the bar stayed painted for the
 * whole video with the pointer parked at the far corner of the screen. Measured, and measured in
 * both directions: on that same click `:has(:focus-visible)` reads FALSE, because the browser does
 * not consider a mouse-click focus one that warrants a visible indicator. The fix is therefore in
 * the shared utility's focus arm (see the PSC-REVEAL block), not here, and it makes the keyboard
 * path stronger rather than trading it away.
 *
 * Worth recording how nearly the first probe of report 1 cleared it: pressing the CENTRE button hid
 * the bar correctly, which looked like the user being wrong. It is not -- the centre button lives
 * inside the poster facade, the facade is removed from the DOM on press, so focus falls back to
 * `<body>` for reasons that have nothing to do with the state model. Pressing a control that
 * destroys itself tells you nothing about focus state.
 */

/* --------------------------------------------------------------------------
 * 1. PAUSED READS AS NEVER-PLAYED (DEC-CR-777ZN1)
 * --------------------------------------------------------------------------
 * The framework's centre play button, `.lpos-media__big`, lives INSIDE the poster facade, and
 * `wireEmbed()` sets the facade `hidden` on first press and never restores it. So after the first
 * play the centre button is gone permanently, and a paused video paints as a dark frame with no
 * control anywhere on it -- captured, and it reads as a dead player rather than a paused one.
 *
 * The button for this state already exists: `.lpos-media__hoverplay`, the framework's own centre
 * chip, at the same 80px and the same 12px radius as the facade's button. It is hover-only, which
 * is why nothing shows at rest.
 *
 * And the state signal already exists too, which is why no new JavaScript driver is needed here.
 * `vtSetPlayingUi()` in lpos-drawers.js tracks the REAL player state -- it subscribes to Vimeo's
 * `play` / `pause` / `finish` events -- and writes `aria-pressed` onto this very element. So
 * `:not([aria-pressed="true"])` IS "not playing", and it is correct before the transport has ever
 * spoken to the player, because the attribute is simply absent then.
 *
 * Only the chip is unhidden, never the timeline: the never-played state has no timeline either
 * (the facade suppresses it), and "just like when it hasnt been played yet" is a statement about
 * one button. The timeline stays hover-only.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video .lpos-media__hoverplay:not([aria-pressed="true"]) {
	opacity: 1 !important;
	pointer-events: auto !important;
	/* Parity with `.lpos-media__big` is taken from the framework's OWN declarations for it
	 * (media.php:1637-1646), token for token, rather than eyeballed to match. The chip's default is
	 * the quieter `--lpos-glass-panel` fill, a 40% border and `--lpos-muted` ink; the facade's
	 * button is the darker bar mix, a 65% border and full `--lpm-txt`. Same geometry already. */
	background: color-mix(in srgb, var(--lpm-bar, rgba(13, 17, 28, 0.85)) 92%, var(--lpos-bg, var(--lpos-bg)) 8%) !important;
	border-color: color-mix(in srgb, var(--lpm-accent, var(--lpos-accent)) var(--lpos-border-alpha-4, 65%), transparent) !important;
	color: var(--lpm-txt, var(--lpos-ink)) !important;
}

/* The play triangle's visual mass sits left of its bounding box, so a geometric centre reads
 * left-heavy. The framework nudges its own glyph 3px right for this; matching appearance means
 * matching the nudge, not just the box. */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video .lpos-media__hoverplay:not([aria-pressed="true"]) svg {
	transform: translateX(var(--psc-play-glyph-nudge, 3px));
}

/* Hover still has somewhere to go from the resting state, so the control does not read as inert. */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video .lpos-media__hoverplay:not([aria-pressed="true"]):hover {
	border-color: var(--lpm-accent, var(--lpos-accent)) !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
}

/* --------------------------------------------------------------------------
 * 2. THE TRANSPORT PAINTS UNDER THE VIDEO AT REST (DEC-CR-777ZN2, REVERSED)
 * --------------------------------------------------------------------------
 * REVERSAL, on JD's report and on a measurement that contradicts this block's own premise.
 *
 * JD, looking at a fresh load: "the primary content toolbar (the video controller in this case) is not
 * under the video." That IS this state. FR-35 put the bar correctly in flow beneath the stage -- that
 * part is verified and untouched here -- and then this rule made it invisible for the whole of the
 * resting state, so the first thing anyone sees of the player is a video with nothing under it.
 *
 * Measured across six states at 1280x720, hit-testing the bar's own centre rather than reading its
 * computed style, because `visibility: hidden` leaves a full-size rect and a rect proves nothing here:
 *
 *   facade up, un-hovered   bar NOT visible, NOT pressable   <- what JD is looking at
 *   facade up, hovered      bar NOT visible, NOT pressable
 *   playing, un-hovered     visible
 *   playing, hovered        visible
 *   paused,  un-hovered     visible
 *   paused,  hovered        visible
 *
 * So there was no state before first play in which the control could be seen, and the report is exact.
 *
 * WHY THE ORIGINAL REASONING NO LONGER HOLDS. DEC-CR-777ZN2 hid the bar because the real embed iframe
 * has no `src` while the facade is up, so "a revealable-but-inert bar is a control that lies". That
 * premise was TESTED rather than re-argued: with this hide lifted, pressing the transport's own play
 * button while the facade was still up tore the facade down, gave the real iframe its `src`, and
 * flipped the playing state to true -- three independent tells, all positive. The framework's
 * first-press path answers our bar exactly as it answers the facade's own button. The bar is not
 * inert, so it is not lying, so the reason to hide it is gone.
 *
 * GEOMETRY IS UNCHANGED, which is the property FR-35 paid 90.8px for and this must not spend.
 * `visibility` does not affect layout: the row was already reserved and still is. Lifting the hide on
 * a live load moved the stage 0.00px in width and 0.00px in height, so the video is the same size
 * before and after first play and the 9px of slack at 1280 (DEC-CR-777ZQ6) is untouched.
 *
 * KEPT AS A RULE rather than deleted, for two reasons: the reversal stays visible where the next
 * person will look for it, and an explicit `visible` also answers any ancestor that hides -- a
 * deletion would only remove this declaration and leave that case open.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-video:has(.lpos-media__embedposter:not([hidden])) > .lpos-media__bar.psc-media-transport {
	visibility: visible !important;
}

/* --------------------------------------------------------------------------
 * FR-40: STAND DOWN THE FRAMEWORK'S 3D OVERLAY (DEC-CR-777ZD2)
 * --------------------------------------------------------------------------
 * The widened docking rule above claims position, left, right, bottom, width, max-width, margin,
 * z-index and flex-direction. The framework's 3D branch (media.php:1457) declares FIVE more that it
 * does not name, and each one survives the widening with a visible consequence:
 *
 *   top: 50%                      an offset rather than a pin once position is relative -- the bar is
 *                                 pushed half the panel's height down, out of the panel
 *   opacity: 0                    invisible at rest; the framework reveals on :hover / :focus-within
 *   pointer-events: none          unclickable at rest, for the same reason
 *   transform: translate(6px,-50%) shifted right and up by half its own height
 *   transition: opacity, transform animates a docked bar's non-changes on every hover
 *
 * A bar that is in flow, invisible and inert looks in a screenshot exactly like a bar that was deleted,
 * which is the failure this rule exists to prevent. SCOPED TO `.-model` ON PURPOSE: the same
 * declarations in the shared rule would outweigh `.psc-reveal-host .psc-reveal` and break the video
 * transport's play-state reveal, a verified behaviour this ship must not touch.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport {
	top: auto !important;
	height: auto !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	transition: none !important;
}

/* ==========================================================================================
 * REHEARSED AND CLEARED 2026-08-13. Added on the FIRST measurement against the real
 * <model-viewer>, which found the ship incomplete for 3D; the completing rule is the
 * order:2 one further down, and the raw rects below show the bar docked beneath the model.
 * ==========================================================================================
 * Measured at 1600x1000 with the patched bytes served, real model, holder at `-modelready`:
 *
 *                        BASELINE (live)   PATCHED
 *   position             absolute          relative   <- in flow, as intended
 *   opacity              0                 1          <- stood down, as intended
 *   pointer-events       none              auto       <- stood down, as intended
 *   top                  370px             0px        <- stood down, as intended
 *   bar height           260 (5 stacked)   70 (row)   <- one row, as intended
 *   bar top vs stage bottom  -500          -736       <- STILL NOT BELOW THE MODEL
 *
 * Six of eight checks passed and the two that failed are the same fact: the bar is in flow but it is
 * BESIDE the model, not beneath it. The holder lays its children out as a ROW, so an in-flow bar takes a
 * column of width next to the object instead of a row of height under it -- which is why the bar's top
 * sits 736px above the model's bottom edge. The framework has two competing declarations for this holder
 * (`flex-direction:row` at media.php:1277 and `column` at :1429), and whichever wins, this ship must not
 * depend on the outcome.
 *
 * THE HOLDER-DIRECTION RULE BELOW DID NOT FIX IT, AND THAT IS MEASURED, NOT SUSPECTED. Re-rehearsed with
 * it in the payload: stageBottomVsBarTop stayed at -736 to the pixel and belowStage stayed false. The
 * "the holder is a row" diagnosis is therefore WRONG and is recorded as wrong so the next reader does not
 * spend the same hour on it. The rule is kept only because a stated direction is correct regardless, and
 * it is demonstrably inert here.
 *
 * A CORRECTION AGAINST THIS PASS, RECORDED BECAUSE A GOOD INSTRUMENT WAS NEARLY THROWN AWAY. This pass
 * then argued that stageBottomVsBarTop could not be trusted, on the grounds that its baseline value of -500
 * was arithmetically impossible. THAT ARGUMENT WAS WRONG. The raw rects show the field was computing
 * bar.top - stage.bottom exactly as named: 168 - 904 = -736, to the pixel. The baseline reading was
 * consistent too; the mis-modelling was this pass's, not the probe's. The field was telling the truth in
 * both runs and the sign was the answer -- a negative value means the bar precedes the medium, which is
 * precisely the defect. Distrusting it cost real time and would have cost more had the arbiter not been
 * switched. Do not "repair" stageBottomVsBarTop; it works.
 *
 * Two candidate causes were eliminated cheaply and are recorded so they are not re-checked: the FR-35
 * docking rule contains no order declaration (the only "order:0 !important" in companion.css, line 3972,
 * belongs to the titlecap), and the -model holder has no .lpos-media__stage or __stagev wrapper
 * (media.php:479 puts the model-viewer and the bar as direct children), so readBar's stage selector should
 * be resolving to model-viewer itself rather than to a wrapper that contains the bar.
 *
 * SO THE ARBITER WAS SWITCHED RATHER THAN THE INSTRUMENT REPAIRED. tools/_fr40_rawrects.mjs serves the same
 * patched bytes and returns six raw getBoundingClientRect numbers from a single evaluate call, with no
 * helper and no verdict computed in the page, plus a screenshot of Step 3. Read that file's header for the
 * reasoning. The verdict below stands on those raw rects and the picture, NOT on stageBottomVsBarTop, which
 * remains unreliable and unrepaired by design -- fixing the instrument was the longer road.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-model[data-psc-transport-host] {
	flex-direction: column !important;
}

/* --------------------------------------------------------------------------
 * FR-40: AN ADOPTED BAR SORTS AFTER ITS MEDIUM (DEC-CR-777ZD3)
 * --------------------------------------------------------------------------
 * THIS is why the bar was not under the model, and it was this pass's own doing rather than the
 * framework's. Raw rects at 1600x1000, patched, from tools/_fr40_rawrects.mjs:
 *
 *   holder        164 -> 904
 *   bar           168 -> 238     <- FIRST in the column
 *   model-viewer  246 -> 904     <- second, under the bar
 *   barIsLastChild true   barOrder -1   mvOrder 0   holderDirection column
 *
 * The bar is the holder's LAST child in the DOM and still painted first, because order:-1 sorts it there.
 * That declaration is companion.css's own "order: -1 !important; belt: visual first even if a dyn node
 * races ahead" -- correct for the psc-spanbar it was written for, which is a bar that belongs ABOVE its
 * content. adoptMediaOwnBar() adds psc-spanbar to inherit the glass chrome and inherited that sort order
 * with it.
 *
 * So the medium's own bar is sorted back after the medium. Keyed on the adoption attribute, which
 * adoptMediaOwnBar() writes and relocateMediaTransport() does not, so the video transport cannot be
 * touched by this rule -- the control's ten fields must stay identical and this selector cannot match it.
 *
 * NOTE FOR THE NEXT READER: the holder-direction rule above is INERT. The raw rects show the holder was
 * already column, so it was never the cause. It is kept because stating the direction is correct
 * regardless, but do not read it as the fix -- this rule is.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
	order: 2 !important;
}

/*
 * FR-40 fill law for an ADOPTED bar's buttons.
 *
 * The video transport's controls are `.lpos-c-icon-btn`, so the existing
 * `.psc-media-transport .lpos-c-icon-btn` rule gives them the FR-14 flex-fill. A framework medium's
 * buttons are bare <button>/<a> with `flex: 0 0 auto` from media.php:1495, so without this they would
 * huddle at one end of a full-width glass bar instead of spanning it like the video's do -- the layout
 * JD asked to be "the same regardless of the media type".
 *
 * Keyed on the adoption attribute rather than on a medium's class so a future medium needs no new rule.
 * The fullscreen-only exit X stays `display: none` outside fullscreen -- that is the framework's rule
 * and this names no display.
 */
.lpos-blueprint .lpos-cell--midcenter [data-psc-bar-adopted] > button,
.lpos-blueprint .lpos-cell--midcenter [data-psc-bar-adopted] > a {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
}

/*
 * FR-48: THE PAGE-NUMBER PILL AND ITS FIELD, on the same treatment as the rest of the column.
 *
 * MEASURED ON LIVE BEFORE THIS WAS WRITTEN (1280x720, plain URL, Step 2). The pill computed an 8px
 * radius, a 0.55-alpha hairline and a 0.14 fill while every neighbour in its own bar -- the bar itself,
 * prev, next -- computed 12px, 0.38 and 0.30. Its input computed a 3px radius and a solid
 * rgb(102,102,102) hairline, which is no token in this system: it is the theme's
 * `input[type="text"] { border: 1px solid #666; border-radius: 3px }` at specificity (0,1,1) beating
 * the component class at (0,1,0) -- the identical defeat documented for the QTY input above, one
 * control over. Not a missing token; a foreign literal outranking the design system.
 *
 * WHY `--lpos-radius-panel` AND NOT `--lpos-radius-control`. Asked on the live element,
 * `--lpos-radius-control` resolves to 8px, which is exactly what the pill was already painting and
 * what JD reported as wrong. The neighbours compute 12px from `--lpos-radius-panel`. The token that
 * sounds right is the defect.
 *
 * WHY `--psc-panel-border`, `--psc-panel-bg` AND `--psc-panel-blur`. Same reasoning, and the same
 * three tokens, as the QTY input rule above: the framework's own `color-mix(... --lpos-border-alpha-2
 * ...)` computes 0.55 here while a real peer computes 0.38, because the companion overrides every
 * panel border with `--psc-panel-border`. Reusing the QTY recipe verbatim keeps ONE recipe for
 * "a field on the panel", rather than a lookalike.
 *
 * THE INPUT BECOMES A CHROME-LESS FIELD HOST, which is the opposite of what the QTY input needed and
 * for a structural reason: the QTY input's parent panel is not chromed, this input's IS. Two rings
 * would be the double gold ring this project fixed twice today. Nothing here names a display, a size,
 * a font or a colour beyond `--lpos-ink`, so the framework keeps ownership of everything else --
 * including the focus ring, which is why no `box-shadow` is declared: the console-wide
 * `:focus-visible` exemption above must keep reaching this field.
 *
 * SCOPE. `.lpos-pagination__count` is ONE shared component -- media.php:1310 states that the flip
 * pager and the console's centrefeature pager are deliberately the same rule set -- so this is scoped
 * to the console rather than to the flipbook. Counted live at both viewports before shipping: the
 * matched-node count is reported in the pass log.
 */
.lpos-blueprint .lpos-pagination__count {
	border-radius: var(--lpos-radius-panel) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, color-mix(in srgb, var(--lpos-border-tint, var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent)) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

.lpos-blueprint .lpos-pagination__count > input.lpos-pagination__jump {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	color: var(--lpos-ink, var(--lpos-ink)) !important;
	padding-inline: var(--lpos-space-sm, 5px) !important;
}

/* --------------------------------------------------------------------------
 * 3. THE TEASER LOOP IS THE RESTING STATE, WITH MOTION (DEC-CR-777ZN3)
 * --------------------------------------------------------------------------
 * There is deliberately no rule for the looping state, and that is the finding rather than an
 * omission. Driven live, the framework's teaser already paints precisely the intended resting
 * appearance: the facade stays up but goes transparent (`-overpreview`), the motion shows through
 * it, `.lpos-media__big` sits on top, the transport stays clipped away, and the framework's own
 * chip and timeline are suppressed by the facade rule above.
 *
 * The reason the player correctly reads as "not playing" during a loop that is technically playing
 * is worth stating, because it is load-bearing and invisible: `lpos-drawers.js` only accepts
 * messages from `iframe.lpos-media__iframe:not(.lpos-media__preview)`, so the teaser's own `play`
 * events never reach `vtSetPlayingUi()`. The loop cannot flip the centre button to a pause glyph,
 * and rule 1 above cannot fight it. Pressing play tears the teaser down and loads the real embed,
 * which is where `aria-pressed="true"` finally comes from.
 *
 * A muted loop is technically playing but it is not the user having pressed play, and the component
 * already agrees.
 */

/* ==========================================================================
 * FR-34: the centre column above the player (DEC-CR-777ZP0-777ZP9)
 * ==========================================================================
 * The user, pointing at the top and bottom edges of the centre panel: "it seems there is an extra
 * panel which I assume is the video player panel but not sure if it is needed or not" and "the top
 * and bottom of that panel are really tall compared to the actual video player". Their answer, from
 * an earlier message: "the video keeps its aspect ratio and so does its container. then above the
 * video/primary content we can put a text title panel".
 *
 * WHICH PANEL -- measured at 1920 and 1280 before removing anything, because the three candidates
 * need different fixes and only one of them is real:
 *
 *   - NOT the video's own frame. `.lpos-media` and `.lpos-media__stagev` measure 1140x643 at 1920
 *     with zero padding, zero margin, and the stage locked to `aspect-ratio: 16 / 9`. The frame is
 *     exactly the video, to the pixel.
 *   - NOT a leftover band where the transport used to sit before FR-32 moved it into the player's
 *     hover bar. `.lpos-feat__body` has exactly ONE child at both viewports -- the media root --
 *     with hidden children included in the count, so there is no vacated row to reclaim.
 *   - IT IS `.lpos-feat__body` itself, the primary content panel: `flex: 1 1 0` with
 *     `align-items: center`, painting `--lpos-glass-panel` behind a child that cannot fill it.
 *
 * WHY IT IS TALL, stated plainly because it is a consequence of my own FR-32 fix meeting a framework
 * decision rather than a bug in either. `BlueprintRenderer::render_center()` moved the centre's
 * title panel out to the right column on 2026-08-10, commenting "the centre keeps that height for a
 * bigger player at the same ratio" -- the height was deliberately retained for the player. The
 * player then could not spend it: after FR-32 the stage is WIDTH-driven 16:9, which is what closed
 * the side gaps this thread opened with, and a 1142px-wide column affords 643px of 16:9 inside an
 * 830px-tall panel. The framework centres the media in the leftover, so it paints as glass above and
 * below -- 187px at 1920, 67px at 1280.
 *
 * So the reserved height returns to the purpose it was reserved for, and the user's instinct is the
 * correct fix: the container hugs the video, and the space above becomes the title panel the
 * renderer moved away. That the framework's own `.lpos-feat__titlecap` component is still fully
 * styled for this exact position, with only its render site removed, is the evidence that this is a
 * revival rather than an invention.
 */

/*
 * 1. The primary content panel hugs its media.
 *
 * FR-35 KEEPS THIS RULE, and that is a decision rather than an oversight. FR-34 introduced it
 * alongside the title panel, so it looks like part of what was just deleted -- but hugging is what
 * answers JD's original report. Without it the panel takes `flex: 1 1 0`, stretches to the column and
 * paints 187px of glass above and below a video that cannot fill it. Deleting it would restore the
 * bands the title panel was only ever the second half of the fix for.
 *
 * `margin-block: auto` rather than pinning the stack to the top. Auto margins in a flex column absorb
 * whatever is left once the Step nav row above and the transport below have taken theirs, and they
 * split it evenly, so the player sits optically centred rather than leaving one large void beneath it.
 * There IS a remainder and it is not a defect: a full-width 16:9 player, a fixed-height nav row and a
 * transport genuinely cannot fill a 902px column at this aspect, so the only choice is where the
 * unspendable space goes, not whether it exists.
 *
 * Scoped by `:has(> .lpos-media)` so the full-bleed centre variants are untouched. The Coming Soon
 * carousel must keep filling (`.lpos-feat__body--coming{flex:1 1 0}`) and reaches its media through
 * a slide rather than as a direct child, so it never matches; `--archive` and `--dashboard` hold no
 * media root at all. The `:not()` is belt and braces on the one variant that also carries a media
 * engine somewhere inside it.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming):has(> .lpos-media) {
	flex: 0 0 auto !important;
	margin-block: auto !important;
}

/*
 * 2. THE TITLE PANEL IS GONE (FR-35, DEC-CR-777ZQ3) -- and so is the rule that positioned it.
 *
 * What stood here was `.psc-primary-title { order: 0 }`, which existed for one reason: the framework
 * still carries a dead `.lpos-feat__titlecap{order:99}` from when the titlecap rendered BELOW the
 * player, and it would have dragged a correctly inserted panel to the bottom of the column. With no
 * panel inserted there is nothing for either declaration to move, so the override is deleted rather
 * than left inert. A rule that can only ever match nothing is indistinguishable from a rule that
 * works until someone reads it.
 *
 * THE STEP NAV ROW IS LIFTED ABOVE THE VIDEO IN THE DOM, NOT BY `order`, and that choice is worth
 * recording because `order: -1` here would have been one line. Reordering with `order` leaves the DOM
 * saying one thing while the screen shows another: the tab order would still run video-then-nav, and
 * anything measuring or hit-testing by DOM position would keep agreeing with itself while being wrong.
 * That is precisely the defect this pass caught in its own overlay probe, where
 * `compareDocumentPosition` reported the transport correctly following the stage while the bar covered
 * the video at both widths. See `liftStepNav()` in companion-layout.js.
 *
 * Nothing replaces the panel's chrome here. The framework's `.lpos-feat__titlecap` component remains
 * fully styled and unused, exactly as it was before FR-34 revived it.
 */



/* =====================================================================================
   AN ICON BUTTON WITH NO ICON IS A HOLE, NOT A CONTROL (777ZE6, re-attributed FR-37b).

   WHO EMITTED IT: THE COMPANION, not the framework. This comment used to say "the framework
   emits a placeholder", and measuring it settled the question the other way -- the framework
   renders ZERO such controls on this page, and `makeIconBtn( 'slot', LABEL_SLOT )` in
   companion-layout.js built the button, from a label that could not be unset. Measured live it
   was 277x46 of nothing, and a visual QA pass read it together with its sibling as a single
   unlabelled 558px bar -- a reasonable reading, because that is what it looked like.

   THE COMPANION NO LONGER EMITS ONE. FR-37b builds that slot only when it is authored, and an
   authored one carries a glyph, so the cause is gone rather than covered.

   THE RULE STAYS ANYWAY, and now it guards only what its author thought it did. The framework
   does carry an empty-label literal of its own (BlueprintRenderer :1544, Magick8 tabs with no
   authored label), and "zero measured on this page" is not "zero on every Display". Removing a
   structural guard on the strength of one page's reading would be trading real protection for
   tidiness.

   Matched STRUCTURALLY (an icon button with no element child) rather than by its label. A
   selector keyed on the word itself would put a content string in a stylesheet and would stop
   working the moment that label is authored or translated. Scoped to the buy pane so a
   genuinely icon-less button elsewhere is not swept up by a rule that never examined it.
   ===================================================================================== */
.lpos-blueprint .lpos-cell--midright .lpos-c-icon-btn.psc-empty-iconbtn-guard,
.lpos-blueprint .lpos-cell--midright .lpos-c-icon-btn:not(:has(svg)):not(:has(img)):empty {
	display: none !important;
}


/* =====================================================================================
   THE STAGE BREADCRUMB -- the crumbs ARE tabs
   -------------------------------------------------------------------------------------
   JD 2026-08-12: "the breadcrumbs in the tab panel at the top should still be styled like
   tabs." So there is no crumb appearance to design. A crumb is the framework's labeled
   icon-button wearing the same shared panel tokens as the `plus` tab beside it, and the
   chevrons are gone -- a tab strip does not separate its tabs, the ORDER carries the
   hierarchy.

   THIS IS A RESTORE, NOT A SKIN, and that distinction is why the previous block was wrong
   rather than merely ugly. The framework already renders each crumb as
   `.lpos-c-icon-btn--labeled`; the FR-8 strip earlier in this file then clears border,
   background and blur from every icon button in the top bar, and it does so with
   `!important` -- so the old pill rules lost the cascade outright and the crumbs rendered
   as bare text that matched neither the pill nor a tab. Restoring exactly the tokens the
   pager chip restores (§8 above) returns them to the tab family instead of founding a
   second one. Values are not chosen here: they were measured off the live `plus` tab.
   ===================================================================================== */
.lpos-blueprint--console .lpos-topbar__panel--tabs {
	--psc-tab-pad-inline: var(--lpos-space-md, 8px);
	--psc-tab-min: calc(3 * var(--lpos-control-size, 46px));
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: var(--lpos-control-size, 46px) !important;
	padding: 0 var(--psc-tab-pad-inline, var(--lpos-space-sm, 10px)) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
}

/* The chevron retires. Left as `content: none` on the same selector that drew it so the
   deletion is visible to the next reader rather than being an absence they have to notice. */
.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb + .psc-crumb::before {
	content: none !important;
}

/* Where you are is the ACTIVE TAB treatment, applied by the shared top-bar active rule
   which now answers to `aria-current` as well -- see FR-8 above. Nothing is repainted here,
   so the active crumb and the active tab cannot drift apart. `aria-pressed` stays unused on
   purpose: the framework reads it as an exclusive toggle group and would move it between
   siblings on click, handing the trail to the tab handler. */
.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb[aria-current="page"] {
	cursor: default;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb .lpos-c-icon-btn__text {
	/* A long Display name truncates rather than pushing the pager out of the bar. */
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1280px) {
	/* At 1280 the bar is tight. The trail keeps every crumb and gives up label
	   width instead of the inline pad — hugging the letters was the defect. */
	.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
		padding: 0 var(--psc-tab-pad-inline, var(--lpos-space-md, 8px)) !important;
	}

	.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb .lpos-c-icon-btn__text {
		max-width: 11ch;
	}
}

/* =====================================================================================
   JD 2026-08-13 -- FIVE COMPONENT CHANGES, EXPLICITLY APP-WIDE

   "all changes apply app wide", so every rule below is keyed to a COMPONENT and not to the
   surface the screenshot came from. None of them names a pixel, a colour or a radius: every
   value is a token or an arithmetic over tokens, per the standing law that everything here is
   tenant-, app-, user- or instance-authored.

   The sixth change -- the top row's vertical rhythm -- is not here. It is one token in the
   --psc-topbar-panel-h block above, because that is where the row's height is decided, and
   putting a second opinion about it down here is how two definitions of one height drift.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   ITEM 1 -- THE TOP BAR'S TWO END CAPS INSTANCE THE SHARED ICON BUTTON

   JD: "the Menu button icon and the login button icon in the far right top both need their
   panel and border."

   MEASURED FIRST, AND THE TWO ARE NOT IN THE SAME STATE. On live, at rest, the menu button
   already computes exactly what the utils tray's icon buttons compute -- 1px solid gold at the
   0.38 border alpha, 8px control radius. The LOGIN control computes a TRANSPARENT border and a
   12px radius, so it is the one genuinely wearing no chrome, and it is chromeless for a reason
   this file wrote down: the FR-8 strip near the top clears border, background and blur from
   every .lpos-c-icon-btn inside all three top cells, on the grounds that the cell is already
   the bordered control. Every control that has needed chrome back since has been granted it
   through a scoped exception -- the active tab, the utils tray, the topleft menu, the
   pagination chip, the plus button. The menu got one; the topright never did.

   SO THIS IS THAT ESTABLISHED EXCEPTION, WITH BOTH CELLS NAMED IN ONE RULE rather than a second
   menu-only rule agreeing with the first by coincidence. Re-pointing the strip instead would
   re-chrome the things the strip is deliberately holding down.

   NO FILL, AND THAT IS THE POINT OF INSTANCING RATHER THAN INVENTING. Both cells ALREADY wear
   the shared glass atom (FR-11 for topleft, the matching topright rule beside it), and the
   utils tray's own note makes the same choice for its buttons: single gold hairline at
   --psc-panel-border, transparent fill inside the glass tray, because a second glass fill or a
   second ring is the standing regression. A 30% fill inside a 30% fill is the cumulative
   opacity defect this project has rejected repeatedly.

   BOX-SHADOW IS DELIBERATELY ABSENT from every declaration below. A pass is restoring keyboard
   focus rings console-wide by changing a blanket box-shadow rule; this chrome neither depends on
   that blanket surviving nor competes with whatever replaces it.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright .lpos-c-icon-btn {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 12px) !important;
}

/* The accent hairline on hover and keyboard focus, so the pair reads as the same component in
   every state and not only at rest -- the same treatment the plus tab and the utils tray take. */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn:hover,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-icon-btn:focus-visible,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright .lpos-c-icon-btn:hover,
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright .lpos-c-icon-btn:focus-visible {
	border-color: var(--lpos-accent, var(--lpos-accent)) !important;
}

/* -------------------------------------------------------------------------------------
   ITEM 4 -- THE CRUMB TABS ARE ONE WIDTH, DERIVED

   JD: "the tabs all need to be the same width. and standardized."

   Measured before: Dashboard 81.91, Shop 42.94, Cell Signals 86.89 at 1280 -- three widths,
   because a labelled icon button sizes to its label.

   WHY A FLOOR AND NOT A FIXED WIDTH. These are the Route breadcrumb, so both the labels and the
   COUNT are authored data: a fixed length would be correct for exactly today's trail and would
   clip the first long Display name or squeeze a fourth crumb. A floor equalises every trail
   whose labels fit it -- which is every trail measured on this console, at both viewports -- and
   a label that genuinely needs more simply takes more instead of breaking.

   WHY THREE CONTROL SQUARES (DEC-CR-777YN5). Two squares (92px at the default control) hugged
   the label once the 1280 pad collapsed to --lpos-space-xs. A word still takes more than a
   glyph; the floor is now three squares, and --psc-tab-pad-inline (space-md) sits on both
   sides so a longer name grows as text-plus-pad rather than letters against the ring.
   Re-derives if the control scale or the pad token moves. The min-width: 0 a few rules above
   is what this overrides -- that one exists to stop a crumb stretching, which a floor does not.

   SCOPED TO .psc-crumb ON PURPOSE. The plus button shares this tray and is an icon button
   rather than a tab. What's Next / What's New in the buy box are a different atom
   (`[data-lpos-buy-mode]`), not this labeled crumb.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
	min-width: var(--psc-tab-min, calc(3 * var(--lpos-control-size, 46px))) !important;
	justify-content: center !important;
	text-align: center !important;
}

/* -------------------------------------------------------------------------------------
   ITEM 2 -- THE PRICE TAKES A SHARE OF THE ROW'S SURPLUS

   JD: "increase the width of the price since it is cramped."

   THE ROW'S ARITHMETIC, MEASURED, IS WHY THIS IS A SHARE AND NOT A WIDTH. At 1280 the row is
   352.66px and its three members sum to exactly that: QTY 104.53 + price 130.41 + inline Add to
   Cart 107.72 + two 5px gaps. That button is flex: 1 1 auto and is sitting at its own content
   width, which means the row has ZERO free space at that viewport -- every pixel handed to the
   price at 1280 is a pixel taken out from under the words "Add to Cart". At 1920 the same button
   measures 281.73px for the same label, so there the surplus is real and large.

   flex-grow is therefore the whole mechanism, and there is deliberately no length in this rule:
   the price widens exactly as far as the row can afford and not one pixel further, at every
   viewport, with no breakpoint to maintain. Shrink stays 0 and the row stays nowrap, so the
   settled guarantee that the duration suffix never drops under the price is untouched.

   The share is a MINORITY share. A price is a readout and the button is the target, so the
   button keeps the larger part of any surplus; written as a named ratio rather than a bare
   number so it reads as a proportion and not as a length.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice:not([data-psc-span-host]) > .lpos-c-cta__pricepanel {
	--psc-price-share: 0.5;
	flex-grow: var(--psc-price-share) !important;
}

/* -------------------------------------------------------------------------------------
   ITEM 3 -- THE SLIDES CONTAINER OWNS ITS CHROME ONCE

   JD's annotation 3 points at the panel under the QTY row. It is ALREADY the slider: measured on
   live, the host carries 16 authored slides -- the description, seven ingredient benefits and
   eight FAQs -- with dot navigation, all of it shipped by an earlier pass. There was nothing to
   convert.

   What IS wrong is the documented double-outline hazard, and it is live right now: the host and
   the slide inside it are BOTH .lpos-c-panel instances, so both paint the gold 0.38 hairline at
   12px radius AND both paint the 30% black glass. Two concentric gold rectangles, and two
   translucent fills composing toward opaque -- the cumulative-opacity regression JD has rejected
   twice.

   THE HOST OWNS THE CHROME. It is the container that has to stay flush with the CTA row above
   and it was given the atomic panel class deliberately, so the inner layer is the one that
   yields. This is the same ruling the secondary column's group panel already makes one screen
   away: the GROUP owns the single glass fill and gold outline; the inner container atoms drop
   their own fill so the glass never stacks.

   The slide keeps its padding and its layout. Only the two chrome layers that were duplicated
   are switched off, so a slide moved out of this host still draws its own panel normally.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide {
	border-color: transparent !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;

	/*
	 * ...AND STOPS RESERVING THE SPACE IT NO LONGER PAINTS INTO (JD 2026-08-13).
	 *
	 * The rule above took this layer's ring and its glass away. Its padding stayed, and padding on a
	 * layer that paints nothing is an inset from an edge that is not drawn -- 16px of the reader's
	 * lines spent on an invisible boundary.
	 *
	 * BLOCK AXIS ONLY. The inline padding is deliberately untouched: taking it would widen the
	 * measure and re-wrap every authored slide, which would invalidate the line counts this pass
	 * measured and would be a second change wearing the first one's justification. Vertical is where
	 * the scarcity is.
	 *
	 * The reader still gets an inset from the visible edge -- the HOST's own padding, which is the
	 * one attached to the border that is actually drawn.
	 */
	padding-block: 0 !important;
}

/* -------------------------------------------------------------------------------------
   THE CALLOUT, SAME RULING, DIFFERENT AUTHOR

   P3b (2026-08-12) took the hairline, the glass and the shadow off this layer for the same
   reason: one ring per slide. It also left the padding behind, and this one costs another
   16px of the same budget.

   Measured on live before this was written: border-top-color transparent, background-color
   transparent, box-shadow none, at both viewports. It is switched off, and now it stops
   holding space open for what it is not drawing.

   The two selector forms match P3b's own, so the child and descendant cases stay together
   rather than drifting apart the next time one of them is edited.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide > .psc-slide__callout,
.lpos-blueprint .psc-slider-host .lpos-c-carousel__slide .psc-slide__callout {
	padding-block: 0 !important;
}

/* -------------------------------------------------------------------------------------
   ITEM 5 -- THE TITLE AND ITS SUBTITLE STOP TOUCHING

   JD: "add a few px space between the title and sub title".

   Measured: 2.39px, and it is not authored -- it is the subtitle's own margin-top: 2.4px, a
   relative default (0.15em of a 16px subtitle) rather than a spacing decision. The panel around
   it already DECLARES row-gap: 8px, and that declaration does nothing at all, because the panel
   is display: block. So the panel has been asking for --lpos-space-md the whole time and no
   layer was listening.

   Honouring the value the panel already declares, rather than minting a seventh opinion about
   what "a few px" means. Gap 2.39 -> 8.

   Keyed to the PAIR structurally -- a heading followed by its immediate sibling inside a title
   panel -- rather than to --display or to any one surface, because JD's line is "all changes
   apply app wide" and this pair renders in the Display heading, the secondary panel headings and
   every drawer title.
   ------------------------------------------------------------------------------------- */
.lpos-blueprint .lpos-c-title-panel > :is(h1, h2, h3, h4) + :is(h2, h3, h4, p) {
	margin-top: var(--lpos-space-md, 8px) !important;
}

/*
 * FR-49: STEP 2 FLIPBOOK MATCHES STEP 1 GEOMETRY.
 *
 * FR-49j: page field +1 icon-block each side; type-in jump; labeled page-turns.
 *
 * Coming Soon has no .lpos-col__media, so framework applyZoom never
 * rebuilds when the stage grows -- the book stays at the first (small)
 * box. Companion scales the mount to the settled stage (contain).
 * Transport: icon squares for zoom/download/fullscreen; wide prev /
 * page / next. Order is JS. Download stays authored-off. Tokens only.
 * Console-scoped. Magick8 is not named.
 */
.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) .lpos-c-carousel__nav,
.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) .lpos-c-carousel__dots,
.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) .lpos-c-carousel__dot,
.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) .lpos-c-coming {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	transform: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) .lpos-c-carousel__nav svg {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-media.-flip) {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body:has(.lpos-media.-flip):not(.lpos-feat__body--coming) {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	margin-block: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) {
	flex: 1 1 auto !important;
	height: 100% !important;
	min-height: 0 !important;
	overflow: hidden !important;
	margin-block: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) .lpos-c-carousel,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) .lpos-c-carousel__stage {
	flex: 1 1 auto !important;
	height: 100% !important;
	min-height: 0 !important;
	overflow: hidden !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) .lpos-c-carousel__slide:not(:has(.lpos-media.-flip)) {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) .lpos-c-carousel__slide:has(.lpos-media.-flip) {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: stretch !important;
	align-items: stretch !important;
	overflow: hidden !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	border: 0 !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming:has(.lpos-media.-flip) .lpos-col__media {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip {
	--psc-flip-icon-rung: var(--lpos-control-size, 46px);
	--psc-flip-icon-glyph: var(--lpos-icon-size, 26px);
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	min-height: 0 !important;
	flex: 1 1 auto !important;
	overflow: hidden !important;
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	row-gap: 0 !important;
	/* DOCUMENTS ARE READ, NOT ADMIRED (JD 2026-08-19: the PDF "is blurry because it is behind
	   2 other panels instead of inside the same primary content panel that other media shows
	   in"). --lpos-asset-alpha ghosts assets to 0.9 so the ambient motion shows through, which
	   is right for imagery and video and wrong for a page of text: at 0.9 the blurred backdrop
	   of the panel underneath bleeds through every line, which is the blur JD sees -- it was
	   never raster resolution. Documents get their own alpha, opaque by default, so the
	   flipbook sits IN the panel like the other media instead of floating over it. */
	opacity: var(--lpos-asset-alpha-doc, 1);
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-media__stage {
	width: 100% !important;
	aspect-ratio: auto !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below {
	--lpos-control-size: var(--psc-primary-bar-control);
	--lpos-icon-size: var(--psc-primary-bar-icon);
	--lpos-icon-size-sm: var(--psc-primary-bar-icon);
	--lpos-text-sm: var(--psc-primary-bar-text);
	flex: 0 0 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: var(--lpos-subpanel-pad, 4px) 0 0 0 !important;
	padding: var(--lpos-space-xs, 3px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn svg {
	width: var(--lpos-icon-size) !important;
	height: var(--lpos-icon-size) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below > .lpos-c-icon-btn:not(.lpos-pagination__navwide) {
	--lpos-control-size: var(--psc-flip-icon-rung);
	--lpos-icon-size: var(--psc-flip-icon-glyph);
	--lpos-icon-size-sm: var(--psc-flip-icon-glyph);
	flex: 0 0 var(--psc-flip-icon-rung) !important;
	width: var(--psc-flip-icon-rung) !important;
	min-width: var(--psc-flip-icon-rung) !important;
	max-width: var(--psc-flip-icon-rung) !important;
	height: var(--psc-flip-icon-rung) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide.lpos-c-icon-btn {
	position: relative !important;
	flex: 3.8 1 0 !important;
	width: auto !important;
	min-width: calc(2 * var(--lpos-control-size, 46px)) !important;
	max-width: none !important;
	height: var(--lpos-control-size, 46px) !important;
	justify-content: center !important;
	overflow: hidden !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide[data-a="prev"] {
	padding: 0 var(--lpos-space-sm, 5px) 0 var(--psc-flip-icon-rung, var(--lpos-control-size, 46px)) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide[data-a="next"] {
	padding: 0 var(--psc-flip-icon-rung, var(--lpos-control-size, 46px)) 0 var(--lpos-space-sm, 5px) !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide.lpos-c-icon-btn svg {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	flex: 0 0 auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide[data-a="prev"] svg {
	left: var(--lpos-space-xs, 3px) !important;
	right: auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide[data-a="next"] svg {
	right: var(--lpos-space-xs, 3px) !important;
	left: auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__navwide .psc-skip-label {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	font: 600 var(--lpos-text-sm, 14px) / 1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink, var(--lpos-ink));
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	pointer-events: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__count {
	flex: 2.4 1 0 !important;
	width: auto !important;
	min-width: calc(2.2 * var(--psc-primary-bar-control, 46px) + 2 * var(--psc-flip-icon-rung, var(--lpos-control-size, 46px))) !important;
	max-width: calc(2.2 * var(--psc-primary-bar-control, 46px) + 2 * var(--psc-flip-icon-rung, var(--lpos-control-size, 46px))) !important;
	height: var(--lpos-control-size, 46px) !important;
	box-sizing: border-box !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__count > input.lpos-pagination__jump {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	pointer-events: auto !important;
	cursor: text !important;
	width: auto !important;
	min-width: 4ch !important;
	max-width: none !important;
	flex: 0 1 auto !important;
	position: relative !important;
	z-index: 1 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below [data-a="dl"][aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

/*
 * DEC-CR-777YY0 — Console flipbook pages take the panel radius; Step chrome hugs control-size
 *
 * Console midcenter only. Other blueprints, YW0 sibling video transport,
 * and the flipbook pager under the book are not named. Framework not edited.
 *
 * PAGES. StPageFlip paints the book on absolutely-positioned canvas inside
 * .lpos-media__mount.stf__parent. Framework already declares
 * --lpos-radius-panel on mount / page / stf__parent / stf__item, but
 * overflow:hidden there is not !important and .stf__item uses
 * transform-style:preserve-3d, so page art squares the outer corners.
 * Radius + clip the SPREAD box (outer four corners). Individual leaves
 * stay square at the gutter so two rounded cards do not open a gap.
 * Portrait is the same box with all four corners.
 *
 * TOOLBAR. FR-39 remaps --lpos-control-size on .lpos-feat__actions to
 * --psc-primary-bar-control (leftover spare, ceiling +40). Skip height
 * then adds 2*subpanel-pad + 2*border. That is the tall Step strip
 * (Back | ADD TO CART | Next). Restore the house control atom. Do not
 * shrink below --lpos-control-size. Composer (.lpos-view__chathead) and
 * YW0 / FR-49 transport keep the grow budget.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-media__mount,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__parent,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__wrapper,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__block {
	border-radius: var(--lpos-radius-panel) !important;
	overflow: hidden !important;
	overflow: clip;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__parent canvas,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__block canvas,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip canvas {
	border-radius: inherit !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-media__page,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .stf__item {
	border-radius: 0 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) {
	--lpos-control-size: unset;
	--lpos-icon-size: unset;
	--lpos-icon-size-sm: unset;
	--lpos-text-sm: unset;
	align-items: center !important;
	min-height: 0 !important;
	padding-block: 0 !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > .lpos-c-skip-action,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > [data-psc-cta-host],
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) .lpos-feat__toolbar,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) .psc-center-cta {
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	align-self: center !important;
	padding-block: 0 !important;
}

@property --psc-outline-blur {
	syntax: "<length>";
	inherits: true;
	initial-value: 12px;
}

@keyframes psc-outline-breathe {
	0%,
	100% {
		--psc-outline-blur: 12px;
	}
	50% {
		--psc-outline-blur: 24px;
	}
}

/*
 * DEC-CR-777XA5 — Highlight is the FR-8 full accent outline plus glow breathe
 * DEC-CR-777XA4 — Get Started chase travels on offset-path (conic-from does not paint on the menu CTA)
 * DEC-CR-777XA3 — Get Started Highlight is a positioning context so the chase paints on the CTA
 * DEC-CR-777XA2 — Highlight ::after inherits the animated chase angle
 * DEC-CR-777XA1 — Highlight chase is a token-radius border stroke (no fill)
 * DEC-CR-777XA0 — Highlight is a chase on upcoming Process + primary Next; Active keeps the token glow
 *
 * Operator rejected XA4: a traveling dash is a stick, not an outline.
 * Next's masked conic wedge is the same family of defect (a traveling hot-spot).
 *
 * Reference atom measured live 1.0.201 on Cell Signals active Process thumb
 * (.psc-step[aria-pressed=true], 46x46): border 1px solid --lpos-accent,
 * radius --psc-panel-radius, box-shadow --lpos-accent-glow-sm, animation
 * none, glass interior. That is FR-8 rail active. XA5 copies those tokens
 * onto .psc-highlight (Get Started, Next, upcoming thumb) and the active
 * thumb. The hairline is the full accent rounded rect. Motion breathes
 * the glow blur from glow-sm (12px) to glow-lg (24px) over
 * --lpos-duration-loading via a registered length, so the WHOLE stroke
 * pulses even when box-shadow is important (rail FR-8). No traveling
 * dash. No conic wedge. No fill. Get Started keeps relative important
 * so framework menu CTA static does not win. Explore / Login stay
 * unhighlighted. Last Step / Process N<2 have no Highlight
 * (DEC-CR-777YN1).
 */
.lpos-blueprint--console .psc-highlight,
.lpos-blueprint--magick8 .psc-highlight,
.lpos-blueprint--console .lpos-rail--right .psc-step[aria-pressed="true"] {
	--psc-outline-duration: var(--lpos-duration-loading, 1.4s);
	--psc-outline-blur: 12px;
	--psc-outline-glow-sm: var(--lpos-accent-glow-sm);
	--psc-outline-glow-lg: var(--lpos-accent-glow-lg);
}

.lpos-blueprint--console .psc-highlight:not([data-psc-continue-locked]),
.lpos-blueprint--magick8 .psc-highlight:not([data-psc-continue-locked]),
.lpos-blueprint--console [data-lpos-center-next-action].psc-highlight:not([data-psc-continue-locked]),
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas > .lpos-menu__cta.lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).psc-highlight,
.lpos-blueprint--console .lpos-rail--right .psc-step.psc-highlight,
.lpos-blueprint--console .lpos-rail--right .psc-step[aria-pressed="true"] {
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--lpos-accent, var(--psc-gold)) !important;
	border-radius: var(--lpos-radius-panel, 10px);
	box-shadow: 0 0 var(--psc-outline-blur, 12px)
		color-mix(in srgb, var(--lpos-accent, var(--psc-gold)) 40%, transparent) !important;
	background-image: none !important;
	animation: psc-outline-breathe var(--psc-outline-duration, var(--lpos-duration-loading, 1.4s))
		ease-in-out infinite;
}

.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas > .lpos-menu__cta.lpos-c-cta__buy:not(.lpos-c-cta__buy--secondary).psc-highlight {
	position: relative !important;
}

.lpos-blueprint--console .lpos-rail--right .psc-step.psc-highlight:not([aria-pressed="true"]) {
	background-color: transparent !important;
}

.lpos-blueprint--console .lpos-rail--right .psc-step.psc-highlight:not([aria-pressed="true"])::before {
	content: none;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.lpos-blueprint--console .psc-highlight:not([data-psc-continue-locked]),
	.lpos-blueprint--magick8 .psc-highlight:not([data-psc-continue-locked]),
	.lpos-blueprint--console .lpos-rail--right .psc-step[aria-pressed="true"] {
		animation: none;
		box-shadow: var(
			--lpos-accent-glow-sm,
			0 0 12px color-mix(in srgb, var(--lpos-accent, var(--psc-gold)) 40%, transparent)
		) !important;
	}
}



/*
 * DEC-CR-777YV0 — Magick8 guest Dashboard phone + tablet geometry
 *
 * Operator 2026-08-14 (Galaxy S20 Ultra 412×915): guest Dashboard only.
 * Welcome-stack scoped so a nested Explore Console cannot inherit these tokens.
 * Phone gate 430. Tablet Magick8 is a Magick8-only max-width 1279 query — it
 * cannot match --console. No -tablet-* class (none exists). No Magick8-phone CPT.
 *
 * Logo: scale the existing fallback/mark; do not invent the tenant string.
 * Slide: one center 16:9 ~92vw on phone; thin neighbor peek on tablet (777YL1).
 * Chevrons overlay the stage; size stays --psc-magick8-nav-size (do not shrink).
 * Play chip stays on the stage (gold square via --lpos-play-btn-size). Clip the
 * YouTube preview box so their circular play cannot paint onto EXPLORE.
 * EXPLORE / GET STARTED grow, stay 50/50 inline. LOGIN is not selected.
 * Do not rewrite the YouTube iframe src (DEC-CR-777YT3). Flanks stay
 * pointer-events: none (already). Do not visually re-hide flanks (777YL0).
 */
@media (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		width: min(92vw, 100%);
		--psc-magick8-play-size: var(--lpos-play-btn-size, 80px);
		--psc-magick8-cta-min-h: calc(var(--lpos-control-size, 46px) + var(--lpos-pad, 14px));
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo {
		max-width: min(92vw, 100%);
		width: auto;
		overflow: hidden;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		display: block;
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) {
		position: relative;
		width: 100% !important;
		max-width: 100% !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		overflow: hidden !important;
		overflow: clip;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav {
		position: absolute !important;
		z-index: 20;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--prev {
		left: var(--lpos-gap, 8px);
		right: auto;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--next {
		right: var(--lpos-gap, 8px);
		left: auto;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-magick8__player,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__stage,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__stagev,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__embedwrap {
		overflow: hidden !important;
		overflow: clip;
		contain: paint;
		max-width: 100%;
		max-height: 100%;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-magick8__player,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__embedwrap {
		position: relative !important;
		width: 100% !important;
		height: 100% !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__big {
		width: var(--psc-magick8-play-size, var(--lpos-play-btn-size, 80px)) !important;
		height: var(--psc-magick8-play-size, var(--lpos-play-btn-size, 80px)) !important;
		max-width: 40% !important;
		max-height: 40% !important;
		border-radius: var(--lpos-radius-panel, 10px) !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		z-index: 15;
		box-sizing: border-box !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas {
		width: 100% !important;
		max-width: 100%;
		flex-direction: row !important;
		align-items: stretch !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-menu__cta {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		min-height: var(--psc-magick8-cta-min-h, var(--lpos-control-size, 46px)) !important;
		font-size: var(--lpos-text-lg, 20px) !important;
	}
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-logo-h: var(--lpos-text-lg, 20px);
		--psc-magick8-logo-w: min(72vw, 220px);
		--psc-m8-slide-span: 100%;
		--psc-m8-stage-ratio: 16 / 9;
		--psc-m8-peek: none;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo {
		max-width: min(92vw, var(--psc-magick8-logo-w));
		min-height: var(--psc-magick8-logo-h);
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		font-size: var(--psc-magick8-logo-h);
		max-width: 100%;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
		aspect-ratio: var(--psc-m8-stage-ratio, 16 / 9) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide {
		width: var(--psc-m8-slide-span, 100%) !important;
	}
}

@media (min-width: 431px) and (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-m8-slide-span: 88%;
		--psc-m8-stage-ratio: calc(16 / (0.88 * 9));
		--psc-m8-peek: thin;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		max-width: 100%;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
		aspect-ratio: var(--psc-m8-stage-ratio) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide {
		width: var(--psc-m8-slide-span, 88%) !important;
	}
}

/*
 * DEC-CR-777YV1 — Magick8 guest phone retune after 1.0.178 reject
 *
 * Operator rejected 1.0.178 overlay-on-stage. Welcome-stack (and Magick8
 * backdrop only). Phone gate 430. Do not name Console cells or LOGIN.
 * Do not rewrite the YouTube preview src. Do not re-hide flanks.
 *
 * Root cause of the dead backdrop: framework tenant-theme.css
 * `@media (max-width: 767px)` sets .lpos-blueprint__bgvideo-media { display:none }
 * and paints a poster. Companion unhides that layer on --magick8 only.
 */
@media (max-width: 767px) {
	.lpos-blueprint--magick8 > .lpos-blueprint__bgvideo .lpos-blueprint__bgvideo-media {
		display: block !important;
	}
}

@media (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) {
		display: grid !important;
		grid-template-columns: 1fr auto auto 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--lpos-gap, 8px);
		row-gap: var(--lpos-gap, 8px);
		align-items: center;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		z-index: 2;
		margin: 0;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--prev {
		grid-column: 2;
		grid-row: 2;
		left: auto !important;
		right: auto !important;
		justify-self: end;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--next {
		grid-column: 3;
		grid-row: 2;
		left: auto !important;
		right: auto !important;
		justify-self: start;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-menu__cta {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: var(--lpos-pad, 14px) !important;
		white-space: nowrap !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-magick8__bicon {
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-logo-h: clamp(var(--lpos-text-xl, 24px), 8.6vw, calc(0.88 * var(--lpos-logo-h, 46px)));
		--psc-magick8-logo-w: min(92vw, 100%);
		--psc-magick8-play-size: var(--lpos-control-size, 46px);
		--psc-magick8-cta-min-h: var(--lpos-control-size, 46px);
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo {
		max-width: min(92vw, 100%);
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		font-size: var(--psc-magick8-logo-h);
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-menu__cta {
		font-size: var(--lpos-text-sm, 14px) !important;
		letter-spacing: 0.02em !important;
		padding-inline: var(--lpos-gap, 8px) !important;
		min-height: var(--psc-magick8-cta-min-h, var(--lpos-control-size, 46px)) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__big {
		width: var(--psc-magick8-play-size, var(--lpos-control-size, 46px)) !important;
		height: var(--psc-magick8-play-size, var(--lpos-control-size, 46px)) !important;
		max-width: 22% !important;
		max-height: 22% !important;
		left: auto !important;
		top: auto !important;
		right: var(--lpos-gap, 8px) !important;
		bottom: var(--lpos-gap, 8px) !important;
		transform: none !important;
	}
}

/*
 * DEC-CR-777YV1b — chevrons fully off the film; icon-text air
 *
 * 1.0.179 left framework translateY(-50%) on the pager, so the below-stage
 * buttons still ate the bottom of the 16:9. Kill the transform. Shrink the
 * 46px glyph host so gap: --lpos-pad is real air, not box-to-box leftovers.
 * Phone welcome only for the bicon shrink. Pager transform is the 1279 query.
 */
@media (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav {
		transform: none !important;
		margin-top: var(--lpos-gap, 8px);
	}
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-bicon-size: var(--lpos-icon-size-sm, 24px);
		--psc-yt-preview-scale: 2.35;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-magick8__bicon {
		width: var(--psc-magick8-bicon-size, var(--lpos-icon-size-sm, 24px)) !important;
		height: var(--psc-magick8-bicon-size, var(--lpos-icon-size-sm, 24px)) !important;
		margin-inline: var(--lpos-gap, 8px) !important;
	}
}

/*
 * DEC-CR-777YV1c — muted autoplay stage is the picture only
 *
 * Operator: extra items on the player when the muted loop loads must not be
 * there. Gold play chip, hoverplay, timeline, and in-stage transport are not
 * default chrome on a playing loop. Play returns only when autoplay failed
 * ([data-psc-loop-failed]). No second plate. No iframe src rewrite (777YT3).
 * YouTube edge chrome stays the existing scale/crop + pointer-events none.
 * Carousel prev/next stay off the picture (YV1 / YV1b). Backdrop unhide on
 * --magick8 already beats tenant-theme.css display:none at 767; tenant-bg-video.js
 * only swaps a broken <video> and is a no-op when PHP already printed an iframe.
 */
@media (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media:has(iframe.lpos-media__preview) .lpos-media__big,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media:has(iframe.lpos-media__preview) .lpos-media__hoverplay,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media:has(iframe.lpos-media__preview) .lpos-media__timeline,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media:has(iframe.lpos-media__preview) .lpos-media__bar,
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media.-playing .lpos-media__big {
		display: none !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media[data-psc-loop-failed] .lpos-media__big {
		display: flex !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-yt-preview-scale: 2.35;
	}
}

/*
 * DEC-CR-777YV3 — Magick8 mobile welcome chrome + desktop stacked slider
 *
 * Phone gate 430. Desktop stacked at min-width 1280. Welcome-stack only.
 * Console cells and Vimeo binds are not named. Framework not edited.
 *
 * FADE: framework `.lpos-c-carousel__stage` mask-image 90deg ramp
 * (transparent→#000 16% / 84%→transparent) in console-tokens.css. Phone
 * `--psc-m8-slide-span: 100%` and desktop stacked ~88% put the active
 * slide under that ramp. Same pairing as `.psc-slider-host`: wide slide
 * + mask:none. Do not re-hide flanks (777YL1).
 *
 * PAGER (phone): 50/50 of the stack, height --lpos-control-size (shorter
 * than the 1.6× squares). Icons --lpos-icon-size-sm. Prev flex-start,
 * next flex-end (777YS0). Icon-only chevrons sit at the start / end.
 *
 * CTAs (phone): one column, full width. LOGIN is a stack sibling, not
 * inside `.lpos-magick8__ctas`. Authored labels. Token glass / gold hairline.
 *
 * DESKTOP SLIDER: engine carRender is STRAIGHT FILMSTRIP
 * (`STEP = st.w * 0.56 + 12`, no overlap). First paint is that filmstrip.
 * F12→mobile (100% slides) → seek → desktop leaves a stale mobile
 * translate3d because carHeld (10s) skips the next render — that leftover
 * LOOKS stacked. Desktop welcome slides use the stacked span so first
 * paint overlaps. Companion resize restack clears `_lposCar.w` and
 * retargets pos so post-F12 rematches first paint.
 */
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
	-webkit-mask-image: none !important;
	mask-image: none !important;
	-webkit-mask: none !important;
	mask: none !important;
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-nav-h: var(--lpos-control-size, 46px);
		--psc-magick8-nav-icon: var(--lpos-icon-size-sm, 24px);
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) {
		grid-template-columns: 1fr 1fr !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav {
		width: 100% !important;
		max-width: none !important;
		height: var(--psc-magick8-nav-h, var(--lpos-control-size, 46px)) !important;
		min-height: var(--psc-magick8-nav-h, var(--lpos-control-size, 46px)) !important;
		display: inline-flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
		padding-inline: calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px)) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--prev {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: stretch !important;
		justify-content: flex-start !important;
		left: auto !important;
		right: auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--next {
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: stretch !important;
		justify-content: flex-end !important;
		left: auto !important;
		right: auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav svg {
		width: var(--psc-magick8-nav-icon, var(--lpos-icon-size-sm, 24px)) !important;
		height: var(--psc-magick8-nav-icon, var(--lpos-icon-size-sm, 24px)) !important;
		flex: 0 0 auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas {
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
		align-items: stretch !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-menu__cta {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > a.lpos-magick8__login {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		min-height: var(--psc-magick8-cta-min-h, var(--lpos-control-size, 46px)) !important;
		padding-inline: var(--lpos-gap, 8px) !important;
		font-size: var(--lpos-text-sm, 14px) !important;
		font-weight: 700 !important;
		letter-spacing: 0.02em !important;
		color: var(--lpos-ink, var(--lpos-ink)) !important;
		background: var(--lpos-glass-panel, linear-gradient(180deg, rgba(30, 42, 66, 0.34), rgba(16, 24, 40, 0.45))) !important;
		border-color: color-mix(
			in srgb,
			var(--lpos-accent, var(--psc-gold, var(--lpos-accent))) var(--lpos-border-alpha-2, 55%),
			transparent
		) !important;
		-webkit-backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
		backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
	}
}

@media (min-width: 1280px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-m8-slide-span: 88%;
		--psc-m8-flank-span: 70%;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide[data-offset="0"],
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide:not([data-offset]) {
		width: var(--psc-m8-slide-span, 88%) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide[data-offset]:not([data-offset="0"]) {
		width: var(--psc-m8-flank-span, 70%) !important;
	}
}

/*
 * DEC-CR-777YW0 — Console video transport is a sibling panel under the film
 *
 * Operator: on the single primary content display the video toolbar must not
 * live in the same panel as the video. It is its own .lpos-c-panel row
 * beneath the 16:9, still inside .lpos-cell--midcenter. Play chip stays on
 * the film. Console midcenter only. Magick8 welcome / backdrop / phone
 * chrome are not selected. Flipbook pagination stays under the book.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media.-video:not(.-flip) {
	width: var(--psc-media-fit-w, 100%) !important;
	max-width: 100% !important;
	align-self: center !important;
	flex: 0 0 auto !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: stretch !important;
	gap: var(--lpos-space-sm, 5px) !important;
	flex: 0 0 auto !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	top: auto !important;
	width: var(--psc-media-fit-w, 100%) !important;
	max-width: 100% !important;
	align-self: center !important;
	margin: var(--lpos-subpanel-pad, 4px) 0 0 0 !important;
	z-index: auto !important;
	box-sizing: border-box !important;
	padding: var(--lpos-space-xs, 3px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	/* Chrome DELETED (YV8 audit fix 2, 2026-08-18): the XD0 block later in this file repaints
	 * the full recipe for this same selector and wins on source order, so the copy here was
	 * shipped dead weight — measured by the audit, confirmed adversarially. Layout and the
	 * bar-scale tokens below are the live cargo. */
	--lpos-control-size: var(--psc-primary-bar-control);
	--lpos-icon-size: var(--psc-primary-bar-icon);
	--lpos-icon-size-sm: var(--psc-primary-bar-icon);
	--lpos-text-sm: var(--psc-primary-bar-text);
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport::before,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
	background: none !important;
	height: 0 !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .psc-media-transport .lpos-c-icon-btn svg {
	width: var(--lpos-icon-size) !important;
	height: var(--lpos-icon-size) !important;
}

/*
 * DEC-CR-777YV4 — Magick8 desktop welcome center slide is 16:9 inside the stage
 *
 * Welcome-stack only. Console cells, Vimeo binds, phone YV3 chrome, and
 * the Console video sibling toolbar (777YW0) are not named. Framework
 * not edited.
 *
 * YV3 set desktop `--psc-m8-slide-span: 88%` so carRender's STEP
 * (st.w * 0.56 + 12) overlaps. Framework slides are `width` ×
 * `aspect-ratio: 16/9`. The Magick8 stage is sized for a 56% card
 * (`aspect-ratio: 3.175` = width / (0.56 * 9/16)), 1600×520 on 1920.
 * 88% of 1600 is 1408; 1408 × 9/16 = 792, which overflow:hidden clips
 * to a 1408×520 strip (~2.7:1). That is the crushed desktop film.
 *
 * Fix: restore the 56% center span so the 16:9 box fits the stage
 * (~896×504). Keep flanks wider than STEP (`--psc-m8-flank-span: 88%`)
 * so they still sit behind the center (overlapR > 8, not a filmstrip
 * gap). YV3's width rules already read these tokens. Do not re-hide
 * flanks. Do not restore the stage mask.
 */
@media (min-width: 1280px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-m8-slide-span: 56%;
		--psc-m8-flank-span: 88%;
	}
}

/*
 * DEC-CR-777YV5 — Magick8 mobile welcome play chip shows until played
 *
 * Welcome-stack only. Console cells, the secondary column, Vimeo binds,
 * and 777YW0 are not named. Framework not edited. Desktop 16:9 tokens
 * (777YV4) stay. Desktop play keeps the existing play-btn-size token.
 *
 * YV1c hid `.lpos-media__big` whenever a preview iframe was present
 * (`max-width: 1279`). That is not desktop: desktop keeps OUR chip
 * over the muted loop until the user plays, then `.lpos-media.-playing`
 * hides it. Undo only the iframe-present hide. Keep hoverplay / timeline
 * / bar hidden on the muted loop. Keep `-playing` hide.
 *
 * Phone size: --lpos-control-size-sm (framework phone control, 36).
 * Not a third size. Tablet 431-1279 uses --lpos-control-size (46) so
 * lifting the hide does not resurrect the 80px chip on a short stage.
 * Centered on the 16:9 like desktop (not the YV1 corner).
 */
@media (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media:has(iframe.lpos-media__preview):not(.-playing) .lpos-media__big {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media.-playing .lpos-media__big {
		display: none !important;
	}
}

@media (min-width: 431px) and (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-play-size: var(--lpos-control-size, 46px);
	}
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-play-size: var(--lpos-control-size-sm, 36px);
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__big {
		width: var(--psc-magick8-play-size, var(--lpos-control-size-sm, 36px)) !important;
		height: var(--psc-magick8-play-size, var(--lpos-control-size-sm, 36px)) !important;
		max-width: 22% !important;
		max-height: 22% !important;
		left: 50% !important;
		top: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
	}
}

/*
 * DEC-CR-777YV6 — Magick8 tablet welcome pager, taller CTAs, logo gap, flank radius
 *
 * Welcome-stack only. Console cells, Vimeo binds, phone YV3 chrome, desktop
 * 16:9 tokens (777YV4), play-until-played (777YV5), and the Console video
 * sibling toolbar (777YW0) are not named. Framework not edited.
 *
 * TABLET (431-1279). Phone YV3 already owns ≤430 (50/50 pager, stacked CTAs,
 * 36 play). Desktop ≥1280 stays stacked 16:9 + 80 play. This window is the
 * tablet band the operator circled on iPad-class portrait.
 *
 * PAGER: YV1 left two auto-sized squares in grid columns 2/3 (the 1.6×
 * --psc-magick8-nav-size boxes, ~73px, icons centered). Same law as phone
 * YV3 / DEC-CR-777YS0: 50/50 of the stack, prev icon at the start of its
 * half, next icon at the end. Height stays --lpos-control-size (not the
 * old 73px squares). Icons --lpos-icon-size-sm, smaller than desktop
 * gutter 1.6×.
 *
 * CTAs: keep the tablet row (Explore | Get Started 50/50, Login under).
 * Height steps one pad rung above YV0's control+pad (60) via
 * control-size + 2× --lpos-pad. Login gets the same height and the token
 * glass / gold hairline. Authored labels stay.
 *
 * LOGO: YV0 overflow:hidden + line-height 1 clips "Psychospiritualist"
 * descenders into the 16:9 top edge. Unclip. Air below the mark is
 * --lpos-control-size (a control/gap token), not a magic px. Do not
 * shrink the wordmark.
 *
 * FLANK RADIUS (measured live 1.0.186). The carousel item
 * .lpos-c-panel.lpos-c-carousel__slide already computes
 * --lpos-radius-panel as 12px + overflow:hidden. The node that does
 * NOT is .lpos-m8slide (absolute inset:0, overflow:visible,
 * border-radius 0) -- the composite product fill on prev/next. Center
 * looks rounded because its Vimeo embedwrap carries the nested panel
 * radius; flanks peek the m8slide's square media/gradients. Token is
 * --psc-panel-radius -> --lpos-radius-panel (house panel atom, not a
 * new px). Clip .lpos-m8slide and inner media to inherit. Phone +
 * desktop + tablet -- anywhere neighbors show. No clip-path. Flanks stay
 * pointer-events: none. Play chip stays YV5.
 */
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide {
	border-radius: var(--lpos-radius-panel, 10px) !important;
	overflow: hidden !important;
}

.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__stagepane,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__thumb,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__player,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__imgpanel,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__stage,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__stagev,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__embedwrap,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__imgpanel img,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide iframe,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide video {
	border-radius: inherit !important;
	overflow: hidden !important;
}

@media (min-width: 431px) and (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-nav-h: var(--lpos-control-size, 46px);
		--psc-magick8-nav-icon: var(--lpos-icon-size-sm, 24px);
		--psc-magick8-cta-min-h: calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px));
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo {
		overflow: visible !important;
		margin-bottom: var(--lpos-control-size, 46px) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		overflow: visible !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) {
		grid-template-columns: 1fr 1fr !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav {
		width: 100% !important;
		max-width: none !important;
		height: var(--psc-magick8-nav-h, var(--lpos-control-size, 46px)) !important;
		min-height: var(--psc-magick8-nav-h, var(--lpos-control-size, 46px)) !important;
		display: inline-flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
		padding-inline: calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px)) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--prev {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: stretch !important;
		justify-content: flex-start !important;
		left: auto !important;
		right: auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav--next {
		grid-column: 2 !important;
		grid-row: 2 !important;
		justify-self: stretch !important;
		justify-content: flex-end !important;
		left: auto !important;
		right: auto !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__nav svg {
		width: var(--psc-magick8-nav-icon, var(--lpos-icon-size-sm, 24px)) !important;
		height: var(--psc-magick8-nav-icon, var(--lpos-icon-size-sm, 24px)) !important;
		flex: 0 0 auto !important;
		position: static !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas {
		flex-direction: row !important;
		width: 100% !important;
		max-width: 100% !important;
		align-items: stretch !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-magick8__ctas .lpos-menu__cta {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		width: auto !important;
		min-height: var(--psc-magick8-cta-min-h, calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px))) !important;
		height: var(--psc-magick8-cta-min-h, calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px))) !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > a.lpos-magick8__login {
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
		min-height: var(--psc-magick8-cta-min-h, calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px))) !important;
		height: var(--psc-magick8-cta-min-h, calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px))) !important;
		padding-inline: var(--lpos-gap, 8px) !important;
		font-size: var(--lpos-text-lg, 20px) !important;
		font-weight: 700 !important;
		letter-spacing: 0.02em !important;
		color: var(--lpos-ink, var(--lpos-ink)) !important;
		background: var(--lpos-glass-panel, linear-gradient(180deg, rgba(30, 42, 66, 0.34), rgba(16, 24, 40, 0.45))) !important;
		border-color: color-mix(
			in srgb,
			var(--lpos-accent, var(--psc-gold, var(--lpos-accent))) var(--lpos-border-alpha-2, 55%),
			transparent
		) !important;
		-webkit-backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
		backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
	}
}

/*
 * DEC-CR-777XB0 — Console under-media bars hug --lpos-control-size
 *
 * Console midcenter only. Magick8 guest is not selected. Framework not edited.
 * YY0 page radius, YW0 sibling dock, and the 46px Step chrome atom stay.
 *
 * YY0 un-grew the Step chrome (Back | Add to Cart | Next) by unsetting
 * FR-39's --psc-primary-bar-control remap and zeroing padding-block. The
 * under-media family still remaps that token and still has padding-block
 * (FR-28 / YW0 space-xs, framework flip subpanel pad). Buttons stay the
 * house atom; outer chrome is taller than the bar above.
 *
 * Same hug, same token, three hosts: YW0 sibling video transport under
 * .lpos-feat__body, in-media .psc-media-transport (3D / adopted), and the
 * flip pagination row. Height saved returns to primary media via the
 * existing measured-bar sizer. Do not grow the seam into empty gap.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
	--lpos-control-size: unset;
	--lpos-icon-size: unset;
	--lpos-icon-size-sm: unset;
	--lpos-text-sm: unset;
	align-items: center !important;
	min-height: 0 !important;
	height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	padding-block: 0 !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__count,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > button,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > a {
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
	align-self: center !important;
	padding-block: 0 !important;
	box-sizing: border-box !important;
}

/*
 * DEC-CR-777XD0 — Console under-media transport is one glass panel plus token controls
 *
 * Console midcenter only. Magick8 guest is not selected. Framework not edited.
 * XA5 Highlight, XB0 46px hug, and YW0 sibling dock stay.
 *
 * FR-28 / YW0 painted a gold hairline on the outer bar AND on every inner
 * icon-btn (transparent fill, control-radius 8, space-sm gap, flex:1 flush).
 * That is a packed gold grid, not the one glass panel + token controls used
 * on Back | Add to Cart | Next and Process thumbs.
 *
 * Same atom as the Step skip / FR-14 spanbar / Process thumbs:
 * outer bar = --psc-panel-bg / --lpos-glass-panel, --psc-panel-radius,
 * --lpos-border-width. Buttons = --psc-nested-bg, same radius and hairline.
 * Gap is --lpos-gap (the Step chrome token), not packed flush.
 * Play keeps the wider flex share with the SAME chrome recipe.
 * Height stays --lpos-control-size (XB0). Composer / Magick8 not named.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
	gap: var(--lpos-gap) !important;
	padding-inline: var(--lpos-gap) !important;
	padding-block: 0 !important;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__count,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > button,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > a {
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
	background: var(--lpos-glass-2) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-sm) !important;
	backdrop-filter: var(--lpos-blur-sm) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn:hover,
.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn:focus-visible,
.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn[aria-pressed="true"],
.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn.-on,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn:hover,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn:focus-visible,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > button:hover,
.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > a:hover {
	border-color: var(--lpos-accent, var(--psc-gold)) !important;
	box-shadow: none !important;
}


/*
 * DEC-CR-777YV7 — Magick8 welcome slides clip painted pixels to panel radius
 *
 * YV6 set computed 12px on .lpos-m8slide via inherit. Live 1.0.190 still
 * paints square flank corners. Measured 1920: stage is 1600x520 @ (160,247)
 * radius 0 overflow hidden. Flanks are 1323x744 @ x=-610 / 1206, so the
 * VISIBLE peek silhouette is the stage's rectangular clip, not the slide
 * box. Center 896x504 is inset and already paints round. YV6 inherit on
 * .lpos-m8slide__thumb walks through .lpos-m8slide__side (radius 0) and
 * zeroes the thumb. Token directly. Clip the stage (the node that owns
 * the peek pixels) plus slides / m8slide / media. overflow:clip as 777YY0.
 * Welcome-stack only. No clip-path. Flanks stay pointer-events:none.
 * Play chip / Vimeo / stacked 16:9 untouched. Framework not edited.
 */
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__stage {
	border-radius: var(--lpos-radius-panel) !important;
	overflow: hidden !important;
	overflow: clip;
}

.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide {
	border-radius: var(--lpos-radius-panel) !important;
	overflow: hidden !important;
	overflow: clip;
}

.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__main,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__side {
	overflow: hidden !important;
	overflow: clip;
}

.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__stagepane,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__thumb,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__player,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__imgpanel,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__stage,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__stagev,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-media__embedwrap,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-magick8__imgpanel img,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide .lpos-m8slide__thumb img,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide iframe,
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-c-carousel__slide video {
	border-radius: var(--lpos-radius-panel) !important;
	overflow: hidden !important;
	overflow: clip;
}

/*
 * DEC-CR-777YV8 — Magick8 tablet pager matches CTA height; phone play keeps OUR chrome
 *
 * Welcome-stack only. Console cells, Highlight XA0, under-media XB0, YV7
 * stage radius, YW0 sibling toolbar, and YY0 Step chrome are not named.
 * Framework not edited. Desktop 80 play and 16:9 stack stay.
 *
 * TABLET PAGER (431-1279). YV6 set --psc-magick8-nav-h to
 * --lpos-control-size (46). Operator: prev/next are too thin vs Explore /
 * Get Started / Login. Point the existing nav-h token at the same calc
 * the tablet CTAs already use (control-size + 2 * --lpos-pad). Keep 50/50
 * width and YS0 start/end icon alignment. Phone ≤430 pager stays 46.
 *
 * PHONE PLAY CHROME (≤430). YV5 sized the chip to --lpos-control-size-sm
 * (36) and unhid it until played, but did not restyle the family.
 * Framework tokens.css paints glass + tint hairline + muted 32px glyph;
 * on a 36 box that reads as a white triangle in a translucent square.
 * Reassert OUR play family: accent/gold hairline (same mix as Magick8
 * CTAs), --lpos-radius-panel, --lpos-glass-panel, accent glyph. Icon
 * steps to --lpos-icon-size-sm so the chrome can read. Tablet play stays
 * 46. Desktop ≥1280 stays the existing 80 play token. YV5 until-played
 * hide stays. Do not re-hide on iframe-present.
 */
@media (min-width: 431px) and (max-width: 1279px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		--psc-magick8-nav-h: var(--psc-magick8-cta-min-h, calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-pad, 14px)));
	}
}

@media (max-width: 430px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__big {

		border-radius: var(--lpos-radius-panel, var(--lpos-radius-panel, 10px)) !important;
		background: var(--lpos-glass-panel) !important;
		-webkit-backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
		backdrop-filter: var(--lpos-blur-md, blur(16px) saturate(140%)) !important;
		border: var(--lpos-border-width, 1px) solid color-mix(
			in srgb,
			var(--lpos-accent, var(--psc-gold, var(--lpos-accent))) var(--lpos-border-alpha-2, 55%),
			transparent
		) !important;
		color: var(--lpos-accent, var(--psc-gold, var(--lpos-accent))) !important;
		box-shadow: none !important;
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] > .lpos-c-carousel:not(.psc-slider) .lpos-media__big svg {
		width: var(--lpos-icon-size-sm, 24px) !important;
		height: var(--lpos-icon-size-sm, 24px) !important;
		color: var(--lpos-accent, var(--psc-gold, var(--lpos-accent))) !important;
		stroke: currentColor !important;
	}
}
/*
 * DEC-CR-777XM0 — archive secondary: hide 1-step connector; 50/50 toggles; drop featured+spanbar; listing fills leftover
 *
 * Console archive Displays only (card grid OR Coming Soon slider). Magick8
 * Guest Dashboard is a different root and is not selected. Info peek
 * ([data-psc-archive-peek]) and product singles (no archive/coming primary)
 * keep featured media + the three-icon spanbar.
 *
 * 1. Progress rail connector: the framework paints .lpos-rail--right::before
 *    the full rail length. With 0–1 Step thumbs that is a dangling hairline.
 *    Hide the pseudo; keep the rail and the remaining icon. Two or more
 *    .psc-step siblings restore the token line the framework already draws.
 * 2. What's Next / What's New (or any two toggle pair) are 50/50 inline —
 *    flex: 1 1 0, min-width 0, width 100% row, same atom as other 50/50 pairs.
 * 3. Featured still (empty well / product poster / hover-nav host) and the
 *    three-icon spanbar are display:none — out of flow, not visibility-hidden.
 * 4. The leftover listing/content panel fills the remaining column height.
 *    Token glass/radius already live on the column; no extra featured stack.
 */
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-archive-secondary]) .lpos-rail--right[data-psc-steps="0"]::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-rail--right[data-psc-steps="0"]::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-rail--right[data-psc-steps="0"]::before,
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-archive-secondary]) .lpos-rail--right[data-psc-steps="1"]::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-rail--right[data-psc-steps="1"]::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-rail--right[data-psc-steps="1"]::before,
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-archive-secondary]) .lpos-rail--right:not(:has(.psc-step ~ .psc-step))::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-rail--right:not(:has(.psc-step ~ .psc-step))::before,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-rail--right:not(:has(.psc-step ~ .psc-step))::before {
	content: none !important;
	width: 0 !important;
	background: none !important;
	background-image: none !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]),
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) {
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	height: 100% !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] > .lpos-col[data-lpos-view-host="midright"],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) > .lpos-col[data-lpos-view-host="midright"],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) > .lpos-col[data-lpos-view-host="midright"],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] > .lpos-col,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) > .lpos-col,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) > .lpos-col {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	align-content: stretch !important;
	align-items: stretch !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta:not(:has([data-psc-toggle-row])),
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])),
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])) {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	grid-auto-rows: auto !important;
	align-content: start !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-toggle-row],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-toggle-row],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-toggle-row],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__tabs,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tabs,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tabs,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__buytabs,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__buytabs,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__buytabs,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-buytoggle,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto !important;
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: 100% !important;
	align-items: stretch !important;
	gap: var(--lpos-gap, 8px);
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-toggle-row] > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-toggle-row] > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-toggle-row] > *,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__tabs > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tabs > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tabs > *,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__buytabs > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__buytabs > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__buytabs > *,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-buytoggle > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle > *,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle > *,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-lpos-buytab],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-lpos-buytab],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-lpos-buytab],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__tab,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tab,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__tab,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-buytoggle__opt,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle__opt,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-buytoggle__opt {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__media,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__media,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__media,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-media-image-wrap--empty,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-media-image-wrap--empty,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-media-image-wrap--empty,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-player--hover-nav,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-player--hover-nav,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-player--hover-nav,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-spanbar,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-spanbar,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-spanbar,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-spanbar],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-spanbar],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) [data-psc-spanbar],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__qtyprice,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__qtyprice,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__qtyprice,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-qty-cart,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-qty-cart,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-qty-cart,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta__info[data-psc-span-panel],
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__info[data-psc-span-panel],
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta__info[data-psc-span-panel] {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	flex: 0 0 0 !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host--listing,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host--listing,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host--listing,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta > .psc-slider,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider-host,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider-host,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider-host,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .lpos-c-cta:not(:has([data-psc-toggle-row])) > .psc-slider {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-self: stretch !important;
	border-radius: var(--lpos-radius-panel, 10px);
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host > .psc-slider,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host > .psc-slider,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host .lpos-c-carousel__stage,
.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host .lpos-c-carousel__stage,
.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid]) .lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary]) .psc-slider-host .lpos-c-carousel__stage {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}

/*
 * DEC-CR-777XT4 — product singles keep secondary. Do not hide the midright
 * host (Ask parks children inside it). Archive XM0 / :has(grid) must not
 * display:none featured media, hover-nav, or the buy-box on mode=single.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] {
	opacity: 1 !important;
	visibility: visible !important;
}

.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__media,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-player--hover-nav,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__actionbar,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__qtyprice,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-qty-cart,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta > [data-lpos-add-to-cart],
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__info {
	display: revert !important;
	height: revert !important;
	min-height: revert !important;
	max-height: revert !important;
	margin: revert !important;
	padding: revert !important;
	overflow: revert !important;
	flex: revert !important;
}

/*
 * DEC-CR-777XN0 — hide Meow / AI Engine float on archive-empty secondary only.
 * Measured live 1.0.212 Shop empty: `.mwai-trigger.mwai-open-button` 64×70.
 * Info peek ([data-psc-archive-peek]) and product singles are not selected.
 * Does not wire Chat.
 */
.lpos-blueprint--console .mwai-trigger,
.lpos-blueprint--console .mwai-open-button,
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-archive-secondary]) .mwai-trigger,
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-archive-secondary]) .mwai-open-button,
html[data-psc-ask-open="1"] .mwai-trigger,
html[data-psc-ask-open="1"] .mwai-open-button {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/*
 * DEC-CR-777XR0 — archive primary fills like Shop. One card atom.
 * FR-27 centering leaked onto archive bodies and shrink-wrapped the
 * Cell Signals 4×2 product grid. Coming Soon (--coming) stays a slider.
 */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--archive {
	align-items: stretch !important;
	justify-content: stretch !important;
	flex-direction: column !important;
}
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--archive > .lpos-c-archive-grid,
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body--archive[data-psc-ask-host] {
	width: 100% !important;
	flex: 1 1 auto !important;
	min-width: 0;
	min-height: 0;
	height: 100%;
	align-self: stretch;
}


/*
 * DEC-CR-777XQ0 — App-wide Console chrome: skip row emptied; Back/plus/tabs/Next
 * live in the top tab tray; inactive tabs carry a right chevron; under-media
 * transport uses more internal pad.
 *
 * Console Displays only for Back/Next/plus/skip-row. Magick8 welcome CTAs are
 * not selected. Chevrons apply to any `.psc-crumb` (Explore guest trail too).
 * XE0 plus-right-dock is overridden: plus sits after Back, before crumbs.
 * XD0 glass atom and XB0 46px hug stay; gap/pad step to --lpos-panel-pad.
 * Framework not edited. No gold hex.
 */
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > [data-lpos-center-prev-action],
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > [data-lpos-center-next-action],
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > .psc-center-cta,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > [data-psc-cta-host],
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:not(.lpos-view__chathead) > .lpos-c-skip-action {
	display: none !important;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead),
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions[data-psc-skip-empty]:not(.lpos-view__chathead) {
	min-height: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	box-sizing: border-box !important;
	gap: var(--lpos-gap) !important;
	padding: 0 var(--lpos-gap) !important;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs {
	--psc-tab-min: calc(4 * var(--lpos-control-size, 46px));
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action],
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-back] {
	order: 0 !important;
	flex: 0 0 auto !important;
	width: var(--lpos-control-size, 46px) !important;
	min-width: var(--lpos-control-size, 46px) !important;
	max-width: var(--lpos-control-size, 46px) !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action] .psc-skip-label,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-back] .psc-skip-label {
	display: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action] svg,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-back] svg {
	position: static !important;
	width: var(--lpos-icon-size-sm, 24px) !important;
	height: var(--lpos-icon-size-sm, 24px) !important;
	flex: 0 0 auto !important;
	transform: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"] {
	order: 1 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex: 0 0 auto !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
	order: 2 !important;
	flex: 1 1 var(--psc-tab-min, calc(4 * var(--lpos-control-size, 46px))) !important;
	min-width: var(--psc-tab-min, calc(4 * var(--lpos-control-size, 46px))) !important;
	max-width: calc(6 * var(--lpos-control-size, 46px)) !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb {
	display: grid !important;
	grid-template-columns: var(--lpos-icon-size-sm, 24px) minmax(0, 1fr) var(--lpos-icon-size-sm, 24px);
	align-items: center !important;
	justify-content: stretch !important;
	column-gap: 0 !important;
	position: relative;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb .lpos-c-icon-btn__text {
	grid-column: 2;
	justify-self: stretch;
	text-align: center !important;
	width: auto !important;
	max-width: none;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb:not([aria-current="page"])::after {
	content: "" !important;
	grid-column: 3;
	justify-self: end;
	align-self: center;
	width: var(--lpos-icon-size-sm, 24px);
	height: var(--lpos-icon-size-sm, 24px);
	background-color: var(--lpos-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb__chev {
	grid-column: 3;
	justify-self: end;
	align-self: center;
	width: var(--lpos-icon-size-sm, 24px);
	height: var(--lpos-icon-size-sm, 24px);
	display: block;
	color: var(--lpos-ink);
	pointer-events: none;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb:has(.psc-crumb__chev)::after {
	content: none !important;
	display: none !important;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb[aria-current="page"] .psc-crumb__chev {
	display: none !important;
}

.lpos-blueprint .lpos-topbar__panel--tabs .psc-crumb[aria-current="page"]::after {
	content: none !important;
	display: none !important;
	width: 0;
	height: 0;
	-webkit-mask-image: none;
	mask-image: none;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action],
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] {
	order: 3 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: calc(2 * var(--lpos-control-size, 46px)) !important;
	max-width: none !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: var(--lpos-space-sm, 5px) !important;
	padding-inline: var(--lpos-space-md, 8px) calc(var(--lpos-subpanel-pad, 6px) + var(--lpos-space-sm, 5px)) !important;
	border-style: solid !important;
	border-width: var(--lpos-border-width, 1px) !important;
	border-color: var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action] svg,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] svg {
	position: static !important;
	width: var(--lpos-icon-size-sm, 24px) !important;
	height: var(--lpos-icon-size-sm, 24px) !important;
	flex: 0 0 auto !important;
	transform: none !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action] .psc-skip-label,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] .psc-skip-label {
	width: auto !important;
	flex: 0 1 auto !important;
	text-align: end !important;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action][aria-disabled="true"],
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action][aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action]:hover,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-prev-action]:focus-visible,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action]:hover,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action]:focus-visible,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"]:hover,
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-tabbar="plus"]:focus-visible {
	border-color: var(--lpos-accent) !important;
	box-shadow: none !important;
}

.lpos-blueprint--console .lpos-cell--midright .lpos-c-cta__actionbar > .lpos-c-cta__buy.psc-highlight[data-psc-route-cta] {
	border-width: var(--lpos-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--lpos-accent, var(--psc-gold)) !important;
	border-radius: var(--lpos-radius-panel, 10px);
	box-shadow: 0 0 var(--psc-outline-blur, 12px)
		color-mix(in srgb, var(--lpos-accent, var(--psc-gold)) 40%, transparent) !important;
	background-image: none !important;
	animation: psc-outline-breathe var(--psc-outline-duration, var(--lpos-duration-loading, 1.4s))
		ease-in-out infinite;
}

.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
	gap: calc(var(--lpos-gap) + var(--lpos-space-sm, 5px)) !important;
	padding-inline: calc(var(--lpos-gap) + var(--lpos-space-sm, 5px)) !important;
}

@media (max-width: 1280px) {
	.lpos-blueprint--console .lpos-topbar__panel--tabs {
		--psc-tab-min: calc(3 * var(--lpos-control-size, 46px));
	}

	.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: none !important;
	}
}

/*
 * DEC-CR-777XT0 — desktop XQ0 polish at the 1280 gold viewport.
 * Restores the 4× control-size crumb floor the max-width:1280 compact
 * rule had zeroed; widens Next; distributes the ~46px transport.
 * Mobile/tablet compact crumbs (max-width:1280, below 1280) stay.
 * Inactive crumb chevron is already :not([aria-current])::after.
 *
 * DEC-CR-777XT5 — JD: crumbs still too wide, Next should be wider.
 * Measured live 1.0.237 at 1920: crumbs grew to the 6× cap (276) with
 * 1–2 tabs and 227 with 3; min was 4× (184). Next sat on the 3× floor
 * (138). Stop crumb grow; floor is three control squares plus the XQ0
 * chevron column (--lpos-icon-size-sm) = 162, under 184. Next floor is
 * 4× (184). Compact max-width:1280 crumbs stay. Transport gap unchanged.
 */
@media (min-width: 1280px) {
	.lpos-blueprint--console .lpos-topbar__panel--tabs {
		--psc-tab-min: calc(3 * var(--lpos-control-size, 46px) + var(--lpos-icon-size-sm, 24px));
		--psc-next-min: calc(4 * var(--lpos-control-size, 46px));
	}

	.lpos-blueprint--console .lpos-topbar__panel--tabs .psc-crumb {
		flex: 0 1 var(--psc-tab-min, calc(3 * var(--lpos-control-size, 46px) + var(--lpos-icon-size-sm, 24px))) !important;
		min-width: var(--psc-tab-min, calc(3 * var(--lpos-control-size, 46px) + var(--lpos-icon-size-sm, 24px))) !important;
		max-width: var(--psc-tab-min, calc(3 * var(--lpos-control-size, 46px) + var(--lpos-icon-size-sm, 24px))) !important;
	}

	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action],
	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] {
		min-width: var(--psc-next-min, calc(4 * var(--lpos-control-size, 46px))) !important;
	}

	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
		gap: calc(var(--lpos-gap) + var(--lpos-space-sm, 5px) + var(--lpos-space-sm, 5px)) !important;
		padding-inline: calc(var(--lpos-gap) + var(--lpos-space-sm, 5px) + var(--lpos-space-sm, 5px)) !important;
	}
}

/*
 * DEC-CR-777XT2 — archive-default actionbar stays Get Started | Continue ~50/50.
 *
 * YU2 / XM0 hid any [data-lpos-add-to-cart] inside archive secondary so the
 * product qty-row ATC does not paint. The bottom actionbar pair is a
 * different atom: Get Started can carry that attribute after an Info peek
 * (Buy Now leftover), which collapsed it to 0×0 and stretched Continue.
 * Qty-row ATC stays hidden; the actionbar pair is unhidden ~50/50. Do not
 * invent Buy Now on idle. Do not delete the YI0 lock (opacity /
 * data-psc-continue-locked stay). Magick8 and phone/tablet are not selected.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__actionbar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto !important;
	align-items: stretch !important;
	width: 100% !important;
	min-height: var(--lpos-control-size, 46px) !important;
	height: auto !important;
	visibility: visible !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__actionbar .lpos-c-cta__buy,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__actionbar .lpos-c-cta__buy--secondary,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .lpos-c-cta .lpos-c-cta__actionbar [data-lpos-add-to-cart] {
	display: inline-flex !important;
	visibility: visible !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: none !important;
	margin: 0 !important;
	padding-block: inherit;
	overflow: visible !important;
}

/*
 * DEC-CR-777XP2 — Messages chat fills Secondary. No second composer.
 * Agents reuse Shop's .lpos-magick8__productgrid / .lpos-m8card.-product
 * (no new card, no Shop grid rewrite). Magick8 not selected. No gold hex.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col],
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-chat[data-psc-ask-chat] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__body,
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__list {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: 100% !important;
}

/*
 * DEC-CR-777XS2 — Messages is a Display tab. Agents 4×2 live in Secondary
 * so Primary step media stays mounted. Info peek fills Secondary without
 * unmounting the column or the parked chat. No gold hex. Magick8 not selected.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-agents-col],
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-agents-col] > [data-psc-ask-grid] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-agents-col] > [data-psc-ask-grid] {
	overflow: auto !important;
}

.lpos-blueprint--console .lpos-cell--midright [data-psc-ask-peek] {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	overflow: auto !important;
}

.lpos-blueprint--console .lpos-cell--midright [data-psc-ask-chat][hidden],
.lpos-blueprint--console .lpos-cell--midright [data-psc-ask-grid][hidden],
.lpos-blueprint--console .lpos-cell--midright [data-psc-ask-peek][hidden],
.lpos-blueprint--console .lpos-cell--midright [data-psc-ask-park="secondary"] {
	display: none !important;
}

/*
 * DEC-CR-777XT3 — Messages is its own Display. Midright stays a visible
 * column (never hidden / display:none). Chat fills that Display's Secondary
 * and carries the glass panel atom. No Magick8. No phone/tablet.
 * No XQ0 restyle. No Subscribe/One-Time on idle archives.
 */
html[data-psc-ask-open="1"] .lpos-blueprint--console .lpos-cell--midright,
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col],
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-agents-col] {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-col,
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-chat[data-psc-ask-chat],
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] .lpos-col > .lpos-c-chat[data-psc-ask-chat] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-chat[data-psc-ask-chat],
.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] .lpos-col > .lpos-c-chat[data-psc-ask-chat] {
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, color-mix(in srgb, var(--lpos-accent, var(--lpos-secondary)) var(--lpos-border-alpha-2, 40%), transparent)) !important;
	padding: var(--lpos-panel-pad, 12px) !important;
	box-sizing: border-box !important;
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-height: var(--lpos-control-size, 46px);
}

.lpos-blueprint--console .lpos-cell--midright[data-psc-ask-chat-col] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__empty {
	margin: auto;
	color: var(--lpos-muted, var(--lpos-muted));
	font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
}
/*
 * DEC-CR-777XU1 / 777XU2 — Messages: cards in Primary after a tab click.
 * Conversations|Agents live at the top of Secondary (50/50). Skip row stays
 * empty. Chat uses console glass bubbles. Progress rail of the source single
 * stays. Do not change crumb or Next widths.
 */
html[data-psc-ask-open="1"] [data-psc-ask-park] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-grid] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	width: 100%;
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-grid] .lpos-c-archive-grid__list,
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-grid] .lpos-magick8__productgrid {
	display: grid;
	grid-template-columns: repeat(var(--lpos-archive-cols, 4), minmax(0, 1fr));
	gap: var(--lpos-gap, 12px);
	align-content: start;
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-empty] {
	margin: auto;
	color: var(--lpos-muted);
	font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter .lpos-m8card.-product:not([data-psc-ask-agent]):not([data-psc-ask-thread]) {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-col:not([data-psc-ask-peek]),
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-title-panel,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-lpos-buytab],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-buytoggle__opt,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-cta__media,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] .lpos-media-image-wrap--empty {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] {
	display: flex !important;
	flex-direction: column;
	min-height: 0;
}
html[data-psc-ask-open="1"]:not([data-psc-ask-active="1"]) .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs]:not([hidden]) {
	display: flex !important;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	gap: var(--lpos-gap, 8px);
}
html[data-psc-ask-chat-open="1"] .lpos-cell--midright [data-psc-ask-tabs],
html[data-psc-ask-chat-open="1"] .lpos-cell--midright [data-psc-ask-tab],
.lpos-cell--midright[data-psc-ask-chat-open="1"] [data-psc-ask-tabs],
.lpos-cell--midright[data-psc-ask-chat-open="1"] [data-psc-ask-tab],
html[data-psc-ask-open="1"][data-psc-ask-active="1"] .lpos-cell--midright [data-psc-ask-tabs],
html[data-psc-ask-open="1"][data-psc-ask-active="1"] .lpos-cell--midright [data-psc-ask-tab],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs][hidden],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col]:has([data-psc-ask-chat-mode="active"]) > [data-psc-ask-tabs],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col]:has([data-psc-ask-back]) > [data-psc-ask-tabs] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs] > [data-psc-ask-tab] {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;
	color: var(--lpos-ink) !important;
	background: var(--lpos-glass-panel) !important;
	border-color: var(--psc-panel-border) !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs] > [data-psc-ask-tab][aria-pressed="true"] {
	color: var(--lpos-accent) !important;
	border-color: var(--lpos-accent) !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright .lpos-c-cta__tab:not([data-psc-ask-tab]),
html[data-psc-ask-open="1"] .lpos-cell--midright [data-lpos-buytab],
html[data-psc-ask-open="1"] .lpos-cell--midright .lpos-c-buytoggle {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-blueprint--console .lpos-cell--midcenter[data-psc-ask-player],
html[data-psc-ask-open="1"] .lpos-blueprint--console .lpos-cell--midcenter:has([data-psc-ask-primary]) {
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter .lpos-feat__body[data-psc-ask-primary],
html[data-psc-ask-open="1"] .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body[data-psc-ask-primary].lpos-feat__body--archive {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: 100% !important;
	aspect-ratio: var(--lpos-media-switch-ratio, 16 / 9);
	max-height: 100%;
	padding: var(--lpos-panel-pad, 12px);
	box-sizing: border-box;
	background: var(--lpos-glass-panel) !important;
	background-image: none !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-park="body"],
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-primary] .lpos-c-coming,
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-primary] .lpos-c-carousel,
html[data-psc-ask-open="1"] .lpos-cell--midcenter [data-psc-ask-primary] .lpos-feat__body--coming .lpos-c-carousel {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-cta__actionbar,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-keep-cta] {
	display: flex !important;
	flex: 0 0 auto;
	width: 100%;
}
html[data-psc-ask-from-single="1"][data-psc-ask-chat-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-c-cta__actionbar,
html[data-psc-ask-from-single="1"][data-psc-ask-chat-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-keep-cta] {
	display: none !important;
}
html[data-psc-ask-from-single="1"][data-psc-ask-chat-open="1"] .lpos-cell--midcenter [data-psc-ask-grid],
html[data-psc-ask-from-single="1"][data-psc-ask-chat-open="1"] .lpos-cell--midcenter [data-psc-ask-empty] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-chat][hidden],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-peek][hidden],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-idle-panel][hidden] {
	display: none !important;
}
html[data-psc-ask-open="1"]:not([data-psc-ask-chat-open="1"]) .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-idle-panel] {
	display: flex !important;
	flex: 1 1 auto !important;
	min-height: var(--psc-idle-well-min-h, 120px) !important;
	width: 100%;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
}
html[data-psc-ask-chat-open="1"] .lpos-cell--midright [data-psc-ask-idle-panel] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-chat]:not([hidden]),
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-peek]:not([hidden]) {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column;
	background: var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md) !important;
	backdrop-filter: var(--lpos-blur-md) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent)) !important;
	padding: var(--lpos-panel-pad, 12px) !important;
	box-sizing: border-box !important;
}

/*
 * DEC-CR-777XU2 — Ask transcript uses the console chat-thread atom (tokens only).
 * List may scroll; no Meow theme; no second composer; skip row stays empty.
 */
html[data-psc-ask-open="1"] .lpos-cell--midcenter .lpos-feat__actions [data-psc-ask-tabs],
html[data-psc-ask-open="1"] .lpos-cell--midcenter .lpos-feat__actions [data-psc-ask-tab] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__body,
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__list {
	overflow: auto !important;
	height: auto !important;
	justify-content: flex-start;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__list {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg {
	display: flex;
	align-items: flex-start;
	gap: var(--lpos-space-sm, 8px);
	max-width: var(--psc-chat-msg-maxw, 82%);
	min-width: 0;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg--in {
	align-self: flex-start;
	flex-direction: row;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg--out {
	align-self: flex-end;
	flex-direction: row;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__avatar {
	flex: 0 0 auto;
	flex-shrink: 0;
	overflow: visible;
	width: calc(var(--lpos-control-size, 46px) * var(--psc-chat-avatar-scale, 0.6));
	height: calc(var(--lpos-control-size, 46px) * var(--psc-chat-avatar-scale, 0.6));
	border-radius: var(--psc-chat-avatar-radius, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 var(--lpos-text-xs, 13px)/1 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	background: var(--lpos-glass-2);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg--out .lpos-c-chat__avatar {
	background: color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-1, 30%), var(--lpos-glass-panel));
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__bubble {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-xs, 4px);
	min-width: 0;
	padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg--out .lpos-c-chat__bubble {
	background: var(--lpos-glass-panel);
	border-color: var(--psc-panel-border);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__text {
	margin: 0;
	font: 400 var(--lpos-text-sm, 14px)/1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	overflow-wrap: anywhere;
	-webkit-line-clamp: unset;
	display: block;
}
/*
 * FR-C21 second half: refreshTranscript() hides the empty message list so the empty-state note's
 * `margin: auto` owns the column's free space -- but the list's own `display: flex` rules above
 * outweigh the UA's `[hidden] { display: none }`, so measured live the hidden list still absorbed
 * every free pixel (note dy=-351 with the attribute set). The attribute needs a rule of its own
 * weight. Scoped to the state, per standing correction #2.
 */
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__list[hidden] {
	display: none !important;
}
/*
 * FR-C34: the seven secondary-content icon TABS -- one horizontal row above the text toggles.
 * Component tokens only. Tab state paints via aria-pressed like every other icon tab here.
 */
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-switch] {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* DEC-CR-777YV15 (JD: "even width span across the bar like how we did the tab buttons but
	 * no text just span width"): wide flex-fill members with the token gap between and strip-
	 * parity padding around — even widths by construction. Gap stepped up to the layout gap
	 * token (JD 2026-08-18: "a little bit of space between the inline buttons"). */
	gap: var(--lpos-gap, 12px);
	padding: var(--lpos-space-xs, 4px);
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel);
}

/*
 * FR-C34: the adopted view fills a host under the icon tabs; while a view tab is open the
 * column's default content stands aside (state-scoped, standing correction #2). The bottom
 * ask-tabs row and the title stay. All values are tokens.
 */
/*
 * FR-C15: the What's Next / What's New LIST (JD: a list, not the card grid). Rows are panels
 * on the atomic recipe; every value is a token.
 */
/*
 * FR-C34 items 8/3/4 (JD punch, 2026-08-16): the progress rail spans down through the input
 * row's track (grid items may overlap; the input region is left-inset past the rail by
 * syncInputAlign); the removed subtitle stops reserving its line; the seven tabs distribute
 * evenly across the row.
 */
/*
 * FR-C35: the utility flyout (enters from the right, Plus tab opens it), the emptied top-right
 * row, and the secondary column risen into the top strip. Tokens only; region reshapes are
 * attr-scoped and !important because the framework template rules are.
 */
/* FR-C36: swapped bottoms + full-width tab strip + retired top controls (JD orders). */
html .lpos-blueprint--console [data-lpos-tabbar="plus"],
html body .lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next],
html .lpos-blueprint--console [data-psc-tab-next] {
	display: none !important;
}
/* The topcenter cell is a GRID (measured); the tabs panel takes its full row. */
html .lpos-blueprint--console.-left-collapsed .lpos-cell--topcenter,
html .lpos-blueprint--console .lpos-cell--topcenter {
	grid-template-columns: 1fr !important;
}
html .lpos-blueprint--console .lpos-topbar__panel--tabs {
	width: 100%;
	max-width: none;
}
html .lpos-blueprint--console .lpos-cell--midright .lpos-cell--botcenter {
	width: 100%;
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: 0 !important;
}
html .lpos-blueprint--console .lpos-blueprint__region--botcenter > .lpos-c-cta__actionbar {
	width: 100%;
}

/* DEC-CR-777YX8 (JD): the + opens "a full flyout menu like the main menu but has it's items
 * in it. same width just from the right not the left" — the small anchored box grew into a
 * FULL right drawer: the main drawer's width token, full height, glass, its items as
 * menu-row controls. */
.psc-util-flyout {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--lpos-drawer-w, 557px);
	max-width: 92vw;
	z-index: 4000;
	display: flex;
	flex-direction: column;
	gap: var(--lpos-gap, var(--lpos-space-sm, 8px));
	padding: var(--lpos-space-sm, 8px);
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
	transform: translateX(calc(100% + var(--lpos-space-md, 16px)));
	transition: transform 240ms ease;
	overflow: hidden;
}
.psc-util-flyout.-open {
	transform: translateX(0);
}
/* Its items wear the menu-row anatomy: the icon at the small step beside its own label.
 * Border DECLARED (eyes at 1.0.487: theme pink leaked onto the row borders — the icon-btn
 * atom out of its home container; same counter as every companion row). */
.psc-util-flyout [data-psc-mirror] {
	flex: 0 0 auto;
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: var(--lpos-space-sm, 8px);
	min-height: var(--lpos-control-size, 46px);
	color: var(--lpos-ink) !important;
	border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent) !important;
	background: var(--lpos-glass-panel) !important;
	border-radius: var(--lpos-radius-panel, 10px);
}
/* FR-16 stands here too: Power left the utils tray, so its mirror does not ride into the
 * tray's successor. */
.psc-util-flyout [data-psc-mirror="top-power"] {
	display: none !important;
}
.psc-util-flyout [data-psc-mirror] svg {
	width: var(--lpos-icon-size-sm, 16px);
	height: var(--lpos-icon-size-sm, 16px);
	flex: 0 0 auto;
}
.psc-util-flyout [data-psc-mirror]::after {
	content: attr(aria-label);
	font: 400 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	text-transform: capitalize;
}
/* Outranks the companion's own two older flex !important rules on this panel (0,3,0). */
html .lpos-blueprint .lpos-topbar__panel.lpos-topbar__panel--utils[data-psc-c35-emptied] {
	display: none !important;
}
/* FR-C37 (JD): the seven-tab panel is a BLUEPRINT grid item -- row 1, the secondary column --
 * inline with the top menu row, its own panel, outside the column and beyond the chat sweeps.
 * The secondary region keeps its framework rows (the full-height span retired with this). */
html .lpos-blueprint--console > [data-psc-sec-switch] {
	grid-row: 1 !important;
	grid-column: 3 !important;
	order: 0;
	margin: 0;
}
html .lpos-blueprint--console > .lpos-blueprint__row > .lpos-blueprint__region--topcenter[data-psc-c35-topshrink] {
	grid-column: 2 / 3 !important;
}

html .lpos-blueprint--console[data-psc-c34-railless] {
	grid-template-columns: var(--psc-c34-cols) !important;
}
/* Progress rail keeps rows 2-3; the avatar dock takes the bottom-left corner (JD: mirror of
 * the menu button, its own panel). */
html .lpos-blueprint--console[data-psc-c34-railless] .lpos-rail--right {
	grid-row: 2 / 3 !important;
}
html .lpos-blueprint--console > [data-psc-avatar-dock] {
	grid-column: 1 !important;
	grid-row: 3 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
}
html .lpos-blueprint--console .lpos-cell--midright .lpos-c-title-panel h3:empty,
html .lpos-blueprint--console .lpos-cell--midright [data-psc-subtitle]:empty {
	display: none;
}
/*
 * DEC-CR-777YV1 (JD): the six switch tabs are LARGER, sized by component tokens over the
 * framework scale, and the buttons flex to span the panel's full width inline. The component
 * tokens are computed HERE, one scope up, so redefining the framework tokens inside the panel
 * cannot self-reference (a var() cycle invalidates every property in the loop).
 * Control = the titlebar's content height, so the panel rides row 1 exactly level with the top
 * strip; icon = the framework's own large icon step (32/54 = 59%, inside the 50-60% norm).
 */
/* DEC-CR-777YV12 (corrected same day): NO derived height arithmetic — the titlebar token
 * diverges from the rendered strip across viewports (measured 1520: token math said 52, the
 * row said 56, and the squares overflowed the padding to 2px). The squares size themselves to
 * the padded row instead, at every viewport, and the glyphs hold the framework's own 50-60%
 * icon-to-control norm as a proportion. */
html .lpos-blueprint--console [data-psc-sec-switch] {
	/* The panel is a companion-built div (default display: block) -- without flex the
	 * justify-content was inert and the tabs clustered left (JD 2026-08-17). */
	display: flex;
	align-items: center;
	justify-content: stretch;
	/* Gap and padding live HERE — the old midright-scoped base rule stopped matching when the
	 * panel moved to the blueprint root (C37), which is why the 1.0.433 gap measured 0. */
	gap: var(--lpos-gap, 12px);
	padding: var(--lpos-space-xs, 4px);
}
/* THE ATOM STAYS SQUARE (JD's law; CORRECTION 2026-08-17 — flex-filling the buttons into
 * rectangles broke it). The buttons keep the framework atom's own geometry at this panel's
 * larger control token; the PANEL's justify-content spreads the intact squares across the full
 * width. Only the svg rule is added, because the framework's icon-sizing recipe is cell-scoped
 * and cannot reach this panel on the blueprint root. */
html .lpos-blueprint--console [data-psc-sec-switch] .lpos-c-icon-btn {
	/* WIDE TAB MEMBERS (DEC-CR-777YV15, JD's words: like the What's Next tab buttons, no text,
	 * even width span): each fills an equal share of the bar; the control token holds the
	 * height at strip parity. */
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: var(--lpos-control-size, 46px) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
html .lpos-blueprint--console [data-psc-sec-switch] .lpos-c-icon-btn svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
}
/* SEVEN TABS ONLY (JD's ruling): anything else that lands in the panel — decorative pseudo
 * layers, stray hosts — must not join the flex row; they were consuming even-shares at the
 * ends (measured 1.0.428/429: edges 23-32 vs betweens 14-23). */
html .lpos-blueprint--console [data-psc-sec-switch]::before,
html .lpos-blueprint--console [data-psc-sec-switch]::after {
	content: none !important;
}
html .lpos-blueprint--console [data-psc-sec-switch] > :not(.lpos-c-icon-btn) {
	display: none !important;
}

/* While the list paints, every empty-state voice in the same holder stands down. */
html .lpos-blueprint--console [data-psc-nextlist-on] .lpos-c-archive-grid__empty {
	display: none !important;
}
/* Keyed on the WRAP too; doubled attrs outrank the archive/single flex chains decisively. */
/* BOTH shapes: the stamp lands ON the cell in some flows (measured: cell IS the wrap) and
 * UNDER it in others -- a descendant-only selector silently missed the first shape. */
html body .lpos-blueprint--console .lpos-cell--midright[data-psc-nextlist-on] .psc-slider-host,
html body .lpos-blueprint--console .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .psc-slider-host,
html .lpos-blueprint--console .lpos-cell--midright [data-psc-nextlist-on] .psc-slider-host,
html .lpos-blueprint--console .psc-slider-host[data-psc-nextlist-hidden] {
	display: none !important;
}
/* Ask keeps the column chrome painting: the chat-state takeover must not hide the permanent
 * title (measured 1.0.386: re-seated title 0x0 in Messages while tabs painted). */
/*
 * COLUMN ORDER BY ROLE, NOT BY INSERTION (JD 2026-08-16 drawing: toolbar at the very top,
 * title+subtitle panel under it, content, input at the floor). Flex order makes the visual
 * order immune to the DOM append races that kept re-shuffling the chrome (measured: composer
 * y210 in chat because ask appends after the re-seat). Applies in both containers (the column
 * and the Console wrap are flex columns).
 */
html .lpos-blueprint--console [data-psc-sec-switch] { order: -3; }
html .lpos-blueprint--console [data-psc-sec-title] { order: -2; }
/* JD: the title + subtitle live in their OWN panel -- full glass skin. */
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-title] {
	background: var(--lpos-glass-panel) !important;
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel) !important;
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
	padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px) !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] { order: -1; }
html .lpos-blueprint--console .lpos-cell--midright .lpos-cell--botcenter { order: 99; }
html .lpos-blueprint--console [data-psc-empty-stood-down] { display: none !important; }

/* Outranks the chat takeover (.lpos-cell--midright[data-psc-ask-chat-col] > .lpos-col:not(...)
 * {none !important}, the measured winner): the permanent chrome paints in chat, full chain. */
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-sec-title],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-sec-switch],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-sec-view-host]:not(:empty),
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > .lpos-cell--botcenter,
html[data-psc-ask-open="1"] .lpos-cell--midright > [data-psc-sec-title] {
	display: flex !important;
}

/* JD: the rows live INSIDE one content panel (the drawing), not as loose cards -- the list IS
 * that panel: full skin, fills the region its empty twin occupied, rows within. */
html .lpos-blueprint--console .psc-nextlist {
	list-style: none;
	margin: 0;
	/* DEC-CR-777YV5: a grid — the card slots split the panel height evenly (row template comes
	 * inline from the painter, driven by the server's perPage) and the pager keeps the floor.
	 * DEC-CR-777YV8: the container is an lpos-c-panel — the panel system owns its skin; only
	 * structure and token spacing live here. */
	display: grid;
	grid-auto-flow: row;
	gap: var(--lpos-space-sm, 8px);
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--lpos-space-sm, 8px);
}
/*
 * THE LISTING CARD (DEC-CR-777YV2, JD's annotated sketch): the named companion list component --
 * a full-width card row, SQUARE media slot on the left, text block (title over meta) to its
 * right. Distinct from the grid card. The media square is a component token over the framework
 * control scale; an empty slot stays an honest empty square, never a stand-in image.
 */
html .lpos-blueprint--console .psc-listcard {
	/* An lpos-c-panel — skin belongs to the panel system (DEC-CR-777YV8). */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--lpos-space-md, 12px);
	padding: var(--lpos-space-sm, 8px);
}
html .lpos-blueprint--console .psc-listcard__media {
	/* The square SCALES with its card (JD's sketch: the media square is the card's height) --
	 * stretch to the card's cross axis, aspect-ratio holds the square; the token is the floor
	 * so a squeezed card never crushes it. */
	--psc-listcard-media: calc(var(--lpos-control-size, 46px) + var(--lpos-space-md, 12px));
	flex: 0 0 auto;
	align-self: stretch;
	aspect-ratio: 1 / 1;
	width: auto;
	min-width: var(--psc-listcard-media);
	min-height: var(--psc-listcard-media);
	display: block;
	overflow: hidden;
}
/* Every slot is its own panel (YV8 canon) — the panel system skins them; the companion adds
 * only the slot's token padding so text panels read as panels. */
html .lpos-blueprint--console .psc-listcard__title,
html .lpos-blueprint--console .psc-listcard__metaA,
html .lpos-blueprint--console .psc-listcard__metaB {
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* THE LIST FILLS THE COLUMN AT EVERY WINDOW (JD's screenshot caught it collapsed at a narrower
 * width than the 1920 the probes ran at): every link of the chain from the stamped wrap down to
 * the list flexes, so the four card slots stretch and the pager holds the panel floor. */
html .lpos-blueprint--console .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] {
	display: flex;
	flex-direction: column;
}
html .lpos-blueprint--console .lpos-cell--midright [data-psc-nextlist-on] *:has(> .psc-nextlist) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
html .lpos-blueprint--console .psc-listcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* The six-slot body (DEC-CR-777YV7 drawing): [title | badge] / [metaA | metaB] / [open,
 * full width at the card floor]. Grid areas so absent slots collapse without reflowing the
 * others. */
html .lpos-blueprint--console .psc-listcard__body {
	/* JD's outline: row 1 = wide title + narrower badge; row 2 = the two dates 50/50 INLINE
	 * (YV11); row 3 = the full-width open. Six equal tracks give both shapes. */
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: auto auto 1fr;
	align-items: center;
	align-content: stretch;
	gap: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
}
html .lpos-blueprint--console .psc-listcard__title {
	/* Row 1 = [number][price][status], EQUAL THIRDS (DEC-CR-777YV18). */
	grid-column: 1 / 3;
	grid-row: 1;
}
html .lpos-blueprint--console .psc-listcard__price {
	grid-column: 3 / 5;
	grid-row: 1;
	text-align: center;
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	font-size: var(--lpos-text-xs, 13px);
	white-space: nowrap;
}
html .lpos-blueprint--console .psc-listcard__badge {
	/* An lpos-c-panel wearing the framework's DECLARED pill radius token (console-tokens.css
	 * :100). Skin comes from the panel system; only placement, token spacing, the pill radius
	 * and the small text step live here (DEC-CR-777YV8). !important on the radius because the
	 * panel chrome law guards its own radius the same way. Fills its outline column. */
	/* The panel system owns the radius too (YV11 — the pill styling retired; slot 2 is a panel
	 * block like every other). */
	grid-column: 5 / 7;
	grid-row: 1;
	justify-self: stretch;
	text-align: center;
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	font-size: var(--lpos-text-xs, 13px);
	white-space: nowrap;
}
html .lpos-blueprint--console .psc-listcard__metaA {
	/* 50/50 inline with its partner (YV11). */
	grid-column: 1 / 4;
	grid-row: 2;
}
html .lpos-blueprint--console .psc-listcard__metaB {
	grid-column: 4 / 7;
	grid-row: 2;
}
html .lpos-blueprint--console .psc-listcard__reorder {
	/* Left half of the 50/50 action pair (DEC-CR-777YV19); same component, same height cap. */
	grid-column: 1 / 4;
	grid-row: 3;
	align-self: end;
	width: 100%;
	height: var(--lpos-control-size, 46px) !important;
	min-height: 0 !important;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
html .lpos-blueprint--console .psc-listcard__open {
	/* The framework's lpos-c-cta__buy component owns everything visual — the companion only
	 * places it in the card grid, and caps its height at the toggle control token (JD: "fit the
	 * vertical height of the What's Next button", DEC-CR-777YV9). Right half since YV19. */
	grid-column: 4 / 7;
	grid-row: 3;
	align-self: end;
	width: 100%;
	/* !important pair: the CTA recipe guards its own height the chrome-law way, and the toggle
	 * height is JD's ruling (YV9). Token-driven force, matched specificity. */
	height: var(--lpos-control-size, 46px) !important;
	min-height: 0 !important;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* SEARCH MODE at the floor (DEC-CR-777YV10): off the chat tab the attach and mic retire — they
 * belong to the live-chat composer only. Presence of the adopted chat in the host IS the mode.
 * Keyed on the BLUEPRINT (the composer parks on the grid since 1.0.440, outside the column).
 * !important: the framework's icon-btn law pins display with its own !important. */
html .lpos-blueprint--console:not(:has([data-psc-sec-view-host] .lpos-c-chat)) .lpos-cell--botcenter [data-lpos-composer="attach"],
html .lpos-blueprint--console:not(:has([data-psc-sec-view-host] .lpos-c-chat)) .lpos-cell--botcenter [data-lpos-composer="mic"] {
	display: none !important;
}
/* The parked composer's grid seat: bottom row, secondary column — the same floor position it
 * had inside the column, now unkillable by column swaps. */
html .lpos-blueprint--console > .lpos-cell--botcenter {
	grid-column: 3 !important;
	grid-row: 3 !important;
	margin: 0;
	min-width: 0;
}
/* The secondary REGION ends where the composer's row begins (JD's screenshot: the column ran
 * under the search panel once the composer left it — the region computed rows 2/4, so the
 * chained selector outranks the span law the same way the -video fill fight was won). */
html .lpos-blueprint.lpos-blueprint--console > .lpos-blueprint__row > .lpos-blueprint__region--midright,
html .lpos-blueprint--console[data-psc-c34-railless] > .lpos-blueprint__row > .lpos-blueprint__region--midright {
	grid-row: 2 / 3 !important;
	min-height: 0;
}
/*
 * DEC-CR-777YV16 — THE SINGLE-CHAT LAYOUT (JD's annotated sketch). While the adopted chat owns
 * the column: the standing Welcome-back panel stands down (the chathead's own title panel IS
 * the column title, changing with the tab); Back is icon-only; the peer avatar panel wears the
 * profile image; the thread reads TOP-DOWN. Every piece is already a framework component
 * (icon-btn / lpos-c-panel avatar / lpos-c-title-panel / chat component) — verified.
 */
html .lpos-blueprint--console .lpos-cell--midright:has([data-psc-sec-view-host] .lpos-c-chat) [data-psc-sec-title] {
	display: none !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-c-icon-btn--labeled .lpos-c-icon-btn__text {
	display: none !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-c-icon-btn--labeled {
	width: var(--lpos-control-size, 46px) !important;
	flex: 0 0 auto !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead {
	/* !important set: the framework pins the actions row's own layout the chrome-law way, and
	 * the YV16 head (back | image | title filling) must hold against it. */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: var(--lpos-space-sm, 8px) !important;
	width: 100% !important;
}
/* JD's YV16 order: [back][peer image][title panel filling the rest] — order pinned so the
 * avatar sits BESIDE the back chip, never pushed to the far edge. */
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-c-icon-btn--labeled {
	order: 0;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-view__peer-avatar {
	order: 1;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-view__peer {
	order: 2;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: var(--lpos-control-size, 46px) !important;
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px) !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead .lpos-view__peer h2 {
	display: block !important;
	margin: 0;
}
/* The chat-home rows (YV20): the toggle pair over the card list, all the components we made. */
html .lpos-blueprint--console [data-psc-chat-home] {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	flex: 1 1 auto;
	min-height: 0;
}
html .lpos-blueprint--console .psc-chat-home__tabs {
	display: flex;
	align-items: stretch;
	gap: var(--lpos-gap, var(--lpos-space-sm));
}
html .lpos-blueprint--console .psc-chat-home__tab {
	flex: 1 1 0;
	/* The ink token, explicitly: outside the component's home container the theme's link colour
	 * leaked through (measured rgb(204,51,102) vs the toggles' ink). Same completing-the-recipe
	 * precedent as the glyph cap. */
	color: var(--lpos-ink) !important;
}
html .lpos-blueprint--console .psc-chat-home__list {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	padding: var(--lpos-space-sm, 8px);
	flex: 1 1 auto;
	min-height: 0;
}
/* Home cards keep the listing-card anatomy with full-width text slots (no thirds row here). */
html .lpos-blueprint--console .psc-listcard__title--wide {
	grid-column: 1 / 7;
}
html .lpos-blueprint--console .psc-listcard__metaA--wide {
	grid-column: 1 / 7;
}
/* CORRECTION (JD's screenshot): in the auto-height home list the stretch-square fed itself —
 * intrinsic photo size grew the card, the card grew the square. The home context pins the
 * media at the component's TOKEN square and the card at its compact row height; the action
 * stays a grid member (the CTA recipe floats it in card contexts). */
html .lpos-blueprint--console .psc-chat-home__list .psc-listcard {
	min-height: calc(var(--lpos-control-size, 46px) + var(--lpos-space-md, 12px) + 2 * var(--lpos-space-sm, 8px));
	align-items: center;
}
html .lpos-blueprint--console .psc-chat-home__list .psc-listcard__media {
	align-self: center !important;
	aspect-ratio: auto !important;
	width: calc(var(--lpos-control-size, 46px) + var(--lpos-space-md, 12px)) !important;
	height: calc(var(--lpos-control-size, 46px) + var(--lpos-space-md, 12px)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none;
	max-height: none;
}
html .lpos-blueprint--console .psc-chat-home__list .psc-listcard__open {
	position: static !important;
	float: none !important;
	inset: auto !important;
	grid-column: 1 / 7;
	grid-row: 3;
	width: 100% !important;
}
html .lpos-blueprint--console .psc-listcard__media--letter {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lpos-text-lg, var(--lpos-text-sm, 14px));
	color: var(--lpos-ink);
}
/* THE CHAT ROW (DEC-CR-777YV21, JD's messenger reference): round avatar | name over preview |
 * time top-right; the whole row is the opener. Panel skin from the component, radius from the
 * DECLARED full-radius token. */
html .lpos-blueprint--console .psc-chatrow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--lpos-space-sm, 8px);
	padding: var(--lpos-space-sm, 8px);
	cursor: pointer;
}
html .lpos-blueprint--console .psc-chatrow__avatar {
	/* The panel system owns the radius — no rounded override (JD, CORRECTION: the reference
	 * image's circle is NOT our system; the avatar is a panel like every other block). */
	flex: 0 0 auto;
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lpos-ink);
}
html .lpos-blueprint--console .psc-chatrow__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
html .lpos-blueprint--console .psc-chatrow__body {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-xs, 4px);
	flex: 1 1 auto;
	min-width: 0;
}
html .lpos-blueprint--console .psc-chatrow__preview {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html .lpos-blueprint--console .psc-chatrow__time {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-left: auto;
	white-space: nowrap;
}
/* DEC-CR-777YV24 sizing (JD's screenshot: the two cards huddled small): 2x2 means the cards
 * FILL the two tracks — the grid spans the panel and each card takes its whole track. */
html .lpos-blueprint--console .psc-chat-home__list .lpos-c-archive-grid {
	width: 100%;
}
html .lpos-blueprint--console .psc-chat-home__list .lpos-c-archive-grid__list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--lpos-space-sm, 8px) !important;
	width: 100% !important;
}
html .lpos-blueprint--console .psc-chat-home__list .lpos-m8card {
	width: 100% !important;
	max-width: none !important;
}

/* Hover actions on thread bubbles (DEC-CR-777YV23): the icon atom at its small step, revealed
 * on hover, pressed state on a successful copy. */
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__bubble {
	position: relative;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .psc-msg-copy {
	position: absolute;
	top: calc(-1 * var(--lpos-space-xs, 4px));
	right: calc(-1 * var(--lpos-space-xs, 4px));
	width: var(--lpos-control-size-sm, 36px) !important;
	height: var(--lpos-control-size-sm, 36px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity 120ms ease;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .psc-msg-copy svg {
	width: var(--lpos-icon-size-xs, 20px) !important;
	height: var(--lpos-icon-size-xs, 20px) !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__msg:hover .psc-msg-copy,
html .lpos-blueprint--console [data-psc-sec-view-host] .psc-msg-copy:focus-visible {
	opacity: 1;
	pointer-events: auto;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .psc-msg-copy[data-psc-copied] {
	border-color: var(--lpos-accent) !important;
}
/*
 * DEC-CR-777YV25: the adopted thread wears the SAME approved chat component recipe as the ask
 * chat — one chat language, the --psc-chat-* family plus the spacing and radius tokens. The
 * top-down anchoring lives here too.
 */
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__list {
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	gap: var(--lpos-space-sm, 8px);
	list-style: none;
	margin-top: 0 !important;
	margin-bottom: auto !important;
	padding: var(--lpos-space-sm, 8px);
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__msg {
	display: flex;
	align-items: flex-end;
	gap: var(--lpos-space-sm, 8px);
	max-width: var(--psc-chat-msg-maxw, 82%);
	min-width: 0;
	margin: 0;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__msg--out {
	align-self: flex-end;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__msg--in {
	align-self: flex-start;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__bubble {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-xs, 4px);
	min-width: 0;
	padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
	border-radius: var(--lpos-radius-panel) !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__avatar {
	flex: 0 0 auto;
	width: calc(var(--lpos-control-size, 46px) * var(--psc-chat-avatar-scale, 0.6));
	height: calc(var(--lpos-control-size, 46px) * var(--psc-chat-avatar-scale, 0.6));
	border-radius: var(--psc-chat-avatar-radius, 50%) !important;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__chathead {
	margin-bottom: var(--lpos-space-sm, 8px) !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__peer-avatar {
	overflow: hidden;
	flex: 0 0 auto;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__peer-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-view__peer {
	flex: 1 1 auto;
	min-width: 0;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__body {
	justify-content: flex-start !important;
	align-content: flex-start !important;
}
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat__list {
	margin-top: 0 !important;
	margin-bottom: auto !important;
}

/* A filtered-out listing card stands down without leaving the grid slot order behind. */
html .lpos-blueprint--console .psc-listcard[data-psc-filtered] {
	display: none;
}
/* The media gives way while an order text view owns the stage (YV9): keyed on the VIEW's own
 * presence, so the framework can rebuild the media all it likes — the state rule holds. Hiding
 * by display leaves every :has(.lpos-media) state selector satisfied, and the layout scan
 * stands down separately while the view is open. */
/* Chained .lpos-cell class: the stage's own display law runs six classes deep with !important
 * (the -video fill rule, measured 1.0.424 still standing), so this must outrank it — P-18:
 * important-vs-important resolves by specificity. */
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter:has([data-psc-order-view]) .lpos-feat__body .lpos-media,
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter:has([data-psc-order-view]) .lpos-feat__body .lpos-media__bar,
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter:has([data-psc-order-view]) .lpos-feat__body .psc-media-transport,
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter:has([data-psc-order-view]) .lpos-feat__actions {
	display: none !important;
}
/* The order view: a panel component over the media stage — the Open button's target
 * (DEC-CR-777YV5d): required primary layout, text-type content. */
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-feat__body:has(> .psc-order-view.lpos-c-panel) {
	position: relative;
	/* q6 (JD 2026-08-17): the stage behind the order panel wears the fallback gradient pattern —
	 * tokens declared at the app layer (--psc-orderview-*), so the backdrop retints per portal.
	 * Weight: the parked video stage's own `:has(transport) { background: transparent }` stands
	 * at (0,5,0) important (CDP-measured), so this carries (0,6,1) — P-18, specificity over war. */
	background: var(--psc-orderview-grad), var(--psc-orderview-base) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	/* The stage shrank to the card once the video parked, leaving raw ambient below — the
	 * backdrop is the WHOLE stage, so it grows to the column while the order view stands. */
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: 100% !important;
}
html .lpos-blueprint--console .psc-order-view {
	/* An lpos-c-panel IN FLOW in the primary content panel (DEC-CR-777YV9 — the media stage is
	 * parked while the order shows, so the panel takes the stage's place, not a layer over it).
	 * The panel system owns the skin; structure and token spacing only. */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	gap: var(--lpos-space-sm, 8px);
	padding: var(--lpos-panel-pad, 12px);
}
html .lpos-blueprint--console .psc-order-view__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpos-space-sm, 8px);
}
html .lpos-blueprint--console .psc-order-view__body {
	overflow: auto;
	min-height: 0;
	font: 400 var(--lpos-text-sm, 14px)/1.6 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
}
html .lpos-blueprint--console .psc-order-view__gap {
	min-height: var(--lpos-space-sm, 8px);
}
/* THE PAGER: two 50/50 INLINE buttons at the panel floor (DEC-CR-777YV6, JD's drawing — it
 * crossed out the squares-at-the-ends panel). Each button spans half the row; the pin to the
 * grid's LAST explicit row (negative lines count from the template end, so this holds for any
 * server-driven slot count) keeps it at the floor even when the page holds fewer cards. The
 * !important pair is load-bearing against the framework's cell-scoped square law — JD's drawing
 * overrides the atom here, by ruling. */
html .lpos-blueprint--console .psc-nextlist__pager {
	/* The pager pair is the framework's toggle-tab component (lpos-c-cta__tab) — its own recipe
	 * splits the row 50/50, exactly the What's Next|What's New pattern above it (DEC-CR-777YV8).
	 * Only the floor-row pin and token gap live here. */
	grid-row: -2 / -1;
	display: flex;
	align-items: stretch;
	gap: var(--lpos-gap, var(--lpos-space-sm));
}
html .lpos-blueprint--console .psc-nextlist__pgbtn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var(--lpos-space-sm, 8px);
}
/* DEC-CR-777YV17: back chevron hugs its button's LEFT edge, forward hugs the RIGHT.
 * !important against the tab component's own centering law (measured 1.0.434: 107px insets —
 * the recipe pins justify-content). */
html .lpos-blueprint--console .psc-nextlist__pager .psc-nextlist__pgbtn:first-child {
	justify-content: flex-start !important;
	text-align: left !important;
}
html .lpos-blueprint--console .psc-nextlist__pager .psc-nextlist__pgbtn:last-child {
	justify-content: flex-end !important;
	text-align: right !important;
}
/* Tighter shoulders on the primary content (YV17c — JD: too much left/right space). */
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter {
	padding-left: var(--lpos-subpanel-pad, 6px) !important;
	padding-right: var(--lpos-subpanel-pad, 6px) !important;
}
/* The glyph cap the icon family gets from the framework: leaving lpos-c-icon-btn for the tab
 * component lost it, and the chevrons filled the tab (eye-caught 1.0.414). Same icon token. */
html .lpos-blueprint--console .psc-nextlist__pgbtn svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
	flex: 0 0 auto;
}
html .lpos-blueprint--console .psc-nextlist__pgbtn[disabled] {
	opacity: 0.35;
	cursor: default;
}
/* The order card's media square: token background, order glyph, no photo (DEC-CR-777YV5). */
html .lpos-blueprint--console .psc-listcard__media--order {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--psc-listcard-order-bg, var(--lpos-accent-glass-strong, var(--lpos-accent-soft)));
	color: var(--psc-listcard-order-ink, var(--lpos-accent, currentColor));
}
html .lpos-blueprint--console .psc-listcard__media--order svg {
	width: var(--lpos-icon-size-lg, 32px);
	height: var(--lpos-icon-size-lg, 32px);
}
/* An honest system note in the chat thread (send failures are said out loud, never dropped). */
html .lpos-blueprint--console .psc-chat-note {
	list-style: none;
	text-align: center;
	color: var(--lpos-muted, var(--lpos-ink));
	font: 400 var(--lpos-text-xs, 13px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	padding: var(--lpos-space-xs, 4px);
}
html .lpos-blueprint--console .psc-nextlist__title {
	font: 600 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
}
html .lpos-blueprint--console .psc-nextlist__sub {
	font: 400 var(--lpos-text-xs, 13px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted, var(--lpos-ink));
}

/*
 * FR-C34 fleet finding (1280 pass): the emptied rail CONTAINER kept its 64px box -- the
 * framework rule .lpos-rail{display:flex} outranks the UA [hidden] display:none. Same trap as
 * the chat list (FR-C21). State-scoped, one job.
 */
html .lpos-blueprint--console .lpos-rail[data-psc-c34-rail][hidden] {
	display: none !important;
}
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-view-host]:empty {
	display: none;
}
/*
 * DEC-CR-777YV13 (JD's annotated screenshot): the primary column breathes on the gap token —
 * the transport clears the panel floor, the player sits off the header strip, and the strip
 * GROWS to absorb the space the other two gave up. Media aspect untouched (only margins move).
 * Scoped to the media stage slot only; other slots (carousel, archive) keep their own layout.
 */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-col__slot.-active:has(.lpos-media) {
	display: flex;
	flex-direction: column;
	/* The container's own gap chipped 8px in ABOVE the stage only (measured 1.0.437: 14 vs 5)
	 * — the video's twin margins are the only spacers, so above and below stay identical. */
	gap: 0 !important;
}
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-col__slot.-active > .lpos-feat__actions {
	/* FIXED at the titlebar height (YV13 corrected 2026-08-18): flex-grow set up a squeeze
	 * against the aspect sizer — the strip ate the slack the video needed and the transport
	 * clipped at the panel floor (JD's eye caught it). Deterministic height, no feedback.
	 * Margin zeroed: the video's own margins are the ONLY spacers in this column (YV18 equal
	 * above/below — measured 14 vs 5 while neighbours still chipped in). */
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: var(--lpos-titlebar-h, 64px) !important;
	margin: 0 !important;
	/* The strip shares EDGES with the video and its toolbar (JD 2026-08-18): all three ride the
	 * same fitted-width variable the aspect sizer publishes. */
	width: var(--psc-media-fit-w, 100%) !important;
	max-width: 100% !important;
	align-self: center !important;
	box-sizing: border-box;
}
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-col__slot.-active > .lpos-feat__body {
	flex: 0 1 auto !important;
	min-height: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	padding-bottom: var(--lpos-space-sm, 8px) !important;
	/* The body's own side padding indented the video and toolbar but not the strip (measured
	 * 1.0.441: 85 vs 90) — zero it so all three stage pieces share exact edges. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* The player buttons absorb the row completely — a width cap left residual space that read as
 * inconsistent edge-vs-between spacing (measured: edges 6, gaps 13). */
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-col__slot.-active > .lpos-feat__body > .psc-media-transport .lpos-c-icon-btn {
	max-width: none !important;
}
/* EQUAL above and below the video (JD 2026-08-18): both spaces are the MEDIA's own margins on
 * the same token — nothing else contributes (body top padding zeroed above, bar margin zeroed
 * below), so they cannot drift apart. */
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-col__slot.-active > .lpos-feat__body > .lpos-media {
	margin-top: var(--lpos-space-sm, 8px) !important;
	margin-bottom: var(--lpos-space-sm, 8px) !important;
	/* Side margins zeroed so strip, video and toolbar share EXACT edges (JD 2026-08-18 —
	 * measured 5px of ambient side margin skewing the strip match). */
	margin-left: 0 !important;
	margin-right: 0 !important;
}
html .lpos-blueprint--console .lpos-cell.lpos-cell--midcenter .lpos-col__slot.-active > .lpos-feat__body > .lpos-media__bar.psc-media-transport {
	margin: 0 !important;
	flex: 0 0 auto !important;
	/* Edge insets = between-gaps for the player buttons (JD: left/right padding inconsistent):
	 * ONE token for the gap and both side paddings, so they cannot disagree. */
	gap: var(--lpos-space-sm, 5px) !important;
	padding-top: var(--lpos-space-xs, 3px) !important;
	padding-bottom: var(--lpos-space-xs, 3px) !important;
	padding-left: var(--lpos-space-sm, 5px) !important;
	padding-right: var(--lpos-space-sm, 5px) !important;
}
/* The title+subtitle panel gains height on the panel-pad token (YV13). */
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-title] {
	padding-top: var(--lpos-panel-pad, 12px) !important;
	padding-bottom: var(--lpos-panel-pad, 12px) !important;
}
/*
 * SEARCH BAR ICONS (YV13): in search mode the left magnifier retires and the SUBMIT wears the
 * magnifier glyph; the chat composer keeps its stock icons untouched — two different
 * components, same floor.
 */
html .lpos-blueprint--console:not(:has([data-psc-sec-view-host] .lpos-c-chat)) .lpos-cell--botcenter .lpos-search > svg {
	display: none !important;
}
/* (The submit glyph swap is JS-side geometry now — a second svg inside the icon atom is hidden
 * by the framework's own duplicate guard, measured 1.0.435.) */
/* Get Started loses the cart glyph (YV13) — ACTIONBAR ONLY. The broad cell selector also
 * matched the composer's cell class and erased every input-bar icon (JD's screenshot,
 * DEC-CR-777YV20 confession). */
html .lpos-blueprint--console .lpos-blueprint__region--botcenter .lpos-c-cta__actionbar svg {
	display: none !important;
}
/* The adopted chat fills the column (JD: "opens tall now but too skinny"). In its resting home
 * the framework centres .lpos-c-chat inside a flex row, so as a flex item it shrinks to content
 * width (measured 204px in a 638px body). Scoped to the adopted host only; no !important needed
 * -- verified live 2026-08-17: a plain injected rule took it to 620px. */
html .lpos-blueprint--console [data-psc-sec-view-host] .lpos-c-chat {
	width: 100%;
	max-width: none;
	align-self: stretch;
}
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-view-host] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-view-host] .lpos-col__view {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
html .lpos-blueprint--console .lpos-cell--midright [data-psc-sec-view-open="1"] > *:not([data-psc-sec-switch]):not([data-psc-sec-view-host]):not([data-psc-sec-title]):not([data-psc-ask-tabs]) {
	display: none !important;
}

/*
 * RENDERED REPLY STRUCTURE (JD 2026-08-16, law flag). appendMdBlocks() in ask-mode.js turns the
 * model's markdown into real paragraphs, lists and emphasis; these are their component rules.
 * Values come only from the --psc-chat-* component tokens declared in the token dictionary.
 */
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__bubble > .lpos-c-chat__text + .lpos-c-chat__text,
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__bubble > .lpos-c-chat__mdlist + .lpos-c-chat__text,
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__bubble > .lpos-c-chat__text + .lpos-c-chat__mdlist {
	margin-top: var(--psc-chat-para-gap, var(--lpos-space-sm));
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__mdlist {
	margin: 0;
	padding: 0 0 0 var(--psc-chat-list-indent, calc(var(--lpos-space-md) * 2));
	display: flex;
	flex-direction: column;
	gap: var(--psc-chat-item-gap, var(--lpos-space-xs));
	list-style: disc;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__mditem {
	margin: 0;
	font: 400 var(--lpos-text-sm, 14px)/1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	overflow-wrap: anywhere;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__mditem::marker {
	color: var(--lpos-accent);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__strong {
	font-weight: 600;
	color: var(--lpos-ink);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__em {
	font-style: italic;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs][hidden],
html[data-psc-ask-open="1"][data-psc-ask-active="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__head[hidden] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__head[data-psc-ask-chat-mode="active"] {
	display: flex;
	align-items: center;
	gap: var(--lpos-space-sm, 8px);
	flex: 0 0 auto;
	min-height: var(--lpos-control-size, 46px);
	padding: var(--lpos-space-sm, 8px);
	margin: 0 0 var(--lpos-space-sm, 8px);
	overflow: visible;
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] [data-psc-ask-back] {
	flex: 0 0 var(--lpos-control-size, 46px);
	width: var(--lpos-control-size, 46px);
	min-width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
	min-height: var(--lpos-control-size, 46px);
	position: relative;
	overflow: visible;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	opacity: 1;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] [data-psc-ask-back] svg {
	width: var(--lpos-icon-size-sm, 24px);
	height: var(--lpos-icon-size-sm, 24px);
	display: block;
	stroke: var(--lpos-ink);
	fill: none;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] [data-psc-ask-back]::after {
	content: "";
	display: block;
	width: var(--lpos-icon-size-sm, 24px);
	height: var(--lpos-icon-size-sm, 24px);
	margin: auto;
	background-color: var(--lpos-ink);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__avatar--head {
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__peer {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	gap: var(--lpos-space-2xs, 2px);
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__peer-name {
	font: 600 var(--lpos-text-md, 16px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	overflow: visible;
	white-space: normal;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__peer-role {
	font: 400 var(--lpos-text-xs, 13px)/1.35 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-muted);
	overflow: visible;
	white-space: normal;
}
html[data-psc-ask-open="1"] .lpos-c-chat[data-psc-ask-chat] .lpos-c-chat__msg--out {
	flex-direction: row;
}
html[data-psc-ask-open="1"] .lpos-cell--midright [data-psc-ask-form],
html[data-psc-ask-open="1"] .lpos-cell--midright .lpos-c-chat__composer,
html[data-psc-ask-open="1"] .lpos-cell--midright .lpos-search,
html[data-psc-ask-open="1"] .lpos-cell--midright [data-psc-ask-park] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright [data-psc-ask-keep-cta] button,
html[data-psc-ask-open="1"] .lpos-cell--midright [data-psc-ask-keep-cta] .lpos-c-cta__buy {
	border-color: var(--psc-panel-border) !important;
}

/*
 * DEC-CR-777XU3 — banned 3-icon / mountain / span-panel never on midright.
 * Product singles keep featured + QTY + slider + CTAs. Agent Info is the
 * same 7-part atom (Profile | Quick Access). Do not change crumb or Next.
 */
.lpos-blueprint--console .lpos-cell--midright .psc-spanbar:not(.psc-media-transport),
.lpos-blueprint--console .lpos-cell--midright [data-psc-spanbar]:not(.psc-media-transport),
.lpos-blueprint--console .lpos-cell--midright .lpos-c-cta__info[data-psc-span-panel],
.lpos-blueprint--console .lpos-cell--midright .lpos-media-image-wrap--empty,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-media-image-wrap--empty,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--archive > .lpos-media,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--archive > iframe,
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--archive > [data-lpos-media-host],
.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--archive > img {
	display: none !important;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] [data-lpos-buytab],
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-buytoggle__opt {

	color: var(--lpos-accent) !important;
	border-color: var(--lpos-accent) !important;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-m8card__ptext,
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta > p,
.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-col > p,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__info:not(.psc-slider-host):not(:has(.psc-slider-host)) {
	display: none !important;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek] .psc-slider-host {
	display: flex !important;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek] .lpos-c-cta__actionbar {
	display: flex !important;
	flex: 0 0 auto !important;
	width: 100%;
}
html[data-psc-ask-info="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs],
html[data-psc-ask-info="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs][hidden] {
	display: none !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-peek][data-psc-info-atom] {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: var(--lpos-gap, 8px);
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .lpos-c-title-panel,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .lpos-c-cta,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] [data-psc-toggle-row],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .lpos-c-cta__media,
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] [data-psc-capability-bar],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .psc-slider-host {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] [data-psc-toggle-row],
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] [data-psc-capability-bar] {
	flex-direction: row;
	flex: 0 0 auto;
	gap: var(--lpos-gap, 8px);
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] [data-psc-toggle-row] > .lpos-c-cta__tab {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .lpos-c-cta__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--lpos-radius-panel, 10px);
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .psc-slider-host {
	flex: 1 1 auto;
	min-height: 0;
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent);
	border-radius: var(--lpos-radius-panel, 10px);
	padding: var(--lpos-panel-pad, 12px);
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .psc-slide__callout h3 {
	margin: 0 0 var(--lpos-space-sm, 8px);
	font: 600 var(--lpos-text-md, 16px)/1.2 var(--lpos-font-display, Georgia, serif);
	color: var(--lpos-ink);
}
html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col] [data-psc-ask-peek] .psc-slide__callout p {
	margin: 0;
	font: 400 var(--lpos-text-sm, 14px)/1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
}
/*
 * DEC-CR-777XU4 — idle archive empty glass well fills leftover height.
 * Authored Display subtitle (h3) stays visible. Do not change XT6 skip/Next.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] .psc-slider-host--listing,
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary] [data-psc-idle-panel] {
	flex: 1 1 auto !important;
	min-height: var(--psc-idle-well-min-h, 120px) !important;
	background: var(--lpos-glass-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border);
	border-radius: var(--lpos-radius-panel, 10px);
}
/*
 * DEC-CR-777XU5 — product single slider is heading + description, not a
 * tall empty glass well. XT4 revert must not leave a yellow-hole.
 */
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host {
	flex: 0 1 auto !important;
	height: auto !important;
	min-height: 7.5rem !important;
	max-height: none !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: visible !important;
}
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .psc-slider,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .lpos-c-carousel__stage {
	flex: 0 1 auto !important;
	height: auto !important;
	min-height: 6.5rem !important;
}
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .psc-slide__callout {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--lpos-space-sm, 5px) !important;
	height: auto !important;
	min-height: 6rem !important;
	padding: var(--lpos-space-md, 8px) !important;
}
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .psc-slide__callout h4,
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .psc-slide__callout h3 {
	display: block !important;
	margin: 0 !important;
	color: var(--lpos-ink) !important;
}
.lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .psc-slider-host .psc-slide__callout > p {
	display: block !important;
	margin: 0 !important;
	color: var(--lpos-muted) !important;
	max-height: none !important;
	overflow: visible !important;
}

/*
 * RAIL SIDES — Process rail left, tool rail right (JD 2026-08-15)
 *
 * The blueprint row is a four-column grid whose two rails are both 64px, so putting Process on
 * the left and the tools on the right is a column reassignment and nothing else: no width is
 * restated, no other cell moves, and the collapse rules keep working because they never touched
 * placement. console-tokens.css sets .lpos-rail--left{grid-column:1} and .lpos-rail--right{3},
 * with a -left-collapsed rule pushing right to 4; one extra class of weight clears all three
 * without !important, which this file already carries far too many of.
 *
 * INSIDE THE XU1 WINDOW ON PURPOSE. _deploy_msgui.mjs transplants only the slice between the
 * XU1 and XT6 markers; CSS appended past the end of the file is not part of the payload and is
 * then overwritten when the shipper writes its reconstruction back over local. That is how the
 * first attempt at this rule disappeared from both live and local while the ship still reported
 * byte-identical -- it was comparing its own output, which never contained the rule.
 */
.lpos-blueprint.lpos-blueprint .lpos-rail--left {
	grid-column: 4;
}

.lpos-blueprint.lpos-blueprint .lpos-rail--right {
	grid-column: 1;
}

/*
 * The two rules above are correct and do nothing, and the reason is worth keeping.
 * console-tokens.css carries a SECOND pair of collapsed-state rules, undocumented and easy to
 * miss because they only fire when `-left-collapsed` is on the blueprint, which it always is
 * (`-right-collapsed` is dead code by the framework's own verified comment):
 *
 *   .lpos-blueprint--console.-left-collapsed .lpos-rail--left  { grid-column: 1 !important }
 *   .lpos-blueprint--console.-left-collapsed .lpos-rail--right { grid-column: 4 !important }
 *
 * !important beats any specificity, so the unweighted rules above can never win. Matching it is
 * the only honest option while the framework fork stays pristine; the repeated class takes
 * specificity to (0,4,0) so this beats the framework's (0,3,0) important rule rather than merely
 * tying it. grid-row is deliberately left alone -- only the column is contested, and restating
 * the row here would silently own a second property nobody asked us to move.
 */
.lpos-blueprint--console.-left-collapsed.-left-collapsed .lpos-rail--left {
	grid-column: 4 !important;
}

.lpos-blueprint--console.-left-collapsed.-left-collapsed .lpos-rail--right {
	grid-column: 1 !important;
}

/*
 * THEME PINK RECLAIM (JD 2026-08-15)
 *
 * `reset.css?ver=3.4.9` ships `[type="button"], [type="submit"], button { color: #cc3366 }`.
 * The framework already asks for the right thing -- `.lpos-c-buytoggle__opt { color:
 * var(--lpos-muted, #A8B2C7) }` -- but the two selectors TIE on specificity (0,1,0) and the
 * reset loads later, so the pink wins on source order alone. That is why "What's New" rendered
 * pink while its identical twin "What's Next" did not: the active one carries a second rule, the
 * inactive one had nothing left to defend it.
 *
 * Scoped to the component rather than blanket-resetting every button in the console. A general
 * `.lpos-blueprint button { color: inherit }` would sit at (0,1,1) and therefore outrank the
 * framework's own per-component colours too, flattening choices that were made deliberately.
 * One class of extra weight fixes the tie without taking anything else over.
 */
.lpos-blueprint .lpos-c-buytoggle__opt {
	color: var(--lpos-muted);
}
/*
 * DEC-CR-777XT6 — desktop Console: empty skip row fills leftover above
 * the primary stage; under-player transport grows with token pad; Next
 * label is centered in the XT5 184px control; product singles keep gold
 * secondary (featured + buy-box) even if a leftover archive grid remains
 * in midcenter. Skip stays empty glass — Conversations|Agents do not
 * live here. Compact max-width:1280 / Magick8 / Messages Display chrome
 * unchanged. Crumb 162 / Next 184 stay.
 */
@media (min-width: 1280px) {
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		height: 100% !important;
		gap: 0 !important;
	}

	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead),
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions[data-psc-skip-empty]:not(.lpos-view__chathead) {
		flex: 1 1 auto !important;
		min-height: var(--lpos-control-size, 46px) !important;
		height: auto !important;
		max-height: none !important;
		align-items: flex-start !important;
		align-content: flex-start !important;
	}

	.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-feat__body--archive) .lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead),
	.lpos-blueprint--console .lpos-cell--midcenter:has(.lpos-feat__body--archive) .lpos-feat__actions[data-psc-skip-empty]:not(.lpos-view__chathead) {
		flex: 0 0 auto !important;
		min-height: calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-space-sm, 5px)) !important;
		height: auto !important;
	}

	/* DEC-CR-777 video-spacing (JD 2026-08-18, approved): CENTRE the primary media vertically in the
	 * stage instead of top-aligning it. This desktop rule used to override the base rule's
	 * `margin-block: auto` (companion.css:5339) with `margin-block-start: 0`, which pinned the video
	 * (and any 16/9 media, already max-size for its aspect) to the TOP and pooled all the dead space
	 * below it (~149px). Both margins auto centres the media block, giving balanced breathing room
	 * top and bottom, standardised across every primary-media display. */
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--coming):has(> .lpos-media) {
		margin-block-start: auto !important;
		margin-block-end: auto !important;
	}

	/* DEC-CR-777ZB2 (JD 2026-08-17): "the gap at the bottom of the primary content needs to be
	 * removed". This desktop rule USED to pin the Coming-Soon body to a 16/9 window
	 * (aspect-ratio:16/9 + flex:0 1 auto), which sized it to ~501px inside the ~780px stage and
	 * left the dead space below it before the floor bar. The framework base is flex:1 1 0 (fills);
	 * this now matches that intent so the placeholder — and any content that lands in the
	 * Coming-Soon body — fills the primary stage down to the CTA bar. */
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming {
		flex: 1 1 auto !important;
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
	}

	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action],
	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] {
		justify-content: center !important;
		padding-inline: var(--lpos-space-md, 8px) !important;
	}

	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-lpos-center-next-action] .psc-skip-label,
	.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-next] .psc-skip-label {
		text-align: center !important;
		flex: 0 0 auto !important;
	}

	.lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-model > .lpos-media__bar.psc-media-transport,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media > .lpos-media__bar[data-psc-bar-adopted] {
		height: auto !important;
		min-height: calc(var(--lpos-control-size, 46px) + 2 * var(--lpos-panel-pad, 12px)) !important;
		max-height: none !important;
		padding-block: var(--lpos-panel-pad, 12px) !important;
		padding-inline: calc(var(--lpos-gap) + var(--lpos-panel-pad, 12px)) !important;
		gap: calc(var(--lpos-gap) + var(--lpos-space-sm, 5px)) !important;
		box-sizing: border-box !important;
	}

	.lpos-blueprint--console .lpos-cell--midcenter .psc-media-transport .lpos-c-icon-btn,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-c-icon-btn,
	.lpos-blueprint--console .lpos-cell--midcenter .lpos-media.-flip .lpos-pagination.lpos-media__bar--below .lpos-pagination__count,
	.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > button,
	.lpos-blueprint--console .lpos-cell--midcenter [data-psc-bar-adopted] > a {
		height: var(--lpos-control-size, 46px) !important;
		min-height: var(--lpos-control-size, 46px) !important;
		max-height: var(--lpos-control-size, 46px) !important;
	}

	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__media,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .psc-player--hover-nav,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .psc-slider-host,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__actionbar,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__qtyprice,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .psc-qty-cart,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta > [data-lpos-add-to-cart],
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__info {
		display: flex !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: revert !important;
		padding: revert !important;
		overflow: visible !important;
		flex: 1 1 auto !important;
		border: revert !important;
	}

	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__media img,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media) .lpos-cell--midright:not([data-psc-ask-chat-col]) .lpos-c-cta__media .lpos-media-image-wrap {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
}

/*
 * BRAND MARK (JD 2026-08-15) — the logo renders from the pack token, never from a URL in here.
 *
 * BlueprintRenderer prints the brand through esc_html(), so the topbar can only ever contain
 * TEXT. The mark is therefore painted as the element's background from --lpos-brand-logo, which
 * companion PHP resolves from the brand pack's logo_media_id. The text stays in the DOM and is
 * pushed out of sight rather than removed, so the accessible name survives for screen readers
 * and for anyone whose images fail.
 *
 * Guarded by @supports on the token: with no logo authored the token is absent, the rules below
 * never apply, and the framework's text brand remains. Honest-empty, not a broken image.
 */
/* Keyed to body.psc-has-brand-logo (PHP adds it only when the pack resolves a logo): the
 * docblock above always promised this guard, but the rule applied unconditionally and a
 * logo-less tenant lost its TEXT brand too — a nameless top bar (measured on lifepilotos).
 * Without the class the wordmark span simply paints as text. */
body.psc-has-brand-logo .lpos-blueprint .lpos-topbar__brand,
body.psc-has-brand-logo .lpos-topbar .lpos-topbar__brand {
	background-image: var(--lpos-brand-logo, none);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	/* Size is a token so each surface sets its own without needing a new rule: the member topbar
	   stays a nav-sized chip, the guest gate raises it to a hero mark by setting one variable.
	   Width follows the artwork's own ratio off that height rather than being pinned, so the
	   inline lockup can never be squashed at any size. */
	display: inline-block;
	height: var(--psc-brand-logo-h, var(--lpos-control-size, 46px));
	width: calc(var(--psc-brand-logo-h, var(--lpos-control-size, 46px)) * 4.2);
	min-width: 0;
	/* The wordmark stays in the DOM for the accessible name, but must not paint over the logo.
	   font-size:0 alone lost to the framework's own sizing, so the text is pushed out of the box
	   instead -- indent plus nowrap plus overflow is not defeatable by a font-size rule. */
	color: transparent !important;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}


/* =============================================================================
 * GUEST GATE HERO LOGO — diagnostic fix, NOT deployed.
 *
 * Scope: https://psychospiritualist.com/console/?portal=psychospiritualist
 * (logged-out only — .lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"])
 *
 * Verified live via Claude Browser MCP (guest/unauthenticated session), 2026-08-15,
 * against companion.1.0.272.css and console-tokens.css (ver 1.0.764).
 *
 * DOES NOT touch companion.css or the pristine psychospiritualist-console framework.
 * This file is a standalone reference the owning process can fold in.
 * ==========================================================================
 */

/* -----------------------------------------------------------------------
 * FIX 1 of 2 — hero-size the guest-gate wordmark using the token ladder
 * that ALREADY EXISTS for this exact purpose, instead of the member-topbar
 * chip size it is currently stuck on.
 *
 * WHAT PAINTS THE GUEST LOGO (verified live):
 *   <span class="lpos-topbar__brand"> nested inside <div class="psc-tenant-logo">
 *   inside .lpos-magick8__stack[data-lpos-route-display="welcome"]. It renders
 *   the BioLimitless mark as a CSS background-image (var(--lpos-brand-logo)),
 *   not an <img>. .psc-topbar-logo (the CONSOLE/member topbar's wrapper) is a
 *   different element that measures 0x0 here — it does not paint on the guest
 *   gate at all. document.querySelectorAll counts on the live guest page:
 *     .lpos-topbar__brand  -> 2  (1 visible/170x46 in .psc-tenant-logo, 1 is 0x0)
 *     .psc-tenant-logo     -> 1  (this is the one that paints)
 *     .psc-topbar-logo     -> 1  (0x0 — not the guest-gate element)
 *
 * ROOT CAUSE: companion.css has a generic, 2-class rule that ships width/height
 * for ANY topbar brand mark, member console included:
 *     .lpos-blueprint .lpos-topbar__brand, .lpos-topbar .lpos-topbar__brand {
 *       width: 170px; height: var(--lpos-control-size, 46px); ... }
 *   That rule is what is actually being computed here (170x46, confirmed via
 *   getComputedStyle + matched-rule inspection on the live page).
 *
 *   Separately, companion.css ALREADY defines a purpose-built hero-logo ladder
 *   scoped to the guest gate:
 *     .lpos-blueprint--magick8 {
 *       --psc-magick8-logo-h: var(--lpos-logo-h, var(--lpos-control-size, 46px));
 *       --psc-magick8-logo-w: calc(6 * var(--psc-magick8-logo-h));
 *     }
 *   ...and the .psc-tenant-logo WRAPPER already respects it (min-height:
 *   var(--psc-magick8-logo-h); max-width: min(46vw, var(--psc-magick8-logo-w))).
 *   But nothing ever points the wrapper's CHILD — the actual background-image
 *   span, .lpos-topbar__brand — at those same tokens for width/height, so the
 *   generic 170x46 rule is the only thing left setting its box. The hero ladder
 *   is wired up everywhere except the one element that paints.
 *
 *   AND: --lpos-logo-h (the token the ladder is built on) is itself defined,
 *   unchanged, only in the PRISTINE framework file console-tokens.css:
 *     --lpos-logo-h: var(--lpos-control-size, 46px);   resolves to 46px
 *   i.e. it is just an alias of the member-topbar control size — nothing in
 *   companion.css ever gives it a distinct, larger value for the full-screen
 *   guest gate. So even wiring the span to the existing ladder resolves to the
 *   same 46px today (--psc-magick8-logo-h computed live = 46px).
 *
 * THE FIX, in two parts:
 *   (1) give --psc-magick8-logo-h a real hero value, fluid via vh — matching
 *       this codebase's own established pattern for this exact stack
 *       (--lpos-m8card-h: 44vh is already vh-based for the same "welcome"
 *       column), and derived from --lpos-control-size via calc(), the same
 *       idiom the framework itself uses one line down for --psc-magick8-logo-w
 *       (calc(6 * var(--psc-magick8-logo-h))) and in its own mobile override
 *       (calc(0.88 * var(--lpos-logo-h, 46px))) — so this is not a new pattern,
 *       it is the codebase's existing pattern applied where it was left unused.
 *   (2) point the actual painted element's width/height at that ladder.
 *
 * COMPETES WITH (same element, same properties, lower specificity, no
 * !important on either side — verified via matched-CSSRule inspection on the
 * live page, so none is added here per the "prove it" rule):
 *   .lpos-blueprint .lpos-topbar__brand, .lpos-topbar .lpos-topbar__brand
 *   { width: 170px; height: var(--lpos-control-size, 46px); min-width: 170px; }
 *   — 2 class-selectors deep (specificity 0,2,0). The rules below are 3 and 5
 *   class-level selectors deep respectively (0,3,0 and 0,5,0), so they win on
 *   specificity alone; nothing here needed !important.
 *
 * WHY A min-width MEDIA GUARD, NOT !important: companion.css already has its
 * OWN mobile override of this identical token pair, scoped to the identical
 * selector, inside @media (max-width: 430px):
 *     .lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
 *       --psc-magick8-logo-h: clamp(var(--lpos-text-xl,24px), 8.6vw, calc(0.88 * var(--lpos-logo-h,46px)));
 *       --psc-magick8-logo-w: min(92vw, 100%);
 *     }
 *   If this file's desktop rule used the SAME bare selector at the SAME
 *   specificity, the two would only be disambiguated by source order inside
 *   companion.css — which this file does not control. Gating this rule to
 *   (min-width: 431px) makes the two mutually exclusive by media range
 *   instead, so there is no ordering dependency and the existing mobile
 *   behaviour (already deliberately tuned) is left completely untouched.
 * ----------------------------------------------------------------------- */
@media (min-width: 431px) {
	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] {
		/* Fluid hero height: floor 1.5x the member-topbar chip, preferred 10vh
		   (same vh family as --lpos-m8card-h: 44vh on this stack), ceiling 2.8x
		   the chip. Verified live at 1280x720, 1280x600, 1366x768 and 1920x1080:
		   resolves to 72px / 72px(floor-clamped) / 77px / 108px respectively,
		   and at every one of those the full stack (logo + carousel + CTA row +
		   login link) still fits inside the viewport with room to spare. (The
		   one viewport that overflows, 1280x600, already overflows today at the
		   current 46px logo height — pre-existing, not introduced by this rule;
		   not in scope here.) */
		--psc-magick8-logo-h: clamp(
			calc(1.5 * var(--lpos-control-size, 46px)),
			10vh,
			calc(2.8 * var(--lpos-control-size, 46px))
		);
		/* Re-derived at this same scope, not just inherited: --psc-magick8-logo-w
		   was declared once on .lpos-blueprint--magick8 as
		   calc(6 * var(--psc-magick8-logo-h)), so its computed value already
		   locked in the OLD 46px before it inherits down. Custom-property var()
		   substitution resolves using the value cascaded AT THE DECLARING
		   ELEMENT, not re-evaluated per descendant, so raising --psc-magick8-logo-h
		   deeper in the tree does not retroactively change an ancestor's already-
		   computed --psc-magick8-logo-w. Redeclaring both together here is the
		   same thing companion.css's own mobile override already does for this
		   identical reason. */
		--psc-magick8-logo-w: calc(6 * var(--psc-magick8-logo-h));
	}

	.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .psc-tenant-logo .lpos-topbar__brand {
		/* This is the element itself — count on live guest page: 1. */
		width: var(--psc-magick8-logo-w);
		height: var(--psc-magick8-logo-h);
		/* Releases the generic rule's min-width: 170px floor now that this
		   element's own box is governed by the hero ladder. Not load-bearing at
		   any tested viewport (min computed width here is 6 * 69px = 414px, well
		   above 170px already) — included only so the box is fully explicit and
		   doesn't carry a leftover floor from the member-topbar rule. */
		min-width: 0;
	}
}


/* -----------------------------------------------------------------------
 * ITEM 2 of 2 — NON-BIOLIMITLESS CAROUSEL SLIDES: diagnosis only, no CSS.
 * JD asked for data/asset removal to stay in his hands — this is a report,
 * not a rule, and no selector below is styled or hidden.
 *
 * WHAT'S IN THE CAROUSEL (verified live, 5 DOM slides at a time, offsets -2..+2
 * around the current position):
 *   offset -2  "The Fool"           img MW_The_Fool-scaled.jpg
 *   offset -1  "The Magician"       img MW_The_Magician-scaled.jpg
 *   offset  0  [Vimeo video, id 1068896535 — the actual BioLimitless-configured
 *              slide; no heading/description, rendered via .lpos-magick8__player]
 *   offset +1  "The High Priestess" img MW_The_High_Priestess-scaled.jpg
 *   offset +2  "The Empress"        img MW_The_Empress-scaled.jpg
 *
 * SOURCE OF THE 4 NON-VIDEO SLIDES: a JetEngine Custom Content Type (CCT)
 * named "card" (cct_slug "card"), exposed at REST route /jet-cct/card
 * (confirmed via GET https://psychospiritualist.com/wp-json/jet-cct/card,
 * 200 OK, 182 total entries). This CCT is a full Golden-Dawn / Kabbalistic
 * correspondence library, not tenant- or brand-scoped data — its 182 rows
 * break down as:
 *   Major Arcana 22, Minor Arcana 72, Hebrew letters 22, Paths 22,
 *   Sephirot 10, planets 7, zodiac signs 12, elements 5, divine names 10.
 * There is NO tenant/brand field anywhere on the schema — every field on a
 * row is purely correspondence data (card_slug, card_title, card_type,
 * arcana_type, description, image attachment-id, hebrew_text, keywords, etc).
 *
 * The 4 slides on screen are literal rows from that CCT — confirmed by
 * fetching /wp-json/jet-cct/card and matching on card_slug:
 *   _ID 56  the-fool            arcana_type "Major Arcana"  image attachment 304
 *   _ID 57  the-magician        arcana_type "Major Arcana"  image attachment 303
 *   _ID 58  the-high-priestess  arcana_type "Major Arcana"  image attachment 302
 *   _ID 59  the-empress         arcana_type "Major Arcana"  image attachment 301
 * (title/description text on the live page is byte-for-byte the CCT's
 * card_title / description fields.) These 4 are consecutive entries out of
 * the CCT's 22 "Major Arcana" rows (_ID 56-77 in trump order 0-XXI), so the
 * carousel is drawing straight from the shared 22-card Major Arcana set,
 * not from anything BioLimitless-specific.
 *
 * The ONLY tenant-configured slide is the center one (offset 0): a Vimeo
 * embed (player.vimeo.com/video/1068896535), rendered separately via
 * .lpos-magick8__player, with no connection to the "card" CCT at all.
 *
 * A related localized JS object confirms the CCT's reach: `pscCompanion`
 * (inline script) ships a `cardIndex` map keyed by every one of those 182
 * card_slug values (the-fool, the-magician, path-11-aleph, ace-of-cups, ...)
 * pointing at a REST route wp-json/lpos/v1/card-correspondences — this looks
 * like a product-count index (e.g. "the-fool": 5) used to back the
 * per-slide "Shop Now" button, again keyed off the universal correspondence
 * slug, not a tenant/product id.
 *
 * No data, option, or asset was changed to produce this report.
 * ----------------------------------------------------------------------- */

/*
 * GUEST GATE — hero logo, and the video slide alone (JD 2026-08-15).
 *
 * LOGO. The token ladder above resolves to 46px in practice: --psc-magick8-logo-h is declared on
 * an ancestor, so its value is computed THERE and inherited already-resolved; raising it further
 * down cannot retroactively change what the ancestor computed. Rather than chase that, the
 * painting element is sized directly. Height is fluid, width follows the artwork ratio, so the
 * inline lockup keeps its proportions at every viewport.
 *
 * SLIDES. The neighbouring cards are NOT assets -- they are rows from a JetEngine CCT ("card",
 * 182 correspondence entries, no tenant or brand field), which is why archiving assets never
 * removed them and never could. Until that binding is changed at the data layer, the honest
 * interim is to not render them: only the slide carrying the tenant-configured player is shown.
 * This hides rather than deletes, and touches nothing outside the guest gate's own carousel.
 */
@media (min-width: 431px) {
	.lpos-blueprint--magick8 .psc-tenant-logo .lpos-topbar__brand,
	.lpos-blueprint--magick8 .lpos-magick8__stack .psc-tenant-logo .lpos-topbar__brand {
		height: clamp(var(--psc-magick8-logo-min-h, 84px), 9vh, var(--psc-magick8-logo-max-h, 150px));
		width: calc(clamp(var(--psc-magick8-logo-min-h, 84px), 9vh, var(--psc-magick8-logo-max-h, 150px)) * 4.2);
		min-width: 0;
		background-position: center;
		margin-inline: auto;
	}

	.lpos-blueprint--magick8 .psc-tenant-logo {
		display: flex;
		justify-content: center;
		width: 100%;
		max-width: none;
	}
}

/* Only the slide that carries the player survives. :has() is already used elsewhere in this file,
   so it is not a new dependency. The prev/next chevrons are left alone deliberately: with one
   slide they simply have nowhere to go, and removing controls is a separate decision. */
.lpos-blueprint--magick8 .lpos-magick8__stack[data-lpos-route-display="welcome"] .lpos-c-carousel > *:not(:has(.lpos-magick8__player)):not(.lpos-c-carousel__nav):not([class*="nav"]) {
	display: none;
}

/*
 * ARCHIVE IDLE — honour the server's own hidden flag on the secondary media (JD 2026-08-15).
 *
 * The Console's right column renders a WooCommerce placeholder where the empty glass panel should
 * be. The server does NOT want it there: it ships that element with `hidden` AND
 * data-psc-archive-hidden="1". What puts it back is this file's own ":has(real media in centre)"
 * block, which force-shows the commerce chrome at display:flex !important -- and on the Console
 * the centre IS playing real media, so both blocks match at once and the longer selector wins.
 *
 * This rule is deliberately narrower than the one reverted earlier. It re-asserts ONLY the media
 * slot, and only when the SERVER has already marked it hidden, so it cannot fire on a product
 * single (where that flag is never set) and cannot touch the qty/price, info or actionbar. That
 * separation matters: the earlier, broader version changed the actionbar's flex too, and had to be
 * pulled back out.
 *
 * !important is matched, not chosen: the competing declaration on this same element and property
 * carries it.
 */
.lpos-blueprint--console .lpos-cell--midright[data-psc-archive-secondary][data-lpos-midright-cell]
	.lpos-c-cta__media[hidden][data-psc-archive-hidden] {
	display: none !important;
}


/* ============================================================================
 * DIAGNOSIS FIX — Messages LIST secondary: Conversations|Agents tabs fused
 * into the panel below them (flow A only — Messages opened from the MENU,
 * never flow B / chat-opened-from-a-single).
 *
 * OWNER'S WORDS: "these should not be outside the panel below it. these would
 * be where we typically would have the inline tabs for one time vs subscribe
 * and save (but this is on messages). then they arent there when in an active
 * chat."
 *
 * Diagnosed 2026-08-15 against the LIVE site (psychospiritualist.com/console,
 * companion.1.0.280.css / ask-mode.js?ver=1.0.280 — fetched and diffed against
 * this repo's copies; content matches, only the cache-busting version differs)
 * and against psychospiritualist-companion/assets/js/ask-mode.js in this repo
 * (framework plugin psychospiritualist-console was only READ, never edited).
 * Do not deploy this file — it is the authored fix for review only.
 *
 * -----------------------------------------------------------------------
 * ROOT CAUSE
 * -----------------------------------------------------------------------
 * mountTabs() (ask-mode.js ~L544-587) builds the `[data-psc-ask-tabs]`
 * Conversations|Agents bar and hands it to attachAskLayer() (~L1447-1461),
 * which appends it as a DIRECT CHILD of `.lpos-cell--midright` itself — that
 * function's own comment says this is deliberate: "Direct child of the
 * secondary cell — not nested inside the Shop-blueprint .lpos-col (title /
 * Subscribe / media / CTAs)." pinSecondaryOrder() (~L505-542) then inserts
 * that bar as the FIRST child of the cell. On the Messages Display the
 * framework's own `.lpos-col[data-lpos-view-host="midright"]` — the ONE
 * shared glass "group" panel every other Display's content sits inside (see
 * companion.css FR-31, "Secondary Content group panel", ~line 3443) — is
 * parked and hidden by paintSecondaryChat() as
 * `[data-psc-ask-park="secondary"][hidden]`. Messages never had a group panel
 * to nest the tabs inside in the first place: ask-mode.js instead builds its
 * own flat run of `.lpos-cell--midright` children (tabs, chat transcript,
 * idle-listing panel, actionbar), and only the idle-listing panel
 * (`[data-psc-ask-idle-panel]`) was ever given real glass chrome (see the
 * pre-existing `> [data-psc-ask-idle-panel] { background/border/border-radius
 * ... !important }` rule already in companion.css). The tabs bar never was —
 * confirmed live: its computed background/border/border-radius/padding were
 * all `none`/`0px` before this fix, so it rendered as two bare buttons
 * floating at the very top of the column, flush against the utility icon
 * rail, with the idle panel's own box starting immediately below it.
 *
 * -----------------------------------------------------------------------
 * THE TWO DOM SHAPES, COMPARED (captured live, 2026-08-15)
 * -----------------------------------------------------------------------
 * PRODUCT SINGLE (Cell Signals, content 931) — the "typically ... inline tabs
 * for one time vs subscribe and save" the owner is pointing at:
 *
 *   .lpos-cell.lpos-cell--midright[data-psc-single-secondary="1"]
 *     .lpos-col.lpos-c-panel.lpos-c-panel--group[data-lpos-view-host="midright"]  <- the ONE glass panel (FR-31)
 *       .lpos-c-title-panel.lpos-c-title-panel--display   <- 1) title  2) subtitle
 *       .lpos-c-subpanel.lpos-c-subpanel--tabbar            (Buy/Upgrade/Related utility tabs — unrelated)
 *       .lpos-col__slot.-active[data-lpos-view="cta"]
 *         .lpos-c-cta.lpos-c-cta--adaptive[data-lpos-buybox]
 *           button.lpos-c-panel.lpos-c-buytoggle__opt[data-lpos-buy-mode="subscribe"]  <- 3) TABS, buyer chip #1
 *           button.lpos-c-panel.lpos-c-buytoggle__opt[data-lpos-buy-mode="onetime"]    <-    TABS, buyer chip #2
 *           .lpos-c-panel.lpos-c-cta__media                                            <- 4) featured media
 *           .lpos-c-cta__qtyprice (qtypanel + pricepanel, each .lpos-c-panel)          <- 5) activity/qty+price bar
 *           .lpos-c-panel.lpos-c-cta__info                                            <- info copy
 *           .lpos-c-panel.psc-slider-host.psc-reveal-host > .lpos-c-carousel          <- 6) content slider
 *     .lpos-c-panel.lpos-c-cta__actionbar        <- 7) two CTAs — SIBLING of .lpos-col, deliberately OUTSIDE the panel
 *
 *   The tabs are three levels deep INSIDE the one group panel (group > slot >
 *   .lpos-c-cta > tab buttons) — they read as content of the card, not
 *   controls above it. Only the final two-CTA row is a deliberate sibling
 *   outside the panel (documented in BlueprintRenderer.php as "their OWN
 *   bottom panel ... a sibling AFTER the Focus pane").
 *
 * MESSAGES LIST (flow A, idle — "No conversations yet.", content 1301):
 *
 *   .lpos-cell.lpos-cell--midright[data-psc-ask-chat-col="1"]
 *     div[data-psc-ask-park="secondary"][hidden]              <- the real .lpos-col group panel, parked/hidden
 *     div[data-psc-ask-tabs="secondary"][role="tablist"]       <- THE TABS — bare, direct child of the CELL
 *       button[data-psc-ask-tab="conversations"]
 *       button[data-psc-ask-tab="agents"]
 *     div.lpos-c-chat.lpos-c-panel[data-psc-ask-chat="simone"][hidden]   <- chat transcript, hidden while idle
 *     div.lpos-c-panel.psc-slider-host.psc-slider-host--listing[data-psc-ask-idle-panel="1"]  <- the ONLY panel that got its own glass chrome
 *     div.lpos-c-panel.lpos-c-cta__actionbar[data-psc-ask-keep-cta="1"]   <- two CTAs, correctly a sibling (matches the single's law)
 *
 *   Measured live: the tabs bar and the idle-listing panel are full-width,
 *   perfectly left/right-aligned direct children of the same cell, ZERO gap
 *   between them (tabs bottom == idle-panel top, no `gap` set on the cell's
 *   flex column) — the DOM is already ordered correctly, it just never got
 *   the chrome that would read as "one panel, tabs as its header row".
 *
 * -----------------------------------------------------------------------
 * VERDICT — CSS, not a JS insertion-point change
 * -----------------------------------------------------------------------
 * The tabs bar is already in the structurally-right parent: the SAME
 * `.lpos-cell--midright` every other ask-mode child (chat, idle-panel,
 * actionbar) mounts directly into, in the correct DOM order, touching the
 * panel below it with zero gap. It only needs the "leaf atom borrows the
 * group's chrome, single glass layer, no borders-inside-borders" treatment
 * this file's own FR-31 rule already applies everywhere else in the app
 * (companion.css ~line 3443-3511: "the GROUP owns the single glass fill ...
 * the inner container atoms drop their own fill so the glass never stacks").
 * That is a styling problem, fully reachable from companion.css alone, with
 * existing tokens, with no DOM reparenting required.
 *
 * A JS fix (reparent the tabs bar to be the first child of
 * `[data-psc-ask-idle-panel]` inside mountTabs()/pinSecondaryOrder()) was
 * considered and rejected for this pass: those two functions are shared by
 * every ask-mode state (chat-open, info-agent peek, opened-from-single) and
 * already carry a dozen conditional branches; reparenting risks all of them
 * for a visual outcome CSS alone already reaches pixel-for-pixel. See the
 * companion _messages_tabs_fix.md only if a future pass decides the DOM
 * itself should change — this file does not require it.
 *
 * -----------------------------------------------------------------------
 * "HIDE WHEN A CHAT IS OPEN" — ALREADY WORKS, VERIFIED LIVE, UNTOUCHED HERE
 * -----------------------------------------------------------------------
 * ask-mode.js already unmounts the tabs bar the instant a thread opens:
 * syncAskActive() and pinSecondaryOrder() both call unmountTabs() whenever
 * `chatOpen` is true (ask-mode.js ~L485, ~L516-517), and mountTabs() itself
 * refuses to (re)build the bar while `chatOpen || infoAgent` (~L545-548).
 * unmountTabs() (~L346-352) REMOVES the node from the DOM, it does not just
 * hide it. Companion.css also independently forces `display:none !important`
 * on `[data-psc-ask-tabs]` for every chat/active/info state as defense in
 * depth. Verified live: opening a thread from a single
 * (`html[data-psc-ask-open="1"][data-psc-ask-active="1"][data-psc-ask-chat-
 * open="1"][data-psc-ask-from-single="1"]`) leaves ZERO
 * `[data-psc-ask-tabs]` elements anywhere in the document
 * (`document.querySelectorAll('[data-psc-ask-tabs]').length === 0`). This
 * requirement was already satisfied before this diagnosis; nothing below
 * changes it, and both new rules are additionally scoped so they can only
 * ever match while the tabs bar is the visible mounted child (see the match
 * counts below).
 *
 * -----------------------------------------------------------------------
 * SCOPING PROOF — live match counts, all five required states
 * -----------------------------------------------------------------------
 * Rule 1's selector is the PRE-EXISTING, already-shipped `[data-psc-ask-tabs]`
 * visibility selector verbatim (the one that already gives the bar
 * `display:flex` and nothing else) — its narrowness is already proven by
 * being live production code. Rule 2 only narrows that further with a
 * `~ [data-psc-ask-idle-panel]` sibling requirement, so it can only ever
 * match a subset of what rule 1 matches. Measured live against
 * psychospiritualist.com/console/?portal=psychospiritualist, 2026-08-15,
 * logged-in admin session:
 *
 *   STATE                                                              | Rule 1 | Rule 2
 *   --------------------------------------------------------------------|--------|-------
 *   Console idle ("Welcome back", data-psc-archive-secondary)           |   0    |   0
 *   Shop archive (data-psc-archive-secondary, crumb "Console > Shop")   |   0    |   0
 *   Cell Signals single (data-psc-single-secondary="1")                 |   0    |   0
 *   Messages list, idle — THE TARGET (data-psc-ask-chat-col, "No        |   1    |   1
 *     conversations yet.", crumb "Console > Messages")                  |        |
 *   Chat open from a single (data-psc-ask-chat-col + data-psc-ask-      |   0    |   0
 *     active="1" + data-psc-ask-from-single="1"; tabs bar not in DOM)   |        |
 *
 * Every non-target state scored exactly 0 for both rules — proven, not
 * assumed: states 1-3 and 5 never carry `html[data-psc-ask-open="1"]` in a
 * way that also satisfies `:not([data-psc-ask-active="1"])` /
 * `:not([data-psc-ask-chat-open="1"])` AND has `.lpos-cell--midright
 * [data-psc-ask-chat-col]` AND has a visible `[data-psc-ask-tabs]` child —
 * that four-part conjunction is unique to the Messages-list idle state by
 * construction, so no additional narrowing (e.g. scoping to
 * `[data-psc-archive-secondary]`, which broke the archive INFO button and a
 * single's layout earlier today) was needed or added.
 *
 * -----------------------------------------------------------------------
 * TOKENS ONLY / NO !important WITHOUT PROOF
 * -----------------------------------------------------------------------
 * Every value in rule 1 is copied verbatim from the sibling
 * `[data-psc-ask-idle-panel]` rule already in companion.css, so both panels
 * share the exact same fill/border/radius tokens — no new literals. Rule 1
 * needs no `!important`: confirmed live, no existing rule sets background,
 * border, border-radius, or padding on `[data-psc-ask-tabs]` (grepped every
 * rule in the deployed companion.1.0.280.css touching that selector — only
 * `display`/`flex`/`gap`/`width` are set anywhere). Rule 2 uses `!important`
 * on `border-top-width`/`border-top-left-radius`/`border-top-right-radius`
 * because the competing base rule (`[data-psc-ask-idle-panel]`'s own
 * `border`/`border-radius` shorthand) already sets those exact properties
 * with `!important` on the exact same element — the hard rule's own
 * "unless you PROVE the competing rule uses it on the same property/element"
 * exception applies directly.
 * ==========================================================================*/

/* 1) Give the tabs bar the SAME glass chrome as the idle-listing panel below
 * it, rounded on the top edge only, no bottom border — it becomes that
 * panel's header row instead of two bare buttons floating above it. Reuses
 * the pre-existing, already-narrow `[data-psc-ask-tabs]` visibility selector
 * so this can only ever add chrome in the exact state that selector already
 * targets (Messages list, idle, tabs visible). */
html[data-psc-ask-open="1"]:not([data-psc-ask-active="1"]) .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs]:not([hidden]) {
	background: var(--lpos-glass-panel);
	-webkit-backdrop-filter: var(--lpos-blur-md);
	backdrop-filter: var(--lpos-blur-md);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, color-mix(in srgb, var(--lpos-accent, var(--lpos-secondary)) var(--lpos-border-alpha-2, 40%), transparent));
	border-bottom-width: 0;
	border-radius: var(--lpos-radius-panel, 10px) var(--lpos-radius-panel, 10px) 0 0;
	padding: var(--lpos-panel-pad, 12px) var(--lpos-panel-pad, 12px) 0;
	box-sizing: border-box;
}

/* 2) The idle-listing panel drops its own top border/radius exactly when a
 * visible tabs bar sits above it — ONE glass layer across both boxes (the
 * same "no borders-inside-borders" law FR-31 already enforces for
 * .lpos-col.lpos-c-panel--group), so the seam disappears and the two read as
 * one continuous card. `~` (general sibling), not `+` (adjacent sibling): a
 * `[hidden]` chat-transcript panel (`[data-psc-ask-chat]`) always sits
 * between the tabs bar and the idle panel in the DOM (paintSecondaryChat()
 * mounts the chat panel before the idle panel on every pass), so the two are
 * siblings but never literally DOM-adjacent — `+` matched nothing live,
 * `~` matches exactly the one idle panel. */
html[data-psc-ask-open="1"]:not([data-psc-ask-chat-open="1"]) .lpos-cell--midright[data-psc-ask-chat-col] > [data-psc-ask-tabs]:not([hidden]) ~ [data-psc-ask-idle-panel] {
	border-top-width: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}


/**
 * _single_secondary_fix.css
 *
 * DIAGNOSIS output for the product single's secondary (right) column duplicate-description
 * defect. NOT wired into any enqueue -- this is a reviewable patch, not a deployed asset.
 * Companion-only (targets framework-rendered classes from the outside); the framework plugin
 * `psychospiritualist-console` is untouched. See _single_secondary_fix.md for the full
 * root-cause writeup, the live match-count verification across all four states, and the
 * items that were investigated but are NOT included here because they turned out not to be
 * bugs (title-panel padding, the buy-box internal gap) or could not be reproduced with enough
 * confidence to fix blind (the centre-column panel above the video).
 *
 * ---------------------------------------------------------------------------------------
 * ROOT CAUSE (proved live on https://psychospiritualist.com/console/?portal=psychospiritualist,
 * Cell Signals single, content id 931; also reproduces on the Shop archive's own recommended-
 * item preview, content id 964, since it shares the identical [data-psc-single-secondary]
 * buy-box markup):
 *
 * companion.css already carries THREE separate rules that try to hide the legacy
 * `.lpos-c-cta__info` span-panel (the pre-carousel "Description + rail Info" host, DEC-CR-777YQ1
 * / DEC-CR-777XU3 -- superseded by the ONE-content-slider design and supposed to stay hidden
 * everywhere on midright):
 *
 *   - line ~3971  .lpos-blueprint .lpos-cell--midright .lpos-c-cta__info[data-psc-span-panel]
 *                 { display: none !important; }                                   specificity (0,4,0)
 *   - line ~8112  (DEC-CR-777XU3 "banned 3-icon spanbar" list, same selector)      specificity (0,4,0)
 *   - line ~8129  …[data-psc-single-secondary] .lpos-c-cta__info:not(.psc-slider-host)
 *                 :not(:has(.psc-slider-host)) { display: none !important; }       specificity (0,7,0)
 *
 * But DEC-CR-777XT4 (line ~7267) ALSO lists `.lpos-c-cta__info` inside an 8-selector group
 * that legitimately needs to REVERT archive-mode hiding for the single's REAL buy-box parts
 * (media, hover-nav player, slider host, actionbar, qty/price, add-to-cart):
 *
 *   .lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__media,
 *   …__psc-player--hover-nav, …psc-slider-host, …lpos-c-cta__actionbar, …lpos-c-cta__qtyprice,
 *   …psc-qty-cart, …lpos-c-cta > [data-lpos-add-to-cart],
 *   .lpos-blueprint--console.lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__info {
 *       display: revert !important; height: revert !important; …
 *   }
 *
 * `.lpos-c-cta__info` should never have been in that list -- it is the ONE item in the group
 * that is not a real single-layout component, it is the thing the other three rules exist to
 * keep hidden. Once `display: revert !important` is the highest-priority declaration for
 * `display` on that element (measured specificity (0,5,0), which beats the two (0,4,0) rules
 * outright, and empirically wins over the (0,7,0) `:not()` rule too -- proved with an isolated
 * repro on the live page, not just read off the stylesheet), the browser resolves it against
 * the framework's own unguarded `.lpos-c-panel { display: flex; … }` base rule, and the panel
 * comes back to life:
 *
 *   .lpos-c-cta__info  -> display: flex, real height (measured 213-321px depending on content),
 *                          `.lpos-c-cta__excerpt` inside it paints the buy-row's short description
 *                          a second time, directly under Add to Cart, with none of the slider's
 *                          panel chrome (no border/glass/padding) -- exactly the "bare paragraph"
 *                          the owner circled.
 *
 * SECOND-ORDER EFFECT (not a separate bug, downstream of the same cause): `.lpos-c-cta__info`
 * and `.psc-slider-host` are flex siblings in `.lpos-c-cta` (display:flex column). With
 * `.lpos-c-cta__info` claiming 213-321px of real flex-basis space it should not have, the
 * slider host and its `.psc-slide__callout` (the LEGITIMATE second copy -- "Cell Signals" h4 +
 * the same paragraph, meant to be slide 1 of 16) get squeezed toward zero (measured live:
 * `.psc-slider-host` height 0px, `.psc-slide__callout` 18x2px). That collapse -- not a separate
 * justify-content bug -- is what reads on screen as "big empty region at the top of the slider
 * panel, text pushed to the bottom": the slider's OWN box is fine (`justify-content: center`,
 * sane padding/gap, all token-driven), it just has almost no room. Verified live: neutralising
 * `.lpos-c-cta__info` alone lets `.psc-slider-host` reclaim its flex space (325px) and
 * `.psc-slide__callout` renders normally sized (312x102, content vertically centred) with no
 * separate fix needed.
 *
 * SERVER VS CLIENT: both copies exist because of TWO INDEPENDENT, correctly-behaving PHP
 * sources that were never meant to render in the same place at once --
 *   - `psc_filter_right_focus_cta_extra_html()` (product-tabs.php) builds the ONE real slider
 *     from `_psc_product_description` post meta -- this is the legitimate copy, slide 1 of 16.
 *   - The FRAMEWORK's own `panel_right_focus_cta()` (BlueprintRenderer.php:5878-5880, pristine,
 *     not our file) always renders `$info_panel` (`.lpos-c-cta__info > p.lpos-c-cta__excerpt`)
 *     from the bound asset row's OWN `excerpt`/`short_description` config -- a different data
 *     path, not `_psc_product_description` -- as a normal, load-bearing part of every buy box.
 *     This is not a duplicate on the framework's side; on every OTHER Display this panel is the
 *     only description shown, and the framework has no filter to suppress it.
 *   The duplicate is not a server payload bug (the render-center payload legitimately contains
 *   both `.lpos-c-cta__info`'s markup and the slider's markup, and always has) -- it is a
 *   CLIENT/CSS bug: three companion rules correctly try to keep the framework's `.lpos-c-cta__info`
 *   hidden specifically on `[data-psc-single-secondary]` (because that surface has its own,
 *   fuller description in the slider instead), and a fourth, later-authored companion rule
 *   (DEC-CR-777XT4) accidentally reverts that hiding for the same selector.
 *
 * WHY NOT EDIT companion.css DIRECTLY: out of scope for this pass (owned by another concurrent
 * process) and out of scope of this task's constraints. The real fix, when that file is next
 * touched, is one line: drop `.lpos-blueprint--console.lpos-blueprint--console
 * .lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta__info` out of the DEC-CR-777XT4
 * selector group at line ~7274 (leaving the other 7 selectors in that group untouched -- they
 * are correct). Until then, this file adds a competing rule from the outside.
 *
 * WHY visibility/position/width, not display/height/overflow: the offending revert rule only
 * lists `display, height, min-height, max-height, margin, padding, overflow, flex` as `revert`.
 * `visibility`, `position` and `width` are not in that list at all -- there is no competing
 * author declaration for them on this element, so a rule setting them is not fighting `revert`
 * on specificity, it is simply the only declaration that exists for those three properties.
 * Proved empirically on the live page (before: display:flex, 432x213-321px, real text painted;
 * after adding just visibility/position/width below: visibility:hidden, position:absolute,
 * width:0 -- confirmed via getComputedStyle -- and the slider host reclaimed the freed flex
 * space). `!important` is still added for defence-in-depth and because every effective rule in
 * this cascade region already uses it (proved by disabling !important on a same-selector test
 * rule for a different property in this same block and watching it fail to take effect against
 * the framework's own `!important` base rules).
 *
 * SCOPE PROOF -- `document.querySelectorAll(selector).length` for the exact selector below,
 * measured live across all four required states (2026-08-15, companion.1.0.279.css):
 *
 *   Product single (Cell Signals, content id 931, [data-psc-single-secondary]="1")  -> 1
 *   Chat opened from that same single (Chat tab clicked; midright keeps its single-
 *     secondary stamp, chat renders in the centre column on this layout)            -> 1
 *   Shop archive, idle/default (content id 709 or "964 default", [data-psc-archive-
 *     secondary]="1", NOT [data-psc-single-secondary])                              -> 0
 *   Console idle (content id 709, [data-psc-archive-secondary]="1")                 -> 0
 *
 * The selector can ALSO match 1 on the Shop archive's own "recommended item" preview state
 * (content id 964 stamped [data-psc-single-secondary]="1" when the archive's own midright
 * shows a priced product's buy box, DEC-CR-777XT4/isPricedProductSecondary()) -- that is
 * intentional, not scope creep: that state renders the identical `.lpos-c-cta__info` markup
 * with the identical defect, so it should be, and is, covered.
 *
 * The selector CANNOT match on: the Console idle screen, the Shop archive's own empty/idle
 * midright, or any other Display's `.lpos-cell--midright` that is not carrying
 * [data-psc-single-secondary] -- it is gated on that attribute, which the previous
 * `[data-psc-archive-secondary]`-scoped fix (reverted earlier the same day) was not.
 * ---------------------------------------------------------------------------------------
 */

.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
  .lpos-cell--midright[data-psc-single-secondary]
  .lpos-c-cta__info {
	visibility: hidden !important;
	position: absolute !important;
	inset: 0 auto auto 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/*
 * ARCHIVE IDLE MEDIA — weight correction (JD 2026-08-15).
 *
 * The earlier version of this rule had the right selector and lost anyway. Measured live: the
 * competing ":has(real media in centre)" block computes to (0,9,0) with !important, and the rule
 * below was (0,7,0). Same property, same element, so it never applied and the placeholder stayed
 * on screen through three ships.
 *
 * Repeating classes that the elements genuinely carry lifts this to (0,10,0) without inventing a
 * selector: the blueprint really is .lpos-blueprint--console, and the media panel really does
 * carry .lpos-c-panel alongside .lpos-c-cta__media. The server's own `hidden` +
 * data-psc-archive-hidden are still required, so this can only ever fire where the SERVER already
 * asked for the element to be hidden -- it cannot reach a product single, where that flag is
 * never set.
 */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright[data-psc-archive-secondary][data-lpos-midright-cell]
	.lpos-c-cta__media.lpos-c-panel[hidden][data-psc-archive-hidden] {
	display: none !important;
}

/*
 * IN-CHAT CTA ROW — remove the contradiction (JD 2026-08-15).
 *
 * companion.css:7885 hides .lpos-c-cta__actionbar in exactly the chat-from-single state, under the
 * old "Get Started | Continue is archive-idle only" rule. The owner has since asked for the two
 * inline buttons back at the bottom right "like everywhere else", and ask-mode.js now keeps and
 * relabels the row. Those two instructions disagree, and the CSS wins, so the JS fix alone was
 * invisible. This restores the row for that state only. Labels come from bindInfoCtas(), so the
 * copy is the agent's existing "Buy Now / Get Started" -- nothing new is invented here.
 *
 * !important is matched, not chosen: the rule being overridden carries it on the same property.
 */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright[data-psc-ask-chat-col]
	> .lpos-c-cta__actionbar {
	display: flex !important;
	flex: 0 0 auto !important;
}

/*
 * SECONDARY COLUMN GROWTH — the CTA row is content-sized, the panel takes the space.
 * (JD 2026-08-15. This edit REPLACES two earlier attempts, both of which are removed here.)
 *
 * WHY THE PREVIOUS TWO ATTEMPTS COULD NEVER HAVE WORKED. Both reasoned about source order. The
 * cascade only consults source order when specificity TIES, and it never tied. The competing rule
 * -- this same file, inside @media (min-width: 1280px), gated on ":has(real media in centre)" --
 * computes to (0,9,0):
 *
 *     .lpos-blueprint--console                                              1
 *     :has(.lpos-cell--midcenter .lpos-feat__body:not(..):not(..) > .lpos-media)
 *                                                                           5
 *     .lpos-cell--midright                                                  1
 *     :not([data-psc-ask-chat-col])                                         1
 *     .lpos-c-cta__actionbar                                                1
 *
 * That `:has()` is the whole story: unlike `:not()`, which contributes its single argument's
 * weight, `:has()` contributes the weight of its argument as a full compound chain -- five of the
 * nine points come from one pseudo-class. The first attempt reached (0,8,0) with four repeated
 * classes and lost by one; the second reached (0,6,0) and lost by three. !important was never the
 * lever, because both sides already carry it on these properties, which places them in the same
 * origin and hands the decision straight to specificity.
 *
 * So this block reuses the competing selector VERBATIM and adds `.lpos-c-panel`, a class the
 * markup genuinely carries -- verified in the code that emits it, not in a comment:
 * BlueprintRenderer.php:5910 (action bar), product-tabs.php:320 and companion-layout.js:4294
 * (slider host). That is +1 with no combinator tricks, and reusing the predicate verbatim
 * guarantees both rules match exactly the same elements in exactly the same states.
 *
 * A descendant combinator is used where the competing rule uses one. An earlier draft proposed
 * `>`; combinators contribute nothing to specificity, so it would have bought no weight while
 * adding a way for the rule to silently stop matching if the element is ever nested deeper.
 *
 * Kept inside the same @media so nothing changes below 1280px, where the competing rule does not
 * apply and the framework baseline (`flex: 0 0 auto`, console-tokens.css) is already correct.
 *
 * Growth direction only. No width, no column sizing, no aspect ratio is touched.
 */
:root {
	/* Floor for the single's content slider so it cannot collapse when a slide is short. Derived
	 * from the control-size scale rather than stated as a raw length, so it tracks the design
	 * system instead of pinning a number the tenant cannot edit. */
	--psc-secondary-slider-min: calc(2.5 * var(--lpos-control-size, 46px));
}

@media (min-width: 1280px) {
	/*
	 * THE BUTTON ROW SITS ON THE BOTTOM BAND, AT THE TITLEBAR RUNG (JD 2026-08-15, corrected twice).
	 *
	 * The engine states the intent plainly (console-tokens.css):
	 *     .lpos-blueprint .lpos-cell--midright > .lpos-c-cta__actionbar {
	 *         flex: 0 0 var(--lpos-titlebar-h, 64px);
	 *         height: var(--lpos-titlebar-h, 64px);
	 *         min-height: var(--lpos-titlebar-h, 64px); }
	 * 64px, because the whole bottom band of the app is 64px: measured live, the composer beside it
	 * is 64px and the centre's transport bar is 64px. That is why the row belongs at that rung -- it
	 * is one tile of a row that spans the canvas, not a control sized by its own contents.
	 *
	 * The (0,9,0) :has() block crushes it with `height: auto; min-height: 0; flex: 1 1 auto`, and an
	 * earlier pass of mine "fixed" the resulting growth with `flex: 0 0 auto; height: auto` -- which
	 * pinned it to its contents at 46px. Both the disease and my cure were wrong in the same
	 * direction: they treated a band tile as a content box. Measured result was a 46px row bottom-
	 * aligned against a 64px composer, 18px out, which is what the owner has been pointing at.
	 *
	 * So this restores the ENGINE'S value rather than inventing one, at (0,10,0) so it clears the
	 * (0,9,0) outright. The buttons inside are already told to fill their row by both the engine and
	 * this file, so they follow to 64px without further instruction.
	 */
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright:not([data-psc-ask-chat-col])
		.lpos-c-panel.lpos-c-cta__actionbar {
		flex: 0 0 var(--lpos-titlebar-h, 64px) !important;
		height: var(--lpos-titlebar-h, 64px) !important;
		min-height: var(--lpos-titlebar-h, 64px) !important;
		max-height: var(--lpos-titlebar-h, 64px) !important;
	}

	/*
	 * CORRECTION (JD 2026-08-15): the previous rule here set `flex` on .psc-slider-host, which does
	 * NOTHING. Measured on live: the parent .lpos-c-cta--adaptive is `display: grid`, and flex
	 * properties are inert on a grid item. Three attempts at this panel argued about a property that
	 * was never in play. The real layout is a four-row grid the framework defines for a priced
	 * product (console-tokens.css:3942):
	 *
	 *     grid-template-rows: auto auto auto minmax(0,1fr) !important
	 *     [tabs] / [image] / [qty|price] / [text 1fr]
	 *
	 * That last 1fr row is DELIBERATE -- it absorbs the slack so the buy buttons sit flush on the
	 * pane bottom. So the panel filling the row is correct and is not what to fight.
	 *
	 * THE ACTUAL DEFECT IS A COLLISION. Two elements land in that one text row: the framework's
	 * .lpos-c-cta__info and the companion's .psc-slider-host, and they carry the SAME copy -- info
	 * holds the excerpt, the slider callout holds the heading plus the same excerpt. The slider wins
	 * the row (it spans 1 / -1), and info collapses to 0 wide by 236 tall, landing back on the buy
	 * toggles and overlapping them. That is the visible breakage.
	 *
	 * So info is removed on a single rather than resized, and the slider's own content is told to
	 * fill the row it already owns, which is what removes the empty glass.
	 */
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright[data-psc-single-secondary]:not([data-psc-ask-chat-col])
		.lpos-c-panel.lpos-c-cta__info {
		display: none !important;
	}

	/* The host keeps the framework's 1fr row. Only min-height is stated, as a floor for the case
	 * where a slide is very short; the token is derived from the control-size scale rather than
	 * being a chosen number. `flex` is deliberately NOT set here -- see above, it would be inert. */
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright[data-psc-single-secondary]:not([data-psc-ask-chat-col])
		.lpos-c-panel.psc-slider-host {
		min-height: var(--psc-secondary-slider-min) !important;
		max-height: none !important;
	}

	/*
	 * WHICH ROW ABSORBS THE SLACK -- REVERTED TO THE FRAMEWORK'S (JD 2026-08-15).
	 *
	 * A previous pass moved the elastic 1fr from the text row to the image row, reading the empty
	 * glass under the description as the defect. The owner then supplied a side-by-side: the taller
	 * text panel with a smaller image IS the target, and the version with the dominant image is the
	 * broken one. So the framework's own row map is correct and is left alone:
	 *     grid-template-rows: auto auto auto minmax(0,1fr)   (console-tokens.css:3942)
	 *     [tabs] / [image] / [qty|price] / [text 1fr]
	 *
	 * Recorded rather than quietly deleted, because the reasoning that produced the wrong version was
	 * plausible and would be reached again: space below text LOOKS like a bug, and here it is the
	 * intended proportion. The lesson is that the reference image decides this, not the measurement.
	 *
	 * Nothing is declared here now -- the framework's rule stands unopposed.
	 */

	/*
	 * CONSOLE IDLE SECONDARY: ONE panel below the tabs, not three (JD 2026-08-15).
	 *
	 * Measured on the Console: below the What's Next / What's New tabs the column carries THREE
	 * siblings, each taking an equal third of the free space --
	 *   .lpos-c-cta__qtyprice--placeholder   a priced-product row with nothing to price
	 *   .lpos-c-cta__info                    the same copy the content panel already shows
	 *   .psc-slider-host                     the actual tab content
	 * All three are transparent, so instead of one glass Panel the owner sees a void with the
	 * background video showing through -- "it isn't using our system styling".
	 *
	 * This is the same defect as on the product single, one state over: commerce chrome rendered
	 * into a column that has no commerce. There the info panel collided with the content panel in a
	 * grid row; here all three split a flex column. Removing the two that have nothing to say leaves
	 * the content panel owning the space, and it already carries .lpos-c-panel, so the glass
	 * treatment comes back with it -- no new styling is invented, the correct Panel is simply
	 * allowed to be the only one.
	 *
	 * Scoped to the archive/idle secondary and explicitly OFF the single, whose buy box legitimately
	 * owns those elements. Specificity 11 against the 9 of the rule that forces this chrome visible;
	 * the predicate is reused verbatim so both match the same states.
	 */
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright[data-psc-archive-secondary]:not([data-psc-single-secondary]):not([data-psc-ask-chat-col])
		.lpos-c-cta__qtyprice--placeholder,
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright[data-psc-archive-secondary]:not([data-psc-single-secondary]):not([data-psc-ask-chat-col])
		.lpos-c-panel.lpos-c-cta__info {
		display: none !important;
	}

	/*
	 * AN EMPTY PANEL SAYS SO (JD 2026-08-15).
	 *
	 * Measured on the Console, the secondary panel is styled identically to the product single's --
	 * same 22% glass, same blur, same 10px radius, same 1px border -- and still reads as broken,
	 * because nothing is bound to What's Next or What's New. It is a correct 683px panel around
	 * nothing. The standing rule is no demo data and an honest empty state, so it states its
	 * emptiness rather than presenting as a fault.
	 *
	 * `:empty` is exact here: it matches only when the host has no element children AND no text, so
	 * the moment any Component is bound the message disappears on its own with nothing to remember
	 * to remove. The copy comes from a token the plugin publishes from an editable option, never a
	 * string in this file, since a shared version-stamped stylesheet is the wrong home for tenant
	 * copy. The fallback exists so the panel is never blank if the option has not been written yet.
	 */
	.lpos-blueprint--console .lpos-cell--midright .psc-slider-host:empty {
		align-items: center;
		justify-content: center;
	}

	/* JD (final): the voice comes from THIS ::before -- CSS content, invisible to every DOM probe,
 * which is why it survived every JS stand-down. When the list paints beside the shell (the
 * wrap carries data-psc-nextlist-on) or the shell is stood down, the voice is silent. */
html .lpos-blueprint--console .lpos-cell--midright [data-psc-nextlist-on] .psc-slider-host:empty::before,
html .lpos-blueprint--console .lpos-cell--midright .psc-slider-host[data-psc-nextlist-hidden]:empty::before,
html .lpos-blueprint--console .lpos-cell--midright [data-psc-empty-stood-down]:empty::before {
	content: none !important;
}

.lpos-blueprint--console .lpos-cell--midright .psc-slider-host:empty::before {
		content: var(--psc-secondary-empty-copy, "Nothing here yet.");
		color: var(--lpos-ink-3, var(--lpos-ink));
		opacity: 0.55;
		font-size: var(--lpos-text-sm, 14px);
		text-align: center;
		padding: var(--lpos-space-md, 12px);
	}

	/* With its two empty siblings gone the content panel takes the column. The parent is a flex
	 * column in this state (measured -- it is a GRID on the single, which is why the two states need
	 * different levers), so flex-grow is the correct instrument here and inert there. */
	.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
		.lpos-cell--midright[data-psc-archive-secondary]:not([data-psc-single-secondary]):not([data-psc-ask-chat-col])
		.lpos-c-panel.psc-slider-host {
		flex: 1 1 auto !important;
		min-height: var(--psc-secondary-slider-min) !important;
	}
}


/* ============================================================================
   Psychospiritualist Companion — Menu Flyout Fix (DIAGNOSIS OUTPUT, NOT DEPLOYED)
   ----------------------------------------------------------------------------
   Scope: #lpos-drawer-menu ONLY (the left-side "Menu" flyout drawer opened by
   the top-left hamburger). Every selector below is ID-scoped to that one
   drawer on purpose: .lpos-drawer__header / .lpos-drawer__content /
   .lpos-drawer__body / .lpos-menu__ctas are class names SHARED by the other
   8 right-side icon drawers (#lpos-drawer-top-power / -bell / -shield /
   -credit-card / -shopping-cart / -user / -zap / -calendar) — none of those
   are touched by this file.

   Untouched, as required:
     - psychospiritualist-console (the framework plugin) — pristine, not edited.
     - psychospiritualist-companion's own companion.css — owned by another
       live process (observed shipping v1.0.268 -> .270 -> .271 -> .272 during
       this single diagnosis session); not edited here.

   Tokens only: every color/spacing/blur value below is a var(--lpos-*) or
   var(--psc-*) reference, or a fallback token in the same family. No hardcoded
   hex or px introduced.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   FIX 1 of 2 — Portal-switcher popup renders with a fully transparent
   background, so the real menu list sitting behind it shows straight through
   and the two lists visually interleave into illegible overlapping text.

   THIS IS NOT A Z-INDEX / STACKING-CONTEXT BUG.
   Checked every property that creates a new stacking context on every
   ancestor between the popup and <body> (transform, filter, backdrop-filter,
   will-change, contain, isolation):
     - #lpos-drawer-menu itself has BOTH `transform: matrix(1,0,0,1,0,0)`
       (a resolved, non-"none" transform — the drawer's slide animation at
       rest) AND `backdrop-filter: blur(16px) saturate(1.4)`. Either alone
       creates a new stacking context AND a new containing block for
       position:fixed descendants — so yes, an ancestor here is a genuine
       stacking-context root.
     - .lpos-blueprint.lpos-blueprint--console (the console shell, 2 levels
       further up) additionally has `isolation: isolate`.
   BUT — verified live by neutralizing #lpos-drawer-menu's transform +
   backdrop-filter and re-measuring the popup's getBoundingClientRect(): the
   popup's on-screen position did not move at all. The drawer's own box sits
   flush at viewport (0,0)/360x900, so reassigning its position:fixed
   descendant's containing block from "viewport" to "drawer box" is a no-op
   here — same origin, same numbers. And within #lpos-drawer-menu's local
   stacking context, the popup (position:fixed, z-index:9000, the only
   z-indexed descendant at that level) already unambiguously paints ABOVE
   nav.lpos-menu (position:static, z-index:auto) with no ambiguity to
   resolve. A z-index bump changes nothing because the popup already wins
   paint order — that part was never broken.

   ROOT CAUSE (verified live via getComputedStyle + a live var()-fallback
   test, see below): a CSS custom-property cascade bug in companion.css, not
   a paint-order bug.
     companion.css, selector ".lpos-blueprint--console, .lpos-blueprint--gate,
     .lpos-blueprint--magick8" (current build: companion.1.0.272.css) declares:
     Both are SELF-REFERENTIAL on the same rule/selector — a textbook cyclic
     custom-property dependency. Per the CSS Custom Properties spec, a cyclic
     custom property's cascaded value becomes the "guaranteed-invalid value"
     for that element and everything beneath it in the DOM. That poisons
     every token in the same rule that is *derived* from --lpos-bg/--lpos-ink
     via var() — confirmed live, ALL of the following compute to "" (invalid)
     on the popup and every ancestor from .lpos-blueprint--console down to it:
     --lpos-panel, --lpos-panel-hover, --lpos-overlay, --lpos-glass-panel,
     --lpos-glass-panel-chrome, --lpos-glass-veil, --lpos-glass-1/2/3,
     --psc-panel-bg, --psc-nested-bg. (--lpos-accent and everything derived
     only from it, e.g. --lpos-accent-glass*, stayed intact — confirmed live.)

     The framework's own (pristine, untouched) rule in console-tokens.css:
       ".lpos-blueprint .lpos-cell, ..., .lpos-blueprint .lpos-c-select__menu,
       ..." { background: var(--lpos-glass-panel) !important; ... }
     matches this popup. Because --lpos-glass-panel is guaranteed-invalid here,
     that whole `background` declaration is invalid at computed-value time, so
     per spec `background-color` (not an inherited property) falls back to its
     INITIAL value: transparent. Confirmed live: computed backgroundColor =
     rgba(0,0,0,0). Confirmed live with a direct inline-style test that
     `var(--lpos-glass-panel, red)` DOES resolve to red (proving the fallback
     path fires, i.e. --lpos-glass-panel really is guaranteed-invalid here —
     not merely losing a specificity fight) and that
     `var(--lpos-accent-glass-strong, blue)` resolves to the real accent-glass
     color, not blue (proving that token is NOT part of the broken chain).

   FIX: re-declare `background` on the popup with a fallback chain, primary
   token first. The moment the upstream self-reference in companion.css is
   fixed, this rule silently starts using the correct --lpos-glass-panel dark
   glass again with zero further edits needed here — it only "activates" its
   fallback while the token stays broken.

   COMPETES WITH: console-tokens.css's rule above, which already carries
   !important on `background` for this exact element (verified via
   rule.style.getPropertyPriority('background') === 'important') — so
   !important here is required just to be in the fight, matching rather than
   exceeding what the framework already does on the same property/element.

   Selector covers both markup variants companion.css itself already targets
   for this "twin" (the .psc-drawer-portal class form and the
   data-psc-moved="drawer-portal" attribute form), so the OTHER, non-drawer
   instance of the same select component (the collapsed rail-mode trigger in
   the top-left header cell) is left alone.
   Live selector check: document.querySelectorAll(...) on both branches = 1
   match total (the one open popup) with the flyout open.
   ---------------------------------------------------------------------------- */
#lpos-drawer-menu .psc-drawer-portal .lpos-c-select__menu,
#lpos-drawer-menu .lpos-c-select-twin[data-psc-moved="drawer-portal"] .lpos-c-select__menu {
  background: var(--lpos-glass-panel, var(--lpos-accent-glass-strong)) !important;
}


/* ----------------------------------------------------------------------------
   FIX 2 of 2 — Reorder to the owner's spec:
     (a) portal switcher, in the slot the "Menu" title + X currently occupy
     (b) a separator
     (c) Explore / Get Started
     (d) the menu itself

   VERDICT: achievable in CSS alone, no markup change needed from the
   companion — but NOT with a bare `order:` bump on the existing siblings.
   The four pieces live at THREE different nesting depths today:

     #lpos-drawer-menu                          (display:flex, column)
     +-- .lpos-drawer__header                   [title "Menu" + X]
     +-- .lpos-drawer__body                     (display:flex, column)
         +-- .lpos-menu__ctas                   [Explore / Get Started]
         +-- .lpos-drawer__content              (display:block — NOT flex)
             +-- .psc-drawer-portal.lpos-c-select-twin   [portal switcher]
             +-- nav.lpos-menu                  [the menu itself]

   `order` only reorders siblings within the SAME flex/grid formatting
   context. .lpos-menu__ctas and .lpos-drawer__content are direct flex
   siblings (both children of .lpos-drawer__body) — but the portal switcher
   and the nav are trapped one level deeper inside .lpos-drawer__content,
   which is plain display:block. That mismatch is exactly why companion.css's
   own pre-existing rule
     ".lpos-drawer .psc-drawer-portal.lpos-c-select-twin, .lpos-drawer
     .lpos-c-select-twin[data-psc-moved=\"drawer-portal\"] { ... order: -1
     !important; }"
   does nothing today: its immediate parent isn't a flex container, so
   `order` is currently inert there (verified live — the twin still rendered
   in its original DOM position before this fix).
   ---------------------------------------------------------------------------- */

/* 2a — remove the "Menu" title + close (X) row entirely.
   Done by NOT RENDERING (display:none), not visibility:hidden, so the box
   collapses to zero height and nothing has to compensate for a leftover gap:
   #lpos-drawer-menu is display:flex/column, so its one remaining visible
   child (.lpos-drawer__body) simply expands to take the space.
   COMPETES WITH: console-tokens.css's plain ".lpos-drawer__header { display:
   flex; }" — a single-class selector with NO !important (verified via
   getPropertyPriority — empty string). #lpos-drawer-menu .lpos-drawer__header
   (1 id + 1 class) outranks that on specificity alone, so !important is
   deliberately omitted here per the "prove it's needed first" rule.
   CAVEAT: this removes the dialog's only dedicated close affordance, not
   just its label — confirm the owner is fine relying on the hamburger
   toggle / outside click / Esc to close the flyout, since the X is gone,
   not hidden. */
#lpos-drawer-menu .lpos-drawer__header {
  display: none;
}

/* 2b — promote .lpos-drawer__content's children (the twin + the nav) up into
   .lpos-drawer__body's flex context, so the portal switcher, the CTAs, and
   the nav all become true flex siblings and `order` finally has something to
   act on.
   COMPETES WITH: nothing — no author rule sets `display` on
   .lpos-drawer__content at all (checked live across every stylesheet); its
   current display:block is just the UA default for a <div>. No !important
   needed or used.
   SAFETY CHECKS (verified live before writing this rule):
     - .lpos-drawer__content currently has padding:0, margin:0, border:0,
       background:transparent — display:contents discards the element's own
       box, but there is no box-level styling here to lose.
     - Its overflow:hidden + flex:1 1 auto were only sizing/clipping the
       scroll region that .lpos-drawer__body's own `overflow: hidden auto`
       already bounds one level up — confirmed the flyout still scrolls and
       spaces correctly with .content flattened (visual test, see below).
     - .lpos-drawer__content carries no ARIA attributes (checked live — only
       a class attribute), so nothing is lost from the accessibility tree.
     - Scoped to #lpos-drawer-menu only, so the 8 other drawers that reuse
       .lpos-drawer__content are untouched. */
#lpos-drawer-menu .lpos-drawer__content {
  display: contents;
}

/* 2c — the actual reorder. With .content flattened, .lpos-menu__ctas, the
   twin, and nav.lpos-menu are direct flex children of .lpos-drawer__body in
   this DOM order: [ctas, twin, nav] (the twin+nav simply take over the slot
   .content used to occupy, keeping their own relative order).
     - twin: order -1  — this is companion.css's OWN existing rule (order:-1
       !important, shown above), now finally live because its parent is a
       flex container. No new order rule is written for the twin here; the
       fix is making its existing rule *apply*, not changing its value.
     - ctas: order 0 (default, untouched)
     - nav:  order 0 (default, untouched)
   Two items tied at order:0 keep their relative DOCUMENT order, and ctas is
   still before nav in the DOM after flattening — so ctas correctly lands
   before nav with no order rule needed on either. Net visual order:
   twin (-1), then ctas (0, first at that tier), then nav (0, second at that
   tier) = exactly (a) switcher, (c) CTAs, (d) menu.
   Verified live end-to-end with this exact rule set (this file's 2a+2b plus
   the separator below): screenshot showed portal switcher trigger at the
   very top, then Explore/Get Started, then the Console/Studio/Vault/...
   nav — no further `order` declarations required. */

/* 2b (separator) — a hairline rule between the portal switcher and the
   Explore/Get Started row.
   Implemented as generated content (::after) on the twin wrapper rather than
   a new DOM node — CSS cannot insert real elements, only pseudo-elements.
   It paints as part of the twin's own flex-item box (pseudo-elements don't
   get independent flex placement), so it automatically renders directly
   beneath the switcher and above whatever the next flex item is
   (.lpos-menu__ctas, per the ordering above) with no separate `order` value
   of its own needed.
   Tokens: --lpos-glass-rule (rgba(255,255,255,0.10) at :root) — confirmed
   live this is a plain literal at :root, not derived via var(--lpos-bg) or
   var(--lpos-ink), so it is NOT part of the broken chain from Fix 1 and
   resolves correctly inside this subtree today. --lpos-accent-glass is
   layered in as a second, independently-verified-intact fallback. */
#lpos-drawer-menu .psc-drawer-portal.lpos-c-select-twin::after,
#lpos-drawer-menu .lpos-c-select-twin[data-psc-moved="drawer-portal"]::after {
  content: "";
  display: block;
  height: 1px;
  margin: var(--lpos-space-sm, 5px) 0 0;
  background: var(--lpos-glass-rule, var(--lpos-accent-glass));
}

/*
 * RIGHT TOOL RAIL — remove three switches app-wide (JD 2026-08-15).
 *
 * Ratings & Reviews and FAQs & Knowledge Base come out entirely. Bookmarks moves to the top-right
 * utility bar, where it now takes the slot the Calendar util occupied before the cart (see
 * psc_filter_topbar_util_calendar_buttons in includes/filters.php, retargeted to 'bookmark'), so
 * it is removed from the rail rather than duplicated across two places.
 *
 * REMOVED, NOT HIDDEN. `display: none` is deliberate and matches this file's existing precedent
 * for retiring chrome: these controls are gone, so they SHOULD leave the tab order. A clip or
 * visibility technique would keep them keyboard-reachable and leave a control that answers to
 * focus but paints nothing -- the residue pattern this project keeps catching.
 *
 * The rail's button set is a hardcoded array in the PRISTINE framework
 * (BlueprintRenderer::right_view_panes) and its only filter, lpos_right_view, changes a pane's
 * BODY rather than the button list -- so there is no data-side seam to remove a switch through.
 * That is worth knowing: a proper fix later is a filter on the view registry itself, which would
 * let a tenant choose its own rail without any of this.
 *
 * Matched on the framework's own identifiers: data-lpos-view-key for the two switch buttons, and
 * data-lpos-tab-primary for the FAQ button, which is not a pane switch at all -- it opens the FAQ
 * archive as a real Display and therefore carries no view key.
 */
.lpos-blueprint .lpos-rail [data-lpos-view-key="star"],
.lpos-blueprint .lpos-rail [data-lpos-view-key="bookmark"],
.lpos-blueprint .lpos-rail [data-lpos-tab-primary="FAQs & Knowledge Base"] {
	display: none !important;
}

/*
 * CALENDAR STAYS IN THE ICON RAIL (JD 2026-08-15, correcting an over-removal).
 *
 * The instruction was to take Calendar out of the TOP-RIGHT utility bar, where Bookmarks replaced
 * it. Calendar was additionally added to the rail-hiding rule above, which removed it from the app
 * entirely -- more than was asked. It is removed from that rule here.
 *
 * Its position is a separate matter from its visibility. The framework emits the rail in a fixed
 * source order (... star, FAQ, bookmark, calendar, layers, share), so simply un-hiding it would put
 * Calendar ABOVE Notes. The requested order is Notes, then Calendar, then Share.
 *
 * `order` is the right tool because every rail button is a sibling in one flex column
 * (.lpos-rail, display:flex, flex-direction:column -- measured, not assumed). Everything else keeps
 * the initial order 0 and therefore stays in source order ahead of these two, so only the two that
 * move need to be named. No `!important`: nothing else sets `order` on these, so there is nothing
 * to outrank, and adding it would only make a future override harder.
 */
.lpos-blueprint .lpos-rail [data-lpos-view-key="calendar"] {
	order: 1;
}

.lpos-blueprint .lpos-rail [data-lpos-view-key="share"] {
	order: 2;
}

/*
 * BACK SITS BEFORE THE BRAND MARK (JD 2026-08-15).
 *
 * The header's tab panel is a flex row and the companion already pulls the logo to the front with
 * `order: -1` (see .psc-topbar-logo above). So Back only needs a lower order than the logo, not a
 * DOM move -- both are siblings of .lpos-topbar__panel--tabs.
 *
 * Targeted on `data-psc-tab-back`, read off the live DOM. A first attempt used
 * `data-lpos-nav="back"`, which the framework's back_btn() does emit -- but the button in the TOPBAR
 * is not that one. It is the skip-action control, and it carries data-psc-tab-back="1" plus
 * .psc-skip-labeled--prev, while Next carries data-psc-tab-next="1" plus --next. The first rule
 * therefore matched nothing at all and shipped as a no-op.
 *
 * [aria-label="Back"] was rejected as the hook: it is a TRANSLATED string and would stop matching in
 * any other locale. The shared classes .lpos-c-skip-action.psc-skip-labeled are carried by Next too,
 * so matching on those alone would move both buttons.
 *
 * !important is required twice over: the logo's own order is `-1 !important`, and the sibling order
 * values (Add 1, Console 2, Next 3) are written as INLINE styles by JS with no CSS rule behind them,
 * which a non-important declaration could never outrank.
 */
.lpos-blueprint--console .lpos-topbar__panel--tabs [data-psc-tab-back] {
	order: -2 !important;
}

/*
 * SECONDARY COLUMN RHYTHM: THE CONTENT PANEL AND THE BUTTON ROW (JD 2026-08-15).
 *
 * Measured on live, this column keeps an 8px rhythm everywhere -- the group's padding, the group's
 * gap between children, and the title panel's padding all resolve to 8px, which is --lpos-space-sm.
 * Two places break it, and they are what reads as unpadded:
 *
 *   1. .psc-slider-host had `padding: 0`. It is the ONLY Panel in the column with none, so its
 *      contents sit flush against the glass edge while every sibling is inset by 8px.
 *   2. The cell's own `gap` computed to 0, so the button row sits hard against the bottom edge of
 *      the panel above it with no separation at all, while every other sibling pair in the column
 *      is separated by 8px.
 *
 * Both are stated as the token, not the number, so the whole column moves together if the scale
 * changes. Deliberately OUTSIDE the 1280px media query: this is base rhythm, not a desktop tweak,
 * and it should hold at every width.
 *
 * Not scoped to one state. The single and the Console idle share this column and the owner has
 * asked for consistency between them, so the correction applies to both.
 */
/*
 * WEIGHTS, MEASURED. A first attempt at both of these declared them plainly and then with
 * !important, and neither applied. Both selectors matched their elements and both rules were served
 * -- they simply lost, each by the same one point this file keeps losing by:
 *
 *   gap     competitor: console-tokens.css  .lpos-blueprint--console.-left-collapsed .lpos-cell--midright
 *                                            { gap: 0 !important }                    = (0,3,0)
 *           first try:  .lpos-blueprint--console .lpos-cell--midright                  = (0,2,0)   lost
 *           now:        + .-left-collapsed and the base .lpos-cell                     = (0,4,0)   wins
 *
 *   padding competitor: the same :has(real media in centre) block that governs this whole column,
 *                       which sets `padding: revert !important` on .psc-slider-host  = (0,9,0)
 *                       (`revert` rolls the value back to the parent origin, i.e. none)
 *           first try:  .lpos-blueprint--console .lpos-cell--midright .psc-slider-host = (0,3,0)   lost
 *           now:        the competitor's predicate reused VERBATIM, plus .lpos-cell and
 *                       .lpos-c-panel, both genuinely on the elements                  = (0,10,0)  wins
 *
 * Reusing the predicate verbatim rather than inventing a narrower one guarantees the two rules match
 * exactly the same elements in exactly the same states, so this cannot drift out of alignment later.
 */
/*
 * AND THE RIGHT TOKEN, NOT JUST THE RIGHT VALUE. A first pass used --lpos-space-sm because it
 * resolves to 8px -- which it does at :root, and NOT inside the console, where the scale is
 * compacted and it resolves to 5px. Measured at this cell: space-sm 5px, space-md 8px, gap 8px,
 * panel-pad 8px. So the rules applied and produced 5px against the column's 8px rhythm.
 *
 * That rescaling is the token system doing its job, and it is exactly why a token has to be chosen
 * by ROLE rather than by the number it happens to equal somewhere else. A gap between siblings is
 * --lpos-gap; a Panel's inner inset is --lpos-panel-pad. Both are what the group beside it already
 * uses, so the column now moves as one if the scale is ever retuned.
 */
.lpos-blueprint--console.-left-collapsed .lpos-cell.lpos-cell--midright {
	gap: var(--lpos-gap, 8px) !important;
}

.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body:not(.lpos-feat__body--archive):not(.lpos-feat__body--coming) > .lpos-media)
	.lpos-cell.lpos-cell--midright
	.lpos-c-panel.psc-slider-host {
	padding: var(--lpos-panel-pad, 8px) !important;
	box-sizing: border-box !important;
}

/*
 * THE BUTTON ROW HOLDS ITS SHAPE FOR EVERY CONTENT TYPE (JD 2026-08-15).
 *
 * THE FLAW THIS FIXES IS IN THE EARLIER FIXES. Every rule added to this column today was scoped
 * with the predicate
 *     :has(.lpos-cell--midcenter .lpos-feat__body:not(--archive):not(--coming) > .lpos-media)
 * borrowed verbatim from the rule being overridden, purely to clear its (0,9,0) weight. That works
 * while the centre is showing the video it was written for. It stops working the moment the centre
 * shows anything else.
 *
 * Measured after pressing a Step (Content 932, a FLIPBOOK): the predicate goes false, so the
 * competing rule stops applying -- and so does every counter-rule scoped to match it. The action bar
 * fell back to `display: block`, the two buttons stacked instead of sitting side by side, Buy Now
 * collapsed to 87px and Continue landed at y=950, below the column's own bottom edge at 951.
 *
 * The lesson: scope to the STATE the column is in, not to what the centre happens to be rendering.
 * The state is on the cell itself (data-psc-single-secondary / data-psc-archive-secondary) and does
 * not care whether the Asset is a video, a flipbook or a 3D model.
 *
 * Weight is bought with repeated classes rather than a borrowed predicate: six repeats plus the
 * cell, the :not, the panel class and the element class is (0,10,0), one clear of the (0,9,0) it has
 * to beat WHEN that rule applies -- and unlike the predicate version, it still applies when it does
 * not. Repeated-class boosting is already the house pattern in this file, so this introduces no new
 * technique.
 */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright:not([data-psc-ask-chat-col])
	.lpos-c-panel.lpos-c-cta__actionbar {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: var(--lpos-gap, 8px) !important;
	flex: 0 0 var(--lpos-titlebar-h, 64px) !important;
	height: var(--lpos-titlebar-h, 64px) !important;
	min-height: var(--lpos-titlebar-h, 64px) !important;
	max-height: var(--lpos-titlebar-h, 64px) !important;
}

/*
 * ADD TO CART IS A PANEL LIKE ITS NEIGHBOURS (JD 2026-08-16).
 *
 * Measured on the Cell Signals single: `border: 2px outset rgb(0, 0, 0)`. That is not a choice -- it
 * is the USER-AGENT default for a <button>. The element was never given a border at all, so the
 * browser's own bevelled black one showed through, which is why it read as grey and flat beside the
 * others.
 *
 * WHY IT MISSED. Its neighbours in that row -- .lpos-c-cta__qtypanel and .lpos-c-cta__pricepanel --
 * carry `.lpos-c-panel` and therefore pick up the Panel treatment automatically. This button does
 * not carry that class, so every rule that dresses a Panel skipped it. Same Component role, no Panel:
 * exactly the uniformity gap the atomic law exists to close.
 *
 * It already inherits the glass background and the backdrop blur, so only the border and its radius
 * were missing. Both come from the same tokens the panels beside it resolve, so the row now reads as
 * one set and retunes together.
 */
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice .lpos-c-cta__buy,
.lpos-blueprint .lpos-cell--midright .lpos-c-cta__qtyprice [data-lpos-add-to-cart],
.lpos-blueprint .lpos-cell--midright .psc-qty-cart {
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, var(--lpos-glass-2)) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
}

/*
 * NO STALE PRICE ON AN ARCHIVE WITH NOTHING SELECTED (JD 2026-08-16).
 *
 * Measured on the Shop archive: the secondary column showed "Qty $80.75 /month" with no card
 * peeked -- the price of Cell Signals, left behind from a product single opened earlier. Commerce
 * chrome for a product the user is not looking at.
 *
 * The codebase already decided this: the pre-existing archive rules hide .lpos-c-cta__info in
 * exactly this state (companion.css:7098-7099 and the rules that follow), because a leftover
 * description is wrong for the same reason. The price row was simply never added to that list, so
 * one half of the buy box was suppressed and the other half kept leaking.
 *
 * Predicate copied VERBATIM from those rules rather than re-derived -- centre holds a card grid AND
 * the column is neither a peek nor a single -- so the two can never disagree about when a card is
 * selected. A peek (INFO on a card) legitimately shows price, and :not([data-psc-archive-peek])
 * preserves that.
 *
 * Nothing is styled here; a Component that has no product to price simply is not rendered.
 */
/*
 * WEIGHT NOTE: this has to outrank a rule EARLIER IN THIS SAME FILE (2026-08-16).
 *
 * The "price row holds its shape for every Content type" rule below buys (0,10,0) with repeated
 * classes so it can survive a Step swapping the centre to a flipbook or a 3D model. That rule says
 * `display: flex !important`. A first attempt at this hide was (0,4,0) and lost to it -- so the row
 * kept showing a stale "$80.75 /month" on the Shop archive with no card selected, which is what the
 * owner reported.
 *
 * Two of my own rules disagreeing about one element, decided by weight, is exactly the failure this
 * file keeps producing. Fixed by matching the shape rule's repeat count and adding the state
 * attribute, so the hide is (0,11,0) and wins outright -- and, more importantly, the two now differ
 * by a STATE rather than by an accident of specificity: shape applies wherever the row is shown,
 * this decides whether it is shown at all.
 */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright[data-psc-archive-secondary]:not([data-psc-archive-peek]):not([data-psc-single-secondary])
	.lpos-c-cta__qtyprice,
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-c-archive-grid__list)
	.lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary])
	.lpos-c-cta__qtyprice,
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midcenter [data-lpos-cardgrid])
	.lpos-cell--midright:not([data-psc-archive-peek]):not([data-psc-single-secondary])
	.lpos-c-cta__qtyprice {
	display: none !important;
}

/*
 * THE CHAT SCROLLBAR IS OURS, NOT THE OPERATING SYSTEM'S (JD 2026-08-16).
 *
 * The conversation list scrolls, and it was drawing the platform's default scrollbar -- a grey
 * Windows bar against the console's glass. Styled from the same tokens as everything else so it
 * belongs to the design system rather than to whatever OS the viewer happens to be on.
 *
 * Both syntaxes are given deliberately: `scrollbar-width`/`scrollbar-color` is the standard and is
 * what Firefox honours, while the ::-webkit- pseudo-elements are what Chrome and Safari honour. One
 * without the other leaves half the users on the default bar.
 *
 * No literal colours: the thumb is the accent at low mix, the track is transparent so the panel's
 * own glass shows through, and the width comes off the spacing scale.
 */
.lpos-blueprint .lpos-c-chat__body,
.lpos-blueprint .lpos-c-chat__list {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--lpos-accent) 55%, transparent) transparent;
}

.lpos-blueprint .lpos-c-chat__body::-webkit-scrollbar,
.lpos-blueprint .lpos-c-chat__list::-webkit-scrollbar {
	width: var(--lpos-space-sm, 8px);
	height: var(--lpos-space-sm, 8px);
}

.lpos-blueprint .lpos-c-chat__body::-webkit-scrollbar-track,
.lpos-blueprint .lpos-c-chat__list::-webkit-scrollbar-track {
	background: transparent;
}

.lpos-blueprint .lpos-c-chat__body::-webkit-scrollbar-thumb,
.lpos-blueprint .lpos-c-chat__list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--lpos-accent) 45%, transparent);
	border-radius: var(--lpos-radius-control, 8px);
}

.lpos-blueprint .lpos-c-chat__body::-webkit-scrollbar-thumb:hover,
.lpos-blueprint .lpos-c-chat__list::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--lpos-accent) 70%, transparent);
}

/*
 * THE PRICE ROW HOLDS ITS SHAPE FOR EVERY CONTENT TYPE (JD 2026-08-15).
 *
 * Second instance of the same defect as the action bar directly below. Measured on Step 3 of Cell
 * Signals (a 3D model): QTY, the price and Add to Cart stacked into three separate lines, because
 * the rules that lay that row out are gated on the ":has(video in the centre)" predicate and a Step
 * puts a model or a flipbook there instead.
 *
 * Same correction, same reasoning: scope to the STATE on the cell, buy the weight with repeated
 * classes, and let the row lay out the same way whatever Asset the centre happens to hold.
 *
 * Sizes come from the control and gap tokens, so the row keeps the column's rhythm; the qty and
 * price panels stay content-sized and only the cart button takes the slack, which is the same
 * proportion the video single already renders.
 */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright:not([data-psc-ask-chat-col])
	.lpos-c-cta__qtyprice {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: var(--lpos-gap, 8px) !important;
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: none !important;
}

.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright:not([data-psc-ask-chat-col])
	.lpos-c-cta__qtyprice > * {
	min-width: 0 !important;
}

/* The two buttons share the row equally whatever the Content type. min-width:0 is required so a
 * long label cannot push a button past its half. */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright:not([data-psc-ask-chat-col])
	.lpos-c-panel.lpos-c-cta__actionbar > .lpos-c-cta__buy {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	height: 100% !important;
}

/*
 * THE CHAT BODY IS A PANEL OF ITS OWN, AND ITS EMPTY STATE IS CENTRED (JD 2026-08-15).
 *
 * Measured with chat open on a single: .lpos-c-chat__body renders 566x709 with `background:
 * transparent` and `border: 0` -- no Panel treatment at all -- while its own header directly above
 * it (.lpos-c-chat__head) carries the full glass, border and radius. So the conversation area reads
 * as a hole in the column rather than a Component. The owner's words: the chat content needs its
 * own container and outline.
 *
 * The empty state was a second, separate fault with the same root: the body is a flex ROW, so the
 * "No messages yet." paragraph and the message list sit SIDE BY SIDE -- measured, the paragraph is
 * 130px wide starting at the body's left edge and the list starts 130px further right. That is why
 * the message was stranded against the left edge instead of sitting in the middle of the space. A
 * column direction puts them in the same track, and auto margins then centre the paragraph in both
 * axes without needing to know the panel's size.
 *
 * Every value is a token and every one of them is the same token its sibling Panels already use, so
 * the chat area is treated as what it is: another Panel in the column, not a special case.
 */
.lpos-blueprint .lpos-cell--midright .lpos-c-chat__body {
	flex-direction: column !important;
	min-height: 0 !important;
	background: var(--lpos-glass-panel);
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border, var(--lpos-glass-2));
	border-radius: var(--lpos-radius-panel, 10px);
	padding: var(--lpos-panel-pad, 8px);
	box-sizing: border-box;
}

.lpos-blueprint .lpos-cell--midright .lpos-c-chat__body > .lpos-c-chat__empty {
	margin: auto !important;
	width: auto !important;
	text-align: center;
}

/*
 * THE SLIDER STAGE FILLS ITS PANEL (JD 2026-08-15).
 *
 * Measured on the Cell Signals single: the panel is 566px wide, but the carousel STAGE is 330px and
 * starts 110px in from the panel's own left edge, so the heading and description sit indented in a
 * band down the middle with empty glass either side. That is the "still not fixed" the owner has
 * been pointing at -- the panel's SIZE was corrected, its CONTENTS were still inset.
 *
 * The cause is a circular width. The engine sizes a carousel slide at `width: 56%` (a filmstrip
 * default, correct for a multi-slide carousel), and the companion already forces the ACTIVE slide to
 * `width: 100% !important`. But the stage itself is `width: auto`, so the slide's 100% resolves
 * against a box that is itself sized by its content -- and the pair settles at 330px instead of the
 * panel's full width. Forcing the slide alone could never fix it; the percentage needs a real
 * containing width to resolve against.
 *
 * So the stage is given that width. The slide's existing 100% then resolves against the panel, and
 * the callout starts at the panel's padding edge like every other Panel in the column.
 *
 * min-width: 0 is required, not decorative: a flex item's automatic minimum size is its content, so
 * without it a long unbroken word could push the stage back out past its parent.
 */
.lpos-blueprint .psc-slider-host .lpos-c-carousel__stage {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/*
 * THE CENTRE'S TOP ROW IS ONE CONTROL RUNG, NOT MORE (JD 2026-08-15).
 *
 * Measured on the Console: .lpos-feat__actions renders 59px tall with ZERO children -- an empty row
 * a third taller than the 46px rung every other control in the app sits on. The owner's words: "the
 * top tool bar is WAY too tall, that does not match everywhere else", and it stays empty for now by
 * his choice, so the fix is to size it, not to fill it.
 *
 * WHY IT GROWS. The engine's baseline is correct -- `.lpos-blueprint .lpos-feat__actions { flex: 0 0
 * auto }` -- but a companion rule overrides it for exactly the state the Console is in:
 *     .lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead)
 *     { flex: 1 1 auto !important; height: auto !important; max-height: none !important }
 * That is (0,5,0). The Console's row carries data-psc-nav-lifted (verified on the element, along
 * with data-psc-skip-empty and data-psc-transport-relocated), so it matches and the row absorbs
 * slack it has no content to justify.
 *
 * A sibling rule already does the right thing -- flex: 0 0 auto -- but only when the centre holds an
 * archive body, so the Console never reaches it. This states the same intent for the state that was
 * missed, at (0,6,0) via the .lpos-col__slot the row genuinely sits in, so it clears the (0,5,0)
 * outright rather than depending on source order.
 *
 * THIS ALSO FEEDS THE LETTERBOXING. The centre column runs on about 9px of slack, and the app's own
 * diagnostic (companion-media-aspect.js) has been reporting the video short by 11-41px and naming
 * this row as a suspect. Thirteen pixels handed back here is thirteen pixels the video no longer has
 * to give up -- necessary, though not on its own sufficient, for that fault.
 */
.lpos-blueprint--console
	.lpos-cell--midcenter
	.lpos-col__slot
	.lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead),
.lpos-blueprint--console
	.lpos-cell--midcenter
	.lpos-col__slot
	.lpos-feat__actions[data-psc-skip-empty]:not(.lpos-view__chathead) {
	flex: 0 0 auto !important;
	height: var(--lpos-control-size, 46px) !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: var(--lpos-control-size, 46px) !important;
}

/*
 * OFF-CANVAS MENU IS WIDER (JD 2026-08-15).
 *
 * Done by overriding the framework's own width TOKEN rather than by writing a width rule. The
 * framework already resolves the drawer as `width: var(--lpos-drawer-w, 360px)`
 * (console-tokens.css:213 and :2085), so re-pointing the token is the whole change: no selector
 * fight, no !important, and any other surface that reads the same token moves with it.
 *
 * Expressed as a clamp rather than a flat 550px so the menu stays proportional instead of pinning a
 * number that is only correct on one monitor: ~554px at the 1911px width the request was made at,
 * never narrower than the original 360px feel on small screens, never wider than 560px. The
 * framework's own `max-width: 92vw` still applies underneath as the small-screen backstop.
 */
:root {
	--lpos-drawer-w: clamp(360px, 29vw, 560px);
}

/*
 * PORTAL SELECTOR IS READABLE (JD 2026-08-15: "i cant read any of it").
 *
 * TWO separate defects, measured on the live console rather than inferred:
 *
 * 1. Option text computed to rgb(204,51,102) -- the active theme's #CC3366. Every option is a bare
 *    <button>, and the theme's reset ships `[type="button"], [type="submit"], button { color:
 *    #cc3366 }` (already documented at the top of this file). Nothing in the companion or the
 *    framework was setting a colour on .lpos-c-select__option at all, so the theme won by default.
 *    This is the same pink leak that has already been fixed on dots and bare button chrome; the
 *    select options were simply never covered.
 *
 * 2. The menu background computed to 22% opacity. That is fine for a panel sitting on the canvas
 *    and wrong for a popup that OVERLAYS the off-canvas menu -- the menu items behind it showed
 *    straight through, which is what made it unreadable as much as the colour did. A popup needs to
 *    be opaque enough to occlude what it covers.
 *
 * No hex is introduced. The colour is --lpos-ink and the background is mixed from --lpos-bg, so
 * both follow the brand pack.
 */
:root {
	--psc-select-menu-bg: color-mix(in srgb, var(--lpos-bg) 94%, transparent);
}

/*
 * The competing declaration is the ENGINE'S own
 *     .lpos-blueprint .lpos-c-select__menu { background: var(--lpos-glass-panel) !important }
 * which is (0,2,0) WITH !important. A first attempt here was (0,2,0) WITHOUT it, so it lost on
 * importance before weight was even consulted, and the popup kept the 22% glass that let the menu
 * behind read straight through it. Doubling the class takes this to (0,3,0) and !important puts it
 * in the same bucket, so it wins on weight.
 *
 * The engine is right to use glass for a select that floats over the canvas; it is wrong for THIS
 * one, which overlays the off-canvas menu -- a popup has to occlude what it covers to be readable.
 */
.lpos-blueprint .lpos-c-select__menu.lpos-c-select__menu {
	background: var(--psc-select-menu-bg) !important;
}

/*
 * AND THE ONE THAT ACTUALLY RENDERS -- IT IS BEHIND AN ID (JD 2026-08-16).
 *
 * There are FOUR .lpos-c-select__menu elements in the document. The one a person sees when the portal
 * picker is opened from the off-canvas menu is the twin that gets moved into the drawer, and it is
 * governed by
 *     #lpos-drawer-menu .lpos-c-select-twin[data-psc-moved="drawer-portal"] .lpos-c-select__menu
 *       { background: var(--lpos-glass-panel) !important }
 * which is (1,3,0). Every attempt above is (0,n,0), and an ID outranks ANY number of classes -- so
 * doubling the class, adding !important, none of it could ever have won. Two earlier passes were
 * spent adding weight in a category that does not compete.
 *
 * Matched here at (1,4,0): the same ID, the same twin, the same attribute, plus the doubled class.
 * That is the smallest thing that actually outranks it.
 *
 * The value is the same token as the non-drawer rule, so both copies of this popup read identically.
 * 22% glass is right for a select floating over the canvas and wrong for one overlaying the menu --
 * a popup has to occlude what it covers.
 */
#lpos-drawer-menu .lpos-c-select-twin[data-psc-moved="drawer-portal"] .lpos-c-select__menu.lpos-c-select__menu,
#lpos-drawer-menu .psc-drawer-portal .lpos-c-select__menu.lpos-c-select__menu {
	background: var(--psc-select-menu-bg) !important;
}

.lpos-blueprint .lpos-c-select__option {
	color: var(--lpos-ink);
	background: transparent;
}

.lpos-blueprint .lpos-c-select__option:hover,
.lpos-blueprint .lpos-c-select__option:focus-visible,
.lpos-blueprint .lpos-c-select__option.-selected {
	color: var(--lpos-ink);
	background: var(--lpos-glass-2);
}

/* ----------------------------------------------------------------------------
   FR-C17, SECOND HALF: THE OPEN PORTAL POPUP MUST OCCLUDE THE MENU IT COVERS.

   The background fix above (--psc-select-menu-bg at 94%) made the popup's own
   options legible, and the first five were STILL unreadable. Measured, not
   guessed: elementFromPoint down the popup's centre returned .lpos-menu__link
   ("Console", "Vault", "Portals", "Insights") at y207-419 -- outside the popup --
   while below y490 the popup's own options won. A screenshot confirmed it:
   crisp menu links in front, the popup's first five portal names blurred behind.

   WHY NOT A BIGGER z-index. There is nothing to out-rank. The popup is
   position:fixed z-index:9000; walking BOTH ancestor chains to their common
   parent (.lpos-drawer__content) found not one stacking context on the menu
   side -- every ancestor is position:static / z-index:auto. By spec the popup
   already paints in the higher layer, so raising 9000 changes nothing. What the
   first probe MISSED is that .lpos-menu__link carries
   `backdrop-filter: blur(8px) saturate(1.3)` (the HUD frosted language):
   backdrop-filter creates a stacking context of its own AND re-samples whatever
   is painted behind it, which is exactly the blurred portal names. The probe
   tested `filter` and never asked about `backdrop-filter`.

   So this is scoped to the STATE, not to the paint order (standing correction
   #2 -- rules keyed on what a region happens to be rendering switch off the
   moment it renders something else). `aria-expanded` is the framework's own
   marker on its own toggle, so nothing new has to be invented or kept in sync.
   The file's own note at the background rule already states the principle: "a
   popup has to occlude what it covers".

   Both markup variants are covered for the same reason the background rule
   covers both -- the twin is addressable by class AND by the moved-marker
   attribute. Verified before shipping: each selector matches exactly 1 element
   with the flyout open, and #lpos-drawer-menu does contain nav.lpos-menu.

   visibility, not display: it leaves layout untouched, so the drawer does not
   reflow underneath the open popup, and it reverses the instant the toggle
   collapses. No !important -- at (1,4,0) this already outweighs anything the
   framework sets on .lpos-menu, and correction #4 is that !important is not a
   substitute for weight.
   ---------------------------------------------------------------------------- */
#lpos-drawer-menu:has(.lpos-c-select-twin[data-psc-moved="drawer-portal"] [data-lpos-select-toggle][aria-expanded="true"]) .lpos-menu,
#lpos-drawer-menu:has(.psc-drawer-portal [data-lpos-select-toggle][aria-expanded="true"]) .lpos-menu {
	visibility: hidden;
}

/* ----------------------------------------------------------------------------
   FR-C20 / FR-C26: THE MEDIA AND ITS TRANSPORT ARE TWO COMPONENTS, SO THEY MUST
   READ AS TWO.

   THE VIDEO PAIR WAS NEVER FUSED IN THE DOM, and that measurement is what makes
   this a token fix rather than a restructure. `.lpos-media.-video` and
   `.lpos-media__bar.psc-media-transport` are already two direct-child siblings
   of `.lpos-feat__body`, split by an earlier pass (relocateMediaTransport()),
   sitting 4.00px apart -- measured live at 873.3x494 and 873.3x64, same x, same
   width, gap = 638.02 - 634.02. So nothing needs moving, and
   relocateMediaTransport() / adoptMediaOwnBar() must NOT be touched: they are
   what maintains the split.

   What erased the seam is the PARENT. `.lpos-feat__body` inherits
   `background: var(--lpos-glass-panel)` from the framework (console-tokens.css
   ~2988), and both children resolve their own fill to that same root token --
   measured pixel-identical on all three: same background, same 1px border, same
   10px radius, same blur(16px) saturate(1.4). An earlier rule (companion.css
   856-867) zeroes the body's BORDER for an unrelated stacked-seam bug but leaves
   its fill, so the parent's identical glass shows straight through the 4px gap
   with no edge to interrupt it. Three panels of one colour, no seam: one panel.

   THE ONTOLOGY SAYS WHICH ONE IS WRONG, so this is not a taste call. Under the
   law -- Displays -> Content -> Components -> Assets -- `.lpos-feat__body` IS
   the Content: the collection of Components on this Display. The Panels are the
   Components inside it. A container wearing its children's Panel chrome is the
   violation; it is impersonating a Component. Making it transparent hides
   nothing, because the two real Panels underneath carry the fill.

   Scoped to bodies that actually host a transport, so every other Display --
   Coming Soon included, where the body IS the visible surface -- is untouched.
   Not `:has( > ... )`: the video's bar is a direct child, the 3D's bar is still
   inside `.lpos-media`, and this has to cover both.
   ---------------------------------------------------------------------------- */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__body:has( .lpos-media__bar.psc-media-transport ) {
	background: transparent !important;
}

/* ----------------------------------------------------------------------------
   FR-C26: ONE SPACER BETWEEN THE 3D OBJECT AND ITS TOOLBAR, NOT TWO.

   The 3D holder was charged for the gap twice, by two rules neither of which
   knows about the other:
     1. the framework's blanket child-spacing rule gives `.lpos-media` a
        `gap: var(--lpos-gap)` (console-tokens.css 2729-2737), 8px here;
     2. companion.css's own docking rule ALSO gives the bar
        `margin-top: var(--lpos-subpanel-pad)` (2883-2935, margin at 2920), 4px.
   8 + 4 = the 12px the owner reported as "a gap".

   The margin rule is not wrong -- it was written for the VIDEO, whose bar
   relocateMediaTransport() moves OUT of `.lpos-media` to sit inside
   `.lpos-feat__body`, which has no `gap` of its own. There the margin is the
   only spacer and nothing doubles. The 3D bar was never relocated:
   adoptMediaOwnBar() dresses it and deliberately leaves it a flex CHILD of
   `.lpos-media.-model`, so it collects both.

   Zeroing the holder's gap -- rather than dropping the bar's margin -- is the
   arm that makes 3D match the video EXACTLY: one 4px `--lpos-subpanel-pad`
   between medium and bar, from the same token, on both Displays. Dropping the
   margin instead would have left 3D at 8px and video at 4px, which is a second
   inconsistency wearing the first one's clothes.

   Keyed on `[data-psc-transport-host]`, the attribute adoptMediaOwnBar() stamps
   when it dresses a bar -- so this applies only where a transport is actually
   docked, never to a bare media holder.
   ---------------------------------------------------------------------------- */
.lpos-blueprint .lpos-cell--midcenter .lpos-media.-model[data-psc-transport-host] {
	gap: 0 !important;
}

/* ----------------------------------------------------------------------------
   ADD TO CART IS A COMPONENT, NOT A BARE <button> (JD 2026-08-16).

   Measured on the Cell Signals single at 1920: Add to Cart was 103x56 with
   `padding: 1px 6px`, against Buy Now at 323x62 and Subscribe & Save at 279x46,
   both on `padding: 8px`. 1px 6px is not a value anyone in this codebase chose
   -- it is CHROME'S BUILT-IN BUTTON PADDING.

   It arrives via companion.css:7292-7308, a bulk reset that lists `.psc-qty-cart`
   among eight selectors and sets `display / height / min-height / max-height /
   margin / padding / overflow / flex` all to `revert !important`. That block's
   job is to undo the archive-mode hiding rules on the single secondary, and for
   most of those properties reverting is exactly right. For a <button> it is not:
   `revert` rolls the property back to the previous cascade ORIGIN, which for a
   button is the USER-AGENT stylesheet -- so `padding` lands on Chrome's 1px 6px
   and `flex` loses the `1 1 auto` that made the button fill the slot left by QTY
   and the price panel. Hence 103px wide and vertically pinched.

   THIS IS THE SAME BUG AS THE `2px outset black` BORDER FIXED EARLIER: the UA
   stylesheet leaking through a gap in the design system. Under a nothing-
   hardcoded law, `revert` is the one reset keyword that cannot be used safely on
   a themed control -- it hands the property back to the browser rather than to a
   token. An explicit token value is the reset.

   Restores the intent already written for this button at companion.css:4664
   (`flex: 1 1 auto`, `min-height: var(--lpos-control-size)`, inset from
   `--lpos-space-md`), which that rule cannot deliver here: it is (0,5,0) and so
   is the revert block, so source order decided it and the revert block is later.
   This sits at the end of the file, later still, and repeats the blueprint class
   for (0,6,0) so it does not depend on source order alone.

   Tokens picked by ROLE, not by matching a number: `--lpos-control-size` is the
   height every other control in this row already stands at, and `--lpos-space-md`
   is the inline inset rule 4664 chose for this same button. padding-block is 0
   deliberately -- min-height plus the flex centring below own the height, so a
   block inset would fight them.
   ---------------------------------------------------------------------------- */
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright[data-psc-single-secondary] .psc-qty-cart,
.lpos-blueprint--console.lpos-blueprint--console.lpos-blueprint--console
	.lpos-cell--midright[data-psc-single-secondary] .lpos-c-cta > [data-lpos-add-to-cart] {
	flex: 1 1 auto !important;
	align-self: stretch !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: var(--lpos-control-size, 46px) !important;
	margin: 0 !important;
	padding-block: 0 !important;
	padding-inline: var(--lpos-space-md, 12px) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
}

/* ----------------------------------------------------------------------------
   PRIMARY PANEL: EVEN DISTRIBUTION (JD 2026-08-16).

   Measured on the Cell Signals single at 1920, walking `.lpos-col--center`'s
   own children rather than eyeballing the screenshot:

     .lpos-feat__actions   t81  b127   h46    <- EMPTY: no children, no text
     (column gap)                      8px
     .lpos-feat__body      t135 b857   h722
     margin-bottom                     12.75px

   Two separate faults, and the media pays for both.

   1. AN EMPTY ACTION BAR RESERVING 46px. It is a full-width glass panel with
      nothing in it -- 46px plus the column's 8px gap = 54px of the primary area
      spent on a bar with no controls. That is the empty strip above the video.
      This project already has the precedent and the ruling: a "reserved" spanbar
      slot that rendered as 277x46 of nothing was hidden by a structural guard
      rather than left to occupy space. Same treatment, same reasoning.

      Keyed on `:not(:has(*))` -- no ELEMENT children -- rather than `:empty`,
      because `:empty` is defeated by a single whitespace text node in the
      server markup, and that is exactly the kind of silent miss this codebase
      keeps paying for. `:has()` is live, so the instant a Display puts a control
      in here the bar returns on its own; nothing has to know to re-show it.
      Scoped to the centre column, so the chathead actions bar in the view
      columns (which HAS children) is not touched.

   2. A 12.75px BOTTOM MARGIN THAT IS NOT A TOKEN. 12.75px is no rung on the
      ladder -- it is an em-derived value (0.75em at this font size), which is
      precisely what the nothing-hardcoded law exists to keep out of layout. It
      also makes the stack lopsided: 8px above the body from the column's own
      gap, 12.75px below it from this margin. Zeroed so the column's single gap
      token is the only spacer in the stack, top and bottom.

   NOT TOUCHED: the media's own sizing. The aspect ratio was measured correct and
   is not part of this -- the Vimeo frame renders 1136x640 = 1.775 against 16:9's
   1.7778, width-constrained as it should be, because the column is wider than it
   is tall for this ratio. Recovering the 54px+12.75px lets a TALLER medium (3D,
   flipbook) use height it was previously denied, and leaves a width-constrained
   video exactly where it is. This adds room; it does not restretch anything.
   ---------------------------------------------------------------------------- */
/* REVERTED 2026-08-16, same day it shipped. JD reported the primary content
   "still bouncing or something" immediately after 1.0.327/1.0.328, and this rule
   is the most likely cause, so it goes rather than gets defended.

   WHY IT WAS UNSAFE, and I had the evidence before shipping it: I measured this
   same bar at display:none on one load and display:flex h46 on ANOTHER load of
   the SAME Display, and wrote that down as "intermittent" -- then shipped a rule
   whose predicate is evaluated LIVE. `:has()` re-evaluates as the DOM changes, so
   an actions bar that gains and loses a childless element makes this rule switch
   the bar on and off, which changes the column height, which moves everything
   below it AND re-triggers the flipbook/media refit that FR-C27 exists to keep
   still. A rule that toggles layout on a condition I had already measured as
   unstable is a bounce generator.

   The empty-bar problem is real and stays on the list (FR-C16), but the fix has
   to start by making the bar's emptiness STABLE -- find what puts a childless
   element in it and stop emitting it -- not by reacting to it from CSS.

.lpos-blueprint .lpos-cell--midcenter .lpos-col--center .lpos-feat__actions:not(:has(*)) {
	display: none !important;
}
*/

.lpos-blueprint .lpos-cell--midcenter .lpos-col--center > .lpos-col__slot > .lpos-feat__body {
	margin-bottom: 0 !important;
}

/* ----------------------------------------------------------------------------
   ...AND THE LEFTOVER IS SPLIT, NOT DUMPED AT THE BOTTOM.

   Removing the empty bar above did not by itself even the stack out -- it moved
   the imbalance. Measured immediately after: 5px above the media, 72px below the
   transport. The slack simply relocated, because the slot is a flex column with
   the default `justify-content: normal` (flex-start), so every recovered pixel
   piles up at the end.

   There will ALWAYS be leftover here and that is correct, not a bug to size away:
   a 16:9 medium in a column wider than it is tall is WIDTH-constrained, so it
   reaches full width with height to spare. Measured: media 1140x644, iframe
   1136x640 = 1.775 against 16:9's 1.7778. Stretching it to eat the slack is
   exactly the letterboxing/aspect distortion this must not do. So the slack is
   distributed instead -- which is also the standing rule that the primary is
   centred.

   `safe center` rather than plain `center`: when content is TALLER than the
   column (an archive grid, a long list), plain centring overflows equally in
   both directions and the top becomes unreachable -- scrollable content whose
   start is cut off above the container. `safe` falls back to flex-start in
   exactly that case, so tall content behaves as it does today and only genuinely
   short content is centred.
   ---------------------------------------------------------------------------- */
/* REVERTED 2026-08-16 with the rule above, for the same report. Centring is not
   wrong in itself -- it is the standing rule for the primary -- but it AMPLIFIES
   any height change into visible movement: with flex-start a growing element
   pushes only what is below it, whereas centred, every height change moves the
   whole stack by half the delta in BOTH directions. Paired with a bar that
   toggles, that turns a 46px flicker into the entire primary jumping 27px each
   way. Bring this back only once the stack's height is stable.

.lpos-blueprint .lpos-cell--midcenter .lpos-col--center > .lpos-col__slot {
	justify-content: safe center;
}
*/

/*
 * DEC-CR-777YX2 ("pink means it's not assigned to our token driven styling system").
 * The expanded contact info card in the MESSENGER chat home (DEC-CR-777YX1) wears the SAME
 * declared recipe as the ask-mode peek: every rule above is keyed on
 * html[data-psc-ask-open="1"] .lpos-cell--midright[data-psc-ask-chat-col], a chain that cannot
 * match while ask is closed — so the home-hosted peek painted structure without its recipe
 * (link-pink tabs, bare slider). These mirror those rules onto the home chain, same tokens.
 */
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek][data-psc-info-atom] {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: var(--lpos-gap, 8px);
}
/* NOTE (measured 1.0.462): .lpos-c-cta__media is deliberately NOT in this group — the
 * framework's own recipe (console-tokens 1709: aspect-ratio 16/9, overflow hidden; img
 * height 100%, object-fit cover) is exactly the shop card's crop, and forcing flex + auto
 * image height here overrode it, ran the photo to 569px and squashed the well to 0. The
 * atom keeps its geometry. */
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .lpos-c-title-panel,
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .lpos-c-cta,
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-toggle-row],
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-capability-bar],
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .psc-slider-host {
	display: flex !important;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-toggle-row],
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-capability-bar] {
	flex-direction: row;
	flex: 0 0 auto;
	gap: var(--lpos-gap, 8px);
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-toggle-row] > .lpos-c-cta__tab {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
}
/* MEASURED at 1.0.463: leaving the media to the framework was not enough — in the
 * single-secondary state something still flexes it (display flex, flex 1 1 auto, aspect auto,
 * 569px on a 300x300 photo) and the well squashes to 0. So the ratio box is DECLARED here with
 * the same token chain the stage rules use, at the home chain's specificity, important (P-18
 * counter). 620 wide -> ~349 tall, the shop card's crop. */
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .lpos-c-cta__media {
	/* NOT var(--lpm-aspect, ...): companion-media-aspect.js stamps --lpm-aspect inline on
	 * media roots and custom properties inherit — resolved "auto" here (measured 1.0.464,
	 * identical 569px across three ships), which no fallback can rescue. The switch-ratio
	 * token directly. */
	aspect-ratio: var(--lpos-media-switch-ratio, 16 / 9) !important;
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: hidden !important;
	/* The img is taken OUT OF FLOW below: an in-flow img's intrinsic height overpowers a
	 * preferred aspect-ratio (measured: the box held 620x569 with 16/9 SPECIFIED). Absolute
	 * inset-fill is the standard ratio-box escape; position:relative anchors it. */
	position: relative !important;
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .lpos-c-cta__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: var(--lpos-radius-panel, 10px);
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .psc-slider-host {
	flex: 1 1 auto;
	min-height: 0;
	/* !important is the P-18 counter, not decoration: the rule matched and the token resolved
	 * yet the computed background stayed transparent — an unlocatable var()-shorthand
	 * competitor (CSSOM getPropertyValue is blind to pending-substitution shorthands, so the
	 * cascade probe could not name it). Measured before/after: transparent -> glass. */
	background: var(--lpos-glass-panel) !important;
	border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent) !important;
	border-radius: var(--lpos-radius-panel, 10px);
	padding: var(--lpos-panel-pad, 12px);
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .psc-slide__callout h3 {
	margin: 0 0 var(--lpos-space-sm, 8px);
	font: 600 var(--lpos-text-md, 16px)/1.2 var(--lpos-font-display, Georgia, serif);
	color: var(--lpos-ink);
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] .psc-slide__callout p {
	margin: 0;
	font: 400 var(--lpos-text-sm, 14px)/1.5 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
}

/* DEC-CR-777YX2, the ink half: the active theme ships `button { color: #cc3366 }` (documented
 * at the top of this file) and the peek's tab buttons wore it in EVERY context — the ask-era
 * screenshot shows the same pink, a standing defect by JD's ruling, not an approved look. Same
 * counter as .psc-chat-home__tab (8502): the ink token, explicitly. Covers the capability
 * spans too — they wear the same tab class. */
html .lpos-blueprint--console [data-psc-ask-peek] .lpos-c-cta__tab {
	color: var(--lpos-ink) !important;
}

/* DEC-CR-777YY0 + YY3 — Reorder/Review wear a glyph docked at the button's LEFT edge while
 * the label stays centred in the button's FULL width (JD's YY3 ruling; the centred-row first
 * cut pushed the label off-centre). Absolute glyph at the pad token, label spans. Glyph caps
 * at the small icon step (svg-size-cap precedent). */
html .lpos-blueprint--console .psc-listcard__action {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	position: relative !important;
}
html .lpos-blueprint--console .psc-listcard__action > span {
	flex: 1 1 auto;
	text-align: center;
	min-width: 0;
}
html .lpos-blueprint--console .psc-listcard__action .psc-listcard__actionglyph {
	width: var(--lpos-icon-size-sm, 16px);
	height: var(--lpos-icon-size-sm, 16px);
	flex: 0 0 auto;
	position: absolute;
	left: var(--lpos-panel-pad, 12px);
	top: 50%;
	transform: translateY(-50%);
}

/* DEC-CR-777YY1 ("please style it correctly", annotated): while a Contact's expanded card is
 * open in the Messenger home, the per-tab title panel and the Chats|Contacts toggle row do
 * NOT paint — the card takes the whole secondary, the same takeover the shop's product peek
 * performs. Keyed on the PERSISTENT condition (the card's presence), never a stamp: any
 * repaint that removes the card restores the chrome by itself. */
.lpos-blueprint--console .lpos-cell--midright:has([data-psc-chat-home] [data-psc-ask-peek]) [data-psc-sec-title],
.lpos-blueprint--console .lpos-cell--midright:has([data-psc-chat-home] [data-psc-ask-peek]) [data-psc-chat-home] .psc-chat-home__tabs {
	display: none !important;
}

/* DEC-CR-777YY2 [a] — while a Contact's card is open, the composer's search stands down and
 * the 50/50 pair takes the floor seat. Same persistent :has(card) condition as the YY1
 * takeover; the pair itself is invisible whenever no card is open. */
.lpos-cell--botcenter .psc-peek-actionbar {
	display: none;
}
/* EYES caught a stray magnifier beside the pair (1.0.477 shot): the composer cell holds more
 * than .lpos-search — while the card is open EVERYTHING in the seat stands down except the
 * pair itself. */
.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek]) .lpos-cell--botcenter > :not(.psc-peek-actionbar) {
	display: none !important;
}
.lpos-blueprint--console:not(:has([data-psc-archive-peek="1"])):has(.lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek]) .lpos-cell--botcenter .psc-peek-actionbar {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	width: 100%;
}
.lpos-cell--botcenter .psc-peek-actionbar > .lpos-c-cta__buy {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	justify-content: center !important;
}

/* DEC-CR-777YY2 [b] — the Chats tab's list inside the card: the chat home's row anatomy in
 * the card's body slot. */
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-contact-chats] {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}
.lpos-blueprint--console .lpos-cell--midright [data-psc-chat-home] [data-psc-ask-peek] [data-psc-contact-chats][hidden] {
	display: none !important;
}

/* ==========================================================================
 * DEC-CR-777YX3 — the search lives IN the secondary panel (under each home's toggles, above
 * its content) and the Focus pager takes the floor seat the search vacated.
 * ========================================================================== */
/* The in-panel bar: the composer's search anatomy at panel scale. */
.lpos-blueprint--console .psc-sec-search {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: var(--lpos-space-xs, 4px);
	width: 100%;
	min-width: 0;
	flex: 0 0 auto;
}
.lpos-blueprint--console .psc-sec-search .lpos-search__input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--lpos-ink);
	font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
}
.lpos-blueprint--console .psc-sec-search .psc-sec-search__glyph {
	width: var(--lpos-icon-size-sm, 16px);
	height: var(--lpos-icon-size-sm, 16px);
	flex: 0 0 auto;
	margin-right: var(--lpos-space-sm, 8px);
	color: var(--lpos-ink);
	opacity: 0.7;
}
.lpos-blueprint--console .psc-nextlist__search {
	display: flex;
	list-style: none;
	min-height: 0;
}
/* While an in-panel bar STANDS VISIBLE, the floor composer's search stands down (it MOVED).
 * State-scoped, not existence-scoped: the Focus list (and its bar) stays in the DOM hidden
 * under an open view, and an existence :has() would have kept the composer dark inside the
 * chat THREAD — no chat input. Focus = the wrap WITHOUT data-psc-sec-view-open; the home bars
 * die with their host on thread open, so their existence IS their state. */
/* MEASURED (1.0.479 probe): TWO nested [data-psc-sec-wrap] nodes exist — the cell itself and
 * the inner column group; only the INNER one carries data-psc-sec-view-open, so a
 * wrap-scoped :not() matched the outer wrap and held these rules on in every state. The
 * Focus condition is therefore "NO open view anywhere": */
/* JD 2026-08-19 ("the bottom in the secondary on all singles should be two buttons"): the
 * single's mirrored floor pair is exempt from this stand-down. The rule exists so a Focus
 * LISTING hands the seat to its pager, which is right on an archive -- but a course/program
 * single also paints a listing (its lesson index), and there the authored Start | Next pair
 * owns the floor. The pager itself is suppressed on singles by the rule below. */
.lpos-blueprint--console:not(:has([data-psc-sec-view-open])):has([data-psc-nextlist]) .lpos-cell--botcenter > :not(.psc-floor-pager):not(.psc-peek-actionbar):not([data-psc-single-floorpair]),
.lpos-blueprint--console:has([data-psc-sec-view-host] [data-psc-chat-home] .psc-sec-search) .lpos-cell--botcenter > :not(.psc-floor-pager):not(.psc-peek-actionbar):not([data-psc-single-floorpair]),
.lpos-blueprint--console:has([data-psc-sec-view-host] > .psc-sec-search) .lpos-cell--botcenter > :not(.psc-floor-pager):not(.psc-peek-actionbar):not([data-psc-single-floorpair]) {
	/* the WHOLE seat stands down, not just .lpos-search — the send magnifier lives outside it
	 * (the YY1 stray-magnifier lesson, caught by eyes). */
	display: none !important;
}
/* The floor pager: only while the Focus listing is the LIVE secondary (same wrap-state key). */
.lpos-cell--botcenter .psc-floor-pager {
	display: none;
}
/* ...and never on an item SINGLE (JD 2026-08-19): the floor there is the authored two-button
 * pair. Paging a single's own listing moves inside the list (companion-panel-fill), so nothing
 * is lost. Wins over the show rule below by being an !important on an equally specific match. */
.lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-cell--botcenter .psc-floor-pager {
	display: none !important;
}
.lpos-blueprint--console:not(:has([data-psc-sec-view-open])):has([data-psc-nextlist]) .lpos-cell--botcenter .psc-floor-pager {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	width: 100%;
}
.lpos-cell--botcenter .psc-floor-pager .psc-nextlist__pager {
	display: flex !important;
	flex-direction: row !important;
	list-style: none;
	gap: var(--lpos-gap, 8px);
	width: 100%;
	margin: 0;
	padding: 0;
}
.lpos-cell--botcenter .psc-floor-pager .psc-nextlist__pgbtn {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
}
/* The pager keeps its own law: back chevron left-aligned, forward right-aligned. */
.lpos-cell--botcenter .psc-floor-pager .psc-nextlist__pgbtn:first-child {
	justify-content: flex-start !important;
}
.lpos-cell--botcenter .psc-floor-pager .psc-nextlist__pgbtn:last-child {
	justify-content: flex-end !important;
}
/* The filter covers whatever the secondary shows (chat rows and contact cards joined the
 * listing cards). */
html .lpos-blueprint--console .psc-chatrow[data-psc-filtered],
html .lpos-blueprint--console .lpos-m8card[data-psc-filtered] {
	display: none !important;
}

/* DEC-CR-777YX7 — RETIRED APPROACH RECORDED (1.0.481-482, eyes caught it): flex-crushing the
 * item chain mangled the drawer — the menu is an ACCORDION (Console expanded + collapsed
 * section headers + a footer panel), and even shares smeared the expanded section's six
 * children into overlapping text. Rules deleted; the fit is rebuilt against the REAL anatomy
 * below. */

/* DEC-CR-777YX7 + YY4, the REAL fix (measured 1.0.483): nav.lpos-menu carries min-height:100%
 * — full body height UNDER ~121px of drawer header, guaranteeing 113px of overflow with the
 * logout link at y1059, off the viewport. The nav takes the REMAINING height instead; the
 * home panel hugs its accordion and pushes the logout — the standard 46px control it already
 * is — to the drawer's floor. Nothing is crushed; the accordion keeps its anatomy. */
html #lpos-drawer-menu .lpos-drawer__body {
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
}
html #lpos-drawer-menu nav.lpos-menu {
	min-height: 0 !important;
	height: auto !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}
html #lpos-drawer-menu .lpos-menu__home {
	min-height: 0 !important;
	height: 100% !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}
/* DEC-CR-777YY5: the utility row (the four buttons) docks with the Logout — the row takes
 * the auto margin, the Logout follows it, and the pair closes the drawer floor. */
html #lpos-drawer-menu .lpos-menu__home > .lpos-drawer__tabs {
	margin-top: auto !important;
	flex: 0 0 auto !important;
}
html #lpos-drawer-menu .lpos-menu__home > .lpos-menu__link--primary {
	flex: 0 0 auto !important;
}

/* DEC-CR-777YX6 — the secondary tab bar fills the primary's header strip: the framework tabs
 * wrapper as a full-width even row, ink token explicit (the theme button-pink counter, same
 * as every companion-built tab row). */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions .psc-primary-tabs {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	width: 100%;
	height: 100%;
	min-width: 0;
}
html .lpos-blueprint--console .psc-primary-tabs__tab {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--lpos-ink) !important;
}
html .lpos-blueprint--console .psc-primary-tabs__tab[aria-disabled="true"] {
	opacity: var(--psc-disabled-alpha, 0.45);
}

/* DEC-CR-777YY7 — the offcanvas step model. Step 1: categories alone (every panel stands
 * down regardless of the framework's accordion state). Step 2: only the open section — its
 * header as the step title / way back, its items at full height. */
html #lpos-drawer-menu:not([data-psc-menu-step="2"]) .lpos-menu__panel {
	display: none !important;
	height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__section:not([data-psc-step-open]) {
	display: none !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__section[data-psc-step-open] .lpos-menu__panel {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* DEC-CR-777YY9 — the category crumb wears the ink token (the theme button-pink counter) and
 * the item-duplicate leaf pill stands down while the path shows Console | <Category>. */
html .lpos-blueprint--console .psc-cat-crumb {
	color: var(--lpos-ink) !important;
}
html .lpos-blueprint--console .lpos-topbar__panel--tabs > [data-psc-cat-dup] {
	display: none !important;
}

/* the path reads left to right: the category crumb paints AFTER the Console pill (flex
 * order — DOM insert attempts kept losing to the panel's own ordering). */
html .lpos-blueprint--console .lpos-topbar__panel--tabs {
	display: flex;
}
html .lpos-blueprint--console .lpos-topbar__panel--tabs > * {
	order: 0;
}
html .lpos-blueprint--console .lpos-topbar__panel--tabs > .psc-cat-crumb {
	order: 99;
}

/* DEC-CR-777YZ1 — both tab bars wear the full control recipe inside their panels: gap token
 * between members, panel-pad insets, control-size member height, ink, centred labels (the
 * switch panel's wide-member precedent). */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions {
	padding: var(--lpos-space-sm, 8px) !important;
}
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions .psc-primary-tabs {
	gap: var(--lpos-gap, 8px);
	align-items: stretch;
}
html .lpos-blueprint--console .psc-primary-tabs__tab {
	min-height: var(--lpos-control-size, 46px) !important;
	/* full shorthand, not padding-inline: the framework's own `.lpos-c-panel { padding: 8px }`
	 * shorthand out-cascaded the logical property and JD's review caught the cramped result.
	 * Vertical inset is 0 because the label centres by flex and the height is the control token. */
	padding: 0 var(--lpos-panel-pad, 12px) !important;
	font: 500 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
}
/* CDP-measured: the step-nav lift's own flush rules
 * (`.lpos-feat__actions[data-psc-nav-lifted] { padding: 0 var(--lpos-gap) }` and the
 * padding-block zero) out-rank YZ1's strip inset, so the tab bar's buttons sat border-on-border
 * against the strip edges (JD's review). While the strip HOSTS the tab bar the inset stands,
 * carrying the lift's own attribute + :not so it out-ranks both flush rules; the strip is 62px,
 * so the 8px token leaves the buttons exactly control-size (46px). */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions:has(> .psc-primary-tabs),
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__actions[data-psc-nav-lifted]:not(.lpos-view__chathead):has(> .psc-primary-tabs) {
	padding: var(--lpos-space-sm, 8px) !important;
}
html .lpos-blueprint--console .lpos-topbar__panel--tabs {
	gap: var(--lpos-gap, 8px);
	align-items: center;
}
/* The crumb now WEARS the framework's labeled icon-button component (same classes as the
 * Console pill beside it), so skin, radius, height and padding all come from the component.
 * Only what the component cannot know stays here: the crumb never flexes wider than its label. */
html .lpos-blueprint--console .psc-cat-crumb {
	flex: 0 0 auto !important;
	/* The pill's corner is the CONTROL radius token (CDP: the icon-btn family is swept to the
	 * panel radius by a companion glass rule, but .psc-crumb re-declares control) — match it. */
	border-radius: var(--lpos-radius-control, 8px) !important;
}

/* DEC-CR-777YZ3 [b] — the archive-peek floor pair: while the Shop Info peek stands, the seat
 * hosts the mirrored 50/50 pair and everything else in it stands down. Same persistent
 * :has() model as every other seat state. */
.lpos-cell--botcenter .psc-peekpair {
	display: none;
}
.lpos-blueprint--console:has([data-psc-archive-peek="1"]) .lpos-cell--botcenter > :not(.psc-peekpair):not(.psc-peek-actionbar):not(.psc-floor-pager) {
	display: none !important;
}
.lpos-blueprint--console:has([data-psc-archive-peek="1"]) .lpos-cell--botcenter .psc-peekpair:not([hidden]) {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	width: 100%;
}
.lpos-cell--botcenter .psc-peekpair > .lpos-c-cta__buy {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	justify-content: center !important;
	min-height: var(--lpos-control-size, 46px) !important;
}
/* DEC-CR-777YZ3 [a] — the calendar host's search bar keeps the panel inset above the month. */
[data-psc-sec-view-host] > .psc-sec-search {
	margin-bottom: var(--lpos-space-sm, 8px);
}


/* DEC-CR-777YZ6 [a] — JD's law amendment: chat CONTENT is exempt from the no-scrollbars law.
 * The thread list scrolls; everything around it still must not. (Root cause of the invisible
 * conversation: 913px of messages in a 723px list with overflow hidden.) */
html .lpos-blueprint--console .lpos-c-chat__list {
	overflow-y: auto !important;
	min-height: 0 !important;
}

/* SWEEP-507 v2 (CDP-measured: the product-single :has rule force-flexes the cta media at
 * ~(0,7,0) whenever the CENTER holds a media single — which the home always does — so the v1
 * (0,5,2) stand-down lost. This carries the doubled class + a :has of the same stamp for a
 * decisive win, active ONLY while the feed owns the panel. The :not guards spare anything
 * INSIDE an open card (contact peek / shop peek) — measured: this rule was killing the
 * contact card photo via max-height:0, which inline pins do not cover. */
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .lpos-c-cta__media:not([data-psc-ask-peek] *):not([data-psc-sec-view-open] *),
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .lpos-media-image-wrap--empty:not([data-psc-ask-peek] *):not([data-psc-sec-view-open] *),
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .lpos-c-cta__qtyprice:not([data-psc-ask-peek] *):not([data-psc-sec-view-open] *),
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .psc-qty-cart:not([data-psc-ask-peek] *):not([data-psc-sec-view-open] *),
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .lpos-c-cta > [data-lpos-add-to-cart]:not([data-psc-ask-peek] *):not([data-psc-sec-view-open] *) {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	flex: 0 0 0 !important;
}

/* SWEEP-511: v1 of this fix collapsed the CTA grid to ONE column, which un-crushed the feed
 * but stacked the What's Next | What's New pair that lives in the same grid's first row. Keep
 * TWO flexible columns (fixed 315px tracks were the original crush), span the feed across
 * both, and give it the remaining height so the panel glass runs the full column. */
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .lpos-c-cta--adaptive {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	grid-template-rows: auto minmax(0, 1fr) !important;
}
html body .lpos-blueprint--console.lpos-blueprint--console:has(.lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap]) .lpos-cell--midright [data-psc-nextlist-on][data-psc-sec-wrap] .psc-nextlist {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	align-self: stretch !important;
}

/* q1 guest journey — the injected Get Started route display: the same centered column language
 * as the welcome display it stands beside, every value a token. Honest-empty until authored. */
html .lpos-blueprint--magick8 .psc-getstarted {
	/* Skeleton comes from the engine's own stack component the panel now wears
	 * (lpos-magick8__stack--login); only the journey copy's alignment is ours. The explicit
	 * column direction stays: without it the Back control painted BESIDE the copy (eye-caught). */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--lpos-space-md, 16px);
	text-align: center;
}
html .lpos-blueprint--magick8 .psc-getstarted__title {
	font: 600 var(--lpos-text-xl, 28px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: var(--lpos-ink);
	margin: 0;
}
html .lpos-blueprint--magick8 .psc-getstarted__subtitle {
	font: 500 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: color-mix(in srgb, var(--lpos-ink) 70%, transparent);
	margin: 0;
}
html .lpos-blueprint--magick8 .psc-getstarted__empty {
	font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	color: color-mix(in srgb, var(--lpos-ink) 55%, transparent);
	margin: 0;
}
/* The engine absolutely-positions login-stack CTAs (measured: inset 47px from the top edge),
 * which floated Back beside the copy. In THIS journey panel Back is a flow child under the copy. */
html .lpos-blueprint--magick8 .psc-getstarted .psc-getstarted__back {
	position: static !important;
	margin-top: var(--lpos-space-md, 16px);
	align-self: center;
}

/* JD 2026-08-17 (annotated screenshot, then correction "built with our panel and dynamic
 * system with proper radius and borders") — flyout menu CATEGORY rows: THREE separate panels,
 * [icon thumbnail] [centered title] [chevron icon-button -> step 2]. Skin, border and radius
 * come from .lpos-c-panel / .lpos-c-icon-btn (the shared component), NOT hand-rolled here — this
 * block only lays them out. The row wrapper itself carries no border so only the three boxes
 * read, as drawn. */
/* JD 2026-08-17 correction 3: the rows are TALL, each row's three panels stretch to the full
 * (equally-distributed) row height and stack like listing cards. The category section fills its
 * flex slot and its divider-row fills the section; the grid cells stretch, so the icon, title
 * and chevron panels all grow to the row's height. */
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] {
	/* FLEX, not grid (JD's square regression 1.0.541): a grid `auto` column feedback-loops with
	 * the thumb's aspect-ratio and blew the row to 318px, forcing the drawer to scroll. In flex,
	 * align-items:stretch gives the thumb a DEFINITE height and aspect-ratio resolves its width
	 * without the max-content column loop. Two children: square icon + title (chevron inside). */
	display: flex !important;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	height: 100%;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__thumb {
	/* square: definite height from the stretched flex row, width follows via aspect-ratio */
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	width: auto;
	height: auto;
	align-self: stretch;
	min-width: 0;
	/* panel gives glass + hairline + radius; only the authored image overlays it */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__title {
	flex: 1 1 auto;
}
/* the title panel holds the centred label AND the docked chevron (JD correction 5) */
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	text-align: center;
	color: var(--lpos-ink);
	/* JD 2026-08-17: larger menu-item label font (Console..Settings) */
	font: 600 var(--lpos-text-lg, 18px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	min-width: 0;
}
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] .psc-cat-row__label {
	min-width: 0;
}
/* the framework's own caret in the label stands down; the row's chevron replaces it */
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] .psc-cat-row__label svg {
	display: none !important;
}
/* the chevron is docked at the right edge INSIDE the title panel — a small square control that
 * does not shift the centred label (absolute), inset by the panel gap */
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] .psc-cat-row__go {
	position: absolute;
	right: var(--lpos-space-sm, 8px);
	top: 50%;
	transform: translateY(-50%);
	aspect-ratio: 1 / 1;
	height: calc(100% - 2 * var(--lpos-space-sm, 8px));
	min-height: var(--lpos-control-size, 46px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--lpos-ink);
}
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] .psc-cat-row__go svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
}

/* JD 2026-08-17 — the flyout header: tenant inline logo where the portal selector sat,
 * X close icon-button where the dropdown toggle was. The parked selector stands down
 * (an operator affordance now — the per-client install model retires it for members). */
html #lpos-drawer-menu .lpos-c-select[data-psc-portal-select-parked] {
	display: none !important;
}
/* JD 2026-08-17 correction: the header spans the FULL width across the top (logo left, close
 * right), not squished. The head's own container (the parked-selector twin) shrink-wrapped to
 * its content — force it full width and stack the header + the new search below it. */
html #lpos-drawer-menu .lpos-c-select-twin:has(.psc-flyout-head),
html #lpos-drawer-menu .psc-drawer-portal:has(.psc-flyout-head) {
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	gap: var(--lpos-space-sm, 8px);
}
/* JD 2026-08-17 correction: logo centered in the header, no box, larger; X floats at the right
 * corner so it does not push the logo off-centre. */
html #lpos-drawer-menu .psc-flyout-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--lpos-control-size, 46px);
	margin-bottom: 0;
}
/* JD 2026-08-17: search bar between the header and the two inline buttons — full-width panel */
html #lpos-drawer-menu .psc-flyout-search {
	display: flex;
	align-items: center;
	gap: var(--lpos-gap, 8px);
	width: 100%;
	min-height: var(--lpos-control-size, 46px);
	padding: 0 var(--lpos-panel-pad, 12px);
}
html #lpos-drawer-menu .psc-flyout-search .lpos-search__icon {
	display: inline-flex;
	align-items: center;
	color: var(--lpos-ink);
	flex: 0 0 auto;
}
html #lpos-drawer-menu .psc-flyout-search .lpos-search__icon svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
}
html #lpos-drawer-menu .psc-flyout-search .lpos-search__input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--lpos-ink);
	font: 500 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif);
	outline: none;
}
/* JD 2026-08-17: the category rows share the drawer's height equally — collectively they span
 * from under the two inline buttons to the docked bottom nav, no clump-at-top gap. Scoped to
 * step 1 (in step 2 one section expands to its items). The docked tabs + logout keep their
 * margin-top:auto / flex:0 0 auto from YX7, so only the category sections grow. */
html #lpos-drawer-menu:not([data-psc-menu-step="2"]) .lpos-menu__home > .lpos-menu__section {
	flex: 1 1 0 !important;
	display: flex !important;
	flex-direction: column;
	justify-content: stretch;
	min-height: 0 !important;
}
/* the category row fills its (equally-distributed) section so the three panels grow tall,
 * stacked like listing cards — JD 2026-08-17 correction 3 */
html #lpos-drawer-menu:not([data-psc-menu-step="2"]) .lpos-menu__home > .lpos-menu__section > .lpos-menu__divider[data-psc-cat-row] {
	flex: 1 1 auto !important;
}
html #lpos-drawer-menu .psc-flyout-head__logo {
	/* centred, larger again (JD), no box; shared brand contract still sizes an authored mark */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	color: var(--lpos-logo-word-color, var(--lpos-ink));
	font: 700 var(--lpos-text-2xl, 30px)/1.1 var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif);
	--psc-brand-logo-h: calc(var(--lpos-control-size, 46px) * 1.5);
}
/* JD 2026-08-17: Back button floats at the LEFT, shown ONLY in the second-step view */
html #lpos-drawer-menu .psc-flyout-head__back {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	/* !important because the .lpos-c-icon-btn base sets inline-flex and out-ranked the plain
	 * display:none, so Back showed on the main menu (measured 1.0.541). */
	display: none !important;
	align-items: center;
	gap: var(--lpos-space-xs, 4px);
	height: var(--lpos-control-size, 46px);
	padding: 0 var(--lpos-panel-pad, 12px);
	color: var(--lpos-ink);
}
html #lpos-drawer-menu[data-psc-menu-step="2"] .psc-flyout-head__back {
	display: inline-flex !important;
}
html #lpos-drawer-menu .psc-flyout-head__back svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
	flex: 0 0 auto;
}
/* JD 2026-08-17: apply an icon to each category box (default glyph or authored image) */
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__thumb[data-psc-cat-glyph] {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lpos-ink);
}
html .lpos-menu .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__thumb[data-psc-cat-glyph] svg {
	width: 55%;
	height: 55%;
}
/* the X floats at the right corner so the logo stays centred in the whole header */
html #lpos-drawer-menu .psc-flyout-head__close {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: var(--lpos-control-size, 46px);
	height: var(--lpos-control-size, 46px);
}
html #lpos-drawer-menu .psc-flyout-head__close svg {
	width: var(--lpos-icon-size, 26px);
	height: var(--lpos-icon-size, 26px);
}

/* DEC-CR-777ZB2 (JD 2026-08-17): the primary stage fills DOWN to the bottom bar — the video panel
 * was fixed at its 16/9 height (flex 0 0) inside a taller column, leaving dead space below. The
 * feat body and the media grow to the column; the stage fills and the media covers, so no gap.
 * Applies to the video AND the coming-soon states, on non-magick8 console only. */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media > .lpos-media__stagev {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: auto !important;
}
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body > .lpos-media > .lpos-media__stagev > * {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover;
}

/* DEC-CR-777ZB2 cont.: close the residual below the transport and cover the coming-soon state.
 * The centre column + its active slot fill, the coming body fills like the video body. */
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-col--center,
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-col__slot.-active {
	min-height: 0 !important;
}
html .lpos-blueprint--console .lpos-cell--midcenter .lpos-feat__body--coming {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
/* JD 2026-08-17 correction: even vertical rhythm in the flyout header stack — equal gap above &
 * below the search, and below the inline buttons. The header + search live in the parked-selector
 * twin (internal gap = one token); the twin and the inline-buttons row each carry the same bottom
 * gap so every seam matches. */
html #lpos-drawer-menu .lpos-c-select-twin:has(.psc-flyout-head),
html #lpos-drawer-menu .psc-drawer-portal:has(.psc-flyout-head) {
	gap: var(--lpos-space-sm, 8px) !important;
	margin: 0 0 var(--lpos-space-sm, 8px) 0 !important;
}
html #lpos-drawer-menu .lpos-menu__ctas {
	margin: 0 0 var(--lpos-space-sm, 8px) 0 !important;
}

/* JD 2026-08-17: the full offcanvas drawer panel has SQUARE corners (0 radius) — it meets the
 * viewport edges, so a radius reads as a floating card. Both left (menu) and right (plus/utility)
 * drawers, and the offcanvas scrim host. */
html .lpos-drawer,
html .lpos-drawer--left,
html .lpos-drawer--right,
html #lpos-drawer-menu,
html .lpos-offcanvas__panel,
html .lpos-drawer__body {
	border-radius: 0 !important;
}

/* JD 2026-08-17 — flyout rhythm + SECOND-STEP styling.
 * (a) tighter gap under the search / above the inline buttons (was 24px, too much);
 * (b) a little more air between the category rows (was 5px);
 * (c) step 2: the opened category is a COMPACT header (its glyph was blowing to 318px), and its
 *     item links are uniform full-width panels, evenly spaced. */
html #lpos-drawer-menu .lpos-c-select-twin:has(.psc-flyout-head),
html #lpos-drawer-menu .psc-drawer-portal:has(.psc-flyout-head) {
	margin: 0 0 var(--lpos-space-xs, 4px) 0 !important;
}
html #lpos-drawer-menu .lpos-menu__ctas {
	margin: 0 0 var(--lpos-space-xs, 4px) 0 !important;
}
/* more air between the stacked category rows */
html #lpos-drawer-menu:not([data-psc-menu-step="2"]) .lpos-menu__home {
	gap: var(--lpos-space-md, 12px);
}

/* --- SECOND STEP --- */
/* the opened category header is compact, not a giant tile */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__divider[data-psc-cat-row] {
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: var(--lpos-control-size, 46px) !important;
	max-height: calc(var(--lpos-control-size, 46px) * 1.4) !important;
	margin-bottom: var(--lpos-space-sm, 8px) !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__divider[data-psc-cat-row] > .psc-cat-row__thumb {
	max-height: calc(var(--lpos-control-size, 46px) * 1.4) !important;
	max-width: calc(var(--lpos-control-size, 46px) * 1.4) !important;
}
/* the item list fills the rest with even gaps */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__panel {
	display: flex !important;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	flex: 1 1 auto;
	min-height: 0;
}
/* every item is one uniform full-width panel — same border, radius, height, centred label,
 * regardless of whether the framework split some with a child chevron */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__panel .lpos-menu__link {
	flex: 1 1 0 !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	border: var(--lpos-border-w, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
	background: var(--lpos-glass-1) !important;
	color: var(--lpos-ink) !important;
	font: 600 var(--lpos-text-md, 16px)/1.2 var(--lpos-font-ui, "Inter", ui-sans-serif, system-ui, sans-serif) !important;
	margin: 0 !important;
}
/* the framework's per-item child-chevron split button folds away so the row reads as one panel */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__panel .lpos-menu__link svg {
	display: none !important;
}

/* JD 2026-08-17: flatten the step-2 items that the framework splits with a child-expand chevron
 * (.lpos-menu__item--haskids) so EVERY item reads as one identical full-width panel. The 2-step
 * model has no third level, so the child toggle stands down and the link navigates directly. */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__list {
	display: flex !important;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* items keep their NATURAL height and stack (flex:0 0 auto) — a distribute-flex collapsed and
 * overlapped them when the container was not tall enough (measured 1.0.545). */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item {
	display: flex !important;
	flex: 0 0 auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* the child-expand chevron/toggle (anything in the li that is not the link) folds away */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item > *:not(.lpos-menu__link),
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item--haskids > svg,
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item .lpos-menu__toggle {
	display: none !important;
}
/* the link fills its item with a FULL radius (was left-rounded on the split ones) */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item .lpos-menu__link {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-height: var(--lpos-control-size, 46px) !important;
	border-radius: var(--lpos-radius-control, 8px) !important;
}

/* JD 2026-08-17 second-step refinements:
 * - the item list fills the FULL height between the category header and the bottom nav, items
 *   equal-height distributed (the whole chain section->panel->list must fill for flex:1 to work);
 * - item labels LEFT-aligned;
 * - the category header's own right chevron stands down in step 2;
 * - the Back button is a little wider. */
html #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__home > .lpos-menu__section[data-psc-step-open] {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column;
	min-height: 0 !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__panel {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__list {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item {
	flex: 1 1 0 !important;
	min-height: 0 !important;
}
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] .lpos-menu__panel .lpos-menu__item .lpos-menu__link {
	height: 100% !important;
	min-height: 0 !important;
	justify-content: flex-start !important;
	text-align: left !important;
	padding-left: var(--lpos-panel-pad, 12px) !important;
}
/* the category header's own chevron stands down in step 2 (you are already inside it) */
html #lpos-drawer-menu[data-psc-menu-step="2"] [data-psc-step-open] > .lpos-menu__divider[data-psc-cat-row] .psc-cat-row__go {
	display: none !important;
}
/* Back button a little wider */
html #lpos-drawer-menu .psc-flyout-head__back {
	padding: 0 var(--lpos-space-md, 12px) !important;
	gap: var(--lpos-space-sm, 8px) !important;
}

/* DEC-CR-777 step-2 FILL FIX (CDP-measured 1.0.547): the panel was computing display:block, so
 * the item list stayed 33px tall and flex:1 items collapsed/overlapped. Force the panel to a
 * flex column and give the list a definite fill of the panel's (604px measured) height, so the
 * items genuinely distribute. Max specificity (html body + step attr) to beat the framework's
 * own .lpos-menu__panel block rule. */
html body #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__section[data-psc-step-open] > .lpos-menu__panel {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
html body #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__section[data-psc-step-open] > .lpos-menu__panel > .lpos-menu__list {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	gap: var(--lpos-space-sm, 8px) !important;
}
html body #lpos-drawer-menu[data-psc-menu-step="2"] .lpos-menu__section[data-psc-step-open] .lpos-menu__list > .lpos-menu__item {
	flex: 1 1 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

/* JD 2026-08-17: the single's Add-to-Cart button rendered with the raw browser default
 * `2px outset` border (WooCommerce's own button escaping our reset). Force the shared control
 * skin so it matches the price panel beside it. NOT cell-scoped: BlueprintRenderer puts the buy
 * box in the RIGHT column on a single (measured — the earlier midcenter-only rule never matched),
 * so this applies anywhere in the console blueprint. */
/* Specificity note (CDP-measured): a product-single rule
 * `.lpos-blueprint--console:has(.lpos-cell--midcenter .lpos-feat__body...) { border: revert !important }`
 * reverts the ATC border to the browser `2px outset` default and out-ranked the plain selector.
 * Doubling the blueprint class + qualifying the cell and control classes carries this past it. */
html body .lpos-blueprint--console.lpos-blueprint--console .lpos-cell .psc-qty-cart.psc-qty-cart,
html body .lpos-blueprint--console.lpos-blueprint--console .lpos-cell .lpos-c-cta__buy.psc-qty-cart,
html body .lpos-blueprint--console.lpos-blueprint--console .lpos-cell [data-lpos-add-to-cart] {
	border: var(--lpos-border-width, 1px) solid var(--psc-panel-border) !important;
	border-radius: var(--lpos-radius-panel, 10px) !important;
	background: var(--lpos-glass-panel, var(--lpos-glass-2)) !important;
	color: var(--lpos-ink) !important;
	outline: none !important;
}

/* DEC-CR-777ZD3 (JD 2026-08-17): on a single, the floor shows the mirrored Buy Now | Continue pair
 * in place of the search + pager. Same seat-state model as the shop-peek pair. */
html .lpos-blueprint--console .lpos-cell--botcenter[data-psc-single-floor] .lpos-search,
html .lpos-blueprint--console .lpos-cell--botcenter[data-psc-single-floor] .psc-floor-pager,
html .lpos-blueprint--console .lpos-cell--botcenter[data-psc-single-floor] .lpos-c-icon-btn:not([data-psc-single-floor-idx]) {
	display: none !important;
}
html .lpos-blueprint--console .lpos-cell--botcenter[data-psc-single-floor] .psc-single-floorpair {
	display: flex !important;
	flex: 1 1 auto;
	align-items: stretch;
	gap: var(--lpos-gap, 8px);
	width: 100%;
}

/* ORDER VIEW (DESIGN-LAW FIX, JD 2026-08-18): the primary Order single now composes the standard
 * componentry — header + status badge, meta subpanels, psc-listcard item rows, total row — instead
 * of bare text lines. These rules are LAYOUT only: skin belongs to the panel system (YV8 canon),
 * every gap/pad is a token. No overflow declarations — the panel fits its cell (no-scrollbar law). */
html .lpos-blueprint--console .psc-order-view {
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-md, 12px);
	padding: var(--lpos-space-lg, 16px);
	min-height: 0;
}
html .lpos-blueprint--console .psc-order-view__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lpos-space-md, 12px);
}
html .lpos-blueprint--console .psc-order-view__head h2 {
	margin: 0;
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
	min-width: 0;
}
html .lpos-blueprint--console .psc-order-view__status {
	flex: 0 0 auto;
}
html .lpos-blueprint--console .psc-order-view__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lpos-space-sm, 8px);
}
html .lpos-blueprint--console .psc-order-view__metaline {
	padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
}
html .lpos-blueprint--console .psc-order-view__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lpos-space-sm, 8px);
	min-height: 0;
}
html .lpos-blueprint--console .psc-order-view__total {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lpos-space-md, 12px);
	padding: var(--lpos-space-sm, 8px);
	margin-block-start: auto;
}

/* =====================================================================================
 * JD 2026-08-18 — EXPANDED DETAILS CARD (archive Info peek) layout corrections.
 * Scope is STRICTLY the peek ([data-psc-archive-peek="1"]); product singles keep the
 * engine's canon layout untouched. Three fixes, straight from JD's marked screenshot:
 * 1. The empty slides panel above Add to Cart | Buy Now stands down (it painted as a
 *    bare glass panel when the product has no gallery slides -- honest-empty means
 *    ABSENT, not an empty pane).
 * 2. The featured image keeps its own aspect: the media row takes the freed space and
 *    the image renders contain (never cropped to a 3:1 letterbox again).
 * 3. QTY and price distribute 50/50 across the row -- the same split the
 *    Subscribe & Save | One-Time pair above them already uses.
 * ===================================================================================== */
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .psc-slider-host:not(:has(img, video, iframe, model-viewer)) {
	display: none !important;
}
/* JD 2026-08-19 correction: the media keeps its TRUE aspect (the aspect pass caps it); the
 * flexible row is the CONTENT panel below the QTY bar -- IT absorbs the column's leftover. */
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta.lpos-c-cta--adaptive {
	grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__media {
	height: auto !important;
	min-height: 0 !important;
}
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__qtyprice {
	display: flex !important;
	gap: var(--lpos-space-xs, 8px) !important;
}
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__qtypanel,
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta__pricepanel {
	flex: 1 1 0 !important;
	justify-content: center !important;
	min-width: 0 !important;
}

/* JD 2026-08-18 QA — a listing row is a grid item: without min-height/min-width 0 its auto
 * minimum is the IMAGE's natural size, which grew 1fr tracks to 635px and blew the panel. */
html .lpos-blueprint--console .psc-nextlist > li {
	min-height: 0;
	min-width: 0;
}

/* COURSE STATS LINE (JD 2026-08-18, Shop-parity fix #2): materialized course descriptions carry
   the LearnPress stats line after a newline ("45 lessons - 45 days - ...") -- pre-line renders it
   as its own small line under the prose in the expanded card. Products carry no newline, so their
   excerpts are untouched. */
.lpos-c-cta__excerpt { white-space: pre-line; }

/* LIST CARD ANATOMY (JD's drawing 2026-08-19, task #28): thumbnail spans the row's full height
   on the left; the TITLE bar stretches the full remaining width; the description fills the full
   width below it. Replaces the shrink-wrapped floating pills. */
.psc-listcard{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:stretch!important;}
.psc-listcard__media{align-self:stretch!important;height:auto!important;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.psc-listcard__media img{width:100%;height:100%;object-fit:cover;}
.psc-listcard__body{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-width:0;gap:6px;}
.psc-listcard__title{width:100%!important;max-width:none!important;box-sizing:border-box;display:block!important;}
.psc-listcard__metaA,.psc-listcard__metaB{width:100%!important;max-width:none!important;box-sizing:border-box;display:block!important;flex:1 1 auto;}

/* FLOOR PAGER CHROME (JD 2026-08-19, task #29): the pager pair wears EXACTLY the floor CTA
   pair's panel chrome -- the icon-btn class stays for the click contract, its square/transparent
   skin is overridden here. */
.psc-archive-pager .lpos-c-cta__buy.lpos-c-icon-btn{
  background:var(--lpos-panel-hover,rgba(30,42,66,.40))!important;
  border:1px solid var(--lpos-panel-border,rgba(102,126,234,.35))!important;
  border-radius:var(--lpos-radius-control,10px)!important;
  aspect-ratio:auto!important;
  padding:0 1em!important;
}
.psc-archive-pager .lpos-c-cta__buy.lpos-c-icon-btn svg{width:1.35em!important;height:1.35em!important;}

/* ============================================================================
 * DEC 2026-08-19 (JD "review the styling" + "gap above the qty still broken"):
 * the expanded card's media row is a flexible grid track sized by the column,
 * while the media panel inside sized itself to its 16/9 content -- the leftover
 * track painted as naked void between the media and the QTY row. The media
 * panel now FILLS its track and centers its media inside its own chrome (the
 * same balanced-breathing treatment the primary stage got in 1.0.768), so the
 * space lives INSIDE the panel and the section rhythm below stays tight.
 * ==========================================================================*/
/* JD 2026-08-19 (corrected same day): the media well holds the app's TRUE video aspect --
 * token-driven, same ratio as the list thumbs -- the aspect pass's stale pixel cap is
 * overridden because it was measured at an older column width and crushed the frame wide.
 * The leftover column space goes to the CONTENT panel (grid-rows rule above), never here. */
html .lpos-blueprint--console .lpos-cell--midright[data-psc-archive-peek="1"] .lpos-c-cta .lpos-c-cta__media,
html .lpos-blueprint--console .lpos-cell--midright[data-psc-single-secondary="1"] .lpos-c-cta .lpos-c-cta__media{
	aspect-ratio:var(--lpos-thumb-aspect,16/9);
	height:auto !important;
	max-height:none !important;
	align-self:start;
}
.lpos-blueprint .lpos-c-cta .lpos-c-cta__media>img,
.lpos-blueprint .lpos-c-cta .lpos-c-cta__media>.lpos-media{width:100%;height:100%;object-fit:cover;}

/* DEC 2026-08-19 (JD): every list-styled item thumbnail renders at the app's
 * video aspect -- token-driven, one ratio for thumbs and players alike. */
.psc-listcard .psc-listcard__media{
	aspect-ratio:var(--lpos-thumb-aspect,16/9);
	width:auto;height:auto;align-self:stretch;
}

/* ==========================================================================
 * DEC-CR-777ZC1 — ITEM SINGLES LAYOUT (JD 2026-08-19, drawing + "secondary tab bar")
 *
 * On item singles only, the process rail stops being a vertical strip down the
 * visual left and becomes a HORIZONTAL row in the band at the top of the primary
 * panel -- the place JD's arrow lands. The freed vertical strip goes back to the
 * primary content, and the profile button leaves its bottom-left dock to become
 * the eighth member of the switch row (that move is JS; see DEC-CR-777ZC1 there).
 *
 * WHY THE RAIL IS RE-PLACED AND NOT RE-PARENTED. Roughly thirty selectors across
 * five companion files -- ask-mode.js alone owns fourteen -- are written as
 * `.lpos-rail--right .psc-step`, i.e. they require the buttons to be DESCENDANTS
 * of the rail. Moving the BUTTONS to a new host breaks every one of them and
 * re-opens the per-tick duplication bug (syncRightRail rebuilds any .psc-step it
 * cannot find inside its own rail). Moving the RAIL ELEMENT in the DOM is no
 * better: it is actively managed -- measured live, a rail dragged out of
 * .lpos-blueprint__row is stamped `hidden` again within one 120ms scan by the
 * FR-C34 railless watcher. So the element stays exactly where it is and only its
 * GRID PLACEMENT changes. Every existing selector keeps matching, syncRightRail
 * keeps writing to the same node, and no watcher notices anything moved.
 *
 * NAMING TRAP: the visually-LEFT process rail is DOM class .lpos-rail--right.
 * .lpos-rail--left is the unrelated tool rail. This block means the former.
 *
 * The gate is :has() on the sibling cell's data-psc-single-secondary, the same
 * signal isSingleSurface() stamps, so the CSS and the JS cannot disagree about
 * what a single is. Archives stamp data-psc-archive-secondary and the dashboard
 * stamps neither, so both are excluded structurally rather than by resemblance.
 * ==========================================================================*/

/* CORRECTION 2026-08-20 (JD: "The new steps are not in the secondary tab bar").
 * The first cut put this strip across the top of the PRIMARY panel. That read his
 * annotated arrow as the authority and his words as loose. It was the wrong call:
 * his written instruction has been consistent from the start -- "move the steps to
 * the secondary tab menu horizontal and contained within the secondary tab panel" --
 * and the arrow was pointing at a band, not choosing a column. The strip belongs in
 * the SECONDARY column, under the eight-tab row. Column 3, not 1/3.
 *
 * This also removed the need to pad the primary cell, which is what was clipping the
 * flipbook: the flip sizes itself once on init and does not re-measure, so a padding
 * change applied after it mounted pushed its top out of view. */
/* CORRECTION 2026-08-20 #2 (JD, with an arrow drawn from the right-hand row pointing LEFT:
 * "secondary tab is here not in the right").
 *
 * I had the wrong element in my head for two rounds. THE SECONDARY TAB BAR IS THE BAR ABOVE
 * THE PRIMARY CONTENT -- the same band that carries Console / Studio / Vault / Portals /
 * Profile / Insights on the dashboard. It is not the icon row over the secondary column.
 *
 * That reading makes every instruction he has given consistent, including the one I misread
 * at 1.0.883 ("the new steps are not in the secondary tab bar"): the steps WERE in the right
 * band then, but floating beside that bar rather than seated in it, because 1.0.881 had
 * hidden the bar itself for being empty. His answer to my own question -- the words
 * "secondary tab bar" plus an arrow at that band -- said exactly this the first time.
 *
 * So: column 1/3, back over the primary content, wearing the panel skin so it IS that bar
 * rather than a second thing hovering next to it. */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-rail--right{
	grid-column:1 / 3 !important;
	grid-row:2 !important;
	align-self:start !important;
	justify-self:stretch !important;
	z-index:3 !important;
	flex-direction:row !important;
	align-items:center !important;
	justify-content:flex-start !important;
	width:auto !important;
	height:var(--lpos-control-size,46px) !important;
	min-height:0 !important;
	max-height:none !important;
	gap:var(--lpos-gap,12px) !important;
	margin:var(--lpos-gap,12px) 0 0 0 !important;
	/* Never clip silently (FR-15 §1): a long step list scrolls sideways here the
	 * way it scrolled vertically in the rail. */
	overflow-x:auto !important;
	overflow-y:hidden !important;

	/* JD 2026-08-20: "the step bar in the secondary tab bar is now missing." The step
	 * buttons were rendering, but the BAR was not: this rule used to force
	 * background:transparent and border:0, which was right while the strip floated in
	 * the primary band and wrong the moment it moved into the secondary column, where
	 * every sibling -- the eight-tab row above it, the title panel below it -- is a
	 * glass panel. A bare row of buttons among panels reads as chrome that failed to
	 * load. Same tokens as its neighbours, so it inherits any brand re-skin with them
	 * (Console consistency law), and the padding matches the tab row's so the two bars
	 * are the same object at two sizes rather than two different things. */
	background:var(--lpos-glass-panel) !important;
	-webkit-backdrop-filter:var(--lpos-blur-md) !important;
	backdrop-filter:var(--lpos-blur-md) !important;
	border:1px solid var(--lpos-panel-border,rgba(97,51,217,.38)) !important;
	border-radius:var(--lpos-radius-panel,10px) !important;
	padding:var(--lpos-gap,8px) !important;
	height:auto !important;
}

/* THE ATOM STAYS SQUARE (JD's law). In the vertical rail the buttons were sized
 * by syncRailGeometry from the rail's height; that function now hands this axis
 * to CSS on singles, so the token is the size, full stop. */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-rail--right .psc-step{
	flex:0 0 auto !important;
	margin:0 !important;
	width:var(--lpos-control-size,46px) !important;
	height:var(--lpos-control-size,46px) !important;
}

/* JD: "give that space back to the primary content". The empty strip is the
 * MIDDLE row only -- column 1 still seats the menu button in row 1, so a full
 * column collapse would take the hamburger with it. The span is applied to the
 * REGION wrapper, not the cell: the cell's parent is display:block, so the cell
 * is not itself a grid item and a grid-column on it is inert (measured). */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-blueprint__region--midcenter{
	grid-column:1 / 3 !important;
}
/* CORRECTION 2026-08-20 (JD: "you removed my bottom right bar with the two buttons").
 * The first cut spanned .lpos-cell--botcenter across 1/3 on the reasoning that the floor
 * pair should sit under the panel it belongs to. That was a misread of the layout: the
 * buy pair under the PRIMARY is the ENGINE's own .lpos-c-cta__actionbar, a separate
 * blueprint region that was already there. botcenter is the SECONDARY's floor -- JD's
 * bottom-right bar -- so spanning it did not move a duplicate, it dragged his bar out of
 * the right-hand column and left that corner empty. It stays in column 3.
 *
 * (The buy pair currently showing in BOTH floors is the pre-existing engine actionbar
 * leak logged as punch-list #66, not this rule.) */

/* The primary cell keeps its base padding. The earlier override here reserved a strip
 * that no longer lives in this column, and because the flipbook measures itself once on
 * init and never re-measures, that reserved space pushed the magazine's top edge out of
 * view -- JD: "the pdf is now off center and cut off at the top". */

/* The PRIMARY cell clears the bar sitting over it. The reserve counts the bar's own padding
 * (2 x 8px) as well as the control token, because the strip is a real panel now: 64px, not 46.
 *
 * This padding is present in the stylesheet at load, so the flipbook measures the already-
 * reduced box when it initialises and positions its pages against the correct height. That
 * matters: the flip library never re-lays out (see the revert note further down), so the one
 * thing that must not happen is the box changing size AFTER it mounts. A static reserve is
 * safe; a JS-driven or state-dependent one would not be. */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-cell--midcenter{
	padding-top:calc(var(--lpos-control-size,46px) + 16px + (var(--lpos-gap,8px) * 2)) !important;
}
/* The bottom-left dock is empty on singles (the avatar is the eighth tab now);
 * without this its panel skin still paints an empty box over the floor row. */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) > [data-psc-avatar-dock]{
	display:none !important;
}

/* The primary column opens with .lpos-feat__actions wrapping an .lpos-feat__toolbar panel.
 * Measured live on 1.0.880 across all three product steps (content, magazine, 3D): the toolbar
 * carries ZERO children on every one of them, so it paints an empty 64px band directly under
 * the new step strip -- two stacked bars where JD's drawing shows one. It is hidden here only
 * while it is genuinely empty (:has gate on a child), so the day a step DOES publish actions
 * into it the bar returns on its own. Honest-empty: chrome with nothing in it does not paint. */
html .lpos-blueprint--console:has(.lpos-cell--midright[data-psc-single-secondary="1"]) .lpos-feat__actions:not(:has(.lpos-feat__toolbar > *)){
	display:none !important;
}

/* Punch list #65, the second half. 1.0.869/879 moved the secondary search INTO the calendar
 * panel, under the grid and the month pager, which is where JD's arrow points -- but the
 * pre-existing FLOOR SEAT search (DEC-CR-777YX3) kept rendering underneath it, so the surface
 * showed TWO search bars. Measured on 1.0.881: one at 1274,832 inside .lpos-cell--midright and
 * a second at 26,897 inside .lpos-cell--botcenter. They are two different elements, not one
 * element seen twice.
 *
 * The floor seat stands down only while the ACTIVE secondary view is already showing the
 * relocated bar -- i.e. exactly when it would be a duplicate. Keying on .lpos-col__view.-active
 * rather than on the stamp alone matters: the bar is one element that travels between views, so
 * an ungated :has() would suppress the floor seat on views the bar is not currently in.
 * Verified live by toggling this rule against every secondary tab. */
html .lpos-blueprint--console:has(.lpos-cell--midright .lpos-col__view.-active [data-psc-cal-search]) .lpos-cell--botcenter > .lpos-search{
	display:none !important;
}

/* JD 2026-08-20: "the pdf is now off center and cut off at the top."
 *
 * Two separate faults, one report. The CUT-OFF was the primary cell's padding: the flipbook
 * measures itself once on mount and never re-measures, so reserving a strip after it mounted
 * pushed its top edge out of view. That padding is gone with the strip (see the correction note
 * above), which fixes the clipping.
 *
 * The OFF-CENTRE is this rule. .lpos-feat__body wraps the media and already centres it
 * (justify-content:center), but it sits at flex:0 1 auto inside a taller slot, so it never grew
 * into the space freed when the empty toolbar bar stood down -- it stayed 708 tall in a 789 slot
 * and every one of those ~82 leftover pixels pooled BELOW the magazine. Measured live: the spread
 * sat 6px from the top and 92px from the bottom. Letting the wrapper fill lets its own centring
 * do the work: 6px and 11px, balanced.
 *
 * The selector carries the slot as well, because a plain .lpos-cell--midcenter .lpos-feat__body
 * chain -- verified with matches(), it DOES select the right node -- still loses the flex
 * shorthand to an existing rule; the extra level is what makes this one win. */
/* REVERTED 2026-08-20, same day it shipped. JD: "that isn't what I see."
 *
 * The rule that stood here grew .lpos-feat__body to fill its slot so its own centring had
 * something to work with. It measured beautifully on my window and CLIPPED the magazine on
 * JD's, which is taller. The reason is a property of the flipbook nobody had written down:
 *
 *   THE FLIP LIBRARY POSITIONS ITS PAGES ABSOLUTELY, FROM THE GEOMETRY IT MEASURED AT INIT,
 *   AND NEVER RE-LAYS THEM OUT. Change the size or position of its box after it mounts and
 *   the pages stay where they were -- measured live, 17px proud of their own container.
 *
 * So growing its box is not a neutral centring trick: it changes the number the library sized
 * against, and the taller the viewport the further the pages drift out of the frame. 1.0.884
 * (no growth) did not clip. 1.0.885 (growth) does, on a tall window.
 *
 * The same property is why toggling this CSS live proves nothing about the flipbook -- the
 * pages were placed before the toggle. Only a fresh page load tells the truth, which is how
 * this got shipped in the first place.
 *
 * Leaving the residual slack under the magazine ON PURPOSE. It is cosmetic; clipping the
 * customer-facing page is not. Real centring means making the container's final geometry
 * settle BEFORE the flipbook initialises, or re-laying it out afterwards -- a change in
 * media.php, not a CSS nudge here. Logged rather than guessed at a fourth time. */