/* ==========================================================================
           #AN  The trip menu, in the deck log
           ==========================================================================

           Migrated 2026-09-14 (owner: 还有最后两个页面 trip menu 和 trip settings 迁移; trip settings
           left as it is on the owner's answer, being already in the deck log). The journey's
           contents page, opened from the map page's CONTENTS: its cover, its name and dates, six
           figures, and one ruled row for each room.

           ⚠️ ONE SCREEN, AND NINE CELLS WITH THEIR MARKS (owner, 2026-09-14: 还是想要九宫格的样式
           加上图标 可以是个例外 。。。 主要是想一屏放下所有内容). The first round made the rooms
           nine ruled rows of words, after the sidebar, and on a phone the drawer scrolled. The whole
           contents page belongs on one screen: nine cells in three rows fit it, and a mark over each
           word is what makes a cell that small quick to find. The marks are an exception to the
           no-glyphs rule, like the weather's day marks, and are the drawer's own, in ink. Everything
           else is the world's: a stock ground, a firm edge, a band for the name, print-caps words,
           ruled lattice, lining figures, and SHARE as an underlined word.

           The cover gives way first, down to a floor, so the rest always fits. The checklist and the
           weather dock under its bottom edge (dockPageInDrawer) and follow it; the owner said its
           size may change.

           ⚠️ EVERY RULE NAMES #tripDetailsDrawer or #tripDetailsBackdrop: the legacy rules for these
           classes are gone, and the ids keep this room's dressing out of anything else. */

        #tripDetailsBackdrop {
            position: fixed;
            inset: 0;
            background: rgba(22, 25, 26, 0.42);   /* the oilskin, not the outgoing #242424 (2026-09-17) */
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 40;
        }

        #tripDetailsBackdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        #tripDetailsDrawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 82%;
            max-width: 340px;
            z-index: 41;
            transform: translateX(100%);
            visibility: hidden;
            transition: transform 0.3s ease, visibility 0s linear 0.3s;
            display: flex;
            flex-direction: column;
            /* One screen: nothing here scrolls. The cover is what gives way. */
            overflow: hidden;
            background: var(--log-stock);
            /* Paper over a page: the join is a firm rule, never a shadow (The Plate-Not-Float Rule). */
            border: none;
            border-left: 1px solid var(--log-rule-firm);
            box-shadow: none;
        }

        #tripDetailsDrawer.open {
            visibility: visible;
            transition: transform 0.3s ease;
            transform: translateX(0);
        }

        /* ---- the cover: a plate --------------------------------------------------- */
        /* It takes what the rows leave, between a floor and a ceiling, as it did. */
        #tripDetailsDrawer .trip-details-cover {
            flex: 1 1 auto;
            min-height: 68px;
            /* 200, not 260 (owner, 2026-09-21: cover pic可以再矮些). The picture is the journey's face, not its
               subject; what the drawer is for begins under it. */
            max-height: 200px;
            background-size: cover;
            background-position: center;
            background-color: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        /* No photograph: the sheet's own ruling, as the trip settings' cover plate draws it. */
        #tripDetailsDrawer .trip-details-cover.is-blank {
            background-image: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--log-row) - 1px),
                var(--log-rule) calc(var(--log-row) - 1px),
                var(--log-rule) var(--log-row));
        }

        /* ---- the name and the dates: a band ---------------------------------------- */
        #tripDetailsDrawer .trip-details-head {
            flex: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-md);
            min-height: var(--log-row);
            box-sizing: border-box;
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        #tripDetailsDrawer .trip-details-cover-title {
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 600;
            letter-spacing: 0.02em;
            line-height: 1.2;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #tripDetailsDrawer .trip-details-cover-year {
            margin-top: 2px;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }

        /* ---- six figures, two ruled rows -------------------------------------------- */
        /* The journey's shape above, what it left behind below. Lining figures: the old-style
           ones printed 18 as "I8" and 0 as "O". */
        #tripDetailsDrawer .trip-details-stats { flex: none; }

        /* ⚠️ THE FIGURES ARE NOT THE DOORS (owner, 2026-09-21: 上面两行是旅行数据 没有和下面按钮分开 很容易误解 · 比如想
           看照片 应该点gallery 但是会点photo). Six figures in a ruled lattice, nine doors in a ruled lattice, one under
           the other: PHOTOS is a count and GALLERY is a room, and they were drawn as the same kind of thing. A
           reader who wants the pictures presses the figure.

           Three lines say it now, to the owner's own drawing. Between two figures a SHORT rule, clear of the top
           and bottom of its cell — enough to separate a column, not enough to build a box. Between the two rows of
           figures a hairline across. Between the figures and the doors, the firmest rule in the drawer: that is
           the edge where reading becomes pressing. And the doors themselves lost their lattice (below), so the
           block that can be pressed is the one that is NOT ruled. */
        #tripDetailsDrawer .tm-stats-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        /* The one rule that runs the whole way across: the foot of the figures, where reading stops. */
        #tripDetailsDrawer .tm-stats-row:last-child { border-bottom: 1px solid var(--log-rule-firm); }

        /* Two hairlines a cell may carry, both as backgrounds (see the note above): one down its left edge, one
           along its foot. Neither is drawn unless a rule below gives it a size, and both stop short of the cell's
           corners — the line between the two rows is broken under each figure as well now (owner, 2026-09-21:
           中间的分割线也改成断的), so nothing in this block closes into a box. A box is what the doors under it are not
           wearing either; ruled boxes are for records, and these are readings. */
        #tripDetailsDrawer .tm-stat {
            position: relative;
            padding: var(--sp-xs) var(--sp-2xs);
            text-align: center;
            background-image: linear-gradient(var(--log-rule), var(--log-rule)),
                              linear-gradient(var(--log-rule), var(--log-rule));
            background-repeat: no-repeat, no-repeat;
            background-position: left center, center bottom;
            background-size: 0 0, 0 0;
        }

        /* The short rule is a background, not a pseudo-element: nothing in this drawer draws in ::before or ::after,
           and the capture checks it (tripMenuHonest) — the rule exists so that a glyph cannot creep in that way, and
           a hairline is not worth an exception to it. A one-pixel strip, a little over half the cell's height, held
           at its left edge. */
        #tripDetailsDrawer .tm-stat + .tm-stat { background-size: 1px 56%, 0 0; }
        #tripDetailsDrawer .tm-stats-row:first-child .tm-stat { background-size: 0 0, 56% 1px; }
        #tripDetailsDrawer .tm-stats-row:first-child .tm-stat + .tm-stat { background-size: 1px 56%, 56% 1px; }

        #tripDetailsDrawer .tm-stat-fig {
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 600;
            line-height: 1.1;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
        }

        #tripDetailsDrawer .tm-stat-label {
            margin-top: 3px;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        /* ---- the rooms: nine cells in a ruled lattice --------------------------------- */
        /* The lattice is the grid's own gap over the rule's colour, as the calendar draws its
           days: one hairline between any two cells, and none doubled. */
        /* No lattice between the doors (owner, 2026-09-21: 按钮之间不要分割线试试). Nine cells in a grid of hairlines
           read as a table of records — which is what the figures above them are — and the whole point of this round
           is that these are not that. Unruled, they read as what they are: a field of ways out of this page. Each
           still says which it is in a word, and still marks its press. */
        #tripDetailsDrawer .tm-menu {
            flex: none;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0;
            background: var(--log-stock);
            border-bottom: 1px solid var(--log-rule);
        }

        #tripDetailsDrawer .tm-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 64px;
            box-sizing: border-box;
            margin: 0;
            padding: var(--sp-xs) var(--sp-2xs);
            background: var(--log-stock);
            border: none;
            border-radius: 0;
            color: var(--log-ink);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        /* The mark, in ink: 1.5px line, as it was drawn. */
        #tripDetailsDrawer .tm-mark {
            width: 20px;
            height: 20px;
            flex: none;
            color: var(--log-ink);
        }

        #tripDetailsDrawer .tm-word {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.2;
            color: var(--log-ink);
        }

        /* The Ink-Not-Glow Rule: pressing thickens the cell's own baseline. */
        #tripDetailsDrawer .tm-cell:active { box-shadow: inset 0 -2px 0 0 var(--log-ink); }

        /* ---- two things at the foot: SHARE THE PLAN · MAKE A BOOK --------------------------- */
        /* Two blocks on the oilskin, light lettering (owner, 2026-09-21: 变成两个按钮 深底浅字). They were two words on
           the stock with a stamp under each, which read as two more figures at the bottom of a page of figures —
           and they are the only two things in this drawer that MAKE something rather than open something. The
           oilskin is this world's primary control (02-auth.css), and it is used here for the first time outside a
           cover band and a sign-in sheet.

           ⚠️ ONE OF THEM IS NOT BUILT, AND MUST NOT LOOK BUILT. A solid dark block is an invitation, and SHARE THE
           PLAN answers nothing yet. So the pair are the same shape and not the same ink: what is ready sits on the
           oilskin, what is coming sits on the firm rule's grey — dark, of a piece with its neighbour, plainly
           quieter — and keeps the SOON stamp that has always said so. Its element is not a button and takes no
           press; when sharing is built it becomes one and moves onto the oilskin, and nothing else here changes. */
        #tripDetailsDrawer .tm-foot {
            flex: none;
            display: flex;
            align-items: stretch;
            gap: 1px;
            min-height: var(--log-row);
            box-sizing: border-box;
            padding: var(--sp-sm) var(--sp-lg) calc(var(--sp-sm) + env(safe-area-inset-bottom, 0px));
            background: var(--log-stock);
        }

        #tripDetailsDrawer .tm-soon {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            min-height: 52px;
            box-sizing: border-box;
            padding: var(--sp-xs) var(--sp-sm);
            border: none;
            background: var(--log-rule-firm);      /* what is coming: the same block, quieter */
            color: var(--log-on-oilskin);
        }

        /* One line each, never wrapped; on the narrowest phones the caps close up a little
           (finish review, 2026-09-18: SHARE THE PLAN stood 4px off the rule at 320). */
        #tripDetailsDrawer .tm-soon .tm-soon-what { white-space: nowrap; }
        @media (max-width: 359px) {
            #tripDetailsDrawer .tm-soon .tm-soon-what { letter-spacing: 0.08em; }
        }

        #tripDetailsDrawer .tm-soon-what {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-on-oilskin);
        }

        /* The stamp under the word is on the dark too: the same hairline box, in the light ink. */
        #tripDetailsDrawer .tm-soon .log-note-stamp {
            color: var(--log-on-oilskin);
            border-color: var(--log-on-oilskin);
            opacity: 0.85;
        }

        /* A book that exists is a press: the oilskin, and the block lifts its own baseline when pressed. */
        #tripDetailsDrawer .tm-soon.is-ready {
            background: var(--log-oilskin);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        #tripDetailsDrawer .tm-soon.is-ready:active { box-shadow: inset 0 -3px 0 0 var(--log-on-oilskin); }

        /* ---- focus is ink ------------------------------------------------------------ */
        #tripDetailsDrawer .tm-close:focus-visible,
        #tripDetailsDrawer .tm-cell:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--log-ink);
        }
        /* On the oilskin the ink ring cannot be seen: the light one, inset, as the sign-in sheet's own. */
        #tripDetailsDrawer .tm-soon.is-ready:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--log-on-oilskin);
        }

        #tripDetailsDrawer .tm-headtext { min-width: 0; }
        /* What CONTENTS holds, in the written voice under the name (2026-09-17). */
        #tripDetailsDrawer .tm-gloss {
            margin-top: 2px;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.35;
            color: var(--log-ink-soft);
            text-wrap: balance;   /* at 320, beside CLOSE, it takes two lines: two even ones, not a word left on its own */
        }

        /* CLOSE on the band, as the docked rooms carry it. */
        #tripDetailsDrawer .tm-close {
            flex: none;
            min-height: 44px;
            min-width: 44px;   /* CLOSE in micro caps is 40px wide; the press is not (finish review, 2026-09-14) */
            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;
        }

        /* AUD with the figure, small, as the ledger prints its total: the label stays two words on one line. */
        #tripDetailsDrawer .tm-cur {
            margin-left: 3px;
            font-size: var(--fs-micro);
            letter-spacing: 0.08em;
            color: var(--log-ink-soft);
        }

        /* ⚠️ A SCREEN SHORTER THAN 600px (trip menu review, 2026-09-14): a phone held sideways, a 568px phone with its
           toolbars showing, a zoomed browser. The cover gives up its floor, the cells come down to the 44px a thumb
           needs, the marks and figures a step smaller; and if that still does not fit, the drawer scrolls rather than
           cutting off the last row and SHARE, which is what it did. One screen stays the rule from 600px up. */
        @media (max-height: 599px) {
            #tripDetailsDrawer { overflow-y: auto; }
            #tripDetailsDrawer .trip-details-cover { min-height: 0; flex-basis: 0; }
            #tripDetailsDrawer .tm-stat { padding: 2px var(--sp-2xs); }
            #tripDetailsDrawer .tm-stat-fig { font-size: var(--fs-base); }
            #tripDetailsDrawer .tm-cell { min-height: 44px; gap: 2px; padding: 2px var(--sp-2xs); }
            #tripDetailsDrawer .tm-mark { width: 16px; height: 16px; }
        }