/* 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 <head> 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: rgba(0,212,255,0.10); /* sheet: accent-soft wash (hover = accent-soft, not a literal surface color) */
  --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-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: 16px;
  --lpos-pad: 20px;
  --lpos-panel-pad: 16px;          /* HUD audit: 14px was off the 8pt scale */
  --lpos-subpanel-pad: 8px;        /* HUD audit: NEW -- one symmetric pad for every sub-panel tier, replaces the 4/8, 4/12, 0 14 mix */
  /* 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;
  --lpos-radius-panel: 10px;       /* sheet: panel-radius */
  --lpos-radius-control: 8px;
  --lpos-radius-sm: 4px;           /* sheet: radius-sm (already matched) */
  --lpos-radius-lg: 16px;          /* sheet: radius-lg -- NEW, additive, no existing consumer */
  --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: rgba(20,30,48,0.60); /* sheet: panel-glass-bg (product tier: 55-60% fill, not the 0.18 cinematic variant) */
  --lpos-glass-video: color-mix(in srgb, var(--lpos-bg) 22%, transparent);
  --lpos-shadow-1: 0 1px 0 rgba(0,0,0,.40), inset 0 1px 0 var(--lpos-glass-spec);
  --lpos-shadow-2: 0 4px 20px rgba(0,0,0,.50), inset 0 1px 0 var(--lpos-glass-spec);
  --lpos-accent-soft: rgba(0,212,255,0.10);   /* sheet: accent-soft -- NEW */
  --lpos-accent-glow-sm: 0 0 12px rgba(0,212,255,.55); /* sheet: glow-sm -- NEW */
  --lpos-accent-glow-lg: 0 0 32px rgba(0,212,255,.35); /* sheet: glow-lg -- NEW */
  --lpos-shadow-glow: var(--lpos-accent-glow-lg); /* legacy consumer name, was literal violet rgba(124,58,237,.30) -- now aliases the new cyan 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-heading-glow: 0 0 20px rgba(0,212,255,0.25); /* sheet: H1/page-title ONLY -- defined but intentionally unapplied (no single page-H1 element in this blueprint architecture; every h2 here is a per-cell title, applying it broadly would violate the "page-title ONLY" restraint) */
  --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-logo-accent-color: var(--lpos-accent);
  --lpos-logo-glow: none;          /* sheet: logo flat in persistent chrome; glow reserved for splash/hero (not this surface) */
  --lpos-blur-sm: blur(14px) saturate(140%);
  --lpos-blur-md: blur(16px) saturate(150%); /* sheet: panel-blur 16px -- mapped onto the tier every .lpos-cell/region panel actually uses */
  --lpos-blur-lg: blur(32px) saturate(160%);
  --lpos-control-size: 46px;
  --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-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-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-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;
  --lpos-scrim-bg: rgba(0, 0, 0, 0.45);
}

/* ---- base text ---- */
.elementor-312,
.elementor-821,
.elementor-312 :where(p, span, h1, h2, h3, h4, h5, h6, a, li, div),
.elementor-821 :where(p, span, h1, h2, h3, h4, h5, h6, a, li, div) {
  color: var(--lpos-ink);
}

/* ---- muted/secondary text ---- */
.elementor-312 .lpos-muted,
.elementor-821 .lpos-muted,
.elementor-312 :where(small, .elementor-icon-list-text small),
.elementor-821 :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). ---- */
.elementor-312 .elementor-icon,
.elementor-312 .elementor-icon i,
.elementor-312 .elementor-icon svg,
.elementor-821 .elementor-icon,
.elementor-821 .elementor-icon i,
.elementor-821 .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. ---- */
.elementor-312 .elementor-element-d39a85b,
.elementor-312 .elementor-element-3f4c388,
.elementor-312 .elementor-element-cba38cb,
.elementor-312 .elementor-element-e999a20,
.elementor-312 .elementor-element-bedfc71,
.elementor-312 .elementor-element-4ceb058,
.elementor-312 .elementor-element-2d45ce8,
.elementor-312 .elementor-element-ac086cb,
.elementor-312 .elementor-element-b9c1f8c {
  background-color: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
}

