/* ==========================================================================
   Expense Travel v76 — design refresh layer
   Loaded after every earlier style block, so it wins without editing them.
   Visual only: no data, sign-in, sharing or sync behaviour lives here.
   To roll back the whole refresh, remove the <link> to this file in index.html.
   ========================================================================== */

/* ---------- 1. Tokens (light) ---------- */
body {
  --rf-ink: #0D1321;
  --rf-ink-2: #4A5263;
  --rf-slate: #5F6776;
  --rf-ground: #EEF0F3;
  --rf-surface: #FFFFFF;
  --rf-surface-2: #F4F5F8;
  --rf-line: #D9DDE3;
  --rf-line-2: #E6E9EE;
  --rf-perf: #D3D8DF;
  --rf-accent: #FF5B1F;
  --rf-on-accent: #0D1321;
  --rf-ticket: #0D1321;          /* the dark ticket on the Trip screen */
  --rf-ticket-line: #3A4558;
  --rf-scrim: rgba(13, 19, 33, 0.42);
  --rf-shadow: 0 1px 0 rgba(13, 19, 33, 0.04), 0 10px 28px rgba(13, 19, 33, 0.06);
  --rf-radius: 20px;
  --rf-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Tokens (dark) — the app keeps its own Appearance setting ---------- */
body.darkmode {
  --rf-ink: #EEF0F3;
  --rf-ink-2: #B7BECA;
  --rf-slate: #9AA3B2;
  --rf-ground: #0A0E15;
  --rf-surface: #151B26;
  --rf-surface-2: #1D2532;
  --rf-line: #2A3344;
  --rf-line-2: #222A38;
  --rf-perf: #323C4E;
  --rf-ticket: #1B2230;
  --rf-ticket-line: #3A4558;
  --rf-scrim: rgba(0, 0, 0, 0.6);
  --rf-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* earlier layers read these variables, so remapping them carries most components across */
  --bg: #0A0E15; --card: #151B26; --ink: #EEF0F3; --muted: #9AA3B2; --line: #2A3344;
  --bp-ground: #0A0E15; --bp-paper: #151B26; --bp-ink: #EEF0F3; --bp-slate: #9AA3B2;
  --bp-line: #2A3344; --bp-line2: #222A38; --bp-perf: #323C4E;
  color-scheme: dark;
  background: var(--rf-ground) !important;
  color: var(--rf-ink);
}

/* ---------- 3. Page + screens ---------- */
body.darkmode .app,
body.darkmode #appShell,
body.darkmode .screen,
body.darkmode .sheet,
body.darkmode .bpExpenseSheet { background: var(--rf-ground) !important; color: var(--rf-ink) !important; }

#appShell .screen.active { animation: rfScreenIn .22s var(--rf-ease) both; }
@keyframes rfScreenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Headings: every tab uses the same condensed title */
#appShell .bpHead h2,
#settings .screenHead h2 {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif !important;
  font-size: 38px !important; line-height: 1 !important; font-weight: 800 !important;
  font-stretch: 75% !important; letter-spacing: -0.035em !important; color: var(--rf-ink) !important;
  margin: 0 !important; height: auto !important; width: auto !important;
}
#appShell .bpSectionHead h3 { color: var(--rf-ink) !important; }
#appShell .bpTripSub { color: var(--rf-slate) !important; }

/* Round header buttons (settings, edit trip, add, period) */
#appShell .bpSettingsBtn,
#appShell .bpAddSmall,
#appShell .bpEditTrip,
#appShell .bpPeriodBtn,
#settings .settingsClose {
  background: var(--rf-surface) !important; color: var(--rf-ink) !important;
  border: 1px solid var(--rf-line) !important; box-shadow: none !important;
  min-height: 44px; transition: transform .12s ease, background-color .12s ease;
}
#settings .settingsClose { width: 44px; height: 44px; border-radius: 22px !important; display: grid; place-items: center; padding: 0 !important; font-size: 0 !important; }
#settings .settingsClose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Press feedback for everything tappable */
#appShell button:active, .sheet button:active, .modal button:active, #appShell .bpTripCard:active, #settings .setting:active {
  transform: scale(.97);
}

/* ---------- 4. Overview: trip list ---------- */
#appShell .bpTripCard {
  background: var(--rf-surface) !important; color: var(--rf-ink) !important;
  border: 2px solid transparent !important; box-shadow: var(--rf-shadow) !important;
  transition: transform .12s ease, border-color .15s ease;
}
#appShell .bpTripCard.current { border-color: var(--rf-accent) !important; }
#appShell .bpTripCard small { color: var(--rf-slate) !important; }
#appShell .bpTripAmt { color: var(--rf-ink) !important; }
#appShell .bpCurrentDot { color: var(--rf-ink-2) !important; white-space: nowrap; }
#appShell .bpCurrentDot[data-status="upcoming"]:before { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--rf-ink-2); }
#appShell .bpCurrentDot[data-status="ended"]:before { background: var(--rf-line) !important; }
#appShell .bpCurrentDot[data-status="ended"] { color: var(--rf-slate) !important; }

/* Delete is a secondary action: quiet until you're in delete mode */
#appShell #deleteModeBtn { color: var(--rf-slate) !important; font-weight: 650 !important; }
#appShell .deleteBar.on ~ * #deleteModeBtn, body #deleteModeBtn[aria-pressed="true"] { color: #C4472F !important; }
#appShell .bpNewTripBtn { color: var(--rf-ink) !important; }
#appShell .bpTripActions button { min-height: 44px; }

/* No trips yet: hide list actions that have nothing to act on */
#trips:has(#tripList:empty) .bpTripActions { display: none !important; }

