/* Точечные правки поверх Tabler: только то, чего в Tabler нет, без переопределения темы. */

/* Страница не скроллится горизонтально целиком: если что-то не влезает, скроллится
   оно само (см. .mobile-breadcrumb). */
html {
  overflow-x: hidden;
}
/* clip, а не hidden, на body: hidden на html и body сразу превращает body в скролл-контейнер
   (window.scrollY всегда 0), и страницу нельзя вернуть наверх. clip обрезает горизонтальный
   вылет, не создавая скролл-контейнера. */
body {
  overflow-x: clip;
  max-width: 100vw;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.gallery-grid a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Просмотр одного фото — ограничиваем и ширину, и высоту, чтобы вертикальные
   фото не растягивались на весь экран непропорционально горизонтальным. */
.photo-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 80vh;
  overflow: hidden;
  background: transparent; /* фон поверхности просвечивал бы по бокам вертикальных фото как рамка */
  border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
}
/* .photo-frame — обёртка ровно по размеру отрисованной картинки (не всего
   .photo-viewer, там пустое место по бокам из-за центрирования) — нужна как точка
   отсчёта для процентных координат подсветки лица. */
.photo-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
}
.photo-frame img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Подсветка места персоны на фото при наведении на карточку персоны справа.
   Координаты (left/top/width/height) — доли от размера фото из БД (photo_person_faces.bbox),
   подставляются в style="" прямо в шаблоне, здесь только внешний вид. */
.face-highlight {
  position: absolute;
  border: 3px solid var(--tblr-yellow);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.face-highlight.active {
  opacity: 1;
}
/* Карточки персон — квадратная аватарка-инициал + имя, кликабельно наводится */
.person-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: default;
}
.person-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--tblr-border-radius-sm);
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  font-weight: 600;
  font-size: .75rem;
  flex-shrink: 0;
}
.person-name {
  font-size: .8125rem;
}

/* Дерево папок */
.tree-root, .tree-children {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tree-children {
  padding-left: 1rem;
  border-left: 1px solid var(--tblr-border-color);
  margin-left: 0.4rem;
}
.tree-root li, .tree-children li {
  padding: 0.15rem 0;
}
.tree-root summary, .tree-children summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0; /* без этого flex-элемент не сжимается меньше своего текста — ellipsis не сработает */
}
/* Длинные названия папок обрезаются многоточием, полное имя видно в title. */
.tree-link {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Подсветка текущего пути в дереве. Ссылки Tabler по умолчанию цвета primary, поэтому text-primary
   и фон в тон primary не выделяются; используется комплементарный цвет относительно акцента,
   выбранного в панели настроек темы. По умолчанию (синий акцент, без data-bs-theme-primary) — оранжевый. */
.tree-current {
  background-color: var(--tblr-orange-lt);
  color: var(--tblr-orange) !important;
  font-weight: 600;
  padding: 0 .35rem;
  border-radius: var(--tblr-border-radius-sm);
}
html[data-bs-theme-primary="azure"] .tree-current { background-color: var(--tblr-orange-lt); color: var(--tblr-orange) !important; }
html[data-bs-theme-primary="indigo"] .tree-current { background-color: var(--tblr-yellow-lt); color: var(--tblr-yellow) !important; }
html[data-bs-theme-primary="purple"] .tree-current { background-color: var(--tblr-lime-lt); color: var(--tblr-lime) !important; }
html[data-bs-theme-primary="pink"] .tree-current { background-color: var(--tblr-green-lt); color: var(--tblr-green) !important; }
html[data-bs-theme-primary="red"] .tree-current { background-color: var(--tblr-cyan-lt); color: var(--tblr-cyan) !important; }
html[data-bs-theme-primary="orange"] .tree-current { background-color: var(--tblr-blue-lt); color: var(--tblr-blue) !important; }
html[data-bs-theme-primary="yellow"] .tree-current { background-color: var(--tblr-indigo-lt); color: var(--tblr-indigo) !important; }
html[data-bs-theme-primary="lime"] .tree-current { background-color: var(--tblr-purple-lt); color: var(--tblr-purple) !important; }
html[data-bs-theme-primary="green"] .tree-current { background-color: var(--tblr-pink-lt); color: var(--tblr-pink) !important; }
html[data-bs-theme-primary="teal"] .tree-current { background-color: var(--tblr-red-lt); color: var(--tblr-red) !important; }
.tree-ancestor {
  font-weight: 600;
}
/* Название фото (тег "Название") — комплементарный цвет к выбранному акценту
   (та же пара цветов, что у .tree-current) + курсив. Откат курсива: убрать
   строку font-style. Цвет задаёт переменная, чтобы любое место с названием
   просто получало класс .photo-title. */
html { --photo-title-color: var(--tblr-orange); }
html[data-bs-theme-primary="indigo"] { --photo-title-color: var(--tblr-yellow); }
html[data-bs-theme-primary="purple"] { --photo-title-color: var(--tblr-lime); }
html[data-bs-theme-primary="pink"] { --photo-title-color: var(--tblr-green); }
html[data-bs-theme-primary="red"] { --photo-title-color: var(--tblr-cyan); }
html[data-bs-theme-primary="orange"] { --photo-title-color: var(--tblr-blue); }
html[data-bs-theme-primary="yellow"] { --photo-title-color: var(--tblr-indigo); }
html[data-bs-theme-primary="lime"] { --photo-title-color: var(--tblr-purple); }
html[data-bs-theme-primary="green"] { --photo-title-color: var(--tblr-pink); }
html[data-bs-theme-primary="teal"] { --photo-title-color: var(--tblr-red); }
.photo-title {
  color: var(--photo-title-color);
  font-style: italic;
}
.tree-root summary::-webkit-details-marker,
.tree-children summary::-webkit-details-marker {
  display: none;
}
.tree-root summary::before,
.tree-children summary::before {
  content: "▸";
  font-size: 0.7em;
  color: var(--tblr-secondary);
}
details[open] > summary::before {
  content: "▾";
}

/* Карта места съёмки под фото — во всю ширину блока фото и информации. */
.photo-map {
  height: 320px;
  width: 100%;
  border-radius: var(--tblr-border-radius);
}

/* Leaflet.css задаёт .leaflet-container a { color: #0078A8 }: по специфичности это перебивает белый
   текст .btn-primary, и кнопка в попапе карты тёмно-синяя на синем фоне. !important — осознанно,
   перебивается стороннее правило. */
.leaflet-popup-content a.btn-primary {
  color: #fff !important;
}

/* Страница «На карте»: карта во весь доступный вертикальный размер, но не выше экрана. */
.map-page-canvas {
  height: 70vh;
  min-height: 420px;
  width: 100%;
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .map-page-canvas { height: 60vh; min-height: 320px; }
}

/* Иконка переключателя слоёв карты (свёрнутая кнопка L.control.layers): в наборе Leaflet нет
   images/layers.png, поэтому используется SVG в стиле остальных иконок сайта (три наложенных листа). */
.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") !important;
  background-size: 20px 20px;
  background-position: center;
}

