/* XM 4 — application shell.
   <body.xm4> > #wrapper is a CSS grid: columns [rail | page], rows [header | content].
   #header is position:sticky (not fixed), so every other sticky bar on a page stacks under it:
   shell.js measures .page-head / .xmStickyTop bars in DOM order, writes each bar's `top` and
   publishes the total as --xm4-sticky-stack (use it for table headers, side panels, etc.).
   Legacy XM ids/classes (#header, #nav, .slider, .main_nav, .page-head, #main, .navbar_category,
   .xmStickyTop, .xm-drop-box, .control_panel_slider …) are kept for shared scripts and modules. */
/* MR/Claude 10/20/2026: WCAG 1.4.3 / 1.4.11 (the admin "Check this page" report). --xm4-muted was #64748b, 4.2-4.4:1 on the
   page, soft and tint backgrounds (breadcrumbs, footer, the Ask shortcut, form suffixes failed); #586477 is 5.3:1 or more on every
   light surface. --xm4-faint was #94a3b8 (2.3-2.6:1): it is for icons, borders and other non-text marks only, now #7a889d (3.2:1
   or more); text that used it (rail headings, drawer heading, placeholders, menu captions) uses --xm4-muted instead. */
:root,[data-bs-theme="light"] {
  --xm4-bg:#f5f7fb; --xm4-surface:#ffffff; --xm4-soft:#f1f4f9; --xm4-text:#0f172a; --xm4-ink-2:#334155;
  --xm4-muted:#586477; --xm4-faint:#7a889d; --xm4-line:#e2e8f0; --xm4-line-2:#eef2f7;
  --xm4-accent:#2563eb; --xm4-accent-dark:#1d4ed8; --xm4-tint:#eaf1ff; --xm4-danger:#dc2626; --xm4-success:#16a34a; --xm4-warning:#d97706;
  --xm4-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -16px rgba(15,23,42,.25);
  --xm4-shadow-lg:0 24px 60px -20px rgba(15,23,42,.35);
  --xm4-header:60px; --xm4-page-head:52px; --xm4-rail:256px; --xm4-rail-icons:74px; --xm4-bottom:0px; --xm4-gutter:24px; --xm4-content-max:1600px;
  --xm4-radius:14px; --xm4-radius-sm:10px;
  --bs-body-font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-font-size:.875rem; --bs-body-color:var(--xm4-text); --bs-body-bg:var(--xm4-bg); --bs-border-color:var(--xm4-line);
  --bs-primary:#2563eb; --bs-primary-rgb:37,99,235; --bs-link-color:var(--xm4-accent); --bs-link-hover-color:var(--xm4-accent-dark);
}
[data-bs-theme="dark"] {
  --xm4-bg:#0d1422; --xm4-surface:#141e2e; --xm4-soft:#1b293d; --xm4-text:#e7edf7; --xm4-ink-2:#c3cfe0;
  --xm4-muted:#a4b2c7; --xm4-faint:#6f7f98; --xm4-line:#2b3a50; --xm4-line-2:#233043;
  --xm4-accent:#8ab4ff; --xm4-accent-dark:#6f9dff; --xm4-tint:#1c3153; --xm4-danger:#f87171; --xm4-success:#4ade80; --xm4-warning:#fbbf24;
  --xm4-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6); --xm4-shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --bs-body-color:var(--xm4-text); --bs-body-bg:var(--xm4-bg); --bs-border-color:var(--xm4-line); --bs-link-color:var(--xm4-accent); --bs-link-hover-color:var(--xm4-accent-dark);
}
html {scroll-padding-top:calc(var(--xm4-sticky-stack,var(--xm4-header)) + 16px);}
body.xm4 {margin:0; padding:0 0 var(--xm4-bottom); background:var(--xm4-bg); color:var(--xm4-text); font:400 var(--bs-body-font-size)/1.5 var(--bs-body-font-family); -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;}
.xm4 *, .xm4 *::before, .xm4 *::after {box-sizing:border-box;}
.xm4 [hidden] {display:none!important;}
/* The default link colour is written with :where() so it carries no specificity beyond the element: a module (or
   Bootstrap) that styles an <a> as a button sets its colour with a single class, and a plain `.xm4 a` selector would
   outrank that and paint every anchor-button's label accent blue - invisible on a blue button, wrong on any coloured
   one. Ordinary links still get the accent, and the shell's own nested link rules are unaffected. */
:where(.xm4) a {color:var(--xm4-accent); text-decoration:none;}
:where(.xm4) a:where(:hover) {color:var(--xm4-accent-dark);}
.xm4 a:focus {box-shadow:none;}
.xm4 a:focus:not(:focus-visible) {outline:none;}
.xm4 button, .xm4 input, .xm4 select, .xm4 textarea {font-family:inherit;}
.xm4 button {cursor:pointer;}
.xm4 :focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
.xm4 .xm4-muted {color:var(--xm4-muted); font-size:.875rem;}
.xm4 ::selection {background:var(--xm4-tint); color:var(--xm4-text);}
.xm4 ::-webkit-scrollbar {width:10px;height:10px;}
.xm4 ::-webkit-scrollbar-thumb {background:var(--xm4-line); border-radius:8px; border:2px solid transparent; background-clip:padding-box;}
.xm4 ::-webkit-scrollbar-thumb:hover {background:var(--xm4-faint); background-clip:padding-box;}
.xm4 ::-webkit-scrollbar-track {background:transparent;}
/* a styled scrollbar's corner defaults to white: the square where two scrollbars meet (pqGrid's scroll pane) showed in dark mode */
.xm4 ::-webkit-scrollbar-corner {background:transparent;}

/* ===================== Shell grid ===================== */
/* overflow:clip (not hidden) keeps #wrapper out of the scroll-container chain, so position:sticky
   inside the page still sticks to the viewport. */
.xm4 #wrapper {position:relative; display:grid; grid-template-columns:var(--xm4-rail-col,0px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); width:100%; min-height:100dvh; overflow:clip;}
.xm4.xm4-has-nav {--xm4-rail-col:var(--xm4-rail);}
html.xm4-rail-collapsed .xm4.xm4-has-nav {--xm4-rail-col:var(--xm4-rail-icons);}
html.xm4-ready .xm4 #wrapper {transition:grid-template-columns .2s ease;}
.xm4 .footer_bottom {grid-column:2; grid-row:2; display:flex; flex-direction:column; min-width:0; min-height:0; padding:0;}

/* ===================== Header ===================== */
.xm4 #header {grid-column:1 / -1; grid-row:1; position:sticky; top:0; z-index:1030; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; height:calc(var(--xm4-header) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0 12px; font-size:0.875rem; line-height:1.4; letter-spacing:0; color:var(--xm4-text); background:color-mix(in srgb,var(--xm4-surface) 88%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--xm4-line); box-shadow:none; transform:none; transition:none!important;}
.xm4 #header::after {display:none;}
.xm4 #header .left-holder, .xm4 #header .right-holder, .xm4 #header .xm4-header-center {display:flex; align-items:center; min-width:0; height:100%; float:none; width:auto; padding:0; margin:0; border:0; background:none;}
.xm4 #header .left-holder {gap:10px;}
.xm4 #header .xm4-header-center {justify-content:center; padding:0 8px;}
.xm4 #header .right-holder {gap:6px; justify-content:flex-end;}
.xm4 #header .right-holder > * {flex:none;}
.xm4 #header #logo {display:flex; align-items:center; gap:10px; max-width:260px; min-width:0; margin:0; padding:0 4px; height:40px; border-radius:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--xm4-text)!important; font:700 1rem/1.2 var(--bs-body-font-family)!important; letter-spacing:-.02em; border:0;}
.xm4 #header #logo:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #header #logo img {display:block; width:auto!important; height:auto!important; max-height:34px!important; max-width:220px!important; object-fit:contain!important;}
/* An SVG exported with only a viewBox has an aspect ratio but no intrinsic size. Inside the shrink-to-fit logo box it
   then contributes nothing, so the image and the box both collapse to zero and the logo disappears. A definite height
   gives the ratio something to work from; raster logos keep their own size, capped by the max-height above. */
.xm4 #header #logo img[src*=".svg"] {height:34px!important;}
/* MR/Claude 10/18/2026: Admin > Settings "Logo (Dark Mode)". Only portals that set it get .xm4-logo-light/.xm4-logo-dark
   (_page_header.cfm); the dark image carries an inline display:none, which only an !important rule can lift. In dark mode
   the two swap, so a light-ink logo replaces a dark-ink one that would vanish on the dark header. */
[data-bs-theme="dark"] .xm4 #header #logo img.xm4-logo-light {display:none!important;}
[data-bs-theme="dark"] .xm4 #header #logo img.xm4-logo-dark {display:block!important;}
.xm4 #header #logo:focus::after {box-shadow:none;}
.xm4 #header a:focus-visible, .xm4 #header button:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
/* 38px icon buttons shared by the hamburger, alerts, search toggle and integrations */
.xm4 #header .xm4-iconbtn, .xm4 #header .nav-opener, .xm4 #header .alert-block .alert, .xm4 #header .xm4-search-toggle, .xm4 #header .airobot-btn, .xm4 #header .aiMicBot-btn, .xm4 #header .xm-otp-header-launcher {position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px; padding:0; margin:0; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:15px; line-height:1; text-decoration:none; float:none; transition:background .15s,border-color .15s,color .15s;}
.xm4 #header .xm4-iconbtn:hover, .xm4 #header .nav-opener:hover, .xm4 #header .alert-block .alert:hover, .xm4 #header .xm4-search-toggle:hover, .xm4 #header .airobot-btn:hover, .xm4 #header .xm-otp-header-launcher:hover {background:var(--xm4-soft); border-color:var(--xm4-faint); color:var(--xm4-text);}
.xm4 #header .nav-opener[aria-expanded="true"] {background:var(--xm4-tint); border-color:transparent; color:var(--xm4-accent);}
.xm4 #header .nav-opener > span, .xm4 #header .nav-opener .nav-opener-holder {display:none;}
.xm4 #header .nav-opener::before {content:"\f0c9"; font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro"; font-weight:900; font-size:16px;}
.xm4 #header .nav-opener > i {display:none;}
.xm4 #header .alert-block, .xm4 #header .profile-block, .xm4 #header .airobot-box, .xm4 #header .aiMicBot-box, .xm4 #header .xm-otp-header-block {display:block; padding:0; margin:0; height:auto; background:none; border:0; float:none;}
.xm4 #header .right-holder i {position:static; font-size:15px; line-height:1; width:auto; height:auto; margin:0; float:none;}
.xm4 #header .alert-block .alert {width:38px!important; color:var(--xm4-ink-2);}
.xm4 #header .alert-block .alert i {font-size:16px!important;}
.xm4 #header .alert_description {position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--xm4-danger); color:#fff; font:800 10px/14px var(--bs-body-font-family); text-align:center; border:2px solid var(--xm4-surface); box-sizing:border-box;
	/* sized by its digits: with only right set, an absolute box's auto width stops at its static position (after the bell),
	   which left 22px for the pill and pushed a third digit past its red background */
	width:max-content; white-space:nowrap;}
