/*
 * The criteria of one search, in the column the search itself sits in.
 *
 * Two conventions exist and they answer different questions. An *item* is
 * edited on the right — Etsy, Remote, Acctual, Julienne, Base44, Origin — where
 * you finish, close, and go back to the list. *Settings* whose effect shows
 * live are edited on the left, beside the thing they change: Ferndesk, GitBook,
 * Square all put the controls there and the result next to them.
 *
 * Criteria are settings and their effect is the list, so this is the second
 * kind. It also lands where it belongs: the search being edited is a card in
 * this very column, and the panel stands over it.
 *
 * Nothing is veiled, deliberately. Watching the result is the point, and the
 * number that answers a switch — "3 biens sur 42" — sits just past the panel's
 * right edge, fully lit. A centred modal was tried and gives that up: it dims
 * the answer to hold a setting.
 *
 * Exactly the width of the column it stands over, so the listings beside it are
 * untouched — including their heading, which is the count a switch changes.
 *
 * Positioned inside the shell's body rather than the viewport: the application
 * header stays where it is, and the panel spans precisely the columns' height.
 *
 * Above Leaflet, which puts its control containers at 1000. Reading the
 * attribution element itself says 800; stopping there once left the panel under
 * the map's own furniture.
 */

.criteria-sheet {
  position: absolute;
  z-index: 1100;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-width);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 24px 0 60px -20px rgba(25, 28, 29, 0.35);
}

/* Its own scroller: a modal is not inside the page's, and the last switch has
 * to be reachable on a laptop. */
.criteria-sheet__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.criteria-sheet__header {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}

.criteria-sheet__header b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.criteria-sheet__eyebrow {
  display: block;
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--label-weight);
  margin-bottom: 0.15rem;
}

.criteria-sheet__close {
  flex: none;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
}

/* The groups were built for a narrow rail. Given a wide column they sit two
 * abreast, which keeps the switches within one screen instead of a long scroll. */
.criteria-sheet .criteria-rail__group {
  break-inside: avoid;
}

.criteria-sheet__danger {
  padding: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Filled red, alone among the panel's controls.
 *
 * It was an outlined button in the same purple the interface uses for "a model
 * inferred this", which is a provenance mark and not a warning — so the one
 * control that destroys something looked like a note about a photograph. */
.criteria-sheet__delete {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--danger);
  color: var(--danger-contrast);
  cursor: pointer;
}

.criteria-sheet__delete:hover {
  filter: brightness(0.92);
}