/* Mobile reading, touch controls, and a scrollable image viewer. */
html { -webkit-text-size-adjust: 100%; }
.image-open picture { display: block; }
.search-row > .button { flex: 0 0 auto; white-space: nowrap; }
dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
body:has(dialog[open]) { overflow: hidden; }
.image-dialog {
  width: min(1350px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
}
.image-dialog[open] { display: flex; flex-direction: column; }
.image-dialog-header {
  flex: 0 0 auto; margin: 0; padding: 12px 16px;
  background: white; border-bottom: 1px solid var(--line);
}
.image-dialog h2 { min-width: 0; overflow-wrap: anywhere; }
.image-dialog-header .button { flex-shrink: 0; }
.image-dialog-tools { flex: 0 0 auto; padding: 8px 16px; }
.image-dialog .image-help { font-size: 14px; margin: 4px 0 0; }
.image-viewport {
  min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--panel); padding: 8px;
}
.image-dialog .image-viewport img { max-height: 64dvh; }
.image-viewport.is-zoomed img {
  width: var(--zoom-width); max-width: none; max-height: none;
  margin: auto;
}
.image-dialog #large-caption { margin: 0; padding: 8px 16px 12px; font-size: 14px; }
.image-dialog #large-caption:empty { display: none; }
.copy-notice { bottom: max(20px, env(safe-area-inset-bottom)); }
@media (max-width: 720px) {
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .button, summary, .browse-links a { min-height: 48px; }
  .copy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .copy-actions .button { padding: 10px 6px; font-weight: 700; }
  .video-actions .button { flex: 0 0 auto; }
  .video-actions label { min-height: 48px; }
  .image-dialog-header, .image-dialog-tools { padding-left: 12px; padding-right: 12px; }
  .image-dialog h2 { font-size: 18px; }
  .image-dialog #large-caption { flex: 0 0 auto; max-height: 20dvh; overflow-y: auto; }
  .image-viewport.is-zoomed { min-height: min(260px, 45dvh); }
  footer { padding-bottom: max(35px, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .card-browse { flex-direction: column; }
  .card-browse .button { width: 100%; }
  .card-body { padding: 16px; }
  .search-row > .button { padding-left: 10px; padding-right: 10px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .image-dialog-tools { display: flex; gap: 12px; align-items: center; padding-top: 4px; padding-bottom: 4px; }
  .image-dialog .image-help { margin: 0; }
  .image-dialog #large-caption { display: none; }
  .image-dialog .image-viewport img { max-height: 48dvh; }
  .image-dialog .image-viewport.is-zoomed img { max-height: none; }
}