/* The phone app's own layout: the tablet's À faire panel, full screen, with its tab bar at the bottom.
   Colours, fonts and every piece it shares with the kitchen tablet come from /base.css, which is the tablet's own
   file (app/static/base.css) published with this site. Change shared looks there, never here. */
html,body{height:100%}
body{overscroll-behavior:none}
.gate{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));text-align:center}
/* The column is the screen's width, never the tab bar's natural width, or a narrow phone zooms the whole page out. */
.main{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.tabs button{min-width:0}
.page{display:flex;flex-direction:column;gap:10px;min-height:0;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
#nav{padding-bottom:env(safe-area-inset-bottom,0px)}