/* ============================================================
   NEW UI – POLISH LAYER
   Additive-only styles: keyboard focus states, active-route
   indicators, motion consistency, and collapsed-rail tooltips.
   Do NOT edit new-ui.css — all overrides for this pass live here.
   Load this file AFTER new-ui.css.
   ============================================================ */

/* ---------- 1. VISIBLE KEYBOARD FOCUS STATES ---------- */
/* new-ui.css intentionally strips :focus-visible on .nui-nav-btn
   (see its comment above that rule) so mouse-click doesn't leave a
   stale ring. We restore a real keyboard-only focus ring here with
   higher specificity so it wins regardless of stylesheet order. */
.nui-sidebar .nui-nav-btn:focus-visible {
    outline: 2px solid #0074C5 !important;
    outline-offset: 2px !important;
    border-radius: 10px;
}

.nui-sub-btn:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: 2px;
    border-radius: 8px;
}

.nui-tb-icon-btn:focus-visible,
.nui-tb-notif-btn:focus-visible,
.nui-tb-user-btn:focus-visible,
.nui-tb-bc-trigger:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: 2px;
    border-radius: 8px;
}

.nui-collapse-handle:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: 2px;
    border-radius: 6px;
}

.nui-tb-dd-item:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: -2px;
    border-radius: 6px;
}

.nui-tb-cross-client:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Newly keyboard-accessible list rows (tabindex="0" added in
   new-ui-topbar.html) need the same visible ring. */
.nui-tb-notif-item:focus-visible,
.nui-tb-search-item:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: -2px;
    border-radius: 6px;
}

/* Second-sidebar tree buttons (tracker/roster trees) */
.nui-ss-btn:focus-visible,
.nui-ss-view-btn:focus-visible,
.nui-ss-sub-btn:focus-visible {
    outline: 2px solid #0074C5;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ---------- 2. CONSISTENT MOTION ---------- */
/* Note: .nui-collapse-handle is intentionally excluded here — its base
   rule in new-ui.css transitions "all .18s" so the hover width/position
   shift stays animated; overriding it to background-color/color only
   would silently kill that motion. */
.nui-nav-btn,
.nui-sub-btn,
.nui-tb-icon-btn,
.nui-tb-notif-btn,
.nui-tb-user-btn,
.nui-tb-dd-item,
.nui-tb-cross-client,
.nui-tb-notif-item,
.nui-tb-search-item,
.nui-tb-bc-trigger,
.nui-tb-bc-chevron,
.nui-ss-btn,
.nui-ss-view-btn,
.nui-ss-sub-btn {
    transition: background-color 150ms ease-out, color 150ms ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .nui-sidebar,
    .nui-second-sidebar,
    .nui-nav-btn,
    .nui-sub-btn,
    .nui-nav-btn .nui-nav-chev,
    .nui-tb-icon-btn,
    .nui-tb-notif-btn,
    .nui-tb-user-btn,
    .nui-tb-dd-item,
    .nui-tb-cross-client,
    .nui-tb-notif-item,
    .nui-tb-search-item,
    .nui-collapse-handle,
    .nui-collapse-handle-icon,
    .nui-ss-btn,
    .nui-ss-view-btn,
    .nui-ss-sub-btn,
    .nui-ss-chev {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- 3. ACTIVE-ROUTE INDICATOR ---------- */
/* new-ui.css only signals "active" via background color; add a left
   accent bar so the active route is legible without relying on color
   alone (also helps at a glance in the collapsed rail). */
.nui-nav-btn.active,
.nui-sub-btn.active {
    position: relative;
}
.nui-nav-btn.active::before,
.nui-sub-btn.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: #0074C5;
    border-radius: 0 3px 3px 0;
}

/* ---------- 4. TOPBAR DENSITY ---------- */
/* .nui-topbar is 48px tall in new-ui.css, already below the 56px
   density threshold — intentionally not reduced further. */

/* ---------- 5. COLLAPSED-RAIL TOOLTIPS ---------- */
/* A CSS-only tooltip pill for collapsed affordances, avoiding the browser's
   native tooltip delay. The top-level nav buttons no longer need it - they
   carry their wording under the icon now - and opt out at the end of this
   section; the pill still serves the other controls in the collapsed rail. */
/* .nui-collapse-handle already has position: absolute in new-ui.css
   (needed for its edge placement) so it's already a positioned
   ancestor for the ::after tooltip below — only .nui-nav-btn needs it
   added here. */
.nui-sidebar.collapsed .nui-nav-btn {
    position: relative;
}
.nui-sidebar.collapsed .nui-nav-btn[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: 8px;
    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;
}
/* ...except on the nav buttons themselves. The collapsed rail now shows each
   item's wording under its icon (new-ui.css), so this tooltip would pop up
   repeating a word already on screen. The rule above still serves the other
   collapsed affordances that have no visible label. */
.nui-sidebar.collapsed .nui-nav-btn[data-nui-tip]:not([data-nui-tip=""]):hover::after {
    content: none;
}

/* ---------- 6. CLICKABLE BREADCRUMB SECTION DROPDOWN ---------- */
/* Turns the section crumb into a dropdown trigger listing sibling
   pages (from nuiNavCommands) when there's more than one destination
   in the current section. Reuses .nui-tb-dd / .nui-tb-dd-menu /
   .nui-tb-dd-item from new-ui.css so the existing open/close,
   outside-click, and Escape handling in newUiTopbar.js apply for free. */
.nui-tb-bc-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--nui-transparent);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-family: var(--nui-font);
}
.nui-tb-bc-trigger:hover,
.nui-tb-bc-trigger:focus-visible {
    color: var(--nui-brand);
}
.nui-tb-bc-chevron {
    font-size: 9px;
    color: var(--nui-text-muted);
    opacity: 0;
    transform: translateY(1px);
}
.nui-tb-bc-trigger:hover .nui-tb-bc-chevron,
.nui-tb-bc-trigger:focus-visible .nui-tb-bc-chevron {
    opacity: 1;
    color: var(--nui-brand);
}

