/*
 * Layout for BookReader 5.
 *
 * The reader renders into a container it does not size itself: without an
 * explicit height the element collapses and the page comes up blank, with no
 * console error to explain it. Version 3 did not need this, which is why it
 * was missed first time round.
 *
 * Deliberately NOT loading css/book.css here — that is ~200 lines written
 * against version 3's DOM (#BRtoolbar, .BRicon, #BRnav) and its icon sprites,
 * none of which version 5 uses.
 */

html {
    /* The nav menu sizes in rem and assumes a 10px root, per the upstream
       demo. Without this its controls come out oversized. */
    font-size: 10px;
    font-family: sans-serif;
}

body {
    margin: 0;
}

.BookReader {
    height: 100vh;
    overflow: hidden;
    margin: 0 auto;
}

/*
 * Share modal: line the Finished button up with the row above it.
 *
 * Measured from the modal's left edge, upstream leaves the content at
 * inconsistent offsets: title and checkbox at +15, the social buttons at +20
 * (their own 5px margin on top of the container's 15), and Finished at +10 —
 * it sits in .BRfloatFoot with no margin of its own. The result reads as a
 * misalignment because it is one.
 *
 * 10px puts it directly under the social buttons, which is the row a reader's
 * eye tracks it against.
 */
.BRshare .share-finished {
    margin-left: 10px;
}

/*
 * Grey reading surface, matching version 3 (#9A9B9D — the colour its
 * BookReader.css actually rendered; the ##939598 in v3's book.html body is a
 * double-hash typo that never took effect).
 *
 * BookReader ships a black background — archive.org's house style. A white
 * surface was tried first, but Giles found white pages on white hard to read
 * (2026-08-17); grey lets the pages stand out, as v3 did.
 *
 * The toolbar is transparent with white text and white-outlined pill buttons.
 * Dark text on this mid-grey stays legible, so they keep the #333 set below.
 * The footer and page-slider keep their own #4D4D4D bars, left alone.
 */
.BookReader,
.BookReader.fullscreenActive {
    background-color: #9A9B9D;
}

.BRtoolbar,
.BRtoolbar .BRreturn,
.BRtoolbar .BRreturn a {
    color: #333;
}

.BRpill,
.BRtoolbarbuttons .BRpill {
    border-color: #999;
    color: #333;
}

/*
 * Light control bar.
 *
 * The footer, page slider and nav controls ship as #4D4D4D with white icons —
 * a dark bar under a now-white reading surface. The icons are SVG files with
 * #fff baked in (icons/*.svg) and a white-glyph sprite, so they cannot simply
 * be recoloured: they are inverted instead, which turns white to black and
 * leaves shape and spacing untouched.
 */
.BRfooter,
.BRnav,
.BRnavCntl,
.BRpager,
.BRnav .controls {
    background-color: #f4f4f4;
    color: #333;
}

.BRnav,
.BRfooter {
    border-top: 1px solid #ddd;
}

/* White glyphs -> dark.
 *
 * Invert ONLY the inner .icon element. Every footer icon lives there — the
 * .BRicon button itself carries no background — and filters on nested
 * elements compound, so inverting both turned white to black and back to
 * white again, leaving the controls invisible on the light bar.
 *
 * Scoped to the footer: the share modal's social glyphs sit on coloured
 * buttons and must stay white. */
.BRfooter .icon,
.BRnav .icon {
    filter: invert(1);
}

/* Slider: the dark track and white handle were built for a dark bar.
   Selector matches upstream's .BRcontrols .scrubber .BRpager.ui-slider,
   which out-specifies a bare .BRpager rule. */
.BRcontrols .scrubber .BRpager.ui-slider {
    background-color: #ccc;
    border-color: #bbb;
}

.BRcontrols .scrubber .BRpager .ui-slider-handle {
    background-color: #666;
    border-color: #666;
}

/* The page counter and slider track. */
.BRfooter .BRcurrentpage,
.BRnav .BRcurrentpage {
    color: #333;
}

/*
 * Embed mode: match what version 3 showed.
 *
 * Version 3 built a separate embed navbar and no header at all — sensible in
 * a 250px-tall iframe, where a title bar costs a fifth of the height.
 * Version 5 renders its full desktop toolbar instead.
 */
.br-ui-embed .BRtoolbar {
    display: none;
}

/* Logo and title link, appended by book5.js. Styling mirrors version 3's
   css/book.css, which is not loaded for version 5. */
/* Giles's transparent bookleteer logo (reader5/images/bookleteer-logo.png),
 * sized to fit the slot with background-size so its native 400x129 aspect is
 * preserved. Replaces an interim flood-filled copy; the original
 * icon_home.png was never actually transparent. */
.BRnav .BRembedlogo a.logo {
    display: inline-block;
    width: 118px;
    height: 40px;
    margin: 0;
    vertical-align: middle;
    background: transparent url(../reader5/images/bookleteer-logo.png) no-repeat 0 center;
    background-size: contain;
}

