/* v1.6.0 - dedicated 1:1 live/editor magazine geometry layer.
   Purpose: the rendered book must keep the same physical proportions, side stacks,
   category tabs and tab visibility in public live and in admin editor.
   Loaded LAST in both index.php and admin/editor.php. */
:root{
  --nc-book-ratio:1.72;
  --nc-book-max-w:1320px;
  --nc-book-w:min(var(--nc-book-max-w), calc(100vw - 230px), calc((100vh - 190px) * var(--nc-book-ratio)));
  --nc-editor-book-w:min(var(--nc-book-max-w), calc(100vw - 230px), calc((100vh - 150px) * var(--nc-book-ratio)));
  --nc-stack-w:56px;
  --nc-tab-w:58px;
  --nc-tab-lip:47px;
  --nc-paper-edge:18px;
}

/* Same centering model for public and editor. */
body:not(.nc-editor-page) .stage,
body.nc-editor-page .nc-canvas{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
body:not(.nc-editor-page) .stage{
  min-height:calc(100vh - 160px)!important;
  padding:24px 0 116px!important;
}
body.nc-editor-page .nc-canvas{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  padding:58px 0 56px!important;
  background:radial-gradient(circle at 50% 44%,rgba(77,43,20,.50),#050302 72%)!important;
}

body:not(.nc-editor-page) .magazine-shell,
body.nc-editor-page .nc-canvas .magazine-shell{
  width:var(--nc-book-w)!important;
  height:auto!important;
  aspect-ratio:var(--nc-book-ratio)!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 auto!important;
  display:block!important;
  position:relative!important;
  overflow:visible!important;
  transform:none!important;
}
body.nc-editor-page .nc-canvas .magazine-shell{
  width:var(--nc-editor-book-w)!important;
}
body:not(.nc-editor-page) .book-wrap,
body.nc-editor-page .nc-canvas .book-wrap{
  width:100%!important;
  height:100%!important;
  aspect-ratio:var(--nc-book-ratio)!important;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
  margin:0!important;
  transform:none!important;
}
body:not(.nc-editor-page) .book,
body.nc-editor-page .nc-canvas .book{
  position:absolute!important;
  inset:0!important;
  z-index:40!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transform-origin:center center!important;
}
body:not(.nc-editor-page) .spread,
body.nc-editor-page .nc-canvas .spread{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:none!important;
  grid-template-columns:1fr 1fr!important;
  z-index:42!important;
}
body:not(.nc-editor-page) .spread.is-active,
body.nc-editor-page .nc-canvas .spread.is-active{
  display:grid!important;
}
body:not(.nc-editor-page) .page,
body.nc-editor-page .nc-canvas .page{
  position:relative!important;
  z-index:60!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
body:not(.nc-editor-page) .page-safe-area,
body:not(.nc-editor-page) .folio,
body.nc-editor-page .nc-canvas .page-safe-area,
body.nc-editor-page .nc-canvas .folio{
  position:relative!important;
  z-index:68!important;
}
body:not(.nc-editor-page) .spine,
body.nc-editor-page .nc-canvas .spine{
  z-index:90!important;
}

/* Page stacks sit BEHIND the open sheets, but remain visible as page thickness. */
body:not(.nc-editor-page) .stack-left,
body:not(.nc-editor-page) .stack-right,
body.nc-editor-page .nc-canvas .stack-left,
body.nc-editor-page .nc-canvas .stack-right{
  position:absolute!important;
  top:2.3%!important;
  bottom:2.3%!important;
  width:var(--nc-stack-w)!important;
  z-index:8!important;
  pointer-events:none!important;
  opacity:1!important;
  border-radius:13px!important;
  background:
    linear-gradient(90deg,rgba(53,34,12,.48),rgba(255,246,202,.38) 20%,rgba(255,239,174,.72) 50%,rgba(119,83,29,.42) 78%,rgba(39,25,8,.35)),
    repeating-linear-gradient(90deg,#6f4d18 0 1px,#a67c2f 1px 2px,#ead28a 2px 5px,#fff1bc 5px 7px,#9c7127 7px 8px)!important;
  box-shadow:inset 9px 0 8px rgba(255,250,222,.42), inset -11px 0 13px rgba(48,30,9,.45), 0 18px 24px rgba(0,0,0,.42)!important;
}
body:not(.nc-editor-page) .stack-left,
body.nc-editor-page .nc-canvas .stack-left{left:calc(var(--nc-tab-lip) * -1 - 9px)!important;}
body:not(.nc-editor-page) .stack-right,
body.nc-editor-page .nc-canvas .stack-right{right:calc(var(--nc-tab-lip) * -1 - 9px)!important;}

/* Physical category separators: enough lip outside to read, root under the page edge. */
body:not(.nc-editor-page) .tabs,
body.nc-editor-page .nc-canvas .tabs{
  position:absolute!important;
  top:4.15%!important;
  bottom:4.15%!important;
  width:var(--nc-tab-w)!important;
  padding:7px 0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  z-index:22!important;
  pointer-events:auto!important;
  filter:drop-shadow(0 8px 9px rgba(0,0,0,.33))!important;
  transform:none!important;
}
body:not(.nc-editor-page) .tabs.left,
body.nc-editor-page .nc-canvas .tabs.left{left:calc(var(--nc-tab-lip) * -1)!important;right:auto!important;align-items:flex-end!important;}
body:not(.nc-editor-page) .tabs.right,
body.nc-editor-page .nc-canvas .tabs.right{right:calc(var(--nc-tab-lip) * -1)!important;left:auto!important;align-items:flex-start!important;}
body:not(.nc-editor-page) .tabs::before,
body.nc-editor-page .nc-canvas .tabs::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:25px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,246,204,.40),rgba(126,88,32,.34),rgba(24,15,5,.18)),repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0 1px,rgba(115,82,31,.14) 1px 5px)!important;
  box-shadow:inset 0 0 13px rgba(0,0,0,.23)!important;
}
body:not(.nc-editor-page) .tabs.left::before,
body.nc-editor-page .nc-canvas .tabs.left::before{right:0!important;border-radius:0 11px 11px 0!important;}
body:not(.nc-editor-page) .tabs.right::before,
body.nc-editor-page .nc-canvas .tabs.right::before{left:0!important;border-radius:11px 0 0 11px!important;}
body:not(.nc-editor-page) .tab,
body.nc-editor-page .nc-canvas .tab{
  position:relative!important;
  z-index:1!important;
  flex:1 1 0!important;
  width:54px!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0 3px!important;
  border:1px solid rgba(92,66,25,.76)!important;
  color:#211506!important;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(250,239,202,.98) 35%,rgba(223,193,122,.95) 68%,rgba(142,102,37,.78) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.18) 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,.72)!important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.88), inset -8px 0 12px rgba(80,52,16,.21), 0 2px 5px rgba(0,0,0,.25)!important;
  transform:none!important;
  overflow:hidden!important;
}
body:not(.nc-editor-page) .tabs.left .tab,
body.nc-editor-page .nc-canvas .tabs.left .tab{border-radius:10px 2px 2px 10px!important;}
body:not(.nc-editor-page) .tabs.right .tab,
body.nc-editor-page .nc-canvas .tabs.right .tab{border-radius:2px 10px 10px 2px!important;}
body:not(.nc-editor-page) .tab + .tab,
body.nc-editor-page .nc-canvas .tab + .tab{margin-top:-1px!important;}
body:not(.nc-editor-page) .tab::before,
body.nc-editor-page .nc-canvas .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,.62),transparent 44%,rgba(70,45,15,.18))!important;
}
body:not(.nc-editor-page) .tab::after,
body.nc-editor-page .nc-canvas .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,.62),rgba(79,51,15,.24))!important;
}
body:not(.nc-editor-page) .tabs.left .tab::after,
body.nc-editor-page .nc-canvas .tabs.left .tab::after{right:0!important;}
body:not(.nc-editor-page) .tabs.right .tab::after,
body.nc-editor-page .nc-canvas .tabs.right .tab::after{left:0!important;}
body:not(.nc-editor-page) .tab.is-active,
body:not(.nc-editor-page) .tab[aria-current="true"],
body.nc-editor-page .nc-canvas .tab.is-active,
body.nc-editor-page .nc-canvas .tab[aria-current="true"]{
  background:linear-gradient(90deg,#ffed91 0%,#e7b91f 55%,#a57510 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 6px)!important;
  border-color:rgba(116,76,8,.82)!important;
  color:#211407!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,.36)!important;
}

/* Same page edge mask in live/editor; enough to place the tabs inside the stack without hiding text. */
body:not(.nc-editor-page) .page.left,
body.nc-editor-page .nc-canvas .page.left{
  box-shadow:inset -58px 0 48px rgba(54,35,17,.32), inset 18px 0 10px rgba(255,244,196,.30), calc(var(--nc-paper-edge) * -0.55) 0 0 rgba(246,229,169,.91), calc(var(--nc-paper-edge) * -1) 0 0 rgba(151,112,49,.45), inset 0 0 42px rgba(90,55,17,.18)!important;
}
body:not(.nc-editor-page) .page.right,
body.nc-editor-page .nc-canvas .page.right{
  box-shadow:inset 58px 0 48px rgba(54,35,17,.28), inset -18px 0 10px rgba(255,244,196,.30), calc(var(--nc-paper-edge) * .55) 0 0 rgba(246,229,169,.91), var(--nc-paper-edge) 0 0 rgba(151,112,49,.45), inset 0 0 42px rgba(90,55,17,.18)!important;
}

/* Editor overlays must not visually modify the magazine geometry. */
body.nc-editor-page .nc-canvas .page.is-active-page::after{
  inset:14px!important;
  z-index:140!important;
  pointer-events:none!important;
  border:2px solid rgba(64,169,255,.70)!important;
  box-shadow:0 0 0 2px rgba(64,169,255,.08)!important;
}
body.nc-editor-page .nc-editor-topline{z-index:1000!important;}
body.nc-editor-page .nc-save-status{z-index:1000!important;}

@media(max-width:1100px){
  :root{--nc-book-w:min(1050px, calc(100vw - 160px), calc((100vh - 170px) * var(--nc-book-ratio)));--nc-editor-book-w:min(1050px, calc(100vw - 160px), calc((100vh - 140px) * var(--nc-book-ratio)));--nc-tab-lip:43px;--nc-tab-w:54px;}
  body:not(.nc-editor-page) .tab,body.nc-editor-page .nc-canvas .tab{width:50px!important;font-size:9.3px!important;}
}