/* ============================================================
   NAV: a scroll-up button, and a table of contents that arrives
   No floating menu. Two pieces, each doing one thing:

   Scroll up: appears when the reader scrolls up, which is the gesture that
   says "back". Top centre, where the page it returns to is; on phones and
   tablets it sits under the contents bar while that bar is in. It goes on scroll down, at the top of the page, and after a
   moment of stillness.

   Contents (phones and tablets): not pinned from the start. The bar slides
   down from the top edge when the reader reaches the first chapter, and
   slides away above it and past the last one. Desktop keeps its column.
   ============================================================ */

.to-top{
  position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top, 0px));z-index:55;
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  color:var(--ink);cursor:pointer;
  background:color-mix(in oklch, var(--paper) 76%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-rim, rgba(24,24,27,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(24,24,27,.06);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px) scale(.9);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.3,1),visibility 0s linear .28s;
}
:root[data-theme="dark"] .to-top{
  background:color-mix(in oklch, var(--sink) 72%, transparent);
  border-color:rgba(0,0,0,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.4);
}
.to-top.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.3,1),visibility 0s;}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (hover:hover){ .to-top:hover{color:var(--accent-text);} }
/* under the phone and tablet contents bar when it has arrived */
@media (max-width:1099px){
  body:has(.toc.is-in) .to-top{top:calc(var(--toc-h, 50px) + 12px + env(safe-area-inset-top, 0px));}
}
@media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .2s ease,visibility 0s;} }

/* the contents bar arrives with the first chapter */
@media (max-width:1099px){
  body.nav-ready .toc{
    position:fixed;top:0;left:0;right:0;margin:0;z-index:50;
    transform:translateY(-100%);
    transition:transform .3s cubic-bezier(.2,.8,.3,1);
  }
  body.nav-ready .toc.is-in{transform:none;}
  body.nav-ready .toc ol{padding-left:var(--gutter);}   /* no scroll-up arrow in the bar now */
  body.nav-ready .toc-top{display:none;}
}
@media (max-width:1099px) and (prefers-reduced-motion:reduce){
  body.nav-ready .toc{transition:none;}
}