/* ─── Нижний тап-бар: Задачи · Календарь · Шкаф ───────────────────────────
   Карандашную подложку каждой кнопки рисует sk-tabbar.js прямо в <svg>
   (регенерируется под реальную ширину). Здесь — раскладка, иконки
   (active = заливка / inactive = контур), подчёркивание активной вкладки и
   безопасная зона снизу. Всё анимируемое — только transform/opacity (§1). */

:root{
  /* Дом-индикатор iOS (env) ИЛИ Telegram-инсет (--safe-bottom ставит app.js
     из safeAreaInset). Берём максимум — покрывает и обычный веб, и Mini App. */
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px));
  --tabbar-h: 64px;    /* канон: таб-бар 64 → R16 (h/4); высота таб-секции в плашке */
}

/* Таб-бар живёт ВНУТРИ единой плашки дока (composer.css .sk-dock-plate): свой
   fixed-слот .sk-bar-slot и карандашная SVG-подложка бара больше не нужны —
   контур рисует плашка (CSS #squiggle). Здесь — только раскладка кнопок.
   (.sk-tabbar-bg ниже НЕ трогаем: это общий класс всех sk.mount-подложек —
   карточки задач, профиль, колокольчик.) */
.sk-tabbar{
  position:relative; width:100%; height:var(--tabbar-h);
  display:flex; justify-content:space-around; align-items:stretch;
}
.sk-tabbar-bg{ position:absolute; inset:0; pointer-events:none; }
/* Подложка шире бара на pad+тень (~+17px) и позиционируется со сдвигом влево.
   Глобальный svg{max-width:100%} сжимал бы её до ширины бара → рисованная обводка
   выходит уже бара и правую вкладку («Профиль») режет. Рисуем в натуральную ширину. */
.sk-tabbar-bg svg{ max-width:none; }

.sk-tab{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; flex:1;
  background:none; border:0; cursor:pointer; font:inherit; padding-top:5px;
  color:var(--pencil); -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease;
}
.sk-tab svg.ic{ width:26px; height:26px; display:block; }
.sk-tab .on{ display:none; }
.sk-tab.active .on{ display:block; }
.sk-tab.active .off{ display:none; }
.sk-tab .lbl{
  font-family:'Caveat',cursive; font-size:.95rem; line-height:1;
  color:var(--pencil); letter-spacing:.2px;
}
.sk-tab.active .lbl{ color:var(--graphite); font-weight:700; }
.sk-tab .scr{ height:8px; width:34px; visibility:hidden; margin-top:-1px; }
.sk-tab.active .scr{ visibility:visible; }
.sk-tab:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px; border-radius:12px; }
.sk-tab:active{ transform:translateY(1px); }

/* Контент экранов не прячется под плашкой дока. #board задаёт composer.css
   (176 — плашка с композером); остальные вкладки — плашка = только таб-бар
   (16+64+12) + отступ снизу 10 + запас. --safe-b уже с Telegram-инсетом. */
#calendar, #shelf, #profile{ padding-bottom:calc(118px + var(--safe-b)); }

/* Маскот (fixed, справа-снизу) поднимается над плашкой дока, чтобы не перекрывать
   «Шкаф» на узком экране. composer.css перебивает это на доске (маскот выше — там
   в плашке ещё композер). tabbar.css грузится до composer.css. */
.mascot{ bottom:calc(118px + var(--safe-b)); }

/* Угловой маскот шкафа (main «mascot to corner») жил на bottom:60px — там теперь
   бар. На широких экранах поднимаем в правый жёлоб над баром; на узких (шкаф во всю
   ширину, снизу закреплён «＋ ящик») прячем — угол занят баром. */
.shelf-masc{ bottom:calc(116px + var(--safe-b)); }
@media (max-width:900px){ .shelf-masc{ display:none; } }

/* Тосты теперь сверху (css/notify.css) — от бара не зависят. */

@media (prefers-reduced-motion: reduce){
  .sk-tab{ transition:none; }
  .sk-tab:active{ transform:none; }
}