/* Navigation v2 (audit 2026-10-25): visible search in the desktop header, thumb-reachable bottom bar on phones.
   The top link row is hidden only when the bottom bar exists, so the no-script page keeps its navigation. */

/* Wide desktop (>=1320px; the 230px field does not fit next to the five links and the header controls below that): the search icon becomes a visible field that opens the existing quick search ("/" or Ctrl+K) */
@media(min-width:1320px){
 html body .header-actions #searchToggle{position:relative;display:inline-flex;align-items:center;gap:10px;width:auto;min-width:230px;height:40px;padding:0 44px 0 14px;border:1px solid #ffffff1f;border-radius:10px;background:#ffffff0a;color:#aeb3bf;cursor:text;transition:background .2s,border-color .2s}
 html body .header-actions #searchToggle:hover{background:#ffffff12;border-color:#ff725b66;color:#e6e9f0}
 html body .header-actions #searchToggle::after{content:'Поиск аниме';font-size:13px;font-weight:500;letter-spacing:0}
 html body .header-actions #searchToggle::before{content:'/';position:absolute;right:10px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:22px;border:1px solid #ffffff26;border-radius:6px;font-size:12px;line-height:1;color:#9aa0ad}
}

/* Phones and small tablets: bottom bar */
.bottom-nav{display:none}
@media(max-width:820px){
 .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;min-height:60px;padding:6px 6px max(6px,env(safe-area-inset-bottom));background:#0d0f12f2;border-top:1px solid #ffffff14;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 html body .bottom-nav .nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:auto;padding:4px 2px;border-radius:10px;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:0;color:#9aa0ad;text-decoration:none;opacity:1;background:none;border:0;white-space:nowrap}
 html body .bottom-nav .nav-link::after{display:none!important}
 html body .bottom-nav .nav-link>span{background:none!important;padding:0!important;border:0!important;border-radius:0!important;min-width:0!important;height:auto!important;box-shadow:none!important}
 html body .bottom-nav .nav-link>.leyvu-icon,html body .bottom-nav .nav-link>svg{display:block;width:22px;height:22px;flex:none}
 html body .bottom-nav .nav-link>span{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 html body .bottom-nav .nav-link.active,html body .bottom-nav .nav-link[aria-current=page]{color:#ff725b;background:#ff725b14}
 html body .bottom-nav .nav-link:active{background:#ffffff12}
 html body .bottom-nav .nav-link:focus-visible{outline:2px solid #ff725b;outline-offset:-2px}

 /* the top row is replaced by the bar; header shrinks to brand + actions */
 html body:has(.bottom-nav) .header nav{display:none}
 html body:has(.bottom-nav) .header,html body.home-cinematic:has(.bottom-nav) .header{height:64px;min-height:64px;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:space-between;padding:0 20px;gap:12px}
 html body:has(.bottom-nav){padding-bottom:calc(68px + env(safe-area-inset-bottom))}
 html body:has(.bottom-nav) .back-to-top{bottom:calc(76px + env(safe-area-inset-bottom))}
 html body:has(.bottom-nav) #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 /* The poster strips bleed to the screen edge with margin-right:-20px, but their section is inset only 12px: they stuck out 8px, widened the page and pushed the fixed bar below the visible area. Bleed by exactly the section inset instead (the section is centred). */
 html body #home .poster-strip{margin-right:calc((100% - 100vw) / 2)!important}
}
@media(prefers-reduced-motion:reduce){html body .header-actions #searchToggle{transition:none}}