/* The breadcrumb sits at the left edge of the topbar, so anchor the
   menu to the trigger's left edge rather than inheriting the
   right-aligned default used by the right-side icon dropdowns. */
.nui-tb-bc-dd-menu {
    left: 0;
    right: auto;
    min-width: 220px;
}
.nui-tb-bc-dd-list {
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.nui-tb-bc-dd-item.current {
    background: var(--nui-bg-active);
    color: var(--nui-brand);
    font-weight: 600;
}

/* ==========================================================================
   7. SIDEBAR SUB-LIST EXPAND/COLLAPSE ANIMATION
   Sub-lists are class-driven (.open) instead of ng-show so the
   expand/collapse can animate. Chevron rotation already exists in
   new-ui.css (.nui-nav-btn.open .nui-nav-chev).
   ========================================================================== */
.nui-sub-list {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    border-left-color: transparent;
    transition: max-height 220ms ease-out, opacity 160ms ease-out,
                margin-bottom 220ms ease-out, border-left-color 160ms ease-out;
}
/* CAP SIZING. This is a max-height expand animation, so the cap has to
   clear the tallest section or the surplus is simply cut off - and because
   the clipping lives on this element (overflow:hidden above), there is
   nothing left to scroll to reach it. Admin used to do exactly that: it ran
   to 21 then 28 flat items, well past this cap, with no way to scroll to
   the remainder. That is now fixed at the source - Admin lists four
   categories and hands its items to the second sidebar - so the tallest
   section is back to 8. Counts today:
   courses 8, assess 8, roster 6, trackers 4, admin 4, home/analyze 2.

   640px is roughly double what 8 items need, including two-line labels. The
   cap is a ceiling, not a fix for all time - a section past ~18 items would
   clip again, and the answer then is the same one Admin took: move it to
   the second sidebar rather than raise the number. (The permanent CSS fix
   is the grid-template-rows 0fr->1fr technique, which animates to the exact
   content height with no cap, but it needs a single wrapper child inside
   each of the seven sub-lists, so it is a template change, not a CSS one.) */
.nui-sub-list.open {
    max-height: 640px;
    opacity: 1;
    margin-bottom: 6px;
    border-left-color: var(--nui-border, #e2e8f0);
}
@media (prefers-reduced-motion: reduce) {
    .nui-sub-list { transition: none; }
}

/* ==========================================================================
   8. FLYOUT HOVER BRIDGE
   The flyout sits 10px right of the collapsed rail; this invisible strip
   spans the gap so the pointer never "leaves" while crossing into it.
   ========================================================================== */
.nui-flyout::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 16px;
}

/* ==========================================================================
   10. DOCK & MATCH — IN-PAGE LEFT PANELS
   Recurring wrapper classes for page-level search/filter panels, found
   across ~90+ templates: aside.page-sidebar (e.g. catalog.html:2,
   Students.html:8, GCs graduationCandidatesComponent.html:12-13) and
   .animation_hide-sidebar (e.g. digital-classrooms.html — via .col-sm-3 in
   subtabs/assessments/edit.html:2975, and combined with .page-sidebar in
   graduationCandidatesComponent.html:12). Both wrap an inner
   ".panel.panel-default" card (style.css:4476) that classic UI renders with
   its own bootstrap-panel chrome. Restyle that inner card only — widths/
   floats (page-sidebar's 320px, animation_hide-sidebar's col-*) are
   untouched so page layout doesn't shift. */
.is-myincite-ui aside.page-sidebar > .panel,
.is-myincite-ui .animation_hide-sidebar > .panel {
    border: 1px solid var(--nui-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
    background: var(--nui-bg-white);
    overflow: hidden; /* clip inner panel-heading corners to the radius */
}
.is-myincite-ui aside.page-sidebar > .panel > .panel-heading,
.is-myincite-ui aside.page-sidebar > .panel > .panel-heading-sup,
.is-myincite-ui .animation_hide-sidebar > .panel > .panel-heading,
.is-myincite-ui .animation_hide-sidebar > .panel > .panel-heading-sup {
    font-family: var(--nui-font);
}
/* Note: on roster/engagement pages, new-ui.css's own "ROSTER FILTER PANEL"
   section (nui-has-filter-panel aside.animation_hide-sidebar .panel) already
   sets border/shadow/radius to none via !important for its dropdown
   treatment — those !important rules win over the card styling above
   automatically, so no extra override is needed here. */

/* ==========================================================================
   11. ICON NORMALIZATION
   Rail + topbar icons come from four fonts (icofont-*, edico-*, fa/fas/far,
   material-symbols-rounded) at inconsistent scales. .nui-nav-icon already
   pins itself to font-size 18px / width 20px / flex-centered in new-ui.css
   (.nui-nav-btn .nui-nav-icon) — that's the reference scale everything
   else below is unified to. Colors are NOT reinvented: .nui-nav-icon
   already inherits .nui-nav-btn's text-body/brand states, and
   .nui-tb-icon-btn / .nui-tb-notif-btn already carry their own muted →
   dark hover color (new-ui.css) — only sizing/alignment is touched here.
   ========================================================================== */

/* .nui-nav-icon: add explicit 1em line-height for crisp optical centering
   (previously inherited .nui-nav-btn's 1.3 line-height, fine for the flex
   center but not for baseline consistency with the other icon surfaces). */
.nui-nav-btn .nui-nav-icon {
    line-height: 1;
}

/* .nui-sub-btn / .nui-flyout-item render label-only today (no icon markup
   in new-ui-sidebar.html) — these rules are forward-compatible so any
   icon added later lands on the same 18px / 20px-wide / centered scale
   as .nui-nav-icon, without a separate wrapping span. */
.nui-sub-btn > i,
.nui-sub-btn > .material-symbols-rounded,
.nui-flyout-item > i,
.nui-flyout-item > .material-symbols-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: 18px !important;
    line-height: 1;
}

/* Topbar icon buttons: new-ui.css bumps material-symbols-rounded up to
   22px to compensate for that font's smaller natural glyph size, while
   the one plain <i> in this surface (fa-graduation-cap, new-ui-topbar.html)
   carries its own inline 17px override — two different sizes for the
   same button class. Pin both down to the shared 18px scale (!important
   is required to win over that inline style). */
.nui-tb-icon-btn i,
.nui-tb-icon-btn .material-symbols-rounded,
.nui-tb-notif-btn i,
.nui-tb-notif-btn .material-symbols-rounded {
    font-size: 18px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   12. TOOLTIP CONSISTENCY (uib-tooltip)
   The topbar's uib-tooltip usages (District Accountability Settings,
   cross-client switch, Learn Portal button) render via ui-bootstrap 2.5.6.
   Verified directly against its template cache in
   public/js/vendor/ui-bootstrap-2.5.6/ui-bootstrap-tpls.min.js — the popup
   emits literal ".tooltip-arrow" / ".tooltip-inner" classes (Bootstrap-3
   style, NOT the Bootstrap 4 ".arrow"/".show" pair bootstrap.min.css also
   ships), with base rules in css/style.css:4990-5110 (already bg #000,
   white text, 6px radius, but no shadow, and an arrow border-color that
   will mismatch once the fill is retinted).

   uib-tooltip-append-to-body="true" appends the popup as a *sibling* of
   #InciteWrapper directly under <body> — it is never a descendant of
   #InciteWrapper.is-myincite-ui, so a plain ".is-myincite-ui .tooltip-inner"
   selector cannot reach it. :has() (already used in this codebase, e.g.
   css/style.css:28311) is used here purely as a page-state guard so this
   restyle only ever applies while the myIncite new UI is on screen. */
body:has(#InciteWrapper.is-myincite-ui) .tooltip-inner {
    background: var(--nui-bg-dark, #1e293b);
    color: #fff;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    font-family: var(--nui-font);
}
/* Recolor the arrow per placement so it matches the new fill instead of
   the base stylesheet's #000 (style.css sets border-*-color per
   placement rather than a single .tooltip-arrow color, so each
   placement/corner variant needs its own override). */
body:has(#InciteWrapper.is-myincite-ui) .tooltip.top .tooltip-arrow,
body:has(#InciteWrapper.is-myincite-ui) .tooltip.top-left .tooltip-arrow,
body:has(#InciteWrapper.is-myincite-ui) .tooltip.top-right .tooltip-arrow {
    border-top-color: var(--nui-bg-dark, #1e293b);
}
body:has(#InciteWrapper.is-myincite-ui) .tooltip.bottom .tooltip-arrow,
body:has(#InciteWrapper.is-myincite-ui) .tooltip.bottom-left .tooltip-arrow,
body:has(#InciteWrapper.is-myincite-ui) .tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: var(--nui-bg-dark, #1e293b);
}
body:has(#InciteWrapper.is-myincite-ui) .tooltip.left .tooltip-arrow {
    border-left-color: var(--nui-bg-dark, #1e293b);
}
body:has(#InciteWrapper.is-myincite-ui) .tooltip.right .tooltip-arrow {
    border-right-color: var(--nui-bg-dark, #1e293b);
}

/* ==========================================================================
   13. ACTIVE PILL
   .nui-nav-btn.active / .nui-sub-btn.active already fill with the flat
   var(--nui-bg-active) token and get a 3px accent bar (section 3 above);
   radius is each button's own base radius (10px / 8px, new-ui.css) and
   is left untouched. Layer a softer, brand-derived tint on top so the
   active pill reads as a tinted wash rather than a flat gray-blue block.
   Uses color-mix so the tint always tracks --nui-brand; the plain
   var(--nui-bg-brand-light) declaration immediately before it is the
   fallback for browsers without color-mix() support. */
.nui-nav-btn.active {
    background: var(--nui-bg-brand-light);
    background: color-mix(in srgb, var(--nui-brand) 10%, var(--nui-bg-brand-light) 90%);
}
.nui-sub-btn.active {
    background: var(--nui-bg-brand-light);
    background: color-mix(in srgb, var(--nui-brand) 8%, var(--nui-bg-brand-light) 92%);
}

/* ==========================================================================
   14. THIN SCROLLBARS
   new-ui.css only thins .nui-sb-nav's own scrollbar (4px, hardcoded
   #d1d5db thumb, no hover state). Align every other scrollable rail/
   topbar/filter-drawer surface to one 6px spec built from the existing
   --nui-border / --nui-border-hover tokens instead of duplicating a
   second ad-hoc scrollbar rule set.
   ========================================================================== */
.nui-sb-nav::-webkit-scrollbar,
.nui-ss-inner::-webkit-scrollbar,
.nui-flyout::-webkit-scrollbar,
.nui-navsearch-dd::-webkit-scrollbar,
.nui-tb-dd-menu::-webkit-scrollbar,
.nui-tb-notif-list::-webkit-scrollbar,
.nui-tb-search-results::-webkit-scrollbar,
.nui-tb-bc-dd-list::-webkit-scrollbar,
.is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar::-webkit-scrollbar,
.is-myincite-ui.nui-page-filter-drawer aside.page-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.nui-sb-nav::-webkit-scrollbar-track,
.nui-ss-inner::-webkit-scrollbar-track,
.nui-flyout::-webkit-scrollbar-track,
.nui-navsearch-dd::-webkit-scrollbar-track,
.nui-tb-dd-menu::-webkit-scrollbar-track,
.nui-tb-notif-list::-webkit-scrollbar-track,
.nui-tb-search-results::-webkit-scrollbar-track,
.nui-tb-bc-dd-list::-webkit-scrollbar-track,
.is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar::-webkit-scrollbar-track,
.is-myincite-ui.nui-page-filter-drawer aside.page-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.nui-sb-nav::-webkit-scrollbar-thumb,
.nui-ss-inner::-webkit-scrollbar-thumb,
.nui-flyout::-webkit-scrollbar-thumb,
.nui-navsearch-dd::-webkit-scrollbar-thumb,
.nui-tb-dd-menu::-webkit-scrollbar-thumb,
.nui-tb-notif-list::-webkit-scrollbar-thumb,
.nui-tb-search-results::-webkit-scrollbar-thumb,
.nui-tb-bc-dd-list::-webkit-scrollbar-thumb,
.is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar::-webkit-scrollbar-thumb,
.is-myincite-ui.nui-page-filter-drawer aside.page-sidebar::-webkit-scrollbar-thumb {
    background: var(--nui-border);
    border-radius: 3px;
}
.nui-sb-nav::-webkit-scrollbar-thumb:hover,
.nui-ss-inner::-webkit-scrollbar-thumb:hover,
.nui-flyout::-webkit-scrollbar-thumb:hover,
.nui-navsearch-dd::-webkit-scrollbar-thumb:hover,
.nui-tb-dd-menu::-webkit-scrollbar-thumb:hover,
.nui-tb-notif-list::-webkit-scrollbar-thumb:hover,
.nui-tb-search-results::-webkit-scrollbar-thumb:hover,
.nui-tb-bc-dd-list::-webkit-scrollbar-thumb:hover,
.is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar::-webkit-scrollbar-thumb:hover,
.is-myincite-ui.nui-page-filter-drawer aside.page-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--nui-border-hover);
}

/* ==========================================================================
   15. MICRO-PRESS
   :active { transform: scale(.985) } with a 120ms transform transition.
   .nui-nav-btn / .nui-sub-btn / .nui-tb-icon-btn already carry a
   `transition: background-color 150ms ease-out, color 150ms ease-out
   !important;` from section 2 above — re-declaring the shorthand here
   (same specificity, later in source, still !important) is required to
   *add* transform without silently dropping that existing motion, since
   only one `transition` shorthand value can win per element.
   ========================================================================== */
.nui-nav-btn,
.nui-sub-btn,
.nui-tb-icon-btn {
    transition: transform 120ms ease-out, background-color 150ms ease-out, color 150ms ease-out !important;
}
/* .nui-flyout-item's own "all .12s" (new-ui.css) and .nui-bb-chip /
   .nui-navsearch-row (no prior transition) aren't guarded by !important,
   so a plain override is enough. */
.nui-flyout-item {
    transition: transform 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}
.nui-bb-chip,
.nui-navsearch-row {
    transition: transform 120ms ease-out;
}

.nui-nav-btn:active,
.nui-sub-btn:active,
.nui-tb-icon-btn:active,
.nui-bb-chip:active,
.nui-flyout-item:active,
.nui-navsearch-row:active {
    transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .nui-nav-btn,
    .nui-sub-btn,
    .nui-tb-icon-btn,
    .nui-bb-chip,
    .nui-flyout-item,
    .nui-navsearch-row {
        transition: none !important;
    }
    .nui-nav-btn:active,
    .nui-sub-btn:active,
    .nui-tb-icon-btn:active,
    .nui-bb-chip:active,
    .nui-flyout-item:active,
    .nui-navsearch-row:active {
        transform: none !important;
    }
}

/* ==========================================================================
   16. TOPBAR DEFINITION
   .nui-topbar already has a 1px hairline (new-ui.css:
   "border-bottom: 1px solid var(--nui-border)") — not restated here.
   Layer a "scrolled" state on top of it, toggled by newUiTopbar.js's
   passive scroll listener on #AppContainer — the confirmed content
   scroller (new-ui.css: "#InciteWrapper.is-myincite-ui #AppContainer {
   flex: 1; overflow: auto; }", and #AppContainer is a static, always-
   present element in index.html, not behind an ng-if). See newUiTopbar.js
   for the listener that adds/removes this class.
   ========================================================================== */
.nui-tb-scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom-color: var(--nui-border-hover);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   17. SECTION LABEL RHYTHM
   Unifies .nui-nav-section-lbl with the other micro-labels that used
   slightly different weights/tracking for the same "small caps eyebrow"
   role: .nui-flyout-header / .nui-flyout-subheader (new-ui.css),
   .nui-ss-header (second-sidebar tree header, new-ui.css), and
   .nui-navsearch-group-header (command-palette.css, already close at
   11px/600/.04em — nudged to match exactly).
   ========================================================================== */
.nui-nav-section-lbl,
.nui-flyout-header,
.nui-flyout-subheader,
.nui-ss-header,
.nui-navsearch-group-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--nui-text-muted);
}

/* Logo block: new-ui.css's .nui-sb-logo already has the hairline divider
   under it (border-bottom: 1px solid var(--nui-border-subtle)) — only
   the padding is tightened here, ~15% down from 14px 16px. */
.nui-sb-logo {
    padding: 12px 14px;
}

/* ==========================================================================
   18. NOTIFICATION PULSE
   Runs once per mount (ng-if fully re-inserts .nui-tb-notif-dot /
   .nui-tb-notif-badge each time unseenDashboardNotifications flips from
   0, so a fixed iteration-count animation naturally replays "on mount"
   without any JS hook). color-mix keeps the ring tied to
   --nui-destructive (#ef4444, the same token the dot/badge fill already
   uses) instead of a hardcoded rgba value.
   ========================================================================== */
@keyframes nuiNotifPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nui-destructive) 35%, transparent); }
    50%  { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nui-destructive) 12%, transparent); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nui-destructive) 0%, transparent); }
}
.nui-tb-notif-dot,
.nui-tb-notif-badge {
    animation: nuiNotifPulse 900ms ease-out 2;
}
@media (prefers-reduced-motion: reduce) {
    .nui-tb-notif-dot,
    .nui-tb-notif-badge {
        animation: none;
    }
}

