/* Big screens (iPad landscape, laptops, desktops). The phone layout reads well because everything is sized for the hand;
   stretched onto a wide screen it became small text in big empty boxes. So here: scale the whole page up a step,
   use two columns where there is room, and keep reading columns (lists, settings) to a comfortable width. */
@media (min-width:1024px){
  .inner{zoom:1.12;max-width:1120px}
  #side{zoom:1.08}
  .sideitem{height:48px;font-size:17px}
  /* overview: the big balance card on the left, mascot / tiles / quick actions on the right */
  .homehead{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:10px}
  .homehead .hero{margin:0;min-height:100%}
  .hh-main{display:flex;flex-direction:column}
  .hh-main .hero{flex:1}
  .hh-side .duo-hi{margin-top:0}
  .hh-side .duo-stats{margin-top:8px}
  .hh-side .qacts{margin-top:12px}
  .hero .big{font-size:56px}
  .duo-stat b{font-size:24px}
  .qact{font-size:14px}
  .qact i{width:60px;height:60px}
  .qact .emo{width:34px;height:34px}
  /* reading pages stay a comfortable width instead of running edge to edge */
  .screen:is([data-screen=list],[data-screen=bills],[data-screen=more],[data-screen=settings],[data-screen=security],[data-screen=history],[data-screen=ledger],[data-screen=slips],[data-screen=tx]) .inner{max-width:760px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .tile{font-size:14px;padding:14px 6px}
  .tile .cat{width:52px;height:52px}
  .row{min-height:64px}
  .row .t b{font-size:17px}
  .row .t span{font-size:14px}
  .amt{font-size:18px}
  /* the record sheet: a little wider and taller to match */
  .panel-sheet{width:560px;left:calc(50% + 130px - 280px)}
}
@media (min-width:1440px){
  .inner{zoom:1.2;max-width:1180px}
  #side{zoom:1.12}
  #stage{left:300px} .toastx{left:300px}
}
/* iPad landscape and touch laptops: fingers, not a mouse */
@media (min-width:1024px) and (pointer:coarse){
  .sideitem{height:54px}
  .iconbtn{width:48px;height:48px}
}