/* ---- 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. ---- */
.elementor-312 .elementor-element-0ba1f52,
.elementor-312 .elementor-element-62beecb,
.elementor-312 .elementor-element-eb7a024,
.elementor-312 .elementor-element-8d237a6,
.elementor-312 .elementor-element-e29315c,
.elementor-312 .elementor-element-f581e0c,
.elementor-312 .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);
}
.elementor-312 .elementor-element-0ba1f52 .elementor-icon,
.elementor-312 .elementor-element-62beecb .elementor-icon,
.elementor-312 .elementor-element-eb7a024 .elementor-icon,
.elementor-312 .elementor-element-8d237a6 .elementor-icon,
.elementor-312 .elementor-element-e29315c .elementor-icon,
.elementor-312 .elementor-element-f581e0c .elementor-icon,
.elementor-312 .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%;
}
.elementor-312 .elementor-element-0ba1f52 .elementor-icon i,
.elementor-312 .elementor-element-62beecb .elementor-icon i,
.elementor-312 .elementor-element-eb7a024 .elementor-icon i,
.elementor-312 .elementor-element-8d237a6 .elementor-icon i,
.elementor-312 .elementor-element-e29315c .elementor-icon i,
.elementor-312 .elementor-element-f581e0c .elementor-icon i,
.elementor-312 .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). ---- */
.elementor-312 .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-accent) var(--lpos-border-alpha-3, 55%), transparent) !important;
}
.elementor-312 .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;
}
.elementor-312 .elementor-element-b9c1f8c .jet-tabs__control i,
.elementor-312 .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;
}
.elementor-312 .elementor-element-b9c1f8c .jet-tabs__control.active-tab i,
.elementor-312 .elementor-element-b9c1f8c .jet-tabs__control.active-tab svg,
.elementor-312 .elementor-element-b9c1f8c .jet-tabs__control-active i,
.elementor-312 .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. ---- */
.elementor-312 .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);
}
.elementor-312 .elementor-element-be630c3 .jet-tabs__control.active-tab,
.elementor-312 .elementor-element-be630c3 .jet-tabs__control-active {
  color: var(--lpos-ink);
  border-bottom: var(--lpos-border-width-active) solid var(--lpos-accent);
}
.elementor-312 .elementor-element-be630c3 .jet-tabs__content-box,
.elementor-312 .elementor-element-be630c3 .jet-tabs__content {
  background: var(--lpos-glass-1);
  border-radius: var(--lpos-radius-panel);
}
.elementor-312 .elementor-element-2bb9699 {
  color: var(--lpos-ink);
}
.elementor-312 .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. ---- */
.elementor-312 .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. ---- */
.elementor-312 .elementor-element-a5d9d91 {
  position: relative;
}
.elementor-312 .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);
}
.elementor-312 .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 */
.elementor-821 .elementor-element-c83beaa,
.elementor-821 .elementor-element-4b6dbb9,
.elementor-821 .elementor-element-daf2b68,
.elementor-821 .elementor-element-da44d26,
.elementor-821 .elementor-element-6639cae,
.elementor-821 .elementor-element-4f39396 {
  background-color: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
}

/* icon buttons — square box, dead-centered glyph */
.elementor-821 .elementor-element-16f9434,
.elementor-821 .elementor-element-f72569c,
.elementor-821 .elementor-element-cf2cad5,
.elementor-821 .elementor-element-1213239,
.elementor-821 .elementor-element-c5e39cf,
.elementor-821 .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);
}
.elementor-821 .elementor-element-16f9434 .elementor-icon,
.elementor-821 .elementor-element-f72569c .elementor-icon,
.elementor-821 .elementor-element-cf2cad5 .elementor-icon,
.elementor-821 .elementor-element-1213239 .elementor-icon,
.elementor-821 .elementor-element-c5e39cf .elementor-icon,
.elementor-821 .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) */
.elementor-821 .elementor-element-17ff9be {
  position: relative;
}
.elementor-821 .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);
}
.elementor-821 .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. ---- */
.elementor-821 .jet-tabs__control-wrapper {
  background-color: transparent !important;
}
.elementor-821 .jet-tabs__control img {
  width: auto !important;
  height: 34px !important;
  max-width: none !important;
  object-fit: contain;
}
@media (min-width: 1025px) {
  .elementor-821 .elementor-element-c83beaa { width: 24.108% !important; }
  .elementor-821 .elementor-element-4b6dbb9 { width: 50.1% !important; }
  .elementor-821 .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. */
.elementor-821 .elementor-element-7d6d8cc h2,
.elementor-312 .elementor-element-7d6d8cc h2,
.elementor-821 .elementor-element-36a2f1c h2,
.elementor-821 .elementor-element-74668a5 h2 {
  font-size: var(--lpos-title-size, 1.5rem) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.elementor-821 .elementor-element-7d6d8cc h3,
.elementor-312 .elementor-element-7d6d8cc h3,
.elementor-821 .elementor-element-36a2f1c h3,
.elementor-821 .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;
}
.elementor-821 .elementor-element-7d6d8cc,
.elementor-312 .elementor-element-7d6d8cc,
.elementor-821 .elementor-element-36a2f1c,
.elementor-821 .elementor-element-74668a5,
.elementor-821 .elementor-element-dbb1a45,
.elementor-312 .elementor-element-dbb1a45 {
  background: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent) !important;
  border-radius: var(--lpos-radius-panel) !important;
}
.elementor-821 .elementor-element-7d6d8cc,
.elementor-312 .elementor-element-7d6d8cc,
.elementor-821 .elementor-element-36a2f1c,
.elementor-821 .elementor-element-74668a5 { padding: var(--lpos-space-md) var(--lpos-pad) !important; align-content: start !important; }
.elementor-821 .elementor-element-dbb1a45,
.elementor-312 .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. ---- */
.elementor-821 .elementor-element-16f9434,
.elementor-821 .elementor-element-f72569c,
.elementor-821 .elementor-element-cf2cad5,
.elementor-821 .elementor-element-1213239,
.elementor-821 .elementor-element-c5e39cf,
.elementor-821 .elementor-element-a7a881e,
.elementor-821 .elementor-element-bb8e667 .jet-tabs__control,
.elementor-821 .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);
  box-shadow: var(--lpos-shadow-1);
  border: var(--lpos-border-width) solid color-mix(in srgb, 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) */
.elementor-821 .lpos-media {
  background: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-sm);
  backdrop-filter: var(--lpos-blur-sm);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, 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) */
