/* ==========================================================================
           #AP  The book, on the page stack
           ==========================================================================

           Opened from the trip menu's foot and from the Shelf (2026-09-18). A page on the stack,
           pushed by openTripBook with `log-page`, so the header's band and ink come from
           css/17m-journal.css; BACK returns to where it was opened. The header's right cell is
           kept empty for EDIT and DOWNLOAD PDF. The pages are the printed book's own images,
           turned by StPageFlip on the stock: nothing here dresses them.

           ⚠️ THE TOOLBAR IS AN EXCEPTION, ON THE OWNER'S WORD (2026-09-18, with a screenshot of a
           flipbook's bar: 工具栏可以做成截图的样子吗). A dark rounded pill of marks, floating under
           the book, is not this world's — its words are print caps on stock and its edges are
           rules. The reader is a desk, not a room of the log, and the bar is the desk's instrument,
           as the trip menu's marks are an exception for being scanned before they are read. It is
           drawn in the world's own oilskin, the cover boards' black, not a borrowed one. */

        .pgstack-page.bk-page,
        .pgstack-page.bk-page .pgstack-body { background: var(--log-stock); }

        .pgstack-page.bk-page .pgstack-body {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* ---- the desk and the book ------------------------------------------------------ */
        .pgstack-page.bk-page .bk-desk {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: grid;
            place-items: center;
            padding: var(--sp-md) var(--sp-lg) 0;
            -webkit-touch-callout: none;
            user-select: none;
        }

        .pgstack-page.bk-page .bk-book {
            width: 100%;
            max-width: 1000px;
            transition: transform 0.45s ease;
        }

        /* A page is its image, filling the leaf StPageFlip sizes. */
        .pgstack-page.bk-page .bk-pg { background: #fff; overflow: hidden; }
        .pgstack-page.bk-page .bk-pg img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            user-select: none;
            -webkit-user-drag: none;
            pointer-events: none;
        }

        /* One page at a time, the page's left edge is the spine: nothing is drawn past it (owner, 2026-09-18: 回翻的
           动效不对). StPageFlip turns back in portrait by swinging the page in from 350px left of the book, tilted
           76°, over the desk; clipped here, it comes out of the spine and sweeps across, and a page turned forward
           folds away into it — the one the mirror of the other. */
        .pgstack-page.bk-page .stf__wrapper.--portrait .stf__block { overflow: hidden; }

        /* Closed, a book is one board: the cover alone, or the back alone, not a spread with an empty page. */
        .pgstack-page.bk-page .bk-book.closed-front { transform: translateX(-25%); clip-path: inset(0 0 0 50%); }
        .pgstack-page.bk-page .bk-book.closed-back { transform: translateX(25%); clip-path: inset(0 50% 0 0); }
        @media (prefers-reduced-motion: reduce) {
            .pgstack-page.bk-page .bk-book { transition: none; }
        }

        /* ---- the magnifier: a round glass over the page, held above the finger ---------- */
        .pgstack-page.bk-page .bk-loupe {
            position: absolute;
            z-index: 5;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 2px solid var(--log-ink);
            background-color: #fff;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        .pgstack-page.bk-page .bk-loupe[hidden] { display: none; }

        /* ---- the toolbar: a pill of marks under the book --------------------------------- */
        .pgstack-page.bk-page .bk-bar {
            flex: none;
            align-self: center;
            display: flex;
            align-items: center;
            gap: 2px;
            margin: var(--sp-sm) var(--sp-lg) calc(var(--sp-sm) + env(safe-area-inset-bottom));
            padding: 2px 8px;
            border-radius: 0;   /* square (owner, 2026-09-18: 工具栏用直角的) */
            background: color-mix(in srgb, var(--log-oilskin) 84%, transparent);   /* the cover boards' black, as the reference's bar */
            color: var(--log-stock);
        }

        .pgstack-page.bk-page .bk-tool {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            color: inherit;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .pgstack-page.bk-page .bk-tool svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pgstack-page.bk-page .bk-tool[data-tool="pages"] svg { fill: currentColor; stroke: none; }
        .pgstack-page.bk-page .bk-tool:disabled { opacity: 0.35; cursor: default; }
        .pgstack-page.bk-page .bk-tool:active:not(:disabled) { background: color-mix(in srgb, var(--log-stock) 18%, transparent); }

        .pgstack-page.bk-page .bk-tool:focus-visible {
            outline: 2px solid var(--log-stock);
            outline-offset: -4px;
        }

        .pgstack-page.bk-page .bk-count {
            min-width: 64px;
            padding: 0 4px;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.08em;
            font-variant-numeric: lining-nums tabular-nums;
            text-align: center;
            white-space: nowrap;
        }

        /* When the book was made (2026-09-22): a small line under the bar, so a book made again can be told from the one before. */
        .pgstack-page.bk-page .bk-made {
            margin: 6px 0 0;
            text-align: center;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--log-ink-soft, var(--log-ink));
            opacity: .7;
        }

        /* ---- MORE, and its menu ----------------------------------------------------------- */
        /* MORE is a word in the header's right cell, as BACK is in its left. */
        .pgstack-page.bk-page .bk-more {
            min-height: 44px;
            min-width: 44px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-ink);
            cursor: pointer;
        }

        .pgstack-page.bk-page .bk-more:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--log-ink);
        }

        .pgstack-page.bk-page .pgstack-body { position: relative; }

        /* A sheet of stock hung from the header's right, under MORE: a firm edge, ruled rows, no shadow
           (The Plate-Not-Float Rule). */
        .pgstack-page.bk-page .bk-menu {
            position: absolute;
            z-index: 10;
            top: 0;
            right: var(--sp-lg);
            width: min(260px, calc(100% - 2 * var(--sp-lg)));
            background: var(--log-stock);
            border: 1px solid var(--log-rule-firm);
            border-top: none;
        }

        .pgstack-page.bk-page .bk-menu[hidden] { display: none; }

        /* MORE’S OLD GROUPED CHOICES WERE DRESSED HERE AND ARE GONE (2026-09-25).

           `.bk-menu-group` and `.bk-menu-choices` with its three button states: the book menu
           when PRIVACY was a row of choices to pick between. 741951d re-ruled MORE and made it
           a dropdown; `.bk-menu` itself is still built (03-map-plan.js), these two children are
           not, by any script. `git show 35b599e:public/css/17ze-book.css`. */


        .pgstack-page.bk-page .bk-menu-label {
            display: block;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }


        /* The three words, the chosen one in ink and underlined, as the profile form's choices. */



        /* What is to come: the word, softer, and its SOON; not pressable. */
        .pgstack-page.bk-page .bk-menu-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 44px;
            padding: 0 var(--sp-md);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        .pgstack-page.bk-page .bk-menu-row + .bk-menu-row { border-top: 1px solid var(--log-rule); }

        /* PRIVACY (2026-09-23): the row's label at the left, the choice at the right as an underlined word — a native
           select with its own arrow hidden, so the phone opens its picker and the word stays the world's. */
        .pgstack-page.bk-page .bk-menu-privacy { justify-content: space-between; }
        .pgstack-page.bk-page .bk-menu-privacy .bk-menu-label { display: inline; }
        .pgstack-page.bk-page .bk-menu-select {
            appearance: none;
            -webkit-appearance: none;
            min-height: 44px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            text-align: right;
            cursor: pointer;
        }
        .pgstack-page.bk-page .bk-menu-select:focus-visible { outline: 2px solid var(--log-ink); outline-offset: 2px; }

        /* EXPORT PDF's two kinds (2026-09-23), set in a step under their row, each with a line saying what it is for */
        .pgstack-page.bk-page .bk-menu-kinds { border-top: 1px solid var(--log-rule); }
        .pgstack-page.bk-page .bk-menu-kinds[hidden] { display: none; }
        .pgstack-page.bk-page .bk-menu-kind { padding-left: calc(var(--sp-md) * 2); }
        .pgstack-page.bk-page .bk-menu-hint {
            font-weight: 400;
            letter-spacing: 0.06em;
            text-transform: none;
            color: var(--log-ink-soft);
            text-align: right;
        }

        /* EDIT is live (2026-09-19): the row in ink, pressable; EXPORT PDF and PRINT stay soft with their SOON. */
        .pgstack-page.bk-page .bk-menu-go {
            width: 100%;
            margin: 0;
            border: none;
            border-radius: 0;
            background: none;
            color: var(--log-ink);
            text-align: left;
        }
        /* the word underlined, not the row: a flex row hands its underline to every child, the stamp and hint with it */
        .pgstack-page.bk-page .bk-menu-go > span:first-child {
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            cursor: pointer;
        }
        .pgstack-page.bk-page .bk-menu-go:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--log-ink); }

        /* ---- the diary has changed since the book was made: a ruled band over the desk ---------------------------- */
        .pgstack-page.bk-page .bk-stale {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-sm);
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule-firm);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.35;
            color: var(--log-ink);
        }

        .pgstack-page.bk-page .bk-update {
            flex: none;
            min-height: 44px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-ink);
            cursor: pointer;
        }
        .pgstack-page.bk-page .bk-update:disabled { color: var(--log-ink-soft); text-decoration: none; cursor: default; }
        .pgstack-page.bk-page .bk-update:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--log-ink); }

        .pgstack-page.bk-page .bk-opening {
            margin: 0;
            padding: var(--sp-2xl) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink-soft);
        }
        /* Unseen while it loads, but laid out: the book inside measures its text to cut its pages (display:none made
           every diary one page). The line above it stands in. */
        .pgstack-page.bk-page .bk-editor.is-loading { visibility: hidden; }

        /* ---- the editor: the book maker's document, filling its page of the stack ------------------------------------ */
        .pgstack-page.bk-page .bk-editor {
            flex: 1 1 auto;
            width: 100%;
            min-height: 0;
            border: 0;
            display: block;
            background: #a8a39a;
        }

        /* ---- all pages: small, in rows, each with its number ------------------------------ */
        .pgstack-page.bk-page .bk-thumbs {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
            gap: var(--sp-md) var(--sp-sm);
            padding: var(--sp-md) var(--sp-lg) calc(var(--sp-lg) + env(safe-area-inset-bottom));
        }

        .pgstack-page.bk-page .bk-thumb {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            color: var(--log-ink-soft);
            cursor: pointer;
        }

        .pgstack-page.bk-page .bk-thumb img {
            display: block;
            width: 100%;
            aspect-ratio: 1120 / 1588;
            object-fit: cover;
            background: var(--log-stock-band);
            outline: 1px solid var(--log-rule);
        }

        .pgstack-page.bk-page .bk-thumb span {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.08em;
            font-variant-numeric: lining-nums tabular-nums;
        }

        .pgstack-page.bk-page .bk-thumb:focus-visible {
            outline: 2px solid var(--log-ink);
            outline-offset: 2px;
        }