/* ============================================================
   Gallery album toolbar — строка «предложить фото + сортировка»
   Сами контролы (кнопки-дропдауны и панели) — общий
   компонент controls.css (§7.10); здесь — только раскладка
   тулбара и содержимое панели фильтров.
   ============================================================ */

/* Тумблер загрузки слева, контролы справа. Выравнивание по верху,
   а не по центру: панель загрузки раскрывается ВНУТРИ левой колонки, и при
   center контролы уезжали бы к середине раскрытой формы. */
.gallery-album-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* space-between, а НЕ `margin-left: auto` у контролов: на узкой раскладке
     (планшет/телефон в альбомной) они переносятся на свою строку, и auto
     прижал бы их к правому краю — оторванными от тумблера. space-between
     раскладывает каждую строку отдельно, поэтому перенесённые контролы
     встают по левому краю, ровно под тумблером. */
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-block: var(--space-5) var(--space-6);
}

/* Вертикальный ритм строки задаёт тулбар — собственные отступы вложенных
   блоков гасим, иначе они сложатся с margin'ом тулбара. */
.gallery-album-toolbar > .gallery-suggest,
.gallery-album-toolbar > .gallery-closed {
  flex: 1 1 min(640px, 100%);
  margin-block: 0;
}

/* Правая колонка тулбара: дропдаун сортировки и кнопка «Фильтры»
   идут одной строкой и переносятся вместе. Контролы компактнее тумблера
   намеренно: тумблер — действие альбома, фильтры — тихая утилита. */
.gallery-album-controls {
  /* Оптическое центрирование на СВЁРНУТЫЙ тумблер: выравнивать всю строку по
     центру нельзя (панель загрузки раскрывается внутри левой колонки), поэтому
     компактные контролы сдвигаем на полуразницу высот вручную. */
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: 100%;
}

.gallery-album-controls > .gallery-sort {
  max-width: 100%;
}

/* Подпись прижимает шеврон к правому краю (см. .gallery-filters__label). */
.gallery-sort__label {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись прижимает точку и шеврон к правому краю кнопки —
   важно на мобайле, где кнопка растянута на всю ширину. */
.gallery-filters__label {
  margin-right: auto;
}

/* Панель «Фильтры»: ширина под чекбокс с пояснением (паддинг — канон §7.10). */
.gallery-filters__panel {
  min-width: 17rem;
  max-width: min(22rem, 90vw);
}

/* Чекбокс — тот же мелкий текст, что у селекта: это фильтр, не действие. */
/* Сетка вместо flex-колонки: галка центрируется по строке подписи, а пояснение
   встаёт во вторую колонку — ровно под подписью, без «лесенки». */
.gallery-official-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}

.gallery-official-toggle:hover {
  color: var(--text);
}

.gallery-official-toggle input {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.gallery-official-toggle__label {
  grid-area: 1 / 2;
  color: var(--text);
}

.gallery-official-toggle__note {
  grid-area: 2 / 2;
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* На узком экране контролы переносятся под тумблер и занимают всю ширину —
   длинные подписи («По дате съёмки: сначала ранние») иначе не помещаются.
   Кнопка «Фильтры» и её панель растягиваются вместе с сортировкой. */
@media (max-width: 600px) {
  .gallery-album-controls,
  .gallery-album-controls > .gallery-sort,
  .gallery-album-controls > .gallery-filters,
  .gallery-sort .filter-trigger,
  .gallery-filters .filter-trigger {
    width: 100%;
  }

  .gallery-sort__panel .filter-option-list {
    min-width: 0;
    max-width: none;
  }

  .gallery-sort__panel,
  .gallery-filters__panel {
    left: 0;
    min-width: 0;
    max-width: none;
  }
}