/* DAWU V5.7 — navigation, scrollbar and series-control corrections. */

/* Root scrollbar follows the active theme. This overrides the old hard-coded black tech.css scrollbar. */
html{scrollbar-width:thin!important}
html[data-theme="light"]{scrollbar-color:#9aa9b6 #eef3f7!important}
html[data-theme="dark"]{scrollbar-color:#394857 #0b1016!important}
::-webkit-scrollbar{width:10px!important;height:10px!important}
html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] *::-webkit-scrollbar-track{background:#eef3f7!important}
html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] *::-webkit-scrollbar-thumb{background:#9aa9b6!important;border:2px solid #eef3f7!important;border-radius:999px!important}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:#758797!important}
html[data-theme="dark"]::-webkit-scrollbar-track,
html[data-theme="dark"] *::-webkit-scrollbar-track{background:#0b1016!important}
html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:#394857!important;border:2px solid #0b1016!important;border-radius:999px!important}
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:#536779!important}

/* Header contents are vertically centered. Safe-area padding belongs to the bar, not to the inner row. */
.topbar-in{display:flex!important;align-items:center!important;min-height:72px!important;height:72px!important;padding-block:0!important}
.logo,.nav,.desktop-actions,.header-actions{align-self:center!important}
.logo{margin-block:0!important}
.desktop-actions,.header-actions{margin-block:0!important}

/* YSJF-style rail: controls sit inside the media zone, not at the browser edge. */
.ysjf-series-viewport{position:relative!important}
.ysjf-series-nav{
  top:clamp(158px,13vw,259px)!important;
  transform:translateY(-50%)!important;
  width:58px!important;height:58px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.38)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.27),rgba(255,255,255,.12))!important;
  color:var(--ui-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.10),0 16px 38px rgba(16,31,43,.20),0 0 0 1px rgba(80,135,150,.08)!important;
  backdrop-filter:blur(22px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%)!important;
}
.ysjf-series-nav::before{content:"";position:absolute!important;inset:1px 6px auto 6px!important;height:42%!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0))!important;pointer-events:none!important}
.ysjf-series-nav span{position:relative!important;z-index:1!important;font-size:34px!important;line-height:1!important;transform:translateY(-1px)!important}
.ysjf-series-prev{left:clamp(46px,4vw,78px)!important}
.ysjf-series-next{right:clamp(46px,4vw,78px)!important}
.ysjf-series-nav:hover{transform:translateY(-50%) scale(1.06)!important;background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(255,255,255,.18))!important;border-color:rgba(126,206,216,.50)!important}
.ysjf-series-nav:active{transform:translateY(-50%) scale(.96)!important}
html[data-theme="light"] .ysjf-series-nav{color:#20313d!important;border-color:rgba(43,75,94,.20)!important;background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(236,246,249,.47))!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.35),0 16px 36px rgba(58,82,98,.16),0 0 0 1px rgba(52,110,126,.06)!important}
html[data-theme="dark"] .ysjf-series-nav{color:#f2f7fa!important;border-color:rgba(255,255,255,.22)!important;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(17,25,34,.38))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 18px 44px rgba(0,0,0,.34)!important}

/* The 16-series rail already contains every series; the extra "view all" CTA is intentionally gone. */
.ysjf-series-more{display:none!important}

@media(max-width:760px){
  .topbar{padding-top:env(safe-area-inset-top,0px)!important}
  .topbar-in{height:64px!important;min-height:64px!important;padding:0!important;align-items:center!important}
  .logo,.header-actions,.theme-toggle,.menu-toggle{align-self:center!important;margin-top:0!important;margin-bottom:0!important}
  .header-actions{margin-left:auto!important}
  /* Fix legacy v54 display:none: both state classes now explicitly open the menu. */
  .nav{top:calc(env(safe-area-inset-top,0px) + 68px)!important}
  body.nav-open .nav,.nav.open{display:flex!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}
  body:not(.nav-open) .nav:not(.open){display:none!important}
  html[data-theme="light"] body.nav-open .nav,html[data-theme="light"] .nav.open{background:rgba(249,251,252,.97)!important;color:#1c2b37!important}
  html[data-theme="dark"] body.nav-open .nav,html[data-theme="dark"] .nav.open{background:rgba(10,14,20,.96)!important;color:#eef4f7!important}
  .ysjf-series-nav{display:none!important}
}