/* ==========================================================================
           #AG  Add and edit an expense — the receipt, being written
           ==========================================================================

           2026-09-13. One document, two states: the receipt is printed from the activity
           ticket's parts (css/17k-ticket.css), whose rules name #expenseModal beside
           .pgstack-root, so the receipt being written and the receipt being read are drawn
           by the same declarations. This file holds only what WRITING adds to reading.

           THE SECOND ROUND, at the owner's word, from the top down: 我在电脑上看层是乱套的 ·
           category 和 date 挪下来 · currency | amount | method · 下拉菜单不要把页面其他内容往下
           推 就是一个普通的下拉菜单就行 · 可以自己输入金额或者百分比 默认50% 50% · notes 跟着
           回车会自动加长.

           ⚠️ A LIST IS AN ORDINARY DROPDOWN. It was laid into the receipt's flow, full width,
           so opening one pushed everything under it down — and on a desktop window, inside a
           box pinned to the wrong rectangle, it opened below the bottom of the screen. Each
           list hangs from the word that opens it now, over whatever is underneath, and closes
           on a press anywhere else.

           ⚠️ EVERY RULE IS QUALIFIED BY #expenseModal. The shared modal chassis is dressed in
           files that load after this one. */

        /* ---- lying over the phone ------------------------------------------------ */
        /* openModal pins this modal to the frame at full height (is-full-frame); the receipt
           lies in the middle of that and scrolls inside it when it is taller. */
        #expenseModal.modal-sheet.active { align-items: stretch; padding: 0; }

        #expenseModal .modal-content {
            width: 100%;
            max-width: none;
            max-height: 100%;
            margin: 0;
            padding: var(--sp-lg) 0;
            box-sizing: border-box;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            animation: none;
            display: flex;
            flex-direction: column;
        }

        #expenseModal .tk.exr { margin: auto; width: calc(100% - 2 * var(--sp-lg)); }

        /* ---- the head ------------------------------------------------------------ */
        /* It carries CANCEL and SAVE, so it stays at the top of the scroller. */
        #expenseModal .exr-band {
            position: sticky;
            top: calc(-1 * var(--sp-lg));
            z-index: 8;
            grid-template-columns: minmax(0, 1fr) auto;
        }
        #expenseModal .exr-acts { display: flex; align-items: center; gap: var(--sp-md); }
        #expenseModal .tk-act.is-primary { color: var(--log-magenta); }

        /* ---- category | day ------------------------------------------------------ */
        #expenseModal .exr-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-sm);
        }

        /* In the instrument's voice, as the receipt prints them in its band when it is read. */
        #expenseModal .exr-caps {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        /* ---- a word that opens a list -------------------------------------------- */
        /* ⚠️ THE RULE IS DRAWN AT THE FOOT OF THE 44px BOX, NOT UNDER THE TEXT. The owner
           marked three underlines on one line in red — AUD, the amount's own line, and CASH —
           and SPLIT's beside PAID BY. They were three different mechanisms at three different
           heights: a text-decoration under 11px Archivo, the amount field's inset rule at the
           foot of its box, and a text-decoration under 12px Hanken. Every box on that line
           measured 44px tall with its foot at the same y; the text inside each was not the
           same size, so each underline sat wherever its own font's baseline put it.

           One mechanism now, the field's: an inset rule at the foot of the box. Boxes that
           share a line share a foot, so their rules share a line — by construction, not by
           tuning an offset per font. It goes to two pixels of ink while the word's list is up.
           The receipt being read draws none. */
        #expenseModal .exr-word {
            display: inline-flex;
            align-items: center;
            gap: var(--sp-xs);
            min-height: 44px;
            padding: 0;
            border: none;
            border-radius: 0;
            background: none;
            cursor: pointer;
            white-space: nowrap;
            text-align: inherit;
            text-decoration: none;
            box-shadow: inset 0 -1px 0 0 var(--log-rule-firm);
        }
        #expenseModal .exr-word.is-open { box-shadow: inset 0 -2px 0 0 var(--log-ink); }

        /* ---- the list: an ordinary dropdown -------------------------------------- */
        /* Anchored under its word, over what is beneath it, never in the flow.

           ⚠️ THE CURRENCY LIST OPENED INVISIBLY. The owner, twice: currency的下拉菜单我还是点不开
           在电脑上. It did open — the word went to its open rule, the list took its place and
           its height — at opacity 0 and visibility hidden. The currency list is built by
           populateCurrencyDropdown, which every currency picker shares, and carries the old
           class .currency-dropdown; 10-legacy-home-sheet.css hides that class until it is
           .active, with opacity, visibility, margin-top, right and a transition. This rule
           named none of those five, so the old file kept all five. The category and method
           lists have no such class, which is why only this one "would not open".
           All five are named here, so nothing of the old dropdown survives on this one. */
        #expenseModal .exr-dd { position: relative; display: inline-flex; }
        #expenseModal .exr-dd.is-right { justify-content: flex-end; }

        #expenseModal .exf-menu {
            display: none;
            position: absolute;
            top: calc(100% - 4px);
            left: 0;
            right: auto;
            margin: 0;
            opacity: 1;
            visibility: visible;
            transition: none;
            z-index: 6;
            min-width: 200px;
            max-width: 280px;
            max-height: 264px;
            overflow-y: auto;
            overscroll-behavior: contain;
            box-sizing: border-box;
            background: var(--log-stock);
            border: 1px solid var(--log-rule-firm);
            text-align: left;
        }
        #expenseModal .exr-dd.is-right .exf-menu { left: auto; right: 0; }
        #expenseModal .exf-menu.is-open { display: block; }

        #expenseModal .exf-opt,
        #expenseModal .currency-option {
            display: flex;
            align-items: center;
            gap: var(--sp-xs);
            width: 100%;
            box-sizing: border-box;
            min-height: 44px;
            padding: 0 var(--sp-sm);
            border: none;
            border-radius: 0;
            background: none;
            text-align: left;
            cursor: pointer;
            white-space: nowrap;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            letter-spacing: normal;
            text-transform: none;
            color: var(--log-ink-soft);
        }
        #expenseModal .exf-opt + .exf-opt,
        #expenseModal .currency-option + .currency-option { border-top: 1px solid var(--log-rule); }
        #expenseModal .exf-opt:active,
        #expenseModal .currency-option:active { background: var(--log-stock-band); }
        #expenseModal .exf-opt.active {
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
        }

        #expenseModal .cur-search {
            position: sticky;
            top: 0;
            z-index: 1;
            padding: 0 var(--sp-sm);
            background: var(--log-stock);
            border-bottom: 1px solid var(--log-rule-firm);
        }
        #expenseModal .cur-search-input {
            width: 100%;
            min-height: 44px;
            padding: 0;
            border: none;
            background: transparent;
            outline: none;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink);
        }
        /* The placeholder kept the old dropdown's neutral grey from 10-legacy-home-sheet.css (deleted 2026-09-21),
           which loads first and names ::placeholder where this file did not; and border:none
           here took away the old focus underline and put nothing in its place. Both as the
           Tool kit's search row has them. */
        #expenseModal .cur-search-input::placeholder { color: var(--log-ink-soft); opacity: 1; }
        #expenseModal .cur-search:focus-within { box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #expenseModal .tk-aud[hidden] { display: none; }
        #expenseModal .cur-empty {
            padding: var(--sp-sm);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            color: var(--log-ink-soft);
        }

        #expenseModal .exf-mark {
            flex: none;
            width: 9px;
            height: 9px;
            background: var(--c, transparent);
        }
        #expenseModal .exf-opt-name { min-width: 0; }

        /* No category chosen yet, no mark: an empty 9px block indented CHOOSE past the edge
           the list below it hangs from, which is the misalignment the owner reported twice. */
        #expenseModal #selectedEntryCategoryIcon:not([style*="--c"]) { display: none; }
        #expenseModal .is-unset { color: var(--log-ink-soft); }

        /* ---- the day ------------------------------------------------------------- */
        #expenseModal .exr-day { position: relative; display: inline-flex; }
        #expenseModal .exr-day-input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: none;
            opacity: 0;
            cursor: pointer;
        }

        /* ---- a field that takes typing ------------------------------------------- */
        #expenseModal .exr-input {
            display: block;
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            caret-color: var(--log-ink);
            box-shadow: inset 0 -1px 0 0 var(--log-rule);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }
        #expenseModal .exr-input:focus { box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #expenseModal .exr-input::placeholder { color: var(--log-ink-soft); opacity: 1; }
        #expenseModal input.tk-name { min-height: 44px; margin-top: var(--sp-2xs); }

        /* ---- currency | amount | method ------------------------------------------ */
        #expenseModal .exr-money {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0 var(--sp-sm);
            margin-top: var(--sp-xs);
        }
        #expenseModal input.tk-figure { min-width: 0; min-height: 44px; }

        #expenseModal #entryAudConversion.is-warn { color: var(--log-port); }

        /* ---- the notes grow with what is written --------------------------------- */
        #expenseModal textarea.exr-notes {
            min-height: 44px;
            resize: none;
            overflow: hidden;
            line-height: 1.4;
            white-space: pre-wrap;
        }

        /* ---- who carries what ---------------------------------------------------- */
        /* Each word as wide as itself, so its rule is as long as the word it marks; the one at
           the right is pushed to the right edge by its own row. */
        #expenseModal .tk-pair .exr-dd { display: flex; }
        #expenseModal .tk-pair > div:last-child .exr-dd { justify-content: flex-end; }

        /* A line per person: the mark and the name are one 44px press that puts them on or
           off it; what they carry sits at the right, a figure or a field. */
        #expenseModal .tk-share { padding: 0; }
        #expenseModal .exr-who {
            flex: 1;
            display: flex;
            align-items: center;
            gap: var(--sp-xs);
            min-width: 0;
            min-height: 44px;
            padding: 0;
            border: none;
            background: none;
            text-align: left;
            cursor: pointer;
            font: inherit;
        }
        #expenseModal .exp-mark {
            flex: none;
            width: 9px;
            height: 9px;
            border: 1px solid var(--log-rule-firm);
            box-sizing: border-box;
        }
        #expenseModal .exp-mark.is-on { background: var(--log-ink); border-color: var(--log-ink); }

        #expenseModal .exr-share { display: inline-flex; align-items: baseline; gap: var(--sp-2xs); }
        #expenseModal .exr-share-in {
            width: 76px;
            min-height: 36px;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: inset 0 -1px 0 0 var(--log-rule);
            outline: none;
            text-align: right;
            font-family: var(--log-print);
            font-size: var(--fs-body);
            font-weight: 600;
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink);
            caret-color: var(--log-ink);
        }
        #expenseModal .exr-share-in:focus { box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #expenseModal .exr-pc-sum { margin-left: var(--sp-sm); white-space: nowrap; }

        /* What is left to assign: a sentence, in the softer ink while it is still being
           written, in port once it is wrong — the figure that SAVE will refuse. */
        #expenseModal .exr-left {
            padding-top: var(--sp-xs);
            text-align: right;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            font-variant-numeric: lining-nums tabular-nums;
            color: var(--log-ink-soft);
        }
        #expenseModal .exr-left.is-off { color: var(--log-port); }
        #expenseModal .exr-left[hidden] { display: none; }

        /* On the receipt being read, a split by percent prints the percent beside the figure. */
        .pgstack-root .tk-share-pc,
        #expenseModal .tk-share-pc {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.08em;
            color: var(--log-ink-soft);
        }

        /* ---- files --------------------------------------------------------------- */
        #expenseModal #receiptPreview[hidden] { display: none; }
        #expenseModal .tk-file .exf-file-pic {
            flex: none;
            width: 28px;
            height: 28px;
            object-fit: cover;
            border: 1px solid var(--log-rule-firm);
        }
        #expenseModal .tk-file .exf-file-pic.is-none { background: var(--log-stock-band); }
        #expenseModal .tk-file .tk-file-name { flex: 1; }
        #expenseModal button.tk-file-act {
            min-height: 44px;
            padding: 0;
            border: none;
            background: none;
            cursor: pointer;
        }
        #expenseModal .exr-add {
            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;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-magenta);
        }

        /* ---- removal ------------------------------------------------------------- */
        #expenseModal .exr-foot { border-top: 1px solid var(--log-rule-firm); }
        #expenseModal .exr-foot:has(.exr-drop[hidden]) { display: none; }
        #expenseModal .exr-drop {
            display: block;
            width: 100%;
            box-sizing: border-box;
            min-height: var(--log-row);
            padding: 0 var(--sp-lg);
            border: none;
            border-radius: 0;
            background: none;
            text-align: left;
            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);   /* was port red (owner, 2026-09-17: 打开表单算写记录，删除统一用品红) */
        }
        #expenseModal .exr-drop[hidden] { display: none; }