/* ==========================================================================================================
   Expenses (Expenses, ExpenseDetail, ExpenseEdit boards) — 2026-10-02
   ==========================================================================================================
   Drawn by 69-folio-expenses.js: the ledger, an expense's slip on the scrim (the activity ticket's card, .ft in
   62-folio-days.css, with what an expense adds), and what the expense form adds to the activity form's grammar
   (64-folio-form.css dresses both). Type on the scale of 2026-10-01: 24 / 16 / 14 / 12 / 10. The category colours
   are the only colour here, and they come from one table in the JS. */

.folio.fe-page .pgstack-body { background: var(--fo-paper); }
.folio.fe-page .fe-add { text-decoration: underline; text-underline-offset: 3px; }
.folio .fe { padding: 0 0 40px; }
.folio .fe-mono { font-family: var(--fo-mono); }
.folio .fe-quiet { margin: 16px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }

/* Overview · By category · Per person */
.folio .fe-tabs { margin: 0 var(--fo-gutter); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px dashed var(--fo-hair); }
.folio .fe-tab { height: 44px; padding: 0; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font-family: var(--fo-sans); font-size: 14px; font-weight: 500; color: var(--fo-graphite); cursor: pointer; }
.folio .fe-tab.is-on { color: var(--fo-ink); border-bottom-color: var(--fo-ink); }

