/* =============================================================================
 * tl-member.css — 會員中心（/member/*）共用元件層（收斂「各頁各一套」）
 * 建立 2026-07-05 by Claude · Stage 2 member-area-overhaul
 *
 * 為什麼建這個檔（member 設計稽核 ma_design_audit.md 結論）：
 *   五個 member 子頁（index / wallet / my-articles / onboarding / evidence-vault）
 *   各自硬編一套 setting-row / ev-row / status pill / 按鈕，且 wallet 是唯一亮底頁＝
 *   最大 CI 破口。這裡把「跨 member 頁重用」的視覺原語收斂成 token 化 class，全部走
 *   tl-tokens.css 的 --tl-* / --tl-app-*（禁硬編 hex）→ 全 member 頁同色、同圓角、同節奏、全深色。
 *
 * 依賴：先載 /global/tl-tokens.css（--tl-* 單一色彩來源）。每個 var() 帶 fallback，
 *   未載 token 也能合理降級，但 member 頁一律應先 link tl-tokens.css。
 *
 * 元件：
 *   .tl-member-page  — 頁面容器（統一 max-width / padding，收斂各頁 860/980/1180 亂數）
 *   .tl-member-head  — 頁首標題列（沿用 tl-cockpit .tlc-section-* 語彙，這裡補 member 版節奏）
 *   .tl-member-card  — 表面卡（統一圓角 --tl-radius-xl / 內距 / 邊框，收斂 8 vs 16px）
 *   .tl-list-row     — 設定列 / 清單列（icon-chip + body + chevron，含 hover）
 *   .tl-status-pill  — 狀態徽章基底 + --ok / --pending / --rejected / --neutral 語意變體
 *   .tl-app-btn-ghost / --danger — 次要按鈕（主 CTA 用 tl-tokens 的 .tl-app-btn-primary）
 * ============================================================================= */

/* ── 頁面容器：統一寬度與內距（收斂各頁不同 max-width）─────────────────── */
.tl-member-page {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: var(--tl-space-6, 1.5rem) var(--tl-space-5, 1.25rem) var(--tl-space-24, 6rem);
  min-width: 0; /* flex-body min-width trap 防溢出 */
}
.tl-member-page--wide { max-width: 1180px; }
.tl-member-page--narrow { max-width: 860px; }

