/*
 * OWS Vision RC78
 * Smart Search + fixed non-overlapping desktop sidebar.
 */

:root {
    --ows-sidebar-width: 255px;
}


/* ================================================================
   DESKTOP / TABLET SIDEBAR
   ================================================================ */

.sidebar {
    position: fixed !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width:
        var(
            --ows-sidebar-width
        ) !important;

    height:
        100dvh !important;

    box-sizing:
        border-box !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    min-height:
        0 !important;

    overflow:
        hidden !important;

    z-index:
        800;
}


/*
 * Brand + runtime/status areas keep their natural height.
 * They must never collapse into or overlap navigation.
 */
.sidebar > :not(.navigation) {
    flex:
        0
        0
        auto;
}


/*
 * Navigation owns all remaining sidebar height and scrolls internally.
 */
.sidebar .navigation {
    flex:
        1
        1
        auto !important;

    min-height:
        0 !important;

    overflow-x:
        hidden !important;

    overflow-y:
        auto !important;

    overscroll-behavior:
        contain;

    scrollbar-gutter:
        stable;

    padding-bottom:
        8px;
}


/*
 * Fixed sidebar leaves the normal grid flow.
 * Main content remains explicitly in grid column two.
 */
.layout > main {
    grid-column:
        2;

    min-width:
        0;
}


/* ================================================================
   SMART SEARCH
   ================================================================ */

.ows-smart-search-page {
    position:
        fixed;

    top:
        0;

    right:
        0;

    bottom:
        0;

    left:
        var(
            --ows-sidebar-width
        );

    z-index:
        700;

    display:
        none;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    box-sizing:
        border-box;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(
                55,
                111,
                214,
                0.17
            ),
            transparent 34rem
        ),
        #0a111e;

    color:
        #edf3ff;
}


.ows-smart-search-page.is-visible {
    display:
        block;
}


.smart-search-shell {
    width:
        min(
            1120px,
            calc(
                100% - 48px
            )
        );

    margin:
        0
        auto;

    padding:
        38px
        0
        72px;
}


.smart-search-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        24px;

    margin-bottom:
        24px;
}


.smart-search-eyebrow {
    margin-bottom:
        8px;

    color:
        #7eb1ff;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.smart-search-header h1 {
    margin:
        0;

    color:
        #f5f8ff;

    font-size:
        clamp(
            29px,
            3.4vw,
            44px
        );

    line-height:
        1.08;
}


.smart-search-header p {
    max-width:
        720px;

    margin:
        12px
        0
        0;

    color:
        #94a4bd;

    line-height:
        1.55;
}


.smart-search-close {
    flex:
        0
        0
        auto;

    width:
        42px;

    height:
        42px;

    min-height:
        42px;

    padding:
        0;

    border:
        1px solid
        #334363;

    border-radius:
        10px;

    background:
        #18233a;

    color:
        #dbe8ff;

    font-size:
        24px;

    line-height:
        1;

    cursor:
        pointer;
}


.smart-search-card {
    padding:
        24px;

    border:
        1px solid
        #283650;

    border-radius:
        14px;

    background:
        rgba(
            13,
            24,
            42,
            0.93
        );

    box-shadow:
        0
        24px
        54px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


.smart-search-query-label {
    display:
        block;

    margin-bottom:
        9px;

    color:
        #cfdcf1;

    font-size:
        13px;

    font-weight:
        800;
}


.smart-search-query-row {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        10px;
}


.smart-search-query-row input {
    min-width:
        0;

    min-height:
        46px;

    box-sizing:
        border-box;

    padding:
        0
        14px;

    border:
        1px solid
        #334363;

    border-radius:
        10px;

    background:
        #0a1322;

    color:
        #edf3ff;

    font:
        inherit;
}


.smart-search-query-row input:focus {
    outline:
        none;

    border-color:
        #6687c4;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            87,
            137,
            222,
            0.13
        );
}


.smart-search-query-row button {
    min-width:
        116px;

    border-radius:
        10px;

    font-weight:
        800;
}


.smart-search-examples {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        12px;
}


.smart-search-examples button {
    min-height:
        32px;

    padding:
        5px
        10px;

    border:
        1px solid
        #2e3c56;

    border-radius:
        999px;

    background:
        #121e32;

    color:
        #9fb4d4;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.smart-search-filters {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                170px,
                1fr
            )
        )
        minmax(
            220px,
            1.3fr
        );

    gap:
        12px;

    margin-top:
        22px;
}


.smart-search-filters label {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    color:
        #8f9db5;

    font-size:
        11px;

    font-weight:
        800;
}


.smart-search-filters input {
    min-height:
        40px;

    box-sizing:
        border-box;

    padding:
        0
        11px;

    border:
        1px solid
        #2e3c56;

    border-radius:
        9px;

    background:
        #0a1322;

    color:
        #dce8fb;
}


.smart-search-scope {
    margin:
        16px
        0
        0;

    color:
        #71819a;

    font-size:
        11px;

    line-height:
        1.45;
}


.smart-search-state {
    margin-top:
        16px;
}


.smart-search-notice {
    display:
        grid;

    gap:
        5px;

    padding:
        16px;

    border:
        1px solid
        #283650;

    border-radius:
        11px;

    background:
        rgba(
            13,
            24,
            42,
            0.88
        );

    color:
        #aebbd0;
}


.smart-search-notice.warning {
    color:
        #ffd27b;

    border-color:
        rgba(
            255,
            190,
            72,
            0.26
        );
}


.smart-search-notice.error {
    color:
        #ffadb1;

    border-color:
        rgba(
            255,
            101,
            109,
            0.3
        );
}


.smart-search-results {
    display:
        grid;

    gap:
        11px;

    margin-top:
        22px;
}


.smart-search-results-title {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #e7effc;
}


.smart-search-results-title span {
    display:
        inline-grid;

    place-items:
        center;

    min-width:
        25px;

    height:
        25px;

    border-radius:
        999px;

    background:
        #273750;

    color:
        #cfe0fa;

    font-size:
        10px;

    font-weight:
        900;
}


.smart-search-result {
    padding:
        17px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius:
        12px;

    background:
        rgba(
            8,
            17,
            31,
            0.84
        );
}


.smart-search-result-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px
        14px;

    margin-bottom:
        9px;

    color:
        #7788a2;

    font-size:
        10px;

    font-weight:
        800;

    text-transform:
        uppercase;
}


.smart-search-document {
    color:
        #dce6f5;

    font-size:
        14px;

    line-height:
        1.55;
}


.smart-search-result small {
    display:
        block;

    margin-top:
        10px;

    color:
        #5f7089;

    font-size:
        10px;
}


/*
 * Preserve the Node's existing <=900px responsive behavior.
 */
@media (
    max-width:
        900px
) {

    .sidebar {
        position:
            static !important;

        width:
            auto !important;

        height:
            auto !important;

        max-height:
            none !important;

        overflow:
            visible !important;

        display:
            block !important;
    }


    .sidebar .navigation {
        overflow:
            visible !important;
    }


    .layout > main {
        grid-column:
            1;
    }


    .ows-smart-search-page {
        left:
            0;
    }
}


@media (
    max-width:
        760px
) {

    .smart-search-shell {
        width:
            calc(
                100% - 28px
            );

        padding-top:
            24px;
    }


    .smart-search-query-row,
    .smart-search-filters {
        grid-template-columns:
            1fr;
    }


    .smart-search-query-row button {
        min-height:
            44px;
    }
}