/* Installed to a home screen, this is not a picture of a phone any more — it is
 * running on one. So the bezel, the drawn status bar and the drawn home
 * indicator all go: the operating system provides the real ones, and two status
 * bars stacked on top of each other is the tell of a web page pretending.
 *
 * Loaded last on purpose. The screen stylesheets set their top padding with a
 * `padding` shorthand to clear the *drawn* status bar; a later `padding-top`
 * beats that one edge without disturbing their left, right or bottom.
 */

@media (display-mode: standalone), (display-mode: fullscreen) {
  .ios-stage {
    padding: 0;
    min-height: 100dvh;
    background: var(--color-bg);
  }

  .ios-device {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg);
    font-family: var(--font-body);
  }

  /* The real ones are right there. */
  .ios-island,
  .ios-statusbar-layer,
  .ios-home-indicator { display: none; }

  /* The notch and the gesture bar, instead of the measurements we drew. */
  .ro-screen { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }

  .ro-tabbar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
  }

  .ro-toast {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    left: calc(18px + env(safe-area-inset-left, 0px));
    right: calc(18px + env(safe-area-inset-right, 0px));
  }
}

/* — the render loop's last resort —
   If a screen throws, the app says so and offers a way out instead of leaving a
   blank rectangle. Not a designed screen: it should look like the seam it is. */
.ro-fault {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 66px 24px 24px;
  background: var(--color-bg);
}
.ro-fault h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
}
.ro-fault p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-neutral-800);
}
.ro-fault code {
  display: block;
  font: 11.5px/1.6 ui-monospace, Menlo, monospace;
  background: var(--color-surface);
  border-radius: 14px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--color-accent-800);
}
.ro-fault button {
  align-self: flex-start;
  height: 46px;
  padding-inline: 20px;
  font-size: 14px;
  background: var(--color-accent);
  color: var(--color-bg);
}
.ro-fault button:hover { background: var(--color-accent-600); }
.ro-fault button:active { background: var(--color-accent-700); }