@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   SITE SEARCH
   The nav bar's magnifier opens #panel-search, which was in the
   markup on every page but had nothing wired to it. Results are
   matched in the browser against search-index.js, loaded on first
   use. One surface for every screen size: the panel is already
   full width and fixed under the nav bar.
══════════════════════════════════════════════════════════ */
.search-panel { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }
.search-wrap, .vc4s-results, .search-hints { max-width: 1160px; margin-left: auto; margin-right: auto; }

.vc4s-results { margin-top: 16px; }
.vc4s-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 900;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange);
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(95,153,187,0.18);
}
.vc4s-head span { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: rgba(173,221,246,0.6); }

.vc4s-hit {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
    align-items: baseline; padding: 11px 12px; border-radius: 10px;
    text-decoration: none; transition: background 0.15s;
}
.vc4s-hit + .vc4s-hit { border-top: 1px solid rgba(95,153,187,0.1); }
.vc4s-hit:hover, .vc4s-hit.on { background: rgba(95,153,187,0.14); }
.vc4s-chip {
    grid-row: 1; justify-self: start; align-self: center;
    font-family: 'Lato', sans-serif; font-size: 0.56rem; font-weight: 900;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--prussian);
    background: var(--sky); border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
.vc4s-t { grid-row: 1; font-family: 'Lato', sans-serif; font-size: 0.95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.vc4s-s { grid-row: 2; grid-column: 2; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 300; color: rgba(173,221,246,0.75); line-height: 1.5; }
.vc4s-hit mark { background: none; color: var(--orange); font-weight: 700; }

.vc4s-msg {
    font-family: 'Lato', sans-serif; font-size: 0.86rem; font-weight: 300;
    color: rgba(173,221,246,0.7); padding: 18px 12px; line-height: 1.6;
}
.vc4s-msg b { color: #fff; font-weight: 700; }

/* The hint chips double as one-tap searches once results are showing. */
.search-hints.vc4s-hidden { display: none; }

@media (max-width: 1100px) {
    .search-panel { padding: 18px 24px 22px; }
}
@media (max-width: 680px) {
    .search-panel { padding: 14px 16px 18px; }
    .vc4s-hit { grid-template-columns: 1fr; gap: 3px; padding: 10px 8px; }
    .vc4s-chip { grid-row: 1; }
    .vc4s-t { grid-row: 2; font-size: 0.9rem; }
    .vc4s-s { grid-row: 3; grid-column: 1; font-size: 0.76rem; }
    .search-hints { gap: 6px; }
}