/* fsq-navbar.css: FSQ top bar + mobile offcanvas styles - Adapted from the mERP shell; provenance in the FSQ Brain (brain/ui/fsq_shell_guide.md). */

/* Environment banner offset */
.navbar.fixed-top { top: var(--merp-env-h, 0px); }

/* Mobile chip-row height token: 0 on desktop, 44px on mobile */
:root { --merp-chiprow-h: 0px; }
@media (max-width: 991px) { :root { --merp-chiprow-h: 44px; } }

/* App-like pill nav feel */
    .app-nav .nav-link{
        border-radius: 999px;
        padding: .45rem .85rem;
        margin-right: .25rem;
        color: rgba(0,0,0,.65);
        font-weight: 500;
        font-size: .95rem;
        border: 2px solid transparent;
    }
    .app-nav .nav-link:hover{
        background: rgba(0,0,0,.06);
        color: rgba(0,0,0,.85);
    }

table .app-nav .nav-link.active,
.app-nav .nav-link.active{
    background: var(--fsq-selected-bg) !important;
    color: var(--fsq-selected-fg) !important; /* brand plum (D-BRAND-2): selected pair, 9.12:1 on the pale fill */
    font-weight: 700 !important;
    border: 2px solid var(--fsq-selected-border) !important;
    box-shadow: 0 2px 8px rgba(var(--fsq-brand-rgb), .2) !important;
}

    /* Section dropdown button styling */
    .section-dropdown{
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        border-radius: 999px;
        padding: .45rem .95rem;
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: .3px;
        color: rgba(0,0,0,.85);
        background: transparent;
        border: none;
        transition: background .2s ease;
        text-decoration: none;
    }
    .section-dropdown:hover{
        background: rgba(0,0,0,.06);
        color: rgba(0,0,0,.85);
    }
    .section-dropdown::after{
        display: none;
    }
    .section-dropdown .bi{
        font-size: .8rem;
        opacity: .7;
    }

    /* Section dropdown menu */
    .section-dropdown-menu{
        border-radius: .75rem;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        border: 1px solid rgba(0,0,0,.08);
        padding: .5rem;
        min-width: 200px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .section-dropdown-menu .dropdown-item{
        border-radius: .5rem;
        padding: .5rem .75rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .section-dropdown-menu .dropdown-item .bi{
        font-size: 1.1rem;
        opacity: .7;
    }
    .section-dropdown-menu .dropdown-item:hover{
        background: var(--fsq-subtle-bg);
    }
    .section-dropdown-menu .dropdown-item.active{
        background: rgba(var(--fsq-brand-rgb), .12);
        color: var(--fsq-selected-fg); /* brand plum (D-BRAND-2) */
        font-weight: 600;
    }

    /* Divider between logo and section */
    .nav-divider{
        width: 1px;
        height: 24px;
        background: rgba(0,0,0,.1);
        margin: 0 .5rem 0 .25rem;
    }

    /* Sub-link dropdown styling */
    .nav-link.dropdown-toggle::after{
        margin-left: .35rem;
        font-size: .75rem;
    }
    .sub-link-dropdown-menu{
        border-radius: .5rem;
        box-shadow: 0 .35rem .85rem rgba(0,0,0,.12);
        border: 1px solid rgba(0,0,0,.08);
        padding: .35rem;
        min-width: 180px;
    }
    .sub-link-dropdown-menu .dropdown-item{
        border-radius: .4rem;
        padding: .4rem .65rem;
        font-size: .9rem;
    }
    .sub-link-dropdown-menu .dropdown-item:hover{
        background: var(--fsq-subtle-bg);
    }

    /* Brand polish */
    .navbar .navbar-brand{
        letter-spacing: .2px;
    }

    /* Section Icon Colors */
    .section-icon-slate { color: #64748b !important; }
    .section-icon-blue { color: #3b82f6 !important; }
    .section-icon-purple { color: #a855f7 !important; }
    .section-icon-orange { color: #f97316 !important; }
    .section-icon-teal { color: #8A5CAB !important; } /* family class name kept; value is the SOP light plum accent */
    .section-icon-green { color: #22c55e !important; }
    .section-icon-gray { color: #6b7280 !important; }
    .section-icon-gold { color: #eab308 !important; }
    .section-icon-magenta { color: #ec4899 !important; }
    .section-icon-charcoal { color: #1f2937 !important; }
    .section-icon-indigo { color: #6366f1 !important; }
    .section-icon-dark-gray { color: #4b5563 !important; }
    .section-icon-red { color: #e74c3c !important; }
    .section-icon-brown { color: #b45309 !important; }
    .section-icon-steel { color: #708090 !important; }
    .section-icon-emerald { color: #10b981 !important; }

    /* Logo animation */
    .logo-badge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.08rem;
        font-weight: 600;
        letter-spacing: .2px;
        padding-top: .39rem;
        padding-bottom: .35rem;
        animation: logoIn .55s ease-out both;
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .logo-badge:hover{
        transform: translateY(-1px) scale(1.06);
        box-shadow: 0 10px 18px rgba(0,0,0,.18);
    }
    @keyframes logoIn{
        from { transform: scale(.88); opacity: 0; }
        to   { transform: scale(1);   opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce){
        .logo-badge{ animation: none; transition: none; }
        .logo-badge:hover{ transform: none; box-shadow: none; }
    }

    /* User avatar chip */
    .user-chip{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--fsq-brand-fill);
        border: none;
        box-shadow: 0 2px 8px rgba(var(--fsq-brand-fill-rgb), .35);
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .5px;
        transition: all .2s ease;
        padding: 0;
        text-decoration: none;
    }
    .user-chip:hover{
        background: var(--fsq-brand-fill-hover);
        color: var(--fsq-on-brand-hover);
        box-shadow: 0 3px 12px rgba(var(--fsq-brand-fill-rgb), .45);
        transform: translateY(-1px);
    }
    .user-chip .bi{ font-size: 1.2rem; }
    .user-chip::after{ display: none; }

    /* ================================================================
       MOBILE PATTERNS (< 992px)
       ================================================================ */

    /* Mobile context breadcrumb text (center of mobile top bar) */
    .merp-mobile-ctx {
        font-size: .88rem;
        font-weight: 600;
        color: rgba(0,0,0,.72);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 44vw;
        line-height: 1.2;
    }

    /* Mobile hamburger button */
    .merp-mobile-hamburger {
        background: transparent;
        border: 1px solid rgba(0,0,0,.18);
        border-radius: .4rem;
        padding: .35rem .45rem;
        cursor: pointer;
        line-height: 1;
        flex-shrink: 0;
    }

    /* Right nav: chip row on mobile (second flex row via CSS order trick) */
    @media (max-width: 991px) {
        .nav-divider { display: none; }

        /* User menu dropdown on mobile: pin to the viewport's top-right so it
           overlays page content instead of being trapped inside (and stretching)
           the overflow:auto chip strip. */
        #userMenu + .dropdown-menu.show,
        .dropdown-menu.merp-usermenu-portaled {
            position: fixed !important;
            top: calc(var(--merp-topnav-h, 56px) + var(--merp-chiprow-h, 44px) + 4px) !important;
            right: calc(8px + env(safe-area-inset-right, 0px)) !important;
            left: auto !important;
            bottom: auto !important;
            transform: none !important;
            max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
            max-height: calc(100vh - var(--merp-topnav-h, 56px) - var(--merp-chiprow-h, 44px) - 16px - env(safe-area-inset-bottom, 0px));
            overflow-y: auto;
            z-index: 1080;
        }
        #userMenu + .dropdown-menu .d-flex,
        .dropdown-menu.merp-usermenu-portaled .d-flex {
            flex-wrap: wrap;
        }

        /* Push right-nav items to second row inside the flex-wrapping navbar */
        #merpNavRight {
            order: 10;
            width: 100%;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 5px 12px;
            border-top: 1px solid rgba(0,0,0,.06);
            gap: .75rem !important;
            justify-content: flex-start !important;
        }
        #merpNavRight::-webkit-scrollbar { display: none; }
    }

    /* Offcanvas navigation link rows */
    .merp-offcanvas-link {
        display: flex;
        align-items: center;
        padding: .85rem 1.25rem;
        font-size: 1rem;
        font-weight: 500;
        color: #212529;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,.05);
        min-height: 52px;
        transition: background .12s ease;
        gap: .5rem;
    }
    .merp-offcanvas-link:hover {
        background: rgba(var(--fsq-brand-rgb), .05);
        color: var(--fsq-brand);
    }
    .merp-offcanvas-link.merp-offcanvas-active {
        background: var(--fsq-selected-bg);
        color: var(--fsq-selected-fg);
        font-weight: 600;
        border-left: 3px solid var(--fsq-selected-border);
        padding-left: calc(1.25rem - 3px);
    }
    .merp-offcanvas-section-hdr {
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6b7280;
        padding: .75rem 1.25rem .35rem;
    }

    /* Current-section subsection links: contained "section menu" card so the
       in-section links read as a distinct grouped menu, set apart from the
       plainer "Switch Section" list below. Shared across every section. */
    .merp-offcanvas-subgroup {
        /* flex:0 0 auto so this card keeps its natural height inside the
           flex-column offcanvas body (overflow:hidden would otherwise let it
           collapse to its border when the section list overflows). */
        flex: 0 0 auto;
        margin: .65rem .75rem .35rem;
        background: rgba(var(--fsq-brand-rgb), .045);
        border: 1px solid rgba(var(--fsq-brand-rgb), .14);
        border-radius: 12px;
        overflow: hidden;
    }
    .merp-offcanvas-subgroup .merp-offcanvas-section-hdr {
        color: var(--fsq-brand); /* brand plum (D-BRAND-2) */
        padding: .6rem 1rem .3rem;
    }
    /* Subsection rows differ from Switch Section rows: leading dot, bolder,
       transparent left rail that the active state fills in. */
    .merp-offcanvas-sublink {
        font-weight: 600;
        padding-left: 1rem;
        border-left: 4px solid transparent;
        border-bottom-color: rgba(var(--fsq-brand-rgb), .08);
    }
    .merp-offcanvas-subgroup .merp-offcanvas-sublink:last-child { border-bottom: 0; }
    .merp-subdot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: rgba(var(--fsq-brand-rgb), .4);
        flex-shrink: 0;
        margin-right: .15rem;
        transition: background .12s ease, transform .12s ease;
    }
    .merp-offcanvas-subgroup .merp-offcanvas-sublink.merp-offcanvas-active {
        background: var(--fsq-selected-bg);
        border-left-color: var(--fsq-selected-border);
        padding-left: 1rem;
    }
    .merp-offcanvas-sublink.merp-offcanvas-active .merp-subdot {
        background: var(--fsq-brand);
        transform: scale(1.3);
    }

    /* Dark mode overrides */
    [data-merp-theme="dark"] .merp-mobile-ctx { color: rgba(255,255,255,.8); }
    [data-merp-theme="dark"] .merp-mobile-hamburger { border-color: rgba(255,255,255,.2); }
    [data-merp-theme="dark"] #merpNavRight { border-top-color: rgba(255,255,255,.07); }
    [data-merp-theme="dark"] .merp-offcanvas-link { color: #e5e7eb; border-bottom-color: rgba(255,255,255,.05); }
    [data-merp-theme="dark"] .merp-offcanvas-link:hover { background: rgba(var(--fsq-brand-rgb), .09); color: var(--fsq-brand); }
    [data-merp-theme="dark"] .merp-offcanvas-link.merp-offcanvas-active {
        background: rgba(var(--fsq-brand-rgb), .12);
        color: var(--fsq-selected-fg);
        border-left-color: var(--fsq-selected-border);
    }
    [data-merp-theme="dark"] .merp-offcanvas-section-hdr { color: #9ca3af; }
    [data-merp-theme="dark"] .merp-offcanvas-subgroup {
        background: rgba(var(--fsq-brand-rgb), .06);
        border-color: rgba(var(--fsq-brand-rgb), .2);
    }
    [data-merp-theme="dark"] .merp-offcanvas-subgroup .merp-offcanvas-section-hdr { color: var(--fsq-brand); }
    [data-merp-theme="dark"] .merp-offcanvas-sublink { border-bottom-color: rgba(var(--fsq-brand-rgb), .1); }
    [data-merp-theme="dark"] .merp-offcanvas-subgroup .merp-offcanvas-sublink.merp-offcanvas-active {
        background: rgba(var(--fsq-brand-rgb), .18);
        border-left-color: var(--fsq-selected-border);
    }
    [data-merp-theme="dark"] .merp-subdot { background: rgba(var(--fsq-brand-rgb), .45); }
    [data-merp-theme="dark"] .merp-offcanvas-sublink.merp-offcanvas-active .merp-subdot { background: var(--fsq-brand); }
    /* ===== PWA-safe mobile back chevron =====
       Sits left of the mobile context breadcrumb. Mobile-only via the
       d-lg-none utility on the element; never shown on desktop. */
    .merp-mobile-back {
        display: inline-flex;
        align-items: center; justify-content: center;
        width: 36px; height: 36px;
        flex-shrink: 0;
        margin-right: 2px;
        border: 1px solid #d1d5db;
        border-radius: 50%;
        background: #fff;
        color: #374151;
        text-decoration: none;
        font-size: 15px; line-height: 1;
        transition: background .15s, color .15s, transform .12s;
    }
    .merp-mobile-back:hover { background: #f3f4f6; color: #111827; }
    .merp-mobile-back:active { background: #e5e7eb; transform: translateX(-1px); }
    [data-merp-theme="dark"] .merp-mobile-back {
        background: #1f2937; border-color: #374151; color: #d1d5db;
    }
    [data-merp-theme="dark"] .merp-mobile-back:hover { background: #2d3748; color: #f3f4f6; }

/* =====================================================================
   FSQ additions
   ===================================================================== */
/* Coming-soon destination tabs: not links, quiet but readable on the light bar */
.app-nav .nav-link.fsq-is-soon {
    display: inline-flex; align-items: center; gap: .3rem;
    color: #4f5864; cursor: default;
}
.app-nav .nav-link.fsq-is-soon:hover { background: transparent; color: #4f5864; }
.fsq-soon-icon { font-size: .72rem; opacity: .85; }

/* People helping chip (right chip row) - same shape as the chip-row pills, muted */
.fsq-help-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px dashed #c3cad5; background: rgba(108,117,125,.06); color: #4b5563;
    border-radius: 999px; font-weight: 700; font-size: .78rem; line-height: 1;
    padding: 4px 5px 4px 11px; white-space: nowrap; text-decoration: none;
}
a.fsq-help-chip { border-style: solid; padding-right: 11px; }
a.fsq-help-chip:hover, a.fsq-help-chip.is-active { background: var(--fsq-subtle-bg); border-color: rgba(var(--fsq-brand-rgb), .35); color: var(--fsq-brand); }
.fsq-help-chip .fsq-soon-pill { padding: .24rem .45rem; font-size: .64rem; }
@media (max-width: 991px) {
    .fsq-help-chip { min-height: 34px; }
}

/* Settings menu (language + theme) */
.fsq-menu-hdr { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #6c757d; }
.fsq-menu-gap { display: inline-block; width: 21px; }
.user-chip.dropdown-toggle { cursor: pointer; }

/* Skip link (shown on keyboard focus only) */
.fsq-skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 1100;
    background: #fff; color: var(--fsq-brand-fill); font-weight: 600; /* white surface in both themes, so the theme-stable plum */
    padding: .5rem .9rem; border-radius: .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* Visible keyboard focus on top-bar and offcanvas controls */
.navbar-brand:focus-visible,
.app-nav .nav-link:focus-visible,
.section-dropdown:focus-visible,
.merp-mobile-hamburger:focus-visible,
.merp-mobile-back:focus-visible,
.user-chip:focus-visible,
.fsq-help-chip:focus-visible,
.merp-offcanvas-link:focus-visible {
    outline: 2px solid var(--fsq-focus); outline-offset: 2px;
}

/* Offcanvas coming-soon rows */
.merp-offcanvas-link.fsq-is-soon { color: #6b7280; cursor: default; }
.merp-offcanvas-link.fsq-is-soon:hover { background: transparent; color: #6b7280; }

/* The top bar keeps its light inline background in both themes, so its mobile context text,
   hamburger and chip-row border stay dark-on-light in dark mode. */
[data-merp-theme="dark"] .merp-mobile-ctx { color: rgba(0,0,0,.72); }
[data-merp-theme="dark"] .merp-mobile-hamburger { border-color: rgba(0,0,0,.18); }
[data-merp-theme="dark"] #merpNavRight { border-top-color: rgba(0,0,0,.06); }
[data-merp-theme="dark"] #merpTopNav .fsq-soon-pill { background: #eef1f6; color: #5d6878; }
[data-merp-theme="dark"] #merpTopNav .section-dropdown { color: rgba(0,0,0,.85); }

/* Dark offcanvas: the panel gets the dark card surface so its light rows stay readable. */
[data-merp-theme="dark"] #merpMobileNav { background: #1e2128; color: #e5e7eb; }
[data-merp-theme="dark"] #merpMobileNav .offcanvas-header { border-bottom-color: #2d3039 !important; }
[data-merp-theme="dark"] #merpMobileNav .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-merp-theme="dark"] .merp-offcanvas-link.fsq-is-soon,
[data-merp-theme="dark"] .merp-offcanvas-link.fsq-is-soon:hover { color: #9ca3af; background: transparent; }

/* Touch size for the hamburger (< 992px) */
@media (max-width: 991px) {
    .merp-mobile-hamburger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* The settings menu stays white in dark mode; keep its rows dark-on-white (the global dark link
   colour would otherwise turn them light blue). */
[data-merp-theme="dark"] #userMenuDropdown .dropdown-item { color: #212529; }
[data-merp-theme="dark"] #userMenuDropdown .dropdown-item.active,
[data-merp-theme="dark"] #userMenuDropdown .dropdown-item:active { color: #fff; }

/* Keep the one-row desktop bar on one row with five destinations + the chip in EN and ES. */
@media (min-width: 992px) {
    .app-nav .nav-link { white-space: nowrap; }
    #merpNavRight { flex-wrap: nowrap; }
}
@media (min-width: 992px) {
    /* desktop: the People-helping "Coming soon" text stays for screen readers and the tooltip */
    .fsq-help-chip .fsq-soon-pill {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
        margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    }
    .fsq-help-chip { padding-right: 11px; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    /* coming-soon tabs: dotted underline instead of the clock icon (tooltip + screen-reader text unchanged) */
    .fsq-soon-icon { display: none; }
    .app-nav .nav-link.fsq-is-soon { text-decoration: underline dotted; text-underline-offset: 3px; }
    /* People helping becomes an icon chip (label kept for screen readers + tooltip) */
    .fsq-help-chip.fsq-is-soon { padding: 0; width: 34px; height: 34px; justify-content: center; }
    .fsq-help-chip.fsq-is-soon .fsq-help-chip-label {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
        margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .app-nav .nav-link { padding: .45rem .45rem; margin-right: 0; font-size: .84rem; }
    .section-dropdown { padding: .45rem .5rem; gap: .25rem; }
    a.fsq-help-chip { padding: 0; width: 34px; height: 34px; justify-content: center; }
    a.fsq-help-chip .fsq-help-chip-label {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
        margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    }
}

/* Contrast (>= 4.5:1): offcanvas active row in both themes. The global dark link colour beat the
   dark active colour (3.81:1), so the dark rule is scoped to the offcanvas. */
.merp-offcanvas-subgroup .merp-offcanvas-sublink.merp-offcanvas-active { color: var(--fsq-selected-fg); }
.merp-offcanvas-link.merp-offcanvas-active { color: var(--fsq-selected-fg); }
[data-merp-theme="dark"] #merpMobileNav a.merp-offcanvas-link { color: #e5e7eb; }
[data-merp-theme="dark"] #merpMobileNav a.merp-offcanvas-link.merp-offcanvas-active { color: var(--fsq-selected-fg); }

/* Touch targets >= 44x44 below 1024px and on any coarse pointer; the desktop (fine pointer,
   >= 1024px) look is unchanged. */
@media (max-width: 1023.98px), (pointer: coarse) {
    .user-chip { width: 44px; height: 44px; }
    .navbar-brand { min-height: 44px; }
    /* open settings menu: language + theme choices */
    #userMenuDropdown .dropdown-item { display: flex; align-items: center; min-height: 44px; }
    /* open offcanvas: brand link + close button */
    #merpMobileNav .offcanvas-header a { display: inline-flex; align-items: center; min-height: 44px; }
    #merpMobileNav .btn-close { box-sizing: border-box; width: 44px; height: 44px; padding: 0; background-size: 1em; }
}
@media (max-width: 991px) {
    /* the 44px settings chip fills the 44px chip row without growing it */
    #merpNavRight { padding-top: 0; padding-bottom: 0; min-height: var(--merp-chiprow-h, 44px); }
}

/* B2 (#151): signed-in identity initials in the user chip. */
.fsq-user-initials {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--fsq-brand-fill); color: var(--fsq-on-brand); font-weight: 700; font-size: .85rem; line-height: 1;
}

/* Section switcher (title + dropdown beside the brand). The title is a <button>. */
button.section-dropdown { cursor: pointer; font-family: inherit; line-height: 1.5; }
.section-dropdown .bi-chevron-down { font-size: .8rem; opacity: .7; }
.section-dropdown-menu .dropdown-item { color: #212529; }
.section-dropdown-menu .dropdown-item.active .fsq-sec-ic { color: inherit; }
.section-dropdown-menu .fsq-sec-ic { width: 1.25rem; text-align: center; font-size: 1rem; }
.section-dropdown-menu .dropdown-item.fsq-is-soon,
.section-dropdown-menu .dropdown-item.fsq-is-soon:hover { color: #5f6873; background: transparent; cursor: default; }
.section-dropdown-menu .dropdown-item.fsq-is-soon .fsq-soon-pill { margin-left: .75rem; }
/* Per-section accents (icon contrast >= 3:1 on white; lighter pairs on the dark offcanvas).
   D-BRAND-2: Onboarding = SOP darkest plum, Records = SOP primary plum; no mERP blue. */
.fsq-sec-ic.fsq-sec-onboarding { color: #3E2455; }
.fsq-sec-ic.fsq-sec-admin      { color: #475569; }
.fsq-sec-ic.fsq-sec-records    { color: #6B3F8C; }
.fsq-sec-ic.fsq-sec-corrective { color: #c2410c; }
.fsq-sec-ic.fsq-sec-evidence   { color: #7e22ce; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-onboarding { color: #D8B4FE; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-records    { color: #D8B4FE; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-admin      { color: #94a3b8; }
/* #187: #7e22ce was 2.31:1 on the dark menu; this lighter purple of the same family is 6.10:1. */
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-evidence   { color: #c084fc; }
/* The switcher menu stays white in dark mode (like the settings menu); keep its rows dark-on-white. */
[data-merp-theme="dark"] #merpTopNav .section-dropdown-menu .dropdown-item { color: #212529; }
[data-merp-theme="dark"] #merpTopNav .section-dropdown-menu .dropdown-item.active { color: var(--fsq-selected-fg); }
[data-merp-theme="dark"] #merpTopNav .section-dropdown-menu .dropdown-item.fsq-is-soon { color: #5f6873; }
/* Sidebar accent per active section (active link + header icon use --merp-clr-inv) */
.merp-sidebar.fsq-sec-admin { --merp-clr-inv: #475569; }
@media (max-width: 1023.98px), (pointer: coarse) {
    a.fsq-help-chip { min-height: 44px; min-width: 44px; justify-content: center; }
    .section-dropdown { min-height: 44px; }
    .section-dropdown-menu .dropdown-item { min-height: 44px; }
}

/* Linked chips in the top bar (e.g. Sign in) stay dark-on-light in dark mode (the bar is always light). */
[data-merp-theme="dark"] #merpTopNav a.fsq-help-chip { color: #374151; }
[data-merp-theme="dark"] #merpTopNav a.fsq-help-chip:hover { color: var(--fsq-brand); }
/* The settings/identity menu stays white in dark mode: keep the signed-in name dark-on-white
   (the shell's dark .fw-semibold colour is meant for dark surfaces). */
[data-merp-theme="dark"] #userMenuDropdown .fw-semibold { color: #212529; }
/* Phone: the non-interactive People-helping chip becomes an icon so the Sign in chip and the
   settings (language/theme) chip stay visible in the chip row; label + "Coming soon" stay for
   screen readers and in the offcanvas. */
@media (max-width: 575.98px) {
    .fsq-help-chip.fsq-is-soon { padding: 0; width: 34px; height: 34px; justify-content: center; flex-shrink: 0; }
    .fsq-help-chip.fsq-is-soon .fsq-help-chip-label,
    .fsq-help-chip.fsq-is-soon .fsq-soon-pill {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
        margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
    }
}

/* ===== B1B2S (COMPLIANCE #189): structure catalogue navigation =====
   New section accents (icon contrast >= 3:1 on white; lighter pairs on the dark offcanvas; no mERP blue, OD-14). */
.fsq-sec-ic.fsq-sec-programs   { color: #4d7c0f; }
.fsq-sec-ic.fsq-sec-settings   { color: #a16207; }
.fsq-sec-ic.fsq-sec-platform   { color: #334155; }
.fsq-sec-ic.fsq-sec-developing { color: #b91c1c; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-programs   { color: #a3e635; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-settings   { color: #facc15; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-platform   { color: #cbd5e1; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-developing { color: #f87171; }
[data-merp-theme="dark"] #merpMobileNav .fsq-sec-ic.fsq-sec-corrective { color: #fb923c; }
.merp-sidebar.fsq-sec-programs   { --merp-clr-inv: #4d7c0f; }
.merp-sidebar.fsq-sec-settings   { --merp-clr-inv: #a16207; }
.merp-sidebar.fsq-sec-platform   { --merp-clr-inv: #334155; }
.merp-sidebar.fsq-sec-developing { --merp-clr-inv: #b91c1c; }
.merp-sidebar.fsq-sec-records    { --merp-clr-inv: #6B3F8C; }
.merp-sidebar.fsq-sec-corrective { --merp-clr-inv: #c2410c; }
.merp-sidebar.fsq-sec-evidence   { --merp-clr-inv: #7e22ce; }

/* "Preview" pill beside a preview page in the sidebar / offcanvas: SOP plum outline (text #532F6F on white = 10.48:1). */
.fsq-preview-pill {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; margin-left: auto;
  font-size: .64rem; font-weight: 600; line-height: 1; letter-spacing: .2px;
  padding: .22rem .45rem; border-radius: 999px;
  background: transparent; color: #532F6F; border: 1px solid #6B3F8C;
}
.merp-sidebar-link .fsq-sb-text { flex: 1 1 auto; min-width: 0; }
.merp-sidebar-link.active .fsq-preview-pill { color: inherit; border-color: currentColor; }
[data-merp-theme="dark"] .fsq-preview-pill { color: #D8B4FE; border-color: #D8B4FE; }
/* Offcanvas: subsection label between page groups. */
.merp-offcanvas-subhdr {
  padding: .55rem 1rem .2rem 1.25rem; font-size: .7rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #5f6873;
}
[data-merp-theme="dark"] .merp-offcanvas-subhdr { color: #aeb6c2; }
/* B1B2S #190 visual sweep S1: with subsection tabs, the 520px context chip pushed the user menu off-screen at 1280px.
   Let the right chip row and the context chip shrink (the chip keeps its full text in the title tooltip). */
@media (min-width: 992px) {
    #merpNavRight { min-width: 0; flex: 0 1 auto; }
    #fsqCtxStrip { min-width: 0; flex: 0 1 auto; }
    #fsqCtxStrip .fsq-help-chip { min-width: 0; max-width: 100% !important; }
}
/* S2/S3: subsection tabs and sidebar links reach 44px on touch (iPad-touch default, OD-12). */
@media (pointer: coarse) {
    #merpTopNav .app-nav .nav-link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
    a.merp-sidebar-link { min-height: 44px; }
}

/* #191 F2: keep the workplace chip readable. The tabs keep their natural width (never clipped); the right row takes the
   rest and the chip truncates with an ellipsis (full text in its title). The 992-1199px icon-only rule for linked chips
   no longer applies to the workplace chip. The left sidebar also shows the workplace (#fsqSbCtx). */
@media (min-width: 992px) {
    #mainNavbar { flex: 0 0 auto; }
    #merpNavRight { flex: 1 1 auto; justify-content: flex-end; }
    #fsqCtxStrip .fsq-help-chip-label { overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #fsqCtxStrip a.fsq-help-chip { width: auto; padding: 0 11px; justify-content: flex-start; }
    #fsqCtxStrip a.fsq-help-chip .fsq-help-chip-label {
        position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
        overflow: hidden !important; clip: auto !important; white-space: nowrap !important; text-overflow: ellipsis;
    }
}
.fsq-sb-ctx { display: flex; gap: .35rem; align-items: flex-start; margin-top: .3rem; font-size: .74rem; line-height: 1.25; color: #4b5563; }
.fsq-sb-ctx i { margin-top: .12rem; color: var(--merp-clr-inv, #6B3F8C); }
[data-merp-theme="dark"] .fsq-sb-ctx { color: #cbd5e1; }