/* mini's bar: the way home and a share button, added to pages only when they run
   under mini. It sits in the corner above an app's heading, clear of the heading's
   text and of every app's buttons, which are on the right. The tap areas reach over
   the heading only. */
.mini-bar {
  position: fixed;
  z-index: 2147483647;
  /* Under a notch it drops below the status bar. The apps' top padding starts at the
     inset, so 6px less keeps it above their heading text there too. */
  top: max(0px, calc(env(safe-area-inset-top) - 6px));
  left: env(safe-area-inset-left);
  display: flex;
  height: 18px;
  border-bottom-right-radius: 8px;
  background: rgb(0 0 0 / 58%);
}

.mini-home,
.mini-share {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 9px 0 7px;
  border: 0;
  background: none;
  color: #fff;
  font: 600 11px/1 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mini-home + .mini-share {
  padding-left: 8px;
  box-shadow: inset 1px 0 rgb(255 255 255 / 25%);
}

/* A taller tap area than the bar looks. */
.mini-home::after,
.mini-share::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
}

.mini-home:focus-visible,
.mini-share:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

@media print {
  .mini-bar {
    display: none;
  }
}