/* =============================================================================
   flipbook.css — the page-turning PDF viewer opened by /site/flipbook.js.

   Used by any link marked data-kk-flipbook="<pdf url>" (today: the PDF entries
   on the Newsletter Archive that an editor ticked "Flip book" for). Everything
   here is OUR layer; the book itself is drawn on a canvas by the vendored
   StPageFlip (/site/vendor/pageflip/), whose own stylesheet is loaded beside it.

   Colours/sizes come from tokens.css (--kk-fb-*) — no raw values below.
   ============================================================================= */

/* The link that opens a book carries no badge: its icon is the signal (an open book
   rather than a closed one — see Views/Home/Newsletters.cshtml), which keeps a long
   list of titles readable instead of studding it with pills. */

/* -- Overlay ---------------------------------------------------------------- */
.kk-fb {
    position: fixed; inset: 0; z-index: var(--kk-z-flipbook);
    display: none; flex-direction: column;
    background: var(--kk-fb-backdrop); color: var(--kk-fb-on);
    font-family: var(--kk-font-body);
}
.kk-fb.is-open { display: flex; }

/* Header: the newsletter's title on the left, close on the right */
.kk-fb__head {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--kk-fb-bar-gap);
    padding: 10px 14px; background: var(--kk-fb-bar);
}
.kk-fb__title {
    flex: 1 1 auto; margin: 0; min-width: 0;
    font-family: var(--kk-font-heading); font-size: 15px; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Stage: the book, centred; scrolls when zoomed past the viewport.
   touch-action: none because the pan and pinch are ours (see flipbook.js) — the browser's own
   touch scrolling never reached this element anyway, since StPageFlip claims the gesture first. */
.kk-fb__stage {
    flex: 1 1 auto; position: relative; overflow: auto;
    display: flex;
    /* SAFE centring, and the "safe" is the whole point. A centred flex item that is bigger than its
       scroll container overflows BOTH sides, and the half that hangs off the left (and the top) is
       unreachable: scrollLeft cannot go below 0. Zoomed in, that read as "I can drag right and down
       but not left or up" — the left of the page simply could not be got at. `safe` tells the
       browser to align to the start instead of the centre the moment the item overflows, which
       keeps every edge scrollable. The plain `center` above it is the fallback for anything that
       does not know the keyword: same behaviour as before, no worse. */
    align-items: center;
    align-items: safe center;
    justify-content: center;
    justify-content: safe center;
    padding: var(--kk-fb-stage-pad);
    touch-action: none;
}
/* Only offer the grab cursor when there is something to drag towards. */
.kk-fb:not(.is-panning) .kk-fb__stage { cursor: default; }
.kk-fb.is-panning .kk-fb__stage, .kk-fb.is-panning .kk-fb__tap { cursor: grabbing; }
/* No `margin: auto` here: auto margins swallow the overflow exactly the way unsafe centring does,
   which would put the left of the page back out of reach. The stage does the centring.

   The transition is centreBook's half-page shift. That shift is applied when a flip COMPLETES (the
   library tells us then and not before), so without it the book snapped sideways the moment a turn
   landed — worst turning back onto the cover, where the whole spread jumped half a page at once. It
   now glides into place as the page settles. */
.kk-fb__book { margin: 0; transition: transform .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .kk-fb__book { transition: none; } }
/* One leaf: the page pdf.js painted. StPageFlip positions these itself (.stf__item),
   so all this owns is the paper behind the render — which is what a page not yet
   painted shows, since the book opens on its first page and fills in the rest while
   it is read. .is-pending marks one still on its way. */
.kk-fb__page { background: var(--kk-surface); position: relative; }
.kk-fb__page.is-pending::after {
    content: ""; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px;
    width: 26px; height: 26px; border-radius: var(--kk-radius-round);
    border: 3px solid rgba(0, 0, 0, .12); border-top-color: rgba(0, 0, 0, .35);
    animation: kk-fb-spin .8s linear infinite;
}
.kk-fb__book canvas { display: block; border-radius: 2px; }

/* Loading / error states, centred over the stage */
.kk-fb__note {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-align: center; padding: 24px; font-size: 15px; color: var(--kk-fb-on);
}
.kk-fb__note.is-on { display: flex; }
.kk-fb__spin {
    width: 34px; height: 34px; border-radius: var(--kk-radius-round);
    border: 3px solid var(--kk-fb-btn); border-top-color: var(--kk-fb-on);
    animation: kk-fb-spin .8s linear infinite;
}
@keyframes kk-fb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kk-fb__spin { animation-duration: 2.4s; } }

/* Toolbar */
.kk-fb__bar {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    gap: var(--kk-fb-bar-gap); flex-wrap: wrap;
    padding: 10px 14px; background: var(--kk-fb-bar);
}
.kk-fb__btn {
    width: auto;                                   /* beat the theme's button{width:100%} */
    min-width: var(--kk-fb-btn-size); height: var(--kk-fb-btn-size);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 12px; border: 0; border-radius: var(--kk-radius-md);
    background: var(--kk-fb-btn); color: var(--kk-fb-on);
    font-family: inherit; font-size: var(--kk-fb-glyph); line-height: 1; text-decoration: none;
    cursor: pointer; transition: background .15s ease;
}
/* The cloned theme's reset paints EVERY button on the page #c36 (a hard pink-red) for :focus and
   :hover — `button:focus, button:hover` outranks a plain class, so our own background lost to it
   the moment a control was clicked and stayed lost until focus moved. Restate ours where it wins.
   This is why a tapped page-turn zone left a red column standing over the page. */
