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

.app-nav{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding:0 8px env(safe-area-inset-bottom,0px);
  display:flex;
  justify-content:space-around;
  align-items:stretch;
  gap:2px;
  background:rgba(8,14,26,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--border-soft);
}
.app-nav a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:var(--radius-sm);
  padding:6px 4px;
  transition:color .12s ease, background .12s ease;
  min-width:0;
}
.app-nav a .lbl{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.app-nav a svg{
  width:22px;height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke-width .12s ease;
}
.app-nav a[aria-current="page"]{
  color:var(--accent);
}
.app-nav a[aria-current="page"] svg{
  stroke-width:2.2;
}
@media (hover:hover){
  .app-nav a:hover{color:var(--fg);background:var(--bg-elev)}
}

/* На таймере nav+footer наезжают на нижние controls — компенсируем отступ. */
body[data-page="timer"].has-nav .controls{
  padding-bottom:calc(48px + var(--nav-h) + env(safe-area-inset-bottom,0px));
}

/* Юридический копирайт-футер (152-ФЗ). Узкая полоса прямо над nav, мелким серым
   шрифтом. Сворачивается в пилюлю «© ⌃» у правого края (localStorage
   'pr_footer_collapsed') — насовсем не прячется, ссылка на политику всегда рядом.
   .app-footer — прозрачная обёртка-позиционер на всю ширину; вся видимая
   «химия» (фон/блюр/рамка) и клики — на .af-inner. */
.app-footer{
  position:fixed;
  left:0;right:0;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  z-index:55;
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.app-footer .af-inner{
  pointer-events:auto;
  flex:0 1 auto;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:6px;
  padding:3px 6px 3px 14px;
  font-size:10px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--muted);
  opacity:.55;
  background:rgba(8,14,26,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-top:1px solid var(--border-soft);
  transition:border-radius .28s ease, margin .28s ease, padding .28s ease, opacity .2s ease;
}
.app-footer .af-c{ flex:0 0 auto; }
.app-footer .af-text{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:92vw;
  opacity:1;
  transition:max-width .3s ease, opacity .22s ease, margin .28s ease;
}
.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;
}
.app-footer .af-toggle{
  flex:0 0 auto;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:0;
  color:inherit;
  cursor:pointer;
  padding:0;
  border-radius:50%;
  opacity:.85;
}
.app-footer .af-toggle svg{
  width:14px;height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s ease;
}
.app-footer .af-toggle:hover{ opacity:1;color:var(--fg);background:rgba(255,255,255,.06); }
.app-footer .af-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

/* Свёрнутое состояние — компактная пилюля «© ⌃» у правого края. */
.app-footer.is-collapsed .af-inner{
  margin:0 8px 6px 0;
  padding:4px 9px;
  gap:5px;
  border:1px solid var(--border-soft);
  border-radius:999px;
  opacity:.7;
  cursor:pointer;
}
.app-footer.is-collapsed .af-text{
  max-width:0;
  opacity:0;
  margin:0;
}
.app-footer.is-collapsed .af-toggle svg{ transform:rotate(180deg); }

@media (prefers-reduced-motion: reduce){
  .app-footer .af-inner,
  .app-footer .af-text,
  .app-footer .af-toggle svg{ transition:none; }
}
@media (max-width:380px){
  .app-footer .af-inner{ font-size:9.5px; padding:3px 4px 3px 10px; }
}

/* Планшеты и уже: над nav снизу тесно (особенно на таймере), поэтому уводим
   плашку в верхнюю часть экрана. На контент-страницах верх-право свободен;
   на таймере там кнопки и выпадающие меню (z-index:20) — пилюлю сажаем под
   шапку у левого края, чтобы не перекрыть их. */
@media (max-width:1024px){
  .app-footer{
    top:calc(env(safe-area-inset-top,0px) + 8px);
    bottom:auto;
  }
  .app-footer.is-collapsed .af-inner{ margin:0 8px 0 0; }

  body[data-page="timer"] .app-footer{
    top:calc(env(safe-area-inset-top,0px) + 72px);
    justify-content:flex-start;
  }
  body[data-page="timer"] .app-footer.is-collapsed .af-inner{ margin:0 0 0 8px; }

  /* Плашка ушла наверх — у таймера больше не нужен запас 48px под футер снизу. */
  body[data-page="timer"].has-nav .controls{
    padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 8px);
  }
}

