/**
 * PUBLIC CATALOG — THE /search ADVANCED-SEARCH PAGE: the query line, the
 * plain-language presets, the removable active-filter chips, the multi-select
 * facets behind their one disclosure, the numeric bounds and their validation
 * hint, the search / clear / AI-toggle controls, the results header with its
 * per-method badge (semantic / keyword / fuzzy), the trigram-band divider, the
 * five distinct result states, the category dropdown, and the recorded-licence
 * chip and evidence block shared with the listing page.
 *
 * SEVENTH of ten sheets — after styles-controls.css, before styles-narrow.css.
 * Read the load-order block at the top of styles.css before moving a rule
 * between sheets: the split is a contiguous slice of one original file and the
 * cascade depends on it.
 */

/* ── Advanced Search ── */
.adv-search-page { max-width: 1280px; margin: 0 auto; padding: 24px 20px; }
.adv-search-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    linear-gradient(135deg, rgba(255, 107, 44, 0.05), transparent 58%);
  border: var(--border-1);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
}
.adv-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.adv-search-row.two-col {
  grid-template-columns: 1fr 1fr;
}
.adv-search-row.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}
.adv-search-row.four-col {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media (max-width: 768px) {
  .adv-search-row,
  .adv-search-row.two-col,
  .adv-search-row.three-col,
  .adv-search-row.four-col {
    grid-template-columns: 1fr;
  }
  .adv-search-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .adv-search-actions > * {
    width: 100%;
    justify-content: center;
  }
  .adv-search-page {
    padding: 20px 16px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .adv-search-row.two-col, .adv-search-row.three-col, .adv-search-row.four-col {
    grid-template-columns: 1fr 1fr;
  }
  .adv-search-page {
    padding: 22px 18px;
  }
}
.adv-search-row.full-width {
  grid-template-columns: 1fr;
}
.adv-field { display: flex; flex-direction: column; gap: 6px; }
.adv-field label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.adv-field input, .adv-field select {
  padding: 10px 14px;
  background: rgba(255,255,255,0.035);
  border: var(--border-1);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.adv-field input:focus, .adv-field select:focus { border-color: var(--accent); }
.adv-field input::placeholder { color: var(--text-dim); }
.adv-field select { cursor: pointer; }
.adv-field select option { background: var(--bg-card); color: var(--text); }

.adv-search-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adv-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.adv-search-btn:hover { background: var(--accent-hover); }
.adv-search-btn:active { transform: scale(0.97); }
.adv-search-btn svg { width: 18px; height: 18px; }

.adv-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 20px;
  background: transparent;
  color: var(--text-muted);
  border: var(--border-1);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.adv-clear-btn:hover { border-color: var(--text-muted); color: var(--text); }

.adv-ai-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
  border: var(--border-1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.adv-ai-toggle:hover { border-color: var(--accent); }
.adv-ai-toggle.active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}
.adv-ai-toggle .toggle-track {
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.adv-ai-toggle.active .toggle-track { background: #7c3aed; }
.adv-ai-toggle .toggle-knob {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.adv-ai-toggle.active .toggle-knob { left: 20px; }
.adv-ai-label {
  font-size: 13px;
  font-weight: 500;
}
.adv-ai-badge {
  font-size: 10px;
  padding: 2px 8px;
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* A filter the page declined to apply, said in words (#966). It is not an
   error — the search that ran is a real search — so it reads as a note above
   the chips rather than as the red invalid-combination state. `:empty` keeps it
   out of the layout entirely in the normal case. */
.adv-filter-notice:empty {
  display: none;
}
.adv-filter-notice-text {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: var(--border-1);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.adv-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.adv-active-filters:empty {
  display: none;
}

/* Each chip REMOVES the filter it names, so it is a real <button>: keyboard
   activation, a focus ring from the shared :focus-visible system in styles.css,
   and a hit area that clears the 44px floor on touch (see styles-narrow.css).
   The former `.adv-filter-tag` was a <span> that only reported state. */
.adv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: rgba(214, 40, 40, 0.1);
  border: 1px solid rgba(214, 40, 40, 0.3);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  font-family: inherit;
  cursor: pointer;
  max-width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.adv-filter-chip:hover {
  background: rgba(214, 40, 40, 0.18);
  border-color: var(--accent);
}
.adv-filter-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-filter-chip-x {
  font-size: 15px;
  line-height: 1;
  opacity: 0.75;
  flex-shrink: 0;
}
.adv-filter-chip:hover .adv-filter-chip-x {
  opacity: 1;
}
.adv-filter-clear-all {
  padding: 6px 12px;
  background: transparent;
  border: var(--border-1);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.adv-filter-clear-all:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ── Query line: the field and its button sit together, so "Search" is beside
   what you typed rather than below every filter on the page. ── */
.adv-query-line {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.adv-query-line input {
  flex: 1;
  min-width: 0; /* a flex item's min-width:auto is the classic overflow source */
}

/* ── Presets: plain language in front of the technical facets. ── */
.adv-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.adv-presets-label {
  /* Its own row, so the presets below it line up as a group instead of the
     first one hanging off the end of the label. */
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.adv-preset {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: var(--border-1);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.adv-preset:hover {
  border-color: var(--accent);
  color: var(--text);
}
.adv-preset.active {
  background: rgba(214, 40, 40, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ── One disclosure for every filter beyond the query and the presets. ──
   A <button> with aria-expanded, not <details>: the `toggle` event neither
   bubbles nor is delegated by event-delegation.js, so a data-ontoggle handler
   would never fire. */
.adv-filters {
  margin-top: 4px;
}
.adv-filters-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: var(--border-1);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  text-align: left;
}
.adv-filters-summary:hover {
  border-color: var(--accent);
}
.adv-filters-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.adv-filters-summary[aria-expanded='true'] .adv-filters-caret {
  transform: rotate(180deg);
}
.adv-filters-summary-count {
  margin-left: auto;
  padding: 2px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.adv-filters-summary-count[hidden] {
  display: none;
}
.adv-filters-body {
  padding-top: 14px;
}
.adv-filters-body[hidden] {
  display: none;
}

/* ── Facets. `minmax(min(240px, 100%), 1fr)` — the inner min() is what keeps a
   240px track from forcing a horizontal scrollbar at 390px wide. ── */
.adv-facet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.adv-facet {
  border: var(--border-1);
  border-radius: 12px;
  padding: 10px 12px 12px;
  margin: 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.02);
}
.adv-facet-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.adv-facet-count {
  padding: 1px 7px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: 0;
}
.adv-facet-count[hidden] {
  display: none;
}
/* No max-height and no overflow here on purpose: a scrollable list inside a
   disclosure inside the page is a nested scroll trap on touch, and the
   disclosure already answers "this is too much at once". */
.adv-facet-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.adv-facet-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s, color 0.1s;
}
.adv-facet-option:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.adv-facet-option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.adv-facet-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adv-facet-unavailable {
  border-style: dashed;
}
.adv-facet-note,
.adv-cat-unavailable {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-dim);
}
.adv-cat-unavailable p {
  margin: 0 0 8px;
}

.adv-bounds-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 14px;
}

/* ── The five result states. Distinguished by TEXT first; the tint is
   secondary, so the page still reads correctly with colour stripped out. ── */
.adv-state .icon {
  font-size: 30px;
}
.adv-state-invalid,
.adv-state-unreadable {
  border: 1px solid rgba(247, 127, 0, 0.35);
  border-radius: 14px;
}
.adv-state-invalid .adv-clear-btn,
.adv-state-unreadable .adv-search-btn {
  margin-top: 12px;
}

/* ── Recorded licence, on a result card and on the listing page. ──
   Five tones, each carrying its meaning in its own words — `permitted` is the
   only one that may look like permission, and only an observed, unreviewed
   `allow` can reach it (commercialUseStanding in search-advanced.js). */
.catalog-license-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  min-width: 0;
}
.catalog-license-chip__label {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.catalog-license-chip__detail {
  font-size: 10px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.catalog-license-chip--permitted {
  border-color: rgba(41, 196, 169, 0.45);
  background: rgba(41, 196, 169, 0.1);
  color: var(--green);
}
.catalog-license-chip--conditional {
  border-color: rgba(247, 127, 0, 0.45);
  background: rgba(247, 127, 0, 0.1);
  color: var(--orange);
}
.catalog-license-chip--denied {
  border-color: rgba(214, 40, 40, 0.4);
  background: rgba(214, 40, 40, 0.08);
  color: var(--accent);
}
.catalog-license-chip--disputed {
  border-color: rgba(247, 127, 0, 0.5);
  background: rgba(247, 127, 0, 0.14);
  color: var(--orange);
}
/* `unrecorded` stays deliberately quiet: "we do not know" is not a warning and
   must not compete with the card's title for attention. */
.catalog-license-chip--unrecorded {
  color: var(--text-dim);
}

.catalog-license-evidence {
  margin: 16px 0;
  padding: 12px 14px;
  border: var(--border-1);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.catalog-license-evidence .catalog-license-chip {
  margin: 8px 0 10px;
}
.catalog-license-evidence__identity {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.catalog-license-evidence__origin,
.catalog-license-evidence__observed {
  font-size: 12px;
  color: var(--text-dim);
}
.catalog-license-evidence__ruling {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}
.catalog-license-evidence__action {
  font-weight: 600;
  color: var(--text);
}
.catalog-license-evidence__reading {
  margin-left: auto;
  text-align: right;
}
.catalog-license-evidence__silent {
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.catalog-license-evidence__changed {
  margin-top: 8px;
  color: var(--orange);
}
.adv-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.adv-results-count {
  font-size: 14px;
  color: var(--text-muted);
}
.adv-results-method {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}
.adv-results-method.semantic {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}
.adv-results-method.keyword {
  background: rgba(41, 196, 169, 0.15);
  color: var(--green);
}
/* `.adv-results-method.hybrid` was deleted 2026-09-17: no code path can emit
   `search_method: "hybrid"`. The value is produced only by
   src/routes/catalog-search-route.ts and
   src/services/catalog/catalog-search-engine.ts, whose entire vocabulary is
   keyword / keyword_fallback / semantic plus a `_fuzzy` suffix, and the literal
   'hybrid' appears nowhere in the repository. The rule could never match. */
/* keyword_fuzzy / keyword_fallback_fuzzy — the result set carries a
   typo-rescue band. Same slugify path as the badges above. */
.adv-results-method.keyword_fuzzy,
.adv-results-method.keyword_fallback_fuzzy {
  background: rgba(247, 127, 0, 0.15);
  color: var(--orange);
}

/* Boundary between literal matches and the trigram near-miss band
   (fuzzy_offset). Reads as a section heading, not a result. */
.adv-fuzzy-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
}
.adv-fuzzy-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.adv-fuzzy-divider-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* `.adv-search-link` used to be declared again HERE, in the advanced-search
   section, and again for its :hover and its svg — a second rule for a search-page
   control that no longer exists in the markup. Because this sheet loads after
   styles.css, it was quietly winning most of the header pill's appearance while
   losing min-height and font-weight to it, so the pill rendered as a blend of two
   rules 2,590 lines apart in the original file. Merged into the single block in
   styles.css (see the WHY there) on 2026-08-10, values chosen so the rendered
   result is unchanged. Do not re-add a copy here. */

/* ── The category facet: tokens + typeahead (#966) ────────────────────────────
   An open facet of thousands of catalog-owned categories, so the selected
   members are the only ones on screen and the rest are one search away. The
   token IS a checkbox (that is how readForm reads this facet like every other
   one); the native box is taken out of the flow rather than `display:none`, so
   it stays focusable and the keyboard can still untick a token. */
.adv-facet-typeahead {
  /* The trigger's menu is absolutely positioned against .adv-cat-dropdown, and
     a fieldset establishes no containing block on its own. */
  position: relative;
}
.adv-cat-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.adv-cat-tokens:not(:empty) {
  margin: 8px 0;
}
.adv-cat-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 8px 4px 10px;
  border: 1px solid rgba(214, 40, 40, 0.3);
  border-radius: 16px;
  background: rgba(214, 40, 40, 0.1);
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}
.adv-cat-token:hover {
  background: rgba(214, 40, 40, 0.18);
  border-color: var(--accent);
}
.adv-cat-token input {
  /* Off-screen, not hidden: a hidden input is unreachable from the keyboard,
     and unticking the box is how a token is removed. */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.adv-cat-token:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.adv-cat-token-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adv-cat-token-x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.75;
  flex-shrink: 0;
}
.adv-cat-token:hover .adv-cat-token-x {
  opacity: 1;
}
/* How several categories combine. Present only once it modifies something. */
.adv-cat-match {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.adv-cat-match select {
  flex: 1;
  min-width: 0;
  min-height: 44px;
}

/* Category multi-select dropdown */
.adv-cat-dropdown {
  position: relative;
}
.adv-cat-trigger {
  padding: 10px 14px;
  background: rgba(255,255,255,0.035);
  border: var(--border-1);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s;
  /* 44px is the house tap-target floor (`--humpf-tap-min`); the trigger rendered at 43px in QA
   * because the previous 42px min-height + 1px border collapsed under the
   * browser's box model on the search page. Bumping to 44px clears the
   * floor without changing the visual padding. */
  min-height: 44px;
}
.adv-cat-trigger:hover { border-color: var(--accent); }
.adv-cat-trigger .placeholder { color: var(--text-dim); }
.adv-cat-trigger svg { width: 16px; height: 16px; color: var(--text-dim); flex-shrink: 0; }
.adv-cat-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card-strong);
  border: var(--border-1);
  border-radius: 14px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
  display: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.adv-cat-menu.open { display: block; }
.adv-cat-search {
  padding: 10px 12px;
  border-bottom: var(--border-1);
  position: sticky;
  top: 0;
  background: var(--bg-card);
}
.adv-cat-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg);
  border: var(--border-1);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.adv-cat-search input:focus { border-color: var(--accent); }
.adv-cat-option {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
  color: var(--text-muted);
}
.adv-cat-option:hover { background: var(--bg-hover); color: var(--text); }
/* The keyboard's place in the listbox. The rows are not tab stops — the filter
   box keeps the focus and names the active row through aria-activedescendant —
   so the focus ring the browser would draw is not available here and this rule
   is what a keyboard user actually sees. */
.adv-cat-option--active {
  background: var(--bg-hover);
  color: var(--text);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.adv-cat-option.selected { color: var(--accent); font-weight: 600; }
.adv-cat-option .check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.adv-cat-option.selected .check {
  background: var(--accent);
  border-color: var(--accent);
}
.adv-cat-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
}