/* "More filters" — on mobile, collapse the refinement filters (keyword, starts-with,
   length, culture, scripture) behind a disclosure. On desktop the wrapper is transparent
   (display:contents) so the control-bar layout is unchanged. */
.morefilters { display: contents; }
.morefilters-btn { display: none; }
.clearfilters-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-control); padding: 8px 13px; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.clearfilters-btn:hover { border-color: var(--pink); color: var(--ink); }
/* keep desktop order identical (search stays first though it now sits after gender in the DOM) */
@media (min-width: 901px) { .controls .grow { order: -1; } }
@media (max-width: 720px) {
  .morefilters-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    order: 2; flex: 0 0 100%; max-width: 340px;
    background: var(--panel); border: 1px solid var(--line); color: var(--ink);
    border-radius: var(--r-control); padding: 11px 13px; font-size: 1rem; cursor: pointer;
  }
  .morefilters-btn.active { border-color: var(--accent); }
  .morefilters-btn .mf-badge { background: var(--accent); color: #20150a; font-weight: 700; font-size: .78rem; border-radius: var(--r-pill); padding: 1px 7px; }
  .morefilters-btn .mf-caret { color: var(--dim); font-size: .8rem; }
  .morefilters { display: none; order: 3; flex-direction: column; gap: 10px; flex: 0 0 100%; max-width: 340px; }
  .morefilters.open { display: flex; }
  .morefilters .grow { order: 2; width: 100%; max-width: none; }
  .morefilters .fpair { order: 1; flex: 0 0 auto; width: 100%; max-width: none; }
}

/* ── Uniform control height ────────────────────────────────────────────
   Every filter control (inputs, the style select, popover triggers, segmented
   toggles, Clear/More-filters, the shuffle icon) shares the height of the
   Actions / Current-list buttons (34px), so the whole control area lines up. */
#surname, #search, #middleInput, #midStyle,
.controls .ms-btn,
.clearfilters-btn, .morefilters-btn,
.seg, .iconbtn,
.saveto-btn, .favactions-btn {
  height: 34px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.seg button { padding-top: 0; padding-bottom: 0; }