/* ============================================================
   NEW UI – DARK RAIL THEME (myIncite)
   Additive-only, like new-ui-polish.css: nothing here edits
   new-ui.css or new-ui-polish.css, it only layers overrides on top
   via extra scoping classes (so specificity wins regardless of
   load order — this file is still loaded last, after
   command-palette.css, belt-and-suspenders).

   Activates under .is-myincite-ui.nui-dark-rail — nui-dark-rail is
   currently a static class on #InciteWrapper (public/index.html) so
   the theme is unconditionally on; drop that class to A/B back to
   the light rail without touching this file.

   Exception: section 4 (PER-MODULE ACCENTS) keys its custom-property
   declarations off .is-myincite-ui alone. A module's identity color
   isn't a "dark theme" concept, so it should hold even if
   nui-dark-rail is later toggled off for A/B.
   ============================================================ */

/* ---------- 0. LOCAL TOKENS ---------- */
/* Scoped to .nui-sidebar itself (not :root) so these never leak into
   the second sidebar / flyout, which section 1 explicitly excludes. */
.is-myincite-ui.nui-dark-rail .nui-sidebar {
    --nui-dr-text: rgba(255, 255, 255, .82);
    /* was .38 — failed WCAG contrast against the navy rail bg for the
       11px section micro-label; raised per accessibility pass. */
    --nui-dr-text-dim: rgba(255, 255, 255, .55);
    /* sub-item label ramp — one notch dimmer than --nui-dr-text, same
       role as the light rail's --nui-text-secondary vs --nui-text-body
       split. Promoted to a token (was a one-off rgba on .nui-sub-btn)
       so the dark-rail color system stays to a single named ramp. */
    --nui-dr-text-sub: rgba(255, 255, 255, .65);
    --nui-dr-icon: rgba(255, 255, 255, .55);
    --nui-dr-icon-hover: rgba(255, 255, 255, .9);
    --nui-dr-hover-bg: rgba(255, 255, 255, .06);
    --nui-dr-border: rgba(255, 255, 255, .12);
    --nui-dr-scrollbar: rgba(255, 255, 255, .15);
}

/* ---------- 1. DARK RAIL ---------- */
/* Primary rail only — .nui-second-sidebar and .nui-flyout are
   untouched by every rule in this section. */

