/* =========================================================================
   ATHLETA Taiwan — トースト通知 (toast.css)
   画面の隅に数秒だけ現れる情報/成功/注意/エラーの通知。任意で「復原(undo)」
   ボタンを持てる。全ページ共通の単一ソース。JS は assets/toast.js。

   設計方針:
   - design-base.css のトークン(--paper/--ink/--line/--blue/--yellow/
     --danger/--muted)を使い、色の単一ソースを守る。成功色だけ既存トークンに
     無いので、ここで component-scoped の --toast-ok を1つだけ定義する。
   - 位置は左下の隅。AI ドック(下中央 / z-index 80)と被らないよう底上げし、
     z-index 90 で前面・常にクリック可能にする。
   ========================================================================= */
.toast-stack {
  position: fixed;
  left: 18px;
  bottom: 92px; /* 下中央の AI ドックより上に逃がす */
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none; /* 隙間はクリック透過。トースト本体だけ受ける */
}

.toast {
  --toast-accent: var(--blue);
  --toast-ink: var(--ink);
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  overflow: hidden;
  /* 四辺は均一のヘアライン。種別色は左フチではなく左のアイコンバッジで示す
     （旧 border-left:3px は角丸に沿って弓状のくさびが出るため廃止。2026-06-05 ユーザー確定=案A）。 */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 92%, white);
  backdrop-filter: saturate(1.1) blur(8px);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 38%, transparent),
    0 2px 6px -3px color-mix(in srgb, var(--ink) 24%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

/* 種別アクセント。色は既存トークン由来（成功のみローカル）。 */
.toast--info    { --toast-accent: var(--blue); }
.toast--success { --toast-accent: var(--toast-ok, #1f9d63); }
.toast--warn    { --toast-accent: var(--yellow); }
.toast--error   { --toast-accent: var(--danger); }

/* 種別色を載せる角丸バッジ。淡ティント地＋currentColor のグリフ
   （ヘッダー/絞り込みの「淡ピル＋Phosphor」と同じ語彙）。 */
.toast__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--toast-accent) 16%, var(--surface));
  color: var(--toast-accent);
}
.toast__icon svg { width: 17px; height: 17px; display: block; }
/* 注意(黄)はティント上だと薄いのでグリフを少し濃い黄に寄せる */
.toast--warn .toast__icon { color: #b08900; }

.toast__body { min-width: 0; }
.toast__title {
  margin: 0 0 1px;
  font-weight: 700;
  font-size: 13px;
}
.toast__msg {
  margin: 0;
  color: var(--muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}
/* タイトルが無い時は本文を主役の濃さに */
.toast:not(:has(.toast__title)) .toast__msg { color: var(--ink); font-weight: 700; }

/* 右側のアクション群（復原＋✕）を縦に積まず横並びに収める */
.toast__tail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: -2px;
}

.toast__action {
  pointer-events: auto;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, var(--line));
  border-radius: 999px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--toast-accent) 10%, transparent);
  color: var(--toast-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease;
}
.toast__action:hover { background: color-mix(in srgb, var(--toast-accent) 18%, transparent); }
.toast--warn .toast__action { color: #8a6d00; }

.toast__close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.toast__close:hover { background: var(--fill); color: var(--ink); }

/* 残り時間プログレスバー（下端）。0秒(=固定表示)では出さない。 */
.toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: color-mix(in srgb, var(--toast-accent) 55%, transparent);
}

/* 出入りアニメーション（左からスライド＋フェード）。 */
.toast {
  animation: toast-in .26s cubic-bezier(.2, .8, .25, 1) both;
}
.toast.is-leaving {
  animation: toast-out .2s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(-14px) scale(.98); }
}

/* 端末が動きを嫌う設定なら、動きと残量バーを止めて素直に出す。 */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
  .toast__bar { display: none; }
}

/* 狭幅：左右に余白を残してドックの上に重ねる。 */
@media (max-width: 560px) {
  .toast-stack {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 84px;
  }
}