/* 共通トースト（システムダイアログの代替）。
   alert() を使わずユーザーに短いメッセージを出すための唯一の手段。

   ★アプリ内ページ（layout.html 配下）と standalone ページ（LP・ツール等）の
   両方から読める独立ファイルにしてある。standalone 側は base.css を読まず
   --danger 等のトークンを持たないため、var() には必ずフォールバックを書く。
   （これを忘れると standalone で色が消えて文字が読めなくなる）

   JS 側の実体は static/js/toast.js の window.showToast。 */

.app-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  background: var(--danger-bg, #fde8e8);
  border: 1.5px solid var(--danger-border, #f4c4c4);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(180, 120, 100, .18);
  padding: .7rem .85rem;
  color: var(--danger, #d47979);
  font-family: 'Zen Maru Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
  z-index: 10000;
  animation: app-toast-in .25s ease-out;
}

@keyframes app-toast-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.app-toast-msg { flex: 1; }

.app-toast-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--danger, #d47979);
  font-family: inherit;
  padding: 0;
  line-height: 1.5;
}

.app-toast-success {
  background: var(--success-bg, #edfaf3);
  border-color: var(--success-border, #86e0b0);
  color: var(--success, #2e7d52);
}

.app-toast-success .app-toast-close { color: var(--success, #2e7d52); }