/*
 * The criteria of one search, standing over the column they belong to.
 *
 * 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.
 *
 * Nothing is veiled. Those three dim nothing, because watching the result is
 * the point — and the number that answers a switch, "3 biens sur 42
 * rapatriés", sits just past the panel's right edge, fully lit.
 *
 * Earlier drafts replaced the map column, which read as navigation rather than
 * as a layer, then floated in from the right, which put the editor as far from
 * its card as the screen allows.
 */

/* 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, and elementFromPoint at the overlapping corner is
 * what caught it. */
.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: the panel is out of the shell's layout now, so it cannot
 * borrow the one the columns share. */
.criteria-sheet .app-shell__scroll {
  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);
}

.criteria-sheet__delete {
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--inferred);
  cursor: pointer;
}

.criteria-sheet__delete:hover {
  border-color: var(--inferred);
  background: var(--inferred-soft);
}