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

/* ============ JUMP TO PAGE ============ */
/* Reads "12 of 29", flanked by a mirrored pair of brass ornaments.
   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.

   MOBILE IS UNTOUCHED. Everything below is overridden inside the portrait
   media query in responsive.css: the ornaments get content:none, .total goes
   display:none, .jump-badge goes display:contents (which erases its rule), and
   the input takes its own box. Nothing here reaches the phone. */
.jump{
  position:absolute;
  left:50%; bottom:2.2%;
  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);
}

/* The flanking ornament: a hairline through an open lozenge, ending in a
   detached bead. ::after is the graphic as drawn (bead outermost); ::before is
   the same graphic mirrored, so the pair is symmetric about the centre — what
   sits left of the first numeral is the mirror of what sits right of the second.

   The SVG is a MASK, not an image: it is painted #000 and only its alpha is
   used, with the colour supplied by background-color:var(--brass). So the
   ornament follows the palette in tokens.css like everything else, instead of
   hard-coding a hex the way the old chevron did. */
.jump::before, .jump::after{
  content:"";
  width:3.4em; height:1.1em;
  flex:none;
  align-self:center;
  background-color:var(--brass);
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042%2014'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%207%20H12'/%3E%3Cpath%20d='M12%207%20L17%203.2%20L22%207%20L17%2010.8%20Z'/%3E%3Cpath%20d='M22%207%20H34'/%3E%3C/g%3E%3Ccircle%20cx='38.5'%20cy='7'%20r='1.5'%20fill='%23000'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042%2014'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%207%20H12'/%3E%3Cpath%20d='M12%207%20L17%203.2%20L22%207%20L17%2010.8%20Z'/%3E%3Cpath%20d='M22%207%20H34'/%3E%3C/g%3E%3Ccircle%20cx='38.5'%20cy='7'%20r='1.5'%20fill='%23000'/%3E%3C/svg%3E");
  opacity:.9;
}
.jump::before{ transform:scaleX(-1); }   /* mirror: its bead points outward too */

/* 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:0 .3em .12em;
  border-bottom:1px dashed rgba(156,124,60,.85);
  transition:border-bottom-color .25s, background .25s;
}
.jump-badge:hover{ border-bottom-color:var(--rubric); }
.jump-badge:focus-within{
  border-bottom: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:pointer; 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 the ornaments and "of xx" are 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:pointer;
}
.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;
}