/* Hoard & Hustle mobile app shell v3.
   Desktop remains the dense ledger; mobile becomes a real app: one column, one header system,
   native stacked rows, fixed bottom navigation, and the same parchment / forest / gold language. */

@media(max-width:820px){
  :root{
    --hh-mobile-green:#0c2a1f;
    --hh-mobile-green-2:#123829;
    --hh-mobile-gold:#b99045;
    --hh-mobile-gold-soft:#d8bd83;
    --hh-mobile-paper:#f7ecd5;
    --hh-mobile-paper-hi:#fff9eb;
    --hh-mobile-ink:#182019;
    --hh-mobile-muted:#687064;
    --hh-mobile-line:#d7c39b;
    --hh-mobile-shadow:0 3px 10px rgba(58,39,18,.09);
  }

  html,body{background:var(--hh-mobile-paper)!important}
  body{color:var(--hh-mobile-ink)!important}
  body.hh-mobile-more-open{overflow:hidden!important}
  html.hh-booting body:before{
    content:'Hoard & Hustle'!important;
    padding-top:76px;
    color:#17231c!important;
    background-color:#f2e7cf!important;
    background-image:url('../app-icon.png')!important;
    background-repeat:no-repeat!important;
    background-size:58px 58px!important;
    background-position:center calc(50% - 34px)!important;
    font:800 26px/1 var(--display,Baskerville,Georgia,serif)!important;
  }

  .hh-mobile-hide,.hh-mobile-hide-sidebar{display:none!important}
  .main{
    padding:0 10px calc(88px + env(safe-area-inset-bottom))!important;
    background:
      radial-gradient(circle at 18% 4%,rgba(255,255,255,.68),transparent 23%),
      repeating-linear-gradient(0deg,rgba(104,76,41,.018) 0 1px,transparent 1px 5px),
      linear-gradient(180deg,#f7edd8 0,#fff9ec 42%,#efe0c3 100%)!important;
  }

  .topbar{
    margin:0 -10px 10px!important;
    padding:calc(10px + env(safe-area-inset-top)) 14px 13px!important;
    background:
      radial-gradient(circle at 92% 5%,rgba(185,144,69,.22),transparent 27%),
      linear-gradient(145deg,var(--hh-mobile-green),#0a2119 76%)!important;
    color:#f7ecd1!important;
    border-bottom:3px solid var(--hh-mobile-gold)!important;
    box-shadow:0 4px 12px rgba(17,30,23,.18)!important;
  }
  .topbar>div:first-child{width:100%;min-width:0}
  .brand-row{gap:10px!important}
  .hh-mobile-brand-icon{
    display:block!important;width:44px!important;height:44px!important;flex:0 0 44px!important;
    border-radius:12px!important;box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.12)
  }
  .brand-row h1{
    color:#f8e8bd!important;font-size:29px!important;letter-spacing:-.8px!important;
    text-shadow:0 1px 0 #0007!important
  }
  .topbar p{
    color:#d9c895!important;margin:1px 0 0 54px!important;font:700 11px/1.25 var(--display)!important;
    letter-spacing:.08em;text-transform:uppercase
  }
  .top-actions{display:none!important}

  #summaryGrid{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;
    margin:0 0 10px!important;padding:2px!important;
    background:linear-gradient(#fffaf0,#f4e5c8)!important;border:1px solid var(--hh-mobile-line)!important;
    border-radius:13px!important;box-shadow:var(--hh-mobile-shadow)!important;overflow:hidden
  }
  #summaryGrid .summary-card{
    display:block!important;text-align:center!important;padding:9px 5px 10px!important;margin:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
  }
  #summaryGrid .summary-card+ .summary-card{border-left:1px solid #decba7!important}
  #summaryGrid .summary-icon{display:none!important}
  #summaryGrid .summary-label{
    font-size:8.5px!important;line-height:1.15!important;color:#486783!important;white-space:normal!important;
    min-height:20px!important;text-transform:uppercase!important;letter-spacing:.035em!important
  }
  #summaryGrid .summary-value{
    margin-top:3px!important;font-size:16px!important;line-height:1.05!important;white-space:nowrap!important;
    overflow:hidden!important;text-overflow:ellipsis!important
  }

  .hh-dashboard-board{gap:10px!important;grid-auto-flow:row!important}
  .hh-layout-panel{
    width:100%!important;max-width:100%!important;margin:0!important;padding:0 10px 10px!important;
    border:1px solid #bda06e!important;border-radius:12px!important;
    background:
      radial-gradient(circle at 10% 8%,rgba(255,255,255,.62),transparent 23%),
      linear-gradient(150deg,var(--hh-mobile-paper-hi),#f3e4c7 94%)!important;
    box-shadow:inset 0 1px 0 #fff, var(--hh-mobile-shadow)!important;
    overflow:hidden!important;scroll-margin-top:12px!important
  }
  .hh-layout-panel>.panel-head.hh-mobile-uniform-head{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto 38px!important;align-items:center!important;
    min-height:58px!important;height:58px!important;gap:8px!important;
    margin:0 -10px 10px!important;padding:0 9px 0 12px!important;
    border-bottom:1px solid #d8c39c!important;border-radius:11px 11px 0 0!important;
    background:linear-gradient(180deg,#fff9ec 0,#f4e4c6 100%)!important;box-shadow:none!important;flex-wrap:nowrap!important
  }
  .hh-layout-panel>.panel-head.hh-mobile-uniform-head h2{
    display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;margin:0!important;
    font:800 20px/1.05 var(--display)!important;letter-spacing:-.25px!important;color:#172018!important
  }
  .hh-mobile-section-icon{
    display:grid!important;place-items:center!important;width:29px!important;height:29px!important;flex:0 0 29px!important;
    color:#78602f!important;border:1px solid #d1b77f!important;border-radius:8px!important;background:#f3e1b8!important
  }
  .hh-mobile-section-icon svg{width:17px;height:17px}
  .hh-mobile-section-title{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hh-mobile-head-status{
    grid-column:2!important;justify-self:end!important;max-width:126px!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font-size:8.5px!important;padding:4px 7px!important
  }
  .hh-mobile-collapse{
    grid-column:3!important;width:36px!important;height:36px!important;display:grid!important;place-items:center!important;
    margin:0!important;padding:0!important;border:1px solid #ccb486!important;border-radius:9px!important;
    background:#fff8e9!important;color:#54452f!important;box-shadow:inset 0 1px 0 #fff!important;transition:transform .15s ease
  }
  .hh-mobile-collapse svg{width:18px;height:18px;transition:transform .16s ease}
  .hh-mobile-collapse.is-collapsed svg{transform:rotate(-90deg)}
  .hh-mobile-old-layout-controls{display:none!important}
  .hh-mobile-collapsed{padding-bottom:0!important}
  .hh-mobile-collapsed>.panel-head{margin-bottom:0!important;border-bottom-color:transparent!important;border-radius:11px!important}
  .hh-mobile-collapsed>.hh-panel-body{display:none!important}

  .hh-mobile-panel-tools{
    display:flex!important;gap:7px!important;align-items:center!important;flex-wrap:wrap!important;margin:0 0 9px!important;
    width:100%!important;min-width:0!important
  }
  .hh-mobile-panel-tools:empty{display:none!important}
  .hh-mobile-panel-tools>.primary-btn,.hh-mobile-panel-tools>.ghost-btn{min-height:38px!important}
  .hh-mobile-panel-tools>.inline-controls{
    display:flex!important;gap:7px!important;flex-wrap:wrap!important;width:100%!important
  }
  .hh-mobile-panel-tools>.inline-controls>*{flex:1 1 140px!important;width:auto!important;min-width:0!important}
  .hh-mobile-filter-drawer{
    width:100%!important;border:1px solid #d8c6a5!important;border-radius:9px!important;background:#f8edd8!important;overflow:hidden!important
  }
  .hh-mobile-filter-drawer summary{
    min-height:39px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;
    cursor:pointer!important;font-size:10px!important;font-weight:850!important;color:#315c78!important;list-style:none!important
  }
  .hh-mobile-filter-drawer summary::-webkit-details-marker{display:none}
  .hh-mobile-filter-drawer summary svg{width:16px;height:16px}
  .hh-mobile-filter-drawer .inline-controls{padding:0 8px 8px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  .hh-mobile-filter-drawer .inline-controls #accountSearch{grid-column:1/-1!important}
  .hh-mobile-filter-drawer .inline-controls button{width:100%!important}

  .hh-has-mobile-list .table-wrap{display:none!important}
  .hh-mobile-data-list{display:grid!important;gap:7px!important;width:100%!important}
  .hh-mobile-row{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:start!important;
    width:100%!important;min-width:0!important;padding:9px 9px!important;border:1px solid #dfcfb1!important;border-radius:9px!important;
    background:rgba(255,251,241,.76)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
  }
  .hh-mobile-row.danger{border-color:#e3a39b!important;background:#fff3ef!important}
  .hh-mobile-row.waiting{border-color:#c9d9e4!important;background:#eef5f8!important}
  .hh-mobile-row.done{border-color:#badbc7!important;background:#eef8f1!important}
  .hh-mobile-row-main{min-width:0!important}
  .hh-mobile-row h3{margin:0!important;font-size:12px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  .hh-mobile-row p{margin:3px 0 0!important;font-size:9px!important;line-height:1.3!important;color:#667067!important;overflow-wrap:anywhere!important}
  .hh-mobile-row-side{display:grid!important;justify-items:end!important;gap:5px!important;min-width:82px!important;text-align:right!important}
  .hh-mobile-row-side>b{font:800 13px/1 var(--display)!important;color:#185e9b!important;white-space:nowrap!important}
  .hh-mobile-row-side>div{display:flex!important;gap:4px!important;justify-content:flex-end!important;flex-wrap:wrap!important}
  .hh-mobile-title-line{display:flex!important;align-items:center!important;gap:6px!important;justify-content:space-between!important;min-width:0!important}
  .hh-mobile-title-line h3{min-width:0!important;flex:1 1 auto!important}
  .hh-mini-status{
    flex:0 0 auto!important;border-radius:999px!important;padding:3px 6px!important;font-size:7.5px!important;font-weight:850!important;
    background:#ece4d6!important;color:#665d50!important;white-space:nowrap!important
  }
  .hh-mini-status.success{background:#dcefe2!important;color:#176044!important}.hh-mini-status.warn{background:#f8ebca!important;color:#825a13!important}
  .hh-mini-status.danger{background:#f7ddd8!important;color:#a32d31!important}
  .hh-account-row dl{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px 12px!important;margin:8px 0 0!important}
  .hh-account-row dl>div{display:flex!important;justify-content:space-between!important;gap:7px!important;border-top:1px solid #eadfc9!important;padding-top:4px!important}
  .hh-account-row dt{font-size:8px!important;color:#687064!important}.hh-account-row dd{font-size:8.5px!important;font-weight:800!important;margin:0!important;text-align:right!important}
  .hh-task-row{grid-template-columns:34px minmax(0,1fr) auto!important;align-items:center!important}
  .hh-task-state{
    width:30px!important;height:30px!important;border-radius:8px!important;border:1px solid #aeb3ad!important;background:#fff!important;
    color:#0b7b55!important;font-weight:900!important;font-size:16px!important;display:grid!important;place-items:center!important;padding:0!important
  }
  .hh-task-row.waiting .hh-task-state,.hh-task-row.done .hh-task-state{border-color:#73b895!important;background:#e2f3e8!important}
  .hh-mobile-empty{
    display:grid!important;gap:2px!important;padding:14px!important;text-align:center!important;border:1px dashed #d3be95!important;border-radius:9px!important;
    background:#f8edda!important;color:#657066!important;font-size:9.5px!important
  }
  .hh-mobile-empty b{color:#30483c!important;font-size:11px!important}

  #incomeList,.hh-has-mobile-list .panel-help{display:none!important}
  .list-row .emoji{display:none!important}
  .summary-icon{display:none!important}

  .hh-plan-settled-v2{background:linear-gradient(150deg,#f8fbf5,#edf3e7 92%)!important;border-color:#b6c9b9!important}
  .hh-plan-settled-v2>.panel-head{background:linear-gradient(180deg,#f6fbf5,#e6efe5)!important}
  .hh-plan-settled-v2 .hh-accepted-plan-note-v2{
    margin:0!important;border:0!important;padding:4px 2px 2px!important;background:transparent!important
  }
  .hh-plan-settled-v2 .hh-accepted-plan-note-v2 button{min-height:32px!important}

  #hhMobileNav{
    position:fixed!important;z-index:260!important;left:0!important;right:0!important;bottom:0!important;
    height:calc(64px + env(safe-area-inset-bottom))!important;padding:5px 7px calc(5px + env(safe-area-inset-bottom))!important;
    display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:3px!important;
    background:rgba(9,31,23,.98)!important;border-top:1px solid #735f3e!important;box-shadow:0 -8px 24px rgba(9,22,17,.28)!important;
    backdrop-filter:blur(14px)!important
  }
  .hh-mobile-nav-btn{
    min-width:0!important;height:52px!important;padding:4px 2px!important;border:0!important;border-radius:10px!important;
    display:grid!important;grid-template-rows:26px 15px!important;place-items:center!important;gap:1px!important;
    background:transparent!important;color:#c8cfca!important;box-shadow:none!important
  }
  .hh-mobile-nav-btn svg{width:22px!important;height:22px!important}.hh-mobile-nav-btn span{font-size:8px!important;font-weight:780!important}
  .hh-mobile-nav-btn.active{color:#f0d88f!important;background:rgba(58,96,69,.42)!important;box-shadow:inset 0 0 0 1px rgba(236,212,147,.10)!important}

  #hhMobileMoreBackdrop{
    position:fixed!important;z-index:270!important;inset:0!important;border:0!important;background:rgba(6,17,13,.46)!important;
    opacity:0!important;pointer-events:none!important;transition:opacity .18s ease!important
  }
  #hhMobileMoreSheet{
    position:fixed!important;z-index:280!important;left:8px!important;right:8px!important;bottom:calc(70px + env(safe-area-inset-bottom))!important;
    max-height:min(72vh,620px)!important;overflow:auto!important;padding:12px!important;border:1px solid #8e754b!important;border-radius:17px!important;
    background:
      radial-gradient(circle at 100% 0,rgba(185,144,69,.18),transparent 24%),
      linear-gradient(155deg,#fff9ed,#efe0c1 94%)!important;
    box-shadow:0 18px 46px rgba(8,20,15,.35)!important;transform:translateY(24px)!important;opacity:0!important;pointer-events:none!important;
    transition:transform .18s ease,opacity .18s ease!important
  }
  body.hh-mobile-more-open #hhMobileMoreBackdrop{opacity:1!important;pointer-events:auto!important}
  body.hh-mobile-more-open #hhMobileMoreSheet{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important}
  .hh-mobile-sheet-head{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:flex-start!important;padding:3px 2px 11px!important;border-bottom:1px solid #d8c39d!important}
  .hh-mobile-sheet-head>div{display:grid!important;gap:2px!important}.hh-mobile-sheet-head b{font:800 22px/1 var(--display)!important}.hh-mobile-sheet-head span{font-size:9px!important;color:#697168!important}
  #hhCloseMore{width:36px!important;height:36px!important;border:1px solid #cbb48a!important;border-radius:9px!important;background:#fff8e8!important;padding:7px!important}
  #hhCloseMore svg{width:100%;height:100%}
  .hh-mobile-sheet-list{display:grid!important;gap:6px!important;padding:9px 0!important}
  .hh-mobile-sheet-list>button{
    display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:9px!important;width:100%!important;
    min-height:53px!important;padding:7px 9px!important;text-align:left!important;border:1px solid #ddccad!important;border-radius:10px!important;background:#fffaf0!important;color:#1c251e!important
  }
  .hh-mobile-sheet-list>button>svg{width:23px!important;height:23px!important;color:#6d5831!important}
  .hh-mobile-sheet-list>button>span{display:grid!important;gap:2px!important}.hh-mobile-sheet-list b{font-size:11px!important}.hh-mobile-sheet-list small{font-size:8.5px!important;color:#6c736c!important}
  .hh-install-card{
    display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;width:100%!important;
    margin-top:2px!important;padding:8px!important;text-align:left!important;border:1px solid #9abb9e!important;border-radius:11px!important;background:#e9f2e7!important;color:#1c3526!important
  }
  .hh-install-card img{width:46px!important;height:46px!important;border-radius:12px!important}.hh-install-card span{display:grid!important;gap:2px!important}.hh-install-card b{font-size:10.5px!important}.hh-install-card small{font-size:8.5px!important;color:#55705d!important}

  .hh-install-dialog{
    width:calc(100vw - 28px)!important;max-width:420px!important;border:1px solid #9d8255!important;border-radius:16px!important;padding:0!important;background:#fff8e9!important;color:#1b221c!important
  }
  .hh-install-dialog::backdrop{background:rgba(6,17,13,.58)!important}
  .hh-install-dialog form{display:grid!important;justify-items:center!important;gap:10px!important;padding:20px!important;text-align:center!important}
  .hh-install-dialog img{width:74px!important;height:74px!important;border-radius:18px!important;box-shadow:0 5px 16px rgba(0,0,0,.18)!important}
  .hh-install-dialog h2{margin:0!important;font:800 22px/1.05 var(--display)!important}.hh-install-dialog p{margin:0!important;font-size:11px!important;line-height:1.45!important;color:#5f685f!important}

  #hhMoreDashboard,#hhCustomizeDashboard,.hh-drag-handle,.hh-resize-handle{display:none!important}

  .dialog{
    width:calc(100vw - 18px)!important;max-width:520px!important;max-height:82dvh!important;border-radius:15px!important;
    border:1px solid #92784f!important;background:#fff8e9!important;box-shadow:0 22px 56px rgba(7,18,13,.36)!important
  }

  @media(display-mode:standalone){
    .topbar{padding-top:calc(8px + env(safe-area-inset-top))!important}
    .main{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
  }
}

@media(max-width:390px){
  #summaryGrid .summary-value{font-size:14.5px!important}
  .hh-layout-panel>.panel-head.hh-mobile-uniform-head h2{font-size:18px!important}
  .hh-mobile-section-icon{width:27px!important;height:27px!important;flex-basis:27px!important}
  .hh-mobile-row{padding:8px!important}.hh-mobile-row-side{min-width:76px!important}
}