/* ============================================================
   Vantage brand language (from the marketing site), introduced
   surface by surface. Pilot surface: the mobile bottom navigation
   and its full-screen menu. Nothing here touches desktop or any
   other screen; later phases re-point --lms-* tokens instead of
   restyling screens one by one.

   Sources of truth: the marketing site's globals.css palette
   (base #0a1114, hairline borders, lavender accent, gradient
   stops purple/warm/amber used sparingly) and its Satoshi +
   General Sans type pairing.
   ============================================================ */

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts-lms/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Satoshi';
    src: url('/fonts-lms/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('/fonts-lms/GeneralSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('/fonts-lms/GeneralSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

/* Light is the app default; html.dark-mode overrides, mirroring the
   marketing site's two palettes. */
:root {
    --vantage-bg:       #fafafa;
    --vantage-surface:  #ffffff;
    --vantage-text:     #101418;
    --vantage-text-2:   #5b656d;
    --vantage-text-3:   #6a737b;
    --vantage-line:     rgba(16, 20, 24, 0.12);
    --vantage-line-2:   rgba(16, 20, 24, 0.06);
    --vantage-fill:     rgba(16, 20, 24, 0.045);
    --vantage-fill-2:   rgba(16, 20, 24, 0.09);
    --vantage-accent:   #101418;
    --vantage-brand-a:  #7c5cd6;
    --vantage-brand-b:  #d2603d;
    --vantage-brand-c:  #d9971f;
    --vantage-font-heading: 'Satoshi', 'Hanken Grotesk', sans-serif;
    --vantage-font-body:    'General Sans', 'Hanken Grotesk', sans-serif;
    --lms-success-ink: #12703a;
    --lms-warning-ink: #8a4b04;
    --lms-danger-ink: #b91c1c;
}
/* --vantage-accent is the product's accent, and it is deliberately neutral.
   The marketing site keeps two: --accent (#cbb2ff, purple) which it uses on
   its own chrome, navbar and admin charts, and --lms-accent (#fafafa) which is
   what its rendering of this product uses to mark a selected row. The purple
   belongs to the website's hero gradient, described in its own stylesheet as
   "pulled from the grainy purple/amber hero asset", not to the application.
   Meaning-bearing colour in here is the semantic set instead: amber for work
   waiting, red for a breach, green for a pass. */

/* The shell behind the layout follows the palette. Legacy --lms-bg is
   re-pointed per surface rather than globally, so without this the body stayed
   on dark-mode.css's fixed #0a0a0c under every dark theme. It is normally
   covered by the sidebar and panel, but against a true black theme any sliver
   of it shows as a grey edge. */
html.dark-mode body,
html[data-theme] body {
    background-color: var(--vantage-bg);
}

/* ── Themes ──────────────────────────────────────────────────
   A theme only re-points these tokens, so every branded surface
   follows without any per-screen work. html.dark-mode stays in
   step for the legacy --lms-* sheet; see js-lms/settings.js.

   Graphite is the default: neutral greys with no colour cast, the
   scheme most desktop tools use, with the Vantage lavender kept as
   the accent so the product still reads as ours. */
html.dark-mode,
html[data-theme="graphite"] {
    --vantage-bg:       #1b1b1b;
    --vantage-surface:  #212121;
    --vantage-text:     #e8e8e8;
    --vantage-text-2:   #a1a1a1;
    --vantage-text-3:   #8b8b8b;
    --vantage-line:     rgba(255, 255, 255, 0.11);
    --vantage-line-2:   rgba(255, 255, 255, 0.065);
    --vantage-fill:     rgba(255, 255, 255, 0.05);
    --vantage-fill-2:   rgba(255, 255, 255, 0.10);
    --vantage-accent:   #fafafa;
    --vantage-brand-a:  #b18cff;
    --vantage-brand-b:  #e88b6c;
    --vantage-brand-c:  #f5b14c;
    --lms-success-ink: var(--lms-success-text);
    --lms-warning-ink: var(--lms-warning-text);
    --lms-danger-ink: var(--lms-danger-text);
}

/* True black, for OLED panels where an unlit pixel draws no power and renders
   as an actual black rather than a dark grey. Surfaces and lines have to work
   harder than in Graphite: against #000 a 5% white fill is nearly invisible,
   so fills and lines are lifted, and the surface steps up rather than down. */
html[data-theme="oled"] {
    --vantage-bg:       #000000;
    --vantage-surface:  #0b0b0b;
    --vantage-text:     #f2f2f2;
    --vantage-text-2:   #a8a8a8;
    --vantage-text-3:   #808080;
    --vantage-line:     rgba(255, 255, 255, 0.16);
    --vantage-line-2:   rgba(255, 255, 255, 0.10);
    --vantage-fill:     rgba(255, 255, 255, 0.07);
    --vantage-fill-2:   rgba(255, 255, 255, 0.13);
    --vantage-accent:   #ffffff;
    --vantage-brand-a:  #b18cff;
    --vantage-brand-b:  #e88b6c;
    --vantage-brand-c:  #f5b14c;
    --lms-success-ink: var(--lms-success-text);
    --lms-warning-ink: var(--lms-warning-text);
    --lms-danger-ink: var(--lms-danger-text);
}

/* The original brand palette: the same darks as the marketing site,
   with their blue-green cast. */
html[data-theme="vantage"] {
    --vantage-bg:       #0a1114;
    --vantage-surface:  #10181c;
    --vantage-text:     #fafafa;
    --vantage-text-2:   #96a2a8;
    --vantage-text-3:   #7d888e;
    --vantage-line:     rgba(255, 255, 255, 0.10);
    --vantage-line-2:   rgba(255, 255, 255, 0.06);
    --vantage-fill:     rgba(255, 255, 255, 0.05);
    --vantage-fill-2:   rgba(255, 255, 255, 0.10);
    --vantage-accent:   #fafafa;
    --vantage-brand-a:  #b18cff;
    --vantage-brand-b:  #e88b6c;
    --vantage-brand-c:  #f5b14c;
    --lms-success-ink: var(--lms-success-text);
    --lms-warning-ink: var(--lms-warning-text);
    --lms-danger-ink: var(--lms-danger-text);
}

/* Light re-states the :root values so it wins over the dark blocks
   above regardless of which class or attribute is present. */
html[data-theme="light"] {
    --vantage-bg:       #fafafa;
    --vantage-surface:  #ffffff;
    --vantage-text:     #101418;
    --vantage-text-2:   #5b656d;
    --vantage-text-3:   #6a737b;
    --vantage-line:     rgba(16, 20, 24, 0.12);
    --vantage-line-2:   rgba(16, 20, 24, 0.06);
    --vantage-fill:     rgba(16, 20, 24, 0.045);
    --vantage-fill-2:   rgba(16, 20, 24, 0.09);
    --vantage-accent:   #101418;
    --vantage-brand-a:  #7c5cd6;
    --vantage-brand-b:  #d2603d;
    --vantage-brand-c:  #d9971f;
    --lms-success-ink: #12703a;
    --lms-warning-ink: #8a4b04;
    --lms-danger-ink: #b91c1c;
}

/* ─── Pilot: mobile bottom navigation ──────────────────────── */

@media (max-width: 768px) {

    #lms-bottom-nav {
        background: color-mix(in srgb, var(--vantage-bg) 88%, transparent);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--vantage-line);
    }
    .lms-bn-tab {
        font-family: var(--vantage-font-body);
        color: var(--vantage-text-3);
        transition: color 0.12s ease;
    }
    .lms-bn-tab:active .lms-bn-tab-ico { transform: scale(0.94); }
    .lms-bn-tab-ico { transition: background-color 0.15s ease, transform 0.1s ease; }
    .lms-bn-tab.lms-bn-active { color: var(--vantage-text); }
    .lms-bn-tab.lms-bn-active .lms-bn-tab-label { font-weight: 500; }
    .lms-bn-tab.lms-bn-active .lms-bn-tab-ico {
        background: color-mix(in srgb, var(--vantage-accent) 18%, transparent);
        color: var(--vantage-accent);
    }

    /* Bar badges carry the accent so an unread count reads at a glance. */
    #lms-bottom-nav .lms-bn-badge {
        background: var(--vantage-accent);
        color: var(--vantage-bg);
        border: none;
        font-weight: 600;
    }

    #lms-bn-sheet {
        background: var(--vantage-bg);
        font-family: var(--vantage-font-body);
    }
    .lms-bn-head-name {
        font-family: var(--vantage-font-heading);
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--vantage-text);
    }
    .lms-bn-head-sub { color: var(--vantage-text-3); }
    .lms-bn-head .lms-avatar {
        background: var(--vantage-fill-2);
        color: var(--vantage-text);
    }
    .lms-bn-close {
        background: var(--vantage-fill);
        border-color: var(--vantage-line);
        color: var(--vantage-text-2);
    }

    .lms-bn-search input {
        -webkit-appearance: none;
        appearance: none;
        background: var(--vantage-fill);
        border-color: var(--vantage-line);
        color: var(--vantage-text);
        font-family: var(--vantage-font-body);
    }
    .lms-bn-search input::placeholder { color: var(--vantage-text-3); }
    .lms-bn-search input:focus { border-color: var(--vantage-accent); }

    .lms-bn-section {
        font-family: var(--vantage-font-heading);
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 0.01em;
        color: var(--vantage-text-3);
    }

    .lms-bn-list {
        background: var(--vantage-fill);
        border-color: var(--vantage-line-2);
    }
    .lms-bn-row {
        color: var(--vantage-text);
        border-top-color: var(--vantage-line-2);
        font-family: var(--vantage-font-body);
    }
    .lms-bn-row:active { background: var(--vantage-fill-2); }
    .lms-bn-row.lms-bn-row-active { background: var(--vantage-fill-2); }
    .lms-bn-row.lms-bn-row-active .lms-bn-row-label { color: var(--vantage-text); }
    /* One neutral ink for every icon. The three brand hues used to cycle per
       section as a scanning aid, but the palette carries meaning everywhere
       else in the application, and a grid of pastel chips read as decoration
       rather than as navigation. The section headings do that job now. */
    .lms-bn-row-ico { color: var(--vantage-text-3); }

    /* The screen you are on, marked the way the sidebar marks it. */
    .lms-bn-row.lms-bn-row-active {
        background: color-mix(in srgb, var(--vantage-accent) 13%, transparent);
    }
    .lms-bn-row.lms-bn-row-active .lms-bn-row-ico { color: var(--vantage-accent); }

    /* A queue with items in it is work waiting, so it carries the warning ink;
       an ordinary count is just a number and stays quiet. Amber rather than the
       brand accent, because the accent already means "Vantage" and "you are
       here", and the dashboard settled amber as "this needs attention". A wash
       and coloured text rather than a solid pill: at this size a filled badge
       shouts, and there can be a dozen of them on screen at once.
       Qualified with html.dark-mode as well, because lms.css carries a
       `html.dark-mode .lms-node-count` rule that otherwise outranks a plain
       two-class selector and repaints these back to grey. */
    .lms-bn-row-count.lms-bn-attn,
    html.dark-mode .lms-bn-row-count.lms-bn-attn {
        background: color-mix(in srgb, var(--lms-warning-ink) 16%, transparent);
        border-color: transparent;
        color: var(--lms-warning-ink);
        font-weight: 600;
    }
    .lms-bn-section {
        font-family: var(--vantage-font-heading);
        color: var(--vantage-text-3);
    }
    /* A section reporting the work inside it reads as attention, not a count. */
    .lms-bn-section-count,
    html.dark-mode .lms-bn-section-count {
        background: color-mix(in srgb, var(--lms-warning-text) 16%, transparent);
        border: 0;
        color: var(--lms-warning-text);
        font-weight: 600;
    }

    .lms-bn-row-count,
    .lms-bn-badge {
        background: var(--vantage-fill-2);
        color: var(--vantage-text);
        border: 1px solid var(--vantage-line-2);
    }

    /* ── Chat, Discord-grade mobile ergonomics ── */

    /* Rail rows become finger-height rounded pills with roomier type. */
    #cd-rail-search {
        height: 42px;
        font-size: 15px;
        border-radius: 12px;
    }
    .cd-row {
        min-height: 44px;
        padding: 8px 12px;
        margin: 1px 8px;
        border-radius: 12px;
        font-size: 15px;
    }
    .cd-row-lead { width: 24px; font-size: 15px; }
    .cd-row-badge {
        min-width: 22px;
        height: 20px;
        border-radius: 10px;
        font-size: 12px;
        line-height: 20px;
    }
    .cd-section-head { font-size: 12.5px; padding: 2px 20px; }
    .cd-list-empty { font-size: 14px; }

    /* Messages read at phone size: larger body and author type. */
    .ch-msg-body { font-size: 15px; line-height: 1.5; }
    .ch-msg-author { font-size: 15px; }
    .ch-mention { border-radius: 6px; padding: 0 5px; }

    /* Composer: a rounder island; 16px input stops iOS zooming the
       page every time the field focuses. */
    .cd-composer { border-radius: 18px; padding: 6px 8px; }
    .cd-composer textarea.cd-input { font-size: 16px; }
    .cd-icon-btn { font-size: 19px; padding: 6px; }

    /* Unread total on the conversation back arrow, Discord-style:
       while inside one thread you can still see others need you. */
    .lms-mobile-back { position: relative; padding: 4px 6px; }
    .lms-back-badge {
        position: absolute;
        top: -4px;
        right: -8px;
        min-width: 17px;
        height: 16px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--vantage-accent);
        color: var(--vantage-bg);
        font-size: 10.5px;
        font-weight: 600;
        line-height: 16px;
        text-align: center;
    }

    /* Reaction / composer emoji picker: phones render emoji glyphs larger
       than the desktop 10-column grid assumes, so let the grid size itself
       from its cells and give each one a finger-sized target. */
    .lms-emoji-picker {
        width: auto !important;
        max-width: calc(100vw - 24px);
        grid-template-columns: repeat(8, 1fr) !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    .lms-emoji-picker span {
        font-size: 23px !important;
        padding: 6px 5px !important;
    }
}

