/* SEARCH MODULE STYLES */

.search-surface {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  max-width: 720px;
  margin: 0 auto;
}

.search-head {
  margin-bottom: 14px;
}

.search-box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#view-search .search-box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Search input row: mobile back button + input. On desktop the back button is
   hidden, leaving this a plain wrapper around the input (no visual change). */
.search-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input-row .input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile-only back-to-Home affordance for the full-page Search screen. */
.search-mobile-back {
  display: none;
}

/* Clean entry sheet (mobile): until the user types (or arrives via a ?q= /
   ?category= deep link), the Search screen shows only back button + input —
   no filter row, no auto-loaded results. Toggled by search.js via
   .search-entry-mode on #view-search. Desktop never enters this mode. */
.search-entry-hint {
  display: none;
}

@media (max-width: 720px) {

  /* !important needed on the filters row only: it counters the existing
     `.mobile-filters { display: flex !important }` show rule above (state
     attribute interop per the override policy). Applies to both pre-commit
     stages: entry (empty) and suggest (typing). */
  #view-search.search-entry-mode .search-mobile-filters,
  #view-search.search-suggest-mode .search-mobile-filters {
    display: none !important;
  }

  #view-search.search-entry-mode .search-results-label,
  #view-search.search-entry-mode .search-people,
  #view-search.search-entry-mode #searchResults,
  #view-search.search-entry-mode #searchResultsFooter,
  #view-search.search-suggest-mode .search-results-label,
  #view-search.search-suggest-mode .search-people,
  #view-search.search-suggest-mode #searchResults,
  #view-search.search-suggest-mode #searchResultsFooter {
    display: none;
  }

  /* Reddit-style full-screen search: on mobile the search screen REPLACES the
     site top bar. Hide the shared header (logo/location/menu) for the whole
     search view — the back-button + input row becomes the top app bar. */
  body.view-search .topbar-wrap {
    display: none;
  }

  /* Zero the shell's top + side gutters so the search view fills the screen
     edge-to-edge. (Negative margins were used before, but they let long
     non-wrapping suggestion text push the view WIDER than the viewport, causing
     horizontal overflow — the input and rows spilled off the right edge.) */
  body.view-search .layout-wrapper {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* CRITICAL: .page is a grid item (layout-wrapper is display:grid). Grid items
     default to min-width:auto, which refuses to shrink below their content's
     min-content width — the nowrap suggestion text then forces .page (and the
     whole search view) WIDER than the 1fr track, spilling off the right edge.
     min-width:0 lets it shrink back to the viewport so text can ellipsize. */
  body.view-search .page {
    min-width: 0;
  }

  body.view-search #view-search {
    margin: 0;
    padding-top: 0;
    min-width: 0;
    background: #fff;
    min-height: 100vh;
    /* Belt-and-braces: never let a stray wide child scroll the sheet sideways.
       `clip`, not `hidden` — same reason as html/body in static/css/style.css:
       `overflow-x: hidden` forces overflow-y to compute as `auto`, turning this
       into a phantom scroll container that breaks `position: sticky` on the
       search app bar below. `clip` blocks sideways scroll without one. */
    overflow-x: clip;
  }

  #view-search .search-suggest-item {
    min-width: 0;
  }

  /* Sticky top app bar, split the way Google and Reddit split it: the SEARCH ROW
     pins to the top of the viewport so a new search is always one tap away,
     while the FILTER ROW scrolls away with the results. Pinning both would eat a
     large slice of a phone screen and push results out of view.
     .search-head is now just a wrapper — the two rows each carry their own
     padding so the sticky row can span the full width. */
  #view-search .search-head {
    position: sticky;
    top: 0;
    /* Above results/post cards; far below the location modal and the teleported
       date-picker overlays (z-index 12000+ in date-picker.css). */
    z-index: 20;
    margin: 0;
    background: #fff;
    /* 16px sides = the shared content gutter (matches results label + posts). */
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid #F1F5F9;
  }

  /* Scrolls away under the pinned bar. It used to inherit the app bar's inset;
     now it carries its own gutter plus the gap that .search-head used to add.
     ONE row that swipes sideways (Reddit/Google), not a wrapping block: with
     fixed-width chips the row wrapped onto a second line and stood 99px tall,
     pushing results off a phone screen. Every chip is a non-shrinking flex item,
     so adding another category attribute lengthens the scroll, never the height. */
  #view-search .search-mobile-filters {
    margin-top: 0;
    padding: 10px 16px;
    background: #fff;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar: the chips themselves signal that the row scrolls. */
    scrollbar-width: none;
  }

  #view-search .search-mobile-filters::-webkit-scrollbar {
    display: none;
  }

  #view-search .search-mobile-filters > * {
    flex: 0 0 auto;
  }

  /* All chips share one height so the row reads as a single aligned strip. They
     were 33px, 33px and 36px before — visibly uneven. Widths follow content
     instead of the old fixed 150/130/140px, which is what forced the wrap. */
  #view-search .search-mobile-filters .filter-input,
  #view-search .search-mobile-filters .date-picker-trigger {
    min-height: 34px;
    height: 34px;
    width: auto;
    min-width: 0;
    /* Cap so one long value can't dominate the row: "United Arab Emirates"
       measured 194px, over half the screen. Truncate instead. */
    max-width: 140px;
    text-overflow: ellipsis;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Dynamic category attributes (e.g. Job Type) render as label-above-select
     groups for the desktop sidebar. On this row they sit inline so the group
     becomes one chip-sized unit instead of a full-width stacked block. */
  /* display: contents so the groups inside become direct flex items of the
     scrolling row. As a normal block this wrapper would be ONE item stacking its
     groups vertically, and the row would grow tall again with 2+ attributes. */
  #view-search .search-dynamic-filters-mobile {
    display: contents;
  }

  #view-search .search-mobile-filters .dynamic-search-field {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #view-search .search-mobile-filters .dynamic-search-field .form-label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--muted);
  }

  /* Suggest stage: Reddit-style plain rows under the input. */
  .search-suggest-list {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Rows go full-bleed and flat on the white sheet (no card/menu look). */
  #view-search.search-suggest-mode .search-suggest-item {
    border-radius: 0;
    /* Vertical space comes from the 52px min-height, so padding only sets the
       16px side gutter shared with the app bar and the results below. */
    padding: 6px 16px;
  }

  #view-search.search-suggest-mode .search-suggest-section {
    padding: 14px 16px 4px;
  }

  /* Results stage: the app bar + suggestion sheet are intentionally full-bleed,
     but now that the shell side gutters are removed the RESULTS content would
     hug the screen edges. Give it back the same 16px gutter (posts already
     inset by 16px; the filter row inherits its inset from the app bar). */
  #view-search .search-results-label,
  #view-search .search-people-heading,
  #view-search .search-people-list,
  #view-search .search-results-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* The result count sits directly under the filter row / separator line — give
     it clear breathing room above so it isn't cramped against the divider. */
  #view-search .search-results-label {
    margin-top: 16px;
    margin-bottom: 14px;
  }

  .search-suggest-item {
    display: flex;
    align-items: center;
    /* 14px icon-to-text gap and a 52px row: the Reddit/Google suggestion row
       proportions. Height comes from min-height + centring rather than padding
       alone, so one-line and two-line rows stay the same height. */
    gap: 14px;
    width: 100%;
    /* border-box so 100% width + padding can't push past the right edge. */
    box-sizing: border-box;
    min-height: 52px;
    padding: 8px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    /* 500, not 400: at regular weight the rows read washed-out next to Reddit's
       and Google's suggestion lists. Colour is already the darkest token
       (--text #0F172A), so weight is the only lever left. */
    font-weight: 500;
    line-height: 1.35;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
  }

  .search-suggest-item:hover,
  .search-suggest-item:active {
    background: #F8FAFC;
  }

  /* 32px box = the same width as the People-row avatar, so text starts on the
     same x in both row types instead of stepping sideways. The glyph inside stays
     18px; it was 15px and read as a stray dot next to 15px text. */
  .search-suggest-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--muted);
    flex-shrink: 0;
  }

  .search-suggest-item-icon svg {
    width: 18px;
    height: 18px;
  }

  .search-suggest-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "People" section label between query rows and profile rows. */
  .search-suggest-section {
    padding: 12px 8px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* Profile suggestion rows: avatar + name + handle (Reddit-style). */
  .search-suggest-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .search-suggest-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E2E8F0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
  }

  .search-suggest-person-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .search-suggest-person-name {
    /* 15px/500 matches the query rows' 15px text — 14px/600 made People rows
       look like a different, heavier list stapled underneath. */
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-suggest-person-handle {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-search.search-entry-mode .search-entry-hint {
    display: block;
    padding: 56px 16px;
    text-align: center;
    color: var(--muted);
    /* Helper text, not body copy — the <p> inherits 16px otherwise. */
    font-size: 14px;
  }

  #view-search.search-entry-mode .search-entry-hint p {
    font-size: 14px;
  }

  .search-entry-hint p {
    margin: 0;
  }
}

