/* ═══════════════════════════════════════════════════════════════
   Bindery Terminal — the engine's stylesheet
   Geometry, motion and controls. Colours and cloth live in the
   theme (styles.css); this file only sets defaults for them.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0c0d0f;
  --ink:#d9dbde;          /* terminal text */
  --ink-dim:#6f747b;
  --screen:#111214;       /* page (screen) surface */
  --canvas:#f2efe7;       /* the cloth */
  --canvas-deep:#dcd7cb;
  --pageedge:#e6e2d8;     /* the fore-edge of the page block */
  --paper:#f6f3ea;        /* the companion leaf */
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;

  /* set by the engine */
  --pw: 640px;            /* one page width  */
  --ph: 360px;            /* one page height */
  --fs: 12px;             /* terminal font size */
  --lh: 18px;             /* terminal line height */
  --pad: 26px;            /* page padding */
  --tL: 6px;              /* thickness of the left stack  */
  --tR: 20px;             /* thickness of the right stack */
  --tx: 0px;              /* book slide (closed ⇄ open)   */
  --spin: 0deg;           /* end-of-book spin            */
  --leaf: 0deg;           /* the moving leaf's angle     */
  --leafZ: 21px;          /* how high the leaf rides     */
  --shade: 0;             /* light on the moving leaf    */
  --castL: 0;             /* shadow cast onto left page  */
  --castR: 0;             /* shadow cast onto right page */
  --sq: 8px;              /* the board's square: how far the cover overhangs the pages */
  --lift: 0px;            /* how far the closed book rises in the showcase */
  --tiltL: 0deg;          /* the left block's slope into the gutter */
  --tiltR: 0deg;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);           /* a terminal, all the way through */
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

/* ── stage ─────────────────────────────────────────────────── */
.stage{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
}
@media (min-width:900px) and (orientation:landscape){
  .stage{
    grid-template-columns: 170px minmax(0,1fr) 170px;
    grid-template-rows: minmax(0,1fr) auto;
  }
  .rail{grid-column:1; grid-row:1; align-self:center; justify-self:start; padding-left:22px}
  .scene{grid-column:2; grid-row:1}
  .scrub{grid-column:3; grid-row:1; align-self:stretch; justify-self:end}
  .hud{grid-column:2; grid-row:2}
}

/* ── the scene ─────────────────────────────────────────────── */
.scene{
  perspective:2400px;
  perspective-origin:50% 42%;
  position:relative;
  width:100%; height:100%; min-width:0; min-height:0;
}
.book{
  position:absolute; left:50%; top:50%;
  width:calc(var(--pw) * 2);
  height:var(--ph);
  margin-left:calc(var(--pw) * -1);
  margin-top:calc(var(--ph) / -2);
  transform-style:preserve-3d;
  transform: rotateX(9deg) translateX(var(--tx)) rotateY(var(--spin));
  transform-origin: 25% 50%;      /* centre of the left stack — the axis the closed book spins on */
  will-change:transform;
}

/* stacks */
.stack{
  position:absolute; top:0; width:var(--pw); height:var(--ph);
  transform-style:preserve-3d;
}
.stack-left{left:0; transform:translateZ(var(--tL))}
.stack-right{left:var(--pw); transform:translateZ(var(--tR))}
.stack.empty{visibility:hidden}
/* one page at a time on a phone: the turned pages stay out of sight until the book closes */
body.single:not(.closing) .stack-left{visibility:hidden}

/* faces */
.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.face.back{transform:rotateY(180deg)}
.stack-left .face.back{transform:translateZ(calc(var(--tL) * -1)) rotateY(180deg)}
.stack-right .face.back{transform:translateZ(calc(var(--tR) * -1)) rotateY(180deg)}

/* the terminal page */
.page{
  background:var(--screen);
  color:var(--ink);
  box-shadow: inset 0 0 24px rgba(0,0,0,.35);
}
.page pre{
  margin:0; padding:var(--pad);
  font:var(--fs)/var(--lh) var(--mono);
  white-space:pre; overflow:hidden;
  height:100%;
  font-variant-ligatures:none;
  color:inherit;
}
.page .folio{
  position:absolute; bottom:8px; font:10px/1 var(--mono); color:var(--ink-dim); letter-spacing:.06em;
}
.page.left .folio{left:var(--pad)}
.page.right .folio{right:var(--pad)}
.page .cursor{
  display:inline-block; width:.6em; height:1em; vertical-align:-.15em;
  background:var(--ink); animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
/* light on the static pages from the moving leaf */
.page::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
  opacity:var(--castR);
}
.page.left::after{
  background:linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0) 45%);
  opacity:var(--castL);
}
/* gutter: a soft fold where the pages meet */
.page.left::before, .page.right::before{
  content:""; position:absolute; top:0; bottom:0; width:38px; pointer-events:none;
}
.page.left::before{right:0; background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.35))}
.page.right::before{left:0; background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.35))}

/* the thicker block slopes into the gutter: its resting page face tilts about
   its fore-edge (set by the engine) so both pages meet at the spine at one height */