/* KPI-плитки на главной («Фото», «Папок», «Лет архиву», «Людей на фото»): цветная полоска сверху
   и число в тон иконки. Используются токены цвета Tabler (--tblr-{color}, --tblr-{color}-lt),
   которые сами адаптируются под тёмную тему. */
.kpi-card {
  border-top: 3px solid var(--tblr-blue);
}
.kpi-card .avatar {
  flex-shrink: 0;
}
.kpi-blue { border-top-color: var(--tblr-blue); }
.kpi-blue .kpi-number { color: var(--tblr-blue); }
.kpi-teal { border-top-color: var(--tblr-teal); }
.kpi-teal .kpi-number { color: var(--tblr-teal); }
.kpi-orange { border-top-color: var(--tblr-orange); }
.kpi-orange .kpi-number { color: var(--tblr-orange); }
.kpi-green { border-top-color: var(--tblr-green); }
.kpi-green .kpi-number { color: var(--tblr-green); }

/* Хлебные крошки — мобильная замена дерева папок. Плоский ряд с горизонтальным скроллом на случай
   очень глубокого пути (единственное место горизонтального скролла). */
.mobile-breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: .5rem 0;
  margin-bottom: .75rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mobile-breadcrumb::-webkit-scrollbar { display: none; }
.mobile-breadcrumb-item {
  color: var(--tblr-body-color);
  font-size: .875rem;
}
.mobile-breadcrumb-item:last-child {
  color: var(--tblr-primary);
  font-weight: 600;
}
.mobile-breadcrumb-sep {
  color: var(--tblr-secondary);
  flex-shrink: 0;
}

/* Дочерние папки — мобильная замена спуска по дереву. Построчный список вместо колонок:
   в 2–3 колонках на узком экране имя папки обрезается. */
.mobile-folder-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  border-radius: var(--tblr-border-radius);
  border: 1px solid var(--tblr-border-color);
  /* Видно ~5 строк, остальное скроллится внутри блока: длинный список не отодвигает контент. */
  max-height: 14rem;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.mobile-folder-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
}
.mobile-folder-row + .mobile-folder-row {
  border-top: 1px solid var(--tblr-border-color);
}
.mobile-folder-row-icon {
  flex-shrink: 0;
  color: var(--tblr-secondary);
}
.mobile-folder-row span {
  flex: 1 1 auto;
  min-width: 0;
}
.mobile-folder-row-chevron {
  flex-shrink: 0;
  color: var(--tblr-secondary);
}

