/* Планшет и компьютер: экран от 768 точек в ширину и от 480 в высоту (телефон, повёрнутый боком, сюда не попадает).
   Меню разделов переезжает из нижней полоски в колонку слева, контент растягивается до 960 точек,
   всплывающие окна открываются по центру. На ширине от 1100 точек у колонки меню появляются подписи сбоку от иконок. */
@media (min-width: 768px) and (min-height: 480px) {
  :root { --rail: 104px; }

  /* каркас: колонка меню + всё остальное (метку has-tabs ставит app.js — без :has(), ради старых планшетов); экраны входа (без меню) остаются аккуратной колонкой по центру */
  .app { max-width: none; box-shadow: none; }
  .app:not(.has-tabs) { max-width: 560px; }
  /* у «Авто» свой предел ширины для телефона и компьютера (auto.css) — на планшете каркас общий */
  .app:has(#auto), .app:has(#auto) > .tabs { max-width: none; }
  .app.has-tabs { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-items: start; }
  .app.has-tabs > * { grid-column: 2; }
  .app.has-tabs > main { grid-row: 4; align-self: stretch; }

  /* меню разделов — колонка слева во всю высоту */
  .app > .tabs {
    grid-column: 1; grid-row: 1 / -1; align-self: stretch;
    position: sticky; top: 0; left: auto; bottom: auto; transform: none;
    width: var(--rail); max-width: none; height: 100vh; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
    padding: calc(18px + env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom));
    border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  .app > .tabs a + a { margin-top: 6px; }
  .app > .tabs a { flex: none; min-height: 78px; padding: 8px 4px; font-size: 11px; }
  .app > .tabs .tab-icon, .app > .tabs .tab-icon img { width: 48px; height: 46px; }

  /* шапка и содержимое шире, но строки не расползаются */
  .top { padding-inline: 32px; }
  .demo-bar, .kid-bar { padding-inline: 32px; }
  main { width: 100%; max-width: 960px; margin-inline: auto; padding: 24px 32px 40px; gap: 16px; }

  /* строка чата больше не прячется за нижним меню */
  .chatbar { bottom: 0; }
  #toast { bottom: calc(24px + env(safe-area-inset-bottom)); left: calc(50% + var(--rail) / 2); max-width: min(560px, calc(100% - var(--rail) - 48px)); }

  /* всплывающие окна — по центру, а не шторкой снизу */
  dialog#sheet { margin: auto; max-width: 560px; max-height: 86dvh; border-radius: 20px; box-shadow: 0 25px 80px rgba(0, 0, 0, .28); }
  .sheet { padding-bottom: 20px; }
  .ishka-dialog { max-width: 600px; height: min(860px, calc(100dvh - 48px)); }
}

@media (min-width: 1100px) and (min-height: 480px) {
  :root { --rail: 220px; }
  .app > .tabs { padding-inline: 14px; }
  .app > .tabs a { flex-direction: row; justify-content: flex-start; gap: 0; min-height: 58px; padding: 6px 12px; font-size: 15px; text-align: left; }
  .app > .tabs .tab-icon, .app > .tabs .tab-icon img { width: 42px; height: 40px; }
  .app > .tabs .tab-icon { margin-right: 12px; }
  main { max-width: 1040px; }
}

/* невысокий экран (планшет 10" боком: около 960×520 точек) — меню плотнее, чтобы все разделы помещались */
@media (min-width: 768px) and (min-height: 480px) and (max-height: 700px) {
  .app > .tabs { padding-block: calc(8px + env(safe-area-inset-top)) 8px; }
  .app > .tabs a { min-height: 60px; padding-block: 4px; }
  .app > .tabs a + a { margin-top: 2px; }
  .app > .tabs .tab-icon, .app > .tabs .tab-icon img { width: 38px; height: 36px; }
}