/* ── Mobile Utilities ────────────────────────────────────────────────────── */
/* Shared responsive helpers for sandbox, adaptive workspace, and games.    */

/* ── Dynamic viewport height ── */
:root {
  --app-vh: 1vh;
}
@supports (height: 100dvh) {
  :root { --app-vh: 1dvh; }
}

/* ── Touch-friendly drag handles ── */
.drag-handle {
  width: 5px;
  cursor: col-resize;
  background: #e2e8f0;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
.drag-handle:hover,
.drag-handle:active {
  background: #3a7bd5;
}
/* Invisible wider touch target (44px total) */
.drag-handle::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -20px; right: -20px;
  z-index: 1;
}

/* Horizontal variant for mobile stacked layouts */
.drag-handle--horizontal {
  width: 100%;
  height: 5px;
  cursor: row-resize;
}
.drag-handle--horizontal::before {
  left: 0; right: 0;
  top: -20px; bottom: -20px;
}

/* ── Touch-visible actions ── */
/* Show hover-only controls on touch devices */
@media (hover: none) {
  .sandbox-file-tree li .file-actions {
    display: flex;
  }
  .sandbox-card__delete {
    visibility: visible;
  }
}

/* ── Hover-safe cards ── */
/* Prevent sticky :hover transforms on touch devices */
@media (hover: none) {
  .sandbox-card:hover,
  .adaptive-path-card:hover,
  .game-card:hover {
    transform: none;
    box-shadow: none;
  }
  .sandbox-card:active,
  .adaptive-path-card:active {
    border-color: #3a7bd5;
    box-shadow: 0 2px 8px rgba(58, 123, 213, 0.12);
  }
}

/* ── Minimum touch targets ── */
@media (pointer: coarse) {
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }
}