/* Базовые уплотнения для ≤390px по ширине или ≤700px по высоте */
@media (max-width: 390px), (max-height: 700px){
  body{ font-size: 14px; line-height: 1.45 }
  header .topbar{ padding: 8px 10px }
  .toolbar{ gap: 8px }
  .search{ padding: 6px 8px; border-radius: 10px }
  .search input{ font-size: 14px }
  .section-title{ margin: 10px 0 6px }
  .grid{ gap: 10px !important }
  .card .body{ padding: 8px 10px }
  .thumb{ aspect-ratio: 16/10 } /* было 4/3 — теперь ниже */
  .chip{ padding: 2px 6px; font-size: 11px }
  .actions .btn{ padding: 7px 10px }
  .navbar .nav a{ padding: 8px 2px 10px; font-size: 11px }
  .navbar .nav svg{ width: 20px; height: 20px }

  /* FAB — компактные круглые кнопки только с иконками */
  .fab{ right: 10px; bottom: 88px; gap: var(--fab-gap) }
  .fab .btn{
    width: var(--fab-size); height: var(--fab-size);
    padding: 0; border-radius: 999px; justify-content: center;
  }
  .fab .btn span.label{ display: none !important; } /* прячем подписи */
  .fab .btn .ms{ display: inline-block !important; font-size: 22px; }
}

/* Чуть меньше ещё для ≤340px */
@media (max-width: 340px){
  :root{ --fab-size: 48px }
  .thumb{ aspect-ratio: 16/11 }
}

/* Когда нижняя навигация скрыта на широких экранах (wide.css), опускаем FAB ближе к низу */
@media (min-width: 1024px){
  .fab{ bottom: 24px }
}

/* Сжать превью у карточек в разделе "Места хранения" */
@media (max-width: 480px){
  /* телефоны: делаем превью примерно в 2 раза ниже */
  #locations-grid .thumb{
    aspect-ratio: 2 / 1;             /* было 4/3 или 16/10 */
  }
  #locations-grid .card .body{        /* чуть компактнее подписи */
    padding: 8px 10px;
  }
}

@media (min-width: 481px) and (max-width: 1024px){
  /* планшеты: умеренно ниже */
  #locations-grid .thumb{
    aspect-ratio: 16 / 9;
  }
}

/* На очень узких (SE/старые Android) ещё сильнее */
@media (max-width: 360px){
  #locations-grid .thumb{
    aspect-ratio: 21 / 9;
  }
}


/* Компактные карточки только для раздела "Места хранения" */

/* По умолчанию (все экраны): плитки уже, превью ниже */
#locations-grid{
  --card-min: 180px;            /* было глобально 200–280px; делаем уже */
}
#locations-grid .thumb{
  aspect-ratio: 16 / 9;         /* ниже, чем 4/3 */
}

/* Телефоны ≤480px — ещё компактнее */
@media (max-width: 480px){
  #locations-grid{ --card-min: 150px; }   /* уменьшили ширину карточек */
  #locations-grid .thumb{ aspect-ratio: 2 / 1; }  /* ниже превью */
  #locations-grid .card .body{ padding: 8px 10px; }
  #locations-grid .title{ font-size: 13px; }
  #locations-grid .chip{ font-size: 11px; padding: 2px 6px; }
  #locations-grid .actions .btn{ padding: 6px 8px; font-size: 12px; }
}

/* Очень узкие ≤360px — максимально компактно */
@media (max-width: 360px){
  #locations-grid{ --card-min: 130px; }
  #locations-grid .thumb{ aspect-ratio: 21 / 9; }
}


/* базовая позиция FAB: учёт safe-area и нижней навигации */
.fab{
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--nav-h));
  z-index: 1300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;  /* выравниваем по правому краю */
  gap: var(--fab-gap, 10px);
  max-height: calc(100dvh - 120px);   /* чтобы столбец не вылезал вниз */
  overflow: auto;                      /* если вдруг не помещается — можно проскроллить */
  -webkit-overflow-scrolling: touch;
}

/* сами круглые кнопки – гарантированный размер, центрирование и никакого «разъезда» */
.fab .btn{
  width: var(--fab-size, 52px);
  height: var(--fab-size, 52px);
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* компактнее на очень узких экранах */
@media (max-width: 380px){
  .fab{ right: max(6px, env(safe-area-inset-right)); }
}
@media (max-width: 340px){
  :root{ --fab-size: 44px; --fab-gap: 8px; }
  .fab{ right: max(4px, env(safe-area-inset-right)); }
}

/* когда на широких экранах нижняя навигация спрятана (см. wide.css) — опускаем к низу */
@media (min-width: 1024px){
  .fab{
    bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* если включён режим выбора (появляется панель над навигацией) — чуть выше FAB */
body.select-mode .fab{
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--nav-h) + 48px);
}

/* на очень низких по высоте окнах — ещё компактнее и плотнее */
@media (max-height: 640px){
  :root{ --fab-size: 44px; --fab-gap: 8px; }
}


/* Телефоны: убираем строку "Место • код ..." и чипсы на карточках Мест */
@media (max-width: 480px){
  #locations-grid .card .muted,
  #locations-grid .card .chips{
    display: none !important;
  }
  /* курсор-подсказка, что карточка кликабельна */
  #locations-grid .card{ cursor: pointer; }
}

/* ===== Детали → ВЛОЖЕННЫЕ: маленькие карточки, ниже чем у места ===== */
#details-children.grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2 в ряд, чтобы не раздувались */
  gap: 10px !important;
}

/* Сама карточка пусть не растёт */
#details-children .card{
  min-height: unset !important;
}

/* Превью у вложенных контейнеров — маленькое и широкое */
#details-children .card .thumb{
  aspect-ratio: 21 / 9 !important;  /* очень низкое */
  height: auto !important;
  background: rgba(255,255,255,.05);
}

/* Картинка контейнера — как превью */
#details-children .card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Чуть компактнее подписи */
#details-children .title{
  font-size: 13px;
}
#details-children .meta{
  font-size: 11px;
}