/* ============================================================================
   ALEXPHAN Theme 4.71 — FRONTEND READER LOCK AUTHORITY
   ---------------------------------------------------------------------------
   Purpose: one final Reader authority for presentation surfaces.
   READ and FLIP stay separate; production classes only; no prototype DOM.

   Target behavior:
   - Desktop READ: A 240 | B elastic 650-800 | C 290.
   - B is the authority region and may use 100% of its grid cell.
   - While A/C are visible, B never gets squeezed below 650.
   - When width is insufficient: hide A first, then hide C.
   - Mobile/phone: READ only surface, B = 100% down to ~300.
   - READ arrows live in bottom navigation only. No floating/side READ arrows.
   - FLIP arrows are separate and remain stage-owned.
   ============================================================================ */

.ap-reader-page{
  --ap-read-a:240px;
  --ap-read-b-min:650px;
  --ap-read-b-max:800px;
  --ap-read-c:290px;
  --ap-read-gap:12px;
  --ap-read-shell-max:calc(var(--ap-read-a) + var(--ap-read-b-max) + var(--ap-read-c) + (var(--ap-read-gap) * 2));
  --ap-read-red-hi:#ff7b7b;
  --ap-read-red:#ef4444;
  --ap-read-red-deep:#dc2626;
  --ap-read-red-edge:#991b1b;
  --ap-read-red-ink:#ffffff;
}

