/* ============================================================
   Action Flow — 適用例：Card＋Avatar の一覧 → Bottom Sheet → Dialog
   既存部品をそのまま組む：記録カード（Avatar付き）の ⋯ で操作シート（.framed）を
   下から出し、「削除」で破壊的確認ダイアログ（.dialog）。確認で消し、Snackbar で取り消す。
   オーバーレイは枠内に収める擬似ビューポート（Drawer と同じ作法）。配線は js/catalog.js。
   ============================================================ */

.flow-frame {
  position: relative; overflow: hidden;
  width: 344px; max-width: 100%; height: 440px;
  background: var(--bg-raised); border: 1px solid var(--bg-line);
  border-radius: var(--radius-surface);
  display: flex; flex-direction: column;
}
.flow-head { padding: 18px 20px 6px; }
.flow-list { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.flow-list .card { width: 100%; }
.flow-list .card > span:nth-child(2) { flex: 1; min-width: 0; }
.flow-list .card.removing { opacity: 0; transform: translateX(12px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }

.flow-more {
  margin-left: auto; flex: none; align-self: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--text-muted);
  font-size: 18px; line-height: 1; letter-spacing: .04em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.flow-more:hover, .flow-more:focus-visible { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }

/* scrim（シート/ダイアログ共通） */
.flow-scrim {
  position: absolute; inset: 0; z-index: 5;
  background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-mid) var(--ease);
}
.flow-frame.sheet-open .flow-scrim, .flow-frame.dialog-open .flow-scrim { opacity: 1; pointer-events: auto; }

/* Bottom Sheet（既存 .framed を下からせり上げる） */
.flow-sheet.framed {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; z-index: 6;
  border-radius: var(--radius-surface) var(--radius-surface) 0 0; border-bottom: none;
  box-shadow: var(--shadow-float);
  transform: translateY(101%); transition: transform var(--dur-mid) var(--ease);
}
.flow-frame.sheet-open .flow-sheet.framed { transform: translateY(0); }
.flow-sheet .fbody .opt { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.flow-sheet .fbody .opt svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.flow-sheet .fbody .opt.danger { color: var(--err); }

/* Dialog（既存 .dialog を中央に） */
.flow-dialog-wrap {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-mid) var(--ease);
}
.flow-frame.dialog-open .flow-dialog-wrap { opacity: 1; pointer-events: auto; }
.flow-dialog-wrap .dialog { width: 100%; transform: scale(.96); transition: transform var(--dur-mid) var(--ease); }
.flow-frame.dialog-open .flow-dialog-wrap .dialog { transform: scale(1); }