/* ==========================================================================
   19. LAPTOP TIER (<=1366px)
   The New UI is otherwise fixed-width; this is the first real responsive
   tier above the small nav-search-only query in command-palette.css
   (<=1100px). Rail widths (--nui-rail-w / --nui-rail-w-collapsed-lbl) are
   left untouched on purpose — the collapsed-rail flyout (new-ui.css) is
   anchored to --nui-rail-w-collapsed-lbl and must not shift.
   ========================================================================== */
@media (max-width: 1366px) {
    /* Topbar: reclaim horizontal space (~25% less padding) */
    .nui-topbar {
        padding: 0 15px;
    }
    .nui-tb-actions {
        gap: 4px;
    }

    /* Breadcrumb: drop the secondary crumb, keep the primary section label */
    .nui-tb-bc-sub,
    .nui-tb-bc-sep {
        display: none;
    }

    /* Secondary sidebar (tracker tree / roster tabs) — ~15% narrower */
    .nui-second-sidebar,
    .nui-ss-inner {
        width: 204px;
    }

    /* Roster filter panel dropdown — ~15% narrower (source rule is !important) */
    .is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar,
    .is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar.page-sidebar,
    .is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar.page-sidebar-hidden,
    .is-myincite-ui.nui-has-filter-panel aside.animation_hide-sidebar.h100 {
        width: 289px !important;
    }

    /* Courses / Digital Classrooms filter drawer — ~15% narrower */
    .is-myincite-ui.nui-page-filter-drawer[data-nui-filter-group="panel"] aside.page-sidebar {
        width: 306px;
    }
}