/* ── 頁首標題列 ───────────────────────────────────────────────────── */
.tl-member-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--tl-space-3, 0.75rem); flex-wrap: wrap;
  margin-bottom: var(--tl-space-5, 1.25rem);
}
.tl-member-title {
  margin: 0; display: flex; align-items: center; gap: var(--tl-space-3, 0.75rem);
  font-size: var(--tl-text-3xl, 1.875rem); font-weight: var(--tl-weight-black, 900);
  color: var(--tl-app-text, #f8fafc); line-height: var(--tl-leading-tight, 1.2);
  letter-spacing: -0.02em;
}
.tl-member-title i { color: var(--tl-app-primary, #38bdf8); font-size: 0.9em; }
.tl-member-sub {
  margin: var(--tl-space-2, 0.5rem) 0 0; color: var(--tl-app-text-muted, #94a3b8);
  font-size: var(--tl-text-sm, 0.875rem); line-height: var(--tl-leading-relaxed, 1.7);
}

/* ── 表面卡（統一圓角 16px / 邊框 / 陰影）──────────────────────────── */
.tl-member-card {
  background: var(--tl-app-surface, #0f172a);
  border: 1px solid var(--tl-app-border, #334155);
  border-radius: var(--tl-radius-xl, 16px);
  box-shadow: var(--tl-app-shadow-card, 0 4px 12px rgba(2,6,23,.45));
  padding: var(--tl-space-6, 1.5rem);
  margin-bottom: var(--tl-space-5, 1.25rem);
}
.tl-member-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tl-space-3, 0.75rem); flex-wrap: wrap;
  margin-bottom: var(--tl-space-4, 1rem);
}
.tl-member-card__title {
  margin: 0; display: inline-flex; align-items: center; gap: var(--tl-space-2, 0.5rem);
  font-size: var(--tl-text-lg, 1.125rem); font-weight: var(--tl-weight-bold, 800);
  color: var(--tl-app-text, #f8fafc);
}
.tl-member-card__title i { color: var(--tl-app-primary, #38bdf8); }

/* ── 群組標題（設定分組）──────────────────────────────────────────── */
.tl-list-group-title {
  font-size: var(--tl-text-xs, 0.75rem); font-weight: var(--tl-weight-bold, 800);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tl-text-subtle, #64748b); margin: 0 0 var(--tl-space-2, 0.5rem) 4px;
}
.tl-list-group-title.is-danger { color: var(--tl-red-400, #f87171); }

/* ── 清單容器 ─────────────────────────────────────────────────────── */
.tl-list {
  background: var(--tl-app-surface, #0f172a);
  border: 1px solid var(--tl-app-border, #334155);
  border-radius: var(--tl-radius-xl, 16px);
  overflow: hidden;
}

/* ── 共用清單列（設定列 / 證據列 / 一般列）─────────────────────────── */
.tl-list-row {
  display: flex; align-items: center; gap: var(--tl-space-3, 0.75rem);
  width: 100%; min-height: 56px;
  padding: var(--tl-space-3, 0.75rem) var(--tl-space-4, 1rem);
  color: var(--tl-app-text, #e2e8f0); text-decoration: none;
  background: transparent; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--tl-app-border, #334155);
  transition: background var(--tl-duration-fast, 150ms) var(--tl-ease-standard, ease);
}
.tl-list > .tl-list-row:first-child { border-top: 0; }
.tl-list-row:hover, .tl-list-row:focus-visible {
  background: color-mix(in srgb, var(--tl-app-surface-2, #1e293b) 60%, transparent);
  outline: none;
}
.tl-list-row:focus-visible {
  outline: var(--tl-ring-width, 2px) solid var(--tl-ring, #38bdf8);
  outline-offset: -2px;
}
/* 圖示膠囊（34px，對齊稽核建議）*/
.tl-list-row__ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--tl-radius-md, 8px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: color-mix(in srgb, var(--tl-app-primary, #38bdf8) 12%, transparent);
  color: var(--tl-app-primary, #38bdf8);
}
.tl-list-row.is-danger .tl-list-row__ico {
  background: color-mix(in srgb, var(--tl-danger, #ef4444) 12%, transparent);
  color: var(--tl-red-400, #f87171);
}
.tl-list-row__body { flex: 1; min-width: 0; }
.tl-list-row__label { font-weight: var(--tl-weight-medium, 600); font-size: var(--tl-text-sm, 0.9rem); color: var(--tl-app-text, #f8fafc); }
.tl-list-row.is-danger .tl-list-row__label { color: var(--tl-red-300, #fca5a5); }
.tl-list-row__sub { font-size: var(--tl-text-xs, 0.75rem); color: var(--tl-text-subtle, #64748b); margin-top: 2px; line-height: var(--tl-leading-snug, 1.35); }
.tl-list-row__meta { flex-shrink: 0; text-align: right; color: var(--tl-app-text-muted, #94a3b8); font-size: var(--tl-text-xs, 0.75rem); }
.tl-list-row__chevron { color: var(--tl-slate-600, #475569); font-size: 13px; flex-shrink: 0; }

/* ── 狀態徽章（收斂 my-articles / evidence / wallet 各自硬編的 pill）──
 * 綁語意 token（success / warning / danger / 中性）。與品牌 accent 分離。 */
.tl-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--tl-radius-full, 999px);
  padding: 3px 10px; font-size: var(--tl-text-xs, 0.75rem);
  font-weight: var(--tl-weight-bold, 800); white-space: nowrap;
  border: 1px solid; line-height: 1.4;
}
.tl-status-pill--ok {
  color: var(--tl-emerald-400, #34d399);
  background: color-mix(in srgb, var(--tl-success, #10b981) 12%, transparent);
  border-color: color-mix(in srgb, var(--tl-success, #10b981) 40%, transparent);
}
.tl-status-pill--pending {
  color: var(--tl-amber-300, #fcd34d);
  background: color-mix(in srgb, var(--tl-warning, #f59e0b) 12%, transparent);
  border-color: color-mix(in srgb, var(--tl-warning, #f59e0b) 40%, transparent);
}
.tl-status-pill--rejected {
  color: var(--tl-red-300, #fca5a5);
  background: color-mix(in srgb, var(--tl-danger, #ef4444) 12%, transparent);
  border-color: color-mix(in srgb, var(--tl-danger, #ef4444) 40%, transparent);
}
.tl-status-pill--neutral {
  color: var(--tl-app-text-muted, #94a3b8);
  background: color-mix(in srgb, var(--tl-app-surface-2, #1e293b) 60%, transparent);
  border-color: var(--tl-app-border, #334155);
}
.tl-status-pill--gold {
  color: var(--tl-gold-strong, #f8c44f);
  background: color-mix(in srgb, var(--tl-gold, #d4af37) 14%, transparent);
  border-color: color-mix(in srgb, var(--tl-gold, #d4af37) 45%, transparent);
}

/* ── 次要按鈕（主 CTA 用 tl-tokens 的 .tl-app-btn-primary；這裡補 ghost / danger）── */
.tl-app-btn-ghost, .tl-app-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2, 0.5rem);
  min-height: var(--tl-btn-min-h, 44px);
  padding: var(--tl-btn-pad-y, 0.5rem) var(--tl-btn-pad-x, 1rem);
  font: inherit; font-weight: var(--tl-weight-bold, 800); cursor: pointer; text-decoration: none;
  border-radius: var(--tl-app-radius-control, 8px);
  transition: background var(--tl-duration-normal, 200ms) var(--tl-ease-standard, ease),
              border-color var(--tl-duration-normal, 200ms) var(--tl-ease-standard, ease);
}
.tl-app-btn-ghost {
  background: color-mix(in srgb, var(--tl-app-surface-2, #1e293b) 55%, transparent);
  color: var(--tl-app-text, #e2e8f0);
  border: 1px solid var(--tl-app-border, #334155);
}
.tl-app-btn-ghost:hover { background: var(--tl-app-surface-2, #1e293b); border-color: var(--tl-app-border-strong, #475569); }
.tl-app-btn-ghost:focus-visible, .tl-app-btn-danger:focus-visible {
  outline: var(--tl-ring-width, 2px) solid var(--tl-ring, #38bdf8); outline-offset: var(--tl-ring-offset, 2px);
}
.tl-app-btn-danger {
  background: color-mix(in srgb, var(--tl-danger, #ef4444) 12%, transparent);
  color: var(--tl-red-300, #fca5a5);
  border: 1px solid color-mix(in srgb, var(--tl-danger, #ef4444) 40%, transparent);
}
.tl-app-btn-danger:hover { background: color-mix(in srgb, var(--tl-danger, #ef4444) 20%, transparent); }
.tl-app-btn-primary:disabled, .tl-app-btn-ghost:disabled, .tl-app-btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 麵包屑 / 返回列 ─────────────────────────────────────────────── */
.tl-member-crumbs { font-size: var(--tl-text-xs, 0.75rem); color: var(--tl-text-subtle, #64748b); margin-bottom: var(--tl-space-3, 0.75rem); }
.tl-member-crumbs a { color: var(--tl-app-text-muted, #94a3b8); text-decoration: none; }
.tl-member-crumbs a:hover { color: var(--tl-app-primary, #38bdf8); }

/* ── RWD @375（container-query 優先；member PWA shell 內容區可能比 viewport 窄）── */
.tl-member-page { container-type: inline-size; }
@container (max-width: 420px) {
  .tl-member-title { font-size: var(--tl-text-2xl, 1.5rem); }
  .tl-list-row__meta { text-align: left; }
}
@media (max-width: 420px) {
  .tl-member-title { font-size: var(--tl-text-2xl, 1.5rem); }
}