/* GENERATED by tools/copy-reader.mjs from src/lib/. Edit the source, not this copy. */
/* =============================================================================
   src/lib/pager.css — the look of the page turner (see pager.js)
   -----------------------------------------------------------------------------
   Everything that turns a page lives inside @media screen and under .pgr--on,
   which pager.js adds once it is running. Without the script, and on paper,
   the book is the plain flowing text it always was.

   Colors come from five properties so the site and the Leaky Bucket can each
   dress it in their own palette:
     --pgr-bg      the page            --pgr-ink     the controls' text
     --pgr-rule    the lines           --pgr-accent  the progress fill
     --pgr-chrome  the bar behind the controls
   ============================================================================= */

.pgr {
  --pgr-bg: var(--color-white, #fff);
  --pgr-ink: var(--color-primary, #1E3250);
  --pgr-rule: var(--color-border, #DFE5EC);
  --pgr-accent: var(--color-gold, #C8A058);
  --pgr-chrome: var(--color-background-light, #F7F5F0);
  --pgr-top: var(--header-h, 72px);
}

.pgr-controls { display: none; }

@media screen {
  .pgr.pgr--on {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--pgr-top));
    height: var(--pgr-height, calc(100dvh - var(--pgr-top)));
    min-height: 22rem;
    background: var(--pgr-bg);
  }
  .pgr--on .pgr-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 1.4rem 1.25rem 1rem;
  }
  .pgr--on .pgr-viewport {
    width: 100%;
    max-width: var(--pgr-max, 40rem);
    height: 100%;
    overflow: hidden;
    overflow: clip;
    position: relative;
  }
  .pgr--on.pgr--spread { --pgr-max: 78rem; }
  .pgr--on.pgr--spread .pgr-viewport::after {
    /* the book's spine, between the two pages of a spread */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(transparent, var(--pgr-rule) 12%, var(--pgr-rule) 88%, transparent);
    pointer-events: none;
  }

  .pgr--on .pgr-flow {
    width: 100%;
    height: var(--pgr-h, 100%);
    column-width: var(--pgr-w, 40rem);
    column-gap: var(--pgr-gap, 48px);
    column-fill: auto;
    transform: translate3d(var(--pgr-x, 0px), 0, 0);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    orphans: 2;
    widows: 2;
  }
  .pgr--on .pgr-flow :is(h1, h2, h3, h4, .pgr-keep-next) { break-after: avoid; }
  .pgr--on .pgr-flow :is(figure, table, blockquote, li, fieldset, .pgr-keep, img) { break-inside: avoid; }
  .pgr--on .pgr-flow img {
    max-height: calc(var(--pgr-h, 60vh) - 2.5rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .pgr--on .pgr-flow .pgr-break { break-before: column; }
  /* Fade-in on scroll means nothing inside a page: the page is the reveal. */
  .pgr--on .pgr-flow [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pgr--on [data-pager-end] { display: block; height: 1px; }

  /* ── the controls ── */
  .pgr--on .pgr-controls {
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem max(1rem, env(safe-area-inset-left)) calc(0.55rem + env(safe-area-inset-bottom));
    background: var(--pgr-chrome);
    border-top: 1px solid var(--pgr-rule);
    color: var(--pgr-ink);
  }
  .pgr-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--pgr-rule);
    border-radius: 100px;
    background: var(--pgr-bg);
    color: var(--pgr-ink);
    font: 700 0.86rem/1 inherit;
    font-family: inherit;
    cursor: pointer;
  }
  .pgr-btn span[aria-hidden] { font-size: 1.35rem; line-height: 0.6; }
  .pgr-btn:hover:not(:disabled) { border-color: var(--pgr-accent); }
  .pgr-btn:focus-visible, .pgr-toc:focus-visible { outline: 2px solid var(--pgr-accent); outline-offset: 2px; }
  .pgr-btn:disabled { opacity: 0.4; cursor: default; }
  /* On a workbook page the last Next is the course's own Next or Finish. */
  .pgr-btn--end { background: var(--pgr-end-bg, var(--pgr-ink)); color: var(--pgr-end-ink, #fff); border-color: transparent; }
  .pgr-btn--end:disabled,
  .pgr-btn--wait { opacity: 1; background: var(--pgr-chrome); color: var(--pgr-ink); border-color: var(--pgr-rule); }
  .pgr-btn--end { white-space: normal; text-align: center; line-height: 1.2; }
  .pgr-mid {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .pgr-toc {
    max-width: 100%;
    min-height: 44px;
    padding: 0.25rem 1.8rem 0.25rem 0.7rem;
    border: 1px solid var(--pgr-rule);
    border-radius: 8px;
    background: var(--pgr-bg);
    color: var(--pgr-ink);
    font: 600 0.82rem/1.2 inherit;
    font-family: inherit;
    text-overflow: ellipsis;
  }
  .pgr-count {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
  }
  .pgr-track {
    display: block;
    width: min(16rem, 100%);
    height: 3px;
    border-radius: 3px;
    background: var(--pgr-rule);
    overflow: hidden;
  }
  .pgr-track i { display: block; height: 100%; width: 0; background: var(--pgr-accent); transition: width 0.2s; }

  @media (max-width: 560px) {
    .pgr--on .pgr-stage { padding: 1rem 1.1rem 0.6rem; }
    .pgr-btn { padding: 0.45rem 0.7rem; }
    .pgr-btn__t { display: none; }
    .pgr-btn--end .pgr-btn__t { display: inline; }
    .pgr-btn--end { font-size: 0.8rem; max-width: 62vw; }
    .pgr[data-pager-end] .pgr-track { display: none; }
    .pgr-toc { font-size: 0.78rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pgr--on .pgr-flow { transition: none; }
  }
}

/* The controls own the bottom of the screen while a book is open, so the
   site's call bar steps aside and the chat button sits above them. The call
   button is still in the header on every page. */
@media screen {
  .has-pager .mab { display: none; }
  .has-pager .amin-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .has-pager .amin-window { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .pgr-controls { display: none !important; }
}