/* Nav search: this file loads AFTER command-palette.css, so its <=1100px
   rule (220px / 280px) must keep winning below 1101px. Scoping this rule to
   1101-1366px avoids that fight while still shrinking the resting/focused
   widths for the laptop tier. */
@media (min-width: 1101px) and (max-width: 1366px) {
    .nui-navsearch {
        width: 240px;
    }
    .nui-navsearch.focused {
        width: 320px;
    }
}

/* ==========================================================================
   20. COMPACT SAFETY NET (<=1024px)
   Minimal "don't break" fallback below the laptop tier: an expanded rail
   (user explicitly toggled it open) overlays content instead of pushing it,
   and the second sidebar becomes a full-height overlay. Content keeps the
   collapsed-rail offset either way.
   ========================================================================== */
@media (max-width: 1024px) {
    #InciteWrapper.is-myincite-ui:not(.nui-sb-collapsed) .nui-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 260;
        box-shadow: 4px 0 24px rgba(15, 23, 42, .22);
    }
    #InciteWrapper.is-myincite-ui:not(.nui-sb-collapsed) #ContentWrapper {
        /* the labelled collapsed rail, not the icon-only width */
        margin-left: var(--nui-rail-w-collapsed-lbl);
    }

    .nui-second-sidebar:not(.hidden) {
        position: fixed;
        top: 48px; /* below .nui-topbar */
        left: var(--nui-rail-w-collapsed-lbl);
        bottom: 0;
        height: calc(100vh - 48px);
        z-index: 250;
        box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
    }
}