.elementor-821 .elementor-element-75904c8 .jet-tabs__control-wrapper {
  flex-wrap: nowrap !important;
  gap: var(--lpos-gap) !important;
  align-items: stretch !important;
}
.elementor-821 .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;
}
.elementor-821 .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. ---- */
.elementor-821 .elementor-element-16f9434,
.elementor-821 .elementor-element-f72569c,
.elementor-821 .elementor-element-cf2cad5,
.elementor-821 .elementor-element-1213239,
.elementor-821 .elementor-element-c5e39cf,
.elementor-821 .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;
}
.elementor-821 .elementor-element-dbb1a45 { margin-top: var(--lpos-gap) !important; }
.elementor-821 .elementor-element-75904c8 .jet-tabs__control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px !important;
}
.elementor-821 .elementor-element-75904c8 .jet-tabs__control img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}
.elementor-821 .lpos-media__bar button,
.elementor-821 .lpos-media__bar a,
.elementor-312 .lpos-media__bar button,
.elementor-312 .lpos-media__bar a,
.elementor-821 .lpos-media__bar button svg,
.elementor-821 .lpos-media__bar a svg,
.elementor-312 .lpos-media__bar button svg,
.elementor-312 .lpos-media__bar a svg {
  color: var(--lpos-muted) !important;
  stroke: var(--lpos-muted) !important;
}
.elementor-821 .lpos-media__bar button.-on,
.elementor-821 .lpos-media__bar button.-on svg,
.elementor-312 .lpos-media__bar button.-on,
.elementor-312 .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. ---- */
.elementor-312 .lpos-title-panel, .elementor-312 .lpos-c-title-panel,
.elementor-821 .lpos-title-panel, .elementor-821 .lpos-c-title-panel {
  background: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent) !important;
  border-radius: var(--lpos-radius-panel) !important;
  /* JD 2026-08-01: title text bars (center/left/right) get one token step more horizontal breathing
     room -- --lpos-subpanel-pad (8px) -> --lpos-space-md (12px). Vertical padding unchanged. */
  padding: var(--lpos-space-md) var(--lpos-space-md) !important;
}
.elementor-312 .lpos-title-panel h1, .elementor-312 .lpos-title-panel h2, .elementor-312 .lpos-c-title-panel h1, .elementor-312 .lpos-c-title-panel h2,
.elementor-821 .lpos-title-panel h1, .elementor-821 .lpos-title-panel h2, .elementor-821 .lpos-c-title-panel h1, .elementor-821 .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);
}
.elementor-312 .lpos-title-panel h3, .elementor-312 .lpos-title-panel h4, .elementor-312 .lpos-c-title-panel h3, .elementor-312 .lpos-c-title-panel h4,
.elementor-821 .lpos-title-panel h3, .elementor-821 .lpos-title-panel h4, .elementor-821 .lpos-c-title-panel h3, .elementor-821 .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;
}

/* 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. */
.elementor-821 .elementor-element-6f86633{flex-direction:column!important;}
.elementor-821 .elementor-element-6f86633 > *{width:100%!important;}

/* =====================================================================================
   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-color: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
}

/* ---- 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-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-color: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
}

/* 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);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, 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);
  box-shadow: var(--lpos-shadow-1);
  border: var(--lpos-border-width) solid color-mix(in srgb, 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);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, 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. ---- */
.lpos-blueprint .lpos-title-panel,
.lpos-blueprint .lpos-c-title-panel {
  background: var(--lpos-glass-panel) !important;
  -webkit-backdrop-filter: var(--lpos-blur-md);
  backdrop-filter: var(--lpos-blur-md);
  box-shadow: var(--lpos-shadow-2);
  border: var(--lpos-border-width) solid color-mix(in srgb, var(--lpos-accent) var(--lpos-border-alpha-2, 40%), transparent) !important;
  border-radius: var(--lpos-radius-panel) !important;
  /* JD 2026-08-01: title text bars (center/left/right) get one token step more horizontal breathing
     room -- --lpos-subpanel-pad (8px) -> --lpos-space-md (12px). Vertical padding unchanged. */
  padding: var(--lpos-space-md) var(--lpos-space-md) !important;
}
.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;
}

/* 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. ===== */
@media (max-width:1024px){ .lpos-blueprint{grid-template-columns:1fr 1fr!important;} }
@media (max-width:767px){ .lpos-blueprint{grid-template-columns:1fr!important;} }

/* ===== OWNED CONSOLE BARS (blueprint built-in topbar/bottombar panels) ==================
   Token-driven, our own MIT icons, buttons use the lpos-c-icon-btn component from the style
   registry. fill:none guards against a global svg{fill:currentColor} filling the line icons. == */
.lpos-topbar,.lpos-bottombar{display:flex;align-items:center;gap:var(--lpos-gap,16px);
  padding:var(--lpos-space-sm,8px) var(--lpos-pad,20px);
  background:var(--lpos-glass-panel);-webkit-backdrop-filter:var(--lpos-blur-md);backdrop-filter:var(--lpos-blur-md);
  box-shadow:var(--lpos-shadow-2);
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-2,40%),transparent);
  border-radius:var(--lpos-radius-panel,10px);}
