/* public/theme/xwerp/flow.css - the xwerp look, loaded last over the published XWUI parts (index.html)
   ============================================
   XWERP WORKSPACE - the workspace console's look (the "Good morning" home
   of 21-Oct-2026): white cards on a pale lavender ground, soft 10px
   controls, pill chips, a segmented tab strip and tables in a rounded
   frame. Indigo is action and progress, violet its companion, amber still
   means attention ("Needs you", close blockers).

   A theme layer, as XWUI themes are: tokens first, then the few component
   rules a token cannot reach. Every colour is a brand token defined here;
   the accent itself is XWUI's indigo (data-accent in index.html, theme.ts).
   ============================================ */

:root {
    --xwerp-indigo: #6366f1;
    --xwerp-lilac: #a5b4fc;
    --xwerp-deep: #4f46e5;
    --xwerp-amber: #f5b942;
    --xwerp-sky: #38bdf8;
    --xwerp-green: #10b981;
    --xwerp-violet: #8b5cf6;
    --xwerp-slate: #94a3b8;
    --xwerp-ink: #0d0e1a;
    --xwerp-ground: #f4f5fa;
    --xwerp-card-border: #e7e8f0;
    --xwerp-hairline: rgba(255, 255, 255, 0.08);
    --xwerp-glass: rgba(255, 255, 255, 0.035);

    --xwerp-text-gradient: linear-gradient(100deg, var(--xwerp-violet) 0%, var(--xwerp-indigo) 55%, var(--xwerp-sky) 100%);
}

/* -- shape: soft 10px controls, pill chips, 16px cards ---------------------- */

:root[data-theme] {
    --radius-button: 10px;
    --radius-chip: 999px;
    --radius-badge: 999px;
    --radius-tab: 8px;
    --radius-input: 10px;
    --radius-menu: 12px;
    --radius-popover: 14px;
    --radius-dialog: 20px;
    --radius-table: 16px;
    --radius-container: 16px;
    --radius-lg: 16px;
    --focus-ring-color: var(--xwerp-indigo);
}
:root[data-theme] :focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 3px; }
:root[data-theme] .xwui-button { border-radius: var(--radius-button); }
:root[data-theme] .xwui-button.xwui-button-primary { --button-font-weight: 700; font-weight: 700; }

/* -- the ground: a pale lavender page, white cards on it ------------------- */

html[data-theme="dark"] .xwui-shell-app-main {
    background:
        radial-gradient(60rem 28rem at 88% -8%, rgba(99, 102, 241, 0.16), transparent 62%),
        radial-gradient(44rem 26rem at -6% 108%, rgba(139, 92, 246, 0.08), transparent 60%),
        var(--xwerp-ink);
}
html[data-theme="light"] .xwui-shell-app-main { background: var(--xwerp-ground); }
html[data-theme="light"] .xwui-shell-app-sidebar { background: #fafbfe; }
html[data-theme="dark"] .xwui-shell-app-sidebar { background: #090a14; }
html[data-theme="light"] main .xwui-card {
    border: 1px solid var(--xwerp-card-border);
    border-radius: var(--radius-container);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

/* -- figure tiles: an eyebrow, a display figure, the tone as a glow -------- */

.xwerp-kpi-tone--sky { --xwerp-tone: var(--xwerp-sky); }
.xwerp-kpi-tone--amber { --xwerp-tone: var(--xwerp-amber); }
.xwerp-kpi-tone--green { --xwerp-tone: var(--xwerp-green); }
.xwerp-kpi-tone--violet { --xwerp-tone: var(--xwerp-violet); }
.xwerp-kpi-tone--slate { --xwerp-tone: var(--xwerp-slate); }

html[data-theme="dark"] .xwerp-kpi-card[class*="xwerp-kpi-tone--"] .xwui-card,
html[data-theme="dark"] .xwerp-kpi-card[class*="xwerp-kpi-tone--"].xwui-card {
    background:
        radial-gradient(120% 150% at 100% 100%, color-mix(in srgb, var(--xwerp-tone) 34%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--xwerp-hairline);
    border-radius: var(--radius-lg);
    color: #e6edf3;
}
html[data-theme="light"] .xwerp-kpi-card[class*="xwerp-kpi-tone--"] .xwui-card,
html[data-theme="light"] .xwerp-kpi-card[class*="xwerp-kpi-tone--"].xwui-card {
    background:
        radial-gradient(120% 150% at 100% 100%, color-mix(in srgb, var(--xwerp-tone) 26%, transparent), transparent 62%),
        #ffffff;
    border: 1px solid color-mix(in srgb, var(--xwerp-tone) 30%, #e5e7eb);
    border-radius: var(--radius-lg);
}
html[data-theme] .xwerp-kpi-card[class*="xwerp-kpi-tone--"] .xwerp-kpi-mark {
    background: color-mix(in srgb, var(--xwerp-tone) 22%, transparent);
    color: var(--xwerp-tone);
}
.xwerp-kpi-card .xwui-statistic-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
:root[lang="ar"] .xwerp-kpi-card .xwui-statistic-title { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.xwerp-kpi-card .xwui-statistic-value {
    white-space: nowrap;
}

/* -- tabs: a segmented strip, the open one a raised white key ------------- */

:root[data-theme] main .xwui-tabs.xwui-tabs-button .xwui-tabs-list {
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px;
    background: var(--xwerp-glass) !important;
}
html[data-theme="light"] main .xwui-tabs.xwui-tabs-button .xwui-tabs-list { background: #eceef4 !important; border-color: transparent !important; }
:root[data-theme] main .xwui-tabs.xwui-tabs-button .xwui-tab { border-radius: var(--radius-tab); }
html[data-theme="dark"] main .xwui-tabs.xwui-tabs-button .xwui-tab-active {
    background: rgba(99, 102, 241, 0.18);
    color: var(--xwerp-lilac);
    box-shadow: inset 0 0 0 1px rgba(165, 180, 252, 0.35);
}
html[data-theme="light"] main .xwui-tabs.xwui-tabs-button .xwui-tab-active {
    background: #ffffff;
    color: var(--xwerp-deep);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 0 0 1px rgba(79, 70, 229, 0.12);
}

/* -- overview cockpit (src/pages/overview/cockpit.ts) ------------------------ */

.xwerp-cockpit { display: grid; gap: var(--spacing-md, 16px); margin-bottom: var(--spacing-xl, 32px); }
.xwerp-cockpit-scope { max-width: 20rem; }

/* -- tables: a rounded frame, quiet header ---------------------------------- */

:root[data-theme] main .xwui-dt {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-table);
    overflow: hidden;
}
html[data-theme="dark"] main .xwui-dt { background: rgba(255, 255, 255, 0.02); }

/* -- sidebar: area sections, modules, page rows ------------------------------ */

/* An area is a quiet heading over its modules (src/app/nav-sections.ts), not
   a row to open. The menu drops a node's className, so the heading is found by
   its key, which the menu renders as data-id. This sheet loads before the
   menu's own, so each rule leads with .xwui-shell-app-nav to outweigh it. */
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item[data-id^="domain-"] > .xwui-menu-link {
    height: auto;
    min-height: 0;
    margin-top: 18px;
    padding-block: 4px;
    background: none;
    color: var(--text-secondary, #6b7280);
}
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item[data-id^="domain-"] > .xwui-menu-link .xwui-menu-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item[data-id^="domain-"] > .xwui-menu-link:hover,
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected[data-id^="domain-"] > .xwui-menu-link {
    background: none;
    color: var(--xwerp-deep);
}
html[data-theme="dark"] .xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item[data-id^="domain-"] > .xwui-menu-link:hover,
html[data-theme="dark"] .xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item-selected[data-id^="domain-"] > .xwui-menu-link {
    color: var(--xwerp-lilac);
}
:root[lang="ar"] .xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-item[data-id^="domain-"] > .xwui-menu-link .xwui-menu-label {
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
}
/* The collapsed icon rail has no room for words. */
.xwui-shell-app-nav .xwui-menu.xwui-menu-items-icon .xwui-menu-item[data-id^="domain-"] { display: none; }

/* A module's pages hang off one guide line, with no rule between rows and the
   open page marked on the line. */
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar.xwui-menu-vertical .xwui-menu-list > .xwui-menu-item > .xwui-menu-submenu {
    margin: 4px 0 6px;
    margin-inline-start: 24px;
    padding-inline-start: 4px;
    border-inline-start: 1px solid var(--border-color);
    border-radius: 0;
    background: none;
}
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu > .xwui-menu-item + .xwui-menu-item { border-top: 0; }
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link {
    height: 32px;
    border-radius: 8px;
}
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-link::before { content: none; }
.xwui-shell-app-nav .xwui-menu.xwui-menu-appearance-sidebar .xwui-menu-submenu .xwui-menu-item-selected > .xwui-menu-link .xwui-menu-label { font-weight: 600; }

/* -- purpose boards: a record is not a task ---------------------------------- */

/* XWUIKanbanBoard draws a "toggle complete" circle on every card. On a page's
   pipeline (src/pages/purpose/pipeline.ts) a card is a record in a stage, which
   the board does not change, so the circle would be a control that does nothing. */
[data-purpose="pipeline"] .xwui-kanban-board-complete-btn { display: none; }
/* XWUIInbox stars a row in the reader's own inbox; an approval queue
   (src/pages/purpose/approvals.ts) keeps no stars, so the star would save nothing.
   Hidden, not removed: the row is a grid, and its column keeps the layout. */
[data-purpose="approvals"] .xwui-inbox-item-star { visibility: hidden; }

/* -- the boot splash: the mark and wordmark in the theme's ink -------------- */

/* The splash's logo kept the dark theme's near-white text colour (230, 237,
   243) on the light theme's white ground, so the wordmark and the mark's
   currentColor half vanished. Neither the splash's own colour nor the text
   token has settled while it shows, so the ink follows data-theme, which the
   head script sets before the first paint. */
html[data-theme="light"] .xwui-splash-screen .xwui-logo,
html[data-theme="light"] .xwui-splash-screen .xwui-logo-brand-title {
    color: #111827;
}
html[data-theme="dark"] .xwui-splash-screen .xwui-logo,
html[data-theme="dark"] .xwui-splash-screen .xwui-logo-brand-title {
    color: #e6edf3;
}

/* -- workspace frame (src/app/workspace-frame.ts) ------------------------------ */

/* Area tones: the chip of a module, the swatch of an area. One per area of the
   sidebar (workspace-model.ts domainTone). */
.xwerp-tone--finance { --xwerp-tone: #6366f1; }
.xwerp-tone--people { --xwerp-tone: #db2777; }
.xwerp-tone--sales { --xwerp-tone: #ea580c; }
.xwerp-tone--supply-chain { --xwerp-tone: #d97706; }
.xwerp-tone--operations { --xwerp-tone: #0284c7; }
.xwerp-tone--governance { --xwerp-tone: #65a30d; }
.xwerp-tone--intelligence { --xwerp-tone: #7c3aed; }
.xwerp-tone--platform { --xwerp-tone: #475569; }
.xwerp-tone--unfiled { --xwerp-tone: #64748b; }

/* The rail: 58px, quiet icons, the open one a raised white key. */
html[data-theme] .xwui-shell-app-activitybar {
    width: 58px;
    padding-block: 12px;
    border-inline-end: 1px solid var(--border-color);
    background: #f7f7fb;
}
html[data-theme="dark"] .xwui-shell-app-activitybar { background: #07080f; }
.xwui-shell-app-activitybar .xwui-navigation-rail { gap: 6px; align-items: center; background: none; }
.xwui-shell-app-activitybar .xwui-navigation-rail-item {
    width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    border-radius: 11px;
    color: #6b7280;
    background: none;
}
.xwui-shell-app-activitybar .xwui-navigation-rail-item:hover { background: #eceef6; color: #374151; }
.xwui-shell-app-activitybar .xwui-navigation-rail-item-active,
.xwui-shell-app-activitybar .xwui-navigation-rail-item-active:hover {
    background: #ffffff;
    color: var(--xwerp-deep);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 0 0 1px rgba(79, 70, 229, 0.12);
}
html[data-theme="dark"] .xwui-shell-app-activitybar .xwui-navigation-rail-item-active {
    background: rgba(99, 102, 241, 0.2);
    color: var(--xwerp-lilac);
    box-shadow: none;
}
/* The tools and the account sit at the foot of the rail, as in the console. */
.xwui-shell-app-activitybar .xwui-navigation-rail-item.xwerp-ws-rail-foot { margin-top: auto; }

/* The sidebar: a pale panel beside the rail. */
html[data-theme] .xwui-shell-app-sidebar.xwui-shell-app-sidebar-expanded { width: 12.5rem; min-width: 12.5rem; }
/* Collapsed (the shell's tablet width), the sidebar's icon strip would repeat
   the rail beside it, and its views have no icon form: it steps aside, and the
   menu button still opens it in full. */
.xwui-shell-app-activitybar ~ .xwui-shell-app-sidebar.xwui-shell-app-sidebar-collapsed { display: none; }
html[data-theme="light"] .xwui-shell-app-sidebar { background: #f6f7fb; border-inline-end: 1px solid var(--xwerp-card-border); }
.xwui-shell-app-sidebar .xwui-panel { background: none; }
.xwui-shell-app-sidebar .xwui-panel-header { padding: 14px 12px 6px; border: 0; }
.xwui-shell-app-sidebar .xwui-panel-body { padding: 0 8px; }
.xwui-shell-app-sidebar .xwui-panel-footer { padding: 10px 14px; border-top: 1px solid var(--xwerp-card-border); }

/* The sidebar never scrolls sideways: at a narrow width (the sidebar can be
   resized) its head and rows shrink and cut their words instead. */
.xwui-shell-app-sidebar .xwui-shell-app-view-host { overflow-x: hidden; }
.xwerp-ws-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.xwerp-ws-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-inline: 2px; }
.xwerp-ws-title > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-ws-company > :not(.xwerp-ws-company-mark) { min-width: 0; }
.xwerp-ws-company .xwui-typography { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-ws-title h2, .xwerp-ws-title .xwui-typography { margin: 0; font-size: 15px; font-weight: 700; }
.xwerp-ws-count {
    min-width: 26px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #eceef4;
    color: #4b5563;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
.xwerp-ws-company {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-theme="dark"] .xwerp-ws-company { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); }
.xwerp-ws-company-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--xwerp-violet), var(--xwerp-indigo));
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}
.xwerp-ws-company-name .xwui-typography { font-size: 13px; font-weight: 600; }
.xwerp-ws-switcher { margin-top: -4px; }

.xwerp-ws-view { display: grid; gap: 14px; padding-block: 6px 12px; }
.xwerp-ws-section { display: grid; gap: 1px; }
.xwerp-ws-heading { padding: 4px 6px 6px; }
.xwerp-ws-heading .xwui-typography {
    color: #9ca3af;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 14px;
    text-transform: uppercase;
}
:root[lang="ar"] .xwerp-ws-heading .xwui-typography { letter-spacing: 0; font-size: 12px; text-transform: none; }

.xwerp-ws-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 29px;
    padding: 4px 6px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.xwerp-ws-row:hover { background: #eceef6; }
html[data-theme="dark"] .xwerp-ws-row:hover { background: rgba(255, 255, 255, 0.05); }
.xwerp-ws-chip {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 20px;
    padding-inline: 3px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--xwerp-tone, #64748b) 13%, #ffffff);
    color: color-mix(in srgb, var(--xwerp-tone, #64748b) 82%, #111827);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.xwerp-ws-chip:empty { display: none; }
html[data-theme="dark"] .xwerp-ws-chip { background: color-mix(in srgb, var(--xwerp-tone, #64748b) 24%, transparent); color: #e5e7eb; }
.xwerp-ws-row-words { display: grid; min-width: 0; }
.xwerp-ws-row-label .xwui-typography {
    overflow: hidden;
    color: #374151;
    font-size: 13px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme="dark"] .xwerp-ws-row-label .xwui-typography { color: #e5e7eb; }
.xwerp-ws-row-detail .xwui-typography,
.xwerp-ws-empty .xwui-typography {
    overflow: hidden;
    color: #9ca3af;
    font-size: 11px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwerp-ws-empty { padding: 2px 6px; }
.xwerp-ws-empty .xwui-typography { white-space: normal; }

/* An area's modules: a row each that opens its pages, on one guide line. */
.xwerp-ws-area { gap: 1px; }
/* The row is the XWUIAccordion header's title: the accordion draws the button, the chevron and the hover. */
.xwerp-ws-module-row {
    display: flex;
    align-items: center;
    min-height: 30px;
}
.xwerp-ws-module-row .xwui-typography { font-weight: 500; }
/* Each module wears its own icon (landings' moduleIcon) in a small tile in its
   area's hue; the tile fills when the module is open. */
.xwerp-ws-module-row { gap: 9px; }
.xwerp-ws-module-row > .xwerp-ws-row-words { flex: 1; }
.xwerp-ws-module-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--xwerp-tone) 22%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--xwerp-tone) 8%, transparent);
    color: var(--xwerp-tone);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.xwerp-ws-module-icon .xwui-icon { display: grid; place-items: center; }
.xwerp-ws-module-row:hover .xwerp-ws-module-icon { border-color: color-mix(in srgb, var(--xwerp-tone) 40%, transparent); }
.xwerp-ws-module-row[aria-expanded="true"] .xwerp-ws-module-icon {
    border-color: transparent;
    background: var(--xwerp-tone);
    color: #ffffff;
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--xwerp-tone) 70%, transparent);
}
html[data-theme="dark"] .xwerp-ws-module-icon {
    border-color: color-mix(in srgb, var(--xwerp-tone) 35%, transparent);
    background: color-mix(in srgb, var(--xwerp-tone) 14%, transparent);
    color: color-mix(in srgb, var(--xwerp-tone) 55%, #ffffff);
}
html[data-theme="dark"] .xwerp-ws-module-row[aria-expanded="true"] .xwerp-ws-module-icon { background: color-mix(in srgb, var(--xwerp-tone) 70%, transparent); color: #ffffff; }
/* The page list's guide line now hangs from the middle of the icon. */
.xwerp-ws-area .xwerp-ws-module-pages { margin-inline-start: 17px; }
@media (prefers-reduced-motion: reduce) { .xwerp-ws-module-icon { transition: none; } }
.xwerp-ws-module-pages {
    display: grid;
    gap: 1px;
    margin: 2px 0 6px;
    margin-inline-start: 12px;
    padding-inline-start: 8px;
    border-inline-start: 1px solid var(--xwerp-card-border);
}
.xwerp-ws-module-pages[hidden] { display: none; }
.xwerp-ws-page {
    overflow: hidden;
    padding: 4px 6px;
    border-radius: 7px;
    color: #4b5563;
    font-size: 12.5px;
    line-height: 18px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwerp-ws-page:hover { background: #eceef6; color: #111827; }
.xwerp-ws-page.is-here { background: #eef2ff; color: var(--xwerp-deep); font-weight: 600; }
html[data-theme="dark"] .xwerp-ws-page { color: #d1d5db; }
html[data-theme="dark"] .xwerp-ws-page:hover { background: rgba(255, 255, 255, 0.05); color: #f3f4f6; }
html[data-theme="dark"] .xwerp-ws-page.is-here { background: rgba(99, 102, 241, 0.2); color: var(--xwerp-lilac); }

/* The health line: a green dot when the API reports itself well. */
.xwerp-ws-health { display: flex; align-items: center; gap: 7px; }
.xwerp-ws-health::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
}
.xwerp-ws-health.is-ok::before { background: #10b981; }
.xwerp-ws-health .xwui-typography { color: #6b7280; font-size: 11px; }

/* The status line along the foot of the window. */
html[data-theme] .xwui-shell-app-statusbar {
    min-height: 22px;
    padding: 2px 14px;
    border-top: 1px solid var(--xwerp-card-border);
    background: #ffffff;
}
html[data-theme="dark"] .xwui-shell-app-statusbar { background: #07080f; border-color: var(--xwerp-hairline); }
.xwerp-ws-status { display: flex; align-items: center; gap: 14px; }
.xwerp-ws-status .xwui-typography {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    line-height: 16px;
}

/* The top bar: the crumb, the Ask bar centred and widest, then the chips. */
html[data-theme] .xwui-shell-app-main > .xwui-panel > .xwui-panel-header {
    border-bottom: 1px solid var(--xwerp-card-border);
    background: #ffffff;
}
html[data-theme="dark"] .xwui-shell-app-main > .xwui-panel > .xwui-panel-header { background: #0b0c16; border-color: var(--xwerp-hairline); }
.xwui-shell-app-main-header { min-height: 56px; align-items: center; }
.xwui-shell-app-main-header-content { flex: 1 1 auto; min-width: 0; }
.xwui-shell-app-main-header-content .xwui-container { padding-block: 10px !important; }
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs { font-size: 13px; }
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs-current { font-weight: 600; }

.xwerp-ws-topbar > .xwui-stack { flex-wrap: nowrap; gap: 8px; }
.xwerp-ws-topbar > .xwui-stack > .xwui-stack-item:first-child { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.xwerp-ws-ask { width: min(100%, 460px); }
.xwerp-ws-ask > .xwui-stack { flex-wrap: nowrap; position: relative; }
.xwerp-ws-ask > .xwui-stack > .xwui-stack-item:first-child { flex: 1 1 auto; }
.xwerp-ws-ask .xwui-button {
    justify-content: flex-start;
    width: 100%;
    height: 34px;
    padding-inline: 12px 64px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 10px;
    background: #ffffff;
    color: #6b7280;
    font-weight: 400;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.xwerp-ws-ask .xwui-button .xwui-icon { color: var(--xwerp-violet); }
.xwerp-ws-ask .xwui-button .xwui-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-ws-ask .xwui-button:hover { border-color: #c7caf7; background: #ffffff; }
/* The shortcut sits inside the bar's end, as a key cap. */
.xwerp-ws-ask > .xwui-stack > .xwui-stack-item:last-child {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
html[data-theme="dark"] .xwerp-ws-ask .xwui-button { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); color: #9ca3af; }

/* Approvals: a white chip with the count in indigo. */
.xwerp-ws-actions .xwui-button {
    height: 34px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-weight: 600;
}
.xwerp-ws-actions .xwui-button .xwui-icon { display: none; }
.xwerp-ws-actions .xwui-badge,
.xwerp-ws-actions .xwui-badge-count {
    background: var(--xwerp-indigo) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .xwerp-ws-actions .xwui-button { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); color: #e5e7eb; }

/* EN | ع: two keys in one chip, the live one raised. */
.xwerp-ws-lang {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 10px;
    background: #ffffff;
}
.xwerp-ws-lang .xwui-button { min-width: 30px; height: 28px; padding-inline: 8px; border-radius: 8px; color: #6b7280; font-weight: 600; }
.xwerp-ws-lang .xwui-button[aria-pressed="true"] { background: #eef0f6; color: #111827; }
html[data-theme="dark"] .xwerp-ws-lang { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); }
html[data-theme="dark"] .xwerp-ws-lang .xwui-button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #f3f4f6; }

/* As booked and the theme: chips of the same height. */
.xwerp-ws-topbar .xwui-setting-currency__btn {
    height: 34px;
    padding-inline: 11px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font-weight: 600;
}
.xwerp-ws-topbar .xwui-setting-currency__btn .xwui-setting-currency__mark { display: none; }
.xwerp-ws-topbar .xwerp-theme .xwui-style-toggle { height: 34px; border: 1px solid var(--xwerp-card-border); border-radius: 10px; background: #ffffff; }
html[data-theme="dark"] .xwerp-ws-topbar .xwui-setting-currency__btn,
html[data-theme="dark"] .xwerp-ws-topbar .xwerp-theme .xwui-style-toggle { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); color: #e5e7eb; }
/* XWUI's outline and ghost variants set their own border and ink at a higher
   weight than a single class; the top bar's chips are neutral, not accented. */
html[data-theme="light"] .xwerp-ws-topbar .xwui-button.xwui-button-outline,
html[data-theme="light"] .xwerp-ws-topbar .xwui-button.xwui-button-outline:hover {
    border-color: var(--xwerp-card-border);
    background: #ffffff;
}
html[data-theme="light"] .xwerp-ws-ask .xwui-button.xwui-button-outline,
html[data-theme="light"] .xwerp-ws-ask .xwui-button.xwui-button-outline .xwui-button-text { color: #6b7280; font-weight: 400; }
html[data-theme="light"] .xwerp-ws-actions .xwui-button.xwui-button-outline,
html[data-theme="light"] .xwerp-ws-actions .xwui-button.xwui-button-outline .xwui-button-text { color: #111827; }
html[data-theme] .xwerp-ws-lang .xwui-button.xwui-button-ghost[aria-pressed="true"] { background: #eef0f6; color: #111827; }
html[data-theme="dark"] .xwerp-ws-lang .xwui-button.xwui-button-ghost[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: #f3f4f6; }
/* One line on a laptop: XWUIStack writes flex-wrap inline, so only !important
   reaches it. The Ask bar gives way first; the crumb keeps its words. */
@media (min-width: 721px) {
    .xwerp-ws-topbar > .xwui-stack { flex-wrap: nowrap !important; }
}
.xwerp-ws-topbar > .xwui-stack > .xwui-stack-item { flex: none; }
.xwerp-ws-topbar > .xwui-stack > .xwui-stack-item:first-child { flex: 1 1 auto; min-width: 120px; }
.xwui-shell-app-main-header-bar { flex: none; max-width: 40%; }
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs-list { flex-wrap: nowrap; white-space: nowrap; }
/* A phone: the Ask bar takes the first line, the chips the second. */
@media (max-width: 720px) {
    .xwerp-ws-topbar > .xwui-stack > .xwui-stack-item:first-child { flex-basis: 100%; }
    .xwerp-ws-ask > .xwui-stack > .xwui-stack-item:last-child { display: none; }
    .xwerp-ws-ask .xwui-button { padding-inline-end: 12px; }
    .xwui-shell-app-main-header-bar { display: none; }
}
html[data-theme="dark"] .xwerp-ws-ask .xwui-button.xwui-button-outline,
html[data-theme="dark"] .xwerp-ws-ask .xwui-button.xwui-button-outline .xwui-button-text { color: #9ca3af; font-weight: 400; }
html[data-theme="dark"] .xwerp-ws-actions .xwui-button.xwui-button-outline,
html[data-theme="dark"] .xwerp-ws-actions .xwui-button.xwui-button-outline .xwui-button-text { color: #e5e7eb; }
html[data-theme="dark"] .xwerp-ws-topbar .xwui-button.xwui-button-outline { border-color: var(--xwerp-hairline); background: rgba(255, 255, 255, 0.04); }

/* -- workspace home (src/pages/workspace-home) ---------------------------------- */

.xwerp-home { display: grid; gap: 14px; padding: 20px 20px 28px; }
.xwerp-home-tone--indigo { --xwerp-tone: #6366f1; }
.xwerp-home-tone--rose { --xwerp-tone: #ef4444; }
.xwerp-home-tone--sky { --xwerp-tone: #0ea5e9; }
.xwerp-home-tone--amber { --xwerp-tone: #d97706; }

/* The date line: a rule, then the day in small capitals. */
.xwerp-home-dateline { display: flex; align-items: center; gap: 10px; }
.xwerp-home-dateline::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--xwerp-indigo); }
.xwerp-home-dateline .xwui-typography {
    margin: 0;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
:root[lang="ar"] .xwerp-home-dateline .xwui-typography { letter-spacing: 0; font-size: 12px; }
.xwerp-home-hello { margin: 4px 0 0; font-size: 27px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.xwerp-home-hello-rest { color: #9ca3af; font-weight: 600; }
:root[lang="ar"] .xwerp-home-hello { letter-spacing: 0; }

/* The four figure cards. */
.xwerp-home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .xwerp-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .xwerp-home-kpis { grid-template-columns: minmax(0, 1fr); } }
.xwerp-home-kpi {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 112px;
    padding: 12px 14px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-theme="dark"] .xwerp-home-kpi { background: rgba(255, 255, 255, 0.03); border-color: var(--xwerp-hairline); }
.xwerp-home-kpi-head { display: flex; align-items: center; gap: 8px; }
.xwerp-home-kpi-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--xwerp-tone); }
.xwerp-home-kpi-head .xwui-typography { flex: 1; margin: 0; color: #4b5563; font-size: 12px; font-weight: 500; }
html[data-theme="dark"] .xwerp-home-kpi-head .xwui-typography { color: #9ca3af; }
.xwerp-home-kpi-open { color: #9ca3af; font-size: 13px; text-decoration: none; }
.xwerp-home-kpi-open:hover { color: var(--xwerp-deep); }
:root[dir="rtl"] .xwerp-home-kpi-open { transform: scaleX(-1); }
.xwerp-home-kpi-body { display: grid; gap: 8px; }
.xwerp-home-kpi-value .xwui-typography { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.xwerp-home-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.xwerp-home-kpi-foot--stack { display: grid; justify-content: stretch; gap: 6px; }
.xwerp-home-kpi-foot .xwui-typography { margin: 0; color: #9ca3af; font-size: 11px; }

.xwerp-home-spark { flex: none; width: 46%; height: 36px; }
.xwerp-home-spark-line { fill: none; stroke: var(--xwerp-indigo); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.xwerp-home-spark-area { fill: color-mix(in srgb, var(--xwerp-indigo) 14%, transparent); }

.xwerp-home-bar { display: flex; gap: 2px; height: 6px; overflow: hidden; border-radius: 4px; }
.xwerp-home-bar-seg { flex: 0 0 var(--share); background: var(--xwerp-bucket); }
.xwerp-home-bucket--0 { --xwerp-bucket: #6366f1; }
.xwerp-home-bucket--1 { --xwerp-bucket: #f5b942; }
.xwerp-home-bucket--2 { --xwerp-bucket: #f59e0b; }
.xwerp-home-bucket--3 { --xwerp-bucket: #f97316; }
.xwerp-home-bucket--4 { --xwerp-bucket: #f43f5e; }
.xwerp-home-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.xwerp-home-legend-item { display: flex; align-items: center; gap: 4px; }
.xwerp-home-legend-item::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--xwerp-bucket); }

.xwerp-home-blockers { display: flex; gap: 4px; }
.xwerp-home-blocker { flex: 1; height: 6px; border-radius: 4px; background: #b45309; }

/* The middle row: the company map and Cortex, 3 to 2. One alone spans it. */
.xwerp-home-middle { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.xwerp-home-middle > :only-child { grid-column: 1 / -1; }
@media (max-width: 1100px) { .xwerp-home-middle { grid-template-columns: minmax(0, 1fr); } }
.xwerp-home-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
html[data-theme="dark"] .xwerp-home-panel { background: rgba(255, 255, 255, 0.03); border-color: var(--xwerp-hairline); }
.xwerp-home-panel h2.xwui-typography, .xwerp-home-panel h2 .xwui-typography { margin: 0; font-size: 15px; font-weight: 700; }

/* Cortex: the orb, the title, the level switch, then the cards. */
.xwerp-home-cortex-head { display: flex; align-items: center; gap: 10px; }
.xwerp-home-orb {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fde68a, #f472b6 40%, #8b5cf6 70%, #4f46e5);
}
.xwerp-home-cortex-titles { flex: 1; min-width: 0; }
.xwerp-home-cortex-titles .xwui-typography { margin: 0; }
.xwerp-home-cortex-titles .xwui-typography-caption { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-home-autonomy { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #e9eaf0; }
html[data-theme="dark"] .xwerp-home-autonomy { background: rgba(255, 255, 255, 0.06); }
html[data-theme] .xwerp-home-autonomy .xwui-button.xwui-button-ghost { height: 24px; padding-inline: 8px; border-radius: 7px; color: #4b5563; font-size: 11px; font-weight: 500; }
html[data-theme] .xwerp-home-autonomy .xwui-button.xwui-button-ghost[aria-pressed="true"] { background: #ffffff; color: var(--xwerp-deep); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.1); }
html[data-theme="dark"] .xwerp-home-autonomy .xwui-button.xwui-button-ghost[aria-pressed="true"] { background: rgba(99, 102, 241, 0.25); color: var(--xwerp-lilac); }
.xwerp-home-autonomy .xwui-button:disabled { opacity: 0.45; }

.xwerp-home-cortex-list { display: grid; gap: 8px; }
.xwerp-home-cortex-item.is-open {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--xwerp-card-border);
    border-inline-start: 3px solid var(--xwerp-violet);
    border-radius: 12px;
}
.xwerp-home-cortex-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xwerp-home-cortex-line {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 12px;
    background: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.xwerp-home-cortex-line:hover { background: #f7f7fb; }
html[data-theme="dark"] .xwerp-home-cortex-line:hover { background: rgba(255, 255, 255, 0.04); }
.xwerp-home-cortex-line .xwui-typography { overflow: hidden; margin: 0; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-home-cortex-line::after { content: "⌄"; margin-inline-start: auto; color: #9ca3af; }
.xwerp-home-chip { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; }
.xwerp-home-chip--needs { background: #fef3c7; color: #92400e; }
.xwerp-home-chip--source { border: 1px solid #e9d5ff; background: #faf5ff; color: #7c3aed; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .xwerp-home-chip--needs { background: rgba(245, 185, 66, 0.16); color: #fcd34d; }
html[data-theme="dark"] .xwerp-home-chip--source { border-color: rgba(139, 92, 246, 0.4); background: rgba(139, 92, 246, 0.12); color: #c4b5fd; }

/* The last row: order to cash, the decisions, the ledger, 2 to 1 to 1.4. */
.xwerp-home-bottom { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: stretch; }
@media (max-width: 1100px) { .xwerp-home-bottom { grid-template-columns: minmax(0, 1fr); } }
.xwerp-home-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.xwerp-home-panel-head .xwui-typography { margin: 0; }
.xwerp-home-panel-head .xwui-typography-caption { font-size: 11px; }

/* Order to cash: five steps on one line, the chosen one ringed. */
.xwerp-home-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xwerp-home-track::before {
    content: "";
    position: absolute;
    inset-inline: 10%;
    top: 16px;
    height: 2px;
    background: linear-gradient(90deg, #fca5a5, #c4b5fd, var(--xwerp-indigo), #e5e7eb);
}
:root[dir="rtl"] .xwerp-home-track::before { transform: scaleX(-1); }
.xwerp-home-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
}
.xwerp-home-step-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 50%;
    background: #ffffff;
    color: #9ca3af;
    font-size: 13px;
}
.xwerp-home-step.is-filled .xwerp-home-step-mark { border-color: #fecaca; background: #fff1f2; color: #e11d48; }
.xwerp-home-step.is-chosen .xwerp-home-step-mark {
    border-color: var(--xwerp-indigo);
    background: var(--xwerp-indigo);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}
html[data-theme="dark"] .xwerp-home-step-mark { background: #11131f; border-color: var(--xwerp-hairline); }
.xwerp-home-step .xwui-typography { overflow: hidden; max-width: 100%; margin: 0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-home-now { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.xwerp-home-now > .xwui-typography { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

/* Decisions: a ring of waiting, approved and rejected, and its legend. */
.xwerp-home-decision--0 { --xwerp-slice: #a78bfa; }
.xwerp-home-decision--1 { --xwerp-slice: #10b981; }
.xwerp-home-decision--2 { --xwerp-slice: #f43f5e; }
.xwerp-home-donut-row { display: flex; align-items: center; gap: 18px; }
.xwerp-home-donut { flex: none; width: 104px; height: 104px; transform: rotate(-90deg); }
.xwerp-home-donut-ring { fill: none; stroke: #eef0f5; stroke-width: 14; }
html[data-theme="dark"] .xwerp-home-donut-ring { stroke: rgba(255, 255, 255, 0.06); }
.xwerp-home-donut-slice { fill: none; stroke: var(--xwerp-slice); stroke-width: 14; }
.xwerp-home-donut-legend { display: grid; gap: 6px; }
.xwerp-home-donut-item { display: flex; align-items: center; gap: 6px; }
.xwerp-home-donut-item::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--xwerp-slice); }
.xwerp-home-donut-item .xwui-typography { margin: 0; font-size: 12px; }

/* Ledger activity: weekdays down, weeks across, five shades of indigo. */
.xwerp-home-heat { display: grid; grid-template-columns: auto repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.xwerp-home-heat-day { padding-inline-end: 6px; color: #9ca3af; font-size: 10px; }
.xwerp-home-heat-cell { height: 13px; padding: 0; border: 0; border-radius: 3px; background: #eef0f8; cursor: pointer; }
.xwerp-home-heat--1 { background: #c7d2fe; }
.xwerp-home-heat--2 { background: #a5b4fc; }
.xwerp-home-heat--3 { background: #818cf8; }
.xwerp-home-heat--4 { background: #6366f1; }
html[data-theme="dark"] .xwerp-home-heat-cell.xwerp-home-heat--0 { background: rgba(255, 255, 255, 0.06); }
.xwerp-home-heat-cell:focus-visible { outline-offset: 1px; }
.xwerp-home-heat-foot .xwui-typography { margin: 0; font-size: 11px; }
.xwerp-home-now > :nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.xwerp-home-now > :nth-child(2) .xwui-typography { overflow: hidden; margin: 0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-home-now > :last-child { flex: none; }
.xwerp-home-now .xwui-button { white-space: nowrap; }

/* Your company, as one model: the area list beside an isometric city. */
.xwerp-home-map { align-self: stretch; }
.xwerp-home-map [hidden], .xwerp-home-city.is-hidden { display: none !important; }
.xwerp-home-map-head { flex-wrap: wrap; }
.xwerp-home-map-views { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--radius-input); background: color-mix(in srgb, var(--xwerp-slate) 12%, transparent); }
.xwerp-home-map-views button[aria-pressed="true"] { background: color-mix(in srgb, var(--xwerp-indigo) 18%, transparent); color: var(--xwerp-indigo); }
.xwerp-home-map-titles { flex: 1 1 12rem; }
.xwerp-home-map-controls { margin-inline-start: auto; }
.xwerp-home-map-views button, .xwerp-home-map-controls button { white-space: nowrap; }
.xwerp-home-map-help { margin-block: 4px; }
.xwerp-home-map-help .xwui-typography { margin: 0; font-size: 10px; }
.xwerp-home-map-body.is-group { grid-template-columns: minmax(0, 1fr); }
.xwerp-home-map .xwerp-home-map-area { padding: 0; border: 0; }
.xwerp-home-map-area > button { width: 100%; justify-content: flex-start; text-align: start; }
.xwerp-home-map-area > button::before { content: ""; width: 7px; height: 7px; border-radius: 2px; margin-inline-end: 5px; flex: none; background: var(--xwerp-tone, var(--xwerp-slate)); }
.xwerp-home-map-area::before { display: none !important; }
.xwerp-home-map-area button[aria-pressed="true"] { background: color-mix(in srgb, var(--xwerp-indigo) 14%, transparent); }
.xwerp-home-map .xwerp-home-city { min-height: 15rem; max-height: 23rem; touch-action: pan-y; cursor: grab; }
.xwerp-home-city:active { cursor: grabbing; }
.xwerp-home-tower { cursor: pointer; }
.xwerp-home-tower:focus-visible { outline: none; }
.xwerp-home-tower.is-selected polygon, .xwerp-home-tower:focus-visible polygon { stroke: var(--xwerp-indigo); stroke-width: 2; }
.xwerp-home-map-detail { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-block-start: 10px; border-block-start: 1px solid var(--xwerp-card-border); }
.xwerp-home-map-detail .xwui-typography { margin: 0; }
.xwerp-home-map-detail > :last-child:not(:first-child) { margin-inline-start: auto; }
.xwerp-home-map-state { min-height: 12rem; display: grid; place-content: center; gap: 8px; }
.xwerp-home-map-flow-note:empty { display: none; }
html[data-theme="dark"] .xwerp-home-map-detail { border-color: var(--xwerp-hairline); }
@media (max-width: 720px) {
    .xwerp-home-map-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xwerp-home-map-controls { flex-wrap: wrap; }
    .xwerp-home-map-detail { align-items: flex-start; }
}
.xwerp-home-map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xwerp-home-map-titles { min-width: 0; }
.xwerp-home-map-titles .xwui-typography { margin: 0; }
.xwerp-home-map-titles .xwui-typography-caption { font-size: 11px; }
.xwerp-home-map-controls { display: flex; flex: none; gap: 6px; }
.xwerp-home-map-controls button {
    height: 30px;
    padding-inline: 10px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 9px;
    background: #ffffff;
    color: #374151;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.xwerp-home-map-controls .xwerp-home-map-step { width: 30px; padding: 0; }
.xwerp-home-map-flows { display: flex; align-items: center; gap: 6px; }
.xwerp-home-map-flows::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c4b5fd; }
.xwerp-home-map-flows[aria-pressed="true"] { border-color: #c7d2fe !important; background: #eef2ff !important; color: var(--xwerp-deep) !important; }
.xwerp-home-map-flows[aria-pressed="true"]::before { background: var(--xwerp-violet); }
html[data-theme="dark"] .xwerp-home-map-controls button { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); color: #e5e7eb; }
:root[dir="rtl"] .xwerp-home-map-step { transform: scaleX(-1); }

.xwerp-home-map-body { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 720px) { .xwerp-home-map-body { grid-template-columns: minmax(0, 1fr); } }
.xwerp-home-map-legend { display: grid; gap: 2px; align-self: start; }
.xwerp-home-map-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #374151;
    font: inherit;
    font-size: 12px;
    text-align: start;
    cursor: pointer;
}
.xwerp-home-map-area::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--xwerp-tone, #64748b); }
.xwerp-home-map-area span:first-child { flex: 1; }
.xwerp-home-map-count { color: #9ca3af; font-variant-numeric: tabular-nums; }
.xwerp-home-map-area:hover { background: #f4f5fa; }
.xwerp-home-map-area[aria-pressed="true"] { border-color: #c7d2fe; background: #eef2ff; color: #111827; font-weight: 600; }
html[data-theme="dark"] .xwerp-home-map-area { color: #d1d5db; }
html[data-theme="dark"] .xwerp-home-map-area[aria-pressed="true"] { background: rgba(99, 102, 241, 0.18); border-color: rgba(165, 180, 252, 0.3); color: #f3f4f6; }

.xwerp-home-map-stage { min-width: 0; }
.xwerp-home-city { display: block; width: 100%; height: auto; max-height: 19rem; }
.xwerp-home-ground { fill: color-mix(in srgb, var(--xwerp-tone) 7%, #f8f9fc); stroke: color-mix(in srgb, var(--xwerp-tone) 18%, #e5e7eb); stroke-width: 1; }
html[data-theme="dark"] .xwerp-home-ground { fill: color-mix(in srgb, var(--xwerp-tone) 10%, #10121c); stroke: rgba(255, 255, 255, 0.08); }
.xwerp-home-district-label { fill: #6b7280; font-size: 9px; font-weight: 600; }
.xwerp-home-face-top { fill: color-mix(in srgb, var(--xwerp-tone) 38%, #ffffff); }
.xwerp-home-face-left { fill: color-mix(in srgb, var(--xwerp-tone) 78%, #ffffff); }
.xwerp-home-face-right { fill: color-mix(in srgb, var(--xwerp-tone) 92%, #1f2937); }
.xwerp-home-tower polygon { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.5; }
.xwerp-home-district, .xwerp-home-tower { transition: opacity 0.2s ease; }
.xwerp-home-district.is-dim, .xwerp-home-tower.is-dim { opacity: 0.22; }
.xwerp-home-arc { fill: none; stroke: color-mix(in srgb, var(--xwerp-tone) 70%, #6366f1); stroke-dasharray: 3 3; stroke-width: 1.2; opacity: 0.8; }
.xwerp-home-arc-end { fill: var(--xwerp-indigo); }
@media (prefers-reduced-motion: reduce) { .xwerp-home-district, .xwerp-home-tower { transition: none; } }
/* A grid column never grows past its share: the panels' contents shrink or wrap. */
.xwerp-home-middle > *, .xwerp-home-bottom > *, .xwerp-home-kpis > * { min-width: 0; }
.xwerp-home-cortex { overflow-x: hidden; }
.xwerp-home-cortex-head { flex-wrap: wrap; }
.xwerp-home-cortex-head .xwerp-home-autonomy { margin-inline-start: auto; }
.xwerp-home-panel { grid-template-columns: minmax(0, 1fr); }
.xwerp-home-cortex-list, .xwerp-home-cortex-item.is-open, .xwerp-home-kpi, .xwerp-home-kpi-body { grid-template-columns: minmax(0, 1fr); }
.xwerp-home-cortex-line > :not(.xwerp-home-chip) { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.xwerp-home-district-label { paint-order: stroke; stroke: #ffffff; stroke-width: 3px; stroke-linejoin: round; }
html[data-theme="dark"] .xwerp-home-district-label { fill: #9ca3af; stroke: #0d0e1a; }

/* Cortex, as the console draws it: as tall as the map beside it, its drafts
   scrolling inside; compact drafts with their checks as ticks. */
.xwerp-home-middle { align-items: stretch; }
.xwerp-home-cortex { contain: size; overflow-y: auto; }
@media (max-width: 1100px) { .xwerp-home-cortex { contain: none; max-height: 30rem; } }
.xwerp-home-cortex-item.is-open { gap: 6px; padding: 10px 12px 12px; }
.xwerp-home-cortex-item.is-open > .xwui-typography,
.xwerp-home-cortex-item.is-open > * > .xwui-typography { margin: 0; }
.xwerp-home-cortex-item.is-open .xwui-typography-body { font-size: 14px; font-weight: 700; line-height: 1.35; }
.xwerp-home-cortex-item.is-open .xwui-typography-caption { font-size: 11.5px; line-height: 1.45; }
.xwerp-home-chip--source { letter-spacing: 0.01em; }
.xwerp-home-chip--decided { background: #dcfce7; color: #166534; }
html[data-theme="dark"] .xwerp-home-chip--decided { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }

.xwerp-home-checks { display: flex; flex-wrap: wrap; gap: 5px; }
.xwerp-home-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
}
.xwerp-home-check--pass { background: #ecfdf5; color: #047857; }
.xwerp-home-check--pass::before { content: "✓"; font-weight: 700; }
.xwerp-home-check--flag { background: #fffbeb; color: #b45309; }
.xwerp-home-check--flag::before { content: "!"; font-weight: 800; }
html[data-theme="dark"] .xwerp-home-check--pass { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
html[data-theme="dark"] .xwerp-home-check--flag { background: rgba(245, 185, 66, 0.14); color: #fcd34d; }

.xwerp-home-cortex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.xwerp-home-cortex-actions > .xwui-typography { margin: 0; font-size: 12px; }
.xwerp-home-hold, .xwerp-home-act {
    position: relative;
    overflow: hidden;
    height: 32px;
    padding-inline: 12px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 9px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.xwerp-home-hold { border-color: #c7d2fe; background: #eef2ff; color: var(--xwerp-deep); }
.xwerp-home-hold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(99, 102, 241, 0.22);
    transform: scaleX(0);
    transform-origin: left center;
}
:root[dir="rtl"] .xwerp-home-hold::after { transform-origin: right center; }
.xwerp-home-hold.is-holding::after { transform: scaleX(1); transition: transform 0.9s linear; }
.xwerp-home-hold:disabled, .xwerp-home-act:disabled { cursor: not-allowed; opacity: 0.5; }
.xwerp-home-act--reason { border-color: #fecaca; color: #b91c1c; font-weight: 500; }
.xwerp-home-act--quiet { border-color: transparent; background: none; color: #6b7280; font-weight: 500; }
.xwerp-home-review { margin-inline-start: 4px; color: #374151; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.xwerp-home-review:hover { color: var(--xwerp-deep); }
html[data-theme="dark"] .xwerp-home-act { background: rgba(255, 255, 255, 0.04); border-color: var(--xwerp-hairline); color: #e5e7eb; }
html[data-theme="dark"] .xwerp-home-hold { background: rgba(99, 102, 241, 0.18); border-color: rgba(165, 180, 252, 0.35); color: var(--xwerp-lilac); }
html[data-theme="dark"] .xwerp-home-review { color: #d1d5db; }
@media (prefers-reduced-motion: reduce) { .xwerp-home-hold.is-holding::after { transition-duration: 0.01s; } }
/* The head on one line, as in the console: a compact level switch, the title never wrapping. */
.xwerp-home-cortex-head { flex-wrap: nowrap; }
.xwerp-home-cortex-titles h2, .xwerp-home-cortex-titles h2 .xwui-typography { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] .xwerp-home-autonomy .xwui-button.xwui-button-ghost { height: 22px; padding-inline: 6px; font-size: 10.5px; }
@media (max-width: 1100px) { .xwerp-home-cortex-head { flex-wrap: wrap; } }
/* The title keeps its words; the subtitle is what gives way, as in the console. */
.xwerp-home-cortex-titles { flex: 1 1 auto; min-width: 8.75rem; }
.xwerp-home-cortex-titles h2, .xwerp-home-cortex-titles h2 .xwui-typography { overflow: visible; text-overflow: clip; }
.xwerp-home-autonomy { flex: none; padding: 2px; gap: 0; }
html[data-theme] .xwerp-home-autonomy .xwui-button.xwui-button-ghost { padding-inline: 5px; }
/* The company card's name is the switcher: the select drawn as the name, its chevron at the end. */
.xwerp-ws-company { position: relative; }
.xwerp-ws-switcher { margin: 0; }
.xwerp-ws-switcher .xwui-select-trigger {
    min-height: 0;
    height: 20px;
    padding: 0;
    padding-inline-end: 18px;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
}
.xwerp-ws-switcher .xwui-select-trigger:focus-visible { outline-offset: 2px; }
.xwerp-ws-switcher .xwui-select-trigger, .xwerp-ws-switcher .xwui-select-value { padding-inline-start: 0 !important; margin-inline-start: 0 !important; }

/* The rail as the console draws it: the app tile on top, Workspace, Inbox
   (with its count) and Cortex over a rule, then the areas, the tools at the foot. */
.xwui-shell-app-activitybar .xwui-navigation-rail::before {
    content: "✕";
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, #a78bfa, #6366f1 60%, #4f46e5);
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.xwui-shell-app-activitybar .xwui-navigation-rail-item { position: relative; overflow: visible; }
.xwui-shell-app-activitybar .xwui-navigation-rail-item.xwerp-ws-rail-divide { margin-bottom: 15px; }
.xwui-shell-app-activitybar .xwui-navigation-rail-item.xwerp-ws-rail-divide::after {
    content: "";
    position: absolute;
    inset-inline: 7px;
    bottom: -9px;
    height: 1px;
    background: var(--xwerp-card-border);
}
.xwui-shell-app-activitybar .xwui-navigation-rail-item[data-count]::before {
    content: attr(data-count);
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border: 2px solid #f7f7fb;
    border-radius: 999px;
    background: var(--xwerp-violet);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
html[data-theme="dark"] .xwui-shell-app-activitybar .xwui-navigation-rail-item[data-count]::before { border-color: #07080f; }

/* The Workspace heading leads with a house, as in the console. */
.xwerp-ws-title[data-view="workspace"] > :first-child { display: flex; align-items: center; gap: 7px; }
.xwerp-ws-title[data-view="workspace"] > :first-child::before { content: "⌂"; color: #6b7280; font-size: 16px; line-height: 1; }
.xwerp-ws-row--button { width: 100%; border: 0; background: none; text-align: start; cursor: pointer; }

/* The top bar: "Company > Today" with no menu button where the sidebar is always open. */
.xwui-shell-app-breadcrumbs { display: flex; align-items: center; }
.xwui-shell-app-breadcrumbs::before {
    content: "›";
    margin-inline: 2px 10px;
    color: #757c93;
    font-size: 14px;
}
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs-icon { display: none; }
@media (min-width: 1101px) { .xwui-shell-app-main-header .xwui-shell-app-menu-btn { display: none; } }
.xwui-shell-app-main-header { padding-inline-start: 14px; }
/* The badge sits inside the icon's key, since the rail clips what leaves it. */
.xwui-shell-app-activitybar .xwui-navigation-rail-item[data-count]::before { top: -2px; inset-inline-end: -2px; min-width: 16px; height: 16px; border-width: 1.5px; font-size: 9.5px; }
.xwui-shell-app-activitybar, .xwui-shell-app-activitybar .xwui-navigation-rail { overflow: visible; }
.xwui-shell-app-breadcrumbs svg, .xwui-shell-app-breadcrumbs .xwui-icon { display: none; }
.xwui-shell-app-main-header-bar { max-width: none; }
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs-icon { display: none !important; }
.xwui-shell-app-breadcrumbs .xwui-shell-app-crumbs, .xwui-shell-app-breadcrumbs .xwui-breadcrumbs-current { max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
.xwui-shell-app-breadcrumbs .xwui-breadcrumbs-current { color: #111827; font-weight: 600; }
html[data-theme="dark"] .xwui-shell-app-breadcrumbs .xwui-breadcrumbs-current { color: #f3f4f6; }
/* XWUINavRail sizes itself (80px, items 71px) over a single class: pin the console's 58px rail and 38px keys. */
html[data-theme] .xwui-shell-app-activitybar .xwui-navigation-rail { width: 58px !important; min-width: 0 !important; padding-inline: 0 !important; }
html[data-theme] .xwui-shell-app-activitybar .xwui-navigation-rail-item { width: 38px !important; min-width: 0 !important; height: 38px !important; margin-inline: auto; }
:root[dir="rtl"] .xwui-shell-app-breadcrumbs::before { content: "‹"; }

/* The top bar's company card: the console's compact pill, then "> Today". */
.xwui-shell-app-main-header-bar { display: flex; align-items: center; gap: 10px; }
.xwerp-ws-company.xwerp-ws-company--bar { gap: 8px; min-width: 0; padding: 4px 8px 4px 5px; border-radius: 11px; box-shadow: none; }
.xwerp-ws-company--bar .xwerp-ws-company-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.xwerp-ws-company--bar .xwerp-ws-switcher .xwui-select-trigger { height: 16px; font-size: 12px; }
.xwerp-ws-company--bar .xwerp-ws-row-detail .xwui-typography { font-size: 10px; line-height: 13px; }
@media (max-width: 900px) { .xwerp-ws-company--bar { display: none; } }
.xwerp-ws-settings { padding-top: 8px; }
.xwerp-ws-settings .xwui-setting-currency__btn { width: 100%; justify-content: space-between; }

/* -- every dialog --------------------------------------------------------------- */

/* A scrollable dialog (XWUI's default) fits inside its overlay, so only its body
   scrolls. XWUI caps it at the window less 64px while the overlay pads 48px a
   side, so a long form scrolled the overlay as well: two scrollbars. */
.xwui-dialog-overlay > .xwui-dialog-scrollable { max-height: 100% !important; }

/* -- the create dialog (src/pages/catalog-create.ts) --------------------------- */

/* The master's add state, as the dialog's body: no tab row, no second title,
   the fields in two columns, its submit pressed from the dialog's footer. */
.xwerp-create-dialog .xwui-dialog, .xwerp-create-dialog.xwui-dialog { border-radius: var(--radius-dialog); }
.xwerp-create-dialog .xwui-form-master-tabs,
.xwerp-create-dialog .xwui-form-master-panel-title,
.xwerp-create-dialog .xwui-form-master-actions { display: none !important; }
.xwerp-create-dialog .xwui-form-master,
.xwerp-create-dialog .xwui-form-master-content,
.xwerp-create-dialog .xwui-form-master-panel { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.xwerp-create-dialog .xwui-form-master-runtime-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}
.xwerp-create-dialog .xwui-form-master-runtime-section > :not(.xwui-form-master-runtime-row) { grid-column: 1 / -1; }
.xwerp-create-dialog .xwui-form-master-runtime-section > h3,
.xwerp-create-dialog .xwui-form-master-runtime-section > .xwui-typography { display: none; }
.xwerp-create-dialog .xwui-form-master-runtime-row { min-width: 0; margin: 0 !important; }
.xwerp-create-dialog .xwui-form-master-runtime-row:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 640px) { .xwerp-create-dialog .xwui-form-master-runtime-section { grid-template-columns: minmax(0, 1fr); } }
.xwerp-create-dialog label { font-size: 12.5px; font-weight: 600; color: #374151; }
html[data-theme="dark"] .xwerp-create-dialog label { color: #d1d5db; }
.xwerp-create-dialog input:not([type="checkbox"]):not([type="radio"]),
.xwerp-create-dialog textarea,
.xwerp-create-dialog .xwui-select-trigger { border-radius: var(--radius-input) !important; }
/* XWUIForm draws each label as a clickable XWUIItem: its padding and hover band pull the label off the input's edge. */
.xwerp-create-dialog .xwui-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.xwerp-create-dialog .xwui-form-field-wrapper:has(textarea) { grid-column: 1 / -1; }
.xwerp-create-dialog .xwui-form-field { margin: 0; padding: 0; background: none; }
.xwerp-create-dialog .xwui-form-field__item .xwui-item { padding: 0 0 4px; background: none; cursor: default; }
@media (max-width: 640px) { .xwerp-create-dialog .xwui-form { grid-template-columns: minmax(0, 1fr); } }
.xwerp-create-foot { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
/* In the create dialog on a phone, a date and its time stack, each the field's full width. */
@media (max-width: 640px) {
    /* XWUIStack writes its row inline, so only !important reaches it. */
    .xwerp-create-dialog .xwerp-datetime { flex-wrap: wrap !important; }
    .xwerp-create-dialog .xwerp-datetime > * { flex: 1 1 100% !important; min-width: 0; }
}
/* A function's line editor under its form (src/pages/catalog-lines.ts): one wrapping row per
   line, so a phone stacks the cells and a desktop keeps a line on one row. */
.xwerp-lines { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.xwerp-lines-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: flex-end; }
.xwerp-lines-cell { flex: 1 1 9rem; min-width: 0; }

/* -- Nocturne: the console's dark ground (the design's xwerp.css) ------------- */

/* A blue-black ground lit by indigo, violet and a little rose; panels of faint
   white glass with hairline edges; indigo-to-violet for action, amber for money. */
html[data-theme="dark"] {
    --xwerp-ink: #07080d;
    --xwerp-hairline: rgba(255, 255, 255, 0.075);
    --xwerp-glass: rgba(255, 255, 255, 0.035);
    --xwerp-card-border: rgba(255, 255, 255, 0.075);
    --xwerp-indigo: #7b8cff;
    --xwerp-violet: #a97bff;
    --xwerp-lilac: #a9b4ff;
    --xwerp-amber: #ffbe5c;
    --accent-primary: #7b8cff;
    --accent-hover: #a97bff;
    --bg-primary: #07080d;
    --text-primary: #eef0f7;
    --text-secondary: #a6acc2;
    --border-color: rgba(255, 255, 255, 0.075);
}
html[data-theme="dark"] body { background: #07080d; }
html[data-theme="dark"] .xwui-shell-app-main {
    background:
        radial-gradient(56rem 32rem at 78% -12%, rgba(123, 140, 255, 0.18), transparent 62%),
        radial-gradient(44rem 30rem at 28% -18%, rgba(192, 139, 255, 0.12), transparent 60%),
        radial-gradient(50rem 32rem at 100% 110%, rgba(255, 143, 177, 0.07), transparent 60%),
        radial-gradient(44rem 31rem at 0% 100%, rgba(92, 200, 255, 0.06), transparent 60%),
        #07080d;
}
html[data-theme="dark"] .xwui-shell-app-sidebar { background: #0a0c13; border-inline-end: 1px solid rgba(255, 255, 255, 0.075); }
html[data-theme="dark"] .xwui-shell-app-activitybar { background: #07080d; border-color: rgba(255, 255, 255, 0.075); }
html[data-theme="dark"] .xwui-shell-app-main > .xwui-panel > .xwui-panel-header { background: rgba(7, 8, 13, 0.6); }
html[data-theme="dark"] .xwui-shell-app-statusbar { background: #07080d; }
html[data-theme="dark"] .xwerp-home-kpi,
html[data-theme="dark"] .xwerp-home-panel,
html[data-theme="dark"] .xwerp-ws-company {
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .xwerp-home-hello-rest { color: #757c93; }
html[data-theme="dark"] .xwerp-home-kpi-head .xwui-typography,
html[data-theme="dark"] .xwerp-home-dateline .xwui-typography { color: #a6acc2; }
html[data-theme="dark"] .xwerp-home-map-flows[aria-pressed="true"] { border-color: rgba(123, 140, 255, 0.45) !important; background: rgba(123, 140, 255, 0.14) !important; color: #a9b4ff !important; }
html[data-theme="dark"] .xwerp-home-step.is-filled .xwerp-home-step-mark { border-color: rgba(255, 122, 107, 0.45); background: rgba(255, 122, 107, 0.12); color: #ff7a6b; }
html[data-theme="dark"] .xwerp-home-step.is-chosen .xwerp-home-step-mark { border-color: #7b8cff; background: #7b8cff; color: #07080d; box-shadow: 0 0 0 4px rgba(123, 140, 255, 0.22); }

/* -- the console's faces (index.html loads them) ------------------------------ */

/* Text is Geist through XWUI's font axis. Headings and figures are Sora, codes,
   dates and the status line Geist Mono, Arabic IBM Plex Sans Arabic, as the
   Nocturne design sets them. */
:root[data-theme] {
    --xwerp-font-display: "Sora", var(--font-family-base);
    --font-family-mono: "Geist Mono", ui-monospace, monospace;
}
:root[lang="ar"][data-theme] {
    --xwerp-font-display: "IBM Plex Sans Arabic", var(--font-family-base);
    --font-family-base: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
    /* Geist Mono has no Arabic letters: they take Plex, the codes and digits stay mono. */
    --font-family-mono: "Geist Mono", "IBM Plex Sans Arabic", monospace;
}
.xwerp-home-hello,
.xwerp-home-kpi-value .xwui-typography,
.xwerp-home-panel h2.xwui-typography,
.xwerp-home-panel h2 .xwui-typography,
.xwerp-home-panel-head .xwui-typography-h6,
.xwerp-ws-title h2,
.xwerp-ws-title .xwui-typography,
.xwui-shell-app-main h1,
.xwerp-create-dialog .xwui-dialog-title { font-family: var(--xwerp-font-display); }
:root:not([lang="ar"]) .xwerp-home-hello { letter-spacing: -0.03em; }
.xwerp-home-dateline .xwui-typography,
.xwerp-ws-chip,
.xwerp-home-chip--source,
.xwerp-ws-status .xwui-typography,
.xwerp-home-step .xwui-typography-caption,
.xwerp-home-heat-day,
.xwerp-ws-count { font-family: var(--font-family-mono); }
/* A step's name stays in the text face; only its record id is mono. */
.xwerp-home-step > :nth-child(2),
.xwerp-home-step > :nth-child(2).xwui-typography,
.xwerp-home-step > :nth-child(2) .xwui-typography { font-family: var(--font-family-base); }
/* The pill's select keeps XWUI's control height over one class; the console's pill is 40px. */
.xwerp-ws-company--bar .xwerp-ws-switcher .xwui-select-trigger,
.xwerp-ws-company--bar .xwerp-ws-switcher .xwui-select-container,
.xwerp-ws-company--bar .xwerp-ws-switcher .xwui-input-select { min-height: 0 !important; height: 18px !important; padding-block: 0 !important; line-height: 18px; }
.xwerp-ws-company--bar .xwerp-ws-switcher { line-height: 0; }
.xwerp-ws-company--bar { height: 40px; }
.xwui-shell-app-main-header { min-height: 56px; }

/* -- Nocturne details on Today (the design's Main board) ----------------------- */

/* Module chips: outlined mono boxes in their area's hue. */
html[data-theme="dark"] .xwerp-ws-chip {
    border: 1px solid color-mix(in srgb, var(--xwerp-tone, #8fa3c8) 45%, transparent);
    background: color-mix(in srgb, var(--xwerp-tone, #8fa3c8) 12%, transparent);
    color: color-mix(in srgb, var(--xwerp-tone, #8fa3c8) 70%, #ffffff);
    border-radius: 6px;
}
/* The autonomy switch: no tray, the live level an outlined pill. */
html[data-theme="dark"] .xwerp-home-autonomy { background: none; gap: 2px; padding: 0; }
html[data-theme="dark"] .xwerp-home-autonomy .xwui-button.xwui-button-ghost { color: #a6acc2; border: 1px solid transparent; border-radius: 8px; }
html[data-theme="dark"] .xwerp-home-autonomy .xwui-button.xwui-button-ghost[aria-pressed="true"] {
    border-color: rgba(123, 140, 255, 0.5);
    background: rgba(123, 140, 255, 0.16);
    color: #eef0f7;
    box-shadow: none;
}
/* "Now" sits in its own frame under the steps. */
.xwerp-home-now { padding: 8px 10px; border: 1px solid var(--xwerp-card-border); border-radius: 11px; background: var(--xwerp-glass); }
/* Thicker money bars; blockers in the design's amber. */
.xwerp-home-bar { height: 8px; }
.xwerp-home-blocker { height: 8px; }
html[data-theme="dark"] .xwerp-home-blocker { background: #ffbe5c; }
.xwerp-home-spark { height: 48px; }
html[data-theme="dark"] .xwerp-home-spark-line { stroke: #9aa8ff; stroke-width: 1.8; }
html[data-theme="dark"] .xwerp-home-spark-area { fill: rgba(123, 140, 255, 0.22); }

/* -- Finance home (src/pages/workspace-finance) ------------------------------- */

.xwerp-fin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xwerp-fin-words { display: grid; gap: 4px; min-width: 0; }
.xwerp-fin-actions { display: flex; gap: 8px; }
.xwerp-fin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--xwerp-card-border); }
.xwerp-fin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: #6b7280;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}
.xwerp-fin-tab:hover { color: #111827; }
.xwerp-fin-tab.is-here { border-color: var(--xwerp-indigo); color: #111827; font-weight: 600; }
.xwerp-fin-tab-count { color: #9ca3af; font-family: var(--font-family-mono); font-size: 11.5px; }
html[data-theme="dark"] .xwerp-fin-tab { color: #a6acc2; }
html[data-theme="dark"] .xwerp-fin-tab:hover, html[data-theme="dark"] .xwerp-fin-tab.is-here { color: #eef0f7; }
.xwerp-fin-badge {
    margin-inline-start: auto;
    padding: 1px 8px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 7px;
    color: #6b7280;
    font-size: 11px;
}
html[data-theme="dark"] .xwerp-fin-badge { color: #a6acc2; background: rgba(255, 255, 255, 0.04); }
.xwerp-fin-close { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xwerp-fin-close-words { display: grid; gap: 4px; min-width: 0; }
.xwerp-fin-close-words .xwui-typography { margin: 0; }
.xwerp-fin-close-words .xwui-typography-h5 { font-family: var(--xwerp-font-display); font-size: 22px; font-weight: 600; }
.xwerp-fin-close-words .xwui-typography-caption { font-size: 11px; }
.xwerp-fin-ring { flex: none; width: 56px; height: 56px; transform: rotate(-90deg); }
.xwerp-fin-ring-track { fill: none; stroke: rgba(127, 135, 160, 0.2); stroke-width: 5; }
.xwerp-fin-ring-fill { fill: none; stroke: var(--xwerp-indigo); stroke-width: 5; stroke-linecap: round; }
.xwerp-fin-ring-text { fill: currentColor; font-family: var(--font-family-mono); font-size: 9px; transform: rotate(90deg); transform-origin: 22px 22px; }
.xwerp-home-tone--violet { --xwerp-tone: #a97bff; }

/* Finance home's middle row: the sculpture, the waterfall and the close. */
.xwerp-fin-middle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.95fr); gap: 12px; align-items: stretch; }
@media (max-width: 1100px) { .xwerp-fin-middle { grid-template-columns: minmax(0, 1fr); } }
.xwerp-fin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.xwerp-fin-panel-words { display: grid; gap: 2px; min-width: 0; }
.xwerp-fin-panel-words .xwui-typography { margin: 0; }
.xwerp-fin-panel-words .xwui-typography-caption { font-size: 11.5px; }
.xwerp-fin-pill { flex: none; padding: 2px 9px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.xwerp-fin-pill--ok { background: rgba(95, 224, 176, 0.12); color: #1f9d73; }
.xwerp-fin-pill--bad { background: rgba(255, 107, 138, 0.13); color: #d0304f; }
.xwerp-fin-pill--warn { background: rgba(255, 190, 92, 0.15); color: #a96200; }
.xwerp-fin-pill--quiet { border: 1px solid var(--xwerp-card-border); color: #6b7280; }
html[data-theme="dark"] .xwerp-fin-pill--ok { color: #5fe0b0; }
html[data-theme="dark"] .xwerp-fin-pill--bad { color: #ff6b8a; }
html[data-theme="dark"] .xwerp-fin-pill--warn { color: #ffbe5c; }
html[data-theme="dark"] .xwerp-fin-pill--quiet { color: #a6acc2; }
.xwerp-fin-failed { padding: 18px 0; }

.xwerp-fin-tb { display: block; width: 100%; height: auto; max-height: 13rem; }
.xwerp-fin-tb-glow { fill: rgba(123, 140, 255, 0.18); filter: blur(6px); }
.xwerp-fin-tb--debit { --xwerp-tone: #7b8cff; }
.xwerp-fin-tb--credit { --xwerp-tone: #5cc8ff; }
.xwerp-fin-tb-beam { fill: #eef0f7; filter: drop-shadow(0 0 6px rgba(169, 180, 255, 0.7)); }
html[data-theme="light"] .xwerp-fin-tb-beam { fill: #c7d2fe; }
.xwerp-fin-tb-legend { display: flex; justify-content: space-around; gap: 12px; }
.xwerp-fin-tb-item { display: grid; justify-items: center; gap: 0; }
.xwerp-fin-tb-item .xwui-typography { margin: 0; font-variant-numeric: tabular-nums; }
.xwerp-fin-tb-item::before { content: ""; width: 18px; height: 3px; margin-bottom: 4px; border-radius: 2px; background: var(--xwerp-tone); }

.xwerp-fin-wf { flex: 1; }
.xwerp-fin-wf-svg { display: block; width: 100%; height: 9.5rem; }
.xwerp-fin-wf--revenue { --xwerp-tone: #5cc8ff; }
.xwerp-fin-wf--expenses { --xwerp-tone: #ffbe5c; }
.xwerp-fin-wf--profit { --xwerp-tone: #a97bff; }
.xwerp-fin-wf-bar { fill: var(--xwerp-tone); }
.xwerp-fin-wf-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.xwerp-fin-wf-label .xwui-typography { margin: 0; font-variant-numeric: tabular-nums; }
.xwerp-fin-wf-note .xwui-typography { margin: 0; font-size: 11px; }

.xwerp-fin-blockers { display: grid; gap: 10px; }
.xwerp-fin-blocker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xwerp-fin-blocker-words { display: grid; gap: 1px; min-width: 0; }
.xwerp-fin-blocker-words .xwui-typography { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-fin-blocker-words .xwui-typography-body { font-size: 13px; }
.xwerp-fin-blocker-words .xwui-typography-caption { font-size: 11px; }
.xwerp-fin-more { color: var(--xwerp-deep); font-size: 12px; text-decoration: none; }
html[data-theme="dark"] .xwerp-fin-more { color: #a9b4ff; }
.xwerp-fin-cortex {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px solid rgba(169, 123, 255, 0.35);
    border-radius: 12px;
    background: linear-gradient(115deg, rgba(123, 140, 255, 0.12), rgba(192, 139, 255, 0.08) 40%, rgba(255, 143, 177, 0.06));
}
.xwerp-fin-cortex .xwerp-home-orb { width: 22px; height: 22px; }
.xwerp-fin-cortex > .xwui-typography, .xwerp-fin-cortex > :nth-child(2) { flex: 1; min-width: 0; margin: 0; font-size: 12px; }
.xwerp-fin-blocker-words { flex: 1 1 auto; }
.xwerp-fin-blocker > :last-child { flex: none; }
.xwerp-fin-closepanel { overflow: hidden; }
.xwerp-fin-blocker-words > *, .xwerp-fin-blocker-words > * > .xwui-typography { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Finance home's last row: who fed the ledger, ageing, the 13-week cash range. */
.xwerp-fin-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 1100px) { .xwerp-fin-bottom { grid-template-columns: minmax(0, 1fr); } }
.xwerp-fin-lanes { display: grid; gap: 8px; }
.xwerp-fin-lane { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 10px; }
.xwerp-fin-lane > .xwui-typography, .xwerp-fin-lane > :first-child { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; }
.xwerp-fin-lane > :first-child::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--xwerp-tone); }
.xwerp-fin-track {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 26px;
    padding-inline: 8px;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 8px;
    background: var(--xwerp-glass);
}
.xwerp-fin-track .xwui-typography { margin: 0; font-size: 11px; }
.xwerp-fin-chip {
    position: absolute;
    inset-inline-start: clamp(4px, var(--at), calc(100% - 90px));
    padding: 1px 7px;
    border: 1px solid color-mix(in srgb, var(--xwerp-tone) 55%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--xwerp-tone) 16%, transparent);
    color: color-mix(in srgb, var(--xwerp-tone) 75%, #ffffff);
    font-family: var(--font-family-mono);
    font-size: 10.5px;
    white-space: nowrap;
}
html[data-theme="light"] .xwerp-fin-chip { color: color-mix(in srgb, var(--xwerp-tone) 80%, #111827); }
.xwerp-fin-chip--more { inset-inline-start: auto; inset-inline-end: 4px; }
.xwerp-fin-agebars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; height: 9.5rem; }
.xwerp-fin-agebar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.xwerp-fin-agebar .xwui-typography { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
/* The bar's share is of the tallest bucket, on a 6rem track. */
.xwerp-fin-agebar-fill { width: 70%; height: calc(6rem * var(--share-n, 1)); max-height: 6rem; min-height: 4px; border-radius: 6px; background: var(--xwerp-bucket); }
/* The 13-week cash range, compact as the design's panel: its heading, chart and actions. */
.xwerp-fin-cash .xwui-box-surface { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.xwerp-fin-cash h2.xwui-typography { font-size: 15px; font-family: var(--xwerp-font-display); }
.xwerp-fin-cash .xwui-stack > .xwui-stack-item:nth-child(3),
.xwerp-fin-cash .xwui-stack > .xwui-stack-item:nth-child(4) { display: none; }
.xwerp-fin-cash .xwui-stack > .xwui-stack-item:nth-child(1) .xwui-typography-h5,
.xwerp-fin-cash .xwui-stack > .xwui-stack-item:nth-child(1) .xwui-typography-h4 { font-size: 20px; }
.xwerp-fin-cash .xwui-stack > .xwui-stack-item:nth-child(2) { max-height: 13rem; overflow: hidden; }

/* -- the service deck (src/pages/service-deck): a module's pages ------------- */

.xwerp-deck { display: grid; gap: 14px; }
.xwerp-deck--pipeline { --xwerp-tone: #7b8cff; }
.xwerp-deck--approvals { --xwerp-tone: #ffbe5c; }
.xwerp-deck--schedule { --xwerp-tone: #5cc8ff; }
.xwerp-deck--tracking { --xwerp-tone: #ff8fb1; }
.xwerp-deck--analysis { --xwerp-tone: #a97bff; }
.xwerp-deck--register { --xwerp-tone: #8fa3c8; }

.xwerp-deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xwerp-deck-filters { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; }

.xwerp-deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; }
.xwerp-deck-tile {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 9.5rem;
    padding: 14px 14px 12px;
    overflow: hidden;
    border: 1px solid var(--xwerp-card-border);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="dark"] .xwerp-deck-tile {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* A soft light in the tile's corner, in the hue of how the page leads. */
.xwerp-deck-tile::before {
    content: "";
    position: absolute;
    inset: -40% -40% auto auto;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--xwerp-tone) 22%, transparent), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.xwerp-deck-tile:hover, .xwerp-deck-tile:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--xwerp-tone) 55%, transparent);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--xwerp-tone) 60%, transparent);
}
.xwerp-deck-tile:hover::before, .xwerp-deck-tile:focus-within::before { opacity: 1; }
/* Where work waits the tile is lit: amber for a decision, indigo for open records. */
.xwerp-deck-tile.is-waiting { border-color: rgba(255, 190, 92, 0.5); box-shadow: 0 0 0 1px rgba(255, 190, 92, 0.18), 0 12px 30px -18px rgba(255, 190, 92, 0.6); }
.xwerp-deck-tile.is-open { border-color: rgba(123, 140, 255, 0.4); }
.xwerp-deck-tile.is-quiet { opacity: 0.82; }
.xwerp-deck-tile.is-quiet:hover, .xwerp-deck-tile.is-quiet:focus-within { opacity: 1; }

.xwerp-deck-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.xwerp-deck-link:focus-visible { outline: 2px solid var(--xwerp-indigo); outline-offset: 2px; }
.xwerp-deck-top { position: relative; display: flex; align-items: center; gap: 8px; }
.xwerp-deck-glyph {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--xwerp-tone) 45%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--xwerp-tone) 14%, transparent);
    color: var(--xwerp-tone);
    font-size: 14px;
}
.xwerp-deck-kind { color: #6b7280; font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
:root[lang="ar"] .xwerp-deck-kind { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
html[data-theme="dark"] .xwerp-deck-kind { color: #757c93; }
.xwerp-deck-arrow { margin-inline-start: auto; color: #9ca3af; transition: transform 0.18s ease, color 0.18s ease; }
:root[dir="rtl"] .xwerp-deck-arrow { transform: scaleX(-1); }
.xwerp-deck-tile:hover .xwerp-deck-arrow { color: var(--xwerp-tone); transform: translate(2px, -2px); }
:root[dir="rtl"] .xwerp-deck-tile:hover .xwerp-deck-arrow { transform: scaleX(-1) translate(2px, -2px); }
.xwerp-deck-tile h3.xwui-typography, .xwerp-deck-tile h3 .xwui-typography, .xwerp-deck-tile > .xwui-typography {
    position: relative;
    margin: 0;
    font-family: var(--xwerp-font-display);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
:root[lang="ar"] .xwerp-deck-tile h3.xwui-typography { letter-spacing: 0; }

/* The activity bar: open, awaiting, completed; a dashed track when quiet. */
.xwerp-deck-meter {
    position: relative;
    display: flex;
    gap: 2px;
    height: 6px;
    margin-top: auto;
    overflow: hidden;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, rgba(127, 135, 160, 0.22) 0 6px, transparent 6px 10px);
}
.xwerp-deck-tile.is-unknown .xwerp-deck-meter { opacity: 0.5; }
.xwerp-deck-seg { flex: 0 0 var(--share); border-radius: 4px; }
.xwerp-deck-seg--open { background: #7b8cff; }
.xwerp-deck-seg--awaiting { background: #ffbe5c; }
.xwerp-deck-seg--completed { background: rgba(95, 224, 176, 0.55); }
.xwerp-deck-figures { position: relative; color: #6b7280; font-family: var(--font-family-mono); font-size: 11px; }
.xwerp-deck-tile.is-waiting .xwerp-deck-figures { color: #a96200; }
html[data-theme="dark"] .xwerp-deck-figures { color: #a6acc2; }
html[data-theme="dark"] .xwerp-deck-tile.is-waiting .xwerp-deck-figures { color: #ffbe5c; }

/* + New (an XWUIButton) rises on hover and focus, above the tile's link; this box only places it. */
.xwerp-deck-new {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.xwerp-deck-tile:hover .xwerp-deck-new, .xwerp-deck-tile:focus-within .xwerp-deck-new, .xwerp-deck-new:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .xwerp-deck-new { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .xwerp-deck-tile, .xwerp-deck-tile::before, .xwerp-deck-arrow, .xwerp-deck-new { transition: none; }
    .xwerp-deck-tile:hover, .xwerp-deck-tile:focus-within { transform: none; }
}
/* A tile that offers + New keeps its corner clear for it. */
.xwerp-deck-tile:has(.xwerp-deck-new) { padding-bottom: 44px; }
/* The tile's words and marks let a click through to its link; only + New takes its own. */
.xwerp-deck-tile > :not(.xwerp-deck-link):not(.xwerp-deck-new) { pointer-events: none; }
/* Finance's tabs at the head of the general ledger and the trial balance. */
.xwerp-fin-tabs--page { margin: 4px 24px 4px; }

/* -- the record page (catalog-record.ts over src/ui/page.ts) ----------------- */
/* One frame per thing: the list is a single card, not the form master's white
   panel around padded content around the table's own box. The Records / Edit
   switch is an underline strip like Finance's tabs; the figures and the
   decision inbox take the home's Nocturne cards. */

.xwerp-page {
    --xwerp-rec-surface: #ffffff;
    --xwerp-rec-line: var(--xwerp-card-border);
    --xwerp-rec-head: #f8f9fc;
    --xwerp-rec-hover: rgba(99, 102, 241, 0.05);
    --xwerp-rec-muted: #6b7280;
    --xwerp-rec-faint: #9ca3af;
}
html[data-theme="dark"] .xwerp-page {
    --xwerp-rec-surface: rgba(255, 255, 255, 0.03);
    --xwerp-rec-line: var(--xwerp-hairline);
    --xwerp-rec-head: rgba(255, 255, 255, 0.025);
    --xwerp-rec-hover: rgba(123, 140, 255, 0.07);
    --xwerp-rec-muted: #a6acc2;
    --xwerp-rec-faint: #757c93;
}

/* Section headings in the display face, with a short indigo rule before them. */
.xwerp-page .xwerp-page-section > :first-child > h2.xwui-typography-h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-family: var(--xwerp-font-display);
    font-size: 16px;
    letter-spacing: -0.01em;
}
.xwerp-page .xwerp-page-section > :first-child > h2.xwui-typography-h5::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--xwerp-text-gradient);
}

/* The figures: Nocturne tiles with a glow in the corner. */
.xwerp-page .xwui-sg-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xwerp-rec-line) !important;
    border-radius: 16px !important;
    background: var(--xwerp-rec-surface) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}
.xwerp-page .xwui-sg-item::after {
    content: "";
    position: absolute;
    inset: -60% -20% auto auto;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 140, 255, 0.2), transparent 70%);
    pointer-events: none;
}
.xwerp-page .xwui-sg-num { font-family: var(--xwerp-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.xwerp-page .xwui-sg-label { color: var(--xwerp-rec-muted); font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
:root[lang="ar"] .xwerp-page .xwui-sg-label { font-size: 12px; letter-spacing: 0; text-transform: none; }

/* The decision inbox: one card, rows that light on hover. */
.xwerp-page .xwui-inbox {
    overflow: hidden;
    border: 1px solid var(--xwerp-rec-line) !important;
    border-radius: 16px !important;
    background: var(--xwerp-rec-surface) !important;
}
.xwerp-page .xwui-inbox-group-title {
    padding: 12px 16px 6px !important;
    color: var(--xwerp-rec-faint) !important;
    font-family: var(--font-family-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.xwerp-page .xwui-inbox-item { position: relative; background: transparent !important; border-color: var(--xwerp-rec-line) !important; transition: background 0.15s ease; }
.xwerp-page .xwui-inbox-item:hover { background: var(--xwerp-rec-hover) !important; }
.xwerp-page .xwui-inbox-item:hover::before,
.xwerp-page .xwui-dt-table tbody tr:hover > td:first-child::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--xwerp-indigo);
}
.xwerp-page .xwui-inbox-item-sender { font-family: var(--font-family-mono); font-size: 12.5px; color: var(--xwerp-deep); }
html[data-theme="dark"] .xwerp-page .xwui-inbox-item-sender { color: var(--xwerp-lilac); }
.xwerp-page .xwui-inbox-item-snippet { color: var(--xwerp-rec-muted); }
.xwerp-page .xwui-inbox-item-time { color: var(--xwerp-rec-faint); font-family: var(--font-family-mono); font-size: 11px; }

/* The form master: no panel of its own around the list. */
.xwerp-page .xwui-form-master { gap: 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.xwerp-page .xwui-form-master-content { padding: 0 !important; }
.xwerp-page .xwui-form-master-panel { gap: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }

/* Records / Edit as an underline strip. */
.xwerp-page .xwui-form-master-tabs { padding: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--xwerp-rec-line) !important; }
.xwerp-page .xwui-form-master-tabs-row { gap: 4px !important; padding-block: 0 !important; }
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button,
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button:is(:hover, :focus, :active) {
    position: relative;
    background-color: transparent !important;
    height: 40px;
    padding-inline: 14px;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--xwerp-rec-muted) !important;
    font-weight: 500 !important;
}
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button:hover { color: var(--xwerp-deep) !important; }
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button.xwui-button-primary { color: var(--xwerp-deep) !important; font-weight: 700 !important; }
:root[data-theme="dark"] .xwerp-page .xwui-form-master-tabs-row .xwui-button:hover,
:root[data-theme="dark"] .xwerp-page .xwui-form-master-tabs-row .xwui-button.xwui-button-primary { color: #eef0f7 !important; }
/* The underline is an inset shadow: XWUI keeps the button's ::after for its own hover. */
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button.xwui-button-primary,
:root[data-theme] .xwerp-page .xwui-form-master-tabs-row .xwui-button.xwui-button-primary:is(:hover, :focus, :active) {
    box-shadow: inset 0 -2px 0 var(--xwerp-indigo) !important;
}

/* A strip of one tab says nothing: Edit appears only with a record open in it
   (catalog-tabs.ts), so on the list the strip goes. */
.xwerp-page .xwui-form-master-tabs:has(.xwui-form-master-tabs-row > :only-child) { display: none !important; }

/* "Records List" is the tab's own name: a quiet eyebrow beside the toolbar. */
.xwerp-page .xwui-form-record-list-master-header { margin: 0 0 -34px !important; padding: 0 !important; }
.xwerp-page .xwui-form-master-panel-title {
    margin: 0 !important;
    line-height: 34px !important;
    color: var(--xwerp-rec-faint) !important;
    font-family: var(--font-family-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
:root[lang="ar"] .xwerp-page .xwui-form-master-panel-title { font-size: 12.5px !important; letter-spacing: 0; text-transform: none; }
.xwerp-page .xwerp-list-toolbar { min-height: 34px; margin-bottom: 10px; }

/* Table or Cards: the console's segmented switch. */
.xwerp-page .xwui-view-switcher-segmented {
    padding: 3px !important;
    border: 1px solid var(--xwerp-rec-line) !important;
    border-radius: 10px !important;
    background: var(--xwerp-rec-head) !important;
}
.xwerp-page .xwui-view-switcher-tab { border-radius: 7px !important; color: var(--xwerp-rec-faint) !important; }
.xwerp-page .xwui-view-switcher-tab-active {
    background: var(--xwerp-rec-surface) !important;
    color: var(--xwerp-deep) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.18) !important;
}
html[data-theme="dark"] .xwerp-page .xwui-view-switcher-tab-active { background: rgba(123, 140, 255, 0.16) !important; color: #eef0f7 !important; }

/* The table: one card, a mono header, rows that light, the id as a reference. */
:root[data-theme] .xwerp-page .xwui-dt {
    border: 1px solid var(--xwerp-rec-line);
    border-radius: 16px;
    background: var(--xwerp-rec-surface);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
:root[data-theme] main .xwui-dt-table thead th {
    height: 34px;
    padding-block: 0;
    padding-inline: 14px;
    background: var(--xwerp-dg-head) !important;
    border-bottom: 1px solid var(--xwerp-card-line) !important;
    color: var(--xwerp-rec-faint) !important;
    font-family: var(--font-family-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
:root[lang="ar"] main .xwui-dt-table thead th { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
.xwerp-page .xwui-dt-table tbody td { border-color: var(--xwerp-rec-line) !important; font-variant-numeric: tabular-nums; }
.xwerp-page .xwui-dt-table tbody tr:last-child > td { border-bottom: 0 !important; }
.xwerp-page .xwui-dt-table tbody tr { transition: background 0.15s ease; }
/* A layer over each cell's own ground, so a pinned column stays opaque. */
.xwerp-page .xwui-dt-table tbody tr:hover > td { background-image: linear-gradient(var(--xwerp-rec-hover), var(--xwerp-rec-hover)) !important; }
.xwerp-page .xwui-dt-table tbody td:first-child { position: relative; color: var(--xwerp-rec-faint); font-family: var(--font-family-mono); font-size: 12px; }
.xwerp-page .xwui-dt-table tbody td:nth-child(2) { color: var(--xwerp-deep); font-family: var(--font-family-mono); font-size: 13px; white-space: nowrap; }
html[data-theme="dark"] .xwerp-page .xwui-dt-table tbody td:nth-child(2) { color: var(--xwerp-lilac); }
/* The row's View: a ghost pill that fills on the row's hover. */
.xwerp-page .xwui-dt-table tbody td:last-child .xwui-button {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: var(--xwerp-rec-muted) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.xwerp-page .xwui-dt-table tbody tr:hover > td:last-child .xwui-button {
    border-color: rgba(99, 102, 241, 0.35) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--xwerp-deep) !important;
}
html[data-theme="dark"] .xwerp-page .xwui-dt-table tbody tr:hover > td:last-child .xwui-button { color: #eef0f7 !important; }

/* The workflow's steps: numbered rings on one indigo guide. */
.xwerp-page .xwui-steps-vertical .xwui-step-icon {
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--xwerp-deep) !important;
    font-family: var(--font-family-mono);
}
html[data-theme="dark"] .xwerp-page .xwui-steps-vertical .xwui-step-icon { color: var(--xwerp-lilac) !important; }
.xwerp-page .xwui-steps-vertical .xwui-step-tail::after { background: linear-gradient(rgba(99, 102, 241, 0.4), rgba(99, 102, 241, 0.08)) !important; }
@media (prefers-reduced-motion: reduce) {
    .xwerp-page .xwui-inbox-item, .xwerp-page .xwui-dt-table tbody tr, .xwerp-page .xwui-dt-table tbody td .xwui-button { transition: none; }
}

/* ============================================
   PUBLIC LANDING - the home page of the public site as the 22-Oct-2026 design
   draws it (canvas "xwerp — Landing & Sign in", board Landing): a night ground
   with a fine dot grid, indigo / magenta / cyan glows, gradient headlines and
   cards that lift toward the reader. Scoped to .xwerp-landing (pages/home.ts),
   so no other page changes. Built by src/pages/nextgen/public/landing/*.ts.
   ============================================ */

.xwerp-landing {
    --lp-bg: #0a0c12;
    --lp-bg-soft: #0d1018;
    --lp-surface: #141826;
    --lp-surface-2: #1b2033;
    --lp-border: rgba(255, 255, 255, 0.08);
    --lp-border-strong: rgba(255, 255, 255, 0.18);
    --lp-text: #f3f4f8;
    --lp-muted: #a6acc4;
    --lp-faint: #8a90ab;
    --lp-accent: #6366f1;
    --lp-accent-strong: #818cf8;
    --lp-ok: #34d399;
    --lp-indigo: #818cf8;
    --lp-cyan: #22d3ee;
    --lp-green: #34d399;
    --lp-amber: #f59e0b;
    --lp-violet: #a78bfa;
    --lp-pink: #f472b6;
    --lp-orange: #fb923c;
    --lp-magenta: #e879f9;
    --lp-blue: #60a5fa;
    --lp-display: var(--xwerp-font-display, "Sora", system-ui, sans-serif);
    --lp-mono: var(--font-family-mono, "Geist Mono", ui-monospace, monospace);
    --lp-gutter: clamp(20px, 5vw, 40px);
    position: relative;
    overflow-x: clip;
    color: var(--lp-text);
    background-color: var(--lp-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0);
    background-size: 3px 3px;
}
.xwerp-landing .xwui-typography { color: inherit; margin: 0; }
.xwerp-landing h1, .xwerp-landing h2, .xwerp-landing h3 { font-family: var(--lp-display); letter-spacing: -0.01em; margin: 0; }

/* tones: one colour per card, chip and area, read by the pieces below */
.xwerp-landing .xwerp-lp-tone--indigo { --tone: var(--lp-indigo); --tone-rgb: 99, 102, 241; }
.xwerp-landing .xwerp-lp-tone--cyan { --tone: var(--lp-cyan); --tone-rgb: 34, 211, 238; }
.xwerp-landing .xwerp-lp-tone--green { --tone: var(--lp-green); --tone-rgb: 52, 211, 153; }
.xwerp-landing .xwerp-lp-tone--amber { --tone: var(--lp-amber); --tone-rgb: 245, 158, 11; }
.xwerp-landing .xwerp-lp-tone--violet { --tone: var(--lp-violet); --tone-rgb: 167, 139, 250; }
.xwerp-landing .xwerp-lp-tone--pink { --tone: var(--lp-pink); --tone-rgb: 244, 114, 182; }
.xwerp-landing .xwerp-lp-tone--orange { --tone: var(--lp-orange); --tone-rgb: 251, 146, 60; }
.xwerp-landing .xwerp-lp-tone--magenta { --tone: var(--lp-magenta); --tone-rgb: 232, 121, 249; }
.xwerp-landing .xwerp-lp-tone--blue { --tone: var(--lp-blue); --tone-rgb: 96, 165, 250; }

/* -- bands ------------------------------------------------------------------ */
.xwerp-landing .xwerp-lp-band { position: relative; padding: 40px var(--lp-gutter) 100px; overflow: clip; }
.xwerp-landing .xwerp-lp-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.xwerp-landing .xwerp-lp-band--soft { background: var(--lp-bg-soft); border-block: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-head { max-width: 640px; margin: 0 auto 48px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.xwerp-landing .xwerp-lp-eyebrow { font-family: var(--lp-mono); font-size: 12.5px; color: var(--lp-accent-strong); text-transform: uppercase; letter-spacing: 0.06em; }
.xwerp-landing .xwerp-lp-eyebrow .xwui-typography { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.xwerp-landing .xwerp-lp-h2 h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.2; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-lead p { font-size: 15px; line-height: 1.6; color: var(--lp-muted); margin-top: 4px; }
:root[lang="ar"] .xwerp-landing .xwerp-lp-eyebrow { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 13.5px; }

/* -- glows, cube and sparks (decoration) ------------------------------------ */
.xwerp-landing .xwerp-lp-ambience { position: absolute; inset: 0; pointer-events: none; overflow: clip; border-radius: inherit; }
.xwerp-landing .xwerp-lp-glow { position: absolute; border-radius: 50%; filter: blur(14px); }
.xwerp-landing .xwerp-lp-glow--indigo { top: -160px; inset-inline-start: -140px; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(99, 102, 241, 0.38), transparent); animation: xwerpLpAuroraA 19s ease-in-out infinite, xwerpLpPulse 6s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--pink { top: 60px; inset-inline-end: -200px; width: 680px; height: 680px; background: radial-gradient(closest-side, rgba(232, 121, 249, 0.22), transparent); animation: xwerpLpAuroraB 24s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--cyan { bottom: -220px; inset-inline-start: 30%; width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(34, 211, 238, 0.2), transparent); animation: xwerpLpAuroraC 27s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--green { top: -100px; inset-inline-start: -140px; width: 480px; height: 480px; background: radial-gradient(closest-side, rgba(52, 211, 153, 0.16), transparent); animation: xwerpLpAuroraB 24s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--magenta-corner { top: -120px; inset-inline-end: -120px; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(232, 121, 249, 0.12), transparent); }
.xwerp-landing .xwerp-lp-glow--corner-indigo { top: -80px; inset-inline-start: -80px; width: 280px; height: 280px; filter: blur(10px); background: radial-gradient(closest-side, rgba(99, 102, 241, 0.18), transparent); }
.xwerp-landing .xwerp-lp-glow--corner-cyan { bottom: -80px; inset-inline-end: -80px; width: 280px; height: 280px; filter: blur(10px); background: radial-gradient(closest-side, rgba(34, 211, 238, 0.15), transparent); }
.xwerp-landing .xwerp-lp-glow--cube { display: none; top: 60px; inset-inline-end: 6%; width: 140px; height: 140px; filter: none; border-radius: 22px; border: 1px solid rgba(129, 140, 248, 0.45); background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(34, 211, 238, 0.06)); opacity: 0.6; animation: xwerpLpCube 16s linear infinite; }
@media (min-width: 1040px) { .xwerp-landing .xwerp-lp-glow--cube { display: block; } }
.xwerp-landing [class*="xwerp-lp-glow--spark"] { width: 4px; height: 4px; filter: none; animation: xwerpLpTwinkle 3.6s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--spark1 { top: 140px; inset-inline-start: 12%; width: 5px; height: 5px; background: var(--lp-cyan); }
.xwerp-landing .xwerp-lp-glow--spark2 { top: 260px; inset-inline-start: 30%; background: var(--lp-pink); animation-delay: 1.2s; }
.xwerp-landing .xwerp-lp-glow--spark3 { top: 90px; inset-inline-start: 48%; width: 3px; height: 3px; background: var(--lp-amber); animation-delay: 2s; }
.xwerp-landing .xwerp-lp-glow--spark4 { top: 340px; inset-inline-start: 6%; background: var(--lp-violet); animation-delay: 0.6s; }

@keyframes xwerpLpAuroraA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } }
@keyframes xwerpLpAuroraB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-70px, -30px) scale(1.1); } }
@keyframes xwerpLpAuroraC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -60px) scale(1.2); } }
@keyframes xwerpLpPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes xwerpLpTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@keyframes xwerpLpCube { from { transform: perspective(900px) rotateX(0deg) rotateY(0deg); } to { transform: perspective(900px) rotateX(360deg) rotateY(360deg); } }
@keyframes xwerpLpFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* -- calls to action -------------------------------------------------------- */
.xwerp-landing .xwerp-lp-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.xwerp-landing .xwerp-lp-cta .xwui-button { border-radius: 12px; font-weight: 600; font-size: 15.5px; min-height: 48px; padding-inline: 26px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease, border-color 0.18s ease, color 0.18s ease; }
.xwerp-landing .xwerp-lp-cta--glow .xwui-button { color: #fff; border: 0; background: linear-gradient(135deg, var(--lp-accent) 0%, #a855f7 50%, var(--lp-cyan) 100%); background-size: 160% 160%; box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.55); }
.xwerp-landing .xwerp-lp-cta--glow .xwui-button:hover { transform: translateY(-2px) scale(1.02); background-position: 100% 50%; box-shadow: 0 16px 36px -10px rgba(168, 85, 247, 0.6); }
.xwerp-landing .xwerp-lp-cta--ghost .xwui-button { color: var(--lp-text); background: transparent; border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-cta--ghost .xwui-button:hover { border-color: var(--lp-border-strong); background: rgba(255, 255, 255, 0.04); }
.xwerp-landing .xwerp-lp-cta--white .xwui-button { color: #312e81; background: #fff; border: 0; font-weight: 700; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.4); }
.xwerp-landing .xwerp-lp-cta--white .xwui-button:hover { transform: translateY(-2px) scale(1.02); }
.xwerp-landing .xwerp-lp-cta--warm .xwui-button { color: #1a1206; border: 0; font-weight: 700; font-size: 14px; min-height: 44px; padding-inline: 20px; border-radius: 10px; background: linear-gradient(135deg, var(--lp-amber), var(--lp-pink)); }
.xwerp-landing .xwerp-lp-cta--warm .xwui-button:hover { transform: translateY(-2px); }

/* XWUI's own button rules carry the theme's colours with more weight; the
   landing's four tones must win them, label and icon included. */
:root[data-theme] .xwerp-landing .xwerp-lp-cta--glow .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-cta--glow .xwui-button * { color: #fff !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--ghost .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-cta--ghost .xwui-button * { color: var(--lp-text) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--white .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-cta--white .xwui-button * { color: #312e81 !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--warm .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-cta--warm .xwui-button * { color: #1a1206 !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--glow .xwui-button { background: linear-gradient(135deg, var(--lp-accent) 0%, #a855f7 50%, var(--lp-cyan) 100%) !important; background-size: 160% 160% !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--glow .xwui-button:hover { background-position: 100% 50% !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--ghost .xwui-button { background: transparent !important; border: 1px solid var(--lp-border) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--ghost .xwui-button:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--lp-border-strong) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--white .xwui-button { background: #fff !important; border: 0 !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-cta--warm .xwui-button { background: linear-gradient(135deg, var(--lp-amber), var(--lp-pink)) !important; border: 0 !important; }

/* -- hero -------------------------------------------------------------------- */
.xwerp-landing .xwerp-lp-hero { padding: 100px var(--lp-gutter) 80px; }
.xwerp-landing .xwerp-lp-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.xwerp-landing .xwerp-lp-hero-copy { flex: 1 1 480px; min-width: 0; }
.xwerp-landing .xwerp-lp-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 6px 14px; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-border); color: var(--lp-muted); font-size: 12.5px; }
.xwerp-landing .xwerp-lp-badge .xwui-typography { font-size: inherit; color: inherit; }
.xwerp-landing .xwerp-lp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-ok); }
.xwerp-landing .xwerp-lp-h1 h1 { display: flex; flex-direction: column; }
.xwerp-landing .xwerp-lp-h1-line .xwui-typography { display: block; font-family: var(--lp-display); font-size: clamp(38px, 4.9vw, 66px); font-weight: 800; line-height: 1.03; color: var(--lp-text); letter-spacing: -0.01em; }
.xwerp-landing .xwerp-lp-gradient-text .xwui-typography { background: linear-gradient(90deg, #818cf8 0%, #e879f9 50%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[lang="ar"] .xwerp-landing .xwerp-lp-h1-line .xwui-typography { line-height: 1.3; letter-spacing: 0; }
.xwerp-landing .xwerp-lp-hero-lead p { margin-top: 24px; max-width: 560px; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--lp-muted); }

.xwerp-landing .xwerp-lp-hero-visual { flex: 1 1 440px; min-width: 0; min-height: 460px; display: flex; align-items: center; justify-content: center; }


.xwerp-landing .xwerp-lp-tilt { position: relative; perspective: 1600px; }
.xwerp-landing .xwerp-lp-float { --tilt-x: 0deg; --tilt-y: 0deg; animation: xwerpLpFloat 6.5s ease-in-out infinite alternate; }
.xwerp-landing .xwerp-lp-console { position: relative; overflow: hidden; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border-strong); box-shadow: 0 44px 90px -26px rgba(0, 0, 0, 0.8), 0 0 60px -20px rgba(99, 102, 241, 0.25); transform: perspective(1600px) rotateY(calc(-9deg + var(--tilt-y))) rotateX(calc(4deg + var(--tilt-x))); transition: transform 0.25s ease-out; }
:root[dir="rtl"] .xwerp-landing .xwerp-lp-console { transform: perspective(1600px) rotateY(calc(9deg + var(--tilt-y))) rotateX(calc(4deg + var(--tilt-x))); }
.xwerp-landing .xwerp-lp-sample { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-sample .xwui-typography { font-family: var(--lp-mono); font-size: 10.5px; color: var(--lp-faint); letter-spacing: 0.02em; }
.xwerp-landing .xwerp-lp-console-body { display: flex; }
.xwerp-landing .xwerp-lp-rail { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; background: var(--lp-bg-soft); border-inline-end: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-swatch { width: 22px; height: 22px; border-radius: 7px; }
.xwerp-landing .xwerp-lp-swatch:nth-child(1) { background: var(--lp-amber); }
.xwerp-landing .xwerp-lp-swatch:nth-child(2) { background: var(--lp-pink); }
.xwerp-landing .xwerp-lp-swatch:nth-child(3) { background: var(--lp-orange); }
.xwerp-landing .xwerp-lp-swatch:nth-child(4) { background: var(--lp-cyan); }
.xwerp-landing .xwerp-lp-swatch:nth-child(5) { background: var(--lp-green); }
.xwerp-landing .xwerp-lp-swatch:nth-child(6) { background: var(--lp-violet); }
.xwerp-landing .xwerp-lp-swatch:nth-child(7) { background: var(--lp-magenta); }
.xwerp-landing .xwerp-lp-swatch:nth-child(8) { background: var(--lp-blue); }
.xwerp-landing .xwerp-lp-console-main { flex: 1; min-width: 0; padding: 16px 18px; }
.xwerp-landing .xwerp-lp-console-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding-inline-end: 56px; }
.xwerp-landing .xwerp-lp-pill { padding: 4px 10px; border-radius: 8px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); white-space: nowrap; }
.xwerp-landing .xwerp-lp-pill .xwui-typography { font-family: var(--lp-mono); font-size: 11.5px; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-pill--ask { flex: 1; min-width: 0; text-align: center; background: var(--lp-bg-soft); overflow: hidden; text-overflow: ellipsis; }
.xwerp-landing .xwerp-lp-pill--ask .xwui-typography, .xwerp-landing .xwerp-lp-pill--lang .xwui-typography { font-size: 10.5px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-pill--lang { padding: 3px 7px; border-radius: 6px; background: transparent; }
.xwerp-landing .xwerp-lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.xwerp-landing .xwerp-lp-kpi { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-kpi--amber { border-top: 2px solid var(--lp-amber); }
.xwerp-landing .xwerp-lp-kpi--pink { border-top: 2px solid var(--lp-magenta); }
.xwerp-landing .xwerp-lp-kpi--green { border-top: 2px solid var(--lp-green); }
.xwerp-landing .xwerp-lp-kpi-label .xwui-typography { font-size: 9.5px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-kpi-value .xwui-typography { font-family: var(--lp-mono); font-weight: 600; font-size: 16px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-kpi--green .xwerp-lp-kpi-value .xwui-typography { color: var(--lp-ok); }
.xwerp-landing .xwerp-lp-decisions { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-ring { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--lp-cyan) 0 36%, var(--lp-border-strong) 36% 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
.xwerp-landing .xwerp-lp-decisions-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xwerp-landing .xwerp-lp-decisions-title .xwui-typography { font-size: 10px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-decisions-note .xwui-typography { font-size: 12px; color: var(--lp-muted); }

/* -- hero: the live company model (landing/model3d.ts) ------------------------- */
.xwerp-landing .xwerp-lp-hero-grid { align-items: stretch; gap: 48px; }
.xwerp-landing .xwerp-lp-hero-copy { flex: 1 1 440px; display: flex; flex-direction: column; justify-content: center; }
.xwerp-landing .xwerp-lp-hero-visual { flex: 1.25 1 560px; min-height: 0; display: block; }
.xwerp-landing .xwerp-lp-badge--new { align-self: flex-start; border-color: color-mix(in srgb, var(--lp-indigo) 45%, transparent); background: color-mix(in srgb, var(--lp-indigo) 12%, var(--lp-surface)); color: var(--lp-text); }
.xwerp-landing .xwerp-lp-badge--new .xwerp-lp-dot { background: var(--lp-indigo); box-shadow: 0 0 12px var(--lp-indigo); }
.xwerp-landing .xwerp-lp-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.xwerp-landing .xwerp-lp-trust-item { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-trust-icon { color: var(--lp-ok); display: inline-flex; }
.xwerp-landing .xwerp-lp-trust-text .xwui-typography { font-size: 13.5px; color: var(--lp-muted); }

.xwerp-landing .xwerp-lp-stage { position: relative; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.xwerp-landing .xwerp-lp-scene { position: relative; height: clamp(360px, 46vw, 560px); border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--lp-indigo) 18%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--lp-surface) 70%, transparent), transparent); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-still { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; transition: opacity 0.8s ease; }
.xwerp-landing .xwerp-lp-still .xwerp-lp-tilt { width: 100%; max-width: 460px; }
.xwerp-landing .xwerp-lp-model { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.xwerp-landing .xwerp-lp-model-canvas { display: block; width: 100%; height: 100%; }
.xwerp-landing .is-live .xwerp-lp-model { opacity: 1; }
.xwerp-landing .is-live .xwerp-lp-still { opacity: 0; pointer-events: none; }
.xwerp-landing .xwerp-lp-model-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease 0.6s; }
.xwerp-landing .is-live .xwerp-lp-model-labels { opacity: 1; }
.xwerp-landing .xwerp-lp-model-label { position: absolute; top: 0; left: 0; transform: translate(-50%, 14px) translate(var(--x, -999px), var(--y, -999px)); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: rgba(10, 12, 18, 0.72); border: 1px solid color-mix(in srgb, var(--area-hue) 55%, transparent); backdrop-filter: blur(6px); transition: opacity 0.25s ease; }
.xwerp-landing .xwerp-lp-model-label .xwui-typography { font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--area-hue) 70%, white); }
.xwerp-landing .xwerp-lp-model-label.is-hidden { opacity: 0; }
.xwerp-landing .xwerp-lp-model-label.is-dim { opacity: 0.3; }
.xwerp-landing .xwerp-lp-model-tip { position: absolute; top: 0; left: 0; transform: translate(14px, -130%) translate(var(--x, 0), var(--y, 0)); padding: 6px 11px; border-radius: 10px; background: var(--lp-surface); border: 1px solid color-mix(in srgb, var(--area-hue, var(--lp-indigo)) 60%, transparent); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7); font-family: var(--lp-mono); font-size: 12px; color: var(--lp-text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; }
.xwerp-landing .xwerp-lp-model-tip.is-on { opacity: 1; }
.xwerp-landing .xwerp-lp-model-hint { position: absolute; top: 14px; inset-inline-start: 16px; opacity: 0; transition: opacity 0.6s ease 1.2s; }
.xwerp-landing .is-live .xwerp-lp-model-hint { opacity: 1; }
.xwerp-landing .xwerp-lp-model-hint .xwui-typography { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-faint); letter-spacing: 0.02em; }

.xwerp-landing .xwerp-lp-model-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xwerp-landing .xwerp-lp-model-chips { flex: 1 1 320px; min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; }
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip .xwui-button { min-height: 32px; border-radius: 999px; padding-inline: 12px; background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; font-size: 12.5px; }
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip .xwui-button * { color: var(--lp-muted) !important; }
.xwerp-landing .xwerp-lp-model-chip .xwui-button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 7px; background: var(--area-hue, linear-gradient(135deg, var(--lp-indigo), var(--lp-cyan))); box-shadow: 0 0 8px var(--area-hue, var(--lp-indigo)); }
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip.is-on .xwui-button { border-color: var(--area-hue, var(--lp-indigo)) !important; background: color-mix(in srgb, var(--area-hue, var(--lp-indigo)) 16%, var(--lp-surface)) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip.is-on .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-model-chip.is-on .xwui-button * { color: var(--lp-text) !important; }
.xwerp-landing .xwerp-lp-model-run .xwui-button { min-height: 40px; font-size: 14px; padding-inline: 18px; }
.xwerp-landing .xwerp-lp-model-run.is-running .xwui-button { opacity: 0.7; pointer-events: none; }
.xwerp-landing .xwerp-lp-stage:not(.is-live) .xwerp-lp-model-controls { opacity: 0.45; pointer-events: none; }

.xwerp-landing .xwerp-lp-receipt { position: absolute; inset-block-end: 66px; inset-inline-end: 14px; width: min(260px, calc(100% - 28px)); padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--lp-surface) 88%, transparent); border: 1px solid var(--lp-border-strong); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; gap: 10px; transform: translateY(8px); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; }
.xwerp-landing .is-live .xwerp-lp-receipt { opacity: 1; transform: none; }
.xwerp-landing .xwerp-lp-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xwerp-landing .xwerp-lp-receipt-title .xwui-typography { font-family: var(--lp-mono); font-size: 12.5px; font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-sample--inline { position: static; }
.xwerp-landing .xwerp-lp-receipt-idle .xwui-typography { font-size: 12px; line-height: 1.5; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-receipt.is-active .xwerp-lp-receipt-idle { display: none; }
.xwerp-landing .xwerp-lp-receipt-steps { display: none; flex-direction: column; gap: 7px; }
.xwerp-landing .xwerp-lp-receipt.is-active .xwerp-lp-receipt-steps { display: flex; }
.xwerp-landing .xwerp-lp-receipt-row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; opacity: 0.38; transition: opacity 0.3s ease; }
.xwerp-landing .xwerp-lp-receipt-row.is-now, .xwerp-landing .xwerp-lp-receipt-row.is-done { opacity: 1; }
.xwerp-landing .xwerp-lp-receipt-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--lp-faint); }
.xwerp-landing .xwerp-lp-receipt-row.is-now .xwerp-lp-receipt-dot { border-color: var(--lp-indigo); background: var(--lp-indigo); box-shadow: 0 0 10px var(--lp-indigo); }
.xwerp-landing .xwerp-lp-receipt-row.is-done .xwerp-lp-receipt-dot { border-color: var(--lp-ok); background: var(--lp-ok); }
.xwerp-landing .xwerp-lp-receipt-step .xwui-typography { font-size: 12.5px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-receipt-where .xwui-typography { font-family: var(--lp-mono); font-size: 10.5px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-receipt-done { display: none; }
.xwerp-landing .xwerp-lp-receipt.is-done .xwerp-lp-receipt-done { display: block; }
.xwerp-landing .xwerp-lp-receipt-done .xwui-typography { font-size: 12px; color: var(--lp-ok); }
@media (max-width: 760px) {
    .xwerp-landing .xwerp-lp-receipt { position: static; width: 100%; }
    .xwerp-landing .xwerp-lp-scene { height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
    .xwerp-landing .xwerp-lp-model, .xwerp-landing .xwerp-lp-still, .xwerp-landing .xwerp-lp-model-labels, .xwerp-landing .xwerp-lp-receipt { transition: none !important; }
}

/* -- figures: four numbers that count up, drawn by a CSS counter ---------------- */
@property --xwerp-lp-n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.xwerp-landing .xwerp-lp-figures { padding-top: 10px; padding-bottom: 40px; }
.xwerp-landing .xwerp-lp-figures-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 22px; border: 1px solid var(--lp-border); background: linear-gradient(180deg, color-mix(in srgb, var(--lp-surface) 92%, transparent), color-mix(in srgb, var(--lp-bg-soft) 92%, transparent)); overflow: hidden; }
.xwerp-landing .xwerp-lp-figures-strip::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--lp-indigo), var(--lp-magenta), var(--lp-cyan), var(--lp-green)); opacity: 0.8; }
.xwerp-landing .xwerp-lp-figure { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 26px 26px; border-inline-start: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-figure:first-child { border-inline-start: 0; }
.xwerp-landing .xwerp-lp-figure-num { --xwerp-lp-n: 0; counter-reset: lpn var(--xwerp-lp-n); font-family: var(--lp-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; transition: --xwerp-lp-n 1.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xwerp-landing .xwerp-lp-figure-num::after { content: counter(lpn); background: linear-gradient(120deg, var(--lp-text) 20%, var(--lp-indigo) 60%, var(--lp-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xwerp-landing .xwerp-lp-figure:nth-child(2) .xwerp-lp-figure-num::after { background-image: linear-gradient(120deg, var(--lp-text) 20%, var(--lp-cyan) 70%); }
.xwerp-landing .xwerp-lp-figure:nth-child(3) .xwerp-lp-figure-num::after { background-image: linear-gradient(120deg, var(--lp-text) 20%, var(--lp-amber) 75%); }
.xwerp-landing .xwerp-lp-figure:nth-child(4) .xwerp-lp-figure-num::after { background-image: linear-gradient(120deg, var(--lp-text) 20%, var(--lp-green) 75%); }
.xwerp-landing .is-counted .xwerp-lp-figure-num { --xwerp-lp-n: var(--to); }
.xwerp-landing .xwerp-lp-figure-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.xwerp-landing .xwerp-lp-figure-label .xwui-typography { font-size: 15px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-figure-note p { font-size: 12.5px; line-height: 1.5; color: var(--lp-faint); }
@media (max-width: 860px) {
    .xwerp-landing .xwerp-lp-figures-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xwerp-landing .xwerp-lp-figure:nth-child(3) { border-inline-start: 0; }
    .xwerp-landing .xwerp-lp-figure:nth-child(n + 3) { border-top: 1px solid var(--lp-border); }
}

/* -- reel: every module, drifting in two rows ------------------------------------ */
.xwerp-landing .xwerp-lp-reel-band { padding: 0 0 70px; }
.xwerp-landing .xwerp-lp-reel-band > .xwerp-lp-inner { max-width: none; }
.xwerp-landing .xwerp-lp-reel { display: flex; flex-direction: column; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.xwerp-landing .xwerp-lp-reel-track { display: flex; gap: 10px; width: max-content; animation: xwerpLpReel 90s linear infinite; }
.xwerp-landing .xwerp-lp-reel-track--back { animation-direction: reverse; animation-duration: 110s; }
.xwerp-landing .xwerp-lp-reel:hover .xwerp-lp-reel-track { animation-play-state: paused; }
:root[dir="rtl"] .xwerp-landing .xwerp-lp-reel-track { animation-direction: reverse; }
:root[dir="rtl"] .xwerp-landing .xwerp-lp-reel-track--back { animation-direction: normal; }
@keyframes xwerpLpReel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.xwerp-landing .xwerp-lp-reel-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--area-hue) 9%, var(--lp-surface)); border: 1px solid color-mix(in srgb, var(--area-hue) 32%, transparent); white-space: nowrap; }
.xwerp-landing .xwerp-lp-reel-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--area-hue); box-shadow: 0 0 10px var(--area-hue); }
.xwerp-landing .xwerp-lp-reel-name .xwui-typography { font-size: 13px; font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-reel-area .xwui-typography { font-size: 11.5px; color: color-mix(in srgb, var(--area-hue) 70%, white); }
.xwerp-landing .xwerp-lp-reel-pages .xwui-typography { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-faint); padding-inline-start: 8px; border-inline-start: 1px solid var(--lp-border); }
@media (prefers-reduced-motion: reduce) {
    .xwerp-landing .xwerp-lp-figure-num { transition: none !important; }
    .xwerp-landing .xwerp-lp-reel-track { animation: none !important; }
    .xwerp-landing .xwerp-lp-reel { overflow-x: auto; }
}

/* -- problem to outcome ------------------------------------------------------ */
.xwerp-landing .xwerp-lp-why { padding-top: 40px; padding-bottom: 96px; }
.xwerp-landing .xwerp-lp-why-frame { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-why-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.xwerp-landing .xwerp-lp-why-step { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.xwerp-landing .xwerp-lp-why-step.xwerp-lp-tone--indigo { --tone: var(--lp-accent-strong); }
.xwerp-landing .xwerp-lp-why-tag .xwui-typography { font-family: var(--lp-mono); font-size: 12.5px; color: var(--tone); text-transform: uppercase; letter-spacing: 0.06em; }
:root[lang="ar"] .xwerp-landing .xwerp-lp-why-tag .xwui-typography { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 13.5px; }
.xwerp-landing .xwerp-lp-why-title h2 { font-size: 19px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-why-body p { font-size: 13.5px; line-height: 1.5; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-why-arrow { color: var(--lp-faint); flex-shrink: 0; margin-inline: 8px; }
@media (max-width: 760px) { .xwerp-landing .xwerp-lp-why-arrow { transform: rotate(90deg); } }

/* -- ask or do: the bar types, the plan fills in, a person decides ---------------- */
.xwerp-landing .xwerp-lp-decide { padding-top: 60px; padding-bottom: 110px; }
.xwerp-landing .xwerp-lp-glow--decide-indigo { top: 10%; inset-inline-end: 10%; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(99, 102, 241, 0.16), transparent); }
.xwerp-landing .xwerp-lp-decide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.xwerp-landing .xwerp-lp-decide-copy { display: flex; flex-direction: column; gap: 16px; }
.xwerp-landing .xwerp-lp-decide-title h2 { display: flex; flex-direction: column; }
.xwerp-landing .xwerp-lp-decide-line .xwui-typography { display: block; font-family: var(--lp-display); font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-decide-line.xwerp-lp-gradient-text .xwui-typography { color: transparent; }
.xwerp-landing .xwerp-lp-decide-body p { font-size: 15.5px; line-height: 1.65; color: var(--lp-muted); max-width: 520px; }
.xwerp-landing .xwerp-lp-askbar { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--lp-surface); border: 1px solid color-mix(in srgb, var(--lp-indigo) 40%, var(--lp-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-indigo) 10%, transparent), 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.xwerp-landing .xwerp-lp-askbar-icon { color: var(--lp-indigo); display: inline-flex; }
.xwerp-landing .xwerp-lp-askbar-text { min-width: 0; }
.xwerp-landing .xwerp-lp-askbar-text .xwui-typography { font-size: 15px; color: var(--lp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-landing .xwerp-lp-askbar-caret { width: 2px; height: 18px; background: var(--lp-indigo); border-radius: 1px; margin-inline-start: -8px; animation: xwerpLpCaret 1s steps(1) infinite; }
.xwerp-landing .xwerp-lp-askbar.is-typing .xwerp-lp-askbar-caret { animation: none; }
@keyframes xwerpLpCaret { 50% { opacity: 0; } }
.xwerp-landing .xwerp-lp-askbar-kbd { margin-inline-start: auto; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-askbar-kbd .xwui-typography { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-decide-chips-label .xwui-typography { font-size: 12px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-decide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip .xwui-button { border-radius: 999px; min-height: 34px; padding-inline: 14px; background: var(--lp-surface) !important; border: 1px solid var(--lp-border) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip .xwui-button * { color: var(--lp-muted) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip.is-on .xwui-button { border-color: var(--lp-indigo) !important; background: color-mix(in srgb, var(--lp-indigo) 16%, var(--lp-surface)) !important; }
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip.is-on .xwui-button,
:root[data-theme] .xwerp-landing .xwerp-lp-decide-chip.is-on .xwui-button * { color: var(--lp-text) !important; }

.xwerp-landing .xwerp-lp-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--lp-surface) 96%, transparent), var(--lp-bg-soft)); border: 1px solid var(--lp-border-strong); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.85), 0 0 60px -30px color-mix(in srgb, var(--lp-indigo) 50%, transparent); }
.xwerp-landing .xwerp-lp-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xwerp-landing .xwerp-lp-plan-kind .xwui-typography { font-family: var(--lp-display); font-size: 17px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-plan-ask { padding: 10px 12px; border-radius: 10px; background: var(--lp-surface-2); border-inline-start: 3px solid var(--lp-indigo); }
.xwerp-landing .xwerp-lp-plan-ask .xwui-typography { font-size: 13.5px; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-plan-steps { position: relative; display: flex; flex-direction: column; gap: 4px; }
.xwerp-landing .xwerp-lp-plan-steps::before { content: ""; position: absolute; top: 18px; bottom: 18px; inset-inline-start: 17px; width: 2px; background: linear-gradient(180deg, var(--lp-indigo), var(--lp-cyan), var(--lp-amber), var(--lp-green)); opacity: 0.35; }
.xwerp-landing .xwerp-lp-plan-step { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 8px 0; opacity: 0.18; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
:root[dir="rtl"] .xwerp-landing .xwerp-lp-plan-step { transform: translateX(6px); }
.xwerp-landing .xwerp-lp-plan-step.is-shown { opacity: 1; transform: none; }
.xwerp-landing .xwerp-lp-plan-step-icon { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); color: var(--lp-indigo); }
.xwerp-landing .xwerp-lp-plan-step--check .xwerp-lp-plan-step-icon { color: var(--lp-cyan); }
.xwerp-landing .xwerp-lp-plan-step--prepare .xwerp-lp-plan-step-icon { color: var(--lp-amber); }
.xwerp-landing .xwerp-lp-plan-step--decide .xwerp-lp-plan-step-icon { color: var(--lp-green); background: color-mix(in srgb, var(--lp-green) 14%, var(--lp-surface-2)); border-color: color-mix(in srgb, var(--lp-green) 45%, transparent); }
.xwerp-landing .xwerp-lp-plan-step-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.xwerp-landing .xwerp-lp-plan-step-name .xwui-typography { font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-faint); }
:root[lang="ar"] .xwerp-landing .xwerp-lp-plan-step-name .xwui-typography { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; }
.xwerp-landing .xwerp-lp-plan-step-detail .xwui-typography { font-size: 14px; color: var(--lp-text); line-height: 1.5; }
.xwerp-landing .xwerp-lp-plan-step--decide .xwerp-lp-plan-step-detail .xwui-typography { color: color-mix(in srgb, var(--lp-green) 55%, var(--lp-text)); font-weight: 600; }
.xwerp-landing .xwerp-lp-plan-note { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--lp-border); color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-plan-note-icon { display: inline-flex; }
.xwerp-landing .xwerp-lp-plan-note-text .xwui-typography { font-size: 12px; color: var(--lp-faint); }
@media (max-width: 860px) {
    .xwerp-landing .xwerp-lp-decide-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .xwerp-landing .xwerp-lp-plan-step { transition: none !important; transform: none !important; }
    .xwerp-landing .xwerp-lp-askbar-caret { animation: none !important; }
}

/* -- cards (principles, areas, the trio) -------------------------------------- */
.xwerp-landing .xwerp-lp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.xwerp-landing .xwerp-lp-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.xwerp-landing .xwerp-lp-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border-radius: 16px; background: var(--lp-surface); border: 1px solid var(--lp-border); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.3s ease; }
.xwerp-landing .xwerp-lp-card:hover { transform: translateY(-8px) rotateX(2deg) scale(1.015); border-color: var(--lp-border-strong); box-shadow: 0 30px 60px -20px rgba(var(--tone-rgb, 99, 102, 241), 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.xwerp-landing .xwerp-lp-card-glow { position: absolute; top: -40px; inset-inline-end: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--tone); opacity: 0.16; filter: blur(36px); pointer-events: none; }
.xwerp-landing .xwerp-lp-card-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--tone); background: rgba(var(--tone-rgb), 0.15); }
.xwerp-landing .xwerp-lp-card-title h3 { position: relative; margin-top: 16px; font-size: 16.5px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-card-body p { position: relative; margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--lp-muted); }

/* -- built for the Gulf: six cards that show their claim ------------------------- */
.xwerp-landing .xwerp-lp-gcc-title2 { margin-top: -10px; }
.xwerp-landing .xwerp-lp-gcc-title2 .xwui-typography { font-family: var(--lp-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.2; color: transparent; }
.xwerp-landing .xwerp-lp-gcc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 18px; }
.xwerp-landing .xwerp-lp-gcc--wide { grid-column: span 2; }
.xwerp-landing .xwerp-lp-gcc--tall { grid-row: span 2; }
.xwerp-landing .xwerp-lp-gcc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border); transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.xwerp-landing .xwerp-lp-gcc-card:hover { border-color: var(--lp-border-strong); transform: translateY(-4px); }
.xwerp-landing .xwerp-lp-gcc-tag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--lp-indigo) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lp-indigo) 35%, transparent); }
.xwerp-landing .xwerp-lp-gcc-tag .xwui-typography { font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--lp-indigo) 60%, white); }
:root[lang="ar"] .xwerp-landing .xwerp-lp-gcc-tag .xwui-typography { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 11.5px; }
.xwerp-landing .xwerp-lp-gcc-title h3 { font-size: 17px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-note p { font-size: 12.5px; line-height: 1.5; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-gcc-sample { position: absolute; top: 20px; inset-inline-end: 20px; }
/* dates */
.xwerp-landing .xwerp-lp-gcc-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: auto; }
.xwerp-landing .xwerp-lp-gcc-greg .xwui-typography { font-family: var(--lp-mono); font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-hijri .xwui-typography { font-family: "IBM Plex Sans Arabic", var(--lp-display), sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; background: linear-gradient(90deg, var(--lp-green), var(--lp-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xwerp-landing .xwerp-lp-gcc-dates-sep { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 12px var(--lp-green); }
/* invoice */
.xwerp-landing .xwerp-lp-gcc-card--invoice { background: linear-gradient(180deg, var(--lp-surface), var(--lp-bg-soft)); }
.xwerp-landing .xwerp-lp-gcc-invoice-rows { display: flex; flex-direction: column; gap: 8px; }
.xwerp-landing .xwerp-lp-gcc-invoice-row { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--lp-border); }
.xwerp-landing .xwerp-lp-gcc-invoice-label .xwui-typography { font-size: 12.5px; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-gcc-invoice-value .xwui-typography { font-family: var(--lp-mono); font-size: 12.5px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-invoice-row.is-total .xwui-typography { font-weight: 700; font-size: 14px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-qr { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: 116px; padding: 10px; border-radius: 10px; background: white; align-self: center; margin: 6px 0; }
.xwerp-landing .xwerp-lp-gcc-qr-on { aspect-ratio: 1; background: var(--lp-bg); border-radius: 1.5px; }
.xwerp-landing .xwerp-lp-gcc-qr-off { aspect-ratio: 1; }
.xwerp-landing .xwerp-lp-gcc-status { display: flex; gap: 8px; align-items: flex-start; margin-top: auto; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--lp-amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lp-amber) 35%, transparent); color: var(--lp-amber); }
.xwerp-landing .xwerp-lp-gcc-status-icon { display: inline-flex; margin-top: 2px; }
.xwerp-landing .xwerp-lp-gcc-status-text .xwui-typography { font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--lp-amber) 55%, var(--lp-text)); }
/* arabic */
.xwerp-landing .xwerp-lp-gcc-glyph .xwui-typography { font-family: "IBM Plex Sans Arabic", var(--lp-display), sans-serif; font-size: 64px; font-weight: 700; line-height: 1.1; background: linear-gradient(120deg, var(--lp-pink), var(--lp-magenta), var(--lp-indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xwerp-landing .xwerp-lp-gcc-mirror { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; animation: xwerpLpMirror 6s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-gcc-mirror-bar { height: 7px; border-radius: 4px; background: var(--lp-surface-2); width: 70%; }
.xwerp-landing .xwerp-lp-gcc-mirror-bar:nth-child(2) { width: 45%; background: color-mix(in srgb, var(--lp-indigo) 50%, var(--lp-surface-2)); }
.xwerp-landing .xwerp-lp-gcc-mirror-bar:nth-child(3) { width: 58%; }
@keyframes xwerpLpMirror { 0%, 40% { align-items: flex-start; transform: scaleX(1); } 50%, 90% { transform: scaleX(-1); } }
/* keys */
.xwerp-landing .xwerp-lp-gcc-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.xwerp-landing .xwerp-lp-gcc-key .xwui-typography { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font-family: var(--lp-mono); font-size: 14px; font-weight: 600; color: var(--lp-text); background: linear-gradient(180deg, var(--lp-surface-2), var(--lp-bg-soft)); border: 1px solid var(--lp-border-strong); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* drivers */
.xwerp-landing .xwerp-lp-gcc-fall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; margin-top: 4px; }
.xwerp-landing .xwerp-lp-gcc-fall-col { display: flex; flex-direction: column; gap: 6px; }
.xwerp-landing .xwerp-lp-gcc-fall-track { position: relative; height: 120px; }
.xwerp-landing .xwerp-lp-gcc-fall-bar { position: absolute; inset-inline: 0; bottom: var(--from); top: calc(100% - var(--to)); border-radius: 6px; background: var(--lp-surface-2); border: 1px solid var(--lp-border-strong); }
.xwerp-landing .xwerp-lp-gcc-fall-col--up .xwerp-lp-gcc-fall-bar { background: color-mix(in srgb, var(--lp-amber) 55%, transparent); border-color: var(--lp-amber); }
.xwerp-landing .xwerp-lp-gcc-fall-col--total .xwerp-lp-gcc-fall-bar { background: linear-gradient(180deg, var(--lp-indigo), color-mix(in srgb, var(--lp-indigo) 40%, transparent)); border-color: var(--lp-indigo); }
.xwerp-landing .xwerp-lp-gcc-fall-amount .xwui-typography { font-family: var(--lp-mono); font-size: 12.5px; font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-fall-label .xwui-typography { font-size: 11.5px; color: var(--lp-faint); }
/* states */
.xwerp-landing .xwerp-lp-gcc-states { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.xwerp-landing .xwerp-lp-gcc-state { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-gcc-state-icon { display: inline-flex; }
.xwerp-landing .xwerp-lp-gcc-state-text .xwui-typography { font-size: 12px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-gcc-state--info { color: var(--lp-cyan); background: color-mix(in srgb, var(--lp-cyan) 8%, transparent); }
.xwerp-landing .xwerp-lp-gcc-state--planned { color: var(--lp-violet); background: color-mix(in srgb, var(--lp-violet) 8%, transparent); }
.xwerp-landing .xwerp-lp-gcc-state--denied { color: var(--lp-pink); background: color-mix(in srgb, var(--lp-pink) 8%, transparent); }
.xwerp-landing .xwerp-lp-gcc-state--sample { color: var(--lp-amber); background: color-mix(in srgb, var(--lp-amber) 8%, transparent); }
@media (max-width: 960px) {
    .xwerp-landing .xwerp-lp-gcc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xwerp-landing .xwerp-lp-gcc--tall { grid-row: auto; }
}
@media (max-width: 640px) {
    .xwerp-landing .xwerp-lp-gcc-grid { grid-template-columns: 1fr; }
    .xwerp-landing .xwerp-lp-gcc--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .xwerp-landing .xwerp-lp-gcc-mirror { animation: none !important; }
    .xwerp-landing .xwerp-lp-gcc-card { transition: none !important; }
    .xwerp-landing .xwerp-lp-gcc-card:hover { transform: none; }
}

/* -- where it stands: the roadmap's milestones as a checklist --------------------- */
.xwerp-landing .xwerp-lp-stands-panel { max-width: 860px; margin: 0 auto; padding: 26px 28px; border-radius: 22px; background: var(--lp-surface); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-stands-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.xwerp-landing .xwerp-lp-stands-tally .xwui-typography { font-size: 14px; font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-stands-meter { display: flex; gap: 4px; flex: 1 1 200px; max-width: 320px; }
.xwerp-landing .xwerp-lp-stands-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-stands-seg.is-built { background: var(--lp-green); border-color: transparent; }
.xwerp-landing .xwerp-lp-stands-seg.is-progress { background: linear-gradient(90deg, var(--lp-indigo) 50%, var(--lp-surface-2) 50%); border-color: var(--lp-indigo); }
:root[dir="rtl"] .xwerp-landing .xwerp-lp-stands-seg.is-progress { background: linear-gradient(270deg, var(--lp-indigo) 50%, var(--lp-surface-2) 50%); }
.xwerp-landing .xwerp-lp-stands-list { display: flex; flex-direction: column; }
.xwerp-landing .xwerp-lp-stands-row { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-stands-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--lp-border-strong); color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-stands-row.is-built .xwerp-lp-stands-mark { background: color-mix(in srgb, var(--lp-green) 18%, transparent); border-color: var(--lp-green); color: var(--lp-green); }
.xwerp-landing .xwerp-lp-stands-row.is-progress .xwerp-lp-stands-mark { border-color: var(--lp-indigo); color: var(--lp-indigo); }
.xwerp-landing .xwerp-lp-stands-id .xwui-typography { font-family: var(--lp-mono); font-size: 12px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-stands-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xwerp-landing .xwerp-lp-stands-name .xwui-typography { font-size: 14.5px; font-weight: 600; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-stands-row.is-planned .xwerp-lp-stands-name .xwui-typography { color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-stands-proves .xwui-typography { font-size: 12.5px; line-height: 1.45; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-stands-status { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-stands-status .xwui-typography { font-size: 11.5px; font-weight: 600; color: var(--lp-muted); white-space: nowrap; }
.xwerp-landing .xwerp-lp-stands-row.is-built .xwerp-lp-stands-status { border-color: color-mix(in srgb, var(--lp-green) 45%, transparent); background: color-mix(in srgb, var(--lp-green) 10%, transparent); }
.xwerp-landing .xwerp-lp-stands-row.is-built .xwerp-lp-stands-status .xwui-typography { color: var(--lp-green); }
.xwerp-landing .xwerp-lp-stands-row.is-progress .xwerp-lp-stands-status { border-color: color-mix(in srgb, var(--lp-indigo) 50%, transparent); background: color-mix(in srgb, var(--lp-indigo) 12%, transparent); }
.xwerp-landing .xwerp-lp-stands-row.is-progress .xwerp-lp-stands-status .xwui-typography { color: color-mix(in srgb, var(--lp-indigo) 55%, white); }
.xwerp-landing .xwerp-lp-stands-foot { display: flex; justify-content: center; padding-top: 18px; border-top: 1px solid var(--lp-border); }
@media (max-width: 640px) {
    .xwerp-landing .xwerp-lp-stands-panel { padding: 20px 16px; }
    .xwerp-landing .xwerp-lp-stands-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .xwerp-landing .xwerp-lp-stands-id { display: none; }
}

/* -- coverage ------------------------------------------------------------------ */
.xwerp-landing .xwerp-lp-area { --tone: var(--area-hue); padding: 22px; border-top: 2px solid var(--area-hue); }
.xwerp-landing .xwerp-lp-area:hover { box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--area-hue) 45%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.04); }
.xwerp-landing .xwerp-lp-area-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.xwerp-landing .xwerp-lp-area-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xwerp-landing .xwerp-lp-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; color: var(--area-hue); background: color-mix(in srgb, var(--area-hue) 15%, transparent); }
.xwerp-landing .xwerp-lp-area-title h3 { font-size: 16px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-area-count .xwui-typography { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-faint); white-space: nowrap; }
.xwerp-landing .xwerp-lp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xwerp-landing .xwerp-lp-module { padding: 4px 9px; border-radius: 8px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); }
.xwerp-landing .xwerp-lp-module .xwui-typography { font-size: 12px; color: var(--lp-muted); }

/* -- Saudi-ready -------------------------------------------------------------------- */
.xwerp-landing .xwerp-lp-saudi { padding: 100px var(--lp-gutter); }
.xwerp-landing .xwerp-lp-saudi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.xwerp-landing .xwerp-lp-saudi-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; }
.xwerp-landing .xwerp-lp-eyebrow--green, .xwerp-landing .xwerp-lp-eyebrow--green .xwui-typography { color: var(--lp-green); }
.xwerp-landing .xwerp-lp-saudi-copy .xwerp-lp-eyebrow { margin-bottom: 10px; }
.xwerp-landing .xwerp-lp-h2--start h2 { line-height: 1.2; }
.xwerp-landing .xwerp-lp-saudi-body p { margin-top: 18px; max-width: 520px; font-size: 15.5px; line-height: 1.65; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-points { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.xwerp-landing .xwerp-lp-point { display: flex; align-items: center; gap: 10px; }
.xwerp-landing .xwerp-lp-point-icon { color: var(--tone); flex-shrink: 0; display: inline-flex; }
.xwerp-landing .xwerp-lp-point-text .xwui-typography { font-size: 14px; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-saudi-visual { flex: 1 1 360px; min-width: 0; display: flex; justify-content: center; }
.xwerp-landing .xwerp-lp-saudi-stage { width: 100%; max-width: 380px; perspective: 1200px; }
.xwerp-landing .xwerp-lp-saudi-card { --tilt-x: 0deg; --tilt-y: 0deg; padding: 22px; border-radius: 18px; background: var(--lp-surface); border: 1px solid var(--lp-border-strong); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 50px -20px rgba(52, 211, 153, 0.3); transform: rotateY(calc(6deg + var(--tilt-y))) rotateX(calc(2deg + var(--tilt-x))); transition: transform 0.25s ease-out; font-family: "IBM Plex Sans Arabic", var(--lp-display), sans-serif; }
.xwerp-landing .xwerp-lp-saudi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.xwerp-landing .xwerp-lp-saudi-title-ar .xwui-typography { font-family: inherit; font-weight: 700; font-size: 16px; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-saudi-who p { margin-bottom: 16px; font-family: inherit; font-size: 13px; line-height: 1.7; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-saudi-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.xwerp-landing .xwerp-lp-saudi-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--lp-surface-2); border-top: 2px solid var(--tone); }
.xwerp-landing .xwerp-lp-saudi-tile-label .xwui-typography { font-family: inherit; font-size: 11px; color: var(--lp-faint); }
.xwerp-landing .xwerp-lp-saudi-tile-value .xwui-typography { font-family: inherit; font-size: 13px; color: var(--lp-text); }

/* -- developers, roadmap, early access ------------------------------------------------ */
.xwerp-landing .xwerp-lp-trio { padding: 26px; border-top: 2px solid var(--tone); }
.xwerp-landing .xwerp-lp-trio-tag .xwui-typography { font-family: var(--lp-mono); font-size: 11.5px; color: var(--lp-faint); text-transform: uppercase; letter-spacing: 0.05em; }
:root[lang="ar"] .xwerp-landing .xwerp-lp-trio-tag .xwui-typography { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.xwerp-landing .xwerp-lp-trio-title h3 { margin-top: 12px; font-size: 18px; font-weight: 700; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-trio-body { flex: 1; }
.xwerp-landing .xwerp-lp-trio-body p { margin: 10px 0 18px; font-size: 14px; line-height: 1.6; color: var(--lp-muted); }
.xwerp-landing .xwerp-lp-code { padding: 9px 12px; border-radius: 8px; background: var(--lp-surface-2); border: 1px solid var(--lp-border); overflow-x: auto; }
.xwerp-landing .xwerp-lp-code .xwui-typography { font-family: var(--lp-mono); font-size: 12px; color: #67e8f9; white-space: nowrap; }
.xwerp-landing .xwerp-lp-trio .xwerp-lp-cta { align-self: flex-start; }

/* -- closing call to action: a panel with a gradient edge and the brand mark --- */
.xwerp-landing .xwerp-lp-cta-band { padding: 40px var(--lp-gutter) 120px; }
.xwerp-landing .xwerp-lp-cta-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: clamp(32px, 5vw, 64px); border-radius: 28px; border: 1px solid transparent; background: linear-gradient(var(--lp-bg-soft), var(--lp-bg-soft)) padding-box, linear-gradient(120deg, var(--lp-indigo), var(--lp-magenta) 40%, var(--lp-cyan) 75%, var(--lp-green)) border-box; box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--lp-indigo) 55%, transparent); }
.xwerp-landing .xwerp-lp-glow--cta-magenta { top: -160px; inset-inline-start: -80px; width: 460px; height: 460px; filter: blur(12px); background: radial-gradient(closest-side, rgba(232, 121, 249, 0.22), transparent); animation: xwerpLpAuroraA 19s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-glow--cta-cyan { bottom: -180px; inset-inline-end: -60px; width: 480px; height: 480px; filter: blur(12px); background: radial-gradient(closest-side, rgba(34, 211, 238, 0.18), transparent); animation: xwerpLpAuroraC 27s ease-in-out infinite; }
.xwerp-landing .xwerp-lp-cta-copy { position: relative; display: flex; flex-direction: column; gap: 14px; }
.xwerp-landing .xwerp-lp-cta-title h2 { display: flex; flex-direction: column; }
.xwerp-landing .xwerp-lp-cta-line .xwui-typography { display: block; font-family: var(--lp-display); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--lp-text); }
.xwerp-landing .xwerp-lp-cta-line.xwerp-lp-gradient-text .xwui-typography { color: transparent; }
.xwerp-landing .xwerp-lp-cta-text p { font-size: 16px; line-height: 1.6; color: var(--lp-muted); max-width: 520px; }
.xwerp-landing .xwerp-lp-cta-copy .xwerp-lp-ctas { margin-top: 12px; }
.xwerp-landing .xwerp-lp-cta-mark { position: relative; justify-self: center; width: min(320px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.xwerp-landing .xwerp-lp-cta-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--lp-indigo) 45%, transparent); box-shadow: inset 0 0 60px color-mix(in srgb, var(--lp-indigo) 18%, transparent); animation: xwerpLpOrbit 28s linear infinite; }
.xwerp-landing .xwerp-lp-cta-ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--lp-cyan); box-shadow: 0 0 16px var(--lp-cyan); }
.xwerp-landing .xwerp-lp-cta-ring--inner { inset: 18%; border-color: color-mix(in srgb, var(--lp-magenta) 40%, transparent); animation-duration: 18s; animation-direction: reverse; }
.xwerp-landing .xwerp-lp-cta-ring--inner::after { background: var(--lp-magenta); box-shadow: 0 0 16px var(--lp-magenta); }
.xwerp-landing .xwerp-lp-cta-object { position: relative; width: 56%; aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--lp-indigo) 60%, transparent)); }
.xwerp-landing .xwerp-lp-cta-object > * { width: 100% !important; height: 100% !important; }
@keyframes xwerpLpOrbit { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
    .xwerp-landing .xwerp-lp-cta-panel { grid-template-columns: 1fr; }
    .xwerp-landing .xwerp-lp-cta-mark { width: min(220px, 70%); order: -1; }
}

/* -- section labels: a short gradient dash before every eyebrow ------------------ */
.xwerp-landing .xwerp-lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.xwerp-landing .xwerp-lp-head .xwerp-lp-eyebrow { align-self: center; }
.xwerp-landing .xwerp-lp-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lp-indigo), var(--lp-cyan)); }
.xwerp-landing .xwerp-lp-eyebrow--green::before { background: linear-gradient(90deg, var(--lp-green), var(--lp-cyan)); }

@media (prefers-reduced-motion: reduce) {
    .xwerp-landing .xwerp-lp-glow, .xwerp-landing .xwerp-lp-float, .xwerp-landing .xwerp-lp-cta-ring { animation: none !important; }
    .xwerp-landing .xwerp-lp-card, .xwerp-landing .xwerp-lp-cta .xwui-button, .xwerp-landing .xwerp-lp-console, .xwerp-landing .xwerp-lp-saudi-card { transition: none !important; }
    .xwerp-landing .xwerp-lp-card:hover { transform: none; }
}

/* ============================================
   PUBLIC CHROME - the public site's header and footer as the 22-Oct-2026 design
   draws them: a night glass bar with muted links, a mono language pill, a quiet
   "Sign in" and one gradient "Open xwerp"; a quiet footer on the same ground.
   Scoped to .xwerp-public (site.ts), so the signed-in console never changes.
   ============================================ */

.xwerp-public {
    --pc-bg: #0a0c12;
    --pc-border: rgba(255, 255, 255, 0.08);
    --pc-border-strong: rgba(255, 255, 255, 0.18);
    --pc-text: #f3f4f8;
    --pc-muted: #a6acc4;
    --pc-faint: #8a90ab;
    background: var(--pc-bg);
}
.xwerp-public .xwerp-public-bar { position: sticky; top: 0; z-index: 40; background: rgba(10, 12, 18, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--pc-border); }
.xwerp-public .xwui-bar-site-header { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.xwerp-public .xwui-bar-site-header__brand { color: var(--pc-text) !important; font-family: var(--xwerp-font-display, "Sora", sans-serif); font-weight: 700; }
.xwerp-public .xwui-bar-site-header__link { color: var(--pc-muted) !important; font-size: 14.5px; font-weight: 500; background: transparent !important; }
.xwerp-public .xwui-bar-site-header__link:hover,
.xwerp-public .xwui-bar-site-header__link[aria-current="page"] { color: var(--pc-text) !important; }
.xwerp-public .xwui-bar-site-header__actions { gap: 14px; }
/* The theme switcher's caret was 13 px wide; 24 px is the least target
   WCAG 2.5.8 accepts. Here and on the sign-in. */
.xwerp-public .xwui-style-toggle__caret,
.xwerp-signin .xwui-style-toggle__caret { min-width: 24px; min-height: 24px; justify-content: center; }
:root[data-theme] .xwerp-public .xwui-bar-site-header__link.is-active { color: var(--pc-text) !important; background: rgba(255, 255, 255, 0.06) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 8px; }

:root[data-theme] .xwerp-public [data-xwerp-act="lang"] .xwui-button { border-radius: 20px; border: 1px solid var(--pc-border) !important; background: transparent !important; font-family: var(--font-family-mono, "Geist Mono", monospace); font-size: 13px; padding-inline: 12px; }
:root[data-theme] .xwerp-public [data-xwerp-act="lang"] .xwui-button,
:root[data-theme] .xwerp-public [data-xwerp-act="lang"] .xwui-button * { color: var(--pc-muted) !important; }
:root[data-theme] .xwerp-public [data-xwerp-act="lang"] .xwui-button:hover { border-color: var(--pc-border-strong) !important; }
:root[data-theme] .xwerp-public [data-xwerp-act="signin"] .xwui-button { background: transparent !important; border: 0 !important; font-size: 14.5px; font-weight: 500; }
:root[data-theme] .xwerp-public [data-xwerp-act="signin"] .xwui-button,
:root[data-theme] .xwerp-public [data-xwerp-act="signin"] .xwui-button * { color: var(--pc-muted) !important; }
:root[data-theme] .xwerp-public [data-xwerp-act="signin"] .xwui-button:hover,
:root[data-theme] .xwerp-public [data-xwerp-act="signin"] .xwui-button:hover * { color: var(--pc-text) !important; }
:root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button { border: 0 !important; border-radius: 10px; font-weight: 600; font-size: 14.5px; padding-inline: 18px; background: linear-gradient(135deg, #6366f1, #a855f7) !important; background-size: 160% 160% !important; box-shadow: 0 8px 22px -8px rgba(99, 102, 241, 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease; }
:root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button,
:root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button * { color: #fff !important; }
:root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button:hover { transform: translateY(-2px); background-position: 100% 50% !important; box-shadow: 0 16px 36px -10px rgba(99, 102, 241, 0.6); }

.xwerp-public .xwui-bar-site-footer { background: var(--pc-bg) !important; border-top: 1px solid var(--pc-border) !important; color: var(--pc-faint); }
.xwerp-public .xwui-bar-site-footer__brand-link { color: var(--pc-text) !important; font-family: var(--xwerp-font-display, "Sora", sans-serif); font-weight: 700; }
.xwerp-public .xwui-bar-site-footer__brand-desc { color: var(--pc-faint) !important; font-size: 13.5px; line-height: 1.6; }
.xwerp-public .xwui-bar-site-footer__col-title { color: var(--pc-faint) !important; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
:root[lang="ar"] .xwerp-public .xwui-bar-site-footer__col-title { text-transform: none; letter-spacing: 0; }
.xwerp-public .xwui-bar-site-footer__col-link { color: var(--pc-muted) !important; font-size: 14.5px; font-weight: 500; }
.xwerp-public .xwui-bar-site-footer__col-link:hover { color: var(--pc-text) !important; }
.xwerp-public .xwui-bar-site-footer__bottom,
.xwerp-public .xwui-bar-site-footer__bottom * { color: var(--pc-faint) !important; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
    :root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button { transition: none !important; }
    :root[data-theme] .xwerp-public [data-xwerp-act="open"] .xwui-button:hover { transform: none; }
}

/* ============================================
   SIGN IN - the sign-in as the 22-Oct-2026 design draws it (canvas "xwerp —
   Landing & Sign in", board Sign in): a brand panel with a floating board of
   records beside the form on the landing's night ground. Built by
   src/pages/sign-in.ts; the brand panel steps aside below 860 px.
   ============================================ */
body:has(.xwerp-signin) { background: #0a0c12; }
.xwerp-signin {
    --si-bg: #0a0c12;
    --si-bg-soft: #0d1018;
    --si-surface: #141826;
    --si-surface-2: #1b2033;
    --si-border: rgba(255, 255, 255, 0.08);
    --si-border-strong: rgba(255, 255, 255, 0.18);
    --si-text: #f3f4f8;
    --si-muted: #a6acc4;
    --si-faint: #8a90ab;
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    color: var(--si-text);
    color-scheme: dark;
    background-color: var(--si-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0);
    background-size: 3px 3px;
}
.xwerp-signin .xwui-typography { color: inherit; margin: 0; }

/* brand panel */
.xwerp-signin .xwerp-signin-brand { position: relative; flex: 1 1 440px; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 44px clamp(28px, 4vw, 56px); background: var(--si-bg-soft); border-inline-end: 1px solid var(--si-border); overflow: clip; }
.xwerp-signin .xwerp-signin-glows { position: absolute; inset: 0; pointer-events: none; }
.xwerp-signin .xwerp-signin-glow { position: absolute; border-radius: 50%; filter: blur(12px); }
.xwerp-signin .xwerp-signin-glow--indigo { top: -150px; inset-inline-start: -110px; width: 460px; height: 460px; background: radial-gradient(closest-side, rgba(99, 102, 241, 0.35), transparent); animation: xwerpLpAuroraA 19s ease-in-out infinite, xwerpLpPulse 6s ease-in-out infinite; }
.xwerp-signin .xwerp-signin-glow--magenta { bottom: -160px; inset-inline-end: -120px; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(232, 121, 249, 0.22), transparent); animation: xwerpLpAuroraB 24s ease-in-out infinite; }
.xwerp-signin .xwerp-signin-glow--cube { top: 120px; inset-inline-end: 10%; width: 110px; height: 110px; filter: none; border-radius: 18px; border: 1px solid rgba(129, 140, 248, 0.45); background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(34, 211, 238, 0.06)); opacity: 0.55; animation: xwerpLpCube 15s linear infinite; }
.xwerp-signin [class*="xwerp-signin-glow--spark"] { width: 4px; height: 4px; filter: none; animation: xwerpLpTwinkle 3.6s ease-in-out infinite; }
.xwerp-signin .xwerp-signin-glow--spark1 { top: 70px; inset-inline-start: 14%; background: #22d3ee; }
.xwerp-signin .xwerp-signin-glow--spark2 { top: 220px; inset-inline-start: 34%; width: 3px; height: 3px; background: #f472b6; animation-delay: 1s; }
.xwerp-signin .xwerp-signin-glow--spark3 { bottom: 160px; inset-inline-start: 10%; background: #f59e0b; animation-delay: 1.8s; }
.xwerp-signin .xwerp-signin-mark { position: relative; }
.xwerp-signin .xwerp-signin-mark .xwui-button,
.xwerp-signin .xwerp-signin-mark .xwui-typography { font-family: var(--xwerp-font-display, "Sora", sans-serif); font-weight: 700; font-size: 18px; color: var(--si-text) !important; padding: 0; }
.xwerp-signin .xwerp-signin-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.xwerp-signin .xwerp-signin-board { width: 100%; max-width: 360px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 14px 10px 18px; border-radius: 16px; background: var(--si-surface); border: 3px solid #6366f1; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(99, 102, 241, 0.35); animation: xwerpLpFloat 7.5s ease-in-out infinite alternate; }
.xwerp-signin .xwerp-signin-col { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 220px; padding: 0 6px; border-inline-start: 1px solid var(--si-border); }
.xwerp-signin .xwerp-signin-col:first-child { border-inline-start: 0; }
.xwerp-signin .xwerp-signin-col-title { width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--si-border); text-align: center; }
.xwerp-signin .xwerp-signin-col-title .xwui-typography { font-family: var(--font-family-mono, "Geist Mono", monospace); font-size: 11px; color: var(--si-muted); }
:root[lang="ar"] .xwerp-signin .xwerp-signin-col-title .xwui-typography { font-family: inherit; font-size: 12px; }
.xwerp-signin .xwerp-signin-note { width: 34px; height: 34px; border-radius: 5px; }
.xwerp-signin .xwerp-signin-note--amber { background: #f59e0b; transform: rotate(-6deg); }
.xwerp-signin .xwerp-signin-note--blank { height: 40px; background: var(--si-surface-2); border: 1px solid var(--si-border); transform: rotate(4deg); }
.xwerp-signin .xwerp-signin-note--cyan { width: 32px; height: 32px; background: #22d3ee; transform: rotate(5deg); margin-top: 18px; }
.xwerp-signin .xwerp-signin-note--pink { background: #f472b6; transform: rotate(-8deg); }
.xwerp-signin .xwerp-signin-note--green { width: 30px; height: 30px; background: #34d399; transform: rotate(3deg); }
.xwerp-signin .xwerp-signin-quote { position: relative; max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.xwerp-signin .xwerp-signin-quote-text p { font-size: 15.5px; line-height: 1.6; color: var(--si-text); }
.xwerp-signin .xwerp-signin-quote-caption .xwui-typography { font-size: 13px; color: var(--si-faint); }

/* form panel */
.xwerp-signin .xwerp-signin-form-panel { position: relative; flex: 1 1 480px; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; padding: 28px clamp(24px, 4vw, 56px) 32px; overflow: clip; }
.xwerp-signin .xwerp-signin-form-panel::before { content: ""; position: absolute; top: -120px; inset-inline-end: -140px; width: 380px; height: 380px; border-radius: 50%; filter: blur(10px); background: radial-gradient(closest-side, rgba(99, 102, 241, 0.14), transparent); pointer-events: none; }
.xwerp-signin .xwerp-signin-tools { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
:root[data-theme] .xwerp-signin .xwerp-signin-lang .xwui-button { border-radius: 20px; background: transparent !important; border: 1px solid var(--si-border) !important; font-family: var(--font-family-mono, "Geist Mono", monospace); font-size: 12.5px; }
:root[data-theme] .xwerp-signin .xwerp-signin-lang .xwui-button,
:root[data-theme] .xwerp-signin .xwerp-signin-lang .xwui-button * { color: var(--si-muted) !important; }
.xwerp-signin .xwerp-signin-column { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.xwerp-signin .xwerp-signin-column > * { width: 100%; }
.xwerp-signin .xwerp-signin-back { margin-bottom: 28px; }
:root[data-theme] .xwerp-signin .xwerp-signin-back .xwui-button,
:root[data-theme] .xwerp-signin .xwerp-signin-back .xwui-button * { color: var(--si-muted) !important; font-size: 13.5px; padding: 0; }
:root[data-theme] .xwerp-signin .xwerp-signin-back .xwui-button:hover,
:root[data-theme] .xwerp-signin .xwerp-signin-back .xwui-button:hover * { color: #c4cbff !important; }
.xwerp-signin .xwerp-signin-title .xwui-typography { font-family: var(--xwerp-font-display, "Sora", sans-serif); font-size: 30px; font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(90deg, #f3f4f8, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.xwerp-signin .xwerp-signin-tagline p { margin: 12px 0 32px; font-size: 15px; line-height: 1.6; color: var(--si-muted); }
.xwerp-signin label, .xwerp-signin .xwui-input-label { font-size: 13.5px; font-weight: 600; color: var(--si-muted) !important; }
/* The field's frame is XWUI's container; the input inside it stays bare. */
.xwerp-signin .xwui-input-text-container { min-height: 46px; background: var(--si-surface-2) !important; border: 1px solid var(--si-border) !important; border-radius: 10px !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.xwerp-signin .xwui-input-text-container:focus-within { border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important; }
.xwerp-signin .xwui-input-text-container input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--si-text) !important; font-size: 14.5px; outline: none; }
.xwerp-signin .xwui-input-text-container input::placeholder { color: var(--si-faint); }
:root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button { width: 100%; min-height: 48px; border: 0 !important; border-radius: 10px; font-weight: 600; font-size: 15.5px; background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%) !important; background-size: 160% 160% !important; box-shadow: 0 12px 28px -8px rgba(99, 102, 241, 0.55); transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease; }
:root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button,
:root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button * { color: #fff !important; }
:root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button:hover { transform: translateY(-2px); background-position: 100% 50% !important; box-shadow: 0 16px 36px -10px rgba(99, 102, 241, 0.6); }
.xwerp-signin .xwerp-signin-trouble { margin-top: 28px; }
.xwerp-signin .xwerp-signin-trouble .xwui-typography { font-size: 12.5px; line-height: 1.6; color: var(--si-faint); }
.xwerp-signin .xwerp-signin-foot { position: relative; text-align: center; }
.xwerp-signin .xwerp-signin-foot .xwui-typography { font-size: 12px; color: var(--si-faint); }

@media (max-width: 860px) {
    .xwerp-signin .xwerp-signin-brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xwerp-signin .xwerp-signin-glow, .xwerp-signin .xwerp-signin-board { animation: none !important; }
    :root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button { transition: none !important; }
    :root[data-theme] .xwerp-signin .xwerp-signin-submit .xwui-button:hover { transform: none; }
}

/* The site's last word: the name, very large, fading into the ground under
   the footer (footer.ts). On every public page. */
.xwerp-public .xwerp-public-wordmark { position: relative; overflow: hidden; height: clamp(90px, 15vw, 220px); margin-top: -10px; pointer-events: none; user-select: none; text-align: center; }
.xwerp-public .xwerp-public-wordmark .xwui-typography { display: block; font-family: var(--xwerp-font-display, "Sora", sans-serif); font-weight: 800; font-size: clamp(110px, 22vw, 330px); line-height: 0.95; letter-spacing: -0.05em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* -- home: the greeting on the start side, the role center card on the end side (Nocturne .hm-top, .hm-rc) -- */
.xwerp-home-greeting { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.xwerp-home-greeting-words { flex: 1 1 auto; min-width: 0; }
.xwerp-home-role-host:empty { display: none; }
.xwerp-home-role { flex: none; width: 500px; max-width: 48%; padding: 9px 11px; border-radius: 14px; --c: #7b8cff;
  border: 1px solid color-mix(in oklab, var(--c) 30%, rgba(255, 255, 255, 0.075));
  background: linear-gradient(120deg, color-mix(in oklab, var(--c) 12%, transparent), transparent 70%), rgba(255, 255, 255, 0.035); }
.xwerp-home-role-host { flex: none; width: 500px; max-width: 48%; }
.xwerp-home-role-host .xwerp-home-role { width: 100%; max-width: none; }
.xwerp-home-role-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xwerp-home-role-glyph { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 12px Geist, system-ui, sans-serif; color: var(--c); background: color-mix(in oklab, var(--c) 18%, transparent); }
.xwerp-home-role-words { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.xwerp-home-role-name { font-size: 12px; font-weight: 600; color: #eef0f7; }
.xwerp-home-role-scope { font-size: 11.5px; color: #757c93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-home-role-chips { display: flex; gap: 6px; margin-top: 7px; overflow: hidden; flex-wrap: nowrap; }
.xwerp-home-role-chip { flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.035); color: #eef0f7; font: 500 12px Geist, "IBM Plex Sans Arabic", system-ui, sans-serif; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.xwerp-home-role-chip:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); }
.xwerp-home-role-chip:focus-visible { outline: 2px solid #7b8cff; outline-offset: 2px; }
html[data-theme="light"] .xwerp-home-role-name, html[data-theme="light"] .xwerp-home-role-chip { color: #111827; }
html[data-theme="light"] .xwerp-home-role-chip { border-color: rgba(17, 24, 39, 0.14); background: #fff; }
@media (max-width: 900px) {
  .xwerp-home-greeting { flex-direction: column; align-items: stretch; }
  .xwerp-home-role-host { width: auto; max-width: none; }
  .xwerp-home-role-chips { flex-wrap: wrap; }
}

/* == Approvals board (Nocturne "Approvals inbox", src/pages/workspace-approvals) ============== */
.xwerp-apv { --bd: rgba(255,255,255,.075); --bd2: rgba(255,255,255,.13); --pn: rgba(255,255,255,.035); --pn2: rgba(255,255,255,.06);
  --tx: #eef0f7; --tx2: #a6acc2; --tx3: #757c93; --acc: #7b8cff; --acc-tx: #a9b4ff; --ok: #5fe0b0; --warn: #ffbe5c; --bad: #ff6b8a; --iris: #c08bff; --sky: #5cc8ff;
  display: grid; gap: 14px; padding: 18px 22px 24px; color: var(--tx); font-family: Geist, "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 14px; }
:root[dir="rtl"] .xwerp-apv { font-family: "IBM Plex Sans Arabic", Geist, system-ui, sans-serif; }
.xwerp-apv-eyebrow { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font: 600 11px "Geist Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-apv-eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--acc); flex: none; }
:root[lang="ar"] .xwerp-apv-eyebrow { letter-spacing: 0; font-family: inherit; }
.xwerp-apv-title { margin: 0; font: 600 clamp(28px, 3.2vw, 36px)/1.1 Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: -.03em; }
:root[lang="ar"] .xwerp-apv-title { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: 0; }
.xwerp-apv-title-tail { color: var(--tx3); font-weight: 500; }
.xwerp-apv-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xwerp-apv-fig { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--bd); background: var(--pn); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.xwerp-apv-fig-words { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xwerp-apv-fig-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); }
.xwerp-apv-fig-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, var(--acc)); }
.xwerp-apv-fig.is-violet { --tone: var(--iris); } .xwerp-apv-fig.is-amber { --tone: var(--warn); } .xwerp-apv-fig.is-sky { --tone: var(--acc); } .xwerp-apv-fig.is-pearl { --tone: #ff8fb1; }
.xwerp-apv-fig-value { font: 600 22px/1.2 Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: -.02em; }
.xwerp-apv-fig-sub { font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-apv-ring { flex: none; width: 52px; height: 52px; border-radius: 50%; background: conic-gradient(var(--ring, var(--ok)) calc(var(--share) * 360deg), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(circle, transparent 19px, #000 20px); mask: radial-gradient(circle, transparent 19px, #000 20px); }
.xwerp-apv-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; flex: none; }
.xwerp-apv-bars i { width: 8px; border-radius: 2px; background: rgba(123,140,255,.55); }
.xwerp-apv-bars i.is-soon { background: var(--warn); }
.xwerp-apv-strip { position: absolute; inset-inline: 16px; bottom: 12px; display: flex; gap: 3px; height: 4px; }
.xwerp-apv-strip i { border-radius: 2px; background: var(--acc); } .xwerp-apv-strip i:nth-child(2) { background: var(--ok); } .xwerp-apv-strip i:nth-child(3) { background: var(--warn); } .xwerp-apv-strip i:nth-child(4) { background: var(--bad); }
.xwerp-apv-fig.is-pearl::after { content: ""; position: absolute; inset-inline: 16px; bottom: 12px; height: 4px; border-radius: 2px; background: linear-gradient(115deg,#7b8cff,#c08bff 40%,#ff8fb1 75%,#ffc27a); }
.xwerp-apv-cols { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 320px); gap: 12px; align-items: start; }
.xwerp-apv-panel { border-radius: 16px; border: 1px solid var(--bd); background: var(--pn); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.xwerp-apv-list { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.xwerp-apv-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xwerp-apv-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.xwerp-apv-filter { min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--pn); color: var(--tx2); font: 500 12px inherit; font-family: inherit; cursor: pointer; }
.xwerp-apv-filter.is-on { border-color: var(--acc); color: var(--tx); background: rgba(123,140,255,.14); }
.xwerp-apv-count { font-size: 12px; color: var(--tx3); white-space: nowrap; }
.xwerp-apv-rows { display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow: auto; }
.xwerp-apv-row { display: flex; flex-direction: column; gap: 5px; text-align: start; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); color: var(--tx); font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.xwerp-apv-row:hover { border-color: var(--bd2); }
.xwerp-apv-row.is-on { border-color: rgba(123,140,255,.6); background: rgba(123,140,255,.1); box-shadow: 0 0 0 3px rgba(123,140,255,.12); }
.xwerp-apv-row.is-done { opacity: .62; }
.xwerp-apv-row:focus-visible, .xwerp-apv-filter:focus-visible, .xwerp-apv-tab:focus-visible, .xwerp-apv-act:focus-visible, .xwerp-apv-hold:focus-visible, .xwerp-apv-open:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xwerp-apv-row-top { display: flex; align-items: center; gap: 7px; font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
.xwerp-apv-mod { padding: 1px 6px; border-radius: 5px; background: rgba(123,140,255,.16); color: var(--acc-tx); font-weight: 600; }
.xwerp-apv-due { margin-inline-start: auto; color: var(--tx2); }
.xwerp-apv-row-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xwerp-apv-row-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--tx2); }
.xwerp-apv-row-meta b { color: var(--tx); font-weight: 600; white-space: nowrap; }
.xwerp-apv-row-note { padding-inline-start: 8px; border-inline-start: 2px solid var(--ok); font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-apv-row-note.is-flag { border-color: var(--warn); }
.xwerp-apv-row-status { align-self: flex-start; font-size: 11px; color: var(--ok); }
.xwerp-apv-detail { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xwerp-apv-d-top { display: flex; gap: 16px; align-items: flex-start; }
.xwerp-apv-d-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.xwerp-apv-d-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.xwerp-apv-chip { padding: 2px 9px; border-radius: 7px; border: 1px solid var(--bd2); font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-apv-chip.is-mod { border-color: rgba(123,140,255,.45); color: var(--acc-tx); background: rgba(123,140,255,.12); font-family: inherit; }
.xwerp-apv-d-title { margin: 0; font: 600 22px/1.25 Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; letter-spacing: -.02em; }
.xwerp-apv-d-summary { margin: 0; color: var(--tx2); font-size: 13.5px; line-height: 1.5; }
.xwerp-apv-d-amount { margin: 2px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--tx3); }
.xwerp-apv-d-amount b { font: 600 22px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--warn); }
.xwerp-apv-d-conf { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; font-size: 11.5px; color: var(--tx3); }
.xwerp-apv-d-conf b { color: var(--tx); font-size: 14px; }
.xwerp-apv-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xwerp-apv-step { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--bd2); font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-apv-step + .xwerp-apv-step::before { content: "→"; margin-inline-end: 10px; margin-inline-start: -2px; color: var(--tx3); }
:root[dir="rtl"] .xwerp-apv-step + .xwerp-apv-step::before { content: "←"; }
.xwerp-apv-step.is-now { border-color: var(--acc); background: rgba(123,140,255,.22); color: var(--tx); font-family: inherit; }
.xwerp-apv-risk { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(192,139,255,.3); background: linear-gradient(115deg, rgba(123,140,255,.12), rgba(192,139,255,.08) 50%, transparent), rgba(255,255,255,.02); }
.xwerp-apv-risk p { margin: 6px 0 0; font-size: 13px; color: var(--tx2); }
.xwerp-apv-risk-why { font-size: 12px !important; color: var(--tx3) !important; }
.xwerp-apv-risk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xwerp-apv-badge { padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.xwerp-apv-badge.is-ok { background: rgba(95,224,176,.12); color: var(--ok); } .xwerp-apv-badge.is-warn { background: rgba(255,190,92,.13); color: var(--warn); }
.xwerp-apv-layer { display: inline-block; margin-top: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(192,139,255,.4); font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--iris); }
.xwerp-apv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bd); }
.xwerp-apv-tab { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tx2); font: 500 13px inherit; font-family: inherit; cursor: pointer; }
.xwerp-apv-tab.is-on { color: var(--tx); border-bottom-color: var(--acc); }
.xwerp-apv-table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.xwerp-apv-table + .xwerp-apv-table { margin-top: 10px; }
.xwerp-apv-table th { padding: 8px 12px; text-align: start; font: 600 10.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); border-bottom: 1px solid var(--bd); }
:root[lang="ar"] .xwerp-apv-table th { letter-spacing: 0; font-family: inherit; font-size: 11.5px; }
.xwerp-apv-table td { white-space: nowrap; padding: 9px 12px; border-bottom: 1px solid var(--bd); color: var(--tx); }
.xwerp-apv-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }
.xwerp-apv-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.xwerp-apv-check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bd); }
.xwerp-apv-check > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: 12.5px; color: var(--tx2); }
.xwerp-apv-check b { color: var(--tx); font-size: 13px; }
.xwerp-apv-check-mark { width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.xwerp-apv-check.is-pass .xwerp-apv-check-mark { background: rgba(95,224,176,.14); color: var(--ok); }
.xwerp-apv-check.is-flag .xwerp-apv-check-mark { background: rgba(255,190,92,.15); color: var(--warn); }
.xwerp-apv-check-word { font-size: 11.5px; color: var(--tx3); }
.xwerp-apv-auth { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13px; }
.xwerp-apv-auth dt { color: var(--tx3); } .xwerp-apv-auth dd { margin: 0; color: var(--tx); }
.xwerp-apv-notai { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(95,224,176,.08); color: var(--ok); font-size: 12.5px; }
.xwerp-apv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.xwerp-apv-hold, .xwerp-apv-act { position: relative; overflow: hidden; min-height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--bd2); background: var(--pn); color: var(--tx); font: 600 13px inherit; font-family: inherit; cursor: pointer; }
.xwerp-apv-hold { border-color: rgba(123,140,255,.6); background: rgba(123,140,255,.12); padding: 0 20px; }
.xwerp-apv-hold::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: rgba(123,140,255,.35); }
:root[dir="rtl"] .xwerp-apv-hold::after { transform-origin: right center; }
.xwerp-apv-hold.is-holding::after { transform: scaleX(1); transition: transform .9s linear; }
.xwerp-apv-hold:disabled, .xwerp-apv-act:disabled { opacity: .45; cursor: not-allowed; }
.xwerp-apv-act.is-quiet { border-color: transparent; background: none; color: var(--tx2); }
.xwerp-apv-open { margin-inline-start: auto; border: 0; background: none; color: var(--tx); font: 500 13px inherit; font-family: inherit; cursor: pointer; }
.xwerp-apv-open::after { content: " ↗"; color: var(--tx3); }
.xwerp-apv-decided { font-weight: 600; color: var(--ok); }
.xwerp-apv-reason-label { font-size: 12.5px; color: var(--tx2); }
.xwerp-apv-notice { flex-basis: 100%; margin: 0; color: var(--bad); font-size: 12.5px; }
.xwerp-apv-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xwerp-apv-side-head h2 { margin: 0; font: 600 16px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-apv-side-head p { margin: 2px 0 0; font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-apv-ladder, .xwerp-apv-who { padding: 16px; }
.xwerp-apv-stairs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 8px; }
.xwerp-apv-rung { display: flex; align-items: center; gap: 12px; }
.xwerp-apv-rung-block { flex: none; height: 30px; width: calc(48px + var(--i) * 22px); border-radius: 7px; background: linear-gradient(180deg, rgba(123,140,255,.35), rgba(123,140,255,.12)); border: 1px solid rgba(123,140,255,.35); transform: skewX(-12deg); }
.xwerp-apv-rung.is-done .xwerp-apv-rung-block { background: linear-gradient(180deg, rgba(95,224,176,.5), rgba(95,224,176,.15)); border-color: rgba(95,224,176,.55); }
.xwerp-apv-rung.is-now .xwerp-apv-rung-block { background: linear-gradient(180deg, #c08bff, rgba(123,140,255,.4)); border-color: #c08bff; box-shadow: 0 0 18px rgba(192,139,255,.45); }
.xwerp-apv-rung.is-blocked .xwerp-apv-rung-block { background: rgba(255,107,138,.18); border-color: var(--bad); }
.xwerp-apv-rung-words { display: flex; flex-direction: column; font-size: 12px; color: var(--tx3); }
.xwerp-apv-rung-words b { color: var(--tx); font-size: 13px; font-weight: 600; }
.xwerp-apv-orbit { position: relative; height: 230px; margin-top: 8px; }
.xwerp-apv-orbit::before, .xwerp-apv-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--bd2); transform: translate(-50%, -50%); }
.xwerp-apv-orbit::before { width: 170px; height: 110px; } .xwerp-apv-orbit::after { width: 270px; height: 190px; border-style: dashed; border-color: var(--bd); }
.xwerp-apv-orb { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 120px; text-align: center; font-size: 11px; color: var(--tx3); transform: translate(-50%, -50%); z-index: 1; }
.xwerp-apv-orb i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 Geist, system-ui, sans-serif; font-style: normal; color: #0b0d14; background: #a6acc2; }
.xwerp-apv-orb b { color: var(--tx); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xwerp-apv-orb.is-centre { left: 50%; top: 50%; } .xwerp-apv-orb.is-centre i { width: 44px; height: 44px; background: radial-gradient(circle at 35% 30%, #fff, #c08bff 45%, #7b8cff); box-shadow: 0 0 22px rgba(192,139,255,.5); }
.xwerp-apv-orb.is-preparer { left: 18%; top: 18%; } .xwerp-apv-orb.is-preparer i { background: #c08bff; }
.xwerp-apv-orb.is-for { left: 82%; top: 18%; } .xwerp-apv-orb.is-for i { background: #5cc8ff; }
.xwerp-apv-orb.is-approver, .xwerp-apv-orb.is-blocked { left: 50%; top: 88%; } .xwerp-apv-orb.is-approver i { background: #ff8fb1; } .xwerp-apv-orb.is-blocked i { background: var(--bad); }
html[data-theme="light"] .xwerp-apv { --bd: rgba(17,24,39,.1); --bd2: rgba(17,24,39,.16); --pn: #fff; --tx: #111827; --tx2: #4b5563; --tx3: #6b7280; }
@media (max-width: 1280px) { .xwerp-apv-cols { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); } .xwerp-apv-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .xwerp-apv-figures { grid-template-columns: 1fr 1fr; } .xwerp-apv-cols { grid-template-columns: 1fr; } .xwerp-apv-side { grid-template-columns: 1fr; } .xwerp-apv-rows { max-height: 360px; } }
@media (max-width: 520px) { .xwerp-apv { padding: 14px 12px; } .xwerp-apv-figures { grid-template-columns: 1fr; } .xwerp-apv-d-top { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .xwerp-apv-hold.is-holding::after { transition: none; } }
/* Long single-line labels must not widen the board's grids past a phone's width. */
.xwerp-apv, .xwerp-apv > *, .xwerp-apv-figures > *, .xwerp-apv-cols > *, .xwerp-apv-side > * { min-width: 0; }
.xwerp-apv-tabpanel { overflow-x: auto; }
.xwerp-apv-orbit { overflow: hidden; }
.xwerp-apv-row { min-width: 0; max-width: 100%; }

/* == People and org board (Nocturne "People and org", src/pages/hr/people-board.ts) ============ */
.xwerp-pb { --bd: rgba(255,255,255,.075); --bd2: rgba(255,255,255,.13); --pn: rgba(255,255,255,.035); --tx: #eef0f7; --tx2: #a6acc2; --tx3: #757c93; --acc: #7b8cff; --ok: #5fe0b0; --warn: #ffbe5c; --bad: #ff6b8a; --iris: #c08bff;
  display: grid; gap: 12px; margin-bottom: 16px; color: var(--tx); font-family: Geist, "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-pb, .xwerp-pb > *, .xwerp-pb .xwerp-apv-figures > *, .xwerp-pb-middle > *, .xwerp-pb-bottom > * { min-width: 0; }
.xwerp-pb .xwerp-apv-fig.is-pink { --tone: #ff8fb1; } .xwerp-pb .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-pb .xwerp-apv-strip i:first-child { background: var(--ok); } .xwerp-pb .xwerp-apv-strip i:nth-child(2) { background: var(--warn); }
.xwerp-pb-dots { position: absolute; inset-inline: 16px; bottom: 12px; display: flex; gap: 4px; }
.xwerp-pb-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--ok); } .xwerp-pb-dots i.is-off { background: var(--bad); }
.xwerp-pb-middle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.xwerp-pb-stage, .xwerp-pb-profile, .xwerp-pb-list { padding: 16px; }
.xwerp-pb-sky { position: relative; height: 300px; margin-top: 8px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(123,140,255,.12), transparent 60%), radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.3), transparent); }
.xwerp-pb-orbit { position: absolute; left: 50%; top: 50%; width: calc(var(--rx) * 2); height: calc(var(--ry) * 2); border-radius: 50%; border: 1px dashed rgba(255,255,255,.14); transform: translate(-50%, -50%); }
.xwerp-pb-ring-label { position: absolute; left: 50%; transform: translateX(-50%); font: 500 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); white-space: nowrap; }
.xwerp-pb-core { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fff, #c9d0ff 50%, #7b8cff); box-shadow: 0 0 30px rgba(123,140,255,.6); }
.xwerp-pb-star { position: absolute; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); transform: translate(-50%, -50%); background: var(--acc); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.xwerp-pb-star.is-ring1 { background: #ff8fb1; } .xwerp-pb-star.is-ring2 { background: var(--warn); } .xwerp-pb-star.is-ring3 { background: var(--ok); }
.xwerp-pb-star.is-left { opacity: .35; }
.xwerp-pb-star:hover, .xwerp-pb-star.is-on { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 18px rgba(255,143,177,.7); }
.xwerp-pb-star:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.xwerp-pb-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--tx3); }
.xwerp-pb-who { display: flex; align-items: center; gap: 10px; }
.xwerp-pb-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 13px Geist, system-ui, sans-serif; color: #0b0d14; background: linear-gradient(135deg, #ff8fb1, #c08bff); }
.xwerp-pb-who-words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.xwerp-pb-who-words h2 { margin: 0; font: 600 16px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-pb-who-words span { font-size: 12px; color: var(--tx3); }
.xwerp-pb-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 12px; color: var(--tx3); }
.xwerp-pb-lens b { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(192,139,255,.45); background: rgba(192,139,255,.12); color: var(--tx); font-weight: 600; }
.xwerp-pb-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; }
.xwerp-pb-facts dt, .xwerp-pb-facts dd { padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
.xwerp-pb-facts dt { color: var(--tx3); padding-inline-end: 18px; }
.xwerp-pb-facts dd { margin: 0; display: flex; justify-content: space-between; gap: 8px; color: var(--tx); }
.xwerp-pb-facts .is-withheld { color: var(--tx3); font-style: italic; }
.xwerp-pb-src { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 11px; }
.xwerp-pb-src.is-directory { background: rgba(92,200,255,.12); color: #5cc8ff; } .xwerp-pb-src.is-readable { background: rgba(95,224,176,.12); color: var(--ok); } .xwerp-pb-src.is-withheld { background: rgba(255,107,138,.13); color: var(--bad); }
.xwerp-pb-alert { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,190,92,.12); color: var(--warn); font-size: 12.5px; }
.xwerp-pb-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xwerp-pb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.xwerp-pb-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.xwerp-pb-row b { font-size: 13.5px; font-weight: 600; }
.xwerp-pb-row span { font-size: 12px; color: var(--tx3); }
.xwerp-pb-meter { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; max-width: 220px; }
.xwerp-pb-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #5cc8ff); }
.xwerp-pb-days { white-space: nowrap; font-variant-numeric: tabular-nums; }
.xwerp-pb-none { color: var(--tx3); font-size: 13px; }
html[data-theme="light"] .xwerp-pb { --bd: rgba(17,24,39,.1); --bd2: rgba(17,24,39,.16); --pn: #fff; --tx: #111827; --tx2: #4b5563; --tx3: #6b7280; }
@media (max-width: 1100px) { .xwerp-pb-middle, .xwerp-pb-bottom { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .xwerp-pb .xwerp-apv-figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .xwerp-pb .xwerp-apv-figures { grid-template-columns: 1fr; } .xwerp-pb-sky { height: 240px; } }
/* A figure with a bar along its foot keeps its last line clear of the bar. */
.xwerp-apv-fig:has(.xwerp-apv-strip, .xwerp-pb-dots), .xwerp-apv-fig.is-pearl { padding-bottom: 26px; }
.xwerp-pb .xwerp-apv-fig.is-pink .xwerp-apv-ring { --ring: #ff8fb1; }

/* == Point of sale (Nocturne "Point of sale": figures, then shelf, cart and receipt) ============ */
.xwerp-pos-body { --bd: rgba(255,255,255,.075); --pn: rgba(255,255,255,.035); --tx: #eef0f7; --tx2: #a6acc2; --tx3: #757c93; --acc: #7b8cff; --ok: #5fe0b0; --warn: #ffbe5c; --iris: #c08bff; }
.xwerp-pos-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xwerp-pos-figures:empty { display: none; }
.xwerp-pos-figures .xwerp-apv-fig { min-height: 78px; }
.xwerp-pos-figures .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-pos-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(240px, .8fr); gap: 12px; align-items: stretch; }
.xwerp-pos-cols > * { min-width: 0; }
.xwerp-pos-shelf, .xwerp-pos-cart, .xwerp-pos-printer { padding: 14px; border-radius: 16px; border: 1px solid var(--bd); background: var(--pn); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.xwerp-pos-printer { display: flex; flex-direction: column; gap: 10px; min-height: 420px; }
.xwerp-pos-printer-head { margin: 0; font: 600 16px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--tx); }
.xwerp-pos-printer-idle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--tx3); font-size: 12.5px; }
.xwerp-pos-printer-idle b { color: var(--tx); font-size: 13.5px; }
.xwerp-pos-printer-icon { width: 34px; height: 34px; border: 2px solid var(--tx2); border-radius: 6px; position: relative; margin-bottom: 4px; }
.xwerp-pos-printer-icon::before { content: ""; position: absolute; inset-inline: 6px; top: -9px; height: 9px; border: 2px solid var(--tx2); border-bottom: 0; border-radius: 3px 3px 0 0; }
.xwerp-pos-printer-icon::after { content: ""; position: absolute; inset-inline: 6px; bottom: -6px; height: 10px; border: 2px solid var(--tx2); border-radius: 0 0 3px 3px; background: #0c0e16; }
.xwerp-pos-printer-device { align-self: center; width: 150px; height: 64px; border-radius: 10px; background: linear-gradient(160deg, #2a3045, #151925); box-shadow: 0 18px 30px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); transform: perspective(300px) rotateX(28deg) rotateZ(-8deg); position: relative; }
.xwerp-pos-printer-device::before { content: ""; position: absolute; left: 22%; right: 22%; top: 26%; height: 4px; border-radius: 2px; background: #07080d; }
.xwerp-pos-printer-device::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
html[data-theme="light"] .xwerp-pos-body { --bd: rgba(17,24,39,.1); --pn: #fff; --tx: #111827; --tx2: #4b5563; --tx3: #6b7280; }
@media (max-width: 1280px) { .xwerp-pos-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .xwerp-pos-printer { grid-column: 1 / -1; min-height: 0; } .xwerp-pos-printer-device { display: none; } }
@media (max-width: 900px) { .xwerp-pos-figures { grid-template-columns: 1fr 1fr; } .xwerp-pos-cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-pos-figures { grid-template-columns: 1fr; } }
.xwerp-pos-printer { align-self: start; }
.xwerp-pos-printer-idle { flex: none; padding: 48px 0 24px; }
/* The category control scrolls inside the shelf on a phone rather than pushing past it. */
.xwerp-pos-shelf .xwui-segmented-control { max-width: 100%; overflow-x: auto; }

/* == Financial statements (Nocturne "Statements and aging", src/pages/workspace-finance/statements.ts) == */
.xwerp-st .xwerp-apv-fig.is-pink { --tone: #ff8fb1; } .xwerp-st .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-st-tick { --ring: var(--ok); width: 46px; height: 46px; -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
.xwerp-st-tick.is-off { --ring: var(--warn); }
.xwerp-st-middle { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 12px; }
.xwerp-st-middle > *, .xwerp-st-bottom > * { min-width: 0; }
.xwerp-st-shape, .xwerp-st-sheet, .xwerp-st-aging, .xwerp-st-check { padding: 16px; }
.xwerp-st-bars { display: flex; align-items: flex-end; gap: 14px; height: 280px; margin-top: 16px; padding: 0 6px; perspective: 600px; }
.xwerp-st-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--tx3); text-align: center; }
.xwerp-st-bar b { color: var(--tx); font: 600 12px "Geist Mono", ui-monospace, monospace; }
.xwerp-st-pillar { width: 70%; height: var(--h); border-radius: 6px 6px 3px 3px; transform: rotateX(8deg); transform-origin: bottom; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); box-shadow: 0 0 22px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.35); }
.xwerp-st-bar.is-sky { --c: #5cc8ff; } .xwerp-st-bar.is-pink { --c: #ff8fb1; } .xwerp-st-bar.is-violet { --c: #a97bff; } .xwerp-st-bar.is-green { --c: #5fe0b0; } .xwerp-st-bar.is-amber { --c: #ffbe5c; }
.xwerp-st-sheet { display: flex; flex-direction: column; gap: 12px; }
.xwerp-st-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xwerp-st-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); }
.xwerp-st-tab { padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: var(--tx2); font: 500 13px inherit; font-family: inherit; cursor: pointer; }
.xwerp-st-tab.is-on { background: rgba(255,255,255,.08); color: var(--tx); }
.xwerp-st-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xwerp-st-table td { white-space: normal; }
.xwerp-st-section td { font-weight: 600; color: var(--tx); background: rgba(255,255,255,.02); }
.xwerp-st-line td:first-child { padding-inline-start: 26px; }
.xwerp-st-code { margin-inline-end: 8px; font: 500 12px "Geist Mono", ui-monospace, monospace; color: var(--acc-tx, #a9b4ff); }
.xwerp-st-result td { font-weight: 700; }
.xwerp-st-result .is-good { color: var(--ok); } .xwerp-st-result .is-bad { color: var(--bad, #ff6b8a); }
.xwerp-st-foot { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,190,92,.35); background: rgba(255,190,92,.06); }
.xwerp-st-foot.is-ok { border-color: rgba(95,224,176,.35); background: rgba(95,224,176,.06); }
.xwerp-st-foot > div:first-child { display: flex; flex-direction: column; flex: 1; font-size: 12px; color: var(--tx3); }
.xwerp-st-foot b { color: var(--tx); font-size: 13px; }
.xwerp-st-digits { display: flex; flex-direction: column; gap: 3px; }
.xwerp-st-digit-row { display: flex; gap: 2px; direction: ltr; }
.xwerp-st-digit-row i { width: 14px; height: 18px; display: grid; place-items: center; border-radius: 3px; background: rgba(255,255,255,.08); font: 600 11px "Geist Mono", ui-monospace, monospace; font-style: normal; color: var(--tx); }
.xwerp-st-note { margin: 0; font-size: 12px; color: var(--tx3); }
.xwerp-st-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.xwerp-st-agecols { display: flex; align-items: flex-end; gap: 12px; height: 170px; margin: 14px 0 10px; }
.xwerp-st-agecol { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11.5px; color: var(--tx3); }
.xwerp-st-agecol b { color: var(--tx); font: 600 12px "Geist Mono", ui-monospace, monospace; }
.xwerp-st-block { width: 64%; height: var(--h); border-radius: 6px; background: linear-gradient(180deg, var(--c, #7b8cff), color-mix(in srgb, var(--c, #7b8cff) 35%, transparent)); box-shadow: 0 10px 22px -10px var(--c, #7b8cff); }
.xwerp-st-agecol.is-1 { --c: #ffbe5c; } .xwerp-st-agecol.is-2 { --c: #ff9f6b; } .xwerp-st-agecol.is-3 { --c: #ff6b8a; } .xwerp-st-agecol.is-4 { --c: #e0476b; }
.xwerp-st-checklist { margin-top: 14px; }
.xwerp-st-verdict { margin: 14px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255,190,92,.1); color: var(--warn); font-size: 12.5px; }
.xwerp-st-verdict.is-ok { background: rgba(95,224,176,.08); color: var(--ok); }
@media (max-width: 1100px) { .xwerp-st-middle, .xwerp-st-bottom { grid-template-columns: 1fr; } .xwerp-st-bars { height: 200px; } }

/* == Employee portal board (Nocturne "Employee portal", src/pages/nextgen/ess/board.ts) ========== */
.xwerp-essb { padding: 0 0 16px; }
.xwerp-essb .xwerp-apv-title { font-size: clamp(24px, 2.8vw, 32px); }
.xwerp-essb .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-essb-dots { position: absolute; inset-inline: 16px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 3px; }
.xwerp-essb-dots i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.12); }
.xwerp-essb-dots i.is-left { background: var(--iris); }
.xwerp-essb .xwerp-apv-fig:has(.xwerp-essb-dots) { padding-bottom: 30px; }
.xwerp-essb-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.xwerp-essb-lower > * { min-width: 0; }
.xwerp-essb-tracker, .xwerp-essb-ask { padding: 16px; }
.xwerp-essb-strands { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.xwerp-essb-strand { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) auto; align-items: center; gap: 12px; }
.xwerp-essb-strand > div { display: flex; flex-direction: column; min-width: 0; }
.xwerp-essb-strand b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-essb-strand > div span { font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-essb-line { position: relative; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(123,140,255,.6), rgba(192,139,255,.25)); }
.xwerp-essb-line i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 12px var(--c, #c08bff); inset-inline-start: var(--at, 50%); }
:root[dir="rtl"] .xwerp-essb-line i { transform: translate(50%, -50%); }
.xwerp-essb-strand.is-pending { --at: 15%; --c: #ffbe5c; } .xwerp-essb-strand.is-in-progress { --at: 55%; --c: #7b8cff; } .xwerp-essb-strand.is-on-hold { --at: 40%; --c: #ff6b8a; } .xwerp-essb-strand.is-completed { --at: 100%; --c: #5fe0b0; } .xwerp-essb-strand.is-cancelled { --at: 100%; --c: #757c93; }
.xwerp-essb-state { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bd2); color: var(--tx2); white-space: nowrap; }
.xwerp-essb-ask { display: flex; flex-direction: column; gap: 10px; border-color: rgba(192,139,255,.3); background: linear-gradient(160deg, rgba(123,140,255,.08), rgba(192,139,255,.04) 60%, transparent), var(--pn); }
.xwerp-essb-ask-head { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.xwerp-essb-ask-head b { font-size: 14px; }
.xwerp-essb-ask-head > span:last-child { grid-column: 2; font-size: 12px; color: var(--tx3); }
.xwerp-essb-orb { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c08bff 45%, #7b8cff); box-shadow: 0 0 16px rgba(192,139,255,.5); }
.xwerp-essb-askbar { text-align: start; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(123,140,255,.45); background: rgba(255,255,255,.03); color: var(--tx3); font: 500 13.5px inherit; font-family: inherit; cursor: text; }
.xwerp-essb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xwerp-essb-chip { min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: 500 12px inherit; font-family: inherit; cursor: pointer; }
.xwerp-essb-chip:hover { border-color: rgba(255,255,255,.22); }
.xwerp-essb-askbar:focus-visible, .xwerp-essb-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xwerp-essb-note { margin: 0; font-size: 11.5px; color: var(--tx3); }
@media (max-width: 1000px) { .xwerp-essb-lower { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-essb-strand { grid-template-columns: minmax(0, 1fr) auto; } .xwerp-essb-line { display: none; } }

/* -- shell: the role pill before Approvals, and the account avatar (Nocturne top bar and rail foot) -- */
.xwerp-ws-header-pair { display: flex; align-items: center; gap: 8px; }
.xwerp-ws-role { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 6px; border-radius: 12px; border: 1px solid rgba(123,140,255,.3); background: linear-gradient(120deg, rgba(123,140,255,.12), transparent 70%), rgba(255,255,255,.035); max-width: 210px; }
.xwerp-ws-role[hidden] { display: none; }
.xwerp-ws-role-glyph { width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(123,140,255,.2); position: relative; }
.xwerp-ws-role-glyph::before, .xwerp-ws-role-glyph::after { content: ""; position: absolute; left: 7px; right: 7px; height: 4px; border-radius: 2px; border: 1.5px solid #a9b4ff; }
.xwerp-ws-role-glyph::before { top: 7px; } .xwerp-ws-role-glyph::after { bottom: 7px; }
.xwerp-ws-role-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.xwerp-ws-role-words span { font-size: 10.5px; color: #a6acc2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-ws-role-words b { font-size: 11.5px; font-weight: 600; color: #eef0f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="light"] .xwerp-ws-role-words b { color: #111827; } html[data-theme="light"] .xwerp-ws-role-words span { color: #4b5563; }
@media (max-width: 1180px) { .xwerp-ws-role { display: none; } }

/* == Receivables and payables (Nocturne board, src/pages/workspace-finance/arap.ts) ============== */
.xwerp-ar .xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-ar-tabs { margin-top: -4px; }
.xwerp-ar-tabs a { text-decoration: none; }
.xwerp-ar-strip i.is-0 { background: #7b8cff; } .xwerp-ar-strip i.is-1 { background: #ffbe5c; } .xwerp-ar-strip i.is-2 { background: #ff9f6b; } .xwerp-ar-strip i.is-3 { background: #ff6b8a; } .xwerp-ar-strip i.is-4 { background: #e0476b; }
.xwerp-ar-ring { --ring: #ff6b8a; }
.xwerp-ar-netbars { display: flex; flex-direction: column; gap: 5px; width: 90px; flex: none; }
.xwerp-ar-netbars i { height: 6px; border-radius: 3px; } .xwerp-ar-netbars .is-ar { background: #5cc8ff; } .xwerp-ar-netbars .is-ap { background: #ffbe5c; }
.xwerp-ar-middle { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.xwerp-ar-party { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 1.4fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.xwerp-ar-party-words { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xwerp-ar-party-words b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-ar-party-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.05); }
.xwerp-ar-party-bar i.is-0 { background: #7b8cff; } .xwerp-ar-party-bar i.is-1 { background: #ffbe5c; } .xwerp-ar-party-bar i.is-2 { background: #ff9f6b; } .xwerp-ar-party-bar i.is-3 { background: #ff6b8a; } .xwerp-ar-party-bar i.is-4 { background: #e0476b; }
.xwerp-ar-party-total { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.xwerp-ar-drafts { padding: 16px; border-color: rgba(192,139,255,.3); background: linear-gradient(160deg, rgba(123,140,255,.07), transparent 60%), var(--pn); }
.xwerp-ar-drafts-head { display: flex; align-items: center; gap: 10px; }
.xwerp-ar-draft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.xwerp-ar-draft { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bd); border-inline-start: 3px solid #c08bff; background: rgba(255,255,255,.02); }
.xwerp-ar-draft.is-done { opacity: .6; }
.xwerp-ar-draft-top { display: flex; justify-content: space-between; gap: 8px; }
.xwerp-ar-draft b { font-size: 13.5px; }
.xwerp-ar-draft p { margin: 0; font-size: 12.5px; color: var(--tx2); line-height: 1.5; }
.xwerp-ar-draft-amount { font: 600 15px Sora, system-ui, sans-serif; color: var(--warn); }
.xwerp-ar-draft .xwerp-apv-open { align-self: flex-end; text-decoration: none; }
@media (max-width: 1100px) { .xwerp-ar-middle { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-ar-party { grid-template-columns: minmax(0, 1fr) auto; } .xwerp-ar-party-bar { grid-column: 1 / -1; grid-row: 2; } }
.xwerp-ar-tabs { justify-self: start; }

/* == Payroll cohort (Nocturne "Payroll run", src/pages/hr/payroll-board.ts) ======================= */
.xwerp-pr { margin: 4px 0 16px; }
.xwerp-pr .xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-pr-segs { position: absolute; inset-inline: 16px; bottom: 12px; display: flex; gap: 4px; }
.xwerp-pr-segs i { flex: 1; height: 6px; border-radius: 3px; background: #ff8fb1; }
.xwerp-pr-segs i.is-out { background: transparent; border: 1px dashed rgba(255,255,255,.3); }
.xwerp-pr .xwerp-apv-fig:has(.xwerp-pr-segs) { padding-bottom: 26px; }
.xwerp-pr-panel { padding: 16px; }
.xwerp-pr-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xwerp-pr-step { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 12.5px; color: var(--tx3); }
.xwerp-pr-step + .xwerp-pr-step::before { content: ""; width: 14px; height: 1px; margin-inline-end: 6px; background: rgba(255,255,255,.2); }
.xwerp-pr-step.is-on { background: rgba(123,140,255,.14); color: var(--tx); }
.xwerp-pr-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px Geist, system-ui, sans-serif; background: rgba(255,255,255,.06); }
.xwerp-pr-step.is-on .xwerp-pr-step-n { background: #7b8cff; color: #0b0d14; }
.xwerp-pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xwerp-pr-head h2 { margin: 0; font: 600 17px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-pr-count { margin-inline-start: 10px; font-weight: 500; font-size: 15px; color: var(--tx2); }
.xwerp-pr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.xwerp-pr-cols > * { min-width: 0; }
.xwerp-pr-col-title { margin: 0 0 6px; font: 600 10.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
:root[lang="ar"] .xwerp-pr-col-title { font-family: inherit; letter-spacing: 0; font-size: 11.5px; }
.xwerp-pr-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.xwerp-pr-id { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--bd2); font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-pr-row b { font-size: 13.5px; white-space: nowrap; }
.xwerp-pr-why { font-size: 12px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-pr-row.is-out .xwerp-pr-why { color: var(--warn); }
.xwerp-pr-note { margin: 14px 0 0; font-size: 12px; color: var(--tx3); }
@media (max-width: 900px) { .xwerp-pr-cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-pr-row { grid-template-columns: auto minmax(0, 1fr); } .xwerp-pr-why { grid-column: 1 / -1; } }

/* == AI governance (Nocturne "AI governance", src/pages/nextgen/ai/governance.ts) ================= */
.xwerp-gov { padding: 0; }
.xwerp-gov .xwerp-apv-fig.is-green { --tone: var(--ok); } .xwerp-gov .xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-gov-bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; flex: none; }
.xwerp-gov-bars i { width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.12); }
.xwerp-gov-bars i.is-on { height: 26px; background: #c08bff; }
.xwerp-gov-middle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 12px; }
.xwerp-gov-middle > * { min-width: 0; padding: 16px; }
.xwerp-gov-pin { margin-top: 14px; padding: 16px; border-radius: 14px; border: 1px solid rgba(192,139,255,.45); background: radial-gradient(ellipse at 50% 120%, rgba(192,139,255,.25), transparent 70%), rgba(255,255,255,.03); box-shadow: 0 20px 40px -24px rgba(192,139,255,.6); display: flex; flex-direction: column; gap: 6px; }
.xwerp-gov-pin-top { display: flex; justify-content: space-between; gap: 8px; }
.xwerp-gov-model { font: 600 17px "Geist Mono", ui-monospace, monospace; color: var(--tx); word-break: break-all; }
.xwerp-gov-pinned { font-size: 12px; color: var(--ok); }
.xwerp-gov-uses { margin: 4px 0 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--tx2); }
.xwerp-gov-fallback { margin: 6px 0 0; font-size: 12px; color: var(--tx3); }
.xwerp-gov-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.xwerp-gov-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(44px, .6fr)); gap: 6px; align-items: center; }
.xwerp-gov-row.is-head span { font: 600 10.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); text-align: center; }
.xwerp-gov-row.is-head span:first-child { text-align: start; }
:root[lang="ar"] .xwerp-gov-row.is-head span { font-family: inherit; letter-spacing: 0; font-size: 11.5px; }
.xwerp-gov-agent { display: flex; flex-direction: column; min-width: 0; }
.xwerp-gov-agent b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-gov-agent span { font-size: 11.5px; color: var(--tx3); }
.xwerp-gov-cell { height: 26px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid var(--bd); }
.xwerp-gov-cell.is-here.is-suggest { background: linear-gradient(180deg, #c08bff, rgba(123,140,255,.5)); border-color: #c08bff; box-shadow: 0 0 14px rgba(192,139,255,.45); }
.xwerp-gov-cell.is-here.is-off { background: linear-gradient(180deg, #a6acc2, rgba(166,172,194,.3)); border-color: #a6acc2; }
.xwerp-gov-cell.is-auto { background: repeating-linear-gradient(135deg, rgba(255,107,138,.35) 0 3px, transparent 3px 7px); border-color: rgba(255,107,138,.35); }
.xwerp-gov-note { margin: 12px 0 0; font-size: 12px; color: var(--tx3); }
.xwerp-gov-checklist { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: c; display: flex; flex-direction: column; gap: 6px; }
.xwerp-gov-checklist li { counter-increment: c; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.xwerp-gov-checklist li::before { content: counter(c); color: var(--tx3); font: 500 11px "Geist Mono", monospace; }
.xwerp-gov-measure { padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--tx3); font-size: 11px; white-space: nowrap; }
@media (max-width: 1200px) { .xwerp-gov-middle { grid-template-columns: 1fr 1fr; } .xwerp-gov-matrix { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 760px) { .xwerp-gov-middle { grid-template-columns: 1fr; } }

/* == Time and leave (Nocturne "Time and leave", src/pages/hr/roster-board.ts) ===================== */
.xwerp-rb { margin-bottom: 16px; }
.xwerp-rb .xwerp-apv-fig.is-pink { --tone: #ff8fb1; } .xwerp-rb .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-rb .xwerp-apv-fig:has(.xwerp-pr-segs) { padding-bottom: 26px; }
.xwerp-rb-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.xwerp-rb-head b { font: 600 20px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--tx); }
.xwerp-rb-head span { font-size: 12.5px; color: var(--tx3); }
.xwerp-rb-lower { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.xwerp-rb-lower > * { min-width: 0; padding: 16px; }
.xwerp-rb-table { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; overflow-x: auto; }
.xwerp-rb-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(7, minmax(34px, 1fr)) 44px; gap: 6px; align-items: center; min-width: 460px; }
.xwerp-rb-row.is-head span { text-align: center; font: 600 10.5px "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
:root[lang="ar"] .xwerp-rb-row.is-head span { font-family: inherit; letter-spacing: 0; font-size: 11px; }
.xwerp-rb-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-rb-cell { height: 30px; border-radius: 7px; display: grid; place-items: center; font: 600 11px Geist, system-ui, sans-serif; border: 1px dashed rgba(255,255,255,.12); color: #0b0d14; }
.xwerp-rb-cell.is-present { background: #7b8cff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.xwerp-rb-cell.is-partial { background: linear-gradient(90deg, #7b8cff 50%, rgba(123,140,255,.25) 50%); border: 0; }
.xwerp-rb-cell.is-absent { background: rgba(255,107,138,.85); border: 0; }
.xwerp-rb-cell.is-on_leave { background: #c08bff; border: 0; }
.xwerp-rb-cell.is-holiday { background: rgba(95,224,176,.7); border: 0; }
.xwerp-rb-cell.is-weekend { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 3px, transparent 3px 7px); border: 1px solid rgba(255,255,255,.08); }
.xwerp-rb-hours { text-align: end; font: 500 12px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-rb-bars { display: flex; align-items: flex-end; gap: 10px; height: 190px; margin-top: 14px; }
.xwerp-rb-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 11px; color: var(--tx3); }
.xwerp-rb-fill { width: 70%; height: var(--h); border-radius: 5px; background: linear-gradient(180deg, #ffbe5c, rgba(255,190,92,.3)); }
.xwerp-rb-bar.is-full .xwerp-rb-fill { background: linear-gradient(180deg, #5fe0b0, rgba(95,224,176,.3)); }
.xwerp-rb-bar.is-off .xwerp-rb-fill { height: 6px; background: rgba(255,255,255,.08); }
.xwerp-rb-ratio { font: 600 11px "Geist Mono", ui-monospace, monospace; color: var(--tx); }
@media (max-width: 1100px) { .xwerp-rb-lower { grid-template-columns: 1fr; } }

/* == Period close (Nocturne "Period close", src/pages/workspace-finance/close.ts) ================= */
.xwerp-cl .xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-cl-middle { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.xwerp-cl-middle > * { min-width: 0; padding: 16px; }
.xwerp-cl-stage { position: relative; height: 340px; margin-top: 8px; }
.xwerp-cl-seg { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: conic-gradient(from var(--a), rgba(255,107,138,.55) 0 var(--w), transparent var(--w)); -webkit-mask: radial-gradient(circle, transparent 78px, #000 79px, #000 108px, transparent 109px); mask: radial-gradient(circle, transparent 78px, #000 79px, #000 108px, transparent 109px); }
.xwerp-cl-seg.is-done { background: conic-gradient(from var(--a), #5fe0b0 0 var(--w), transparent var(--w)); filter: drop-shadow(0 0 6px rgba(95,224,176,.5)); }
.xwerp-cl-core { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #2a3045, #0c0e16); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 30px rgba(123,140,255,.25); }
.xwerp-cl-core b { font: 600 24px Sora, system-ui, sans-serif; color: var(--tx); }
.xwerp-cl-core.is-open { box-shadow: 0 0 40px rgba(95,224,176,.5); }
.xwerp-cl-float { position: absolute; transform: translate(-50%, -50%); max-width: 46%; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255,107,138,.55); background: rgba(255,107,138,.14); color: var(--tx); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 16px rgba(255,107,138,.3); }
.xwerp-cl-items { display: flex; flex-direction: column; gap: 10px; border-color: rgba(192,139,255,.3); }
.xwerp-cl-items-head { display: flex; align-items: center; gap: 10px; }
.xwerp-cl-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,107,138,.35); background: rgba(255,107,138,.05); }
.xwerp-cl-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.xwerp-cl-item-top b { font-size: 13.5px; }
.xwerp-cl-item .xwerp-apv-act { align-self: flex-end; }
.xwerp-cl-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tx3); }
@media (max-width: 1100px) { .xwerp-cl-middle { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-cl-stage { height: 280px; } .xwerp-cl-seg, .xwerp-cl-core { transform: translate(-50%, -50%) scale(.8); margin: 0; left: 50%; top: 50%; } .xwerp-cl-seg { transform: translate(-50%, -50%) scale(.8); } }
.xwerp-cl-float { max-width: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; font: 700 12px Geist, system-ui, sans-serif; }
.xwerp-cl-item-top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
.xwerp-cl-item-top .xwerp-apv-badge { grid-column: 2; justify-self: start; white-space: nowrap; }
.xwerp-cl-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px Geist, system-ui, sans-serif; background: rgba(255,107,138,.25); color: var(--tx); }
.xwerp-cl-items { max-height: 640px; overflow: auto; }

/* == Localization (Nocturne "Localization", src/pages/workspace-l10n) ============================ */
.xwerp-ln .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-ln .xwerp-apv-fig.is-amber .xwerp-apv-ring { --ring: #ffbe5c; }
.xwerp-ln-middle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 12px; }
.xwerp-ln-middle > *, .xwerp-ln-entities { min-width: 0; padding: 16px; }
.xwerp-ln-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.xwerp-ln-pane { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); }
.xwerp-ln-pane.is-ar { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-ln-pane-tag { align-self: flex-start; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(123,140,255,.45); font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--acc-tx, #a9b4ff); }
.xwerp-ln-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--tx3); }
.xwerp-ln-line b { color: var(--tx); font-weight: 600; }
.xwerp-ln-grid-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.xwerp-ln-search { min-height: 34px; min-width: 200px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: 500 13px inherit; font-family: inherit; }
.xwerp-ln-search:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.xwerp-ln-table { margin-top: 12px; display: block; max-height: 360px; overflow: auto; }
.xwerp-ln-table td { white-space: normal; vertical-align: top; }
.xwerp-ln-key { font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--acc-tx, #a9b4ff); word-break: break-all; max-width: 220px; }
.xwerp-ln-ar { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; text-align: right; }
.xwerp-ln-entities { display: flex; flex-direction: column; gap: 4px; }
.xwerp-ln-entity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.xwerp-ln-entity > div { display: flex; flex-direction: column; min-width: 0; }
.xwerp-ln-entity b { font-size: 13.5px; } .xwerp-ln-entity > div span { font-size: 12px; color: var(--tx3); }
.xwerp-ln-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(123,140,255,.18); color: #a9b4ff; font: 700 11px Geist, system-ui, sans-serif; }
.xwerp-ln-cur { font: 600 13px "Geist Mono", ui-monospace, monospace; }
@media (max-width: 1100px) { .xwerp-ln-middle { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .xwerp-ln-panes { grid-template-columns: 1fr; } .xwerp-ln-entity { grid-template-columns: auto minmax(0, 1fr) auto; } .xwerp-ln-cur { display: none; } }

/* == Ask or do bar (Nocturne "Ask or do bar"): the command dialog as a glowing glass palette ===== */
.xwui-dialog:has(.xwerp-askbar) { border-radius: 20px !important; border: 1px solid rgba(123,140,255,.45) !important; background: linear-gradient(180deg, rgba(20,23,35,.96), rgba(12,14,22,.97)) !important; box-shadow: 0 0 0 1px rgba(192,139,255,.15), 0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px -30px rgba(123,140,255,.55) !important; backdrop-filter: blur(18px); }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-header { border-bottom: 0 !important; padding-bottom: 0 !important; }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-title { font: 600 11px "Geist Mono", ui-monospace, monospace !important; letter-spacing: .12em; text-transform: uppercase; color: #757c93 !important; }
:root[lang="ar"] .xwui-dialog:has(.xwerp-askbar) .xwui-dialog-title { font-family: inherit !important; letter-spacing: 0; text-transform: none; font-size: 12px !important; }
.xwerp-askbar .xwui-input, .xwerp-askbar input { font-size: 17px !important; }
.xwerp-askbar .xwui-input-wrapper, .xwerp-askbar .xwui-input-text { border-radius: 14px !important; border-color: rgba(123,140,255,.5) !important; background: rgba(255,255,255,.03) !important; box-shadow: 0 0 0 4px rgba(123,140,255,.1) !important; }
.xwerp-askbar .xwui-icon, .xwerp-askbar svg { color: #a97bff; }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-footer { border-top: 1px solid rgba(255,255,255,.075) !important; }
html[data-theme="light"] .xwui-dialog:has(.xwerp-askbar), html[data-xwerp-theme="light"] .xwui-dialog:has(.xwerp-askbar) { background: #fff !important; box-shadow: 0 30px 70px -30px rgba(17,24,39,.4), 0 0 60px -30px rgba(123,140,255,.5) !important; }
/* A phone: one column, the preview under the results, and a tighter bar grid, so nothing runs past the dialog edge. */
@media (max-width: 640px) {
  .xwerp-askbar .xwerp-askbar-split > * { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .xwerp-askbar .xwerp-askbar-split > * > * { flex: 0 0 auto !important; width: 100% !important; min-width: 0; }
  .xwerp-askbar .xwerp-askbar-bar-row > * { grid-template-columns: 72px minmax(0, 1fr) 56px; gap: 8px; }
}
/* The answer's drivers as bars (prototype/screens/palette.html): label, bar, amount on one grid so every bar starts and ends together. */
/* Prototype width: the palette is 1060 px on a desktop and the full width less a gutter on a phone. */
.xwui-dialog:has(.xwerp-askbar) { width: min(1060px, calc(100vw - 32px)) !important; max-width: none !important; }
.xwerp-askbar .xwerp-askbar-preview-art { min-height: 120px; padding: 12px; border-radius: 10px; background: linear-gradient(160deg, rgba(123,140,255,.14), rgba(192,139,255,.06)); }
/* The palette body: results on the left, the preview card on the right; the card drops under the results on a narrow bar. */
.xwerp-askbar .xwerp-askbar-split > * { display: flex !important; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.xwerp-askbar .xwerp-askbar-split > * > :first-child { flex: 1 1 360px; min-width: 0; }
.xwerp-askbar .xwerp-askbar-split > * > :last-child:not(:first-child) { flex: 0 0 340px; }
.xwerp-askbar .xwerp-askbar-preview { width: 100%; padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.025); }
.xwerp-askbar-footer > * { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; }
.xwerp-askbar .xwerp-askbar-bars { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.02); }
.xwerp-askbar .xwerp-askbar-bar-row > * { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) 84px; align-items: center; gap: 12px; }
.xwerp-askbar .xwerp-askbar-bar-row > * > :last-child { text-align: end; font-variant-numeric: tabular-nums; font-family: "Geist Mono", ui-monospace, monospace; }
.xwerp-askbar .xwerp-askbar-bar-row .xwui-progress-bar { height: 8px; }
/* == Ask or do bar, board geometry (prototype/screens/palette.html .pa-dlg): 1060 x 698 = input row 67, scope row 49, panes 541, footer 39. == */
/* The board centres the dialog on the page beside the 64 px rail and 27 px below the viewport middle line. */
.xwui-dialog:has(.xwerp-askbar) { translate: 32px 27px; block-size: 698px !important; max-block-size: calc(100vh - 32px) !important; border-radius: 22px !important; display: flex !important; flex-direction: column; overflow: hidden; }
/* WHY clipped and not removed: the dialog still takes its accessible name from the title; the board draws no title row. */
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-header { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0 !important; border: 0 !important; }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-body { flex: 1 1 auto; min-block-size: 0; padding: 0 !important; overflow: hidden !important; }
.xwerp-askbar > .xwui-stack, .xwerp-askbar .xwerp-askbar-screen > .xwui-stack { gap: 0 !important; }
.xwerp-askbar-inrow { position: relative; box-sizing: border-box; block-size: 67px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
.xwerp-askbar-inrow .xwui-input-text-container, .xwerp-askbar-inrow .xwui-input-text-wrapper { border: 0 !important; background: none !important; box-shadow: none !important; }
/* The input row is the board's 67 px: the form's own field padding and the library's focus ring are dropped, and focus is shown on the row's rule. */
.xwerp-askbar-inrow .xwui-form, .xwerp-askbar-inrow .xwui-form-field-wrapper, .xwerp-askbar-inrow .xwui-form-field { margin: 0 !important; padding: 0 !important; min-block-size: 0 !important; }
.xwerp-askbar-inrow .xwui-input-text-container { min-block-size: 40px; block-size: 40px; }
.xwerp-askbar-inrow .xwui-input-text-container, .xwerp-askbar-inrow .xwui-input-text-wrapper { outline: 0 !important; }
.xwerp-askbar-inrow:focus-within { border-bottom-color: rgba(123,140,255,.55); }
.xwerp-askbar-orb { inline-size: 26px; block-size: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 34%), conic-gradient(from 200deg, #7b8cff, #c08bff, #ff8fb1, #ffc27a, #7b8cff); box-shadow: inset 0 -3px 8px rgba(20,10,60,.4), 0 0 18px -2px rgba(192,139,255,.7); }
.xwerp-askbar-answer .xwui-stack-item:has(> .xwerp-askbar-layer) { margin-inline-start: auto; }
.xwerp-askbar-answer .xwui-typography-h6 { font-size: 15px !important; line-height: 1.3 !important; }
.xwerp-askbar-answer .xwui-typography-caption, .xwerp-askbar-answer .xwui-typography-body2 { font-size: 12.5px !important; line-height: 1.4 !important; }
.xwerp-askbar-bar-row .xwui-typography { font-size: 12.5px !important; line-height: 1.3 !important; }
.xwerp-askbar-bar-row .xwui-stack-item:last-child .xwui-typography { font-weight: 600 !important; }
.xwerp-askbar-sources .xwui-stack-item:last-child { margin-inline-start: auto; }
.xwerp-askbar-footer .xwui-typography { font-size: 11.5px !important; }
.xwerp-askbar-inrow input { font: 500 19px var(--f-u, Geist, system-ui, sans-serif) !important; letter-spacing: -.01em; }
.xwerp-askbar-esc { position: absolute; inset-inline-end: 18px; inset-block-start: 50%; transform: translateY(-50%); }
.xwerp-askbar-scopes { padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.075); }
.xwerp-askbar-scopes .xwui-chip { min-block-size: 30px; block-size: 30px; padding-inline: 11px !important; border-radius: 999px !important; font: 500 12.5px var(--f-u, Geist, system-ui, sans-serif) !important; }
.xwerp-askbar-scopes .xwui-stack-item:last-child:not(:first-child) { margin-inline-start: auto; }
.xwerp-askbar .xwerp-askbar-split > * { display: grid !important; grid-template-columns: minmax(0, 1fr) 384px; gap: 0 !important; block-size: 541px; align-items: stretch !important; }
.xwerp-askbar .xwerp-askbar-split > * > :only-child { grid-column: 1 / -1; }
.xwerp-askbar-list { min-block-size: 0; overflow: auto; padding: 8px 10px 10px; border-inline-end: 1px solid rgba(255,255,255,.075); }
.xwerp-askbar .xwerp-askbar-split > * > :last-child:not(:first-child) { flex: none; padding: 14px; overflow: auto; }
.xwerp-askbar .xwerp-askbar-preview { padding: 0; border-radius: 18px; overflow: hidden; }
.xwerp-askbar .xwerp-askbar-preview > .xwui-stack > .xwui-stack-item:not(:first-child) { padding-inline: 16px; }
.xwerp-askbar .xwerp-askbar-preview > .xwui-stack > .xwui-stack-item:last-child { padding-block-end: 16px; }
.xwerp-askbar .xwerp-askbar-preview-art { min-block-size: 200px; padding: 0; border-radius: 0; }
.xwerp-askbar-answer { position: relative; margin: 4px 2px 6px; padding: 12px 14px; border-radius: 15px; border: 1px solid rgba(192,139,255,.7); background: linear-gradient(180deg, rgba(192,139,255,.08), rgba(123,140,255,.03)); box-shadow: 0 0 0 1px rgba(192,139,255,.35), 0 0 50px -18px rgba(192,139,255,.9); }
.xwerp-askbar-row { min-block-size: 46px; padding: 4px 10px; border-radius: 11px; }
.xwerp-askbar-row:hover { background: rgba(255,255,255,.04); }
.xwerp-askbar-row .xwui-stack-item:has(> .xwerp-askbar-name) { flex: 1 1 auto; min-inline-size: 0; }
.xwerp-askbar-tile { inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(123,140,255,.18); color: #a9b4ff; font: 700 11px var(--f-u, Geist, system-ui, sans-serif); }
.xwerp-askbar-tile--record { background: rgba(255,190,92,.16); color: #ffbe5c; }
.xwerp-askbar-tile > * { font: inherit !important; color: inherit !important; }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-footer { padding: 9px 16px !important; min-block-size: 39px; }
.xwerp-askbar-footer .xwui-button { block-size: 20px; min-block-size: 0; padding-block: 0; font-size: 11.5px; }
.xwui-dialog:has(.xwerp-askbar) .xwui-dialog-footer { padding-block: 9px !important; }
/* An area's sidebar: the module rows wear their code chip, as the console draws them. */
.xwerp-ws-area .xwerp-ws-module-row { gap: 10px; }
.xwerp-ws-area .xwerp-ws-module-row .xwerp-ws-chip { flex: none; }
.xwerp-ws-area > .xwerp-ws-heading { display: block; margin: 4px 0 6px; }

/* == Cortex (Nocturne "Cortex copilot", src/pages/workspace-cortex) ================================ */
.xwerp-cx .xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-cx-cols { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 300px); gap: 12px; align-items: start; }
.xwerp-cx-cols > * { min-width: 0; }
.xwerp-cx-threads, .xwerp-cx-talk { padding: 16px; }
.xwerp-cx-stack { display: flex; flex-direction: column; gap: 12px; }
.xwerp-cx-thread-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.xwerp-cx-thread { display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); color: var(--tx); font-family: inherit; cursor: pointer; }
.xwerp-cx-thread b { font-size: 13px; font-weight: 600; }
.xwerp-cx-thread span { font-size: 11.5px; color: var(--tx3); }
.xwerp-cx-thread.is-on { border-color: rgba(123,140,255,.6); background: rgba(123,140,255,.12); }
.xwerp-cx-thread.is-done { opacity: .6; }
.xwerp-cx-thread:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xwerp-cx-talk { display: flex; flex-direction: column; gap: 12px; }
.xwerp-cx-talk-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bd); }
.xwerp-cx-talk-head h2 { margin: 0; font: 600 17px Sora, "IBM Plex Sans Arabic", system-ui, sans-serif; }
.xwerp-cx-talk-head span { font-size: 12px; color: var(--tx3); }
.xwerp-cx-msg { display: flex; flex-direction: column; gap: 6px; }
.xwerp-cx-msg-who { display: flex; align-items: center; gap: 8px; }
.xwerp-cx-msg p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tx); }
.xwerp-cx-amount { font: 600 18px Sora, system-ui, sans-serif !important; color: var(--warn) !important; }
.xwerp-cx-plan { padding: 14px; border-radius: 14px; border: 1px solid var(--bd2); background: rgba(255,255,255,.02); }
.xwerp-cx-plan-head { display: flex; align-items: center; gap: 10px; }
.xwerp-cx-plan-head b { flex: 1; font-size: 13.5px; }
.xwerp-cx-steps { list-style: none; counter-reset: s; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xwerp-cx-steps li { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; font-size: 13px; }
.xwerp-cx-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px Geist, system-ui, sans-serif; background: rgba(95,224,176,.15); color: var(--ok); }
.xwerp-cx-steps li.is-flag::before { background: rgba(255,190,92,.15); color: var(--warn); }
.xwerp-cx-cite { font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
.xwerp-cx-detail { grid-column: 2 / -1; font-size: 12px; color: var(--warn); }
.xwerp-cx-based { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--tx3); }
.xwerp-cx-actions { display: flex; gap: 8px; }
.xwerp-cx-actions .xwerp-apv-hold { display: inline-flex; align-items: center; text-decoration: none; }
.xwerp-cx-autonomy { padding: 16px; }
.xwerp-cx-levels { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xwerp-cx-levels li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bd); font-size: 13px; }
.xwerp-cx-levels li span { font-size: 11.5px; color: var(--tx3); }
.xwerp-cx-levels li.is-auto, .xwerp-cx-levels li.is-draft { background: repeating-linear-gradient(135deg, rgba(255,107,138,.12) 0 3px, transparent 3px 8px); color: var(--tx3); }
.xwerp-cx-levels li.is-here { border-color: #c08bff; background: rgba(192,139,255,.15); box-shadow: 0 0 16px rgba(192,139,255,.3); }
@media (max-width: 1200px) { .xwerp-cx-cols { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); } .xwerp-cx-stack { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .xwerp-cx-cols, .xwerp-cx-stack { grid-template-columns: 1fr; } }

/* == Sample boards (Nocturne boards from sample figures, src/pages/workspace-sample) ============== */
.xwerp-sb .xwerp-apv-fig.is-green { --tone: var(--ok); } .xwerp-sb .xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-sb .xwerp-apv-fig.has-foot { padding-bottom: 26px; }
.xwerp-sb-ring { position: relative; } .xwerp-sb-ring i { position: absolute; inset: 0; display: grid; place-items: center; font: 600 11px Geist, system-ui, sans-serif; font-style: normal; color: var(--tx); }
.xwerp-sb-ring.is-violet { --ring: #c08bff; } .xwerp-sb-ring.is-green { --ring: #5fe0b0; } .xwerp-sb-ring.is-amber { --ring: #ffbe5c; } .xwerp-sb-ring.is-pink { --ring: #ff8fb1; } .xwerp-sb-ring.is-sky { --ring: #5cc8ff; }
.xwerp-sb-minibars { display: flex; align-items: flex-end; gap: 4px; height: 40px; width: 64px; flex: none; }
.xwerp-sb-minibars i { flex: 1; border-radius: 3px 3px 1px 1px; background: var(--c, #ffbe5c); }
.xwerp-sb-minibars.is-sky { --c: #5cc8ff; } .xwerp-sb-minibars.is-violet { --c: #c08bff; } .xwerp-sb-minibars.is-pink { --c: #ff8fb1; } .xwerp-sb-minibars.is-green { --c: #5fe0b0; }
.xwerp-sb-strip i.is-sky { background: #5cc8ff; } .xwerp-sb-strip i.is-violet { background: #c08bff; } .xwerp-sb-strip i.is-pink { background: #ff8fb1; } .xwerp-sb-strip i.is-amber { background: #ffbe5c; } .xwerp-sb-strip i.is-green { background: #5fe0b0; } .xwerp-sb-strip i.is-peri { background: #8fa3c8; } .xwerp-sb-strip i.is-bad { background: #ff6b8a; }
.xwerp-sb-spark { width: 110px; height: 44px; flex: none; }
.xwerp-sb-spark-area { fill: rgba(123,140,255,.25); } .xwerp-sb-spark-line { fill: none; stroke: #7b8cff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.xwerp-sb-dots { position: absolute; inset-inline: 16px; bottom: 12px; display: flex; gap: 4px; }
.xwerp-sb-dots i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); } .xwerp-sb-dots i.is-on { background: var(--c, #5fe0b0); }
.xwerp-sb-row { display: grid; gap: 12px; align-items: stretch; }
.xwerp-sb-row > * { min-width: 0; }
.xwerp-sb-panel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.xwerp-sb-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.xwerp-sb-sample { flex: none; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--bd2); font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--tx2); white-space: nowrap; }
:root[lang="ar"] .xwerp-sb-sample { font-family: inherit; }
.xwerp-sb-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.xwerp-sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xwerp-sb-table td { white-space: normal; }
.xwerp-sb-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bd); }
.xwerp-sb-item:not(:has(.xwerp-pr-id)) { grid-template-columns: minmax(0, 1fr) auto; }
.xwerp-sb-item-words { display: flex; flex-direction: column; min-width: 0; }
.xwerp-sb-item-words b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-item-words span { font-size: 11.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-badge { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.xwerp-sb-badge.is-ok { background: rgba(95,224,176,.12); color: var(--ok); } .xwerp-sb-badge.is-warn { background: rgba(255,190,92,.13); color: var(--warn); } .xwerp-sb-badge.is-bad { background: rgba(255,107,138,.13); color: #ff6b8a; } .xwerp-sb-badge.is-info { background: rgba(92,200,255,.12); color: #5cc8ff; }
.xwerp-sb-cols { display: flex; align-items: flex-end; gap: 12px; }
.xwerp-sb-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; font-size: 11px; color: var(--tx3); text-align: center; }
.xwerp-sb-col b { color: var(--tx); font: 600 11.5px "Geist Mono", ui-monospace, monospace; white-space: nowrap; }
.xwerp-sb-col-bar { width: 72%; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent)); box-shadow: 0 8px 18px -10px var(--c); }
.xwerp-sb-col.is-sky { --c: #5cc8ff; } .xwerp-sb-col.is-violet { --c: #7b8cff; } .xwerp-sb-col.is-peri { --c: #a6acc2; } .xwerp-sb-col.is-pink { --c: #ff8fb1; } .xwerp-sb-col.is-iris { --c: #c08bff; } .xwerp-sb-col.is-amber { --c: #ffbe5c; } .xwerp-sb-col.is-green { --c: #5fe0b0; } .xwerp-sb-col.is-bad { --c: #ff6b8a; }
.xwerp-sb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.xwerp-sb-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--warn); }
.xwerp-sb-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tx2); }
.xwerp-sb-cites { display: flex; flex-wrap: wrap; gap: 6px; }
.xwerp-sb-facts { margin-top: 4px; }
.xwerp-sb-cortex { border-color: rgba(192,139,255,.35); background: linear-gradient(160deg, rgba(123,140,255,.08), transparent 60%), var(--pn); }
/* sales: the tunnel, the quotation, the gauge */
.xwerp-sb-tunnel { display: flex; flex-direction: column; gap: 10px; }
.xwerp-sb-lane { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: end; padding: 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,.03), transparent); border: 1px solid var(--bd); }
.xwerp-sb-lane-name { font: 600 11px "Geist Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); align-self: center; }
:root[lang="ar"] .xwerp-sb-lane-name { font-family: inherit; letter-spacing: 0; }
.xwerp-sb-lane-track { display: flex; gap: 10px; align-items: flex-end; min-height: 92px; overflow-x: auto; }
.xwerp-sb-capsule { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px; transition: opacity .2s; }
.xwerp-sb-capsule.is-dim { opacity: .25; }
.xwerp-sb-capsule-bar { width: 22px; border-radius: 11px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent)); box-shadow: 0 0 14px -2px var(--c); margin-bottom: 4px; }
.xwerp-sb-lane.is-open { --c: #5cc8ff; } .xwerp-sb-lane.is-decide { --c: #c08bff; } .xwerp-sb-lane.is-billed { --c: #ffbe5c; }
.xwerp-sb-capsule b { font-size: 12.5px; } .xwerp-sb-capsule span { font: 500 11px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
.xwerp-sb-quote { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd2); border-inline-start: 3px solid #c08bff; }
.xwerp-sb-quote-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.xwerp-sb-quote-line b { font-variant-numeric: tabular-nums; }
.xwerp-sb-quote-line.is-net { padding-top: 8px; border-top: 1px solid var(--bd); color: var(--tx3); }
.xwerp-sb-quote-line.is-net b { color: var(--tx); }
.xwerp-sb-gauge { position: relative; width: 160px; height: 80px; margin: 6px auto 0; border-radius: 160px 160px 0 0; overflow: hidden; background: conic-gradient(from 270deg at 50% 100%, #ffbe5c 0 calc(var(--open) * 180deg), #c08bff 0 calc(var(--order) * 180deg), rgba(255,255,255,.08) 0 180deg, transparent 0); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 54px, #000 55px); mask: radial-gradient(circle at 50% 100%, transparent 54px, #000 55px); }
.xwerp-sb-gauge span { display: none; }
@media (max-width: 1100px) { .xwerp-sb-row { grid-template-columns: 1fr !important; } }
/* inventory: the floor, the spheres, the item rows, the ribbon, the reorder scale */
.xwerp-sb-floor { position: relative; height: 260px; perspective: 700px; }
.xwerp-sb-floor-grid { position: absolute; inset: 18% 4% 8%; border-radius: 12px; transform: rotateX(52deg) rotateZ(-14deg); background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(160deg, #1d2235, #0d1019); border: 1px solid rgba(123,140,255,.25); box-shadow: 0 30px 50px -20px rgba(0,0,0,.8); }
.xwerp-sb-sphere { position: absolute; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, calc(-100% - var(--h))); background: radial-gradient(circle at 35% 30%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 40%, #000)); box-shadow: 0 0 14px -2px var(--c); }
.xwerp-sb-sphere::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--h); border-left: 1px dashed rgba(255,255,255,.3); }
.xwerp-sb-sphere.is-in { --c: #7b8cff; } .xwerp-sb-sphere.is-below { --c: #ffbe5c; } .xwerp-sb-sphere.is-expired { --c: #ff6b8a; } .xwerp-sb-sphere.is-transit { --c: #5cc8ff; } .xwerp-sb-sphere.is-nrv { --c: #c08bff; }
.xwerp-sb-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tx2); }
.xwerp-sb-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.xwerp-sb-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.xwerp-sb-legend .is-in { --c: #7b8cff; } .xwerp-sb-legend .is-below { --c: #ffbe5c; } .xwerp-sb-legend .is-expired { --c: #ff6b8a; } .xwerp-sb-legend .is-transit { --c: #5cc8ff; }
.xwerp-sb-items { display: flex; flex-direction: column; max-height: 300px; overflow: auto; }
.xwerp-sb-stock { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(70px, .8fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 13px; }
.xwerp-sb-stock b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-stock > span:nth-child(2) { color: var(--tx2); font-variant-numeric: tabular-nums; }
.xwerp-sb-ribbon { display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-ribbon-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.6fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-ribbon-track { position: relative; height: 18px; border-radius: 6px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); }
.xwerp-sb-ribbon-track i { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); box-shadow: 0 0 8px var(--c); }
.xwerp-sb-ribbon-row.is-amber { --c: #ffbe5c; } .xwerp-sb-ribbon-row.is-sky { --c: #5cc8ff; } .xwerp-sb-ribbon-row.is-violet { --c: #7b8cff; } .xwerp-sb-ribbon-row.is-green { --c: #5fe0b0; } .xwerp-sb-ribbon-row.is-peri { --c: #a6acc2; }
.xwerp-sb-rop { position: relative; height: 34px; border-radius: 8px; background: rgba(255,255,255,.04); }
.xwerp-sb-rop .is-onhand { position: absolute; left: 0; top: 8px; height: 18px; border-radius: 5px; background: linear-gradient(90deg, #ffbe5c, rgba(255,190,92,.5)); }
:root[dir="rtl"] .xwerp-sb-rop .is-onhand { left: auto; right: 0; }
.xwerp-sb-rop .is-min, .xwerp-sb-rop .is-rop { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #ff6b8a; }
.xwerp-sb-rop .is-rop { border-left: 2px solid #ffbe5c; }
@media (max-width: 520px) { .xwerp-sb-stock { grid-template-columns: minmax(0, 1fr) auto; } .xwerp-sb-stock > span:nth-child(2) { display: none; } .xwerp-sb-ribbon-row { grid-template-columns: 1fr; } }
.xwerp-sb .xwerp-apv-fig-value { white-space: nowrap; }
.xwerp-sb-spark { width: 84px; }
/* Positions and sizes come in as custom properties, laid out with logical properties (mirrors in Arabic). */
.xwerp-sb-sphere { inset-inline-start: var(--x); top: var(--y); }
:root[dir="rtl"] .xwerp-sb-sphere { transform: translate(50%, calc(-100% - var(--h))); }
.xwerp-sb-ribbon-track i { inset-inline-start: var(--at); }
:root[dir="rtl"] .xwerp-sb-ribbon-track i { transform: translate(50%, -50%); }
.xwerp-sb-rop .is-onhand { inset-inline-start: 0; left: auto; width: var(--onhand); }
:root[dir="rtl"] .xwerp-sb-rop .is-onhand { right: auto; }
.xwerp-sb-rop .is-min { inset-inline-start: var(--min); } .xwerp-sb-rop .is-rop { inset-inline-start: var(--rop); }
.xwerp-sb-rop .is-min, .xwerp-sb-rop .is-rop { border-left: 0; border-inline-start: 2px dashed #ff6b8a; }
.xwerp-sb-rop .is-rop { border-inline-start: 2px solid #ffbe5c; }
.xwerp-sb-capsule-bar { height: var(--h, 14px); }
/* A panel head on a phone: the title wraps and the Sample tag stays inside the card. */
.xwerp-sb-panel-head { flex-wrap: wrap; }
.xwerp-sb-panel-head .xwerp-apv-side-head { min-width: 0; flex: 1 1 160px; }
.xwerp-sb-panel-head .xwerp-apv-side-head p { white-space: normal; }
.xwerp-sb-sphere { top: calc(36% + var(--y) * .75); }
/* warehouse: the floor of racks and bins, the flow, the checks, the day */
.xwerp-sb-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.xwerp-sb-wfloor { position: relative; height: 300px; perspective: 900px; display: grid; place-items: center; }
.xwerp-sb-wplane { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; padding: 30px; width: 92%; border-radius: 16px; transform: rotateX(48deg) rotateZ(-10deg); background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(160deg, #1d2235, #0d1019); border: 1px solid rgba(123,140,255,.25); box-shadow: 0 40px 60px -26px rgba(0,0,0,.85); }
.xwerp-sb-rack { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 5px; padding: 6px; border-radius: 8px; border: 1px solid rgba(166,172,194,.25); }
.xwerp-sb-rack.is-dock { background: rgba(92,200,255,.1); border-color: rgba(92,200,255,.45); }
.xwerp-sb-rack.is-staging { background: rgba(95,224,176,.06); border: 1px dashed rgba(95,224,176,.45); }
.xwerp-sb-bin { aspect-ratio: 1.3; min-width: 0; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor: pointer; transition: transform .15s; }
.xwerp-sb-bin.is-stored { background: linear-gradient(160deg, #ffcf7a, #d99a3a); border-color: #ffbe5c; box-shadow: 0 6px 10px -4px rgba(255,190,92,.6); }
.xwerp-sb-bin.is-counting { background: rgba(123,140,255,.7); border-color: #7b8cff; }
.xwerp-sb-bin.is-blocked { background: rgba(255,107,138,.65); border-color: #ff6b8a; }
.xwerp-sb-bin.is-suggest { background: transparent; border: 2px solid #c08bff; box-shadow: 0 0 12px rgba(192,139,255,.6); }
.xwerp-sb-bin:hover, .xwerp-sb-bin.is-picked { transform: translateZ(10px) scale(1.15); outline: 2px solid #fff; }
.xwerp-sb-bin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.xwerp-sb-binlegend .is-stored { --c: #ffbe5c; } .xwerp-sb-binlegend .is-counting { --c: #7b8cff; } .xwerp-sb-binlegend .is-blocked { --c: #ff6b8a; } .xwerp-sb-binlegend .is-suggest { --c: #c08bff; }
.xwerp-sb-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--bd); }
.xwerp-sb-flow-step { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-flow-step b { font: 600 12px "Geist Mono", ui-monospace, monospace; color: #a9b4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xwerp-sb-draft-title { font-size: 14.5px; }
.xwerp-sb-checks { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-checks li::before { content: "✓ "; color: var(--ok); }
.xwerp-sb-day { display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-day-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--tx2); }
.xwerp-sb-day-row > span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--c); }
.xwerp-sb-day-row.is-amber { --c: #ffbe5c; } .xwerp-sb-day-row.is-pink { --c: #ff8fb1; } .xwerp-sb-day-row.is-sky { --c: #5cc8ff; } .xwerp-sb-day-row.is-violet { --c: #c08bff; }
.xwerp-sb-day-track { position: relative; height: 20px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--bd); }
.xwerp-sb-day-track i { position: absolute; top: 2px; bottom: 2px; inset-inline-start: var(--from); width: var(--span); border-radius: 5px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); font: 500 10px "Geist Mono", ui-monospace, monospace; font-style: normal; color: var(--tx); display: grid; place-items: center; overflow: hidden; white-space: nowrap; }
.xwerp-sb-day-scale { display: flex; justify-content: space-between; margin-inline-start: 74px; font: 500 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
@media (max-width: 640px) { .xwerp-sb-flow { grid-template-columns: 1fr 1fr; } .xwerp-sb-wfloor { height: 240px; } .xwerp-sb-wplane { padding: 14px; gap: 10px; } }
.xwerp-sb-dots.is-amber { --c: #ffbe5c; } .xwerp-sb-dots.is-violet { --c: #c08bff; } .xwerp-sb-dots.is-sky { --c: #5cc8ff; } .xwerp-sb-dots.is-pink { --c: #ff8fb1; }
/* procurement: the stairs, the flow lines, the supplier checks */
.xwerp-sb-stairs { display: flex; align-items: flex-end; gap: 10px; height: 220px; padding: 10px 6px 0; }
.xwerp-sb-stair { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; padding: 0; border: 0; background: none; color: var(--tx2); font: 500 11.5px inherit; font-family: inherit; cursor: pointer; }
.xwerp-sb-stair-block { height: calc(30px + var(--i) * 34px); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #3a4170, #222842); border: 1px solid rgba(123,140,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 20px -10px rgba(0,0,0,.8); transition: transform .2s, box-shadow .2s; }
.xwerp-sb-stair.is-on .xwerp-sb-stair-block { background: linear-gradient(180deg, #ffcf7a, #c98a2c); border-color: #ffbe5c; box-shadow: 0 0 22px rgba(255,190,92,.45); transform: translateY(-4px); }
.xwerp-sb-stair.is-on { color: var(--tx); }
.xwerp-sb-stair-name { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-stair:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
.xwerp-sb-step-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; align-self: flex-end; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--bd2); font-size: 12.5px; color: var(--tx3); }
.xwerp-sb-step-caption b { color: var(--tx); font-size: 13.5px; }
.xwerp-sb-flowsvg { width: 100%; height: 200px; }
.xwerp-sb-flowsvg path { fill: none; stroke-width: 1.6; opacity: .75; }
.xwerp-sb-flowsvg path.is-in { stroke-dasharray: 4 5; animation: xwerpSbDash 1.4s linear infinite; }
@keyframes xwerpSbDash { to { stroke-dashoffset: -18; } }
.xwerp-sb-hub { fill: url(#none) #7b8cff; fill: #6d6fe6; filter: drop-shadow(0 0 12px rgba(123,140,255,.7)); }
.xwerp-sb-hub-text { fill: #fff; font: 600 11px Geist, system-ui, sans-serif; }
.xwerp-sb-flowkeys { justify-content: space-between; }
.xwerp-sb-golden { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,190,92,.45); background: rgba(255,190,92,.06); font-size: 12px; color: var(--tx3); }
.xwerp-sb-golden b { font: 600 12.5px "Geist Mono", ui-monospace, monospace; color: #ffbe5c; }
.xwerp-sb-ticks { display: flex; flex-wrap: wrap; gap: 6px; }
.xwerp-sb-tick { padding: 3px 9px; border-radius: 7px; font-size: 12px; }
.xwerp-sb-tick.is-ok { background: rgba(95,224,176,.1); color: var(--ok); border: 1px solid rgba(95,224,176,.3); }
.xwerp-sb-tick.is-ok::before { content: "✓ "; }
.xwerp-sb-tick.is-warn { background: rgba(255,190,92,.1); color: var(--warn); border: 1px solid rgba(255,190,92,.35); }
.xwerp-sb-tick.is-warn::before { content: "! "; }
@media (prefers-reduced-motion: reduce) { .xwerp-sb-flowsvg path.is-in { animation: none; } }
@media (max-width: 520px) { .xwerp-sb-stairs { height: 170px; gap: 4px; } .xwerp-sb-stair-name { font-size: 10px; } }
.xwerp-sb-flowsvg .is-violet { stroke: #7b8cff; fill: #7b8cff; } .xwerp-sb-flowsvg .is-amber { stroke: #ffbe5c; fill: #ffbe5c; } .xwerp-sb-flowsvg .is-sky { stroke: #5cc8ff; fill: #5cc8ff; } .xwerp-sb-flowsvg .is-pink { stroke: #ff8fb1; fill: #ff8fb1; } .xwerp-sb-flowsvg .is-bad { stroke: #ff6b8a; fill: #ff6b8a; }
.xwerp-sb-flowsvg path.is-violet, .xwerp-sb-flowsvg path.is-amber, .xwerp-sb-flowsvg path.is-sky, .xwerp-sb-flowsvg path.is-pink, .xwerp-sb-flowsvg path.is-bad { fill: none; }
/* factory: the belt of stations, the operator panel */
.xwerp-sb-mfglegend .is-running { --c: #5fe0b0; } .xwerp-sb-mfglegend .is-paused { --c: #ffbe5c; } .xwerp-sb-mfglegend .is-idle { --c: #8fa3c8; } .xwerp-sb-mfglegend .is-fault { --c: #ff6b8a; }
.xwerp-sb-belt { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 26px 10px 18px; border-radius: 14px; background: linear-gradient(180deg, transparent 58%, rgba(123,140,255,.12) 58%, rgba(123,140,255,.12) 66%, transparent 66%), linear-gradient(160deg, #1b2032, #0d1019); border: 1px solid rgba(123,140,255,.22); }
.xwerp-sb-station { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px 4px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--tx3); font: 500 11px inherit; font-family: inherit; cursor: pointer; }
.xwerp-sb-station b { color: var(--tx); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xwerp-sb-station > span:last-child { font-family: "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-station-light { width: 46%; height: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.xwerp-sb-station-box { width: 70%; aspect-ratio: 1.2; border-radius: 8px; background: linear-gradient(160deg, #3a4170, #1e2338); border: 1px solid rgba(123,140,255,.35); box-shadow: 0 14px 20px -12px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.xwerp-sb-station.is-running { --c: #5fe0b0; } .xwerp-sb-station.is-running .xwerp-sb-station-box { background: linear-gradient(160deg, #3a8f7a, #1d3d39); border-color: #5fe0b0; }
.xwerp-sb-station.is-paused { --c: #ffbe5c; } .xwerp-sb-station.is-idle { --c: #8fa3c8; } .xwerp-sb-station.is-fault { --c: #ff6b8a; }
.xwerp-sb-station:hover, .xwerp-sb-station.is-picked { border-color: rgba(123,140,255,.6); background: rgba(123,140,255,.1); }
.xwerp-sb-station:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.xwerp-sb-timer { display: flex; align-items: center; gap: 12px; }
.xwerp-sb-timer output { font: 600 30px "Geist Mono", ui-monospace, monospace; color: var(--tx); }
.xwerp-sb-steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xwerp-sb-stepper { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tx3); }
.xwerp-sb-stepper-ctrl { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; }
.xwerp-sb-stepper-ctrl .xwerp-apv-act { padding: 0; }
.xwerp-sb-stepper-ctrl output { display: grid; place-items: center; min-height: 38px; border-radius: 10px; border: 1px solid var(--bd2); font: 600 15px Geist, system-ui, sans-serif; color: var(--tx); }
.xwerp-sb-yield { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-yield i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
/* quality: the control chart and the trail */
.xwerp-sb-spc { width: 100%; height: 240px; }
.xwerp-sb-spc .is-band { fill: rgba(123,140,255,.08); }
.xwerp-sb-spc .is-cl { stroke: #7b8cff; stroke-width: 1.2; }
.xwerp-sb-spc .is-mean { stroke: rgba(166,172,194,.5); stroke-dasharray: 3 4; }
.xwerp-sb-spc .is-spec { stroke: #ffbe5c; stroke-dasharray: 6 5; }
.xwerp-sb-spc .is-line { fill: none; stroke: #8fa3ff; stroke-width: 1.8; }
.xwerp-sb-spc .is-pt { fill: #c9d0ff; }
.xwerp-sb-spc .is-signal { fill: #ff6b8a; filter: drop-shadow(0 0 6px #ff6b8a); }
.xwerp-sb-spclegend .is-cl { --c: #7b8cff; } .xwerp-sb-spclegend .is-spec { --c: #ffbe5c; } .xwerp-sb-spclegend .is-pt { --c: #5fe0b0; } .xwerp-sb-spclegend .is-signal { --c: #ff6b8a; }
.xwerp-sb-trail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.xwerp-sb-trail .xwerp-sb-flow-step { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bd2); }
.xwerp-sb-trail .xwerp-sb-flow-step b { color: var(--tx2); font-family: inherit; font-weight: 500; }
.xwerp-sb-trail .is-bad { border-color: rgba(255,107,138,.5); } .xwerp-sb-trail .is-warn { border-color: rgba(255,190,92,.5); }
/* logistics: the map, the truck, the shipments, the race */
.xwerp-sb-map { width: 100%; height: 230px; }
.xwerp-sb-map .is-land { fill: #1a1f30; stroke: rgba(123,140,255,.3); }
.xwerp-sb-map .is-route { fill: none; stroke-width: 3; stroke-linecap: round; transition: opacity .2s; }
.xwerp-sb-map .is-route.is-pink { stroke: #ff6b8a; filter: drop-shadow(0 0 6px rgba(255,107,138,.7)); } .xwerp-sb-map .is-route.is-sky { stroke: #5cc8ff; } .xwerp-sb-map .is-route.is-amber { stroke: #ffbe5c; }
.xwerp-sb-map .is-route.is-dim { opacity: .15; }
.xwerp-sb-map .is-city { fill: #fff; stroke: #7b8cff; stroke-width: 2; }
.xwerp-sb-map .is-label { fill: #a6acc2; font: 600 11px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-truck { display: flex; align-items: flex-end; gap: 6px; padding: 30px 6px 10px; }
.xwerp-sb-truck-bed { position: relative; flex: 1; display: flex; gap: 4px; height: 90px; padding: 6px; border-radius: 10px 4px 4px 10px; background: linear-gradient(160deg, #2a3045, #151925); border: 1px solid rgba(123,140,255,.35); }
.xwerp-sb-truck-bed i { width: var(--w); border-radius: 6px; display: grid; place-items: center; font: 700 12px Geist, system-ui, sans-serif; font-style: normal; color: #0b0d14; }
.xwerp-sb-truck-bed .is-a { background: linear-gradient(180deg, #8fa3ff, #5b6bd6); } .xwerp-sb-truck-bed .is-b { background: linear-gradient(180deg, #7fd8ff, #3aa6d6); }
.xwerp-sb-truck-limit { position: absolute; top: -14px; bottom: -6px; inset-inline-start: calc(83.3%); border-inline-start: 2px solid #ff6b8a; }
.xwerp-sb-truck-cab { width: 54px; height: 70px; border-radius: 4px 14px 6px 4px; background: linear-gradient(160deg, #3a4170, #1e2338); border: 1px solid rgba(123,140,255,.35); }
.xwerp-sb-ship { display: grid; grid-template-columns: auto minmax(60px, .8fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-ship > span:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-race { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd); }
.xwerp-sb-race > div { display: flex; flex-direction: column; min-width: 0; }
.xwerp-sb-race b { font: 600 12px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-race > div span { font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-race-bar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.06) var(--w)); }
.xwerp-sb-race.is-green { --c: #5fe0b0; border-color: rgba(95,224,176,.4); } .xwerp-sb-race.is-amber { --c: #ffbe5c; }
@media (max-width: 640px) { .xwerp-sb-belt, .xwerp-sb-trail { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xwerp-sb-ship { grid-template-columns: auto minmax(0, 1fr) auto; } .xwerp-sb-ship > span:nth-child(3) { display: none; } .xwerp-sb-steppers { grid-template-columns: 1fr; } }
/* supply planning: the horizon, the gap terrain, the gaps, the S&OP dial */
.xwerp-sb-horizon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bd); font-size: 12.5px; color: var(--tx3); }
.xwerp-sb-horizon label { display: inline-flex; align-items: center; gap: 10px; }
.xwerp-sb-horizon input { width: 120px; accent-color: #7b8cff; }
.xwerp-sb-horizon output { flex: 1; min-width: 0; color: var(--tx); font-weight: 600; }
.xwerp-sb-soplegend .is-demand { --c: #7b8cff; } .xwerp-sb-soplegend .is-supply { --c: #5fe0b0; } .xwerp-sb-soplegend .is-gap { --c: #ff6b8a; }
.xwerp-sb-terrain { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 230px); gap: 12px; align-items: start; }
.xwerp-sb-iso { width: 100%; height: auto; max-height: 340px; }
.xwerp-sb-iso-floor { fill: rgba(123,140,255,.07); stroke: rgba(123,140,255,.18); }
.xwerp-sb-iso-box.is-supply .is-top { fill: #8ff0c8; } .xwerp-sb-iso-box.is-supply .is-left { fill: #5fe0b0; } .xwerp-sb-iso-box.is-supply .is-right { fill: #38b98b; }
.xwerp-sb-iso-box.is-gap polygon { fill: url(#xwerp-sb-hatch); stroke: #ff6b8a; stroke-width: .8; }
.xwerp-sb-iso-box.is-gap .is-top { fill: rgba(255,107,138,.35); }
.xwerp-sb-iso-box.is-picked polygon { stroke: #fff; stroke-width: 1.4; }
.xwerp-sb-iso .is-hatch-bg { fill: rgba(255,107,138,.22); } .xwerp-sb-iso .is-hatch-line { stroke: #ff6b8a; stroke-width: 2; }
.xwerp-sb-gaps { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--bd2); background: var(--pn); }
.xwerp-sb-gaps-head { display: flex; gap: 8px; margin: 0 0 2px; font-size: 12.5px; } .xwerp-sb-gaps-head span { color: var(--tx3); }
.xwerp-sb-gap { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--tx2); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; }
.xwerp-sb-gap b { color: #ffbe5c; font-family: "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-gap.is-on { border-color: #ff6b8a; color: var(--tx); background: rgba(255,107,138,.08); }
.xwerp-sb-terrain-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.xwerp-sb-terrain-foot .xwerp-sb-tick:not(.is-ok) { border: 1px solid var(--bd2); color: var(--tx3); }
.xwerp-sb-dial { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; }
.xwerp-sb-sopgauge { width: 100%; height: auto; }
.xwerp-sb-sopgauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.xwerp-sb-sopgauge .is-track { stroke: rgba(255,255,255,.07); } .xwerp-sb-sopgauge .is-pink { stroke: #ff6b8a; } .xwerp-sb-sopgauge .is-violet { stroke: #7b8cff; }
.xwerp-sb-sopgauge .is-needle { stroke: #e8ebf7; stroke-width: 3; stroke-linecap: round; } .xwerp-sb-sopgauge .is-label { fill: var(--tx3); font: 600 8px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-sopgauge .is-hub { fill: #e8ebf7; }
.xwerp-sb-sopsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-sopsteps li { position: relative; display: flex; flex-direction: column; padding-inline-start: 16px; font-size: 12px; color: var(--tx3); }
.xwerp-sb-sopsteps li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.12); }
.xwerp-sb-sopsteps li b { color: var(--tx3); font-weight: 600; }
.xwerp-sb-sopsteps .is-ok::before { background: #5fe0b0; } .xwerp-sb-sopsteps .is-now::before { background: #7b8cff; }
.xwerp-sb-sopsteps .is-ok b, .xwerp-sb-sopsteps .is-now b { color: var(--tx); }
@media (max-width: 640px) { .xwerp-sb-terrain, .xwerp-sb-dial { grid-template-columns: minmax(0, 1fr); } }
/* maintenance: the asset twin, the pull-in metrics, the PM helix, the downtime */
.xwerp-sb-scan { display: flex; gap: 8px; }
.xwerp-sb-scan input, .xwerp-sb-hhmm { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: inherit; font-size: 13px; }
.xwerp-sb-hhmm { flex: 0 1 120px; }
.xwerp-sb-twin { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.xwerp-sb-pump { display: block; width: 100%; height: auto; }
.xwerp-sb-pump .is-halo { fill: none; stroke: #5fe0b0; stroke-width: 2.5; opacity: .7; } .xwerp-sb-pump.is-down .is-halo { stroke: #ff6b8a; stroke-dasharray: 10 6; }
.xwerp-sb-pump .is-base { fill: #2a3045; stroke: rgba(123,140,255,.35); } .xwerp-sb-pump .is-base-side { fill: #191d2b; }
.xwerp-sb-pump .is-motor { fill: #3b4aa8; stroke: #7b8cff; } .xwerp-sb-pump .is-fin { stroke: rgba(255,255,255,.18); stroke-width: 2; }
.xwerp-sb-pump .is-volute { fill: #4a5070; stroke: #a6acc2; } .xwerp-sb-pump .is-pipe { fill: #5a6080; stroke: #a6acc2; }
/* the drawing is not mirrored in Arabic, so its markers keep physical offsets */
.xwerp-sb-mark { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 10px var(--c); cursor: pointer; }
.xwerp-sb-mark:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.xwerp-sb-mark.is-wo, .xwerp-sb-layers .is-wo { --c: #ff6b8a; } .xwerp-sb-mark.is-insp, .xwerp-sb-layers .is-insp { --c: #ffbe5c; } .xwerp-sb-mark.is-ptw, .xwerp-sb-layers .is-ptw { --c: #5fe0b0; }
.xwerp-sb-mark.is-cal, .xwerp-sb-layers .is-cal { --c: #5cc8ff; } .xwerp-sb-mark.is-pm, .xwerp-sb-layers .is-pm { --c: #c08bff; }
.xwerp-sb-layers .xwerp-apv-filter.is-on { border-color: var(--c); }
.xwerp-sb-halo { flex: 1; min-width: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--bd2); font-size: 12px; color: var(--tx2); }
.xwerp-sb-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xwerp-sb-metrics > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bd2); }
.xwerp-sb-metrics span { font-size: 12px; color: var(--tx3); } .xwerp-sb-metrics b { font-size: 15px; }
.xwerp-sb-helix-svg { width: 100%; height: 90px; }
.xwerp-sb-helix-svg .is-coil { fill: none; stroke: #7b8cff; stroke-width: 2; stroke-dasharray: 2 4; }
.xwerp-sb-helix-svg .is-today { stroke: rgba(255,255,255,.4); stroke-dasharray: 3 3; }
.xwerp-sb-helix-svg .is-raise { fill: #ffbe5c; } .xwerp-sb-helix-svg .is-due { fill: #ff6b8a; filter: drop-shadow(0 0 6px #ff6b8a); }
.xwerp-sb-helix-due { margin: 0; font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-muted { font-size: 12px; color: var(--tx3); }
.xwerp-sb-downtime { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; font-size: 12.5px; color: var(--tx3); }
.xwerp-sb-downtime b { color: var(--tx); }
.xwerp-sb-downtime i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #ff6b8a 12%, rgba(255,255,255,.07) 12%); }
:root[dir="rtl"] .xwerp-sb-downtime i { background: linear-gradient(270deg, #ff6b8a 12%, rgba(255,255,255,.07) 12%); }
@media (max-width: 640px) { .xwerp-sb-metrics { grid-template-columns: minmax(0, 1fr); } }
/* field operations: the dispatch radar, the crew, the checklist, the strand, the SLA clock */
.xwerp-sb-radar { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); gap: 12px; align-items: center; }
.xwerp-sb-jobs { display: flex; flex-direction: column; gap: 8px; }
.xwerp-sb-job { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--bd2); background: none; color: var(--tx); font: inherit; text-align: start; cursor: pointer; }
.xwerp-sb-job.is-on { border-color: #7b8cff; background: rgba(123,140,255,.08); }
.xwerp-sb-job b { font-size: 13px; font-weight: 500; } .xwerp-sb-job > span:last-child { font-size: 12px; color: var(--tx3); }
.xwerp-sb-job-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xwerp-sb-scope-svg { width: 100%; height: auto; }
.xwerp-sb-scope-svg .is-ring { fill: rgba(123,140,255,.04); stroke: rgba(123,140,255,.25); }
.xwerp-sb-scope-svg .is-late { fill: #ff6b8a; filter: drop-shadow(0 0 6px #ff6b8a); }
.xwerp-sb-scope-svg .is-stem { stroke: rgba(255,255,255,.35); stroke-dasharray: 2 2; }
.xwerp-sb-scope-svg .is-job { stroke: #fff; stroke-width: 1.5; } .xwerp-sb-scope-svg .is-info { fill: #ffbe5c; } .xwerp-sb-scope-svg .is-warn { fill: #7b8cff; } .xwerp-sb-scope-svg .is-bad { fill: #ff6b8a; }
.xwerp-sb-scope-svg .is-job.is-on { filter: drop-shadow(0 0 6px #ffbe5c); }
.xwerp-sb-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.xwerp-sb-tech { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd2); }
.xwerp-sb-tech > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; color: var(--tx3); } .xwerp-sb-tech b { font-size: 13px; color: var(--tx); }
.xwerp-sb-tech .xwerp-sb-note { flex-basis: 100%; }
.xwerp-sb-tech { flex-wrap: wrap; }
.xwerp-sb-switch { position: relative; flex: none; width: 38px; height: 22px; padding: 0; border-radius: 11px; border: 1px solid var(--bd2); background: rgba(255,255,255,.08); cursor: pointer; }
.xwerp-sb-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #e8ebf7; transition: inset-inline-start .15s; }
.xwerp-sb-switch.is-on { background: #7b8cff; border-color: #7b8cff; } .xwerp-sb-switch.is-on::after { inset-inline-start: 18px; }
.xwerp-sb-status { display: flex; flex-wrap: wrap; gap: 4px; }
.xwerp-sb-status span { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bd); font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-status .is-on { border-color: #7b8cff; color: var(--tx); background: rgba(123,140,255,.12); }
.xwerp-sb-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd); flex-wrap: wrap; }
.xwerp-sb-step .xwerp-sb-item-words { flex: 1; min-width: 0; }
.xwerp-sb-step-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 11.5px; }
.xwerp-sb-step .xwerp-sb-note { flex-basis: 100%; }
.xwerp-sb-pf { display: flex; gap: 4px; }
.xwerp-sb-pf .is-pass.is-on { border-color: #5fe0b0; color: #5fe0b0; } .xwerp-sb-pf .is-fail.is-on { border-color: #ff6b8a; color: #ff6b8a; }
/* the strand is not mirrored in Arabic, so its knots keep physical offsets */
.xwerp-sb-strand { position: relative; height: 110px; }
.xwerp-sb-strand-svg { width: 100%; height: 100%; }
.xwerp-sb-strand-svg .is-lane { fill: none; stroke-width: 2.5; } .xwerp-sb-strand-svg .is-now { stroke: rgba(255,255,255,.4); stroke-dasharray: 2 3; }
.xwerp-sb-strand-svg .is-l0, .xwerp-sb-knot.is-l0, .xwerp-sb-strandkey .is-l0 { --c: #7b8cff; stroke: #7b8cff; }
.xwerp-sb-strand-svg .is-l1, .xwerp-sb-knot.is-l1, .xwerp-sb-strandkey .is-l1 { --c: #5fe0b0; stroke: #5fe0b0; }
.xwerp-sb-strand-svg .is-l2, .xwerp-sb-knot.is-l2, .xwerp-sb-strandkey .is-l2 { --c: #ffbe5c; stroke: #ffbe5c; }
.xwerp-sb-knot { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: var(--c); cursor: pointer; }
.xwerp-sb-knot.is-on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent); }
.xwerp-sb-knot:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.xwerp-sb-sla { display: flex; align-items: center; gap: 14px; }
.xwerp-sb-sla .xwerp-sb-ring { flex: none; width: 64px; height: 64px; }
.xwerp-sb-sla-lines { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--tx2); } .xwerp-sb-sla-lines p { margin: 0; }
@media (max-width: 640px) { .xwerp-sb-radar, .xwerp-sb-crew { grid-template-columns: minmax(0, 1fr); } }
/* facilities: the cutaway, the occupancy heat, the reallocation, the hub, the visitors */
.xwerp-sb-fmcut .xwerp-sb-space .is-top { fill: var(--c); } .xwerp-sb-fmcut .xwerp-sb-space .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-fmcut .xwerp-sb-space .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-space { transition: opacity .2s; } .xwerp-sb-space.is-dim { opacity: .15; }
.xwerp-sb-space.is-picked polygon { stroke: #fff; stroke-width: 1.4; }
.xwerp-sb-space.is-free, .xwerp-sb-fmlegend .is-free, .xwerp-sb-heat .is-free { --c: #5cc8ff; }
.xwerp-sb-space.is-booked, .xwerp-sb-fmlegend .is-booked, .xwerp-sb-heat .is-booked { --c: #ffbe5c; }
.xwerp-sb-space.is-assigned, .xwerp-sb-fmlegend .is-assigned, .xwerp-sb-heat .is-assigned { --c: #ff8fb0; }
.xwerp-sb-space.is-hold, .xwerp-sb-fmlegend .is-hold { --c: #8b84d6; }
.xwerp-sb-fmlegend .is-request { --c: #ff6b8a; }
.xwerp-sb-fmcut .is-request { fill: #ff6b8a; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px #ff6b8a); }
.xwerp-sb-heat { display: flex; flex-direction: column; gap: 3px; }
.xwerp-sb-heat-row { display: grid; grid-template-columns: minmax(84px, 1.3fr) repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--tx2); font: inherit; font-size: 11.5px; text-align: start; cursor: pointer; }
.xwerp-sb-heat-row.is-head { cursor: default; font: 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; }
.xwerp-sb-heat-row.is-head .is-now { color: var(--tx); font-weight: 700; }
.xwerp-sb-heat-row.is-on { border-color: #7b8cff; background: rgba(123,140,255,.08); }
.xwerp-sb-heat-name { display: flex; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; } .xwerp-sb-heat-name b { font: 600 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
.xwerp-sb-heat-row i { height: 16px; border-radius: 3px; background: rgba(255,255,255,.04); }
.xwerp-sb-heat-row i.is-booked, .xwerp-sb-heat-row i.is-assigned { background: color-mix(in srgb, var(--c) 75%, transparent); }
.xwerp-sb-heat-row i.is-hold { background: repeating-linear-gradient(45deg, rgba(139,132,214,.5) 0 2px, transparent 2px 5px); }
.xwerp-sb-heat-row i.is-now { outline: 2px solid #ffbe5c; outline-offset: -1px; }
.xwerp-sb-move { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd2); font-size: 13px; }
.xwerp-sb-move s { color: var(--tx3); } .xwerp-sb-move .xwerp-sb-muted { margin-inline-start: auto; }
:root[dir="rtl"] .xwerp-sb-move-arrow { transform: scaleX(-1); }
.xwerp-sb-hubmap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.xwerp-sb-hubcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xwerp-sb-hubitem { position: relative; display: flex; flex-direction: column; padding-block: 5px; border-radius: 8px; border: 1px solid var(--bd2); font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-hubitem { padding-inline: 22px 8px; } .xwerp-sb-hubitem b { font-size: 12px; color: var(--tx); }
.xwerp-sb-hubitem::before { content: ""; position: absolute; inset-inline-start: 8px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.xwerp-sb-hubitem.is-pink { --c: #ff6b8a; } .xwerp-sb-hubitem.is-sky { --c: #5cc8ff; } .xwerp-sb-hubitem.is-amber { --c: #ffbe5c; } .xwerp-sb-hubitem.is-green { --c: #c8e65c; } .xwerp-sb-hubitem.is-violet { --c: #7b8cff; }
.xwerp-sb-hubcore { display: grid; place-content: center; text-align: center; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c08bff, #6b4fd6); box-shadow: 0 0 24px -4px #a06bff; font-size: 10px; color: rgba(255,255,255,.75); }
.xwerp-sb-hubcore b { font: 700 11px "Geist Mono", ui-monospace, monospace; color: #fff; }
.xwerp-sb-visitor { display: flex; align-items: center; gap: 10px; }
.xwerp-sb-visitor .xwerp-sb-item-words { flex: 1; min-width: 0; }
.xwerp-sb-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #5cc8ff; color: #0b0d14; font-weight: 700; font-size: 12px; }
/* the day line runs 07:00 to 18:00 left to right in both directions, like its scale */
.xwerp-sb-dayline { position: relative; height: 2px; margin-top: 18px; background: rgba(255,255,255,.12); direction: ltr; }
.xwerp-sb-dayline i { position: absolute; left: var(--x); top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: #5cc8ff; box-shadow: 0 0 10px #5cc8ff; }
.xwerp-sb-dayline-scale { direction: ltr; margin: 6px 0 0; }
@media (max-width: 640px) { .xwerp-sb-hubmap { grid-template-columns: minmax(0, 1fr); justify-items: stretch; } .xwerp-sb-hubcore { justify-self: center; } .xwerp-sb-heat-row { grid-template-columns: minmax(56px, 1fr) repeat(12, minmax(0, 1fr)); } .xwerp-sb-heat-name span { display: none; } }
/* IT service: the ticket orbit, the triage, the SLA cluster, the incident strand */
.xwerp-sb-orbit-svg .is-track { fill: none; stroke: rgba(255,190,92,.35); stroke-dasharray: 3 4; } .xwerp-sb-orbit-svg .is-core { fill: rgba(255,107,138,.12); stroke: #ff6b8a; }
.xwerp-sb-ticket .is-top { fill: var(--c); } .xwerp-sb-ticket .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-ticket .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-ticket { transition: opacity .2s; } .xwerp-sb-ticket.is-dim { opacity: .12; }
.xwerp-sb-ticket.is-p1, .xwerp-sb-itlegend .is-p1 { --c: #ff6b8a; } .xwerp-sb-ticket.is-p2, .xwerp-sb-itlegend .is-p2 { --c: #ffbe5c; } .xwerp-sb-ticket.is-p3, .xwerp-sb-itlegend .is-p3 { --c: #7b8cff; }
.xwerp-sb-orbit-hub .is-top { fill: #8f9cff; } .xwerp-sb-orbit-hub .is-left { fill: #5b6bd6; } .xwerp-sb-orbit-hub .is-right { fill: #3f4bb0; }
.xwerp-sb-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .xwerp-sb-ticket-head b { flex: 1; min-width: 0; font-size: 14px; }
.xwerp-sb-evidence { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; color: var(--tx2); }
.xwerp-sb-evidence.is-suggest { padding: 8px 10px; border-radius: 10px; border: 1px dashed rgba(192,139,255,.5); }
.xwerp-sb-cluster { display: flex; align-items: center; gap: 18px; }
.xwerp-sb-cluster-big { flex: none; width: 110px; height: 110px; -webkit-mask: radial-gradient(circle, transparent 45px, #000 46px); mask: radial-gradient(circle, transparent 45px, #000 46px); }
.xwerp-sb-cluster-grid { display: grid; grid-template-columns: repeat(3, 38px); gap: 14px; }
.xwerp-sb-cluster-grid .xwerp-sb-ring { width: 38px; height: 38px; -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px); mask: radial-gradient(circle, transparent 14px, #000 15px); }
.xwerp-sb-actions .xwerp-apv-act.is-on { border-color: #ffbe5c; color: #ffbe5c; }
/* the incident strand runs left to right in both directions, like its clock */
.xwerp-sb-incident { position: relative; height: 70px; direction: ltr; }
.xwerp-sb-incident-svg { width: 100%; height: 100%; }
.xwerp-sb-incident-svg .is-line { stroke: #ff6b8a; stroke-width: 2; } .xwerp-sb-incident-svg .is-now { stroke: #7b8cff; stroke-width: 1.5; }
.xwerp-sb-incident-knot { --c: #ff6b8a; }
.xwerp-sb-incident-window { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 6px; border: 1.5px dashed #ffbe5c; font: 600 11px "Geist Mono", ui-monospace, monospace; color: #ffbe5c; }
@media (max-width: 640px) { .xwerp-sb-cluster { flex-direction: column; } }
/* service catalog: the tile carousel, say what you need, the flow strand, your requests */
.xwerp-sb-carousel { position: relative; height: 210px; perspective: 900px; overflow: hidden; }
.xwerp-sb-tile { position: absolute; top: 18px; left: 50%; display: flex; flex-direction: column; gap: 6px; width: 170px; height: 170px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd2); border-top: 3px solid #ff6b8a; background: linear-gradient(170deg, #262b42, #151827); box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); transform: translateX(-50%); transition: transform .3s, opacity .3s; font-size: 12px; color: var(--tx3); }
.xwerp-sb-tile b { margin-top: auto; font-size: 15px; color: var(--tx); }
.xwerp-sb-tile.is-prev { transform: translateX(-160%) rotateY(35deg) scale(.85); opacity: .55; }
.xwerp-sb-tile.is-next { transform: translateX(60%) rotateY(-35deg) scale(.85); opacity: .55; }
.xwerp-sb-tile.is-back { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.6); }
.xwerp-sb-tile.is-front { z-index: 1; }
.xwerp-sb-tile-head { display: flex; justify-content: space-between; align-items: center; }
.xwerp-sb-star { padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--tx3); font-size: 16px; cursor: pointer; }
.xwerp-sb-star.is-on { color: #ffbe5c; } .xwerp-sb-star:focus-visible { outline: 2px solid #ffbe5c; }
.xwerp-apv-layer.is-star { border-color: rgba(255,190,92,.5); color: #ffbe5c; }
.xwerp-sb-say { display: flex; flex-direction: column; gap: 8px; }
.xwerp-sb-say textarea { resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: inherit; font-size: 13px; }
.xwerp-sb-say button { align-self: flex-end; }
.xwerp-sb-flowsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.xwerp-sb-flowsteps li { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-flowsteps li b { font-size: 12.5px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-flowsteps li > span:nth-child(3) { overflow-wrap: anywhere; }
.xwerp-sb-flowsteps .is-done .xwerp-sb-step-n { background: rgba(95,224,176,.2); color: #5fe0b0; } .xwerp-sb-flowsteps .is-now .xwerp-sb-step-n { background: #7b8cff; color: #fff; }
.xwerp-sb-mini { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.xwerp-sb-mini .xwerp-sb-ring, .xwerp-sb-mini-ring { width: 24px; height: 24px; -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px); mask: radial-gradient(circle, transparent 8px, #000 9px); }
/* the request line runs left to right in both directions, like a clock */
.xwerp-sb-reqline { display: flex; align-items: center; gap: 10px; margin: 18px 0 22px; direction: ltr; }
.xwerp-sb-reqline-track { position: relative; flex: 1; height: 14px; border-radius: 7px; background: rgba(255,255,255,.05); }
.xwerp-sb-reqline-track i { position: absolute; left: 6%; width: 60%; top: 3px; bottom: 3px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,190,92,.2), #ffbe5c); }
.xwerp-sb-reqline-track b { position: absolute; left: 30%; top: -6px; bottom: -14px; border-left: 2px solid #e8ebf7; padding-top: 22px; font: 500 10px "Geist Mono", ui-monospace, monospace; color: var(--tx3); transform: translateX(-1px); }
@media (max-width: 640px) { .xwerp-sb-flowsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xwerp-sb-tile.is-prev, .xwerp-sb-tile.is-next { display: none; } }
/* general ledger: the strata, the drill lens, the book twin, the audit trail */
.xwerp-gl-middle { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.xwerp-gl-bottom { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.xwerp-gl-svg { width: 100%; height: auto; max-height: 300px; }
.xwerp-gl-svg-label { fill: var(--tx3); font: 600 11px Geist, system-ui, sans-serif; }
.xwerp-gl-band .is-top { fill: var(--c); } .xwerp-gl-band .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-gl-band .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-gl-band polygon { stroke: rgba(0,0,0,.35); stroke-width: .6; }
.xwerp-gl-band.is-contra polygon { fill-opacity: .45; stroke: var(--c); stroke-dasharray: 3 2; }
.xwerp-gl-band.is-picked polygon { stroke: #fff; stroke-width: 1.6; }
.xwerp-gl-band.is-asset, .xwerp-gl-legend .is-asset, .xwerp-gl-type.is-asset, .xwerp-gl-fill.is-asset, .xwerp-gl-share .is-asset { --c: #7b8cff; }
.xwerp-gl-band.is-liability, .xwerp-gl-legend .is-liability, .xwerp-gl-type.is-liability, .xwerp-gl-fill.is-liability, .xwerp-gl-share .is-liability { --c: #ff8fb1; }
.xwerp-gl-band.is-equity, .xwerp-gl-legend .is-equity, .xwerp-gl-type.is-equity, .xwerp-gl-fill.is-equity, .xwerp-gl-share .is-equity { --c: #c08bff; }
.xwerp-gl-band.is-revenue, .xwerp-gl-legend .is-revenue, .xwerp-gl-type.is-revenue, .xwerp-gl-fill.is-revenue, .xwerp-gl-share .is-revenue { --c: #5cc8ff; }
.xwerp-gl-band.is-expense, .xwerp-gl-legend .is-expense, .xwerp-gl-type.is-expense, .xwerp-gl-fill.is-expense, .xwerp-gl-share .is-expense { --c: #ffbe5c; }
.xwerp-gl-type { border: 1px solid var(--c); color: var(--c); }
.xwerp-gl-lens-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .xwerp-gl-lens-head b { flex: 1; min-width: 0; }
.xwerp-gl-lens-value { margin: 8px 0 4px; font: 600 30px Sora, Geist, system-ui, sans-serif; letter-spacing: -.02em; }
.xwerp-gl-lens-parts { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12.5px; } .xwerp-gl-lens-parts dt { color: var(--tx3); } .xwerp-gl-lens-parts dd { margin: 0; text-align: end; }
.xwerp-gl-share { display: grid; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--tx2); }
.xwerp-gl-share i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-gl-share i { background: linear-gradient(270deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-gl-table td { vertical-align: middle; }
.xwerp-gl-row.is-on td { background: rgba(123,140,255,.1); }
.xwerp-gl-pick { display: flex; gap: 8px; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.xwerp-gl-pick:focus-visible { outline: 2px solid #7b8cff; outline-offset: 2px; }
.xwerp-gl-fill { display: inline-block; width: 90px; height: 8px; margin-inline-end: 8px; border-radius: 4px; vertical-align: middle; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.06) var(--w)); }
:root[dir="rtl"] .xwerp-gl-fill { background: linear-gradient(270deg, var(--c) var(--w), rgba(255,255,255,.06) var(--w)); }
.xwerp-gl-none { color: var(--tx3); font-size: 12px; }
.xwerp-gl-event { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; } .xwerp-gl-when { margin-inline-start: auto; color: var(--tx3); }
@media (max-width: 900px) { .xwerp-gl-workspace, .xwerp-gl-middle, .xwerp-gl-bottom { grid-template-columns: minmax(0, 1fr); } .xwerp-gl-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .xwerp-gl-actions { align-items: flex-start; } .xwerp-gl-note { width: 100%; margin: 0; white-space: normal; } .xwerp-gl-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xwerp-gl-totals { grid-template-columns: minmax(0, 1fr); } .xwerp-gl-fill { display: none; } }
.xwerp-gl-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xwerp-gl-totals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xwerp-gl-actions { align-items: center; }
.xwerp-apv-fig.is-green { --tone: var(--ok); }
.xwerp-apv-fig.is-pink { --tone: #ff8fb1; }
.xwerp-gl-note { margin-inline-start: 4px; white-space: nowrap; }
.xwerp-gl-balance { min-width: 0; }
.xwerp-gl-workspace { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.35fr); gap: 12px; align-items: start; }
.xwerp-gl-left { display: grid; gap: 12px; min-width: 0; }
.xwerp-gl-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; }
.xwerp-gl-groups { display: grid; gap: 14px; }
.xwerp-gl-group { display: grid; gap: 7px; }
.xwerp-gl-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xwerp-gl-group-head b { font: 600 14px/1.3 Sora, Geist, system-ui, sans-serif; white-space: nowrap; }
.xwerp-gl-type { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border-radius: 7px; font-size: 11.5px; }
.xwerp-gl-type.is-asset { --c: #7b8cff; }
.xwerp-gl-type.is-liability { --c: #ff8fb1; }
.xwerp-gl-type.is-equity { --c: #c08bff; }
.xwerp-gl-type.is-revenue { --c: #5cc8ff; }
.xwerp-gl-type.is-expense { --c: #ffbe5c; }
.xwerp-gl-track { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.xwerp-gl-track-fill { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--c); }
.xwerp-gl-track-fill.is-asset { --c: #7b8cff; }
.xwerp-gl-track-fill.is-liability { --c: #ff8fb1; }
.xwerp-gl-track-fill.is-equity { --c: #c08bff; }
.xwerp-gl-track-fill.is-revenue { --c: #5cc8ff; }
.xwerp-gl-track-fill.is-expense { --c: #ffbe5c; }
.xwerp-gl-selected-name { margin: 0; font-size: 15px; font-weight: 600; }
.xwerp-gl-detail { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-size: 12.5px; }
.xwerp-gl-detail dt { color: var(--tx3); }
.xwerp-gl-detail dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.xwerp-gl-ref { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xwerp-gl-empty { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 2px; color: var(--tx3); font-size: 12.5px; }
.xwerp-gl-empty .xwui-icon { width: 18px !important; height: 18px !important; color: var(--tx3); }
.xwerp-gl-audit-counts { margin: -2px 0 0; color: var(--tx3); font-size: 12px; }
.xwerp-gl-pick { justify-content: flex-start; min-height: 30px; padding: 3px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--acc-tx); font: inherit; text-align: start; white-space: normal; }
.xwerp-gl-pick:hover { background: rgba(123,140,255,.12); }
.xwerp-gl-pick:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.xwerp-gl button.xwerp-gl-pick { display: flex; width: 100%; justify-content: flex-start; min-height: 30px; padding: 5px 8px; border: 1px solid var(--bd) !important; border-radius: 8px; background: rgba(255,255,255,.025) !important; box-shadow: none !important; color: var(--tx) !important; font: 500 12px/1.3 inherit; text-align: start; white-space: normal; }
.xwerp-gl button.xwerp-gl-pick:hover { border-color: rgba(123,140,255,.48) !important; background: rgba(123,140,255,.1) !important; }
.xwerp-gl .xwerp-gl-pick .xwui-button { display: flex; width: 100%; justify-content: flex-start; min-height: 30px; padding: 5px 8px; border: 1px solid var(--bd); border-radius: 8px; background: rgba(255,255,255,.025); box-shadow: none; color: var(--tx); font-size: 12px; text-align: start; white-space: normal; appearance: none !important; -webkit-appearance: none !important; }
.xwerp-gl .xwerp-gl-pick .xwui-button, .xwerp-gl .xwerp-gl-pick .xwui-button .xwui-button-text { color: var(--tx) !important; }
.xwerp-gl .xwerp-gl-pick .xwui-button:hover { border-color: rgba(123,140,255,.48); background: rgba(123,140,255,.1); }
.xwerp-gl .xwerp-gl-pick .xwui-button:is(:hover, :focus, :focus-visible, :active) { appearance: none !important; -webkit-appearance: none !important; border-color: rgba(123,140,255,.65) !important; background: #242a3d !important; background-color: #242a3d !important; background-image: none !important; color: var(--tx) !important; box-shadow: 0 0 0 2px rgba(123,140,255,.14) !important; }
.xwerp-gl .xwerp-gl-pick .xwui-button:is(:hover, :focus, :focus-visible, :active) .xwui-button-text { color: var(--tx) !important; }
.xwerp-gl .xwerp-gl-pick .xwui-button:focus-visible { outline: 2px solid var(--acc) !important; outline-offset: 2px; }
.xwerp-gl-bottom { align-items: start; }
.xwerp-gl .xwerp-apv-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; }
.xwerp-gl-table { width: 100%; table-layout: fixed; } .xwerp-gl-table th:first-child { width: 46%; }
.xwerp-gl-pick span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .xwerp-gl-table th:first-child { width: 62%; } }
/* journal approvals: the conveyor, the journals, the limit ladder, the reversal twin */
.xwerp-sb-lock { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); cursor: pointer; } .xwerp-sb-lock input { accent-color: #7b8cff; }
.xwerp-sb-conveyor-svg { width: 100%; height: auto; max-height: 280px; }
.xwerp-sb-belt { fill: #1b2034; stroke: rgba(123,140,255,.35); } .xwerp-sb-belt-slat { stroke: rgba(123,140,255,.18); }
.xwerp-sb-gate .is-top { fill: #8ff0c8; } .xwerp-sb-gate .is-left { fill: #5fe0b0; } .xwerp-sb-gate .is-right { fill: #38b98b; }
.xwerp-sb-gate.is-stop .is-top { fill: #ffd08a; } .xwerp-sb-gate.is-stop .is-left { fill: #ffbe5c; } .xwerp-sb-gate.is-stop .is-right { fill: #d6973a; }
.xwerp-sb-gate.is-post .is-left { fill: #7b8cff; } .xwerp-sb-gate.is-post .is-right { fill: #5b6bd6; } .xwerp-sb-gate.is-post .is-top { fill: #a9b4ff; }
.xwerp-sb-gate.is-post.is-stop .is-left { fill: #ffbe5c; } .xwerp-sb-gate.is-post.is-stop .is-right { fill: #d6973a; }
.xwerp-sb-gate-bar { stroke: #5fe0b0; stroke-width: 4; stroke-linecap: round; } .xwerp-sb-gate-bar.is-stop { stroke: #ffbe5c; }
.xwerp-sb-crate .is-top { fill: var(--c); } .xwerp-sb-crate .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-crate .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-crate.is-picked polygon { stroke: #fff; stroke-width: 1.4; }
.xwerp-sb-crate.is-recurring, .xwerp-sb-jnllegend .is-recurring, .xwerp-sb-jdot.is-recurring, .xwerp-sb-rung.is-recurring { --c: #7b8cff; }
.xwerp-sb-crate.is-accrual, .xwerp-sb-jnllegend .is-accrual, .xwerp-sb-jdot.is-accrual, .xwerp-sb-rung.is-accrual { --c: #c08bff; }
.xwerp-sb-crate.is-manual, .xwerp-sb-jnllegend .is-manual, .xwerp-sb-jdot.is-manual, .xwerp-sb-rung.is-manual { --c: #5cc8ff; }
.xwerp-sb-jcard { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd2); }
.xwerp-sb-jcard.is-on { border-color: #7b8cff; background: rgba(123,140,255,.07); }
.xwerp-sb-jcard-pick { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--tx); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.xwerp-sb-jcard-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xwerp-sb-jcard-amt { white-space: nowrap; }
.xwerp-sb-jdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.xwerp-sb-jcard .xwerp-sb-actions .xwerp-sb-muted { margin-inline-end: auto; }
.xwerp-sb-ladder { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
/* the ladder rises with the amount: physical top, not mirrored */
.xwerp-sb-rungs { position: relative; height: 150px; border-inline-start: 2px solid rgba(255,255,255,.12); margin-inline-start: 10px; }
.xwerp-sb-rung { position: absolute; inset-inline-start: 10px; top: var(--y); transform: translateY(-50%); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--c); color: var(--c); font: 600 10.5px "Geist Mono", ui-monospace, monospace; white-space: nowrap; }
.xwerp-sb-rung-limit { position: absolute; inset-inline: -6px 0; top: var(--y); border-top: 2px dashed #ffbe5c; opacity: 0; transition: opacity .2s, top .2s; } .xwerp-sb-rung-limit.is-shown { opacity: 1; }
.xwerp-sb-approvers { display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-approver { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--bd2); background: none; color: var(--tx); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
.xwerp-sb-approver.is-on { border-color: #7b8cff; background: rgba(123,140,255,.08); }
.xwerp-sb-approver .xwerp-sb-avatar { width: 26px; height: 26px; font-size: 10.5px; }
.xwerp-sb-approver.is-violet .xwerp-sb-avatar { background: #7b8cff; } .xwerp-sb-approver.is-sky .xwerp-sb-avatar { background: #5cc8ff; } .xwerp-sb-approver.is-pink .xwerp-sb-avatar { background: #ff8fb1; } .xwerp-sb-approver.is-amber .xwerp-sb-avatar { background: #ffbe5c; }
.xwerp-sb-twincols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.xwerp-sb-twincol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.xwerp-sb-twincol + .xwerp-sb-twincol { padding-inline-start: 14px; border-inline-start: 1px dashed var(--bd2); }
.xwerp-sb-twinline { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; width: 100%; font: 500 12px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-sb-twinline i { width: 9px; height: 9px; border-radius: 2px; } .xwerp-sb-twinline.is-debit i { background: #7b8cff; } .xwerp-sb-twinline.is-credit i { background: #ff8fb1; }
@media (max-width: 640px) { .xwerp-sb-ladder { grid-template-columns: 90px minmax(0, 1fr); } }
/* cost centres: the fountain, the driver mixer, the budget, the hierarchy */
.xwerp-sb-fountain-svg { width: 100%; height: auto; max-height: 280px; }
.xwerp-sb-plate { stroke-width: 1.2; } .xwerp-sb-plate.is-jed { fill: rgba(192,139,255,.12); stroke: #c08bff; } .xwerp-sb-plate.is-ruh { fill: rgba(92,200,255,.1); stroke: #5cc8ff; }
.xwerp-sb-pool .is-top { fill: #ffd08a; } .xwerp-sb-pool .is-left { fill: #ffbe5c; } .xwerp-sb-pool .is-right { fill: #d6973a; }
.xwerp-sb-arc { fill: none; stroke-linecap: round; stroke-dasharray: 4 5; } .xwerp-sb-arc.is-violet { stroke: #c08bff; } .xwerp-sb-arc.is-sky { stroke: #5cc8ff; }
.xwerp-sb-target .is-top { fill: #a9b4ff; } .xwerp-sb-target .is-left { fill: #7b8cff; } .xwerp-sb-target .is-right { fill: #5b6bd6; }
.xwerp-sb-fountain-label { fill: var(--tx2); font: 600 11px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-cclegend .is-pool { --c: #ffbe5c; } .xwerp-sb-cclegend .is-cc { --c: #7b8cff; } .xwerp-sb-cclegend .is-ruh { --c: #5cc8ff; } .xwerp-sb-cclegend .is-jed { --c: #c08bff; }
.xwerp-sb-driver { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bd2); }
.xwerp-sb-driver-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .xwerp-sb-driver-head .xwerp-sb-stepper-ctrl { margin-inline-start: auto; }
.xwerp-sb-driver-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-sb-driver-bar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-sb-driver-bar i { background: linear-gradient(270deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-driver-bar.is-violet { --c: #c08bff; } .xwerp-sb-driver-bar.is-sky { --c: #5cc8ff; }
.xwerp-sb-budrow { display: grid; grid-template-columns: 64px 60px minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-budrow > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-planlegend .is-pink { --c: #ff8fb1; } .xwerp-sb-planlegend .is-sky { --c: #5cc8ff; } .xwerp-sb-planlegend .is-amber { --c: #ffbe5c; }
.xwerp-sb-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.xwerp-sb-tree li { position: relative; padding-inline-start: calc(16px + var(--d) * 16px); }
.xwerp-sb-tree li::before { content: ""; position: absolute; inset-inline-start: calc(var(--d) * 16px); top: 5px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.xwerp-sb-tree .is-peri { --c: #8b93b8; } .xwerp-sb-tree .is-sky { --c: #5cc8ff; } .xwerp-sb-tree .is-violet { --c: #c08bff; }
@media (max-width: 640px) { .xwerp-sb-budrow { grid-template-columns: 64px 60px minmax(0, 1fr); } .xwerp-sb-budrow > span:last-child { display: none; } }
.xwerp-sb-planbar { display: flex; gap: 3px; height: 10px; } .xwerp-sb-planbar i { flex: var(--f, 1); border-radius: 3px; }
.xwerp-sb-planbar .is-pink { background: #ff8fb1; } .xwerp-sb-planbar .is-sky { background: #5cc8ff; } .xwerp-sb-planbar .is-amber { background: #ffbe5c; }
.xwerp-sb-driver output { min-width: 44px; text-align: center; font-weight: 600; }
/* billing: the invoice press, the schedule ribbon, the clearance tracker, the hand-offs */
.xwerp-sb-press-svg { width: 100%; height: auto; max-height: 280px; }
.xwerp-sb-press-dash { stroke: #7b8cff; stroke-width: 1.5; stroke-dasharray: 6 6; }
.xwerp-sb-press-head .is-top { fill: #c9b6ff; } .xwerp-sb-press-head .is-left { fill: #a07bff; } .xwerp-sb-press-head .is-right { fill: #7d5ad6; }
.xwerp-sb-press-rod { stroke: #4a5070; stroke-width: 8; }
.xwerp-sb-press-gate .is-top { fill: #a9b4ff; } .xwerp-sb-press-gate .is-left { fill: #7b8cff; } .xwerp-sb-press-gate .is-right { fill: #5b6bd6; }
.xwerp-sb-sheet .is-top { fill: var(--c); } .xwerp-sb-sheet .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-sheet .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-sheet { transition: opacity .2s; } .xwerp-sb-sheet.is-dim { opacity: .12; }
.xwerp-sb-sheet.is-due, .xwerp-sb-billegend .is-due { --c: #ffbe5c; } .xwerp-sb-sheet.is-scheduled, .xwerp-sb-billegend .is-scheduled { --c: #8b93b8; }
.xwerp-sb-sheet.is-draft, .xwerp-sb-billegend .is-draft { --c: #7b8cff; } .xwerp-sb-sheet.is-cleared, .xwerp-sb-billegend .is-cleared { --c: #5fe0b0; }
.xwerp-sb-sheet.is-posted, .xwerp-sb-billegend .is-posted { --c: #5cc8ff; } .xwerp-sb-sheet.is-rejected, .xwerp-sb-billegend .is-rejected { --c: #ff6b8a; }
.xwerp-sb-ribbon { display: flex; flex-direction: column; gap: 8px; }
.xwerp-sb-ribbon-scale, .xwerp-sb-ribbon-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; }
.xwerp-sb-ribbon-scale > div { display: flex; justify-content: space-between; font: 500 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); }
.xwerp-sb-ribbon-row > span { position: relative; padding-inline-start: 14px; } .xwerp-sb-ribbon-row > span::before { content: ""; position: absolute; inset-inline-start: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.xwerp-sb-ribbon-row.is-sky { --c: #5cc8ff; } .xwerp-sb-ribbon-row.is-pink { --c: #ff8fb1; } .xwerp-sb-ribbon-row.is-violet { --c: #7b8cff; }
.xwerp-sb-ribbon-track { position: relative; height: 34px; border-radius: 8px; border: 1px solid var(--bd); background: rgba(255,255,255,.02); }
.xwerp-sb-ribbon-today { position: absolute; top: -4px; bottom: -4px; inset-inline-start: 21%; border-inline-start: 1.5px dashed rgba(255,255,255,.4); }
.xwerp-sb-ribbon-cell { position: absolute; top: 7px; height: 20px; inset-inline-start: var(--from); width: var(--span); padding: 0 4px; overflow: hidden; border-radius: 5px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--tx); font: 600 10px "Geist Mono", ui-monospace, monospace; white-space: nowrap; cursor: pointer; }
.xwerp-sb-ribbon-cell.is-on { background: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent); }
.xwerp-sb-clearsteps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xwerp-sb-handoff { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; color: var(--tx2); }
@media (max-width: 640px) { .xwerp-sb-ribbon-scale, .xwerp-sb-ribbon-row { grid-template-columns: 70px minmax(0, 1fr); } .xwerp-sb-clearsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xwerp-sb-ribbon-track.is-two { height: 50px; } .xwerp-sb-ribbon-track.is-two .xwerp-sb-ribbon-cell { top: 4px; } .xwerp-sb-ribbon-track.is-two .xwerp-sb-ribbon-cell.is-lower { top: 26px; }
/* revenue recognition: the towers, the splitter, the waterfall */
.xwerp-sb-towers-svg { width: 100%; height: auto; max-height: 280px; }
.xwerp-sb-tower polygon { fill: transparent; stroke: var(--c); stroke-width: .9; }
.xwerp-sb-tower.is-earned .is-top { fill: var(--c); } .xwerp-sb-tower.is-earned .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-tower.is-earned .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-tower.is-posted, .xwerp-sb-revlegend .is-posted { --c: #ffbe5c; } .xwerp-sb-tower.is-scheduled, .xwerp-sb-revlegend .is-scheduled { --c: #7b8cff; }
.xwerp-sb-tower.is-split, .xwerp-sb-revlegend .is-split { --c: #8b93b8; } .xwerp-sb-tower.is-split polygon { stroke-dasharray: 3 2; } .xwerp-sb-revlegend .is-earned { --c: #5fe0b0; }
.xwerp-sb-tower.is-scheduled.is-earned .is-top { fill: #5fe0b0; }
.xwerp-sb-splitbar { display: flex; gap: 3px; height: 44px; }
.xwerp-sb-splitbar span { flex: var(--f, 1); min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-radius: 8px; overflow: hidden; font-size: 11.5px; white-space: nowrap; }
.xwerp-sb-splitbar .is-a { background: rgba(123,140,255,.35); } .xwerp-sb-splitbar .is-b { background: rgba(92,200,255,.3); }
.xwerp-sb-oblig { display: grid; grid-template-columns: minmax(90px, 1fr) 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-oblig input { min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: inherit; text-align: end; }
.xwerp-sb-oblig b:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: #7b8cff; } .xwerp-sb-oblig.is-b b:first-child::before { background: #5cc8ff; }
.xwerp-sb-fall { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 6px 0; border-bottom: 1px solid var(--bd2); }
.xwerp-sb-fall span { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; } .xwerp-sb-fall .is-open { background: #c08bff; } .xwerp-sb-fall .is-step { background: #7b8cff; opacity: .7; }
@media (max-width: 640px) { .xwerp-sb-oblig { grid-template-columns: minmax(80px, 1fr) 90px auto; } .xwerp-sb-oblig .xwerp-sb-muted { display: none; } }
/* collections: the aging canyon, the dunning ladder, the promise tracker */
.xwerp-sb-canyon-svg { width: 100%; height: auto; max-height: 280px; }
.xwerp-sb-terrace { fill: color-mix(in srgb, var(--c) 14%, #141826); stroke: color-mix(in srgb, var(--c) 45%, transparent); }
.xwerp-sb-terrace-wall { stroke: rgba(255,255,255,.12); stroke-width: 2; }
.xwerp-sb-debt .is-top { fill: var(--c); } .xwerp-sb-debt .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-debt .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-terrace.is-current, .xwerp-sb-debt.is-current, .xwerp-sb-collegend .is-current { --c: #7b8cff; }
.xwerp-sb-terrace.is-d1_30, .xwerp-sb-debt.is-d1_30, .xwerp-sb-collegend .is-d1_30 { --c: #5cc8ff; }
.xwerp-sb-terrace.is-d31_60, .xwerp-sb-debt.is-d31_60, .xwerp-sb-collegend .is-d31_60 { --c: #ffbe5c; }
.xwerp-sb-terrace.is-d61_90, .xwerp-sb-debt.is-d61_90, .xwerp-sb-collegend .is-d61_90 { --c: #ff8fb1; }
.xwerp-sb-terrace.is-d90, .xwerp-sb-debt.is-d90, .xwerp-sb-collegend .is-d90 { --c: #ff6b8a; }
.xwerp-sb-rungrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: calc(var(--d) * 12px); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-rungrow .xwerp-sb-cites { margin-inline-start: auto; } .xwerp-sb-rungrow.is-hot { border-color: rgba(255,107,138,.5); border-style: dashed; background: rgba(255,107,138,.06); }
.xwerp-sb-ptp { margin: 0; font-weight: 600; } .xwerp-sb-ptp.is-open, .xwerp-sb-ptp.is-dueToday { color: #5cc8ff; } .xwerp-sb-ptp.is-broken { color: #ff6b8a; } .xwerp-sb-ptp.is-kept { color: #5fe0b0; }
/* the promise line runs left to right in both directions, like its dates */
.xwerp-sb-ptp-track { position: relative; height: 8px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,.08); direction: ltr; }
.xwerp-sb-ptp-track::after { content: ""; position: absolute; left: 74%; top: -5px; bottom: -5px; border-left: 2px solid #5cc8ff; }
.xwerp-sb-ptp-track i { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: #e8ebf7; transition: left .2s; }
.xwerp-sb-ptp-scale { direction: ltr; margin: 6px 0 0; }
.xwerp-sb-head { min-width: 0; } .xwerp-sb-head .xwerp-apv-eyebrow, .xwerp-sb-head .xwerp-apv-title { white-space: normal; overflow-wrap: anywhere; }
/* payables: the match prism, the tolerance dials, the payment run */
.xwerp-sb-prism-svg { width: 100%; height: auto; max-height: 200px; }
/* WHY boxed steps: the board draws each chain stage as its own bordered card, not bare text, so the stage reads as a link in the chain */
.xwerp-sb-chain .xwerp-sb-flow-step { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bd2); }
.xwerp-sb-chain .xwerp-sb-flow-step b { color: var(--tx2); font-family: inherit; font-weight: 500; }
.xwerp-sb-mbar .is-top { fill: var(--c); } .xwerp-sb-mbar .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-mbar .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-mbar.is-po, .xwerp-sb-beam.is-po { --c: #5cc8ff; } .xwerp-sb-mbar.is-gr, .xwerp-sb-beam.is-gr { --c: #5fe0b0; } .xwerp-sb-mbar.is-bill, .xwerp-sb-beam.is-bill { --c: #ff6b8a; }
.xwerp-sb-beam { fill: none; stroke: var(--c); stroke-width: 2; opacity: .85; filter: drop-shadow(0 0 4px var(--c)); } .xwerp-sb-beam.is-ok { --c: #5fe0b0; } .xwerp-sb-beam.is-bad { --c: #ff6b8a; }
.xwerp-sb-prism-box polygon { fill: rgba(200,210,255,.18); stroke: rgba(220,226,255,.6); }
.xwerp-sb-pad { fill: transparent; stroke-width: 1.5; stroke-dasharray: 4 3; } .xwerp-sb-pad.is-ok { stroke: #5fe0b0; } .xwerp-sb-pad.is-bad { stroke: #ff6b8a; }
.xwerp-sb-pad.is-lit { stroke-dasharray: none; } .xwerp-sb-pad.is-ok.is-lit { fill: rgba(95,224,176,.25); } .xwerp-sb-pad.is-bad.is-lit { fill: rgba(255,107,138,.35); }
.xwerp-sb-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.xwerp-sb-tols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xwerp-sb-tol { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; text-align: center; }
.xwerp-sb-tol svg { width: 100%; max-width: 130px; height: auto; }
.xwerp-sb-tol path { fill: none; stroke-width: 8; stroke-linecap: round; } .xwerp-sb-tol .is-track { stroke: rgba(255,255,255,.08); }
.xwerp-sb-tol.is-inside .is-fill { stroke: #5fe0b0; } .xwerp-sb-tol.is-outside .is-fill { stroke: #ff6b8a; }
.xwerp-sb-tol .is-needle { stroke: #e8ebf7; stroke-width: 2.5; stroke-linecap: round; }
.xwerp-sb-tol.is-inside > span { color: #5fe0b0; } .xwerp-sb-tol.is-outside > span { color: #ff6b8a; } .xwerp-sb-tol.is-unchecked > span { color: var(--tx3); }
.xwerp-sb-payrun { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.xwerp-sb-payees { display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-payee { display: grid; grid-template-columns: auto minmax(60px, 1fr) minmax(40px, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; cursor: pointer; }
.xwerp-sb-payee input { accent-color: #7b8cff; } .xwerp-sb-payee .xwerp-sb-item-words { min-width: 0; }
.xwerp-sb-payee i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #5cc8ff var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-sb-payee i { background: linear-gradient(270deg, #5cc8ff var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-payee.is-held { cursor: default; } .xwerp-sb-payee.is-held i { background: repeating-linear-gradient(45deg, rgba(255,190,92,.5) 0 3px, transparent 3px 7px); border: 1px dashed #ffbe5c; } .xwerp-sb-payee.is-held > b { color: #ffbe5c; }
.xwerp-sb-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--bd2); font-size: 11px; }
.xwerp-sb-payrun > .xwerp-sb-actions { grid-column: 2; }
.xwerp-sb-warnline { margin: 0; font-size: 12px; color: #ffbe5c; }
@media (max-width: 640px) { .xwerp-sb-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xwerp-sb-payrun { grid-template-columns: minmax(0, 1fr); } .xwerp-sb-payrun > .xwerp-sb-actions { grid-column: 1; } }
/* tax center: the drawers, the reconciler, the filing calendar, the provision */
.xwerp-sb-drawers-svg { width: 100%; height: auto; max-height: 200px; }
.xwerp-sb-cabinet .is-top { fill: #4a5070; } .xwerp-sb-cabinet .is-left { fill: #343a55; } .xwerp-sb-cabinet .is-right { fill: #262b40; }
.xwerp-sb-drawer .is-top { fill: var(--c); } .xwerp-sb-drawer .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-drawer .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-drawer.is-output { --c: #ffbe5c; } .xwerp-sb-drawer.is-input { --c: #a9b4ff; } .xwerp-sb-drawer.is-none { --c: #ff8fb1; }
.xwerp-sb-drawer.is-draft polygon { stroke: #fff; stroke-width: 1; stroke-dasharray: 4 3; }
.xwerp-sb-diff { margin: 0; font: 600 26px Sora, Geist, system-ui, sans-serif; } .xwerp-sb-diff.is-off { color: #ff6b8a; } .xwerp-sb-diff.is-ok { color: #5fe0b0; }
.xwerp-sb-recbars { display: flex; flex-direction: column; gap: 8px; }
.xwerp-sb-recrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.xwerp-sb-recrow > b { font: 600 12px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-recrow > b.is-off { color: #ffbe5c; }
.xwerp-sb-rectrack { position: relative; height: 10px; border-inline-start: 2px solid #7b8cff; }
.xwerp-sb-rectrack i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 0 4px 4px 0; background: #7b8cff; } .xwerp-sb-rectrack i.is-off { background: #ffbe5c; }
.xwerp-sb-filings { display: flex; flex-direction: column; gap: 4px; }
.xwerp-sb-filing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 3px 6px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--tx); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
.xwerp-sb-filing.is-on { border-color: #7b8cff; background: rgba(123,140,255,.08); }
.xwerp-sb-filing .xwerp-sb-item-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
/* the calendar runs left to right in both directions, like its dates */
.xwerp-sb-filing-track { position: relative; height: 22px; border-bottom: 1px dashed var(--bd2); direction: ltr; }
.xwerp-sb-filing-track::after { content: ""; position: absolute; left: 76%; top: -3px; bottom: -3px; border-left: 1.5px solid rgba(123,140,255,.7); }
.xwerp-sb-filing-track i { position: absolute; left: var(--x); top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--c); }
.xwerp-sb-filing-track em { position: absolute; left: var(--x); top: -2px; transform: translateX(-110%); font: normal 500 10px "Geist Mono", ui-monospace, monospace; color: var(--tx3); white-space: nowrap; }
.xwerp-sb-filing-track .is-ok { --c: #5fe0b0; } .xwerp-sb-filing-track .is-violet { --c: #c08bff; } .xwerp-sb-filing-track .is-amber { --c: #ffbe5c; } .xwerp-sb-filing-track .is-bad { --c: #ff6b8a; }
.xwerp-sb-filing-track i:has(+ em) + em { left: calc(var(--x)); }
.xwerp-sb-provcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; height: 110px; }
.xwerp-sb-provcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11.5px; }
.xwerp-sb-provcol b { font: 600 12px "Geist Mono", ui-monospace, monospace; color: var(--c); }
.xwerp-sb-provcol > span:not(.xwerp-sb-muted) { width: 46px; height: calc(var(--h) * .55); min-height: 6px; border-radius: 6px; background: var(--c); }
.xwerp-sb-provcol.is-pink { --c: #ff8fb1; } .xwerp-sb-provcol.is-violet { --c: #7b8cff; } .xwerp-sb-provcol.is-amber { --c: #ffbe5c; }
@media (max-width: 640px) { .xwerp-sb-filing { grid-template-columns: minmax(0, 1fr); } }
.xwerp-sb-diff { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .xwerp-sb-diff span { font: 400 12px Geist, system-ui, sans-serif; color: var(--tx3); }
/* audit trail: the live tag, the evidence chain, the questions, the preparer × approver matrix */
.xwerp-sb-sample.is-live { color: #5fe0b0; border-color: rgba(95,224,176,.4); }
.xwerp-sb-chain-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-evblock .is-top { fill: var(--c); } .xwerp-sb-evblock .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-evblock .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-evblock.is-picked polygon { stroke: #fff; stroke-width: 1.5; }
.xwerp-sb-evblock.is-inv, .xwerp-sb-evlegend .is-inv { --c: #7b8cff; } .xwerp-sb-evblock.is-pay, .xwerp-sb-evlegend .is-pay { --c: #5fe0b0; }
.xwerp-sb-evblock.is-bill, .xwerp-sb-evlegend .is-bill { --c: #ffbe5c; } .xwerp-sb-evblock.is-dep, .xwerp-sb-evlegend .is-dep { --c: #5cc8ff; }
.xwerp-sb-evblock.is-je, .xwerp-sb-evlegend .is-je { --c: #c08bff; } .xwerp-sb-evblock.is-other, .xwerp-sb-evlegend .is-other { --c: #8b93b8; }
.xwerp-sb-ask { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bd2); background: none; color: var(--tx); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; }
.xwerp-sb-ask.is-on { border-color: #c08bff; background: rgba(192,139,255,.08); }
.xwerp-sb-pamatrix { display: grid; grid-template-columns: 70px repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: center; font-size: 11.5px; }
.xwerp-sb-pamatrix > b { font: 600 11px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; } .xwerp-sb-pamatrix > b:nth-child(n) { overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-pacell { padding: 10px 0; border-radius: 8px; border: 1px solid var(--bd2); text-align: center; font: 600 14px Geist, system-ui, sans-serif; }
.xwerp-sb-pacell.is-self { border: 1.5px dashed #ffbe5c; background: repeating-linear-gradient(45deg, rgba(255,190,92,.08) 0 4px, transparent 4px 8px); }
.xwerp-sb-pacell.is-some { border-color: #7b8cff; background: rgba(123,140,255,.12); } .xwerp-sb-pacell.is-self.is-some { border-color: #ff6b8a; color: #ff6b8a; }
/* cash management: the reservoirs, the ladder, the sweep, the sources */
.xwerp-sb-res-svg { width: 100%; height: auto; max-height: 270px; }
.xwerp-sb-range polygon { fill: rgba(192,139,255,.08); stroke: rgba(192,139,255,.35); stroke-dasharray: 2 2; }
.xwerp-sb-week .is-top { fill: #8fd8ff; } .xwerp-sb-week .is-left { fill: #5cc8ff; } .xwerp-sb-week .is-right { fill: #3a9fd0; }
.xwerp-sb-week.is-short .is-top { fill: #ff9fb3; } .xwerp-sb-week.is-short .is-left { fill: #ff6b8a; } .xwerp-sb-week.is-short .is-right { fill: #d14d6b; }
.xwerp-sb-week.is-low polygon { stroke: #fff; stroke-width: 1.2; }
.xwerp-sb-cashlegend .is-central { --c: #5cc8ff; } .xwerp-sb-cashlegend .is-range { --c: #c08bff; } .xwerp-sb-cashlegend .is-short { --c: #ff6b8a; }
.xwerp-sb-ladder-svg { width: 100%; height: 110px; }
.xwerp-sb-ladder-svg .is-zero { stroke: #ff6b8a; stroke-dasharray: 4 4; } .xwerp-sb-ladder-svg .is-pos { fill: none; stroke: #ffbe5c; stroke-width: 2; }
.xwerp-sb-donor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(96px, auto) auto; gap: 8px; align-items: center; font-size: 12px; }
.xwerp-sb-donor output { text-align: center; font: 600 11.5px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-donor .xwerp-sb-avatar { background: #7b8cff; }
.xwerp-sb-srcrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(50px, 80px) auto; gap: 10px; align-items: center; font-size: 12px; }
.xwerp-sb-srcrow i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-sb-srcrow i { background: linear-gradient(270deg, var(--c) var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-srcrow > b { font: 600 12px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-srcrow .xwerp-sb-item-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-srcrow.is-sky { --c: #5cc8ff; } .xwerp-sb-srcrow.is-amber { --c: #ffbe5c; } .xwerp-sb-srcrow.is-pink { --c: #ff6b8a; }
@media (max-width: 640px) { .xwerp-sb-donor { grid-template-columns: auto minmax(0, 1fr) auto auto; } .xwerp-sb-donor output { grid-column: 2 / -1; grid-row: 2; text-align: start; } }
/* treasury: the exposure sphere, the deal ticket, the coverage gauge, the rates */
.xwerp-sb-sphere-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-sphere-floor { fill: rgba(123,140,255,.07); stroke: rgba(123,140,255,.25); }
.xwerp-sb-sphere-svg .is-hi { stop-color: #e6f7ff; } .xwerp-sb-sphere-svg .is-mid { stop-color: #5cc8ff; } .xwerp-sb-sphere-svg .is-lo { stop-color: #1d4f7a; }
.xwerp-sb-orb { fill: url(#xwerp-sb-orb); filter: drop-shadow(0 0 14px rgba(92,200,255,.45)); cursor: default; }
.xwerp-sb-orb.is-empty { fill: none; stroke: #5cc8ff; stroke-width: 1.5; filter: none; } .xwerp-sb-orb.is-picked { stroke: #fff; stroke-width: 2; }
.xwerp-sb-orb-ring { fill: none; stroke: #5fe0b0; stroke-width: 3; filter: drop-shadow(0 0 5px #5fe0b0); }
.xwerp-sb-trslegend .is-usd { --c: #5cc8ff; } .xwerp-sb-trslegend .is-hedged { --c: #5fe0b0; }
.xwerp-sb-ticket { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--bd2); font-size: 12px; }
.xwerp-sb-ticket dt { color: var(--tx3); } .xwerp-sb-ticket dd { margin: 0; font-weight: 600; text-align: end; }
.xwerp-sb-hedgegauge svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.xwerp-sb-hedgegauge path { fill: none; stroke-width: 12; stroke-linecap: round; } .xwerp-sb-hedgegauge .is-track { stroke: rgba(255,255,255,.07); } .xwerp-sb-hedgegauge .is-cover { stroke: #5fe0b0; }
.xwerp-sb-hedgegauge .is-needle { stroke: #c08bff; stroke-width: 3; stroke-linecap: round; }
.xwerp-sb-actions output { min-width: 50px; text-align: center; font: 600 16px Geist, system-ui, sans-serif; }
.xwerp-sb-exprow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd); background: none; color: var(--tx); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; }
.xwerp-sb-exprow .xwerp-sb-item-words { flex: 1; min-width: 0; } .xwerp-sb-exprow.is-on { border-color: #5cc8ff; background: rgba(92,200,255,.07); }
.xwerp-sb-pair { font: 600 11.5px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-pair::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--c); }
.xwerp-sb-pair.is-sky { --c: #5cc8ff; } .xwerp-sb-pair.is-green { --c: #5fe0b0; } .xwerp-sb-pair.is-violet { --c: #c08bff; } .xwerp-sb-pair.is-amber { --c: #ffbe5c; } .xwerp-sb-pair.is-pink { --c: #ff6b8a; }
/* intercompany: the settlement web, the resolver, the netting matrix, the eliminations */
.xwerp-sb-icweb-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-iccol .is-top { fill: #a9b4ff; } .xwerp-sb-iccol .is-left { fill: #7b8cff; } .xwerp-sb-iccol .is-right { fill: #5b6bd6; }
.xwerp-sb-icarc { fill: none; stroke-width: 1.6; opacity: .45; } .xwerp-sb-icarc.is-on { opacity: 1; stroke-width: 2.4; }
.xwerp-sb-icarc.is-recv, .xwerp-sb-iclegend .is-recv { --c: #5cc8ff; stroke: #5cc8ff; } .xwerp-sb-icarc.is-pay, .xwerp-sb-iclegend .is-pay { --c: #c08bff; stroke: #c08bff; stroke-dasharray: 5 4; }
.xwerp-sb-icdiff { fill: #ffbe5c; filter: drop-shadow(0 0 8px #ffbe5c); } .xwerp-sb-iclegend .is-diff { --c: #ffbe5c; }
.xwerp-sb-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xwerp-sb-trio-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--bd2); font-size: 11.5px; color: var(--tx3); }
.xwerp-sb-trio-cell b { font: 600 22px Sora, Geist, system-ui, sans-serif; color: var(--tx); }
.xwerp-sb-trio-cell.is-recv { border-inline-start: 3px solid #5cc8ff; } .xwerp-sb-trio-cell.is-pay { border-inline-end: 3px solid #c08bff; text-align: end; }
.xwerp-sb-trio-cell.is-diff { border-color: #ffbe5c; background: rgba(255,190,92,.08); text-align: center; } .xwerp-sb-trio-cell.is-diff b { color: #ffbe5c; }
.xwerp-sb-trio-cell.is-ok { border-color: #5fe0b0; text-align: center; } .xwerp-sb-trio-cell.is-ok b { color: #5fe0b0; }
.xwerp-sb-netgrid { display: grid; grid-template-columns: 56px repeat(3, minmax(0, 1fr)); gap: 5px; align-items: center; }
.xwerp-sb-netgrid > b { font: 600 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; }
.xwerp-sb-netcell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; padding: 0; border-radius: 6px; border: 1px solid var(--bd); background: none; color: var(--tx); font: 600 11px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-netcell.is-self { background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px); } .xwerp-sb-netcell.is-empty { color: var(--tx3); }
button.xwerp-sb-netcell { cursor: pointer; } .xwerp-sb-netcell.is-ok { color: #5fe0b0; background: rgba(95,224,176,.08); } .xwerp-sb-netcell.is-diff { color: #ffbe5c; background: rgba(255,190,92,.08); }
.xwerp-sb-netcell.is-on { box-shadow: 0 0 0 2px #ffbe5c; } .xwerp-sb-netcell.is-ok.is-on { box-shadow: 0 0 0 2px #5fe0b0; }
.xwerp-sb-elim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bd2); border-inline-start: 3px solid var(--c); font-size: 12.5px; }
.xwerp-sb-elim > span:last-child { flex-basis: 100%; color: var(--tx2); } .xwerp-sb-elim.is-ok { --c: #5fe0b0; } .xwerp-sb-elim.is-diff { --c: #ffbe5c; background: rgba(255,190,92,.05); }
.xwerp-sb-elim.is-on { box-shadow: 0 0 0 1px var(--c); }
@media (max-width: 640px) { .xwerp-sb-trio-cell b { font-size: 16px; } }
/* consolidation: the view tabs, the group tower, the run pipeline */
.xwerp-sb-viewtabs { padding-bottom: 4px; border-bottom: 1px solid var(--bd); }
.xwerp-sb-consview { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.xwerp-sb-tower-svg { width: 100%; height: auto; max-height: 270px; }
.xwerp-sb-tower-link { stroke: rgba(123,140,255,.35); stroke-dasharray: 3 3; }
.xwerp-sb-entity .is-top { fill: var(--c); } .xwerp-sb-entity .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-entity .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-entity.is-holding, .xwerp-sb-towerlegend .is-holding { --c: #e8ebf7; } .xwerp-sb-entity.is-subsidiary, .xwerp-sb-towerlegend .is-subsidiary { --c: #7b8cff; }
.xwerp-sb-entity.is-jointop, .xwerp-sb-towerlegend .is-jointop { --c: #5cc8ff; } .xwerp-sb-entity.is-jointventure, .xwerp-sb-towerlegend .is-jointventure { --c: #c08bff; }
.xwerp-sb-entity.is-associate, .xwerp-sb-towerlegend .is-associate { --c: #ff8fb1; } .xwerp-sb-entity.is-outside, .xwerp-sb-towerlegend .is-outside { --c: #8b93b8; }
.xwerp-sb-entity.is-outside polygon, .xwerp-sb-entity.is-associate polygon { fill-opacity: .25; stroke: var(--c); stroke-dasharray: 3 2; }
.xwerp-sb-pipeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-pipeline li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; font-size: 12.5px; }
.xwerp-sb-pipeline li .xwerp-sb-item-words { flex: 1; min-width: 0; } .xwerp-sb-pipeline li .xwerp-sb-item-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-pipeline li.is-now { border-color: var(--bd2); background: rgba(255,255,255,.03); }
.xwerp-sb-pipeline li.is-done .xwerp-sb-step-n { background: rgba(95,224,176,.2); color: #5fe0b0; } .xwerp-sb-pipeline li.is-blocked .xwerp-sb-step-n { background: rgba(255,107,138,.2); color: #ff6b8a; }
.xwerp-sb-table tr.is-hot td { color: #ffbe5c; }
/* consolidation run: the pipe, the step tiles, the readiness table */
.xwerp-sb-runpipe-svg { width: 100%; height: auto; max-height: 230px; }
.xwerp-sb-pipe-line { stroke: #7b8cff; stroke-width: 3; stroke-dasharray: 6 5; opacity: .6; }
.xwerp-sb-feed .is-top { fill: #a9b4ff; } .xwerp-sb-feed .is-left { fill: #7b8cff; } .xwerp-sb-feed .is-right { fill: #5b6bd6; }
.xwerp-sb-tank .is-top { fill: var(--c); } .xwerp-sb-tank .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-tank .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-tank.is-clear { --c: #5fe0b0; } .xwerp-sb-tank.is-issue { --c: #ff6b8a; } .xwerp-sb-tank.is-picked polygon { stroke: #fff; stroke-width: 1.3; }
.xwerp-sb-valve { fill: #1a1d2b; stroke: #ff6b8a; stroke-width: 2; } .xwerp-sb-valve-bar { stroke: #ff6b8a; stroke-width: 2; }
.xwerp-sb-steptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.xwerp-sb-steptile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--bd); background: none; color: var(--tx2); font: inherit; font-size: 11px; text-align: start; cursor: pointer; }
.xwerp-sb-steptile b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); font-weight: 500; }
.xwerp-sb-steptile.is-issue { border-color: rgba(255,107,138,.45); } .xwerp-sb-steptile.is-issue > span:last-child { color: #ff6b8a; }
.xwerp-sb-steptile.is-on { box-shadow: 0 0 0 1.5px #7b8cff; }
.xwerp-sb-readytable td.is-yes { color: #5fe0b0; } .xwerp-sb-readytable td.is-no { color: #ff6b8a; } .xwerp-sb-readytable td.is-na { color: var(--tx3); }
@media (max-width: 640px) { .xwerp-sb-steptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xwerp-sb-readytable th:nth-child(5), .xwerp-sb-readytable td:nth-child(5) { display: none; } }
/* ownership: the lattice, the stakes, the calculator */
.xwerp-sb-lattice-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-beam2 { stroke: #7b8cff; opacity: .6; } .xwerp-sb-beam2.is-check { stroke: #ff8fb1; stroke-dasharray: 5 4; }
.xwerp-sb-stakebox .is-top { fill: #a9b4ff; } .xwerp-sb-stakebox .is-left { fill: #7b8cff; } .xwerp-sb-stakebox .is-right { fill: #5b6bd6; }
.xwerp-sb-stakebox.is-check .is-top { fill: #ffb3c7; } .xwerp-sb-stakebox.is-check .is-left { fill: #ff8fb1; } .xwerp-sb-stakebox.is-check .is-right { fill: #d16a8a; }
.xwerp-sb-stakebox.is-hub .is-top { fill: #fff; } .xwerp-sb-stakebox.is-hub .is-left { fill: #d0d4e8; } .xwerp-sb-stakebox.is-hub .is-right { fill: #a6acc2; }
.xwerp-sb-stakebox.is-picked polygon { stroke: #fff; stroke-width: 1.4; }
.xwerp-sb-latlegend .is-eff { --c: #7b8cff; } .xwerp-sb-latlegend .is-check { --c: #ff8fb1; }
.xwerp-sb-item.is-proposal { padding: 10px; border-radius: 10px; border: 1px solid rgba(255,190,92,.45); background: rgba(255,190,92,.06); flex-wrap: wrap; }
.xwerp-sb-stakes { display: flex; flex-direction: column; gap: 4px; }
.xwerp-sb-stake { display: grid; grid-template-columns: auto minmax(60px, 1fr) 30px 46px minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--tx); font: inherit; font-size: 12px; text-align: start; cursor: pointer; }
.xwerp-sb-stake > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-stake.is-on { border-color: #7b8cff; background: rgba(123,140,255,.08); } .xwerp-sb-stake .xwerp-sb-avatar { width: 24px; height: 24px; font-size: 10px; background: #7b8cff; }
.xwerp-sb-chainrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd2); font-size: 12.5px; }
.xwerp-sb-chainrow .xwerp-sb-avatar { width: 24px; height: 24px; font-size: 10px; background: #e8ebf7; } .xwerp-sb-chainrow .xwerp-sb-avatar + span + .xwerp-sb-avatar { background: #5cc8ff; }
.xwerp-sb-stakeslider { width: 100%; accent-color: #7b8cff; }
.xwerp-sb-effread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .xwerp-sb-effread > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .xwerp-sb-effread > div:last-child { text-align: end; }
.xwerp-sb-effbig { font: 600 26px Sora, Geist, system-ui, sans-serif; color: #a9b4ff; }
@media (max-width: 640px) { .xwerp-sb-stake { grid-template-columns: auto minmax(0, 1fr) 46px; } .xwerp-sb-stake > span:nth-child(3), .xwerp-sb-stake > span:nth-child(5), .xwerp-sb-stake > span:nth-child(6) { display: none; } }
/* eliminations: the furnace, the proposals, the plug */
.xwerp-sb-furnace-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-furnace { fill: rgba(255,107,138,.25); stroke: #ff8fb1; filter: drop-shadow(0 0 12px rgba(255,107,138,.6)); }
.xwerp-sb-furnace-body .is-top { fill: #3a4060; } .xwerp-sb-furnace-body .is-left { fill: #2a2f48; } .xwerp-sb-furnace-body .is-right { fill: #1d2134; }
.xwerp-sb-icbox .is-top { fill: var(--c); } .xwerp-sb-icbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-icbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-icbox.is-recv, .xwerp-sb-furnlegend .is-recv { --c: #7b8cff; } .xwerp-sb-icbox.is-pay, .xwerp-sb-furnlegend .is-pay { --c: #5cc8ff; }
.xwerp-sb-icbox.is-blocked, .xwerp-sb-furnlegend .is-blocked { --c: #ffbe5c; } .xwerp-sb-icbox.is-blocked polygon { stroke: #ffbe5c; stroke-dasharray: 3 2; }
.xwerp-sb-elimcard { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd2); }
.xwerp-sb-elimcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; } .xwerp-sb-elimcard-head b { flex: 1; min-width: 0; }
.xwerp-sb-drop { padding: 0 6px; border: 0; background: none; color: var(--tx3); font-size: 16px; cursor: pointer; } .xwerp-sb-drop:hover { color: #ff6b8a; }
.xwerp-sb-elimline { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; font: 500 11.5px "Geist Mono", ui-monospace, monospace; color: var(--tx2); }
.xwerp-sb-elimline > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-plugline { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; } .xwerp-sb-plugline.is-ok { background: rgba(95,224,176,.1); color: #5fe0b0; } .xwerp-sb-plugline.is-diff { background: rgba(255,190,92,.1); color: #ffbe5c; }
/* fixed assets: the vault, the rulebook, the register */
.xwerp-sb-vault-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-plot { fill: color-mix(in srgb, var(--c) 12%, #141826); stroke: color-mix(in srgb, var(--c) 50%, transparent); }
.xwerp-sb-assetbox .is-top { fill: var(--c); } .xwerp-sb-assetbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-assetbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-assetbox.is-waiting polygon { fill-opacity: .35; stroke: var(--c); stroke-dasharray: 2 2; }
.is-test12 { --c: #7b8cff; } .is-laptops { --c: #c08bff; } .is-vehicles { --c: #ffbe5c; } .is-equipment { --c: #5cc8ff; } .is-seven { --c: #5fe0b0; }
.xwerp-sb-catrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(70px, 1fr) 36px auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12px; }
.xwerp-sb-catrow > b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 2px; background: var(--c); }
.xwerp-sb-lifebar { position: relative; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--c) var(--w), rgba(255,255,255,.06) var(--w)); }
:root[dir="rtl"] .xwerp-sb-lifebar { background: linear-gradient(270deg, var(--c) var(--w), rgba(255,255,255,.06) var(--w)); }
.xwerp-sb-lifebar em { position: absolute; inset-inline-end: 4px; top: 0; font: normal 600 10px/14px "Geist Mono", ui-monospace, monospace; color: var(--tx); }
.xwerp-sb-falegend .is-test12 i, .xwerp-sb-falegend span i { background: var(--c); }
.xwerp-sb-search { width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bd2); background: rgba(255,255,255,.03); color: var(--tx); font: inherit; font-size: 13px; }
.xwerp-sb-assetlist { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.xwerp-sb-assetrow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-assetrow > span:nth-child(2), .xwerp-sb-assetrow > span:nth-child(3) { text-align: end; font-family: "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-assetrow .xwerp-sb-item-words b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 2px; background: var(--c); }
.xwerp-sb-assetrow .xwerp-sb-item-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .xwerp-sb-assetrow { grid-template-columns: minmax(0, 1fr) 80px auto; } .xwerp-sb-assetrow > span:nth-child(2), .xwerp-sb-assetrow > span:nth-child(5) { display: none; } .xwerp-sb-catrow { grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) auto; } .xwerp-sb-catrow > span:nth-child(2), .xwerp-sb-catrow > span:nth-child(4) { display: none; } }
/* depreciation: the staircase, the deltas */
.xwerp-sb-stair-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-stepbox .is-top { fill: var(--c); } .xwerp-sb-stepbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-stepbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-stepbox.is-violet { --c: #7b8cff; } .xwerp-sb-stepbox.is-amber { --c: #ffbe5c; } .xwerp-sb-stepbox.is-sky { --c: #5cc8ff; } .xwerp-sb-stepbox.is-green { --c: #5fe0b0; }
.xwerp-sb-stepbox.is-waiting { --c: #c08bff; } .xwerp-sb-stepbox.is-schedule polygon { fill-opacity: .18; stroke: rgba(255,255,255,.12); } .xwerp-sb-stepbox.is-later polygon { fill-opacity: .3; }
.xwerp-sb-deplegend .is-posted { --c: #7b8cff; } .xwerp-sb-deplegend .is-waiting { --c: #c08bff; } .xwerp-sb-deplegend .is-schedule { --c: #4a5070; }
.xwerp-sb-deltas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.xwerp-sb-delta { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 8px; border: 1px solid var(--bd2); font-size: 10.5px; color: var(--tx3); }
.xwerp-sb-delta b { font: 600 13px "Geist Mono", ui-monospace, monospace; color: var(--tx); } .xwerp-sb-delta.is-off { border-color: rgba(255,190,92,.5); } .xwerp-sb-delta.is-off b { color: #ffbe5c; }
.xwerp-sb-delta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .xwerp-sb-deltas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* asset lifecycle: the life arc, the review */
.xwerp-sb-lifearc-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-lifepath { fill: none; stroke: #5cc8ff; stroke-width: 10; stroke-opacity: .18; }
.xwerp-sb-lifebox .is-top { fill: var(--c); } .xwerp-sb-lifebox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-lifebox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-lifebox.is-register, .xwerp-sb-lifelegend .is-register { --c: #7b8cff; } .xwerp-sb-lifebox.is-depreciation, .xwerp-sb-lifelegend .is-depreciation { --c: #5cc8ff; }
.xwerp-sb-lifebox.is-disposal, .xwerp-sb-lifelegend .is-disposal { --c: #ff8fb1; } .xwerp-sb-lifebox.is-disposal polygon { fill-opacity: .3; stroke: #ff8fb1; stroke-dasharray: 3 2; }
.xwerp-sb-lifebox.is-gain, .xwerp-sb-lifelegend .is-gain { --c: #5fe0b0; } .xwerp-sb-lifebox.is-gain polygon { fill-opacity: .3; stroke: #5fe0b0; stroke-dasharray: 3 2; }
.xwerp-sb-lifehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.xwerp-sb-usedgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.xwerp-sb-used { display: grid; grid-template-columns: 80px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12px; }
.xwerp-sb-used i { height: 7px; border-radius: 4px; background: linear-gradient(90deg, #7b8cff var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-sb-used i { background: linear-gradient(270deg, #7b8cff var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-used.is-past i { background: linear-gradient(90deg, #5fe0b0 var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-used b { font: 600 11.5px "Geist Mono", ui-monospace, monospace; }
@media (max-width: 640px) { .xwerp-sb-usedgrid { grid-template-columns: minmax(0, 1fr); } }
.xwerp-sb-life .xwerp-sb-day-row { grid-template-columns: 110px minmax(0, 1fr); } .xwerp-sb-life .xwerp-sb-day-scale { margin-inline-start: 120px; }
/* budgeting: the skyline, the versions, the spread */
.xwerp-sb-skyline-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-skybox .is-top { fill: var(--c); } .xwerp-sb-skybox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-skybox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-skybox.is-budget { --c: #8f9cff; } .xwerp-sb-skybox.is-actual { --c: #ffbe5c; } .xwerp-sb-skybox.is-low { --c: #ff8fb1; }
.xwerp-sb-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bd2); border-inline-start: 3px solid var(--c); background: none; color: var(--tx); font: inherit; font-size: 12.5px; text-align: start; }
.xwerp-sb-version > span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .xwerp-sb-version > b:last-child { grid-row: 1; grid-column: 2; }
button.xwerp-sb-version { cursor: pointer; } .xwerp-sb-version.is-on { box-shadow: 0 0 0 1.5px var(--c); }
.xwerp-sb-version.is-budget { --c: #8f9cff; } .xwerp-sb-version.is-actual { --c: #ffbe5c; } .xwerp-sb-version.is-low { --c: #ff8fb1; }
.xwerp-sb-spread { display: flex; flex-direction: column; gap: 6px; }
.xwerp-sb-spreadrow { display: grid; grid-template-columns: 54px minmax(0, 1fr) 90px; gap: 8px; align-items: center; font-size: 12px; } .xwerp-sb-spreadrow > b { text-align: end; font: 600 11.5px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-spreadcells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.xwerp-sb-spreadcells span { padding: 4px 0; border-radius: 4px; background: rgba(123,140,255,.35); text-align: center; font: 600 9.5px "Geist Mono", ui-monospace, monospace; overflow: hidden; }
.xwerp-sb-spreadmonths { display: grid; grid-template-columns: 54px repeat(12, minmax(0, 1fr)) 90px; gap: 2px; font: 500 10px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; }
.xwerp-sb-spreadmonths::before { content: ""; } .xwerp-sb-spreadmonths::after { content: ""; }
/* forecasting: the banner, the fan, the levers, the 13 weeks */
.xwerp-sb-banner { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(92,200,255,.4); background: rgba(92,200,255,.07); font-size: 12.5px; color: #8fd8ff; }
.xwerp-sb-fan-svg { width: 100%; height: auto; max-height: 230px; }
.xwerp-sb-fan-today, .xwerp-sb-fan-scen, .xwerp-sb-fan-cov { fill: none; stroke-width: 2.5; } .xwerp-sb-fan-today { stroke: #7b8cff; } .xwerp-sb-fan-scen { stroke: #ffbe5c; } .xwerp-sb-fan-cov { stroke: #ff6b8a; stroke-dasharray: 5 4; stroke-width: 1.5; }
.xwerp-sb-lever { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 110px) 34px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--bd); font-size: 12px; }
.xwerp-sb-lever input { width: 100%; accent-color: #ffbe5c; } .xwerp-sb-lever output { text-align: center; font: 600 12px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-lever .xwerp-sb-item-words span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.xwerp-sb-fc-svg { width: 100%; height: 140px; }
.xwerp-sb-fc-svg polyline { fill: none; stroke-width: 2; } .xwerp-sb-fc-svg .is-today { stroke: #7b8cff; } .xwerp-sb-fc-svg .is-scen { stroke: #ffbe5c; } .xwerp-sb-fc-svg .is-cov { stroke: #ff6b8a; stroke-dasharray: 5 4; } .xwerp-sb-fc-svg .is-low { fill: #ffbe5c; }
.xwerp-sb-fclegend .is-today { --c: #7b8cff; } .xwerp-sb-fclegend .is-scen { --c: #ffbe5c; } .xwerp-sb-fclegend .is-cov { --c: #ff6b8a; }
.xwerp-sb-budrow b.is-bad { color: #ff6b8a; }
/* travel: the trip arc, the per diem pillars */
.xwerp-sb-triparc-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-land { fill: #2a3260; stroke: rgba(123,140,255,.5); }
.xwerp-sb-flight { fill: none; stroke: #c9b6ff; stroke-width: 2; stroke-dasharray: 3 3; } .xwerp-sb-cityd { fill: #fff; stroke: #7b8cff; stroke-width: 2; }
.xwerp-sb-diem .is-top { fill: #ffd08a; } .xwerp-sb-diem .is-left { fill: #ffbe5c; } .xwerp-sb-diem .is-right { fill: #d6973a; }
.xwerp-sb-diem.is-edge polygon { stroke: #fff; stroke-dasharray: 2 2; stroke-width: .8; } .xwerp-sb-diem.is-meal polygon { fill-opacity: .45; stroke: #ffbe5c; stroke-dasharray: 3 2; }
.xwerp-sb-trvlegend .is-paid { --c: #ffbe5c; } .xwerp-sb-trvlegend .is-meal { --c: rgba(255,190,92,.45); } .xwerp-sb-trvlegend .is-edge { --c: #e8ebf7; }
.xwerp-sb-provcol.is-sky { --c: #5cc8ff; } .xwerp-sb-provcol.is-green { --c: #5fe0b0; }
/* corporate cards: the vault, the statement bars, the cycle */
.xwerp-sb-cardvault-svg { width: 100%; height: auto; max-height: 240px; }
.xwerp-sb-cardshape.is-a { fill: #a07bff; } .xwerp-sb-cardshape.is-b { fill: #5cc8ff; }
.xwerp-sb-stmtbar .is-top { fill: var(--c); } .xwerp-sb-stmtbar .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-stmtbar .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-stmtbar.is-pending { --c: #7b8cff; } .xwerp-sb-stmtbar.is-matched, .xwerp-sb-cardlegend .is-matched { --c: #5fe0b0; } .xwerp-sb-stmtbar.is-unmatched, .xwerp-sb-cardlegend .is-unmatched { --c: #ffbe5c; } .xwerp-sb-stmtbar.is-outside, .xwerp-sb-cardlegend .is-outside { --c: #4a5070; }
.xwerp-sb-till polygon { fill: rgba(95,224,176,.2); stroke: #5fe0b0; } .xwerp-sb-cardlegend .is-cash { --c: #5fe0b0; }
.xwerp-sb-cyclesteps { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 640px) { .xwerp-sb-cyclesteps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xwerp-sb-card .xwerp-sb-budrow { grid-template-columns: 90px 96px minmax(0, 1fr); } .xwerp-sb-card .xwerp-sb-budrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* reimbursements: the conveyor boxes */
.xwerp-sb-claimbox .is-top { fill: var(--c); } .xwerp-sb-claimbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-claimbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-claimbox.is-waiting, .xwerp-sb-rblegend .is-waiting { --c: #7b8cff; } .xwerp-sb-claimbox.is-exception, .xwerp-sb-rblegend .is-exception { --c: #ffbe5c; } .xwerp-sb-claimbox.is-scheduled, .xwerp-sb-rblegend .is-scheduled { --c: #5fe0b0; }
.xwerp-sb-batchbox polygon { fill: rgba(123,140,255,.12); stroke: #a9b4ff; } .xwerp-sb-rblegend .is-batch { --c: #a9b4ff; }
.xwerp-sb-rb .xwerp-sb-budrow { grid-template-columns: 90px 96px minmax(0, 1fr); } .xwerp-sb-rb .xwerp-sb-budrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* HR home: the constellation, the brief, the pulse, the dials */
.xwerp-sb-hr-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-staff .is-top { fill: var(--c); } .xwerp-sb-staff .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-staff .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-staff.is-active, .xwerp-sb-hrlegend .is-active { --c: #ff8fb1; } .xwerp-sb-staff.is-left, .xwerp-sb-hrlegend .is-left { --c: #8b93b8; } .xwerp-sb-staff.is-offer, .xwerp-sb-hrlegend .is-offer { --c: #5cc8ff; }
.xwerp-sb-staff.is-left polygon, .xwerp-sb-staff.is-offer polygon { fill-opacity: .3; stroke: var(--c); stroke-dasharray: 3 2; }
.xwerp-sb-docring { fill: none; stroke: #ffbe5c; stroke-width: 2; filter: drop-shadow(0 0 5px #ffbe5c); } .xwerp-sb-hrlegend .is-doc { --c: #ffbe5c; }
.xwerp-sb-brief { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--bd2); border-inline-start: 3px solid #ffbe5c; }
.xwerp-sb-pulse .xwerp-sb-day-row { grid-template-columns: 110px minmax(0, 1fr); } .xwerp-sb-pulse .xwerp-sb-day-scale { margin-inline-start: 120px; }
.xwerp-sb-dials { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.xwerp-sb-dials > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; text-align: center; }
@media (max-width: 640px) { .xwerp-sb-dials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xwerp-sb-pulse .xwerp-sb-day-track { height: 38px; } .xwerp-sb-pulse .xwerp-sb-day-track i { bottom: auto; height: 16px; } .xwerp-sb-pulse .xwerp-sb-day-track i:nth-child(even) { top: 19px; }
/* employee file: the hologram, the record, who sees which layer */
.xwerp-sb-holo-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-sheetlayer { fill: color-mix(in srgb, var(--c) 18%, transparent); stroke: var(--c); stroke-width: 1.2; transition: fill .2s; }
.xwerp-sb-sheetlayer.is-on { fill: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 2.2; filter: drop-shadow(0 0 8px var(--c)); }
.xwerp-sb-sheetlayer.is-violet { --c: #7b8cff; } .xwerp-sb-sheetlayer.is-green { --c: #5fe0b0; } .xwerp-sb-sheetlayer.is-amber { --c: #ffbe5c; } .xwerp-sb-sheetlayer.is-sky { --c: #5cc8ff; } .xwerp-sb-sheetlayer.is-pink { --c: #ff8fb1; }
.xwerp-sb-holohead { fill: #ff8fb1; filter: drop-shadow(0 0 10px #ff8fb1); } .xwerp-sb-holopin polygon { fill: #ff8fb1; }
.xwerp-sb-ticket dd.is-masked { letter-spacing: 2px; color: var(--tx3); }
.xwerp-sb-seesgrid { display: grid; grid-template-columns: 70px repeat(4, minmax(0, 1fr)); gap: 5px; align-items: center; font-size: 11.5px; }
.xwerp-sb-seesgrid > b { font: 600 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xwerp-sb-seesgrid > b[class]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: var(--c); } .xwerp-sb-seesgrid > b[class] { text-align: start; color: var(--tx2); }
.xwerp-sb-seesgrid .is-violet { --c: #7b8cff; } .xwerp-sb-seesgrid .is-green { --c: #5fe0b0; } .xwerp-sb-seesgrid .is-amber { --c: #ffbe5c; } .xwerp-sb-seesgrid .is-sky { --c: #5cc8ff; } .xwerp-sb-seesgrid .is-pink { --c: #ff8fb1; }
.xwerp-sb-seecell { padding: 5px 0; border-radius: 6px; text-align: center; font: 600 11px "Geist Mono", ui-monospace, monospace; }
.xwerp-sb-seecell.is-all { background: rgba(95,224,176,.18); color: #5fe0b0; } .xwerp-sb-seecell.is-some { background: rgba(255,190,92,.16); color: #ffbe5c; } .xwerp-sb-seecell.is-none { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px); color: var(--tx3); }
/* org design: the canopy, the spans */
.xwerp-sb-canopy-svg { width: 100%; height: auto; max-height: 260px; }
.xwerp-sb-orgbox .is-top { fill: var(--c); } .xwerp-sb-orgbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-orgbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-orgbox.is-mgr { --c: #5cc8ff; } .xwerp-sb-orgbox.is-ic { --c: #c08bff; } .xwerp-sb-orgbox.is-out polygon { fill-opacity: .3; stroke: var(--c); stroke-dasharray: 3 2; }
.xwerp-sb-orgbox.is-picked .is-top { fill: #ff8fb1; } .xwerp-sb-orgbox.is-picked polygon { stroke: #fff; stroke-width: 1.2; }
.xwerp-sb-item.is-on { border-radius: 8px; box-shadow: 0 0 0 1.5px #7b8cff; padding-inline: 6px; }
.xwerp-sb-spanbtn { width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; background: none; color: var(--tx); font: inherit; text-align: start; cursor: pointer; }
.xwerp-sb-spanbtn.is-on { border-color: #c08bff; background: rgba(192,139,255,.08); }
.xwerp-sb-org .xwerp-sb-budrow { grid-template-columns: 70px 30px minmax(0, 1fr); } .xwerp-sb-org .xwerp-sb-payee { grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) auto; }
.xwerp-sb-srcrow.is-violet { --c: #c08bff; }
/* document expiry: the horizon ribbon, the posts, the relay */
.xwerp-sb-hz-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-ribbonband { fill: color-mix(in srgb, var(--c) 35%, #141826); stroke: var(--c); stroke-width: .8; }
.xwerp-sb-ribbonband.is-pink, .xwerp-sb-docpost.is-pink { --c: #ff6b8a; } .xwerp-sb-ribbonband.is-amber, .xwerp-sb-docpost.is-amber { --c: #ffbe5c; } .xwerp-sb-ribbonband.is-green, .xwerp-sb-docpost.is-green { --c: #5fe0b0; }
.xwerp-sb-docpost .is-top { fill: var(--c); } .xwerp-sb-docpost .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-docpost .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-docpost.is-picked polygon { stroke: #fff; stroke-width: 1.3; } .xwerp-sb-docpost.is-acked polygon { fill-opacity: .3; }
.xwerp-sb-relayhead { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; border: 1px solid var(--bd2); }
.xwerp-sb-relayhead > .xwerp-sb-badge { font-size: 15px; padding: 6px 10px; }
.xwerp-sb-doc .xwerp-sb-item { gap: 8px; } .xwerp-sb-doc .xwerp-sb-item .xwerp-apv-act { padding: 4px 10px; font-size: 12px; } @media (max-width: 640px) { .xwerp-sb-doc .xwerp-sb-item { flex-wrap: wrap; } }
/* recruiting: the funnel, the guard, the ranking */
.xwerp-sb-funnel-svg { width: 100%; height: auto; max-height: 270px; }
.xwerp-sb-tier { fill: color-mix(in srgb, var(--c) 35%, #141826); stroke: var(--c); stroke-width: 1.2; } .xwerp-sb-tier.is-on { fill: color-mix(in srgb, var(--c) 60%, #141826); filter: drop-shadow(0 0 10px var(--c)); stroke-width: 2; }
.xwerp-sb-tier-side { fill: color-mix(in srgb, var(--c) 45%, #000); }
.xwerp-sb-tier.is-violet, .xwerp-sb-tier-side.is-violet, .xwerp-sb-reclegend .is-violet { --c: #7b8cff; } .xwerp-sb-tier.is-peri, .xwerp-sb-tier-side.is-peri, .xwerp-sb-reclegend .is-peri { --c: #a07bff; }
.xwerp-sb-tier.is-pink, .xwerp-sb-tier-side.is-pink, .xwerp-sb-reclegend .is-pink { --c: #c08bff; } .xwerp-sb-tier.is-amber, .xwerp-sb-tier-side.is-amber, .xwerp-sb-reclegend .is-amber { --c: #ffbe5c; } .xwerp-sb-tier.is-green, .xwerp-sb-tier-side.is-green, .xwerp-sb-reclegend .is-green { --c: #5fe0b0; }
.xwerp-sb-tierdot { fill: #e8ebf7; opacity: .85; }
.xwerp-sb-funnelbase .is-top { fill: #2a3045; } .xwerp-sb-funnelbase .is-left { fill: #1d2134; } .xwerp-sb-funnelbase .is-right { fill: #151827; }
.xwerp-sb-guard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(95,224,176,.45); background: rgba(95,224,176,.06); font-size: 12.5px; }
.xwerp-sb-guard s.xwerp-apv-layer { color: #ff8fb1; border-color: rgba(255,143,177,.5); }
.xwerp-sb-rankrow { display: grid; grid-template-columns: 16px minmax(80px, 1fr) minmax(40px, 1fr) 34px auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-rankrow i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #7b8cff var(--w), rgba(255,255,255,.07) var(--w)); }
:root[dir="rtl"] .xwerp-sb-rankrow i { background: linear-gradient(270deg, #7b8cff var(--w), rgba(255,255,255,.07) var(--w)); }
.xwerp-sb-rankrow .xwerp-apv-act { padding: 2px 8px; }
@media (max-width: 640px) { .xwerp-sb-rankrow { grid-template-columns: 16px minmax(0, 1fr) 34px auto auto auto; } .xwerp-sb-rankrow i { display: none; } }
/* joiners: the runway, the rings, the requests */
.xwerp-sb-runway-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-taskbox .is-top { fill: var(--c); } .xwerp-sb-taskbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-taskbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-taskbox.is-done { --c: #5fe0b0; } .xwerp-sb-taskbox.is-block { --c: #ff6b8a; } .xwerp-sb-taskbox.is-open { --c: #ffbe5c; }
.xwerp-sb-readyrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; }
.xwerp-sb-reqrow { display: grid; grid-template-columns: 10px minmax(0, 1.4fr) minmax(0, 1fr) 96px auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; }
.xwerp-sb-reqrow button.xwerp-sb-badge { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
.xwerp-sb-dotc { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.xwerp-sb-dotc.is-pink, .xwerp-sb-readyrow.is-pink { --c: #ff8fb1; } .xwerp-sb-dotc.is-sky { --c: #5cc8ff; } .xwerp-sb-dotc.is-amber { --c: #ffbe5c; } .xwerp-sb-dotc.is-green { --c: #5fe0b0; }
@media (max-width: 640px) { .xwerp-sb-reqrow { grid-template-columns: 10px minmax(0, 1fr) auto; } .xwerp-sb-reqrow > span:nth-child(3), .xwerp-sb-reqrow > span:nth-child(4) { display: none; } }
/* offboarding: the relay, the vault, the checklist */
.xwerp-sb-relay3d-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-relaypath { fill: none; stroke: #5fe0b0; stroke-width: 2.5; stroke-dasharray: 5 5; }
.xwerp-sb-deskbox .is-top { fill: var(--c); } .xwerp-sb-deskbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-deskbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-deskbox.is-signed { --c: #5fe0b0; } .xwerp-sb-deskbox.is-open { --c: #ffbe5c; } .xwerp-sb-deskbox.is-disputed { --c: #ff6b8a; }
.xwerp-sb-vault .is-top { fill: #3a2a45; } .xwerp-sb-vault .is-left { fill: #2a2236; } .xwerp-sb-vault .is-right { fill: #1d1828; }
.xwerp-sb-vault.is-held polygon { stroke: #ff6b8a; } .xwerp-sb-vault.is-open polygon { stroke: #5fe0b0; }
.xwerp-sb-lockdot { fill: none; stroke: #ff6b8a; stroke-width: 2.5; } .xwerp-sb-lockdot.is-open { stroke: #5fe0b0; }
.xwerp-sb-off .xwerp-sb-item { flex-wrap: wrap; }
.xwerp-sb-checkrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bd); font-size: 12.5px; cursor: pointer; }
.xwerp-sb-checkrow input { accent-color: #5fe0b0; } .xwerp-sb-checkrow.is-done > span:nth-child(2) { text-decoration: line-through; color: var(--tx3); }
.xwerp-sb-checkrow > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .xwerp-sb-checkrow { grid-template-columns: auto minmax(0, 1fr) auto; } .xwerp-sb-checkrow > .xwerp-sb-muted { display: none; } }
.xwerp-sb-off .xwerp-sb-item .xwerp-apv-act { flex: 0 0 auto; padding: 4px 12px; font-size: 12px; } .xwerp-sb-off .xwerp-sb-item .xwerp-sb-item-words { flex: 1 1 60%; }
/* employee relations: the case vault */
.xwerp-sb-casevault-svg { width: 100%; height: auto; max-height: 240px; }
.xwerp-sb-casebox .is-top { fill: var(--c); } .xwerp-sb-casebox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-casebox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-casebox.is-open, .xwerp-sb-casebox.is-requested, .xwerp-sb-erlegend .is-open { --c: #ffbe5c; } .xwerp-sb-casebox.is-decided, .xwerp-sb-erlegend .is-decided { --c: #5fe0b0; }
.xwerp-sb-casebox.is-sealed, .xwerp-sb-erlegend .is-sealed { --c: #4a5070; } .xwerp-sb-casebox.is-sealed polygon { fill-opacity: .25; stroke: #8b93b8; stroke-dasharray: 3 2; }
.xwerp-sb-casering { fill: none; stroke: #7b8cff; stroke-width: 2; filter: drop-shadow(0 0 5px #7b8cff); }
.xwerp-sb-day-row.is-green { --c: #5fe0b0; }
/* contracts: the stack, the today line */
.xwerp-sb-constack-svg { width: 100%; height: auto; max-height: 240px; }
.xwerp-sb-conbar { fill: var(--c); fill-opacity: .8; } .xwerp-sb-conbar.is-indefinite, .xwerp-sb-conlegend .is-indefinite { --c: #7b8cff; } .xwerp-sb-conbar.is-fixed, .xwerp-sb-conlegend .is-fixed { --c: #5cc8ff; } .xwerp-sb-conbar.is-ended, .xwerp-sb-conlegend .is-ended { --c: #4a5070; }
.xwerp-sb-todayline { stroke: #ffbe5c; stroke-dasharray: 4 3; } .xwerp-sb-art55 { stroke: #ff6b8a; stroke-width: 3; } .xwerp-sb-conlegend .is-art55 { --c: #ff6b8a; }
.xwerp-sb-arcline-svg { width: 100%; height: 80px; }
.xwerp-sb-arcline-svg .is-current { fill: #5cc8ff; } .xwerp-sb-arcline-svg .is-renew { fill: rgba(255,190,92,.35); stroke: #ffbe5c; stroke-dasharray: 3 2; } .xwerp-sb-arcline-svg .is-renew.is-over { fill: rgba(255,107,138,.3); stroke: #ff6b8a; }
.xwerp-sb-arcline-svg .is-today { stroke: #ffbe5c; stroke-dasharray: 3 3; } .xwerp-sb-arcline-svg .is-art55 { stroke: #ff6b8a; stroke-width: 2; }
/* benefits: the orbit, the coverage matrix */
.xwerp-sb-orbitben-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-orbitring { fill: none; stroke: rgba(123,140,255,.3); stroke-dasharray: 3 4; }
.xwerp-sb-moon { fill: var(--c); filter: drop-shadow(0 0 10px var(--c)); } .xwerp-sb-moon.is-core { --c: #ff8fb1; }
.xwerp-sb-moon.is-pink { --c: #ff8fb1; } .xwerp-sb-moon.is-violet { --c: #7b8cff; } .xwerp-sb-moon.is-amber { --c: #ffbe5c; } .xwerp-sb-moon.is-sky { --c: #5cc8ff; } .xwerp-sb-moon.is-peri { --c: #c8e65c; }
.xwerp-sb-moon.is-conf { fill: rgba(255,255,255,.08); stroke: #a6acc2; stroke-dasharray: 3 2; filter: none; }
.xwerp-sb-sat { fill: none; stroke: #5cc8ff; stroke-width: 2; stroke-dasharray: 3 2; } .xwerp-sb-sat.is-covered { fill: #5cc8ff; stroke-dasharray: none; } .xwerp-sb-sat.is-afterBirth { stroke: #ffbe5c; }
.xwerp-sb-benlegend .is-plan { --c: #7b8cff; } .xwerp-sb-benlegend .is-dep { --c: #5cc8ff; } .xwerp-sb-benlegend .is-conf { --c: #a6acc2; }
.xwerp-sb-covgrid { display: grid; grid-template-columns: minmax(100px, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; font-size: 12px; }
.xwerp-sb-covgrid > b { font: 600 10.5px "Geist Mono", ui-monospace, monospace; color: var(--tx3); text-align: center; }
.xwerp-sb-covgrid > b[class] { text-align: start; color: var(--tx); font: 500 12.5px Geist, system-ui, sans-serif; } .xwerp-sb-covgrid > b[class]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--c); }
.xwerp-sb-covgrid .is-pink { --c: #ff8fb1; } .xwerp-sb-covgrid .is-violet { --c: #7b8cff; } .xwerp-sb-covgrid .is-amber { --c: #ffbe5c; } .xwerp-sb-covgrid .is-sky { --c: #5cc8ff; } .xwerp-sb-covgrid .is-peri { --c: #c08bff; }
.xwerp-sb-covcell { padding: 6px 4px; border-radius: 7px; border: 1px solid var(--bd); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xwerp-sb-covcell.is-covered { border-color: rgba(95,224,176,.4); background: rgba(95,224,176,.12); color: #5fe0b0; }
.xwerp-sb-covcell.is-eligible { border: 1px dashed #5cc8ff; color: #5cc8ff; } .xwerp-sb-covcell.is-afterBirth { border: 1px dashed #ffbe5c; color: #ffbe5c; }
.xwerp-sb-covcell.is-na { color: var(--tx3); border-style: dashed; } .xwerp-sb-covcell.is-confidential { color: var(--tx3); background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px); }
@media (max-width: 640px) { .xwerp-sb-covgrid { grid-template-columns: 80px repeat(3, minmax(0, 1fr)); font-size: 10.5px; } }
/* end of service: the years tower */
.xwerp-sb-eostower-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-yearbox .is-top { fill: var(--c); } .xwerp-sb-yearbox .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-yearbox .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-yearbox.is-half { --c: #7b8cff; } .xwerp-sb-yearbox.is-full { --c: #c08bff; }
.xwerp-sb-awardbox .is-top { fill: #ffd08a; } .xwerp-sb-awardbox .is-left { fill: #ffbe5c; } .xwerp-sb-awardbox .is-right { fill: #d6973a; }
.xwerp-sb-zeroring { fill: none; stroke: #ff6b8a; stroke-dasharray: 3 3; }
.xwerp-sb-eos .xwerp-sb-item-words b { white-space: normal; overflow: visible; text-overflow: clip; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; }

/* Start here: shared workspace compositions, scoped to their experience. */
.xwerp-entity-graph-stage { min-height:28rem; margin-block:1rem; overflow:auto; }
.xwerp-entity-graph-inspector { padding:var(--spacing-md); border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); }
.xwerp-entity-graph-inspector:empty { display:none; }
.xwerp-start-nav, .xwerp-start-actions, .xwerp-room-nav, .xwerp-room-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.xwerp-start-nav { margin-block-end:1rem; padding:.35rem; border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); background:var(--xwerp-glass); }
.xwerp-start-heading { margin-block-end:1rem; }
.xwerp-start-heading .xwui-typography { margin-block:0 .4rem; }
.xwerp-start-actions { justify-content:flex-end; margin-block:.75rem; }
.xwerp-start-note { margin-block-start:1rem; }
.xwerp-room-nav { margin-block-end:.75rem; }
.xwerp-room-scene { height:35rem; position:relative; overflow:hidden; perspective:70rem; touch-action:pan-y; border-radius:var(--radius-container); background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--xwerp-indigo) 18%,transparent),transparent 68%); cursor:grab; }
.xwerp-room-scene:active { cursor:grabbing; }
.xwerp-room-ring { position:absolute; inset:0; transform-style:preserve-3d; transform:translateZ(-34rem) rotateY(var(--room-angle,0deg)); transition:transform .25s ease-out; }
.xwerp-room-panel { position:absolute; inset-block-start:2rem; inset-inline-start:calc(50% - 14rem); width:28rem; height:29rem; display:flex; flex-direction:column; border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); background:var(--bg-primary); color:var(--text-primary); box-shadow:0 1rem 3rem color-mix(in srgb,var(--xwerp-ink) 18%,transparent); transform:rotateY(calc(var(--room-index) * 45deg)) translateZ(34rem); backface-visibility:hidden; opacity:.28; transition:opacity .2s; overflow:hidden; }
.xwerp-room-panel.is-facing { opacity:1; }
.xwerp-room-panel-head { padding:.75rem 1rem; border-block-end:1px solid var(--xwerp-card-border); }
.xwerp-room-panel-head .xwui-typography { margin:0; }
.xwerp-room-panel-body { padding:1rem; flex:1; min-height:0; overflow:auto; cursor:auto; }
.xwerp-room-panel-body .xwerp-home-kpis, .xwerp-room-panel-body.xwerp-home-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.xwerp-room-panel-body .xwerp-home-role-host,.xwerp-room-panel-body .xwerp-home-role { max-width:100%; width:100%; }
.xwerp-room-panel-body .xwerp-home-map-head { flex-wrap:wrap; }
.xwerp-room-panel-body .xwerp-home-map-body { grid-template-columns:minmax(0,1fr); }
.xwerp-room-panel-body .xwerp-home-map-legend { grid-template-columns:repeat(2,minmax(0,1fr)); }
.xwerp-room-panel-body .xwerp-home-panel, .xwerp-room-panel-body.xwerp-home-panel { padding:.5rem; }
.xwerp-room-panel-body .xwerp-home-track { overflow:auto; }
.xwerp-room-controls { justify-content:center; margin-block:1rem; }
.xwerp-room-status { flex-basis:100%; text-align:center; }
.xwerp-room-scene.is-flat { height:auto; overflow:visible; perspective:none; background:none; }
.xwerp-room-scene.is-flat .xwerp-room-ring { position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap:1rem; transform:none; }
.xwerp-room-scene.is-flat .xwerp-room-panel { position:static; width:auto; height:30rem; transform:none; opacity:1; }
.xwerp-phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:1.25rem; }
.xwerp-phone { min-width:0; display:flex; flex-direction:column; gap:.65rem; padding:.65rem; border:.25rem solid color-mix(in srgb,var(--xwerp-slate) 40%,var(--bg-primary)); border-radius:2rem; background:var(--bg-primary); box-shadow:0 1rem 2rem color-mix(in srgb,var(--xwerp-ink) 12%,transparent); }
.xwerp-phone-top { padding:.7rem .5rem .3rem; text-align:center; }
.xwerp-phone-top .xwui-typography { margin:0; }
.xwerp-phone-screen { height:36rem; overflow:auto; border-radius:1rem; min-width:0; container-type:inline-size; }
.xwerp-phone-screen .xwerp-apv-figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
.xwerp-phone-screen .xwerp-essb-lower { grid-template-columns:minmax(0,1fr); }
.xwerp-phone-screen .xwerp-essb-dots { display:none; }
.xwerp-phone-screen .xwerp-home-panel { border:0; border-radius:0; padding:.75rem; }
.xwerp-phone-screen .xwerp-home-cortex-head { flex-wrap:wrap; }
.xwerp-phone-screen .xwerp-home-autonomy { flex-wrap:wrap; }
.xwerp-phone-screen .xwerp-page { padding:.5rem; min-width:0; }
.xwerp-phone-screen .xwerp-pxhead { flex-wrap:wrap; }
.xwerp-phone-screen h1 { font-size:1.2rem; }
.xwerp-phone-screen .xwerp-apv-title { font-size:1.5rem; line-height:1.25; }
.xwerp-setup-top { display:grid; grid-template-columns:minmax(0,2fr) minmax(16rem,1fr); gap:1rem; margin-block:1rem; }
.xwerp-setup-road { display:flex; align-items:center; justify-content:center; gap:.65rem; flex-wrap:wrap; padding:2rem 1.5rem; min-height:16rem; border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); background:linear-gradient(150deg,color-mix(in srgb,var(--xwerp-indigo) 12%,transparent),transparent); }
.xwerp-setup-stone { flex:0 1 8rem; transform:translateY(calc(mod(var(--stone-index),2) * 1.2rem)); }
.xwerp-setup-stone button { min-height:4rem; border:1px solid var(--xwerp-card-border); width:100%; box-shadow:0 .5rem 0 color-mix(in srgb,var(--xwerp-indigo) 12%,var(--bg-primary)); white-space:normal; }
.xwerp-setup-stone button[aria-pressed=true] { border-color:var(--xwerp-indigo); }
.xwerp-setup-stone.is-reviewed button { border-color:var(--xwerp-green); }
.xwerp-setup-stone.is-skipped button { border-color:var(--xwerp-amber); }
.xwerp-setup-beacon, .xwerp-setup-detail { padding:1rem; border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); background:var(--bg-primary); }
.xwerp-setup-check { display:flex; justify-content:space-between; gap:.75rem; border-block-end:1px solid var(--xwerp-card-border); }
.xwerp-setup-check.is-reviewed { color:var(--xwerp-green); }
.xwerp-setup-check.is-skipped { color:var(--xwerp-amber); }
.xwerp-setup-step-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.xwerp-setup-owner { max-height:34rem; overflow:auto; margin-block:1rem; }
.xwerp-setup-save { margin-inline-end:auto; }
.xwerp-vault { display:block; width:min(100%,30rem); height:auto; margin:auto; touch-action:pan-y; cursor:grab; filter:drop-shadow(0 2rem 2rem color-mix(in srgb,var(--xwerp-ink) 35%,transparent)); }
.xwerp-vault-side { fill:color-mix(in srgb,var(--xwerp-indigo) 25%,var(--xwerp-ink)); }
.xwerp-vault-wall { fill:color-mix(in srgb,var(--xwerp-slate) 25%,var(--bg-primary)); stroke:var(--xwerp-card-border); stroke-width:2; }
.xwerp-vault-frame { fill:var(--xwerp-ink); stroke:var(--xwerp-slate); stroke-width:2; }
.xwerp-vault-rim { fill:color-mix(in srgb,var(--xwerp-indigo) 40%,var(--bg-primary)); stroke:var(--xwerp-lilac); stroke-width:3; }
.xwerp-vault-face { fill:color-mix(in srgb,var(--xwerp-indigo) 16%,var(--bg-primary)); stroke:var(--xwerp-lilac); }
.xwerp-vault-inner { fill:none; stroke:var(--xwerp-indigo); stroke-width:2; stroke-dasharray:3 7; }
.xwerp-vault-rivet, .xwerp-vault-hub { fill:var(--xwerp-lilac); }
.xwerp-vault-spoke { stroke:var(--xwerp-lilac); stroke-width:5; stroke-linecap:round; }
.xwerp-auth-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; margin-block:1rem; }
.xwerp-auth-step { padding:.5rem; border-block-end:2px solid var(--xwerp-card-border); }
.xwerp-auth-step.is-active { color:var(--xwerp-indigo); border-color:var(--xwerp-indigo); }
.xwerp-auth-availability { margin-block:1rem; opacity:.8; }
.xwerp-auth-role { margin-block:.6rem; }
.xwerp-auth-role button[aria-pressed=true] { border-color:var(--xwerp-indigo); background:color-mix(in srgb,var(--xwerp-indigo) 15%,transparent); }
@media(max-width:1000px) { .xwerp-phone-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); } .xwerp-setup-top { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .xwerp-room-panel { width:22rem; inset-inline-start:calc(50% - 11rem); } .xwerp-start-nav { gap:.2rem; } .xwerp-setup-road { padding:1rem .5rem; } .xwerp-setup-stone { flex-basis:6rem; } }
@media(prefers-reduced-motion:reduce) { .xwerp-room-ring,.xwerp-room-panel { transition:none; } }

/* Shared definition editor composition; the editor owns its internal layout. */
.xwerp-definitions-studio { min-width:0; display:grid; gap:var(--spacing-md); }
.xwerp-studio-toolbar { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); margin-block:var(--spacing-md); }
.xwerp-studio-source-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); align-items:end; gap:var(--spacing-md); }
.xwerp-studio-canvas { height:36rem; min-height:28rem; overflow:auto; border:1px solid var(--xwerp-card-border); border-radius:var(--radius-container); }
.xwerp-studio-review { display:grid; gap:var(--spacing-md); min-width:0; }
.xwerp-studio-review > div { min-width:0; }
.xwerp-studio-canvas[hidden], .xwerp-studio-review[hidden], .xwerp-studio-review [hidden] { display:none !important; }
.xwerp-studio-review-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:var(--spacing-md); align-items:end; }
.xwerp-layer-scene { display:block; width:100%; height:32rem; max-height:65vh; min-height:16rem; touch-action:pan-y; cursor:grab; }
.xwerp-layer-scene:active { cursor:grabbing; }
.xwerp-layer-top { fill:color-mix(in srgb,var(--xwerp-indigo) 14%,var(--bg-primary)); stroke:var(--xwerp-card-border); stroke-width:.7; }
.xwerp-layer-left, .xwerp-layer-right { fill:color-mix(in srgb,var(--xwerp-indigo) 25%,var(--bg-primary)); stroke:var(--xwerp-card-border); stroke-width:.5; }
.xwerp-layer-plane .xwerp-layer-top { fill:color-mix(in srgb,var(--xwerp-slate) 10%,transparent); }
.xwerp-layer-tile { cursor:pointer; }
.xwerp-layer-tile.is-changed .xwerp-layer-top { fill:color-mix(in srgb,var(--xwerp-amber) 28%,var(--bg-primary)); }
.xwerp-layer-tile.is-added .xwerp-layer-top { fill:color-mix(in srgb,var(--xwerp-green) 28%,var(--bg-primary)); }
.xwerp-layer-tile.is-removed .xwerp-layer-top { fill:color-mix(in srgb,var(--xwerp-slate) 28%,var(--bg-primary)); stroke-dasharray:2 1; }
.xwerp-layer-tile.is-selected polygon { stroke:var(--xwerp-indigo); stroke-width:1.8; }
.xwerp-layer-label { fill:var(--xwerp-ink); pointer-events:none; }

/* The board of a catalog page with no designed screen (src/pages/purpose/board.ts), in the prototype's language. */
.xwerp-gb { --gb-1: var(--xwui-hue-indigo, #7b8cff); --gb-2: var(--xwui-hue-sky, #5cc8ff); --gb-3: var(--xwui-hue-violet, #c08bff); --gb-4: var(--xwui-hue-amber, #ffbe5c); --gb-5: var(--xwui-hue-lime, #5fe0b0); display: flex; flex-direction: column; gap: 14px; margin-block-end: 18px; min-width: 0; }
.xwerp-gb__head { display: flex; flex-direction: column; gap: 4px; margin-block-start: -16px; }
.xwerp-gb__eyebrow { color: var(--xwerp-rec-muted); letter-spacing: .12em; text-transform: uppercase; }
.xwerp-gb__tail { color: var(--xwerp-rec-muted); font-family: var(--xwerp-font-display); }
.xwerp-gb__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.xwerp-gb__tile, .xwerp-gb__card { position: relative; overflow: hidden; min-width: 0; padding: 16px 18px; border: 1px solid var(--xwerp-rec-line); border-radius: 16px; background: var(--xwerp-rec-surface); }
.xwerp-gb__tile::after { content: ""; position: absolute; inset: -60% -20% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(123, 140, 255, .22), transparent 70%); pointer-events: none; }
.xwerp-gb__label, .xwerp-gb__note { color: var(--xwerp-rec-muted); }
.xwerp-gb__value { font-family: var(--xwerp-font-display); letter-spacing: -.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xwerp-gb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xwerp-gb__card { display: flex; flex-direction: column; gap: 10px; }
.xwerp-gb__card--wide { grid-column: span 2; }
.xwerp-gb__card--cortex { border-color: rgba(192, 139, 255, .35); background: linear-gradient(160deg, rgba(192, 139, 255, .1), var(--xwerp-rec-surface) 60%); }
.xwerp-gb__title { font-family: var(--xwerp-font-display); }
.xwerp-gb__bars { display: flex; align-items: flex-end; gap: 14px; min-height: 190px; }
.xwerp-gb__col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: center; }
.xwerp-gb__pit { display: flex; align-items: flex-end; height: 130px; }
.xwerp-gb__bar { width: 100%; height: var(--gb-h); border-radius: 10px 10px 3px 3px; background: linear-gradient(180deg, var(--gb-1), color-mix(in srgb, var(--gb-3) 55%, transparent)); box-shadow: 0 0 24px color-mix(in srgb, var(--gb-1) 35%, transparent); }
.xwerp-gb__ellip { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.xwerp-gb__num { font-variant-numeric: tabular-nums; }
.xwerp-gb__split { display: flex; gap: 3px; height: 8px; }
.xwerp-gb__seg { flex: var(--gb-g, 1) 1 0; border-radius: 4px; }
.xwerp-gb__seg--0 { background: var(--gb-1); } .xwerp-gb__seg--1 { background: var(--gb-4); } .xwerp-gb__seg--2 { background: var(--gb-5); } .xwerp-gb__seg--3 { background: var(--gb-2); } .xwerp-gb__seg--4 { background: var(--gb-3); }
.xwerp-gb__legend { display: flex; flex-wrap: wrap; gap: 12px; }
.xwerp-gb__key { display: flex; align-items: center; gap: 6px; }
.xwerp-gb__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.xwerp-gb__cortexhead { display: flex; align-items: center; gap: 10px; }
.xwerp-gb__orb { flex: none; width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(from 200deg, #ff8fb1, #c08bff, #7b8cff, #5cc8ff, #ffbe5c, #ff8fb1); box-shadow: 0 0 18px rgba(192, 139, 255, .5); }
.xwerp-gb__badge { margin-inline-start: auto; padding: 2px 8px; border-radius: 999px; background: rgba(192, 139, 255, .16); color: var(--gb-3); }
.xwerp-gb__reading { padding-block-end: 8px; border-block-end: 1px solid var(--xwerp-rec-line); }
.xwerp-gb__card--next { grid-column: 1 / -1; }
.xwerp-gb__nextlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.xwerp-gb__nextrow { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.xwerp-gb__tick { flex: none; width: 8px; height: 8px; margin-block-start: 6px; border-radius: 50%; background: var(--gb-2); box-shadow: 0 0 10px var(--gb-2); }
.xwerp-gb__nexttext { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 900px) { .xwerp-gb__grid { grid-template-columns: minmax(0, 1fr); } .xwerp-gb__card--wide { grid-column: auto; } .xwerp-gb__bars { gap: 6px; } }

/* A board's scene is placed inside its card, so every scene card must contain it (any module, light or night). */
.xwui-night[data-surface="wall"], [class*="__scene"]:not(svg, svg *) { position: relative; overflow: hidden; }

/* -- one table, one card: the prototype's .dg and .card (prototype/styles/xwerp.css) on every page ---------- */
:root {
    --xwerp-dg-head: #06070b;
    --xwerp-dg-hover: rgba(255, 255, 255, 0.06);
    --xwerp-card-ground: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    --xwerp-card-line: rgba(255, 255, 255, 0.075);
    --xwerp-card-lift: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] {
    --xwerp-dg-head: #f8f9fc;
    --xwerp-dg-hover: #f5f6fa;
    --xwerp-card-ground: linear-gradient(#ffffff, #ffffff);
    --xwerp-card-line: rgba(16, 20, 40, 0.08);
    --xwerp-card-lift: 0 1px 2px rgba(16, 20, 40, 0.06);
}
html[data-theme] main .xwui-card:not([class*="xwerp-kpi-tone--"]),
html[data-theme] main .xwerp-gb__tile,
html[data-theme] main .xwerp-gb__card:not(.xwerp-gb__card--cortex),
html[data-theme] main .xwerp-page-section:has([data-section]),
html[data-theme] main .xwerp-page-section:has(.xwerp-actions-end),
html[data-theme] main .xwui-dt {
    border: 1px solid var(--xwerp-card-line);
    border-radius: 16px;
    background: var(--xwerp-card-ground);
    box-shadow: var(--xwerp-card-lift);
}
html[data-theme] main .xwui-dt-table tbody td {
    height: 44px;
    padding-block: 4px;
    padding-inline: 14px;
    border-color: var(--xwerp-card-line) !important;
    font-size: 13.5px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] main .xwui-dt-table tbody td .xwui-button { min-height: 28px; height: 28px; padding-block: 0; }
html[data-theme] main .xwui-dt-table tbody tr:hover > td { background-image: linear-gradient(var(--xwerp-dg-hover), var(--xwerp-dg-hover)) !important; }
html[data-theme] main .xwui-table thead th {
    height: 34px;
    padding-block: 0;
    padding-inline: 14px !important;
    background: var(--xwerp-dg-head) !important;
    border-bottom: 1px solid var(--xwerp-card-line);
    color: var(--xwerp-rec-faint) !important;
    font-family: var(--font-family-mono);
    font-size: 10.5px;
    font-weight: 600 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
:root[lang="ar"] main .xwui-table thead th { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
html[data-theme] main .xwui-table tbody td {
    height: var(--xwerp-dg-row, 44px);
    padding-block: 4px;
    padding-inline: 14px !important;
    border-color: var(--xwerp-card-line);
    font-size: 13.5px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] main .xwui-table tbody tr:hover > td { background-color: var(--xwerp-dg-hover); }
html[data-theme] main .xwui-table-wrapper { border-radius: 16px; }
/* The row checkbox keeps its 40px target on touch; with a pointer it fits the prototype's 44px row. */
@media (hover: hover) and (pointer: fine) {
    html[data-theme] main .xwui-table tbody td .xwui-checkbox { min-height: 28px; }
}
html[data-theme] main .xwui-table thead th, html[data-theme] main .xwui-table tbody td { border-inline: 0 !important; }
/* pay elements: the loom, the bridge */
.xwerp-sb-loom-svg { width: 100%; height: auto; max-height: 250px; }
.xwerp-sb-thread .is-top { fill: var(--c); } .xwerp-sb-thread .is-left { fill: color-mix(in srgb, var(--c) 70%, #000); } .xwerp-sb-thread .is-right { fill: color-mix(in srgb, var(--c) 50%, #000); }
.xwerp-sb-thread.is-violet { --c: #7b8cff; } .xwerp-sb-thread.is-sky { --c: #5cc8ff; } .xwerp-sb-thread.is-green { --c: #5fe0b0; } .xwerp-sb-thread.is-pink { --c: #ff8fb1; }
.xwerp-sb-bridge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; height: 150px; align-items: stretch; }
.xwerp-sb-bridgecol { position: relative; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11px; text-align: center; }
.xwerp-sb-bridgecol i { position: absolute; inset-inline: 8px; bottom: calc(var(--b) * .78 + 34px); height: calc(var(--h) * .78); min-height: 3px; border-radius: 3px; background: var(--c); }
.xwerp-sb-bridgecol b { font: 600 11px "Geist Mono", ui-monospace, monospace; } .xwerp-sb-bridgecol span { color: var(--tx3); }
.xwerp-sb-bridgecol.is-peri { --c: #8b93b8; } .xwerp-sb-bridgecol.is-green { --c: #5fe0b0; } .xwerp-sb-bridgecol.is-pink { --c: #ff6b8a; } .xwerp-sb-bridgecol.is-violet { --c: #7b8cff; }

/* The no-access and empty states: XWUI paints this line near-black, which is unreadable on the dark ground. */
main .xwui-non-ideal-state .xwui-non-ideal-state-description { color: var(--text-secondary); }