/* ============================================================
   Phones (≤600px): bottom tab bar, bottom-sheet modals, 40px tap targets,
   stacked tables. Loaded last so it overrides everything above.
   ============================================================ */

@media (max-width:600px){
  /* --- shell: sidebar → bottom tab bar --- */
  /* minmax(0,…) + min-width:0 stop wide content (tables) from stretching the
     page past the screen — it scrolls inside its own container instead */
  .app{grid-template-columns:minmax(0,1fr)}
  .main{min-width:0}
  .sidebar{display:none}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--surface);border-top:1px solid var(--line);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .tab-item{
    flex:1;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink-mute);font-size:var(--fs-xs);font-weight:500;
  }
  .tab-item .nav-icon{width:22px;height:22px}
  .tab-item .nav-icon svg{width:22px;height:22px}
  .tab-item.active{color:var(--brand);font-weight:600}
  .tab-item.active .nav-icon{color:var(--brand)}
  .tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .topbar{padding:0 16px;gap:8px;height:56px}
  .topbar-brand{display:inline-flex;margin-right:auto;font-size:21px}
  .topbar-icon{width:40px;height:40px}
  .account-chip{padding:4px}
  .account-name, .account-chip .chev{display:none}

  /* --- layout --- */
  .page{padding:16px 16px calc(96px + env(safe-area-inset-bottom, 0px))}
  .page-head{flex-direction:column;align-items:stretch;gap:12px}
  .page-actions{flex-wrap:wrap}
  .page-actions > .btn{flex:1 1 auto}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .welcome-hero{padding:24px 20px;border-radius:var(--radius-lg)}
  .hero-mark{width:220px;height:220px;right:-50px;top:-30px}
  .welcome-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
  .wfact{padding:12px 14px}
  .wfact-val{font-size:var(--fs-lg)}
  .dash-grid, .grid-2, .grid-3, .goals-grid{grid-template-columns:1fr}
  .goals-grid > .goal-card{max-width:none}
  .card{padding:14px}
  .toasts{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
  .bulk-bar{bottom:calc(72px + env(safe-area-inset-bottom, 0px))}

  /* modals become bottom sheets */
  .modal-bg{align-items:flex-end}
  .modal, .modal.lg, .modal.xl{width:100%;max-height:92vh;border-radius:var(--radius-md) var(--radius-md) 0 0;padding-bottom:env(safe-area-inset-bottom, 0px)}

  /* --- tap targets ≥ 40px --- */
  .btn, .btn-sm{min-height:40px;height:auto}
  .btn-icon{min-width:40px}
  .input, .select{height:40px}
  .bar-segs button{min-height:40px}
  .row-del{width:40px;height:40px;opacity:.6}
  .chk, .switch{position:relative}
  .chk::before, .switch::before{content:'';position:absolute;inset:-12px}   /* invisible 40px hit area */

  /* --- tables → stacked cards (Transactions, Recurring) --- */
  .tbl-stack thead{display:none}
  .tbl-stack, .tbl-stack tbody{display:block}
  .tbl-stack tbody tr{display:grid;gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--line-soft);align-items:center;cursor:pointer}
  .tbl-stack tbody td{display:block;padding:0;border:none;min-width:0}
  .tbl-stack tbody tr:hover td{background:none}
  .tbl-stack .c-edit{display:none}

  /* concept + amount on top; date, category and "paid by" chips flow below
     and wrap instead of squeezing each other */
  .tx-tbl tbody tr{display:flex;flex-wrap:wrap;position:relative;padding-left:48px;gap:6px 8px}
  .tx-tbl tbody tr::before{content:'';order:3;flex-basis:100%;height:0}   /* line break */
  .tx-tbl .c-sel{position:absolute;left:14px;top:14px}
  .tx-tbl .c-main{order:1;flex:1 1 0}
  .tx-tbl .c-amt{order:2;font-weight:600;white-space:nowrap;align-self:flex-start}
  .tx-tbl .c-date{order:4;font-size:var(--fs-xs);align-self:center}
  .tx-tbl .c-cat{order:5}
  .tx-tbl .c-who{order:6}
  .tx-tbl tfoot, .tx-tbl tfoot tr{display:block}
  .tx-tbl tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:12px 14px}
  .tx-tbl tfoot td{display:block;padding:0;border:none}
  .tx-tbl tfoot td:empty{display:none}

  .rec-tbl tbody tr{
    grid-template-columns:44px auto auto minmax(0,1fr) auto;
    grid-template-areas:"day main main main amt" "day sched sched sched sched" "day cat who shared ." "day notes notes notes notes";
  }
  .rec-tbl .c-day{grid-area:day;align-self:start}
  .rec-tbl .c-main{grid-area:main}
  .rec-tbl .c-amt{grid-area:amt;font-weight:600}
  .rec-tbl .c-sched{grid-area:sched;font-size:var(--fs-xs)}
  .rec-tbl .c-cat{grid-area:cat}
  .rec-tbl .c-who{grid-area:who}
  .rec-tbl .c-shared{grid-area:shared}
  .rec-tbl .c-notes{grid-area:notes;font-size:var(--fs-xs)}
  .rec-tbl .c-notes:empty{display:none}

  /* --- Import review rows → stacked --- */
  .import-row.head{display:none}
  .import-row{
    grid-template-columns:minmax(0,1fr) auto auto auto;
    grid-template-areas:"concept concept concept amt" "date date date date" "cat cat cat cat" "payer shared edit inc";
    padding:12px 14px;
  }
  .import-row > :nth-child(1){grid-area:date;font-size:var(--fs-xs)}
  .import-row > :nth-child(2){grid-area:concept}
  .import-row > :nth-child(3){grid-area:amt}
  .import-row > :nth-child(4){grid-area:cat}
  .import-row > :nth-child(5){grid-area:payer}
  .import-row > :nth-child(6){grid-area:shared}
  .import-row > :nth-child(7){grid-area:edit}
  .import-row > :nth-child(8){grid-area:inc;min-width:40px;justify-content:center}
  .import-row .select{height:40px}

  /* --- wide grids stay tables: scroll sideways, category column sticks --- */
  .budget-cat-col{min-width:140px}
  .tbl-wrap{-webkit-overflow-scrolling:touch}
}