/* App shell (Волна G2): сайдбар на десктопе, нижний бар на мобиле.
   Плеер урока и тест уровня живут без шелла: там погружение. */

@view-transition { navigation: auto; }
::view-transition-old(root){animation:vt-out .28s cubic-bezier(.32,.72,0,1) both}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.012)}}

.shellnav{position:fixed;z-index:860;display:flex}
.shellnav a{
  display:flex;align-items:center;gap:12px;min-height:44px;min-width:44px; /* цель нажатия (наряд 5 §1.5) */
  color:var(--ink-dim);font-weight:700;font-size:.9063rem;
  border-radius:16px;padding:12px 16px;
  transition:color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.shellnav a:active{transform:scale(.95)}
.shellnav a svg{width:21px;height:21px;flex:none}
.shellnav a.active{
  color:var(--gold);
  background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(240,178,84,.3);
}
.shellnav a:hover{color:var(--ink)}
.shellnav .sh-logo{
  font-family:var(--font-d);font-weight:600;font-size:1rem;color:var(--ink);
  padding:14px 16px 22px;
}
.shellnav .sh-logo em{font-style:normal;color:var(--gold)}

/* мобилка: нижний бар */
@media (max-width:899px){
  .shellnav{
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    justify-content:space-around;align-items:center;
    padding:8px;border-radius:24px;
    background:rgba(10,14,26,.78);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 50px -22px rgba(0,0,0,.75);
  }
  :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .shellnav{
    background:rgba(255,255,255,.85);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(28,26,20,.08),0 18px 44px -20px rgba(28,26,20,.35);
  }
  .shellnav .sh-logo,.shellnav .sh-spacer,.shellnav .sh-foot{display:none}
  /* Нижний бар держит ровно пять разделов: дом, острова, повторение, речь и
     то, что откроется следующим. Остальное живёт в сайдбаре на десктопе и в
     поиске по ⌘K: восемь иконок в ряд на 360px превращаются в кашу. */
  .shellnav a.sh-desk{display:none}
  /* пять пунктов делят ширину бара поровну: зона нажатия становится 70px,
     а не 35px по ширине надписи (D-005) */
  .shellnav a{flex:1;justify-content:center;flex-direction:column;gap:4px;font-size:.6875rem;padding:8px 6px;letter-spacing:.02em;white-space:nowrap}
  /* узкий экран и шесть разделов: подписи не переносятся и бар не растёт в высоту */
  @media (max-width:429px){.shellnav a{padding:8px 7px;font-size:.625rem}}
  @media (max-width:359px){.shellnav a{padding:8px 5px;font-size:.5938rem}.shellnav a svg{width:19px;height:19px}}
  body.with-shell{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  body.with-shell .fox-corner{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* десктоп: сайдбар */
@media (min-width:900px){
  .shellnav{
    left:18px;top:18px;bottom:18px;width:216px;
    flex-direction:column;gap:4px;
    padding:14px 12px;border-radius:26px;
    background:rgba(10,14,26,.55);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 60px -28px rgba(0,0,0,.7);
  }
  :is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .shellnav{
    background:rgba(255,255,255,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(28,26,20,.07),0 24px 60px -28px rgba(28,26,20,.3);
  }
  body.with-shell{padding-left:252px}
  body.with-shell .map-head{max-width:900px}
  .shellnav .sh-spacer{flex:1}
  .shellnav .sh-foot{padding:10px 16px;font-size:.75rem;color:var(--ink-faint)}
}

/* фон-атмосфера хаба (ART-BIBLE: регион A0, много воздуха под UI) */
.hub-bg{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.22;filter:saturate(.92);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .hub-bg{opacity:.08}
.hub-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,26,.55) 0%,rgba(10,14,26,.2) 42%,rgba(10,14,26,.75) 100%);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .hub-bg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.3) 42%,rgba(255,255,255,.8) 100%);
}

/* вход через Telegram в шапке (пакет EWA-TELEGRAM) */
.shellnav .sh-who{display:flex;align-items:center}
.shellnav .sh-login,.shellnav .sh-me{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:999px;font:700 .8125rem/1 Manrope,system-ui,sans-serif;text-decoration:none;flex-direction:row}
.shellnav .sh-login{color:#141414;background:var(--gold,#f0b254)}
.shellnav .sh-login svg{width:18px;height:18px}
.shellnav .sh-me{color:var(--ink);background:var(--panel,rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px var(--line-strong,rgba(255,255,255,.14))}
.shellnav .sh-me img,.shellnav .sh-me b{width:26px;height:26px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--gold-soft,rgba(240,178,84,.2));color:var(--gold);font-size:.75rem}
.shellnav .sh-me span,.shellnav .sh-login span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:800px){.shellnav .sh-login span,.shellnav .sh-me span{display:none}.shellnav .sh-login,.shellnav .sh-me{padding:8px 10px}}