/* Retire older READ side/top arrow pattern. Bottom nav remains the only READ nav. */
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-top,
.ap-reader-page .ap-reader-read-view .ap-reader-page-arrow:not(.ap-reader-sticky-nav-bottom .ap-reader-page-arrow){
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Main reader viewport: no 1500/1800/old card stage. */
.ap-reader-shell[data-reader-view="read"]{
  width:min(100%, var(--ap-read-shell-max))!important;
  max-width:var(--ap-read-shell-max)!important;
  margin-inline:auto!important;
  padding:8px 0 42px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.ap-reader-read-view{
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* 1A DESKTOP READ: fixed A/C, elastic B. */
.ap-reader-read-layout{
  display:grid!important;
  width:100%!important;
  max-width:var(--ap-read-shell-max)!important;
  margin:0 auto!important;
  padding:0!important;
  gap:var(--ap-read-gap)!important;
  grid-template-columns:var(--ap-read-a) minmax(var(--ap-read-b-min), var(--ap-read-b-max)) var(--ap-read-c)!important;
  justify-content:center!important;
  align-items:start!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.ap-reader-library{
  grid-column:1!important;
  width:var(--ap-read-a)!important;
  max-width:var(--ap-read-a)!important;
  min-width:0!important;
  justify-self:stretch!important;
}
.ap-reader-main-column{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  max-width:var(--ap-read-b-max)!important;
  justify-self:stretch!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
.ap-reader-sidebar{
  grid-column:3!important;
  width:var(--ap-read-c)!important;
  max-width:var(--ap-read-c)!important;
  min-width:0!important;
  justify-self:stretch!important;
}
.ap-reader-widget-rail{
  display:none!important;
}

/* Unlock the inner B chain. Any old 480/640/690 wrapper must yield to B. */
.ap-reader-main-column .ap-reader-paper-wrap,
.ap-reader-main-column .book-main-frame,
.ap-reader-main-column .book-center-stage,
.ap-reader-main-column .ap-reader-card.ap-reader-card-compact,
.ap-reader-main-column .ap-reader-content,
.ap-reader-main-column .ap-story-canvas.ap-t1-family,
.ap-reader-main-column .ap-story-canvas.ap-six-layout{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
.ap-reader-main-column .ap-reader-paper-wrap,
.ap-reader-main-column .book-main-frame,
.ap-reader-main-column .book-center-stage{
  margin-inline:0!important;
  overflow:visible!important;
}
.ap-reader-main-column .ap-reader-card.ap-reader-card-compact{
  margin:0!important;
  overflow:visible!important;
}
.ap-reader-main-column .ap-reader-content{
  overflow:visible!important;
}

/* Keep the physical 12:17 page relationship without freezing to 480px. */
.ap-reader-page .ap-reader-read-view .ap-story-canvas.ap-t1-family.ap-layout-template-01,
.ap-reader-page .ap-reader-read-view .ap-story-canvas.ap-six-layout.ap-t1-family{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:12/17!important;
  overflow:hidden!important;
}

/* Bottom READ navigation: premium red 3D, in normal flow under B. */
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom{
  position:sticky!important;
  bottom:0!important;
  z-index:38!important;
  width:100%!important;
  max-width:var(--ap-read-b-max)!important;
  margin:10px 0 0!important;
  padding:6px 10px!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  border:1px solid #dbe3ef!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(10px)!important;
  box-shadow:0 10px 26px rgba(30,41,59,.14)!important;
  box-sizing:border-box!important;
}

.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom::before{
  content:none!important;
  display:none!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-bottom-status{
  grid-column:2!important;
  justify-self:center!important;
  align-self:center!important;
  min-width:104px!important;
  max-width:100%!important;
  padding:5px 10px!important;
  border:1px solid #dbeafe!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffffff,#eef6ff)!important;
  color:#1d4ed8!important;
  font:900 11px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.02em!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
  pointer-events:none!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow{
  position:relative!important;
  inset:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:74px!important;
  height:36px!important;
  padding:0 13px!important;
  border-radius:10px!important;
  border:1px solid var(--ap-read-red-edge)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 34%),
    linear-gradient(180deg,var(--ap-read-red-hi) 0%,var(--ap-read-red) 44%,var(--ap-read-red-deep) 100%)!important;
  color:var(--ap-read-red-ink)!important;
  font:900 11px/1 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  text-decoration:none!important;
  text-shadow:0 1px 0 rgba(127,29,29,.55)!important;
  box-shadow:0 4px 0 var(--ap-read-red-edge),0 8px 16px rgba(220,38,38,.28)!important;
  transform:none!important;
  transition:transform .10s ease,box-shadow .10s ease,filter .12s ease!important;
  opacity:1!important;
  box-sizing:border-box!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-prev{
  grid-column:1!important;
  justify-self:start!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-next{
  grid-column:3!important;
  justify-self:end!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-prev span::before{content:"◀ PREV";}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-next span::before{content:"NEXT ▶";}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow span{
  font-size:0!important;
  line-height:0!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow span::before{
  font-size:11px!important;
  line-height:1!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow:hover,
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow:focus-visible{
  filter:brightness(1.06)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 0 var(--ap-read-red-edge),0 10px 18px rgba(220,38,38,.32)!important;
  outline:2px solid rgba(248,113,113,.28)!important;
  outline-offset:2px!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow:active{
  transform:translateY(4px)!important;
  box-shadow:0 0 0 var(--ap-read-red-edge),0 2px 7px rgba(220,38,38,.18)!important;
}
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow.is-disabled,
.ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom span.ap-reader-page-arrow{
  opacity:.36!important;
  filter:grayscale(.28)!important;
  pointer-events:none!important;
}

/* Width priority cutovers: B shrinks first to 650, then A yields, then C yields. */
@media (max-width:1216px){
  .ap-reader-shell[data-reader-view="read"]{
    --ap-read-shell-max:calc(var(--ap-read-b-max) + var(--ap-read-c) + var(--ap-read-gap));
    width:min(100%, var(--ap-read-shell-max))!important;
    max-width:var(--ap-read-shell-max)!important;
    padding-inline:8px!important;
  }
  .ap-reader-read-layout{
    grid-template-columns:minmax(var(--ap-read-b-min), var(--ap-read-b-max)) var(--ap-read-c)!important;
    max-width:var(--ap-read-shell-max)!important;
  }
  .ap-reader-library{display:none!important;}
  .ap-reader-main-column{grid-column:1!important;}
  .ap-reader-sidebar{grid-column:2!important;}
}

@media (max-width:956px){
  .ap-reader-shell[data-reader-view="read"]{
    --ap-read-shell-max:var(--ap-read-b-max);
    width:min(100%, var(--ap-read-shell-max))!important;
    max-width:var(--ap-read-shell-max)!important;
    padding-inline:8px!important;
  }
  .ap-reader-read-layout{
    grid-template-columns:minmax(0,1fr)!important;
    max-width:var(--ap-read-b-max)!important;
    gap:8px!important;
  }
  .ap-reader-library,
  .ap-reader-sidebar,
  .ap-reader-widget-rail{display:none!important;}
  .ap-reader-main-column{grid-column:1!important;max-width:var(--ap-read-b-max)!important;justify-self:stretch!important;}
}

/* Phone/mobile READ-only: B fills the viewport; no min-width lock below 650. */
@media (max-width:650px){
  .ap-reader-shell[data-reader-view="read"]{
    width:100%!important;
    max-width:none!important;
    padding:5px 5px 34px!important;
  }
  .ap-reader-read-layout{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:6px!important;
  }
  .ap-reader-main-column{
    width:100%!important;
    max-width:none!important;
  }
  .ap-reader-main-column .ap-reader-card.ap-reader-card-compact{
    border-radius:8px!important;
  }
  .ap-reader-page .ap-reader-read-view .ap-story-canvas.ap-t1-family.ap-layout-template-01,
  .ap-reader-page .ap-reader-read-view .ap-story-canvas.ap-six-layout.ap-t1-family{
    aspect-ratio:auto!important;
    height:auto!important;
    overflow:visible!important;
  }
  .ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom{
    min-height:38px!important;
    margin-top:7px!important;
    padding:4px 6px!important;
    border-radius:999px!important;
    gap:6px!important;
  }
  .ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-bottom-status{
    min-width:64px!important;
    padding:4px 7px!important;
    font-size:9.5px!important;
  }
  .ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow{
    min-width:42px!important;
    height:31px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    box-shadow:0 3px 0 var(--ap-read-red-edge),0 6px 12px rgba(220,38,38,.22)!important;
  }
  .ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-prev span::before{content:"◀";}
  .ap-reader-page .ap-reader-read-view .ap-reader-sticky-nav-bottom .ap-reader-page-arrow-next span::before{content:"▶";}
}

/* Inline edit remains usable: single centered work surface, not the public A/B/C shell. */
body.ap-edit-mode .ap-reader-read-layout,
body.apse-fe-open .ap-reader-read-layout{
  grid-template-columns:minmax(0,1fr)!important;
  max-width:var(--ap-read-b-max)!important;
}
body.ap-edit-mode .ap-reader-main-column,
body.apse-fe-open .ap-reader-main-column{
  width:100%!important;
  max-width:var(--ap-read-b-max)!important;
}



/* Explicit Reader surfaces. These attributes are set by reader.js and keep future
   READ/FLIP controls from sharing one accidental all-purpose responsive block. */
.ap-reader-shell[data-reader-surface="desktop-read"] .ap-reader-read-view,
.ap-reader-shell[data-reader-surface="tablet-read"] .ap-reader-read-view,
.ap-reader-shell[data-reader-surface="mobile-read"] .ap-reader-read-view{
  display:block!important;
}
.ap-reader-shell[data-reader-surface="desktop-flip"] .ap-reader-flip-view,
.ap-reader-shell[data-reader-surface="tablet-flip"] .ap-reader-flip-view{
  display:block!important;
}
.ap-reader-shell[data-reader-view="flipbook"] .ap-reader-read-view{display:none!important;}
.ap-reader-shell[data-reader-view="read"] .ap-reader-flip-view{display:none!important;}

/* Mobile production is READ-only until a future FLIP CONTROL setting proves
   mobile FLIP safe. JS also enforces this before panels switch. */
@media (max-width:650px){
  .ap-reader-shell[data-mobile-flip-enabled="0"] [data-reader-view-button="flipbook"]{
    display:none!important;
  }
  .ap-reader-shell[data-mobile-flip-enabled="0"] .ap-reader-flip-view{
    display:none!important;
  }
}

/* FLIP stays separate. Do not kill stage arrows there. */
.ap-reader-shell[data-reader-view="flipbook"] .ap-turn-edge{
  display:grid!important;
}

/* ============================================================================
   4.71 VIEWPORT GUARD — 1440 must never become protruding overflow
   ---------------------------------------------------------------------------
   The Reader shell can use up to the approved 1440 stage, but every horizontal
   surface must still stay inside the real viewport with a small safe gutter.
   This protects 1440px browser windows, WordPress admin-bar sessions, browser
   zoom, and Windows scrollbar rounding from creating left/right protrusion.
   ============================================================================ */
.ap-reader-page,
.ap-reader-page *{
  box-sizing:border-box!important;
}
html,
body,
.ap-reader-page{
  max-width:100%!important;
  overflow-x:clip!important;
}
@supports not (overflow-x:clip){
  html,
  body,
  .ap-reader-page{overflow-x:hidden!important;}
}
.ap-reader-page{
  --ap-viewport-gutter:24px;
  --ap-viewport-safe:calc(100vw - var(--ap-viewport-gutter));
}
@supports (width:100dvw){
  .ap-reader-page{--ap-viewport-safe:calc(100dvw - var(--ap-viewport-gutter));}
}
.ap-reader-page .ap-game-header{
  max-width:100%!important;
  overflow-x:clip!important;
}
.ap-reader-page .ap-game-header-inner,
.ap-reader-page .ap-header-top.ap-game-header-inner{
  width:min(var(--ap-max),var(--ap-viewport-safe))!important;
  max-width:var(--ap-viewport-safe)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  min-width:0!important;
}
.ap-reader-page .ap-reader-shell[data-reader-view="read"],
.ap-reader-page .ap-reader-shell[data-reader-view="flipbook"]{
  max-width:min(var(--ap-read-shell-max),var(--ap-viewport-safe))!important;
  width:min(100%,var(--ap-read-shell-max),var(--ap-viewport-safe))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  min-width:0!important;
}
.ap-reader-page .ap-reader-toolbar.ap-reader-toolbar-compact{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
.ap-reader-page .ap-reader-toolbar-primary,
.ap-reader-page .ap-reader-toolbar-actions,
.ap-reader-page .ap-game-brand-zone,
.ap-reader-page .ap-game-user-zone{
  min-width:0!important;
}
.ap-reader-page .ap-reader-toolbar-actions,
.ap-reader-page .ap-game-user-zone{
  flex-shrink:1!important;
}

/* 4.76 compact chapter/page jump controls share the toolbar authority. */
.ap-reader-page .ap-reader-jump-controls{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
}
.ap-reader-page .ap-reader-jump-controls label{
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  height:28px!important;
  padding:0 4px 0 7px!important;
  border:1px solid #cbd5e1!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#64748b!important;
  font:900 8px/1 Inter,system-ui,sans-serif!important;
  box-shadow:0 2px 0 #cbd5e1!important;
}
.ap-reader-page .ap-reader-jump-controls select{
  width:48px!important;
  min-width:0!important;
  height:24px!important;
  padding:0 14px 0 3px!important;
  border:0!important;
  outline:0!important;
  background-color:transparent!important;
  color:#334155!important;
  font:900 10px/1 Inter,system-ui,sans-serif!important;
  cursor:pointer!important;
}
.ap-reader-page .ap-reader-jump-controls [data-reader-page-select]{width:68px!important;}
@media (max-width:900px){
  .ap-reader-page .ap-reader-jump-controls{order:3!important;}
  .ap-reader-page .ap-reader-jump-controls label{padding-left:5px!important;}
  .ap-reader-page .ap-reader-jump-controls select{width:42px!important;}
}
@media (max-width:650px){
  .ap-reader-page .ap-reader-jump-controls{display:none!important;}
}
@media (max-width:650px){
  .ap-reader-page{--ap-viewport-gutter:10px;}
  .ap-reader-page .ap-game-header-inner,
  .ap-reader-page .ap-header-top.ap-game-header-inner{
    width:var(--ap-viewport-safe)!important;
    max-width:var(--ap-viewport-safe)!important;
  }
}