/* ============================================================
   search.css — the /search results page (M2)
   Layout only; cards/variables come from style.css. Deliberately
   contains NO marketing chrome (no trust block, stats bar, trending
   shelf, tag scroller) — see T2.1.
   ============================================================ */

/* Keep the header search visible on the search page at every breakpoint
   (style.css hides .header-search-wrap ≤760px for the homepage collapse). */
.search-page .header-search-wrap { display: flex !important; position: relative; }
.search-page .header-search { min-width: 0; }

/* ── Autocomplete combobox (M4) ─────────────────────────── */
.suggest-box {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.4); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.suggest-item {
  padding: 9px 13px; font-size: 13.5px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 38px; display: flex; align-items: center;
}
.suggest-item[aria-selected="true"], .suggest-item:hover { background: var(--accent); color: #fff; }

/* Layout: filters as a HORIZONTAL bar on TOP, results stacked BELOW (§ user request
   2026-07-08 — no left rail / vertical split). Single column. */
.search-layout {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 24px 72px;
}

/* ── Facet bar (top, horizontal) ────────────────────────── */
.facet-rail {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 10px 12px;
  padding: 6px 0 14px;
  margin-bottom: 14px;
}
/* Each filter group is a "pill" card so options are visually grouped. */
.facet-group {
  margin: 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 13px;
  display: flex; flex-direction: column; justify-content: center;
}
.facet-group-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-bottom: 6px;
}
/* checkbox facet groups (platform, format) flow horizontally as compact chips */
#facet-platform, #facet-format { display: flex; flex-wrap: wrap; gap: 2px 12px; max-width: 470px; }
.facet-opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 4px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--text); min-height: 26px;
}
.facet-opt:hover { background: var(--bg); }
/* Dark, theme-matching custom checkbox (native was white — jarring on the dark UI). */
.facet-opt input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; cursor: pointer; margin: 0;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 4px; position: relative;
  transition: background .12s, border-color .12s;
}
.facet-opt input[type="checkbox"]:hover { border-color: var(--accent); }
.facet-opt input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.facet-opt input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.facet-opt input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.facet-opt .facet-label { white-space: nowrap; }
.facet-opt .facet-count { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.facet-select {
  width: auto; min-width: 120px; max-width: 210px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 13.5px; min-height: 36px;
}

.facet-group { min-width: 0; }
.facet-select { max-width: 100%; }
#facet-platform, #facet-format { max-width: 100%; }

/* Responsive fold: wide → pills wrap in rows; narrow desktop → stack one under the
   other (full-width pills); mobile (≤900) → collapse behind the Filters button. */
@media (max-width: 1080px) and (min-width: 901px) {
  .facet-rail { flex-direction: column; align-items: stretch; gap: 10px; }
  .facet-group { width: 100%; }
}

/* Mobile-tray overlay bits — unused on the top-bar desktop layout. */
.facet-tray-backdrop, .facet-tray-apply { display: none; }

/* ── Results column ─────────────────────────────────────── */
.results-col { min-width: 0; }

.results-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 9px;
}
.results-count { font-size: 15px; font-weight: 600; color: var(--text); }
.results-count .rc-q { color: var(--accent); }
.results-count .rc-hint { font-weight: 400; font-size: 12.5px; color: var(--text-dim); }
.results-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.results-tools label { font-size: 12.5px; color: var(--text-dim); }
.control-select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; min-height: 36px;
}

/* view toggle */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle button {
  background: var(--bg-2); border: none; color: var(--text-dim);
  width: 38px; height: 36px; display: grid; place-items: center; cursor: pointer;
}
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.view-toggle svg { width: 16px; height: 16px; }