/* Плитки альбомов (сохранённые гибкие поиски) — квадратная обложка (случайное
   фото из подборки) + название, тот же масштаб, что у превью в galerie-grid. */
.album-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.album-tile {
  position: relative;
}
.album-tile > a {
  display: block;
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
  background: var(--tblr-bg-surface-secondary);
  color: #fff;
  text-decoration: none;
}
.album-tile .album-cover {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: cover;
  display: block;
}
.album-tile .album-cover-placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tblr-secondary);
}
.album-tile .album-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5rem .6rem;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  font-size: .8125rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.album-badges {
  position: absolute;
  top: .35rem; left: .35rem;
  z-index: 2;
  display: flex;
  gap: .25rem;
}
.album-badge {
  width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  border-radius: var(--tblr-border-radius);
}
.album-tile.is-dynamic > a { border: 2px solid var(--tblr-blue); }
.album-tile.is-simple > a { border: 2px solid var(--tblr-green); }
.album-tile-delete {
  position: absolute;
  top: .25rem; right: .25rem;
  z-index: 2;
}

/* Кнопка "Сделать обложкой альбома" — на плитках результатов гибкого поиска,
   только когда смотрим СВОЙ сохранённый альбом (is_own_album). */
.cover-pick-btn {
  position: absolute;
  top: .25rem; right: .25rem;
  z-index: 2;
}
.cover-pick-btn button {
  color: #fff;
  backdrop-filter: blur(2px);
}

/* Мобильное сворачивание навигации шапки в меню: на узких экранах шапка не должна выходить за ширину окна. */
@media (max-width: 767.98px) {
  header .container-xl {
    flex-wrap: wrap !important;
  }
  #mobile-nav-panel {
    /* !important обязателен — у элемента инлайновый style="display:flex"
       (общий с десктопной раскладкой), который иначе перебивает это правило
       по специфичности каскада. */
    display: none !important;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .5rem;
    margin-left: 0 !important;
    padding-bottom: .5rem;
  }
  #mobile-nav-panel.show {
    display: flex !important;
  }
  #mobile-nav-panel form {
    /* На десктопе flex:1 1 420px растягивает поле поиска по ширине. В колоночной раскладке главная
       ось вертикальная, и тот же flex-basis задавал бы высоту формы 420px (пустой блок под полем
       ввода), поэтому basis сбрасывается: высота по содержимому. */
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  #mobile-nav-panel .nav-tools-group {
    margin-left: 0 !important;
    flex-wrap: wrap !important;
  }

  /* Главная: ленты «В этот день» и «Вы на фото» — не более 6 плиток, без отдельного лимита на бэкенде. */
  .homepage-strip > a:nth-child(n+7) {
    display: none;
  }

  /* Сетка фото — во всю ширину, без принудительной обрезки в квадрат: чем
     на телефоне не крутить телефон и не терять часть кадра, пусть лучше
     видно всё фото целиком, высота пропорциональна. */
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid a {
    aspect-ratio: auto;
  }
  .gallery-grid img {
    height: auto;
    object-fit: contain;
  }

  /* Пагинация — при большом числе страниц пунктов набегает больше, чем
     влезает в ширину узкого экрана; перенос строк вместо обрезания/скролла
     кнопки "Вперёд" (иначе на неё было бы не попасть). */
  .pagination {
    flex-wrap: wrap;
    row-gap: .35rem;
  }

  /* Селекты сортировки и количества на странице делят строку пополам (flex:1 1 0), чтобы оба
     оставались в одной строке; остальное содержимое тулбара переносится само. */
  .toolbar-select {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Тулбар галереи (папка/альбом/фильтр): фильтры и «Всего» — одна строка,
     иконки действий (карта, ZIP, слайдшоу, ссылка…) — следующая; порядок и
     перенос строки только CSS-ом (order + псевдоэлемент-разрыв), разметку
     иконок из подключаемых шаблонов не трогаем. */
  .gallery-toolbar > :not(.toolbar-select):not(.toolbar-total):not(input) { order: 2; }
  .gallery-toolbar::after { content: ''; order: 1; flex: 0 0 100%; height: 0; margin-top: -.5rem; }
  .gallery-toolbar .toolbar-total { margin-left: auto; white-space: nowrap; }

  /* Блок информации о фото — на мобильном это один сплошной вертикальный
     поток (фото → инфо → карта), внутренний скролл (нужен на десктопе,
     чтобы не растягивать колонку выше высоты фото) тут неуместен. */
  .photo-info-card {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* Карта на весь экран (кнопка в углу карты, base.html: addMapFullscreenControl).
   Не нативный Fullscreen API — он не работает на iPhone, поэтому везде
   фиксированное позиционирование поверх страницы; закрытие — кнопкой или Esc. */
.map-fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 2000;
}
html.map-fs-lock, html.map-fs-lock body { overflow: hidden; }
.map-fs-btn { display: flex !important; align-items: center; justify-content: center; }

/* Фото на весь экран по клику/тапу (base.html, блок __photoFsBound). */
.photo-frame img { cursor: zoom-in; }
#photo-fs {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  cursor: zoom-out;
}
#photo-fs img {
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: contain;
  display: block;
}
html.photo-fs-lock, html.photo-fs-lock body { overflow: hidden; }
#photo-fs[data-ss] { cursor: pointer; }
#photo-fs .ss-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 44px; height: 44px; border: 0; border-radius: var(--tblr-border-radius);
  background: rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 1;
  cursor: pointer;
}
#photo-fs .ss-pause {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; opacity: .75; pointer-events: none;
}
#photo-fs .ss-pause[hidden] { display: none; }