/* Respect reduced-motion preferences for the menu's entrance. */
@media (prefers-reduced-motion: reduce) {
    #lms-bn-sheet { animation: none; }
    .lms-bn-tab, .lms-bn-tab-ico { transition: none; }
}

/* ─── Application top bar (desktop) ────────────────────────── */
/* The chrome that makes the product read as an application rather
   than a web page: sidebar collapse, screen history, a breadcrumb
   that always says where you are, and the command palette. */
/* The bar is a sibling above .lms-layout, so the shell becomes a column
   and the layout takes the remaining height (min-height:0 keeps its own
   scroll containers working). */
#main {
    display: flex;
    flex-direction: column;
}
#main > .lms-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
.lms-topbar {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    padding: 0 10px 0 8px;
    background: var(--vantage-bg);
    border-bottom: 1px solid var(--vantage-line-2);
    font-family: var(--vantage-font-body);
}
.lms-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vantage-text-2);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.lms-tb-btn svg { width: 17px; height: 17px; }
.lms-tb-btn:hover:not(:disabled) { background: var(--vantage-fill-2); color: var(--vantage-text); }
.lms-tb-btn:disabled { opacity: 0.3; cursor: default; }
/* Workspace mark: the V icon alone carries the brand in the bar, so the
   sidebar below is pure navigation and the wordmark is never repeated. */
.lms-tb-mark {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 6px;
    background: url(/img-lms/vantage-icon.png) center / contain no-repeat;
}
html.dark-mode .lms-tb-mark { background-image: url(/img-lms/vantage-icon-white.png); }

.lms-tb-div {
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--vantage-line-2);
}
/* Menu strip: File / Edit / View / Go / Help. */
.lms-tb-menus {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: 4px;
}
.lms-menu-btn {
    height: 26px;
    padding: 0 9px;
    border: 0;
    border-radius: var(--vantage-r-sm);
    background: transparent;
    color: var(--vantage-text-2);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}
.lms-menu-btn:hover { background: var(--vantage-fill-2); color: var(--vantage-text); }
.lms-menu-btn.lms-menu-open {
    background: color-mix(in srgb, var(--vantage-accent) 16%, transparent);
    color: var(--vantage-text);
}
.lms-menu-pop,
.lms-gf-menu {
    position: fixed;
    z-index: 10002;
    min-width: 232px;
    max-width: 320px;
    padding: 5px;
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 11px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    animation: lms-pop-in 0.1s ease-out;
}
.lms-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--vantage-r-sm);
    background: transparent;
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.lms-menu-item > span:not(.lms-menu-check):not(.lms-menu-hint):not(.lms-menu-arrow) { flex: 1; }
/* A parent item says which way its list opens, and what is currently chosen
   inside it, so the menu answers "which theme am I on?" without opening. */
.lms-menu-arrow { color: var(--vantage-text-3); font-size: 15px; line-height: 1; flex: none; }
.lms-menu-hint  { color: var(--vantage-text-2); font-size: 12px; flex: none; }
.lms-menu-item[aria-expanded="true"] { background: var(--vantage-fill-2); }
.lms-menu-sub { animation-duration: 0.08s; }
.lms-menu-item:hover:not(:disabled) { background: var(--vantage-fill-2); }
.lms-menu-item:disabled { opacity: 0.4; cursor: default; }
.lms-menu-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--vantage-line-2);
}
.lms-cp-title {
    flex: 1;
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--vantage-text);
}


/* Control groups: each job (history, create and chat) sits behind its own
   hairline so the bar reads as a few clusters rather than a row of icons. */
.lms-tb-group {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: 7px;
    padding-left: 7px;
    border-left: 1px solid var(--vantage-line-2);
}
.lms-tb-btn { position: relative; }
.lms-tb-badge {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 15px;
    height: 14px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--vantage-accent);
    color: var(--vantage-bg);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
}

/* Search sits between the left groups and the right cluster. With four
   groups on the left there is no room to centre it in the window without
   colliding, so it takes the space that is actually free. */
.lms-tb-search {
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(360px, 30vw);
    height: 28px;
    padding: 0 8px 0 11px;
    border: 1px solid var(--vantage-line-2);
    border-radius: 9px;
    background: var(--vantage-fill);
    color: var(--vantage-text-3);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.lms-tb-search:hover {
    border-color: var(--vantage-line);
    background: var(--vantage-fill-2);
    color: var(--vantage-text-2);
}
.lms-tb-search-ico { display: inline-flex; }
.lms-tb-search-ico svg { width: 14px; height: 14px; }
.lms-tb-search-label { flex: 1; text-align: left; color: var(--vantage-text-2); }

/* Utility cluster pinned right, the way desktop apps park settings. */
.lms-tb-right {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: auto;
    padding-left: 8px;
}

/* Narrow windows: the field gives up its fixed width and the create and
   chat group folds away (both live in the File menu and the sidebar). */
@media (max-width: 1100px) {
    .lms-tb-search { width: auto; min-width: 128px; }
}
@media (max-width: 900px) {
    .lms-tb-group + .lms-tb-group { display: none; }
}
.lms-tb-kbd,
.lms-cp-kbd {
    padding: 1px 6px;
    border: 1px solid var(--vantage-line-2);
    border-radius: 5px;
    background: var(--vantage-bg);
    color: var(--vantage-text-3);
    font-family: var(--vantage-font-body);
    font-size: 10.5px;
    letter-spacing: 0.02em;
}

/* Collapsed sidebar: the panel and its drag handle fold away entirely.
   The toggle lives in the bar, so it is always reachable. */
.lms-layout.lms-sidebar-collapsed .lms-panel-left,
.lms-layout.lms-sidebar-collapsed .lms-resize-handle {
    display: none;
}

/* ─── Installed app: window controls overlay ────────────────
   In an installed window the browser normally draws its own title bar above
   the application, so the user gets two stacked bars where a desktop app has
   one. With window-controls-overlay (declared in manifest.webmanifest) the
   page is given the title bar strip and only the system minimise/maximise/
   close buttons stay on top, so the application bar becomes the title bar,
   the way VS Code and Cursor do it.

   The env() values describe the strip left free of those buttons: on Windows
   and Linux they sit on the right, on macOS on the left, so neither side can
   be assumed. Fallbacks keep this harmless anywhere the variables are absent. */
@media (display-mode: window-controls-overlay) {
    .lms-topbar {
        /* Never shorter than the bar's own rhythm, but grow if the platform
           reserves a taller strip, or the buttons would overhang the border. */
        height: max( 44px, env( titlebar-area-height, 44px ) );
        /* macOS keeps its traffic lights on the left, so start after them. */
        padding-left: calc( env( titlebar-area-x, 0px ) + 8px );
        /* Whatever is left over on the right is the window buttons. max()
           guards against a negative value if the variables are unavailable. */
        padding-right: max( 10px, calc( 100vw - env( titlebar-area-x, 0px )
                                              - env( titlebar-area-width, 100vw ) + 10px ) );
        /* The bar is now the title bar, so it has to move the window. */
        -webkit-app-region: drag;
        app-region: drag;
    }

    /* Anything clickable must opt out, or dragging swallows the click. Listed
       by element rather than by class so a control added later is covered. */
    .lms-topbar button,
    .lms-topbar input,
    .lms-topbar a,
    .lms-topbar select,
    .lms-topbar [role="button"],
    .lms-topbar [tabindex] {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}

/* A panel toggle reads as "on" while its panel is showing. */
.lms-tb-btn.lms-tb-btn-on,
.lms-topbar:not(.lms-tb-collapsed) #lms-tb-collapse {
    background: var(--vantage-fill-2);
    color: var(--vantage-text);
}

/* Right activity panel: docks the notifications list beside the content. */
.lms-right-panel {
    flex-shrink: 0;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--vantage-surface);
    border-left: 1px solid var(--vantage-line-2);
    overflow: hidden;
}
.lms-rp-head {
    flex-shrink: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--vantage-line-2);
}
.lms-rp-title {
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    font-size: 13.5px;
    color: var(--vantage-text);
}
/* The docked dropdown drops its popover geometry and fills the panel. */
#notif-dropdown.lms-rp-docked {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    flex: 1;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow-y: auto;
}
@media (max-width: 1100px) {
    .lms-right-panel { width: 280px; }
}
@media (max-width: 768px) {
    .lms-right-panel { display: none; }
}