/* Контентные страницы (не таймер): копирайт не фиксируется, а «течёт» в самом
   низу содержимого — под всем контентом, но над зафиксированным снизу меню.
   Рисуется тонкой центрированной подписью с верхней разделительной линией;
   сворачивание/пилюля здесь не используются (см. nav.js, ветка af-inline). */
.app-footer.af-inline{
  position:static;
  display:block;
  margin-top:36px;
  padding:0 20px;
  pointer-events:auto;
}
.app-footer.af-inline .af-inner{
  max-width:920px;
  margin:0 auto;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  padding:14px 0 0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-top:1px solid var(--border-soft);
  border-radius:0;
  opacity:.6;
  font-size:11px;
}
.app-footer.af-inline .af-text{
  flex:0 1 auto;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:none;
  text-align:center;
}

/* Кнопка © в шапке таймера. На ПК копирайт остаётся нижним футером — кнопка
   скрыта; на мобильных футер прячем (см. ниже), а копирайт открывается попапом
   по этой кнопке слева от выбора звука. */
.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(2,6,14,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cr-backdrop[hidden]{ display:none; }
.cr-pop{
  position:relative;
  width:min(360px,100%);
  padding:22px 20px 20px;
  background:var(--bg-1,rgba(16,28,48,.98));
  border:1px solid var(--border-soft);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.cr-close{
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;
  background:transparent;border:0;border-radius:50%;
  color:var(--muted);cursor:pointer;
}
.cr-close:hover{ color:var(--fg);background:rgba(255,255,255,.06); }
.cr-close:focus-visible{ outline:2px solid var(--accent);outline-offset:1px; }
.cr-text{
  margin:0;padding-right:18px;
  font-size:13px;line-height:1.5;
  color:var(--muted);
}
.cr-text .cr-sym{ font-weight:600; }
.cr-text a{
  color:inherit;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.20);
}
.cr-text a:hover{ color:var(--accent);text-decoration-color:currentColor; }

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

/* Toast-контейнер для уведомлений (ачивки в Phase 4) — учёт высоты футера. */
.toast-stack{
  position:fixed;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 32px);
  z-index:70;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
  max-width:92vw;
}
.toast{
  pointer-events:auto;
  background:rgba(16,28,48,.96);
  border:1px solid var(--accent-border);
  color:var(--fg);
  padding:10px 16px;
  border-radius:var(--radius);
  font-size:14px;
  box-shadow:var(--shadow);
  animation:toast-rise .25s ease;
}
@keyframes toast-rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Toast «Открыто: <ачивка>» — Phase 4. Тот же контейнер, но богатая разметка. */
.toast.toast-achievement{
  padding:10px 14px 10px 10px;
  border-color:rgba(246,196,83,.45);
  background:linear-gradient(180deg, rgba(246,196,83,.10), rgba(16,28,48,.96));
}
.toast-ach{ display:flex;align-items:center;gap:12px; }
.toast-ach-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(246,196,83,.18);
  color:#f6c453;
  flex-shrink:0;
}
.toast-ach-icon svg{ width:22px;height:22px;fill:currentColor; }
.toast-ach-icon svg path[fill="none"]{ fill:none; }
.toast-ach-bronze   .toast-ach-icon{ color:#c79268; background:rgba(199,146,104,.18); }
.toast-ach-silver   .toast-ach-icon{ color:#c8d0dc; background:rgba(200,208,220,.18); }
.toast-ach-gold     .toast-ach-icon{ color:#f6c453; background:rgba(246,196,83,.18);  }
.toast-ach-platinum .toast-ach-icon{ color:#7dd3fc; background:rgba(125,211,252,.18); }
.toast-ach-kicker{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:1px;
}
.toast-ach-title{ font-size:14px;font-weight:600; }