/* 知らせ(トースト)の見た目(2026-10-14)。

   **JS と一緒に配るための file。** hn-ui.js を共通ヘッダから全画面へ
   配ったのに、見た目は design-system.css の中にあり、それを読んで
   いるのは 7 画面だけだった。結果、ほとんどの画面では知らせが
   「ページ最下部に素の文字が足される」だけになり、事実上見えなかった
   (2026-10-14、ユーザー報告「出ない」。実測で position:static /
   z-index:auto / 背景が透明 / 画面下端 759px に配置、と確認)。

   値は design-system.css の同じ規則と**同一**にしてある(あちらの
   token を解いた値)。7 画面では両方が読み込まれるが、同じ値なので
   見た目は変わらない。
       --hn-z-toast: 1300 / --hn-radius-full: 999px
       --hn-font-sm: 13px / --hn-shadow-lg: 0 16px 40px rgba(75,59,68,.16)

   **この file が無い画面に hn-ui.js を配ってはいけない。** 知らせが
   黙って見えなくなる。 */

.hn-toast-layer {
  position: fixed;
  left: 0;
  right: 0;
  /* 下のタブ(フッター)より上に出す。端末の下端の余白も足す。 */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1300;
  /* 置き場そのものは触れない。知らせ本体だけが触れる。 */
  pointer-events: none;
}

.hn-toast {
  pointer-events: auto;
  max-width: min(92vw, 380px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  /* **不透明にする。** 下に写真が来る画面(プロフィール)では、
     半透明だと絵が透けて文字が沈む(2026-10-14 に実機で確認)。 */
  background: #2d262b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  /* 写真の上でも縁が立つよう、落ち影を濃いめに。 */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(8px);
/* ★ `ease` が literal なのは**わざと**(2026-10-24)。語彙の `--hn-ease-sheet`
   `--hn-ease-press` は**どちらも `ease` とは別の曲線**なので、寄せると**動きが変わる**。
   しかも**長さは変わらないので、計測は通ってしまう** - 「token へ寄せただけ」に見えて、
   実は査読されていない設計変更になる。**語彙に足すかどうかはオーナー待ち**
   (棚卸し §4 の 3 行目)。**それまで触らないこと。** */
  transition: opacity var(--hn-dur-fade) ease, transform var(--hn-dur-fade) ease;
}
.hn-toast.hn-show { opacity: 1; transform: translateY(0); }
.hn-toast.hn-toast-success::before { content: "✓"; color: #7fe0ac; font-weight: 900; }
.hn-toast.hn-toast-error { background: #a83758; }
.hn-toast.hn-toast-error::before { content: "!"; font-weight: 900; }

/* 動きを控える設定: 浮き上がりはやめ、淡色の出入りは残す
   (消えるだけだと出たことに気づけない)。 */
@media (prefers-reduced-motion: reduce) {
  .hn-toast { transform: none; transition: opacity var(--hn-dur-fade) ease; }
  .hn-toast.hn-show { transform: none; }
}