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

body {
  overflow-x: hidden;
}

button,
input,
select,
label {
  -webkit-tap-highlight-color: transparent;
}

.import-button {
  overflow: hidden;
}

.import-button input {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  font-size: 16px;
}

@media (max-width: 1024px) {
  .topbar {
    position: relative;
    top: auto;
    gap: 20px;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .topbar-actions > * {
    min-width: 0;
  }

  .book-selector {
    min-width: 0;
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(320px, 58dvh) minmax(260px, 42dvh);
  }

  .translation-card.is-active {
    transform: none;
  }
}

@media (max-width: 820px) {
  .topbar-actions {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-rows: minmax(280px, 50dvh) minmax(240px, 40dvh);
  }

  .left-pane,
  .right-pane {
    border-radius: 16px;
  }

  .sync-status {
    gap: 8px;
    padding: 12px 14px;
  }

  .translation-pane {
    padding: 16px;
  }

  .translation-meta {
    flex-wrap: wrap;
  }

  .bookmark-modal {
    max-height: calc(100dvh - 32px);
    overflow: auto;
  }
}

@supports (padding: max(0px)) {
  .workspace {
    padding-left: max(12px, calc(12px + env(safe-area-inset-left)));
    padding-right: max(12px, calc(12px + env(safe-area-inset-right)));
    padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom)));
  }

  .topbar,
  .notice-banner,
  .error-banner,
  .bookmark-shelf,
  .empty-state {
    margin-left: max(12px, calc(12px + env(safe-area-inset-left)));
    margin-right: max(12px, calc(12px + env(safe-area-inset-right)));
  }

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

@media (hover: none) {
  .reader-mode-button:hover:not(:disabled),
  .import-button:hover,
  .bookmark-delete-button:hover,
  .download-link-chip.is-primary:hover,
  .download-link-chip.is-backup:hover,
  .translation-card:hover {
    transform: none;
  }
}