.kk-fb__btn:focus, .kk-fb__btn:hover { background: var(--kk-fb-btn); color: var(--kk-fb-on); }
.kk-fb__btn:hover:not(:disabled) { background: var(--kk-fb-btn-hover); color: var(--kk-fb-on); }
.kk-fb__btn:disabled { opacity: .35; cursor: default; }
.kk-fb__btn:focus-visible { outline: 2px solid var(--kk-fb-on); outline-offset: 2px; }
.kk-fb__btn--icon { padding: 0; }
/* The word beside a glyph. Its own size, so making the glyph legible does not blow up the label
   (and hiding the label on a phone does not shrink the glyph — which is what it used to do). */
.kk-fb__label { font-size: var(--kk-fb-label); }
.kk-fb__count { min-width: 132px; text-align: center; font-size: 14px; color: var(--kk-fb-muted); }
.kk-fb__sep { width: 1px; height: 22px; background: var(--kk-fb-btn); }
/* Phone tap zones: the left edge turns back, the right edge turns forward (see build() in
   flipbook.js). Edge-anchored rather than drawn controls — the reader's thumb is already at the
   side of the screen, and a button there would cover the page it turns. All they draw is a
   chevron: a zone that shades itself is a slab of colour over what you are reading.
   They span the full height and sit UNDER the head and bar, which is why those two get a
   z-index: a tap on Close or Download must reach the control, not the zone behind it. */
.kk-fb__head, .kk-fb__bar { position: relative; z-index: 2; }
.kk-fb__tap {
    display: none;                                 /* pointer devices keep the corner drag */
    position: absolute; top: 0; bottom: 0; z-index: 1;
    width: var(--kk-fb-tap-w);
    align-items: center;
    padding: 0; border: 0; background: transparent; color: var(--kk-fb-on);
    -webkit-tap-highlight-color: transparent;
}
/* Never a background, in any state — see the note on the theme's #c36 above. */
.kk-fb__tap:focus, .kk-fb__tap:hover, .kk-fb__tap:active { background: transparent; outline: none; }
.kk-fb__tap--prev { left: 0; justify-content: flex-start; }
.kk-fb__tap--next { right: 0; justify-content: flex-end; }
.kk-fb__tap-ico {
    font-size: var(--kk-fb-tap-ico); line-height: 1; padding: 0 10px;
    opacity: .5; text-shadow: 0 1px 4px rgba(0, 0, 0, .7);  /* legible over a white page */
    transition: opacity .15s ease;
}
.kk-fb__tap:active .kk-fb__tap-ico { opacity: 1; }          /* the whole of the feedback */
/* An arrow is shown only where there IS a page: paintCount disables the zone at each end, and a
   disabled zone is gone rather than dimmed — an arrow pointing at nothing is worse than no arrow. */
.kk-fb__tap:disabled { display: none; }
.kk-fb__tap:active { background: var(--kk-fb-bar); }
.kk-fb__tap:disabled { display: none; }
/* Small screens: one page at a time, a tighter bar, no room for labels */
@media (max-width: 767px) {
    .kk-fb { --kk-fb-stage-pad: 8px; --kk-fb-bar-gap: 6px; }
    /* Tighter, but NOT smaller. The labels go here, so the glyph IS the control: shrinking the
       button's font-size shrank the glyph with it, leaving a tiny + or - inside a box that was
       the right size all along. Only the padding gives way. */
    .kk-fb__btn { padding: 0 9px; }
    .kk-fb__count { min-width: 104px; font-size: 13px; }
    .kk-fb__label { display: none; }               /* icons only */
    .kk-fb__sep { display: none; }
    .kk-fb__tap { display: flex; }                 /* thumb reach beats a corner drag here */
}


/* -- The viewer as a page of its own (/pdf?url=…, Views/Home/Pdf.cshtml) ----- */
/* That page renders no site chrome — the book covers every pixel of it — so the document itself
   carries the ground colour, and it is the viewer's own, which means no white flash before the
   book appears. */
.kk-pdf-page { margin: 0; min-height: 100vh; background: var(--kk-fb-backdrop); }
.kk-pdf-page--reading .kk-pdf { visibility: hidden; }
/* No close button when there is nothing behind to close back to. Back is the way out. */
.kk-fb.is-page .js-close { display: none; }
/* Zoomed in, the edge zones sit where the thumb needs to drag, and a tap there turned the page. */
.kk-fb.is-zoomed .kk-fb__tap { display: none; }
/* -- The standalone viewer page (/pdf?url=…, Views/Home/Pdf.cshtml) ---------- */
/* The book opens over this on load, so what is styled here is what a visitor sees
   before it opens, after they close it, or if the libraries never arrive: one card
   naming the document and linking straight to the file. */
.kk-pdf {
    max-width: var(--kk-content-max);
    margin: 0 auto;
    padding: var(--kk-space-lg) var(--kk-space-sm);
    display: flex;
    justify-content: center;
}
.kk-pdf__card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    max-width: 520px; padding: var(--kk-space-lg) var(--kk-space-md);
    background: var(--kk-surface); color: var(--kk-ink);
    border-radius: var(--kk-radius-md); box-shadow: var(--kk-shadow-header);
    text-align: center; text-decoration: none;
}
.kk-pdf__ico { width: 40px; height: 40px; fill: var(--kk-brand); }
.kk-pdf__title { font-family: var(--kk-font-heading); font-size: 18px; font-weight: 600; }
.kk-pdf__hint { font-family: var(--kk-font-body); font-size: 14px; opacity: .72; }
.kk-pdf__card--bad .kk-pdf__hint code { font-size: 13px; }