.lpos-topbar__left{display:flex;align-items:center;gap:var(--lpos-gap,16px)}
.lpos-topbar__brand{font:700 1.25rem/1 var(--lpos-font-display,inherit);color:var(--lpos-logo-word-color,var(--lpos-ink));letter-spacing:.02em;white-space:nowrap}
.lpos-topbar__search{flex:1 1 auto;display:flex;align-items:center;gap:var(--lpos-space-sm,8px);height:var(--lpos-control-size,46px); /* AUDIT 2026-08-01: bare 8px -> token */
  padding:0 var(--lpos-pad,20px);background:var(--lpos-panel);
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-1,30%),transparent);border-radius:var(--lpos-radius-control,8px)}
.lpos-topbar__search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--lpos-ink);font:500 .95rem/1 var(--lpos-font-ui,inherit)}
.lpos-topbar__search svg{width:var(--lpos-icon-size-xs,20px);height:var(--lpos-icon-size-xs,20px);flex:0 0 auto;color:var(--lpos-muted);fill:none!important;stroke:currentColor}
.lpos-topbar__actions{display:flex;align-items:center;gap:var(--lpos-gap,16px)}
.lpos-bottombar{justify-content:flex-end}
.lpos-topbar .lpos-c-icon-btn,.lpos-bottombar .lpos-c-icon-btn{cursor:pointer;color:var(--lpos-muted);transition:color var(--lpos-duration-fast,120ms),background var(--lpos-duration-fast,120ms),border-color var(--lpos-duration-fast,120ms);
  width:var(--lpos-control-size,46px)!important;height:var(--lpos-control-size,46px)!important;flex:0 0 auto!important;padding:0!important}
/* flex:0 0 auto stops the SVG collapsing to 0 width as a flex item */
.lpos-topbar .lpos-c-icon-btn svg,.lpos-bottombar .lpos-c-icon-btn svg{width:var(--lpos-icon-size,26px)!important;height:var(--lpos-icon-size,26px)!important;flex:0 0 auto!important;color:inherit;fill:none!important;stroke:currentColor}
.lpos-topbar .lpos-c-icon-btn:hover,.lpos-bottombar .lpos-c-icon-btn:hover{color:var(--lpos-ink);border-color:var(--lpos-accent);background:var(--lpos-accent-soft,rgba(0,212,255,.10))}
.lpos-topbar .lpos-c-icon-btn:active,.lpos-bottombar .lpos-c-icon-btn:active{box-shadow:var(--lpos-accent-glow-sm,0 0 12px rgba(0,212,255,.55))}
.lpos-topbar .lpos-c-icon-btn:focus-visible,.lpos-bottombar .lpos-c-icon-btn: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))}
/* owned center panel: title/subtitle stacked over our video player */
.lpos-center{display:flex;flex-direction:column;gap:var(--lpos-gap,16px)}
.lpos-center__video{width:100%}
/* owned left/right columns: title stacked over media, media fills remaining height */
.lpos-col{display:flex;flex-direction:column;gap:var(--lpos-gap,16px);height:100%}
.lpos-col__media{flex:1 1 auto;min-height:0;display:flex}
.lpos-col__media>.lpos-media{width:100%;height:100%!important}

/* ================= 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). ==== */
.lpos-blueprint--console{display:flex;flex-direction:column;gap:var(--lpos-gap,16px);height:100dvh;padding:var(--lpos-gap,16px);box-sizing:border-box;overflow:hidden}
.lpos-blueprint--console>.lpos-blueprint__row{min-height:0;overflow:hidden;align-items:stretch}
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(1),
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(3){flex:0 0 var(--lpos-titlebar-h,64px);height:var(--lpos-titlebar-h,64px)} /* 2026-08-01 review fix: stale 54px fallbacks bumped to the canon-computed 64px (fallback==canon law) */
.lpos-blueprint--console>.lpos-blueprint__row:nth-child(2){flex:1 1 auto}
/* 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. */
.lpos-blueprint .lpos-cell{background:var(--lpos-glass-panel);-webkit-backdrop-filter:var(--lpos-blur-md);backdrop-filter:var(--lpos-blur-md);
  box-shadow:var(--lpos-shadow-2);border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-2,40%),transparent);
  border-radius:var(--lpos-radius-panel,10px);padding:var(--lpos-subpanel-pad,8px);
  display:flex;flex-direction:column;gap:var(--lpos-gap,16px);height:100%;width:100%;min-height:0;min-width:0;box-sizing:border-box;overflow:hidden}
/* 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 switcher/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,16px);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,16px);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 */
.lpos-topcenter-icons{display:none;margin-left:auto;align-items:center;gap:var(--lpos-gap,16px);min-width:0}
/* 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,inherit);color:var(--lpos-ink,#EAF2FB);white-space:nowrap}
.lpos-blueprint .lpos-cell--botcenter{flex-direction:row!important;gap:var(--lpos-gap,16px)} /* 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,16px);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: botleft AND botright are ROWS -- switch cluster + the bare collapse toggle
   INLINE (left: cluster then toggle; right: toggle then cluster, both nearest the center); the
   cluster flexes, the toggle keeps its fixed square (needs !important against the distributed-row
   width rule). */
