/* Touch-Modus für große Bildschirme (public/js/touch-mode.js, docs/maintenance.md
   Abschnitt Touch-Modus). Desktop bleibt Desktop: keine andere Schrift, keine anderen
   Abstände, keine anderen Spalten. Es ändern sich nur Trefffläche und Bedienbarkeit.
   Alle Regeln stehen unter html.mm-touch oder html.mm-hybrid und haben über :where()
   möglichst geringe Spezifität, damit Komponentenregeln Vorrang behalten. */

/* Unsichtbares Polster: Maße setzt touch-mode.js je Element (--mm-hit-*). */
:where(html.mm-touch, html.mm-hybrid) .mm-hit--rel { position: relative; }
:where(html.mm-touch, html.mm-hybrid) .mm-hit--before::before,
:where(html.mm-touch, html.mm-hybrid) .mm-hit--after::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--mm-hit-t, 0px));
  right: calc(-1 * var(--mm-hit-r, 0px));
  bottom: calc(-1 * var(--mm-hit-b, 0px));
  left: calc(-1 * var(--mm-hit-l, 0px));
  background: transparent;
  border: 0;
  pointer-events: auto;
}

/* Kein Doppeltipp-Zoom-Verzug, kein Textmarkieren und kein Systemmenü beim Halten. */
:where(html.mm-touch, html.mm-hybrid) :where(a[href], button, [role="button"], [role="tab"], [role="menuitem"], summary, label, select, input, textarea):not([class*="touch-"]) {
  touch-action: manipulation;
}
:where(html.mm-touch, html.mm-hybrid) :where(button, [role="button"], [role="tab"], [role="menuitem"], summary):not([class*="select-"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:where(html.mm-touch, html.mm-hybrid) :where(a[href]) { -webkit-touch-callout: none; }

/* Auswahlfelder sind mit dem Finger sonst zu schmal (Briefing Punkt 6). */
:where(html.mm-hybrid) :where(select) { min-height: 40px; }
:where(html.mm-touch) :where(select) { min-height: 44px; }

/* Scrollende Bereiche reichen das Wischen nicht an die Seite weiter. */
:where(html.mm-touch, html.mm-hybrid) :where(.overflow-y-auto, .overflow-auto, .overflow-y-scroll, .sidebar-scroll, dialog, [role="dialog"], [role="menu"], [role="listbox"]):not([class*="overscroll-"]) {
  overscroll-behavior: contain;
}

/* Utility-Klassen (touch-*, select-*, overscroll-*) haben Vorrang, siehe :not() oben.

   Was sonst nur beim Überfahren erscheint, ist mit dem Finger dauerhaft sichtbar.
   Nur Bedienelemente, keine reinen Hover-Tooltips (die zeigt das lange Drücken). */
:where(html.mm-touch, html.mm-hybrid) .group-hover\:opacity-100:is(button, a, [role="button"]),
:where(html.mm-touch, html.mm-hybrid) .group-hover\:opacity-100:has(button, a, [role="button"]) {
  opacity: 1;
}
:where(html.mm-touch, html.mm-hybrid) .group-hover\:visible:is(button, a, [role="button"]),
:where(html.mm-touch, html.mm-hybrid) .group-hover\:visible:has(button, a, [role="button"]) {
  visibility: visible;
}