/* Touch screens (tablet): larger targets and feedback on tapping. Applies only to coarse pointers, the desktop stays as it is. */

@media (pointer: coarse) {
  /* No double-tap zoom and no grey flash; buttons are not selected as text by a long press. */
  html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  button, .button, .crumb { -webkit-user-select: none; user-select: none; }
  .button:active:not(:disabled) { background: var(--button-hover); border-color: var(--button-hover-border); }

  /* Targets of at least 44 px for a finger, 40 px for buttons with text. */
  .button { min-height: 40px; }
  .button.icon, .scene-controls-anchor > .button.icon { width: 44px; height: 44px; padding: 10px; }
  .scene-view-actions > .button, .scene-controls-anchor > .button { height: 44px; }
  .turn-button { height: 44px; }
  .research-entry { padding: 10px 12px; }
  .graph-node { padding: 9px 12px; }
  .body-list-entry { padding: 8px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Small stars and bodies keep their picture; an invisible circle around the disc takes the tap. */
  .map-star::before, .system-body::before {
    content: ""; position: absolute; left: 50%; top: calc(var(--disc) / 2); width: 44px; height: 44px;
    transform: translate(-50%, -50%); border-radius: 50%;
  }
}

/* Hint bubble with the title of an element, shown by tapping or a long press (common/view/touch-hints). */
.touch-hint {
  position: fixed; z-index: 1000; max-width: min(320px, calc(100vw - 16px)); padding: 8px 12px;
  background: var(--surface-solid); font-size: var(--text-sm); line-height: 1.4; white-space: pre-line; pointer-events: none;
}
@media (pointer: coarse) {
  /* A long press on an element with a hint shows the hint, it neither selects text nor opens the callout. */
  [title] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* The corner switch keeps a finger-sized target; it shows fully, as there is no hover. */
@media (pointer: coarse) {
  .corner-switch.button.icon { width: 44px; height: 44px; padding: 12px; opacity: 0.7; }
}