/* Global Search — the page (js/search.js, pages/search.html). Rebuilt
   2026-09-16. The band with the field, then two columns: the filters and the
   results. From 992px layout.css makes the page exactly one window tall and
   each column scrolls on its own; below that it is an ordinary page and the
   filters live in the offcanvas.

   Rows, cards, pills and states are search-results.css. Every colour is a token
   or a fixed value on the band's fixed dark ground; the band lifts in dark mode
   under both mechanisms. Exactly one gold thing on the band: the Search button. */

/* ==================== THE BAND ==================== */
.gs-band {
    position: relative; overflow: hidden; flex: 0 0 auto;
    border-radius: 14px; background: var(--shell-800); border: 1px solid var(--shell-line);
    box-shadow: var(--lift-2, 0 6px 20px rgba(0, 0, 0, .16)); color: #FFFFFF;
    margin-bottom: var(--sp-5);
}
.gs-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(120% 140% at 0% 0%, rgba(201, 165, 95, .17), rgba(201, 165, 95, 0) 58%);
}
.gs-band > * { position: relative; z-index: 1; }
.gs-band-in { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-8); max-width: 1080px; }

.gs-hero {
    display: flex; align-items: center; gap: var(--sp-3); min-height: 50px;
    padding: 0 var(--sp-2) 0 var(--sp-5);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.gs-hero:focus-within { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .11); box-shadow: 0 0 0 3px rgba(201, 165, 95, .28); }
.gs-hero-ico { color: rgba(255, 255, 255, .72); font-size: var(--fs-xl); flex: 0 0 auto; }
.gs-hero-spin { width: 1.05rem; height: 1.05rem; border-width: 2px; color: rgba(255, 255, 255, .8); }
.gs-hero-in {
    flex: 1 1 auto; min-width: 0; height: 48px; background: transparent; border: 0; outline: 0;
    color: #FFFFFF; font-size: var(--fs-xl); line-height: var(--lh-snug);
}
.gs-hero-in:focus, .gs-hero-in:focus-visible { outline: 0; box-shadow: none; border: 0; background: transparent; }
.gs-hero-in::placeholder { color: rgba(255, 255, 255, .55); }
.gs-hero-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gs-hero-clear {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm); border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .72); cursor: pointer;
}
.gs-hero-clear:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.gs-hero-clear:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }
.gs-hero-clear[hidden] { display: none; }
/* The one gold element: near-black ink on the gold plate (6.08:1). */
.gs-hero-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
    height: 38px; padding: 0 var(--sp-6); border: 0; border-radius: var(--r-sm);
    background: var(--accent-fill); color: var(--accent-on); font-weight: var(--fw-bold); font-size: var(--fs-md); cursor: pointer;
}
.gs-hero-btn:hover { filter: brightness(1.07); }
.gs-hero-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.gs-hero-hint { font-size: var(--fs-xs); color: rgba(255, 255, 255, .7); line-height: var(--lh-normal); }
.gs-hint-age { color: rgba(255, 255, 255, .56); margin-left: .35rem; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gs-band { background: var(--shell-700); }
}
:root[data-theme="dark"] .gs-band { background: var(--shell-700); }

/* ==================== THE WORK AREA ==================== */
.gs-work { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.gs-results { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.gs-list { min-width: 0; transition: opacity .15s ease; container: gslist / inline-size; }
.gs-list.is-stale { opacity: .5; }

/* ---- the results head ---- */
.gs-res-h:empty { display: none; }
.gs-res-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gs-count { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); color: var(--text-soft); line-height: var(--lh-snug); }
.gs-count b { color: var(--text); }
.gs-sort { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.gs-sort .form-select { width: auto; min-width: 11rem; }
.gs-fbtn { display: none; }
.gs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.gs-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: var(--r-pill);
    border: 1px solid var(--accent-line); background: var(--accent-weak); color: var(--text);
    font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.gs-chip span { color: var(--text-soft); }
/* A brand filter chip carries the brand's badge rather than its name. The badge
   is 24px; pulled into the chip's line box so the chip keeps its height. Its
   own colour rules (.bbadge.co-*) outrank the grey above. */
.gs-chip.is-brand .bbadge { margin: -4px 0; transform: scale(.84); }
.gs-f-opt .bbadge { transform: scale(.84); }
.gs-chip:hover { border-color: var(--accent); }
.gs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- the pager ---- */
.gs-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); padding: var(--sp-6) 0 var(--sp-3);
            font-size: var(--fs-sm); color: var(--text-soft); }

