/* Smooth color transitions for all elements within .transition-smooth */
.transition-smooth,
.transition-smooth * {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}

@media (prefers-reduced-motion: reduce) {

  .transition-smooth,
  .transition-smooth * {
    transition: none !important;
  }
}

/* Hide number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.cook-step-swipe {
  touch-action: pan-y;
}

#cook-step-panel {
  overflow-x: hidden;
}

.cook-step-slide-transition {
  transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .cook-step-slide-transition {
    transition: none !important;
  }
}

/*
 * Fixed overlays/docks pin to the layout viewport (inset/bottom: 0).
 * interactive-widget=overlays-content + VirtualKeyboard API keep the
 * keyboard from resizing that viewport on Chromium.
 *
 * --safe-area-bottom is frozen in viewport.js so docks keep a constant
 * height while Firefox's dynamic toolbar toggles.
 *
 * .vv-pin is applied only while the keyboard is open on Firefox Android.
 */
:root {
  --vv-top: 0px;
  --vvh: 100%;
  --vv-bottom: 0px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

.vv-overlay {
  position: fixed;
  inset: 0;
}

.vv-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.vv-pin .vv-overlay {
  top: var(--vv-top);
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--vvh);
}

.vv-pin .vv-bottom {
  bottom: var(--vv-bottom);
}

/* Paint past the layout viewport bottom to hide iOS overscroll gaps */
.vv-bottom-bleed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 120px;
  background: inherit;
  pointer-events: none;
}

.vv-max-h-85 {
  max-height: 85vh;
  max-height: 85svh;
}

.vv-max-h-90 {
  max-height: 90vh;
  max-height: 90svh;
}

.vv-pin .vv-max-h-85 {
  max-height: calc(var(--vvh) * 0.85);
}

.vv-pin .vv-max-h-90 {
  max-height: calc(var(--vvh) * 0.9);
}

.safe-area-pb {
  padding-bottom: max(0.75rem, var(--safe-area-bottom));
}