/* ─── Command palette ──────────────────────────────────────── */
.lms-cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    background: color-mix(in srgb, #000 45%, transparent);
    animation: lms-fade-in 0.12s ease-out;
}
.lms-cp {
    width: min(560px, calc(100vw - 32px));
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: lms-pop-in 0.14s ease-out;
}
.lms-cp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vantage-line-2);
}
.lms-cp-head-ico { display: inline-flex; color: var(--vantage-text-3); }
.lms-cp-head-ico svg { width: 16px; height: 16px; }
.lms-cp-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 15px;
    outline: none;
}
.lms-cp-input::placeholder { color: var(--vantage-text-3); }
/* Beat the legacy global input:focus skin, which paints a blue ring in
   dark mode; that rule carries html.dark-mode, so match its specificity. */
.lms-cp-input:focus,
html.dark-mode .lms-cp-input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}
.lms-cp-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.lms-cp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--vantage-r-md);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--vantage-text);
}
.lms-cp-item.lms-cp-active { background: color-mix(in srgb, var(--vantage-accent) 14%, transparent); }
.lms-cp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--vantage-r-sm);
    background: var(--vantage-fill);
    color: var(--vantage-text-2);
}
.lms-cp-item.lms-cp-active .lms-cp-ico {
    background: color-mix(in srgb, var(--vantage-accent) 20%, transparent);
    color: var(--vantage-accent);
}
.lms-cp-ico svg { width: 15px; height: 15px; }
.lms-cp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-cp-section { flex-shrink: 0; font-size: 12px; color: var(--vantage-text-3); }
.lms-cp-empty { padding: 22px; text-align: center; font-size: 13px; color: var(--vantage-text-3); }

@media (prefers-reduced-motion: reduce) {
    .lms-cp-overlay, .lms-cp { animation: none; }
}

/* Phones own their own navigation (bottom bar plus a slim header); the app
   bar is desktop chrome and would only steal vertical space. */
@media (max-width: 768px) {
    .lms-topbar { display: none; }
}
/* The phone header is only built at phone widths, but it is appended to the
   body rather than the layout, so a resize up to a desktop width would
   otherwise leave it on screen. Scoped to a min-width so it never competes
   with the rule in mobile.css that shows it. */
@media (min-width: 769px) {
    #lms-mobile-header { display: none; }
}

/* ─── Surface: desktop sidebar ─────────────────────────────── */
/* The workspace header is gone: the top bar carries the Vantage mark,
   so repeating the logo here only cost vertical space. On phones there
   is no top bar, so the header stays as the drawer's identity. */
@media (min-width: 769px) {
    .lms-sidebar .lms-ws { display: none; }
    .lms-sidebar .lms-nav { padding-top: 8px; }
}
/* Token remap scoped to the sidebar subtree: every rule and inline
   style inside it that reads an --lms-* variable picks up the brand
   values without being rewritten. */
.lms-sidebar {
    --lms-bg-panel: var(--vantage-surface);
    --lms-border: var(--vantage-line);
    --lms-border-light: var(--vantage-line-2);
    --lms-text: var(--vantage-text);
    --lms-text-muted: var(--vantage-text-2);
    --lms-text-faint: var(--vantage-text-3);
    --lms-active-tint: var(--vantage-fill-2);
    font-family: var(--vantage-font-body);
}
.lms-sidebar .lms-node.lms-selected {
    background: color-mix(in srgb, var(--vantage-accent) 13%, transparent);
    color: var(--vantage-text);
}
.lms-sidebar .lms-node.lms-selected .lms-ico { color: var(--vantage-accent); }
.lms-sidebar .lms-node-count,
html.dark-mode .lms-sidebar .lms-node-count {
    background-color: var(--vantage-fill-2);
    color: var(--vantage-text);
}
.lms-sidebar .lms-acct-name { font-family: var(--vantage-font-heading); font-weight: 500; }

/* Pinned group, and the pin affordance on every row. */
.lms-sidebar .lms-pins { padding-bottom: 4px; }
.lms-sidebar .lms-node { position: relative; }
.lms-sidebar .lms-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vantage-text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.lms-sidebar .lms-node:hover .lms-pin { opacity: 0.75; }
.lms-sidebar .lms-pin:hover { opacity: 1; background: var(--vantage-fill-2); color: var(--vantage-text); }
.lms-sidebar .lms-pin.lms-pinned { opacity: 0.9; color: var(--vantage-accent); }
.lms-sidebar .lms-pin-ico { width: 13px; height: 13px; }
/* Touch has no hover to reveal it, so the pin stays visible there. */
@media (max-width: 768px) {
    .lms-sidebar .lms-pin { opacity: 0.5; width: 26px; height: 26px; }
}
/* A section reporting the work inside it reads as attention, not as a count,
   and attention is the warning ink throughout this application. It used to be
   the brand accent, which collides with the accent's other two jobs: marking
   the selected row, and simply meaning Vantage. */
.lms-sidebar .lms-section-header .lms-node-count,
html.dark-mode .lms-sidebar .lms-section-header .lms-node-count {
    background-color: color-mix(in srgb, var(--lms-warning-ink) 16%, transparent);
    color: var(--lms-warning-ink);
    font-weight: 600;
}

@media (max-width: 768px) {
    /* Toolbar buttons are 32px by design on a desktop, which is a fine mouse
       target and a poor thumb one. Declared here rather than in mobile.css
       because that file loads first and would lose the tie. */
    #lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button,
    .w2ui-toolbar .w2ui-tb-button,
    .lms-gf-bar .lms-gf-primary,
    .lms-gf-create .lms-gf-primary,
    .lms-gf-cols .lms-cols-btn { min-width: 44px; }
}

/* The account avatar still pointed at the legacy --lms-bg-alt/--lms-text pair,
   which never learned about the light theme: it painted a dark circle with dark
   text on a light page, so the initial was invisible. */
.lms-avatar {
    background: var(--vantage-fill-2);
    color: var(--vantage-text);
    border-color: var(--vantage-line);
}

/* ─── Editing ──────────────────────────────────────────────── */
/* Which cells can be edited was previously discoverable only by clicking one,
   and a click already opens the editor. A hairline on hover says "this one
   answers" without changing what a click does. */
#lms-panel-main .tabulator .tabulator-cell.tabulator-editable:hover {
    background: var(--vantage-fill);
    box-shadow: inset 0 0 0 1px var(--vantage-line);
    cursor: text;
}
/* A value the column itself will not accept never enters the change set; the
   cell goes back to what it held and says so for a moment. */
#lms-panel-main .tabulator .tabulator-cell.lms-cell-invalid {
    background: color-mix( in srgb, var(--lms-danger-ink) 18%, transparent ) !important;
    box-shadow: inset 2px 0 0 var(--lms-danger-ink);
}

/* ─── Review dialog ────────────────────────────────────────── */
/* What changed, in the words the screen uses, with what it was beside what it
   would become, and a way to put one of them back. */
.lms-rv-body { padding: 4px 2px 8px; }
.lms-rv-empty { color: var(--vantage-text-2); font-size: 13px; padding: 8px 2px; }
.lms-rv-rec + .lms-rv-rec { margin-top: 16px; }
.lms-rv-rec-head {
    font-family: var(--vantage-font-heading);
    font-size: 13px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--vantage-line);
}
.lms-rv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lms-rv-table td { padding: 8px 6px; border-bottom: 1px solid var(--vantage-line-2); vertical-align: baseline; }
.lms-rv-table tr:last-child td { border-bottom: 0; }
.lms-rv-field { color: var(--vantage-text-2); width: 34%; }
.lms-rv-from  { color: var(--vantage-text-2); text-align: right; text-decoration: line-through;
                text-decoration-color: var(--vantage-text-3); font-variant-numeric: tabular-nums; }
.lms-rv-arrow { color: var(--vantage-text-3); width: 18px; text-align: center; }
.lms-rv-to    { color: var(--vantage-text); font-variant-numeric: tabular-nums; }
.lms-rv-act   { width: 74px; text-align: right; }
.lms-rv-from em, .lms-rv-to em { color: var(--vantage-text-3); font-style: italic; }
.lms-rv-revert {
    padding: 3px 9px;
    border: 1px solid var(--vantage-line);
    border-radius: var(--vantage-r-sm);
    background: transparent;
    color: var(--vantage-text-2);
    font-family: var(--vantage-font-body);
    font-size: 11.5px;
    cursor: pointer;
}
.lms-rv-revert:hover { background: var(--vantage-fill); color: var(--vantage-text); }

/* ─── Status pills ─────────────────────────────────────────── */
/* One shape for every status in the application, coloured by what the status
   means rather than by where it appears, and from tokens so it follows the
   theme instead of being the same hex in all four. */
.lms-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 8px;
    border-radius: var(--vantage-r-sm);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.lms-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lms-pill-good    { color: var(--lms-success-ink); background: color-mix( in srgb, var(--lms-success-ink) 11%, transparent ); }
.lms-pill-warning { color: var(--lms-warning-ink); background: color-mix( in srgb, var(--lms-warning-ink) 11%, transparent ); }
.lms-pill-bad     { color: var(--lms-danger-ink);  background: color-mix( in srgb, var(--lms-danger-ink)  11%, transparent ); }
.lms-pill-neutral { color: var(--vantage-text-2);   background: var(--vantage-fill); }

/* ─── Accessibility scaffolding ────────────────────────────── */
/* Present to a screen reader, absent to everything else. Used for the heading
   that names each screen: every screen needs one, and almost none of them show
   one, because the sidebar and the window title already say where you are. */
.lms-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* The first thing a keyboard reaches. Twenty-three tab stops used to separate
   the top of the page from the data, every one of them a sidebar control. */
.lms-skip-link {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 200;
    padding: 9px 14px;
    border: 1px solid var(--vantage-line);
    border-radius: var(--vantage-r-sm);
    background: var(--vantage-surface);
    color: var(--vantage-text) !important;
    font-family: var(--vantage-font-body);
    font-size: 13px;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .12s ease-out;
}
.lms-skip-link:focus { transform: translateY(0); }

/* One focus style for the whole application, from the palette rather than the
   browser's default hairline. :where() keeps its specificity at zero so a
   component can still say something different. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--vantage-accent);
    outline-offset: 2px;
}
/* Inputs that had removed the outline entirely and replaced it with nothing. */
.lms-tabgrid-search:focus-visible,
.lms-gf-search input:focus-visible,
.lms-rp-input:focus-visible {
    outline: 2px solid var(--vantage-accent);
    outline-offset: 1px;
}

/* ─── Grid: loading and failure ────────────────────────────── */
/* Over the table rather than instead of it: the columns stay where they are,
   so nothing jumps when the rows arrive. */
