/* iphone.css — точная подгонка под iPhone 12/14/16 (390/428px) и Safari UI */
html, body {
  max-width: 100%;
  overflow-x: hidden;              /* исключаем «ползущий» горизонтальный скролл */
  -webkit-text-size-adjust: 100%;  /* Safari не будет сам увеличивать шрифты в инпутах */
}

/* Базовые переменные: высота нижней навигации и размеры FAB */
:root{
  --fab-gap: 10px;
}

/* iOS: учитываем вырез и safe-area */
@supports (-webkit-touch-callout: none) {
  .navbar{
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }
  .navbar .nav a{ padding-bottom: calc(10px + env(safe-area-inset-bottom)/2); }
}

/* Контент не уходит под навбар: даём динамический отступ снизу */
main{
  margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px) !important;
}

/* FAB всегда видим и не прячется за навбар/вырез */
.fab{
  right: max(8px, env(safe-area-inset-right));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  gap: var(--fab-gap);
}
.fab .btn{ width: var(--fab-size); height: var(--fab-size); padding:0; border-radius:999px; }

/* Режим выбора (появляется панель поверх навбара) — смещаем FAB чуть выше */
body.select-mode .fab{
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 58px);
}

/* ===== Подгонка карточек под ширины iPhone ===== */

/* iPhone 12/14/15/16 (base/Pro): 390px */
@media (max-width: 400px){
  /* глобально делаем плитки уже, чтобы влезали комфортно и по сетке */
  :root{ --card-min: 150px; }
  /* места хранения — ещё компактнее по ширине и ниже превью */
  #locations-grid{ --card-min: 140px; }
  #locations-grid .thumb{ aspect-ratio: 2 / 1; }
  #locations-grid .actions .btn{ padding: 6px 8px; font-size: 12px; }
  #locations-grid .chip{ font-size: 11px; padding: 2px 6px; }
}

/* iPhone 12/14/16 Pro Max: 428px (и 15 Plus/16 Plus) */
@media (min-width: 401px) and (max-width: 440px){
  :root{ --card-min: 170px; }
  #locations-grid{ --card-min: 155px; }
  #locations-grid .thumb{ aspect-ratio: 16 / 9; }
}

/* Очень узкие/низкие окна (клавиатура, split-view и т.п.) — ещё компактнее FAB */
@media (max-width: 360px){ :root{ --fab-size: 48px; --fab-gap: 8px; } }
@media (max-height: 640px){ :root{ --fab-size: 48px; } }

/* Увеличить размер только кнопок внутри .fab */
.fab > .btn{
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Увеличить значок (Material Symbols) внутри этих кнопок */
.fab > .btn .ms{
  font-size: 28px;
  line-height: 1;
  display: inline-block;
}