/* The printed pages, framed as paper on the dark surround. Do not change .book's
   max-width or .page's container-type without reading the note below: every .tx
   font-size is in cqw and every position is a %, so both resolve against .page's
   inline size. Changing the container rescales the whole printed design. */
.book{max-width:560px;margin:0 auto}
.page{position:relative;container-type:inline-size;margin:0 0 10px;overflow:hidden;
  background:#fff;border-radius:8px;box-shadow:0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.3)}
.page img{width:100%;height:auto;display:block;user-select:none;-webkit-user-select:none}

/* Placeholder while a lazily-loaded scan is still in flight. The img carries its
   intrinsic width/height (see partials/overlay.php), so the box is already the right
   size and this only fills it — nothing below moves when the JPG lands. */
.page{background-image:linear-gradient(100deg,#f1f1ef 30%,#e2e6e5 50%,#f1f1ef 70%);
  background-size:200% 100%;animation:pp-shimmer 1.4s linear infinite}
.page.is-loaded{background-image:none;animation:none}
@keyframes pp-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}

/* Zoom affordance — public only; in admin the cursor belongs to the editor modes. */
.book[data-admin="0"] .page{cursor:zoom-in}
.tx{position:absolute;white-space:nowrap;line-height:1.18;outline:none;font-family:'Cera Compact Pro','Cera Pro','Roboto Condensed',MenuStd,'Arial Narrow',Arial,sans-serif}
.bgl{display:none}
body.bg .el{display:none}
body.bg .bgl{display:block}
.tx[contenteditable="true"]{cursor:text}
.tx[contenteditable="true"]:hover{background:rgba(245,158,11,.18);border-radius:2px}
.tx[contenteditable="true"]:focus{background:rgba(245,158,11,.32);border-radius:2px}
.tx.saving{opacity:.5}
.tx.saved{background:rgba(34,197,94,.4)!important;border-radius:2px}
.tx.save-err{background:rgba(239,68,68,.45)!important;border-radius:2px}

/* drag-to-align admin mode */
body.align-mode .tx{cursor:move;outline:1px dashed rgba(120,40,90,.55)}
body.align-mode .tx:hover{outline:2px solid #b91c6b;background:rgba(245,158,11,.15)}
body.align-mode .page{cursor:crosshair}
body.add-mode .tx{cursor:crosshair;pointer-events:none}
body.add-mode .page{cursor:copy;outline:2px dashed rgba(185,28,107,.45);outline-offset:-3px}
.tx.dragging{outline:2px solid #16a34a!important}
.tx.selected{outline:2px solid #16a34a!important;background:rgba(34,197,94,.14)!important;border-radius:2px}
.sel-box{position:fixed;z-index:50;border:1px dashed #16a34a;background:rgba(34,197,94,.08);pointer-events:none}

/* ---------------- editor toolbar (admin) ---------------- */
.ed-bar{position:fixed;z-index:60;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 20px);
  padding:7px 9px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(11,42,58,.93);backdrop-filter:blur(10px);color:#f7f1e4;
  box-shadow:0 10px 34px rgba(0,0,0,.36);font:500 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  user-select:none;-webkit-user-select:none}
.ed-sep{width:1px;align-self:stretch;background:rgba(255,255,255,.14);margin:2px 0}

.ed-seg{display:flex;gap:2px;padding:2px;border-radius:10px;background:rgba(255,255,255,.07)}
.ed-mode{display:flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:rgba(247,241,228,.62);font:inherit;font-weight:600;transition:background .15s,color .15s}
.ed-mode:hover{background:rgba(255,255,255,.09);color:#f7f1e4}
.ed-mode.is-on{background:#e0b872;color:#0b2a3a;box-shadow:0 1px 6px rgba(224,184,114,.35)}
.ed-mode svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ed-mode kbd{padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.22);font:600 9px/1.4 inherit;opacity:.75}
.ed-mode.is-on kbd{background:rgba(11,42,58,.16)}

.ed-ctx{display:flex;align-items:center;gap:8px;transition:opacity .15s}
.ed-ctx[data-empty="1"]{opacity:.4;pointer-events:none}
.ed-count{white-space:nowrap;font-variant-numeric:tabular-nums;color:rgba(247,241,228,.8)}
.ed-group{display:flex;gap:2px}
.ed-btn{display:flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);
  border-radius:8px;background:rgba(255,255,255,.06);color:#f7f1e4;font:inherit;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s}
.ed-btn:hover{background:rgba(255,255,255,.15)}
.ed-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-sub{font-size:9px;opacity:.85}
.ed-danger:hover{background:rgba(239,68,68,.9);border-color:rgba(239,68,68,.9)}

.ed-hint{max-width:32ch;color:rgba(247,241,228,.5);font-size:11px;line-height:1.35}
.ed-status{min-width:0;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#86efac;font-size:11px;opacity:0;transition:opacity .2s}
.ed-status.is-on{opacity:1}
.ed-status.is-err{color:#fca5a5}

@media (max-width:640px){
  .ed-bar{left:8px;right:8px;bottom:8px;transform:none;gap:7px;justify-content:center;flex-wrap:wrap}
  .ed-hide-sm{display:none}
  .ed-mode span{display:none}
  .ed-mode kbd{display:none}
}
@media print{.ed-bar{display:none}}

/* ---------------- zoom viewer (public only) ----------------
   Holds a clone of a whole .page (scan + positioned overlay). Because .zoom-stage
   is width-driven and the clone keeps container-type:inline-size, every .tx scales
   with it automatically — cqw does the work, no transform needed, so text stays
   crisp instead of being a magnified bitmap. app.js re-runs fitText() on the clone
   after each width change to restore the designed sizes. */
.zoom{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  background:rgba(3,24,24,.97);backdrop-filter:blur(6px)}
.zoom[hidden]{display:none}
.zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex:0 0 auto;padding:10px 12px;border-bottom:1px solid rgba(251,246,236,.12);
  color:#fbf6ec;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif}
.zoom-label{min-width:9ch;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:.75;text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  font-variant-numeric:tabular-nums}
.zoom-actions{display:flex;align-items:center;gap:6px}
.zoom-level{min-width:4ch;text-align:center;font-variant-numeric:tabular-nums;opacity:.75}
/* 44px targets: these are the only controls in the viewer */
.zoom-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(251,246,236,.18);
  border-radius:999px;background:rgba(251,246,236,.06);color:#fbf6ec;cursor:pointer;
  transition:background .15s,border-color .15s}
.zoom-btn:hover{background:rgba(251,246,236,.16)}
.zoom-btn:focus-visible{outline:2px solid #e0a64b;outline-offset:2px}
.zoom-btn:disabled{opacity:.35;cursor:default}
.zoom-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zoom-close{border-color:rgba(251,246,236,.3)}

.zoom-scroll{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:14px;touch-action:pan-x pan-y pinch-zoom}
.zoom-stage{margin:0 auto}
.zoom-stage .page{margin:0;cursor:default;box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
/* the clone is inert: no editing affordances follow it into the viewer */
.zoom-stage .tx{cursor:default!important;outline:none!important;background:none!important}

body.zoom-open{overflow:hidden}
@media (max-width:640px){
  .zoom-scroll{padding:8px}
  .zoom-bar{gap:6px;padding:8px}
  .zoom-btn{width:42px;height:42px}
  .zoom-label{min-width:0;letter-spacing:.08em;font-size:10px}
  .zoom-level{display:none}   /* the +/- buttons already say what they do */
}