/* Profile pill → control panel */
.xm4 #header .profile-holder {display:flex; align-items:center; float:none; margin:0 0 0 4px; padding:0; border:0!important;}
.xm4 #header .profile-opener {position:relative; display:flex; align-items:center; gap:9px; height:38px; min-width:38px; width:auto!important; margin:0; padding:3px 8px 3px 3px; border:1px solid transparent; border-radius:11px; color:var(--xm4-text); background:transparent; box-shadow:none; text-decoration:none;}
.xm4 #header .profile-opener:hover, .xm4 #header .profile-opener[aria-expanded="true"] {background:var(--xm4-soft); border-color:var(--xm4-line);}
.xm4 #header .profile-opener .name {display:block; order:2; min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:var(--xm4-text); font:600 .8125rem/1.3 var(--bs-body-font-family); text-transform:none;}
.xm4 #header .profile-opener .icon-chevron-down {display:none;}
.xm4 #header .profile-opener .xm4-profile-caret {order:3; font-size:10px!important; color:var(--xm4-faint);}
.xm4 #header .profile-opener .photo {display:block; order:1; position:relative; flex:none; width:30px; height:30px; border-radius:50%; overflow:visible;}
.xm4 #header .profile-opener .photo img {display:block; width:30px!important; height:30px!important; border-radius:50%; object-fit:cover; background:var(--xm4-soft);}
.xm4 #header .profile-opener .status-circle {position:absolute; right:-1px; bottom:-1px; width:10px!important; height:10px!important; border-radius:50%; background:var(--xm4-success); border:2px solid var(--xm4-surface)!important;}
.xm4 #header .profile-opener .flag_tooltip {order:1;}
.xm4 #header .avatar, .xm4 #header .avatar-holder {width:30px; height:30px; margin:0; border-radius:50%; overflow:hidden;}
.xm4 #header .avatar img {width:100%; height:100%; object-fit:cover;}
/* Header search: a wide command-style field on desktop, an icon that reveals the field on small screens */
.xm4 #header .site-search {position:relative; display:flex; align-items:center; width:100%; max-width:560px; margin:0; height:auto;}
.xm4 #header .site-search label {cursor:pointer; padding:10px; color:var(--xm4-muted);}
.xm4 #header .site-search .xm4-search-toggle {display:none;}
.xm4 #header .site-search .input_holder {position:relative; display:flex!important; align-items:center; gap:10px; width:100%; height:38px; padding:0 8px 0 12px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-soft); color:var(--xm4-muted); box-shadow:none; transition:box-shadow .15s,border-color .15s,background .15s;}
/* The rounded search field replaces xm-3's vertical divider. */
.xm4 #header .site-search .input_holder::before {content:none; display:none;}
.xm4 #header .site-search .input_holder:hover {border-color:var(--xm4-faint);}
.xm4 #header .site-search .input_holder:focus-within {border-color:var(--xm4-accent); background:var(--xm4-surface); box-shadow:0 0 0 4px color-mix(in srgb,var(--xm4-accent) 12%,transparent);}
.xm4 #header .site-search .input_holder > i {flex:none; font-size:14px!important; color:var(--xm4-faint);}
.xm4 #header .site-search .input_holder input, .xm4 #header .site-search .input_holder input[type=search], .xm4 #header .site-search .input_holder input[type=text] {flex:1; min-width:0; max-width:none!important; height:36px; margin:0; padding:0!important; border:0!important; border-radius:0; background:transparent; box-shadow:none!important; color:var(--xm4-text); font:400 .8125rem/1.4 var(--bs-body-font-family); outline:none;}
.xm4 #header .site-search .input_holder input::placeholder {color:var(--xm4-muted);}
/* Important rules reverse layer priority. Override the legacy forced-white search
   background inside that same layer so both appearances use the shell surface. */
