:root{
  --app-frame-max-width:760px;
  --app-frame-inset-x:16px;
  --app-frame-inset-top:max(20px,env(safe-area-inset-top));
  --app-frame-inset-bottom:max(20px,env(safe-area-inset-bottom));
  --app-frame-radius:32px;
  --app-workspace-radius:24px;
  --app-workspace-bg:transparent;   /* the graph paper behind shows through */
}

/* One structural shell for every application page. Page styles own only the
   content inside the header and workspace. */
/* Graph paper behind every app page, fixed to the viewport so the frame and the page around it
   line up as one sheet (and it fills the strip under a phone's navigation bar). */
html:has(body.app-page){width:100%;height:100%;overflow:hidden;background-color:var(--vq-paper);background-image:var(--vq-graph-paper);background-size:var(--vq-grid-size) var(--vq-grid-size);background-attachment:fixed}
/* viewport-fit=cover lets an installed app draw under the phone's status and navigation bars,
   so the frame keeps its header and content inside the safe area. */
body.app-page{
  box-sizing:border-box;width:100%;height:var(--app-height,100dvh);min-height:0;margin:0;overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display:grid;grid-template-rows:54px minmax(0,1fr);gap:0;
  background-color:var(--vq-paper);background-image:var(--vq-graph-paper);background-size:var(--vq-grid-size) var(--vq-grid-size);background-attachment:fixed;
  color:var(--vq-ink);
}
body.app-page>.app-page-content{
  width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;
  border:0;border-radius:0;background:var(--app-workspace-bg);box-shadow:none;
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
body.app-page>.app-page-content--locked{overflow:hidden}

@media(min-width:651px){
  body.app-page{
    width:min(var(--app-frame-max-width),100%);height:var(--app-height,100dvh);margin:0 auto;
    border:0;border-radius:0;box-shadow:none;overflow:hidden;
  }
}

.app-frame-surface{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}

@media(max-height:520px){
  :root{--app-frame-inset-top:max(8px,env(safe-area-inset-top));--app-frame-inset-bottom:max(8px,env(safe-area-inset-bottom));--app-workspace-radius:18px}
}

/* A page with a bottom tab bar (student.html, #46): the bar takes a third row under the workspace. */
body.app-page:has(>.app-tabbar:not([hidden])){grid-template-rows:54px minmax(0,1fr) auto}