/* ==========================================================================
   Results page — Stitch-style top header (mobile only, scoped to .results-page)
   Borrows the Stitch idea: [ back ]  [ FindMotos ]  [ filter + dot ], with the
   sort shown as a "Sort: <current> v" text link. The shared app header is
   hidden here on mobile; desktop is left completely untouched (this header is
   hidden ≥981px and the shared header + filter sidebar stay as they were).
   ========================================================================== */

/* hidden on desktop — desktop keeps the shared header + inline filter sidebar */
.rs-header { display: none; }

@media (max-width: 980px) {
  /* replace the shared app header on the results page */
  body.results-page .site-header { display: none; }

  .rs-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 40);
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 64px;
    padding-inline: var(--space-3);
    background: var(--color-bg);
    box-shadow: 0 2px 14px rgba(26, 35, 48, 0.08);
  }

  .rs-header__back,
  .rs-header__filter {
    grid-row: 1;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius);
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
  }
  .rs-header__back { grid-column: 1; justify-self: start; }
  .rs-header__filter { grid-column: 3; justify-self: end; }
  .rs-header__back:hover,
  .rs-header__filter:hover { background: var(--color-gray-soft); }
  .rs-header__back:active,
  .rs-header__filter:active { transform: scale(0.95); }
  .rs-header__back svg,
  .rs-header__filter svg { width: 24px; height: 24px; }
  [dir="rtl"] .rs-header__back svg { transform: scaleX(-1); }

  /* centred wordmark (reuses the app's two-tone brand) */
  .rs-header .brand--logo { grid-column: 2; justify-content: center; margin: 0; }
  .rs-header .brand--logo .brand__word { font-size: 1.5rem; }

  /* active-filter indicator dot on the filter icon */
  .rs-header__dot {
    position: absolute;
    top: 9px;
    inset-inline-end: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5484d;
    border: 2px solid var(--color-bg);
  }

  /* Toolbar → Stitch look: keep the count, turn Sort into a "Sort: X v" link.
     (The Filter button now lives in the header; the desktop sort <select>
     isn't used on mobile.) */
  /* count on the start edge, "Sort: X" on the end edge — single row */
  body.results-page .toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border: 0;
  }
  body.results-page .toolbar__count { order: 0; margin: 0; flex: 0 1 auto; }
  body.results-page .toolbar__actions {
    order: 1;
    margin: 0;
    flex: 0 0 auto;
    width: auto;
    display: flex;
    justify-content: flex-end;
  }
  body.results-page .toolbar__actions .sort-desktop { display: none; }
  body.results-page .sort-trigger.rs-sort {
    min-height: 0;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 4px;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-weight: 600;
  }
  body.results-page .sort-trigger.rs-sort:hover { background: transparent; }
  body.results-page .sort-trigger.rs-sort svg { width: 18px; height: 18px; }
}