/* ==========================================================================
   21. TRACKER NAV SEARCH / RECENTS / FAVORITES / LISTING FILTER
   Four small additions, all inert with the New UI off:
   - nav search (command-palette.js) merges in tracker views via
     $rootScope.nuiDynamicCommands, built in newUiSidebar.js
   - "Recent" / "My Views" micro-groups in the Views & Tools sub-list and
     flyout (same .nui-sub-btn / .nui-flyout-item rows, no new classes to
     size — just the section-label + row treatment below)
   - a star toggle in the second-sidebar tracker tree rows (.nui-ss-view-btn)
   - a live-filter input on the /Trackers listing, styled after .nui-navsearch
   ========================================================================== */

/* "Recent" / "My Views" section labels in the first-sidebar sub-list —
   same small-caps eyebrow treatment as .nui-nav-section-lbl / .nui-ss-header. */
.nui-sub-micro-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--nui-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 6px 10px 4px;
}
.nui-sub-micro-label:first-child {
    padding-top: 0;
}

/* Star toggle inside a tracker-tree row (.nui-ss-view-btn) — hidden until
   the row is hovered/focused, always visible once favorited. */
.nui-ss-view-btn {
    position: relative;
}
.nui-ss-star {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 6px;
    color: var(--nui-text-muted);
    opacity: 0;
    transition: opacity 100ms ease-out, color 100ms ease-out, background 100ms ease-out;
}
.nui-ss-view-btn:hover .nui-ss-star,
.nui-ss-view-btn:focus-within .nui-ss-star,
.nui-ss-star--fav {
    opacity: 1;
}
.nui-ss-star:hover {
    background: var(--nui-bg-hover);
    color: var(--nui-brand);
}
.nui-ss-star--fav {
    color: var(--nui-brand);
}