/* Room for the 40px logo with breathing space around it. */
.br-ui-embed .BRnav,
.br-ui-embed .BRnav .controls {
    min-height: 48px;
}

/* Upstream sets 2px 10px, which adds height the bar does not need. */
.BRcontrols .controls {
    padding: 0 10px;
}

.BRnav .BRembedreturn {
    display: inline-block;
    vertical-align: middle;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.BRnav .BRembedreturn a {
    color: #333;
    font-size: 12px;
    text-decoration: none;
}

.BRnav .BRembedreturn a:hover {
    text-decoration: underline;
}

/*
 * Embed footer layout: logo left, title centre, controls right.
 *
 * The control list is already a flex row, so this is ordering rather than
 * restructuring — the logo and title spans are appended last by book5.js and
 * pulled into place here.
 *
 * The scrubber goes entirely: it carries the play slider and the page
 * counter, and in a 250px embed it dominated a bar that only needs to offer
 * the book, its title, and a way out.
 */
.br-ui-embed .BRnav .controls {
    display: flex;
    align-items: center;
}

.br-ui-embed .BRnav .controls li.scrubber {
    display: none;
}

.br-ui-embed .BRnav .controls .BRembedlogo {
    order: -2;
    margin-right: 0;
    padding-right: 0;
}

/* flex:1 makes the title claim the space between logo and controls, which is
   what centres it — no fixed widths involved. */
.br-ui-embed .BRnav .controls .BRembedreturn {
    order: -1;
    flex: 1 1 auto;
    text-align: center;
    max-width: none;
    padding: 0 10px;
}

.br-ui-embed .BRnav .controls li {
    order: 1;
}

/*
 * Embed controls: maximise, back, forward — the three version 3 offered.
 *
 * The list items are tagged by book5.js (brc-full / brc-back / brc-forward,
 * brc-hidden for the rest). Done in JS rather than with :has(), which is not
 * safe to rely on here — and which invalidates an entire rule on browsers
 * that do not support it, so the failure is silent and total.
 */
.br-ui-embed .BRnav .controls li.brc-hidden {
    display: none;
}

/* Version 3's order: maximise, then back, then forward. */
.br-ui-embed .BRnav .controls li.brc-full {
    order: 1;
}

.br-ui-embed .BRnav .controls li.brc-back {
    order: 2;
}

.br-ui-embed .BRnav .controls li.brc-forward {
    order: 3;
}

/*
 * Keep back/forward in the embed at any width.
 *
 * BookReader swaps control sets on container width: under 640px it calls
 * showMinimumNavbarControls(), which adds .hide to book_left, book_right,
 * zoom and the view modes. .BRfooter button.hide is display:none, so on a
 * publication page — where the embed is narrower than 640px — the flip
 * buttons vanish. They are visible in a wide standalone window, which is why
 * this looked fine in testing and wrong in the page.
 *
 * Version 3's embed showed them at every width, so they are pinned here.
 */
.br-ui-embed .BRfooter button.book_left.hide,
.br-ui-embed .BRfooter button.book_right.hide,
.br-ui-embed .BRnav button.book_left.hide,
.br-ui-embed .BRnav button.book_right.hide {
    display: inline-block;
}

/*
 * Standalone toolbar, matching version 3.
 *
 * Version 3's #BRtoolbar was a white bar with a soft shadow (0 1px 3px #999),
 * 40px tall, carrying the bookleteer logo floated left. Version 5 leaves the
 * toolbar transparent with no logo, so over the grey reading surface it read
 * as unshaded and bare. Restored here; scoped to full mode so the embed's
 * hidden toolbar is unaffected.
 */
/* Opaque white bar with a soft shadow, kept display:block so BookReader's
   getToolBarHeight() measures it and insets the book below the bar. Do NOT
   make this display:flex — that returns 0 and the book gets clipped under the
   bar. The logo/title/controls are laid out by the inner .BRtoolbarbuttons
   flex row instead. */
.br-ui-full .BRtoolbar {
    padding: 0 12px;
    background-color: #fff;
    box-shadow: 0 1px 3px #999;
}

/* Maximise/fullscreen button: hide it entirely in the standalone reader.
   book.html already fills the window, so the fullscreen toggle does nothing
   useful there — it should never show, not just hide after being clicked. */
.br-ui-full .BRicon.full {
    display: none;
}

/* Logo top-left, appended by book5.js, in version 3's position. Giles's
   transparent bookleteer logo (reader5/images/bookleteer-logo.png). */
.br-ui-full .BRtoolbar .BRtoolbarlogo {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    margin-right: 10px;
}

/* Centre the title (and the Info/Share pills) vertically: the buttons block
   is centred in the toolbar but leaves its own children top-aligned, which
   floated the title above the midline. */
.br-ui-full .BRtoolbar .BRtoolbarbuttons {
    align-items: center;
}

/* Autoplay button (book5.js), sitting with the Info/Share pills. An icon
   button rather than a text pill: play triangle, swapped for a pause glyph
   while it runs (the .BRautoplay-on state tints it to read as active). */
.br-ui-full .BRtoolbar .BRautoplay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    margin-right: 6px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}
.br-ui-full .BRtoolbar .BRautoplay:hover {
    background: #eee;
}
.br-ui-full .BRtoolbar .BRautoplay.BRautoplay-on {
    background: #e6e6e6;
}

