/* LifePilotOS Console -- token-binding CSS for the Elementor console template (FR-D131).
Elementor core icon/atomic widgets bake color as a literal and strip var() (DECISION_LOG
DCS-020/DCS-021). Plugin-native fix: re-bind the affected widgets to --lpos-* here, same
pattern DCS-021 proved for the dashboard (BrandTokens::emit_active_state()). 100% token-
referenced -- zero literal hex/rgb values in this file.
Scoped to the console template wrappers (`.elementor-312` = New Console,
`.elementor-821` = Operator Default Console blueprint), so it only affects the console
surfaces -- never bleeds into other Elementor-built pages on the subsite. */
/* ---- Punch-list item A: CSS-only fallback token block ----
BrandTokens::emit() only prints the tenant's resolved --lpos-* variables into when
a tenant AND an active brand pack both resolve for the request (BrandTokens::resolve_tenant_id()
returns '' for an anonymous visitor with no pinned domain, for example) -- when it can't
resolve either, it returns early and prints nothing. Every rule below this block depends on
these variables being defined, so without this fallback the console would render completely
unstyled on any page load where the emitter has nothing to print.
Every value below is copied verbatim from the same default the corresponding
ConsoleRenderer::brand_theme() `self::safe_*(..., $fallback)` call uses (includes the
punch-list item C/G additions), so this block and brand_theme() can never silently drift
out of the same defaults. `:root` tokens emitted by BrandTokens::emit() cascade at a higher
specificity/later source order than this class selector, so a resolved tenant's real brand
still overrides these -- this is a fallback floor, not a ceiling.
NOTE: this fallback block is deliberately NOT scoped to .elementor-821. The tenant's real
tokens are emitted on :root by BrandTokens::emit(); a wrapper-scoped fallback declaration
here would win over that inherited :root value on the 821 subtree (a direct declaration on
the element beats an inherited one), forcing 821 into the light fallback theme. 821 instead
inherits the real :root tokens. (312 keeps its wrapper fallback because the emit also scopes
real tokens to .elementor-312.) See DCS-043. */
/* App-default floor for EVERY surface (blueprint pages included): :where(:root) has zero
specificity, so BrandTokens::emit()'s real :root block (tenant tier) always wins over it
regardless of print order, while pages with no resolved tenant get full App defaults. */
/* ADVERSARIAL REVIEW 2026-08-01 fix: .elementor-312 was removed from this selector -- a direct
declaration on the wrapper SHADOWS the tenant's inherited :root brand tokens for every
descendant (custom-property resolution prefers the nearest declaration, specificity aside),
so tenants saw App defaults instead of their brand on the flagship console. BrandTokens only
ever emits :root, so the floor must live at zero-specificity :root scope ONLY. */
:where(:root) {
/* ---- CYAN_HUD_APP_STYLE_TOKENS_2026-08-01: Transparent Cyan & Blue, App-default tier.
Existing --lpos-* consumer names are kept (zero breakage); VALUES are remapped onto the
sheet's App-tier palette. Net-new concepts (no prior name) are added as additive tokens
below the legacy block. See DCS-bp / HUD_LAYOUT_METRICS_AND_AUDIT_2026-08-01 for the
layout-token half of this same pass. ---- */
--lpos-bg: #0A0E17; /* sheet: bg-base */
--lpos-panel: #0D111C; /* sheet: bg-elevated */
--lpos-panel-hover: color-mix(in srgb, var(--lpos-accent) 10%, transparent); /* JD 2026-08-04 TOKEN-DRIVEN: derive from --lpos-accent (was hardcoded cyan), so it follows the tenant accent */
--lpos-overlay: #10151f; /* deeper hover/overlay tier between bg-elevated and pure black; sheet has no explicit 3rd surface tier -- judgment call, stays in-family */
--lpos-ink: #EAF2FB; /* sheet: text-primary (headings + body -- cyan never on text) */
--lpos-muted: #A8B2C7; /* sheet: text-secondary */
--lpos-ink-disabled: #6C7A93; /* sheet: text-tertiary (deliberately sub-AA: disabled) */
--lpos-ink-inverted: #0A0E17; /* text-on-accent-fill: dark-on-cyan reads correctly at the sheet's 11:1 accent contrast */
--lpos-accent: #00D4FF; /* sheet: accent (11.0:1 on bg-base = AAA) */
--lpos-accent-2: #4FC3F7; /* sheet: accent-secondary */
--lpos-accent-3: #3A6EA5; /* sheet defines only 2 accents; #3A6EA5 synthesized in-family (muted azure) for legacy 3rd-accent consumers (e.g. chart-3) -- judgment call, not in the sheet verbatim */
--lpos-border-tint: var(--lpos-accent-3, var(--lpos-accent)); /* JD 2026-08-06: ALL border color-mix bases run through this -- the LIGHTER brand accent (Biolimitless pack maps color.accent #AA81FF -> --lpos-accent-3), falling back to the primary accent */
--lpos-good: #2ED573; /* sheet reserves warn/danger only; success color kept but re-picked for AA legibility on the new dark navy base -- judgment call */
--lpos-warn: #FFB020; /* sheet: warning (reserved) */
--lpos-bad: #FF5470; /* sheet: danger (reserved) */
--lpos-info: #4FC3F7; /* mapped to accent-secondary */
--lpos-font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; /* sheet: font-body (UI chrome reads as body copy). Stack only -- no @font-face/enqueue added. */
--lpos-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; /* sheet: font-display */
--lpos-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; /* sheet: font-body */
--lpos-gap: 12px; /* JD 2026-08-06: thinner global spacing */
--lpos-pad: 20px;
--lpos-panel-pad: 12px; /* JD 2026-08-06: thinner global padding (was 16px) */
--lpos-subpanel-pad: 6px; /* JD 2026-08-06: thinner sub-panel pad (was 8px) */
/* HUD audit: promote the magic number used by the top/bottom console rows to a named token.
2026-08-01 THIRD retune (live-verified too tall every time so far, incl. the 70px "two layer
-> one layer" pass): JD wants the row thinner still -- 46px control + 4px breathing above/below
(--lpos-space-xs, not --lpos-subpanel-pad) = 54px, ONE inset layer, nothing else stacked on it.
Every chrome-row cell's own vertical inset (below) drops from space-sm(8) to space-xs(4) to
match; every top/bottom-row component that used to rely on a component-level sub-panel inset
ALREADY renders that inset at 0 in this file (menu/logo/topright+botright clusters/botleft
switcher/botcenter bar all override .lpos-c-subpanel's padding to 0 for chrome-row use, see the
cell-padding block below), so dropping the cell's own inset is the only change needed -- no
second layer to reconcile away this time. */
--lpos-titlebar-h: calc(var(--lpos-control-size, 46px) + 2*var(--lpos-space-sm, 8px) + 2*var(--lpos-border-width, 1px)); /* = 64px: control + space-sm breathing + cell borders (JD: 56px read too tight; borders stay in the math per the earlier overflow fix) */
/* logo image height (2026-08-01 SEVENTH retune, JD review loop): 62px full-interior read "way too
big" once the padding-free lockup asset landed (the asset rework, not the box, was the real size
lever all along) -- back to control-size 46px with the STANDARD space-sm cell inset restored
(the zero-inset exception is gone). Marks now render ~43px tall, larger than any earlier pass
because the asset no longer wastes 37% of its height on dead padding. */
--lpos-logo-h: var(--lpos-control-size, 46px); /* = 46px */
--lpos-space-xs: 4px;
--lpos-space-sm: 8px;
--lpos-space-md: 12px;
/* RADIUS RECONCILIATION (2026-08-04, JD): reconciled against the canonical wireframe design
library (C:/Users/front/CommandCenter/Console/_System/handoffs/CLAUDE_DESIGN_LIBRARY_
WIREFRAMES_2026-07-22/DESIGN_HANDOFF/design-system-source/console-dashboard.css), the
library's own scale: --console-radius:16px / --console-radius-inner:12px /
--console-radius-control:8px / --console-radius-pill:999px. panel 10px->16px to match
(--lpos-radius-lg already WAS 16px, defined-but-unused, below -- panel now equals it, by
design: one canonical "outer panel" number, not two names for the same value); control(8px)
and pill(999px) were ALREADY exact matches, unchanged. --lpos-radius-inner is NEW (added for
parity with the library's 4-step scale) -- not yet migrated onto every "component inside
panel" call site (a broader follow-up; radius-control still fills that role at most of
today's call sites and is not being changed under this pass). */
--lpos-radius-panel: 10px; /* JD 2026-08-06: SHARPER global radius (was 16px) -- still rounded, tighter corner */
--lpos-radius-control: 8px;
--lpos-radius-sm: 4px; /* sheet: radius-sm (already matched) */
--lpos-radius-pill: 999px; /* TOKEN-LAW fix 2026-08-03: pill/badge radius -- was referenced via fallback only (archive-card reward/chip), never declared */
--lpos-glass-1: rgba(255,255,255,0.035);
--lpos-glass-2: rgba(255,255,255,0.055);
--lpos-glass-3: rgba(255,255,255,0.085);
--lpos-glass-rule: rgba(255,255,255,0.10);
--lpos-glass-spec: rgba(255,255,255,0.10);
--lpos-glass-panel: linear-gradient(180deg, rgba(30,42,66,0.34), rgba(16,24,40,0.45)); /* JD 2026-08-06 FULL GLASSMORPHISM rev 2: lighter glass -- the bg video's motion reads through every panel layer */
--lpos-asset-alpha: 0.9; /* JD 2026-08-06 LAYERED TRANSPARENCY: assets are the LEAST transparent layer but still let the ambient motion ghost through */
/* TRANSLUCENCY RECONCILIATION (2026-08-04, JD: "none of the panels...have any degree of
opacity"): the design library's own .console-panel is rgba(surface,0.238) over
blur(10px) saturate(1.15) -- a genuinely see-through chrome tier, nowhere near this file's
55-60%+ fill. Per-tenant brand packs (BrandPackRepository, data-fleet-owned, out of this
file's edit scope) resolve their OWN --lpos-glass-panel at :root with real specificity and
always win over this zero-specificity floor, so lowering --lpos-glass-panel's OWN value here
would not actually change what a branded tenant (e.g. Biolimitless) renders. Instead this
derives a NEW chrome-tier token as a fixed proportion of WHATEVER --lpos-glass-panel resolves
to for the active tenant -- color-mix scales the alpha down uniformly, so App-default's 60%
lands at ~24% (line up almost exactly with the library's 23.8%) and a branded tenant's own
(typically similar 55-68%) value lands in the same ballpark -- without touching the per-tenant
token itself. Applied to the general/chrome surfaces only (.lpos-cell, .lpos-c-subpanel);
text-dense "focused content" surfaces (the midcenter editorial-copy cell, .lpos-search) keep
consuming --lpos-glass-panel directly (unchanged, more opaque) so the DNA background video
reads through the chrome without hurting legibility where it matters. */
--lpos-glass-panel-chrome: color-mix(in srgb, var(--lpos-glass-panel) 40%, transparent);
--lpos-glass-video: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
/* GLASSMORPHISM LAW (2026-08-04, JD): "no solid opaque fills anywhere -- this includes the
active/featured/selected BUTTON state and the PROGRESS BAR fill". These three accent-tinted
GLASS tokens replace every surface below that was rendering a flat var(--lpos-accent) fill
(progress/meter bars, primary/featured buttons, pressed/active icon-button state). color-mix
keeps them tenant-safe -- same technique --lpos-glass-panel-chrome above already uses, so
each tracks whatever --lpos-accent resolves to per tenant (e.g. BioLimitless's violet)
instead of a hardcoded hex. Three tiers because a translucent surface still needs to carry
visual WEIGHT (a soft touch for a mere "selected" toggle vs. a stronger wash for the one
PRIMARY button on a pane) -- same reasoning --lpos-glass-1/2/3 already tier the neutral-white
glass above. */
--lpos-accent-glass-soft: color-mix(in srgb, var(--lpos-accent) 18%, transparent); /* selected/active TINT -- toggle .is-active, light highlights */
--lpos-accent-glass: color-mix(in srgb, var(--lpos-accent) 32%, transparent); /* brand-tint glass FILL -- progress/meter bars, replaces a flat accent fill */
--lpos-accent-glass-strong: color-mix(in srgb, var(--lpos-accent) 46%, transparent); /* featured/PRIMARY button glass -- Buy Now, Next action, pressed icon-btn: carries the "primary" weight a solid fill used to, while staying translucent */
/* FOUR LEFTOVER SETTINGS DELETED 2026-08-10 (JD's call). Each was a saved value with no
consumer anywhere, left behind when the design that used it changed:
--lpos-card-bg-alpha card-photo dimming; readability comes from the scrim now
--lpos-logo-accent-color a second colour for the logo mark; it only aliased --lpos-accent
--lpos-sidecol-w a width for a side column the layout no longer has (with its two
inputs --lpos-sidecol-chrome and --lpos-doc-aspect, dead with it)
--lpos-shadow-1 / -glow shadow strength and glow; the zero-shadow law means neither can
ever paint. Their Brand Styling fields went on 2026-08-10 and
ConsoleRenderer no longer emits them.
--lpos-shadow-2 and --lpos-glass-spec are NOT dead (3 live consumers) and stay. */
--lpos-shadow-2: 0 4px 20px rgba(0,0,0,.50), inset 0 1px 0 var(--lpos-glass-spec);
--lpos-accent-soft: color-mix(in srgb, var(--lpos-accent) 10%, transparent); /* JD 2026-08-04 TOKEN-DRIVEN: derive from --lpos-accent (was hardcoded cyan) */
--lpos-accent-glow-sm: 0 0 12px color-mix(in srgb, var(--lpos-accent) 55%, transparent); /* TOKEN-DRIVEN glow-sm */
--lpos-accent-glow-lg: 0 0 32px color-mix(in srgb, var(--lpos-accent) 35%, transparent); /* TOKEN-DRIVEN glow-lg */
--lpos-focus-ring: 0 0 0 2px rgba(0,212,255,.9), 0 0 12px rgba(0,212,255,.6); /* sheet: focus-ring -- NEW */
--lpos-grid-line: rgba(0,212,255,.035); /* sheet: grid-overlay line color -- NEW, feeds .lpos-blueprint--console::before */
--lpos-heading-color: var(--lpos-ink); /* sheet: headings WHITE, never cyan -- alias for clarity, same value the h1/h2 rules already resolve to */
--lpos-tracking-label: 0.08em; /* sheet: eyebrow/label tracking -- defined for future use; no eyebrow/label class exists in this console yet */
--lpos-tracking-heading: -0.01em;
--lpos-logo-word-color: var(--lpos-ink);
--lpos-blur-sm: blur(14px) saturate(140%);
--lpos-blur-md: blur(16px) saturate(140%); /* JD 2026-08-06 FULL GLASSMORPHISM: back to the deep frosted tier (was reconciled down to 10px/115% when panels sat on a flat bg -- with the ambient DNA video behind, the stronger frost is what makes the glass read) */
--lpos-blur-lg: blur(32px) saturate(160%);
--lpos-control-size: 46px;
/* RESPONSIVE CONTROL LADDER (2026-08-10). The small-screen tiers were shipped with raw pixels and
three invented token names that had no definitions -- a token-law break. The ladder is DERIVED
from the base control size so one edit still moves every tier, and the rail lane is derived
from the control it must hold plus the panel's own inset. No standalone magic numbers. */
--lpos-control-size-md: calc(var(--lpos-control-size, 46px) - 6px); /* tablet control */
--lpos-control-size-sm: calc(var(--lpos-control-size, 46px) - 10px); /* phone control */
/* the ladder's missing BASE rung (added 2026-08-10): -md and -sm existed but the full-size rail
width was only ever written out longhand at its call sites. */
--lpos-rail-w: calc(var(--lpos-control-size, 46px) + 2*var(--lpos-subpanel-pad, 6px));
--lpos-rail-w-md: calc(var(--lpos-control-size-md) + 2*var(--lpos-subpanel-pad, 6px));
--lpos-rail-w-sm: calc(var(--lpos-control-size-sm) + 2*var(--lpos-subpanel-pad, 6px));
--lpos-icon-size-md: calc(var(--lpos-icon-size, 26px) - 4px);
--lpos-icon-size-phone: calc(var(--lpos-icon-size, 26px) - 8px);
--lpos-media-floor-sm: calc(2.5 * var(--lpos-control-size, 46px)); /* stacked-lane media never collapses below this */
--lpos-media-cap-sm: 26dvh; /* stacked-lane media ceiling, viewport-relative by design */
--lpos-icon-size: 26px; /* HUD audit: 26/46 = 56.5%, in the 50-60% norm; kills the 30px/22px fallback drift */
--lpos-icon-size-xs: 20px; /* TOKEN-PURITY 2026-08-01: icon scale -- search svg, thumb svg */
--lpos-icon-size-sm: 24px; /* TOKEN-PURITY 2026-08-01: icon scale -- big-play glyph */
--lpos-icon-size-lg: 32px; /* TOKEN-PURITY 2026-08-01: icon scale -- spinner, big-play i */
--lpos-card-ghost: 56px; /* archive card ghost-icon zone (2026-08-03 card grid) */
--lpos-archive-card-min-h: 240px; /* JD 2026-08-04 item 2: cards were too short (rows shared the panel's raw available height with no floor) -- each grid row now holds this minimum so image+text breathe */
--lpos-tab-icon-size: 28px;
--lpos-border-width: 1px;
--lpos-border-width-active: 2px;
--lpos-control-min-h: 2rem;
/* TOKEN-PURITY 2026-08-01: border-alpha ladder -- collapses the color-mix(in srgb, var(--lpos-accent)
NN%, transparent) hairline sites onto 4 named steps. Mapping: 30%->-1, 35%/40%/45%->-2 (40%),
50%/55%->-3 (55%), 65%->-4. Visual deltas of <=5% are accepted per the consolidation intent. */
--lpos-border-alpha-1: 30%;
--lpos-border-alpha-2: 40%;
--lpos-border-alpha-3: 55%;
--lpos-border-alpha-4: 65%;
--lpos-title-size: 1.5rem; /* primary title (centerfeature -- the middle-center focal panel) */
--lpos-title-size-secondary: 1.1rem; /* JD: left/right title panels are secondary content, ~73% of primary */
--lpos-subtitle-size: 1rem; /* primary subtitle (centerfeature) */
--lpos-subtitle-size-secondary: .75rem; /* secondary subtitle, scaled with the secondary title */
--lpos-subtitle-margin: .15rem 0 0; /* TOKEN-PURITY 2026-08-01: promoted from the 6 repeated inline margins */
--lpos-text-2xs: 12px; /* TOKEN-PURITY 2026-08-01: text scale */
--lpos-text-xs: 13px;
--lpos-text-sm: 14px;
--lpos-text-md: 17px;
--lpos-text-lg: 20px; /* TOKEN-LAW fix 2026-08-03: text scale -- was referenced via fallback only (archive-grid__title h2), never declared */
--lpos-chart-1: #166466;
--lpos-chart-2: #2f4f66;
--lpos-chart-3: #7c5f27;
--lpos-chart-4: #236a35;
--lpos-chart-5: #245f8f;
--lpos-chart-6: #a06100;
--lpos-chart-7: #9f1d1d;
--lpos-chart-8: #5f6b7a;
/* ---- off-canvas drawer engine (hamburger + top-icon drawers) -- NEW, additive ---- */
--lpos-drawer-w: 360px;
/* TOKEN-PURITY AUDIT 2026-08-01 (JD full-console consistency pass): named tokens for the last
bare literals in the media stylesheet -- bespoke component sizes and non-interaction cadences
that have no home on the spacing/duration ladders get their own names instead of literals. */
--lpos-page-bg: #fff; /* flipbook page paper */
--lpos-video-bg: #000; /* video letterbox stage */
--lpos-scrim-heavy: rgba(0,0,0,.62); /* in-player bar gradient top stop (heavier than scrim-bg) */
--lpos-spin-track: rgba(255,255,255,.18);/* buffering spinner ring track */
--lpos-duration-spin: .8s; /* buffering spinner revolution */
--lpos-duration-pulse: 2.8s; /* paused big-play gentle pulse */
--lpos-volslide-w: 82px; /* collapsible volume slider open width */
--lpos-flipthumb-h: 84px; /* flipbook thumbnail strip image height */
--lpos-thumb-h: 56px; /* botleft/midleft switcher tile height cap (JD 2026-08-01: taller than a 46px control -- tiles read as media, not buttons) */
/* FOCAL-POINT IMAGE SYSTEM (task #14, JD APPROVED 2026-08-05): every cover-cropped image
component reads its crop anchor from these two tokens -- default dead center; a per-image
inline `style="--lpos-focal-x:..%;--lpos-focal-y:..%"` (emitted from the asset's own slot
config, never fabricated) re-anchors the crop for that one image. PANEL RATIO TOKENS: the
two canonical image-panel ratios declared here explicitly (were fallback-only). */
--lpos-focal-x: 50%;
--lpos-focal-y: 50%;
--lpos-thumb-ratio: 1/1; /* canonical SQUARE shop-thumb ratio (EXACT_SPEC section 7) */
--lpos-media-switch-ratio: 16/9; /* canonical LANDSCAPE media-panel ratio */
/* (The LIQUID SIDE COLUMNS trio -- --lpos-sidecol-w, --lpos-sidecol-chrome, --lpos-doc-aspect --
was deleted 2026-08-10 with the other leftover settings. It sized a side column whose width is
no longer computed that way; nothing had read any of the three in some time.) */
--lpos-play-btn-size: 80px; /* big-play overlay circle (JD-tuned 78-80) */
--lpos-duration-base: 220ms;
--lpos-duration-fast: 120ms; /* TOKEN-PURITY 2026-08-01: hover/press micro-interactions (.12s/.08s sites) */
--lpos-duration-reveal: 180ms; /* TOKEN-PURITY 2026-08-01: overlay reveal transitions (.18s/.2s/.22s sites) */
--lpos-ease-tech: cubic-bezier(0.16, 1, 0.3, 1);
--lpos-z-scrim: 8990;
--lpos-z-drawer: 9000;
/* the load screen must clear the console SHELL, not just the drawer tier: the shell is a
position:fixed full-viewport layer, so an overlay at the drawer z-index paints underneath
it and the loading state is invisible (caught in verify 2026-08-10). */
--lpos-z-loadscreen: 100000;
--lpos-scrim-bg: rgba(0, 0, 0, 0.45);
/* TOKEN-LAW PASS 2026-08-10 (full-app law review): these seven were referenced through
`var(--x, literal)` fallbacks at real call sites but were never declared anywhere, so the
literal was what actually painted -- a hardcoded value wearing a token's name. Declared here
at the value each call site was already using, so the canonical block is genuinely the single
source of truth for them. `--lpos-radius-full` was NOT added: it was a name-drift duplicate of
the already-canonical `--lpos-radius-pill` and its 3 call sites were migrated instead. */
--lpos-radius-lg: 16px; /* calendar day/agenda tiles (components/calendar-grid.css) */
--lpos-radius-md: 8px; /* dashboard listing controls (dashboard-layout.css) */
--lpos-bgvideo-blur: 3px; /* ambient background-video defocus */
--lpos-card-media-ratio: 16/9; /* archive-card media well */
--lpos-cta-media-ratio: 4/3; /* focus-panel (buy box) media well */
--lpos-duration-loading: 1.4s; /* skeleton/loading sweep cycle */
--lpos-m8card-h: 44vh; /* magick8 card preferred height (inside its clamp) */
/* BRAND FLOOR (same pass): BrandTokens emits these two only when a tenant AND a brand pack both
resolve. Every other structural token has an App default here; without one, anonymous/no-tenant
pages silently fell back to PortalHomeRenderer's inline literals. These are the App defaults. */
--lpos-color-primary: #7c5cf6;
--lpos-color-void: #0a0612;
/* FALLBACK-DRIFT PASS 2026-08-10. 400 `var(--x, literal)` fallbacks across 13 files disagreed with
the declarations above and with each other -- `--lpos-gap` said 16px at 77 sites and 12px at 40
(declared: 12px), `--lpos-radius-panel` said 16px at 27 and 10px at 21 (declared: 10px),
`--lpos-accent-soft` fell back to a literal CYAN at 13 sites (declared: an accent color-mix, so
the literal would have painted the wrong hue for every non-cyan tenant). None of it rendered:
every one of those tokens IS declared here, so the fallback never fires. It made the files lie
about their own values, which is how the 2026-08-06 "thinner spacing / sharper radius" retune
ended up half-recorded. Every fallback now equals its declaration.
TWO deliberate exceptions:
- 8 sites inside PHP strings write `--lpos-font-ui, Inter, ...` UNQUOTED. CSS resolves an
unquoted family identically; quoting it would terminate the surrounding PHP string.
- `--lpos-glass-veil` is intentionally NOT declared here. It is emitted per tenant by
ConsoleRenderer, and its two call sites want different no-tenant behaviour (one no veil,
one a 22% scrim), so a floor here would silently change one of them. */
}
/* (CONSOLIDATION 2026-08-05, plan Phase 2: the ~459-line .elementor-312/.elementor-821-scoped copy
of the console rules was DELETED here -- the plugin never emits those legacy Elementor wrappers;
the .lpos-blueprint mirror below is the single live copy.) */
/* =====================================================================================
BLUEPRINT-RENDERED CONSOLES (.lpos-blueprint): the same console styling applied under the
[lpos_blueprint] wrapper, so a console composed on ANY page (e.g. /console-2) inherits the
full treatment. Auto-mirrored from the .elementor-821/.elementor-312 rules above (the light
fallback var block is intentionally NOT mirrored -- :root real tokens apply). DCS-bp.
===================================================================================== */
/* ---- base text ---- */
.lpos-blueprint,
.lpos-blueprint,
.lpos-blueprint :where(p, span, h1, h2, h3, h4, h5, h6, a, li, div),
.lpos-blueprint :where(p, span, h1, h2, h3, h4, h5, h6, a, li, div) {
color: var(--lpos-ink);
}
/* ---- muted/secondary text ---- */
.lpos-blueprint .lpos-muted,
.lpos-blueprint .lpos-muted,
.lpos-blueprint :where(small, .elementor-icon-list-text small),
.lpos-blueprint :where(small, .elementor-icon-list-text small) {
color: var(--lpos-muted);
}
/* ---- icon glyphs: Elementor bakes these as a literal and strips var(), so !important is
required to win -- the documented DCS-021 mechanism, delivered plugin-native here.
Muted per operator design; accent stays reserved for active/borders (not glyph fill). ---- */
.lpos-blueprint .elementor-icon,
.lpos-blueprint .elementor-icon i,
.lpos-blueprint .elementor-icon svg,
.lpos-blueprint .elementor-icon,
.lpos-blueprint .elementor-icon i,
.lpos-blueprint .elementor-icon svg {
color: var(--lpos-muted) !important;
fill: var(--lpos-muted) !important;
}
/* ---- frosted depth on the region panels (FR-D130 depth tokens). Restrained: translucent
panel tint + blur-md + shadow-2 (whose inset carries the glass top-highlight). Keeps the
existing accent hairline border. 100% token-referenced. ---- */
.lpos-blueprint .elementor-element-d39a85b,
.lpos-blueprint .elementor-element-3f4c388,
.lpos-blueprint .elementor-element-cba38cb,
.lpos-blueprint .elementor-element-e999a20,
.lpos-blueprint .elementor-element-bedfc71,
.lpos-blueprint .elementor-element-4ceb058,
.lpos-blueprint .elementor-element-2d45ce8,
.lpos-blueprint .elementor-element-ac086cb,
.lpos-blueprint .elementor-element-b9c1f8c {
background: var(--lpos-glass-panel) !important; /* JD 2026-08-06: shorthand -- the glass token is a gradient now */
-webkit-backdrop-filter: var(--lpos-blur-md);
backdrop-filter: var(--lpos-blur-md);
}
/* ---- FR-D132: icon buttons -- top-right 6 + top-left menu -- bigger, dead-centered glyph.
Size/center/radius only; background + accent hairline stay on the widgets' own atomic
styles. 100% token-referenced. ---- */
.lpos-blueprint .elementor-element-0ba1f52,
.lpos-blueprint .elementor-element-62beecb,
.lpos-blueprint .elementor-element-eb7a024,
.lpos-blueprint .elementor-element-8d237a6,
.lpos-blueprint .elementor-element-e29315c,
.lpos-blueprint .elementor-element-f581e0c,
.lpos-blueprint .elementor-element-64667df {
width: var(--lpos-control-size) !important;
height: var(--lpos-control-size) !important;
min-width: var(--lpos-control-size);
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
border-radius: var(--lpos-radius-control);
}
.lpos-blueprint .elementor-element-0ba1f52 .elementor-icon,
.lpos-blueprint .elementor-element-62beecb .elementor-icon,
.lpos-blueprint .elementor-element-eb7a024 .elementor-icon,
.lpos-blueprint .elementor-element-8d237a6 .elementor-icon,
.lpos-blueprint .elementor-element-e29315c .elementor-icon,
.lpos-blueprint .elementor-element-f581e0c .elementor-icon,
.lpos-blueprint .elementor-element-64667df .elementor-icon {
font-size: var(--lpos-icon-size) !important;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.lpos-blueprint .elementor-element-0ba1f52 .elementor-icon i,
.lpos-blueprint .elementor-element-62beecb .elementor-icon i,
.lpos-blueprint .elementor-element-eb7a024 .elementor-icon i,
.lpos-blueprint .elementor-element-8d237a6 .elementor-icon i,
.lpos-blueprint .elementor-element-e29315c .elementor-icon i,
.lpos-blueprint .elementor-element-f581e0c .elementor-icon i,
.lpos-blueprint .elementor-element-64667df .elementor-icon i {
line-height: 1;
}
/* ---- FR-D132: bottom-right JetTabs controls (b9c1f8c) -- square rounded inline icon
buttons matching the icon-button treatment above. Token-referenced background + accent
hairline (color-mix on --lpos-accent, no literal alpha value). ---- */
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control {
width: var(--lpos-control-size) !important;
min-width: var(--lpos-control-size);
height: var(--lpos-control-size) !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--lpos-radius-control) !important;
background: var(--lpos-panel) !important;
border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3, 55%), transparent) !important;
}
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control-wrapper {
display: flex;
flex-direction: row;
gap: var(--lpos-gap);
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control i,
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control svg {
font-size: var(--lpos-tab-icon-size);
color: var(--lpos-muted) !important;
fill: var(--lpos-muted) !important;
line-height: 1;
}
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control.active-tab i,
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control.active-tab svg,
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control-active i,
.lpos-blueprint .elementor-element-b9c1f8c .jet-tabs__control-active svg {
color: var(--lpos-accent) !important;
fill: var(--lpos-accent) !important;
}
/* ---- FR-D132: center JetTabs (be630c3) -- labeled tab control + a visible glass
sub-panel for the stacked content region below the video. ---- */
.lpos-blueprint .elementor-element-be630c3 .jet-tabs__control {
color: var(--lpos-muted);
border-radius: var(--lpos-radius-control);
/* Punch-list item E: was a literal `6px 12px`; now reads the spacing_tokens.sm/md
leaves (--lpos-space-sm/--lpos-space-md, emitted by brand_theme() per punch-list
item C) instead of a hardcoded pixel pair. */
padding: var(--lpos-space-sm) var(--lpos-space-md);
}
.lpos-blueprint .elementor-element-be630c3 .jet-tabs__control.active-tab,
.lpos-blueprint .elementor-element-be630c3 .jet-tabs__control-active {
color: var(--lpos-ink);
border-bottom: var(--lpos-border-width-active) solid var(--lpos-accent);
}
.lpos-blueprint .elementor-element-be630c3 .jet-tabs__content-box,
.lpos-blueprint .elementor-element-be630c3 .jet-tabs__content {
background: var(--lpos-glass-1);
border-radius: var(--lpos-radius-panel);
}
.lpos-blueprint .elementor-element-2bb9699 {
color: var(--lpos-ink);
}
.lpos-blueprint .elementor-element-7d6d8cc {
/* DCS-042: was left as a literal per punch-list item E / DCS-036 precedent (no px-based
spacing token mapped cleanly to a rem value). Now reads depth_tokens.control.min_height
via the new --lpos-control-min-h var -- it no longer needs a spacing_tokens leaf since
it's a control-token sibling of control.size/icon_size/tab_icon_size. */
min-height: var(--lpos-control-min-h);
}
/* ---- FR-D132: background video (a5d9d91) -- lighter frosted tint than the 48% region
panels, sitting on Elementor's own background-overlay layer (over the video, under
content). If a5d9d91 has no background-overlay div rendered, JD needs to enable
"Background Overlay" on that container in Elementor -- this rule cannot create the
layer, only style it. ---- */
.lpos-blueprint .elementor-element-a5d9d91 > .elementor-background-overlay {
background: var(--lpos-glass-video) !important;
-webkit-backdrop-filter: var(--lpos-blur-sm);
backdrop-filter: var(--lpos-blur-sm);
}
/* ---- FR-D132 follow-up (punch-list item F): the rule above only frosts the video if
Elementor's own "Background Overlay" toggle is enabled on a5d9d91 in the editor -- it
cannot create that layer, only style it (documented gap, DECISION_LOG DCS-035). This
self-contained ::after pseudo-element frosts the video unconditionally, with no editor
toggle required: a5d9d91 becomes the positioning context, the pseudo-element sits over
the video (z-index 1), and the container's direct content child (d131370) is raised
above the frost (z-index 2) so console content stays legible. Token-driven, no literal
color/size values. ---- */
.lpos-blueprint .elementor-element-a5d9d91 {
position: relative;
}
.lpos-blueprint .elementor-element-a5d9d91::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: var(--lpos-glass-video);
-webkit-backdrop-filter: var(--lpos-blur-sm);
backdrop-filter: var(--lpos-blur-sm);
}
.lpos-blueprint .elementor-element-a5d9d91 > .elementor-element-d131370 {
position: relative;
z-index: 2;
}
/* ============================================================================
Operator Default Console (blueprint 821) -- same token-driven treatment as the
New Console (312) above, mapped to 821's element IDs. 100% --lpos-* referenced;
glassmorphism via the same depth tokens (--lpos-glass-panel / -blur-md / -shadow-2
/ -glass-video). Region IDs verified against the live 821 render (DCS-043). ---- */
/* region panels -- frosted glass */
.lpos-blueprint .elementor-element-c83beaa,
.lpos-blueprint .elementor-element-4b6dbb9,
.lpos-blueprint .elementor-element-daf2b68,
.lpos-blueprint .elementor-element-da44d26,
.lpos-blueprint .elementor-element-6639cae,
.lpos-blueprint .elementor-element-4f39396 {
background: var(--lpos-glass-panel) !important; /* JD 2026-08-06: shorthand -- the glass token is a gradient now */
-webkit-backdrop-filter: var(--lpos-blur-md);
backdrop-filter: var(--lpos-blur-md);
}
/* icon buttons -- square box, dead-centered glyph */
.lpos-blueprint .elementor-element-16f9434,
.lpos-blueprint .elementor-element-f72569c,
.lpos-blueprint .elementor-element-cf2cad5,
.lpos-blueprint .elementor-element-1213239,
.lpos-blueprint .elementor-element-c5e39cf,
.lpos-blueprint .elementor-element-a7a881e {
width: var(--lpos-control-size) !important;
height: var(--lpos-control-size) !important;
min-width: var(--lpos-control-size);
display: flex;
align-items: center;
justify-content: center;
padding: 0 !important;
border-radius: var(--lpos-radius-control);
}
.lpos-blueprint .elementor-element-16f9434 .elementor-icon,
.lpos-blueprint .elementor-element-f72569c .elementor-icon,
.lpos-blueprint .elementor-element-cf2cad5 .elementor-icon,
.lpos-blueprint .elementor-element-1213239 .elementor-icon,
.lpos-blueprint .elementor-element-c5e39cf .elementor-icon,
.lpos-blueprint .elementor-element-a7a881e .elementor-icon {
font-size: var(--lpos-icon-size) !important;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* background video -- lighter frost than panels (self-contained ::after, mirrors 312 a5d9d91) */
.lpos-blueprint .elementor-element-17ff9be {
position: relative;
}
.lpos-blueprint .elementor-element-17ff9be::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: var(--lpos-glass-video);
-webkit-backdrop-filter: var(--lpos-blur-sm);
backdrop-filter: var(--lpos-blur-sm);
}
.lpos-blueprint .elementor-element-17ff9be > .elementor-element-445dbc8 {
position: relative;
z-index: 2;
}
/* ---- 821 refinements (DCS-044) ----
#2 remove the hardcoded off-token bg strip behind the tab-nav controls (was #090e1b);
the nav now sits on the panel glass. #1 the left tab-nav image thumbnails rendered
tiny (25x17); size them to fill the control. #4 the top row used an asymmetric width
split while the columns are a symmetric 24.1/50.1/24.1 grid, so the gridlines didn't
stack -- align the top row to the column grid (desktop only, so the per-device liquid
grid on tablet/mobile is left to the template). Token-driven; no literal colors. ---- */
.lpos-blueprint .jet-tabs__control-wrapper {
background-color: transparent !important;
}
.lpos-blueprint .jet-tabs__control img {
width: auto !important;
height: 34px !important;
max-width: none !important;
object-fit: contain;
}
@media (min-width: 1025px) {
.lpos-blueprint .elementor-element-c83beaa { width: 24.108% !important; }
.lpos-blueprint .elementor-element-4b6dbb9 { width: 50.1% !important; }
.lpos-blueprint .elementor-element-daf2b68 { width: 24.108% !important; }
}
/* center content tab (template 782): compact title + subtitle sharing one frosted-glass
panel, and the video in its own frosted-glass panel (DCS-046). Token-driven glass. */
.lpos-blueprint .elementor-element-7d6d8cc h2,
.lpos-blueprint .elementor-element-7d6d8cc h2,
.lpos-blueprint .elementor-element-36a2f1c h2,
.lpos-blueprint .elementor-element-74668a5 h2 {
font-size: var(--lpos-title-size, 1.5rem) !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.lpos-blueprint .elementor-element-7d6d8cc h3,
.lpos-blueprint .elementor-element-7d6d8cc h3,
.lpos-blueprint .elementor-element-36a2f1c h3,
.lpos-blueprint .elementor-element-74668a5 h3 {
font-size: var(--lpos-subtitle-size, 1rem) !important;
line-height: 1.3 !important;
margin: var(--lpos-subtitle-margin, .15rem 0 0) !important;
color: var(--lpos-muted) !important;
font-weight: 500 !important;
}
.lpos-blueprint .elementor-element-7d6d8cc,
.lpos-blueprint .elementor-element-7d6d8cc,
.lpos-blueprint .elementor-element-36a2f1c,
.lpos-blueprint .elementor-element-74668a5,
.lpos-blueprint .elementor-element-dbb1a45,
.lpos-blueprint .elementor-element-dbb1a45 {
background: var(--lpos-glass-panel) !important;
-webkit-backdrop-filter: var(--lpos-blur-md);
backdrop-filter: var(--lpos-blur-md);
border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent) !important;
border-radius: var(--lpos-radius-panel) !important;
}
.lpos-blueprint .elementor-element-7d6d8cc,
.lpos-blueprint .elementor-element-7d6d8cc,
.lpos-blueprint .elementor-element-36a2f1c,
.lpos-blueprint .elementor-element-74668a5 { padding: var(--lpos-space-md) var(--lpos-pad) !important; align-content: start !important; }
.lpos-blueprint .elementor-element-dbb1a45,
.lpos-blueprint .elementor-element-dbb1a45 { padding: var(--lpos-space-sm) !important; }
/* ---- DCS-047: "every element in its own panel" -- frosted-glass panel treatment on the
individual icon buttons, tab buttons, thumbnails, and the flipbook/3D viewers (nested
inside the region panels). 100% token/glass driven. ---- */
.lpos-blueprint .elementor-element-16f9434,
.lpos-blueprint .elementor-element-f72569c,
.lpos-blueprint .elementor-element-cf2cad5,
.lpos-blueprint .elementor-element-1213239,
.lpos-blueprint .elementor-element-c5e39cf,
.lpos-blueprint .elementor-element-a7a881e,
.lpos-blueprint .elementor-element-bb8e667 .jet-tabs__control,
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control {
background: var(--lpos-glass-panel) !important;
-webkit-backdrop-filter: var(--lpos-blur-sm);
backdrop-filter: var(--lpos-blur-sm);
border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent) !important;
border-radius: var(--lpos-radius-control) !important;
}
/* flipbook + 3D viewers framed as panels (larger radius) */
.lpos-blueprint .lpos-media {
background: var(--lpos-glass-panel) !important;
-webkit-backdrop-filter: var(--lpos-blur-sm);
backdrop-filter: var(--lpos-blur-sm);
border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2, 40%), transparent) !important;
border-radius: var(--lpos-radius-panel) !important;
}
/* bottom-left thumbnails: one row of equal glass pills, image fills (cut internal padding) */
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control-wrapper {
flex-wrap: nowrap !important;
gap: var(--lpos-gap) !important;
align-items: stretch !important;
}
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
height: 56px !important;
padding: 4px !important;
overflow: hidden !important;
}
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control img {
height: 100% !important;
width: 100% !important;
object-fit: cover !important;
border-radius: var(--lpos-radius-sm) !important;
}
/* ---- DCS-048: consistency fixes ----
- top-right + menu icon buttons -> fixed 46x46 square (were squished to 39x46);
- gap between the center title/subtitle panel and the video panel (were touching);
- bottom-left media thumbnails: center the image in the pill + fill (was bottom-aligned
with a big top gap because the control was display:block);
- flipbook/3D toolbar glyphs -> muted to match every other console icon (were white/ink),
active control keeps a light glyph on the accent fill. ---- */
.lpos-blueprint .elementor-element-16f9434,
.lpos-blueprint .elementor-element-f72569c,
.lpos-blueprint .elementor-element-cf2cad5,
.lpos-blueprint .elementor-element-1213239,
.lpos-blueprint .elementor-element-c5e39cf,
.lpos-blueprint .elementor-element-a7a881e {
width: var(--lpos-control-size) !important;
height: var(--lpos-control-size) !important;
min-width: var(--lpos-control-size) !important;
flex: 0 0 auto !important;
}
.lpos-blueprint .elementor-element-dbb1a45 { margin-top: var(--lpos-gap) !important; }
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px !important;
}
.lpos-blueprint .elementor-element-75904c8 .jet-tabs__control img {
height: 100% !important;
width: 100% !important;
object-fit: cover !important;
}
.lpos-blueprint .lpos-media__bar button,
.lpos-blueprint .lpos-media__bar a,
.lpos-blueprint .lpos-media__bar button,
.lpos-blueprint .lpos-media__bar a,
.lpos-blueprint .lpos-media__bar button svg,
.lpos-blueprint .lpos-media__bar a svg,
.lpos-blueprint .lpos-media__bar button svg,
.lpos-blueprint .lpos-media__bar a svg {
color: var(--lpos-muted) !important;
stroke: var(--lpos-muted) !important;
}
.lpos-blueprint .lpos-media__bar button.-on,
.lpos-blueprint .lpos-media__bar button.-on svg,
.lpos-blueprint .lpos-media__bar button.-on,
.lpos-blueprint .lpos-media__bar button.-on svg {
color: var(--lpos-ink) !important;
stroke: var(--lpos-ink) !important;
}
/* ---- Reusable title/subtitle box (class-based, NOT tied to any element ID) ----
Add the class "lpos-title-panel" to ANY container in the console (left, right, center,
anywhere) that holds an h2 (title) + h3 (subtitle). Fixes the hardcoded-ID limitation:
works on every box you build, no plugin change per box. Token/glass driven. ---- */
/* ONE-PANEL LAW CONSOLIDATION (2026-08-04): chrome (background/blur/shadow/border/radius/padding)
for .lpos-title-panel/.lpos-c-title-panel moved to the single LAW definition further down this
file (search "ONE ATOMIC PANEL COMPONENT (authoritative, last-word)") -- this used to duplicate
that chrome with a different padding value (space-md instead of the law's panel-pad/16px), which
is exactly the "two sources of chrome" bug the law forbids. Only the typography sub-rules below
(h1-h4 sizing) stay here; they are not chrome and the LAW block does not set them. */
.lpos-blueprint .lpos-title-panel h1, .lpos-blueprint .lpos-title-panel h2,
.lpos-blueprint .lpos-c-title-panel h1, .lpos-blueprint .lpos-c-title-panel h2 {
font-size: var(--lpos-title-size, 1.5rem) !important; line-height: 1.2 !important; margin: 0 !important; color: var(--lpos-heading-color,var(--lpos-ink)) !important; letter-spacing: var(--lpos-tracking-heading,-0.01em);
}
.lpos-blueprint .lpos-title-panel h3, .lpos-blueprint .lpos-title-panel h4,
.lpos-blueprint .lpos-c-title-panel h3, .lpos-blueprint .lpos-c-title-panel h4 {
font-size: var(--lpos-subtitle-size, 1rem) !important; line-height: 1.3 !important; margin: var(--lpos-subtitle-margin, .15rem 0 0) !important; color: var(--lpos-muted) !important; font-weight: 500 !important;
}
/* JD: left/right title panels are secondary content (middle-center is primary) -- smaller type
scale, same panel chrome. Applied via a plain BEM modifier on the same .lpos-c-title-panel
element (BlueprintRenderer::panel_left()/panel_right()), higher source order + equal specificity
to the base rule above so it wins without an extra !important escalation. */
.lpos-blueprint .lpos-c-title-panel--secondary h1, .lpos-blueprint .lpos-c-title-panel--secondary h2 {
font-size: var(--lpos-title-size-secondary, 1.1rem) !important;
}
.lpos-blueprint .lpos-c-title-panel--secondary h3, .lpos-blueprint .lpos-c-title-panel--secondary h4 {
font-size: var(--lpos-subtitle-size-secondary, .75rem) !important;
}
/* JD 2026-08-06: midcenter TITLECAP typography pass -- the primary title/subtitle text (center
focal panel, .lpos-feat__titlecap) read unfinished: no display font, loose 1.2 leading, and a
near-invisible 2.4px title->subtitle gap, all made worse by the panel's own flex:1 1 auto height
(see the titlecap layout rules further down) which lets it grow tall in -right-collapsed/
-left-collapsed/both-collapsed and strands the two text lines looking sparse. Scoped to
`.lpos-cell--midcenter .lpos-feat__titlecap` only (3-class specificity beats the shared
.lpos-c-title-panel h1-h4 rule above without an extra !important escalation) so the left/right
--secondary title panels and the view-peer title are untouched. Chrome (background/blur/border/
radius/panel-pad) still comes 100% from the ONE-PANEL LAW block -- nothing here overrides it. */
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__titlecap {
display: flex !important; flex-direction: column !important;
align-items: flex-start !important; justify-content: flex-start !important; /* top-left anchor, never vertically centered when the panel grows tall */
}
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__titlecap h2 {
font-family: var(--lpos-font-display, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif) !important;
/* fluid step anchored to the existing --lpos-title-size token (24px) so it never regresses below
today's size, growing toward 30px as the viewport widens -- clamp() per JD's ask, all 4 collapse
states read from the same rule (no per-state override needed, the panel width changes, this doesn't). */
font-size: clamp(var(--lpos-title-size, 1.5rem), calc(var(--lpos-title-size, 1.5rem) + 1vw), 1.875rem) !important;
line-height: 1.1 !important;
font-weight: 600 !important;
letter-spacing: var(--lpos-tracking-heading, -0.01em) !important;
}
.lpos-blueprint .lpos-cell--midcenter .lpos-feat__titlecap h3 {
color: var(--lpos-muted) !important;
font-weight: 400 !important;
margin: var(--lpos-space-xs, 4px) 0 0 !important; /* was --lpos-subtitle-margin (2.4px) -- token-based 4px step reads as an intentional gap instead of a clipped-looking sliver */
}
/* side panels (left/right): stack title + media vertically instead of inline (DCS side-stack).
6f86633 is the shared side-panel row container the console composes into each side column. */
.lpos-blueprint .elementor-element-6f86633{flex-direction:column!important;}
.lpos-blueprint .elementor-element-6f86633 > *{width:100%!important;}
/* ===== BLUEPRINT RESPONSIVE ============================================================
Any [lpos_blueprint] composes a CSS grid whose columns come from the shape (inline style).
Override per device so blueprints stack to whole rows on tablet/phone (never a cramped
multi-col squeeze) -- makes every blueprint device-safe regardless of its shape. ===== */
/* These two only ever applied to NON-console blueprint shapes (the console shell is display:flex,
so grid-template-columns on it is inert) -- kept for those shapes, scoped so the intent is
explicit. The console's own responsive behaviour is the auto-collapse below, driven by
lpos-drawers.js (matchMedia 1280px) reusing the proven collapsed-state layouts. */
@media (max-width:1024px){ .lpos-blueprint:not(.lpos-blueprint--console){grid-template-columns:1fr 1fr!important;} }
@media (max-width:767px){ .lpos-blueprint:not(.lpos-blueprint--console){grid-template-columns:1fr!important;} }
/* (CONSOLIDATION 2026-08-05, plan Phase 2: the .lpos-topbar/.lpos-bottombar container bars,
.lpos-topbar__left/__search/__actions, .lpos-center/__video, and the first .lpos-col__media copy
were DELETED -- no renderer emits those containers any more (only .lpos-topbar__brand and
.lpos-topbar__logo-img survive as elements inside the portal switcher). The later
.lpos-col__media rule (with overflow:hidden) is the single live copy.) */
.lpos-topbar__brand{font:700 1.25rem/1 var(--lpos-font-display,'Space Grotesk', ui-sans-serif, system-ui, sans-serif);color:var(--lpos-logo-word-color,var(--lpos-ink));letter-spacing:.02em;white-space:nowrap}
/* owned left/right columns: title stacked over media, media fills remaining height */
.lpos-col{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);height:100%}
/* ================= 9-PANEL CONSOLE (owned Blueprint "console" shape) ==================
Screen-fill 3x3 grid. Rows locked 9dvh / remainder / 9dvh (A10): the flex remainder on the
middle row does the "calc(100vh - 18vh - gaps)" math for free once the top/bottom rows have
a fixed flex-basis, so it never drifts out of sync with the gap token. overflow:hidden at
every level below -- zero scrollbars, anywhere, ever (A10).
Each layout cell is its own frosted padded Panel (--lpos-panel-pad -- the one token this
file's cell padding reads everywhere, replacing the old mixed space-md/pad pair (A9)); every
Component nested inside a cell gets its OWN smaller frosted sub-panel via the reusable
.lpos-c-panel/.lpos-c-title-panel component classes (ComponentStyles.php: menu/logo tiles,
flipbook title, icon clusters) so nesting composes from one shared vocabulary (A8/A9). ==== */
/* SCREEN-FILL FREEZE (moved here 2026-08-10, JD approved deleting dashboard-layout.css): that file
carried an UNSCOPED `html,body{height:100%;overflow:hidden!important}` -- a site-wide page freeze
shipped for a JetEngine dashboard (.bl-dashboard-root) this plugin never renders. The freeze
itself is still load-bearing for the no-scrollbar law, so it moves here, scoped to pages that
actually contain a console blueprint. Every other page on the site scrolls normally again. */
html:has(.lpos-blueprint),
body:has(.lpos-blueprint){height:100%;min-height:100%;overflow:hidden}
/* JD 2026-08-03 (screen-fill + dark-HUD law): the console OWNS its dark HUD backdrop and its dark
STRUCTURAL tokens -- it must never render light. A stale light brand-pack default was overriding
the dark :where(:root) canon at :root (zero specificity), turning the whole HUD white; re-declaring
the structural surface/ink tokens ON the console subtree (normal specificity) restores dark while
leaving per-tenant ACCENT tokens (--lpos-accent etc) free to theme. Values == console-tokens canon. */
.lpos-blueprint--console,.lpos-blueprint--gate,.lpos-blueprint--magick8{
--lpos-bg:#0A0E17;--lpos-panel:#0D111C;--lpos-panel-hover:color-mix(in srgb,var(--lpos-accent) 10%,transparent);--lpos-overlay:#10151f; /* JD 2026-08-04 TOKEN-DRIVEN: panel-hover derives from the tenant --lpos-accent, not hardcoded cyan */
--lpos-ink:#EAF2FB;--lpos-muted:#A8B2C7;--lpos-glass-panel:linear-gradient(180deg, rgba(30,42,66,0.52), rgba(16,24,40,0.62))} /* kept in lockstep with the root token (JD 2026-08-06) */
/* JD 2026-08-06: .lpos-blueprint--magick8 joins the screen-fill/dark-HUD rule below -- same tokens,
no rows/grid (Magick8 has none), just the backdrop-hosting box the shared .lpos-blueprint__bgvideo
layer (render_bg_video_layer(), unchanged) needs to fill the screen and paint behind nothing. */
.lpos-blueprint--magick8{--lpos-m8-w:min(92vw,860px);
--lpos-m8-car-w:min(calc(100vw - 2*var(--lpos-gap,12px)),1600px)} /* JD 2026-08-06: near full-bleed carousel row -- the chevrons float INSIDE it over the edge-fade zones */ /* JD 2026-08-06: ONE width token for player/rows -- resize in one place */
.lpos-blueprint--console,.lpos-blueprint--magick8{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);height:100dvh;padding:var(--lpos-gap,12px);box-sizing:border-box;overflow:hidden;
background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--lpos-accent,#00D4FF) 7%,var(--lpos-bg,#0A0E17)) 0%,var(--lpos-bg,#0A0E17) 58%);color:var(--lpos-ink,#EAF2FB)}
.lpos-blueprint--console>.lpos-blueprint__row{min-height:0;overflow:hidden;align-items:stretch;background:transparent} /* JD 2026-08-04 CORRECTION: ROWS carry NO fill/tint/glass -- layout only, so the console bg (video/gradient) shows through the GAPS between panels. Glass/frosting lives ONLY on panels (.lpos-cell/.lpos-c-panel/.lpos-c-subpanel). The edge-glyph bleed-through fix moved to the bg-video LAYER ITSELF (a real blur filter on `.lpos-blueprint__bgvideo-media`, far below) instead of a row-level tint, so the gaps still show real ambient motion, just diffused enough that no error-page text ever reads as legible. */
/* Phase D 2026-08-09: legacy row sizing machinery deleted -- both console states are flat grids
(BLUEPRINT SHIFT stage A/B below), rows are display:contents in every state, so properties set
directly on .lpos-blueprint__row's own box (flex/height/grid-template-columns/position/z-index)
never render. This tombstone marks the first of several such deletions in this file. */
/* each grid TRACK cell (.lpos-blueprint__region) must not grow past its track: min-width:0 stops
intrinsic content (3D viewer, video, flipbook) from stretching a 1fr column wider than its
siblings, and height:100% (resolved against the row's definite cross-size from CSS Grid's
default stretch) is what lets the .lpos-cell panel inside it fill the row/column exactly --
this is the mechanism that makes top-left/mid-left/bot-left (and the -right column) share the
SAME width and the top-row/bottom-row panels share the SAME height as the search reference. */
.lpos-blueprint--console .lpos-blueprint__region{display:block;height:100%;min-width:0;min-height:0;overflow:hidden;box-sizing:border-box}
/* each cell = frosted padded Panel, stretched to fill its region (see above) so every panel in a
row is exactly the same height, and every panel in a column is exactly the same width. */
/* JD 2026-08-01: Display Panel inset tightened panel-pad(16) -> subpanel-pad(8) to match the locked
reference spec (the midright Tab Tool Bar: 8px inset, 16px between items). The 16px tier now only
lives BETWEEN things (grid gaps, item gaps), never as a panel inset. */
/* JD 2026-08-04 LAW: ONE ATOMIC PANEL. Every blueprint cell/region panel renders from the SAME
token-driven definition as the .lpos-c-panel atomic component (background/blur/shadow/border/radius),
so editing the panel tokens changes every panel everywhere. Size + padding come from the Blueprint
per instance; content comes from Components. No divergent chrome variant.
ONE-PANEL LAW CONSOLIDATION (2026-08-04): chrome (background/blur/shadow/border/radius/padding) for
.lpos-cell moved to the single LAW definition further down this file (search "ONE ATOMIC PANEL
COMPONENT (authoritative, last-word)") so there is exactly one source of chrome. This rule now
carries LAYOUT ONLY (display/flex/size/overflow) -- do not re-add background/border/radius/padding
here, it would become a second, driftable chrome definition. */
.lpos-blueprint .lpos-cell{
display:flex;flex-direction:column;gap:var(--lpos-gap,12px);height:100%;width:100%;min-height:0;min-width:0;box-sizing:border-box;overflow:hidden}
/* JD 2026-08-04 (translucency pass): the midcenter cell carries the "editorial copy" body text
(the [lpos_video]/tab-content description block) -- kept at the FULLER --lpos-glass-panel
opacity (not the new chrome-tier translucent default above) so paragraph copy stays legible
over the moving DNA background. Same specificity as the base rule above (two classes each); the
later source position wins the cascade, no !important needed. */
.lpos-blueprint .lpos-cell--midcenter{background:var(--lpos-glass-panel)}
/* top/bottom rows (2026-08-01 THIRD retune): row shrunk 70px -> 54px (--lpos-titlebar-h above), so
the cell's own vertical inset drops space-sm(8) -> space-xs(4) to match -- STILL one padding
layer only, every chrome-row component that sits inside a `.lpos-c-subpanel` wrapper already
renders that wrapper's vertical padding at 0 for chrome-row use (menu/logo/topright+botright
clusters/botleft row/botcenter bar all override it, see .lpos-c-subpanel below), so nothing
stacks on top of this single 4px inset: 4 + 46 + 4 = 54, exactly, for every row. Horizontal
panel-pad is unchanged throughout. align-items:center added to botleft/botright (JD: bottom-right
icon buttons read closer to the panel's TOP than its bottom -- the cell's own cross-axis alignment
was left at its column-flex default, which is fine for the vertical axis here since justify-content
already centers that; align-items:center keeps the row's own content horizontally centered instead
of stretching, matching the intent even though the visual symptom traced to the icon SVGs' default
inline-baseline gap, fixed separately below). */
/* topleft (2026-08-01 SEVENTH logo retune): standard chrome-row inset restored -- space-sm vertical
like every other chrome cell (8 + 46 + 8 + 2*1border = 64). The zero-inset exception from the
sixth retune is retired along with the 62px logo. */
.lpos-blueprint .lpos-cell--topleft{flex-direction:row!important;align-items:center;gap:var(--lpos-gap,12px);padding:var(--lpos-space-sm,8px)} /* JD 2026-08-01: uniform 8px inset per the locked reference spec */
/* JD 2026-08-01 (final layout): topcenter carries ONLY the tab buttons -- centered as a group,
fixed 46px boxes, same row recipe as the other chrome cells. The search moved to botcenter,
which takes over the row-with-flexing-search treatment. */
.lpos-blueprint .lpos-cell--topcenter{flex-direction:row!important;align-items:center;justify-content:flex-start;gap:var(--lpos-gap,12px);padding:var(--lpos-space-sm,8px)} /* JD 2026-08-01: left-aligned controls; uniform 8px inset per the locked reference spec */
.lpos-blueprint .lpos-cell--topcenter .lpos-c-icon-btn{flex:0 0 auto}
/* twin of the top action icons, shown right-aligned here only while the right column is collapsed */
/* JD 2026-08-01 (rail unification): the .lpos-topcenter-icons twin is RETIRED -- the collapsed
right column now surfaces the topright buttons in the vertical rail (.lpos-rail-topset below). */
/* (COLLAPSE REBUILD JD 2026-08-05: the hidden rail twins + display:contents promotion system is
GONE -- the collapsed bars are real .lpos-rail elements now, see the COLLAPSE REBUILD block.) */
/* JD 2026-08-01: the midcenter's TAB BAR twin -- hidden in every normal view (the header owns the
tab bar there); in the both-collapsed cinematic view the header row is gone, so it surfaces as a
GHOST strip across the top INSIDE the main panel, above the video, on the same reveal contract
as the rails. */
.lpos-blueprint--console .lpos-feat__tabbar{display:none!important}
/* JD 2026-08-02 (C7 + F5): one-active-pane switching. Every midleft asset and every midright view
is rendered once; only the -active pane occupies the column, so each engine initialises once and
keeps its state instead of being rebuilt on every switch. */
.lpos-blueprint--console [data-lpos-media-host] > .lpos-col__slot:not(.-active),
.lpos-blueprint--console [data-lpos-view-host] > [data-lpos-view]:not(.-active){display:none!important} /* matches the 3D slot wrapper AND the direct view panes, so a relocated title hides with its view */
/* ---- JD 2026-08-02: slide-out MENU tree. Console first (primary link), then collapsible
sections. Every row is a control-height target on the standard panel recipe, so the drawer
reads like the rest of the console rather than a bare list. ---- */
.lpos-menu{display:flex;flex-direction:column;gap:var(--lpos-space-sm,8px);min-width:0}
.lpos-menu__section{display:flex;flex-direction:column;gap:var(--lpos-space-sm,8px)}
.lpos-menu__toggle,.lpos-menu__link{
all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--lpos-space-sm,8px);
min-height:var(--lpos-control-size,46px);padding:0 var(--lpos-space-md,12px);cursor:pointer;
border-radius:var(--lpos-radius-control,8px);
background:var(--lpos-glass-panel,linear-gradient(180deg, rgba(30,42,66,0.34), rgba(16,24,40,0.45)));
border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1,30%),transparent);
color:var(--lpos-ink,#EAF2FB);font:600 var(--lpos-text-sm,14px)/1.2 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
.lpos-menu__link--primary{border-color:color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3,55%),transparent);background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent))}
.lpos-menu__link:hover{border-color:var(--lpos-accent,#00D4FF);background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent))}
.lpos-menu__link:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
.lpos-menu__chev{display:flex;transition:transform var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1))}
.lpos-menu__chev svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);color:var(--lpos-muted,#A8B2C7);fill:none;stroke:currentColor}
.lpos-menu__panel[hidden]{display:none}
.lpos-menu__panel{padding-left:var(--lpos-space-md,12px)}
/* JD 2026-08-02 (sub-items landed): item rows step DOWN from the section headers -- one space-sm
shorter than a control, token-derived. Hierarchy reads at a glance AND the tallest header+items
run (Marketplace open, 6 items) stays inside the drawer height (the 46px rows overran by ~23px
and the no-scrollbar rule clipped the Settings header). */
.lpos-menu__item .lpos-menu__link{min-height:calc(var(--lpos-control-size,46px) - var(--lpos-space-sm,8px));font-weight:500}
/* JD 2026-08-02 (FINAL menu): section headers are DIVIDER TEXT TOGGLES -- bare text over a
hairline, no panel chrome; the chevron reuses the shared rotate-on-expanded behavior. */
.lpos-menu__divider{
all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
gap:var(--lpos-space-sm,8px);width:100%;cursor:pointer;
padding:var(--lpos-space-sm,8px) var(--lpos-space-md,12px);
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);
color:var(--lpos-muted,#A8B2C7);font:600 var(--lpos-text-sm,14px)/1.2 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
.lpos-menu__divider:hover{color:var(--lpos-ink,#EAF2FB)}
.lpos-menu__divider:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
.lpos-menu__divider[aria-expanded="true"]{color:var(--lpos-ink,#EAF2FB);border-bottom-color:color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3,55%),transparent)}
.lpos-menu__divider .lpos-menu__chev{transition:transform var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1))}
.lpos-menu__divider[aria-expanded="true"] .lpos-menu__chev{transform:rotate(180deg)}
/* JD 2026-08-02: menu ITEM buttons carry the same chrome as the Logout button (accent hairline +
accent-soft fill -- the --primary recipe), so every actionable row reads as a button. */
.lpos-menu__link--go{
border-color:color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3,55%),transparent);
background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent))}
/* JD 2026-08-02: SECOND-STEP menu (the local-app drill-in pattern). Home list and step panels
swap via [hidden]; a primary-with-children row is [item button, flex:1][chevron step-in]. */
.lpos-menu{display:flex;flex-direction:column;min-height:100%}
.lpos-menu__home{display:flex;flex-direction:column;gap:var(--lpos-space-sm,8px);flex:1 1 auto;min-height:0}
.lpos-menu__home[hidden],.lpos-menu__step[hidden]{display:none}
.lpos-menu__step{display:flex;flex-direction:column;gap:var(--lpos-space-sm,8px)}
.lpos-menu__item{display:flex;align-items:stretch;gap:var(--lpos-space-sm,8px)}
.lpos-menu__item .lpos-menu__link{flex:1 1 auto;min-width:0}
/* JD 2026-08-02: the step-in chevron sits INSIDE the menu button, not beside it -- for rows with
children the ROW carries the single button chrome and both inner controls go chromeless (the
label zone opens the Display, the chevron zone steps into the submenu). */
.lpos-menu__item--haskids{
gap:0;min-height:calc(var(--lpos-control-size,46px) - var(--lpos-space-sm,8px));
border-radius:var(--lpos-radius-control,8px);
background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent));
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)}
.lpos-menu__item--haskids .lpos-menu__link{background:transparent;border:0;min-height:0}
.lpos-menu__item--haskids:hover,.lpos-menu__item--haskids:focus-within{border-color:var(--lpos-accent,#00D4FF)} /* review fix: keyboard focus gets the same row highlight as hover */
.lpos-menu__stepin{
all:unset;box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer;
padding:0 var(--lpos-space-md,12px);
color:var(--lpos-muted,#A8B2C7)}
.lpos-menu__stepin:hover{color:var(--lpos-accent,#00D4FF)}
.lpos-menu__stepin:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
.lpos-menu__stepin svg,.lpos-menu__back svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);fill:none;stroke:currentColor}
.lpos-menu__back{
all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--lpos-space-sm,8px);width:100%;cursor:pointer;
padding:var(--lpos-space-sm,8px) var(--lpos-space-md,12px);
border-bottom:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-3,55%),transparent);
color:var(--lpos-ink,#EAF2FB);font:600 var(--lpos-text-sm,14px)/1.2 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
.lpos-menu__back:hover{color:var(--lpos-accent,#00D4FF)}
.lpos-menu__back:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
/* the Logout button anchors to the BOTTOM of the off-canvas menu (JD) */
.lpos-menu__logout{margin-top:auto;justify-content:center}
.lpos-menu__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lpos-space-sm,8px)}
.lpos-menu__empty{margin:0;padding:var(--lpos-space-sm,8px) var(--lpos-space-md,12px);color:var(--lpos-muted,#A8B2C7);font:400 var(--lpos-text-sm,14px)/1.4 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
/* a slot is the asset's whole group (tools bar + title panel + media), stacked like the column */
.lpos-col__slot{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);min-height:0;flex:1 1 auto}
/* view panes (chat/bookmarks/calendar/notes): the standard column stack -- title panel, then an
honest-empty body panel that fills the rest until its engine lands. */
.lpos-col__view{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);min-height:0}
.lpos-view__body{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center} /* DUP FIX: .lpos-c-subpanel{display:flex} appears later with equal specificity and was winning, so this twin rendered on top of the real header tab bar in EVERY state */
/* JD 2026-08-02: the cinematic tab bar is IN FLOW like the side rails' push behaviour -- it does
not overlay the video. At rest it collapses to zero height (content takes the space); on reveal
it grows to a control row and the content moves down, matching how the rails push the sides. */
/* JD 2026-08-04 (PDP shell law, item 7): the collapsed-state top bar is ALWAYS VISIBLE now -- no
hover-to-reveal ghost. It used to render at height:0/opacity:0 until pointer activity or focus
revealed it (see the removed -railshow/:hover/:focus-within reveal selectors this rule replaces);
that entire "ghost" contract is gone -- the twin renders at full height/opacity unconditionally
the instant both columns collapse, exactly like every other chrome bar below. */
/* (JD 2026-08-05 both-collapsed rework, items 3/4/9/11: the ghost tabbar twin reveal is DELETED --
the REAL top row stays visible in both-collapsed now (full width, real panel outline, real
pager), so the in-panel twin never shows anywhere. Base display:none above governs.) */
@media (prefers-reduced-motion: reduce){.lpos-feat__tabbar{transition:none!important}}
/* (COLLAPSE REBUILD JD 2026-08-05: display:contents twin-promotion rules deleted -- rail content
lives in the real .lpos-rail elements.) */
/* JD 2026-08-01: chevron-only pager (moved up from the center title bar) pins to the RIGHT edge */
.lpos-blueprint .lpos-cell--topcenter .lpos-pagination--nav{margin-left:auto}
/* labeled icon button (icon + inline text, JD 2026-08-01: the Dashboard tab): grows to fit its
text -- width:auto + side padding need !important to beat the ComponentStyles registry's fixed
46px (same precedent as every other width override of that rule). Height/chrome unchanged. */
.lpos-blueprint .lpos-c-icon-btn.lpos-c-icon-btn--labeled{width:auto!important;min-width:0;padding:0 var(--lpos-space-md,12px)!important;gap:var(--lpos-space-sm,8px)!important}
.lpos-c-icon-btn__text{font:600 var(--lpos-text-sm,14px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);color:var(--lpos-ink,#EAF2FB);white-space:nowrap}
.lpos-blueprint .lpos-cell--botcenter{flex-direction:row!important;gap:var(--lpos-gap,12px)} /* search host now: row so .lpos-search's flex:1 fills the panel */
.lpos-blueprint .lpos-cell--topright{flex-direction:row!important;align-items:center;justify-content:center;gap:var(--lpos-gap,12px);padding:var(--lpos-space-sm,8px)} /* JD 2026-08-01: uniform 8px inset */
.lpos-blueprint .lpos-cell--botleft,.lpos-blueprint .lpos-cell--botright{justify-content:center;align-items:center;padding:var(--lpos-space-sm,8px)} /* JD 2026-08-01: uniform 8px inset */
/* JD 2026-08-01 batch 17: botleft = [collapse toggle, LEFT-aligned] [profile-image button] [empty
slot panel absorbing the rest]; botright = [switch cluster] [toggle LAST, far right]. The
cluster/slot flex, the toggle + avatar keep their fixed squares (needs !important against the
distributed-row width rule). */
.lpos-blueprint .lpos-cell--botleft{justify-content:flex-start}
.lpos-blueprint .lpos-cell--botleft,.lpos-blueprint .lpos-cell--botright{flex-direction:row!important;gap:var(--lpos-gap,12px)}
/* (Phase 3: dead .lpos-cell--botright .lpos-switch sizing rule deleted -- wrapper gone from markup.) */
.lpos-blueprint .lpos-cell--botleft>.lpos-c-icon-btn[data-lpos-collapse],
.lpos-blueprint .lpos-cell--botleft>.lpos-c-icon-btn--avatar,
/* DEAD BLOCK REMOVED 2026-08-10 (full-app law review): the XP progress bar / level badge /
botleft slot panel. No PHP or JS emits .lpos-c-subpanel--slot, .lpos-progress* or .lpos-level
any more (the botleft XP+level computation was deleted earlier this session), so ~50 lines of
rules here painted nothing. They also held the only two references to `--lpos-xp`, a token
that was never declared anywhere -- the "token-driven" width was permanently calc(0*1%). The
live XP bar is .lpos-magick8__xpfill, whose width lpos-drawers.js sets directly. */
.lpos-topbar__brand{font:700 1.25rem/1 var(--lpos-font-display,'Space Grotesk', ui-sans-serif, system-ui, sans-serif);color:var(--lpos-logo-word-color,var(--lpos-ink));letter-spacing:.02em;white-space:nowrap}
/* brand logo image (A2): token-sized to the row's control height, never a hardcoded px */
/* JD 2026-08-01: logo asset is a wide lockup (icon+wordmark, ~2000x301) -- fills the titlebar row at
near-full height. Reconciliation pass: the logo's own sub-panel wrapper (.lpos-c-subpanel--logo,
below) is now zero-padding -- the topleft CELL's own var(--lpos-space-sm,8px) inset (above) is the
ONLY layer around the image, so its available height is titlebar-h minus that one inset on both
sides, not the generic panelled-component 4px figure; width scales naturally with the asset's own
aspect ratio, no max-width clamp shrinking it back down. */
.lpos-topbar__logo-img{height:var(--lpos-logo-h,46px);width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block;flex:0 1 auto;min-width:0;filter:none} /* 2026-08-01 SEVENTH retune: back to control-size (46px) -- the padding-free asset carries the visual size now; max-width + contain still guard against wordmark clipping */
/* ---- reusable sub-panel wrapper (A8): every top-bar Component (menu button, logo, search box,
each icon-button cluster, the asset-switcher cluster) sits inside one of these -- one class +
modifier pattern instead of a one-off rule per cell. ----
ONE-PANEL LAW CONSOLIDATION (2026-08-04): this class used to carry its OWN divergent chrome
recipe here (blur-sm/shadow-1/radius-control/border-alpha-3/4px+8px padding) that DUPLICATED and
conflicted with the single LAW chrome definition further down this file (search "ONE ATOMIC
PANEL COMPONENT (authoritative, last-word)"), which also matches .lpos-c-subpanel and forces the
uniform blur-md/shadow-2/radius-panel/border-alpha-2/16px-padding recipe via !important -- two
sources of chrome for the same class, exactly what the law forbids. Chrome removed from here;
this rule now carries LAYOUT ONLY. Do not re-add background/border/radius/padding here. */
.lpos-c-subpanel{display:flex;align-items:center;gap:var(--lpos-space-sm,8px);min-width:0;min-height:0;box-sizing:border-box;overflow:hidden}
/* menu button already carries its own full icon-btn chrome -- the wrapper here is structural
only (its own Component panel per A8), not a second visible box around an already-boxed button.
ONE-PANEL LAW NOTE (2026-08-04): this element carries the base .lpos-c-subpanel class too (BEM
base+modifier pair, BlueprintRenderer::topleft menu markup), which the LAW chrome block further
down this file matches with !important -- these chrome-cancelling properties need !important to
keep winning, or the hamburger button would render inside a second, redundant panel box. This is
the one narrow, pre-existing "wrapper around an already-chromed Component" case in the file (kept
out of the deleted ghost block on purpose); the real fix is dropping the .lpos-c-subpanel class
from this element in the PHP markup so it never matches the panel-chrome selector at all. */
/* (Phase 3: the --menu chrome-cancel rule is deleted -- panel_topleft() no longer emits that wrapper.) */
/* logo: reconciliation pass -- zero padding of its own (was subpanel-pad 8px, which combined with
the cell's new 8px inset overflowed the 70px row). The topleft cell's own space-sm inset is now
the ONLY layer around the image (see .lpos-topbar__logo-img above); the panel border still frames
the logo tightly (border/background/shadow inherited from the base rule, unchanged), it's just a
snug frame with no additional inset -- the "larger, minimal padding" treatment. */
/* JD 2026-08-01: logo OUT of its component container -- image sits directly in the Display Panel
(same unwrap as the icon clusters); small left margin separates it from the menu button. The
icon-to-wordmark spacing is baked into the lockup asset itself. */
/* JD 2026-08-01 (final): logo CENTERED in the space between the menu button and the empty slot
panel -- the wrapper claims that remaining width (flex:1 1 auto) and centers the intrinsically
sized ![]()
inside it. */
.lpos-c-subpanel--cluster{flex:0 0 auto;gap:var(--lpos-gap,12px)}
/* JD 2026-08-01 (final): the topleft slot/logo/avatar were replaced by the WORKSPACE DROPDOWN --
trigger wears the search-bar recipe (46px glass box, accent-40 hairline), closed state shows the
MyLivingOS logo as the styled default selection; the popover menu wears the facebar tool-panel
recipe. Behavior in lpos-drawers.js (toggle, outside-click + Esc close). */
.lpos-c-select{position:relative;flex:1 1 auto;min-width:0;height:var(--lpos-control-size,46px);display:flex;align-items:center;gap:calc(0.5*var(--lpos-space-sm,8px))} /* JD 2026-08-07: brand panel + its dropdown toggle read as ONE unit (gap halved); spacing to the Dashboard button is the cell gap, untouched */
/* TWO components (JD): the VALUE is its own glass sub-panel (inherits .lpos-c-subpanel chrome;
sized + centered here), the toggle is the standard icon button beside it. */
.lpos-c-select__value{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 var(--lpos-space-sm,8px)} /* JD 2026-08-01 batch 17 (EIGHTH logo retune): vertical padding dropped -- the panel border is the only frame, so the logo renders at full control height again */
.lpos-c-select .lpos-topbar__logo-img{height:calc(var(--lpos-control-size,46px) + var(--lpos-space-sm,8px))} /* JD EXPLICIT 2026-08-04: BL wordmark too small at ~42px -> enlarged; SIZE FROZEN again at new value unless JD says otherwise. (~54px; supersedes the 2026-08-03 "up one step to ~42px" retune below it.) */
.lpos-c-select__menu{position:absolute;left:0;right:0;top:calc(100% + var(--lpos-space-xs,4px));z-index:var(--lpos-z-drawer,9000);
display:flex;flex-direction:column;gap:var(--lpos-space-xs,4px);padding:var(--lpos-subpanel-pad,6px);
/* NO-SCROLLBAR / REACHABILITY LAW (2026-08-10 review): the popover had no vertical bound at all.
One workspace renders today, so nothing overflowed -- but the moment a second lands, an
unbounded menu on a short viewport runs past the bottom edge with the document frozen
(overflow:hidden everywhere), i.e. unreachable options and no scrollbar to reach them. Same
clamp the rail-flyout variant already carries. lpos-drawers.js clamps the fixed-position
`top` against the viewport to match. */
max-height:min(calc(100dvh - 2*var(--lpos-panel-pad,12px)),80dvh);overflow:hidden;
/* JD 2026-08-03: the menu was too see-through to read the logos over the panel behind it -- near
opaque dark now (still frosted), so brand logos read clearly. Visual-QA follow-up (same day):
94%/blur-md still let panel texture bleed through behind wide wordmarks -- bumped to 97% +
blur-lg (canon blur(32px) saturate(160%)) so every logo reads clean regardless of what's behind it. */
background:color-mix(in srgb,var(--lpos-bg,#0A0E17) 97%,transparent);-webkit-backdrop-filter:var(--lpos-blur-lg,blur(32px) saturate(160%));backdrop-filter:var(--lpos-blur-lg,blur(32px) saturate(160%));
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-control,8px);
}
.lpos-c-select__menu[hidden]{display:none}
/* JD 2026-08-06: tenant logo INSIDE the open dropdown panel (its first child) -- token-sized to
the standard control height, width auto so it never distorts, centered as its own block. */
.lpos-c-select__panel-logo{display:block;margin:0 auto var(--lpos-gap,12px);height:var(--lpos-control-size,46px);width:auto;max-width:100%}
/* COLLAPSED-BUTTON REVEAL, Layer B (JD 2026-08-03, COLLAPSED_BUTTON_CONTENT_DISPLAY_SPEC §4.2) --
the rail flyout IS a `.lpos-c-select__menu` (same class, inherits the frosted/positioned/[hidden]
chrome above verbatim) plus this one sizing modifier, since its content is a relocated media/view
PANE, not a short option list. lpos-drawers.js's positionSelectMenu() sets position:fixed +
left/top/width inline exactly as it already does for the portal switcher -- no new JS positioning
logic. */
.lpos-rail-flyout{width:min(360px,90vw);max-height:min(480px,80vh);overflow:hidden;padding:var(--lpos-panel-pad,12px)} /* JD no-scroll law: fit, never scroll */
.lpos-rail-flyout__target{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);min-height:0}
/* JD 2026-08-03 (access gate): logged-out / no-access shows ONLY a centered panel, never the console. */
.lpos-blueprint--gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--lpos-gap,12px);box-sizing:border-box;
background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--lpos-accent,#00D4FF) 7%,var(--lpos-bg,#0A0E17)) 0%,var(--lpos-bg,#0A0E17) 58%);color:var(--lpos-ink,#EAF2FB)}
.lpos-blueprint__gate{display:flex;flex-direction:column;align-items:center;gap:var(--lpos-gap,12px);padding:calc(var(--lpos-panel-pad,12px)*1.5) calc(var(--lpos-panel-pad,12px)*2);text-align:center;max-width:420px}
.lpos-blueprint__gate-msg{margin:0;font-weight:600;font-size:var(--lpos-text-md,17px);line-height:1.4;color:var(--lpos-ink,#EAF2FB)}
/* Phase D 2026-08-09: the -select-open ROW-level position/z-index lift is deleted -- rows are
display:contents in both console states now, so a row can't be a stacking context any more.
The flat-grid stage A/B blocks below lift the CELL that hosts the open menu instead. */
/* JD 2026-08-03 (portal-twin, item 3): a hidden-by-default duplicate of the portal switcher rides
inside the center tab bar (top-center header + both center-feature tabtwins) so it can surface
there while the RIGHT column is collapsed -- BlueprintRenderer::portal_twin_html(). Hidden at
rest; the .-right-collapsed console state covers BOTH the right-only rail (top-center header
twin shows) and the both-collapsed cinematic view (row1's header is display:none there, so only
the .lpos-feat__tabbar ghost twin -- itself gated on .-left-collapsed.-right-collapsed -- ever
paints), so the same single selector is correct for every collapse combination. Sized to hug its
content (the default flex:1 1 auto is right for the topleft cell's 2-child row, wrong here where
it would shove the tab buttons off to the side). */
[data-lpos-portal-twin]{display:none}
/* JD 2026-08-05 FIX (dup switcher): the twin must show only when the REAL topleft switcher is
hidden -- that is LEFT-collapsed (menu-only topleft) and both-collapsed (ghost tabbar strip),
never right-collapsed, where the real one still renders and the twin duplicated it. */
.lpos-blueprint--console.-left-collapsed [data-lpos-portal-twin]{display:flex;align-items:center;flex:0 0 auto}
[data-lpos-portal-twin] .lpos-c-select{flex:0 0 auto}
[data-lpos-portal-twin] .lpos-c-select__value{flex:0 0 auto}
/* USABILITY FIX (review CRITICAL): the popover is absolutely positioned inside the topleft cell,
and both the cell and its row carry overflow:hidden (the no-scrollbar law) -- so the menu was
being clipped to zero and the dropdown "did nothing" on screen. While it is open the console
marks itself -select-open and those two ancestors go overflow:visible for that moment only.
The same clip-escape is needed for the portal TWIN's two extra homes (item 3): the top-center
header cell/region (row 1, alongside topleft) and the center-feature tabtwin's cell/region
(row 2) -- row 2 itself is not covered by the row-1-only rule below it, so it is added here too. */
.lpos-blueprint--console.-select-open .lpos-blueprint__region--topleft,
.lpos-blueprint--console.-select-open .lpos-cell--topleft,
.lpos-blueprint--console.-select-open .lpos-blueprint__region--topcenter,
.lpos-blueprint--console.-select-open .lpos-cell--topcenter,
.lpos-blueprint--console.-select-open .lpos-blueprint__region--midcenter,
.lpos-blueprint--console.-select-open .lpos-cell--midcenter,
.lpos-blueprint--console.-select-open .lpos-feat__tabbar{overflow:visible!important} /* JD 2026-08-02: the REGION between row and cell was a third clipper -- it swallowed the popover below the row band */
.lpos-c-select__option{all:unset;box-sizing:border-box;display:flex;align-items:center;width:100%;padding:var(--lpos-space-sm,8px) var(--lpos-space-md,12px);cursor:pointer;
/* visual-QA fix (2026-08-03): min-height = tallest logo (brandimg max-height, control-size minus
space-xs) plus its own top+bottom padding (2x space-sm) -- so a logo row and a text-only row sit
at the same height instead of the list zig-zagging. */
min-height:calc(var(--lpos-control-size,46px) + var(--lpos-space-md,12px));
border-radius:var(--lpos-radius-sm,4px);color:var(--lpos-ink,#EAF2FB);font:500 var(--lpos-text-sm,14px)/1.2 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
.lpos-c-select__option:hover{background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent))}
/* JD 2026-08-03: real brand options -- a lockup image fills the option like the value logo does;
an icon-only mark (Commerce Copilot) pairs with the brand name at the standard control scale. */
.lpos-c-select__option{gap:var(--lpos-space-sm,8px)}
/* JD 2026-08-03 (portal switcher): the SEARCH row sits above the first option -- the composer
search recipe at menu scale; filtering is live in lpos-drawers.js. Explore Portals anchors the
list with the compass glyph. */
.lpos-c-select__search{display:flex;align-items:center;gap:var(--lpos-space-sm,8px);
padding:var(--lpos-space-sm,8px) var(--lpos-space-md,12px);
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)}
.lpos-c-select__search svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);flex:0 0 auto;color:var(--lpos-muted,#A8B2C7);fill:none;stroke:currentColor}
.lpos-c-select__search input{all:unset;box-sizing:border-box;flex:1 1 auto;min-width:0;
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,#EAF2FB)}
.lpos-c-select__search input::placeholder{color:var(--lpos-muted,#A8B2C7)} /* native input ::placeholder css */
.lpos-c-select__explore svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);flex:0 0 auto;color:var(--lpos-accent,#00D4FF);fill:none;stroke:currentColor}
.lpos-c-select__explore{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)}
.lpos-c-select__option[hidden]{display:none} /* the option's own display:flex outranks the UA [hidden] rule -- filtered-out portals must actually disappear */
/* visual-QA fix (2026-08-03): capped BOTH axes -- a wide wordmark (e.g. "The Triad Mind") was
scaling off the height cap alone and rendering huge/overflowing sideways. max-height keeps the
existing ~42px cap, max-width:140px stops wide lockups from blowing out the option row, and
width/height:auto (with object-fit:contain) let the smaller of the two constraints win per image. */
.lpos-c-select__brandimg{max-height:calc(var(--lpos-control-size,46px) - var(--lpos-space-xs,4px));max-width:140px;width:auto;height:auto;object-fit:contain;display:block}
/* JD EXPLICIT 2026-08-04: the SELECTED-portal wordmark (esp. Biolimitless's wide "BIOLIMITLESS"
lockup) read too small at the base rule's ~42px/140px cap -- overrides ONLY the live
`.lpos-c-select__value` display (the value pill actually rendered in the topbar switcher; the
base rule above still governs every OTHER row -- the closed dropdown's option list -- so this
does not touch the "default"/non-selected sizing per JD's instruction). NOTE: the pre-existing
`.lpos-c-select .lpos-topbar__logo-img` rule elsewhere in this file targets a DIFFERENT class
that the current markup's selected-value ![]()
does not actually carry (only one legacy dropdown
option row does) -- this is the rule that actually controls what renders in the switcher pill.
max-width bumped 140px -> 220px (the wide-lockup blowout guard from the base rule's own 2026-08-03
comment, raised rather than removed) alongside max-height 42px -> ~54px so a wide wordmark like
Biolimitless's clears the height step instead of being width-clamped back down under it; the
value pill's own `overflow:hidden` (`.lpos-c-select__value` rule above) remains the hard backstop
against any lockup wider than the available pill width. SIZE FROZEN again at these values unless
JD says otherwise. */
.lpos-c-select__value .lpos-c-select__brandimg{max-height:calc(var(--lpos-control-size,46px) + var(--lpos-space-sm,8px));max-width:220px}
.lpos-c-select__brandmark{width:var(--lpos-icon-size,26px);height:var(--lpos-icon-size,26px);flex:0 0 auto}
.lpos-c-select__brandname{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,#EAF2FB);white-space:nowrap}
.lpos-c-select__option:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))} /* review fix: all:unset stripped the UA outline, leaving dropdown options with NO visible focus (WCAG 2.4.7) */
.lpos-c-select__option.-selected{background:var(--lpos-glass-2,rgba(255,255,255,0.055))}
/* centerfeature Tab Tool Bar (restored): content-sized and pinned to the left edge of the column
cell it's the first child of -- without align-self it would stretch to the cell's full width
like the title panel below it does, which reads as a second title bar, not a compact tool cluster.
Middle-row exception (item 3): reverts the base .lpos-c-subpanel's chrome-row 4px/8px padding
back to a uniform var(--lpos-subpanel-pad,6px) -- this is the one middle-row (midcenter) user of
the shared .lpos-c-subpanel class, and middle-row sub-panels keep the symmetric inset. */
.lpos-c-subpanel--tabbar{align-self:stretch;width:100%;padding:var(--lpos-subpanel-pad,6px)} /* JD: tab toolbar spans full width like the title panel below it */
/* JD 2026-08-01 (midright parity): the flip glue relocates the tools bar + pagination OUT of the
document panel to be the midleft cell's own panels. The .lpos-media scope no longer matches them,
so their styling lives here: the tools bar re-declares the --lpm-* chain its buttons consume
(same IACVT guard as the extbar-wrap precedent), neutralizes the shared __bar order:2/overlay
leftovers, and distributes its buttons; the pagination becomes a full-width panel keeping JD's
locked 2.6/4.8/2.6 shares + edge-aligned glyphs. */
.lpos-blueprint .lpos-cell--midleft .lpos-media__bar--above{
--lpm-btn: var(--lpos-panel-hover, rgba(0,212,255,.10));
--lpm-txt: var(--lpos-ink, #EAF2FB);
--lpm-accent: var(--lpos-accent, #00D4FF);
--lpm-ctl: var(--lpos-radius-control, 8px);
position:static;order:0;z-index:auto;flex-wrap:wrap;justify-content:center}
.lpos-blueprint .lpos-cell--midleft .lpos-media__bar--above button,
.lpos-blueprint .lpos-cell--midleft .lpos-media__bar--above a{flex:1 1 0;width:auto;min-width:0}
/* (JD follow-up: the flip pagination stays INSIDE the document panel -- the outside-pagination
rules that lived here were removed same day; the .lpos-media.-flip scoped rules govern it.) */
/* search (A3: ONE bar, ONE inline SVG magnifier, inside its own token-styled box). HUD audit
deviation #3: the inset was doubled (cell pad 14 + component pad 14 = 28) vs the hamburger's
single 14 -- horizontal padding now reads --lpos-subpanel-pad instead of stacking panel-pad. */
/* JD 2026-08-01 review loop: the input itself was a bare text line (~22px) floating inside the 46px
bar -- it now FILLS the bar. The bar's inset is a uniform var(--lpos-subpanel-pad,6px) on all four
sides -- the same breathing the tabbar's icon buttons get inside their sub-panel -- and the input
stretches to the full remaining height/width. Idle it stays chrome-less (one box, not box-in-box);
on focus it lights up as its own glass control inside the bar. */
.lpos-search{flex:1 1 auto;display:flex;align-items:stretch;gap:var(--lpos-space-sm,8px);height:var(--lpos-control-size,46px);padding:var(--lpos-subpanel-pad,6px);
background:var(--lpos-glass-panel);-webkit-backdrop-filter:var(--lpos-blur-sm);backdrop-filter:var(--lpos-blur-sm);
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);box-sizing:border-box;overflow:hidden}
.lpos-search input{flex:1;min-width:0;box-sizing:border-box;background:transparent;outline:0;color:var(--lpos-ink);font:500 .95rem/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);
padding:0 var(--lpos-space-sm,8px);border-radius:var(--lpos-radius-sm,4px);border:var(--lpos-border-width,1px) solid transparent;
transition:background-color var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1)),border-color var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1))}
.lpos-search input:focus{background:var(--lpos-glass-2,rgba(255,255,255,0.055));border-color:color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2,40%),transparent)}
.lpos-search svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);flex:0 0 auto;align-self:center;color:var(--lpos-muted);fill:none!important;stroke:currentColor}
/* media fill (flipbook/3D): title stacked over media, media fills the remaining height */
.lpos-col{display:flex;flex-direction:column;gap:var(--lpos-gap,12px);height:100%;min-height:0;overflow:hidden}
.lpos-col__media{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.lpos-col__media>.lpos-media{width:100%;height:100%!important}
/* middle-center featured: title panel (back + titles + pager) over the video */
.lpos-feat__titles h2{font-size:var(--lpos-title-size,1.5rem)!important;line-height:1.2!important;margin:0!important;color:var(--lpos-ink)!important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* JD 2026-08-01: the 4-digit pager reserves real width -- the title stays ONE line and ellipsizes instead of wrapping past the title-bar budget */
/* JD 2026-08-01 review loop: the video is a REAL 16:9 now, not a fill-the-column stretch -- the
body hugs the video's aspect height and the new empty .lpos-feat__spare panel below absorbs
whatever the column has left (flex:1). max-height guard keeps the pair inside the column on
short viewports (video shrinks first, spare can hit 0 without violating the no-clip law). */
/* JD 2026-08-01 (slim-columns pass): the video keeps a TRUE ratio in every width -- when the
column's height is the binding constraint the media goes HEIGHT-driven and centres, instead of
stretching to the column width (which produced a 1.97 box). The text panel below never loses
its content height (flex:0 0 auto there), so copy can't clip; the video absorbs the change. */
/* SPACING AUDIT (JD 2026-08-04, video-top-gap fix): align-items:center here was the root cause of
the "video-top-gap inconsistency" the finalization team could not pin down -- centering the
video vertically inside this flex box means the visible gap ABOVE the video is HALF of whatever
slack exists between the rendered video height and the body's own available height, which
varies with viewport/aspect/panel state (measured 46px in one render, ~9px in another, same
markup). flex-start makes the gap a CONSTANT (this panel's own padding-top, --lpos-space-sm
below), never centering slack -- any leftover vertical room now falls below the video instead
of splitting unevenly above and below it. */
/* JD 2026-08-05 (alignment law): ZERO padding on this chromeless wrapper -- its 8px top pad pushed
the video panel below the midleft/midright panel tops. The cell's token pad is the ONE inset. */
.lpos-feat__body{flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
/* GLASS LOADING BAR (2026-08-04, JD): replaces a plain top-aligned "Loading..." text line with a
futuristic, token-driven, translucent brand-tint glass bar CENTERED on both axes within whatever
panel is loading -- lpos-drawers.js's setCenterMessage() emits this markup for the loading state
only (honest-empty "Nothing here yet"/error text is untouched, different law). The `-loading`
modifier overrides the base rule's flex-start (real video content wants a fixed top offset; the
loader wants to sit dead-center in the panel it's loading into) without touching the base rule
used by every other .lpos-feat__body consumer. Reusable per the panel-component-system law --
`.lpos-c-loading` is a bare, unscoped component class so any loading region (mid-right/mid-left
swap, archive grid, media host) can drop it in identically. */
.lpos-feat__body.-loading{align-items:center}
.lpos-c-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--lpos-space-sm,8px);width:100%;height:100%;min-height:0}
.lpos-c-loading__bar{position:relative;width:min(220px,70%);height:10px;border-radius:var(--lpos-radius-control,8px);overflow:hidden;
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-2,40%),transparent);
}
.lpos-c-loading__fill{position:absolute;inset:0;width:40%;border-radius:inherit;
background:var(--lpos-accent-glass-strong,color-mix(in srgb,var(--lpos-accent) 46%,transparent));
animation:lpos-c-loading-sweep var(--lpos-duration-loading,1.4s) ease-in-out infinite}
@keyframes lpos-c-loading-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.lpos-c-loading__label{margin:0;font:600 var(--lpos-text-sm,14px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);color:var(--lpos-muted,#A8B2C7);letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.lpos-c-loading__fill{animation:none;width:46%;left:27%}}
/* JD 2026-08-01: the video panel is always FULL WIDTH of its container (width-driven 16:9); when
the column is too short for that height the panel caps and the STAGE inside keeps the true
ratio (letterboxing internally) -- liquid at every width, never a stretched video. */
.lpos-feat__body>.lpos-media{width:100%!important;height:auto!important;aspect-ratio:var(--lpm-aspect,16/9);max-height:100%}
.lpos-feat__body>.lpos-media .lpos-media__stagev{width:auto;max-width:100%;max-height:100%;margin-inline:auto} /* width:auto lets the stage's own aspect-ratio hold when the height caps (base rule pins width:100%, which broke the ratio) */
/* JD 2026-08-01 (final): the text panel below the video = TITLE (primary scale) + subtitle +
content copy in one sub-panel (the standalone title bar is gone) -- column layout on the shared
sub-panel chrome; typography mirrors the old feat__titles scales on the shared tokens. */
/* Spacing pattern (JD 2026-08-01 consistency pass): TEXT panels carry the title-panel component
inset (space-md 12px, same as every .lpos-c-title-panel instance), one space-sm (8px) rhythm
step between blocks, and the title/subtitle pair pulled one step tighter (net space-xs 4px) --
the same two-tier rhythm the rest of the console uses. */
/* JD 2026-08-01 (second pass): airier vertical rhythm -- space-md (12px) between blocks, lead
paragraph emphasized in ink (rest stay muted), roomier 1.6 copy line-height. */
/* (task #9, 2026-08-05: ALL .lpos-feat__spare/.lpos-feat__titlerow rules DELETED -- the renderer
deleted those elements in the 2026-08-04 ONE-PANEL pass; the rules were pure dead weight, and
the spare block's reserved padding was part of the "dead pager gap" the spec section 2 flags.
The description copy now lives in .lpos-feat__copy (a real .lpos-c-panel, law-styled). */
/* (2026-08-01, superseded same day: the transport moved into the video's in-player hover bar --
the .lpos-feat__controls panel is gone and the spare panel below reclaims its height.) */
/* pagination component (right of the title).
JD 2026-08-01 review loop: the page-count is now ONE chromed component -- the editable current-page
input plus a muted "/ total" together inside a single control-height glass box (the old treatment
floated "/ total" as bare text beside a chromed input, which read out of place). This base is
SHARED verbatim by the flipbook's pagination bar (media.php only adds its wide flex shares and
pill-edge alignment on top -- same component, different width budget, per JD's one-component law). */
/* CENTER dynamic action button (JD 2026-08-04, relocation item 2) -- fills the title-row slot the
chevron pager used to occupy. FIXED SIZE regardless of label length: min-width (not width), so a
longer future label ("Add to Cart") never resizes the control, only its own text may ellipsis.
Same control-radius-rectangle/no-pills family as .lpos-c-cta__buy. */
/* GLASSMORPHISM LAW (2026-08-04, JD): this is a featured/primary button -- flat accent fill ->
--lpos-accent-glass-strong. Text moves from --lpos-bg (which only worked as dark-on-bright-SOLID)
to --lpos-ink: the glass fill resolves to roughly #321F70 over the app bg for this tenant, where
ink measures 11.9:1 but the accent itself measures under 2:1 (unreadable). Light-on-dark-glass is
the only pairing that satisfies BOTH the glass law and legibility. */
.lpos-c-next-action{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;
min-width:calc(var(--lpos-control-size,46px)*2.2);min-height:var(--lpos-control-size,46px);
display:flex;align-items:center;justify-content:center;
padding:0 var(--lpos-space-md,12px);
background:var(--lpos-accent-glass-strong,color-mix(in srgb,var(--lpos-accent) 46%,transparent));color:var(--lpos-ink,#EAF2FB);
font:700 var(--lpos-text-sm,14px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);
border-radius:var(--lpos-radius-control,8px);border:var(--lpos-border-width,1px) solid var(--lpos-accent);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
transition:box-shadow var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1)),transform var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1))}
.lpos-pagination{flex:0 0 auto;display:flex;align-items:center;gap:var(--lpos-space-sm,8px)}
.lpos-pagination__count{display:inline-flex;align-items:center;justify-content:center;gap:var(--lpos-space-sm,8px);box-sizing:border-box;white-space:nowrap;
height:var(--lpos-control-size,46px);padding:0 var(--lpos-space-sm,8px);
background:var(--lpos-glass-2,rgba(255,255,255,0.055));
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);
color:var(--lpos-muted);font:600 var(--lpos-text-md,17px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif)}
/* JD 2026-08-01: the editable current-page half carries its OWN hairline box inside the count pill
(says "editable" at a glance) -- same inset-control recipe as the search input inside its bar:
control-size minus 2*space-sm tall (30px), radius-sm, accent hairline. Gap between input, "/" and
total is one even space-sm step. */
/* JD 2026-08-01: BOTH number slots sized to hold up to 4 digits -- the input's border-box width
reserves exactly 4ch of content (padding + border added on top), and the total reserves a 4ch
minimum so the box never jumps as counts grow. */
.lpos-pagination__jump{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
width:calc(4ch + 2*var(--lpos-space-xs,4px) + 2*var(--lpos-border-width,1px));text-align:center;padding:0 var(--lpos-space-xs,4px);
height:calc(var(--lpos-control-size,46px) - 2*var(--lpos-space-sm,8px));
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-sm,4px);
color:var(--lpos-ink,#EAF2FB);font:700 var(--lpos-text-md,17px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);cursor:text}
.lpos-pagination__jump:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
.lpos-pagination__sep{color:var(--lpos-muted,#A8B2C7)}
.lpos-pagination__tot{color:var(--lpos-muted,#A8B2C7);font:600 var(--lpos-text-md,17px)/1 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);
display:inline-flex;align-items:center;justify-content:center;min-width:4ch} /* JD 2026-08-01: reserves 4-digit capacity, centered */
/* JD 2026-08-01: the CENTER pager's number holder gets extra width -- panel-pad side padding instead
of the shared space-sm (flipbook keeps the compact base; its width comes from the flex share). */
/* flipbook pagination bar (media.php lpos_dm_flip_glue_js(), `.lpos-pagination.lpos-c-subpanel
.lpos-media__bar--below`) is a KEPT panel (item 2) sitting in a middle-row cell (midleft) --
reverts the base .lpos-c-subpanel's chrome-row 4px/8px padding back to a uniform
var(--lpos-subpanel-pad,6px), same middle-row exception as .lpos-c-subpanel--tabbar above. The
centerfeature pager (bare .lpos-pagination, no .lpos-c-subpanel class) is untouched by this rule. */
.lpos-pagination.lpos-c-subpanel{padding:var(--lpos-subpanel-pad,6px)}
/* switchers (bottom-left assets / bottom-right views): one cluster sub-panel (A8) around real
image thumbnails sized as thumbnails, not icon tiles (A7) -- neutral glass background, not
the accent-tinted --lpos-panel-hover surface color the old grid-icon buttons used. */
.lpos-switch{display:flex;align-items:stretch;justify-content:space-between;gap:var(--lpos-space-sm,8px);flex-wrap:nowrap;width:100%;min-width:0} /* JD 2026-08-01: fixed-ratio thumbs DISTRIBUTE across the panel; the tighter 8px step between TILES (they are one strip, not separate panels) buys each tile more width -> taller at 16:9 */
/* bottom-right view switcher (#5): even gaps (uniform --lpos-gap above), grouped/centered as a
unit rather than pinned to the edge -- matches the uniform icon-btn sizing from #3. */
/* JD 2026-08-01 review loop: the top-right, bottom-right and mid-right button rows DISTRIBUTE their
width like the botleft thumbnails -- the buttons themselves widen to share the full row, glyphs
stay centered (the registry's own justify-content:center). The ComponentStyles registry emits
.lpos-c-icon-btn width:46px with !important, so width:auto!important + higher specificity is
required here (same precedent as the flipbook's navwide pills). Height is untouched (46px). */
/* (Phase 3: dead topright-cluster sizing rule deleted -- wrapper gone from markup.) */
/* batch 18 fix: the botright selector is scoped to the CLUSTER's buttons -- the bare POWER cell
child must keep its fixed 46px square (it was being stretched by the cell-wide selector). */
/* RESPONSIVE AUDIT FIX (CRITICAL): distributed buttons may GROW to share the row but must never
shrink below the control size -- without a floor they degraded to 2-20px (unclickable, under
the WCAG 2.5.8 24px target minimum) on tablet/phone widths in the default open state. */
.lpos-blueprint .lpos-cell--topright .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--botright .lpos-c-icon-btn:not([data-lpos-collapse]),
.lpos-blueprint .lpos-cell--midright .lpos-c-subpanel--tabbar .lpos-c-icon-btn{flex:1 1 auto!important;width:auto!important;min-width:var(--lpos-control-size,46px)!important} /* Phase 3: botright selector re-scoped -- the .lpos-switch wrapper is gone from the markup; :not([data-lpos-collapse]) keeps the corner toggle at its fixed square (the old batch-18 exclusion) */
/* JD 2026-08-01: each thumbnail is its OWN Component Panel (glass + border + subpanel pad), nested
directly in the botleft Display Panel -- the group wrapper carries no chrome (cluster unwrap). */
/* task #11 (JD APPROVED 2026-08-05, EXACT_SPEC section 7): the SHOP thumbnail (.lpos-c-thumb) is
canonical -- the media-switcher tiles now carry the EXACT same constants (square thumb-ratio,
same flex sizing, same pad/chrome/radius/transition). One thumbnail style everywhere; only the
collapsed-rail 46px icon-square override (rail context law) remains distinct. */
.lpos-switch__thumb{all:unset;box-sizing:border-box;position:relative;cursor:pointer;overflow:hidden;
flex:1 1 calc(20% - var(--lpos-space-sm,8px));min-width:64px;max-width:calc(var(--lpos-thumb-h,56px)*1.6);
aspect-ratio:var(--lpos-thumb-ratio,1/1);align-self:center;
display:flex;align-items:center;justify-content:center;
padding:var(--lpos-space-xs,4px);
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-sm);backdrop-filter:var(--lpos-blur-sm);
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);
color:var(--lpos-muted);
transition:border-color var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1)),box-shadow var(--lpos-duration-fast,120ms) var(--lpos-ease-tech,cubic-bezier(0.16, 1, 0.3, 1))}
/* JD: the botleft GROUP wrapper carries no chrome -- each thumbnail is the Component Panel now */
/* JD 2026-08-01 batch 17: the botleft cluster-unchrome rule is retired -- the thumbnails moved to
the MIDLEFT column where their .lpos-c-subpanel--cluster wrapper keeps full panel chrome (JD:
"their own panel", same treatment as the tools bar above the document). */
.lpos-switch__thumb:hover{border-color:var(--lpos-accent);color:var(--lpos-ink);} /* task #11: same hover as the canonical .lpos-c-thumb */
/* JD 2026-08-04: the SELECTED thumb gets the SAME accent ring as the canonical shop thumbnail
(.lpos-c-thumb.is-active) -- lpos-drawers.js sets aria-pressed=true on the active thumb. */
.lpos-switch__thumb[aria-pressed="true"]{border-color:var(--lpos-accent);box-shadow:0 0 0 2px var(--lpos-accent),var(--lpos-accent-glow-sm,0 0 12px rgba(0,212,255,.55))}
/* JD 2026-08-03: the ADD (plus) square rides the right end of the thumb strip at its fixed
control size -- it never joins the thumbs' flexible 16:9 distribution. */
.lpos-switch [data-lpos-switch-add]{flex:0 0 auto;align-self:center}
.lpos-switch__thumb{position:relative} /* anchors the fill below */
.lpos-switch__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; /* JD 2026-08-01 BUG FIX: percentage height cannot resolve against an aspect-ratio-sized box (the rail thumbs rendered a 16px image inside a 26px tile -- "collapsed improperly"); absolute inset fills reliably in every state */
border-radius:calc(var(--lpos-radius-control,8px) - var(--lpos-space-xs,4px))} /* JD: image corners match the thumb panel's inner radius */
.lpos-switch__thumb svg{width:28%;height:28%;max-width:var(--lpos-icon-size-sm,24px);max-height:var(--lpos-icon-size-sm,24px);fill:none!important;stroke:currentColor}
/* JD 2026-08-06 THUMB STRIP STRETCH + TYPE BADGE: thumbs distribute the strip width evenly, the
SAME adaptive-stretch law as .lpos-drawer__tabs .lpos-c-icon-btn and .lpos-feat__toolbar
.lpos-c-icon-btn -- height keeps coming from the base rule's aspect-ratio above, untouched here. */
.lpos-blueprint .lpos-switch .lpos-switch__thumb{
/* JD 2026-08-06: the canonical thumb's 1/1 ratio AND its 1.6x max-width cap held 3 thumbs at
90px in a 380px strip -- in the STRIP the thumbs distribute the full width (rail squares
keep their ratio via their own re-assert). Height keeps the control-derived scale. */
aspect-ratio:auto!important;max-width:none!important;
height:calc(2*var(--lpos-control-size,46px) - 2*var(--lpos-border-width,1px));
flex:1 1 0!important;width:auto!important;min-width:var(--lpos-control-size,46px);
position:relative}
/* rail-scoped re-assert: the collapsed rail keeps its fixed 46px square, never joins the stretch */
.lpos-blueprint .lpos-rail .lpos-switch__thumb{
flex:0 0 auto!important;width:var(--lpos-control-size,46px)!important;
min-width:var(--lpos-control-size,46px)!important}
/* the type badge (PHP-rendered after the optional preview
img): ONE-PANEL chrome, centered over the thumb, clicks pass through to the button beneath. */
.lpos-blueprint .lpos-switch__thumb-badge{
position:absolute;inset:0;margin:auto;pointer-events:none;
/* JD 2026-08-06: FULL control-size chip -- at 30px the 16px radius token read as a circle,
off-system; at 46px it is the standard rounded-square icon-button silhouette. */
width:var(--lpos-control-size,46px);
height:var(--lpos-control-size,46px);
display:inline-flex;align-items:center;justify-content:center;
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 color-mix(in srgb,var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-2,40%),transparent);
border-radius:var(--lpos-radius-panel,10px);color:var(--lpos-muted)}
.lpos-blueprint .lpos-switch__thumb-badge svg{
width:var(--lpos-icon-size-sm,24px);height:var(--lpos-icon-size-sm,24px);fill:none!important;stroke:currentColor}
/* bottom-center detached controls: [lpos_video_controls] (media.php, not editable here) renders a
bare `.lpos-media__bar[data-extbar]` with no panel chrome of its own (its base rule in media.php
is transparent/borderless by design, since it normally lives INSIDE an already-panelled player).
Reconciliation pass (item 1): JD wants this rendered WITHOUT a glass-box group wrapper -- the
detached control buttons (their own chrome comes from media.php's `.lpos-media__bar button/a`
rule, including the extbar --lpm-* token-bridge fix, both untouched) sit directly in the botcenter
Display Panel. No panel box added here any more; the cell's own var(--lpos-space-sm,8px) vertical
inset (see the cell padding block above) is this bar's only inset -- nothing of its own stacked
on top, so it never touches the cell's border either. */
.lpos-blueprint .lpos-cell--botcenter .lpos-media__bar{
background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none;
box-shadow:none;border:0!important;border-radius:0!important;padding:0!important;
}
.lpos-media__extbar-wrap{width:100%;display:flex;justify-content:center}
.lpos-media__extbar{width:100%;justify-content:center} /* sweep fix: transport group CENTERED in the botcenter panel (flex-start left it hugging the edge) */
/* (JD 2026-08-01 final: the detached-extbar distributed-transport rules that lived here are
RETIRED with the wide-pill styling -- transport renders as standard 46px icon buttons inside
the video facebar now; any legacy [lpos_video_controls] falls back to standard buttons.) */
/* top-right action cluster + bottom-right view switcher (item 1): JD wants both rendered WITHOUT a
glass-box group wrapper -- the individual 46px .lpos-c-icon-btn / .lpos-switch__thumb chrome
(ComponentStyles.php icon-btn key, and .lpos-switch__thumb above) is untouched; only the
.lpos-c-subpanel--cluster box these two specific clusters sit inside goes transparent. Scoped by
cell so the identical `.lpos-c-subpanel--cluster` class used by the (unaffected, still-panelled)
midleft thumbnail switcher (batch 17 home) and the midcenter tabbar keeps its normal chrome. Cell padding (space-sm, above)
is this cluster's only inset -- 0 of its own, matching the botcenter bar treatment above. */
/* 2026-08-01: JD wants both clusters DISTRIBUTED across the panel's full width, not a centered
fixed-gap group -- width:100% (topright's cluster was flex:0 0 auto/content-sized via the base
.lpos-c-subpanel--cluster rule; botright's is already 100% via .lpos-switch, re-declared here so
both read identically) + justify-content:space-evenly (equal space at both edges AND between every
button, reading as "spread across the panel" rather than "space-between" pinning the end buttons
flush to the cell's padding edge). Specificity here (3 classes) beats both the base
.lpos-c-subpanel--cluster flex:0 0 auto/center-via-parent and botright's own .lpos-switch--icons
center, so one rule governs the distribution for both panels identically. */
/* (Phase 3: the topright/botright cluster ghost+distribution block is deleted -- those wrapper divs
no longer exist in the markup; the buttons sit directly in their bar cells and the grow rule above
distributes them.) */
/* icon buttons inside any cell/sub-panel: fixed square + outline svg (guard global svg{fill}).
`.lpos-media` is included alongside `.lpos-cell` so the flipbook's Pagination component (media.php
DCS-flip2, emits the exact same .lpos-c-icon-btn class) is governed by this ONE rule too -- no
second copy of the icon-button recipe anywhere else, per the atomic-component law. */
/* The four Component roots get the SAME button, one rule, further down -- see COMPONENT ICON
BUTTON at the end of this file (JD 2026-08-10: "make all four match"). */
.lpos-cell .lpos-c-icon-btn,.lpos-media .lpos-c-icon-btn{cursor:pointer;color:var(--lpos-muted);width:var(--lpos-control-size,46px)!important;height:var(--lpos-control-size,46px)!important;flex:0 0 auto!important;padding:0!important;transition:color var(--lpos-duration-fast,120ms),background var(--lpos-duration-fast,120ms),border-color var(--lpos-duration-fast,120ms),box-shadow var(--lpos-duration-fast,120ms)}
/* JD bug-batch 2026-08-01 (bottom-right icon buttons, uneven vertical centering): display:block on
the glyph -- an SVG's UA-default display is inline, which reserves a few px of baseline
"phantom whitespace" below it inside any non-flex ancestor; that asymmetric slack is a common
cause of "more space below than above" for an icon that otherwise looks centered. Belt-and-braces
alongside the cell's own align-items:center (above). */
.lpos-cell .lpos-c-icon-btn svg,.lpos-media .lpos-c-icon-btn svg{width:var(--lpos-icon-size,26px)!important;height:var(--lpos-icon-size,26px)!important;flex:0 0 auto!important;display:block;color:inherit;fill:none!important;stroke:currentColor}
.lpos-cell .lpos-c-icon-btn:hover,.lpos-media .lpos-c-icon-btn:hover{color:var(--lpos-ink);border-color:var(--lpos-accent);background:var(--lpos-accent-soft,color-mix(in srgb, var(--lpos-accent) 10%, transparent))}
.lpos-cell .lpos-c-icon-btn:active,.lpos-media .lpos-c-icon-btn:active{}
.lpos-cell .lpos-c-icon-btn:focus-visible,.lpos-media .lpos-c-icon-btn:focus-visible,.lpos-blueprint .lpos-search input:focus-visible,.lpos-blueprint .lpos-switch__thumb:focus-visible{outline:none;box-shadow:var(--lpos-focus-ring,0 0 0 2px rgba(0,212,255,.9),0 0 12px rgba(0,212,255,.6))}
/* COLLAPSED-BUTTON REVEAL, Layer A (JD 2026-08-03, COLLAPSED_BUTTON_CONTENT_DISPLAY_SPEC §4.1) --
ports the proven dashboard-layout.css:239-262 tooltip idea into THIS stylesheet (the console
blueprint never loaded that file) and closes its keyboard gap by also firing on :focus-visible,
not just :hover. Reads the SAME string icon_btn()/tabbar_buttons() already put in aria-label --
zero new PHP data, just the new `title="..."` attribute those two builders now also emit.
Every var() fallback below is that token's canon :where(:root) value (token law). */
.lpos-c-icon-btn[title]{position:relative}
.lpos-c-icon-btn[title]:hover::after,
.lpos-c-icon-btn[title]:focus-visible::after{
content:attr(title);position:absolute;top:50%;transform:translateY(-50%);left:calc(100% + var(--lpos-space-sm,8px));
padding:var(--lpos-space-xs,4px) var(--lpos-space-sm,8px);
font:600 11px/1.2 var(--lpos-font-ui,'Inter', ui-sans-serif, system-ui, sans-serif);white-space:nowrap;color:var(--lpos-ink,#EAF2FB);
background:color-mix(in srgb,var(--lpos-bg,#0A0E17) 97%,transparent);
-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-accent,#00D4FF) var(--lpos-border-alpha-3,55%),transparent);
border-radius:var(--lpos-radius-sm,4px);
z-index:var(--lpos-z-drawer,9000);pointer-events:none}
/* Right-side rail clusters (botright + its collapsed twins) flip the tooltip to the LEFT of the
icon so it never runs off the right edge of the viewport. */
.lpos-cell--botright .lpos-c-icon-btn[title]:hover::after,
.lpos-cell--botright .lpos-c-icon-btn[title]:focus-visible::after,
.lpos-rail-topset .lpos-c-icon-btn[title]:hover::after,.lpos-rail-topset .lpos-c-icon-btn[title]:focus-visible::after,
.lpos-rail-botset .lpos-c-icon-btn[title]:hover::after,.lpos-rail-botset .lpos-c-icon-btn[title]:focus-visible::after{
left:auto;right:calc(100% + var(--lpos-space-sm,8px))}
@media (prefers-reduced-motion:reduce){.lpos-c-icon-btn[title]::after{transition:none}}
/* account button (A4): the real avatar photo fills the same square icon-btn shape; the
person-glyph SVG fallback is plain markup from PHP when logged out / no avatar, so no CSS
branch is needed here -- just size+round whichever child (img or svg) is actually present. */
.lpos-c-icon-btn--avatar{padding:0!important;overflow:hidden!important}
/* JD 2026-08-01: the profile image COVERS the whole button like the botleft thumbnails cover their
tiles -- full-bleed inside the button chrome, corners matched to the button's inner radius
(same recipe as .lpos-switch__thumb img).
JD 2026-08-05 FIX: img radius = inherit (was a smaller control-radius, so the square corners poked
past the button's 16px panel radius) + overflow:hidden on the button clips it cleanly in every state. */
.lpos-c-icon-btn--avatar .lpos-c-avatar{width:100%!important;height:100%!important;object-fit:cover;display:block;
border-radius:inherit}
/* near-subliminal grid overlay (sheet: grid-overlay) -- behind the row content, never intercepts clicks */
.lpos-blueprint--console,.lpos-blueprint--magick8{position:relative;isolation:isolate} /* JD 2026-08-03: stacking context so the z-index:-1 bg-video + grid layers paint ABOVE the console's own background instead of behind it; magick8 joined 2026-08-06 (same requirement, no rows to stack above) */
/* ---- JD 2026-08-01: RIGHT-COLUMN COLLAPSE (crosshair toggle, lpos-drawers.js) ----
Closed: the whole layout reflows to TWO content columns + a narrow 64px rail. The midright panel
hides; left + center absorb the freed width (1:2.08 keeps the open-state column ratio); the
top-right buttons become a VERTICAL list pinned down the viewport's right edge (absolute rail
anchored to the console root's padding box), vertically inline with the crosshair, which stays
alone in the bottom-right corner as the reopen toggle. */
/* JD 2026-08-01: the TOP row is the exception -- the topleft panel HOLDS its open width (the
row-emitted --lpos-leftcol-w, derived from the shape's fr ratio) and only the tab bar (center)
absorbs the freed space; mirrored for the right when the LEFT collapses. Both-collapsed row1
overrides both sides to rails (declared after, higher specificity). */
/* JD 2026-08-01 (gap fix): with the right rail living only in the MIDDLE band, the top + bottom
rows drop the 64px third track entirely -- the top-center (and bottom search row) run to the
right edge with no orphan gap. The topright region display:nones (last region, placement-safe);
the botright region can NOT display:none (it hosts the rail cluster) so it leaves the flow as a
full-size transparent anchor instead (rail offsets unchanged, clicks pass through elsewhere). */
/* JD 2026-08-01 (rail-to-top): row1 KEEPS its 64px right track -- the topcenter bar must NOT run
to the right edge; the rail (absolutely positioned, top:gap below) rises through that track so
the collapsed right column reads top-to-bottom like the left one. */
/* JD 2026-08-05 (right-collapsed batch item 1): the HEADER stretches all the way across -- row1
drops its empty 64px third track; the right rail starts below the header, mirroring the left. */
/* batch 19 + nav-to-rail: left-collapsed row1 = [64px menu][TAB BAR to the edge]; the row rule and the topright hide live in the nav-to-rail block below. */
/* JD 2026-08-01 (nav-to-rail law): whenever EITHER side collapses, the right column's action
icons leave the header and join the right icon stack (the rail twins already carry them); the
topright cell hides, and the TAB BAR (back/dashboard/add) stays in the header in every view.
Left-collapsed reads: [64px menu][TAB BAR to the rail][64px right rail from the top]; the whole
right side becomes ONE vertical stack, and the composer row owns the full bottom between the
two corner toggles. */
/* JD 2026-08-09 rev 5 (CORNER SHUFFLE 2): the topright region is BACK -- it is the top-right
64px corner box and holds ONLY the profile image button (guest: the lock). Placement lives in
the stage-A grid block below. */
/* (COLLAPSE REBUILD JD 2026-08-05: the absolute botright overlay rail + the midright padding hack
are deleted -- the collapsed bar is a real .lpos-rail grid child in its own 64px lane, so content
never underlaps it and needs no compensating padding.) */
/* (COLLAPSE REBUILD JD 2026-08-05: dead topright-cluster rules deleted -- the region is
display:none in this state, so they never painted.) */
/* the hidden midleft column's in-flow controls (flip tools bar + pager) must not linger as
crushed slivers behind the rail -- the region is visibility:hidden, this makes it explicit. */
.lpos-blueprint--console.-left-collapsed .lpos-cell--midleft .lpos-media__bar--above,
.lpos-blueprint--console.-left-collapsed .lpos-cell--midleft .lpos-media__bar--below,
.lpos-blueprint--console.-left-collapsed .lpos-cell--midleft .lpos-media__title{display:none}
/* Phase D 2026-08-09: the both-collapsed row templates and the whole right-collapsed:not(.-left-
collapsed) rail/midleft block are deleted -- .-right-collapsed can never be applied by any code
path (verified), so every rule requiring it (alone or combined with .-left-collapsed) was dead.
The full-height rails now live in the BLUEPRINT SHIFT stage A/B blocks further down. */
/* pressed/ACTIVE state -- accent-tint GLASS like every other .-on control. Generalized: collapse
toggles when engaged AND view-switch buttons marked as the current view (JD: the crosshair
lights while the 3D viewer is what's showing).
GLASSMORPHISM LAW (2026-08-04, JD): was a flat accent fill with dark ink-inverted text (that
pairing only works on a bright SOLID fill); swapped to --lpos-accent-glass-strong with regular
--lpos-ink text/icon color, since the surface now reads as a dark-tinted glass over the app bg,
not a bright solid block. */
/* ONE PANEL, zero exceptions (JD 2026-08-04): the active tab is the SAME identical panel -- only its
icon/text Asset color changes to show active, never the panel chrome. */
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"]{color:var(--lpos-ink,#EAF2FB)!important}
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"] svg{color:var(--lpos-ink,#EAF2FB)}
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"] .lpos-c-icon-btn__text{color:var(--lpos-ink,#EAF2FB)} /* JD 2026-08-02: active tab TEXT matches the icon's active color */
/* ---- JD 2026-08-01: LEFT-COLUMN COLLAPSE (chevrons toggle by the thumbnails) ----
Mirror of the right collapse with two differences: the THUMBNAILS become the vertical stack,
and their rail aligns with the CENTER MIDDLE CONTENT (anchored to the middle row's band, not
the full viewport); the top-left reduces to just the menu button. Center + right absorb the
freed width (2.08:1 keeps the open-state ratio). */
/* visibility (NOT display): the region must keep occupying grid column 1, or auto-placement
shifts midcenter into the 64px rail track (the bug the first pass shipped). */
.lpos-blueprint--console.-left-collapsed .lpos-blueprint__region--midleft{visibility:hidden}
.lpos-blueprint--console.-left-collapsed .lpos-cell--topleft .lpos-c-select{display:none}
/* JD 2026-08-01 batch 17 (+ follow-up): the thumbnails moved into the MIDLEFT column, but on
left-collapse they STILL become the vertical rail beside the middle band (JD). The midleft
region stays visibility:hidden; the thumbs panel alone overrides back to visible and pulls out
as the absolute rail (same facebar-recipe box the old botleft rail used, anchored to the
console root -- the cell's backdrop-filter must drop, or it becomes the containing block). The
botleft cell mirrors the right side's CORNER BOX: only the reopen toggle stays visible in the
64px track; the avatar + empty slot panel hide (display -- the row is flex, placement-safe). */
/* ==== COLLAPSE REBUILD (JD 2026-08-05) ====
The collapsed side bars are REAL grid children of the middle row (BlueprintRenderer::
console_rails_html) -- standalone vertical Display bars in their own 64px lane, OUTSIDE the
content panels. No position:absolute, no overlays, no hidden twins, no display:contents.
Visibility per state: left bar in -left-collapsed, right bar in -right-collapsed, BOTH bars
in both-collapsed (JD law: both bars stay visible with their icons).
Chrome comes from the ONE-PANEL law block (the .lpos-rail selector is in that list) -- byte-
identical to every other panel; this block owns layout only. */
/* placement law: the rails carry DEFINITE grid positions, and the CSS grid placement algorithm
seats definite items before auto-flow -- so the three content regions must ALSO be pinned to
their columns or they shift one lane right the moment a rail displays (verified live bug). */
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(2)>.lpos-blueprint__region:nth-child(1){grid-column:1;grid-row:1}
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(2)>.lpos-blueprint__region:nth-child(2){grid-column:2;grid-row:1}
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(2)>.lpos-blueprint__region:nth-child(3){grid-column:3;grid-row:1}
.lpos-rail{display:none;min-height:0;grid-row:1;
flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;
gap:var(--lpos-gap,12px);
padding:var(--lpos-subpanel-pad,6px)!important;
padding-top:var(--lpos-gap,12px)!important} /* first tile sits one inter-item gap from the top (JD 2026-08-03 rhythm rule) */
.lpos-rail--left{grid-column:1} /* foot group (compass + avatar) lives IN the rail -- no reserved zone needed */
.lpos-rail--right{grid-column:3}
.lpos-blueprint--console.-left-collapsed .lpos-rail--left{display:flex}
/* nav-to-rail law (kept, deliberate JD asymmetry): LEFT-collapse also surfaces the right icon bar
(the topright header set hides) -- row2 gains a 4th 64px lane for it so it still sits OUTSIDE
the open midright content, never over it. */
/* JD 2026-08-05 ratio law: LEFT collapsed -> center (primary) 2/3, right column 1/3; bars untouched. */
.lpos-blueprint--console.-left-collapsed:not(.-right-collapsed) .lpos-rail--right{display:flex;grid-column:4}
/* rail controls: every item is the standard 46px component square; thumbs drop the 16:9 open-strip
ratio inside the rail (JD 2026-08-01 law). */
.lpos-rail .lpos-c-icon-btn{flex:0 0 auto!important;width:var(--lpos-control-size,46px)!important;height:var(--lpos-control-size,46px)!important;padding:0!important;cursor:pointer;color:var(--lpos-muted)}
.lpos-rail .lpos-c-icon-btn svg{width:var(--lpos-icon-size,26px)!important;height:var(--lpos-icon-size,26px)!important;flex:0 0 auto!important;display:block;color:inherit;fill:none!important;stroke:currentColor}
.lpos-rail .lpos-c-icon-btn:hover{color:var(--lpos-ink)}
.lpos-rail .lpos-switch__thumb{flex:0 0 auto;width:var(--lpos-control-size,46px);height:var(--lpos-control-size,46px);min-width:0;max-width:none;aspect-ratio:auto} /* JD 2026-08-05 fix: min-width:0 -- the canonical thumb's 64px floor was overriding the 46px rail square, bleeding the tile into the bar's token padding */
/* the rail hamburger shows ONLY in both-collapsed (the top row -- which owns the menu button --
is display:none there); every other state keeps the single top-bar copy. */
.lpos-rail .lpos-c-icon-btn[data-lpos-railmenu]{display:none!important}
/* (JD 2026-08-05 both-collapsed rework: the rail hamburger reveal is deleted -- the top row's own
menu box is back in both-collapsed, so the single header copy is the only one everywhere.) */
/* ==== /COLLAPSE REBUILD ==== */
.lpos-blueprint--console.-left-collapsed .lpos-cell--botleft{justify-content:center}
.lpos-blueprint--console.-left-collapsed .lpos-cell--botleft .lpos-c-icon-btn[data-lpos-collapse]{flex:0 0 auto!important;width:var(--lpos-control-size,46px)!important}
/* JD 2026-08-01 follow-up: in the collapsed rail the botleft AVATAR and the (button-look) BLANK
slot pull out of the row and pin to the BOTTOM of the middle band, directly above the corner-box
toggle -- visual column bottom-up: toggle (row3 box), profile, blank. Both anchor to the console
root (the cell's backdrop-filter drops -- containing-block law); left offset centers the 46px
squares on the 64px rail track. display + width need !important vs the registry emissions. */
/* COLLAPSE REBUILD (JD 2026-08-05): while the left column is collapsed the botleft cell keeps ONLY
the corner reopen toggle -- the avatar/XP-slot/compass copies hide here (display, row is flex,
placement-safe); the LEFT RAIL's own foot group (compass + avatar, margin-top:auto) is the visible
pair, directly above the corner box. No absolute pulls, no overlay anchors. */
/* ONE-STATE 2026-08-09: the old collapsed-state hides are retired -- the corner box IS the
avatar's (or guest lock's) permanent home now; compass and the XP slot are deleted. */
.lpos-blueprint--console .lpos-cell--botleft{justify-content:center!important;align-items:center!important}
/* GUEST RAIL SIGN-IN retired (JD 2026-08-09 ONE-STATE: the corner LOCK routes to the Login display) */
/* ==== BLUEPRINT SHIFT stage A (JD 2026-08-07, boot/-left-collapsed state ONLY) ====
The resting console becomes ONE grid: side lanes run FULL viewport height (left rail from the
very top, right content column + right rail top to bottom), the header tab bar and the composer
SHORTEN to exactly the content column (shared grid tracks -- the fr mismatch between row grids
is gone), the pager chevrons stay right-aligned inside the shortened tab bar, and the botright
switch cluster becomes the right lane's bottom box. Both-open keeps the legacy row layout until
stage B. Rows go display:contents here, so the old row-level flex/nth-child sizing is inert in
this state!important; regions stay REAL boxes (JS walks to .lpos-blueprint__region). */
.lpos-blueprint--console.-left-collapsed{display:grid!important;
grid-template-columns:var(--lpos-titlebar-h,64px) minmax(0,2fr) minmax(0,1fr) var(--lpos-titlebar-h,64px)!important; /* JD 2026-08-09 RATIO LAW rev 2: right column narrower (2:1) -- the 3:2 render still FELT too wide (his sketch), and 2:1 is the proportion he originally approved */
grid-template-rows:var(--lpos-titlebar-h,64px) minmax(0,1fr) var(--lpos-titlebar-h,64px)!important}
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row{display:contents!important}
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--topleft{grid-column:1!important;grid-row:1!important} /* JD rev 4: the MENU button box stays in the top-left corner, collapsed or open */
.lpos-blueprint--console.-left-collapsed .lpos-rail--left [data-lpos-railmenu]{display:none!important} /* topleft box owns the menu again -- no duplicate on the rail */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--topcenter{grid-column:2/4!important;grid-row:1!important} /* JD 2026-08-09 rev 5: the TAB BAR runs ALL the way across (over the right content column) to the top-right corner box */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--topright{grid-column:4!important;grid-row:1!important;display:flex!important} /* JD rev 5: the top-right corner box = the PROFILE image button (guest: lock) */
.lpos-blueprint--console.-left-collapsed .lpos-cell--topright{justify-content:center!important;align-items:center!important}
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--midcenter{grid-column:2!important;grid-row:2!important}
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--midleft{display:none!important} /* the rail owns the left lane; the hidden-box track trick is dead in the flat grid */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--midright{grid-column:3!important;grid-row:2/4!important} /* JD 2026-08-09 rev 5: right CONTENT moves DOWN -- starts below the full-width tab bar, still runs to the very bottom */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--botleft{grid-column:1!important;grid-row:3!important} /* corner reopen toggle stays the lane's bottom box */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--botcenter{grid-column:2!important;grid-row:3!important} /* composer = content width; mic/send land at its right edge */
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row>.lpos-blueprint__region--botright{grid-column:4!important;grid-row:3!important} /* JD rev 2: the PLUS rides the corner box under the right rail -- the exact mirror of botleft's collapse-toggle box (switches stay hidden here in boot; they live on the rail) */
.lpos-blueprint--console.-left-collapsed .lpos-cell--botright{justify-content:center!important;align-items:center!important} /* corner box centers its lone plus, same look as the botleft toggle box */
.lpos-blueprint--console.-left-collapsed .lpos-rail--left{grid-column:1!important;grid-row:2/4!important} /* JD rev 4: the LEFT lane does NOT get the top extension -- rail starts below the header row. JD 2026-08-10: it now runs to the very BOTTOM, the corner chevron box that used to hold row 3 is deleted. */
.lpos-blueprint--console.-left-collapsed .lpos-rail--right{grid-column:4!important;grid-row:2/4!important;display:flex!important;
justify-content:space-between!important} /* JD rev 5: rail starts BELOW the header (the profile corner sits above it). JD 2026-08-10: runs to the very BOTTOM now -- the corner chevron box that held row 3 is deleted. */
/* select-popover lift, flat-grid edition: the row stacking-context trick (rows lifted with
z-index) is inert under display:contents -- lift the CELL that hosts the open menu instead
(cells are stacking contexts already via backdrop-filter!important; z beats z:auto siblings). */
.lpos-blueprint--console.-left-collapsed.-select-open .lpos-cell--topcenter,
.lpos-blueprint--console.-left-collapsed.-select-open .lpos-cell--midcenter{position:relative;z-index:31}
/* ==== /BLUEPRINT SHIFT stage A ==== */
/* BLUEPRINT SHIFT stage B DELETED (JD 2026-08-09 ONE-STATE CONSOLE: the left column never opens, the collapse machine is retired). Dock-exclusivity + 3D-toolbar-above rules relocated below. */
.lpos-cell--midleft .lpos-col:has(.lpos-col__slot.-active .lpos-media.-model)>.lpos-col__tools{order:0} /* JD 2026-08-09: 3D Object Viewer toolbars sit ABOVE the viewer (documents/images keep tools below) */
.lpos-blueprint .lpos-media.-model>.lpos-media__bar{order:-1}
.lpos-cell--midright .lpos-media.-model>.lpos-media__bar,
.lpos-cell--midright .lpos-media>.lpos-media__bar--above{order:99}
.lpos-cell--midright .lpos-c-title-panel.-tools{order:98}
.lpos-cell--midright .lpos-c-title-panel:not(.-tools):not(.lpos-c-title-panel--display),
.lpos-cell--midright .lpos-media__title{display:none!important} /* the DISPLAY title panel (JD 2026-08-10 move: title + caption lead this column now) is exempt from the no-titles-in-the-right-column law -- it IS the Display's title, not a component's */
/* DISPLAY TITLE PANEL (JD 2026-08-10): first panel of the right column, above the secondary
content; never grows, so the Focus keeps its space. */
.lpos-blueprint .lpos-cell--midright .lpos-c-title-panel--display{flex:0 0 auto;width:100%;box-sizing:border-box;margin-bottom:var(--lpos-gap,12px)}
.lpos-blueprint .lpos-cell--midright .lpos-c-title-panel--display h2{margin:0;font:600 var(--lpos-text-lg,20px)/1.2 var(--lpos-font-display,'Space Grotesk', ui-sans-serif, system-ui, sans-serif);color:var(--lpos-ink,#EAF2FB)}
.lpos-blueprint .lpos-cell--midright .lpos-c-title-panel--display h3{margin:calc(0.25*var(--lpos-gap,12px)) 0 0;font:400 var(--lpos-text-sm,14px)/1.3 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,#A8B2C7)}
.lpos-cell--midright .lpos-c-subpanel--tabbar{display:none!important} /* JD 2026-08-09: the four Focus tabs moved to the LEFT rail; the right column top bar is gone */
/* FEATURED IMAGE RATIO LAW (JD 2026-08-09): every featured-image panel holds a PROPER ratio,
16:9 for landscape art, 3:4 for portrait (data-lpos-orient is stamped by a tiny onload tagger
in lpos-drawers.js; untagged defaults to landscape). Cover-crop, never squash. */
/* cta media (JD rev 4): TRUE 16:9 landscape frame, WIDTH-driven (width is definite, so no
percent-of-auto collapse); the grid's flexible row moved to the TEXT panel, which absorbs
the freed height above the buttons. */
.lpos-blueprint .lpos-c-cta__media{aspect-ratio:16/9;height:auto;min-height:0;overflow:hidden}
.lpos-blueprint .lpos-c-cta__media img{width:100%;height:100%;object-fit:cover}
/* FULL-PANE right-column viewers (JD: no toolbar under the 3D object / PDF viewer): same
deterministic treatment as the buy pane -- pane anchors, bar pinned visible at the foot. */
.lpos-cell--midright .lpos-col__media .lpos-media{position:relative}
.lpos-cell--midright .lpos-col__media .lpos-media .lpos-media__bar{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:auto!important;min-height:0!important;flex-direction:row!important;z-index:2;display:flex!important;
opacity:1!important;transform:none!important;pointer-events:auto!important} /* 2026-08-10 (G2 verify): the engine's auto-hide (.-barin.-idle => opacity:0) left the FULL-PANE viewer's toolbar invisible until hover -- JD's reference shots show it permanently visible under the document/model in this column, so the idle fade is overridden here only. */
.lpos-cell--midright .lpos-col__media .lpos-media.-barin.-idle{cursor:auto} /* and the cursor never disappears over a pane whose controls are always showing */
.lpos-cell--midright .lpos-col__media .lpos-media .lpos-media__stage{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important} /* the page/model mount CENTERS in the pane -- kills the dead band to the right of the PDF (JD) */
/* engines FILL the cta media panel (JD FIX rev 2): viewer stretches, its toolbar rides the
bottom edge (order:99 rules), chrome sheds so the media panel is the ONE panel */
.lpos-blueprint .lpos-c-cta__media .lpos-media{width:100%!important;height:100%!important;display:flex;flex-direction:column;background:transparent!important;border:0!important;padding:0!important}
.lpos-blueprint .lpos-c-cta__media .lpos-media{position:relative}
.lpos-blueprint .lpos-c-cta__media .lpos-media .lpos-media__mv{position:absolute;inset:0;width:100%!important;height:100%!important} /* deterministic fill: flex siblings cannot shrink the viewer */
.lpos-blueprint .lpos-c-cta__media .lpos-media .lpos-media__bar{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:auto!important;min-height:0!important;flex-direction:row!important;z-index:2} /* toolbar pinned to the viewer bottom (JD law), full weight: the engine's own bar layout rules were floating it mid-pane */
.lpos-blueprint .lpos-media-image-wrap[data-lpos-orient="portrait"] .lpos-media__stage{aspect-ratio:3/4}
/* ==== MEDIA ORIENTATION LAW (JD 2026-08-09) ==== EVERY media display component (video, 3D
model, PDF, image) has BOTH a landscape and a portrait view; the panel carries the canonical
ratio for its column: PRIMARY/CENTER = landscape (16:9, two-page spreads); RIGHT column =
portrait (3:4 docs/images/3D, 9:16 video). Engines adapt inside the frame -- the flipbook's
own shape rule flips to single-page in portrait; featured IMAGES keep per-image orientation
via data-lpos-orient. */
.lpos-cell--midright .lpos-col__media .lpos-media{aspect-ratio:3/4;max-height:100%;width:auto;max-width:100%;min-height:0;margin-inline:auto;overflow:hidden} /* portrait frame capped by its track, never starves sibling rows */
.lpos-cell--midright .lpos-col__media .lpos-media.-video{aspect-ratio:9/16} /* JD 2026-08-09: NO title/text panels in the right column, ever -- components render bare (the buy info block is commerce data, not a title panel, and stays) */ /* JD 2026-08-09: ANY right-column component toolbar (incl. the docked pane's toolified title strip) sits at the BOTTOM of its viewer */ /* JD 2026-08-09: in the RIGHT column the media toolbar sits BELOW the secondary content panel; only the LEFT primary keeps 3D tools above */
/* DOCK EXCLUSIVITY (JD 2026-08-09, "notifications opens broken"): while a drawer pane is
docked into the midright column, the column's own view slots and panes HIDE -- the docked
panel replaces the content instead of stacking on top of the always-visible full-height
column. returnRailBoxPane() lifts the class and the previous view comes back. */
.lpos-blueprint--console .lpos-col.-docked>.lpos-col__slot,
.lpos-blueprint--console .lpos-col.-docked>[data-lpos-view]{display:none!important}
.lpos-cell--botleft .lpos-c-icon-btn[hidden]{display:none!important} /* the icon-btn chrome's display:flex!important beats the [hidden] UA rule -- the step-2 submit button leaked visible (caught in v558 verify) */
.lpos-blueprint--console::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:linear-gradient(var(--lpos-grid-line,rgba(0,212,255,.035)) 1px,transparent 1px),
linear-gradient(90deg,var(--lpos-grid-line,rgba(0,212,255,.035)) 1px,transparent 1px);
background-size:42px 42px;
}
/* TENANT BACKGROUND VIDEO LAYER (2026-08-03, parallel theming-fleet contract): PHP
(BlueprintRenderer::render_bg_video_layer()) emits `.lpos-blueprint__bgvideo` as the console
shell's first child when a tenant has a video configured; this plugin owns ONLY the layer's
position/z-index -- same -1 tier as the grid-line ::before above so it paints behind every
normal-flow panel row without needing z-index on the rows themselves (proven pattern, same
file). The actual video/veil VISUAL treatment (grid-line blend, reduced-motion static swap,
--lpos-glass-veil's real tint) is tenant-theme.css's call; the transparent fallback here is a
neutral no-op, not a color decision, so a tenant with no video yet renders identically to
before this change (the existing radial-gradient background on .lpos-blueprint--console itself
just shows through the empty wrapper). */
/* positioning context: .lpos-blueprint--console{position:relative;isolation:isolate} (JD 2026-08-03:
stacking context so the z-index:-1 bg-video + grid layers paint ABOVE the console's own background
instead of behind it) already declared elsewhere in this file -- not redeclared here to avoid a
duplicate-rule smell.
FIX (2026-08-04, Fleet F QA): the comment above used to open a SECOND comment-start token inside this
one, which CSS does not allow -- comments do not nest. The parser closed this whole comment at the
FIRST comment-end token it hit (the one that used to sit mid-sentence above) and then tried to parse
everything after it, up to the trailing comment-end token that used to follow, as a selector. That
garbage selector's error recovery consumed tokens up to the NEXT curly-brace block -- which was the
`.lpos-blueprint__bgvideo` rule below -- silently discarding that entire rule from the parsed
stylesheet (confirmed via a fresh CSSOM parse: the sibling `-media` and `-veil` rules right after it
parsed fine; the bare wrapper rule was simply absent from `document.styleSheets`). Losing that rule
meant the wrapper never got `position:absolute;z-index:-1`; it stayed `position:static` (the CSS
default) with a collapsed 0-height box, and its child `