/* =========================================================================================
   HolyHome Web — НИЖНЯЯ НАВИГАЦИЯ. Общий элемент приложения.

   Почему отдельным файлом, а не внутри app.css: навигация нужна и на экранах, которые
   app.css НЕ подключают — у форматов своя айдентика (пробковая доска), и общий слой задал
   бы им чужие цвета. Поэтому компонент рисуется ТОКЕНАМИ с запасными значениями: формат
   переопределяет у себя --nav-solid, --nav-line, --nav-ink, --nav-on, --nav-pill — и та же
   панель выглядит частью его мира. Палитра у каждого формата своя, элементы — единые.

   11.10.2026 — ПЛАВАЮЩАЯ КАПСУЛА по референсу владельца (вариант «Главное + Ещё»).
   Что поменялось против панели с кругом (21.09.2026) и почему:
     · панель не прилипает к краям, а висит над содержимым капсулой: так она перестаёт
       быть «полосой» и читается отдельным органом управления;
     · «ты здесь» показывает не круг над панелью, а приподнятая вкладка ВНУТРИ неё —
       с цветной иконкой и подписью. Один знак вместо двух (круг + подпись под ним);
     · при прокрутке вниз капсула сжимается, освобождая экран, при прокрутке вверх —
       возвращается.

   ДВЕ РАСКЛАДКИ ИЗ ОДНОГО СПИСКА ПУНКТОВ:
     · телефон и планшет — капсула снизу, под большой палец;
     · от 1024px — те же пункты капсулой в шапке: на мониторе рука у мыши вверху.
   ========================================================================================= */

.hh-tabbar{
  --cap-h:62px;                 /* высота капсулы с рамкой: вкладка 50 + отступы 5 + рамка */
  --cap-gap:12px;               /* от нижней кромки экрана (поверх безопасной зоны) */
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:.46s;
  position:fixed; z-index:45;
  left:var(--gutter, 16px); right:var(--gutter, 16px);
  bottom:calc(var(--cap-gap) + env(safe-area-inset-bottom));
  display:flex; justify-content:center;
  /* сама полоса прозрачна для касаний: сжатая капсула не должна загораживать
     страницу по бокам от себя */
  pointer-events:none;
  /* Горизонтальные жесты забирает приподнятая вкладка, вертикальные остаются странице:
     с touch-action:none панель переставала пропускать прокрутку, и экран залипал. */
  touch-action:pan-y;
  /* Без этого движение с зажатой кнопкой выделяет подписи вкладок. */
  user-select:none; -webkit-user-select:none;
}

/* ── КАПСУЛА ──
   Плотная, без блюра (решение владельца 21.09.2026: «где-то размазывается, где-то
   нет»). Отрыв от страницы — двухслойной тенью, в тёмной теме её работу делает рамка
   и подсветка верхней кромки. Ширину капсуле никто не задаёт: она обнимает вкладки,
   а их ширины ставит nav.js — поэтому сжатие получается само, без анимации ширины
   самой капсулы. */