@layer xm-legacy { .xm4 #header .site-search .input_holder input {background:transparent!important;} }
.xm4 #header .site-search .input_holder input::-webkit-search-cancel-button {-webkit-appearance:none;}
.xm4 #header .site-search kbd {flex:none; font:700 10.5px/1 var(--bs-body-font-family); color:var(--xm4-muted); border:1px solid var(--xm4-line); border-bottom-width:2px; border-radius:6px; padding:3px 6px; background:var(--xm4-surface);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
/* Signed-out header */
.xm4 #header .login-btns-container {display:flex; align-items:center; gap:8px; float:none; margin:0; padding:0;}
.xm4 #header .login-btn {display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-text); font:600 .8125rem/1 var(--bs-body-font-family); letter-spacing:0; text-transform:none; text-decoration:none; float:none; margin:0;}
.xm4 #header .login-btn:first-child {background:var(--xm4-accent); border-color:var(--xm4-accent); color:#fff;}
.xm4 #header .login-btn:hover {filter:brightness(1.04);}
.xm4 #header .login-btn i {font-size:13px;}

/* ===================== Application rail (#nav) ===================== */
/* Grid column 1, sticky under the header. Collapsed state is a class on <html>, applied before paint by appearance.js. */
.xm4 #nav {grid-column:1; grid-row:2; position:sticky; top:var(--xm4-header); align-self:start; display:flex; flex-direction:column; width:100%; height:calc(100dvh - var(--xm4-header)); min-height:0; margin:0; padding:0; overflow:hidden; background:var(--xm4-surface); border-right:1px solid var(--xm4-line); z-index:0;}
/* z-index:0 (not 1020): the rail never overlaps in-flow page content, but fixed overlays rendered inside the page
   column often live in a module's own stacking context (the portal home wraps the AI Data Explorer bar in
   .lpx-wrap {position:relative; z-index:1}). A high rail z-index painted the rail over those bars. */
/* Local tokens let the sidebar stay dark while the rest of the portal is light. */
html[data-xm4-sidebar-appearance="dark"] .xm4 #nav {
  --xm4-surface:#10192b; --xm4-soft:#1d2b43; --xm4-text:#f1f5fc; --xm4-ink-2:#cbd5e6;
  --xm4-muted:#a4b4ce; --xm4-faint:#93a5c1; --xm4-line:#29374d;
  --xm4-accent:#a8c7ff; --xm4-tint:#243d63; color-scheme:dark;
  background:linear-gradient(165deg,#151f36,#10192b 60%);
}
.xm4 #nav .nav-opener {display:none;}
.xm4 #nav .slider {position:static; inset:auto; flex:1; min-height:0; width:auto; height:auto; max-height:none; margin:0; padding:10px 12px calc(20px + env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; background:transparent; color:var(--xm4-text); border:0; box-shadow:none; transform:none; visibility:visible; opacity:1; transition:none;}
.xm4 .xm4-drawer-heading {display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; margin:0 0 4px; padding:2px 6px 0; font:700 .6875rem/1 var(--bs-body-font-family); letter-spacing:.12em; text-transform:uppercase; color:var(--xm4-muted);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 .xm4-drawer-close {display:none; flex:none; width:32px; height:32px; margin:-4px -6px 0 0; border:0; border-radius:9px; background:transparent; color:var(--xm4-muted); font-size:18px; line-height:1;}
.xm4 .xm4-drawer-close:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #nav .xm-nav-search {position:sticky; top:-10px; z-index:2; margin:0 0 6px; padding:6px 0 10px; background:var(--xm4-surface); border:0;}
.xm4 #nav .xm-nav-search i {position:absolute; left:12px; top:calc(50% - 2px); transform:translateY(-50%); font-size:13px; color:var(--xm4-faint); pointer-events:none;}
.xm4 #nav .xm-nav-search input, .xm4 #nav .xm-nav-search input[type=text] {width:100%; height:38px; margin:0; padding:0 10px 0 34px!important; font:400 .8125rem/1.4 var(--bs-body-font-family); color:var(--xm4-text); background:var(--xm4-soft); border:1px solid var(--xm4-line); border-radius:10px; outline:none; box-shadow:none; text-transform:none;}
.xm4 #nav .xm-nav-search input:focus {border-color:var(--xm4-accent); background:var(--xm4-surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--xm4-accent) 14%,transparent);}
.xm4 #nav .xm-nav-noresults {display:none; padding:20px 12px; font:400 .8125rem/1.4 var(--bs-body-font-family); color:var(--xm4-muted); text-align:center;}
.xm4 #nav .main_nav, .xm4 #nav #main_nav {display:block; padding:0; margin:0; min-height:0!important; list-style:none; font-family:inherit;}
.xm4 #nav .main_nav, .xm4 #nav .main_nav ul {background:transparent; border:0;}
.xm4 #nav .main_nav li {list-style:none; margin:1px 0; padding:0; border:0; background:none; position:relative;}
.xm4 #nav .main_nav li.xm-nav-hide {display:none!important;}
.xm4 #nav .main_nav li > a, .xm4 #nav .main_nav li > button {position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:8px 10px; border:0; border-radius:9px; font:500 .8125rem/1.35 var(--bs-body-font-family); text-transform:none; text-align:left; text-decoration:none; color:var(--xm4-ink-2); background:transparent; transition:background .12s,color .12s;}
.xm4 #nav .main_nav li > a:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #nav .main_nav a > i {flex:none; width:20px; text-align:center; font-size:14px; color:var(--xm4-muted); transition:color .12s;}
.xm4 #nav .main_nav .xm4-nav-label {min-width:0; overflow-wrap:anywhere;}
.xm4 #nav .main_nav a > img, .xm4 #nav .main_nav a > svg {flex:none; width:20px; height:20px; object-fit:contain;}
.xm4 #nav .main_nav a:hover > i {color:var(--xm4-ink-2);}
.xm4 #nav .main_nav a.xm-nav-current, .xm4 #nav .main_nav a[aria-current] {background:var(--xm4-tint); color:var(--xm4-accent); font-weight:600; box-shadow:none;}
.xm4 #nav .main_nav a.xm-nav-current > i, .xm4 #nav .main_nav a[aria-current] > i {color:var(--xm4-accent);}
.xm4 #nav .main_nav a.xm-nav-current::before, .xm4 #nav .main_nav a[aria-current]::before {content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--xm4-accent);}
.xm4 #nav .main_nav > li > .opener {min-height:28px; margin-top:14px; padding:6px 10px 4px; font:700 .6875rem/1.2 var(--bs-body-font-family); letter-spacing:.1em; text-transform:uppercase; color:var(--xm4-muted); background:transparent!important;} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 #nav .main_nav > li:first-child > .opener {margin-top:4px;}
.xm4 #nav .main_nav > li > .opener:hover {color:var(--xm4-muted);}
.xm4 #nav .main_nav .opener::after {content:"\f078"; font:900 9px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:auto; transition:transform .15s;}
.xm4 #nav .main_nav .xm4-group-closed > .opener::after {transform:rotate(-90deg);}
.xm4 #nav .main_nav .slide {display:block; position:static; padding:0; margin:0; width:auto; height:auto; max-height:none; background:none; box-shadow:none; visibility:visible; opacity:1;}
.xm4 #nav .main_nav .slide .slide {padding-left:10px;}
.xm4 #nav .main_nav .xm4-group-closed > .slide {display:none;}
.xm4 .xm4-menu-flat > .xm4-app-group {display:contents;}
.xm4 #nav .xm4-menu-flat > .xm4-app-group > .opener {display:none;}
.xm4 #nav .xm4-menu-flat > .xm4-app-group > .slide {display:block!important;}
.xm4 .xm4-rail-footer {flex:none; padding:10px 12px; border-top:1px solid var(--xm4-line);}
.xm4 .xm4-rail-collapse, .xm4 .xm4-rail-search {display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--xm4-muted); font:500 .75rem/1.4 var(--bs-body-font-family); text-align:left; white-space:nowrap;}
.xm4 .xm4-rail-collapse i, .xm4 .xm4-rail-search i {flex:none; width:20px; text-align:center; font-size:15px;}
.xm4 .xm4-rail-collapse:hover, .xm4 .xm4-rail-search:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .xm4-rail-search {display:none;}
/* The label floats outside the scrolling rail. The link's own text remains available to AT. */
.xm4 .xm4-rail-tooltip {position:fixed; z-index:1035; max-width:min(260px,calc(100vw - 100px)); padding:9px 13px; border:1px solid #33445e; border-radius:9px; background:#17243a; color:#f1f5fc; box-shadow:var(--xm4-shadow); font:500 .8125rem/1.4 var(--bs-body-font-family); overflow-wrap:anywhere;}
/* Application flyout: hover (or ArrowRight on) a rail application to preview its pages. Same ?xm_menu_only source as the
   portal home cards. Fixed and body-appended because #nav clips overflow; the ::before strip bridges the 10px gap. */
.xm4 .xm4-rail-flyout {position:fixed; z-index:1035; min-width:240px; max-width:320px; overflow:auto; scrollbar-width:thin; padding:6px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg); font:500 .8125rem/1.4 var(--bs-body-font-family);}
.xm4 .xm4-rail-flyout::before {content:""; position:absolute; top:0; bottom:0; left:-12px; width:12px;}
.xm4 .xm4-rail-flyout.is-loading {min-height:72px; display:grid; place-items:center;}
.xm4 .xm4-rail-flyout.is-loading::after {content:""; width:20px; height:20px; border:2px solid var(--xm4-line); border-top-color:var(--xm4-accent); border-radius:50%; animation:xm4Spin .8s linear infinite;}
@keyframes xm4Spin {to {transform:rotate(360deg);}}
.xm4 .xm4-rail-flyout-head {margin:0 0 4px; padding:0 0 4px; border-bottom:1px solid var(--xm4-line);}
.xm4 .xm4-rail-flyout-head a {display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--xm4-text); font-weight:700; text-decoration:none;}
.xm4 .xm4-rail-flyout-head a:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 .xm4-rail-flyout-head i {flex:none; width:20px; text-align:center; font-size:14px; color:var(--xm4-accent);}
.xm4 .xm4-rail-flyout ul {list-style:none; margin:0; padding:0;}
.xm4 .xm4-rail-flyout li {margin:0; padding:0; list-style:none;}
.xm4 .xm4-rail-flyout li a, .xm4 .xm4-rail-flyout li > .xm4-nav-label {display:flex; align-items:center; gap:10px; min-height:34px; padding:7px 10px; border-radius:8px; color:var(--xm4-ink-2); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.xm4 .xm4-rail-flyout li a:hover, .xm4 .xm4-rail-flyout li a:focus-visible {background:var(--xm4-soft); color:var(--xm4-accent); outline-offset:-2px;}
.xm4 .xm4-rail-flyout li a[aria-current] {background:var(--xm4-tint); color:var(--xm4-accent); font-weight:600;}
.xm4 .xm4-rail-flyout li a > i {flex:none; width:16px; text-align:center; font-size:12px; color:var(--xm4-muted);}
.xm4 .xm4-rail-flyout li a > span {min-width:0; overflow:hidden; text-overflow:ellipsis;}
.xm4 .xm4-rail-flyout .badge {margin-left:auto; padding:2px 7px; border-radius:999px; background:var(--xm4-tint); color:var(--xm4-accent); font-size:.6875rem; font-weight:700;}
.xm4 .xm4-rail-flyout li > .xm4-nav-label {min-height:0; margin-top:6px; padding:8px 10px 2px; font:700 .6875rem/1.2 var(--bs-body-font-family); letter-spacing:.08em; text-transform:uppercase; color:var(--xm4-muted);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 .xm4-rail-flyout ul ul li a {padding-left:30px; font-size:.75rem; color:var(--xm4-muted);}
.xm4 .xm4-rail-flyout ul ul ul li a {padding-left:44px;}
.xm4 #nav .main_nav li > a[data-xm4-flyout]:not([data-xm4-flyout-empty])::after {content:"\f054"; font:900 8px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:auto; color:var(--xm4-faint); opacity:0; transition:opacity .15s,transform .15s;}
.xm4 #nav .main_nav li > a[data-xm4-flyout]:hover::after, .xm4 #nav .main_nav li > a[data-xm4-flyout][aria-expanded="true"]::after {opacity:.7; transform:translateX(2px);}

/* ===================== Page column ===================== */
/* Content gutters align the title row, the module area and the footer on one edge. */
.xm4 .page-head, .xm4 #main, .xm4 #footer, .xm4 .xm4-module-nav.xm4-standalone, .xm4 #xmcssmenu {padding-inline:max(var(--xm4-gutter),calc((100% - var(--xm4-content-max)) / 2));}
.xm4.xm4-wide-screen .page-head, .xm4.xm4-wide-screen #main, .xm4.xm4-wide-screen #footer, .xm4.xm4-wide-screen .xm4-module-nav.xm4-standalone {padding-inline:var(--xm4-gutter);}
.xm4 #main {flex:1 1 auto; max-width:none; width:auto; margin:0; padding-top:20px; padding-bottom:32px; float:none; background:transparent;}
.xm4 #main.fixed_layout {max-width:none;}
.xm4 #xmMainContainer {max-width:var(--xm4-content-max); width:100%; margin:0 auto; padding:0;}
.xm4.xm4-wide-screen #xmMainContainer {max-width:none;}
.xm4 #PageInstructionsBox {margin:0 0 18px; padding:12px 16px; border:1px solid var(--xm4-line); border-left:3px solid var(--xm4-accent); border-radius:10px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:.8125rem; box-shadow:none;}
.xm4 #footer {flex:none; margin:12px 0 0; padding-top:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:transparent; color:var(--xm4-muted)!important; font-size:9px!important; text-align:center; border-top:1px solid var(--xm4-line);}
.xm4 #footer a {color:var(--xm4-muted);}
.xm4 #footer a:hover {color:var(--xm4-accent);}
.xm4 .accessibility {position:fixed; top:-100px; left:12px; z-index:1200; background:var(--xm4-surface); padding:12px; border-radius:8px; border:1px solid var(--xm4-line);}
.xm4 .accessibility:focus {top:8px;}

/* Title row: the existing module icon and title open its menu. */
.xm4 .page-head {position:relative; z-index:1015; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--xm4-page-head); margin:0; padding-top:6px; padding-bottom:6px; background:var(--xm4-bg); border-bottom:1px solid var(--xm4-line); transition:none!important; transform:none!important;}
.xm4 .page-head.xmStickyTop {position:sticky; top:var(--xm4-header); background:color-mix(in srgb,var(--xm4-bg) 86%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.xm4 .page-head::after {display:none;}
.xm4 .xm4-page-head-main {display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;}
.xm4 .page-head h1 {display:flex; align-items:center; gap:8px; float:none; min-width:0; margin:0; padding:0; font:650 1.125rem/1.3 var(--bs-body-font-family); letter-spacing:-.02em; color:var(--xm4-text); transition:none;}
.xm4 .page-head h1 > a {display:flex; align-items:center; gap:8px; min-width:0; color:inherit; text-decoration:none;}
.xm4 .page-head h1 > a:hover {color:var(--xm4-accent);}
.xm4 .page-head h1 > a[href="#"]:not([role="button"]) {cursor:default;}
.xm4 .page-head h1 > a[href="#"]:not([role="button"]):hover {color:inherit;}
.xm4 .page-head .xm4-page-title {min-height:38px; padding:4px 8px; border-radius:8px;}
.xm4 .page-head .xm4-page-title[role="button"] {cursor:pointer;}
.xm4 .page-head .xm4-page-title[role="button"]:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 .page-head .xm4-page-title:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:1px; box-shadow:none;}
.xm4 .page-head .xm4-page-title[aria-expanded="true"] {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .page-head h1 #PageTitle {display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.xm4 .page-head h1 #PageTitle > i {display:inline-block; width:auto; margin-right:4px; font-size:.9em; color:var(--xm4-muted); position:static; padding:0;}
.xm4 .page-head h1 > a > i, .xm4 .page-head .slide-drop, .xm4 .page-head h1 .icon-chevron-down {display:none;}
.xm4 .page-head #PgInstrToggle {position:static!important; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0; border-radius:6px; font-size:12px!important; color:var(--xm4-faint); cursor:pointer;}
.xm4 .page-head #PgInstrToggle:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
/* Standalone menu control only for pages without a title row. */
.xm4 .xm4-module-trigger {display:inline-flex; flex:none; align-items:center; justify-content:center; width:38px; height:38px; padding:0; margin:0; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:16px; line-height:1; transition:background .15s,border-color .15s,color .15s;}
.xm4 .xm4-module-trigger:hover {background:var(--xm4-soft); border-color:var(--xm4-faint); color:var(--xm4-text);}
.xm4 .xm4-module-trigger[aria-expanded="true"] {background:var(--xm4-accent); border-color:var(--xm4-accent); color:#fff;}
.xm4 .xm4-module-trigger i {position:static; padding:0; margin:0; line-height:1; float:none; width:auto;}
.xm4 .page-head .breadcrumbs {flex:none; float:none; padding:0; margin:0; font:500 .75rem/1.3 var(--bs-body-font-family); color:var(--xm4-muted);}
.xm4 .page-head .breadcrumbs ul {display:flex; align-items:center; flex-wrap:wrap; gap:0; list-style:none; margin:0; padding:0;}
.xm4 .page-head .breadcrumbs ul::after {display:none;}
.xm4 .page-head .breadcrumbs ul li {float:none; color:var(--xm4-muted); white-space:nowrap;}
.xm4 .page-head .breadcrumbs ul li a {color:var(--xm4-muted); transition:color .12s;}
.xm4 .page-head .breadcrumbs ul li a:hover {color:var(--xm4-accent);}
.xm4 .page-head .breadcrumbs ul li::after {content:"\f054"; font:900 8px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin:0 8px; color:var(--xm4-faint);}
.xm4 .page-head .breadcrumbs ul li:last-child {color:var(--xm4-text); font-weight:600;}
.xm4 .page-head .breadcrumbs ul li:last-child::after {display:none;}

/* Add New (module-emitted .xm-drop-box markup; opened by contentPopup, which toggles .xm-popup-active) */
.xm4 #xm-page-header {display:flex; align-items:center; gap:8px; margin:0!important; padding:0!important; background:none!important; min-width:0;}
.xm4 #xm-add-new-container {position:relative; display:inline-flex; align-items:center; margin:0!important;}
.xm4 .xm-drop-box {float:none; padding:0; position:relative; display:inline-flex;}
.xm4 .xm-btn {display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 12px; border:1px solid var(--xm4-accent); border-radius:10px; background:var(--xm4-accent); color:#fff; font:600 .8125rem/1 var(--bs-body-font-family); letter-spacing:0; text-decoration:none; white-space:nowrap; box-shadow:0 8px 20px -12px color-mix(in srgb,var(--xm4-accent) 80%,transparent); transition:background .15s,transform .1s;}
.xm4 .xm-btn:hover {background:var(--xm4-accent-dark); border-color:var(--xm4-accent-dark); color:#fff; text-decoration:none;}
.xm4 .xm-btn:active {transform:translateY(1px);}
.xm4 .xm-btn:not(:has(i))::before {content:"\2b"; font:900 12px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro";}
.xm4 .xm-btn span {float:none; position:static; display:inline; min-width:0; padding:0; border:0; background:transparent!important; color:inherit; font:inherit;}
/* Remove both strokes of the legacy CSS icons; xm-4 supplies the icon on the button. */
.xm4 .xm-btn span::before, .xm4 .xm-btn span::after {content:none; display:none;}
.xm4 .xm-btn span i {margin-right:2px;}
.xm4 .xm-drop-box .xm-btn::after {content:"\f078"; font:900 9px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:2px; opacity:.85; transition:transform .15s;}
.xm4 .xm-drop-box.xm-popup-active .xm-btn {background:var(--xm4-accent-dark); border-color:var(--xm4-accent-dark);}
.xm4 .xm-drop-box.xm-popup-active .xm-btn::after {transform:rotate(180deg);}
.xm4 .xm-btn.xm-btn-alt {background:var(--xm4-accent); color:#fff;}
/* dark mode's accent is a light blue (#8ab4ff): white text on it measured 2.1:1, so the filled button takes the page's dark ink */
[data-bs-theme="dark"] .xm4 .xm-btn, [data-bs-theme="dark"] .xm4 .xm-btn:hover, [data-bs-theme="dark"] .xm4 .xm-btn.xm-btn-alt {color:var(--xm4-bg);}
.xm4 .xm-drop-box .xm-drop, .xm4 .xm-edit .xm-drop {position:absolute; top:calc(100% + 8px); left:0; right:auto; z-index:1025!important; padding:0; font-size:.8125rem; line-height:1.4; text-align:left;}
.xm4 .xm-drop-box .xm-drop .xm-drop-frame, .xm4 .xm-edit .xm-drop .xm-drop-frame {width:auto!important; min-width:240px; max-width:min(360px,calc(100vw - 32px)); padding:6px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg); z-index:1;}
.xm4 .xm-drop-box .xm-drop .xm-drop-frame::before, .xm4 .xm-drop-box .xm-drop .xm-drop-frame::after, .xm4 .xm-edit .xm-drop .xm-drop-frame::before, .xm4 .xm-edit .xm-drop .xm-drop-frame::after {display:none;}
.xm4 .xm-drop-box .xm-drop ul {margin:0; padding:0; list-style:none; overflow:visible; max-height:min(60vh,520px); overflow-y:auto;}
.xm4 .xm-drop-box .xm-drop a {display:flex; align-items:center; gap:10px; margin:0; padding:9px 12px; border:0; border-radius:8px; color:var(--xm4-text); font:500 .8125rem/1.35 var(--bs-body-font-family); text-decoration:none; transition:background .12s,color .12s;}
.xm4 .xm-drop-box .xm-drop a::before {content:"\2b"; position:static; margin:0; flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--xm4-tint); color:var(--xm4-accent); font:900 10px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro";}
.xm4 .xm-drop-box .xm-drop a:has(i)::before {display:none;}
.xm4 .xm-drop-box .xm-drop a.add-new::after {content:none; display:none;}
.xm4 .xm-drop-box .xm-drop a:hover, .xm4 .xm-drop-box .xm-drop a:focus-visible {background:var(--xm4-soft); color:var(--xm4-accent);}

/* Module navigation source and the fallback control for pages without a title row. */
.xm4 .xm4-module-nav {display:none; position:relative; z-index:auto; width:auto; margin:0; padding:0; border:0; background:transparent; transform:none;}
.xm4 .xm4-module-nav.xm4-standalone {display:flex; align-items:center; gap:10px; min-height:48px; padding-top:5px; padding-bottom:5px; background:var(--xm4-bg); border-bottom:1px solid var(--xm4-line);}
.xm4 .xm4-module-nav .slideset {display:none!important;}
.xm4 .xm4-module-nav.xmStickyTop {position:static;}
/* Fragment responses may include the fallback because their request has no page header.
   Suppress it before JS runs when the host page already supplies the title control. */
.xm4 .footer_bottom:has(.page-head .xm4-page-title) .xm4-module-nav:not([data-xm4-ready]) > .xm4-module-trigger {display:none;}
html[data-xm4-module-layout="mega"] .xm4 .footer_bottom:has(.page-head .xm4-page-title) .xm4-module-nav.xm4-standalone:not([data-xm4-ready]) {display:none;}

/* ===================== Sticky stack ===================== */
/* shell.js writes `top` per bar; these are the pre-script defaults. */
.xm4 .xmStickyTop {position:sticky; top:var(--xm4-header); z-index:1010;}
.xm4 .page-head.xmStickyTop {z-index:1015;} /* the title row (and its Add New menu) stays above toolbars that stack under it */
.xm4 .controlBar.xmStickyTop, .xm4 #ControlBar.xmStickyTop {background:var(--xm4-surface);}
.xm4 table.stHeader thead th, .xm4 table.stHeader thead td, .xm4.fullscreen table.stHeader thead th, .xm4.fullscreen table.stHeader thead td {top:var(--xm4-sticky-stack,var(--xm4-header));}
.xm4 .xm4-status {position:fixed; left:50%; bottom:calc(var(--xm4-bottom) + 16px); transform:translateX(-50%); z-index:1080; max-width:calc(100% - 24px); padding:10px 16px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); box-shadow:var(--xm4-shadow); color:var(--xm4-text); font-size:.875rem; display:flex; align-items:center; gap:12px;}
.xm4 .xm4-status button {border:0; background:var(--xm4-tint); color:var(--xm4-accent); border-radius:6px; padding:5px 9px;}
.xm4 .xm4-status button.xm4-status-secondary {background:transparent; color:var(--xm4-muted);}
.xm4 .xm4-status button.xm4-status-secondary:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4:has(.xpr-wrap--composer-docked) .xm4-status {bottom:calc(var(--xm4-bottom) + var(--xpr-dock-height,72px) + 16px);} /* above the AI Data Explorer dock */
.xm4 .xm4-backdrop {position:fixed; inset:0; z-index:1040; background:#07122773; border:0; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.xm4.xm4-drawer-open {overflow:hidden;}
.xm4 .xm4-bottom-nav {display:none;}
.xm4 [data-xm4-focus-boundary] {position:absolute;width:1px;height:1px;overflow:hidden;}

/* ===================== Control panel (existing XM hooks) ===================== */
/* Control panel: retain the XM hooks, with fixed controls and native scrolling. */
.xm4 .control_panel_slider {container:xm4-panel / inline-size;position:fixed;inset:0 0 0 auto;width:min(460px,100%);height:100dvh;overflow:hidden;overscroll-behavior:contain;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:var(--xm4-surface);color:var(--xm4-text);border-left:1px solid var(--xm4-line);box-shadow:var(--xm4-shadow);transform:translateX(105%);visibility:hidden;z-index:1045;transition:transform .2s ease,visibility .2s;}
.xm4 #wrapper.settings-active .control_panel_slider {transform:translateX(0); visibility:visible;}
.xm4 .control_panel_slider.xm4-panel-has-frame {width:min(820px,100%);}
.xm4 .control_panel_slider.xm4-panel-has-frame.xm4-panel-expanded {width:100%;}
.xm4 .control_panel {width:100%;height:100%;min-height:0;background:transparent;padding:0;position:static;}
.xm4 .control_panel > .tab-container {width:100%;height:100%;min-height:0;display:flex;flex-direction:column;}
.xm4 .xm4-panel-heading {display:flex;align-items:center;flex:none;gap:8px;min-height:58px;padding:10px 20px;}
.xm4 .xm4-panel-heading h2 {flex:1;font:650 1rem/1.4 var(--bs-body-font-family);margin:0;letter-spacing:-.025em;}
.xm4 .xm4-panel-action,.xm4 .control_panel .xm4-panel-heading .btn-close {display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:10px;opacity:1;filter:none;color:var(--xm4-muted);background:transparent;font-size:16px;position:static;}
.xm4 .xm4-panel-action:hover,.xm4 .control_panel .xm4-panel-heading .btn-close:hover {background:var(--xm4-tint);color:var(--xm4-accent);}
.xm4 .control_panel .tabset {position:relative;flex:none;display:flex;align-items:center;gap:18px;overflow-x:auto;margin:0;padding:0 20px;list-style:none;background:var(--xm4-surface);border-bottom:1px solid var(--xm4-line);scrollbar-width:thin;}
.xm4 .control_panel .tabset li {display:flex;align-items:center;float:none;flex:none;width:auto;margin:0;}
.xm4 .control_panel .tabset a {position:relative;display:flex;align-items:center;gap:6px;padding:11px 2px;min-height:44px;font:550 .8125rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);background:transparent;border:0;border-radius:0;box-shadow:none;text-transform:none;white-space:nowrap;}
.xm4 .control_panel .tabset a.active {color:var(--xm4-accent);background:transparent;border:0;box-shadow:inset 0 -2px var(--xm4-accent);}
.xm4 .control_panel .tabset .tab-close {display:none;}
.xm4 .control_panel .tabset .xm4-tab-remove {width:32px;height:36px;margin-left:2px;background:transparent;font-size:12px;}
.xm4 .control_panel .xm4-panel-content {flex:1;min-height:0;padding:20px;height:auto!important;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--xm4-line) transparent;color:var(--xm4-text);background:var(--xm4-bg);}
.xm4 .control_panel .xm4-panel-content > [role=tabpanel] {min-width:0;}
.xm4 .control_panel .xm4-panel-content.xm4-frame-content {padding:0;overflow:hidden;}
/* MR/Claude 10/18/2026: Sign out pinned under the scrolling panel content (control-panel.js pinSignOut moves the Profile tab's Logout link here), so it is always in view on every tab and never covers the last option. */
.xm4 .control_panel .xm4-panel-footer {flex:none;padding:12px 20px;border-top:1px solid var(--xm4-line);background:var(--xm4-surface);}
.xm4 .control_panel .xm4-panel-signout {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--xm4-line);border-radius:10px;background:var(--xm4-surface);color:var(--xm4-text);font:600 .8125rem/1.5 var(--bs-body-font-family);text-decoration:none;}
.xm4 .control_panel .xm4-panel-signout i {font-size:14px;color:var(--xm4-danger);}
.xm4 .control_panel .xm4-panel-signout:hover {background:var(--xm4-soft);color:var(--xm4-danger);border-color:var(--xm4-danger);text-decoration:none;}
.xm4 .control_panel .xm4-panel-signout:focus-visible {outline:2px solid var(--xm4-accent);outline-offset:2px;}
.xm4 .xm4-frame-tab {display:block;width:100%!important;height:100%!important;min-height:0!important;border:0!important;}
.xm4 .xm4-frame-tab > iframe:only-child {display:block;width:100%!important;height:100%!important;border:0;}
@media(max-width:820px) {.xm4 .xm4-panel-heading > .xm4-panel-action:not(.btn-close) {display:none;}}
.xm4 [data-xm4-focus-boundary] {position:absolute;width:1px;height:1px;overflow:hidden;}
.xm4 #header .site-search .xm4-search-open {display:block!important;}
.xm4 .control_panel .box {background:var(--xm4-surface);color:var(--xm4-text);border-color:var(--xm4-line);}
.xm4 .control_panel .profile {display:flex;align-items:flex-start;gap:12px;padding:2px 0 20px;margin:0;border:0;background:transparent;}
.xm4 .control_panel .profile .avatar {position:relative;float:none;flex:none;width:44px;height:44px;margin:0;}
.xm4 .control_panel .profile .avatar-holder {width:44px;height:44px;border:1px solid var(--xm4-line);border-radius:50%;overflow:hidden;background:var(--xm4-surface);}
.xm4 .control_panel .profile .text-holder {min-width:0;min-height:0!important;padding:0;overflow-wrap:anywhere;}
.xm4 .control_panel .profile .xm4-avatar-edit {position:absolute;left:-6px;bottom:-5px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--xm4-line);border-radius:50%;background:var(--xm4-surface);color:var(--xm4-muted);font-size:10px;box-shadow:var(--xm4-shadow);cursor:pointer;}
.xm4 .control_panel .profile .xm4-avatar-edit:hover {color:var(--xm4-accent);border-color:var(--xm4-accent);}
.xm4 .control_panel .profile .xm4-avatar-edit:disabled {cursor:progress;opacity:.6;}
.xm4 .control_panel .profile .xm4-avatar-remove {display:inline-block;margin:0 0 3px;padding:0;border:0;background:none;color:var(--xm4-muted);font:400 .75rem/1.5 var(--bs-body-font-family);text-decoration:underline;cursor:pointer;}
.xm4 .control_panel .profile .xm4-avatar-remove:hover {color:var(--xm4-danger);}
.xm4 .control_panel .profile .xm4-avatar-status {margin:0;font:400 .75rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);}
.xm4 .control_panel .profile .xm4-avatar-status:empty {display:none;}
.xm4 .control_panel .profile h2 {font:600 1rem/1.35 var(--bs-body-font-family);letter-spacing:-.02em;text-transform:none;margin:0 0 5px;}
.xm4 .control_panel .profile .position,.xm4 .control_panel .profile .mail {display:block;font:400 .75rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);margin:0 0 3px;}
.xm4 .control_panel h2,.xm4 .control_panel h3,.xm4 .control_panel label {color:var(--xm4-text);}
.xm4 .control_panel #tab1 {background:var(--xm4-bg);}
.xm4 .control_panel .accordion {display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;border:0;background:transparent;color:var(--xm4-text);font-family:var(--bs-body-font-family);}
.xm4 .control_panel #tab1 > .accordion {background:var(--xm4-bg);}
.xm4 .control_panel .accordion > li {flex:none;margin:0;border:1px solid var(--xm4-line);border-radius:12px;overflow:clip;background:var(--xm4-surface);}
.xm4 .control_panel .accordion > li > .opener {display:flex;align-items:center;gap:10px;min-height:50px;padding:13px 14px;background:var(--xm4-surface);color:var(--xm4-text);font:600 .8125rem/1.5 var(--bs-body-font-family);text-transform:none;}
.xm4 .control_panel .accordion > li > .opener:hover {background:var(--xm4-soft);}
.xm4 .control_panel .accordion > li > .opener:focus-visible {outline:2px solid var(--xm4-accent);outline-offset:-3px;border-radius:10px;}
.xm4 .control_panel .accordion > li > .opener > i {position:static!important;flex:none;width:18px;margin:0;font-size:16px!important;color:var(--xm4-muted);}
.xm4 .control_panel .accordion > li > .opener > .icon-arrow-with-circle-down {display:none;}
.xm4 .control_panel [data-xm4-panel-section]::after {content:"";width:7px;height:7px;flex:none;border:solid var(--xm4-muted);border-width:0 1.5px 1.5px 0;margin-left:auto;margin-right:3px;transform:rotate(45deg);}
.xm4 .control_panel [data-xm4-panel-section][aria-expanded=true]::after {transform:rotate(225deg);}
.xm4 .control_panel .accordion > li > .slide {position:static;width:auto;background:var(--xm4-surface);}
.xm4 .control_panel .form_row {position:relative;display:block;min-width:0;padding:11px 14px!important;background:var(--xm4-surface);color:var(--xm4-text);font-size:.8125rem;line-height:1.5;border:0;}
/* Plain text, passkey actions and QR images need the full row width. */
.xm4 .control_panel .form_row:has(> i) {display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px;min-height:50px;}
.xm4 .control_panel .form_row::before {display:block;position:absolute;inset:0 14px auto;height:1px;width:auto;opacity:1;background:var(--xm4-line);content:"";transition:none;}.xm4 .control_panel .form_row::after {display:none;}
.xm4 .control_panel .form_row:has(> i)::before {left:42px;}
.xm4 .control_panel .form_row > i {grid-column:1;position:static!important;width:18px;font-size:15px;color:var(--xm4-muted);}
.xm4 .control_panel .form_row > label {grid-column:2;min-width:0;overflow-wrap:anywhere;font-weight:450;line-height:1.45;margin:0;}
.xm4 .control_panel .form_row span {float:none;color:inherit;}
.xm4 .control_panel .form_row > .pull-right {grid-column:3;float:none!important;display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.xm4 .control_panel .form_row > span.pull-right:has(.btn) {grid-column:2 / -1;justify-content:flex-start;}
.xm4 .control_panel .form_row > span:not(.pull-right) {grid-column:2 / -1;font-size:.6875rem;letter-spacing:.02em;color:var(--xm4-muted)!important;padding:0!important;}
.xm4 .control_panel .form_row .btn {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;min-width:34px;max-width:100%;padding:6px 10px;border:1px solid var(--xm4-line);border-radius:7px;box-shadow:none;font:500 .75rem/1.5 var(--bs-body-font-family);text-decoration:none;white-space:normal;text-align:center;}
.xm4 .control_panel .passKeyBlock .noPassKeys {padding:18px 14px 4px!important;text-align:center;}
.xm4 .control_panel .passKeyBlock .noPassKeys > label {color:var(--xm4-muted);font-weight:400;}
.xm4 .control_panel .passKeyBlock .passkeyrow {padding:12px 14px 18px!important;}
.xm4 .control_panel .passKeyBlock .passkeyrow::before {display:none;}
.xm4 .control_panel .passKeyBlock .btnCreatePasskey {min-width:144px;min-height:40px;padding:9px 16px;}
.xm4 .control_panel .passKeyBlock .pull-right > a {display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--xm4-line);border-radius:8px;color:var(--xm4-muted);background:var(--xm4-bg);}
.xm4 .control_panel .passKeyBlock .pull-right > a:hover {color:var(--xm4-accent);background:var(--xm4-tint);}
.xm4 .control_panel .qrCodeBlock .form_row {padding:14px 20px 4px!important;color:var(--xm4-muted);}
.xm4 .control_panel .qrCodeBlock .form_row + .form_row {padding:12px 20px 20px!important;}
.xm4 .control_panel .qrCodeBlock .form_row + .form_row::before {display:none;}
.xm4 .control_panel .qrCodeBlock img {display:block;width:min(100%,208px)!important;max-width:100%;height:auto!important;aspect-ratio:1;object-fit:contain;margin:0 auto;background:#fff;border-radius:8px;}
.xm4 .control_panel .form_row .ui-switcher {display:none!important;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox] {display:inline-block!important;appearance:none;float:none;position:relative;flex:none;width:42px;height:26px;margin:0;border:1px solid var(--xm4-line);border-radius:20px;background:var(--xm4-muted);background-image:none;cursor:pointer;box-shadow:none;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]::before {content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]:checked {background:#2563eb;border-color:#2563eb;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]:checked::before {transform:translateX(16px);}
.xm4 .control_panel .form_row input.toggleCheck:disabled {opacity:.5;cursor:default;}
.xm4 .control_panel .message {padding:0;}
/* MR/Claude 10/18/2026: the Alerts tab still ran on xm-3 main.css (legacy layer): its #f1f1f1 alert cards stayed light in dark
   (text 1.0:1, links 1.9:1), Bootstrap 5's h2 blew the type heading up to 32px, the list kept a 32px indent, and main.css
   colours ".date.orage" (typo), so unread alerts older than an hour got a grey dot instead of orange. Same tokens as the
   Profile tab now; light keeps its look. */
.xm4 .control_panel .message .box {font:400 .8125rem/1.5 var(--bs-body-font-family);color:var(--xm4-text);}
.xm4 .control_panel .message .box h2 {margin:0 0 10px;padding:0;font:600 .6875rem/1.5 var(--bs-body-font-family);letter-spacing:.07em;text-transform:uppercase;color:var(--xm4-muted);}
.xm4 .control_panel .message .box > ul {margin:0;padding:0;list-style:none;}
.xm4 .control_panel .message .box li {border:1px solid var(--xm4-line);border-radius:10px;background:var(--xm4-soft);color:var(--xm4-text);}
.xm4 .control_panel .message .box li p {color:var(--xm4-text);}
.xm4 .control_panel .message .box li p a {color:var(--xm4-accent);}
.xm4 .control_panel .message .box header .date {color:var(--xm4-ink-2);font-family:var(--bs-body-font-family);}
.xm4 .control_panel .message .box header .date.orange::after {background:#ffb400;}
.xm4 .control_panel .message .box header .close {color:var(--xm4-muted);opacity:1;text-shadow:none;}
.xm4 .control_panel .message .box header .close:hover {color:var(--xm4-danger);}
.xm4 .control_panel .message .no-notifications {padding:12px 14px;border:1px solid var(--xm4-line);border-radius:12px;background:var(--xm4-surface);color:var(--xm4-muted);}
.xm4 .xm4-preferences {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);align-items:center;gap:12px;padding:16px;margin:0 0 20px;border:1px solid var(--xm4-line);border-radius:12px;background:var(--xm4-surface);}
.xm4 .xm4-preferences h3 {grid-column:1 / -1;color:var(--xm4-muted);font:600 .6875rem/1.5 var(--bs-body-font-family);letter-spacing:.07em;text-transform:uppercase;margin:0 0 2px;}
.xm4 .xm4-preferences label {display:block;min-width:0;font-size:.8125rem;font-weight:450;line-height:1.4;margin:0;}
.xm4 .xm4-preferences .btn,.xm4 .xm4-preferences p {grid-column:1 / -1;margin:0;}
/* Normalize the utility links emitted as colored Bootstrap 3 buttons. */
.xm4 .control_panel #tab1 .form_row .btn {color:var(--xm4-text);background:var(--xm4-bg);}
.xm4 .control_panel #tab1 .form_row .btn:hover {color:var(--xm4-accent);background:var(--xm4-tint);border-color:var(--xm4-accent);}
.xm4 .control_panel #tab1 .form_row .btn:active {background:var(--xm4-soft);}
.xm4 .control_panel #tab1 .form_row .btn-primary {color:#fff;background:#2563eb;border-color:#2563eb;}
.xm4 .control_panel #tab1 .form_row .btn-primary:hover {color:#fff;background:#1d4ed8;border-color:#1d4ed8;}
.xm4 .control_panel #tab1 .form_row .btn.disabled {opacity:.45;pointer-events:none;}
.xm4 .control_panel #tab1 .form_row .btn i {position:static;margin:0;color:inherit;font-size:13px;}
.xm4 .control_panel .form_row > a.pull-right {grid-column:3;justify-self:end;min-width:0;}
.xm4 .control_panel #PageRenderTime {--xm4-perf-color:var(--xm4-muted);gap:7px;min-height:30px;padding:5px 8px;font-size:.6875rem;font-variant-numeric:tabular-nums;color:var(--xm4-muted);background:var(--xm4-bg);border-color:transparent;}
.xm4 .control_panel #PageRenderTime::before {content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--xm4-perf-color);}
.xm4 .control_panel #PageRenderTime.btn-success {--xm4-perf-color:#24835c;}
.xm4 .control_panel #PageRenderTime.btn-warning {--xm4-perf-color:#a76b09;}
.xm4 .control_panel #PageRenderTime.btn-danger {--xm4-perf-color:#d14141;}
.xm4 .control_panel #PageRenderTime:empty {display:none;}
.xm4 .control_panel .profile .avatar::after {right:0;bottom:0;width:10px;height:10px;border:2px solid var(--xm4-bg);}
.xm4 .control_panel .profile .avatar.online::after {background:#24835c;}
.xm4 .control_panel .profile .avatar.offline::after {background:var(--xm4-muted);}
.xm4 .control_panel .profile .text-holder .position:last-child {font-size:.6875rem;color:var(--xm4-muted);}
.xm4 .control_panel .profile .mail:hover {color:var(--xm4-accent);}
.xm4 .control_panel .tabset a:focus-visible {outline:2px solid var(--xm4-accent);outline-offset:-3px;border-radius:4px;}
.xm4 .control_panel .tabset a .badge {min-width:19px;padding:2px 5px;border-radius:6px;background:var(--xm4-soft)!important;color:var(--xm4-muted);font-size:10px;}
.xm4 .xm4-preferences .form-select {min-width:0;min-height:40px;padding:8px 30px 8px 10px;font-size:.8125rem;color:var(--xm4-text);background-color:var(--xm4-bg);border:1px solid var(--xm4-line);border-radius:7px;box-shadow:none;}
.xm4 .xm4-preferences .form-select:focus {border-color:var(--xm4-accent);outline:2px solid var(--xm4-tint);}
@container xm4-panel (max-width:380px) {
  .xm4 .control_panel .xm4-panel-content {padding:16px;}
  .xm4 .xm4-preferences {grid-template-columns:1fr;gap:8px;padding:14px;}
  .xm4 .xm4-preferences label {margin-top:4px;}
  .xm4 .xm4-preferences .form-select {font-size:16px;}
  .xm4 .control_panel .form_row > #PageRenderTime {grid-column:2 / -1;justify-self:start;}
  .xm4 .control_panel .form_row .btn {min-height:44px;min-width:44px;}
}
@media(max-width:767.98px) {
  .xm4 .xm4-preferences .form-select {font-size:16px;min-height:44px;}
  .xm4 .control_panel #tab1 .form_row .btn {min-height:44px;min-width:44px;}
  .xm4 .control_panel .passKeyBlock .pull-right > a {width:44px;height:44px;}
  .xm4 .control_panel .xm4-panel-heading .btn-close {width:44px;height:44px;margin:-4px;}
}
.xm4.unobstructed .page-head,.xm4.unobstructed .navbar_category,.xm4.unobstructed #PageInstructionsBox,.xm4.unobstructed .moduleBar {display:none;}

/* Bootstrap 3 vocabulary used by XM modules. Keep this bridge scoped to xm-4. */
.xm4 .panel,.xm4 .well {background:var(--xm4-surface); color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:12px; margin-bottom:20px; box-shadow:none;}
.xm4 .panel-heading {padding:14px 18px; border-bottom:1px solid var(--xm4-line); background:var(--xm4-surface); border-radius:12px 12px 0 0; color:var(--xm4-text);}
.xm4 .panel-title {font-size:1rem; margin:0; color:inherit;}
.xm4 .panel-body,.xm4 .well {padding:18px;}
.xm4 .panel-footer {padding:12px 18px; background:var(--xm4-soft); border-top:1px solid var(--xm4-line);}
/* MR/Claude 10/20/2026: lists and grids inside a pod or panel (Mario: the rounded corners looked off). Bootstrap 3 made a list
   group sit edge to edge inside a .panel; Bootstrap 5 has no .panel, so its list rows drew their own grey, bordered, rounded box
   just inside the pod's 12px corners (CRM "Recently Modified"), and grid.css's rounded grid card did the same. A list, or a grid
   that is a pod's whole content, now sits edge to edge under the heading (the pod is its frame); a grid sharing the pod with
   other content keeps a frame with smaller corners that nest inside the pod's. grid.css selectors carry an id in :is() and an
   !important border, hence the #xm4-grid and !important here. */
.xm4 .panel > .list-group {margin-bottom:0; border-radius:0; --bs-list-group-bg:transparent; --bs-list-group-border-radius:0;}
.xm4 .panel > .list-group > .list-group-item {border-left:0; border-right:0; border-radius:0; background-color:transparent;}
.xm4 .panel > .list-group:first-child > .list-group-item:first-child, .xm4 .panel > .panel-heading + .list-group > .list-group-item:first-child {border-top:0;}
.xm4 .panel > .list-group:last-child > .list-group-item:last-child {border-bottom:0;}
.xm4 .panel :is(.pq-grid,#xm4-grid) {border-radius:8px; box-shadow:none;}
.xm4 .panel > .panel-body:has(> :is(.pq-grid,#xm4-grid)):not(:has(> :not(.pq-grid, script, style, template, input[type=hidden]))) {padding:0;}
.xm4 .panel > :is(.pq-grid,#xm4-grid),
.xm4 .panel > .panel-body:not(:has(> :not(.pq-grid, script, style, template, input[type=hidden]))) > :is(.pq-grid,#xm4-grid) {border:0 !important; border-radius:0; box-shadow:none;}
.xm4 .btn-default {--bs-btn-color:var(--xm4-text); --bs-btn-bg:var(--xm4-surface); --bs-btn-border-color:var(--xm4-line); --bs-btn-hover-bg:var(--xm4-soft); --bs-btn-hover-border-color:var(--xm4-muted); --bs-btn-hover-color:var(--xm4-text);}
.xm4 .btn {border-radius:8px; font-size:.875rem; font-weight:550;}
.xm4 .btn-xs,.xm4 .btn-mini {padding:3px 7px; font-size:.75rem;}
.xm4 .btn-primary {--bs-btn-bg:#2563eb; --bs-btn-border-color:#2563eb;}
.xm4 .pull-right {float:right!important;}.xm4 .pull-left {float:left!important;}
.xm4 .hidden {display:none!important;}.xm4 .center-block {display:block;margin-inline:auto;}
.xm4 .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.xm4 .label {display:inline-block; padding:3px 7px; border-radius:5px; font-size:.75rem; line-height:1.4; background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .label-danger {background:#b42318;color:#fff;}.xm4 .label-success {background:#087443;color:#fff;}.xm4 .label-warning {background:#ffe8a3;color:#644600;}.xm4 .label-primary {background:#2563eb;color:#fff;}
/* MR/Claude 10/18/2026: Bootstrap 3 badges (plain .badge, .badge-info/-primary/-success/-warning/-danger/-important) have no
   Bootstrap 5 styling: white text on no background, invisible on light surfaces (found on the control panel's My Queue
   counts). Same colours as the .label shim above. :where() keeps these at the lowest specificity, so a component's own badge
   colours and Bootstrap 5's bg-* / text-bg-* utilities still win. */
.xm4 :where(.badge:not([class*="bg-"])) {background:var(--xm4-soft);color:var(--xm4-ink-2);}
.xm4 :where(.badge-info) {background:var(--xm4-tint);color:var(--xm4-accent);}
.xm4 :where(.badge-primary) {background:#2563eb;color:#fff;}
.xm4 :where(.badge-success) {background:#087443;color:#fff;}
.xm4 :where(.badge-warning) {background:#ffe8a3;color:#644600;}
.xm4 :where(.badge-danger,.badge-important) {background:#b42318;color:#fff;}
/* Portal grid (lib/tag/xm/inc/dataexplorer, pqGrid). xm-4 rows are shorter than the xm-3 rows the grid's own styles were tuned
   for, so row numbers, labels and the header menu icon are re-centred on the cell text. "Special markup" columns (NoColFilter)
   get room for their info icon, drawn as a circled i: a bare fa-info sat on the title and read like a text cursor. */
.xm4 .pq-body-outer .pq-grid-number-cell {display:flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0;}
.xm4 .pq-grid-cell .label {padding:1px 7px; line-height:1.35; vertical-align:top;}
.xm4 .pq-grid-title-row .pq-grid-col .pq-icon-menu {top:50%; margin-top:-7.5px;}
.xm4 .pq-grid-title-row .pq-grid-col.NoColFilter > .pq-td-div {padding-right:24px;}
.xm4 .pq-grid-title-row .pq-grid-col.NoColFilter > i.fa-info {top:50%!important; right:6px!important; margin-top:-9.5px; width:15px; height:15px; border:1px solid currentColor; border-radius:50%; font-size:8px; line-height:13px; text-align:center; color:rgba(255,255,255,.8)!important;}
.xm4 .help-block {display:block;margin:6px 0;color:var(--xm4-muted);font-size:.875rem;}
.xm4 .input-group-addon {display:flex;align-items:center;padding:8px 12px;border:1px solid var(--xm4-line);background:var(--xm4-soft);color:var(--xm4-muted);}
.xm4 .input-group-btn {display:flex;}.xm4 .input-group-btn .btn {height:100%;}
.xm4 .fade.in {opacity:1;}.xm4 .collapse.in {display:block;}.xm4 .open > .dropdown-menu {display:block;}
/* Bootstrap 5 styles the dropdown container but expects .dropdown-item children; modules still emit Bootstrap 3's
   `ul.dropdown-menu > li > a`, which therefore got the 1rem container with no item styling at all - every label wrapped
   onto two or three lines inside the 160px menu (seen on the Flex Design page). Give the container the theme's tokens
   and the legacy items the sizing Bootstrap 3 gave them. */
.xm4 .dropdown-menu {--bs-dropdown-font-size:.875rem; --bs-dropdown-color:var(--xm4-text); --bs-dropdown-bg:var(--xm4-surface); --bs-dropdown-border-color:var(--xm4-line); --bs-dropdown-border-radius:12px; --bs-dropdown-link-color:var(--xm4-text); --bs-dropdown-link-hover-color:var(--xm4-text); --bs-dropdown-link-hover-bg:var(--xm4-soft); --bs-dropdown-link-active-color:var(--xm4-accent); --bs-dropdown-link-active-bg:var(--xm4-tint); --bs-dropdown-header-color:var(--xm4-muted); --bs-dropdown-divider-bg:var(--xm4-line); box-shadow:var(--xm4-shadow-lg);}
.xm4 .dropdown-menu > li > a {display:block;padding:8px 16px;color:var(--xm4-text);white-space:nowrap;}.xm4 .dropdown-menu > li > a:hover {background:var(--xm4-soft);}
.xm4 .dropdown-menu > li > a > i, .xm4 .dropdown-item > i {width:18px; margin-right:6px; text-align:center; color:var(--xm4-muted);}
.xm4 .dropdown-menu .divider {height:1px; margin:6px 0; overflow:hidden; background:var(--xm4-line);}
.xm4 .dropdown-menu .dropdown-header {padding:6px 16px; font:700 .6875rem/1.4 var(--bs-body-font-family); letter-spacing:.08em; text-transform:uppercase; color:var(--xm4-muted);}
.xm4 .close {border:0;background:none;font-size:1.5rem;color:var(--xm4-text);margin-left:auto;}
.xm4 .table {--bs-table-color:var(--xm4-text);--bs-table-bg:var(--xm4-surface);--bs-table-border-color:var(--xm4-line);font-size:.875rem;}
.xm4 .table > :not(caption) > * > * {padding:12px;}
.xm4 .controlBar,.xm4 .moduleBar {background:var(--xm4-surface);color:var(--xm4-text);border-color:var(--xm4-line);}
.xm4 .col-xs-1{width:8.333333%}.xm4 .col-xs-2{width:16.666667%}.xm4 .col-xs-3{width:25.000000%}.xm4 .col-xs-4{width:33.333333%}.xm4 .col-xs-5{width:41.666667%}.xm4 .col-xs-6{width:50.000000%}.xm4 .col-xs-7{width:58.333333%}.xm4 .col-xs-8{width:66.666667%}.xm4 .col-xs-9{width:75.000000%}.xm4 .col-xs-10{width:83.333333%}.xm4 .col-xs-11{width:91.666667%}.xm4 .col-xs-12{width:100.000000%}

/* ===================== Responsive ===================== */
@media(min-width:1100px) {
  .xm4 #nav .xm4-drawer-close {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .slider {padding:12px 12px 16px;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-drawer-heading,
  html.xm4-rail-collapsed .xm4 #nav .xm-nav-search,
  html.xm4-rail-collapsed .xm4 #nav .xm-nav-noresults,
  html.xm4-rail-collapsed .xm4 #nav .xm4-app-group > .opener {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-search {display:flex; justify-content:center; min-height:44px; margin-bottom:8px; padding:0; background:var(--xm4-soft);}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .xm4-app-group > .slide {display:block!important;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav > .xm4-app-group {margin-top:10px; padding-top:10px; border-top:1px solid var(--xm4-line);}
  html.xm4-rail-collapsed .xm4 #nav .main_nav > .xm4-app-group:first-child {margin-top:0; padding-top:0; border-top:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .slide .slide {padding-left:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > a,
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > button {justify-content:center; gap:0; min-height:44px; margin:3px 0; padding:10px 0; border-radius:11px; font-size:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > i {width:24px; font-size:18px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > img,
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > svg {width:24px; height:24px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .opener::after {position:absolute; right:2px; bottom:4px; font-size:8px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > a[data-xm4-flyout]::after {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-nav-label,
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse span {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse {justify-content:center; min-height:44px; padding:0;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse i {transform:rotate(180deg);}
}
@media(max-width:1099.98px) {
  .xm4 #wrapper {grid-template-columns:minmax(0,1fr);}
  .xm4 #header {grid-column:1;}
  .xm4 .footer_bottom {grid-column:1;}
  .xm4.xm4-has-nav {--xm4-rail-col:0px;} /* the drawer is off-canvas: fixed bars in the page column start at the viewport edge */
  /* Off-canvas drawer; the collapsed preference only applies to the desktop rail. */
  .xm4 #nav {grid-area:auto; position:fixed; inset:0 auto 0 0; top:0; width:min(340px,calc(100% - 36px)); height:100dvh; padding-top:env(safe-area-inset-top); border-right:1px solid var(--xm4-line); box-shadow:var(--xm4-shadow-lg); transform:translateX(-105%); visibility:hidden; z-index:1045; transition:transform .2s ease,visibility .2s;}
  .xm4.nav-active #nav {transform:translateX(0); visibility:visible;}
  .xm4 .xm4-drawer-heading {min-height:44px; padding-top:10px;}
  .xm4 .xm4-drawer-close {display:inline-flex; align-items:center; justify-content:center;}
  .xm4 .xm4-rail-footer, .xm4 .xm4-rail-tooltip {display:none;}
  .xm4 #header .profile-opener .name {max-width:120px;}
  .xm4 #header .site-search {max-width:420px;}
  :root {--xm4-gutter:20px;}
}
@media(max-width:767.98px) {
  /* MR/Claude 10/20/2026: the bottom nav bar is gone (shell.js no longer builds it), so phones no longer reserve its 64px;
     only the home-indicator safe area is kept for the fixed and sticky bars that sit on --xm4-bottom */
  :root {--xm4-bottom:env(safe-area-inset-bottom, 0px); --xm4-header:56px; --xm4-page-head:48px; --xm4-gutter:14px;}
  /* MR/Claude 10/20/2026: with the menu button and Ask back in the phone header the buttons need ~40px more, so the
     logo's column takes what is left and the logo shrinks instead of the search button sliding under Ask */
  .xm4 #header {grid-template-columns:minmax(0,1fr) auto auto; gap:6px; padding-inline:10px;}
  .xm4 #header .left-holder, .xm4 #header .right-holder {gap:4px;}
  .xm4 #header .left-holder {min-width:0;}
  .xm4 #header #logo {max-width:150px; min-width:0;}
  .xm4 #header #logo img {max-width:min(140px,100%)!important; max-height:28px!important;}
  .xm4 #header #logo img[src*=".svg"] {height:28px!important;}
  .xm4 #header .profile-opener .name, .xm4 #header .profile-opener .xm4-profile-caret, .xm4 #header .welcome_nav {display:none;}
  .xm4 #header .profile-opener {min-width:38px; padding:3px;}
  /* MR/Claude 10/20/2026: the menu button stays on phones now that the bottom bar's Apps button is gone; Ask drops its
     label to fit beside the alerts and the avatar */
  .xm4 #header .xm4-ai-launch.xm4-iconbtn {width:38px; padding:0;}
  .xm4 #header .xm4-ai-launch .xm4-ai-launch-label {display:none;}
  .xm4 #header .xm4-header-center {justify-content:flex-end; padding:0;}
  .xm4 #header .site-search {width:auto; max-width:none;}
  .xm4 #header .site-search .xm4-search-toggle {display:inline-flex;}
  .xm4 #header .site-search .input_holder {display:none!important; position:fixed; left:10px; right:10px; top:calc(var(--xm4-header) + 8px); width:auto; z-index:1031; background:var(--xm4-surface); box-shadow:var(--xm4-shadow-lg);}
  .xm4 #header .site-search .input_holder.xm4-search-open {display:flex!important;}
  .xm4 #header .site-search kbd {display:none;}
  .xm4 .page-head {gap:8px; min-height:var(--xm4-page-head);}
  .xm4 .page-head h1 {font-size:1rem;}
  .xm4 .page-head .breadcrumbs {display:none;}
  .xm4 .xm-btn span {display:none;}
  .xm4 .xm-btn {padding:0 10px; gap:5px;}
  .xm4 .xm-btn:not(:has(i))::before {font-size:13px;}
  .xm4 .xm-drop-box .xm-drop {left:auto; right:0;}
  .xm4 #main {padding-top:14px; padding-bottom:20px;}
  .xm4 input:not([type=checkbox]):not([type=radio]),.xm4 select,.xm4 textarea {font-size:16px;}
  .xm4 .controlBar,.xm4 .moduleBar {max-width:100%; overflow-x:auto;}
  .xm4 .hidden-xs {display:none!important;}
  .xm4 #footer {margin-bottom:0;}
}
/* ===================== jQuery contextMenu (Flex Design toolbar, dataexplorer grid) ===================== */
/* 2.9.2 sets font-family/font-size to inherit and then sizes the whole menu in em: min-width:13em,
   padding:.2em 2em. At the xm-4 body size that leaves a panel barely wider than its own padding, so
   every label wrapped to one word per line. It also puts the caller's Font Awesome classes on the
   <li> itself (`context-menu-icon--fa fa fa-toggle-on`), so FA's font-weight:900 and icon font were
   inherited by the label text. Size in px, and give the label back a text font. dark.css recolors. */
.xm4 .context-menu-list {min-width:210px; max-width:360px; padding:6px; margin:4px 0 0; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); box-shadow:var(--xm4-shadow); color:var(--xm4-text); font:400 .8125rem/1.4 var(--bs-body-font-family);}
/* The library writes z-index:1 inline, which loses to anything the page stacks above it -- the
   Design view's sticky field library sits at 10, and painted straight over the open menu. Sit
   above the backdrop and drawer (1040/1045) but below status toasts (1080). */
.xm4 .context-menu-list.context-menu-root {z-index:1060!important;}
.xm4 .context-menu-item {box-sizing:border-box; padding:7px 12px 7px 36px; border-radius:8px; background:transparent; color:var(--xm4-text); white-space:nowrap;}
/* The <li> is a menu row, but it carries the caller's icon classes. Font Awesome 7 styles `.fa`
   as an icon BOX -- width:var(--fa-width,1.25em), text-align:center, font-weight:900 -- where 6
   only set the font, so the row collapsed to its own padding and the label had nowhere to go. */
.xm4 .context-menu-item.context-menu-icon--fa {width:auto; text-align:left; font-weight:400; line-height:inherit;}
.xm4 .context-menu-item > span {display:block; font:400 .8125rem/1.4 var(--bs-body-font-family); color:inherit;}
.xm4 .context-menu-item.context-menu-hover {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .context-menu-item.context-menu-disabled {color:var(--xm4-faint); background:transparent;}
.xm4 .context-menu-item.context-menu-icon::before {left:10px; width:20px; font-size:14px; line-height:inherit; color:var(--xm4-muted);}
/* When the caller passes Font Awesome classes, contextMenu puts them on the <li> and forces its own
   icon font onto ::before, so the codepoint renders as tofu. Worse, the class it writes is the bare
   `fa`, which was a solid alias in Font Awesome 6 but in 7 only sets --fa: the content is never
   emitted, so the item shows an empty box. Name the family and emit --fa here. Harmless on 6, where
   the same value is already in play. */
.xm4 .context-menu-item.context-menu-icon--fa::before {content:var(--fa,""); font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900;}
.xm4 .context-menu-item.context-menu-hover.context-menu-icon::before {color:var(--xm4-accent);}
.xm4 .context-menu-item.fa-toggle-on::before {color:var(--xm4-success);}
.xm4 .context-menu-separator {margin:5px 4px; border-bottom:1px solid var(--xm4-line);}
.xm4 .context-menu-submenu::after {border-left-color:var(--xm4-muted);}

/* ===================== Data explorer toolbar, quick filters and row actions (lib/tag/xm/inc/dataexplorer) ===================== */
/* _grid.cfm's own styles are the xm-3 ones: a grey #f6f6f6 bar of square white tiles, a grey band of filters and a white
   caret, several of them literal colours that stay light in dark mode. In xm-4: one rounded surface for the menu, the
   quick icons (ghost buttons), the search and the record count (a soft pill); the filters sit on the page and the eraser
   is an icon button. Tokens only, so dark mode follows; !important only where the markup carries inline styles. */
.xm4 .inner-header {align-items:stretch; column-gap:10px;}
.xm4 .search-filter-bar {align-items:center; min-height:48px; padding:0 5px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:var(--xm4-radius-sm); box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s, box-shadow .15s;}
.xm4 .search-filter-bar:focus-within {border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xm4-tint);}
.xm4 .head-filter {display:flex; align-items:center;}
.xm4 button.filter-button, .xm4 .head-buttons {display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:38px; height:38px; margin:0 1px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--xm4-muted); cursor:pointer;}
.xm4 button.filter-button span {display:block; width:16px; height:2px; margin:1.5px 0; border-radius:2px; background-color:currentColor;}
.xm4 button.filter-button:hover, .xm4 .head-buttons:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .head-buttons > span {display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%;}
.xm4 .head-buttons i {font-size:15px; color:inherit;}
.xm4 .head-search {align-self:stretch; display:flex; align-items:center; margin-left:5px; padding-left:5px; border-left:1px solid var(--xm4-line);}
.xm4 .head-search > .search-field {flex:1;}
.xm4 div.search-field {height:46px; padding:0 6px 0 8px; background:transparent; border:0; color:var(--xm4-muted);}
.xm4 .search-field .fa-magnifying-glass {font-size:16px; margin-right:8px; color:var(--xm4-faint);}
.xm4 .search-field input {font-size:.95rem; color:var(--xm4-text);}
.xm4 .search-field input::placeholder {color:var(--xm4-muted);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 .search-field .filter-box-opener {padding:8px; border-radius:8px; color:var(--xm4-muted); cursor:pointer;}
.xm4 .search-field .filter-box-opener:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 #TotalRecords.filter-box {display:inline-flex; align-items:center; justify-content:center; align-self:center; min-width:44px; height:34px; margin:0 2px 0 4px; padding:0 12px; background:var(--xm4-soft); border:0; border-radius:8px; color:var(--xm4-ink-2); font-size:.875rem; font-weight:650; font-variant-numeric:tabular-nums;}
/* MR/Claude 10/20/2026: lines and overlaps in the search bar (npf members ticket). _grid.cfm (~1142) gives the field while it is
   focused or filled a white box with a #dadada border, inside the bar's own border; its field picker ("Key Fields", select2
   bootstrap) was a second bordered box beside the bar's divider; and xm-3's .xmCounterTip badges (main.css) sit OUTSIDE their
   element (right/top -0.75em, the filter one 10px higher, _grid.cfm ~1312), so the filter count covered the chevrons and the
   selected-records count crossed the bar's top border. Now: no inner box, the picker is a soft chip, the filter count is a pill
   beside the chevrons (red, it warns that filters are on), the selected count is a small badge kept inside the bar. */
.xm4 div.search-field:is(:has(input:focus), :has(.select2-container--open), :focus-within, :has(input:not(:placeholder-shown))) {background:transparent; border:0;}
.xm4 div.search-field-lookup {flex:0 1 auto; width:auto; min-width:0; max-width:220px; margin-right:8px;}
.xm4 .search-field-lookup .select2-container {width:auto !important; min-width:118px; max-width:220px;}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection {display:flex; align-items:center; height:30px; padding:0 26px 0 10px; background:var(--xm4-soft); border:0; border-radius:8px; box-shadow:none; color:var(--xm4-ink-2); font-size:.8125rem; font-weight:500;}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection__rendered {padding:0; line-height:1.3; color:var(--xm4-ink-2);}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection__placeholder {color:var(--xm4-muted);}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection__arrow {top:0; right:8px; height:100%;}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection__arrow b {border-top-color:var(--xm4-muted);}
.xm4 .search-field-lookup .select2-container--bootstrap .select2-selection__clear {margin-right:4px; color:var(--xm4-faint);}
.xm4 .search-field-lookup .select2-container--bootstrap:is(.select2-container--focus,.select2-container--open) .select2-selection {background:var(--xm4-tint); color:var(--xm4-accent); box-shadow:none;}
.xm4 .search-field .filter-box-opener {width:auto; margin-right:2px;} /* FA7 gives icons width:1.25em, which ate the 8px padding */
.xm4 .search-field:has(#ColFiltersIndicator:not([data-counter="0"])) .filter-box-opener {color:var(--xm4-danger); background:color-mix(in srgb, var(--xm4-danger) 9%, transparent);}
.xm4 #ColFiltersIndicator.xmCounterTip {position:static; display:inline-flex; align-items:center; flex:none;}
.xm4 #ColFiltersIndicator.xmCounterTip::after {position:static; top:auto; right:auto; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin:0 4px 0 2px; padding:0 5px; font-size:11px; font-weight:600; line-height:18px; color:var(--xm4-surface); background:var(--xm4-danger); border-radius:9px; box-shadow:0 0 0 2px var(--xm4-surface);}
.xm4 #ColFiltersIndicator.xmCounterTip[data-counter="0"]::after {display:none;}
.xm4 #TotalRecords.xmCounterTip::after {top:-5px; right:-6px; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-weight:600; line-height:16px; color:var(--xm4-surface); background:var(--xm4-accent); border-radius:8px; box-shadow:0 0 0 2px var(--xm4-surface);}
.xm4 .inner-header .gtBtn {border-radius:var(--xm4-radius-sm); padding:0 18px; font-weight:600; box-shadow:0 1px 2px rgba(15,23,42,.08);}
.xm4 .filter-dropdown, .xm4 .search-dropdown {background:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text); border-radius:var(--xm4-radius-sm); box-shadow:var(--xm4-shadow-lg);}
/* The advanced-search panel is absolutely positioned with no top. Inside the flex .head-search (align-items:center) its static
   position is CENTRED on the search bar, so a tall panel rose behind the sticky module menu, and its sticky "Search Filters"
   header (forms.css) then parked over the Quick Filter row: Archived etc. could not be reached. Open it below the bar, and keep
   the header static there; the panel's body scrolls on its own (_grid.cfm sets its max-height). */
.xm4 .head-search > .search-dropdown {top:calc(100% + 6px); --xm4-form-header-position:static;}
.xm4 .filter-dropdown select {height:34px; padding:4px 8px; background-color:var(--xm4-surface); color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:8px;}
/* the panel's saved-view and switch-action pickers are select2 with the bootstrap theme (a white #ccc box; forms.css only
   covers the default theme and selects carrying .form-control); its open list is appended to body, so those rules are global */
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection {height:34px; background-color:var(--xm4-surface); border-color:var(--xm4-line); border-radius:8px; color:var(--xm4-text); box-shadow:none;}
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection__rendered {color:var(--xm4-text);}
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection__placeholder {color:var(--xm4-muted);} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {border-top-color:var(--xm4-muted);}
.xm4 .filter-dropdown .select2-container--bootstrap.select2-container--focus .select2-selection, .xm4 .filter-dropdown .select2-container--bootstrap.select2-container--open .select2-selection {border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xm4-tint);}
.xm4 .select2-container--bootstrap .select2-results__option[aria-selected=true] {background-color:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {background-color:var(--xm4-accent); color:#fff;}
.xm4 .select2-container--bootstrap .select2-search--dropdown .select2-search__field {background-color:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text);}
/* quick filters: on the page, not in a band (the strip's background and padding are inline) */
.xm4 .search-bar {align-items:center; gap:8px; margin:10px 0 8px; padding:0!important; background:transparent!important;}
.xm4 .search-bar > div {flex:0 1 220px;}
.xm4 .search-bar .searchBarFilterEraser {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; border:1px solid var(--xm4-line); border-radius:var(--xm4-radius-sm); background:var(--xm4-surface); color:var(--xm4-muted);}
.xm4 .search-bar .searchBarFilterEraser:hover {background:var(--xm4-soft); color:var(--xm4-danger);}
/* row actions: View + its menu as one outlined split button (main.js renders both with inline font and colours) */
.xm4 .xm-grid-actions .btn-group {border-radius:7px;}
.xm4 .xm-grid-actions .btn-grid-view, .xm4 .xm-grid-actions .btn-grid-view:hover, .xm4 .xm-grid-actions .btn-grid-view:focus {height:22px; padding:0 9px; font-size:11.5px!important; font-weight:600!important; line-height:20px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:7px; color:var(--xm4-accent)!important; box-shadow:none;}
.xm4 .xm-grid-actions .btn-grid-view:hover {background:var(--xm4-tint); border-color:color-mix(in srgb, var(--xm4-accent) 40%, var(--xm4-line));}
.xm4 .xm-grid-actions .btn-group > .btn-grid-view:not(:last-child) {border-top-right-radius:0; border-bottom-right-radius:0;}
.xm4 .xm-grid-actions .btn-grid-more {display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; background:var(--xm4-surface)!important; border:1px solid var(--xm4-line); border-left:0; border-radius:0 7px 7px 0; color:var(--xm4-muted); box-shadow:none;}
.xm4 .xm-grid-actions .btn-grid-more:hover, .xm4 .xm-grid-actions .btn-grid-more:focus {background:var(--xm4-soft)!important; color:var(--xm4-text);}
.xm4 .xm-grid-actions .btnIcon.fal {color:var(--xm4-faint);}
.xm4 .xm-grid-actions .btnIcon.fal:hover {color:var(--xm4-accent);}
/* ===================== AI Data Explorer composer (lib/com/ai/explorer) ===================== */
/* The docked/floating composer is position:fixed and full-width. In the shell it starts at the page column, so it never
   covers the rail (or its Collapse button), follows the rail width, clears the phone bottom bar, and stays below the
   control panel drawer (1045), its backdrop (1040) and Bootstrap modals (1055). */
.xm4 .xpr-wrap--composer-docked .xpr-composer, .xm4 .xpr-wrap--composer-floating .xpr-composer {z-index:1029;}
.xm4.xm4-has-nav .xpr-wrap--composer-docked .xpr-composer {left:var(--xm4-rail-col,0px); right:0; width:auto; bottom:var(--xm4-bottom);}
html.xm4-ready .xm4.xm4-has-nav .xpr-wrap--composer-docked .xpr-composer {transition:left .2s ease;}
.xm4.xm4-has-nav .xpr-wrap--composer-floating .xpr-composer {left:calc(var(--xm4-rail-col,0px) + (100vw - var(--xm4-rail-col,0px)) / 2); width:min(calc(100vw - var(--xm4-rail-col,0px) - 24px),960px); bottom:calc(var(--xm4-bottom) + 16px + env(safe-area-inset-bottom,0px));}
.xm4:has(.xpr-wrap--composer-docked), .xm4:has(.xpr-wrap--composer-floating) {padding-bottom:calc(var(--xm4-bottom) + var(--xpr-dock-offset,110px));}
/* Signed-out auth pages (request.app.xm4.auth_page): the LoginPage block is the whole body. */
.xm4.xm4-auth #main {padding:0; max-width:none;}
.xm4.xm4-auth #wrapper {min-height:100dvh;}
/* The sign-in card (lib/inc/_sign_in_xm.cfm, its xm-3 branch) brings its own light styles: a #fff box with grey top and
   bottom rules, #383838 Register text, #565656 passkey status. Under dark mode the theme's light text landed on that white
   box (title, Remember Me, Having trouble? all but invisible) and the Register text went dark-on-dark. Tokens, so both modes follow. */
.xm4 .sing-box {background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:var(--xm4-radius); box-shadow:var(--xm4-shadow); color:var(--xm4-text);}
.xm4 .sing-box h1.title {color:var(--xm4-text); font-weight:600;}
.xm4 .sing-box label[for="remember_me"], .xm4 .sing-box .support-btn, .xm4 .xm-passkey-status {color:var(--xm4-muted);}
.xm4 .xm-passkey-status .xm-passkey-cancel {color:var(--xm4-accent);}
.xm4 a.signup-btn {background:var(--xm4-surface); border:1px solid var(--xm4-line); color:var(--xm4-text); box-shadow:none;}
.xm4 a.signup-btn:hover, .xm4 a.signup-btn:focus-visible {background:var(--xm4-soft); border-color:var(--xm4-accent); color:var(--xm4-accent);}
/* MR/Claude 10/18/2026: the logo above the sign-in form is the portal's email logo (request.site.logo_email), drawn for a white
   email background. Most are dark ink on transparent (support.webauthor.com: Webauthor-BW1.png), so on the dark card it all but
   vanished. In dark mode it sits on a light plate, which shows any logo, mono or colour, the way it was designed to be seen. */
[data-bs-theme="dark"] .xm4 .sign-holder > div:first-child img {background:#fff; padding:10px 18px; border-radius:12px; box-shadow:0 10px 24px -14px rgba(0,0,0,.8);}
/* Embedded / fullscreen pages: no shell chrome, single column, stickies start at 0. */
.xm4.fullscreen, .xm4.xm4-chromeless {--xm4-header:0px; --xm4-page-head:0px; --xm4-bottom:0px; --xm4-rail-col:0px; padding:0; background:var(--xm4-bg)!important;}
.xm4.fullscreen #wrapper, .xm4.xm4-chromeless #wrapper {grid-template-columns:minmax(0,1fr); min-height:0;}
.xm4.fullscreen .footer_bottom, .xm4.xm4-chromeless .footer_bottom {grid-column:1;}
.xm4.fullscreen #main, .xm4.xm4-chromeless #main {margin:0!important;}
.xm4.fullscreen #header, .xm4.fullscreen #nav, .xm4.xm4-chromeless #nav, .xm4.fullscreen .xm4-bottom-nav, .xm4.xm4-chromeless .xm4-bottom-nav {display:none;}
/* MR/Claude 10/20/2026: an embed (related records in a record's pod, any ?fullscreen page) shows only its content. _page_header.cfm's
   fullscreen style hides the page head, module menu, footer and instructions with plain selectors, which lose to ".xm4 .page-head
   {display:flex}" above, so the embed showed the module title, Add New and breadcrumbs (Mario). Same intent with the theme's
   specificity, plus pqGrid 11's "Drop group by column" bar and the grid "+" add-column button, which have no place in an embed. */
.xm4.fullscreen :is(.page-head, .navbar_category, #footer, #PageInstructionsBox, #AdvancedSearch, #xmcssmenu) {display:none !important;}
.xm4.fullscreen :is(.pq-group-header, .xm4-gac-add, .xm4-gac-panel) {display:none !important;}
/* MR/Claude 10/20/2026: and flush (Mario: no margins, padding or rounded corners when embedding): the pod around the embed is the
   frame. The same fullscreen style sets #main padding 0, which the theme's #main padding outranked; the page's own grid drops its
   card border, corners and shadow (a grid nested inside it keeps them). */
.xm4.fullscreen #main {padding:0 !important;}
.xm4.fullscreen :is(.pq-grid,#xm4-grid):not(.pq-grid .pq-grid) {border:0 !important; border-radius:0; box-shadow:none; margin:0;}
@media(prefers-reduced-motion:reduce) {.xm4 *, .xm4 *::before, .xm4 *::after {scroll-behavior:auto!important; transition:none!important; animation:none!important;}}
@media print {
  .xm4 {padding:0; background:white; color:black;}
  .xm4 #wrapper {display:block;}
  .xm4 #header,.xm4 #nav,.xm4 .control_panel_slider,.xm4 .xm4-bottom-nav,.xm4 .xm4-module-nav,.xm4 .xm4-module-trigger,.xm4 .xm4-status,.xm4 .xm4-backdrop,.xm4 .xm-drop-box,.xm4 .page-head .breadcrumbs {display:none!important;}
  .xm4 .page-head {position:static; border:0; background:none;}
  .xm4 #main {margin:0!important; padding:0;}
}