/* ── Bottom sheet (phone pickers) ────────────────────────────────────────────
   Figma kit «LidFly — Бренд и UI Kit 2026»: «Лист снизу / Шапка», «Чат / Лист сервисов»,
   «Чат / Лист режима»; screens on page 21. Behaviour: public/js/lidfly-ui-sheet.js.
   The sheet never rises above the cabinet header: its height is limited by the
   visible height minus --app-shell-top and 16 px; the list scrolls inside. */
.lf-sheet {
  position: fixed;
  inset: auto 0 0;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(var(--app-visual-height, 100dvh) - var(--app-shell-top, 0px) - 16px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card-lg) var(--radius-card-lg) 0 0;
  background: var(--color-bg-card);
  color: var(--color-text);
  box-shadow: var(--shadow-card-hover);
  font-family: var(--font-sans);
}

.lf-sheet[open] {
  display: flex;
  animation: lf-sheet-in 200ms cubic-bezier(0.2, 0, 0, 1);
}

.lf-sheet::backdrop {
  background: color-mix(in srgb, var(--color-scrim) 40%, transparent);
}

@keyframes lf-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-sheet[open] { animation: none; }
}

/* The page under an open sheet does not scroll. */
html.lf-sheet-open,
html.lf-sheet-open body {
  overflow: hidden;
}

.lf-sheet__head {
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  gap: 4px;
  padding-top: 8px;
  touch-action: none;
}

.lf-sheet__grabber {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
}

.lf-sheet__titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 4px 12px 8px 20px;
}

.lf-sheet__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* Neutral like «Лист снизу / Шапка» (Icon Button Ghost), not a brand action. */
.lf-sheet__close.btn-plain {
  --btn-fg: var(--color-text-secondary);
  flex: 0 0 auto;
}

.lf-sheet__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.lf-sheet__host {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* ── .lf-select / multiple choice inside a sheet ─────────────────────────────
   The host carries the select's own classes (.lf-select.open, --checkboxes, …),
   so its option styles keep working; only the dropdown geometry is dropped. */
.lf-sheet .lf-sheet__host.lf-select {
  position: static;
  width: 100%;
  max-width: none;
}

.lf-sheet .lf-sheet__host.lf-select .lf-select__panel {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lf-sheet .lf-sheet__host.lf-select .lf-select__search-wrap {
  padding: 0 16px 8px;
  border-bottom: 0;
  background: transparent;
}

.lf-sheet .lf-sheet__host.lf-select .lf-select__options {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lf-sheet .lf-sheet__host.lf-select .lf-select__option {
  min-height: 48px;
}

/* Pinned actions stay above the home indicator. */
.lf-sheet .lf-sheet__host.lf-select .lf-select__footer {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 20px;
}

.lf-sheet .lf-sheet__host.lf-select:not(.lf-select--deferred) .lf-select__options {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.lf-sheet__close .lf-icon {
  width: 20px;
  height: 20px;
}