.lms-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: color-mix( in srgb, var(--vantage-bg) 88%, transparent );
    backdrop-filter: blur(1px);
}
.lms-grid-overlay-text { font-size: 13px; color: var(--vantage-text-2); }
.lms-grid-overlay .lms-empty-title { font-family: var(--vantage-font-heading); font-size: 14px; }
.lms-grid-overlay .lms-empty-hint  { font-size: 12.5px; color: var(--vantage-text-2); max-width: 380px; }
.lms-grid-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--vantage-line);
    border-top-color: var(--vantage-accent);
    border-radius: 50%;
    animation: lms-spin .7s linear infinite;
}
@keyframes lms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lms-grid-spinner { animation-duration: 2.4s; }
}
.lms-grid-retry {
    margin-top: 2px;
    padding: 6px 14px;
    border: 1px solid var(--vantage-line);
    border-radius: var(--vantage-r-sm);
    background: var(--vantage-fill);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    cursor: pointer;
}
.lms-grid-retry:hover { background: var(--vantage-fill-2); }

/* ─── Record panel ─────────────────────────────────────────── */
/* Docked under the grid it belongs to. Flat and edge to edge, like the grid:
   no rounded card on a surface that deliberately has none. */
#lms-record-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--vantage-line);
    background: var(--vantage-surface);
}
#lms-record-panel[hidden] { display: none; }

/* The whole top edge is the resize handle, so it does not need finding. */
.lms-rp-grab { height: 5px; margin-top: -3px; cursor: ns-resize; flex-shrink: 0; }
.lms-rp-grab:hover { background: color-mix(in srgb, var(--vantage-accent) 35%, transparent); }

.lms-rp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 8px 0 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--vantage-line-2);
}
/* Title and subtitle share a baseline with each other; the pair as a whole is
   centred in the band, so the buttons opposite line up with it. */
.lms-rp-ident { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lms-rp-title { font-family: var(--vantage-font-heading); font-size: 14px; font-weight: 500;
                white-space: nowrap; }
.lms-rp-sub { font-size: 12px; color: var(--vantage-text-2); max-width: 420px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-rp-acts { margin-left: auto; display: flex; gap: 2px; }
.lms-rp-icon {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--vantage-r-sm); background: transparent;
    color: var(--vantage-text-2); font-size: 15px; cursor: pointer;
}
.lms-rp-icon:hover { background: var(--vantage-fill-2); color: var(--vantage-text); }

.lms-rp-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 14px 10px; }
/* Columns rather than one long list: a record with twenty fields is a wall in
   a single column, and the panel is wide and short by shape. */
.lms-rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 26px; }
.lms-rp-fact {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--vantage-line-2);
}
.lms-rp-k { font-size: 12.5px; color: var(--vantage-text-2); }
.lms-rp-v { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums;
            word-break: break-word; }

/* Editable fields. The affordance stays quiet until the pointer is on the
   field, so a panel opened to read is a page of values rather than a form. */
.lms-rp-v.is-editable { cursor: text; border-radius: var(--vantage-r-sm); padding: 1px 5px; margin: -1px -5px; }
.lms-rp-v.is-editable:hover { background: var(--vantage-fill); }
.lms-rp-v.is-editable:focus-visible { outline: 2px solid var(--vantage-accent); outline-offset: 1px; }
.lms-rp-empty { color: var(--vantage-text-3); font-style: italic; }
.lms-rp-v.is-editing { background: var(--vantage-fill); padding: 0; margin: 0; }
.lms-rp-input {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 6px;
    border: 1px solid var(--vantage-accent);
    border-radius: var(--vantage-r-sm);
    background: var(--vantage-bg);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    text-align: right;
}
.lms-rp-input[type="checkbox"] { width: auto; accent-color: var(--vantage-accent); }
select.lms-rp-input { text-align: left; }
/* Unsaved, said exactly as the grid says it on the row: the same amber wash and
   the same leading bar, so one record cannot look pending in one place and
   settled in the other. */
.lms-rp-fact.is-dirty {
    background: color-mix( in srgb, var(--vantage-brand-c) 15%, transparent );
    box-shadow: inset 2px 0 0 var(--vantage-brand-c);
    padding-left: 8px;
    margin-left: -8px;
}

/* Taskbar of parked records. Minimising keeps a record; this is where it is
   kept, so several can be held while another is read. Squared and flush, like
   the application bar it echoes: a parked record is a held window, not a
   filter, and the pill shape belongs to the filter chips above the grid. */
#lms-record-bar {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    height: 31px;
    overflow-x: auto;
    border-top: 1px solid var(--vantage-line);
    background: var(--vantage-bg);
}
#lms-record-bar[hidden] { display: none; }
.lms-rp-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    max-width: 260px;
    padding: 0 8px 0 12px;
    border: 0; border-right: 1px solid var(--vantage-line-2);
    background: transparent; color: var(--vantage-text-2);
    cursor: pointer; font-size: 12px; line-height: 1;
}
/* A hairline along the top edge marks it as held, in the same place a tab
   would carry it, and costs no space. */
.lms-rp-chip::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: color-mix( in srgb, var(--vantage-accent) 45%, transparent );
}
.lms-rp-chip:hover { background: var(--vantage-fill); color: var(--vantage-text); }
.lms-rp-chip:hover::before { background: var(--vantage-accent); }
.lms-rp-chip-t { font-weight: 500; white-space: nowrap; color: var(--vantage-text); }
.lms-rp-chip-s { color: var(--vantage-text-3); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
/* Held out of the way until wanted: a row of crosses along the foot of the
   screen is noise, and the record is discarded far less often than it is
   reopened. Focus brings it back for the keyboard. */
.lms-rp-chip-x {
    border: 0; background: transparent; color: var(--vantage-text-3);
    cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 4px;
    opacity: 0; transition: opacity .12s linear;
}
.lms-rp-chip:hover .lms-rp-chip-x,
.lms-rp-chip-x:focus-visible { opacity: 1; }
.lms-rp-chip-x:hover { color: var(--vantage-text); }

/* The row on show, and the rows being held on the taskbar. */
#lms-panel-main .tabulator .tabulator-row.lms-rp-selected {
    background: color-mix(in srgb, var(--vantage-accent) 13%, transparent);
}
#lms-panel-main .tabulator .tabulator-row.lms-rp-parked {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--vantage-accent) 55%, transparent);
}

/* Phones expand the row instead; the panel never mounts there. */
@media (max-width: 768px) {
    #lms-record-panel, #lms-record-bar { display: none !important; }
}

/* ─── Surface: dashboard ───────────────────────────────────── */
.dash-root {
    --lms-bg: var(--vantage-bg);
    --lms-bg-panel: var(--vantage-fill);
    --lms-border: var(--vantage-line-2);
    --lms-text: var(--vantage-text);
    --lms-text-muted: var(--vantage-text-2);
    --lms-text-label: var(--vantage-text-3);
    font-family: var(--vantage-font-body);
    color: var(--vantage-text);
    background: var(--vantage-bg);
    padding: 22px 24px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}
.dash-head { margin-bottom: 18px; }
.dash-title {
    margin: 0 0 3px;
    font-family: var(--vantage-font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.dash-sub { font-size: 12.5px; color: var(--vantage-text-2); }

/* Attention on the left at roughly three fifths, because it is the reason to
   open the page; standing figures sit beside it rather than above it. */
.dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
/* Grid and flex children default to min-width:auto, so a long reference would
   push a track wider than its container instead of wrapping inside it. */
.dash-col, .dash-card, .dash-at-body, .dash-bar-top span { min-width: 0; }
/* The pipeline reads left to right, so it runs under both columns rather than
   lengthening the taller one. Empty when no origination stage is permitted. */
.dash-col-wide { grid-column: 1 / -1; }
.dash-col-wide:empty { display: none; }

.dash-card {
    border: 1px solid var(--vantage-line);
    border-radius: var(--vantage-r-lg);
    background: transparent;
}
.dash-card-head { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px 8px; }
.dash-card-title { font-family: var(--vantage-font-heading); font-size: 13px; font-weight: 500; }
.dash-card-note { margin-left: auto; font-size: 11.5px; color: var(--vantage-text-3); }

/* Needs attention: a worklist, so rows rather than cards. */
.dash-at-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--vantage-line-2);
}
.dash-at-sev { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.dash-at-sev-1 { background: var(--lms-danger-text); }
.dash-at-sev-2 { background: var(--lms-warning-text); }
.dash-at-sev-3 { background: var(--vantage-text-3); }
.dash-at-body { flex: 1; }
.dash-at-title { display: block; font-size: 13px; }
.dash-at-sub { display: block; margin-top: 1px; font-size: 11.5px; color: var(--vantage-text-3); }
.dash-at-value {
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* This page carries more than one kind of percentage (loan to value and share
   drawn), so a bare % against a facility reference could be read as the other. */
.dash-at-unit { font-family: var(--vantage-font-body); font-weight: 400; font-size: 11px; color: var(--vantage-text-3); }
.dash-at-chev { color: var(--vantage-text-3); font-size: 15px; flex-shrink: 0; user-select: none; }
/* A reference never breaks across lines: half an id reads as a different loan. */
.dash-nowrap { white-space: nowrap; }

/* Standing figures. */
.dash-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid var(--vantage-line-2);
}
.dash-kv-k { font-size: 12px; color: var(--vantage-text-2); }
.dash-kv-v {
    font-family: var(--vantage-font-heading);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dash-kv-big { font-size: 21px; }

/* Facility utilisation: figures, not bars. Headroom leads because it is what
   limits new lending; the percentage supports it and only carries colour when
   a line is nearly gone. */
.dash-util-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 14px;
    border-top: 1px solid var(--vantage-line-2);
}
.dash-util-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.dash-util-ref { font-size: 12.5px; white-space: nowrap; }
.dash-util-funder {
    font-size: 12px;
    color: var(--vantage-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-util-left {
    font-size: 12.5px;
    color: var(--vantage-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dash-util-pct {
    min-width: 52px;
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.dash-util-pct.dash-util-warn { color: var(--lms-warning-ink); }
.dash-util-pct.dash-util-bad  { color: var(--lms-danger-ink); }

/* Utilisation and maturity read against a limit, so they stay as bars, but as
   a rank of thin ticks rather than a solid block. A solid bar of saturated red
   at 98% is the loudest thing on the page by area, and these are context, not
   the headline; the worklist above is. Track and fill share one 5px rhythm
   measured from the same left edge, so the ticks line up across the join and
   the bar reads as one scale that happens to be lit part of the way. */
.dash-bar-row { padding: 6px 14px; border-top: 1px solid var(--vantage-line-2); }
.dash-bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.dash-bar-top span:last-child { color: var(--vantage-text-3); font-variant-numeric: tabular-nums; text-align: right; }
.dash-bar-track {
    position: relative;
    /* Tall enough for the ticks to read as a rank rather than a dotted line,
       short enough that nine of them do not push the page into scrolling. */
    height: 10px;
    overflow: hidden;
    background: repeating-linear-gradient( to right,
        var(--vantage-line) 0 2px, transparent 2px 5px );
}
.dash-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* currentColor so the three states differ by one property. */
    color: var(--vantage-text-2);
    background: repeating-linear-gradient( to right,
        currentColor 0 2px, transparent 2px 5px );
}
/* Softened: the semantic inks at full strength were built for text and a 3px
   severity bar, not for a band this wide. */
.dash-bar-fill.dash-bar-warn { color: color-mix( in srgb, var(--lms-warning-text) 72%, transparent ); }
.dash-bar-fill.dash-bar-bad  { color: color-mix( in srgb, var(--lms-danger-text) 72%, transparent ); }

/* A clean book is the state this card spends most of its life in, so it
   confirms the checks ran rather than leaving a blank box that reads as a
   failure to load. */
.dash-clear { display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px; border-top: 1px solid var(--vantage-line-2); }
.dash-clear-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--lms-success-text);
    background: color-mix(in srgb, var(--lms-success-text) 14%, transparent);
}
.dash-clear-title { font-size: 13px; margin-bottom: 3px; }
.dash-clear-sub { font-size: 11.5px; color: var(--vantage-text-3); line-height: 1.55; }

@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-col-wide { grid-column: auto; }
}
@media (max-width: 640px) {
    .dash-root { padding: 18px 14px; }
    .dash-at-item, .dash-kv, .dash-bar-row, .dash-clear { padding-left: 12px; padding-right: 12px; }
    .dash-card-head { padding: 12px 13px 9px; }
    .dash-kv-big { font-size: 22px; }
}

/* ─── Geometry ─────────────────────────────────────────────────
   One radius scale, so corners read as a system rather than as
   whatever each component was written with. Measured before this
   existed: eight different radii on a single screen, most of them
   the legacy 6px. */
:root {
    --vantage-r-pill: 999px;   /* pills, chips, badges */
    --vantage-r-sm:   8px;     /* rows, small controls */
    --vantage-r-md:   9px;     /* buttons, inputs, fields */
    --vantage-r-lg:   12px;    /* cards and panels */
    --vantage-r-xl:   14px;    /* dialogs */
}
.lms-sidebar .lms-node { border-radius: var(--vantage-r-sm); }
.lms-sidebar .lms-pin  { border-radius: var(--vantage-r-sm); }
/* Status pills come from the grid formatters with their own corner; a pill
   is a pill. */
#lms-panel-main .tabulator .tabulator-cell span[style*="border-radius"] { border-radius: var(--vantage-r-pill) !important; }
#lms-panel-main .lms-gf-bar .lms-tabgrid-search { border-radius: var(--vantage-r-md); }

/* ─── Edges ────────────────────────────────────────────────────
   Borders where a surface genuinely changes, and nowhere else.
   Panels that sit against each other need a hairline or the eye
   cannot tell where one ends. */
.lms-layout > .lms-panel-left { border-right: 1px solid var(--vantage-line-2); }
#lms-panel-main .lms-tabgrid-footer {
    border-top: 1px solid var(--vantage-line-2);
    padding: 0 16px;
    height: 34px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--vantage-text-3);
    background: var(--vantage-bg);
}
/* The count lives in the filter bar above the grid. The footer is kept for any
   screen that has no such bar, and stands down where there is one, so the
   screen never states the same figure twice. */