/* Десктоп: ширина гибкого поиска — поля "Место" в одну строку по 140px. */
.adv-loc-input { width: 140px; }

@media (max-width: 767.98px) {
  /* Страница фото на телефоне: фото на всю ширину без ограничения по высоте; вертикальный кадр
     читается от верха, низ может уйти за экран (вместо сжатия в узкую полоску). */
  .photo-viewer { max-height: none; }
  .photo-frame { width: 100%; }
  .photo-frame img { max-height: none; width: 100%; }

  /* Иконки "Гибкий поиск"/"На карте" в открытом меню — квадратные, в одну
     строку (иначе flex-колонка родителя растягивала их на всю ширину). */
  #mobile-nav-panel .nav-icons-group {
    flex-direction: row !important;
    align-self: flex-start;
  }

  /* Конструктор гибкого поиска: ничто не должно выдавливать кнопки за край
     карточки. Шапка группы — селект сжимается, "Удалить группу" не сжимается. */
  #adv-groups { max-width: 100%; }
  .adv-head { flex-wrap: nowrap; }
  .adv-join-sel { flex: 1 1 0; min-width: 0; width: auto; text-overflow: ellipsis; }
  .adv-rm-group { flex: 0 0 auto; white-space: nowrap; }

  /* Строка условия: поле + оператор + ✕ в первой строке, значение — второй, на
     всю ширину. */
  #adv-groups .row.g-2 > * { min-width: 0; }
  .adv-col-field { order: 1; flex: 1 1 0; width: auto; }
  .adv-col-op { order: 2; flex: 1 1 0; width: auto; }
  .adv-col-rm { order: 3; flex: 0 0 auto; }
  .adv-col-value { order: 4; flex: 0 0 100%; width: 100%; max-width: 100%; }
  .adv-col-field select, .adv-col-op select { width: 100%; min-width: 0; }
  .adv-col-value input, .adv-col-value select { max-width: 100%; }
  .adv-loc-input { width: auto; flex: 1 1 calc(50% - 4px); min-width: 0; }
  .adv-col-value input[type="date"] { width: 100% !important; margin-left: 0 !important; }
}

/* Избранное и личная оценка. */
.gallery-grid a { position: relative; }
.tile-fav {
  position: absolute;
  left: .35rem;
  bottom: .35rem;
  display: inline-flex;
  color: #f03e3e;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
  pointer-events: none;
}
.btn-fav.active { color: #f03e3e; border-color: #f03e3e; }
.btn-fav.active svg { fill: currentColor; }
.rating-stars { display: inline-flex; gap: 0; }
.star-btn {
  padding: .15rem;
  border: 0;
  background: transparent;
  color: var(--tblr-secondary);
  line-height: 0;
  cursor: pointer;
}
.star-btn.on { color: #f59f00; }
.star-btn.on svg { fill: currentColor; }
@media (hover: hover) {
  .rating-stars:hover .star-btn { color: #f59f00; }
  .rating-stars:hover .star-btn:hover ~ .star-btn { color: var(--tblr-secondary); }
}

/* Мультивыбор. */
.gallery-grid[data-vk] a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.gallery-grid[data-vk] a img { -webkit-user-drag: none; }
.gallery-grid a.sel { outline: 3px solid var(--tblr-primary); outline-offset: -3px; }
.gallery-grid a.sel img { opacity: .72; }
.gallery-grid a.sel::after {
  content: "✓";
  position: absolute;
  top: .35rem; left: .35rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-grid[data-vk] a:hover:not(.sel)::before,
  html.sel-mode .gallery-grid[data-vk] a:not(.sel)::before {
    content: "";
    position: absolute;
    top: .35rem; left: .35rem;
    width: 1.5rem; height: 1.5rem;
    border-radius: var(--tblr-border-radius);
    border: 2px solid #fff;
    background: rgba(0, 0, 0, .25);
    z-index: 2;
  }
}
html.sel-mode body { padding-bottom: 5rem; }
#sel-bar {
  position: fixed;
  left: 50%;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: .25rem;
  max-width: calc(100vw - 1rem);
  padding: .35rem .5rem;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}
#sel-bar .btn { border: 0; }
#sel-bar .sel-count {
  min-width: 2rem;
  padding: 0 .5rem;
  font-weight: 700;
  text-align: center;
  color: var(--tblr-primary);
}
#sel-dialog {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .45);
}
#sel-dialog .card { width: min(28rem, 100%); max-height: 70vh; overflow-y: auto; margin: 0; }
.sel-toast {
  position: fixed;
  left: 50%;
  bottom: 5rem;
  transform: translateX(-50%);
  z-index: 1700;
  padding: .5rem 1rem;
  border-radius: var(--tblr-border-radius);
  background: rgba(0, 0, 0, .8);
  color: #fff;
  max-width: calc(100vw - 2rem);
}

