/* ===== Money app shell: phone = app bar + bottom tabs, laptop = sidebar + dashboard grid =====
   Only layout lives here. The dashboard's own styles, ids and numbers are untouched. */
body.shell{padding-bottom:calc(68px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
.shell .wrap{max-width:none;margin:0;padding:0}
.shell .mast{display:none}
.shell #banner:empty{display:none}
.shell #banner{padding:12px 16px 0}

/* app bar */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:var(--paper);border-bottom:1px solid var(--rule)}
.ab-title{flex:1;min-width:0}
.ab-view{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1px}
.appbar h1{margin:0;font-size:24px;line-height:1.1}
.appbar .month{font-size:24px;max-width:100%}
.appbar .feed{margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-actions{display:flex;gap:8px;flex:none}
.ab-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 12px;
  border-radius:999px;border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.ab-actions button svg{width:18px;height:18px;flex:none}
.ab-actions button[disabled] svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ab-actions .lbl{display:none}

/* views */
.view{display:none;padding:16px 16px 8px}
.view.on{display:block}
.view > *{margin-top:0!important}
.view > * + *{margin-top:16px!important}
.shell .view .hero,.shell .view .planner,.shell .view .net-card{padding:18px}
.shell .view > section > h2:first-child{margin-top:4px}
.shell .tx{max-height:none}
.shell footer{margin:8px 16px 0;padding:16px 0 24px}

/* pull to refresh (phone) */
.ptr{position:fixed;top:calc(env(safe-area-inset-top) + 64px);left:50%;z-index:25;width:36px;height:36px;margin-left:-18px;border-radius:50%;
  background:var(--panel);border:1px solid var(--rule-strong);display:grid;place-items:center;opacity:0;transform:translateY(-40px);
  transition:opacity .15s, transform .15s;pointer-events:none}
.ptr svg{width:18px;height:18px}
.ptr.go svg{animation:spin 1s linear infinite}

/* bottom tabs (phone) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--panel);border-top:1px solid var(--rule-strong);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.sidebar a{color:var(--ink-3);text-decoration:none}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;font-size:11px}
.tabbar svg,.sidebar svg,.ab-actions svg,.ptr svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--ink);font-weight:600}
.tabbar a.on svg{stroke:var(--bar);stroke-width:2}
.sidebar{display:none}

@media (min-width:980px){
  body.shell{padding:0 0 0 248px}
  .tabbar,.ptr{display:none}
  .sidebar{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:248px;padding:28px 16px 20px;
    background:var(--panel);border-right:1px solid var(--rule)}
  .sb-brand{font-family:Newsreader,Georgia,serif;font-size:28px;padding:0 12px 24px;color:var(--ink)}
  .sidebar a{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:2px;border-radius:8px;font-size:15px;color:var(--ink-2)}
  .sidebar a:hover{background:var(--sunk);color:var(--ink)}
  .sidebar a.on{background:var(--sunk);color:var(--ink);font-weight:600}
  .sidebar a.on svg{stroke:var(--bar)}
  .sb-foot{margin-top:auto;padding:0 12px;font-size:12px;color:var(--ink-3);line-height:1.5}
  .sb-foot button{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);text-decoration:underline;cursor:pointer}

  .appbar{padding:28px 40px 18px;border-bottom:0;background:var(--paper)}
  .appbar h1,.appbar .month{font-size:30px}
  .ab-actions .lbl{display:inline}
  .shell #banner{padding:0 40px}

  .view{padding:4px 40px 32px;max-width:1320px}
  .view.on{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
  .view > *, .view > * + *{grid-area:auto!important;grid-column:span 12;margin-top:0!important}
  .view > [data-span]{min-width:0}
  .view > [data-span="12"]{grid-column:span 12!important}
  .view > [data-span="7"]{grid-column:span 7!important}
  .view > [data-span="6"]{grid-column:span 6!important}
  .view > [data-span="5"]{grid-column:span 5!important}
  .shell .view .hero,.shell .view .planner,.shell .view .net-card{padding:28px}
  .view > section:not([data-plain]){background:var(--panel);border:1px solid var(--rule-strong);border-radius:var(--r2);padding:24px 28px}
  .shell .tx{max-height:none}
  .shell footer{margin:0 40px;max-width:1240px}
}