/* Keep the title dark on hover — the site's global a:hover turns it white,
   which made it vanish against the white bar. The title link IS .BRreturn
   (an <a>), not an anchor inside it, so the pseudo-class goes on the element
   itself. */
.br-ui-full .BRtoolbar a.BRreturn:hover {
    color: #333;
}

.br-ui-full .BRtoolbar .BRtoolbarlogo a.logo {
    display: inline-block;
    width: 118px;
    height: 40px;
    vertical-align: middle;
    background: transparent url(../reader5/images/bookleteer-logo.png) no-repeat 0 center;
    background-size: contain;
}

/*
 * Disable interaction on the leaf-edges (the stacked page-edges beside the
 * book).
 *
 * BookReader lets you click a page-edge to jump into the hidden stack. That
 * whole interaction is broken here: the component's index maths uses its
 * UNSCALED offsetWidth (~4px) against a mouse offset in the RENDERED width
 * (~17px), so a click computes an out-of-range index — e.g. 67 in a 32-page
 * book — which jumpToIndex ignores, and on the left edge produces a negative
 * flip duration and an uncaught "animate ... duration must be non-negative"
 * error. The hover label had the same root cause (huge, scaled text reading
 * "Page nNaN").
 *
 * The feature is an archive.org affordance for thick books, marginal for
 * booklets and absent in version 3. pointer-events:none removes the hover
 * highlight, the label and the broken click in one stroke, while leaving the
 * page-edge stack visible as a "there are more pages" cue.
 */
br-leaf-edges {
    pointer-events: none;
}

/*
 * Centre gutter shadow for the two-page spread, restoring version 3's visual
 * cue for the fold between the pages (v3 drew a booksplit.png spine strip).
 *
 * Version 5 lays the two pages flat with no seam. A soft gradient on the inner
 * (spine) edge of each page — dark at the fold, fading outward — gives the two
 * a symmetric gutter shadow. It rides on ::after so it paints over the page
 * image, and top/bottom:0 makes it track the page height at any zoom.
 *
 * Only in 2up mode: 1up and thumbnails have no spine.
 */
.BRmode2up .BRpagecontainer[data-side="L"]::after,
.BRmode2up .BRpagecontainer[data-side="R"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
}
.BRmode2up .BRpagecontainer[data-side="L"]::after {
    right: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
}
.BRmode2up .BRpagecontainer[data-side="R"]::after {
    left: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .15));
}

/*
 * Show/hide nav bar toggle — restores version 3's chevron (book5.js builds it).
 *
 * A small tab fixed to the bottom-right, sitting flush on top of the footer
 * bar. Clicking it slides the toolbar up and the footer down out of view for
 * distraction-free reading; clicking again brings them back. book5.js sets the
 * tab's `bottom` inline — the footer's height when the bars are shown, 0 once
 * the footer has slid away — so the tab tracks the bar and stays reachable.
 *
 * The bars animate their offset via a transition on top/bottom, which book5.js
 * drives by setting those properties inline.
 */
.br-ui-full .BRtoolbar {
    transition: top .3s ease;
}
.br-ui-full .BRfooter {
    transition: bottom .3s ease;
}

.BRnavToggle {
    position: fixed;
    right: 12px;
    /* bottom is set inline by book5.js (footer height, or 0 when hidden). */
    width: 44px;
    height: 26px;
    padding: 0;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background-color: #f4f4f4;
    /* The tab reuses BookReader's BRup/BRdn state classes, and BookReader.css
       gives .BRup a background chevron sprite (nav_control-up.png) for its own
       nav control. Drop it here — our SVG is the glyph, and the sprite was
       showing through as a second, filled triangle in the hidden state. */
    background-image: none;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .12);
    cursor: pointer;
    /* Above the book (.BRcontainer is z-index 1) but below the footer bar
       (.BRfooter is z-index 3), so the zoom buttons' hover tooltips — which
       stack inside the footer and pop up into the tab's corner — render in
       front of the tab rather than behind it. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom .3s ease;
}
.BRnavToggle:hover {
    background-color: #eaeaea;
}

/* SVG chevron. book5.js swaps the whole SVG between a down "v" (bars shown,
   click to hide) and an up "^" (bars hidden, click to show). */
.BRnavToggleChevron {
    display: block;
}