/* Комментарии. */
.comment { padding: .6rem 0; border-bottom: 1px solid var(--tblr-border-color); }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-replies { margin-left: .75rem; padding-left: .75rem; border-left: 2px solid var(--tblr-border-color); }
.comment-replies .comment { border-bottom: 0; padding: .4rem 0; }
.comment-actions .btn { padding: .1rem .25rem; }
.comment-form textarea { min-height: 2.4rem; max-height: 10rem; field-sizing: content; resize: none; }
.comment-new { margin-top: .75rem; }
.tile-comments {
  position: absolute;
  right: .35rem;
  bottom: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .05rem .4rem;
  border-radius: var(--tblr-border-radius);
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .75rem;
  pointer-events: none;
}

/* Люди и аватары-лица. */
.person-face {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--tblr-border-radius);
  object-fit: cover;
  background: var(--tblr-primary-lt);
}
.person-face-letter {
  align-items: center;
  justify-content: center;
  color: var(--tblr-primary);
  font-weight: 600;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1rem .75rem;
}
.people-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  text-align: center;
  color: var(--tblr-body-color);
  text-decoration: none;
}
.people-card:hover .people-name { color: var(--tblr-primary); }
.people-name {
  max-width: 100%;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Длинные плашки места/тегов в узком блоке информации переносятся, а не растягивают
   блок вбок (появлялся горизонтальный скролл внутри карточки). */
.photo-info-card { overflow-x: hidden; }
.photo-info-card .badge { white-space: normal; text-align: left; max-width: 100%; }

/* Досье персоны. */
.dossier-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.dossier-avatar .person-face { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.dossier-title { flex: 1 1 14rem; min-width: 0; }
.dossier-facts { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; color: var(--tblr-secondary); }
.dossier-fact { display: inline-flex; align-items: center; gap: .35rem; }
.dossier-actions { display: flex; gap: .5rem; align-items: center; }
.dossier-private { border-left: 3px solid var(--tblr-orange); }
.dossier-strip { grid-template-columns: repeat(7, 1fr); }
.dossier-strip a { aspect-ratio: 1 / 1; }
.dossier-strip img { height: 100%; object-fit: cover; }
.dossier-list .list-group-item { padding: .15rem .75rem; line-height: 1.2; min-height: 0; }
.dossier-list .btn-icon { --tblr-btn-padding-y: 0; width: 1.5rem; height: 1.5rem; min-height: 0; }
@media (max-width: 767.98px) {
  .dossier-head { justify-content: center; text-align: center; }
  .dossier-facts { justify-content: center; }
  .dossier-strip { grid-template-columns: repeat(3, 1fr); }
  .dossier-strip a:nth-child(n+7) { display: none; }  /* на телефоне — 6 фото (2 ряда по 3) */
  .dossier-strip a { aspect-ratio: 1 / 1; }
  .dossier-strip img { height: 100%; object-fit: cover; }
}

/* Гистограмма фото по годам */
.year-bars { display: flex; align-items: flex-end; gap: 3px; height: 9rem; overflow-x: auto; padding-bottom: .1rem; }
.year-bar {
  flex: 1 0 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  color: var(--tblr-secondary);
  text-decoration: none;
  font-size: .68rem;
  text-align: center;
}
.year-bar-fill { display: block; min-height: 2px; border-radius: var(--tblr-border-radius); background: var(--tblr-primary); opacity: .75; }
.year-bar:hover .year-bar-fill { opacity: 1; }
.year-bar-label { display: block; margin-top: .2rem; line-height: 1; }

/* Хронология */
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--tblr-border-color); }
.timeline-list li { position: relative; display: flex; gap: .75rem; padding: .15rem 0; line-height: 1.25; }
.timeline-list li::before {
  content: "";
  position: absolute;
  left: calc(-1rem - 5px);
  top: .85rem;
  width: 8px; height: 8px;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-primary);
}
.timeline-date { flex: 0 0 6.2rem; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }

