.search-layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

/* Filters / Vibe search — a page-level tab strip, same pattern and
   classes as properties.php's Results/Searches tabs (2026-09-15,
   Rickard's request to give vibe search its own tab). */
.view-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.view-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
#describeView[hidden], #filtersView[hidden] { display: none; }

.field-group {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--surface);
}

.field-group h2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.disabled-group { opacity: 0.55; }
.disabled-group input, .disabled-group select, .disabled-group textarea { cursor: not-allowed; }

/* Replaces five separate "currently only works when searching Idealista"
   sentences (2026-09-06) — a chip on the section header plus the section
   greying itself out (via .disabled-group, toggled in pages/search.js's
   updateIdealistaGating()) when Idealista isn't ticked, so it's a rule the
   interface enforces rather than one you have to read and remember. Just
   capability information, not a signal, so it stays neutral rather than
   borrowing one of the four meaning-carrying colours (Phase 6). */
.idealista-chip { margin-left: 6px; }

.idealista-disabled-note { color: var(--watch); }

/* Rooms/Condition/Features/Floor/Energy/Published — collapsed by default,
   the header keeps the same look a <section>'s <h2> always had. */
details.field-group summary {
  cursor: pointer;
  list-style: revert;
}
details.field-group summary h2 { display: inline; }
details.field-group summary::marker { color: var(--ink-3); }
details.field-group[open] summary { margin-bottom: 10px; }

/* Phase 5 Part 4.2 — a collapsed section still shows what's set inside it,
   so collapsing never hides information, only the controls for changing it. */
.section-summary {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px;
}
details.field-group[open] .section-summary { display: none; }

/* Phase 5 Part 4.3 — one removable chip per active filter, above the form.
   Neutral, not a signal colour — this is "what's set", not good/bad/AI data. */
.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 3px 6px 3px 10px;
  border-radius: 14px;
}
.filter-chip button {
  font: inherit;
  line-height: 1;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 50%;
}
.filter-chip button:hover { background: rgba(20,32,43,0.08); }

/* Phase 5 Part 4.4 — an honest diagnosis when a search comes back with
   nothing, instead of just reporting zero. */
.diagnosis-note {
  display: block;
  margin-top: 4px;
  color: var(--watch);
}

.field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
/* The recurring [hidden]-vs-author-display bug this project keeps
   re-finding (see CLAUDE.md) — .field-row's own display:flex beats the
   browser's default [hidden]{display:none} at equal specificity, so a
   plain hidden attribute silently does nothing without this override. */
.field-row[hidden] { display: none; }

.field-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-3);
  flex: 1 1 160px;
}

.field-row input, .field-row select, .search-layout > form > .field-group > select {
  font: inherit;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 16px;
  font-size: 13px;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 6px;
  align-items: center;
}

.group-label { font-size: 12px; color: var(--ink-3); margin-right: 4px; }

.cb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.cb input:disabled + * , label.cb:has(input:disabled) { color: var(--ink-3); }

.hint {
  font-size: 12px;
  color: var(--ink-3);
  margin: 6px 0 0;
}

.submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#submitBtn {
  font: inherit;
  font-weight: 600;
  padding: 8px 20px;
  border: none;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}
#submitBtn:hover { filter: brightness(1.15); }
#submitBtn:disabled { opacity: 0.6; cursor: default; filter: none; }

.save-search-row { margin-top: 10px; }
.save-search-row input {
  flex: 1 1 auto;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
#saveSearchBtn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
#saveSearchBtn:hover { background: var(--paper); }
#deleteSavedSearch {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--bad);
  cursor: pointer;
}

.form-status { font-size: 12px; color: var(--ink-3); }
.form-status.error { color: var(--bad); }
.form-status.success { color: var(--good); }

.cost-estimate { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cost-estimate .row { display: flex; justify-content: space-between; gap: 10px; }
.cost-estimate .row span:last-child { font-family: PlexM, monospace; }
.cost-estimate .total { font-weight: 600; }
.truncated-note { color: var(--watch); }

/* Municipality disambiguation (2026-09-06) — a real, confirmed data
   question ("which of these two real places did you mean"), not a
   warning, so it stays neutral rather than borrowing --watch/--bad. */
.municipality-disambig {
  margin: -4px 0 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.municipality-disambig .hint { margin: 0 0 6px; }
.municipality-disambig-options { display: flex; flex-wrap: wrap; gap: 6px; }
.municipality-disambig-warning { margin-top: 8px; color: var(--watch); }
.municipality-disambig-btn {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
}
.municipality-disambig-btn:hover { background: var(--line-soft); }
.municipality-disambig-btn.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* phase2 Part 6: natural-language search — purple to read as "AI", distinct
   from the blue search form it fills (non-negotiable #10's spirit extended
   to a third input mode: this doesn't search OR free-filter, it just fills
   in the form below for the user to review). */
.nl-search-group {
  background: var(--ai-bg);
  border-color: var(--line);
}
.nl-search-group textarea {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  resize: vertical;
  background: #fff;
}
.nl-search-actions { display: flex; gap: 8px; }
#nlSearchGoBtn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--r);
  cursor: pointer;
  border: none;
  background: var(--ai);
  color: #fff;
}
#nlSearchGoBtn:hover { filter: brightness(1.1); }
#nlSearchGoBtn:disabled { opacity: 0.6; cursor: default; filter: none; }
.nl-unmapped {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--watch);
}
.nl-unmapped li { margin-bottom: 2px; }
.nl-idealista-warning { color: var(--watch); }

/* Cost estimate + Search — last thing on the page, in normal flow
   (2026-09-06: no longer fixed to the viewport — Saved searches moved to
   just above this, so both are reachable at the bottom of the same
   natural scroll, not pinned separately). */
.search-footer {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.search-footer-summary {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.search-footer .cost-estimate { margin-bottom: 10px; }
.search-footer .submit-row { justify-content: flex-end; }

/* Mobile, 2026-09-14 (Rickard's request) — the form is already a single
   column with wrapping field-rows/checkbox-rows (flex-wrap was already
   doing most of the work), so this is mostly touch-target and spacing
   polish, not a restructure. Input font-size >= 16px is handled globally
   in app.css (prevents iOS Safari's zoom-on-focus). */
@media (max-width: 640px) {
  .search-layout { padding: 14px 12px 32px; }
  .field-group { padding: 12px 14px; }
  .field-row { gap: 10px 16px; }
  .field-row label { flex: 1 1 100%; }
  .checkbox-row { gap: 10px 16px; }
  .checkbox-row .cb, .radio-inline { font-size: 14px; }
  #submitBtn { width: 100%; padding: 12px 20px; font-size: 15px; }
  .save-search-row { flex-direction: column; }
  .save-search-row input, #saveSearchBtn { width: 100%; }
  .municipality-disambig-options { flex-direction: column; }
  .municipality-disambig-btn { width: 100%; text-align: left; }

  /* app.css's shared `input, select, textarea { font-size: 16px }` (the
     iOS zoom-on-focus fix) loses here to this file's own higher-specificity
     `.field-row input { font: inherit }`, which copies .field-row label's
     12px — caught live (a real municipality input measured 12px at a
     mobile viewport despite the shared rule existing), fixed with an
     equal-specificity override in the same file that set the low value. */
  .field-row input, .field-row select, .search-layout > form > .field-group > select,
  .save-search-row input, #loadSavedSearch, #saveSearchName, #nlSearchText {
    font-size: 16px;
  }
}