/* Controls exist only when the mobile controller has initialized the viewer. */
.mobile-viewer-gate,
.mobile-viewer-done {
  display: none;
}

@media (max-width: 760px), (pointer: coarse) {
  .map-stage[data-mobile-viewer] {
    height: min(580px, 65vh);
    height: min(580px, 65svh);
    min-height: 180px;
  }
  .map-stage[data-mobile-viewer] .maker-canvas {
    height: 100%;
  }
  .knife-scene[data-mobile-viewer] {
    height: min(440px, 65vh);
    height: min(440px, 65svh);
    min-height: 180px;
  }
  [data-mobile-viewer] > .mobile-viewer-gate {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    touch-action: pan-y pinch-zoom;
  }
  [data-mobile-viewer][data-viewer-active="true"] > .mobile-viewer-gate {
    display: none;
  }
  .mobile-viewer-prompt {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px;
    max-width: calc(100% - 24px);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 4px 20px #0003;
    text-align: center;
  }
  .mobile-viewer-prompt button,
  .mobile-viewer-done {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--ink);
    color: var(--bg);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    touch-action: pan-y pinch-zoom;
  }
  .mobile-viewer-prompt span {
    font-size: 13px;
    line-height: 1.4;
  }
  .mobile-viewer-done:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 95;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100% - 24px);
    box-shadow: 0 4px 20px #0004;
  }
}