.lpos-blueprint .lpos-cell--botleft,.lpos-blueprint .lpos-cell--botright{flex-direction:row!important;gap:var(--lpos-gap,16px)}
.lpos-blueprint .lpos-cell--botleft .lpos-switch,.lpos-blueprint .lpos-cell--botright .lpos-switch{flex:1 1 auto;min-width:0;width:auto}
.lpos-blueprint .lpos-cell--botleft>.lpos-c-icon-btn[data-lpos-collapse],
.lpos-blueprint .lpos-cell--botright>.lpos-c-icon-btn[data-lpos-collapse]{flex:0 0 auto!important;width:var(--lpos-control-size,46px)!important}
.lpos-blueprint .lpos-cell--botcenter{align-items:center;justify-content:center;padding:var(--lpos-space-sm,8px)} /* JD 2026-08-01: uniform 8px inset */
.lpos-topbar__brand{font:700 1.25rem/1 var(--lpos-font-display,inherit);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. Lighter/tighter scale than the outer
   .lpos-cell panel (blur-sm/shadow-1 vs blur-md/shadow-2, radius-control vs radius-panel) so
   nesting reads as "component inside panel", not a doubled-up box. ---- */
/* 2026-08-01: border bumped 35% -> 50% accent so a sub-panel visibly reads as its OWN nested box
   against the .lpos-cell it sits inside -- both were using the exact same 35% hairline, so a
   sub-panel had no visible seam from its parent cell (the actual root cause behind "the panel
   system isn't visible" -- every Component GROUP was already wrapped, it just didn't look nested).
   Matches the existing DCS-047 precedent (individual controls already read hotter than their
   parent panel: 45% vs the panel's 35-40%) -- this just extends that same ladder to this tier.
   Reconciliation pass: padding is now 4px vertical / 8px horizontal (was a uniform 8px) -- the
   "panelled components inside chrome rows" half of the row-height contract (see the cell padding
   block above); .lpos-c-subpanel--tabbar overrides back to a uniform subpanel-pad below, since it
   is the one middle-row user of this base class and middle-row sub-panels keep the old symmetric
   inset unchanged. */
.lpos-c-subpanel{background:var(--lpos-glass-panel);-webkit-backdrop-filter:var(--lpos-blur-sm);backdrop-filter:var(--lpos-blur-sm);
  box-shadow:var(--lpos-shadow-1);border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent);
  border-radius:var(--lpos-radius-control,8px);padding:var(--lpos-space-xs,4px) var(--lpos-subpanel-pad,8px);
  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 */
.lpos-c-subpanel--menu{flex:0 0 auto;padding:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 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 <img> inside it. */
.lpos-c-subpanel--logo{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.lpos-c-subpanel--cluster{flex:0 0 auto;gap:var(--lpos-gap,16px)}
/* 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:var(--lpos-space-sm,8px)}
/* 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:var(--lpos-space-xs,4px) var(--lpos-space-sm,8px)}
.lpos-c-select .lpos-topbar__logo-img{height:calc(var(--lpos-control-size,46px) - 2*var(--lpos-space-sm,8px))} /* logo scaled to the trigger's interior */
.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,8px);
  background:var(--lpos-glass-panel,rgba(20,30,48,0.60));-webkit-backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%));backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%));
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent);
  border-radius:var(--lpos-radius-control,8px);
  box-shadow:var(--lpos-shadow-1,0 1px 0 rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,0.10))}
.lpos-c-select__menu[hidden]{display:none}
.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;
  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,inherit)}
.lpos-c-select__option:hover{background:var(--lpos-accent-soft,rgba(0,212,255,0.10))}
.lpos-c-select__option.-selected{background:var(--lpos-glass-2,rgba(255,255,255,.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,8px) -- 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,8px)} /* 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,8px) 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,8px);
  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-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,inherit);
  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,.055));border-color:color-mix(in srgb,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,16px);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__head{display:flex!important;flex-direction:row!important;align-items:center;gap:var(--lpos-gap,16px)}
.lpos-feat__back{flex:0 0 auto}
.lpos-feat__titles{flex:1 1 auto;min-width:0}
.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 */
.lpos-feat__titles 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}
/* 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). */
.lpos-feat__body{flex:0 1 auto;min-height:0;display:flex;overflow:hidden}
.lpos-feat__body>.lpos-media{width:100%;height:auto!important;aspect-ratio:16/9;max-height:100%}
/* 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. */
.lpos-feat__spare{flex:1 1 auto;min-height:0;align-self:stretch;
  flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--lpos-space-md,12px);padding:var(--lpos-space-md,12px);overflow:hidden}
/* JD 2026-08-01: title ROW -- title left; pager, collapse toggle and ellipsis at the right. */
.lpos-feat__titlerow{display:flex;align-items:center;justify-content:space-between;gap:var(--lpos-gap,16px);align-self:stretch;min-width:0}
.lpos-feat__titlerow .lpos-pagination{flex:0 0 auto;margin-left:auto}
.lpos-feat__titlerow .lpos-c-icon-btn{flex:0 0 auto}
/* CINEMATIC mode (JD final: the ELLIPSIS is the one toggle; the chevron toggle is retired) --
   active: the whole text panel folds away into the ellipsis, the VIDEO fills the entire
   middle-center panel, and the ellipsis twin surfaces in the video's top-right floating cluster
   (injected via lpos_dm_video_facetr_extra) inline with dock/fullscreen for the way back. */
.lpos-cell--midcenter.-cinema .lpos-feat__spare{display:none}
.lpos-cell--midcenter.-cinema .lpos-feat__body{flex:1 1 auto}
.lpos-cell--midcenter.-cinema .lpos-feat__body>.lpos-media{height:100%!important;max-height:none;aspect-ratio:auto} /* fill the cell; the stage letterboxes the 16:9 content inside */
/* the facetr twin only exists visually while cinema is ON; the title-row original disappears with
   the text panel, so exactly one ellipsis is ever visible. */