/* ---- the filters ---- */
.gs-filters { padding: var(--sp-5); }
.gs-filters:empty { display: none; }
.gs-f-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.gs-f-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-2); }
.gs-f-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--sp-2);
    border-radius: var(--r-pill); background: var(--accent-weak); color: var(--accent-ink); border: 1px solid var(--accent-line);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold);
}
.gs-f-note { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-normal); }
.gs-f-sec { margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--border-soft); min-width: 0; }
.gs-f-legend { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); line-height: var(--lh-snug); }
.gs-f-opt { display: flex; align-items: center; gap: var(--sp-3); padding: 3px 0; margin: 0; cursor: pointer; font-size: var(--fs-sm); color: var(--text); }
.gs-f-opt input { accent-color: var(--accent-fill); margin: 0; flex: 0 0 auto; }
.gs-f-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-f-n { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.gs-f-opt.is-zero { color: var(--text-dim); }
.gs-f-more { margin-top: var(--sp-2); font-size: var(--fs-xs); }

/* ---- the landing state ---- */
.gs-land { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.gs-land.has-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gs-land-col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.gs-land-sec { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); min-width: 0; }
.gs-land-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.gs-land-h > span { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.gs-land-rows { margin: 0 calc(-1 * var(--sp-5)); }
/* No query: the filter column has nothing to count, so it steps aside and the
   landing takes the full width (search.js toggles .is-landing). */
.gs-work.is-landing { grid-template-columns: minmax(0, 1fr); }
.gs-work.is-landing > .gs-filters { display: none; }
/* A tip that carries a worked example offers it as a one-click search. The
   foot takes the free height, so two tips whose text wraps differently still
   put their buttons on one line across the row. */
.gs-tip-foot { margin-top: auto; padding-top: var(--sp-3); }
.gs-tip-try {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border-radius: var(--r-pill);
    border: 1px solid var(--accent-line); background: var(--surface); color: var(--accent-ink);
    font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.gs-tip-try:hover { background: var(--accent-weak); border-color: var(--accent); }
.gs-tip-try:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==================== ONE WINDOW, SCROLLING COLUMNS ==================== */
/* From 992px layout.css gives this section exactly the height the window has
   left; the work area takes the rest and the filters and the result list each
   scroll on their own. A few pixels of padding on the list, because a scroll
   container clips its children's focus rings and shadows at its edge. */
@media (min-width: 992px) {
    .gs-work { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .gs-filters { align-self: start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
    .gs-results { min-height: 0; overflow: hidden; }
    .gs-res-h { flex: 0 0 auto; }
    .gs-list {
        flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
        padding: 3px 6px var(--sp-6) 3px; margin: -3px -6px 0 -3px;
    }
}
@media (min-width: 992px) and (max-height: 820px) {
    .gs-band-in { padding: var(--sp-5) var(--sp-7); gap: var(--sp-2); }
    .gs-band { margin-bottom: var(--sp-4); }
    .gs-hero-hint { display: none; }
}

@media (max-width: 991.98px) {
    .gs-work { grid-template-columns: minmax(0, 1fr); }
    .gs-filters { display: none; }
    .gs-fbtn { display: inline-flex; }
    .gs-land.has-left { grid-template-columns: minmax(0, 1fr); }
    .gs-band-in { padding: var(--sp-5); }
    .gs-hero { flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); }
    .gs-hero-btn { margin-left: auto; }
    .gs-card { padding: var(--sp-4); }
}
@media (max-width: 575.98px) {
    .gs-hero-ico { display: none; }
    .gs-hero-in { font-size: var(--fs-lg); }
    /* A rep card keeps its badge: it is the only thing on the card that says
       which brand the rep sells for, now the meta line no longer names it. */
    .gs-card:not(.is-rep) .gs-brands { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gs-list { transition: none; }
}