/* Status badge on the pass for upcoming / ended trips */
#appShell .bpDayBadge.bpDayBadgeSoft {
  background: transparent !important; color: var(--rf-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--rf-ink);
}

/* ---------- 5. Tickets (white pass + dark trip ticket) ---------- */
body.darkmode #appShell .bpTicket:not(.bpTicketDark) {
  background: var(--rf-surface) !important; color: var(--rf-ink) !important; box-shadow: var(--rf-shadow) !important;
}
body.darkmode #appShell .bpTicket .bpTicketTop,
body.darkmode #appShell .bpTicket .bpTicketBottom { background: transparent !important; }
body.darkmode #appShell .bpRouteCode,
body.darkmode #appShell .bpMetaValue,
body.darkmode #appShell .bpTicketAmount,
body.darkmode #appShell .bpProgressMeta,
body.darkmode #appShell .bpProgressMeta * { color: var(--rf-ink) !important; }
body.darkmode #appShell .bpRouteName,
body.darkmode #appShell .bpTicketLabel { color: var(--rf-slate) !important; }
body.darkmode #appShell .bpPlane svg { fill: var(--rf-ink) !important; stroke: var(--rf-ink) !important; }
body.darkmode #appShell .bpFlightMeta { border-color: var(--rf-line) !important; }
body.darkmode #appShell .bpProgress { background: var(--rf-line) !important; }
body.darkmode #appShell .bpTicketNotches:before,
body.darkmode #appShell .bpTicketNotches:after,
body.darkmode #appShell .bpTicketNotches .bpTicketBottom:before,
body.darkmode #appShell .bpTicketNotches .bpTicketBottom:after { background: var(--rf-ground) !important; }
body.darkmode #appShell .bpTicketDark,
body.darkmode #appShell .bpSafeCard { background: var(--rf-ticket) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important; }
body.darkmode #appShell .bpEmptyTripTicket p { color: var(--rf-slate) !important; }

/* Ticket stats: keep "$35.94 AUD" on one line */
#appShell .bpStatBig { font-size: 26px !important; line-height: 1.05 !important; white-space: nowrap; letter-spacing: -0.01em; }
#appShell .bpTicketAmount { white-space: nowrap; }

/* ---------- 6. Trip screen calendar ---------- */
#appShell .bpCalSpend { font-size: 9px !important; font-weight: 500; letter-spacing: 0; }
body.darkmode #tripCalendar > * { background: var(--rf-surface) !important; color: var(--rf-ink) !important; box-shadow: var(--rf-shadow) !important; }
body.darkmode #appShell .bpCalDay { color: var(--rf-ink-2) !important; border-color: var(--rf-line) !important; }
body.darkmode #appShell .bpCalDay.spend,
body.darkmode #appShell .bpCalDay[class*="spend"] { background: #2A3344 !important; color: #FFFFFF !important; }
body.darkmode #appShell .bpCalDow,
body.darkmode #appShell .bpCalLegend { color: var(--rf-slate) !important; }

/* ---------- 7. Expense lists ---------- */
body.darkmode #appShell .bpExpenseCard,
body.darkmode #appShell .bpExpenseDay,
body.darkmode #appShell .bpCard,
body.darkmode #appShell .bpSummaryStrip,
body.darkmode #appShell .bpInsightMetric,
body.darkmode #appShell .bpPaceCard { background: var(--rf-surface) !important; color: var(--rf-ink) !important; box-shadow: var(--rf-shadow) !important; }
body.darkmode #appShell .bpExpenseRow { border-color: var(--rf-line-2) !important; }
body.darkmode #appShell .bpExpenseTitle,
body.darkmode #appShell .bpExpenseAmount,
body.darkmode #appShell .bpExpenseAmount b,
body.darkmode #appShell .bpExpenseMain b,
body.darkmode #appShell .bpSummaryCell b,
body.darkmode #appShell .bpInsightMetric b,
body.darkmode #appShell .bpCard h3,
body.darkmode #appShell .bpCategoryInsight b,
body.darkmode #appShell .bpCategoryInsight strong,
body.darkmode #appShell .bpPaceTitle,
body.darkmode #appShell .bpPaceTrackRow b,
body.darkmode #appShell .bpDonutCenter,
body.darkmode #appShell .bpDonutCenter b { color: var(--rf-ink) !important; }
body.darkmode #appShell .bpExpenseMeta,
body.darkmode #appShell .bpExpenseAmount small,
body.darkmode #appShell .bpExpenseDayHead,
body.darkmode #appShell .bpSummaryCell span,
body.darkmode #appShell .bpInsightMetric span,
body.darkmode #appShell .bpInsightMetric small,
body.darkmode #appShell .bpCategoryInsight small,
body.darkmode #appShell .bpPaceText,
body.darkmode #appShell .bpPaceTrackRow span,
body.darkmode #appShell .bpMono,
body.darkmode #appShell .bpFootnote,
body.darkmode #appShell .bpDayDetail { color: var(--rf-slate) !important; }
body.darkmode #appShell .bpSummaryCell { border-color: var(--rf-line) !important; }
body.darkmode #appShell .bpEmptyDay { background: transparent !important; border-color: var(--rf-line) !important; color: var(--rf-slate) !important; }
body.darkmode #appShell [style*="color:#5F6776"] { color: var(--rf-slate) !important; }
body.darkmode #appShell [style*="color:#0D1321"] { color: var(--rf-ink) !important; }

/* Summary strip: totals stay on one line */
#appShell .bpSummaryCell b { font-size: 17px !important; white-space: nowrap; letter-spacing: -0.01em; }