.stack-right > .face.front{transform-origin:right center; transform:rotateY(var(--tiltR, 0deg))}
.stack-left  > .face.front{transform-origin:left center;  transform:rotateY(var(--tiltL, 0deg))}

/* the spine bed: the dark inside of the spine, just above the boards */
.bed{
  position:absolute; top:calc(var(--sq) * -1); height:calc(var(--ph) + var(--sq) * 2);
  left:calc(var(--pw) - 5px); width:10px;
  background:#08090a; transform:translateZ(-.3px); pointer-events:none;
}
body.single .bed{display:none}

/* the cover faces overhang the pages by the square; the boards sit behind */
.face.cover{inset:calc(var(--sq) * -1)}
.board{
  position:absolute; inset:calc(var(--sq) * -1);
  background-color:var(--canvas);
  backface-visibility:visible;
}
.stack-left  .board{transform:translateZ(calc(var(--tL) * -1 - .6px))}
.stack-right .board{transform:translateZ(calc(var(--tR) * -1 - .6px))}
.stack.thin .board{display:none}
.cover{background-color:var(--canvas); color:#111}
.cover .title{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; letter-spacing:0;
  font-size:calc(var(--ph) * .085);
  line-height:1;
}
.cover .mark{
  position:absolute; right:calc(var(--sq) + var(--pad) * .9); bottom:calc(var(--sq) + var(--pad) * .75);
  font-family:var(--mono); font-weight:400; letter-spacing:.02em;
  font-size:max(9px, calc(var(--ph) * .032)); line-height:1;
}
.cover .colophon{
  position:absolute; left:var(--pad); bottom:calc(var(--pad) - 4px);
  font:11px/1.6 var(--mono); white-space:pre;
}

/* page block edges and the spine */
.edge{position:absolute; background:var(--pageedge); backface-visibility:visible}
.edge.fore{top:0; width:var(--t); height:var(--ph)}
.edge.top, .edge.bottom{left:0; width:var(--pw); height:var(--t)}
.stack-left{--t:var(--tL)}
.stack-right{--t:var(--tR)}
/* side faces: each one is rotated onto the block's edge and slid so it spans
   the block's depth (local z from -t to 0), its face pointing outward */
.stack-left  .edge.fore{left:0;  transform-origin:left center;  transform:rotateY(-90deg) translateX(calc(var(--t) * -1))}
.stack-right .edge.fore{right:0; transform-origin:right center; transform:rotateY(90deg)  translateX(var(--t))}
.edge.top   {top:0;    transform-origin:top center;    transform:rotateX(90deg)  translateY(calc(var(--t) * -1))}
.edge.bottom{bottom:0; transform-origin:bottom center; transform:rotateX(-90deg) translateY(var(--t))}
/* thin stacks hide their edges — sub-pixel faces flicker */
.stack.thin .edge{display:none}

.spine{
  position:absolute; top:calc(var(--sq) * -1); height:calc(var(--ph) + var(--sq) * 2); width:var(--t);
  background:var(--canvas-deep);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.spine span{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--mono); font-weight:700; letter-spacing:-.06em; color:#111;
  font-size:calc(var(--t) * .5); line-height:1; white-space:nowrap;
}
.spine-right{left:0;  transform-origin:left center;  transform:rotateY(-90deg) translateX(calc(var(--t) * -1))}
.spine-left {right:0; transform-origin:right center; transform:rotateY(90deg)  translateX(var(--t))}
.spine.off{display:none}

/* the moving leaf */
.leaf{
  position:absolute; top:0; left:var(--pw); width:var(--pw); height:var(--ph);
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:translateZ(var(--leafZ)) rotateY(var(--leaf));
  pointer-events:none;
}
.leaf.idle{display:none}
.leaf .face{ box-shadow: 0 2px 6px rgba(0,0,0,.35) }
.leaf .face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.05) 60%, rgba(255,255,255,.06));
  opacity:var(--shade);
}
.leaf .face.back::after{ transform:scaleX(-1) }

