#app{
  min-height:100%;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

#main-col{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;}
#topbar{
  height:60px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  padding-top:env(safe-area-inset-top,0px);
  box-sizing:content-box;
}
.topbar-title{
  flex:1;
  font-size:20px;
  font-weight:600;
  letter-spacing:.5px;
}
.topbar-back,.topbar-gear{
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  background:transparent;
}
.topbar-back{font-size:34px;line-height:1;padding-bottom:6px;display:none;}
#app[data-canback="1"] .topbar-back{display:flex;}
.topbar-back:active,.topbar-gear:active{background:var(--paper-2);}

#view{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 20px 24px;
  outline:none;
}

#tabbar{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  padding:8px 12px calc(8px + var(--safe-b));
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.tab{
  flex:1;
  min-height:56px;
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);
  font-size:13px;
}
.tab svg{width:24px;height:24px;}
.tab[aria-current="page"]{color:var(--leaf-dark);background:var(--leaf-soft);}
.tab:active{background:var(--paper-2);}

/* immersive mode: dictation & check hide chrome */
#app.immersive #topbar,#app.immersive #tabbar{display:none;}
#app.immersive #view{padding:0;}

/* landscape tablet: side rail instead of bottom bar */
@media (min-width:900px) and (orientation:landscape){
  #app{flex-direction:row;}
  #tabbar{
    order:-1;
    flex-direction:column;
    width:104px;
    gap:10px;
    padding:16px 12px calc(16px + var(--safe-b));
    border-top:none;border-right:1px solid var(--line);
    justify-content:flex-start;
  }
  .tab{flex:0 0 auto;min-height:72px;font-size:13px;}
  .tab svg{width:26px;height:26px;}
  #main-col{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;}
#topbar{padding:0 28px;}
  #view{padding:4px 28px 28px;}
  #app.immersive #tabbar{display:none;}
}

.stack{display:flex;flex-direction:column;gap:16px;}
.row{display:flex;gap:12px;align-items:center;}
.row-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.spacer{flex:1;}

.home-grid{display:flex;flex-direction:column;gap:16px;}
@media (min-width:900px) and (orientation:landscape){
  .home-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    grid-template-areas:"task pet" "stats pet";
    gap:20px;
    align-items:start;
    padding-bottom:8px;
  }
  .home-task{grid-area:task;}
  .home-pet{grid-area:pet;}
  .home-stats{grid-area:stats;}
}