/* Mobile and touch support for the complete D-Latch study workflow. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
input,
textarea {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  button,
  .exam-question label,
  .rating-scale label {
    -webkit-tap-highlight-color: rgba(18, 102, 216, .18);
  }

  .primary,
  .secondary,
  .option,
  .logic-button {
    min-height: 44px;
  }
}

@media (max-width: 800px) {
  body {
    overflow-x: hidden;
  }

  .hero-header {
    min-height: 230px;
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 25px max(20px, env(safe-area-inset-left));
    background-position: center, 67% 63%;
  }

  .hero-copy {
    width: min(86%, 520px);
  }

  .hero-header h1 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .hero-header .header-copy {
    margin-top: 12px;
    font-size: 1rem;
  }

  main {
    width: 100%;
    padding: 24px max(16px, env(safe-area-inset-right)) calc(42px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .lab-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 25px;
  }

  .lab-action {
    min-width: 0;
    min-height: 52px;
    padding: 9px 5px;
    gap: 4px;
  }

  .lab-action::before {
    inset-inline: 8px;
  }

  .lab-action strong {
    font-size: clamp(.78rem, 3.6vw, .98rem);
  }

  .lab-action .lock {
    font-size: .78rem;
  }

  .section-heading {
    gap: 12px;
    margin-bottom: 18px;
  }

  .section-heading .secondary {
    width: 100%;
  }

  .build-layout,
  .test-layout,
  .test-workspace {
    min-width: 0;
  }

  .instruction-card {
    order: 0;
    padding: 20px;
  }

  .build-steps {
    font-size: .92rem;
  }

  .lab-image-wrap {
    overflow: hidden;
    width: 100%;
    touch-action: manipulation;
  }

  .lab-image-wrap img {
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .hotspot {
    display: block;
    min-width: 0;
    min-height: 0;
    border: 3px solid rgba(0, 169, 146, .95);
    background: rgba(0, 169, 146, .10);
    touch-action: manipulation;
    z-index: 2;
  }

  .hotspot:hover,
  .hotspot:focus-visible,
  .hotspot:active {
    background: rgba(247, 184, 68, .38);
    border-color: var(--amber);
    outline: 4px solid rgba(247, 184, 68, .25);
  }

  .logic-card,
  .output-card,
  .live-stream-card,
  .quiz-card {
    min-width: 0;
    padding: 20px;
    border-radius: 15px;
  }

  .switch-row {
    min-height: 64px;
  }

  .logic-button {
    width: 64px;
    height: 48px;
  }

  .live-stream-card iframe {
    height: clamp(220px, 62vw, 310px);
  }

  .exam-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .exam-timer {
    align-self: flex-start;
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 5;
    box-shadow: 0 5px 15px rgba(18, 35, 63, .12);
  }

  .exam-question {
    min-width: 0;
    margin-inline: 0;
  }

  .exam-question label {
    min-height: 44px;
    padding: 11px 10px;
  }

  .option {
    width: 100%;
    min-height: 48px;
    padding: 13px;
  }

  .question-diagram {
    width: 100%;
    max-height: 42vh;
    object-fit: contain;
  }

  .rating-scale {
    width: 100%;
    max-width: none;
    gap: 6px;
  }

  .rating-scale span {
    min-height: 46px;
    padding: 11px 4px;
  }

  .scale-anchors {
    max-width: none;
  }

  .comments-label textarea {
    width: 100%;
    min-height: 120px;
    font-size: 16px;
  }

  .repeat-actions,
  .lab-turn-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .repeat-actions button,
  .lab-turn-actions button,
  .quiz-card > .primary,
  .quiz-card > .secondary,
  .survey-card > .primary {
    width: 100%;
    min-height: 48px;
  }

  .learning-video-frame {
    margin-inline: 0;
    padding: 6px;
    border-radius: 13px;
  }

  .learning-video-frame video {
    max-height: 52vh;
  }

  footer {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    padding-left: max(18px, env(safe-area-inset-left));
  }
}

@media (max-width: 360px) {
  .lab-action {
    min-height: 50px;
  }

  .lab-action strong {
    font-size: .72rem;
  }

  .hero-copy {
    width: 92%;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hero-header {
    min-height: 190px;
  }

  .learning-video-frame video {
    max-height: 72vh;
  }
}