/* ========================================================================== #AK Files — what came with the journey ========================================================================== Migrated 2026-09-14, the last of the five rooms on the trip's section sheet (owner: 现在迁移files页面). openTripSectionSheet sets `is-log` for it, so the head, the ground and CLOSE come from css/17n-journal-list.css, and `is-files`, so the body's own inset can go: a strip of it between the head and the search drew a second line under the head. ⚠️ EVERY RULE NAMES #tripSectionSheet, for the reason 17u and 17x do: the sheet's shared rules load after this file, and an id wins on specificity wherever it sits. THE COMPOSITION is Expenses' By category, so two rooms of one book read alike: ▪ Flights 2 FILES HIDE Boarding passes and tickets ═══════════════════════════════════════════════════════ TP1442 Lisbon to Marrakesh 1 Oct OPEN boarding-pass.pdf ─────────────────────────────────────────────────────── The count stands where the ledger's sum does, the day under it, and OPEN under SHOW and HIDE. A file's words start where its category's name does. What went: a glyph for each category (a plane, a bed), an outline of a page or a photograph for each file, a chevron, and the open list drawn as a box on a second ground. The colour block and the category's name already say which; the word says open or shut; the rules already separate the files. */ #tripSectionSheet.is-files .trip-section-sheet-body { padding: 0; } #tripSectionSheet.is-log .fl-wrap { /* The column the act words stand in, the ledger's own width. */ --fl-act: 54px; padding-bottom: var(--sp-xl); background: var(--log-stock); } /* ---- the search ---------------------------------------------------------- */ /* A ruled line to write on, like every field in this world, and no magnifier: the words in it say what it is for. Focus thickens the line in ink. */ #tripSectionSheet.is-log .fl-search { padding: 0 var(--sp-lg); border-bottom: 1px solid var(--log-rule); } /* The rule turns ink and a second pixel of ink lies on it: two pixels of ink. An inset shadow alone is painted inside the border, over a grey rule still showing under it (review, 2026-09-14). */ #tripSectionSheet.is-log .fl-search:focus-within { border-bottom-color: var(--log-ink); box-shadow: inset 0 -1px 0 var(--log-ink); } #tripSectionSheet.is-log .fl-search input { display: block; width: 100%; box-sizing: border-box; min-height: var(--log-row); margin: 0; padding: 0; 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); color: var(--log-ink); caret-color: var(--log-ink); } #tripSectionSheet.is-log .fl-search input::placeholder { color: var(--log-ink-soft); opacity: 1; } /* ---- a category ---------------------------------------------------------- */ /* ⚠️ ONE RULE BETWEEN ANY TWO THINGS. A band is ruled above in the firm line, and under it when it is open; files are ruled between one another and not under the last, so the next band's line is the only one there. The ledger rules a row under itself and a band above itself, and draws two lines where they meet. */ #tripSectionSheet.is-log .fl-band { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto var(--fl-act); align-items: center; gap: 2px var(--sp-md); width: 100%; box-sizing: border-box; min-height: var(--log-row); margin: 0; padding: var(--sp-xs) var(--sp-lg); border: none; border-top: 1px solid var(--log-rule-firm); border-radius: 0; background: var(--log-stock-band); color: var(--log-ink); text-align: left; font: inherit; } #tripSectionSheet.is-log button.fl-band { cursor: pointer; } /* ⚠️ FOCUS IS INK (review, 2026-09-14). Nothing here named it, so the ring in 05-interaction.css drew a 2px box in the outgoing world's grey-green outside a row the width of the sheet. An inset rule, as the journal's cards take (17n-journal-list.css): an outline outside a full-bleed row is clipped by the scroller. */ #tripSectionSheet.is-log .fl-band:focus-visible, #tripSectionSheet.is-log a.fl-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--log-ink); } /* The first band stands on the search's line. */ #tripSectionSheet.is-log .fl-group:first-child .fl-band { border-top: none; } #tripSectionSheet.is-log .fl-group.is-open .fl-band { border-bottom: 1px solid var(--log-rule-firm); } #tripSectionSheet.is-log .fl-group:last-child { border-bottom: 1px solid var(--log-rule-firm); } /* ⚠️ THE MARK IS A BLOCK OF THE CATEGORY'S COLOUR, as it is in the ledger, Saved and the Calendar: `--c` from CATEGORY_COLORS on the element, and no colour named here. */ #tripSectionSheet.is-log .fl-mark { grid-row: 1; width: 9px; height: 9px; background: var(--c, var(--log-rule)); } #tripSectionSheet.is-log .fl-cat { grid-column: 2; grid-row: 1; font-family: var(--log-write); font-size: var(--fs-body); color: var(--log-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tripSectionSheet.is-log .fl-mt, #tripSectionSheet.is-log .fl-row-when { justify-self: end; 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; } #tripSectionSheet.is-log .fl-mt { grid-column: 3; grid-row: 1; } #tripSectionSheet.is-log .fl-act, #tripSectionSheet.is-log .fl-row-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; } #tripSectionSheet.is-log .fl-act { grid-column: 4; grid-row: 1; } /* What a category holds, for the reader who has not filed anything under it yet. */ #tripSectionSheet.is-log .fl-blurb { grid-column: 2 / -1; grid-row: 2; font-family: var(--log-print); font-size: var(--fs-small); line-height: 1.35; color: var(--log-ink-soft); } /* ---- one file ------------------------------------------------------------ */ #tripSectionSheet.is-log .fl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--fl-act); align-items: baseline; gap: 2px var(--sp-md); /* The ruling pitch the bands keep; at 44px a row of two lines came to 52 (review, 2026-09-14). */ min-height: var(--log-row); box-sizing: border-box; padding: var(--sp-xs) var(--sp-lg) var(--sp-xs) calc(var(--sp-lg) + 9px + var(--sp-md)); text-decoration: none; color: var(--log-ink); } #tripSectionSheet.is-log .fl-row + .fl-row { border-top: 1px solid var(--log-rule); } #tripSectionSheet.is-log a.fl-row:active { background: var(--log-stock-band); } /* The activity or expense leads: a traveller remembers the flight, not the file. It and the file's name wrap rather than being cut: they are what the reader is looking for, and an ellipsis left no way to read the rest (review, 2026-09-14). The row's first baseline keeps the day and OPEN on the first line. */ #tripSectionSheet.is-log .fl-row-name { grid-column: 1; grid-row: 1; font-family: var(--log-write); font-size: var(--fs-body); color: var(--log-ink); overflow-wrap: anywhere; } #tripSectionSheet.is-log .fl-row-when { grid-column: 2; grid-row: 1; } #tripSectionSheet.is-log .fl-row-file { grid-column: 1 / 3; grid-row: 2; font-family: var(--log-write); font-size: var(--fs-small); color: var(--log-ink-soft); overflow-wrap: anywhere; } /* On the day's line, as SHOW and HIDE are on the category's: one line carries a row's words at the right, and a column of act words reads down the page. */ #tripSectionSheet.is-log .fl-row-act { grid-column: 3; grid-row: 1; } /* ---- nothing to show ----------------------------------------------------- */ /* A state said in words, in the reader's own voice, as the ledger says its own. */ #tripSectionSheet.is-log .fl-quiet { margin: 0; padding: var(--sp-md) var(--sp-lg) var(--sp-xl); font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.5; color: var(--log-ink); } /* What a search found, said to a screen reader and not drawn: the list under the search already shows it. */ #tripSectionSheet.is-log .fl-said { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }