/* Moneta V4 — fluid, mobile-first layout.  No device-model specific rules. */
/* Shared safeguards: content sizes to its own container, not an assumed viewport. */
html { scroll-behavior: smooth; }
body { min-width: 0; max-width: 100%; overflow-x: clip; }
.app-shell, .main-layout, main, .page, .surface, .stat-card, .topbar-left,
.topbar-actions, .import-banner-copy, .tx-details, .setting-copy { min-width: 0; }
.main-layout { width: 100%; container-type: inline-size; container-name: moneta-canvas; }
main { width: min(100%, 1480px); margin-inline: auto; }
.page-heading > div, .section-intro > div, .surface-head > div { min-width: 0; }
.button, .nav-item, .theme-toggle, .month-control, .row-actions button,
.review-link { touch-action: manipulation; }
:focus-visible { outline: 3px solid #7aafff; outline-offset: 3px; }
button, select { -webkit-tap-highlight-color: transparent; }
.stat-number, .small-stat strong, .budget-summary strong, .account-value {
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat-card { min-width: 0; }
.stat-head > span:first-child { min-width: 0; overflow-wrap: break-word; }
.stat-symbol { flex: 0 0 auto; }
.stat-number { max-width: 100%; white-space: nowrap; line-height: 1.15; letter-spacing: -.05em; }
.stat-desc { overflow-wrap: break-word; }
/* Summary cards follow available content width. Wide viewports can have 4; narrow workspaces 2. */
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 226px), 1fr)); gap: 14px; }
.stat-card { min-height: 152px; padding: clamp(16px,2cqw,24px); }
.stat-number { font-size: clamp(19px,2.1cqw,28px); }
.insights-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.surface-head { flex-wrap: wrap; gap: 10px 18px; }
.chart-legend { flex-wrap: wrap; }
.bar-chart { width: 100%; max-width: 100%; min-width: 0; }
.chart-body { min-width: 0; }
.chart-bars { gap: clamp(2px, 1cqw, 12px); }
.chart-months { gap: clamp(2px,1cqw,12px); }
.breakdown-panel { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.breakdown-panel .donut-wrap { width: 100%; margin: 15px 0; }
.donut { width: clamp(154px,23cqw,190px); height: clamp(154px,23cqw,190px); flex: 0 0 auto; }
.donut-hole { width: 73%; height: 73%; }
.breakdown-panel .breakdown-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 16px; }
.breakdown-legend-item { min-width: 0; gap: 6px; }
.breakdown-legend-item .name { min-width: 0; display: flex; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.breakdown-legend-item strong { flex: 0 0 auto; }
.recent-item { min-width: 0; }
.recent-item .tx-details { min-width: 0; }
.tx-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-meta { overflow-wrap: break-word; line-height: 1.5; }
.tx-amount { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget-grid, .account-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 14px; }
.account-totals { grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 12px; }
.budget-summary { grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 12px; }
.small-stat, .budget-card, .account-card { min-width: 0; }
.account-card .account-value { overflow-wrap: anywhere; }
.filters { flex-wrap: wrap; }
.search-field { min-width: 0; flex: 1 1 210px; }
.filter-select-wrap { min-width: 0; flex: 0 1 210px; }
.filter-select-wrap select { max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger-table { width: 100%; min-width: 690px; }
.ledger-table th, .ledger-table td { padding-inline: clamp(10px,1.5vw,22px); }
.ledger-table .row-title { min-width: 0; }
.row-title-text { max-width: 290px; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-card { min-width: 0; }
.setting-card .button { max-width: 100%; }
.modal { max-width: 100%; }
.modal-overlay { overscroll-behavior: contain; }
/* Keep the last page content visible above the bottom navigation & phone home indicator. */
@media (max-width: 959px) {
  :root { --side: 0px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 0; inset-inline: 0; z-index: 30;
    display: block; width: 100%; height: calc(66px + env(safe-area-inset-bottom, 0px)); min-height: 0;
    padding: 5px max(8px, env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));
    border-right: 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,25,75,.12);
    background: var(--surface); }
  html[data-theme="dark"] .sidebar { background: #101c31; }
  .brand,.nav-caption,.sidebar-spacer,.sidebar-bottom { display: none; }
  .main-nav { height: 100%; width: 100%; display: flex; flex-direction: row; gap: clamp(2px,1vw,8px); align-items: stretch; }
  .nav-item { display: flex; flex: 1 1 20%; min-width: 0; max-width: none; height: 56px;
    flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    padding: 5px 1px; border-radius: 11px; font-size: clamp(9px,1.6vw,11px); line-height: 1.25; }
  .nav-item .icon { width: 20px; height: 20px; }
  .topbar { min-height: 84px; height: auto; padding: 14px clamp(16px,3vw,30px); }
  .topbar-actions { gap: 9px; }
  .theme-toggle { flex-shrink: 0; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .theme-toggle span { display: none; }
  .topbar .month-control { flex-shrink: 0; min-width: 156px; height: 40px; }
  .topbar .button-primary { flex-shrink: 0; }
  main { padding: 24px clamp(16px,3vw,30px) calc(104px + env(safe-area-inset-bottom,0px)); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat-card { min-height: 146px; }
  .stat-number { font-size: clamp(20px,3.4cqw,28px); }
  .breakdown-panel .donut-wrap { margin-block: 19px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom,0px)); }
}
/* Phone-first: navigation and controls breathe; content never assumes a 390px phone. */
@media (max-width: 599px) {
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) 42px 42px;
    grid-template-rows: auto 42px; align-items: center; column-gap: 9px; row-gap: 12px;
    padding: 17px clamp(12px,3.7vw,20px) 15px; }
  .topbar-left { grid-column: 1; grid-row: 1; }
  .topbar h1 { font-size: clamp(19px,5.1vw,24px); }
  .topbar-actions { display: contents; }
  .topbar .theme-toggle { grid-column: 2; grid-row: 1; width: 42px; height: 42px; }
  .topbar .button-primary { grid-column: 3; grid-row: 1; width: 42px; min-width: 42px; height: 42px; padding: 0; }
  .topbar .button-primary span { display: none; }
  .topbar .button-primary .icon { width: 21px; height: 21px; }
  .topbar .month-control { grid-column: 1 / -1; grid-row: 2; height: 42px;
    width: 100%; min-width: 0; max-width: none; padding: 2px 8px; font-size: 12px; }
  .month-control .icon-button { height: 36px; width: 38px; }
  #monthLabel { min-width: 0; white-space: nowrap; font-size: clamp(11px,3vw,13px); }
  main { padding: 21px clamp(12px,3.7vw,20px) calc(102px + env(safe-area-inset-bottom,0px)); }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading h2 { font-size: clamp(20px,5.5vw,26px); line-height: 1.2; }
  .page-heading p,.section-intro p { line-height: 1.55; }
  .date-pill { display: none; }
  .section-intro { flex-wrap: wrap; gap: 9px; }
  .section-intro h2 { font-size: 22px; }
  .import-banner { display: grid; grid-template-columns: minmax(0,1fr); padding: 16px; gap: 10px; }
  .import-banner-mark { display: none; }
  .import-banner .review-link { width: 100%; min-height: 42px; margin: 0; justify-content: center; }
  .import-banner-copy strong { font-size: 12px; }
  .import-banner-copy p { font-size: 11.5px; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .stat-card { padding: clamp(12px,3.3vw,18px); min-height: 146px; border-radius: 16px; }
  .stat-head { font-size: 10px; gap: 7px; }
  .stat-symbol { height: 28px; width: 28px; border-radius: 9px; }
  .stat-symbol .icon { width: 15px; height: 15px; }
  .stat-number { margin-top: 16px; font-size: clamp(16px,4.6vw,23px); }
  .stat-desc { font-size: 10px; margin-top: 10px; }
  .surface { border-radius: 16px; }
  .flow-panel, .breakdown-panel, .recent-panel { padding: 18px clamp(13px,3.7vw,20px); }
  .flow-panel { height: auto; min-height: 330px; }
  .bar-chart { grid-template-columns: 34px minmax(0,1fr); gap: 7px; height: 248px; }
  .chart-y { font-size: 9px; }
  .chart-bars, .chart-months { gap: 3px; }
  .chart-pair { gap: 3px; }
  .chart-bar { min-width: 4px; }
  .chart-legend { gap: 7px 13px; }
  .chart-legend span { font-size: 10px; }
  .breakdown-panel .donut-wrap { margin: 18px 0; }
  .breakdown-panel .breakdown-legend { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 14px; }
  .breakdown-legend-item { font-size: 10px; }
  .recent-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; }
  .recent-item .tx-icon { width: 36px; height: 36px; flex: none; }
  .recent-item .tx-amount { font-size: 11px; }
  .recent-panel .surface-head { align-items: flex-start; }
  .filters { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; padding: 12px; }
  .search-field,.filter-select-wrap { width: 100%; min-width: 0; }
  .filter-select-wrap select { width: 100%; }
  /* Transaction cards, avoiding an unreadable sideways table on phones. */
  .ledger-surface { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .ledger-surface .filters { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); margin-bottom: 12px; }
  .table-scroll { overflow: visible; }
  .ledger-table, .ledger-table tbody { display: block; width: 100%; min-width: 0; }
  .ledger-table thead { display: none; }
  .ledger-table tbody tr:not(.empty-row) { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto; gap: 12px 10px;
    padding: 16px 14px; margin-bottom: 10px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow); }
  .ledger-table tbody td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; text-align: left; }
  .ledger-table tbody td:not(.ledger-identity)::before { content: attr(data-label); display: block; color: var(--muted); margin-bottom: 4px;
    font-size: 9px; letter-spacing: .35px; text-transform: uppercase; font-weight: 750; }
  .ledger-table tbody td.ledger-identity { grid-column: 1/-1; border-bottom: 1px solid var(--divider); padding-bottom: 12px; }
  .ledger-table .row-title { display: flex; gap: 9px; min-width: 0; }
  .ledger-table .row-title-text { min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; font-size: 12px; }
  .ledger-table td[data-label="Date"] { grid-column: 1; }
  .ledger-table td[data-label="Category"] { grid-column: 2; text-align: right; }
  .ledger-table td[data-label="Account"] { grid-column: 1/-1; }
  .ledger-table td.ledger-amount { grid-column: 1; }
  .ledger-table td.ledger-actions { grid-column: 2; text-align: right; }
  .ledger-table .row-actions { justify-content: flex-end; }
  .ledger-table .row-actions button { width: 40px; height: 40px; border-radius: 10px; background: var(--soft); }
  .ledger-table tbody tr.empty-row { display: block; background: var(--surface); border-radius: 15px; }
  .ledger-table tbody tr.empty-row td { display: block; }
  .ledger-table .table-empty { text-align: center; padding: 30px 12px !important; }
  .ledger-pagination { display: flex; flex-direction: column; gap: 10px; align-items: stretch; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; padding: 15px; text-align: center; }
  .ledger-pagination .button { width: 100%; }
  .account-totals { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .account-totals .small-stat:last-child { grid-column: 1/-1; }
  .budget-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .budget-summary > div:nth-child(3) { grid-column: 1/-1; }
  .budget-grid,.account-grid { grid-template-columns: minmax(0,1fr); }
  .setting-card { display: grid; grid-template-columns: 42px minmax(0,1fr); padding: 18px; gap: 12px; }
  .setting-card .setting-icon { grid-column: 1; grid-row: 1; }
  .setting-card .setting-copy { grid-column: 2; grid-row: 1; }
  .setting-card .button { margin: 0; width: 100%; grid-column: 1/-1; grid-row: 2; min-height: 42px; }
  .modal-overlay { padding: max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px)); }
  .modal { width: 100%; max-height: min(90dvh,860px); padding: 22px 18px; overflow-y: auto; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .field.full { grid-column: 1; }
  .toast { inset-inline: 12px; text-align: center; }
}
/* Narrow screens including foldables: a single legible summary column. */
@media (max-width: 359px) {
  .stats-grid { grid-template-columns: minmax(0,1fr); }
  .stat-card { min-height: 127px; }
  .stat-number { font-size: clamp(21px,7vw,26px); }
  .stat-head { font-size: 12px; }
  .topbar { grid-template-columns: minmax(0,1fr) 39px 39px; column-gap: 7px; }
  .topbar .theme-toggle, .topbar .button-primary { width: 39px; min-width: 39px; }
  .nav-item { font-size: 9px; letter-spacing: -.15px; }
  .nav-item .icon { width: 19px; height: 19px; }
  .chart-legend { gap: 4px 9px; }
  .chart-legend span { font-size: 9px; }
  .breakdown-panel .breakdown-legend { grid-template-columns: minmax(0,1fr); }
  .recent-item { grid-template-columns: 32px minmax(0,1fr); }
  .recent-item .tx-icon { width: 32px; height: 32px; }
  .recent-item .tx-amount { grid-column: 2; justify-self: start; }
  .account-totals,.budget-summary { grid-template-columns: minmax(0,1fr); }
  .account-totals .small-stat:last-child, .budget-summary > div:nth-child(3) { grid-column: auto; }
  .ledger-table tbody tr:not(.empty-row) { padding: 14px 12px; }
  .ledger-table .row-actions { gap: 6px; }
  .ledger-table .row-actions button { width: 36px; height: 38px; }
}
/* Tablet portrait and laptops with tighter working areas: donut and legend share a row only when space permits. */
@container moneta-canvas (min-width: 690px) and (max-width: 1059px) {
  .breakdown-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,1fr); align-items: center; gap: 10px; }
  .breakdown-panel .surface-head { grid-column: 1/-1; }
  .breakdown-panel .breakdown-legend { grid-template-columns: minmax(0,1fr); }
}
/* Two chart cards side by side only when the actual content column has ample space. */
@container moneta-canvas (min-width: 1060px) {
  .insights-grid { grid-template-columns: minmax(0,1.55fr) minmax(0,.95fr); }
  .breakdown-panel .breakdown-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Fixed sidebar returns on spacious screens. Its width is part of available content width. */
@media (min-width: 960px) {
  :root { --side: clamp(210px,17vw,244px); }
  .app-shell { display: flex; }
  .sidebar { width: var(--side); flex: 0 0 var(--side); position: sticky; height: 100dvh; min-height: 0; top: 0; }
  .main-layout { flex: 1 1 0; }
  .topbar { padding-inline: clamp(22px,3vw,42px); }
  .topbar-actions { gap: clamp(8px,1.2vw,16px); }
  main { padding-inline: clamp(20px,3vw,44px); }
  .stats-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,226px),1fr)); }
}
@media (min-width: 960px) and (max-width: 1140px) {
  .topbar .button-primary span { display: none; }
  .topbar .button-primary { width: 42px; padding: 0; }
  .theme-toggle span { display: none; }
  .theme-toggle { width: 42px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}