/* The spending journal (js/expenseView.js): a compact block at the end of Diary › More, one "Đã chi" cue
   in the Food day header, the Quick add tile, and its views inside the Diary's own #entry-detail-sheet.
   Money has its own quiet cue — a small ₫ on the peach tint (--peach-light / --peach-strong, 5.4 : 1), a
   colour no health area uses — so it's easy to find and never looks like kcal. No new card, no chart.
   Loaded after css/diary.css. Amounts never wrap or get cut: the description wraps instead. Touch: 44 px
   targets. Motion: nothing animates here (css/diary.css already stills #tab-diary and the sheet). */

/* ---- the ₫ cue ---- */
.xp-cue { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--peach-light); color: var(--peach-strong); font-family: var(--font-body); font-size: 14px; font-weight: 800; line-height: 1; }
#tab-diary .fr-icon.xp-cue { width: 24px; font-size: 14px; }

/* ---- Diary › More: the block (after the note; a dashed hairline sets it apart) ---- */
#tab-diary .spend-block { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--diary-line); }
/* While the block is hidden the note stays the card's last part (no extra space under it). */
#tab-diary .diary-more .more-form:has(+ .spend-block[hidden]) { margin-bottom: 0; }
.spend-block .xp-label { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.spend-block .xp-label .xp-cue { width: 22px; height: 22px; border-radius: 7px; font-size: 13px; }
#tab-diary #expense-list { margin: 4px 0 0; }
#tab-diary #expense-list li:first-child { border-top: none; }
.xp-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.xp-desc { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.xp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; line-height: 1.35; }
.xp-amt { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.xp-amt.is-in { color: var(--accent-strong); }
.xp-amt.is-muted { color: var(--text-secondary); font-weight: 700; }
.xp-row.is-pending .xp-open { opacity: 0.72; }
/* A row that isn't plain spending says so with one small chip (never counted in "Đã chi"). */
.xp-kind { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--diary-line, var(--line)); font-size: 11.5px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.xp-kind.k-transfer { background: var(--sky-light); color: var(--sky-ink); }
.xp-kind.k-income { background: var(--accent-light); color: var(--accent-strong); }
.xp-kind.k-refund { background: var(--lavender-light); color: var(--lavender-ink); }
.xp-kind.k-review { background: var(--yellow-light); color: var(--yellow-ink); }
/* "Đã chi hôm nay 46.000 ₫" and, on the same line when it fits, "Tháng 9 · 1.240.000 ₫ ›". */
.xp-totals { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; margin-top: 6px; }
.xp-total { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.xp-total b { color: var(--text-primary); font-size: 15px; white-space: nowrap; }
/* (the month and its amount stay on one line; "(chưa tải đủ)" and the › may go to the next one on a narrow phone) */
.spend-block .xp-month { max-width: 100%; margin: 0 0 0 auto; font-size: 13.5px; text-align: end; white-space: normal; }
.spend-block .xp-mamt { white-space: nowrap; }
.xp-flows, .xp-offline { margin: 2px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
/* A month not read yet / that couldn't be read: its totals say "(chưa tải đủ)", and one quiet line offers
   "Thử lại" (no alarm colour: it is the network, not the user). */
.xp-partial { color: var(--text-secondary); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xp-load-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
#tab-diary li.list-empty.xp-load-note { font-style: normal; }
.link-btn.xp-retry { font-size: 13.5px; font-style: normal; }
.link-btn.xp-retry[aria-disabled="true"] { color: var(--text-secondary); text-decoration: none; cursor: progress; }
.xp-mload { margin: 6px 0 0; color: var(--text-secondary); font-size: 13.5px; }
.xp-mtotal > .xp-mload:first-child { margin-top: 0; }
.xp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 4px; }
.xp-actions .link-btn { font-size: 14px; }
.link-btn.xp-quiet { color: var(--text-secondary); font-weight: 600; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.link-btn.xp-quiet:hover { color: var(--text-primary); background: var(--surface-soft); }

/* ---- the Food day header: one restrained "Đã chi 46.000 ₫" (after the kcal line, never inside it) ---- */
.diary-food-header .day-spent { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 4px 0 0;
  color: var(--peach-strong); font-size: 13.5px; font-weight: 700; text-decoration-color: color-mix(in srgb, var(--peach-strong) 40%, transparent); }
.diary-food-header .day-spent:hover { background: var(--peach-light); color: var(--peach-strong); }
.diary-food-header .day-spent .xp-cue { width: 20px; height: 20px; border-radius: 7px; font-size: 12px; }
.day-spent-text { white-space: nowrap; }

/* ---- Quick add: the 7th tile, and every tile above the fold on a 360 × 640 phone ---- */
/* (An account without spending access has no 7th tile — .qa-no-spend, js/expenseView.js — and gets the 6-tile
   sheet exactly as before round 8: none of the tightening below.) */
.qa-icon.qa-peach { background: var(--peach-light); color: var(--peach-strong); }
.qa-icon .qa-glyph { font-size: 17px; font-weight: 800; line-height: 1; }
#quick-add-sheet button.sheet-option.qa-tile.qa-wide { grid-column: 1 / -1; }
@media (max-height: 700px) {
  #quick-add-sheet:not(.qa-no-spend) { padding-top: 10px; }
  #quick-add-sheet:not(.qa-no-spend) .sheet-head { margin-bottom: 4px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-recent { margin-bottom: 6px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-recent-rail button.rs-chip { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-group { gap: 6px; margin-bottom: 6px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-water { margin-bottom: 6px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet:not(.qa-no-spend) button.sheet-option.qa-tile { min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
  #quick-add-sheet:not(.qa-no-spend) button.sheet-option.qa-tile .qa-icon { width: 30px; height: 30px; flex-basis: 30px; }
}

/* ---- the sheet (#entry-detail-sheet) while it shows a spending view ---- */
#entry-detail-sheet:has(.xp-sheet) .entry-detail-head { position: sticky; top: -14px; z-index: 3; margin: -14px -16px 0; padding: 14px 16px 6px; background: var(--surface); }
#entry-detail-title .xp-title { overflow-wrap: anywhere; }
.xp-sheet { color: var(--text-primary); }
.xp-sheet .fs-label { margin-bottom: 4px; }
.xp-hint, .xp-note { margin: 6px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.xp-note { margin-top: 12px; }
.xp-empty { margin: 8px 0; color: var(--text-secondary); font-size: 13.5px; font-style: italic; list-style: none; }
.xp-sheet .xp-empty { border: none; padding: 0; }
.xp-review-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: var(--yellow-light); color: var(--yellow-ink); font-size: 13.5px; font-weight: 700; }
.xp-sheet input[type="text"], .xp-sheet input[type="search"], .xp-sheet input[type="date"], .xp-sheet select { width: 100%; min-width: 0; margin: 0; }
.xp-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.xp-check input { flex: none; width: 20px; height: 20px; margin: 0; }
.xp-chip { min-height: 36px; }

/* add / edit: the two ways in (one segmented control, as the sleep form's) */
.xp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 2px 0 12px; padding: 4px; border-radius: 14px; background: var(--surface-soft); }
.xp-modes button.xp-mode { min-height: 40px; margin: 0; padding: 0 6px; border-radius: 11px; background: transparent; color: var(--text-secondary); font-size: 14px; white-space: nowrap; box-shadow: none; }
.xp-modes button.xp-mode:hover { background: var(--surface); color: var(--text-primary); }
.xp-modes button.xp-mode[aria-pressed="true"] { background: var(--surface); color: var(--peach-strong); box-shadow: 0 1px 3px rgba(23, 34, 28, 0.12); }
.xp-phrase-label { font-size: 14.5px; font-weight: 800; color: var(--text-primary); }
.xp-sheet input.xp-phrase { font-size: 16px; }
/* the one question at a time */
.xp-ask:empty { display: none; }
.xp-ask-box { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--yellow-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yellow) 45%, transparent); }
.xp-ask-label { margin: 0; color: var(--yellow-ink); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.xp-ask-q { margin: 2px 0 8px; font-size: 15px; font-weight: 800; line-height: 1.35; }
.xp-ask-about { margin: -4px 0 8px; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.xp-ask-options { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-ask-options button.xp-ask-opt { flex: 1 1 auto; min-height: 44px; margin: 0; padding: 6px 12px; font-size: 14px; background: var(--surface); }
.xp-ask-row { display: flex; gap: 8px; align-items: center; }
.xp-ask-row > .xp-amount-wrap, .xp-ask-row > input { flex: 1; min-width: 0; }
.xp-ask-row button.xp-ask-ok { flex: none; min-height: 44px; margin: 0; background: var(--surface); }
/* the drafts */
.xp-drafts { margin: 10px 0 0; }
.xp-sheet li.xp-card { display: block; margin: 8px 0 0; padding: 8px 12px 6px; border: 0; border-radius: 14px;
  background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--diary-line, var(--line)); }
.xp-sheet li.xp-card.is-bad { box-shadow: inset 0 0 0 2px #C0584A; }
.xp-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xp-card-desc { min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.xp-card-amt { flex: none; font-size: 16px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-card-amt.is-missing { color: var(--text-secondary); }
.xp-card-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.xp-card-note { margin: 4px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
.xp-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 6px; }
.xp-card-btns { display: inline-flex; gap: 12px; margin-left: auto; }
.xp-card-btns .link-btn { font-size: 14px; }
.link-btn.xp-remove { color: #A4231B; }
.xp-groups { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.xp-groups .chip[aria-pressed="true"] { background: var(--peach-light); border-color: var(--peach-strong); color: var(--peach-strong); }
.xp-editor { margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid var(--diary-line, var(--line)); }
/* the fields (a draft's editor, or "Fields") */
.xp-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.xp-field { display: block; min-width: 0; }
.xp-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 340px) { .xp-row2 { grid-template-columns: minmax(0, 1fr); } }
.xp-amount-wrap { display: flex; align-items: center; gap: 6px; }
.xp-amount-wrap input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.xp-unit { flex: none; color: var(--text-secondary); font-size: 16px; font-weight: 800; }
.xp-amount-help { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; line-height: 1.4; }
.xp-amount-help:empty { display: none; }
.xp-amt-is { color: var(--text-secondary); font-weight: 700; }
.xp-amt-q { font-weight: 800; }
.xp-amt-bad { display: block; margin-top: 4px; color: #A4231B; font-size: 13px; font-weight: 600; }
.xp-readings { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.xp-sheet [aria-invalid="true"] { border-color: #C0584A; }
.xp-sheet .dh-disclosure.xp-more-btn { font-size: 13.5px; }
.xp-more { display: grid; gap: 10px; }
.xp-hint-chip { margin-top: 6px; }
/* Sticky offsets count from the sheet's content box: the head and the Save bar reach its very edges
   (over the sheet's own padding), so nothing scrolls through a gap above or below them. */
#entry-detail-sheet .xp-foot { bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); }
.xp-foot .editor-actions button { min-height: 48px; }
.xp-foot .xp-import-link { display: block; margin: 6px auto 0; font-size: 13.5px; }
/* A field focused because Save was refused (e.g. the marked Type select) scrolls clear of the sticky head and
   the Save bar, with its red line under it — on a 640 px tall phone it would sit behind the bar. */
#entry-detail-sheet .xp-sheet [data-focus] { scroll-margin: 72px 0 190px; }
.xp-setup-msg { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; }

/* detail */
.xp-back { margin: 0 0 6px; font-size: 14px; }
.xp-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xp-lead-amt { font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-lead-amt.is-in { color: var(--accent-strong); }
.xp-ate { margin: 8px 0 0; }
.xp-ate button.xp-ate-btn { width: 100%; min-height: 48px; margin: 0; }

/* the month sheet */
.xp-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.xp-month-nav .xp-nav { min-width: 44px; min-height: 44px; font-size: 22px; }
.xp-month-nav .xp-nav:disabled { opacity: 0.35; }
.xp-month-name { font-size: 15px; font-weight: 800; }
.xp-mtotal { margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-soft); }
.xp-mspent { margin: 0; color: var(--text-secondary); font-size: 14px; }
.xp-big { color: var(--text-primary); font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-mcount { white-space: nowrap; }
.xp-mtotal .dh-disclosure.xp-breakdown-btn { margin-top: 6px; background: var(--surface); font-size: 13.5px; }
.xp-breakdown { padding: 4px 4px 0; }
.xp-brow { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 0; font-size: 14px; }
.xp-brow b { white-space: nowrap; }
.xp-mtotal .xp-flows, .xp-review { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.xp-review { color: var(--yellow-ink); font-weight: 700; }
.xp-filter { display: grid; gap: 6px; margin: 0 0 8px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-chips .chip[aria-pressed="true"] { background: var(--peach-light); border-color: var(--peach-strong); color: var(--peach-strong); }
.xp-day { margin: 10px 0 0; }
.xp-day-head { margin: 0; }
button.xp-day-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 4px 2px; border-radius: 10px; background: none; box-shadow: none;
  color: var(--text-primary); font-size: 14px; font-weight: 800; text-align: left; }
button.xp-day-btn:hover { background: var(--surface-soft); }
.xp-day-name { flex: 1; min-width: 0; }
.xp-day-sum { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-chev { flex: none; color: var(--text-secondary); }
#entry-detail-sheet .xp-list { margin: 0; }
#entry-detail-sheet .xp-list li.item-row { padding: 0; border-top: 1px solid var(--diary-line); }
#entry-detail-sheet .xp-open { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 4px 2px; border-radius: 10px;
  background: none; box-shadow: none; color: var(--text-primary); font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; }
#entry-detail-sheet .xp-open:hover { background: var(--surface-soft); }
#entry-detail-sheet .xp-open:focus-visible, button.xp-day-btn:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
#entry-detail-sheet .xp-open .ex-row-name { font-weight: 700; }
#entry-detail-sheet .xp-open .ex-row-sub { color: var(--text-secondary); font-size: 12.5px; }
#entry-detail-sheet .xp-open .ex-row-kcal { flex: none; font-weight: 800; white-space: nowrap; }

/* ---- Touch: 44 px targets ---- */
@media (pointer: coarse) {
  .xp-chip, .xp-sheet .link-btn, .spend-block .link-btn, .diary-food-header .day-spent, .xp-modes button.xp-mode { min-height: 44px; }
}