/* =============================================================
   touch.css — Trefferflächen und Affordanzen für Finger und Stift

   Gilt für Grob-Zeiger: `@media (pointer: coarse)` deckt iPad/iPhone ab
   (auch mit Apple Pencil und auch mit angestecktem Magic Keyboard),
   `body.is-coarse` ergänzt Hybridgeräte, bei denen die Media-Query „fine"
   meldet und erst der erste echte Touch-/Stift-Kontakt die Wahrheit sagt
   (gesetzt in js/editor/interactions.js).

   Apples Richtwert sind 44x44pt. Die Leisten des Editors sind darauf nicht
   ausgelegt (ein 44px-Header wäre 70px hoch), deshalb hier durchgängig 40px
   als Kompromiss — spürbar besser als die 28–30px der Maus-Variante, ohne
   das Layout zu sprengen. 44px nur dort, wo Platz ist (Player-Leiste,
   Dialog-Buttons). Die Header-Leiste geht bei ≤900px auf 36px zurück, sonst
   passt sie auf einem iPad mini hochkant nicht mehr in eine Zeile
   (siehe header-responsive.css).

   Der zweite Teil der Datei (@media (hover: none)) holt Bedienelemente
   zurück, die es nur im :hover-Zustand gibt — auf einem Gerät ohne Hover
   sind die unsichtbar, aber trotzdem antippbar: man löscht ein Video, ohne
   den Knopf je gesehen zu haben.
   ============================================================= */

@media (pointer: coarse) {
  :root { --header-h: 58px; }
}
body.is-coarse { --header-h: 58px; }

@media (pointer: coarse) {

  /* ── Buttons allgemein ── */
  .btn { padding: 9px 14px; }
  .btn-icon { width: 40px; height: 40px; padding: 0; }

  /* ── Header ── */
  .header-pb-prominent { padding: 9px 14px; }
  .header-new-play-btn { width: 40px; height: 40px; }
  #play-name-input { padding: 9px 10px; }
  .lang-btn { padding: 8px 11px; font-size: 12px; }
  .plan-badge { padding: 5px 9px; }

  /* ── Werkzeugleiste ── */
  .tool-btn { padding: 10px 8px; }
  .toolbar-toggle-btn { padding: 9px 7px; }
  .el-row { padding: 8px 6px; }
  .elements-list { gap: 3px; }

  /* ── Eigenschaften / Routen-Bibliothek ──
     16px Schriftgröße ist kein Design-Wunsch: iOS Safari zoomt beim Fokus
     jedes Eingabefeld unter 16px die ganze Seite hinein, und weil
     html/body auf overflow:hidden stehen, kommt man aus der verschobenen
     Ansicht nur per Pinch wieder heraus. */
  .props-num,
  #props-content input[type="number"],
  #props-content input[type="text"],
  #props-content select,
  #routelib-strip input[type="text"],
  #routelib-strip select { font-size: 16px; min-height: 40px; }
  .props-num { width: 66px; }
  #props-panel input[type="color"] { min-height: 34px; min-width: 44px; }
  /* Schieberegler: der Standard-Griff ist mit dem Finger kaum zu treffen. */
  #props-panel input[type="range"] { height: 34px; }
  #props-panel input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  #props-panel input[type="checkbox"] { width: 22px; height: 22px; }
  .rl-mode-btn { min-height: 40px; }

  /* ── Zeichen-Banner (Fertig / Abbrechen beim Routen zeichnen) ── */
  .draw-ind-btn { min-height: 44px; padding: 10px 18px; }

  /* ── Bibliotheks-Seite ── */
  .lib-page-back-btn { min-height: 40px; }
  .lib-side-btn, .lib-side-tab, .lib-tab, .lib-filter-pill { min-height: 40px; }
  .lib-size-btn, .lib-ratio-btn { min-height: 36px; min-width: 40px; }
  .lib-mini-btn, .lib-team-mini-btn, .lib-btn { min-height: 40px; min-width: 40px; }
  /* Braucht die Doppelklasse, weil .lib-page-header-tools .btn-icon in
     library-page.css spezifischer ist als ein einfaches .btn-icon. */
  .lib-page-header-tools .btn-icon { width: 40px; height: 40px; }

  /* ── Studio / Player ── */
  .vp-icbtn { width: 44px; height: 44px; }
  .vp-seek-wrap { min-height: 44px; }
  .vid-side-toggle { width: 34px; height: 34px; }
  .vid-clip-del { width: 44px; height: 44px; padding: 0; }
  .vid-rail-num { width: 40px; height: 40px; }
  .vid-side-mode-btn { width: 40px; height: 40px; }
  /* Die Hover-Brücke der Zeichnungs-Marker ragt nach oben über die Seekbar
     und fängt sonst jeden Scrub-Tap ab. */
  .vp-marker { width: 5px; }
  .vp-marker::after { left: -15px; right: -15px; top: -7px; bottom: -7px; }

  /* ── Gameplan ── */
  #vid-gameplan-root .btn-icon { width: 44px; height: 44px; }
  .gpf-srcchip button { min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center; }
  .gpf-pal-btn, .gp-chip-btn { min-height: 44px; }

  /* ── Modals / Overlays ── */
  .export-close-btn, .op-close, .pp-close, .dp-nav { width: 44px; height: 44px; }
  .overlay-return-pill-close { width: 32px; height: 32px; }
  .dp-cell { height: 42px; }
  .export-pb-check { width: 24px; height: 24px; }
  .np-side-btn { min-height: 44px; }
  .modal .btn, .modal-actions .btn, .op-foot .btn, .vid-modal-foot .btn {
    min-height: 44px; padding-block: 10px;
  }
}

/* =============================================================
   Ohne Hover-Zeiger: versteckte Affordanzen dauerhaft zeigen
   ============================================================= */
@media (hover: none) {
  /* Editor: Hinweis „hier geht es weiter runter" im Eigenschaften-Panel */
  #props-panel.props-scroll-more::after { opacity: .95; }
  /* Textfelder auf dem Feld sind ohne Text unsichtbar — der Rahmen ist die
     einzige Chance, ein leeres Feld überhaupt wiederzufinden. */
  .ann-group .ann-hoverbox { opacity: .32; }

  /* Studio-Mediathek: Bearbeiten/Löschen lagen auf opacity:0, waren aber
     antippbar — man löscht ein Video, ohne den Knopf gesehen zu haben. */
  .vid-card-actions { opacity: 1; gap: 8px; }
  .vid-card-play { opacity: 1; }

  /* Gameplan: Notizfeld und antippbare Live-Werte als bedienbar kennzeichnen */
  .gp-call-note-inp { border-bottom-color: var(--border-muted); }
  .gp-state-cell .val.gp-val-edit {
    background: var(--bg-elevated); box-shadow: inset 0 -2px 0 var(--border);
  }
}