/* ── the scrub wheel ─────────────────────────────────────────── */
.scrub{
  position:relative; display:flex; align-items:stretch;
  width:170px; height:100%; padding:40px 26px 40px 0;
  justify-content:flex-end;
}
.scrub-track{position:relative; width:2px; height:100%; background:#26292e; border-radius:1px}
.scrub-knob{
  position:absolute; left:50%; top:0;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; background:var(--bg);
  border:2px solid #6f747b; box-shadow:0 0 0 4px var(--bg);
  cursor:grab; touch-action:none; outline:none;
}
.scrub-knob::after{content:""; position:absolute; inset:6px; border-radius:50%; background:#6f747b}
.scrub-knob:hover, .scrub-knob:focus-visible, .scrub.dragging .scrub-knob{border-color:var(--ink)}
.scrub-knob:hover::after, .scrub.dragging .scrub-knob::after{background:var(--ink)}
.scrub.dragging .scrub-knob{cursor:grabbing}
.scrub-toc{
  position:absolute; right:60px; top:40px; bottom:40px; margin:0; padding:0; list-style:none;
  width:220px; pointer-events:none; opacity:0; transition:opacity .25s;
  font:11px/1.2 var(--mono); color:var(--ink-dim); letter-spacing:.02em;
}
.scrub:hover .scrub-toc, .scrub.dragging .scrub-toc, .scrub.open .scrub-toc{opacity:1; pointer-events:auto}
.scrub.peek .scrub-toc{opacity:.8}          /* shown while turning; hover the wheel to click an entry */
.scrub-toc li{
  position:absolute; right:0; transform:translateY(-50%);
  max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:right; cursor:pointer; padding:2px 0;
}
.scrub-toc li:hover, .scrub-toc li.near{color:var(--ink)}
.scrub-toc li.hidden{display:none}
.scrub.off{visibility:hidden}
@media (max-width:899px), (orientation:portrait){ .scrub{display:none} }

/* ── the showcase: the closed book rises and turns in the air ── */
.scene.showcase .book{
  --lift: calc(var(--ph) * -0.42);
  transform-origin:75% 50%;
  animation:showcase 18s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change:transform;
}
@keyframes showcase{
  0%   {transform:translateY(var(--lift)) rotateX(30deg) rotateZ(-2deg) translateX(var(--tx)) scale(.55) rotateY(-16deg)}
  25%  {transform:translateY(calc(var(--lift) - 6px)) rotateX(24deg) rotateZ(2deg) translateX(var(--tx)) scale(.55) rotateY(20deg)}
  50%  {transform:translateY(var(--lift)) rotateX(30deg) rotateZ(-1deg) translateX(var(--tx)) scale(.55) rotateY(168deg)}
  75%  {transform:translateY(calc(var(--lift) - 6px)) rotateX(24deg) rotateZ(2deg) translateX(var(--tx)) scale(.55) rotateY(200deg)}
  100% {transform:translateY(var(--lift)) rotateX(30deg) rotateZ(-2deg) translateX(var(--tx)) scale(.55) rotateY(344deg)}
}
/* the floor: a soft shadow under the hovering book, well behind it in z */
.floor{display:none}
.scene.showcase .floor{
  display:block; position:absolute; left:50%; top:50%;
  width:calc(var(--pw) * 1.1); height:calc(var(--ph) * .3);
  margin-left:calc(var(--pw) * -.55); margin-top:calc(var(--lift) + var(--ph) * .12);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.075), rgba(255,255,255,0));
  transform:translateZ(-160px);
  animation:floor 18s cubic-bezier(.45,.05,.55,.95) infinite;
  pointer-events:none;
}
@keyframes floor{
  0%,50%,100%{transform:scale(1); opacity:.9}
  25%,75%{transform:scale(.92); opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .scene.showcase .book{animation:none; transform:translateY(var(--lift)) rotateX(18deg) translateX(var(--tx)) scale(.55) rotateY(-12deg)}
  .scene.showcase .floor{animation:none}
  .page .cursor{animation:none}
  .scrub-toc{transition:none}
}
@media (max-width:899px), (orientation:portrait){
  .scene.showcase .book{--lift: calc(var(--ph) * -1.45)}
}

/* ── hud: the status line ───────────────────────────────────── */
.hud{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 18px;
  font:12px/1 var(--mono); color:var(--ink-dim); letter-spacing:.04em;
}
.hud-btn{
  appearance:none; background:none; border:1px solid #2a2d32; color:var(--ink-dim);
  border-radius:4px; min-width:28px; height:26px; padding:0 8px;
  font:inherit; cursor:pointer;
}
.hud-btn:hover, .hud-btn:focus-visible{color:var(--ink); border-color:#4a4e55; outline:none}
.hud-auto[aria-pressed="true"]{color:var(--ink); border-color:#4a4e55}
.hud-auto[aria-pressed="true"]::before{content:"● "; color:#8ad48a}
.hud-auto[aria-pressed="false"]::before{content:"○ "}
.hud-pos{appearance:none; background:none; border:1px solid transparent; border-radius:4px; min-width:52px; height:26px; padding:0 6px; text-align:center; color:var(--ink); font:inherit; cursor:text}
.hud-pos:hover{border-color:#2a2d32}
.hud-jump{width:128px; height:26px; background:var(--bg); border:1px solid #4a4e55; border-radius:4px; color:var(--ink); font:inherit; text-align:center; outline:none}
.hud-jump[hidden]{display:none}
.hud-sep{width:1px; height:14px; background:#2a2d32; margin:0 4px}
.hud-hint{opacity:.7}
@media (max-width:899px), (orientation:portrait){ .hud{padding:8px 12px 10px} body.showcase .hud{visibility:hidden} }
@media (max-width:640px){ .hud-hint{display:none} }

/* ── portrait phone hint ─────────────────────────────────────── */
.turn-hint{
  position:fixed; left:50%; top:12px; transform:translateX(-50%);
  font:11px/1 var(--mono); color:var(--ink-dim); letter-spacing:.08em;
  opacity:0; transition:opacity .6s; pointer-events:none;
}
.turn-hint.show{opacity:1}