/* ==========================================================================
           #AA  One day of the journey — what was planned, what was written, what was kept
           ==========================================================================

           The page behind OPEN DAY on the Calendar, and behind a cell on either grid.
           Migrated into the deck log on 2026-09-11, straight after the Calendar, because
           that is where it is reached from and a room you can reach in one press from a
           migrated room should not be a different world.

           It was already HALF migrated before this file existed, which is the honest reason
           it went next: the date bar (`.jp-nav` / `.jp-date`) is the journal entry's, shared
           on purpose so one control cannot become two; the BACK word came off all nine stack
           pages on 2026-09-10; and the journal cards it lists are drawn by the same
           `renderJournalCard` the journal list uses. Head and date bar in this world, body
           in the outgoing one.

           ⚠️ THE CARD IS NO LONGER SCOPED AWAY FROM THIS PAGE. Round two scoped every
           `.jrnl-` rule to `#journalContent` precisely so this page would keep what it had
           while it was still cream. Those rules are scoped to `.jrnl-list` now — the
           container BOTH rooms wrap their cards in — and the dozen `.tday-entries
           .jrnl-card-*` overrides in 06-pagestack.css and 24-tail.css are gone. One
           card, one dressing, two rooms; what differs here is written below and only what
           differs. */

        /* ---- the page ---------------------------------------------------------- */

        .pgstack-root .pgstack-page.tday-page .pgstack-body {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding-bottom: 0;
            background: var(--log-stock);
        }

        .tday-scroll {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* ⚠️ A STEP OF PADDING, NOT JUST THE NOTCH. This was `env(safe-area-inset-bottom)`
               alone, which is ZERO on every machine without a notch — so when the
               photographs ran past one screen the last row sat flush against the bottom
               edge. The correction was made once already, at the tail of 24-tail.css, two
               hundred lines from the rule it corrected; it is in the rule now. */
            padding-bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px));
            background: var(--log-stock);
        }

        /* ⚠️ FOUR BANDS OF THE SAME GREY, ONE UNDER ANOTHER (owner, 2026-09-11: 上半部分
           从页眉到 Itinerary 看着背景颜色都一样 分不清).

           The page header, the date bar, the day's own line and the first section head were
           all --log-stock-band, separated by hairlines — so the top third of the page was
           one undifferentiated block, and nothing said which part was the app, which was the
           instrument and which was the day. A world with two grounds has to spend them on
           the distinction that matters; all four had been given the same one.

           1. THE DATE AND THE DAY'S LINE ARE ONE BLOCK, INSIDE THE BAR. They answer the same
              question — WHICH DAY IS THIS — and were two rows in two containers, with
              PREVIOUS and NEXT level with only the first of them. The line moved into the
              bar's middle column (see renderTripDayPage) and the two centre together, which
              is the shape the owner drew.
           2. THE SECTION HEADS STOPPED BEING BARS. See .tday-head.

           The header stayed a band — it was the only one of the four that is not part of the
           page. Making it the oilskin was tried and put back; the note is in
           css/17m-journal.css. */

        /* The middle column of the date bar: the date, and what that date is. */
        .tday-when {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            min-width: 0;
        }

        /* The bar centres on the PAIR rather than sitting on one baseline — with two lines
           in the middle, baseline alignment put PREVIOUS and NEXT level with the date and
           left the second line hanging below them. */
        .pgstack-page.tday-page .jp-nav { align-items: center; }

        .tday-context {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
            text-align: center;
        }


        .tday-sec + .tday-sec { border-top: 1px solid var(--log-rule-firm); }

        /* 2 — A SECTION HEAD IS A RULING ON THE SHEET, NOT A FILLED BAR. It was the band,
           which made it the third or fourth grey bar in a row down the top of the page and
           gave a heading the same weight as the app's own chrome. Printed type on the stock
           with the section's rule above it is what a ruled form does, and it leaves the two
           grounds meaning one thing each: the band is the app, the stock is the record. */
        .tday-head {
            padding: var(--sp-md) var(--sp-lg) var(--sp-xs);
            background: transparent;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
        }

        .tday-empty {
            padding: var(--sp-md) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink-soft);
        }

        .tday-note {
            padding: 0 var(--sp-lg) var(--sp-md);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.5;
            color: var(--log-ink-soft);
        }

        /* Ruled-To-The-Foot: what is left under the last section carries the ruling. On a
           spacer after the content, never behind it — see the note in
           css/17n-journal-list.css. */
        .tday-fill {
            flex: 1 1 auto;
            min-height: 0;
            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));
        }

        /* ---- what was planned --------------------------------------------------- */

        /* A ruled row: the time in the printed voice because it is a coordinate, the name
           in the written voice because it is what the traveller called it. The same grammar
           as the second home's day and as the Calendar's day panel.

           ⚠️ THE ROW OWNS ITS OWN INSET NOW. The list was emitted as `<div class="itin2
           tday-acts">`, and `.itin2` is the Itinerary tab's wrapper — its only declaration
           is `padding: 0 16px`. So every activity sat sixteen pixels further in than the
           ITINERARY head above it and than everything else on the page: a second margin
           column, invisible in the stylesheet because it came from a class borrowed for
           nothing else. Dropped from the markup. */
        .tday-act {
            display: flex;
            align-items: baseline;
            gap: var(--sp-md);
            min-height: 44px;
            padding: var(--sp-xs) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
            cursor: pointer;
        }

        .tday-acts > .tday-act:last-child { border-bottom: none; }

        .tday-act:active { background: var(--log-stock-band); }

        /* A stay's run of dates needs more than a clock does, and it is the only row that
           spans more than one day — the wider column is what says so without a label. */
        .tday-act.is-stay .tday-act-time { width: 96px; }

        .tday-act-time {
            flex: none;
            width: 44px;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.06em;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }

        .tday-act-name {
            flex: 1;
            min-width: 0;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* ---- what was written --------------------------------------------------- */

        /* The journal cards, dressed by css/17n-journal-list.css off `.jrnl-list`. Only the
           differences are here, and there are two: this page IS the day, so the card drops
           the dateline that would restate the heading three lines above it, and it is not
           one item in a list, so it drops the rule between items — the section's own rule
           already separates it from what is next. */
        .tday-entries { padding: var(--sp-md) var(--sp-lg); }

        .tday-entries .jrnl-card {
            padding: 0;
            border-bottom: none;
            background: transparent;
        }

        .tday-entries .jrnl-card + .jrnl-card {
            margin-top: var(--sp-md);
            padding-top: var(--sp-md);
            border-top: 1px solid var(--log-rule);
        }

        .tday-entries .jrnl-card-date { display: none; }

        /* The excerpt runs to four lines here rather than three: on the list a card is one
           of many and has to be scannable, and on this page it is the day's writing. */
        .tday-entries .jrnl-card-excerpt,
        .tday-entries .jrnl-card-excerpt.clamp2 { -webkit-line-clamp: 4; }

        .tday-write {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        /* Writing the day changes the record, so it takes the magenta — the same act, the
           same colour, as WRITE AN ENTRY at the foot of the journal's list. */
        .tday-write-btn {
            min-height: 44px;
            padding: 0 var(--sp-lg) var(--sp-md);
            border: none;
            background: none;
            cursor: pointer;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-magenta);
        }

        .tday-write-btn:active { box-shadow: inset 0 -2px 0 0 var(--log-magenta); }

        /* ---- what was kept ------------------------------------------------------ */

        .tday-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1px;
            padding: 1px;
            background: var(--log-rule);
        }

        .tday-tile {
            position: relative;
            aspect-ratio: 1;
            min-width: 0;
            overflow: hidden;
            background: var(--log-stock-band);
            cursor: pointer;
        }

        .tday-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ADDING PHOTOGRAPHS IS A WORD, not a plus sign in a dashed square. It writes to the
           record, so it is magenta; it sits in the grid because that is where the
           photographs are, and it keeps the tile's square so the grid stays a grid. */
        .tday-add-tile {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            min-width: 0;
            padding: 0;
            border: none;
            background: var(--log-stock-band);
            cursor: pointer;
            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);
        }

        .tday-add-tile:active { background: var(--log-stock); }

        /* A photograph with no row in `media` — one attached straight to an entry — opens
           as a plain overlay rather than in the Gallery's viewer, whose footer offers
           linking, favouriting and deleting, all of which act on a row that does not exist.
           The oilskin behind it, which is what this world has instead of near-black. */
        .tday-lightbox {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--sp-lg);
            background: rgba(22, 25, 26, 0.94);
            cursor: pointer;
        }

        .tday-lightbox img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* A photograph tile, focused (review of the focus round, 2026-09-15): the app's inset box was painted under the
           picture filling it. The mark is a layer above it, paper outside ink. */
        .tday-tile[role="button"]:focus-visible { box-shadow: none; }
        .tday-tile[role="button"]:focus-visible::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            border: 2px solid var(--log-stock);
            box-shadow: inset 0 0 0 2px var(--log-ink);
        }