@media (max-width:650px), (hover:none) and (pointer:coarse) {
  .wordmark {
    transition: opacity 140ms ease-out;
  }

  body.canvas-gesture-active .wordmark {
    opacity: .15;
  }

  /* The hints are retired only after a real drag and a real scale change. */
  body.learned-canvas-controls #canvas-gesture-hint,
  body.learned-canvas-controls #mobile-tap-hint {
    display: none !important;
  }

  /* Reclaim the gesture row without altering the existing camera or dock. */
  body.learned-canvas-controls #homecoming-invitation {
    bottom: calc(94px + env(safe-area-inset-bottom));
  }

  body.learned-canvas-controls #discovery-tools,
  body.learned-canvas-controls.has-canvas-invitation #discovery-tools {
    bottom: calc(94px + env(safe-area-inset-bottom));
  }

  body.learned-canvas-controls #mobile-selection {
    bottom: calc(154px + env(safe-area-inset-bottom));
  }

  #canvas-help-button {
    min-height: 44px;
  }

  #canvas-help {
    width: min(360px, calc(100vw - 24px));
    margin: auto;
    padding: 18px 20px;
  }

  #canvas-help .dialog-close {
    min-height: 44px;
  }
}

@media (max-height:500px) and (hover:none) and (pointer:coarse) {
  /* The landscape composition already places these beside the dock. */
  body.learned-canvas-controls #homecoming-invitation { bottom: 14px; }
  body.learned-canvas-controls #discovery-tools,
  body.learned-canvas-controls.has-canvas-invitation #discovery-tools { bottom: 78px; }
  body.learned-canvas-controls #mobile-selection { bottom: 144px; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { transition: none !important; }
}