/* TimeWatch base tweaks layered on top of the Tailwind CDN build. */

/* Respect notch / home-indicator safe areas on mobile PWAs. */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}

/* Hide number-input spinners for a cleaner look. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Datastar toggles data-show by adding the [hidden]-equivalent; ensure hidden wins. */
[data-show="false"] {
  display: none !important;
}

/* Attention shake for a timer that has run past 1.5 minutes (>= 90s).
   Subtle, repeating nudge — not a violent shake — so it draws the eye
   without being annoying on a phone. */
@keyframes tw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-0.4deg); }
  40% { transform: translateX(4px) rotate(0.4deg); }
  60% { transform: translateX(-3px) rotate(-0.3deg); }
  80% { transform: translateX(3px) rotate(0.3deg); }
}
.tw-shake {
  animation: tw-shake 0.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tw-shake { animation: none; }
}