/* app_ui: physical viewport on mobile, height-derived virtual device on desktop.
   Theme and PWA installation are independent from layout. */
:root {
  --app-portrait-ratio: .50;
  --app-landscape-ratio: 1.60;
  --app-shell-width: calc(100dvh * var(--app-portrait-ratio));
}
html[data-app-layout="tablet"] {
  --app-portrait-ratio: .75;
  --app-landscape-ratio: 1.333333;
}
html[data-app-layout="wide"] { --app-shell-width: 100%; }
@media (max-width: 899.98px) and (orientation: landscape) {
  :root { --app-shell-width: calc(100dvh * var(--app-landscape-ratio)); }
}
/* Header and page content share the selected virtual device width. */
#page_header { min-width:0;flex:0 0 auto;box-sizing:border-box; }
html[data-app-layout="phone"] { --app-shell-width: min(100%, 430px); }
html[data-app-layout="tablet"] { --app-shell-width: min(100%, 820px); }
/* On a desktop, the selected shell mode controls the header as well. */
@media (min-width: 900px) {
  #page_header, #page_contents, #page_footer, #page_messages {
    width: min(100%, var(--app-shell-width));
    max-width:100%;
    margin-inline:auto;
  }
  html[data-app-layout="wide"] #page_header,
  html[data-app-layout="wide"] #page_contents,
  html[data-app-layout="wide"] #page_footer,
  html[data-app-layout="wide"] #page_messages { width:100%; }
}
@media (max-width: 899.98px) {
  #page_header, #page_contents, #page_footer, #page_messages { width:100%; }
}

/* Container queries use the shell width, not the laptop viewport width. */
#page_header, #page_contents { container-type: inline-size; container-name: app-shell; }