/* Выбор аватара в редакторе досье */
.avatar-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.avatar-option { position: relative; cursor: pointer; margin: 0; }
.avatar-option input { position: absolute; opacity: 0; }
.avatar-option .person-face { outline: 3px solid transparent; outline-offset: 2px; }
.avatar-option input:checked + .person-face { outline-color: var(--tblr-primary); }

/* Календарь. */
.cal-years {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}
.cal-year {
  flex: 0 0 auto;
  padding: .3rem .75rem;
  border-radius: var(--tblr-border-radius);
  border: 1px solid var(--tblr-border-color);
  color: var(--tblr-body-color);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cal-year.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; }

/* Год: 12 мини-месяцев */
.cal-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 991.98px) { .cal-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .cal-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.cal-mini {
  min-width: 0;
  padding: .6rem .65rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
}
.cal-mini-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .35rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  text-decoration: none;
}
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-mini-wd { text-align: center; font-size: .6rem; color: var(--tblr-secondary); }
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tblr-border-radius);
  font-size: .68rem;
  color: var(--tblr-secondary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.cal-day.cal-blank { visibility: hidden; }
a.cal-day { color: #fff; font-weight: 600; }
a.cal-day.l1 { background: color-mix(in srgb, var(--tblr-primary) 35%, transparent); color: var(--tblr-body-color); }
a.cal-day.l2 { background: color-mix(in srgb, var(--tblr-primary) 55%, transparent); }
a.cal-day.l3 { background: color-mix(in srgb, var(--tblr-primary) 78%, transparent); }
a.cal-day.l4 { background: var(--tblr-primary); }
a.cal-day:hover { outline: 2px solid var(--tblr-primary); outline-offset: 1px; }

/* Месяц: крупные клетки с обложкой дня */
.cal-big { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: .75rem; color: var(--tblr-secondary); padding-bottom: .15rem; }
.cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--tblr-border-radius-sm, 4px);
  background: var(--tblr-bg-surface-secondary);
  overflow: hidden;
  color: var(--tblr-secondary);
  text-decoration: none;
}
.cal-cell.cal-empty { background: transparent; }
.cal-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cal-num {
  position: absolute;
  top: .2rem; left: .3rem;
  font-size: .75rem;
  font-weight: 600;
}
.cal-cell.has .cal-num { color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .8); }
.cal-count {
  position: absolute;
  right: .25rem; bottom: .25rem;
  padding: 0 .35rem;
  border-radius: var(--tblr-border-radius);
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .68rem;
}
@media (max-width: 767.98px) {
  .cal-num { font-size: .65rem; top: .1rem; left: .2rem; }
  .cal-count { font-size: .6rem; right: .15rem; bottom: .15rem; padding: 0 .25rem; }
}


