/* ==========================================================
   UI — the jump-to-page numpad
   The only conventional interface in the book; kept apart from the book's
   own styling.
   ========================================================== */

/* ============ JUMP TO PAGE ============ */
/* The badge itself (a "12 of 29" ledger line plus its numpad) is invisible
   and non-interactive until opened. The number a reader actually sees is
   the folio printed on every page (typography.css) — tapping any folio
   calls el.jumpInput.focus(), which is what opens this pad (jump.js).
   The total comes from state.pages.length (js/jump.js), i.e. from
   book.json — so it is derived, never typed, and stays honest on the next
   insert.

   position:fixed and viewport coordinates on EVERY device, desktop
   included (jump.js sets left/top on open): a folio tapped on the LEFT
   page needs the pad to open directly above IT, and the left page sits
   inside .page.left's own overflow:hidden — an ancestor .jump can't
   escape if it's positioned (even absolutely) relative to anything
   short of the viewport itself. Desktop and mobile share this rule set
   exactly now; the only mobile-only override left (responsive.css) is a
   shrunken numpad, for touch targets, not positioning. */
.jump{
  position:fixed;
  /* fallback only — jump.js always sets left/top explicitly before opening
     it. Only a top fallback, not bottom too: the element is never visible
     without both being JS-set first, but a stray bottom left over from
     CSS would fight an inline top for the box's height once one arrived
     without the other being cleared. */
  left:50%; top:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex; align-items:center; gap:.3em;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  /* clamp so the page-number indicator never renders too small to read on
     smaller (tablet) pages, while desktop keeps its page-proportional size */
  font-size:clamp(13px, calc(var(--page-w) * .021), 24px);
  letter-spacing:.04em;
  color:var(--ink-faint);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.jump.open{
  opacity:1;
  pointer-events:auto;
}

/* The first numeral is the editable one, and it says so by sitting on a ruled
   blank — the way a ledger leaves a line to be written on. Dashed while idle,
   solid rubric once the pad is open (jump.js empties the field then, so it
   reads as a waiting blank rather than a number you must delete). */
.jump-badge{
  display:inline-flex; align-items:baseline; justify-content:center;
  padding:.1em .4em .12em;
  border:1px dashed rgba(156,124,60,.85);
  border-radius:3px;
  transition:border-color .25s, background .25s;
}
.jump-badge:hover{ border-color:var(--rubric); }
.jump-badge:focus-within{
  border:1px solid var(--rubric);
  background:rgba(122,47,29,.07);
}
.jump input{
  /* fixed width: the field empties when the pad opens, and "of xx" must not
     shuffle sideways as digits are typed. Wide enough for three. */
  width:2.1em;
  margin:0; padding:0;
  background:none; border:none;
  color:var(--rubric);
  font-family:'IM Fell English SC', serif;
  font-style:normal;
  font-size:1em; line-height:1.15; text-align:center;
  letter-spacing:.06em;
  outline:none; cursor:var(--cursor-point); caret-color:transparent;
  -moz-appearance:textfield; appearance:textfield;
}
.jump input::-webkit-outer-spin-button,
.jump input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* "of xx" — the quiet half of the pair: Cormorant italic, ink-faint, no rule
   under it. The contrast with the rubric numeral above is the affordance. */
.jump .total{ display:inline; white-space:nowrap; }

/* the number pad: opens beneath the panel when the box is tapped.
   One --np variable drives BOTH the grid track and the button size, so they
   can never diverge. It scales gently with --page-w but is clamped, so it
   stays 40px on a full desktop page yet shrinks on a smaller tablet page
   (where a fixed 40px read as oversized) rather than dominating the leaf. */
.numpad{
  --np: clamp(30px, calc(var(--page-w) * .05), 40px);
  position:absolute;
  bottom:calc(100% + 10px); top:auto;
  /* centred on the whole indicator, not pinned to its right edge: the strip is
     wider than it was now that "of xx" sits in it. */
  left:50%; right:auto; transform:translateX(-50%);
  display:none;
  grid-template-columns:repeat(3, var(--np));
  gap:6px;
  padding:8px;
  background:rgba(24,14,7,.95);
  border:1px solid rgba(156,124,60,.45);
  border-radius:4px;
  z-index:30;
  box-shadow:0 14px 30px rgba(0,0,0,.55);
}
.jump.open .numpad{ display:grid; }
.numpad button{
  width:var(--np); height:var(--np);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif;
  font-size:calc(var(--np) * .4);
  letter-spacing:0; text-indent:0;
  padding:0;
  background:none;
  border:1px solid rgba(156,124,60,.4);
  border-radius:3px;
  color:var(--paper);
  cursor:var(--cursor-point);
}
.numpad button:hover, .numpad button:focus-visible{
  background:rgba(156,124,60,.25); color:var(--paper); outline:none;
}
.numpad button.np-go{
  font-family:'IM Fell English SC', serif;
  font-size:calc(var(--np) * .29); letter-spacing:.18em; text-indent:.18em;
  color:var(--brass);
}
.numpad button.np-go:hover, .numpad button.np-go:focus-visible{
  background:var(--brass); color:#1c1108;
}