/* 720px = the mobile-web breakpoint where the desktop left nav / filter sidebar
   is hidden and Search becomes a full-page screen, so the back button appears. */
@media (max-width: 720px) {
  .search-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* 44px = the minimum comfortable tap target on mobile (was 40px). The icon
       itself is sized down to 20px in view.html so the button reads lighter, not
       heavier, despite the bigger hit area. */
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }

  .search-mobile-back:hover {
    background: #F1F5F9;
  }
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  z-index: 2;
  pointer-events: none;
}

.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 40px 12px 42px;
  /* indent for icon */
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  /* 16px is a hard floor, not a style choice: iOS Safari zooms the whole page
     when a focused input's font-size is under 16px, which jumps the layout on
     every tap. Shared by the Home bar and the search sheet — keep them equal so
     tapping Home's bar into the sheet shows no size jump. */
  font-size: 16px;
  outline: none;
  box-shadow: none;
}

.input:focus {
  border-color: #94a3b8;
  box-shadow: none;
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 999px;
  cursor: pointer;
}

.search-clear-btn[hidden] {
  display: none !important;
}

.search-clear-btn:hover {
  background: #f1f5f9;
  color: #334155;
}

.search-clear-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.filters {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-mobile-filters {
  margin-top: 12px;
}

.search-mobile-loc-trigger {
  width: 150px;
  cursor: pointer;
}

.search-mobile-cat-filter {
  width: 130px;
}

.search-dynamic-filters-mobile {
  display: none;
  width: 100%;
  margin-top: 10px;
}

select.filter-input,
input.filter-input {
  appearance: none;
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}

select.filter-input {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #94A3B8 50%),
    linear-gradient(135deg, #94A3B8 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2.5px),
    calc(100% - 9px) calc(50% - 2.5px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select.filter-input:hover,
input.filter-input:hover {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
}

select.filter-input:focus,
input.filter-input:focus {
  outline: none;
  border-color: var(--brand-dark);
}

.search-results-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}

body.view-search #view-search .search-surface #searchResults {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 16px;
  overflow: visible;
  padding-bottom: 80px;
}

.search-results-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0;
}

.search-results-footer[hidden] {
  display: none !important;
}

.search-results-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  color: var(--muted, #64748b);
  font-size: 13px;
  font-weight: 600;
}

.search-results-loading[hidden] {
  display: none !important;
}

.search-results-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  border-top-color: #0ea5e9;
  animation: search-results-spin 0.8s linear infinite;
}

.search-empty-state {
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  color: var(--muted, #64748b);
}

.search-empty-state-icon {
  display: none;
}

.search-empty-state-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.search-empty-state-copy {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}