/* v1.5.7 - unified live/editor physical index tabs
   The category tabs are rendered as paper/plastic index lips mounted behind the open pages.
   This file is intentionally loaded last in live and editor to keep parity. */
.magazine-shell .book-wrap{
  overflow:visible!important;
  isolation:isolate!important;
}
.magazine-shell .book{
  position:absolute!important;
  inset:0!important;
  z-index:60!important;
}
.magazine-shell .spread.is-active{z-index:70!important;}
.magazine-shell .page{z-index:84!important;}
.magazine-shell .page-safe-area,
.magazine-shell .folio{z-index:90!important;}
.magazine-shell .spine{z-index:112!important;}
.magazine-shell .stack-left,
.magazine-shell .stack-right{
  z-index:18!important;
  top:2.1%!important;
  bottom:2.1%!important;
  width:70px!important;
  border-radius:11px!important;
  opacity:1!important;
  background:
    linear-gradient(90deg,rgba(61,39,14,.42),rgba(254,238,180,.30) 21%,rgba(255,248,213,.52) 45%,rgba(143,101,36,.36) 74%,rgba(64,42,15,.36)),
    repeating-linear-gradient(90deg,#6d4b18 0 1px,#b98b35 1px 2px,#f0d98f 2px 5px,#fff2bc 5px 7px,#ad8030 7px 8px)!important;
  box-shadow:
    inset 8px 0 8px rgba(255,248,214,.42),
    inset -14px 0 14px rgba(59,38,13,.42),
    0 18px 24px rgba(0,0,0,.40)!important;
  pointer-events:none!important;
}
.magazine-shell .stack-left{left:-52px!important;}
.magazine-shell .stack-right{right:-52px!important;}
.magazine-shell .tabs{
  position:absolute!important;
  z-index:32!important;
  top:3.75%!important;
  bottom:3.75%!important;
  width:64px!important;
  padding:9px 0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  pointer-events:auto!important;
  filter:drop-shadow(0 10px 11px rgba(0,0,0,.38))!important;
}
.magazine-shell .tabs.left{left:-54px!important;align-items:flex-end!important;}
.magazine-shell .tabs.right{right:-54px!important;align-items:flex-start!important;}
.magazine-shell .tabs::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:26px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(255,246,204,.46),rgba(122,86,32,.32),rgba(25,15,4,.16)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.32) 0 1px,rgba(115,82,31,.16) 1px 5px)!important;
  box-shadow:inset 0 0 13px rgba(0,0,0,.27)!important;
}
.magazine-shell .tabs.left::before{right:2px!important;border-radius:0 10px 10px 0!important;}
.magazine-shell .tabs.right::before{left:2px!important;border-radius:10px 0 0 10px!important;}
.magazine-shell .tab{
  position:relative!important;
  z-index:1!important;
  flex:1 1 0!important;
  min-height:0!important;
  width:56px!important;
  height:auto!important;
  margin:0!important;
  padding:0 3px!important;
  border:1px solid rgba(94,67,25,.72)!important;
  color:#221507!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(251,240,203,.98) 34%,rgba(224,194,125,.93) 67%,rgba(143,104,38,.76) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 6px)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  writing-mode:vertical-rl!important;
  text-orientation:mixed!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-shadow:0 1px 0 rgba(255,255,255,.76)!important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.92),
    inset -8px 0 12px rgba(78,51,16,.20),
    0 2px 5px rgba(0,0,0,.28)!important;
}
.magazine-shell .tabs.left .tab{
  border-radius:10px 2px 2px 10px!important;
  transform:translateX(0)!important;
}
.magazine-shell .tabs.right .tab{
  border-radius:2px 10px 10px 2px!important;
  transform:translateX(0)!important;
}
.magazine-shell .tab + .tab{margin-top:-1px!important;}
.magazine-shell .tabs.left .tab:first-child{border-top-left-radius:13px!important;}
.magazine-shell .tabs.left .tab:last-child{border-bottom-left-radius:13px!important;}
.magazine-shell .tabs.right .tab:first-child{border-top-right-radius:13px!important;}
.magazine-shell .tabs.right .tab:last-child{border-bottom-right-radius:13px!important;}
.magazine-shell .tab::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.68),transparent 42%,rgba(76,50,16,.18))!important;
}
.magazine-shell .tab::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:7px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,255,255,.68),rgba(81,52,15,.24))!important;
}
.magazine-shell .tabs.left .tab::after{right:0!important;}
.magazine-shell .tabs.right .tab::after{left:0!important;}
.magazine-shell .tab.is-active,
.magazine-shell .tab[aria-current="true"]{
  background:
    linear-gradient(90deg,#ffeb8f 0%,#e9bd2d 55%,#a87912 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 6px)!important;
  border-color:rgba(116,76,8,.80)!important;
  color:#201205!important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.72),
    inset -8px 0 13px rgba(86,52,5,.24),
    0 4px 9px rgba(0,0,0,.37)!important;
}
/* A stronger outside page edge masks the inner root of the tabs so they look inserted into the stack. */
.magazine-shell .page.left{
  box-shadow:
    inset -58px 0 48px rgba(54,35,17,.32),
    inset 18px 0 10px rgba(255,244,196,.30),
    -10px 0 0 rgba(246,229,169,.88),
    -18px 0 0 rgba(151,112,49,.45),
    inset 0 0 42px rgba(90,55,17,.18)!important;
}
.magazine-shell .page.right{
  box-shadow:
    inset 58px 0 48px rgba(54,35,17,.28),
    inset -18px 0 10px rgba(255,244,196,.30),
    10px 0 0 rgba(246,229,169,.88),
    18px 0 0 rgba(151,112,49,.45),
    inset 0 0 42px rgba(90,55,17,.18)!important;
}
/* Editor parity: selection overlay must not resize, move or visually cover the category lips. */
body.nc-editor-page .magazine-shell .tabs,
body.nc-editor-page .magazine-shell .stack-left,
body.nc-editor-page .magazine-shell .stack-right{
  z-index:32!important;
}
body.nc-editor-page .magazine-shell .page{z-index:84!important;}
body.nc-editor-page .magazine-shell .spine{z-index:112!important;}
body.nc-editor-page .nc-canvas .page.is-active-page::after{
  inset:14px!important;
  border:2px solid rgba(64,169,255,.70)!important;
  box-shadow:0 0 0 2px rgba(64,169,255,.08)!important;
  z-index:120!important;
  pointer-events:none!important;
}
@media(max-width:1000px){
  .magazine-shell .stack-left{left:-48px!important}.magazine-shell .stack-right{right:-48px!important}
  .magazine-shell .tabs{width:58px!important;top:3.9%!important;bottom:3.9%!important}
  .magazine-shell .tabs.left{left:-50px!important}.magazine-shell .tabs.right{right:-50px!important}
  .magazine-shell .tab{width:51px!important;font-size:9.2px!important}
}