/* ══════════════════════════════════════════════════════════════
           MOVED OUT OF css/08-legacy-itinerary.css · 2026-09-21  (prepended)
           1 rules. DESIGN.md: a surface's rules go in that surface's part, and the
           legacy parts only shrink.
           ⚠️ 08-legacy-itinerary.css loaded BEFORE this file. Placing them
           at the head keeps their order against THIS PART’S OWN rules — and nothing else.
           Against the parts BETWEEN #36 and #7 the order is reversed by this move, and
           whether that matters was a separate question somebody had to answer. See DESIGN.md.
           ══════════════════════════════════════════════════════════════ */
        /* ===== The expense form before it was the receipt — REMOVED 2026-09-21 =====
           Eighty lines dressed `#expenseModal` as the old field-and-label form: .form-input,
           .form-textarea, .category-selector, .amount-input-wrapper, .upload-preview, .upload-text,
           .modal-actions with its three .btn-*, .modal-header/-title/-subtitle, .form-label,
           .selected-category. The form was rebuilt as the receipt on 2026-09-13 (put('expenseModal')
           in 34-markup-activity.js, .tk-* and .exr-*), and not one of those classes has been in the
           room since. They were unreachable, not merely overridden: npm run css:dead could not see
           them because it asks whether a class exists ANYWHERE, and every one of these exists in
           #addActivityModal or #planTripModal — the combination `#expenseModal .modal-actions` is
           what never occurs. Checked against the live DOM, where all thirteen count 0.
           They carried 12 of this file's outgoing-world tokens with them. */
        .exp-member { display: flex; align-items: center; gap: 8px; }   /* live: 02-state.js writes .tk-share.exp-member */

        /* ==========================================================================
           #AF  Expenses — the ledger
           ==========================================================================

           Migrated 2026-09-12, the first of the three rooms still left on the trip's
           section sheet. It was drawn with 58 inline `style` attributes — fonts, colours,
           borders and grounds written into the markup where no stylesheet can reach them —
           so the round was a rewrite of `switchJournalView('ledger')` and not a change of
           clothes. The arithmetic, the three readings and every figure are the ones that
           were there; what moved is where they are measured.

           ⚠️ EVERY RULE IS QUALIFIED BY `#tripSectionSheet`, for the reason 17q, 17s and 17j
           are: the shared `.modal-*`, `.btn` and sheet rules live in files that load AFTER
           this one, so an unqualified rule would lose on order and an id-qualified one wins
           on specificity wherever it sits.

           THE COMPOSITION. One column, ruled, with the margin block carrying the category's
           own colour — the same mark Saved and the Calendar make of the same table, and the
           only colour on the sheet.

               ▪  STAYS                    440.00      38%
               ─────────────────────────────────────────────

           A total made of parts is a RAIL, not a ring: the journey's own head already draws
           its nights that way, and a circle is a shape this world does not have. The figure
           above it is print-face, tabular, and it is the reader's own total and nothing
           else — the party's total came off on the owner's word (费用属于个人隐私 …
           圆环里的数字 应该是个人花费总计). */

        /* ---- the room ------------------------------------------------------------ */
        /* ⚠️ THE CONTAINER'S OWN INSET, WHICH IS NOT THIS ROOM'S TO KEEP. `.journal-section`
           carries `padding: 16px 0` and is shared with the journal; in a ruled sheet that
           16px reads as a band of bare stock between the head and the first rule, and
           another under the last. Asked for by `:has()` rather than taken off the shared
           class, because the journal was drawn against it — the same reasoning as the link
           picker's `.pa-search`, scoped rather than changed under a room nobody asked about.
           `:has()` is already used in css/17q-editor.css, so it is not a new dependency. */
        #tripSectionSheet .journal-section:has(.ex-wrap) { padding: 0; }
        /* And the sheet body's own 8px above it, found by the check that asks whether anything
           stands between the head and the views: a strip of the sheet's ground, a different
           stock from the ledger's, which is what drew a second line under the head. */
        #tripSectionSheetBody:has(.ex-wrap) { padding-top: 0; }

        #tripSectionSheet .ex-wrap {
            background: var(--log-stock);
            min-height: 100%;
            /* ⚠️ ONE MONEY COLUMN DOWN THE WHOLE LIST. The owner, of the opened category:
               by category 打开后 里面数字没有对齐. Two faults, both of them a column
               sized by something other than the money in it.

               An entry's figure sat LEFT in its column, because the column was as wide as
               the FULL IDR 11,587,500.00 line beneath it — so 31.76 and 458.03 started at
               the same x and ended nowhere near each other. And the band's figure sat one
               word in from the row's edge while the entries under it ran to the edge, so a
               total and its own lines were in two different columns.

               The word at the right is a FIXED column now, the entries are inset by exactly
               that column, and every figure is right-aligned in its own. One edge. */
            --ex-act: 54px;
        }

        /* ---- which reading of the ledger ----------------------------------------- */
        /* ⚠️ NOT A SECOND HEAD. The owner, of this row: overview by category … 现在看着像有两个
           页眉. It was dressed exactly as the sheet's head above it — the band ground, a
           full-width firm rule under it, 44px of tracked print capitals — so the sheet read as
           two heads stacked, the second with nothing to head. A head names the room and carries
           its acts; this row only chooses which reading of the room is below.

           So it is dressed as My friends' filters are, which do the same job: the words on the
           room's own stock, no band, no rule, the current one in full ink and underlined. The
           head's rule stays the only rule above the figure. */
        #tripSectionSheet .ex-views {
            display: flex;
            align-items: center;
            gap: 0 var(--sp-lg);
            padding: var(--sp-xs) var(--sp-lg) 0;
            border-bottom: none;
            background: var(--log-stock);
        }

        #tripSectionSheet .ex-view {
            min-height: 44px;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            cursor: pointer;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        #tripSectionSheet .ex-view.is-on {
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.3em;
            text-decoration-thickness: 1px;
        }

        /* ---- the figure ---------------------------------------------------------- */
        /* One number, said once, with the thing it is an answer to printed above it in the
           instrument's voice. It was 22px serif inside a 210px ring; it is the largest
           thing on the sheet now and it does not need a circle drawn round it to be. */
        #tripSectionSheet .ex-total {
            padding: var(--sp-lg) var(--sp-lg) var(--sp-sm);
        }

        #tripSectionSheet .ex-total-what {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        #tripSectionSheet .ex-total-fig {
            margin-top: var(--sp-2xs);
            font-family: var(--log-print);
            font-size: 34px;
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            line-height: 1;
            color: var(--log-ink);
        }

        #tripSectionSheet .ex-total-cur {
            margin-left: var(--sp-xs);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            color: var(--log-ink-soft);
        }

        /* ---- the ring ------------------------------------------------------------ */
        /* The owner sent this back after I replaced it with the journey's nights rail
           (overview 还是想要哪个大圆环), and they were right for the same reason the
           editor's formatting rack keeps its marks: a ring is not a picture of a total, it
           IS the proportions — at a size and in an arrangement five percentages in a list
           cannot be read at. Drawn in this world's hand: butt caps, one hairline of the firm
           rule behind it rather than a grey track, no shadow, no rounding, the figure in the
           print face, and the ten category colours doing the only colouring on the sheet. */
        #tripSectionSheet .ex-ring {
            position: relative;
            width: 216px;
            height: 216px;
            margin: var(--sp-lg) auto var(--sp-md);
        }

        #tripSectionSheet .ex-ring svg { display: block; width: 100%; height: 100%; }
        #tripSectionSheet .ex-ring-track { stroke: var(--log-rule); }

        #tripSectionSheet .ex-ring-mid {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 34px;
        }

        #tripSectionSheet .ex-ring-mid .ex-total-what { letter-spacing: 0.12em; line-height: 1.35; }
        #tripSectionSheet .ex-ring-mid .ex-total-fig { font-size: 30px; margin-top: var(--sp-2xs); }
        #tripSectionSheet .ex-ring-mid .ex-total-cur { margin: 2px 0 0; }

        /* ---- the rail ------------------------------------------------------------ */
        /* The journey's nights scale, spent on money: one ruled strip, filled in the parts'
           own proportions, hairlines between them. It carries an aria-label naming every
           part and its percentage, because a strip of colour says nothing out loud. */
        #tripSectionSheet .ex-rail {
            display: flex;
            gap: 1px;
            height: 10px;
            margin: 0 var(--sp-lg) var(--sp-md);
            border: 1px solid var(--log-rule-firm);
            background: var(--log-rule-firm);
        }

        #tripSectionSheet .ex-rail-part { background: var(--c, var(--log-ink)); }
        #tripSectionSheet .ex-rail.is-budget { margin: var(--sp-xs) 0 0; }
        #tripSectionSheet .ex-rail-part.is-spent { background: var(--log-ink); }
        #tripSectionSheet .ex-rail-part.is-rest { background: var(--log-stock); }

        /* ---- a band that names a section ----------------------------------------- */
        #tripSectionSheet .ex-band {
            display: flex;
            align-items: center;
            min-height: var(--log-row);
            padding: var(--sp-2xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-top: 1px solid var(--log-rule-firm);
            border-bottom: 1px solid var(--log-rule-firm);
            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 category, in the overview ----------------------------------------- */
        /* ⚠️ THE MARK IS A BLOCK OF THE CATEGORY'S COLOUR, NOT A PICTURE OF ONE. The room
           drew a 18px SVG of a bed for "stays" and a plane for "flights" — an icon standing
           FOR a thing, which is the case the Word-Not-Arrow Rule is about and which the
           word beside it already answered. Saved and the Calendar mark the same ten
           categories with the same ten colours from the same table in JS, with `--c` on the
           element and no colour named in CSS; this is that, a third time. */
        #tripSectionSheet .ex-cat {
            display: grid;
            grid-template-columns: 9px minmax(0, 1fr) auto 34px;
            align-items: center;
            gap: 0 var(--sp-md);
            min-height: 44px;
            padding: 0 var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }

        #tripSectionSheet .ex-mark {
            width: 9px;
            height: 9px;
            background: var(--c, var(--log-rule));
        }

        #tripSectionSheet .ex-cat-name {
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #tripSectionSheet .ex-cat-sum {
            justify-self: end;
            font-family: var(--log-print);
            font-size: var(--fs-base);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
        }

        /* Right-aligned in a fixed column, so three digits and one digit end level. */
        #tripSectionSheet .ex-cat-pc {
            justify-self: end;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }

        /* A state said in words, in the reader's own voice — the same shape the plan's
           "No stops yet" and the journal's empty list use. */
        #tripSectionSheet .ex-quiet {
            margin: 0;
            padding: var(--sp-md) var(--sp-lg) var(--sp-xl);
            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);
        }

        /* ---- the budget ---------------------------------------------------------- */
        #tripSectionSheet .ex-budget {
            padding: var(--sp-sm) var(--sp-lg) var(--sp-md);
            border-bottom: 1px solid var(--log-rule);
        }

        #tripSectionSheet .ex-budget-line {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--sp-sm);
            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);
        }

        #tripSectionSheet .ex-budget-left { color: var(--log-ink-soft); }

        /* ---- by category --------------------------------------------------------- */
        /* A band per category, and its entries ruled under it when it is open. The word at
           the right says which it is — the chevron that used to rotate was a glyph doing a
           word's job, the same one the status bar's became DETAILS and HIDE for. */
        #tripSectionSheet .ex-group-band {
            display: grid;
            grid-template-columns: 9px minmax(0, 1fr) auto var(--ex-act);
            align-items: center;
            gap: 2px var(--sp-md);
            width: 100%;
            box-sizing: border-box;
            min-height: var(--log-row);
            padding: var(--sp-2xs) var(--sp-lg);
            border: none;
            border-top: 1px solid var(--log-rule-firm);
            border-radius: 0;
            background: var(--log-stock-band);
            text-align: left;
            cursor: pointer;
            font: inherit;
        }

        #tripSectionSheet .ex-group-act {
            justify-self: end;
            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);
            white-space: nowrap;
        }

        /* The count sits under the name, in the second column, so the band is two lines
           tall and not two rows. */
        #tripSectionSheet .ex-group-mt {
            grid-column: 2 / -1;
            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);
        }

        #tripSectionSheet .ex-group.is-open .ex-group-band { border-bottom: 1px solid var(--log-rule-firm); }

        /* ---- one entry ----------------------------------------------------------- */
        #tripSectionSheet .ex-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: baseline;
            gap: 2px var(--sp-md);
            width: 100%;
            box-sizing: border-box;
            min-height: 44px;
            padding: var(--sp-xs) calc(var(--sp-lg) + var(--ex-act) + var(--sp-md)) var(--sp-xs) var(--sp-lg);
            border: none;
            border-bottom: 1px solid var(--log-rule);
            border-radius: 0;
            background: none;
            text-align: left;
            cursor: pointer;
            font: inherit;
        }

        #tripSectionSheet .ex-row:active { background: var(--log-stock-band); }

        #tripSectionSheet .ex-row-name {
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #tripSectionSheet .ex-row-sum {
            justify-self: end;
            font-family: var(--log-print);
            font-size: var(--fs-base);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
            white-space: nowrap;
        }

        #tripSectionSheet .ex-row-when,
        #tripSectionSheet .ex-row-mt {
            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);
        }

        #tripSectionSheet .ex-row-mt { justify-self: end; white-space: nowrap; }
        #tripSectionSheet .ex-row-who { margin-left: var(--sp-xs); }

        /* ---- per person ---------------------------------------------------------- */
        /* The only place another person's money appears at all, and only as what is between
           the two of you. Nobody's own total is drawn but the reader's, which is what the
           owner asked of this room and what it already did. */
        #tripSectionSheet .ex-person {
            padding: var(--sp-sm) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }

        #tripSectionSheet .ex-person-name {
            font-family: var(--log-write);
            font-size: var(--fs-base);
            color: var(--log-ink);
        }

        #tripSectionSheet .ex-person-figs {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            gap: var(--sp-md);
            margin-top: var(--sp-xs);
        }

        #tripSectionSheet .ex-fig { display: grid; gap: 1px; }

        #tripSectionSheet .ex-fig-key {
            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);
        }

        #tripSectionSheet .ex-fig-val {
            font-family: var(--log-print);
            font-size: var(--fs-base);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
        }

        #tripSectionSheet .ex-fig-mt {
            font-family: var(--log-write);
            font-size: var(--fs-micro);
            color: var(--log-ink-soft);
        }

        /* Owed one way or the other: starboard for what comes back to you, and MAGENTA for
           what you owe (owner, 2026-09-13, from Gary's own page: 红色用系统的品红吧). It was
           port. Port is this world's refusal and loss — a split that does not add up, Remove
           — and money owed to a travelling companion is neither; magenta is the app's own
           voice. On the stock it is about 5.0:1, better than port's 4.4. */
        #tripSectionSheet .ex-fig.is-back .ex-fig-val { color: var(--log-starboard); }
        #tripSectionSheet .ex-fig.is-owed .ex-fig-val { color: var(--log-magenta); }
        /* And the one figure the page is about takes the same pair (owner, 2026-09-13: 这个数字
           会根据不同状态换颜色吗 you are owed 一个颜色 you owe 一个颜色). It was ink in every state
           while the smaller figures under it already said which way it ran. Settled stays ink:
           there is no direction to say. Only the figure: its unit keeps its own soft ink, and the
           words above it already say which way it runs. The same pair as the figures under it. */
        #tripSectionSheet .ex-total.is-back .ex-total-fig { color: var(--log-starboard); }
        #tripSectionSheet .ex-total.is-owed .ex-total-fig { color: var(--log-magenta); }

        /* ---- settling up --------------------------------------------------------- */
        /* It was two coloured initials with an arrow between them; the sentence beside them
           already said the same thing in words, so the badges and the arrow are struck. */
        #tripSectionSheet .ex-settle {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--sp-md);
            min-height: 44px;
            padding: var(--sp-xs) var(--sp-lg);
            /* Solid. A dashed rule is this world's tear, and the receipt's tear is one sheet away. */
            border-bottom: 1px solid var(--log-rule);
        }

        #tripSectionSheet .ex-settle-said {
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
        }

        #tripSectionSheet .ex-settle-sum {
            font-family: var(--log-print);
            font-size: var(--fs-base);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
            white-space: nowrap;
        }

        /* ---- the foot ------------------------------------------------------------ */
        /* Ruled-To-The-Foot: the sheet goes on being a ruled sheet under the last entry
           rather than stopping at it. */
        #tripSectionSheet .ex-foot {
            min-height: 120px;
            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 narrow phone ---------------------------------------------------- */
        @media (max-width: 390px) {
            #tripSectionSheet .ex-views { gap: 0 var(--sp-md); }
            #tripSectionSheet .ex-total-fig { font-size: 30px; }
            #tripSectionSheet .ex-person-figs { gap: var(--sp-sm); }
        }