/* ===== Mobile foundation (≤560px) ===== */
@media (max-width: 560px){
  :root{ --tabs-h: 64px; }
  #main{
    padding-bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  img, canvas, svg, video{ max-width: 100%; height: auto; }
  .panel, .section, .card, .row, .controls-grid, .score-panel{ min-width: 0; }
  .brand .title, .brand .hint{ overflow-wrap: anywhere; }

  .header-tabs{
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--tabs-h);
    display: grid; grid-auto-flow: column; align-items: stretch; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 100;
    touch-action: manipulation;
  }
  .header-tabs .tab{
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: var(--fw-semibold);
    min-height: 40px;
  }
  .header-tabs .tab.is-active{ background: var(--bg-elev); }

  .tab-panel{ margin-bottom: var(--space-2); }

  .kpi-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  @media (max-width: 360px){ .kpi-row{ grid-template-columns: 1fr; } }
  .kpi{ min-width: auto; }

  .quick-chips{ display:flex; flex-wrap: wrap; gap: var(--space-2); overflow-x: visible; }

  #goalsProgressWrap{ overflow-x: visible; }
  #goalsProgress .table-head{ display:none; }
  #goalsProgress .table-row{ grid-template-columns: 1fr; }
  #goalsProgress .gp-title{ font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
  #goalsProgress .gp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  @media (max-width: 360px){ #goalsProgress .gp-grid{ grid-template-columns: 1fr; } }
  #goalsProgress .gp-item .gp-label{ color: var(--muted); font-size: .85rem; }
  #goalsProgress .gp-item .gp-value{ text-align: right; }

  .toolbar.mobile-hidden{ display:none !important; }
}



/* ===== v7 Mobile: bottom-sheet tabs & compact header ===== */
@media (max-width: 560px){
  .app-header{ padding: var(--space-3) var(--space-3) var(--space-2); }
  .app-header .header-stats{ display:none; }
  .brand .hint{ display:none; }
  .tab-panel{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tabs-h));
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--space-3);
    transform: translateY(110%);
    transition: transform .2s ease-out;
    z-index: 110;
  }
  .tab-panel.is-open{ transform: translateY(0); }
  .sheet-scrim{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease-out;
    z-index: 105;
  }
  .sheet-scrim.is-open{ opacity: 1; pointer-events: auto; }
}



/* ===== Mobile line-item grids (expenses/debts/goals) ===== */
@media (max-width: 560px){
  .rows .row input, .rows .row select{ width:100%; min-width:0; }

  #expensesList .row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name amount" "kind remove";
  }
  #expensesList .row > :nth-child(1){ grid-area:name; }
  #expensesList .row > :nth-child(2){ grid-area:amount; }
  #expensesList .row > :nth-child(3){ grid-area:kind; }
  #expensesList .row > :nth-child(4){ grid-area:remove; justify-self:end; min-width:44px; }

  #debtsList .row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name pay" ". remove";
  }
  #debtsList .row > :nth-child(1){ grid-area:name; }
  #debtsList .row > :nth-child(2){ grid-area:pay; }
  #debtsList .row > :nth-child(3){ grid-area:remove; justify-self:end; min-width:44px; }

  #goalsList .row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name amount" "date saved" ". remove";
  }
  #goalsList .row > :nth-child(1){ grid-area:name; }
  #goalsList .row > :nth-child(2){ grid-area:amount; }
  #goalsList .row > :nth-child(3){ grid-area:date; }
  #goalsList .row > :nth-child(4){ grid-area:saved; }
  #goalsList .row > :nth-child(5){ grid-area:remove; justify-self:end; min-width:44px; }
}



/* === Option 3: Mini header + segmented switch + utility drawer (≤560px) === */
@media (max-width: 560px){

  /* Compact visual header */
  .app-header{ padding: var(--space-3) var(--space-3) var(--space-2); }
  .app-header .header-stats{ display:none; }
  .brand .hint{ display:none; }

  /* Retire any older mobile tab bars/panels */
  .header-tabs, .sheet-scrim, .tab-panel{ display:none !important; }

  /* Segmented switch (top, sticky) */
  .segmented{
    position: sticky; top: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2);
    background: var(--bg);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
  }
  .segmented .seg{
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: var(--fw-semibold);
  }
  .segmented .seg.is-active{ background: var(--bg-elev); }

  /* Utility (kebab) button next to brand */
  .utility-btn{
    margin-left: auto;
    min-width: 40px; min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elev);
  }

  /* Utility drawer (right slide-in) */
  .utility-drawer{
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 82vw; max-width: 360px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .22s ease-out;
    z-index: 100;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .utility-drawer.is-open{ transform: translateX(0); }

  .drawer-scrim{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease-out;
    z-index: 95;
  }
  .drawer-scrim.is-open{ opacity: 1; pointer-events: auto; }

  body.drawer-open{ overflow: hidden; }

  /* Keep content readable; no side scroll */
  #main{ padding-bottom: var(--space-3); }
  img, canvas, svg, video{ max-width: 100%; height: auto; }
  .panel, .section, .card, .row, .controls-grid, .score-panel{ min-width: 0; }

  /* Mobile line-item rows reflow */
  .rows .row input, .rows .row select{ width:100%; min-width:0; }

  #expensesList .row{
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    grid-template-areas: "name amount" "kind remove";
  }
  #expensesList .row > :nth-child(1){ grid-area:name; }
  #expensesList .row > :nth-child(2){ grid-area:amount; }
  #expensesList .row > :nth-child(3){ grid-area:kind; }
  #expensesList .row > :nth-child(4){ grid-area:remove; justify-self:end; min-width:44px; }

  #debtsList .row{
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    grid-template-areas: "name pay" ". remove";
  }
  #debtsList .row > :nth-child(1){ grid-area:name; }
  #debtsList .row > :nth-child(2){ grid-area:pay; }
  #debtsList .row > :nth-child(3){ grid-area:remove; justify-self:end; min-width:44px; }

  #goalsList .row{
    display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    grid-template-areas: "name amount" "date saved" ". remove";
  }
  #goalsList .row > :nth-child(1){ grid-area:name; }
  #goalsList .row > :nth-child(2){ grid-area:amount; }
  #goalsList .row > :nth-child(3){ grid-area:date; }
  #goalsList .row > :nth-child(4){ grid-area:saved; }
  #goalsList .row > :nth-child(5){ grid-area:remove; justify-self:end; min-width:44px; }
}



/* ===== v8 Mobile: sticky mini header (brand + kebab), remove segmented ===== */
@media (max-width: 560px){
  .app-header{
    position: sticky; top: 0; z-index: 70;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
  .segmented{ display: none !important; } /* remove Overview/Inputs/Goals */
}



/* v10: lightweight toast & button states (mobile-safe) */
@media (max-width: 560px){
  .toast {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  .toast.show { opacity: 1; pointer-events: auto; }

  .btn-busy { opacity: .6; pointer-events: none; }
}