/* Свой кадр аватара (редактор в досье, админ) */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; max-height: 18rem; overflow-y: auto; }
.ap-tile { padding: 0; border: 0; background: var(--tblr-bg-surface-secondary); aspect-ratio: 1 / 1; cursor: pointer; }
.ap-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-tile:hover { outline: 2px solid var(--tblr-primary); }
.crop-stage { position: relative; display: inline-block; max-width: 100%; overflow: hidden; touch-action: none; user-select: none; }
.crop-stage img { display: block; max-width: 100%; max-height: 70vh; }
.crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; touch-action: none; }
.crop-handle { position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; background: #fff; border: 2px solid var(--tblr-primary); cursor: nwse-resize; touch-action: none; }

/* Полоса режима «Войти как» (только у админа) */
.view-as-bar {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: .25rem .75rem;
  background: var(--tblr-orange); color: #fff;
}

/* Календарь: отметка дня, на который приходится событие */
.cal-ev {
  position: absolute;
  top: .3rem; right: .3rem;
  width: .55rem; height: .55rem;
  background: var(--tblr-orange);
  border-radius: var(--tblr-border-radius);
  z-index: 2;
}
.cal-day.ev { box-shadow: inset 0 -3px 0 var(--tblr-orange); }

/* Плитки вложенных папок (сверху галереи папки и на главной): обложка, название, число фото, годы. */
.folder-tiles-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
  margin-bottom: .5rem;
  color: var(--tblr-secondary);
}
.folder-tiles-head::-webkit-details-marker { display: none; }
.folder-tiles-title { font-weight: 600; color: var(--tblr-body-color); }
.folder-tiles-chevron { margin-left: auto; transition: transform .15s; }
.folder-tiles:not([open]) .folder-tiles-chevron { transform: rotate(-90deg); }
.folder-tiles-rail { position: relative; }
.folder-tiles-grid {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.folder-tiles-grid::-webkit-scrollbar { display: none; }
.folder-tile { flex: 0 0 200px; scroll-snap-align: start; }
@media (max-width: 767.98px) { .folder-tile { flex-basis: 42vw; } }
@media (min-width: 768px) { .folder-tiles-grid { scroll-snap-type: none; } }
/* Стрелки листания — узкие, по высоте плитки; только на ПК (на телефоне лента листается пальцем) */
.folder-tiles-arrow {
  display: none;
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
  width: 1.7rem;
  padding: 0;
  border: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  opacity: .85;
  transition: opacity .15s, background .15s;
}
.folder-tiles-arrow[hidden] { display: none !important; }
.folder-tiles-arrow-right { right: 0; border-radius: var(--tblr-border-radius); background: linear-gradient(to left, rgba(0, 0, 0, .6), rgba(0, 0, 0, .25)); }
.folder-tiles-arrow-left { left: 0; border-radius: var(--tblr-border-radius); background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .25)); }
.folder-tiles-arrow:hover { opacity: 1; }
@media (min-width: 768px) { .folder-tiles-arrow { display: flex; } }
.folder-tile { position: relative; }
.folder-tile-link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
  color: #fff;
  text-decoration: none;
}
.folder-tile-img, .folder-tile-img img { display: block; width: 100%; height: 100%; }
.folder-tile-img img { object-fit: cover; transition: transform .2s; }
.folder-tile-link:hover .folder-tile-img img { transform: scale(1.04); }
.folder-tile-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 1.6rem .6rem .45rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  line-height: 1.2;
}
.folder-tile-name { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.folder-tile-meta { font-size: .78rem; opacity: .85; }
.folder-tile-edit {
  position: absolute;
  top: .35rem; right: .35rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--tblr-border-radius);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  opacity: 0;
  transition: opacity .15s;
}
.folder-tile:hover .folder-tile-edit, .folder-tile-edit:focus { opacity: 1; }
@media (hover: none) { .folder-tile-edit { opacity: .85; } }
/* выбор обложки: кликабельные плитки-кнопки в сетке */
.cover-pick { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--tblr-border-radius); }
.cover-pick button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--tblr-bg-surface-secondary); cursor: pointer; }
.cover-pick img { width: 100%; height: 100%; object-fit: cover; }
.cover-pick.is-current { outline: 3px solid var(--tblr-primary); outline-offset: -3px; }

/* Настройка «Вид папок» (панель настроек, хранится в браузере): плитки (по умолчанию) или «классический» вид.
   Классический вид — строки подпапок на телефоне (на ПК папки только в дереве слева). */
.folder-classic { display: none; }
[data-bs-folder-view="classic"] .folder-classic { display: block; }
[data-bs-folder-view="classic"] .folder-tiles { display: none; }

/* Подсказки-иконки «i»: единый всплывающий блок (скрипт — initTooltips в base.html) */
.site-tip {
  position: fixed; z-index: 3000; max-width: min(22rem, calc(100vw - 16px)); padding: .5rem .75rem;
  background: var(--tblr-bg-surface-dark, #1d273b); color: #fff; font-size: .875rem; line-height: 1.35;
  border-radius: var(--tblr-border-radius); box-shadow: 0 4px 16px rgba(0,0,0,.25); pointer-events: none;
}
[data-bs-toggle="tooltip"], [data-tip] { cursor: help; }

/* Админка «Каталог»: сетка плиток фото с флажками */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.catalog-tile { cursor: pointer; margin: 0; min-width: 0; }
.catalog-tile-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary, #eee); }
.catalog-tile-check { position: absolute; top: .4rem; left: .4rem; z-index: 2; width: 1.25rem; height: 1.25rem; margin: 0; }
.catalog-tile-cap, .catalog-tile-meta { display: block; max-width: 100%; }
.catalog-tile-cap { font-size: .8rem; margin-top: .25rem; }
.catalog-tile:has(.catalog-tile-check:checked) .catalog-tile-img { outline: 3px solid var(--tblr-primary); outline-offset: -3px; }

/* Админка: плитки-кнопки, звёздочки «в избранное» и блок «Избранное» (квадратные плитки той же высоты) */
:root { --admin-tile-h: 5rem; }
.admin-tile-wrap { position: relative; }
.admin-tile .card-body { min-height: var(--admin-tile-h); }
.admin-fav-btn {
  position: absolute; top: .35rem; right: .45rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0; border: 0; background: transparent;
  color: var(--tblr-secondary); opacity: .55; cursor: pointer;
  border-radius: var(--tblr-border-radius);
}
.admin-fav-btn:hover, .admin-fav-btn:focus-visible { opacity: 1; background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .06)); }
.admin-fav-btn.on { opacity: 1; color: var(--tblr-yellow); }
.admin-fav-btn svg, .admin-favs-star svg { fill: none; }
.admin-fav-btn.on svg { fill: currentColor; }
.admin-favs-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.admin-favs-star { color: var(--tblr-yellow); display: inline-flex; }
.fav-strip {
  display: flex; gap: .75rem; overflow-x: auto; padding: .25rem 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
}
.fav-strip::-webkit-scrollbar { display: none; }
.fav-tile {
  position: relative; flex: 0 0 var(--admin-tile-h); width: var(--admin-tile-h); height: var(--admin-tile-h);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-card, none);
}
.fav-tile-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  width: 100%; height: 100%; padding: .4rem; text-decoration: none; color: var(--tblr-body-color);
  border-radius: var(--tblr-border-radius);
}
.fav-tile-link:hover { background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04)); }
.fav-tile-name {
  font-size: .72rem; font-weight: 600; line-height: 1.15; text-align: center; max-width: 100%;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.fav-unstar {
  position: absolute; top: 2px; right: 2px; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; line-height: 1;
  background: transparent; color: var(--tblr-secondary); opacity: 0; cursor: pointer; font-size: 1.1rem;
  border-radius: var(--tblr-border-radius);
}
.fav-tile:hover .fav-unstar, .fav-unstar:focus-visible { opacity: .8; }
@media (hover: none) { .fav-unstar { opacity: .6; } }
.fav-tile.dragging { z-index: 5; opacity: .9; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25); cursor: grabbing; transition: none; pointer-events: none; }
.fav-strip.sorting { cursor: grabbing; touch-action: none; }
.fav-strip.sorting .fav-tile:not(.dragging) { transition: transform .12s; }
.fav-empty {
  flex: 0 0 var(--admin-tile-h); height: var(--admin-tile-h); display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); opacity: .7;
}

