/* ========================================================================== #V The ticket — an activity, as the document it came from -------------------------------------------------------------------------- Migrated into the deck log on 2026-09-09. Drawn by the five detail renderers in public/05-timeline.js and mounted on the page stack. WHAT IT IS. The owner: "现在的详情页卡片是跟着 flight 来的,flight 设计是一张登机牌." The whole family descends from the boarding pass — a flight is a boarding pass, a transit is a ticket, a stay is a hotel's confirmation. That is a good idea and it survives the migration; what changes is the paper it is printed on. It survives because it was never foreign here. A deck log keeps documents: the Stops sheet already prints TICKET against a leg that has one on file. A ticket is not a page of the log — it is a thing filed with it — and this is that thing, in the log's own printing. WHAT IT REPLACES: a card with a filled `--info` blue header and white text, an aeroplane glyph, a pencil for Edit, an arrow between the two airport codes, serif display figures, and 218 inline styles across five functions. THE PERFORATION STAYS, and it is the reason the metaphor is worth keeping. A dashed rule is native to a printed instrument, and it carries meaning no other mark here carries: it says the counterfoil tears off from this line. Everything else about a boarding pass is an airline's livery; the tear is the document's own structure. ========================================================================== */ /* The sheet. It is a document lying on the log's stock, so it has a firm edge all round rather than a shadow or a rounded corner. */ /* ⚠️ THE STOP SHEET'S STAY IS THE SAME OBJECT, SO IT IS NAMED ON THESE RULES RATHER THAN GIVEN COPIES OF THEM (2026-09-12). A bed in the stops list is a small ticket that opens into the full one below; two rooms drawing one document from two sets of rules is how they drift apart, and this file has watched that happen to the place-suggestions list (four copies) and the photograph search (two). NOT by un-scoping .tk-*, which was the first thought and is unsafe: the Tool kit draws .tk-bar, .tk-back, .tk-title and .tk-body, a different component on the same prefix. Scoping is what keeps those apart, so the second room is named instead. What stays scoped is geometry that belongs to a page rather than to a document — the 344px measure and the centring, which a list item must not take. */ /* ⚠️ #expenseModal IS NAMED ON EVERY .tk RULE BELOW (2026-09-13). The expense form is the receipt being written, and the expense detail is the receipt being read; the two are one document in two states, so they are drawn by the same declarations. The modal lives on outside the page stack, so the page-stack scope alone could not reach it — the same reason #stopDetailSheet is named on the stay's rules. */ /* ⚠️ AND #addActivityModal BESIDE IT (2026-09-13): an activity being written is the ticket being read, in its other state, for the reason the receipt is. */ .pgstack-root .tk, #addActivityModal .tk, #expenseModal .tk, #stopDetailSheet .stay-ticket { background: var(--log-stock); border: 1px solid var(--log-rule-firm); box-sizing: border-box; } .pgstack-root .tk, #addActivityModal .tk, #expenseModal .tk { max-width: 344px; margin: var(--sp-lg) auto; } /* ---- the head band: who issued it ---------------------------------------- */ .pgstack-root .tk-band, #addActivityModal .tk-band, #expenseModal .tk-band, #stopDetailSheet .stay-ticket-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-lg); background: var(--log-stock-band); border-bottom: 1px solid var(--log-rule-firm); } .pgstack-root .tk-issuer, #addActivityModal .tk-issuer, #expenseModal .tk-issuer, #stopDetailSheet .stay-ticket-nights { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--log-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Edit is a word. It was a 13px pencil in the corner of a blue band — a glyph, and one small enough that the 44px floor was never near it. */ .pgstack-root .tk-act, #addActivityModal .tk-act, #expenseModal .tk-act { justify-self: end; min-height: 44px; padding: 0; background: none; border: none; 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-ink); } .pgstack-root .tk-act:active, #addActivityModal .tk-act:active, #expenseModal .tk-act:active { box-shadow: inset 0 -2px 0 0 currentColor; } /* ---- the two ends of a journey -------------------------------------------- */ .pgstack-root .tk-panel, #addActivityModal .tk-panel, #expenseModal .tk-panel { padding: var(--sp-md) var(--sp-lg); } /* One step tighter in the list, because a list of them is read at a glance and a document is read one at a time. */ #stopDetailSheet .stay-ticket-panel { padding: var(--sp-sm) var(--sp-lg); } /* A RULE BETWEEN THEM, not an arrow. The arrow was a glyph; a rule between two marks is how a chart says "from here to there", and it is the same hairline the ledger runs down its own margin. */ .pgstack-root .tk-ends, #addActivityModal .tk-ends, #expenseModal .tk-ends { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-sm); } .pgstack-root .tk-code, #addActivityModal .tk-code, #expenseModal .tk-code { font-family: var(--log-print); font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.08em; line-height: 1; color: var(--log-ink); } /* The rule between the two ends, broken by how long the journey takes once that is known. */ .pgstack-root .tk-mid, #addActivityModal .tk-mid, #expenseModal .tk-mid { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; } .pgstack-root .tk-mid .tk-run, #addActivityModal .tk-mid .tk-run, #expenseModal .tk-mid .tk-run { flex: 1; } .pgstack-root .tk-dur, #addActivityModal .tk-dur, #expenseModal .tk-dur { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink-soft); white-space: nowrap; } .pgstack-root .tk-run, #addActivityModal .tk-run, #expenseModal .tk-run, #stopDetailSheet .stay-ticket-run { height: 1px; background: var(--log-rule-firm); } /* The places, in the traveller's own voice under the instrument's shorthand. */ .pgstack-root .tk-where, #addActivityModal .tk-where, #expenseModal .tk-where { display: flex; justify-content: space-between; gap: var(--sp-sm); margin-top: var(--sp-2xs); font-family: var(--log-write); font-size: var(--fs-small); color: var(--log-ink-soft); } .pgstack-root .tk-where span:last-child, #addActivityModal .tk-where span:last-child, #expenseModal .tk-where span:last-child { text-align: right; } .pgstack-root .tk-times, #addActivityModal .tk-times, #expenseModal .tk-times { display: flex; justify-content: space-between; gap: var(--sp-sm); margin-top: var(--sp-md); } .pgstack-root .tk-times > div:last-child, #addActivityModal .tk-times > div:last-child, #expenseModal .tk-times > div:last-child { text-align: right; } .pgstack-root .tk-time, #addActivityModal .tk-time, #expenseModal .tk-time { font-family: var(--log-print); font-size: var(--fs-base); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.04em; color: var(--log-ink); } .pgstack-root .tk-day, #addActivityModal .tk-day, #expenseModal .tk-day { margin-top: 2px; font-family: var(--log-write); font-size: var(--fs-small); color: var(--log-ink-soft); } /* ---- printed label, written value ----------------------------------------- */ .pgstack-root .tk-pair, #addActivityModal .tk-pair, #expenseModal .tk-pair { display: flex; justify-content: space-between; gap: var(--sp-lg); } .pgstack-root .tk-pair > div:last-child, #addActivityModal .tk-pair > div:last-child, #expenseModal .tk-pair > div:last-child { text-align: right; } .pgstack-root .tk-field + .tk-field, #addActivityModal .tk-field + .tk-field, #expenseModal .tk-field + .tk-field, .pgstack-root .tk-pair + .tk-field, #addActivityModal .tk-pair + .tk-field, #expenseModal .tk-pair + .tk-field, .pgstack-root .tk-field + .tk-pair, #addActivityModal .tk-field + .tk-pair, #expenseModal .tk-field + .tk-pair { margin-top: var(--sp-md); } .pgstack-root .tk-label, #addActivityModal .tk-label, #expenseModal .tk-label { 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); } .pgstack-root .tk-value, #addActivityModal .tk-value, #expenseModal .tk-value { margin-top: 2px; font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.35; color: var(--log-ink); white-space: pre-wrap; } /* A reference is the instrument's own figure, not prose: it is read character by character and copied, so it is printed and it is tabular. */ .pgstack-root .tk-value.is-ref, #addActivityModal .tk-value.is-ref, #expenseModal .tk-value.is-ref { font-family: var(--log-print); font-size: var(--fs-body); letter-spacing: 0.08em; font-variant-numeric: lining-nums tabular-nums; } /* ---- the tear -------------------------------------------------------------- */ /* The one piece of a boarding pass that is structure rather than livery — and by 2026-09-09 it is the dashed rule and nothing else. It had two notches bitten out of the sheet's edges as well, in the stock, which is how a real counterfoil is made; the owner asked for the line alone and they were right. A notch has to be cut out of whatever is behind the sheet to read as a notch, and there is no such thing here: it was a light square sitting on top of the page-stack's own ground, so it read as two ornaments hung on the ends of a line rather than as a bite taken out of paper. The line says the whole thing on its own. */ .pgstack-root .tk-tear, #addActivityModal .tk-tear, #expenseModal .tk-tear { border-top: 2px dashed var(--log-rule-firm); margin: 0; } /* The counterfoil: what the airline reads, spaced out the way it is printed. */ .pgstack-root .tk-stub, #addActivityModal .tk-stub, #expenseModal .tk-stub { padding: var(--sp-md) var(--sp-lg); text-align: center; font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.28em; font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink-soft); } /* ---- what it cost ---------------------------------------------------------- */ .pgstack-root .tk-money, #addActivityModal .tk-money, #expenseModal .tk-money { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); margin-top: var(--sp-xs); } .pgstack-root .tk-sum, #addActivityModal .tk-sum, #expenseModal .tk-sum { display: flex; align-items: baseline; gap: var(--sp-xs); } .pgstack-root .tk-cur, #addActivityModal .tk-cur, #expenseModal .tk-cur { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; color: var(--log-ink-soft); } .pgstack-root .tk-figure, #addActivityModal .tk-figure, #expenseModal .tk-figure { font-family: var(--log-print); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; line-height: 1; color: var(--log-ink); } .pgstack-root .tk-paid, #addActivityModal .tk-paid, #expenseModal .tk-paid { font-family: var(--log-write); font-size: var(--fs-small); color: var(--log-ink-soft); } .pgstack-root .tk-aud, #addActivityModal .tk-aud, #expenseModal .tk-aud { margin-top: var(--sp-2xs); font-family: var(--log-write); font-size: var(--fs-small); font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink-soft); } /* ---- a stay's own furniture ------------------------------------------------ */ /* The Stamped-State Rule. It was a coloured chip with a dot in it; a state this world knows is printed as a word. Neither takes the magenta: being booked is a fact the sheet reports, not an act that wrote to the record. */ .pgstack-root .tk-state, #addActivityModal .tk-state, #expenseModal .tk-state { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--log-ink); border: 1px solid var(--log-rule-firm); padding: 2px 6px; white-space: nowrap; } .pgstack-root .tk-state.is-pending, #addActivityModal .tk-state.is-pending, #expenseModal .tk-state.is-pending { color: var(--log-ink-soft); } .pgstack-root .tk-name, #addActivityModal .tk-name, #expenseModal .tk-name { font-family: var(--log-write); font-size: var(--fs-base); line-height: 1.25; color: var(--log-ink); } .pgstack-root .tk-head-row, #addActivityModal .tk-head-row, #expenseModal .tk-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-sm); } /* Directions and Copy were filled buttons with a paper-plane and a clipboard glyph. Words, on a rule, like every other act in this world. */ .pgstack-root .tk-words, #addActivityModal .tk-words, #expenseModal .tk-words { display: flex; align-items: center; gap: var(--sp-lg); margin-top: var(--sp-xs); padding-top: var(--sp-2xs); border-top: 1px solid var(--log-rule); } .pgstack-root .tk-word, #addActivityModal .tk-word, #expenseModal .tk-word { min-height: 44px; padding: 0; background: none; border: none; 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-ink); } .pgstack-root .tk-word:active, #addActivityModal .tk-word:active, #expenseModal .tk-word:active { box-shadow: inset 0 -2px 0 0 currentColor; } /* How many nights, as a figure with its unit printed under it — the one place on this sheet a number is meant to be read as a quantity rather than a reference. */ .pgstack-root .tk-nights, #addActivityModal .tk-nights, #expenseModal .tk-nights { text-align: right; white-space: nowrap; } .pgstack-root .tk-nights-n, #addActivityModal .tk-nights-n, #expenseModal .tk-nights-n { font-family: var(--log-print); font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; line-height: 1; color: var(--log-ink); } .pgstack-root .tk-nights-w, #addActivityModal .tk-nights-w, #expenseModal .tk-nights-w { margin-top: 2px; 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); } /* ---- a receipt's own furniture (2026-09-13) ------------------------------- */ /* One expense is printed on this ticket too — it is the same kind of document: who issued it, what for, what it cost and in what money. What a receipt has that a boarding pass does not is written here rather than in a second file, for the reason this file already gives about the stop sheet's stay: one document, one set of rules. WHO IT WAS SHARED BETWEEN. Ruled lines of a name and a figure, in the money it was spent in. It was a tinted box of coloured initials. */ .pgstack-root .tk-shares, #addActivityModal .tk-shares, #expenseModal .tk-shares { margin-top: var(--sp-sm); border-top: 1px solid var(--log-rule); } .pgstack-root .tk-share, #addActivityModal .tk-share, #expenseModal .tk-share { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); min-height: 36px; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--log-rule); box-sizing: border-box; } .pgstack-root .tk-share-who, #addActivityModal .tk-share-who, #expenseModal .tk-share-who { 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; } .pgstack-root .tk-share-sum, #addActivityModal .tk-share-sum, #expenseModal .tk-share-sum { font-family: var(--log-print); font-size: var(--fs-body); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink); white-space: nowrap; } /* WHAT IS FILED WITH IT. A name and the word that opens it, ruled. renderAttachmentRows draws the same list with inline styles in the outgoing world's greys, so the receipt writes its own rows rather than inheriting a list no stylesheet can reach. */ .pgstack-root .tk-files, #addActivityModal .tk-files, #expenseModal .tk-files { margin-top: var(--sp-2xs); } .pgstack-root .tk-file, #addActivityModal .tk-file, #expenseModal .tk-file { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); min-height: 44px; border-top: 1px solid var(--log-rule); text-decoration: none; } .pgstack-root .tk-file-name, #addActivityModal .tk-file-name, #expenseModal .tk-file-name { 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; } .pgstack-root .tk-file-act, #addActivityModal .tk-file-act, #expenseModal .tk-file-act { 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); } /* REMOVE on a file or a link row in a form is a removal, so it is magenta (owner, 2026-09-17: 打开表单算写记录，删除统一用品红). OPEN on a kept ticket is an anchor, not a button, and stays ink. */ #addActivityModal button.tk-file-act, #expenseModal button.tk-file-act { color: var(--log-magenta); } /* THE COUNTERFOIL IS THE READER'S OWN SHARE. Under the tear, the part the holder keeps — which on a receipt shared between people is what it cost them, the figure the ledger is built around. */ .pgstack-root .tk-keep, #addActivityModal .tk-keep, #expenseModal .tk-keep { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-lg); } .pgstack-root .tk-keep-sum, #addActivityModal .tk-keep-sum, #expenseModal .tk-keep-sum { display: flex; align-items: baseline; gap: var(--sp-xs); } .pgstack-root .tk-rule, #addActivityModal .tk-rule, #expenseModal .tk-rule { height: 1px; background: var(--log-rule); margin: var(--sp-md) 0; } .pgstack-root .tk :focus-visible, #addActivityModal .tk :focus-visible, #expenseModal .tk :focus-visible { outline: 2px solid var(--log-ink); outline-offset: 2px; } /* Check-in beside check-out. A generous gap rather than a grid, because one of the two is absent whenever a stay has no departure date recorded. */ /* Measured at 344, which is the sheet's width: two dates at "Wed, Sep 9, 2026" are about 110px each, the nights figure takes ~50, and 48px of gap put the row over the 296 available — so both dates wrapped their year onto a second line. 24 fits. The dates themselves do not wrap: a date broken across two lines reads as two. */ .pgstack-root .tk-stay-dates, #addActivityModal .tk-stay-dates, #expenseModal .tk-stay-dates { display: flex; gap: var(--sp-lg); } .pgstack-root .tk-stay-dates .tk-value, #addActivityModal .tk-stay-dates .tk-value, #expenseModal .tk-stay-dates .tk-value { white-space: nowrap; } /* The category, as a hairline down the band rather than a wash behind it. The ten hues carry meaning and are allowed; a filled block of one is decoration, and it puts knocked-out text on a hue whose contrast was never chosen for that. Same move the Days view made when the category took over the ledger's thread. */ .pgstack-root .tk-band[style*="--tk-cat"], #addActivityModal .tk-band[style*="--tk-cat"], #expenseModal .tk-band[style*="--tk-cat"] { border-left: 3px solid var(--tk-cat, var(--log-rule-firm)); } /* ⚠️ A SIGHT'S NOTES ARE WRITTEN AS A GUIDE, SO THEY ARE READ AS ONE (owner, 2026-09-13: sights里面的notes是富文本输入 · 为了让用户做攻略用). They are the one rich text on an activity — headings to divide a day, lists of what to see, bold for what not to miss — and the reading ticket printed them through the outgoing world's .tiptap-content rules: a 19px serif heading inside a ticket set in Archivo and Hanken. The same marks, in this world's type, on the ticket being read and the ticket being written (17w). */ .pgstack-root .tk-value.tiptap-content { white-space: normal; } .pgstack-root .tk-value.tiptap-content p { margin: 0 0 0.5em; } .pgstack-root .tk-value.tiptap-content p:last-child { margin-bottom: 0; } .pgstack-root .tk-value.tiptap-content ul, .pgstack-root .tk-value.tiptap-content ol { margin: 0 0 0.5em; padding-left: 1.3em; } .pgstack-root .tk-value.tiptap-content li { margin: 0 0 0.2em; } .pgstack-root .tk-value.tiptap-content strong { font-weight: 600; color: var(--log-ink); } .pgstack-root .tk-value.tiptap-content h2 { margin: 0.8em 0 0.35em; font-family: var(--log-print); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--log-ink); } .pgstack-root .tk-value.tiptap-content h2:first-child { margin-top: 0; } /* A link somebody kept about a place. A plate, a title, what it said, and the address itself — no card, no shadow, and the whole row is the target. */ .pgstack-root .tk-link, #addActivityModal .tk-link, #expenseModal .tk-link { display: flex; gap: var(--sp-sm); align-items: flex-start; margin-top: var(--sp-sm); padding: var(--sp-xs) 0; border-top: 1px solid var(--log-rule); text-decoration: none; } .pgstack-root .tk-link-plate, #addActivityModal .tk-link-plate, #expenseModal .tk-link-plate { flex: none; width: 52px; height: 52px; border: 1px solid var(--log-rule-firm); background: var(--log-stock-band); overflow: hidden; } .pgstack-root .tk-link-plate img, #addActivityModal .tk-link-plate img, #expenseModal .tk-link-plate img { width: 100%; height: 100%; object-fit: cover; display: block; } .pgstack-root .tk-link-body, #addActivityModal .tk-link-body, #expenseModal .tk-link-body { min-width: 0; } .pgstack-root .tk-link-title, #addActivityModal .tk-link-title, #expenseModal .tk-link-title { display: block; font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.3; color: var(--log-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .pgstack-root .tk-link-note, #addActivityModal .tk-link-note, #expenseModal .tk-link-note, .pgstack-root .tk-link-url, #addActivityModal .tk-link-url, #expenseModal .tk-link-url { display: block; margin-top: 2px; font-family: var(--log-write); font-size: var(--fs-small); line-height: 1.35; color: var(--log-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }