/* =========================================================
   通通訂 home-c 設計升級 — home-c-fx.css
   與 A/B 不同的「活」法:
   · 七狀態 → 直式生命週期時間軸（捲動逐格點亮、沉穩編輯感）
   · 角色式通知 → 事件 × 角色 通知矩陣（逐列點亮、教學式）
   沿用 token；尊重 prefers-reduced-motion。
   ========================================================= */

/* ---- 直式生命週期時間軸 ---- */
.vtl{ list-style:none; margin:0; padding:0; position:relative; max-width:700px; }
.vtl::before{ content:''; position:absolute; left:11px; top:6px; bottom:18px; width:2px; background:var(--border-1); }
.vtl-fill{ position:absolute; left:11px; top:6px; width:2px; background:var(--accent); height:0; transition:height .6s ease; z-index:1; }
.vtl-row{ position:relative; padding:0 0 28px 42px; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.vtl-row:last-child{ padding-bottom:0; }
.vtl-row.in{ opacity:1; transform:none; }
.vtl-dot{ position:absolute; left:3px; top:1px; width:18px; height:18px; border-radius:50%; background:var(--bg-2); border:2px solid var(--border-2); z-index:2; transition:background .35s ease, border-color .35s ease; }
.vtl-c b{ font-size:16px; font-weight:600; color:var(--text-1); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.vtl-c b i{ font-style:normal; font-size:10px; font-weight:600; color:var(--text-4); letter-spacing:.05em; border:1px solid var(--border-1); border-radius:var(--r-pill); padding:2px 9px; }
.vtl-c p{ font-size:13.5px; color:var(--text-2); line-height:1.62; margin:5px 0 0; }
.vtl-row.in[data-key="wait"] .vtl-dot{ border-color:var(--status-info); }
.vtl-row.in[data-key="ok"] .vtl-dot,
.vtl-row.in[data-key="prep"] .vtl-dot,
.vtl-row.in[data-key="ship"] .vtl-dot{ background:var(--accent); border-color:var(--accent); }
.vtl-row.in[data-key="done"] .vtl-dot{ background:var(--status-success); border-color:var(--status-success); }
/* 例外分流 */
.vtl-row.ex{ padding-left:66px; }
.vtl-row.ex::before{ content:''; position:absolute; left:11px; top:-8px; width:36px; height:20px;
  border-left:2px dashed var(--border-2); border-bottom:2px dashed var(--border-2); border-radius:0 0 0 9px; }
.vtl-row.ex .vtl-dot{ left:29px; }
.vtl-row.in.ex.abn .vtl-dot{ background:var(--status-warning); border-color:var(--status-warning); }
.vtl-row.in.ex.cancel .vtl-dot{ background:var(--bg-3); border-color:var(--border-2); }
.vtl-row.ex.cancel .vtl-c b{ color:var(--text-3); }

/* 事件 × 角色 通知矩陣 → 已改為共用「手機跳通知」+ .nfeed 對照清單 (見 phone-notify.css) */

@media (prefers-reduced-motion: reduce){ .vtl-row{ opacity:1 !important; transform:none !important; } }