/* nav.css — нижняя tabbar-навигация (PWA-стиль). Подключается на всех страницах,
   включая таймер. На таймере nav сидит поверх .controls — у controls добавлен
   padding-bottom через body.has-nav. */

/* «Живая аура» (этап 6 редизайна, 13.10.2026): тёмное стекло, подписи Onest, активная вкладка —
   значок в цветной пилюле. Высота прежняя (--nav-h), от неё считают отступы base.css и главная. */
.app-nav{
  position:fixed;
  left:0;right:0;bottom:calc(0px - var(--vp-gap,0px)); /* --vp-gap — баг окна iOS 26, nav.js watchViewportGap */
  z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding:4px 8px env(safe-area-inset-bottom,0px);
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  gap:2px;
  background:rgba(6,10,24,.82);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid rgba(255,255,255,.07);
}
.app-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-decoration:none;
  color:var(--au-dim);
  font:600 11px/1.1 var(--au-body);
  border-radius:14px;
  padding:4px;
  transition:color .2s ease;
  min-width:0;
}
.app-nav a .lbl{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.app-nav a svg{
  width:40px;height:26px;
  padding:2px 9px;
  border-radius:999px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:background-color .3s var(--au-ease),color .3s var(--au-ease);
}
.app-nav a[aria-current="page"]{
  color:var(--au-fg);
}
.app-nav a[aria-current="page"] svg{
  stroke-width:1.9;
  color:var(--au-on-accent);
  background:var(--au-accent);
}
@media (hover:hover){
  .app-nav a:hover{color:var(--au-fg)}
}

/* Юридический копирайт (152-ФЗ) на страницах без подвала сайта (история, награды, вход, «Программы» и др.):
   nav.js рисует footer.app-footer.af-inline — тонкая центрированная подпись в потоке под контентом.
   Фиксированная полоса над вкладками со сворачиванием в «© ⌃» (ветка nav.js для главной) не используется:
   у главной свой подвал с .sf-legal — её стили сняты на этапе 7 редизайна. */
.app-footer.af-inline{
  display:block;
  margin-top:36px;
  padding:0 20px;
}
.app-footer.af-inline .af-inner{
  max-width:920px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  padding:14px 0 0;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--muted);
  opacity:.6;
  border-top:1px solid var(--border-soft);
}
.app-footer .af-c{ flex:0 0 auto; }
.app-footer.af-inline .af-text{
  flex:0 1 auto;
  min-width:0;
  text-align:center;
}
.app-footer a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.20);
}
.app-footer a:hover{
  color:var(--accent);
  text-decoration-color:currentColor;
}

/* Кнопка © в шапке таймера. На ПК копирайт остаётся нижним футером — кнопка
   скрыта; на мобильных футер прячем (см. ниже), а копирайт открывается попапом
   по этой кнопке слева от выбора звука. */
.copyright-btn{
  display:none;
  min-height:auto;width:38px;height:38px;flex-shrink:0;
  padding:0;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  color:var(--muted);
  cursor:pointer;
}
.copyright-btn svg{
  width:19px;height:19px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.copyright-btn:hover{ color:var(--fg); }
.copyright-btn:focus-visible{ outline:2px solid var(--accent);outline-offset:1px; }

/* Попап копирайта (мобильные). */
.cr-backdrop{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(3,6,16,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cr-backdrop[hidden]{ display:none; }
/* окно сайта «Живой ауры» (этап 6 редизайна): card-solid, радиус 24, крестик значком линией */
.cr-pop{
  position:relative;
  width:min(360px,100%);
  padding:22px 20px 20px;
  background:var(--au-card-solid);
  border:1px solid var(--au-card-line);
  border-radius:24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  font-family:var(--au-body);
}
.cr-close{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:0;line-height:1;
  background:var(--au-glass);border:1px solid var(--au-line);border-radius:12px;
  color:var(--au-muted);cursor:pointer;
}
.cr-close::before{
  content:"";flex:none;display:block;width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/16px no-repeat;
}
.cr-close:hover{ color:var(--au-fg);background:var(--au-glass-2); }
.cr-close:focus-visible{ outline:2px solid var(--accent);outline-offset:1px; }
.cr-text{
  margin:0;
  font:400 13px/1.55 var(--au-body);
  color:var(--au-dim);
}
.cr-text .cr-sym{ font-weight:600; }
/* Строка безопасности над копирайтом (в PWA дисклеймера главной нет) */
.cr-safe{
  position:relative;
  margin:0 0 14px;padding:0 40px 14px 18px;
  font:500 14.5px/1.5 var(--au-body);color:var(--au-fg);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cr-safe::before{ content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--au-warn);box-shadow:0 0 10px var(--au-warn); }
.cr-safe a{ color:var(--au-muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25); }
.cr-safe a:hover{ color:var(--accent); }
.cr-text a{
  color:var(--au-muted);text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);
}
.cr-text a:hover{ color:var(--accent);text-decoration-color:currentColor; }

@media (max-width:1024px){
  body[data-page="timer"] .copyright-btn{ display:grid; }
}