/* 1a. Rail shell */
.is-myincite-ui.nui-dark-rail .nui-sidebar {
    background: linear-gradient(180deg, #0d2438 0%, #0a1c2c 100%);
    border-right: 1px solid rgba(0, 0, 0, .35);
}

/* 1b. Logo block — inline SVG uses fill="#0074c5" + fill="#000" paths
   (see new-ui-sidebar.html); a pixel-level filter is robust regardless
   of which internal paths carry inline fill, unlike trying to target
   the paths themselves via CSS. */
.is-myincite-ui.nui-dark-rail .nui-sb-logo {
    border-bottom-color: rgba(255, 255, 255, .08);
}
.is-myincite-ui.nui-dark-rail .nui-sb-logo-svg,
.is-myincite-ui.nui-dark-rail .nui-sb-logo-icon {
    filter: brightness(0) invert(1);
}

/* 1c. Section micro-label + divider */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-section-lbl {
    color: var(--nui-dr-text-dim);
}
/* same dark-rail treatment for the in-section group headings (Admin) */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-group-lbl {
    color: var(--nui-dr-text-dim);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-divider {
    background: rgba(255, 255, 255, .08);
}

/* 1d. Nav buttons — label / icon ramp, hover row */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn {
    color: var(--nui-dr-text);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn .nui-nav-icon {
    color: var(--nui-dr-icon);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn:hover:not(.active) {
    background: var(--nui-dr-hover-bg);
    color: #fff;
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn:hover:not(.active) .nui-nav-icon {
    color: var(--nui-dr-icon-hover);
}

/* Chevron ramp — dimmer than the label at rest, matching brightness with
   the hovered/open icon state (reuses --nui-dr-icon / --nui-dr-icon-hover,
   no new one-off shade). */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-chev i {
    color: var(--nui-dr-icon);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn:hover .nui-nav-chev i,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn.open .nui-nav-chev i {
    color: var(--nui-dr-icon-hover);
}

/* 1e. Sub-list — border + sub-button text ramp (one notch dimmer at
   rest than the top-level label, same idea as the light rail's
   --nui-text-secondary vs --nui-text-body split) */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-list,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-list.open {
    border-left-color: var(--nui-dr-border);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn {
    color: var(--nui-dr-text-sub);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn:hover:not(.active) {
    background: var(--nui-dr-hover-bg);
    color: var(--nui-dr-text);
}

/* 1f. Active state — pill tint + white text/icon. Hue comes from
   --nui-module-accent (section 4) when the current section has one;
   falls back to brand blue, which is what makes the fallback tint
   equal the flat rgba(0,116,197,.28) originally specified here.
   Section 5 then swaps this flat tint's accent *bar* for a gradient
   — see the note there. */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn.active,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn.active {
    background: color-mix(in srgb, var(--nui-module-accent, #0074C5) 28%, transparent);
    color: #fff;
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn.active {
    background: color-mix(in srgb, var(--nui-module-accent, #0074C5) 22%, transparent);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn.active .nui-nav-icon {
    color: #fff;
}

/* 1g. Collapse handle — fully styled by "COLLAPSE HANDLE, TAKE 5" below
   (the --ss handle on the second sidebar is untouched) */

/* 1h. Nav-area scrollbar thumb */
.is-myincite-ui.nui-dark-rail .nui-sb-nav::-webkit-scrollbar-thumb {
    background: var(--nui-dr-scrollbar);
}

/* 1i. Focus-visible ring — brand teal for contrast against the dark
   bg (new-ui-polish.css §1 sets brand blue #0074C5; both the button
   rule (!important) and the collapse-handle rule (not !important)
   are outranked here by scoping + !important). */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn:focus-visible,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn:focus-visible,
.is-myincite-ui.nui-dark-rail .nui-collapse-handle--main:focus-visible {
    outline-color: #00AEC4 !important;
}

/* Collapsed-rail [title] tooltip pills (new-ui-polish.css §5) render
   on their own #1e293b chip with white text — independently legible
   against either rail background, confirmed, no change needed. */

/* ---------- 2. COOL CANVAS ---------- */
/* Nothing sets a background on #AppContainer today — style.css only
   gives it height/position/width, so it just shows through to the
   page's default white. Give myIncite's content pane a cool off-white
   so white cards read as lifted panels on top of it.

   Fixed gradient wash (JIRA "space background" style, request
   2026-07-23; richened same day after "doesn't really look like this"
   feedback on the first, too-subtle pass): four phoenix-palette blooms
   anchored at the corners, fading into the same #eef2f7 base. Now that
   cards are translucent (see new-ui-pages.css .panel), a bolder wash
   actually shows through them, which is the point — kept the peak
   opacities under ~30% and the base light so text over the gradient
   (outside cards) and inside the frosted cards both keep solid
   contrast; this is a richer version of the SAME light wash, not a
   dark JIRA-style backdrop (rejected earlier this session for SP/
   incite topbar — dark reads as heavy/cramped against white content).
   background-attachment: fixed keeps it stationary while content
   scrolls. Not user-configurable — a single fixed design, not a picker. */
.is-myincite-ui.nui-dark-rail #AppContainer {
    background:
        radial-gradient(1200px circle at 0% 0%, rgba(0, 116, 197, .22), transparent 60%),
        radial-gradient(1100px circle at 100% 0%, rgba(139, 92, 176, .18), transparent 60%),
        radial-gradient(1500px circle at 100% 100%, rgba(217, 142, 50, .16), transparent 60%),
        radial-gradient(1000px circle at 0% 100%, rgba(0, 174, 196, .18), transparent 60%),
        #eef2f7;
    background-attachment: fixed;
}

/* ---------- 3. TOPBAR IDENTITY ---------- */
/* Topbar itself stays white — untouched. Small refinements only. */

/* Cross-client pill: slightly larger, 1px brand border, clearer
   active side. */
.is-myincite-ui.nui-dark-rail .nui-tb-cross-client {
    padding: 4px;
    border: 1px solid rgba(0, 116, 197, .2);
}
.is-myincite-ui.nui-dark-rail .nui-tb-cct-opt {
    padding: 6px 12px;
}
.is-myincite-ui.nui-dark-rail .nui-tb-cct-opt.active {
    box-shadow: 0 1px 3px rgba(0, 116, 197, .28), inset 0 0 0 1px rgba(0, 116, 197, .18);
}

/* Nav search: white fill + a real border instead of the flat gray
   chip, so it reads as a field. */
.is-myincite-ui.nui-dark-rail .nui-navsearch {
    background: var(--nui-bg-white);
    border-color: var(--nui-border-hover);
}

/* ---------- 4. PER-MODULE ACCENTS ---------- */
/* data-nui-module is set on #InciteWrapper by newUiSidebar.js
   (computeActiveModule / updateModuleAttr, called on
   $stateChangeSuccess + init) using the same isNavActive() checks the
   rail already relies on. Accents only apply to active/current
   elements — nothing else changes per module. */
.is-myincite-ui[data-nui-module="assess"]     { --nui-module-accent: #00AEC4; }
.is-myincite-ui[data-nui-module="roster"]     { --nui-module-accent: #6366f1; }
.is-myincite-ui[data-nui-module="courses"]    { --nui-module-accent: #10b981; }
.is-myincite-ui[data-nui-module="analyze"]    { --nui-module-accent: #8b5cf6; }
.is-myincite-ui[data-nui-module="admin"]      { --nui-module-accent: #64748b; }
.is-myincite-ui[data-nui-module="enrollment"] { --nui-module-accent: #d97706; }
/* home, trackers, insight, p360, gcsc, billable, marketing: no
   override declared — var(--nui-module-accent, var(--nui-brand))
   falls back to brand blue for these below. */

/* Active rail item's accent bar (new-ui-polish.css §3 draws a flat
   #0074C5 bar) — retinted per module. Section 5 further overrides
   this specific bar, inside .nui-dark-rail, with a gradient. */
.is-myincite-ui .nui-nav-btn.active::before,
.is-myincite-ui .nui-sub-btn.active::before {
    background: var(--nui-module-accent, var(--nui-brand));
}

/* Active pill tint (new-ui-polish.css §13's flat brand color-mix) —
   retinted per module. Section 1f further overrides this for the
   dark rail specifically (transparent-based tint reads better on a
   dark background than a wash over --nui-bg-brand-light). */
.is-myincite-ui .nui-nav-btn.active {
    background: color-mix(in srgb, var(--nui-module-accent, var(--nui-brand)) 10%, var(--nui-bg-brand-light) 90%);
}
.is-myincite-ui .nui-sub-btn.active {
    background: color-mix(in srgb, var(--nui-module-accent, var(--nui-brand)) 8%, var(--nui-bg-brand-light) 92%);
}

/* Topbar breadcrumb SECTION text (the main crumb, not the sub-crumb) */
.is-myincite-ui .nui-tb-bc-main {
    color: var(--nui-module-accent, var(--nui-brand));
}

/* ---------- 5. GRADIENT ACCENTS ---------- */
/* Exactly two things get the brand gradient. */

/* The dark rail's active accent bar: gradient instead of a flat hue —
   this is the "reconciliation" of item 1's original flat-teal plan
   now that section 4 gives each module its own color. Scoped to
   .nui-dark-rail .nui-sidebar so it only wins here (higher
   specificity than section 4's broader rule above). */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-nav-btn.active::before,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn.active::before {
    background: linear-gradient(var(--nui-module-accent, #0074C5), #00AEC4);
}

/* Nav search's focus ring: brand-blue ring with a subtle teal halo
   blended in behind it. */
.is-myincite-ui.nui-dark-rail .nui-navsearch.focused {
    box-shadow: 0 0 0 3px rgba(0, 116, 197, .10), 0 0 0 5px rgba(0, 174, 196, .08);
}

/* ==========================================================================
   FLOATING RAIL — soft layered drop shadow so the left nav lifts off the
   canvas (applies in both light and dark rail modes).
   ========================================================================== */
.is-myincite-ui .nui-sidebar {
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.06), 6px 0 24px rgba(15, 23, 42, 0.08);
}
.is-myincite-ui.nui-dark-rail .nui-sidebar {
    box-shadow: 2px 0 10px rgba(4, 12, 20, 0.28), 8px 0 28px rgba(4, 12, 20, 0.18);
    border-right: none; /* the shadow carries the edge on dark */
}

/* ==========================================================================
   FLOATING TOPBAR — same elevation treatment as the rail.
   ========================================================================== */
.is-myincite-ui .nui-topbar {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 6px 24px rgba(15, 23, 42, 0.05);
    /* option 3: clean white bar + brand gradient keyline (::after below) */
    background: var(--nui-bg-white, #fff);
    border-bottom: none;
    position: relative;
}

/* ==========================================================================
   RAIL/TOPBAR ALIGNMENT — pin the logo block to the topbar's exact 48px so
   the hairline under the logo lines up with the topbar's bottom border.
   ========================================================================== */
.is-myincite-ui .nui-sb-logo {
    box-sizing: border-box;
    height: 48px;
    padding: 8px 14px;
    position: relative;
}

/* ==========================================================================
   SIDEBAR COLLAPSE BUTTON — one control, always present, same place in
   both states. It used to be removed entirely while collapsed (ng-if in
   new-ui-sidebar.html), which left no visible way to expand again and made
   the user hunt for the invisible edge strip.

   Expanded, it sits at the right of the logo row beside the wordmark.
   Collapsed, the rail is 62px and cannot hold the icon mark and a 22px
   button side by side, so the toggle takes the row and the mark steps
   aside - the collapsed rail already carries the phoenix watermark near
   its foot, so brand presence is not lost. Either way the control stays in
   the rail's top-left, which is the point.

   The edge handle still accepts a click to expand as a second affordance;
   see "COLLAPSE HANDLE, TAKE 5".
   ========================================================================== */
.is-myincite-ui .nui-sb-collapse-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--nui-text-muted, #94a3b8);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.is-myincite-ui .nui-sb-collapse-btn:hover {
    background: var(--nui-bg-hover, #eef1f5);
    color: var(--nui-brand, #0074C5);
}
.is-myincite-ui.nui-dark-rail .nui-sb-collapse-btn {
    color: rgba(255, 255, 255, .55);
}
.is-myincite-ui.nui-dark-rail .nui-sb-collapse-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* COLLAPSED: the toggle takes the logo row. The icon mark is hidden rather
   than shrunk - at 62px minus padding there is ~34px of usable width, which
   the 30px mark already fills, so there is no arrangement that fits both. */
.is-myincite-ui .nui-sidebar.collapsed .nui-sb-logo-icon {
    display: none;
}
.is-myincite-ui .nui-sidebar.collapsed .nui-sb-collapse-btn {
    position: static;
    transform: none;
    margin: 0 auto;
    width: 28px;
    height: 28px;
}

/* ==========================================================================
   COLLAPSE HANDLE, TAKE 5 — New Relic style: NOTHING visible at rest.
   The handle button becomes an invisible full-height hit zone along the
   panel's right edge; hovering it reveals a thin brand-blue line plus a
   "Collapse"/"Expand" tooltip chip. Applies to both the main rail
   (--main) and the second sidebar (--ss).
   Single source of truth under New UI — the base strip styles in
   new-ui.css and its collapsed-state --ss overrides are superseded.
   ========================================================================== */
.is-myincite-ui .nui-collapse-handle--main,
.is-myincite-ui.nui-dark-rail .nui-collapse-handle--main,
.is-myincite-ui .nui-collapse-handle--ss,
.is-myincite-ui .nui-second-sidebar.collapsed .nui-collapse-handle--ss {
    top: 0;
    bottom: 0;
    height: auto;
    width: 12px;
    right: -6px;
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 30;
}
.is-myincite-ui .nui-collapse-handle--main:hover,
.is-myincite-ui.nui-dark-rail .nui-collapse-handle--main:hover,
.is-myincite-ui .nui-collapse-handle--ss:hover,
.is-myincite-ui .nui-second-sidebar.collapsed .nui-collapse-handle--ss:hover {
    width: 12px;
    right: -6px !important; /* base new-ui.css --ss hover uses !important */
    background: transparent;
    border: none;
    transform: none;
    box-shadow: none;
}
/* chevron glyph retired in this design */
.is-myincite-ui .nui-collapse-handle--main .nui-collapse-handle-icon,
.is-myincite-ui .nui-collapse-handle--ss .nui-collapse-handle-icon,
.is-myincite-ui .nui-second-sidebar.collapsed .nui-collapse-handle--ss .nui-collapse-handle-icon {
    display: none;
}
/* hover: thin brand line along the edge (the New Relic blue bar) */
.is-myincite-ui .nui-collapse-handle--main::before,
.is-myincite-ui .nui-collapse-handle--ss::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--nui-brand, #0074C5);
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}
.is-myincite-ui .nui-collapse-handle--main:hover::before,
.is-myincite-ui .nui-collapse-handle--ss:hover::before {
    opacity: 1;
}
/* hover: tooltip chip (same look as the collapsed-rail nav tips) */
.is-myincite-ui .nui-collapse-handle--main[data-nui-tip]:not([data-nui-tip=""]):hover::after,
.is-myincite-ui .nui-collapse-handle--ss[data-nui-tip]:not([data-nui-tip=""]):hover::after {
    content: attr(data-nui-tip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 500;
    pointer-events: none;
}
/* the hit zone must vanish with its panel (width-0 hidden state keeps
   overflow visible, so it would otherwise float over content) */
.is-myincite-ui .nui-second-sidebar.hidden .nui-collapse-handle--ss {
    display: none;
}

/* ==========================================================================
   RESIZABLE RAIL — request 2026-07-23. Drag the same edge handle used to
   collapse to resize the expanded rail (newUiSidebar.js handles the
   mousedown/mousemove/mouseup math and persistence; this is presentation
   only). col-resize cursor only while expanded — collapsed isn't
   draggable (62px, well under the 200px minimum). While an active drag
   is in progress, document.body carries .nui-resizing-rail: kills the
   rail's own width transition (would otherwise lag behind the cursor)
   and prevents text selection app-wide for the duration of the drag.
   ========================================================================== */
.is-myincite-ui .nui-sidebar:not(.collapsed) .nui-collapse-handle--main {
    cursor: col-resize;
}
.is-myincite-ui .nui-sidebar.collapsed .nui-collapse-handle--main {
    cursor: pointer;
}
body.nui-resizing-rail {
    cursor: col-resize !important;
    user-select: none !important;
}
body.nui-resizing-rail .nui-sidebar {
    transition: none !important;
}

/* ==========================================================================
   MASCOT PALETTE ACCENTS — blue -> purple -> gold from the phoenix mark,
   used sparingly: active accent bar, search focus halo, avatar hover ring.
   ========================================================================== */
.is-myincite-ui .nui-nav-btn.active::before,
.is-myincite-ui .nui-sub-btn.active::before {
    background: linear-gradient(180deg, var(--nui-module-accent, #0074C5), #8B5CB0 55%, #D98E32) !important;
}
.is-myincite-ui .nui-navsearch.focused {
    box-shadow: 0 0 0 3px rgba(0, 116, 197, 0.10), 0 2px 14px rgba(139, 92, 176, 0.14);
}
.is-myincite-ui .nui-tb-avatar:hover {
    box-shadow: 0 0 0 2px rgba(139, 92, 176, 0.45);
    border-radius: 50%;
}

/* ==========================================================================
   MASCOT PLACEMENTS (CSS-only ones). Asset: img/mascot/phoenix.png —
   every rule below silently no-ops until the file exists.
   ========================================================================== */
/* app loader: see new-ui-loaders.css (three-dot bouncer; the phoenix mark was removed) */
/* collapsed dark rail: faint white watermark above the bottom */
.is-myincite-ui.nui-dark-rail .nui-sidebar.collapsed::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: url("../img/mascot/phoenix.png") center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: 0.12;
    pointer-events: none;
}
/* search dropdown empty state */
.nui-navsearch-noresults {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    color: var(--nui-text-muted, #94a3b8);
    font-size: 12.5px;
}
.nui-navsearch-noresults img {
    width: 28px;
    height: 28px;
    opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
    body:has(#InciteWrapper.is-myincite-ui) #loading-app-spinner::before,
    body.nui-on #loading-app-spinner::before { animation: none; }
}

/* frosted scrolled state re-tinted to match the topbar's base shade */
.is-myincite-ui .nui-topbar.nui-tb-scrolled {
    background: rgba(255, 255, 255, 0.85);
}

/* brand gradient keyline along the topbar's bottom edge */
.is-myincite-ui .nui-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, #0074C5 0%, #00AEC4 55%, #8B5CB0 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================================
   IN-APP LOADER — when the app shell is already on screen, the full-page
   loader becomes a translucent veil instead of an opaque white curtain
   (an opaque cover reads as a hard page refresh). Initial boot / login
   (no wrapper yet) keeps the full opaque treatment.
   ========================================================================== */
body:has(#InciteWrapper.is-myincite-ui) #loading-app-spinner {
    background-color: rgba(248, 250, 252, 0.85) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* cover ONLY the content region — the rail and topbar stay live,
       so loading never reads as a page reload */
    left: var(--nui-rail-w, 268px);
    top: 48px;
    z-index: 150; /* under the rail (200) and topbar shadows, over content */
}
body:has(#InciteWrapper.is-myincite-ui.nui-sb-collapsed) #loading-app-spinner {
    left: var(--nui-rail-w-collapsed, 62px);
}

/* ==========================================================================
   SECOND SIDEBAR: TEAL MENU IDENTITY + SITS BELOW THE TOPBAR
   The secondary nav read as part of the page (plain white, full height,
   shoving the topbar sideways). Two fixes:
   1. Drop it 48px so the topbar visually spans across it — a ::before
      filler paints a seamless continuation of the white topbar including
      the gradient keyline (the real topbar lives in the content column,
      so this is the no-DOM-change way to extend it).
   2. Teal wash + teal accents so it reads as a menu surface, distinct
      from both the navy rail and the white content canvas.
   ========================================================================== */
.is-myincite-ui .nui-second-sidebar:not(.hidden) {
    margin-top: 48px;
    height: calc(100% - 48px);
    background: linear-gradient(180deg, #ecf9fb 0%, #f6fcfd 200px, #fbfeff 100%);
    border-right: 1px solid rgba(0, 174, 196, 0.30);
    box-shadow: inset 3px 0 0 rgba(0, 174, 196, 0.55); /* teal seam against the navy rail */
}
/* topbar continuation strip above the panel (48px bar + 2px keyline
   overlapping the panel top, mirroring .nui-topbar::after at bottom:-2px) */
.is-myincite-ui .nui-second-sidebar:not(.hidden)::before {
    content: "";
    position: absolute;
    top: -48px;
    left: 0;
    right: 0;
    height: 50px;
    background:
        linear-gradient(90deg, rgba(0, 116, 197, 0.5) 0%, rgba(0, 174, 196, 0.5) 55%, rgba(139, 92, 176, 0.5) 100%) left bottom / 100% 2px no-repeat,
        var(--nui-bg-white, #fff);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    pointer-events: none;
    z-index: 1;
}
/* header: teal eyebrow with a teal tick */
.is-myincite-ui .nui-second-sidebar .nui-ss-header {
    color: #0e7490;
}
.is-myincite-ui .nui-second-sidebar .nui-ss-header::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: #00AEC4;
    margin-right: 7px;
    vertical-align: -1px;
}
/* items: teal hover + active states instead of gray/blue */
.is-myincite-ui .nui-second-sidebar .nui-ss-btn:hover:not(.active),
.is-myincite-ui .nui-second-sidebar .nui-ss-view-btn:hover:not(.active),
.is-myincite-ui .nui-second-sidebar .nui-ss-sub-btn:hover:not(.active) {
    background: rgba(0, 174, 196, 0.10);
}
.is-myincite-ui .nui-second-sidebar .nui-ss-btn.active,
.is-myincite-ui .nui-second-sidebar .nui-ss-view-btn.active {
    background: rgba(0, 174, 196, 0.16);
    color: #0e7490;
    box-shadow: inset 3px 0 0 #00AEC4;
}
/* collapsed icon-rail mode keeps the teal wash (overrides the white
   reset in new-ui.css via later-file, equal-or-higher specificity) */
.is-myincite-ui .nui-second-sidebar.collapsed:not(.hidden) {
    background: linear-gradient(180deg, #ecf9fb 0%, #f8fdfe 100%);
    border-right: 1px solid rgba(0, 174, 196, 0.30);
}