/* ==========================================================================
           #AL  The checklist, in the deck log
           ==========================================================================

           Migrated 2026-09-14 (owner: 开始迁移 check list). A page on the stack, pushed by
           showChecklist with `log-page`, so the header's band and ink come from
           css/17m-journal.css like every other migrated stack page.

           ⚠️ ITS SIZE AND PLACE ARE NOT THIS FILE'S (owner, 2026-09-14: check list 大小位置是根据
           trip menu cover page的高度来的 迁移不要更改 weather也是一样的). dockPageInDrawer measures
           the contents drawer's cover and writes the page's top, left and width inline; nothing
           here sets a position, a width or a height on the page. The docked header's 20px
           inset in 06-pagestack.css is kept too, and this room's column is that 20px, so
           the words under the header start where CHECKLIST does.

           THE COMPOSITION. One ruled column:

               CHECKLIST                                   CLOSE
               ═════════════════════════════════════════════════
               [████████████░░░░░░░░░░░░░░░░░░░░░░]       2 OF 6
               ─────────────────────────────────────────────────
               □  E-visa printed                          REMOVE
               ─────────────────────────────────────────────────
                                                     ADD AN ITEM
               ─────────────────────────────────────────────────
               DONE                                (the band)
               ═════════════════════════════════════════════════
               ⧄  Passports, and the copies               REMOVE

           What went: the tick drawn as a picture in a filled box, the × on every row and on
           the header, "+ Add" in the outgoing accent, the struck-through words, the dotted
           line, and two tinted blocks standing for two lists. A done item is a STRUCK BOX,
           the world's one gesture for done (DESIGN.md, The Struck Checkbox); its words stay
           readable in soft ink rather than being struck as well: one gesture for done, not two
           (The Struck Checkbox), and a struck name reads as cancelled rather than completed
           (the log page's past journeys, "No strike on a finished journey"). */

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

        /* ---- the way out: a word ------------------------------------------------- */
        .pgstack-page.cl-page .cl-close {
            width: auto;
            height: auto;
            min-height: 44px;
            padding: 0;
            border: none;
            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);
        }

        /* ---- how much is done ----------------------------------------------------- */
        /* A rail, as the ledger draws a total made of parts: one ruled strip, the done part in
           ink. No transition: the world moves nothing but the checkbox's stroke. */
        .pgstack-page.cl-page .cl-progress {
            display: flex;
            align-items: center;
            gap: var(--sp-md);
            min-height: var(--log-row);
            box-sizing: border-box;
            margin: 0;
            padding: 0 20px;
            border-bottom: 1px solid var(--log-rule);
            background: none;
        }

        .pgstack-page.cl-page .cl-progress-track {
            flex: 1;
            height: 10px;
            box-sizing: border-box;
            border: 1px solid var(--log-rule-firm);
            background: var(--log-stock);
        }

        .pgstack-page.cl-page .cl-progress-fill {
            width: 0;
            height: 100%;
            background: var(--log-ink);
        }

        .pgstack-page.cl-page .cl-progress-label {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
            white-space: nowrap;
        }

        /* ---- an item --------------------------------------------------------------- */
        /* The box and the words are ONE control, a checkbox, so the whole line is what a thumb
           presses; REMOVE is a second control beside it, at the right-hand end of the rule,
           where every act in this world sits. */
        .pgstack-page.cl-page .cl-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: stretch;
            min-height: var(--log-row);
            box-sizing: border-box;
            border-bottom: 1px solid var(--log-rule);
        }

        .pgstack-page.cl-page .cl-tick {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr);
            align-items: center;
            gap: 0 var(--sp-sm);
            width: 100%;
            min-height: var(--log-row);
            box-sizing: border-box;
            margin: 0;
            /* Room on the right so the focus rule does not run into the last word. */
            padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) 20px;
            border: none;
            border-radius: 0;
            background: none;
            text-align: left;
            font: inherit;
            color: var(--log-ink);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        /* ⚠️ THE STRUCK BOX. A 20px square in the firm rule; done draws a single 12x2 stroke of
           ink at -45° on `::before`, as the terms checkbox does. */
        .pgstack-page.cl-page .cl-box {
            position: relative;
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            border: 1px solid var(--log-rule-firm);
            background: var(--log-stock);
        }

        .pgstack-page.cl-page .cl-item.is-done .cl-box::before {
            content: '';
            position: absolute;
            left: 3px;
            top: 8px;
            width: 12px;
            height: 2px;
            background: var(--log-ink);
            transform: rotate(-45deg);
        }

        .pgstack-page.cl-page .cl-text {
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.4;
            color: var(--log-ink);
            overflow-wrap: anywhere;
        }

        .pgstack-page.cl-page .cl-item.is-done .cl-text { color: var(--log-ink-soft); }

        /* Removing changes the record, so the word is magenta (owner, 2026-09-17: 打开表单算写记录，删除统一用品红). It was ink, on the
           argument that magenta down every row would say the whole list is at risk; every removal
           now reads the same. */
        .pgstack-page.cl-page .cl-remove {
            min-height: 44px;
            margin: 0;
            padding: 0 20px 0 var(--sp-md);
            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-magenta);
            cursor: pointer;
        }

        /* ---- adding ------------------------------------------------------------------ */
        /* The act that adds to the list, at the right-hand end of its rule and in magenta, as
           the journal's WRITE AN ENTRY is. Pressed, the word gives way to a line to write on;
           Enter adds and keeps the line open for the next. */
        .pgstack-page.cl-page .cl-add {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            min-height: var(--log-row);
            box-sizing: border-box;
            padding: 0 20px;
            border-bottom: 1px solid var(--log-rule);
        }

        .pgstack-page.cl-page .cl-add-word {
            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.16em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-magenta);
            cursor: pointer;
        }

        .pgstack-page.cl-page .cl-add-word:active { box-shadow: inset 0 -2px 0 0 var(--log-magenta); }

        /* Id and class together, to outrank the tap-target rule in 05-interaction.css that
           names #checklistInput. The words start where an item's words do. */
        .pgstack-page.cl-page #checklistInput {
            flex: 1;
            min-width: 0;
            height: auto;
            min-height: 44px;
            margin: 0;
            padding: 0 0 0 calc(20px + var(--sp-sm));
            border: none;
            border-radius: 0;
            background: none;
            box-shadow: none;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            letter-spacing: normal;
            color: var(--log-ink);
            caret-color: var(--log-ink);
        }

        .pgstack-page.cl-page #checklistInput::placeholder { color: var(--log-ink-soft); opacity: 1; }

        /* Writing, the line under it is two pixels of ink: the rule turns ink and one more
           pixel lies on it, as the Files search does. */
        .pgstack-page.cl-page .cl-add:has(#checklistInput:focus) {
            border-bottom-color: var(--log-ink);
            box-shadow: inset 0 -1px 0 var(--log-ink);
        }

        /* ---- what is done ------------------------------------------------------------ */
        .pgstack-page.cl-page .cl-band {
            display: flex;
            align-items: center;
            min-height: var(--log-row);
            box-sizing: border-box;
            padding: 0 20px;
            border-bottom: 1px solid var(--log-rule-firm);
            background: var(--log-stock-band);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        /* A state said in words, in the reader's own voice. */
        .pgstack-page.cl-page .cl-empty {
            margin: 0;
            padding: var(--sp-md) 20px;
            border-bottom: 1px solid var(--log-rule);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
        }

        /* ---- focus is ink ------------------------------------------------------------ */
        /* An inset rule, as Files and the journal's cards take: the ring in 05-interaction.css
           is the outgoing grey-green, and outside a full-width row it is clipped. */
        .pgstack-page.cl-page .cl-close:focus-visible,
        .pgstack-page.cl-page .cl-tick:focus-visible,
        .pgstack-page.cl-page .cl-remove:focus-visible,
        .pgstack-page.cl-page .cl-add-word:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--log-ink);
        }