/* Filter pills: scroll edge to edge instead of clipping at the screen edge */
#appShell .bpFilterRow {
  margin-left: -22px !important; margin-right: -22px !important;
  padding-left: 22px !important; padding-right: 22px !important;
  scroll-padding-inline: 22px; scroll-snap-type: x proximity;
}
#appShell .bpFilterRow > * { scroll-snap-align: start; flex-shrink: 0; }
#appShell .bpFilterPill { min-height: 40px; }
body.darkmode #appShell .bpFilterPill { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #appShell .bpFilterPill.on { background: var(--rf-ink) !important; color: var(--rf-ground) !important; }
body.darkmode #appShell .bpCategoryFilter { background: var(--rf-surface) !important; color: var(--rf-ink) !important; }

/* ---------- 8. Insights ---------- */
body.darkmode #appShell .bpPaceBar,
body.darkmode #appShell .bpDonutSvg circle[stroke="#E6E9EE"],
body.darkmode #appShell .bpCategoryBar { background-color: var(--rf-surface-2); }
body.darkmode #appShell .bpDonutPct,
body.darkmode #appShell .bpDonutPercentage { color: var(--rf-ink) !important; fill: var(--rf-ink) !important; }
body.darkmode #appShell .bpDonutBudget { color: var(--rf-slate) !important; fill: var(--rf-slate) !important; }
body.darkmode #appShell .bpDonutGraphic,
body.darkmode #appShell .bpDonutCenter { background: transparent !important; }
body.darkmode #appShell .bpDonutCenter * { color: var(--rf-ink) !important; }
body.darkmode #appShell .bpDailyChart { border-color: var(--rf-line) !important; }
body.darkmode #appShell .bpDailyBar:not(.overBudget) { --bar: #8792A6; }
body.darkmode #appShell .bpDailyBar:not(.overBudget) i,
body.darkmode #appShell .bpDailyBar:not(.overBudget)::before { background-color: #8792A6 !important; }

/* ---------- 9. Bottom navigation ---------- */
body.darkmode #appShell .bpNav { background: rgba(21, 27, 38, 0.94) !important; border-color: var(--rf-line) !important; backdrop-filter: blur(12px); }
body.darkmode #appShell .bpNav button { color: var(--rf-slate) !important; }
body.darkmode #appShell .bpNav button.on { color: var(--rf-ink) !important; }
body.darkmode #appShell .bpNav button.on:before { background: var(--rf-ink) !important; }
body.darkmode #appShell .bpNav .bpNavAdd { color: var(--rf-on-accent) !important; }
#appShell .bpNav button svg { transition: transform .15s var(--rf-ease); }
#appShell .bpNav button.on svg { transform: translateY(-1px); }

/* ---------- 10. Settings: one grouped list with line icons ---------- */
#settings .screenHead { display: flex !important; justify-content: space-between !important; align-items: flex-end !important; margin-bottom: 18px !important; }
#settings .setting {
  background: var(--rf-surface) !important; color: var(--rf-ink) !important;
  margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 13px 16px !important; min-height: 64px; box-sizing: border-box;
  border-bottom: 1px solid var(--rf-line-2) !important; transition: background-color .12s ease;
}
#settings .screenHead + .setting,
#settings .setting[onclick*="'language'"],
#settings .setting[onclick*="'account'"] { border-top-left-radius: var(--rf-radius) !important; border-top-right-radius: var(--rf-radius) !important; }
#settings .setting[onclick*="'defaults'"],
#settings .setting[onclick*="'appearance'"],
#settings .setting:last-child { border-bottom-left-radius: var(--rf-radius) !important; border-bottom-right-radius: var(--rf-radius) !important; border-bottom: 0 !important; margin-bottom: 14px !important; }
#settings .setting:active { background: var(--rf-surface-2) !important; transform: none; }
#settings .setting b { font-size: 15px; font-weight: 700; color: var(--rf-ink) !important; }
#settings .setting small { color: var(--rf-slate) !important; font-size: 12.5px; }
#settings .settingIcon {
  width: 38px !important; height: 38px !important; border-radius: 11px !important;
  background: var(--rf-ground) !important; color: var(--rf-ink) !important;
  display: grid !important; place-items: center !important; font-size: 0 !important; flex-shrink: 0;
}
#settings .settingIcon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#settings .settingChevron { color: var(--rf-slate); display: grid; place-items: center; flex-shrink: 0; }
#settings .settingChevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Settings panels (categories, currencies, account …) */
#settingsmodal .modalbox,
#settingsmodal .settingsModalBox { background: var(--rf-ground) !important; color: var(--rf-ink) !important; }
#settingsmodal .settingsPanelHead,
#settingsmodal .panelHead { background: var(--rf-ground) !important; border-color: var(--rf-line) !important; }
#settingsmodal #settingsTitle {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif !important;
  font-size: 34px !important; font-weight: 800 !important; font-stretch: 75% !important;
  letter-spacing: -0.03em !important; line-height: 1 !important; color: var(--rf-ink) !important;
}
#settingsmodal .settingsBackBtn,
#settingsmodal .backbtn { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border: 1px solid var(--rf-line) !important; box-shadow: none !important; min-width: 44px; min-height: 44px; }
#settingsmodal .manageRow { background: var(--rf-surface) !important; color: var(--rf-ink) !important; box-shadow: none !important; border: 0 !important; min-height: 64px; }
#settingsmodal .manageRow b { color: var(--rf-ink) !important; }
#settingsmodal .manageRow small { color: var(--rf-slate) !important; }

