/* ============================================================
   sidebar-search.css -- the menu search box (sidebar-search.js,
   design docs/redesigns/sidebar-search.md). Prefix sbs-.
   Desktop: the sidebar rail of Default.aspx, dark in the light AND the
   dark theme (colours from the --tl-* tokens of Default.css, which the
   dark theme redefines). Phone: the More sheet, phone tokens --tlm-* and
   the shared .tlm-input / .tlm-input-with-icon field of tlm-mobile.css.
   ============================================================ */

/* One class hides an item, a group or an extra line in both menus. */
#tl_sidebar .sbs-off,
.tlm-more .sbs-off { display: none !important; }

/* Read by screen readers only ("3 found"); shown when nothing matches. */
#tl_sidebar .sbs-status.is-sr,
.tlm-more .sbs-status.is-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Desktop sidebar
   --------------------------------------------------------------- */
#tl_sidebar .sbs-box.is-desk {
    position: relative;
    flex-shrink: 0;
    margin: 12px 10px 0;
}
#tl_sidebar .sbs-box[hidden] { display: none !important; }
#tl_sidebar .sbs-box.is-desk .sbs-field {
    position: relative;
    height: 36px;
}
#tl_sidebar .sbs-box.is-desk .sbs-ico {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    width: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--tl-sidebar-text, #94a3b8);
    pointer-events: none;
    transition: color .15s ease;
}
#tl_sidebar .sbs-box.is-desk.is-filtered .sbs-ico { color: #60a5fa; }
#tl_sidebar .sbs-box.is-desk input.sbs-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 36px 0 42px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--tl-sidebar-text-active, #ffffff);
    font-family: var(--tl-font, 'Inter', 'Segoe UI', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
#tl_sidebar .sbs-box.is-desk input.sbs-input::placeholder { color: rgba(148, 163, 184, .85); opacity: 1; }
#tl_sidebar .sbs-box.is-desk input.sbs-input:hover { background: rgba(255, 255, 255, .09); }
#tl_sidebar .sbs-box.is-desk input.sbs-input:focus {
    border-color: var(--tl-blue, #2563eb);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}
#tl_sidebar .sbs-box input.sbs-input::-webkit-search-cancel-button,
#tl_sidebar .sbs-box input.sbs-input::-webkit-search-decoration,
#tl_sidebar .sbs-box input.sbs-input::-webkit-search-results-button { -webkit-appearance: none; display: none; }
#tl_sidebar .sbs-box input.sbs-input::-ms-clear { display: none; }
#tl_sidebar .sbs-box.is-desk .sbs-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tl-sidebar-text, #94a3b8);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}
#tl_sidebar .sbs-box.is-desk .sbs-clear:hover { background: rgba(255, 255, 255, .1); color: var(--tl-sidebar-text-active, #ffffff); }
#tl_sidebar .sbs-box.is-desk .sbs-clear:focus { outline: none; }
#tl_sidebar .sbs-box.is-desk .sbs-clear:focus-visible {
    background: rgba(255, 255, 255, .1);
    color: var(--tl-sidebar-text-active, #ffffff);
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .9);
}
#tl_sidebar .sbs-box .sbs-clear[hidden] { display: none !important; }
#tl_sidebar .sbs-box.is-desk .sbs-status {
    padding: 8px 4px 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tl-sidebar-text, #94a3b8);
    white-space: normal;
}
/* The match Enter will open (moved with the arrow keys). */
#sidebar_nav .tl-nav-item.sbs-cur {
    background: var(--tl-sidebar-hover, #1e293b);
    color: var(--tl-sidebar-text-active, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .6);
}

/* Collapsed rail (wider than a phone): only the magnifier, in line with the tile icons. Hovering the rail, or the
   box holding the focus (the tl-sidebar--peek class), opens the rail and the field. */
@media (min-width: 769px) {
    #tl_sidebar.tl-sidebar--collapsed:not(:hover):not(.tl-sidebar--peek) .sbs-box.is-desk input.sbs-input {
        background: transparent;
        border-color: transparent;
        color: transparent;
        cursor: pointer;
    }
    #tl_sidebar.tl-sidebar--collapsed:not(:hover):not(.tl-sidebar--peek) .sbs-box.is-desk input.sbs-input::placeholder { color: transparent; }
    #tl_sidebar.tl-sidebar--collapsed:not(:hover):not(.tl-sidebar--peek) .sbs-box.is-desk .sbs-clear { visibility: hidden; }
    #tl_sidebar.tl-sidebar--collapsed:not(:hover):not(.tl-sidebar--peek) .sbs-box.is-desk .sbs-status { display: none; }
}

/* Phone width (768 px or less, as in Default.css): the sidebar is a slide-in drawer, moved off screen while closed.
   The box must then be out of reach -- not visible, not focusable, not a Tab stop -- or the first Tab of the page lands
   in a field nobody can see. visibility keeps its place, so nothing moves when the drawer opens (tl-sidebar--open). */
@media (max-width: 768px) {
    #tl_sidebar:not(.tl-sidebar--open) .sbs-box.is-desk { visibility: hidden; }
}


/* ---------------------------------------------------------------
   Phone: the More sheet (under the person's name, pinned while the list scrolls)
   --------------------------------------------------------------- */
.tlm-more .sbs-box.is-phone {
    flex-shrink: 0;
    padding: 0 16px 8px;
}
.tlm-more .sbs-box[hidden] { display: none !important; }
.tlm-more .sbs-box.is-phone .sbs-field { position: relative; }
.tlm-more .sbs-box.is-phone .tlm-input { padding-inline-end: 44px; }
.tlm-more .sbs-box.is-phone input.sbs-input::-webkit-search-cancel-button,
.tlm-more .sbs-box.is-phone input.sbs-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.tlm-more .sbs-box.is-phone.is-filtered .sbs-ico { color: var(--tlm-primary); }
.tlm-more .sbs-box.is-phone .sbs-clear {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 1;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tlm-text-faint);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(27, 95, 216, .12);
    -webkit-user-select: none;
    user-select: none;
}
.tlm-more .sbs-box.is-phone .sbs-clear:active { color: var(--tlm-text-muted); }
.tlm-more .sbs-box.is-phone .sbs-clear[hidden] { display: none !important; }
.tlm-more .sbs-box.is-phone .sbs-status {
    padding: 10px 4px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tlm-text-muted);
}
/* the list draws a hairline above every row but the first: none above the first row a search leaves */
.tlm-more .tlm-list > .sbs-first::before { display: none; }
.tlm-more .tlm-list-row.sbs-cur { background: var(--tlm-primary-tint); }