#lms-panel-main .lms-tabgrid-footer[hidden] { display: none; }
/* The frozen actions column floats over scrolled content, so it needs an
   edge of its own or the rows appear to run underneath nothing. */
#lms-panel-main .tabulator .tabulator-cell.lms-row-act-col,
#lms-panel-main .tabulator .tabulator-col.lms-row-act-col {
    border-right: 1px solid var(--vantage-line-2) !important;
}
/* The cell inherits Tabulator's 12px/8px cell padding, leaving 20px of content
   box in a 40px column, but the button inside is 25px. It therefore overflowed
   and the browser drew Tabulator's text-overflow ellipsis after it, so every
   row on every grid rendered as a vertical ellipsis followed by a stray "...".
   The button is centred by its own flex box and needs no side padding. */
#lms-panel-main .tabulator .tabulator-cell.lms-row-act-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-overflow: clip;
}

/* ─── Surface: main content area ───────────────────────────── */
/* The w2ui main panel hosts every content screen: the data grids
   and their toolbars, notifications, risk score, audit log and the
   admin screens. lms.css is almost entirely token-driven, so this
   single scoped remap re-skins all of them; screens with their own
   scopes below (dashboard, chat, settings) simply re-assert the
   same values or refine them. --lms-accent is the app's ink
   primary (high-contrast buttons and active states), so it maps to
   the brand ink pair, not the lavender hue. The broker, funder and
   investor portal shells share the same token vocabulary, so they
   join this scope rather than repeating it. */
#lms-panel-main,
.brk-shell,
.fnd-shell,
.inv-shell {
    --lms-font: var(--vantage-font-body);
    --lms-bg: var(--vantage-bg);
    --lms-bg-panel: var(--vantage-surface);
    --lms-bg-alt: var(--vantage-fill);
    --lms-border: var(--vantage-line);
    --lms-border-light: var(--vantage-line-2);
    --lms-text: var(--vantage-text);
    --lms-text-dim: color-mix(in srgb, var(--vantage-text) 86%, var(--vantage-bg));
    --lms-text-muted: var(--vantage-text-2);
    --lms-text-faint: var(--vantage-text-3);
    --lms-text-label: var(--vantage-text-3);
    --lms-active-tint: var(--vantage-fill-2);
    --lms-accent: var(--vantage-text);
    --lms-accent-text: var(--vantage-bg);
    --lms-accent-warm: var(--vantage-brand-b);
    /* Semantic row/cell tints: same meanings, but as quiet washes mixed
       into the brand background instead of the old saturated fills. The
       hues come from the semantic text tokens, which stay unmapped;
       "info" (active pipeline states) moves from legacy blue to the
       brand accent. */
    --lms-info-bg: color-mix(in srgb, var(--vantage-accent) 16%, var(--vantage-bg));
    --lms-success-bg: color-mix(in srgb, var(--lms-success-text) 14%, var(--vantage-bg));
    --lms-warning-bg: color-mix(in srgb, var(--lms-warning-text) 16%, var(--vantage-bg));
    --lms-warning-bg-2: color-mix(in srgb, var(--lms-warning-text) 11%, var(--vantage-bg));
    --lms-danger-bg: color-mix(in srgb, var(--lms-danger-text) 14%, var(--vantage-bg));
    --lms-highlight-bg: color-mix(in srgb, var(--vantage-brand-c) 26%, var(--vantage-bg));
    --lms-disabled-bg: var(--vantage-fill);
    background: var(--vantage-bg);
    font-family: var(--vantage-font-body);
}

/* Text selection and native control accents pick up the brand hue
   everywhere instead of the browser's default blue. */
::selection { background: color-mix(in srgb, var(--vantage-accent) 35%, transparent); }
#lms-panel-main input[type="checkbox"],
#lms-panel-main input[type="radio"],
.lms-popup-overlay input[type="checkbox"],
.lms-popup-overlay input[type="radio"],
.lms-modal-overlay input[type="checkbox"],
.lms-modal-overlay input[type="radio"],
#cd-root input[type="checkbox"] {
    accent-color: var(--vantage-accent);
}

/* Tabulator paints the cell being edited with its own blue border. */
#lms-panel-main .tabulator .tabulator-cell.tabulator-editing {
    border: 1px solid var(--vantage-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 18%, transparent);
}
#lms-panel-main .tabulator .tabulator-cell.tabulator-editing input,
#lms-panel-main .tabulator .tabulator-cell.tabulator-editing select {
    background: var(--vantage-surface);
    color: var(--vantage-text);
    border: none;
    outline: none;
    font-family: var(--vantage-font-body);
}

/* Screen titles inside the content area take the heading face. */
#lms-panel-main h2,
#lms-panel-main h3 {
    font-family: var(--vantage-font-heading);
    letter-spacing: -0.01em;
}

/* ── Grid toolbar: quiet ghost buttons, one high-contrast primary ── */
/* The bordered-box-per-button treatment predates the redesign; in the
   brand language actions are ghosts that reveal a fill on hover, and
   only the screen's creation action carries ink. Primary actions are
   recognised by their icons (plus / bolt) so every grid screen gets
   the treatment without per-screen wiring. */
/* The bars share a rhythm: application bar and grid bar at 44, the column
   header a step below at 40. Measured before this: 44, 49 and 47. */
.lms-gf-bar { min-height: 44px; box-sizing: border-box; padding-top: 7px; padding-bottom: 7px; }
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-col-title { line-height: 40px; }
#lms-panel-main .tabulator .tabulator-header { min-height: 40px; }

/* A header and its own cells share a left edge. They differed by 4px, which
   came from the header's content wrapper padding rather than the title, so
   that wrapper gives up its inset and the title carries the whole 12px. */
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 0; }
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-col-title { padding-left: 12px; }
#lms-panel-main .tabulator .tabulator-cell { padding-left: 12px; }
#lms-panel-main .tabulator .tabulator-col.lms-col-right .tabulator-col-title { padding-left: 25px; padding-right: 12px; }
#lms-panel-main .tabulator .tabulator-header .tabulator-col { height: 40px; }
#lms-panel-main .lms-tabgrid-toolbar {
    padding: 10px 16px;
    background: var(--vantage-bg);
    border-bottom: 1px solid var(--vantage-line-2);
}
/* The right-aligned Columns/search cluster yields width before the
   row wraps: the search field shrinks to a floor first, so busy
   toolbars stay on one line at normal desktop widths. */
#lms-panel-main .lms-tabgrid-toolbar > div:last-child {
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px !important;
}
#lms-panel-main .lms-tabgrid-search {
    flex: 0 1 170px;
    width: 170px;
    min-width: 96px;
}
/* One row, always: wrapping never engages flex-shrink (an item just
   drops to the next line at its full basis), so the toolbar forbids
   wrap and lets the search field compress instead. If a viewport is
   narrower than the buttons' floor, the row scrolls like mobile. */
#lms-panel-main .lms-tabgrid-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    height: 32px;
    padding: 0 10px;
    margin: 0 1px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--vantage-text-2);
    transition: background-color 0.12s ease, color 0.12s ease;
}
/* Delete reveals its nature on hover rather than shouting all day. */
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-times):hover:not(.disabled):not([disabled]) {
    background: color-mix(in srgb, var(--lms-danger-text) 10%, transparent);
    color: var(--lms-danger-text);
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-times):hover:not(.disabled):not([disabled]) i {
    color: var(--lms-danger-text);
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:hover:not(.disabled):not([disabled]) {
    background: var(--vantage-fill-2);
    color: var(--vantage-text);
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button i { color: var(--vantage-text-3); }
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:hover:not(.disabled):not([disabled]) i { color: var(--vantage-text); }
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-plus),
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-bolt) {
    background: var(--vantage-text);
    color: var(--vantage-bg);
    font-weight: 600;
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-plus) i,
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-bolt) i { color: var(--vantage-bg); }
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-plus):hover:not(.disabled):not([disabled]),
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-bolt):hover:not(.disabled):not([disabled]) {
    background: var(--vantage-text);
    color: var(--vantage-bg);
    opacity: 0.88;
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-plus):hover:not(.disabled):not([disabled]) i,
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button:has(i.fa-bolt):hover:not(.disabled):not([disabled]) i { color: var(--vantage-bg); }
/* One ink button per toolbar: when a bolt quick-action is present it
   is the primary, and the plus action steps down to a bordered
   secondary. */