.lpos-cell--midcenter:not(.-cinema) .lpos-media__facetr .lpos-c-icon-btn[data-lpos-cinema]{display:none!important}
.lpos-feat__spare h2{margin:0!important;flex:1 1 auto;min-width:0;font-size:var(--lpos-title-size,1.5rem)!important;line-height:1.2!important;font-weight:600!important;color:var(--lpos-ink,#EAF2FB)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* JD 2026-08-01: hairline DIVIDER under the subtitle separates the title block from the copy --
   glass-rule tier (non-interactive, so white-alpha not accent), one space-sm above it (h3 padding)
   + the column's own space-sm below = a full double-step of breathing around the rule. */
.lpos-feat__spare h3{margin:calc(-1*var(--lpos-space-xs,4px)) 0 0!important;font-size:var(--lpos-subtitle-size,1rem)!important;line-height:1.3!important;font-weight:500!important;color:var(--lpos-muted,#A8B2C7)!important;
  align-self:stretch;padding-bottom:var(--lpos-space-sm,8px);border-bottom:var(--lpos-border-width,1px) solid var(--lpos-glass-rule,rgba(255,255,255,0.10))}
.lpos-feat__spare p{margin:0!important;font:400 var(--lpos-text-sm,14px)/1.6 var(--lpos-font-ui,inherit)!important;color:var(--lpos-muted,#A8B2C7)!important}
.lpos-feat__spare p:first-of-type{color:var(--lpos-ink,#EAF2FB)!important} /* lead line reads in ink, the rest stay muted */
/* (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). */
.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,.055));
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-2,40%),transparent);
  border-radius:var(--lpos-radius-control,8px);
  color:var(--lpos-muted);font:600 var(--lpos-text-md,17px)/1 var(--lpos-font-ui,inherit)}
/* 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-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,inherit);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,inherit);
  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). */
.lpos-feat__head .lpos-pagination__count{padding:0 var(--lpos-panel-pad,16px)}
/* 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,8px), 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,8px)}
/* 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;gap:var(--lpos-gap,16px);flex-wrap:nowrap;width:100%;min-width:0}
/* 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. */
.lpos-switch--icons{justify-content:center}
/* 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). */
.lpos-blueprint .lpos-cell--topright .lpos-c-subpanel--cluster{flex:1 1 auto;width:100%}
.lpos-blueprint .lpos-cell--topright .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--botright .lpos-c-icon-btn,
.lpos-blueprint .lpos-cell--midright .lpos-c-subpanel--tabbar .lpos-c-icon-btn{flex:1 1 0!important;width:auto!important;min-width:0}
/* 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). */
.lpos-switch__thumb{all:unset;box-sizing:border-box;flex:1 1 0;height:var(--lpos-control-size,46px);min-width:0;align-self:center;display:flex;align-items:center;justify-content:center;cursor:pointer;
  /* JD final: thumbs at CONTROL HEIGHT (46px, same as every other button), width shares the row evenly */
  padding:var(--lpos-space-xs,4px);
  background:var(--lpos-glass-panel,rgba(20,30,48,0.60));-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-accent) var(--lpos-border-alpha-2,40%),transparent);border-radius:var(--lpos-radius-control,8px);
  color:var(--lpos-muted);overflow:hidden}
/* JD: the botleft GROUP wrapper carries no chrome -- each thumbnail is the Component Panel now */
.lpos-cell--botleft .lpos-c-subpanel--cluster{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
.lpos-switch__thumb:hover{border-color:var(--lpos-accent);color:var(--lpos-ink)}
.lpos-switch__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  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}
/* 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)
   botleft switcher 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. */
.lpos-blueprint .lpos-cell--topright .lpos-c-subpanel--cluster,
.lpos-blueprint .lpos-cell--botright .lpos-c-subpanel--cluster {
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;border-color:transparent;border-width:0;border-radius:0;padding:0;
  width:100%;flex:1 1 auto;justify-content:space-evenly;
}
/* 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. */
.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,rgba(0,212,255,.10))}
.lpos-cell .lpos-c-icon-btn:active,.lpos-media .lpos-c-icon-btn:active{box-shadow:var(--lpos-accent-glow-sm,0 0 12px rgba(0,212,255,.55))}
.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))}
/* 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}
/* 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). */
.lpos-c-icon-btn--avatar .lpos-c-avatar{width:100%!important;height:100%!important;object-fit:cover;display:block;
  border-radius:calc(var(--lpos-radius-control,8px) - var(--lpos-border-width,1px))}
/* near-subliminal grid overlay (sheet: grid-overlay) -- behind the row content, never intercepts clicks */
.lpos-blueprint--console{position:relative}
/* ---- 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. */
.lpos-blueprint--console.-right-collapsed .lpos-blueprint__row{grid-template-columns:1fr 1fr var(--lpos-titlebar-h,64px)!important} /* JD 2026-08-01: one side collapsed -> remaining columns 50/50 */
/* 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). */
.lpos-blueprint--console.-right-collapsed>.lpos-blueprint__row:nth-child(1){grid-template-columns:var(--lpos-leftcol-w,calc((100% - 2*var(--lpos-gap,16px))*0.25)) 1fr!important}
/* row3 keeps its 64px third track: the reopen toggle lives ALONE in the bottom-right corner box
   (JD -- mirror of the bottom-left toggle), so no orphan gap there; only row1 drops the track. */
