/* Site-wide search in the nav ([data-search], driven by public/js/search.js).
   The box itself is styled with the nav (.nav-proto-search in nav.css); this file
   covers the results panel, the "/" hint, and the full-screen phone view. */

.st { position: relative; }
.st-field { position: relative; }
.st-input::-webkit-search-cancel-button { cursor: pointer; }
.st.is-open .st-input { border-color: #c8102e; box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }

.st-kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: .7rem; color: #6c757d; background: #f1f3f5; border: 1px solid #d6d9dc;
    border-radius: 4px; padding: 0 .35rem; line-height: 1.4; pointer-events: none;
}
.st.is-open .st-kbd, .st-input:not(:placeholder-shown) ~ .st-kbd { display: none; }
.st-close { display: none; border: 0; background: none; color: #c8102e; font-weight: 600; padding: 0 0 0 .6rem; }

/* ---- Results panel (desktop: a dropdown under the box, right-aligned) ---- */
.st-panel {
    position: absolute; right: 0; top: calc(100% + .45rem); z-index: 1050;
    width: min(34rem, calc(100vw - 32px));
    background: #fff; border: 1px solid #dee2e6; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16); max-height: min(70vh, 38rem); overflow-y: auto;
    padding: .35rem 0; text-align: left;
}
.st-group + .st-group { border-top: 1px solid #f0f1f2; }
.st-group__head {
    display: flex; align-items: center; gap: .35rem;
    padding: .55rem 1rem .25rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #8a8f94;
}
.st-group__note { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; color: #6c757d; }
.st-group__clear {
    margin-left: auto; border: 0; background: none; color: #8a8f94; font-size: .72rem;
    text-transform: none; letter-spacing: 0; padding: 0;
}
.st-group__clear:hover { color: #c8102e; }

.st-item {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .45rem 1rem; color: #222; text-decoration: none !important;
}
.st-item:hover { color: #222; }
.st-item.is-active { background: #fdecee; }
.st-item__icon { color: #c8102e; font-size: 1rem; margin-top: .1rem; flex: 0 0 auto; width: 1.1rem; text-align: center; }
.st-item__body { display: flex; flex-direction: column; min-width: 0; }
.st-item__title { font-weight: 600; line-height: 1.3; }
.st-item__title mark { background: none; color: #c8102e; padding: 0; }
.st-item__sub {
    font-size: .82rem; color: #6c757d; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.st-item__setlist { color: #c8102e; font-size: .8rem; margin-left: .4rem; }

.st-badge {
    display: inline-block; margin-left: .45rem; padding: .05rem .45rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; vertical-align: .1em; background: #e9ecef; color: #495057;
}
.st-badge--x, .st-badge--p { background: #fdecec; color: #a31424; }
.st-badge--u { background: #fdf4dd; color: #8a6200; }

.st-more { padding: .15rem 1rem .5rem 2.8rem; font-size: .8rem; color: #8a8f94; }
.st-empty { padding: 1rem; color: #6c757d; font-size: .9rem; }
.st-empty__title { font-weight: 600; color: #222; margin-bottom: .25rem; }

/* ---- Collapsed (hamburger) menu: the panel spans the menu's width ---- */
@media (max-width: 991.98px) {
    .st-kbd { display: none; }
    .st-panel { left: 0; right: 0; width: auto; }
}

/* ---- Phone: search opens full screen ---- */
@media (max-width: 575.98px) {
    .st.is-open {
        position: fixed; inset: 0; z-index: 1085; margin: 0;
        background: #fff; padding: 12px 16px;
        display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
    }
    .st.is-open .st-field { flex: 1; min-width: 0; }
    .st.is-open .st-close { display: inline-block; }
    .st.is-open .st-panel {
        position: static; flex: 0 0 100%; width: auto; max-height: calc(100vh - 70px);
        margin-top: .6rem; border: 0; box-shadow: none; border-radius: 0; padding: 0;
    }
    body.st-lock { overflow: hidden; }
}