/* ============================================================
   motze-trust.css — Motze 共用信任元件層 v0.1
   ------------------------------------------------------------
   跨 XHuman（人才側）與 Agent ID（企業側）渲染一致的信任元件。
   規則：
   - 全部 mz- namespace；只新增、永不覆寫宿主樣式。
   - 在宿主頁面 CSS 之後載入（同 agent-id ui-system.css 的疊加模式）。
   - Token 採 fallback 鏈橋接兩套宿主：
       XHuman:  --ink / --muted / --line / --paper-strong / --forest / --danger
       AgentID: --text-primary / --text-muted / --border / --surface-raised
                / --brand-secondary
     任一宿主缺席時退到寫死的安全值。
   - 紫（--mz-consent）只用於「同意正在發生」的元素。
   - 每個元件自帶 375px 行為（元件級 RWD）。
   ============================================================ */

:root {
  --mz-consent: #6F41B4;
  --mz-consent-soft: rgba(111, 65, 180, .08);
  --mz-ok: #0E7D5F;
  --mz-warn: #9A6E14;
  --mz-danger: var(--danger, #B4483A);
  --mz-ink: var(--ink, var(--text-primary, #182019));
  --mz-muted: var(--muted, var(--text-muted, #667069));
  --mz-line: var(--line-strong, var(--border, rgba(24, 53, 34, .3)));
  --mz-line-soft: var(--line, rgba(24, 53, 34, .15));
  --mz-surface: var(--paper-strong, var(--surface-raised, #fffef9));
  --mz-accent: var(--forest, var(--brand-secondary, #183522));
  --mz-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --mz-tap: 44px; /* 最小觸控目標（沿用 XHuman tap_target_hit_area 標準）*/
}

/* ---------- 1 · Provenance chain 光譜 ----------
   <nav class="mz-provenance" aria-label="來源信任檔位">
     <span class="mz-provenance__tier" data-tier="employer">雇主簽章</span>
     <span class="mz-provenance__tier is-active" data-tier="platform">平台署名</span>
     <span class="mz-provenance__tier" data-tier="observed">純觀測</span>
   </nav>
   規則：恰好一個 .is-active；observed 啟用時必須並列
   .mz-chip[data-kind=candidate-only]。永不渲染成單一布林徽章。 */
.mz-provenance { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mz-provenance__tier {
  padding: 4px 12px; border: 1px solid var(--mz-line); border-radius: 999px;
  font: 600 11px/1.5 var(--mz-mono); letter-spacing: .04em;
  color: var(--mz-muted); opacity: .45; background: transparent;
}
.mz-provenance__tier.is-active { opacity: 1; color: #fff; background: var(--mz-accent); border-color: var(--mz-accent); }
.mz-provenance__tier + .mz-provenance__tier::before { content: none; }
.mz-provenance__sep { color: var(--mz-line); font-size: 12px; }

/* ---------- 2 · 狀態 chip（合約狀態 verbatim）----------
   <span class="mz-chip" data-state="active">active</span>
   <span class="mz-chip mz-chip--clock">14 天後到期</span>
   <span class="mz-chip mz-chip--sla">等待回應 · 3 天</span> */
.mz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 1px solid var(--mz-line); border-radius: 999px;
  font: 500 11px/1.6 var(--mz-mono); color: var(--mz-muted);
  background: var(--mz-surface); white-space: nowrap;
}
.mz-chip[data-state="active"], .mz-chip[data-state="introduced"] { color: var(--mz-ok); border-color: var(--mz-ok); }
.mz-chip[data-state="paused"], .mz-chip[data-state="pending"] { color: var(--mz-warn); border-color: var(--mz-warn); }
.mz-chip[data-state="expired"], .mz-chip[data-state="withdrawn"],
.mz-chip[data-state="revoked"], .mz-chip[data-state="blocked"] { color: var(--mz-danger); border-color: var(--mz-danger); }
.mz-chip[data-state="disclosed"] { color: var(--mz-consent); border-color: var(--mz-consent); }
.mz-chip[data-kind="candidate-only"] { text-transform: none; font-style: normal; }
.mz-chip--clock::before { content: "◷"; font-size: 12px; }
.mz-chip--sla { border-style: dashed; }

/* ---------- 3 · 驗證徽章含時效 ----------
   <span class="mz-verify" data-fresh="true">
     <b>已驗證帳號控制</b><time>08-12 · Twin3</time>
   </span>
   規則：必含驗證者與日期；過期只降不升 → data-fresh="false" 變灰。 */
.mz-verify {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 4px 12px; border: 1px solid var(--mz-ok); border-radius: 8px;
  background: var(--mz-surface); font-size: 12px; color: var(--mz-ink);
}
.mz-verify b { font-weight: 700; color: var(--mz-ok); }
.mz-verify time { font: 500 10px/1.6 var(--mz-mono); color: var(--mz-muted); }
.mz-verify[data-fresh="false"] { border-color: var(--mz-line); filter: grayscale(1); opacity: .7; }
.mz-verify[data-fresh="false"]::after { content: "需重驗"; font: 600 10px/1.6 var(--mz-mono); color: var(--mz-warn); }

/* ---------- 4 · AI 參與揭露 chip ----------
   <button class="mz-ai" aria-expanded="false">
     AI 參與<span>理由由模型草擬 · 只讀你核可的欄位</span>
   </button> */
.mz-ai {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px;
  padding: 3px 12px; border: 1px dashed var(--mz-line); border-radius: 999px;
  background: transparent; font: 600 11px/1.6 var(--mz-mono); color: var(--mz-muted);
  cursor: pointer;
}
.mz-ai::before { content: "✳"; color: var(--mz-consent); }
.mz-ai span { font-weight: 400; }
.mz-ai:hover, .mz-ai:focus-visible { border-color: var(--mz-consent); color: var(--mz-ink); }

/* ---------- 5 · Receipt 卡（訂單確認心智模型）----------
   <article class="mz-receipt" data-status="active|revoked">
     <header><b>receipt #c41…</b><span class="mz-chip" data-state="disclosed">有效</span></header>
     <dl> <dt>揭露</dt><dd>姓名・email</dd> … </dl>
     <footer><button class="mz-receipt__revoke">撤回</button><a>簽章細節</a></footer>
   </article> */
.mz-receipt {
  border: 1.4px solid var(--mz-consent); border-radius: 12px;
  background: var(--mz-surface); padding: 16px 18px; max-width: 420px;
}
.mz-receipt header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mz-receipt header b { font: 700 12px/1.5 var(--mz-mono); color: var(--mz-consent); }
.mz-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: 12.5px; }
.mz-receipt dt { color: var(--mz-muted); }
.mz-receipt dd { margin: 0; color: var(--mz-ink); }
.mz-receipt footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--mz-line-soft); }
.mz-receipt__revoke {
  min-height: 32px; padding: 4px 14px; border: 1px solid var(--mz-danger); border-radius: 8px;
  background: transparent; color: var(--mz-danger); font-weight: 700; font-size: 12px; cursor: pointer;
}
.mz-receipt__revoke:hover, .mz-receipt__revoke:focus-visible { background: var(--mz-danger); color: #fff; }
.mz-receipt footer a { font: 600 11px/1.6 var(--mz-mono); color: var(--mz-muted); }
.mz-receipt[data-status="revoked"] { border-color: var(--mz-line); }
.mz-receipt[data-status="revoked"] dd { text-decoration: line-through; color: var(--mz-muted); }
.mz-receipt[data-status="revoked"] .mz-receipt__revoke { display: none; }

/* ---------- 6 · 同權重決策對（accept / decline）----------
   <div class="mz-actions">
     <button class="mz-actions__accept">接受</button>
     <button class="mz-actions__decline">婉拒</button>
   </div>
   規則：兩鍵永遠同尺寸；婉拒不進 overflow；同意時刻可加
   .mz-actions--consent 讓主鍵用紫。375px 下自動變上下疊、各占全寬。 */
.mz-actions { display: flex; gap: 10px; }
.mz-actions button {
  flex: 1 1 0; min-height: var(--mz-tap); padding: 10px 18px;
  border: 1px solid var(--mz-accent); font-weight: 700; font-size: 14px; cursor: pointer;
}
.mz-actions__accept { background: var(--mz-accent); color: #fff; }
.mz-actions__accept:hover:not(:disabled) { filter: brightness(1.15); }
.mz-actions__decline { background: transparent; color: var(--mz-accent); }
.mz-actions--consent .mz-actions__accept { background: var(--mz-consent); border-color: var(--mz-consent); }
.mz-actions--consent button { border-color: var(--mz-consent); }
.mz-actions--consent .mz-actions__decline { color: var(--mz-consent); }
@media (max-width: 480px) { .mz-actions { flex-direction: column; } }

/* ---------- 7 · Fail-closed 訊息（設計過的擋下狀態）----------
   <div class="mz-blocked" role="alert">
     <b>已擋下</b><p>「限 35 歲以下」— 就業服務法 §5 禁止項目。</p>
   </div> */
.mz-blocked {
  border-left: 3px solid var(--mz-danger); background: var(--mz-consent-soft);
  padding: 10px 14px; font-size: 12.5px; color: var(--mz-ink);
}
.mz-blocked b { color: var(--mz-danger); font: 700 11px/1.6 var(--mz-mono); letter-spacing: .06em; display: block; margin-bottom: 2px; }
.mz-blocked p { margin: 0; }

/* ---------- 8 · 行內隱私承諾 ----------
   <p class="mz-promise">🔒 只用於媒合過濾 — 企業永遠看不到這個數字</p> */
.mz-promise { margin: 6px 0 0; font: 500 11px/1.7 var(--mz-mono); color: var(--mz-muted); }

/* ---------- 全域可及性 ---------- */
.mz-provenance__tier:focus-visible, .mz-chip:focus-visible, .mz-ai:focus-visible,
.mz-actions button:focus-visible, .mz-receipt__revoke:focus-visible {
  outline: 3px solid var(--mz-consent-soft); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mz-actions button, .mz-ai, .mz-receipt__revoke { transition: none !important; }
}