/* Простой пошаговый подбор («Кто — С кем — Где — Когда») на странице гибкого поиска. */
.sb-step { padding: .75rem 0; border-top: 1px solid var(--tblr-border-color); }
.sb-step:first-of-type { border-top: 0; padding-top: 0; }
.sb-step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.sb-num {
  display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem;
  border-radius: var(--tblr-border-radius); background: var(--tblr-primary); color: #fff; font-weight: 600;
}
.sb-title { font-size: 1.05rem; font-weight: 600; }
.sb-filter { width: 220px; max-width: 100%; }
.sb-clear {
  margin-left: auto; color: var(--tblr-secondary); text-decoration: none; padding: 0 .5rem;
  border-radius: var(--tblr-border-radius); border: 1px solid var(--tblr-border-color);
}
.sb-clear:hover { color: var(--tblr-danger); border-color: var(--tblr-danger); }
.sb-tip { cursor: help; display: inline-flex; }
.sb-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sb-sub { margin-top: .5rem; padding-left: 1rem; border-left: 3px solid var(--tblr-border-color); }
.sb-sub2 { margin-left: 1rem; }
.sb-seg { display: inline-flex; gap: .25rem; margin-left: .5rem; }
.sb-chip, .sb-person {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--tblr-body-color);
  border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface);
  border-radius: var(--tblr-border-radius); cursor: pointer; transition: border-color .12s, background .12s;
}
.sb-chip { padding: .4rem .8rem; min-height: 40px; }
.sb-chip:hover, .sb-person:hover { border-color: var(--tblr-primary); color: var(--tblr-body-color); }
.sb-chip.active, .sb-person.active { border-color: var(--tblr-primary); background: var(--tblr-primary-lt); font-weight: 600; }
.sb-n { font-size: .75rem; color: var(--tblr-secondary); font-weight: 400; }
.sb-list { display: flex; flex-wrap: wrap; gap: .5rem; max-height: 260px; overflow-y: auto; padding: 2px; }
.sb-list-sm { max-height: 200px; }
.sb-person { flex-direction: column; gap: .15rem; padding: .4rem .5rem; width: 92px; text-align: center; }
.sb-person-name {
  font-size: .8rem; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.sb-season svg { flex-shrink: 0; }
.sb-winter svg { color: var(--tblr-azure); }
.sb-spring svg { color: var(--tblr-green); }
.sb-summer svg { color: var(--tblr-yellow); }
.sb-autumn svg { color: var(--tblr-orange); }
.adv-summary { cursor: pointer; color: var(--tblr-secondary); }
@media (max-width: 575.98px) {
  .sb-person { width: 78px; }
  .sb-filter { flex: 1 1 100%; width: auto; }
  .sb-step-head { flex-wrap: wrap; }
  .sb-seg { margin-left: 0; }
}

.sb-step-off { opacity: .45; pointer-events: none; user-select: none; }