/* WCoNA excerpt reader — flipbook lightbox */
.wcona-reader{
  --g:#11372B; --y:#FAC446; --ink:#26282C; --cream:#F5F1E7;
  position:fixed; inset:0; z-index:100000; display:none;
  background:rgba(14,22,19,.94);
  backdrop-filter:blur(3px);
  flex-direction:column;
}
.wcona-reader.is-open{display:flex;}
html.wcona-reader-lock,html.wcona-reader-lock body{overflow:hidden;}

.wcona-reader__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem; color:var(--cream);
  border-bottom:1px solid rgba(245,241,231,.16);
  font-family:'Eczar',Georgia,serif;
}
.wcona-reader__title{
  flex:1 1 auto; min-width:0; font-size:1rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0;
}
.wcona-reader__count{flex:0 0 auto; font-size:.85rem; opacity:.75; font-variant-numeric:tabular-nums;}

/* Scoped and fully declared, so the theme's reset.css — which paints every <button> with
   border:1px solid #cc3366 — cannot bleed a pink border or glyph through. */
.wcona-reader .wcona-reader__btn{
  flex:0 0 auto; -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:.85rem; line-height:1;
  padding:.4rem .8rem; margin:0;
  background-color:transparent; background-image:none;
  color:var(--cream);
  border:1px solid rgba(245,241,231,.35); border-radius:2px;
  box-shadow:none; text-shadow:none; text-decoration:none;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wcona-reader .wcona-reader__btn:hover{
  background-color:var(--y); color:var(--ink); border-color:var(--y);
}
/* focus-visible only: the close button is focused programmatically when the reader opens,
   and a ring on every open would read as an error state */
.wcona-reader .wcona-reader__btn:focus{ outline:none; }
.wcona-reader .wcona-reader__btn:focus-visible{
  background-color:var(--y); color:var(--ink); border-color:var(--y);
  outline:2px solid var(--cream); outline-offset:2px;
}

/* the close control: a round icon button, not a text button */
.wcona-reader .wcona-reader__btn--icon{
  width:34px; height:34px; padding:0; border-radius:50%;
  font-size:15px; letter-spacing:0;
}
.wcona-reader .wcona-reader__btn--icon:hover{ transform:rotate(90deg); }
.wcona-reader .wcona-reader__btn--icon{ transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .2s ease; }

.wcona-reader__stage{
  flex:1 1 auto; position:relative; display:flex; align-items:center;
  justify-content:center; padding:1rem; min-height:0;
}
.wcona-reader__book{margin:0 auto;}
/* page-flip's canvas renderer owns one surface inside the book element */
.wcona-reader__book canvas{display:block;max-width:100%;}
.wcona-reader__book .stf__parent{margin:0 auto;}
.wcona-reader__book .stf__wrapper{margin:0 auto;}

.wcona-page__spinner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--cream);color:#8a8577;font-family:'Eczar',Georgia,serif;font-size:.8rem;
}

.wcona-reader .wcona-reader__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  -webkit-appearance:none; appearance:none;
  border:0; border-radius:2px; cursor:pointer; margin:0; padding:0;
  width:46px; height:64px;
  background-color:rgba(17,55,43,.78); background-image:none;
  color:var(--cream); box-shadow:none; text-shadow:none;
  font:inherit; font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .15s ease, color .15s ease;
}
.wcona-reader .wcona-reader__nav:focus{ outline:none; }
.wcona-reader .wcona-reader__nav:focus-visible{
  outline:2px solid var(--cream); outline-offset:2px;
}
.wcona-reader .wcona-reader__nav:hover:not(:disabled){background-color:var(--y);color:var(--ink);}
.wcona-reader__nav:disabled{opacity:.25;cursor:default;}
.wcona-reader__nav[hidden]{display:none;}
.wcona-reader__nav--prev{left:.25rem;}
.wcona-reader__nav--next{right:.25rem;}

.wcona-reader__status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-family:'Eczar',Georgia,serif; font-size:.95rem; text-align:center;
  padding:2rem; pointer-events:none;
}
.wcona-reader__status[hidden]{display:none;}
.wcona-reader__status a{color:var(--y);pointer-events:auto;}

.wcona-reader__hint{
  flex:0 0 auto; text-align:center; color:rgba(245,241,231,.6);
  font-family:'Eczar',Georgia,serif; font-size:.75rem; padding:0 1rem .75rem;
}

/* ---- phone reader: one sharp page, full width, zoomable (reader.js mountSingle) ---- */
.wcona-reader__tools{
  display:none; flex:0 0 auto; align-items:center; justify-content:center; gap:.6rem;
  padding:.5rem .7rem .3rem; color:var(--cream); font-family:'Eczar',Georgia,serif;
}
.wcona-reader.is-single .wcona-reader__tools{display:flex;}
.wcona-reader.is-single .wcona-reader__nav{display:none;}
.wcona-reader.is-single .wcona-reader__stage{padding:4px;}
.wcona-reader.is-single .wcona-reader__book{
  position:relative; flex:1 1 auto; align-self:stretch; min-width:0; min-height:0; margin:0;
}
.wcona-reader__scroll{
  position:absolute; inset:0; overflow:auto; display:flex;
  touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
/* margin:auto centres the page when it fits and still lets it scroll from the top-left when
   zoomed. max-width is forced because the theme sets img{max-width:100%}. */
.wcona-reader .wcona-reader__pageimg{
  display:block; flex:0 0 auto; margin:auto; max-width:none !important; height:auto;
  background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.4); border-radius:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.wcona-reader .wcona-reader__tools .wcona-reader__btn{
  min-width:46px; height:42px; font-size:1.25rem; padding:0 .6rem;
}
.wcona-reader .wcona-reader__btn:disabled{opacity:.3; cursor:default;}
.wcona-reader__tcount{
  min-width:5.5em; text-align:center; font-size:.85rem; opacity:.85;
  font-variant-numeric:tabular-nums;
}
/* a tapped button must not stay yellow on touch screens, where :hover sticks */
@media (hover:none){
  .wcona-reader .wcona-reader__tools .wcona-reader__btn:hover{
    background-color:transparent; color:var(--cream); border-color:rgba(245,241,231,.35);
  }
}

@media (max-width:768px){
  .wcona-reader__bar{gap:.5rem;padding:.6rem .7rem;}
  .wcona-reader__title{font-size:.85rem;}
  .wcona-reader__count{display:none;}
  .wcona-reader__stage{padding:.5rem;}
  .wcona-reader__nav{width:38px;height:52px;font-size:1.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .wcona-reader{backdrop-filter:none;}
  .wcona-reader .wcona-reader__btn,
  .wcona-reader .wcona-reader__btn--icon,
  .wcona-reader .wcona-reader__nav{transition:none;}
  .wcona-reader .wcona-reader__btn--icon:hover{transform:none;}
}