/* On/Off becomes a switch (the On/Off text stays for screen readers) */
#settingsmodal .manageRow .toggle {
  position: relative; width: 50px !important; height: 30px !important; min-width: 50px;
  padding: 0 !important; border: 0 !important; border-radius: 15px !important;
  background: var(--rf-line) !important; color: transparent !important; font-size: 0 !important;
  transition: background-color .18s ease; flex-shrink: 0;
}
#settingsmodal .manageRow .toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 12px;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(13, 19, 33, .25); transition: transform .18s var(--rf-ease);
}
#settingsmodal .manageRow .toggle.on { background: var(--rf-ink) !important; }
body.darkmode #settingsmodal .manageRow .toggle.on { background: var(--rf-accent) !important; }
#settingsmodal .manageRow .toggle.on::after { transform: translateX(20px); }
#settingsmodal .manageRow input[type="color"] {
  width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--rf-line) !important; background: none !important; flex-shrink: 0; cursor: pointer;
}
#settingsmodal .manageRow input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#settingsmodal .manageRow input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
#settingsmodal .miniBtn {
  background: var(--rf-ground) !important; color: var(--rf-ink) !important;
  min-height: 36px; border-radius: 10px !important; font-weight: 700 !important;
}
#settingsmodal .miniBtn.danger {
  background: transparent !important; color: var(--rf-slate) !important;
  min-width: 36px; font-size: 18px !important; font-weight: 500 !important;
}
#settingsmodal .miniBtn.danger:hover { color: #C4472F !important; }
body.darkmode #settingsmodal .field input,
body.darkmode #settingsmodal .field select,
body.darkmode #settingsmodal input:not([type="color"]),
body.darkmode #settingsmodal select,
body.darkmode #settingsmodal .languageCard,
body.darkmode #settingsmodal .wideBtn:not(.primary) { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #settingsmodal [style*="background:#fff"],
body.darkmode #settingsmodal [style*="background:white"],
body.darkmode #settingsmodal [style*="background:#FFFFFF"] { background: var(--rf-surface) !important; }

/* ---------- 11. Add / edit expense sheet ---------- */
#addsheet.open { animation: rfSheetUp .28s var(--rf-ease) both; }
@keyframes rfSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
#addsheet .bpAddTop b { color: var(--rf-ink) !important; font-weight: 700 !important; }
#addsheet .bpCircleClose { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border: 1px solid var(--rf-line) !important; min-width: 44px; min-height: 44px; }
#addsheet .bpCategoryChips { scroll-padding-inline: 20px; scroll-snap-type: x proximity; }
#addsheet .bpCategoryChip { scroll-snap-align: start; min-height: 42px; }
#addsheet .bpKeys button { transition: background-color .1s ease, transform .1s ease; border-radius: 14px; }
#addsheet .bpKeys button:active { background: var(--rf-line-2) !important; }
#addsheet .bpSavebar .another { background: transparent !important; color: var(--rf-ink) !important; box-shadow: inset 0 0 0 1.5px var(--rf-ink) !important; border: 0 !important; }
body.darkmode #addsheet .bpCurrencyPill,
body.darkmode #addsheet .bpCategoryChip:not(.on),
body.darkmode #addsheet .bpExpenseMetaCard { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #addsheet .bpCategoryChip.on { background: var(--rf-ink) !important; color: var(--rf-ground) !important; }
body.darkmode #addsheet .expenseNote { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #addsheet .expenseNote::placeholder { color: var(--rf-slate); }
body.darkmode #addsheet .bpDateRow,
body.darkmode #addsheet .bpDateRow span,
body.darkmode #addsheet .bpDateRow button,
body.darkmode #addsheet .bpAmountDisplay,
body.darkmode #addsheet .bpAmountDisplay strong,
body.darkmode #addsheet .bpKeys button { color: var(--rf-ink) !important; }
body.darkmode #addsheet .bpAmountSymbol,
body.darkmode #addsheet .convert { color: var(--rf-slate) !important; }
body.darkmode #addsheet .bpPay { background: var(--rf-surface-2) !important; }
body.darkmode #addsheet .bpPay button { color: var(--rf-slate) !important; background: transparent !important; }
body.darkmode #addsheet .bpPay button.on { background: var(--rf-surface) !important; color: var(--rf-ink) !important; }
body.darkmode #addsheet .bpKeys button { background: transparent !important; }
body.darkmode #addsheet .bpSavebar { background: var(--rf-ground) !important; }
body.darkmode #addsheet .bpSavebar .another { color: var(--rf-ink) !important; box-shadow: inset 0 0 0 1.5px var(--rf-ink) !important; }