.lpos-blueprint--console.-right-collapsed>.lpos-blueprint__row:nth-child(3){grid-template-columns:1fr 1fr var(--lpos-titlebar-h,64px)!important}
.lpos-blueprint--console.-left-collapsed>.lpos-blueprint__row:nth-child(1){grid-template-columns:var(--lpos-titlebar-h,64px) 1fr var(--lpos-rightcol-w,calc((100% - 2*var(--lpos-gap,16px))*0.25))!important}
.lpos-blueprint--console.-left-collapsed.-right-collapsed>.lpos-blueprint__row:nth-child(1){grid-template-columns:var(--lpos-titlebar-h,64px) 1fr!important}
.lpos-blueprint--console.-left-collapsed.-right-collapsed>.lpos-blueprint__row:nth-child(3){grid-template-columns:var(--lpos-titlebar-h,64px) 1fr var(--lpos-titlebar-h,64px)!important}
.lpos-blueprint--console.-right-collapsed .lpos-blueprint__region--midright{display:none}
/* JD 2026-08-01 (rework): collapsed-right no longer builds a viewport rail from the TOP icons --
   those surface right-aligned in the TOP-CENTER bar (the .lpos-topcenter-icons twin); the topright
   cell hides (visibility keeps its grid slot). The right middle-band rail is the BOTTOM-RIGHT
   switch cluster, stacked vertically: crosshair on TOP, collapse toggle at the BOTTOM
   (column-reverse of the DOM order + flex-end packs the group to the top). */
.lpos-blueprint--console.-right-collapsed .lpos-blueprint__region--topright{display:none} /* display (not visibility): row1 is a TWO-column template in this state -- a hidden-but-placed third region would wrap into an implicit row and crush the row's height (the 24px-cells bug) */
.lpos-blueprint--console.-right-collapsed .lpos-cell--topcenter .lpos-topcenter-icons{display:flex}
.lpos-blueprint--console.-right-collapsed .lpos-cell--botright{-webkit-backdrop-filter:none;backdrop-filter:none} /* filter would hijack the rail's containing block (same fix as botleft) */
.lpos-blueprint--console.-right-collapsed .lpos-cell--botright .lpos-switch--icons{
  position:absolute;right:var(--lpos-gap,16px);
  top:calc(var(--lpos-gap,16px) + var(--lpos-titlebar-h,64px) + var(--lpos-gap,16px));
  bottom:calc(var(--lpos-gap,16px) + var(--lpos-titlebar-h,64px) + var(--lpos-gap,16px));
  width:var(--lpos-titlebar-h,64px);z-index:15;
  flex-direction:column-reverse;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:var(--lpos-gap,16px);
  padding:var(--lpos-subpanel-pad,8px)!important;
  background:var(--lpos-glass-panel,rgba(20,30,48,0.60))!important;-webkit-backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%))!important;backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%))!important;
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent)!important;
  border-radius:var(--lpos-radius-control,8px)!important;
  box-shadow:var(--lpos-shadow-1,0 1px 0 rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,0.10))!important}
.lpos-blueprint--console.-right-collapsed .lpos-cell--botright .lpos-c-icon-btn{flex:0 0 auto!important;width:var(--lpos-control-size,46px)!important}
/* pressed/ACTIVE state -- accent fill 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). */
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"]{background:var(--lpos-accent,#00D4FF)!important;color:var(--lpos-ink-inverted,#0A0E17)!important}
.lpos-blueprint .lpos-c-icon-btn[aria-pressed="true"] svg{color:var(--lpos-ink-inverted,#0A0E17)}
/* ---- 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). */
.lpos-blueprint--console.-left-collapsed .lpos-blueprint__row{grid-template-columns:var(--lpos-titlebar-h,64px) 1fr 1fr!important} /* JD 2026-08-01: one side collapsed -> remaining columns 50/50 */
.lpos-blueprint--console.-left-collapsed.-right-collapsed .lpos-blueprint__row{grid-template-columns:var(--lpos-titlebar-h,64px) 1fr var(--lpos-titlebar-h,64px)!important}
/* 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}
/* the botleft cell's backdrop-filter would otherwise become the rail's containing block (filters
   create abs-positioning containing blocks) -- drop it in collapsed mode so the rail anchors to
   the console root; the cell keeps its glass fill, only the blur goes (imperceptible behind one
   46px button). */
.lpos-blueprint--console.-left-collapsed .lpos-cell--botleft{-webkit-backdrop-filter:none;backdrop-filter:none}
/* thumbnail rail: pulled out to align with the MIDDLE row band (top offset = row1 + gap; bottom
   offset = row3 + gap), one control wide, facebar-recipe panel chrome, vertical stack. The visual
   rail column reads: MENU button (row1) -> shrunk THUMBS (this rail) -> TOGGLE (row3), per JD. */
.lpos-blueprint--console.-left-collapsed .lpos-cell--botleft .lpos-switch{
  position:absolute;left:var(--lpos-gap,16px);
  top:calc(var(--lpos-gap,16px) + var(--lpos-titlebar-h,64px) + var(--lpos-gap,16px));
  bottom:calc(var(--lpos-gap,16px) + var(--lpos-titlebar-h,64px) + var(--lpos-gap,16px));
  width:var(--lpos-titlebar-h,64px);z-index:15;
  flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:var(--lpos-gap,16px);
  padding:var(--lpos-subpanel-pad,8px)!important;
  background:var(--lpos-glass-panel,rgba(20,30,48,0.60))!important;-webkit-backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%))!important;backdrop-filter:var(--lpos-blur-sm,blur(14px) saturate(140%))!important;
  border:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent)!important;
  border-radius:var(--lpos-radius-control,8px)!important;
  box-shadow:var(--lpos-shadow-1,0 1px 0 rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,0.10))!important}
