/*
 * Homepage phone mode (?embed=1): one 412x880 screen inside the host's handset. The host
 * paints the status bar and navigation bar over the spacers below. At this width the demo
 * already shows one phone at a time, so the screen picker becomes a labelled tab strip
 * docked under the status bar.
 */
html.embed,
html.embed body {
  height: 100%;
  overflow: hidden;
}
html.embed .demo {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
html.embed .demo-heading,
html.embed .demo-footer {
  display: none;
}
html.embed .devices {
  display: block;
  max-width: none;
  height: 100%;
  margin: 0;
}
html.embed .device {
  height: 100%;
}
html.embed .phone-shell {
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html.embed .phone-screen {
  height: 100%;
  border-radius: 0;
}
html.embed .android-status {
  height: 44px;
  min-height: 44px;
  padding: 0;
}
html.embed .android-status > * {
  visibility: hidden;
}
html.embed .home-indicator {
  min-height: 48px;
}
html.embed .home-indicator::after {
  display: none;
}
html.embed .overlay {
  inset: 32px 0 48px;
}
/* Tab strip: "ShortBlocker | YouTube demo". The apps start below it. */
html.embed .screen-picker {
  position: absolute;
  z-index: 5;
  top: 44px;
  left: 0;
  right: 0;
  height: 46px;
  margin: 0;
  max-width: none;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 0;
  background: #121313;
  box-shadow: 0 1px 0 #ffffff14;
}
html.embed .blocker-app,
html.embed .video-app {
  margin-top: 46px;
}
/* The tab strip takes 46px, so the blocker's spacing gives a little instead of scrolling. */
html.embed .home-page {
  min-height: 0;
}
html.embed .screen-picker button {
  flex: 1;
  min-height: 0;
  height: 32px;
  gap: 8px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #ffffff2e;
  color: #b9bfb9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
html.embed .screen-picker button img,
html.embed .screen-picker button svg {
  width: 20px;
  height: 20px;
}
html.embed .screen-picker [aria-selected='true'] {
  background: #eef3ee;
  box-shadow: none;
  color: #141615;
}