/* Kasey's Binder Studio — page navigation structural fix v1.3.0.
   Desktop keeps the vertical rail. Phone layouts use a compact horizontal pager
   so the binder title and guidance get the full card width. */

.binder-heading-module,
.canvas-side-controls>.binder-heading-module{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 58px!important;
  grid-template-rows:auto!important;
  align-items:start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.binder-heading-module .canvashead{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  overflow:visible!important;
  text-align:left!important;
}
.binder-heading-module .canvashead>div,
.binder-heading-module .canvashead h2,
.binder-heading-module .canvashead .status{
  min-width:0!important;
  max-width:100%!important;
}
.binder-heading-module .canvashead h2,
.binder-heading-module .canvashead .status{
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  text-overflow:clip!important;
}

/* Desktop/tablet vertical rail. */
.binder-heading-module .editor-page-nav{
  grid-column:2!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:46px!important;
  grid-template-rows:40px minmax(126px,1fr) 40px!important;
  align-items:start!important;
  justify-items:center!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  min-height:220px!important;
  max-height:360px!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  transform:none!important;
}
.binder-heading-module .page-arrow{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  font-size:18px!important;
  line-height:1!important;
  transform:none!important;
  box-shadow:none!important;
}
.binder-heading-module .page-numbers{
  display:flex!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:100%!important;
  min-height:126px!important;
  max-height:268px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:1px 3px!important;
  margin:0!important;
  scrollbar-width:none!important;
  overscroll-behavior-y:contain!important;
}
.binder-heading-module .page-numbers::-webkit-scrollbar{display:none!important}
.binder-heading-module .page-number{
  flex:0 0 38px!important;
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0!important;
  margin:0!important;
  border-radius:12px!important;
  font-size:12px!important;
  line-height:1!important;
  transform:none!important;
  box-shadow:none!important;
}
.binder-heading-module .page-number.active,
.binder-heading-module .page-number[aria-current="page"]{
  background:color-mix(in srgb,var(--accent) 18%,var(--surface2))!important;
  border-color:var(--accent)!important;
  transform:none!important;
  box-shadow:none!important;
}

/* Phone: full-width heading followed by a compact Previous / Page / Next row. */
@media(max-width:760px){
  .canvas-side-controls{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    text-align:left!important;
  }
  .canvas-side-controls>.binder-heading-module{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:12px!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .binder-heading-module .canvashead{
    grid-column:1!important;
    grid-row:1!important;
    display:flex!important;
    width:100%!important;
    padding:0!important;
    overflow:visible!important;
  }
  .binder-heading-module .canvashead>div{width:100%!important;min-width:0!important}
  .binder-heading-module .canvashead .eyebrow{
    display:block!important;
    margin:0 0 4px!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.01em!important;
  }
  .binder-heading-module .canvashead h2{
    display:block!important;
    margin:0 0 7px!important;
    padding:0!important;
    font-size:17px!important;
    line-height:1.24!important;
    font-weight:750!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:break-word!important;
  }
  .binder-heading-module .canvashead .status{
    display:block!important;
    margin:0!important;
    padding:0!important;
    max-width:34rem!important;
    font-size:12px!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  .binder-heading-module .editor-page-nav{
    grid-column:1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    grid-template-rows:44px!important;
    align-items:center!important;
    justify-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    max-height:44px!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .binder-heading-module .page-arrow{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    border-radius:12px!important;
    font-size:20px!important;
  }
  .binder-heading-module .page-numbers{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    overflow:hidden!important;
    padding:0!important;
    gap:0!important;
  }
  .binder-heading-module .page-number{
    display:none!important;
  }
  .binder-heading-module .page-number.active,
  .binder-heading-module .page-number[aria-current="page"]{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    font-size:0!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  .binder-heading-module .page-number.active::before,
  .binder-heading-module .page-number[aria-current="page"]::before{
    content:"Page " attr(data-page-label)!important;
    font-size:13px!important;
    line-height:1!important;
  }
}

/* Existing page buttons do not currently carry data-page-label. Fall back to
   showing their numeric text when the attribute is absent. */
@media(max-width:760px){
  .binder-heading-module .page-number.active:not([data-page-label]),
  .binder-heading-module .page-number[aria-current="page"]:not([data-page-label]){
    font-size:13px!important;
  }
  .binder-heading-module .page-number.active:not([data-page-label])::before,
  .binder-heading-module .page-number[aria-current="page"]:not([data-page-label])::before{
    content:"Page"!important;
    margin-right:5px!important;
    font-size:13px!important;
  }
}

/* Forced Mobile Preview mirrors real phone geometry. */
body.mobile-lab-enabled .canvas .canvas-side-controls{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  text-align:left!important;
}
body.mobile-lab-enabled .canvas .canvas-side-controls>.binder-heading-module{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  width:100%!important;
  min-width:0!important;
  padding:12px!important;
  gap:10px!important;
  overflow:visible!important;
}
body.mobile-lab-enabled .canvas .binder-heading-module .canvashead{
  grid-column:1!important;
  grid-row:1!important;
  display:flex!important;
  width:100%!important;
  padding:0!important;
  overflow:visible!important;
  text-align:left!important;
}
body.mobile-lab-enabled .canvas .binder-heading-module .editor-page-nav{
  grid-column:1!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  grid-template-rows:44px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  max-height:44px!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body.mobile-lab-enabled .canvas .binder-heading-module .page-numbers{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  max-height:44px!important;
  overflow:hidden!important;
  padding:0!important;
}
body.mobile-lab-enabled .canvas .binder-heading-module .page-arrow{
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}
body.mobile-lab-enabled .canvas .binder-heading-module .page-number{display:none!important}
body.mobile-lab-enabled .canvas .binder-heading-module .page-number.active,
body.mobile-lab-enabled .canvas .binder-heading-module .page-number[aria-current="page"]{
  display:flex!important;
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 14px!important;
  font-size:13px!important;
}
body.mobile-lab-enabled .canvas .canvas-side-controls>.library-module,
body.mobile-lab-enabled .canvas .canvas-side-controls>.selected-module,
body.mobile-lab-enabled .canvas .canvas-side-controls>.appearance-module,
body.mobile-lab-enabled .canvas .canvas-side-controls>.mobile-page-actions{
  width:100%!important;
  min-width:0!important;
}