.lpos-blueprint--console.-left-collapsed .lpos-cell--botleft .lpos-switch__thumb{flex:0 0 auto;width:100%;height:var(--lpos-control-size,46px)}
.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}
.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;
}
.lpos-switch__thumb:hover{background:var(--lpos-accent-soft,rgba(0,212,255,.10))}

/* ================= OFF-CANVAS DRAWER ENGINE (hamburger + top-icon drawers) =================
   One data-driven engine (assets/js/lpos-drawers.js) drives every `[data-lpos-drawer]` panel
   BlueprintRenderer::render_drawers() emits -- left for the hamburger menu, right for each
   top-icon drawer (command/notifications/security/billing/cart/account), swap-with-slide
   between right-side drawers (both panels transition their own transform at the same tick, so
   the old one visibly slides out while the new one slides in -- no extra JS state needed).
   Full-viewport-height overlay, same glass-panel/blur-md depth tier every `.lpos-cell` uses, 1px
   accent hairline on the INNER edge only, panel radius on the INNER corners only. No scrollbars
   (A10): body is overflow:hidden -- the stand-in heading + sample content stay short by design;
   real content (Phase C, via the `lpos_drawer_content` filter) owns its own pagination per the
   no-scrollbar law. prefers-reduced-motion collapses the slide to instant. ================= */
.lpos-drawer-scrim{
  position:fixed;inset:0;z-index:var(--lpos-z-scrim,8990);
  background:var(--lpos-scrim-bg,rgba(0,0,0,.45));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity var(--lpos-duration-base,220ms) var(--lpos-ease-tech,cubic-bezier(0.16,1,0.3,1));
}
.lpos-drawer-scrim.is-open{opacity:1;pointer-events:auto}
.lpos-drawer{
  position:fixed;top:0;bottom:0;width:var(--lpos-drawer-w,360px);max-width:92vw;z-index:var(--lpos-z-drawer,9000);
  display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;
  background:var(--lpos-glass-panel);-webkit-backdrop-filter:var(--lpos-blur-md);backdrop-filter:var(--lpos-blur-md);
  box-shadow:var(--lpos-shadow-2);
  transition:transform var(--lpos-duration-base,220ms) var(--lpos-ease-tech,cubic-bezier(0.16,1,0.3,1));
}
/* left drawer (menu): hairline + radius live on the RIGHT edge -- the inner edge facing content */
.lpos-drawer--left{
  left:0;transform:translateX(-100%);
  border-right:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent);
  border-radius:0 var(--lpos-radius-panel,10px) var(--lpos-radius-panel,10px) 0;
}
/* right drawers (command/notifications/security/billing/cart/account): hairline + radius on the LEFT edge */
.lpos-drawer--right{
  right:0;transform:translateX(100%);
  border-left:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-3,55%),transparent);
  border-radius:var(--lpos-radius-panel,10px) 0 0 var(--lpos-radius-panel,10px);
}
.lpos-drawer.is-open{transform:translateX(0)}
.lpos-drawer__header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--lpos-space-sm,8px);
  padding:var(--lpos-space-sm,8px) var(--lpos-panel-pad,16px);
  border-bottom:var(--lpos-border-width,1px) solid color-mix(in srgb,var(--lpos-accent) var(--lpos-border-alpha-2,40%),transparent);
}
.lpos-drawer__title{font-size:var(--lpos-title-size-secondary,1.1rem)!important;line-height:1.2!important;margin:0!important;color:var(--lpos-ink)!important}
.lpos-drawer__body{flex:1 1 auto;min-height:0;overflow:hidden;box-sizing:border-box;padding:var(--lpos-panel-pad,16px);display:flex;flex-direction:column;gap:var(--lpos-gap,16px)}
.lpos-drawer__heading{margin:0!important;font-size:var(--lpos-subtitle-size-secondary,.75rem)!important;text-transform:uppercase;letter-spacing:var(--lpos-tracking-label,.08em);color:var(--lpos-muted)!important;font-weight:600!important}
.lpos-drawer__content{flex:1 1 auto;min-height:0;overflow:hidden;color:var(--lpos-muted)}
/* close button + any content-hook icon buttons: same 46px square chrome as every other icon-btn
   in the console, scoped to `.lpos-drawer` since the drawer sits outside `.lpos-cell`/`.lpos-media`. */
.lpos-drawer .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)}
.lpos-drawer .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-drawer .lpos-c-icon-btn:hover{color:var(--lpos-ink);border-color:var(--lpos-accent);background:var(--lpos-accent-soft,rgba(0,212,255,.10))}
.lpos-drawer .lpos-c-icon-btn:active{box-shadow:var(--lpos-accent-glow-sm,0 0 12px rgba(0,212,255,.55))}
.lpos-drawer .lpos-c-icon-btn: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))}
@media (prefers-reduced-motion: reduce){
  .lpos-drawer,.lpos-drawer-scrim{transition-duration:0ms!important}
}