/* Desktop layout contract. Load after the legacy page and mobile styles. */
:root {
  --ledger-focus: #176343;
  --ledger-muted-readable: #58675e;
  --ledger-table-line: #e4e9e5;
}

/* A local outline-none utility must never erase the keyboard indicator. */
body :is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ledger-focus) !important;
  outline-offset: 3px !important;
}
.ledger-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 3000;
  transform: translateY(calc(-100% - 24px));
  padding: 12px 18px;
  border-radius: 10px;
  background: #0f5132;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.ledger-skip-link:focus { transform: translateY(0); pointer-events: auto; }
body :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #b91c1c !important;
}
:is(.apply-form-body, .finance-modal-body, .ledger-extension-body) :is(input, select, textarea, button, summary) {
  scroll-margin-block: 24px;
}

/* Business metadata remains readable on the white and pale green surfaces. */
.finance-muted,
.finance-stat small,
.finance-empty,
.finance-modal-head p,
.finance-budget-strip,
.finance-loading,
.payout-note,
.payout-funding-note,
.payout-household-grid small,
.payout-fund dt,
.payout-fund small,
.payout-metrics small,
.payout-bank-row small,
.payout-select-row small,
.payout-item-link small,
.payout-category-group small,
.payout-order-top p,
.payout-order-bottom > span,
.payout-transfer p,
.payout-bank-row p,
.payout-status {
  color: var(--ledger-muted-readable);
  font-size: 13px;
  line-height: 1.65;
}
.finance-tag { font-size: 12px; color: #2e6045; }
.finance-tag.warning,
.finance-inline-note.warning,
.finance-account-issues { color: #805315; }
.text-text-light { color: #5c6c62; }
.ledger-small,
.ledger-work-row small,
.ledger-category-spent small,
.ledger-page-heading p { font-size: 13px; }
.finance-field-error,
.ledger-field-error { color: #a42323; font-size: 13px; line-height: 1.65; }
.finance-error-summary,
.ledger-form-error-summary,
.ledger-unsaved-prompt {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid #e4bf9a;
  border-radius: 12px;
  background: #fff8ed;
  color: #774611;
  font-size: 14px;
  line-height: 1.7;
  margin-block: 12px;
}
.finance-error-summary:empty,
.ledger-form-error-summary:empty,
.ledger-unsaved-prompt:empty { display: none; }
.ledger-unsaved-prompt .finance-actions { margin-top: 10px; }
.ledger-unsaved-prompt .ledger-inline-actions,
.ledger-form-error-summary .ledger-inline-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 10px; }
.ledger-density-control { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #526158; font-size: 13px; white-space: nowrap; }
.ledger-density-control select { min-height: 36px; max-width: 104px; padding: 6px 26px 6px 10px; border: 1px solid #d7e1d9; border-radius: 8px; background-color: #fff; color: #334b3c; font-size: 13px; }
.ledger-form-section {
  min-inline-size: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ledger-table-line);
  border-radius: 12px;
  background: #fff;
}
.ledger-form-section-title { font-size: 14px; font-weight: 650; color: #294334; margin-bottom: 12px; }
legend.ledger-form-section-title { padding-inline: 6px; margin-bottom: 0; }
.ledger-form-section-note { font-size: 13px; line-height: 1.7; color: var(--ledger-muted-readable); margin-block: 8px; }
.ledger-form-section > :last-child { margin-bottom: 0; }

.payout-selection-hidden {
  padding: 10px 12px;
  background: #fff7e8;
  border: 1px solid #e9d4ac;
  border-radius: 10px;
  color: #805315;
  font-size: 13px;
  line-height: 1.65;
  margin-block: 10px;
}
.payout-summary-items { list-style: none; margin: 10px 0 18px; padding: 0; }
.payout-summary-items > li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ledger-table-line);
  font-size: 14px;
  line-height: 1.6;
}
.payout-summary-items > li > span { min-width: 0; overflow-wrap: anywhere; }
.payout-summary-items > li > strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.payout-summary-items small { display: block; margin-top: 4px; font-size: 13px; color: var(--ledger-muted-readable); }
.payout-tabs button[aria-pressed="true"] { color: #355b45; border-bottom-color: #355b45; font-weight: 600; }
.payout-funding-details { grid-column: 1 / -1; min-width: 0; margin-block: 12px; border: 1px solid var(--ledger-table-line); border-radius: 12px; background: #f8faf6; }
.payout-funding-details > summary { cursor: pointer; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: #365642; overflow-wrap: anywhere; }
.payout-funding-details[open] > summary { border-bottom: 1px solid var(--ledger-table-line); }
.payout-funding-details > .payout-funding-fields { margin: 0; border: 0 !important; background: transparent; }
.payout-funding-details > .payout-origin { padding: 0 14px; margin-top: 12px; }
.payout-funding-details > .finance-grid { padding: 12px 14px 0; }
.payout-funding-details > :is(.ledger-form-section-note, .payout-funding-note) { margin: 12px 14px; }
.payout-funding-details .payout-budget-field { grid-column: auto; }
.payout-household-compact { padding: 0; }
.payout-household-compact > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  cursor: pointer;
  color: #334b3c;
  font-size: 14px;
  list-style: none;
}
.payout-household-compact > summary::-webkit-details-marker { display: none; }
.payout-household-compact > summary > strong { margin-left: auto; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.payout-household-compact > summary > span:last-child { font-size: 13px; color: var(--ledger-muted-readable); }
.payout-household-compact > summary::after { content: '⌄'; font-size: 18px; }
.payout-household-compact[open] > summary { border-bottom: 1px solid var(--ledger-table-line); }
.payout-household-compact[open] > summary::after { content: '⌃'; }
.payout-household-compact > :not(summary) { margin-inline: 18px; }
.payout-household-compact > .ledger-section-top { margin-top: 16px; }
.payout-household-compact > :last-child { margin-bottom: 18px; }

/* Shared review layout; only large desktop windows opt in to two columns. */
.review-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.review-workspace-evidence,
.review-workspace-fields { min-width: 0; }
.review-workspace-evidence { padding: 16px; background: #f6f8f4; border: 1px solid var(--ledger-table-line); border-radius: 12px; }
.review-workspace-evidence > :first-child { margin-top: 0; }
.review-workspace-evidence img { max-width: 100%; height: auto; }
.review-workspace-evidence .review-receipt { background: #fff; }
.review-workspace-fields .finance-field { font-size: 14px; }
.review-evidence-empty { padding: 32px 16px; color: var(--ledger-muted-readable); font-size: 14px; text-align: center; line-height: 1.8; }
.review-queue-progress { font-size: 13px; line-height: 1.65; color: #355b45; padding: 8px 12px; background: #edf5ef; border-radius: 8px; margin-bottom: 12px; }
.ledger-pending-review-center { border: 1px solid #e6c99f; border-radius: 12px; padding: 16px; background: #fff9ef; }
.ledger-pending-review-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; font-size: 14px; line-height: 1.7; border-top: 1px solid #e8dbc5; }
.ledger-pending-review-item:first-child { border-top: 0; }
.ledger-pending-review-notice { position: fixed; right: 24px; bottom: 24px; z-index: 35; max-width: min(360px, calc(100vw - 32px)); }
.ledger-pending-review-notice[hidden] { display: none; }
.ledger-pending-review-notice .ledger-pending-review-entry { min-height: 46px; padding: 12px 16px; background: #fff7e8; border-color: #dfbf8e; color: #774611; font-size: 14px; box-shadow: 0 6px 20px #24362d14; }
.review-workspace-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.review-workspace-head > :is(div, h3, p) { margin-bottom: 0; }
.review-workspace-head > div:first-child { width: 100%; }
.review-workspace-head > div:first-child > div:first-child { width: 36px; height: 36px; border-radius: 10px; }
.review-workspace-head h3 { line-height: 1.45; overflow-wrap: anywhere; }
.review-workspace-head > div:nth-child(3) { font-size: 13px; }
.review-workspace-head .review-queue-progress { margin-top: 4px; }
.review-workspace-evidence h4 { font-size: 14px; font-weight: 650; line-height: 1.6; margin-bottom: 12px; }
.review-evidence-file { min-width: 0; margin-bottom: 16px; }
.review-workspace-evidence .voucher-image-preview { padding: 10px; border-radius: 12px; box-shadow: none; }
.review-evidence-file .voucher-image-stage { min-height: 220px; }
.review-workspace-evidence .voucher-image-stage > img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.review-evidence-file.is-zoomed .voucher-image-stage { overflow: auto; display: block; }
.review-evidence-file.is-zoomed [data-voucher-preview-image] { width: auto; height: auto; max-width: none; object-fit: initial; }
#modal-audit:is(.review-workspace-modal, .review-edit-modal) > .finance-modal-card { display: flex; flex-direction: column; max-height: calc(var(--app-visual-height, 100dvh) - 32px); overflow: hidden; }

/* Real tables retain their native header/cell relationships on desktop. */
.ledger-record-table-wrap { min-width: 0; border: 1px solid var(--ledger-table-line); border-radius: 14px; background: #fff; }
.ledger-record-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ledger-record-table-head th { padding: 12px 10px; background: #f6f8f5; color: #526158; font-size: 12px; line-height: 1.5; text-align: left; font-weight: 600; border-bottom: 1px solid var(--ledger-table-line); }
.ledger-record-table-head th:first-child { border-top-left-radius: 14px; }
.ledger-record-table-head th:last-child { border-top-right-radius: 14px; }
.ledger-record-table-head th:has(> button) { padding-block: 4px; }
.ledger-record-table-head th > button { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; min-height: 44px; padding: 4px 0; font-size: 12px; line-height: 1.45; text-align: inherit; color: inherit; white-space: normal; }
.ledger-record-table-head th.ledger-record-amount > button { justify-content: flex-end; }
.ledger-record-table-head th:is([aria-sort="ascending"], [aria-sort="descending"]) > button { color: #0f5132; font-weight: 650; }
.ledger-record-table .ledger-record-date { width: 88px; }
.ledger-record-table .ledger-record-source { width: 110px; }
.ledger-record-table .ledger-record-category { width: 120px; }
.ledger-record-table .ledger-record-amount { width: 112px; text-align: right; }
.ledger-record-table .ledger-record-status { width: 100px; }
.ledger-record-table .ledger-record-actions { width: 156px; text-align: right; }
.ledger-record-table td { min-width: 0; padding: 10px; border-bottom: 1px solid var(--ledger-table-line); font-size: 13px; line-height: 1.55; vertical-align: middle; overflow-wrap: anywhere; }
.ledger-record-table tbody > tr:last-child > td { border-bottom: 0; }
.ledger-record-table .ledger-record-main { display: block; width: 100%; padding: 2px 0; min-height: 34px; text-align: left; }
.ledger-record-table .ledger-record-main h3 { font-size: 14px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.ledger-record-table .ledger-record-amount { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ledger-record-table .ledger-record-source,
.ledger-record-table .ledger-record-category,
.ledger-record-table .ledger-record-date { color: var(--ledger-muted-readable); }
.ledger-record-table .ledger-record-status { color: #425e4c; }
.ledger-record-table .ledger-record-compact-meta { display: none; }
.ledger-record-table .ledger-record-actions > div,
.ledger-record-table .reimburse-item-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ledger-record-table .ledger-record-actions button,
.ledger-record-table .ledger-record-more > summary { min-height: 34px; padding: 6px 9px; border-radius: 8px; font-size: 13px; line-height: 1.55; box-shadow: none; white-space: normal; }
.ledger-record-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid #dce6de; border-radius: 8px; background: #f4f8f2; color: #365642; font-size: 13px; font-weight: 600; line-height: 1.55; }
.ledger-record-primary:hover { background: #e7f0e6; }
.ledger-record-primary.is-primary { background: #0f5132; border-color: #0f5132; color: #fff; }
.ledger-record-primary.is-primary:hover { background: #0a3622; border-color: #0a3622; }
.ledger-record-primary:disabled { cursor: default; opacity: .55; }
.ledger-danger-action { color: #a42323; }
.ledger-record-more { display: inline-block; position: relative; text-align: left; }
.ledger-record-more > summary { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #365642; border: 1px solid #dce6de; background: #f7faf6; list-style: none; }
.ledger-record-more > summary::-webkit-details-marker { display: none; }
.ledger-record-more-menu { position: absolute; right: 0; top: calc(100% + 5px); min-width: 150px; padding: 6px; z-index: 15; background: white; border: 1px solid #dce6de; border-radius: 10px; box-shadow: 0 10px 26px #1e39221a; }
.ledger-record-more-menu button { display: block; width: 100%; text-align: left; }
.ledger-record-more-menu button:hover { background: #eef4ee; }
@media (min-width: 1024px) {
  .ledger-record-density-comfortable .ledger-record-table td,
  .ledger-record-table.ledger-record-density-comfortable td { padding-block: 17px; }
  .ledger-record-density-comfortable .ledger-record-main h3 { font-size: 15px; }
}
.ledger-budget-table-wrap { min-width: 0; width: 100%; margin-top: 14px; }
.ledger-budget-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ledger-budget-table th { padding: 10px 8px; text-align: left; color: var(--ledger-muted-readable); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--ledger-table-line); }
.ledger-budget-table td { padding: 14px 8px; font-size: 14px; vertical-align: middle; overflow-wrap: anywhere; border-bottom: 1px solid var(--ledger-table-line); }
.ledger-budget-table th:first-child { width: 33%; }
.ledger-budget-table th:nth-child(2) { width: 31%; }
.ledger-budget-table th:nth-child(3) { width: 23%; }
.ledger-budget-table th:last-child { width: 13%; }
.ledger-budget-table th:nth-child(2),
.ledger-budget-table th:nth-child(3),
.ledger-budget-table td:nth-child(2),
.ledger-budget-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-budget-table th:last-child,
.ledger-budget-table td:last-child { text-align: right; }
.ledger-budget-table td:last-child .ledger-text-button { white-space: normal; }
.ledger-budget-table td small { font-size: 13px; color: var(--ledger-muted-readable); }
.ledger-budget-table .ledger-progress { max-width: 230px; margin-block: 8px 0; }
.ledger-budget-mobile-used,
.ledger-budget-mobile-action { display: none; }
.reimburse-advanced-filters { min-width: 0; margin-block: 0; padding: 0 14px; border: 1px solid #e2e7e3; border-radius: 12px; background: #fff; }
.reimburse-advanced-filters > summary { min-height: 44px; padding-block: 10px; color: #365642; font-size: 14px; font-weight: 600; line-height: 1.7; cursor: pointer; }
.reimburse-advanced-filters[open] > summary { margin-bottom: 12px; border-bottom: 1px solid #e2e7e3; }
.reimburse-advanced-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reimburse-advanced-grid .finance-field { min-width: 0; margin-bottom: 0; font-size: 13px; }
.reimburse-advanced-grid .finance-field > :is(input, select) { margin-top: 7px; min-height: 44px; }
.reimburse-advanced-filters > .finance-btn { margin-bottom: 14px; }

@media (min-width: 1024px) {
  /* Explicit flex bases fix the 1024px shell without hiding overflow. */
  body.ledger-unlocked { height: var(--app-visual-height, 100dvh); min-height: 0; }
  body > aside { flex: 0 0 224px; width: 224px; min-width: 224px; min-height: 0; }
  body > aside > nav { min-height: 0; overflow-y: auto; }
  body > main { flex: 1 1 0; width: 0; min-width: 0; min-height: 0; }
  body > main > header { gap: 20px; padding-inline: 28px; min-width: 0; }
  .app-header-primary { min-width: 0; }
  .app-header-toolbar { flex-shrink: 0; }
  body > main > .scrollable-content { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; height: auto; max-width: 1440px; padding: 24px 28px 32px; overflow-y: auto; }
  .scrollable-content > .page-section { height: auto; min-height: 0; overflow: visible; }
  .scrollable-content .ledger-page-layout { height: auto; min-height: 0; flex: 0 0 auto; overflow: visible; padding-inline: 0; }
  .scrollable-content .finance-workbench { height: auto; min-height: 0; overflow: visible; }
  .scrollable-content .finance-panel { flex: 0 0 auto; overflow: visible; }
  .scrollable-content .finance-list { flex: 0 0 auto; overflow: visible; }
  #page-reimburse > .bg-surface { flex: 0 0 auto; overflow: visible; }
  #page-reimburse .reimburse-toolbar { min-width: 0; flex-wrap: wrap; }
  #page-reimburse .reimburse-filter { overflow-x: visible; flex-wrap: wrap; }
  #page-reimburse .reimburse-actions { flex-wrap: wrap; }
  #page-reimburse .reimburse-search-row { flex-wrap: wrap; }
  #page-reimburse .reimburse-search-box { min-width: min(100%, 240px); }
  #page-reimburse .ledger-record-table .ledger-record { display: table-row; }
  #page-reimburse .ledger-record-table .ledger-record.hidden { display: none; }
  #page-reimburse .ledger-record-table .ledger-record:hover { background: #f8fbf7; }

  /* Header and footer keep their size; the complete form body scrolls. */
  #modal-apply > .apply-dialog { width: min(1120px, calc(100vw - 40px)); max-height: calc(var(--app-visual-height, 100dvh) - 32px); overflow: hidden; }
  #modal-apply .apply-dialog > div:first-child,
  #modal-apply .apply-dialog > div:last-child { flex: 0 0 auto; }
  #modal-apply .apply-form-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 24px; padding-bottom: 24px; }
  #modal-apply #batch-lines { max-height: none; overflow: visible; padding-right: 0; gap: 12px; }
  #modal-apply .apply-label { font-size: 13px; letter-spacing: 0; color: #526158; }
  #modal-apply .batch-line { padding: 14px; }
  #modal-apply .batch-line > div.grid { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.7fr) minmax(128px, 1fr) 36px; gap: 8px; align-items: center; }
  #modal-apply .batch-line .money-field { grid-column: 1; grid-row: 1; min-height: 40px; }
  #modal-apply .batch-line .batch-title { grid-column: 2; grid-row: 1; min-width: 0; }
  #modal-apply .batch-line .batch-date { grid-column: 3; grid-row: 1; min-width: 0; }
  #modal-apply .batch-line button[aria-label^="移除"] { grid-column: 4; grid-row: 1; min-height: 40px; }
  #modal-apply .batch-line :is(.batch-title, .batch-date, .batch-amount) { font-size: 14px; }
  #modal-apply .batch-line .batch-classification-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
  #modal-apply .batch-line .batch-add-control { grid-column: 1 / -1; max-width: 360px; }
  #modal-apply .batch-category-bar,
  #modal-apply .batch-subcategory-options { flex-wrap: wrap; overflow: visible; }
  #modal-apply .batch-main-option,
  #modal-apply .batch-sub-option { width: auto; min-height: 34px; height: auto; flex: 0 1 auto; padding: 6px 8px; font-size: 12px; }
  #modal-apply .batch-main-option span,
  #modal-apply .batch-sub-option span { display: inline; }
  #modal-apply .batch-section-label { font-size: 12px; }
  #modal-apply .payout-funding-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; border: 1px solid var(--ledger-table-line); border-radius: 12px; background: #f8faf6; }
  #modal-apply .payout-funding-fields .finance-field { min-width: 0; }
  #modal-apply .payout-funding-note { color: var(--ledger-muted-readable); }
  .finance-modal-card { max-height: calc(var(--app-visual-height, 100dvh) - 40px); }
  .finance-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scroll-padding-block: 24px; }
  .finance-modal-head,
  .finance-modal-foot { flex: 0 0 auto; }
  .finance-modal-foot { flex-wrap: wrap; }
  .review-workspace-modal .finance-modal-foot > button { flex: 0 0 auto; width: auto !important; margin: 0 !important; }
  .review-workspace-modal .finance-modal-foot > button.ledger-button.primary { background: #f1f6ee; border-color: #dce6de; color: #365642; }
  .review-workspace-modal .finance-modal-foot > div.grid { flex: 1 1 260px; min-width: 0; gap: 10px; }
  .review-workspace-modal .finance-modal-foot button { min-height: 44px; padding-inline: 14px; }
  .review-edit-modal .finance-modal-card,
  .review-workspace-modal .finance-modal-card { width: min(100%, 860px); }
  #page-overview .ledger-page-layout { gap: 14px; }
  #page-overview .ledger-balance { padding: 20px 24px; }
  #page-overview .ledger-balance-value { font-size: 34px; margin: 6px 0 14px; }
  #page-overview .ledger-overview .ledger-next-task { padding: 16px 20px; }
  #page-overview .ledger-queue-links { padding-top: 12px; margin-top: 12px; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  body > aside { flex-basis: 192px; width: 192px; min-width: 192px; }
  body > aside > :first-child { padding-inline: 22px; }
  body > aside > nav { padding: 20px 12px; }
  body > aside > nav .nav-item { padding-inline: 12px; }
  body > aside > .p-6 { padding: 16px; }
  body > main > header { padding-inline: 20px; }
  body > main > .scrollable-content { padding-inline: 20px; }
  #page-reimburse .reimburse-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  #page-reimburse .reimburse-actions { margin-left: 0; justify-content: flex-start; }
  #page-reimburse .reimburse-filter { width: 100%; }
  .ledger-record-table .ledger-record-date,
  .ledger-record-table .ledger-record-source,
  .ledger-record-table .ledger-record-category { display: none; }
  .ledger-record-table .ledger-record-amount { width: 108px; }
  .ledger-record-table .ledger-record-status { width: 100px; }
  .ledger-record-table .ledger-record-actions { width: 140px; }
  .ledger-record-table .ledger-record-compact-meta { display: block; font-size: 12px; line-height: 1.6; color: var(--ledger-muted-readable); margin-top: 5px; }
  .payout-bank-controls { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1280px) {
  .review-edit-modal .finance-modal-card,
  .review-workspace-modal .finance-modal-card { width: min(1120px, calc(100vw - 56px)); max-width: 1120px; }
  .review-workspace { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
  .review-workspace-evidence { position: sticky; top: 0; }
  .review-workspace-evidence .voucher-image-stage { height: min(420px, calc(var(--app-visual-height, 100dvh) - 370px)); max-height: min(420px, calc(var(--app-visual-height, 100dvh) - 370px)); }
  .review-workspace-evidence .review-receipt-scroll { max-height: min(520px, calc(var(--app-visual-height, 100dvh) - 310px)); overflow: auto; }
  .review-workspace-evidence :is(iframe, object) { width: 100%; min-height: 340px; max-height: calc(var(--app-visual-height, 100dvh) - 310px); }
  .review-workspace-evidence .review-receipt-scroll.is-zoomed img { width: auto; max-width: none; }
}

/* The same record nodes become phone cards below the desktop breakpoint. */
@media (max-width: 1023.98px) {
  .ledger-density-control { display: none; }
  .ledger-pending-review-notice { right: 16px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  .review-workspace-modal .finance-modal-foot { display: grid; grid-template-columns: minmax(0, 1fr); }
  .review-workspace-modal .finance-modal-foot > div.grid { min-width: 0; gap: 10px; }
  .review-workspace-modal .finance-modal-foot > button { margin: 0 !important; }
  .ledger-record-table-wrap { border: 0; border-radius: 12px; }
  .ledger-record-table,
  .ledger-record-table tbody { display: block; width: 100%; }
  .ledger-record-table-head { display: none; }
  #page-reimburse .ledger-record-table .ledger-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 6px 14px; padding: 16px; border-bottom: 1px solid var(--ledger-table-line); }
  #page-reimburse .ledger-record-table .ledger-record.hidden { display: none; }
  .ledger-record-table td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0; font-size: 13px; }
  .ledger-record-table .ledger-record-subject { grid-column: 1; grid-row: 1; }
  .ledger-record-table .ledger-record-amount { grid-column: 2; grid-row: 1; font-size: 17px; padding-top: 4px; max-width: 145px; }
  .ledger-record-table .ledger-record-date { grid-column: 1; grid-row: 2; }
  .ledger-record-table .ledger-record-source { grid-column: 1; grid-row: 3; }
  .ledger-record-table .ledger-record-category { grid-column: 1; grid-row: 4; }
  .ledger-record-table .ledger-record-status { grid-column: 2; grid-row: 2 / 5; text-align: right; max-width: 145px; }
  .ledger-record-table .ledger-record-actions { grid-column: 1 / -1; grid-row: 5; margin-top: 6px; }
  .ledger-record-table .ledger-record-main h3 { font-size: 15px; }
  .ledger-record-table td[data-label]:not(.ledger-record-subject):not(.ledger-record-amount):not(.ledger-record-actions)::before { content: attr(data-label) '：'; color: var(--ledger-muted-readable); }
  .ledger-record-table .ledger-record-actions button,
  .ledger-record-table .ledger-record-more > summary { min-height: 44px; padding: 9px 12px; }
  .ledger-record-table .ledger-record-compact-meta { display: none; }
  .ledger-budget-table th,
  .ledger-budget-table td { padding: 12px 4px; font-size: 13px; }
  .ledger-budget-table th:first-child { width: 28%; }
  .ledger-budget-table th:nth-child(2) { width: 32%; }
  .ledger-budget-table th:nth-child(3) { width: 22%; }
  .ledger-budget-table th:last-child { width: 18%; }
  .ledger-budget-table .ledger-category-spent,
  .ledger-budget-table .ledger-category-remaining { white-space: normal; }
  .ledger-budget-table td small { display: block; font-size: 12px; }
  .review-workspace-evidence { padding: 12px; }
  .reimburse-advanced-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 600px) {
  .payout-household-compact > summary { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
  .payout-household-compact > summary > strong { font-size: 16px; }
  .payout-household-compact > summary > span:last-child { width: calc(100% - 24px); }
  .payout-summary-items > li { gap: 12px; }
  .payout-summary-items > li > strong { max-width: 45%; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 1023.98px) {
  /* Two native columns give budget amounts space while preserving table roles. */
  /* The legacy phone rules in index.html turn every budget table into cards. */
  #page-budget table.ledger-budget-table { display: table; width: 100%; table-layout: fixed; }
  #page-budget .ledger-budget-table > thead { display: table-header-group; width: auto; }
  #page-budget .ledger-budget-table > tbody { display: table-row-group; width: auto; }
  #page-budget .ledger-budget-table > :is(thead, tbody) > tr,
  #page-budget .ledger-budget-table > tbody > tr:nth-child(n+3) { display: table-row; width: auto; padding: 0; }
  #page-budget .ledger-budget-table :is(th, td) { display: table-cell; width: auto; padding: 10px 6px !important; vertical-align: top; }
  #page-budget .ledger-budget-table :is(th, td).ledger-budget-used,
  #page-budget .ledger-budget-table :is(th, td).ledger-budget-action { display: none; }
  #page-budget .ledger-budget-table th.ledger-budget-name { width: 56%; }
  #page-budget .ledger-budget-table th.ledger-budget-available { width: 44%; }
  #page-budget .ledger-budget-table th.ledger-budget-name { text-align: left !important; }
  #page-budget .ledger-budget-table :is(th, td).ledger-budget-available { text-align: right !important; }
  #page-budget .ledger-budget-table th[scope="row"] > strong { display: block; color: #294334; font-size: 14px; line-height: 1.5; }
  #page-budget .ledger-budget-mobile-used { display: block; margin-top: 5px; color: #58675e; font-size: 12px; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
  #page-budget .ledger-budget-mobile-used small { display: inline; font-size: inherit; }
  #page-budget .ledger-budget-mobile-action { display: block; margin-top: 4px; }
  #page-budget .ledger-budget-mobile-action .ledger-text-button { min-height: 44px; max-width: 100%; padding: 8px 0 8px 8px; font-size: 12px; line-height: 1.4; }
  #page-budget .ledger-budget-table .ledger-progress { height: 4px; max-width: none; margin-top: 7px; }
}

@media (min-width: 1024px) {
  #modal-apply .apply-submit-footer { display: flex; align-items: center; gap: 20px; }
  #modal-apply .apply-submit-footer .apply-footer-summary { flex: 1 1 auto; justify-content: flex-start; gap: 18px; }
  #modal-apply .apply-submit-footer .apply-footer-actions { margin-left: auto; }
}

@media (min-width: 1024px) and (pointer: fine) {
  .ledger-record-table-head th > button { min-height: 36px; }
}
@media (max-width: 359px) {
  .reimburse-advanced-grid { grid-template-columns: minmax(0, 1fr); }
}