/* Touch controls supplement the original guide. */
button, a, input { touch-action: manipulation; }
body.large .task p { font-size: 22px; }
body.large .note-card p, body.large .reading-tip, body.large .welcome-info p { font-size: 18px; }
.jump-form { margin: 24px 0; }
.jump-form label { display: block; font-weight: 700; margin-bottom: 8px; }
.jump-form > div { display: flex; gap: 10px; }
.jump-form input { width: 120px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.full-image-area { touch-action: pan-x pan-y pinch-zoom; }
@media (max-width: 820px) {
  .topbar { gap: 8px; }
  .topbar .tools { flex-wrap: nowrap; flex-shrink: 0; gap: 4px; }
  .identity { flex: 1; }
  .identity > div:last-child { min-width: 0; }
  .brandname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mark { display: none; }
  .stepnav { min-height: 56px; }
  .stepnav-name { font-size: 15px; }
  .chapter-heading { font-size: 16px; min-height: 52px; }
  .bottomnav { position: fixed; z-index: 25; bottom: 0; left: 0; right: 0;
    margin: 0; padding: 10px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: var(--paper); border-top: 1px solid var(--line); gap: 8px; box-shadow: 0 -5px 24px #172b3110; }
  .bottomnav .btn { font-size: 15px; padding: 10px; min-height: 52px; }
  .bottomnav .btn.primary { max-width: none; }
  .bottomnav .complete { flex: 1; }
  .content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 24px); text-align: center; }
  .viewer-stage { min-height: 280px; height: 58dvh; }
  .full-modal { height: 100dvh; max-height: 100dvh; }
  .full-modal .modal-head { height: auto; min-height: 69px; padding: 12px; }
  .full-image-area { height: calc(100dvh - 89px); }
  .task { display: block; }
  .task .tasknum { display: inline-block; margin-bottom: 10px; }
  .task p { font-size: 19px; }
  .modal-body { padding: 18px; }
}
@media (max-width: 370px) {
  .topbar { gap: 5px; padding: 0 8px; }
  .identity { gap: 5px; }
  .mark { display: none; }
  .tools { gap: 4px; }
  .bottomnav .btn { font-size: 14px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}