/* The ring: the reader's share, by category. */
.folio .fe-ring { position: relative; width: 220px; height: 220px; margin: 18px auto 0; }
.folio .fe-ring svg { display: block; width: 100%; height: 100%; }
.folio .fe-ring__track { stroke: var(--fo-rule); stroke-width: 1; }
.folio .fe-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.folio .fe-ring__what { max-width: 110px; font-size: 10px; line-height: 1.3; color: var(--fo-graphite); }
.folio .fe-ring__fig { font-family: var(--fo-serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; color: var(--fo-ink); }

/* Your budget */
.folio .fe-budget { margin: 18px var(--fo-gutter) 0; padding: 12px 14px; background: var(--fo-band); display: flex; flex-direction: column; gap: 8px; }
.folio .fe-budget.is-flat { margin: 6px 0 0; flex-direction: row; justify-content: space-between; align-items: baseline; }
.folio .fe-budget__head { display: flex; justify-content: space-between; align-items: baseline; }
.folio .fe-budget__of { font-size: 12px; color: var(--fo-ink); }
.folio .fe-budget.is-flat .fe-budget__of { color: var(--fo-graphite); }
.folio .fe-bar { height: 6px; background: var(--fo-rule); }
.folio .fe-bar span { display: block; height: 6px; background: var(--fo-ink); }
.folio .fe-budget__left { font-size: 12px; color: var(--fo-graphite); }

/* A ruled list under a firm head: the categories, the settle-up. */
.folio .fe-list { margin: 18px var(--fo-gutter) 0; }
.folio .fe-list__head { padding-bottom: 8px; border-bottom: 1px solid rgba(26,22,20,0.4); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio .fe-cat { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; min-height: 34px; border-bottom: 1px dashed var(--fo-hair); }
.folio .fe-cat i { width: 10px; height: 10px; }
.folio .fe-cat__name { font-size: 14px; }
.folio .fe-cat .fe-mono { font-size: 12px; }
.folio .fe-cat__pc { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fo-graphite); text-align: right; }
.folio .fe-foot { margin: 16px var(--fo-gutter) 0; font-size: 12px; color: var(--fo-graphite); }

/* By category */
.folio .fe-groups { padding: 6px var(--fo-gutter) 0; }
.folio .fe-band { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px 12px; align-items: center; padding: 12px 0; border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio .fe-band i { width: 12px; height: 12px; }
.folio .fe-band__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folio .fe-band__name { font-size: 14px; font-weight: 500; }
.folio .fe-band__sum { font-family: var(--fo-mono); font-size: 14px; text-align: right; }
.folio .fe-band__act { width: 34px; font-size: 12px; color: var(--fo-graphite); text-align: right; white-space: nowrap; }
.folio .fe-rows { margin: 0 calc(-1 * var(--fo-gutter)) 4px; padding: 0 var(--fo-gutter) 0 0; background: var(--fo-band); }
/* Its figure ends where the band's does, under the band's figure (the band's word, Show, stands beyond it). */
.folio .fe-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 46px 10px var(--fo-gutter); border: none; border-bottom: 1px dashed var(--fo-hair); background: transparent; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio .fe-row__name { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folio .fe-row__sum { font-family: var(--fo-mono); font-size: 12px; text-align: right; }
.folio .fe-row__sub { font-size: 10px; line-height: 1.4; color: var(--fo-graphite); min-width: 0; }
.folio .fe-row__when { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); text-align: right; white-space: nowrap; }
.folio .fe-more { display: block; width: 100%; padding: 8px 0 10px var(--fo-gutter); border: none; background: transparent; font-family: var(--fo-sans); font-size: 12px; color: var(--fo-graphite); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Per person */
.folio .fe-owed { margin: 16px var(--fo-gutter) 0; padding: 14px; background: var(--fo-band); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.folio .fe-owed__fig { font-family: var(--fo-serif); font-size: 24px; white-space: nowrap; }
.folio .fe-people { padding: 4px var(--fo-gutter) 0; }
.folio .fe-person { padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); display: flex; flex-direction: column; gap: 6px; }
.folio .fe-person__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.folio .fe-person__name { font-family: var(--fo-serif); font-size: 16px; }
.folio .fe-person__said { font-size: 12px; color: var(--fo-ink); white-space: nowrap; }
.folio .fe-person__said.is-quiet { color: var(--fo-graphite); }
.folio .fe-pair { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--fo-graphite); }
.folio .fe-pair .fe-mono { color: var(--fo-ink); }
.folio .fe-settles { margin-top: 20px; }
.folio .fe-settle { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--fo-hair); font-size: 14px; }
.folio .fe-settles + .fe-quiet { margin-top: 10px; }

/* Nothing spent yet */
.folio .fe-empty { padding: 28px var(--fo-gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.folio .fe-empty .fe-ring { width: 170px; height: 170px; margin: 0; }
.folio .fe-empty .fe-ring__track { stroke-width: 16; }
.folio .fe-empty__words { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.folio .fe-empty__say { font-family: var(--fo-serif); font-style: italic; font-size: 16px; line-height: 1.35; }
.folio .fe-empty__acts { align-self: stretch; display: flex; gap: 8px; }
.folio .fe-empty .fe-budget { align-self: stretch; }

/* ---- one expense: the slip on the scrim ------------------------------------------------------------------- */
.folio .fe-slip__kind { display: inline-flex; align-items: center; gap: 6px; }
.folio .fe-slip__kind i { width: 8px; height: 8px; flex: none; }
.folio .fe-slip .fe-slip__title { margin: 12px 0 2px; font-size: 24px; }
.folio .fe-slip__when { display: block; padding-bottom: 4px; font-size: 12px; color: var(--fo-graphite); }
.folio .fe-slip__cost { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0 10px; border-bottom: 1px dashed var(--fo-hair-firm); }
.folio .fe-slip__cost .fo-quiet { font-size: 12px; }
.folio .fe-slip__fig { flex: none; font-family: var(--fo-mono); font-size: 24px; letter-spacing: -0.01em; white-space: nowrap; }
.folio .fe-slip .ft-value .fo-quiet { font-size: 12px; }
.folio .fe-slip__for { padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); text-align: right; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.folio .fe-slip__keep { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 8px; }
.folio .fe-slip__keep .ft-label { color: var(--fo-ink); }
.folio .fe-slip__mine { font-family: var(--fo-mono); font-size: 16px; }
.folio .fe-slip .ft-file { border-top: none; border-bottom: 1px dashed var(--fo-hair-firm); }

/* ---- the expense form: what it adds to the activity form ------------------------------------------------ */
.folio#expenseModal .is-unset { color: var(--fo-pale); }
.folio#expenseModal .fe-pick-cat { display: inline-flex; align-items: center; gap: 9px; }
.folio#expenseModal .fe-pick-cat i { width: 10px; height: 10px; flex: none; }
.folio#expenseModal .fe-pick-cat i:not([style*="background"]) { display: none; }
.folio#expenseModal .fe-for-day { grid-template-columns: minmax(0, 1fr) 120px; }
.folio#expenseModal .fe-day { position: relative; display: block; min-height: 26px; font-size: 16px; line-height: 1.35; color: var(--fo-ink); }
.folio#expenseModal .fe-day__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; opacity: 0; cursor: pointer; }
.folio#expenseModal .ff-money__said.is-warn { color: var(--fo-red); }
.folio#expenseModal .fe-mono { font-family: var(--fo-mono); }

/* Who shares: a tick and the name, and what each carries. */
.folio#expenseModal .fe-members { display: flex; flex-direction: column; }
.folio#expenseModal .fe-member { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px dashed var(--fo-hair); }
.folio#expenseModal .fe-member__who { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0; border: none; background: transparent; font-family: var(--fo-sans); font-size: 14px; color: var(--fo-ink); text-align: left; cursor: pointer; }
.folio#expenseModal .fe-member.is-off .fe-member__who { color: var(--fo-graphite); }
.folio#expenseModal .fe-tick { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--fo-ink); display: flex; align-items: center; justify-content: center; }
.folio#expenseModal .fe-tick.is-on { background: var(--fo-ink); }
.folio#expenseModal .fe-tick.is-on::after { content: '✓'; font-size: 12px; line-height: 1; color: var(--fo-card); }
.folio#expenseModal .fe-member__sum { display: flex; align-items: baseline; gap: 5px; font-family: var(--fo-mono); font-size: 12px; color: var(--fo-ink); }
.folio#expenseModal .fe-member__sum.is-none { color: var(--fo-pale); }
.folio#expenseModal .fe-member__in { width: 76px; padding: 2px 0 3px; border: none; border-bottom: 1.5px solid var(--fo-ink); border-radius: 0; background: transparent; box-shadow: none; outline: none; font-family: var(--fo-mono); font-size: 14px; color: var(--fo-ink); text-align: right; }
.folio#expenseModal .fe-member__unit { width: 26px; font-family: var(--fo-sans); font-size: 12px; color: var(--fo-graphite); }

/* Left to split, while a custom split is being written. */
.folio#expenseModal .fe-left { padding: 16px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.folio#expenseModal .fe-left[hidden] { display: none; }
.folio#expenseModal .fe-left__head { display: flex; justify-content: space-between; align-items: baseline; }
.folio#expenseModal .fe-left__word { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#expenseModal .fe-left__fig { font-family: var(--fo-mono); font-size: 16px; color: var(--fo-ink); }
.folio#expenseModal .fe-left__unit { margin-left: 4px; font-size: 10px; color: var(--fo-graphite); }
.folio#expenseModal .fe-left__bar { height: 3px; background: var(--fo-rule); }
.folio#expenseModal .fe-left__bar i { display: block; height: 3px; background: var(--fo-ink); }
.folio#expenseModal .fe-left__said { font-size: 12px; line-height: 1.45; color: var(--fo-graphite); }
.folio#expenseModal .fe-left.is-over .fe-left__said { color: var(--fo-red); }

.folio#expenseModal .fe-notes { min-height: 52px; margin-top: 10px; }
.folio#expenseModal .fe-file__acts { display: flex; gap: 14px; flex: none; }
.folio#expenseModal .fe-share { margin-top: 18px; padding: 12px 14px; background: var(--fo-band); display: flex; justify-content: space-between; align-items: baseline; }
.folio#expenseModal .fe-share__label { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); }
.folio#expenseModal .fe-share__fig { font-family: var(--fo-mono); font-size: 16px; color: var(--fo-ink); }
.folio#expenseModal .ff-hint { margin-top: 14px; line-height: 1.5; }

/* The tabs meet the scroller's top: their focus mark is drawn inside, where no edge cuts it (focus audit). */
.folio .fe-tab:focus-visible { outline-offset: -2px; }