/* ============================================================
   Applied Example — 記録フロー（部品を繋いだ適用例）
   片手・最小タップ・回復路・再利用動線（前回を再利用）を1画面で示す。
   これは「図（プロダクト）」なので角丸を持つ。版面（地）とは文法が異なる。
   既存部品（chip / tf / stepper / toggle / btn / card / snackbar）を組むだけ。
   ============================================================ */

.ex-screen {
  width: 344px; max-width: 100%;
  background: var(--paper); border: 1px solid var(--page-line);
  border-radius: var(--radius-surface); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 18px;
  transition: background var(--dur-mid), border-color var(--dur-mid);
}
.ex-screen .sighead { text-align: left; }
.ex-screen .sighead .breath { margin: 9px 0 0; }
.ex-screen .sighead .sub { margin-top: 7px; }

.ex-row { display: flex; flex-direction: column; gap: 9px; }
.ex-row .xl { font-size: 11px; letter-spacing: .14em; color: var(--ash); font-weight: 700; }
.ex-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ex-inline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ex-inline .xl { margin: 0; }

/* 再利用動線（スマートデフォルト）— 一級市民として上部に置く */
.ex-reuse { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ash); }
.ex-reuse button { color: var(--cta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; letter-spacing: .02em; }

/* 保存済みの「最近の記録」— 再会の瞬間に最も美しく */
.ex-recent { border-top: 1px solid var(--page-line); padding-top: 16px; }
.ex-recent .rh { font-size: 11px; letter-spacing: .14em; color: var(--ash); font-weight: 700; margin-bottom: 10px; }
.ex-list { display: flex; flex-direction: column; gap: 2px; }
.ex-list:empty::after { content: attr(data-empty); font-size: 12.5px; color: var(--ash); }

/* 新規保存カードがやわらかく現れる */
.ex-list .card.pop { animation: ex-pop var(--dur-mid) var(--ease); }
@keyframes ex-pop { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }