/* Prototype v3の狭い画面での配置を維持します。 */
@media (max-width: 360px) {
  .app {
    padding-left: 14px;
    padding-right: 14px;
  }
  .recipe-card {
    padding-left: 15px;
    padding-right: 15px;
  }
  .recipe-actions {
    grid-template-columns: 1fr;
  }
  .ingredient-top {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 9px;
  }
  .ingredient-level {
    grid-template-columns: 46px 1fr 26px;
    gap: 9px;
  }
  .round-tool {
    width: 35px;
    height: 35px;
  }
  .community-main {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
  .preview-button {
    width: 51px;
    height: 51px;
  }
}

/* キーボードでの現在位置を既存の配色で示し、動きを減らす端末設定を尊重します。 */
:focus-visible {
  outline: 2px solid var(--moss-deep);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 長いレシピ名でも本文が折り返され、保存状態や操作ボタンを押し出さないようにします。 */
.recipe-head > div:first-child,
.my-card-head > div:first-child,
.community-main > div:first-child {
  min-width: 0;
}
.recipe-name,
.recipe-caption,
.my-card-title,
.my-card-note,
.community-title,
.community-note {
  overflow-wrap: anywhere;
}