/* ------------------------------------------------------------------
   Spiritual Socialist Party — the readers
   Read after style.css, by the ten readers: manifesto.html,
   la-ilaha-ila-allah.html, ila-allah.html, dharma.html, systema.html,
   kabballah.html, kabballah-empty-packet.html, sefer-yetzirah.html,
   sfr.html and diacritics.html. The pages themselves are drawn by
   assets/js/manifesto.js.

   A reader is the document alone: no title over it (the name stays in
   the tab, and in an <h1> kept for screen readers), and no row of links
   above or below. Return, download — and on kabballah.html the notes —
   are small icons in .tools, set beside the column on a wide
   screen and laid over the corner of the screen on a narrow one.
   ------------------------------------------------------------------ */

/* Every other page is one small group held in the middle of the screen.
   The reader is a long column, so it lets go of that centring and runs
   down from the top: the pages, printed onto bone and laid one under
   another on the ground. (place-items goes too:
   browsers now centre block children by it as well, which would shrink
   the column to the width of its widest line of text.)               */

body.reader{
  height:auto;
  display:block;
  place-items:normal;
  padding:clamp(16px,4vh,44px) max(12px,env(safe-area-inset-right))
          clamp(76px,12vh,112px) max(12px,env(safe-area-inset-left));
}

.reader main{gap:clamp(22px,4vh,40px)}

/* --- the tools ---------------------------------------------------- */
/* Return, download, and on kabballah.html the notes: an icon apiece, each a
   38px disc with a 17px drawing in the middle (44px and 20px beside the
   column on a wide screen), in the muted bone of
   "return", brightening to bone under the pointer. A narrow screen has
   no room beside the column, so there they sit over the lower west
   corner of the screen, opposite the folio, each on a disc of the
   ground so it reads over a page as well as between pages.            */

.tools{
  position:fixed;
  z-index:10;
  left:max(10px,env(safe-area-inset-left));
  bottom:max(10px,env(safe-area-inset-bottom));
  display:flex;
  gap:8px;
}

.tool{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(8,9,11,.78);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(233,224,204,.10);
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 300ms ease,box-shadow 300ms ease;
}

.tool[hidden]{display:none}

.tool svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tool:hover,
.tool:focus-visible{color:var(--bone);box-shadow:0 0 0 1px rgba(200,164,76,.55)}
.tool:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* A wide screen has ground beside the column: the tools stand in it, one
   above another, level with the top of the first page and just west of
   it, and stay there as the pages pass. No disc is needed on the ground.
   --half is half the width of what the column holds — the pages alone
   here; the pages and the notes' margin on kabballah.html (notes.css). */

@media (min-width:920px){
  .reader{--half:380px}

  .tools{
    left:calc(50% - var(--half) - 64px);
    top:clamp(16px,4vh,44px);
    bottom:auto;
    flex-direction:column;
    gap:4px;
  }

  .tool{
    width:44px;
    height:44px;
    background:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }

  .tool svg{width:20px;height:20px}

  .tool:hover,
  .tool:focus-visible{box-shadow:none}

  .reader{padding-bottom:clamp(40px,8vh,88px)}
}

/* --- the pages ---------------------------------------------------- */
/* --paper is what the pages are printed onto: the script multiplies
   each drawn page by it, so the PDF's white becomes the site's bone and
   its colours and blacks keep their places. Set it to #fff to show the
   pages exactly as they are in the file.                              */

.sheets{
  --paper:var(--bone);
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,2.4vh,26px);
}

.sheet{
  position:relative;
  width:100%;
  aspect-ratio:455/588;            /* replaced by each page's own shape */
  background:var(--paper);
  opacity:.07;                     /* a ghost of the page until it is drawn */
  transition:opacity 900ms ease;
}

.sheet.drawn{opacity:1}

.sheet canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* "Opening", while the file arrives */

.status{
  margin:clamp(48px,14vh,140px) 0;
  font-size:clamp(.68rem,1.9vw,.78rem);
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  text-align:center;
  color:var(--muted);
}

.is-loading .status{animation:breathe 2400ms ease-in-out infinite}

@keyframes breathe{50%{opacity:.35}}

.status a{
  color:var(--bone);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid rgba(200,164,76,.26);
}

/* When the reader cannot run, the browser's own PDF viewer stands in. */

.native{
  display:block;
  width:100%;
  height:86vh;
  height:86svh;
  border:0;
}

/* --- the folio ---------------------------------------------------- */
/* Which page is under the eye, shown while the reader moves and let go
   soon after, so it never sits on a page for long.                    */

.folio{
  position:fixed;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  margin:0;
  padding:7px 10px 6px 13px;
  background:rgba(8,9,11,.84);
  color:var(--muted);
  font-size:.74rem;
  letter-spacing:.2em;
  font-variant-numeric:lining-nums tabular-nums;
  opacity:0;
  transition:opacity 500ms ease;
  pointer-events:none;
}

.folio.shown{opacity:1}

@media (prefers-reduced-motion:reduce){
  .sheet,.folio{transition:none}
  .is-loading .status{animation:none}
}

@media print{
  .folio,.tools{display:none}
}