/* Layer over the untouched prototype CSS.
   Embedded (?embed): the landing page draws the phone bezel, so the prototype
   drops its own frame and fills the iframe; content scrolls inside while the
   tab bar stays pinned, as in the 390×844 mock exports. */
html.embed, html.embed body { height: 100%; margin: 0; overflow: hidden; background: #fff; }
html.embed #binder-color { padding: 0; height: 100%; background: #fff; }
html.embed #binder-color .phone { max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
html.embed #binder-color main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
html.embed #binder-color main::-webkit-scrollbar { display: none; }
html.embed #binder-color nav { flex: none; }

/* Locked to one role (?lock): the picker still shows which side this is, but
   is a label, not a control. */
html.locked #binder-color header select { pointer-events: none; appearance: none; -webkit-appearance: none; padding-right: 12px; }

/* Standalone (/demo, e.g. opened from a phone): a thin bar saying what this is. */
.demo-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; max-width: 390px; margin: 14px auto -10px; padding: 0 12px;
  font: 500 13px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #515154; }
.demo-bar a { color: #1d1d1f; font-weight: 700; letter-spacing: -.3px; text-decoration: none; font-size: 15px; }
/* Scoped to standalone: the embedded iframe is itself 390 px wide and would
   otherwise pick these up too. */
@media (max-width: 430px) {
  html:not(.embed) .demo-bar { margin: 10px 16px 0; padding: 0; }
  html:not(.embed) #binder-color { padding: 12px 0 0 !important; }
  html:not(.embed) #binder-color .phone { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
  /* On a phone the demo should behave like the app: one screen tall, content
     scrolling, tab bar always within reach. */
  html:not(.embed) body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  html:not(.embed) #binder-color { flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
  html:not(.embed) #binder-color .phone { height: 100%; min-height: 0; display: flex; flex-direction: column; border-bottom: 0 !important; }
  html:not(.embed) #binder-color main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html:not(.embed) #binder-color nav { flex: none; }
}