#lms-panel-main .lms-tabgrid-toolbar:has(i.fa-bolt) button.w2ui-tb-button:has(i.fa-plus),
#lms-panel-main .lms-tabgrid-toolbar:has(i.fa-bolt) button.w2ui-tb-button:has(i.fa-plus):hover:not(.disabled):not([disabled]) {
    background: transparent;
    border-color: var(--vantage-line);
    color: var(--vantage-text);
    font-weight: 500;
    opacity: 1;
}
#lms-panel-main .lms-tabgrid-toolbar:has(i.fa-bolt) button.w2ui-tb-button:has(i.fa-plus) i { color: var(--vantage-text-2); }
#lms-panel-main .lms-tabgrid-toolbar:has(i.fa-bolt) button.w2ui-tb-button:has(i.fa-plus):hover:not(.disabled):not([disabled]) {
    background: var(--vantage-fill);
}
/* Ghost buttons group by proximity; separator fences between every
   pair just add clutter, so they go. */
#lms-panel-main .lms-tabgrid-toolbar .w2ui-tb-line { display: none; }
/* A disabled action fades almost entirely out of the row instead of
   sitting there as grey furniture. */
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button.disabled,
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button[disabled] {
    opacity: 0.3;
}
/* "Show changes" while active: danger stays, but as the brand's quiet
   tinted treatment rather than the old solid outline. */
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button.lms-tb-active,
html.dark-mode #lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button.lms-tb-active {
    background: color-mix(in srgb, var(--lms-danger-text) 12%, transparent);
    color: var(--lms-danger-text);
    outline: none;
    border-color: color-mix(in srgb, var(--lms-danger-text) 30%, transparent);
}
#lms-panel-main .lms-tabgrid-toolbar button.w2ui-tb-button.lms-tb-active i { color: var(--lms-danger-text); }
#lms-panel-main .lms-tabgrid-search {
    height: 32px;
    border: 1px solid var(--vantage-line);
    border-radius: 9px;
    padding: 0 12px;
    font-size: 13px;
    background: var(--vantage-fill);
    color: var(--vantage-text);
}
#lms-panel-main .lms-tabgrid-search:focus {
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 22%, transparent);
}

/* ── Grid column headers: flat band, no vertical rules ───────────── */
/* Clear only the vertical rules between columns. Using the border-color
   shorthand here also wiped the header's own bottom edge, and because the
   dark-mode selector outranks the rule that restored it, the line survived
   in light mode only. */
#lms-panel-main .tabulator .tabulator-header,
#lms-panel-main .tabulator .tabulator-header .tabulator-col,
html.dark-mode #lms-panel-main .tabulator .tabulator-header,
html.dark-mode #lms-panel-main .tabulator .tabulator-header .tabulator-col {
    background-color: var(--vantage-bg) !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}
/* The header sits against the rows, so it keeps a real edge in every theme. */
#lms-panel-main .tabulator .tabulator-header,
html.dark-mode #lms-panel-main .tabulator .tabulator-header {
    border-bottom: 1px solid var(--vantage-line) !important;
}
#lms-panel-main .tabulator .tabulator-header .tabulator-col,
html.dark-mode #lms-panel-main .tabulator .tabulator-header .tabulator-col {
    border-bottom-color: transparent !important;
}
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-col-title,
html.dark-mode #lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--vantage-text-2) !important;
}
/* ── Filtering: a bar above the grid, not inputs in the header ────
   The header carries titles only. The bar holds the quick search, a
   chip per active filter, and a button to add one, so what is
   narrowing the view is always visible. */
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
    display: none;
}
.lms-gf-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 7px keeps the bar at 44, matching the application bar above it. */
    padding: 7px 16px;
    border-bottom: 1px solid var(--vantage-line-2);
    background: var(--vantage-bg);
    overflow-x: auto;
    scrollbar-width: none;
}
.lms-gf-bar::-webkit-scrollbar { display: none; }

/* The quick search, moved out of the toolbar to sit with the filters. */
.lms-gf-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* The toolbar's own search icon, floated inside the field. */
.lms-gf-search > i {
    position: absolute;
    left: 10px;
    display: inline-flex;
    color: var(--vantage-text-3);
    pointer-events: none;
}
.lms-gf-search > i svg { width: 14px; height: 14px; }
/* ID-scoped so it outranks the toolbar rule the field carried with it. */
#lms-panel-main .lms-gf-search .lms-tabgrid-search {
    height: 30px;
    width: 230px;
    padding: 0 10px 0 31px;
    border-radius: 9px;
}

.lms-gf-spacer { flex: 1; min-width: 8px; }
.lms-gf-count { font-size: 12.5px; color: var(--vantage-text-3); white-space: nowrap; }
.lms-gf-create { display: flex; align-items: center; gap: 6px; }
.lms-gf-cols { display: flex; align-items: center; }
/* Column visibility, moved out of the old action row. */
#lms-panel-main .lms-gf-bar button.lms-gf-colsbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--vantage-text-2);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}
#lms-panel-main .lms-gf-bar button.lms-gf-colsbtn:hover {
    background: var(--vantage-fill-2);
    color: var(--vantage-text);
}
@media (max-width: 768px) {
    /* Icon only on a phone, where the label is not worth the width. */
    #lms-panel-main .lms-gf-bar button.lms-gf-colsbtn { padding: 0 9px; font-size: 0; gap: 0; }
    #lms-panel-main .lms-gf-bar button.lms-gf-colsbtn i { font-size: 13px; }
}
/* The screen's creation action, raised out of the old toolbar row. */
.lms-gf-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: var(--vantage-text);
    color: var(--vantage-bg);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.12s ease;
}
.lms-gf-primary:hover { opacity: 0.9; }
.lms-gf-primary i { color: var(--vantage-bg); }
.lms-gf-primary i svg { width: 15px; height: 15px; }

.lms-gf-chips { display: flex; align-items: center; gap: 6px; }
.lms-gf-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vantage-accent) 15%, transparent);
    color: var(--vantage-text);
    white-space: nowrap;
}
.lms-gf-chip.lms-gf-editing {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vantage-accent) 45%, transparent);
}
.lms-gf-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 4px 0 11px;
    border: 0;
    border-radius: 999px 0 0 999px;
    background: transparent;
    color: inherit;
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    cursor: pointer;
}
.lms-gf-chip-main b { font-weight: 500; color: var(--vantage-text-2); }
.lms-gf-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 100%;
    padding: 0 7px 0 3px;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: transparent;
    color: var(--vantage-text-2);
    cursor: pointer;
}
.lms-gf-chip-x svg { width: 11px; height: 11px; }
.lms-gf-chip-x:hover { color: var(--vantage-text); }

.lms-gf-add {
    flex-shrink: 0;
    height: 28px;
    padding: 0 12px;
    border: 1px dashed var(--vantage-line);
    border-radius: 999px;
    background: transparent;
    color: var(--vantage-text-3);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.lms-gf-add:hover { color: var(--vantage-text-2); border-color: var(--vantage-text-3); }

/* ── Floating action bar ─────────────────────────────────────────
   Contextual actions sit over the rows they act on so the bar above
   never has to move; one segment per thing that is true, so a
   selection and unsaved edits can coexist. */
.lms-fab {
    position: absolute;
    left: 50%;
    /* Rides above the record panel when one is open, so the bar that acts on a
       record never covers the record it is acting on. The panel sets the
       variable on the grid wrapper as it opens, resizes and closes. */
    bottom: calc( 18px + var( --lms-rp-h, 0px ) );
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 7px 9px 7px 14px;
    border-radius: 999px;
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
    font-size: 12.5px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    animation: lms-pop-in 0.12s ease-out;
}
.lms-fab::-webkit-scrollbar { display: none; }
.lms-fab-seg { display: flex; align-items: center; gap: 6px; }
.lms-fab-sep { width: 1px; height: 20px; background: var(--vantage-line-2); flex-shrink: 0; }
.lms-fab-lead {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 2px;
    font-weight: 500;
    color: var(--vantage-text);
}
.lms-fab-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lms-fab-dot-sel { background: var(--vantage-accent); }
.lms-fab-dot-dirty { background: var(--vantage-brand-c); }
.lms-fab-act {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vantage-text-2);
    font-family: var(--vantage-font-body);
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.lms-fab-act:hover { background: var(--vantage-fill-2); color: var(--vantage-text); }
.lms-fab-danger:hover { background: color-mix(in srgb, var(--lms-danger-text) 12%, transparent); color: var(--lms-danger-text); }
.lms-fab-save {
    background: var(--vantage-brand-c);
    color: #1b1b1b;
    font-weight: 600;
}
.lms-fab-save:hover { background: var(--vantage-brand-c); color: #1b1b1b; opacity: 0.9; }

/* Pending edits are visible in the grid, not only in the bar. */
#lms-panel-main .tabulator .tabulator-cell.lms-cell-dirty {
    background: color-mix(in srgb, var(--vantage-brand-c) 15%, transparent) !important;
    box-shadow: inset 2px 0 0 var(--vantage-brand-c);
}

@media (prefers-reduced-motion: reduce) { .lms-fab { animation: none; } }
@media (max-width: 768px) {
    .lms-fab {
        left: 10px;
        right: 10px;
        transform: none;
        max-width: none;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    }
}

.lms-gf-pop-label {
    margin-bottom: 7px;
    font-size: 11.5px;
    color: var(--vantage-text-3);
}
.lms-gf-menu { min-width: 190px; max-height: 46vh; overflow-y: auto; z-index: 10001; }

.lms-hf-pop {
    position: fixed;
    z-index: 10000;
    min-width: 208px;
    padding: 10px;
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30);
    animation: lms-pop-in 0.1s ease-out;
}
.lms-hf-pop .tabulator-header-filter {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
@media (prefers-reduced-motion: reduce) {
    .lms-hf-pop { animation: none; }
}
@media (max-width: 768px) {
    .lms-gf-bar { padding: 8px 12px; }
    #lms-panel-main .lms-gf-search .lms-tabgrid-search { width: 150px; }
}

#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input,
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select,
.lms-hf-pop .tabulator-header-filter input,
.lms-hf-pop .tabulator-header-filter select {
    background-color: var(--vantage-fill);
    border: 1px solid transparent;
    border-radius: 7px;
    height: 26px;
    padding: 0 8px;
    font-size: 12px;
    font-family: var(--vantage-font-body);
    color: var(--vantage-text);
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:hover,
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:hover {
    border-color: var(--vantage-line);
}
.lms-hf-pop .tabulator-header-filter input,
.lms-hf-pop .tabulator-header-filter select {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    border-color: var(--vantage-line);
}
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus,
#lms-panel-main .tabulator .tabulator-header .tabulator-col .tabulator-header-filter select:focus,
.lms-hf-pop .tabulator-header-filter input:focus,
.lms-hf-pop .tabulator-header-filter select:focus,
html.dark-mode .lms-hf-pop .tabulator-header-filter input:focus {
    background-color: var(--vantage-surface);
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 18%, transparent);
}
#lms-panel-main .tabulator .tabulator-col-sorter .tabulator-arrow { opacity: 0.7; }

/* A header shares an edge with its values. Tabulator pads 25px on the right
   of every title for the sort arrow, which leaves a right-aligned header
   short of its figures, so those columns reclaim the space and take the
   arrow on the left instead. */
#lms-panel-main .tabulator .tabulator-col.lms-col-right .tabulator-col-title {
    padding-right: 8px;
    padding-left: 25px;
}
#lms-panel-main .tabulator .tabulator-col.lms-col-right .tabulator-col-sorter {
    left: 4px;
    right: auto;
}
/* The header's own content wrapper pads the right edge as well, which would
   leave the title a few pixels short of the cell text below it. */
