.record-journal { min-width:0; }
.journal-head { display:flex; align-items:center; gap:4px; margin:0 0 14px -8px; }
.journal-head h1 { margin:0; font-size:var(--type-title); }
.journal-back,.journal-search button { display:grid; place-items:center; width:44px; min-height:44px; padding:0; border:0; border-radius:12px; background:transparent; }
.journal-back .icon { width:var(--icon-base); height:var(--icon-base); }
.journal-controls { display:grid; gap:12px; }
.journal-search { display:flex; align-items:center; gap:8px; min-width:0; padding:0 4px 0 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.journal-search:focus-within { border-color:var(--primary-text); }
.journal-search>.icon { flex:none; width:var(--icon-base); height:var(--icon-base); color:var(--text-sub); }
.journal-search input { flex:1; min-width:0; min-height:46px; padding:9px 0; border:0; background:transparent; font-size:var(--type-body); }
.journal-search input:focus-visible { outline:none; }
.journal-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.journal-search button .icon { width:var(--icon-small); height:var(--icon-small); color:var(--text-sub); }
.journal-search button[hidden] { display:none; }
.journal-kinds { display:flex; gap:5px; overflow-x:auto; padding:2px; margin-inline:-2px; scrollbar-width:thin; }
.journal-kinds button { flex:none; position:relative; isolation:isolate; min-width:44px; min-height:44px; padding:4px 11px; border:0; background:none; font-size:var(--type-note); font-weight:var(--weight-semibold); color:var(--text-sub); white-space:nowrap; }
.journal-kinds button::before { content:''; position:absolute; z-index:-1; inset:5px 0; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.journal-kinds button[aria-pressed=true] { color:var(--primary-text); }
.journal-kinds button[aria-pressed=true]::before { border-color:var(--primary); background:var(--primary-soft); }
.journal-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0 4px; }
.journal-period { position:relative; display:flex; align-items:center; gap:6px; min-height:44px; padding-inline:2px; color:var(--text); }
.journal-period>.icon { width:var(--icon-small); height:var(--icon-small); color:var(--text-sub); pointer-events:none; }
.journal-period>.icon:last-child { position:absolute; right:3px; width:var(--icon-small); height:var(--icon-small); }
.journal-period select { appearance:none; align-self:stretch; min-width:0; padding:4px 20px 4px 0; background:transparent; border:0; color:inherit; font:inherit; font-size:var(--type-label); font-weight:var(--weight-semibold); cursor:pointer; }
#journal-count { font-size:var(--type-caption); color:var(--text-sub); font-variant-numeric:tabular-nums; }
.journal-day { padding:4px 0 14px; }
.journal-day h2 { margin:0 0 6px; font-size:var(--type-caption); line-height:1.5; font-weight:var(--weight-semibold); color:var(--text-sub); }
.journal-day ul { list-style:none; margin:0; padding:0 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.journal-day li+li { border-top:1px solid var(--line); }
.journal-row { display:grid; grid-template-columns:32px minmax(0,1fr) minmax(min-content,max-content); gap:9px; align-items:center; width:100%; min-height:68px; padding:10px 0; border:0; text-align:start; background:transparent; }
.journal-row:active { opacity:.77; }
.journal-glyph { display:grid; place-items:center; width:32px; height:36px; border-radius:10px; background:var(--neutral-soft); color:var(--text-sub); }
.journal-expense .journal-glyph { color:var(--expense); background:var(--expense-soft); }
.journal-income .journal-glyph { color:var(--income); background:var(--income-soft); }
.journal-wallet .journal-glyph { color:var(--asset); background:var(--asset-soft); }
.journal-debt .journal-glyph,.journal-repayment .journal-glyph { color:var(--debt); background:var(--debt-soft); }
.journal-exchange .journal-glyph { color:var(--transfer); background:var(--transfer-soft); }
.journal-glyph .icon { width:var(--icon-base); height:var(--icon-base); }
.journal-identity { min-width:0; }
.journal-identity b,.journal-identity small { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.journal-identity b,.journal-value strong { font-size:var(--type-label); line-height:1.5; letter-spacing:0; }
.journal-identity small,.journal-value small { display:block; margin-top:2px; color:var(--text-sub); font-size:var(--type-caption); line-height:1.4; }
.journal-value { min-width:0; text-align:end; max-width:clamp(98px,34vw,160px); }
.journal-identity b { font-weight:var(--weight-semibold); }
.journal-value strong { font-size:var(--type-row-amount); font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; }
.journal-expense .journal-value strong { color:var(--text); }
.journal-income .journal-value strong { color:var(--income); }
.journal-cancelled .journal-value strong { color:var(--text-sub); text-decoration:line-through; }
.journal-empty { padding:32px 12px; text-align:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.journal-empty>.icon { width:var(--icon-nav); height:var(--icon-nav); color:var(--primary-text); }
.journal-empty h2 { margin:10px 0 4px; font-size:var(--type-label); }
.journal-empty button { margin-top:10px; min-height:44px; }
.journal-more { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; width:100%; margin:4px 0; }
.journal-more .icon { width:var(--icon-small); height:var(--icon-small); }
.journal-filters { border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.journal-filters>summary { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:8px 12px; font-size:var(--type-note); cursor:pointer; list-style:none; }
.journal-filters>summary::-webkit-details-marker { display:none; }
.journal-filters>summary>span { display:flex; align-items:center; gap:7px; }
.journal-filters>summary .icon { width:var(--icon-small); height:var(--icon-small); color:var(--text-sub); }
.journal-filters[open]>summary>.icon { transform:rotate(180deg); }
#journal-filter-count { color:var(--primary-text); font-variant-numeric:tabular-nums; }
.journal-filter-body { padding:0 12px 8px; }
.journal-filter-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
.journal-filter-fields label { display:grid; min-width:0; gap:5px; font-size:var(--type-caption); color:var(--text-sub); }
.journal-filter-fields select,.journal-filter-fields input { width:100%; min-width:0; min-height:44px; padding:8px; font-size:var(--type-body); color:var(--text); }
.journal-range-presets { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.journal-range-presets button { flex:1; min-width:4.5rem; min-height:44px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--neutral-soft); font-size:var(--type-caption); }
.journal-filter-hint,.journal-range-error,.journal-total-note { margin:10px 0 0; color:var(--text-sub); font-size:var(--type-caption); line-height:1.6; }
.journal-range-error { color:var(--danger); }
.journal-range-error[hidden] { display:none; }
.journal-filter-body>button { min-height:44px; margin-top:4px; }
.journal-active-filters { display:flex; align-items:flex-start; gap:6px; margin-top:8px; }
.journal-active-filters:empty { display:none; }
.journal-active-filters ul { flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; list-style:none; margin:0; padding:6px 0; }
.journal-active-filters li { max-width:100%; padding:4px 8px; border-radius:8px; color:var(--primary-text); background:var(--primary-soft); font-size:var(--type-caption); line-height:1.5; overflow-wrap:anywhere; }
.journal-active-filters button { flex:none; min-height:44px; padding:6px 4px; font-size:var(--type-caption); }
.journal-totals { display:grid; gap:10px; margin:0 0 4px; }
.journal-totals:empty { display:none; }
.journal-total-group { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--surface); }
.journal-total-group h2 { margin:0 0 10px; color:var(--text-sub); font-size:var(--type-caption); font-weight:var(--weight-semibold); }
.journal-total-group dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.journal-total-group dt { color:var(--text-sub); font-size:var(--type-caption); }
.journal-total-group dd { margin:4px 0 0; font-size:var(--type-label); font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; line-height:1.5; }
.journal-total-income dd { color:var(--income); }
.journal-total-expense dd { color:var(--expense); }
.journal-total-note { margin:0 2px; }
.journal-export-row { display:flex; justify-content:flex-end; }
.journal-export-row button { min-height:44px; font-size:var(--type-caption); }
.journal-export-row button:disabled { opacity:.5; cursor:default; }
/* At larger text settings, give long names and won values their own line. */
@container ledger-page (max-width:17rem) {
  .journal-row { grid-template-columns:auto minmax(0,1fr); row-gap:3px; }
  .journal-row .journal-glyph { grid-row:1 / 3; align-self:start; }
  .journal-row .journal-value { grid-column:2; max-width:none; }
  .journal-filter-fields,.journal-total-group dl { grid-template-columns:1fr; }
}
@media(max-width:350px) {
  .journal-day ul { padding:0 9px; }
  .journal-row { column-gap:7px; }
  .journal-glyph { width:26px; height:30px; border-radius:8px; }
}