/* applied-filter chips */
.applied-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.applied-chips:empty { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 6px 4px 11px; font-size: 12.5px; color: var(--text);
}
.filter-chip button {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.filter-chip button:hover { color: var(--text); }
.chip-clear-all {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 12.5px; padding: 4px 6px; text-decoration: underline;
}

/* facet help "?" + fits inputs */
.facet-group-title { display: flex; align-items: center; gap: 6px; }
.facet-help-btn, .control-help {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 50%; width: 20px; height: 20px; font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center; flex: none;
}
.control-help { width: 36px; height: 36px; border-radius: 8px; font-size: 15px; }
.facet-help-btn:hover, .control-help:hover { color: var(--text); border-color: var(--accent); }
#printer-custom { display: flex; }
.fit-input {
  width: 100%; min-width: 0; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; font-size: 13px; text-align: center;
}

/* help panel (T3.7) */
.help-panel {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.help-panel[hidden] { display: none; }
.help-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.help-panel h4 { font-size: 13px; margin: 0 0 8px; color: var(--text); }
.help-panel ul { margin: 0; padding-left: 18px; }
.help-panel li { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; line-height: 1.4; }
.help-panel strong { color: var(--text); }
.help-keys { list-style: none; padding: 0; }
.help-keys li { display: flex; align-items: center; gap: 8px; }
.help-panel kbd {
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; font-size: 11px; font-family: monospace; color: var(--text);
}
.help-tip { font-size: 12.5px; color: var(--text-dim); margin: 12px 0 0; line-height: 1.4; }
@media (max-width: 700px) { .help-cols { grid-template-columns: 1fr; gap: 14px; } }

/* preset quick-search chips (T3.8) */
.preset-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.preset-chips:empty { display: none; }
.preset-chip {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; color: var(--text); cursor: pointer; min-height: 34px;
}
.preset-chip:hover { border-color: var(--accent); color: var(--accent); }
.preset-chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* result grid — view modes */
.search-grid { display: grid; gap: 16px; }
.search-grid.grid-m { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.search-grid.grid-s { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.search-grid.grid-l { grid-template-columns: 1fr; gap: 12px; }
/* grid-l = list rows: card goes horizontal */
.search-grid.grid-l .model-card > a { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: stretch; }
/* List view: the thumb is a fixed-width grid column and fills the row height.
   The base .card-thumb has `aspect-ratio:4/3`; with height:100% on a tall card
   (long title/desc, esp. on narrow phones) that aspect-ratio would drive the
   thumb WIDTH out to ~220px, overrunning its column and covering the text.
   Force aspect-ratio:auto + width:100% so it stays inside its 128/190px track;
   the absolutely-positioned inner img keeps object-fit:cover. */
.search-grid.grid-l .card-thumb { height: 100%; min-height: 130px; aspect-ratio: auto; width: 100%; }
.search-grid.grid-l .card-body { padding: 14px 16px 14px 0; }
.search-grid.grid-l .card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--text-dim); font-size: 13px; margin-top: 6px;
}
.search-grid:not(.grid-l) .card-desc { display: none; }

/* fuzzy / suggestion banner */
.search-note {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 12px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-dim);
}
.search-note strong { color: var(--text); }

/* pagination + load more */
.results-footer { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager button {
  min-width: 38px; height: 38px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); cursor: pointer; font-size: 13px;
}
.pager button[aria-current="page"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager button:disabled { opacity: .4; cursor: default; }
.btn-load-more {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 11px 22px; cursor: pointer; font-size: 14px; min-height: 44px;
}
.btn-load-more:hover { border-color: var(--accent); }

/* zero-results state */
.search-empty { text-align: center; padding: 56px 20px; color: var(--text-dim); }
.search-empty svg { width: 46px; height: 46px; opacity: .5; margin-bottom: 14px; }
.search-empty h2 { color: var(--text); font-size: 19px; margin-bottom: 8px; }
.search-empty .empty-suggestions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.empty-suggestions a {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; color: var(--accent); font-size: 13px; text-decoration: none;
}

/* ── Mobile: facet rail becomes a bottom-sheet tray ─────── */
.facet-toggle-bar { display: none; }
@media (max-width: 900px) {
  .search-layout { padding: 10px 14px 80px; }
  /* Mobile: the top filter bar collapses behind a "Filters" button, expands INLINE
     (stacked) — no bottom sheet. */
  .facet-toggle-bar {
    display: flex; padding: 8px 0 4px; gap: 10px; align-items: center;
  }
  .btn-facet-toggle {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px;
    padding: 9px 14px; color: var(--text); font-size: 13.5px; min-height: 44px; cursor: pointer;
  }
  .btn-facet-toggle .facet-badge {
    background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px;
    padding: 1px 7px; min-width: 18px; text-align: center;
  }
  .facet-rail { display: none; flex-direction: column; align-items: stretch; gap: 14px; }
  .facet-rail.tray-open { display: flex; }
  #facet-platform, #facet-format { max-width: none; }
  .facet-select { max-width: none; }
  .facet-tray-apply { display: none !important; }
  .search-grid.grid-m { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .search-grid.grid-l .model-card > a { grid-template-columns: 128px minmax(0, 1fr); }

  /* Touch targets ≥44×44 @≤900w (T3.9) */
  .control-select { min-height: 44px; padding: 9px 12px; }
  .view-toggle button { width: 44px; height: 44px; }
  .facet-opt { min-height: 44px; }
  .pager button { height: 44px; }
  .filter-chip { min-height: 34px; }
  .filter-chip button { min-width: 30px; min-height: 30px; }
}

/* Desktop: the mobile "Filters" toggle bar is hidden (filters always visible on top). */
@media (min-width: 901px) { .facet-toggle-bar { display: none; } }

/* SEARCH-TEXTURED-FILES: artistic-texture card badge */
.card-tex-badge{position:absolute;left:8px;bottom:8px;z-index:3;padding:2px 7px;border-radius:8px;
  font-size:10px;font-weight:600;letter-spacing:.03em;color:#eef;
  background:linear-gradient(135deg,rgba(99,102,241,.92),rgba(168,85,247,.92));pointer-events:none;}