/* ---------- 12. New / edit trip ---------- */
#tripmodal.open .modalbox { animation: rfSheetUp .28s var(--rf-ease) both; }
#tripmodal .tripModalHeader h2 {
  font-family: 'Archivo', system-ui, -apple-system, sans-serif !important;
  font-size: 36px !important; font-weight: 800 !important; font-stretch: 75% !important;
  letter-spacing: -0.03em !important; line-height: 1 !important; color: var(--rf-ink) !important;
}
#tripmodal .tripModalKicker { color: var(--rf-slate) !important; }
#tripmodal .field > span,
#tripmodal .tripColourField > span {
  font-family: 'DM Mono', ui-monospace, monospace !important; font-size: 10.5px !important;
  letter-spacing: .1em !important; font-weight: 500 !important; color: var(--rf-slate) !important;
}
#tripmodal .field input,
#tripmodal .field select,
#tripmodal .moneyInput { border: 1px solid var(--rf-line) !important; box-shadow: none !important; min-height: 50px; box-sizing: border-box; }
#tripmodal .field input:focus,
#tripmodal .field select:focus,
#tripmodal .moneyInput:focus-within { border-color: var(--rf-ink) !important; outline: none; }
#tripmodal .currencyChip {
  background: var(--rf-surface) !important; color: var(--rf-ink) !important;
  box-shadow: inset 0 0 0 1px var(--rf-line); font-family: 'DM Mono', ui-monospace, monospace !important;
  font-weight: 500 !important; font-size: 13px !important; min-height: 36px;
}
#tripmodal .currencyChip.on { background: var(--rf-ink) !important; color: var(--rf-surface) !important; box-shadow: none; }
#tripmodal .tripCurrencyBox { box-shadow: none !important; border: 1px solid var(--rf-line-2) !important; }
body.darkmode #tripmodal .modalbox,
body.darkmode #tripmodal .tripModalBox { background: var(--rf-ground) !important; color: var(--rf-ink) !important; }
body.darkmode #tripmodal .field input,
body.darkmode #tripmodal .field select,
body.darkmode #tripmodal .moneyInput,
body.darkmode #tripmodal .moneyInput input,
body.darkmode #tripmodal .tripColourPicker,
body.darkmode #tripmodal .tripCurrencyBox,
body.darkmode #tripmodal .rateRow,
body.darkmode #tripmodal .seg { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #tripmodal .seg button { color: var(--rf-slate) !important; background: transparent !important; }
body.darkmode #tripmodal .seg button.on { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; }
body.darkmode #tripmodal .tripModalClose,
body.darkmode #tripmodal .secondary { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
body.darkmode #tripmodal .budgetHint,
body.darkmode #tripmodal .tripColourHelp,
body.darkmode #tripmodal .currencyHead small,
body.darkmode #tripmodal .rateStatus,
body.darkmode #tripmodal .homeTotalNote { color: var(--rf-slate) !important; }
body.darkmode #tripmodal .currencyHead b,
body.darkmode #tripmodal .homeTotalNote b,
body.darkmode #tripmodal .tripModalHeader h2 { color: var(--rf-ink) !important; }
body.darkmode #tripmodal .tripColourSwatch.on { box-shadow: 0 0 0 3px var(--rf-ground), 0 0 0 5px var(--rf-ink) !important; }

