:root {
  --qr-visual-viewport-height: 100dvh;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Informational panels are neutral graphite rather than pale blue. Semantic
   success, error, and warning surfaces keep their own status colors. */
:where(.status-check) {
  border-color: #d2d2d2 !important;
  background: #f3f3f3 !important;
  color: #3d3d3d !important;
}

:where(.stat:not(.confirmed):not(.ok):not(.error):not(.warning)) {
  background: #f0f0f0 !important;
  color: #3d3d3d !important;
}

:where(.status-check-btn):focus-visible {
  outline-color: #777777 !important;
}

body {
  min-height: 100dvh;
}

:where(img, svg, video, canvas) {
  max-width: 100%;
}

@media (max-width: 767px) {
  html {
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  body {
    min-width: 0;
    min-height: var(--qr-visual-viewport-height, 100dvh) !important;
    padding-top: max(10px, env(safe-area-inset-top)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    overflow-x: hidden;
  }

  :where(.container, .panel, .card, main, section, article, form, fieldset) {
    min-width: 0;
    max-width: 100%;
  }

  :where(
    button,
    .btn,
    .link-btn,
    .back-btn,
    .status-check-btn,
    [role="button"],
    summary
  ) {
    min-width: 44px;
    min-height: 44px !important;
    touch-action: manipulation;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
  }

  :where(.reason-option, .check-row, label[for]) {
    touch-action: manipulation;
  }

  :where(
    .dialog,
    .modal,
    .modal-card,
    .confirm-modal,
    .confirmation-card,
    .loading-box
  ) {
    width: calc(100% - 20px) !important;
    max-width: 560px !important;
    max-height: calc(var(--qr-visual-viewport-height, 100dvh) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(.dialog-actions, .modal-actions, .confirm-actions) > :where(button, .btn) {
    flex: 1 1 0;
  }

  :where(.fullscreen-overlay, .loading-overlay) {
    min-height: var(--qr-visual-viewport-height, 100dvh) !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  :where(.fullscreen-close) {
    width: 44px !important;
    height: 44px !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }

  :where(.table-wrap, .table-scroll, .history, pre, code) {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.message, .alert, .helper, .hint, .meta, .history-desc) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  :where(.dialog-actions, .modal-actions, .confirm-actions) {
    flex-direction: column;
  }

  :where(.dialog-actions, .modal-actions, .confirm-actions) > :where(button, .btn) {
    width: 100%;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body {
    align-items: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}