/* Section 06 Ledger, the transaction drawer and the composer (both native <dialog> sheets). OWNER: ledger worker.
   Geometry: every box in the ledger side has a fixed size (search, chip rows, filter bar, count line); "More filters" overlays;
   the list keeps a viewport-high minimum so a shorter result never pulls the footer into view. Sheets live in the top layer. */

/* ---------- 06 ledger: side ---------- */
.ledger-side .search { display: block; margin-top: 28px; }
.search input {
  width: 100%; height: 42px; border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  font-size: var(--t-md); padding: 0 0 0 26px; outline: none; border-radius: 0;
  background-image: radial-gradient(circle at 7px 19px, transparent 5px, var(--ink) 5.5px, var(--ink) 6.5px, transparent 7px);
  background-repeat: no-repeat;
  -webkit-appearance: none; appearance: none;
}
.search input:focus { border-bottom: 2px solid var(--red); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.filter { margin-top: 22px; }
.filter-label { margin: 0 0 10px; color: var(--grey-t); height: 17px; }
.ledger-side .chips { height: 34px; padding-top: 2px; padding-bottom: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ledger-side .chips::-webkit-scrollbar { display: none; }
/* category chips wrap into a fixed 4-row box on wide screens (scrolls inside when a period has many categories) */
.ledger-side .ledger-cats { flex-wrap: wrap; height: 140px; overflow-x: hidden; overflow-y: auto; align-content: flex-start; scrollbar-width: thin; }
.ledger-bar { position: relative; display: flex; gap: 24px; align-items: center; height: 36px; margin-top: 18px; }
.ledger-bar .btn-line { white-space: nowrap; }
.more-toggle { display: inline-flex; align-items: center; gap: 6px; }
.more-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; font: 500 11px var(--f-mono); color: var(--paper); background: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--expo); text-decoration: none; }
.more-badge.on { opacity: 1; transform: none; }
.more-toggle[aria-expanded="true"] { color: var(--red-t); }
.more-filters {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, calc(100vw - 2 * var(--pad)));
  background: var(--paper); border: 1px solid var(--ink); padding: 18px 18px 12px;
  box-shadow: 0 18px 40px -24px rgba(13, 13, 13, .45);
  transform-origin: 0 0; animation: moreIn .35s var(--expo);
}
.more-filters.up { top: auto; bottom: calc(100% + 6px); transform-origin: 0 100%; }
.more-filters[hidden] { display: none; }
@keyframes moreIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.more-filters .field { margin-bottom: 12px; }
.more-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.more-dates input { font-family: var(--f-mono); font-size: var(--t-sm) !important; }
.more-note { margin: 0; font: 400 11px var(--f-mono); color: var(--grey-t); }
.more-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.ledger-count { margin: 18px 0 0; color: var(--grey-t); height: 18px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* text buttons (.btn-line / .btn-text) are shared: pulse.css */

/* ---------- 06 ledger: list ---------- */
.ledger { border-top: 1px solid var(--ink); transition: opacity .18s var(--ease); min-height: calc(100vh - var(--bar-h)); }
.ledger.swap { opacity: 0; }
.day { padding-top: 26px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); }
.day-head b { font-weight: 500; color: var(--ink); }
.row {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 52px 18px minmax(0, 1fr) minmax(0, 170px) 160px; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
  position: relative;
  transition: transform .35s var(--ease), background .25s;
}
.row::before { content: ''; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; background: var(--red); transform: translateY(-50%) scale(0); transition: transform .3s var(--expo); }
.row:hover { transform: translateX(10px); }
.row:hover::before, .row:focus-visible::before { transform: translateY(-50%) scale(1); }
.row-time { font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); }
.row-mk { font-size: 12px; line-height: 1; }
.row-main { min-width: 0; }
.row-merchant { font-size: var(--t-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.row-tags { font: 400 11px var(--f-mono); color: var(--grey-t); display: block; margin-top: 3px; height: 16px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tags .tag-ns { color: var(--ink); border: 1px solid var(--hair); padding: 0 5px; margin-right: 6px; border-radius: 2px; }
.row-tags .tag-rv { color: var(--red-t); }
.row-tags .tag-fx { color: var(--ink); border: 1px solid var(--ink); padding: 0 5px; margin-right: 6px; border-radius: 2px; }
.row-tags .tag-fx.is-rule { color: var(--paper); background: var(--ink); }
.row-tags .tag-fx.is-not { color: var(--grey-t); border-color: var(--hair); border-style: dashed; }
.row-tags .tag-new { color: var(--paper); background: var(--red-t); padding: 0 5px; border-radius: 2px; }
.row-cat { font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-amt { text-align: right; font-size: var(--t-lg); font-weight: 600; font-stretch: 85%; white-space: nowrap; }
.row.credit .row-amt { color: #1f7a48; }
.row.ns .row-amt { color: var(--grey-t); font-weight: 400; }
.row.removed .row-merchant, .row.removed .row-amt { text-decoration: line-through; text-decoration-color: var(--grey); }
.row.refund .row-amt { font-weight: 500; }
.row.is-new::before { transform: translateY(-50%) scale(1); }
.row.fresh { animation: rowFresh 1.4s var(--expo) both; }
.row.fresh::before { animation: freshDot 3.5s ease forwards; }
@keyframes rowFresh { 0% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes freshDot { 0% { transform: translateY(-50%) scale(2.2); } 30% { transform: translateY(-50%) scale(1); } 100% { transform: translateY(-50%) scale(1); } }
#ledger .sec-body { position: relative; }
/* overlays the top of the (viewport-high, empty) list, so it is always in view and moves nothing */
.ledger-empty { position: absolute; left: 0; right: 0; top: 1px; padding: 32px 0; }
.ledger-empty[hidden] { display: none; }
.ledger-empty b { display: block; font-size: var(--t-xl); font-weight: 600; font-stretch: 85%; }
.ledger-empty span { display: block; margin: 8px 0 16px; font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); }
.ledger-empty [hidden] { display: none; }
.ledger-more { margin: 28px 0 0; }
.ledger-more[hidden] { display: none; }

/* ---------- sheets: native <dialog> as a right-side drawer ---------- */
dialog.sheet {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--ink);
  width: min(480px, 100vw); height: 100%; max-height: none; max-width: 100vw;
  background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
dialog.sheet[open] { animation: sheetIn .55s var(--expo); }
dialog.sheet::backdrop { background: rgba(13, 13, 13, .22); animation: scrimIn .4s var(--ease); }
@keyframes sheetIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.sheet-in { padding: 22px 32px 40px; }
.sheet .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.sheet .eyebrow { margin: 0; }
.sheet .panel-title { margin-bottom: 22px; }
.sheet-form { margin: 0; }
.sheet .field label, .sheet .field .label { display: block; color: var(--grey-t); margin-bottom: 6px; padding: 0; }
.sheet .field input:not([type=radio]), .sheet .field select {
  display: block; width: 100%; height: 40px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0;
  font: 400 var(--t-md) var(--f-display); color: var(--ink); padding: 0; outline: none;
}
.sheet .field select {
  -webkit-appearance: none; appearance: none; padding-right: 22px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 9px) 18px, calc(100% - 4px) 18px; background-size: 5px 5px; background-repeat: no-repeat;
}
.sheet .field input:focus, .sheet .field select:focus { border-bottom: 2px solid var(--red); }
.sheet .field input:disabled, .sheet .field select:disabled { color: var(--grey-t); }
.sheet .field input[type=datetime-local] { font-family: var(--f-mono); font-size: var(--t-sm); }
.sheet .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sheet .form-grid > * { min-width: 0; }
.sheet .form-note { margin: 14px 0 0; line-height: 1.5; }
/* fixed 3-line error box: a message never moves the buttons below it */
.sheet .form-error { height: 48px; min-height: 0; line-height: 16px; margin: 10px 0 0; overflow-y: auto; }
.sheet .panel-actions { margin-top: 8px; }
.btn-danger { background: var(--red-t); }
.btn-danger:hover { background: #a71e09; }
.sheet .btn-solid[disabled], .sheet .btn-text[disabled], .sheet .btn-line[disabled] { cursor: progress; }
/* refund link field: Relay toggles [hidden]; keep its box so the fields below never move */
.sheet .refund-field[hidden] { display: block; visibility: hidden; }

/* drawer header */
.d-amt { font-size: 64px; font-weight: 720; font-stretch: 64%; line-height: .95; letter-spacing: -.01em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-merchant { font-size: var(--t-xl); font-weight: 600; font-stretch: 88%; margin: 12px 0 0; line-height: 1.15; overflow-wrap: anywhere; }
.d-kind { margin: 14px 0 0; font: 400 var(--t-xs) var(--f-mono); display: inline-flex; gap: 8px; align-items: center; }
.d-kind i { width: 6px; height: 6px; background: var(--ink); display: inline-block; flex: none; }
.d-kind.ns i { background: transparent; border: 1px solid var(--ink); }
.d-list { margin: 22px 0 22px; border-top: 1px solid var(--ink); }
.d-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--t-sm); }
.d-list dt { font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); flex: none; }
.d-list dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.d-ref { font-family: var(--f-mono); font-size: var(--t-xs); }
.bank .mk { font-size: 11px; }

/* remove / restore: the confirmation overlays a fixed-height zone */
.remove-zone { position: relative; height: 116px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.remove-confirmation { position: absolute; inset: 0; padding-top: 12px; background: var(--paper); border-top: 1px solid var(--red-t); animation: confirmIn .3s var(--expo); }
.remove-confirmation[hidden] { display: none; }
.remove-confirmation .form-note { margin: 0; color: var(--ink); }
@keyframes confirmIn { from { opacity: 0; } to { opacity: 1; } }

/* provenance */
.provenance { margin-top: 8px; border-top: 1px solid var(--ink); }
.provenance summary { cursor: pointer; padding: 12px 0; font: 500 var(--t-xs) var(--f-mono); }
#transaction-history { font: 400 var(--t-xs)/1.55 var(--f-mono); color: var(--grey-t); overflow-wrap: anywhere; }
#transaction-history p { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
#transaction-history strong { color: var(--ink); font-weight: 500; }

/* composer: amount first, radio chips */
.sheet .field-amount { margin-bottom: 20px; }
.sheet .amount-in { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--ink); }
.sheet .amount-in:focus-within { border-bottom: 2px solid var(--red); }
.sheet .amount-cur { font-size: var(--t-lg); font-weight: 600; min-width: 2.2ch; }
.sheet .field-amount .amount-in input { border: 0; height: 72px; font-size: 64px; font-weight: 720; font-stretch: 66%; line-height: 1.05; letter-spacing: -.01em; min-width: 0; }
.sheet .field-amount .amount-in input:focus { border: 0; }
.seg-row { display: grid; grid-template-columns: auto 1fr; gap: 24px; }
fieldset.seg { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
fieldset.seg legend { padding: 0; margin-bottom: 8px; color: var(--grey-t); }
.seg-radio { display: flex; gap: 6px; flex-wrap: nowrap; }
.seg-opt { position: relative; display: inline-flex; }
.sheet .seg-opt input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg-opt .chip { cursor: pointer; }
.seg-opt input:checked + .chip { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg-opt input:checked + .chip .mk { color: var(--paper) !important; }
.seg-opt input:focus-visible + .chip { outline: 2px solid var(--red); outline-offset: 2px; }
.seg-opt input:disabled + .chip { opacity: .5; cursor: progress; }

@media (max-width: 1100px) {
  .ledger-side .ledger-cats { height: 34px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ledger { min-height: calc(100vh - var(--bar-h) - 120px); }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 40px 14px minmax(0, 1fr) auto; gap: 8px; }
  .row-cat { display: none; }
  .row-amt { font-size: 17px; }
  .row:hover { transform: none; }
  .ledger-bar { gap: 20px; }
  .sheet-in { padding: 18px 20px 40px; }
  .d-amt { font-size: 52px; }
  .sheet .field-amount .amount-in input { font-size: 52px; height: 62px; }
  .seg-row { grid-template-columns: 1fr; gap: 0; }
}