/* Live filter input on the /Trackers listing — mimics .nui-navsearch
   (command-palette.css) without the dropdown/kbd affordances. */
.nui-trackers-listing-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 260px;
    max-width: 100%;
    height: 32px;
    padding: 0 10px;
    background: var(--nui-bg-light);
    border: 1px solid var(--nui-border);
    border-radius: 8px;
    font-family: var(--nui-font);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.nui-trackers-listing-search:focus-within {
    background: var(--nui-bg-white);
    border-color: var(--nui-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nui-brand) 12%, transparent);
}
.nui-trackers-listing-search-icon {
    display: flex;
    align-items: center;
    color: var(--nui-text-muted);
    margin-right: 8px;
    flex: none;
}
.nui-trackers-listing-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--nui-text-dark);
    font-family: inherit;
}
.nui-trackers-listing-search-input::placeholder {
    color: var(--nui-text-muted);
}

/* ---------- 22. TRACKER RECENT/MY VIEWS GROUPS — visually distinct ---------- */
.nui-sub-group {
    margin: 2px 0 8px;
    padding: 6px 6px 4px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.08);
}
.is-myincite-ui.nui-dark-rail .nui-sub-group {
    background: rgba(255, 255, 255, 0.05);
}
.nui-sub-group .nui-sub-micro-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.nui-sub-group-icon {
    font-size: 10px;
    opacity: 0.7;
}
.nui-sub-btn--compact {
    min-height: 26px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12.5px;
    opacity: 0.85;
}
.nui-sub-btn--compact:hover { opacity: 1; }
.nui-sub-compact-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Home > My Digital Classrooms: clickable group label (opens the full page),
   a hover-revealed sort switch beside it, one-line classroom rows (course name
   in the tooltip), drag-to-arrange in custom order, and an "All N classrooms"
   row once the list passes the cap. */
/* Home accordion headers: the group label is a button with a count and a
   chevron; one group open at a time (newUiSidebar.js isHomeGroupOpen). */