/* ---------- 13. Dialogs, toast, delete bar ---------- */
body.darkmode .confirmBox,
body.darkmode .sharingPanel,
body.darkmode .catEditorPage { background: var(--rf-surface) !important; color: var(--rf-ink) !important; }
body.darkmode .confirmBox p,
body.darkmode .sharingPanel p,
body.darkmode .sharingPanel small { color: var(--rf-ink-2) !important; }
body.darkmode .confirmBox .keep { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; }
body.darkmode #appShell .deleteBar { background: var(--rf-surface) !important; color: var(--rf-ink) !important; }
.cloudToast {
  border-radius: 14px !important; padding: 12px 16px !important; font-size: 13.5px !important; font-weight: 700 !important;
  background: var(--rf-ink) !important; color: var(--rf-ground) !important;
  bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 12px 32px rgba(13, 19, 33, .22) !important;
}
.cloudToast.bad { background: #B8321F !important; color: #FFFFFF !important; }
body.darkmode .cloudToast:not(.bad) { background: #EEF0F3 !important; color: #0D1321 !important; }

/* ---------- 14. Onboarding: trip colours ---------- */
.obIcons.obColours { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 8px !important; }
.obIcon.obColour {
  aspect-ratio: 1; width: 100%; max-width: 44px; justify-self: center; padding: 0 !important;
  border-radius: 50% !important; background: var(--trip-swatch) !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(13, 19, 33, .08) !important; position: relative; cursor: pointer;
}
.obIcon.obColour.on { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #0D1321 !important; }
.obIcon.obColour span { display: none; }
.obColourDot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--trip-swatch); vertical-align: 1px; }
@media (max-width: 380px) { .obIcons.obColours { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #appShell .screen.active, #addsheet.open, #tripmodal.open .modalbox { animation: none !important; }
  #appShell button:active, .sheet button:active, .modal button:active, #appShell .bpTripCard:active { transform: none !important; }
  #settingsmodal .manageRow .toggle, #settingsmodal .manageRow .toggle::after { transition: none !important; }
}

/* ---------- 16. Dark-mode fixes found in review ---------- */
body.darkmode #addsheet .bpAddTop { background: var(--rf-ground) !important; }
body.darkmode #appShell .bpCalDay { background: var(--rf-surface-2) !important; border-color: var(--rf-line) !important; color: var(--rf-slate) !important; }
body.darkmode #appShell .bpCalDay.spend { background: #2E3849 !important; border-color: #2E3849 !important; color: #FFFFFF !important; }
body.darkmode #appShell .bpCalDay.today { background: transparent !important; border-color: var(--rf-accent) !important; color: var(--rf-ink) !important; }
body.darkmode #appShell .bpCalDay.pretrip { background: transparent !important; border: 0 !important; }
/* Text that sits on the orange accent always stays ink */
body.darkmode #appShell .bpDayBadge:not(.bpDayBadgeSoft),
body.darkmode .bpNavAdd,
body.darkmode .primary,
body.darkmode .bpSavebar .save,
body.darkmode .bpEmptyTripButton { color: #0D1321 !important; }

/* Category/payment rows: long names truncate so the controls stay in one column */
#settingsmodal .manageRow { gap: 10px !important; }
#settingsmodal .manageRow .grow { min-width: 0 !important; flex: 1 1 auto; }
#settingsmodal .manageRow .grow b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 17. Onboarding: bring the first-run steps onto the Boarding Pass palette ---------- */
#onboardingGate .onboardShell { border-radius: 24px !important; box-shadow: 0 1px 0 rgba(13,19,33,.04), 0 18px 48px rgba(13,19,33,.10) !important; }
#onboardingGate .onboardTop { gap: 8px; }
#onboardingGate .brandMini { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0D1321; }
#onboardingGate .brandMini span { background: #FF5B1F !important; color: #0D1321 !important; border-radius: 9px !important; }
#onboardingGate .onboardLang { display: flex; gap: 4px; flex-shrink: 0; }
#onboardingGate .onboardLang button,
#onboardingGate .ghostBtn { background: #EEF0F3 !important; color: #0D1321 !important; font-weight: 700 !important; min-height: 36px; font-size: 13px; white-space: nowrap; }
#onboardingGate .onboardLang button.on { background: #0D1321 !important; color: #FFFFFF !important; }
#onboardingGate .onboardProgress i { background: #E6E9EE !important; }
#onboardingGate .onboardProgress i.on { background: #FF5B1F !important; }
#onboardingGate .obKicker { font-family: 'DM Mono', ui-monospace, monospace !important; font-weight: 500 !important; color: #4A5263 !important; letter-spacing: .12em !important; }
#onboardingGate .onboardingBody h2 { font-family: 'Archivo', system-ui, sans-serif; font-size: 32px; line-height: 1; font-weight: 800; font-stretch: 75%; letter-spacing: -0.03em; color: #0D1321; margin: 6px 0 8px; text-wrap: balance; }
#onboardingGate .onboardingBody p { color: #4A5263; }
#onboardingGate .obInput,
#onboardingGate .obField input,
#onboardingGate .obField select { background: #FFFFFF !important; border: 1.5px solid #D9DDE3 !important; border-radius: 12px !important; min-height: 50px; box-sizing: border-box; }
#onboardingGate .obInput:focus,
#onboardingGate .obField input:focus,
#onboardingGate .obField select:focus { box-shadow: none !important; border-color: #0D1321 !important; outline: none; }
#onboardingGate .obField span { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500 !important; color: #5F6776 !important; letter-spacing: .1em !important; }
#onboardingGate .obCurrency { background: #FFFFFF !important; color: #0D1321 !important; box-shadow: inset 0 0 0 1px #D9DDE3; font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500 !important; min-height: 36px; }
#onboardingGate .obCurrency.on { background: #0D1321 !important; color: #FFFFFF !important; box-shadow: none; }
#onboardingGate .obHint { background: #EEF0F3 !important; color: #4A5263 !important; border-radius: 12px !important; }
#onboardingGate .obBudgetType { background: #E0E4EA !important; border-radius: 14px !important; }
#onboardingGate .obBudgetType button { color: #4A5263; font-weight: 700 !important; }
#onboardingGate .obBudgetType button.on { background: #FFFFFF !important; color: #0D1321 !important; box-shadow: 0 1px 2px rgba(13,19,33,.14); }
#onboardingGate .obSummary { background: #0D1321 !important; border-radius: 18px !important; }
#onboardingGate .obSummary .lime { color: #FF8A5C !important; }
#onboardingGate .onboardActions .secondary { background: #EEF0F3 !important; color: #0D1321 !important; }
#onboardingGate .obIcon.obColour.on { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #0D1321 !important; }
#onboardingGate .onboardShell { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
#onboardingGate .onboardTop > * { min-width: 0; }
#onboardingGate .obBudgetLine { background: #FFFFFF !important; border: 1.5px solid #D9DDE3 !important; border-radius: 12px !important; }
#onboardingGate .obBudgetLine:focus-within { border-color: #0D1321 !important; }
#onboardingGate .obBudgetLine input { background: transparent !important; border: 0 !important; min-height: 0; }

/* Trip modal in dark mode (earlier layers use #tripmodal.tripModal.open selectors, so match them) */
body.darkmode #tripmodal.tripModal.open,
body.darkmode #tripmodal.tripModal.open > .tripModalBox { background: var(--rf-ground) !important; color: var(--rf-ink) !important; }
body.darkmode #tripmodal.tripModal.open .tripModalHeader { background: rgba(10, 14, 21, .96) !important; }
body.darkmode #tripmodal.tripModal.open .tripModalHeader h2 { background: transparent !important; color: var(--rf-ink) !important; }
body.darkmode #tripmodal.tripModal.open .tripModalClose,
body.darkmode #tripmodal.tripModal.open .tripModalActions .secondary { background: var(--rf-surface) !important; color: var(--rf-ink) !important; border-color: var(--rf-line) !important; }
#tripmodal.tripModal.open .tripModalHeader h2 { font-size: 36px !important; font-stretch: 75% !important; letter-spacing: -0.03em !important; }
#tripmodal.tripModal.open .seg { background: #E0E4EA !important; }
#tripmodal.tripModal.open .seg button { color: #4A5263 !important; }
#tripmodal.tripModal.open .seg button.on { background: #FFFFFF !important; color: #0D1321 !important; box-shadow: 0 1px 2px rgba(13,19,33,.14) !important; }
body.darkmode #tripmodal.tripModal.open .seg { background: var(--rf-surface) !important; }
body.darkmode #tripmodal.tripModal.open .seg button { color: var(--rf-slate) !important; }
body.darkmode #tripmodal.tripModal.open .seg button.on { background: var(--rf-surface-2) !important; color: var(--rf-ink) !important; box-shadow: none !important; }
body.darkmode #tripmodal.tripModal.open .tripModalHeader { border-bottom-color: var(--rf-line) !important; }

/* ==========================================================================
   v78 — New trip flow: live ticket, "Where to?" search, currency summary
   Markup: #tripPreview, .tfSearch, #tripDestSuggest, #tripCurrencySummary,
   #tripCurrencyDetails, #tfBudgetFx (index.html). Behaviour: assets/trip-flow.js
   ========================================================================== */
#tripmodal .tfPreview { margin: 0 0 18px; font-size: 15px; line-height: 1.2; }
#tripmodal .tfTicket {
  position: relative; overflow: hidden; background: var(--rf-surface); color: var(--rf-ink);
  border-radius: 20px; box-shadow: var(--rf-shadow);
}
#tripmodal .tfTop { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 12px; }
#tripmodal .tfRow { display: flex; align-items: center; gap: 10px; min-height: 26px; }
#tripmodal .tfTag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 26px; padding: 0 8px;
  border-radius: 8px; box-sizing: border-box; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px;
  font-weight: 500; letter-spacing: .06em;
}
#tripmodal .tfTagEmpty { background: transparent; border: 1.5px dashed var(--rf-line); position: relative; }
#tripmodal .tfTagEmpty::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tf-trip, var(--rf-accent)); }
#tripmodal .tfLabel { flex: 1; min-width: 0; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--rf-slate); }
#tripmodal .tfDays {
  flex-shrink: 0; padding: 5px 9px; border-radius: 999px; background: var(--rf-accent); color: var(--rf-on-accent);
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em;
}
#tripmodal .tfRoute { display: grid; grid-template-columns: auto minmax(40px, 1fr) minmax(0, auto); align-items: start; gap: 10px; }
#tripmodal .tfEnd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#tripmodal .tfEndRight { align-items: flex-end; text-align: right; max-width: 52vw; }
#tripmodal .tfCode {
  display: block; font-family: 'Archivo', system-ui, sans-serif; font-size: 44px; line-height: .92; font-weight: 800;
  font-stretch: 75%; letter-spacing: -.01em; color: var(--rf-ink); white-space: nowrap;
}
#tripmodal .tfEnd small { display: block; font-size: 13px; color: var(--rf-slate); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tripmodal .tfEnd small.tfPlace { color: var(--rf-ink); font-weight: 600; }
#tripmodal .tfLine { display: flex; align-items: center; gap: 6px; height: 40px; color: var(--rf-ink); }
#tripmodal .tfLine i { flex: 1; height: 0; border-top: 2px dotted var(--rf-perf); }
#tripmodal .tfLine svg { width: 20px; height: 20px; flex-shrink: 0; transform: rotate(45deg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tripmodal .tfPerf { position: relative; height: 22px; display: flex; align-items: center; padding: 0 20px; }
#tripmodal .tfPerf::before, #tripmodal .tfPerf::after { content: ""; position: absolute; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--rf-ground); }
#tripmodal .tfPerf::before { left: -11px; } #tripmodal .tfPerf::after { right: -11px; }
#tripmodal .tfPerf i { flex: 1; height: 0; border-top: 2px dashed var(--rf-perf); }
#tripmodal .tfBottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 18px 14px; }
#tripmodal .tfCell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#tripmodal .tfCell:nth-child(2) { align-items: center; text-align: center; }
#tripmodal .tfCell:nth-child(3) { align-items: flex-end; text-align: right; }
#tripmodal .tfCell > span { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; color: var(--rf-slate); }
#tripmodal .tfCell > b { font-size: 14px; font-weight: 700; color: var(--rf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-variant-numeric: tabular-nums; }
#tripmodal .tfCell > small { font-size: 11.5px; color: var(--rf-slate); white-space: nowrap; }
#tripmodal .tfTicket .tfPh { color: #C9CED6; font-weight: 700; }
#tripmodal .tfEnd small.tfPh { color: #A9B0BC; font-weight: 400; }
body.darkmode #tripmodal .tfTicket .tfPh { color: #3A4558; }
body.darkmode #tripmodal .tfEnd small.tfPh { color: #5B6578; }
@keyframes tfFlip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tfStamp { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
#tripmodal .tfFlip { animation: tfFlip .32s var(--rf-ease) both; }
#tripmodal .tfStamp { animation: tfStamp .42s var(--rf-ease); }

/* "Where to?" field with a search icon */
#tripmodal .tfSearch { position: relative; }
#tripmodal .tfSearch svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--rf-slate); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
#tripmodal.tripModal .tfSearch input#tname { padding-left: 42px !important; }

/* Suggestions (trip form and onboarding) */
.tfSuggest { display: grid; gap: 2px; margin: -4px 0 12px; padding: 6px; background: var(--rf-surface); border: 1px solid var(--rf-line-2); border-radius: 16px; box-shadow: var(--rf-shadow); font-size: 15px; line-height: 1.2; }
.tfSuggest[hidden] { display: none !important; }
#tripmodal .tfSuggest .tfOpt,
.tfSuggest .tfOpt {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px 10px; margin: 0; border: 0; border-radius: 12px; background: transparent; color: var(--rf-ink);
  font: inherit; text-align: left; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tfSuggest .tfOpt.on, .tfSuggest .tfOpt:hover, .tfSuggest .tfOpt:active { background: var(--rf-surface-2); }
.tfSuggest .tfOptIcon { width: 32px; height: 32px; border-radius: 10px; background: var(--rf-ground); display: grid; place-items: center; }
.tfSuggest .tfOptIcon svg { width: 17px; height: 17px; fill: none; stroke: var(--rf-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tfSuggest .tfOptText { min-width: 0; }
.tfSuggest .tfOptText b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfSuggest .tfOptText small { display: block; margin-top: 2px; font-size: 12px; color: var(--rf-slate); }
.tfSuggest .tfOptCur { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: var(--rf-ink-2); white-space: nowrap; }

/* Currency: one-line summary, details behind Change */
#tripmodal .tfCurrency { margin: 0 0 16px; padding: 12px 14px 13px; background: var(--rf-surface); border: 1px solid var(--rf-line-2); border-radius: 16px; font-size: 15px; line-height: 1.2; color: var(--rf-ink); }
#tripmodal .tfCurHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#tripmodal .tfCurLabel { font-family: 'DM Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--rf-slate); }
#tripmodal .tfCurrency .tfCurToggle {
  min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rf-line); background: var(--rf-surface);
  color: var(--rf-ink); font: inherit; font-size: 13px; font-weight: 700; box-shadow: none; cursor: pointer;
}
#tripmodal .tfCurrency .tfCurToggle[aria-expanded="true"] { background: var(--rf-ink); border-color: var(--rf-ink); color: var(--rf-surface); }
#tripmodal .tfCurMain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tfCurChip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; box-sizing: border-box;
  background: var(--rf-ink); color: var(--rf-surface); font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: .04em;
}
#tripmodal .tfCurHome { margin-left: auto; font-family: 'DM Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-slate); }
#tripmodal .tfCurSub { margin: 9px 0 0; font-size: 13px; line-height: 1.35; color: var(--rf-ink-2); }
#tripmodal .tfCurWarn { margin: 9px 0 0; padding: 9px 11px; border-radius: 10px; background: #FFF1EC; color: #9A3412; font-size: 13px; line-height: 1.35; }
body.darkmode #tripmodal .tfCurWarn { background: rgba(255, 91, 31, .14); color: #FFB59A; }
#tripmodal .tfCurrencyDetails { margin: -6px 0 16px; }
#tripmodal .tfCurrencyDetails[hidden] { display: none !important; }
#tripmodal .tfCurrency:empty, #tripmodal .tfPreview:empty { display: none; }
#tripmodal .tfCurrencyDetails .tripCurrencyBox { margin-bottom: 0 !important; }
#tripmodal .tfBudgetFx { margin: 6px 4px 0; font-size: 13px; line-height: 1.3; color: var(--rf-ink-2); font-variant-numeric: tabular-nums; }
#tripmodal .tfBudgetFx[hidden] { display: none !important; }

/* Save stays tappable (it explains what's missing) but looks ready only when it is */
#tripmodal.tripModal.open .tripModalActions .primary { transition: opacity .2s ease, transform .12s ease; }
#tripmodal.tripModal.open:not(.tfReady) .tripModalActions .primary { opacity: .45 !important; }

/* Onboarding step 1 (always light, like the rest of onboarding) */
#onboardingGate .tfSuggest,
#onboardingGate .tfObNote { --rf-ink: #0D1321; --rf-ink-2: #4A5263; --rf-slate: #5F6776; --rf-ground: #EEF0F3; --rf-surface: #FFFFFF; --rf-surface-2: #F4F5F8; --rf-line-2: #E6E9EE; }
#onboardingGate .tfSuggest { margin: 8px 0 0; text-align: left; }
#onboardingGate .tfObNote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0 !important; font-size: 13px; line-height: 1.35; color: var(--rf-ink-2) !important; }
#onboardingGate .tfObNote[hidden] { display: none !important; }
#onboardingGate .tfObNote .tfCurChip { height: 26px; font-size: 12px; }
#onboardingGate.tfTyping { place-items: start center !important; padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; }
#onboardingGate.tfTyping .onboardingBody > p { display: none; }

@media (prefers-reduced-motion: reduce) {
  #tripmodal .tfFlip, #tripmodal .tfStamp { animation: none !important; }
}

/* v79: keep the trip editor steady when the mobile keyboard opens and the
   live ticket changes. Retain browser zoom and vertical form scrolling. */
#tripmodal.tripModal.open > .tripModalBox {
  min-width: 0 !important;
  flex: 0 1 430px;
}
#tripmodal.tripModal.open input,
#tripmodal.tripModal.open select {
  /* Prevent iOS focus zoom from panning the editor sideways. */
  font-size: 16px !important;
}
#tripmodal .tfPreview,
#tripmodal .tfTicket,
#tripmodal .tfSearch,
#tripmodal .tfCurrency,
#tripmodal .tfCurrencyDetails,
#tripmodal .moneyInput {
  min-width: 0;
  max-width: 100%;
}
#tripmodal .tfRoute {
  /* Equal ends keep the route stable as the destination name grows. */
  grid-template-columns: minmax(0, 1fr) minmax(28px, .45fr) minmax(0, 1fr);
}
#tripmodal .tfEndRight { max-width: 100%; }
#tripmodal .tfCode { max-width: 100%; }
#tripmodal .tfCell > small {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#tripmodal .tfCurSub,
#tripmodal .tfCurWarn,
#tripmodal .tfBudgetFx,
#tripmodal .budgetHint {
  overflow-wrap: anywhere;
}
#tripmodal .rateRow { grid-template-columns: auto minmax(0, 1fr) auto; }
@media (max-width: 430px) {
  #tripmodal .tfCode { font-size: clamp(32px, 10vw, 44px); }
}