.hh-cap{
  position:relative; pointer-events:auto;
  display:flex; align-items:stretch;
  height:var(--cap-h); padding:5px;
  background:var(--nav-solid, var(--surface, #1A2233));
  border:1px solid var(--nav-line, var(--line, rgba(255,255,255,.12)));
  border-radius:999px;
  box-shadow:var(--nav-sh, 0 2px 6px rgba(0,0,0,.35), 0 20px 40px -14px rgba(0,0,0,.7));
  /* раскладка капсулы — её личное дело: перерасчёт при сжатии не трогает страницу */
  contain:layout;
}

/* ── ВКЛАДКА ──
   Иконка и подпись лежат в ней абсолютно. Так «столбиком» и «в строку» — это одни и те
   же два элемента в разных местах, и между видами их можно ПЕРЕВЕСТИ, а не подменить. */
.hh-tabbar .hh-tab{
  position:relative; z-index:1; flex:0 0 auto;
  height:100%; min-width:0; padding:0;
  border:0; background:transparent; font:inherit; cursor:pointer;
  border-radius:999px; text-decoration:none;
  color:var(--nav-ink, var(--ink-soft, #A6B0C2));
  -webkit-tap-highlight-color:transparent;
  /* 🔴 Анимация ширины здесь ОСОЗНАННАЯ (детектор помечает её как layout-transition).
     Сжатие капсулы держится на том, что вкладки плавно меняют ширину, а капсула их
     обнимает. Пересчёт раскладки при этом не выходит за капсулу: она fixed и с
     contain:layout — это десяток узлов на кадр, а не страница. Перевести на transform
     нельзя: масштаб искажает скругление и подписи. Проверено замером: в середине
     анимации приподнятая вкладка совпадает с активной до пикселя. */
  transition:width var(--dur) var(--ease), color .2s ease;
}
.hh-tabbar .hh-tab .ic{
  position:absolute; left:50%; top:7px; width:22px; height:22px; margin-left:-11px;
  display:flex;
  transition:left var(--dur) var(--ease), top var(--dur) var(--ease),
             margin-left var(--dur) var(--ease), transform .2s var(--ease);
}
.hh-tabbar .hh-tab .ic svg{ width:22px; height:22px; stroke-width:1.8; }
.hh-tabbar .hh-tab .tx{
  position:absolute; left:50%; top:31px;
  transform:translateX(-50%);
  font-size:11px; font-weight:600; line-height:1.1; letter-spacing:0;
  white-space:nowrap;
  transition:left var(--dur) var(--ease), top var(--dur) var(--ease),
             transform var(--dur) var(--ease), font-size var(--dur) var(--ease),
             opacity .22s ease;
}
.hh-tabbar .hh-tab:active .ic{ transform:scale(.9); }
.hh-tabbar .hh-tab:focus-visible{
  outline:2px solid var(--nav-on, var(--accent, #F0977C)); outline-offset:-3px;
}

/* активный раздел: цвет переходит к нему — и только к нему */
.hh-tabbar .hh-tab.cur,
.hh-tabbar .hh-tab.open{ color:var(--nav-on, var(--accent, #F0977C)); }
.hh-tabbar .hh-tab.cur .tx,
.hh-tabbar .hh-tab.open .tx{ font-weight:700; }
/* Меню открыто — «ты здесь» на время переезжает на «Закрыть». Исходный раздел
   отдаёт цвет: два горячих пятна в одной капсуле читались бы как два выбора. */
.hh-tabbar.menu-open .hh-tab.cur:not(.open){ color:var(--nav-ink, var(--ink-soft, #A6B0C2)); }
.hh-tabbar.menu-open .hh-tab.cur:not(.open) .tx{ font-weight:600; }

/* ── ПРИПОДНЯТАЯ ВКЛАДКА ──
   Тон чуть глубже капсулы + мягкая тень + светлая кромка сверху: читается кусочком
   той же панели, приподнятым под палец, а не наклейкой другого цвета. Едет по --px,
   ширину получает от nav.js — с той же кривой и длительностью, что и вкладки. */
.hh-pill{
  --px:5px; --sx:1; --sy:1;
  position:absolute; z-index:0; left:0; top:5px; bottom:5px; width:0;
  border-radius:999px;
  background:var(--nav-pill, rgba(255,255,255,.10));
  border:1px solid var(--nav-pill-line, transparent);
  box-shadow:var(--nav-pill-sh, 0 2px 4px rgba(0,0,0,.3), 0 8px 18px -8px rgba(0,0,0,.6));
  transform:translateX(var(--px)) scale(var(--sx), var(--sy));
  transition:transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity .2s ease;
  pointer-events:none;
}
/* Отпустили палец — вкладка «дотекает» пружиной, а не доезжает линейно. */
.hh-pill.springy{
  transition:transform .44s cubic-bezier(.42,1.18,.35,1), width .44s cubic-bezier(.42,1.18,.35,1);
}
/* Пока палец ведёт вкладку, сглаживание выключено: анимация поверх ручного управления
   даёт отставание, и вкладка «плывёт» за пальцем вместо того, чтобы идти с ним. */
.hh-tabbar.dragging .hh-pill{ transition:none; }
/* Пока ведут — цвет у того раздела, над которым сейчас вкладка: цвет живёт с ней. */
.hh-tabbar.dragging .hh-tab.cur:not(.near){ color:var(--nav-ink, var(--ink-soft, #A6B0C2)); }
.hh-tabbar.dragging .hh-tab.near{ color:var(--nav-on, var(--accent, #F0977C)); }
.hh-tabbar.dragging .hh-tab.near .ic{ transform:translateY(-1px); }

/* без анимации — первая раскладка, поворот экрана, смена языка */
.hh-tabbar.no-anim .hh-tab, .hh-tabbar.no-anim .hh-tab .ic, .hh-tabbar.no-anim .hh-tab .tx,
.hh-tabbar.no-anim .hh-pill{ transition:none !important; }

/* мерило подписи «в строку» — вне потока и невидимо */
.hh-tx-meter{
  position:absolute; left:0; top:0; visibility:hidden; pointer-events:none;
  font-size:14.5px; font-weight:700; white-space:nowrap;
}

/* ═══════════════ СЖАТЫЙ ВИД (прокрутка вниз) ═══════════════
   Как в референсе: активный раздел — подпись в строку рядом с иконкой, остальные —
   одни иконки. Подписи соседей не исчезают из документа: они гаснут, но их по-прежнему
   читает скрин-ридер, а на вкладке висит title. */
.hh-tabbar.is-compact .hh-tab .ic{ top:13px; }
.hh-tabbar.is-compact .hh-tab .tx{ opacity:0; transform:translateX(-50%) scale(.85); }
.hh-tabbar.is-compact .hh-tab.cur .ic{ left:15px; margin-left:0; }
.hh-tabbar.is-compact .hh-tab.cur .tx{
  opacity:1; left:45px; top:50%;
  transform:translate(0, -50%); font-size:14.5px;
}

/* ═══════════════ МЕНЮ «ЕЩЁ» ═══════════════
   «Ещё» — единственный пункт капсулы, который никуда не ведёт: он открывает выбор.
   Замысел владельца 21.09.2026: «как будто из капли нашей показывается меню». Меню
   вырастает из точки над вкладкой (clip-path: круг радиуса 0 разрастается на всё меню —
   содержимое ПОЯВЛЯЕТСЯ, а не выезжает готовым блоком; масштаб дал бы дрожание текста),
   а перешеек связывает его с капсулой — без него меню читается отдельной карточкой. */
.hh-drop{
  --drop-l:0px; --drop-ox:50%;
  position:absolute; z-index:3; pointer-events:none;
  left:var(--drop-l);
  bottom:calc(100% + 12px);
  width:min(272px, 100%);
  background:var(--nav-solid, var(--surface, #1A2233));
  border:1px solid var(--nav-line, var(--line, rgba(255,255,255,.12)));
  border-radius:22px;
  padding:7px;
  /* Тень осмысленная: меню висит НАД содержимым, без отрыва читается наклейкой. */
  box-shadow:var(--nav-sh, 0 10px 30px -12px rgba(0,0,0,.45), 0 2px 8px -4px rgba(0,0,0,.3));
  clip-path:circle(0% at var(--drop-ox) 100%);
  opacity:0;
  transition:clip-path .42s cubic-bezier(.3,1.02,.35,1), opacity .18s ease;
}
.hh-drop.on{
  clip-path:circle(150% at var(--drop-ox) 100%);
  opacity:1; pointer-events:auto;
}

/* ПЕРЕШЕЕК — короткая перемычка цвета панели между капсулой и меню, с вогнутыми боками:
   так две поверхности читаются одной каплей, а не двумя плашками. Вытягивается чуть
   позже меню: сначала капля отрывается, потом за ней тянется нить. */
.hh-drop-neck{
  position:absolute; z-index:2; pointer-events:none;
  left:var(--menu-x, 50%); margin-left:-18px;
  bottom:calc(100% - 2px);
  width:36px; height:16px;
  background:var(--nav-solid, var(--surface, #1A2233));
  -webkit-mask:radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat,
               radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat,
               radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat;
  transform-origin:bottom center; transform:scaleY(0);
  transition:transform .26s cubic-bezier(.3,1.02,.35,1) .06s;
}
.hh-tabbar.menu-open .hh-drop-neck{ transform:scaleY(1); }

/* Затемнение под меню: внимание — на выборе, нажатие мимо — закрывает. */
.hh-scrim{
  position:fixed; inset:0; z-index:44;
  background:var(--scrim, rgba(8,12,21,.55));
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.hh-scrim.on{ opacity:.7; pointer-events:auto; }

.hh-drop .hh-drop-item{
  display:flex; align-items:center; gap:11px; width:100%;
  min-height:44px; padding:8px 12px;
  border:0; background:transparent; border-radius:14px;
  font:inherit; font-size:14.5px; font-weight:600; color:var(--ink);
  text-align:left; cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease;
}
.hh-drop .hh-drop-item svg{ width:19px; height:19px; flex:0 0 auto; color:var(--nav-ink, var(--ink-soft)); }
.hh-drop .hh-drop-item:hover{ background:var(--nav-pill, var(--surface-2)); }
.hh-drop .hh-drop-item:focus-visible{ outline:2px solid var(--nav-on, var(--accent)); outline-offset:-2px; }
/* раздел, в котором человек сейчас стоит */
.hh-drop .hh-drop-item.cur,
.hh-drop .hh-drop-item.cur svg{ color:var(--nav-on, var(--accent)); }
.hh-drop .hh-drop-item.cur{ background:var(--nav-pill, var(--surface-2)); font-weight:700; }
.hh-drop .hh-drop-item.danger,
.hh-drop .hh-drop-item.danger svg{ color:var(--rose); }

/* Пункт, которого ещё нет. Не притворяется рабочим: приглушён, не нажимается,
   и рядом стоит метка — честность интерфейса дороже ровного ряда одинаковых строк. */
.hh-drop .hh-drop-item.soon{ color:var(--ink-mute); cursor:default; }
.hh-drop .hh-drop-item.soon:hover{ background:transparent; }
.hh-drop .hh-tag{
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-line); border-radius:999px; padding:3px 7px;
}
.hh-drop .hh-drop-hint{
  padding:0 12px 7px 42px; font-size:11.5px; line-height:1.4; color:var(--ink-mute);
  font-weight:500;
}
.hh-drop .hh-drop-sep{ height:1px; margin:5px 8px; background:var(--nav-line, var(--line)); }

/* Шапка «кто ты». Имя крупнее роли — роль поясняет, а не называет. */
.hh-drop .hh-drop-head{ display:flex; align-items:center; gap:10px; padding:6px 10px 6px; }
.hh-drop .hh-drop-av{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-soft, rgba(240,151,124,.13)); color:var(--nav-on, var(--accent));
  border:1px solid var(--accent-line, transparent);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800;
}
.hh-drop .hh-drop-head .nm{ font-size:14.5px; font-weight:700; line-height:1.2; color:var(--ink); }
.hh-drop .hh-drop-head .rl{ font-size:11.5px; color:var(--ink-mute); font-weight:500; }

/* ── ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ ──
   Разделы — разные документы. Браузер умеет анимировать переход между ними сам:
   капсула и приподнятая вкладка получили имена и ПЕРЕЛЕТАЮТ через границу документов.
   Где не поддерживается — переход мгновенный, ничего не ломается. */
@view-transition{ navigation:auto; }
.hh-cap{ view-transition-name:hh-cap; }
.hh-pill{ view-transition-name:hh-pill; }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  .hh-tabbar .hh-tab, .hh-tabbar .hh-tab .ic, .hh-tabbar .hh-tab .tx,
  .hh-pill, .hh-drop, .hh-drop-neck, .hh-scrim{ transition:none !important; }
}

/* Узкие телефоны (iPhone SE и подобные): подписи на шаг мельче */
@media (max-width:360px){
  .hh-tabbar .hh-tab .tx{ font-size:10.5px; }
}

/* Телефон в АЛЬБОМНОЙ ориентации: высоты почти нет — капсула ниже. */
@media (orientation:landscape) and (max-height:460px){
  .hh-tabbar{ --cap-h:56px; --cap-gap:8px; }
  .hh-tabbar .hh-tab .ic{ top:5px; }
  .hh-tabbar .hh-tab .tx{ top:28px; }
  .hh-tabbar.is-compact .hh-tab .ic{ top:11px; }
}

/* Планшет: капсула не на всю ширину — иначе вкладки расползаются к дальним краям и до
   них неудобно дотягиваться. */
@media (min-width:700px) and (max-width:1023px){
  .hh-tabbar{ left:50%; right:auto; width:min(520px, calc(100% - 48px)); transform:translateX(-50%); }
}

/* ═══════════════ ТЕ ЖЕ ПУНКТЫ В ШАПКЕ (от 1024px) ═══════════════
   Та же капсула, только в шапке и с подписями в строку: на мониторе места хватает. */
.hh-navtabs{
  display:none; align-items:center; gap:2px; padding:4px;
  background:var(--nav-solid, var(--surface));
  border:1px solid var(--nav-line, var(--line));
  border-radius:999px;
}
.hh-navtabs .hh-tab{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 15px; border-radius:999px;
  text-decoration:none; color:var(--nav-ink, var(--ink-soft, #A8B0C0));
  border:1px solid transparent;
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
.hh-navtabs .hh-tab svg{ width:17px; height:17px; }
.hh-navtabs .hh-tab:hover{ color:var(--ink); }
.hh-navtabs .hh-tab.active{
  color:var(--nav-on, var(--accent, #F0977C));
  background:var(--nav-pill, var(--surface-2));
  border-color:var(--nav-pill-line, transparent);
  box-shadow:var(--nav-pill-sh, none);
}
.hh-navtabs .hh-tab:focus-visible{
  outline:2px solid var(--nav-on, var(--accent, #F0977C)); outline-offset:2px;
}

@media (min-width:1024px){
  .hh-tabbar, .hh-scrim{ display:none; }
  .hh-navtabs{ display:flex; }
}

/* ═══════════════ МЕСТО ПОД ПАНЕЛЬ ═══════════════
   Селектор `body.hh-has-tabbar` перебивает собственный отступ страницы независимо от
   порядка подключения стилей. Класс ставит сам компонент. */
body.hh-has-tabbar{
  padding-bottom:calc(62px + 12px + 24px + env(safe-area-inset-bottom));
}
@media (min-width:1024px){
  body.hh-has-tabbar{ padding-bottom:0; }
}