/* Global typography (Apple HIG–aligned) — see TASK-UX-003 */
body, p, li, td, span {
  font-size: 16px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  body, p, li, td, span {
    font-size: 17px;
  }
}

.text-sm, .hint, .caption, small {
  font-size: 13px;
  line-height: 1.5;
}

h1 { font-size: clamp(28px, 5vw, 48px); }
h2 { font-size: clamp(22px, 4vw, 36px); }
h3 { font-size: clamp(18px, 3vw, 24px); }

@keyframes grainee-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.grainee-field-shake {
  animation: grainee-shake 0.35s ease;
}