/* Extra rules for the installed app (on top of styles.css). */

html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Only the phone is shown. On a computer it sits centred in the window. */
body { background: #E6E9EE; padding-block: 24px; }
.board { display: flex; justify-content: center; max-width: none; }
.phone { position: relative; height: min(860px, calc(100vh - 48px)); height: min(860px, calc(100dvh - 48px)); }

/* The Demo button is always in the top bar. */
.proto .demo-btn { display: inline-block; }

/* Demo controls open as a panel over the app screen. */
.side.right {
  position: absolute; inset: 10px; z-index: 50; border-radius: 42px; overflow-y: auto;
  max-height: none; background: rgba(23, 32, 42, .6); padding: 16px; display: none;
}
.side.right.open { display: flex; }
.side.right .closer { display: block !important; }

/* On a phone the app fills the screen and stays clear of the notch.
   (The bottom tabs already leave room for the home bar in styles.css.) */
@media (max-width: 760px) {
  html, body { background: #F5F6F8; }
  body { padding: 0; }
  .phone { height: 100vh; height: 100dvh; }
  .screen { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
  .side.right {
    position: fixed; inset: 0; border-radius: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
}

/* Demo panel polish: no scrollbar poking out of the frame; readable sub-text on the selected button. */
.side.right { scrollbar-width: none; }
.side.right::-webkit-scrollbar { display: none; }
.pbtn[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); }