#lms-panel-main .tabulator .tabulator-col.lms-col-right .tabulator-col-content {
    padding-right: 0;
}
#lms-panel-main .tabulator .tabulator-col.lms-col-center .tabulator-col-title {
    padding-left: 25px;
}

/* The old dark theme hardcoded a blue focus ring; branded scopes
   focus with the accent instead, matching the auth pages. */
html.dark-mode #lms-panel-main input:focus,
html.dark-mode #lms-panel-main select:focus,
html.dark-mode #lms-panel-main textarea:focus,
html.dark-mode #cd-root input:focus,
html.dark-mode #cd-root textarea:focus {
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 22%, transparent);
}

/* ─── Motion ───────────────────────────────────────────────── */
/* Floating layers arrive instead of popping: a fast fade for the
   dimmed backdrop and a fade-and-settle for the panel itself.
   Durations stay under 150ms so the app never feels slowed down. */
@keyframes lms-fade-in { from { opacity: 0; } }
@keyframes lms-pop-in {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
}
.lms-popup-overlay,
.lms-modal-overlay {
    animation: lms-fade-in 0.12s ease-out;
}
.lms-popup-overlay .lms-popup-box,
.lms-modal-overlay > div {
    animation: lms-pop-in 0.14s ease-out;
}
#notif-dropdown,
.lms-emoji-picker {
    animation: lms-pop-in 0.12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .lms-popup-overlay,
    .lms-modal-overlay,
    .lms-popup-overlay .lms-popup-box,
    .lms-modal-overlay > div,
    #notif-dropdown,
    .lms-emoji-picker { animation: none; }
}

/* ─── Dashboard click-through tiles ────────────────────────── */
.dash-root .dash-nav { cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; }
.dash-root .dash-nav:hover { border-color: var(--vantage-accent); }
.dash-root .dash-nav:focus-visible {
    outline: none;
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 20%, transparent);
}
.dash-root .dash-at-item.dash-nav:hover {
    border-top-color: var(--vantage-line-2);
    background: var(--vantage-fill-2);
}

/* Origination pipeline strip: stage tiles joined by quiet chevrons. */
.dash-pipe { display: flex; flex-direction: column; }
.dash-pipe-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--vantage-line-2);
    cursor: pointer;
}
.dash-pipe-row:last-child { border-bottom: 0; }
.dash-pipe-row:hover { background: var(--vantage-fill); }
.dash-pipe-label { font-size: 12.5px; color: var(--vantage-text-2); }
.dash-pipe-count { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .dash-pipe { -webkit-overflow-scrolling: touch; }
}

/* ─── Empty and loading states ─────────────────────────────── */
/* Shared quiet empty state: a muted stroke icon on a tinted chip,
   a short title, and a fainter hint. Used by the grid placeholder,
   the notifications dropdown, and the portal empties. */
.lms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 34px 16px;
    text-align: center;
    font-family: var(--vantage-font-body);
    white-space: normal;
}
.lms-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 12px;
    background: var(--vantage-fill);
    color: var(--vantage-text-3);
}
.lms-empty-ico svg { width: 22px; height: 22px; }
.lms-empty-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vantage-text-2);
}
.lms-empty-hint {
    font-size: 12.5px;
    color: var(--vantage-text-3);
}
/* Tabulator centres the placeholder itself; flatten its default look. */
#lms-panel-main .tabulator .tabulator-placeholder .tabulator-placeholder-contents,
html.dark-mode #lms-panel-main .tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: inherit;
    color: inherit;
    white-space: normal;
}

/* Grid loading overlay: quiet card with a brand spinner. */
#lms-panel-main .tabulator .tabulator-alert {
    background: color-mix(in srgb, var(--vantage-bg) 55%, transparent);
}
#lms-panel-main .tabulator .tabulator-alert .tabulator-alert-msg {
    background: var(--vantage-surface);
    border: 1px solid var(--vantage-line);
    border-radius: 12px;
    padding: 14px 22px;
    font-family: var(--vantage-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--vantage-text-2);
}
#lms-panel-main .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 9px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid var(--vantage-fill-2);
    border-top-color: var(--vantage-accent);
    animation: lms-spin 0.7s linear infinite;
}
@keyframes lms-spin { to { transform: rotate(360deg); } }

/* Portal loading and empty lines take the same quiet voice. */
html .brk-shell .brk-loading::before,
html .fnd-shell .fnd-loading::before,
html .inv-shell .inv-loading::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 9px;
    vertical-align: -2px;
    border-radius: 50%;
    border: 2px solid var(--vantage-fill-2);
    border-top-color: var(--vantage-accent);
    animation: lms-spin 0.7s linear infinite;
}
html .brk-shell .brk-empty,
html .fnd-shell .fnd-empty,
html .inv-shell .inv-empty {
    display: block;
    padding: 22px;
    border: 1px dashed var(--vantage-line);
    border-radius: 12px;
    text-align: center;
    color: var(--vantage-text-3);
    background: var(--vantage-fill);
}

@media (prefers-reduced-motion: reduce) {
    #lms-panel-main .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg::before,
    html .brk-shell .brk-loading::before,
    html .fnd-shell .fnd-loading::before,
    html .inv-shell .inv-loading::before { animation: none; }
}

/* ─── Brand icon bridge ────────────────────────────────────── */
/* brand_icons.js swaps Font Awesome glyphs for inline stroke SVGs;
   the <i> element and its fa-* name class survive, so existing
   selectors and sizing contexts keep working. The svg tracks the
   local font-size and colour exactly as the font glyph did. */
i.lms-svg-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
}
i.lms-svg-ico > svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}
/* Font Awesome's .fa-*::before content rules still target the kept
   name class; without the icon font-family they would render as a
   stray fallback glyph beside the svg. */
i.lms-svg-ico::before { content: none !important; }

/* ─── Surface: broker, funder and investor portals ─────────── */
/* The portals inject their own <style> at runtime, which lands
   after this sheet in the cascade; the `html` prefix gives these
   overrides the extra specificity they need to win. Token remaps
   come from the shared scope above. */
html .brk-shell,
html .fnd-shell,
html .inv-shell {
    font-family: var(--vantage-font-body);
}
html .brk-shell .brk-title,
html .fnd-shell .fnd-title,
html .inv-shell .inv-title {
    font-family: var(--vantage-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}
html .brk-shell .brk-section-title,
html .fnd-shell .fnd-section-title,
html .fnd-shell .fnd-lender-title,
html .inv-shell .inv-section-title {
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
}
html .brk-shell .brk-platform,
html .fnd-shell .fnd-platform,
html .inv-shell .inv-platform {
    font-family: var(--vantage-font-heading);
    font-weight: 500;
}

/* Active nav takes the app's accent wash instead of a grey block. */
html .brk-shell .brk-nav-item.active,
html .fnd-shell .fnd-nav-item.active,
html .inv-shell .inv-nav-item.active {
    background: color-mix(in srgb, var(--vantage-accent) 13%, transparent);
    color: var(--vantage-text);
}
html .brk-shell .brk-nav-item.active i,
html .fnd-shell .fnd-nav-item.active i,
html .inv-shell .inv-nav-item.active i { color: var(--vantage-accent); }
html .brk-shell .brk-nav-item:hover:not(.active),
html .fnd-shell .fnd-nav-item:hover:not(.active),
html .inv-shell .inv-nav-item:hover:not(.active) {
    background: var(--vantage-fill);
}

/* KPI cards match the main dashboard: borders over shadows, Satoshi
   numerals in ink rather than a hue. */
html .brk-shell .brk-kpi-card,
html .fnd-shell .fnd-kpi-card,
html .inv-shell .inv-kpi-card {
    box-shadow: none;
    border-radius: 12px;
    border-color: var(--vantage-line-2);
    background: var(--vantage-fill);
}
html .brk-shell .brk-kpi-value,
html .fnd-shell .fnd-kpi-value,
html .inv-shell .inv-kpi-value {
    font-family: var(--vantage-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--vantage-text);
}

/* Tables take the main grids' flat header band. */
html .brk-shell .brk-table th,
html .fnd-shell .fnd-table th,
html .fnd-shell .fnd-subtable th,
html .inv-shell .inv-table th {
    background: transparent;
    border-bottom: 1px solid var(--vantage-line);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vantage-text-3);
}
html .brk-shell .brk-table,
html .fnd-shell .fnd-table,
html .inv-shell .inv-table {
    background: var(--vantage-fill);
    border-radius: 12px;
}
html .brk-shell .brk-table td,
html .fnd-shell .fnd-table td,
html .inv-shell .inv-table td { border-top: 1px solid var(--vantage-line-2); }

/* Pills: quiet weight, sentence-friendly. */
html .brk-shell .brk-stage,
html .brk-shell .brk-badge,
html .fnd-shell .fnd-status,
html .fnd-shell .fnd-covenant {
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
}

/* ─── Surface: overlays, dialogs and floating menus ────────── */
/* Everything that floats above the page from document.body: popup
   record windows and the alert/confirm/prompt dialogs built on them
   (.lms-popup-overlay), the notifications dropdown, the chat modals
   (.lms-modal-overlay, assigned in channels.js / dm.js), and the
   vendor column and context menus. */
.lms-popup-overlay,
.lms-modal-overlay,
#notif-dropdown,
.tabulator-menu,
.w2ui-menu,
.w2ui-overlay {
    --lms-bg: var(--vantage-bg);
    --lms-bg-panel: var(--vantage-surface);
    --lms-bg-alt: var(--vantage-fill);
    --lms-border: var(--vantage-line);
    --lms-border-light: var(--vantage-line-2);
    --lms-text: var(--vantage-text);
    --lms-text-dim: color-mix(in srgb, var(--vantage-text) 86%, var(--vantage-bg));
    --lms-text-muted: var(--vantage-text-2);
    --lms-text-faint: var(--vantage-text-3);
    --lms-text-label: var(--vantage-text-3);
    --lms-active-tint: var(--vantage-fill-2);
    --lms-accent: var(--vantage-text);
    --lms-accent-text: var(--vantage-bg);
    font-family: var(--vantage-font-body);
}
/* Dialogs and record popups carried the pre-brand geometry: 6px corners,
   tinted header and footer bands and small bordered buttons. They now match
   the rest of the app, borders over shadows and one ink primary. */
