/* Grace Chapel flipbook viewer */
:root {
  --fb-bg: #2b2d31;
  --fb-bar: #1e1f22;
  --fb-fg: #f2f2f2;
  --fb-muted: #a9abb0;
  --fb-accent: #ffffff;
  --fb-page: #ffffff;
  --fb-bar-h: 52px;
}
:root[data-theme="light"] {
  --fb-bg: #e9e8e4;
  --fb-bar: #ffffff;
  --fb-fg: #1d1d1f;
  --fb-muted: #6b6b70;
  --fb-accent: #1d1d1f;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--fb-bg);
  color: var(--fb-fg);
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.fb { display: flex; flex-direction: column; height: 100%; height: 100dvh; }

/* ---------- Toolbar ---------- */
.fb-bar {
  flex: 0 0 var(--fb-bar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--fb-bar);
  border-bottom: 1px solid rgba(127,127,127,.18);
  z-index: 20;
}
.fb-title {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 4px; min-width: 0;
}
.fb-nav { display: flex; align-items: center; gap: 2px; }
.fb-tools { display: flex; justify-content: flex-end; gap: 2px; }
.fb-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--fb-fg);
  cursor: pointer; text-decoration: none;
}
.fb-btn:hover { background: rgba(127,127,127,.18); }
.fb-btn:focus-visible { outline: 2px solid var(--fb-accent); outline-offset: -2px; }
.fb-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.fb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb-btn .ic-exit { display: none; }
.is-fullscreen .fb-btn .ic-enter { display: none; }
.is-fullscreen .fb-btn .ic-exit { display: block; }
.zoom-only { display: none; }
.is-zoomed .zoom-only { display: inline-grid; }
.fb-btn[hidden] { display: none !important; }

.fb-count { display: flex; align-items: center; gap: 4px; color: var(--fb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-count input {
  width: 4.2em; height: 30px; text-align: center;
  border: 1px solid rgba(127,127,127,.35); border-radius: 6px;
  background: transparent; color: var(--fb-fg); font: inherit;
}
.fb-count input:focus { outline: 2px solid var(--fb-accent); outline-offset: -1px; }

@media (max-width: 560px) {
  .fb-bar { grid-template-columns: auto 1fr; padding: 0 4px; }
  .fb-title { display: none; }
  .fb-nav { justify-self: start; }
  .fb-btn { width: 36px; }
}

/* ---------- Stage & book ---------- */
.fb-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fb-book {
  position: absolute; left: 50%; top: 50%;
  perspective: 2600px;
  transition: transform .45s cubic-bezier(.3,.1,.3,1);
}
.fb-book.no-anim { transition: none; }

.fb-page, .fb-face {
  position: absolute; top: 0; height: 100%;
  background: var(--fb-page);
  overflow: hidden;
}
.fb-page.left  { left: 0; }
.fb-page.right { right: 0; }
.fb-page.empty, .fb-face.empty { background: transparent; box-shadow: none !important; }
.fb-page.empty::after, .fb-face.empty::after { display: none; }
.fb-page img, .fb-face img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.fb-book.spread .fb-page { box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.fb-book.single .fb-page { box-shadow: 0 6px 24px rgba(0,0,0,.35); }

/* Spine shading */
.fb-book.spread .left::after, .fb-book.spread .face-back::after,
.fb-book.spread .right::after, .fb-book.spread .face-front::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8%; pointer-events: none; z-index: 2;
}
.fb-book.spread .left::after, .fb-book.spread .face-back::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.18), rgba(0,0,0,0)); }
.fb-book.spread .right::after, .fb-book.spread .face-front::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)); }

/* Turning leaf */
.fb-leaf {
  position: absolute; top: 0; height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  z-index: 5; pointer-events: none;
}
.fb-face { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-face.face-back { transform: rotateY(180deg); }
.fb-leaf .fb-face:not(.empty) { box-shadow: 0 0 20px rgba(0,0,0,.25); }
.fb-face .fb-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 3; }

/* Loading placeholder on a page */
.fb-page.loading::before, .fb-face.loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px;
  border: 3px solid rgba(0,0,0,.12); border-top-color: rgba(0,0,0,.45); border-radius: 50%;
  animation: fb-spin .8s linear infinite;
}

/* Clickable PDF links */
.fb-links { position: absolute; inset: 0; z-index: 4; }
.fb-links a { position: absolute; display: block; border-radius: 2px; }
.fb-links a:hover { background: rgba(40,110,255,.14); }

/* Side arrows */
.fb-edge {
  position: absolute; top: 50%; width: 44px; height: 88px; margin-top: -44px;
  border: 0; border-radius: 8px; background: rgba(0,0,0,.0); cursor: pointer; z-index: 6;
  color: var(--fb-fg); opacity: .55;
}
.fb-edge::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  border: solid currentColor; border-width: 0 2.5px 2.5px 0;
}
.fb-edge-prev { left: 6px; }
.fb-edge-next { right: 6px; }
.fb-edge-prev::before { transform: translate(-30%, -50%) rotate(135deg); }
.fb-edge-next::before { transform: translate(-70%, -50%) rotate(-45deg); }
.fb-edge:hover { opacity: 1; background: rgba(127,127,127,.15); }
.fb-edge[disabled] { display: none; }
@media (hover: none), (max-width: 560px) { .fb-edge { display: none; } }

/* ---------- Zoom ---------- */
.fb-zoom {
  position: absolute; inset: 0; z-index: 10;
  overflow: auto; background: var(--fb-bg);
  touch-action: none; cursor: grab;
}
.fb-zoom.dragging { cursor: grabbing; }
.fb-zoom[hidden] { display: none; }
.fb-zoom-content { position: relative; display: flex; margin: 0 auto; }
.fb-zoom-content .zp { position: relative; flex: 0 0 auto; background: var(--fb-page); }
.fb-zoom-content .zp img { width: 100%; height: 100%; display: block; pointer-events: none; }
.fb-zoom-content .zp.loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px;
  border: 3px solid rgba(0,0,0,.12); border-top-color: rgba(0,0,0,.45); border-radius: 50%;
  animation: fb-spin .8s linear infinite;
}

/* ---------- Status ---------- */
.fb-status {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--fb-muted); background: var(--fb-bg); text-align: center; padding: 20px;
}
.fb-status[hidden] { display: none; }
.fb-status.error .fb-spinner { display: none; }
.fb-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(127,127,127,.25); border-top-color: var(--fb-fg);
  animation: fb-spin .8s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fb-book { transition: none; }
}

.fb-page img:not([src]), .fb-face img:not([src]) { visibility: hidden; }
.fb-page img, .fb-face img, .fb-zoom-content .zp img { object-fit: contain; }
.fb-page:not(.empty) { cursor: pointer; }