.nui-sub-acc { display: flex; align-items: center; gap: 6px; width: 100%; }
.nui-sub-acc-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nui-sub-acc-count {
    flex: none;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .18);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    opacity: .8;
}
.is-myincite-ui.nui-dark-rail .nui-sub-acc-count { background: rgba(255, 255, 255, .12); }
.nui-sub-acc-chev { flex: none; font-size: 9px; opacity: .55; transition: transform 120ms ease-out; }
.nui-sub-group.is-open .nui-sub-acc-chev { transform: rotate(90deg); }
.nui-sub-acc.has-active .nui-sub-acc-count { background: var(--nui-brand, #0074C5); color: #fff; opacity: 1; }
.nui-sub-group:not(.is-open) { padding-bottom: 6px; margin-bottom: 4px; }
.nui-sub-group:not(.is-open) .nui-sub-micro-label { margin-bottom: 0; }
/* Fold/unfold eases over ~240ms so an auto-folding group reads as closing,
   not vanishing: height via the 0fr/1fr grid trick (no fixed max-height),
   rows fade slightly behind it. */
.nui-sub-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 240ms cubic-bezier(.2, .7, .2, 1);
}
.nui-sub-group.is-open .nui-sub-acc-body { grid-template-rows: 1fr; }
.nui-sub-acc-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 160ms ease-out;
}
.nui-sub-group.is-open .nui-sub-acc-inner { opacity: 1; transition: opacity 200ms ease-out 80ms; }
.nui-sub-group.is-open .nui-sub-acc-body { padding-top: 2px; }
.nui-sub-acc-chev { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
    .nui-sub-acc-body, .nui-sub-acc-inner, .nui-sub-acc-chev { transition: none; }
}
.nui-sub-micro-row { display: flex; align-items: center; }
.nui-sub-micro-row .nui-sub-micro-label { flex: 1; min-width: 0; }
.nui-sub-micro-tool {
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--nui-text-muted);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 100ms ease-out, color 100ms ease-out, background 100ms ease-out;
}
.nui-sub-group--classes:hover .nui-sub-micro-tool,
.nui-sub-micro-tool:focus-visible,
.nui-sub-micro-tool.is-on { opacity: 1; }
.nui-sub-micro-tool:hover { background: var(--nui-bg-hover); color: var(--nui-text-secondary); }
.nui-sub-micro-tool.is-on { color: var(--nui-brand, #0074C5); }
.is-myincite-ui.nui-dark-rail .nui-sub-micro-tool:hover { background: rgba(255, 255, 255, .1); }

.nui-sub-micro-label.nui-sub-micro-link {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.nui-sub-micro-label.nui-sub-micro-link:hover,
.nui-sub-micro-label.nui-sub-micro-link.active { color: var(--nui-text-secondary); }
.nui-sub-btn--class {
    min-width: 0;
}
.nui-sub-btn--class[draggable="true"] { cursor: grab; }
.nui-sub-btn--class[draggable="true"]:active { cursor: grabbing; }
.nui-sub-btn--class.is-drag-over { box-shadow: inset 0 2px 0 var(--nui-brand, #0074C5); }
.nui-sub-btn--all .nui-sub-compact-label { font-weight: 600; opacity: .8; }
/* Views & Tools > My Favorites: one row per category, count and a chevron that
   says "pops out"; the row stays highlighted while its panel is open. */
.nui-sub-cat-count { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; opacity: .55; padding-left: 8px; }
.nui-sub-btn--favcat .nui-sub-chev { font-size: 9px; opacity: .5; margin-left: 6px; }
.nui-sub-btn--favcat.is-popped { background: var(--nui-bg-hover); }
.nui-sub-btn--favcat.is-popped .nui-sub-chev, .nui-sub-btn--favcat.active .nui-sub-cat-count { opacity: .9; }
.is-myincite-ui.nui-dark-rail .nui-sub-btn--favcat.is-popped { background: rgba(255, 255, 255, .08); }
.nui-sub-empty { padding: 4px 10px 8px; font-size: 12px; color: var(--nui-text-muted); }
/* ---------- MY FAVORITES CASCADING MENU (Views & Tools, expanded rail) ---------- */
/* Root panel fixed beside the rail; every deeper level is a .nui-cascade-panel
   absolutely positioned to the right of its row and shown on hover or tap.
   Brand-blue header band and a deep shadow so it reads as a menu over the page. */
.nui-cascade {
    display: none;
    position: fixed;
    left: calc(var(--nui-rail-w) + 8px);
    top: 10px;
    z-index: 260;
    min-width: 232px;
    max-width: 300px;
    background: #fff;
    border: 1px solid rgba(0, 116, 197, .18);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .12);
    font-family: var(--nui-font);
    overflow: visible;
}
.nui-cascade.open { display: block; }
.nui-cascade-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--nui-brand, #0074C5), var(--nui-brand-teal, #00AEC4));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.nui-cascade-header i { font-size: 10px; opacity: .9; }
.nui-cascade > div > div > .nui-cascade-panel { position: static; box-shadow: none; border: 0; border-radius: 0 0 12px 12px; }
.nui-cascade-panel {
    padding: 6px;
    min-width: 232px;
    max-width: 300px;
    background: #fff;
}
.nui-cascade-view,
.nui-cascade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nui-text, #1f2937);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.nui-cascade-view:hover, .nui-cascade-row:hover,
.nui-cascade-sub.is-open > .nui-cascade-row { background: rgba(0, 116, 197, .08); color: var(--nui-brand, #0074C5); }
.nui-cascade-view.active { background: var(--nui-brand, #0074C5); color: #fff; font-weight: 600; }
.nui-cascade-row.active .nui-cascade-row-label { color: var(--nui-brand, #0074C5); font-weight: 600; }
.nui-cascade-view-label, .nui-cascade-row-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nui-cascade-row-count { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; opacity: .55; }
.nui-cascade-row-chev { flex: none; font-size: 9px; opacity: .55; }
/* Submenu: to the right of its row, overlapping the parent edge so the pointer
   never crosses a gap; opened by hover (pointer) or the is-open class (tap). */
.nui-cascade-sub { position: relative; }
.nui-cascade-sub > div > .nui-cascade-panel {
    display: none;
    position: absolute;
    left: calc(100% + 2px);
    top: -6px;
    z-index: 1;
    border: 1px solid rgba(0, 116, 197, .18);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .12);
}
.nui-cascade-sub:hover > div > .nui-cascade-panel,
.nui-cascade-sub.is-open > div > .nui-cascade-panel { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .nui-cascade.open, .nui-cascade-sub:hover > div > .nui-cascade-panel, .nui-cascade-sub.is-open > div > .nui-cascade-panel { animation: nui-cascade-in 120ms ease-out; }
}
@keyframes nui-cascade-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }

/* ---------- COLLAPSED-RAIL FLYOUTS: same look as the favorites menu ---------- */
/* Solid white, brand hairline, deep shadow, gradient header band flush with the
   top; rows at the cascade size. The trackers flyout (cascade items) must not
   scroll, or the submenus to its right would be clipped. */
.nui-flyout {
    width: 256px;
    padding: 0 6px 6px;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(0, 116, 197, .18);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .12);
}
.nui-flyout.nui-flyout--cascade { overflow: visible; max-height: none; }
.nui-flyout .nui-flyout-header {
    flex: none;
    margin: 0 -6px 6px;
    padding: 10px 14px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--nui-brand, #0074C5), var(--nui-brand-teal, #00AEC4));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.nui-flyout .nui-flyout-item {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nui-text, #1f2937);
}
.nui-flyout .nui-flyout-item:hover { background: rgba(0, 116, 197, .08); color: var(--nui-brand, #0074C5); }
.nui-flyout .nui-flyout-item.active { background: var(--nui-brand, #0074C5); color: #fff; font-weight: 600; }
.nui-flyout .nui-flyout-cat { font-size: 13px; font-weight: 600; border-top-color: rgba(0, 116, 197, .12); }
.nui-flyout .nui-flyout-subheader { padding-top: 8px; }
.nui-flyout .nui-cascade-sub > div > .nui-cascade-panel { left: calc(100% + 8px); }
.nui-sub-btn--all .nui-sub-chev { font-size: 9px; opacity: .6; }


/* breadcrumb section link (no-dropdown case) */
.nui-tb-bc-link:hover span { color: var(--nui-brand, #0074C5); }

/* ==========================================================================
   23. NAV GROUP SPACING
   The rail has three implicit zones — Home block, center modules
   (Views & Tools ... Marketing), and the Roster-block (Roster ... Admin,
   already set off by .nui-nav-divider). Today the only separation between
   Home and the center-modules block is each button's own 2px
   margin-bottom (new-ui.css) — no group-level whitespace. Widen the
   existing divider's margin and add a matching top margin to the first
   button of the center-modules block so all three zones read as distinct
   groups via whitespace, not new borders (the divider count stays at one).
   ========================================================================== */
.nui-sidebar .nui-nav-divider {
    margin: 16px 0;
}
.nui-nav-group-gap {
    margin-top: 14px;
}

/* ==========================================================================
   24. TOPBAR ZONE SPACING
   Defines consistent gaps between the topbar's zones: breadcrumbs | nav
   search | right utility icon cluster | separator | org selector + avatar.
   .nui-tb-actions' own 6px gap already keeps the icon cluster tight — left
   as-is. Only the search's margins and the gap ahead of the cross-client
   "org selector" toggle are widened here.
   ========================================================================== */
.nui-topbar .nui-navsearch {
    margin-left: 24px;
    margin-right: 24px;
}
.nui-tb-actions .nui-tb-cross-client {
    margin-left: 12px;
}

/* ==========================================================================
   25. CHEVRON SIZE
   The visible glyph was pinned to 11px via an inline style on the <i>
   (new-ui-sidebar.html), overriding .nui-nav-chev's own 14px (new-ui.css).
   That inline override is removed from the template; set the real target
   size here instead so it applies through the CSS layer like every other
   sizing rule in this file. Rotation transition (.2s, default "ease"
   timing) and 90deg rotate are untouched — already met the 200ms-ease spec.
   ========================================================================== */
.nui-nav-btn .nui-nav-chev {
    font-size: 13px;
}
/* A chevron that folds on its own (Views & Tools, whose label always opens the
   catalog): give it a hit area and a hover so it reads as a control. */
.nui-nav-btn .nui-nav-chev[ng-click] {
    padding: 6px;
    margin: -6px -2px -6px 0;
    border-radius: 6px;
    cursor: pointer;
}
.nui-nav-btn .nui-nav-chev[ng-click]:hover { background: var(--nui-bg-hover); }
.is-myincite-ui.nui-dark-rail .nui-nav-btn .nui-nav-chev[ng-click]:hover { background: rgba(255, 255, 255, .12); }

/* ==========================================================================
   26. NAV LABEL SIZE
   .nui-nav-btn / .nui-sub-btn labels were 16px (new-ui.css) — down to a
   consistent 13px per the typography spec. Weight hierarchy (500 top-level,
   400 sub-item, 600 active/section-label) already exists in new-ui.css /
   §17 and is untouched here.
   ========================================================================== */
.nui-nav-btn,
.nui-sub-btn {
    font-size: 13px;
}

/* Home sub-list groups (My Digital Classrooms, Recent Views & Tools, My Views):
   flat labelled sections lined up with My Dashboard, not shaded boxes */
.nui-sidebar .nui-sub-list .nui-sub-group,
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-list .nui-sub-group {
    margin: 10px 0 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.nui-sidebar .nui-sub-list .nui-sub-group .nui-sub-micro-label {
    padding: 0 10px 4px;
    font-size: 10.5px;
}
.nui-sidebar .nui-sub-list .nui-sub-group .nui-sub-btn--compact { opacity: 1; font-size: 13.5px; }
/* classroom rows: one line, the classroom name (course name is in the tooltip) */
.nui-sidebar .nui-sub-btn--class .nui-sub-compact-label { font-weight: 500; }
/* the active classroom: quiet neutral tint (its Courses accent clashed under Home) */
.is-myincite-ui.nui-dark-rail .nui-sidebar .nui-sub-btn--class.active { background: rgba(255, 255, 255, .08); }
.nui-sidebar .nui-sub-btn--class.active { background: rgba(0, 116, 197, .08); }

/* ---------- MY SHORTCUTS (Home rail group + topbar pin) ---------- */
/* Rail rows: compact view rows with the destination's section icon and a
   remove control that appears on hover/focus (same reveal as .nui-ss-star). */
.nui-sub-pin-row {
    position: relative;
    display: flex;
    align-items: center;
}
.nui-sub-btn--pin { padding-right: 26px; }
.nui-sub-pin-icon {
    flex: none;
    width: 14px;
    font-size: 12px;
    text-align: center;
    opacity: .7;
}
.nui-sub-btn--pin.active .nui-sub-pin-icon { opacity: 1; }
.nui-sub-pin-remove {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--nui-text-muted);
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 100ms ease-out, color 100ms ease-out, background 100ms ease-out;
}
.nui-sub-pin-row:hover .nui-sub-pin-remove,
.nui-sub-pin-row:focus-within .nui-sub-pin-remove { opacity: 1; }
.nui-sub-pin-remove:hover { background: var(--nui-bg-hover); color: #dc2626; }
.is-myincite-ui.nui-dark-rail .nui-sub-pin-remove:hover { background: rgba(255, 255, 255, .1); color: #fca5a5; }

/* Topbar pin: sits right after the breadcrumb; tilted outline when the page is
   not pinned, upright brand-blue when it is; a short "Added to Home" flash on pin. */
.nui-tb-pin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nui-text-muted, #94a3b8);
    cursor: pointer;
    flex: none;
}
.nui-tb-pin .material-symbols-rounded {
    font-size: 19px;
    transform: rotate(45deg);
    transition: transform 150ms ease-out, color 150ms ease-out;
}
.nui-tb-pin:hover { background: var(--nui-bg-hover, #f1f5f9); color: var(--nui-brand, #0074C5); }
.nui-tb-pin.pinned { color: var(--nui-brand, #0074C5); }
.nui-tb-pin.pinned .material-symbols-rounded { transform: rotate(0deg); }
.nui-tb-pin.full { color: var(--nui-text-muted, #94a3b8); cursor: not-allowed; }
.nui-tb-pin.full:hover { background: transparent; color: var(--nui-text-muted, #94a3b8); }
.nui-tb-pin-flash {
    position: absolute;
    left: 50%;
    top: calc(100% + 4px);
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: nui-pin-flash 1.4s ease-out forwards;
    z-index: 5;
}
@keyframes nui-pin-flash {
    0% { opacity: 0; transform: translate(-50%, -4px); }
    15% { opacity: 1; transform: translate(-50%, 0); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}