.lms-popup-box {
    border-radius: 14px;
    border-color: var(--vantage-line);
    background: var(--vantage-surface);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
}
.lms-popup-title {
    padding: 14px 18px;
    background: transparent;
    border-bottom: 1px solid var(--vantage-line-2);
    border-radius: 0;
    font-family: var(--vantage-font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.lms-popup-close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: -6px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--vantage-text-3);
    transition: background-color 0.12s ease, color 0.12s ease;
}
.lms-popup-close-x:hover { background: var(--vantage-fill-2); color: var(--vantage-text); }
.lms-popup-body { background: transparent; padding: 4px 0; }
.lms-popup-footer {
    gap: 8px;
    padding: 14px 18px;
    background: transparent;
    border-top: 1px solid var(--vantage-line-2);
    border-radius: 0;
}
.lms-popup-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid var(--vantage-line);
    background: var(--vantage-fill);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.12s ease, opacity 0.12s ease;
}
.lms-popup-btn:hover { background: var(--vantage-fill-2); }
.lms-popup-btn-primary,
.lms-popup-btn-primary:hover {
    border: 0;
    background: var(--vantage-text);
    color: var(--vantage-bg);
    font-weight: 600;
}
.lms-popup-btn-primary:hover { opacity: 0.9; }
.lms-popup-btn-danger,
.lms-popup-btn-danger:hover {
    border-color: color-mix(in srgb, var(--lms-danger-text) 30%, transparent);
    background: color-mix(in srgb, var(--lms-danger-text) 10%, transparent);
    color: var(--lms-danger-text);
    font-weight: 600;
}
.lms-popup-btn-danger:hover { background: color-mix(in srgb, var(--lms-danger-text) 16%, transparent); }
.lms-popup-btn:disabled { opacity: 0.45; }

/* Alert, confirm and prompt bodies. */
.lms-dialog-msg {
    padding: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vantage-text);
}
.lms-dialog-input {
    width: calc(100% - 36px);
    margin: 0 18px 16px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--vantage-line);
    border-radius: 9px;
    background: var(--vantage-surface);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13.5px;
}
.lms-dialog-input:focus,
html.dark-mode .lms-dialog-input:focus {
    outline: none;
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 20%, transparent);
}

/* The body-level chat modals are inline-styled; bring their shell in line. */
.lms-modal-overlay > div {
    background: var(--vantage-surface) !important;
    border-color: var(--vantage-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34) !important;
    font-family: var(--vantage-font-body);
}

/* ─── Surface: channels and direct messages ────────────────── */
/* Token remap over the whole chat shell (rail, channel and DM
   panels, thread panel, composer, mention menu). The row-action /
   context menu is a single shared component used by chat and the
   grids, so it is remapped globally here and stays uniform
   everywhere it appears. */
#cd-root,
.lms-row-act-menu,
.lms-emoji-picker {
    --lms-bg: var(--vantage-bg);
    --lms-bg-panel: var(--vantage-surface);
    --lms-bg-alt: var(--vantage-fill);
    --lms-border: var(--vantage-line);
    --lms-border-light: var(--vantage-line-2);
    --lms-text: var(--vantage-text);
    --lms-text-dim: color-mix(in srgb, var(--vantage-text) 86%, var(--vantage-bg));
    --lms-text-muted: var(--vantage-text-2);
    --lms-text-faint: var(--vantage-text-3);
    --lms-active-tint: var(--vantage-fill-2);
    /* Chat used the warm accent for links, send affordance and unread
       badges; attention cues shift to the brand accent so desktop and
       the mobile bottom bar agree. Data-viz meters elsewhere keep warm. */
    --lms-accent-warm: var(--vantage-accent);
    font-family: var(--vantage-font-body);
}

/* The chat panels are transparent and show the app shell behind
   them, which still carries the pre-brand background; paint the
   shell region under the chat so its darks match the sidebar's
   palette instead of the old neutral black. */
#cd-root { background: var(--vantage-bg); }

/* Headings take Satoshi: the chat title bar, the channel welcome
   header, and the rail's section labels. */
#cd-root .cd-chat-title,
#cd-root .ch-welcome-title {
    font-family: var(--vantage-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}
#cd-root .cd-section-head {
    font-family: var(--vantage-font-heading);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Selected channel row: the same accent wash as the sidebar's
   selected node, so both panels speak one "you are here" language. */
#cd-root .cd-row.active {
    background: color-mix(in srgb, var(--vantage-accent) 13%, transparent);
    color: var(--vantage-text);
}
#cd-root .cd-row.active .cd-row-lead { color: var(--vantage-accent); }

/* Unread badges: solid accent with page-ink text, matching the
   bottom bar's badges (white text fails contrast on the pale dark-
   mode accent). */
#cd-root .cd-row-badge {
    background: var(--vantage-accent);
    color: var(--vantage-bg);
}

/* ─── Surface: settings ────────────────────────────────────── */
/* Small, self-contained screen; styled with the brand tokens
   directly rather than remapped, since its old markup was fully
   inline-styled. Left-set column, matching the marketing site. */
.st-root {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 28px 32px;
    background: var(--vantage-bg);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13px;
}
.st-title {
    margin: 0 0 3px;
    font-family: var(--vantage-font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.st-lede {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--vantage-text-3);
}
.st-card {
    max-width: 620px;
    padding: 16px 18px;
    margin-bottom: 14px;
    background: var(--vantage-fill);
    border: 1px solid var(--vantage-line-2);
    border-radius: 12px;
}
.st-card-title {
    margin: 0 0 4px;
    font-family: var(--vantage-font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.st-hint {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--vantage-text-2);
}
.st-hint:last-child { margin-bottom: 0; }

/* Segmented display-mode control: quiet track, active pill takes the
   accent wash used for selected states across the app. */
.st-seg {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: var(--vantage-fill);
    border: 1px solid var(--vantage-line-2);
    border-radius: 10px;
}
.st-seg-opt {
    min-width: 84px;
    padding: 7px 16px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--vantage-text-2);
    font-family: var(--vantage-font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.st-seg-opt:hover { color: var(--vantage-text); }
.st-seg-opt.st-seg-active {
    background: color-mix(in srgb, var(--vantage-accent) 16%, transparent);
    color: var(--vantage-text);
}

/* Theme picker: a swatch showing each palette's bar, sidebar and
   canvas, so the choice is visible rather than a word. */
/* Two by two rather than a wrapping row: four fixed-width swatches never fit
   the card, so the last one was orphaned onto a line of its own. */
/* Account: identity on one row, then the facts about this session. */
.st-acct { display: flex; align-items: center; gap: 12px; }
.st-acct-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--vantage-fill-2);
    color: var(--vantage-text);
    font-family: var(--vantage-font-heading);
    font-size: 13px;
    font-weight: 600;
}
.st-acct-id { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.st-acct-name {
    font-family: var(--vantage-font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.st-acct .st-hint { margin: 0; }
.st-facts { margin-top: 14px; border-top: 1px solid var(--vantage-line-2); }
.st-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--vantage-line-2);
}
.st-fact:last-child { border-bottom: 0; }
.st-fact-k { color: var(--vantage-text-2); }
.st-fact-v { font-variant-numeric: tabular-nums; }
/* A session pointed at the test database is worth saying loudly: it is the one
   fact here that changes what the numbers on every other screen mean. */
.st-env-test {
    padding: 1px 7px;
    border-radius: var(--vantage-r-pill);
    background: color-mix(in srgb, var(--lms-warning-text) 16%, transparent);
    color: var(--lms-warning-text);
    font-weight: 600;
}

.st-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-theme {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--vantage-line-2);
    border-radius: 12px;
    background: var(--vantage-fill);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.st-theme:hover { background: var(--vantage-fill-2); }
.st-theme.st-theme-active {
    border-color: var(--vantage-accent);
    background: color-mix(in srgb, var(--vantage-accent) 12%, transparent);
}
.st-theme-swatch {
    position: relative;
    display: block;
    height: 52px;
    margin-bottom: 8px;
    border: 1px solid var(--vantage-line-2);
    border-radius: 8px;
    overflow: hidden;
}
.st-theme-swatch-bar { position: absolute; inset: 0 0 auto 0; height: 11px; }
.st-theme-swatch-side { position: absolute; inset: 11px auto 0 0; width: 34%; }
.st-swatch-graphite { background: #1b1b1b; }
.st-swatch-graphite .st-theme-swatch-bar  { background: #161616; }
.st-swatch-graphite .st-theme-swatch-side { background: #212121; }
.st-swatch-vantage  { background: #0a1114; }
.st-swatch-vantage .st-theme-swatch-bar   { background: #070d10; }
.st-swatch-vantage .st-theme-swatch-side  { background: #10181c; }
.st-swatch-oled     { background: #000000; }
.st-swatch-oled .st-theme-swatch-bar      { background: #000000; }
.st-swatch-oled .st-theme-swatch-side     { background: #0b0b0b; }
.st-swatch-light    { background: #fafafa; }
.st-swatch-light .st-theme-swatch-bar     { background: #f0f0f0; }
.st-swatch-light .st-theme-swatch-side    { background: #ffffff; }
.st-theme-name { font-size: 13px; font-weight: 500; }
.st-theme-hint { font-size: 11.5px; color: var(--vantage-text); }

/* A menu item that reports a current selection. */
.lms-menu-item .lms-menu-check {
    width: 14px;
    flex-shrink: 0;
    color: var(--vantage-accent);
    text-align: center;
}

.st-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.st-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--vantage-line);
    border-radius: 9px;
    background: var(--vantage-fill);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}
.st-btn:hover { background: var(--vantage-fill-2); }
.st-btn-primary {
    border: 0;
    background: var(--vantage-text);
    color: var(--vantage-bg);
    font-weight: 600;
}
.st-btn-primary:hover { background: var(--vantage-text); opacity: 0.9; }
/* A disabled button has to look disabled. Without this a control that cannot
   be used (the install button before the browser offers a prompt, "Activate
   2FA" before a code is entered) rendered at full contrast and invited a
   click that silently did nothing. */
.st-btn:disabled,
.st-btn[disabled] { cursor: not-allowed; opacity: 0.42; }
.st-btn:disabled:hover { background: var(--vantage-fill); }
.st-btn-primary:disabled:hover { background: var(--vantage-text); opacity: 0.42; }
.st-btn-danger {
    border-color: color-mix(in srgb, var(--lms-danger-text, #f87171) 30%, transparent);
    background: color-mix(in srgb, var(--lms-danger-text, #f87171) 9%, transparent);
    color: var(--lms-danger-text, #f87171);
}
.st-btn-danger:hover {
    background: color-mix(in srgb, var(--lms-danger-text, #f87171) 15%, transparent);
}

.st-input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--vantage-line);
    border-radius: 9px;
    background: var(--vantage-surface);
    color: var(--vantage-text);
    font-family: var(--vantage-font-body);
    font-size: 13px;
}
.st-input:focus {
    outline: none;
    border-color: var(--vantage-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vantage-accent) 22%, transparent);
}

/* Status lines with a small leading dot: accent when 2FA is active,
   neutral otherwise. */
.st-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vantage-text-2);
}
.st-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vantage-text-3);
}
.st-status-on { color: var(--vantage-text); font-weight: 500; }
.st-status-on::before { background: var(--lms-success-text, #4ade80); }

/* QR codes render dark-on-white; keep them on a white chip so they
   stay scannable in dark mode. */
.st-qr-frame {
    display: inline-block;
    padding: 10px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid var(--vantage-line);
    border-radius: 10px;
    line-height: 0;
}

@media (max-width: 768px) {
    .st-root { padding: 20px 16px; }
}