/* v1.6.1 — single-source book geometry + reference physical category tabs.
   This file is intentionally loaded LAST in live and editor.
   Goal: book component must look identical in public live and admin editor. */
:root{
  --nc-book-ratio:1.72;
  --nc-book-max-w:1320px;
  --nc-book-w:min(var(--nc-book-max-w), calc(100vw - 240px), calc((100vh - 210px) * var(--nc-book-ratio)));
  --nc-tab-strip-w:42px;
  --nc-tab-visible-w:34px;
  --nc-stack-depth-w:46px;
  --nc-paper-mask-w:22px;
}

/* Same stage model in both contexts. */
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 - 156px)!important;
  padding:22px 0 112px!important;
}
body.nc-editor-page .nc-canvas{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  padding:62px 0 68px!important;
  background:radial-gradient(circle at 50% 45%,rgba(70,40,18,.54),#050302 74%)!important;
}

/* The book uses the exact same size calculation in live and editor. */
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: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:60!important;
  width:100%!important;
  height:100%!important;
  transform:none!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:70!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:90!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:96!important;}
body:not(.nc-editor-page) .spine,
body.nc-editor-page .nc-canvas .spine{z-index:120!important;}

/* Page thickness behind the visible sheets, not beside/over them. */
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:1.95%!important;
  bottom:1.95%!important;
  width:var(--nc-stack-depth-w)!important;
  z-index:12!important;
  opacity:1!important;
  pointer-events:none!important;
  border-radius:12px!important;
  background:
    linear-gradient(90deg,rgba(68,44,14,.46),rgba(255,247,210,.35) 20%,rgba(236,206,129,.62) 54%,rgba(130,92,30,.38) 84%,rgba(42,27,9,.31)),
    repeating-linear-gradient(90deg,#5f4218 0 1px,#9f752c 1px 2px,#dfc276 2px 4px,#fff0b6 4px 6px,#9a7028 6px 7px)!important;
  box-shadow:inset 8px 0 8px rgba(255,250,224,.42), inset -12px 0 14px rgba(43,27,9,.47), 0 18px 26px rgba(0,0,0,.44)!important;
}
body:not(.nc-editor-page) .stack-left,
body.nc-editor-page .nc-canvas .stack-left{left:calc(-1 * var(--nc-stack-depth-w) + 11px)!important;}
body:not(.nc-editor-page) .stack-right,
body.nc-editor-page .nc-canvas .stack-right{right:calc(-1 * var(--nc-stack-depth-w) + 11px)!important;}

/* Reference-style physical index tabs.
   The tabs are underneath the open page edge; only the outer lip remains visible. */
body:not(.nc-editor-page) .tabs,
body.nc-editor-page .nc-canvas .tabs{
  position:absolute!important;
  top:5.2%!important;
  bottom:5.2%!important;
  width:var(--nc-tab-strip-w)!important;
  padding:4px 0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  z-index:32!important;
  pointer-events:auto!important;
  filter:drop-shadow(0 9px 9px rgba(0,0,0,.32))!important;
  transform:none!important;
}
body:not(.nc-editor-page) .tabs.left,
body.nc-editor-page .nc-canvas .tabs.left{left:calc(-1 * var(--nc-tab-visible-w))!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(-1 * var(--nc-tab-visible-w))!important;left:auto!important;align-items:flex-start!important;}

/* Vertical paper spine behind the tab lips. */
body:not(.nc-editor-page) .tabs::before,
body.nc-editor-page .nc-canvas .tabs::before{
  content:""!important;
  position:absolute!important;
  top:-1.8%!important;
  bottom:-1.8%!important;
  width:18px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,249,218,.78),rgba(204,171,91,.62),rgba(75,50,19,.34)),repeating-linear-gradient(0deg,rgba(93,68,29,.17) 0 1px,rgba(255,255,255,.18) 1px 5px)!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.24)!important;
}
body:not(.nc-editor-page) .tabs.left::before,
body.nc-editor-page .nc-canvas .tabs.left::before{right:0!important;border-radius:0 9px 9px 0!important;}
body:not(.nc-editor-page) .tabs.right::before,
body.nc-editor-page .nc-canvas .tabs.right::before{left:0!important;border-radius:9px 0 0 9px!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:38px!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0 2px!important;
  border:1px solid rgba(112,84,42,.60)!important;
  color:#20170b!important;
  background:linear-gradient(90deg,#fff9e7 0%,#efe1b7 35%,#caa869 68%,#876126 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 5px)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:9.2px!important;
  line-height:1!important;
  letter-spacing:.02em!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,.65)!important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.72), inset -7px 0 10px rgba(81,55,22,.24), 0 2px 4px rgba(0,0,0,.22)!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:8px 2px 2px 8px!important;}
body:not(.nc-editor-page) .tabs.right .tab,
body.nc-editor-page .nc-canvas .tabs.right .tab{border-radius:2px 8px 8px 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,.55),transparent 46%,rgba(79,55,25,.20))!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:6px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(67,46,18,.28))!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,#ffe983 0%,#e2b41e 58%,#9c6b0e 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,transparent 1px 5px)!important;
  border-color:rgba(105,70,9,.75)!important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.65), inset -7px 0 10px rgba(90,56,7,.25), 0 3px 7px rgba(0,0,0,.30)!important;
}

/* Open pages cover the tab roots. This makes the tabs look inserted into the page stack. */
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(-1 * var(--nc-paper-mask-w) * .42) 0 0 rgba(246,229,169,.94), calc(-1 * var(--nc-paper-mask-w)) 0 0 rgba(151,112,49,.48), 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-mask-w) * .42) 0 0 rgba(246,229,169,.94), var(--nc-paper-mask-w) 0 0 rgba(151,112,49,.48), inset 0 0 42px rgba(90,55,17,.18)!important;
}

/* Editor chrome must not resize the book. Selection outline is visual-only. */
body.nc-editor-page .nc-canvas .page.is-active-page::after{
  inset:12px!important;
  z-index:150!important;
  pointer-events:none!important;
  border:2px solid rgba(64,169,255,.62)!important;
  box-shadow:0 0 0 2px rgba(64,169,255,.08)!important;
}
body.nc-editor-page .nc-editor-topline,
body.nc-editor-page .nc-save-status{z-index:1000!important;}

@media(max-width:1120px){
  :root{--nc-book-w:min(1040px, calc(100vw - 170px), calc((100vh - 190px) * var(--nc-book-ratio)));--nc-tab-strip-w:38px;--nc-tab-visible-w:31px;--nc-stack-depth-w:42px;}
  body:not(.nc-editor-page) .tab,body.nc-editor-page .nc-canvas .tab{width:34px!important;font-size:8.4px!important;}
}