/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */
.flash {
  max-width: 960px;
  margin: 12px 16px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  animation: fadeIn 0.4s ease-out;
}

@media (min-width: 640px) {
  .flash {
    margin: 16px auto;
  }
}

.flash.notice {
  background: #f0fdf4;
  color: #166534;
  border-left: 6px solid #22c55e;
}

.flash.alert {
  background: #fef2f2;
  color: #991b1b;
  border-left: 6px solid #ef4444;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.life-card {
  border-radius: 32px;
}

progress.life-progress {
  width: 100%;
  height: 26px;
  border: 3px solid #0f172a; /* slate-900 */
  border-radius: 9999px;
  background: #fff;
  overflow: hidden;
  appearance: none;
  box-sizing: border-box;
}

progress.life-progress::-webkit-progress-bar {
  background: #fff;
  border-radius: 9999px;
}

progress.life-progress::-webkit-progress-value {
  background: #ff6b6b;
  border-radius: 9999px;
  overflow: hidden;
}

progress.life-progress::-moz-progress-bar {
  background: #ff6b6b;
  border-radius: 9999px;
}

/* 横スクロールナビのスクロールバー非表示 */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* 目標カード：選択が発生したとき非選択カードを薄く（:has() 対応ブラウザのみ） */
.goal-type-group .goal-type-card {
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
@supports selector(:has(*)) {
  .goal-type-group:has(input[type="radio"]:checked) .goal-type-card:not(:has(input:checked)) {
    opacity: 0.45;
  }
}

/* 目標入力セクション：スライドアニメーション
   .hidden クラスを display:none ではなく max-height:0 で処理してアニメーションを実現 */
.goal-input-section {
  overflow: hidden;
  max-height: 300px;
  opacity: 1;
  transition: max-height 0.3s ease-out, opacity 0.2s ease;
}
.goal-input-section.hidden {
  display: block !important; /* Tailwind の hidden(display:none) を上書き */
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}