/* v80: budget amounts align beneath their currency; dates remain in the form. */
#tripmodal .tfBottom.tfBudgetBottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#tripmodal .tfBudgetBottom .tfCell:nth-child(2) {
  align-items: flex-end;
  text-align: right;
}
#tripmodal .tfBudgetBottom .tfCell > b {
  font-size: clamp(17px, 5vw, 21px);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
#tripmodal .tfBudgetBottom .tfCell > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* v81: reserve footer space instead of covering the keypad on short screens. */
#addsheet { padding: 0 !important; overflow: hidden !important; }
#addsheet.open { display: flex !important; flex-direction: column; }
#addsheet .bpExpenseContent {
  flex: 1 1 0; min-height: 0; width: 100%; overflow-y: auto;
  overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scroll-padding-bottom: 16px;
}
#addsheet .bpKeys { padding-bottom: 16px !important; }
#addsheet .bpKeys button { min-height: 49px; touch-action: manipulation; }
#addsheet .bpSavebar {
  position: static !important; flex: 0 0 auto; width: 100%;
  margin: 0 !important; background: var(--rf-ground, #EEF0F3) !important;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid var(--rf-line, #D9DDE3);
}
#addsheet .bpSavebar button { height: auto !important; min-height: 56px !important; padding: 10px 12px !important; }
/* Home currency is on the left; fly right towards the destination. */
#appShell .bpPlane svg { transform: scaleX(-1); }