/* =============================================================================
 * tl-empty-state.css — TrueLink App 五 tab 共用「空狀態」元件（單一來源）
 * Issue #1285 · 建立 2026-06-04 by Claude · 父 issue #1234（加強 App 設計）
 *
 * 為何：名片 / 社群 / 大廳 / 數據 / 我的 五個 tab 各自有「空 / 未啟用 / 未登入」
 *   狀態，過去各頁手刻、視覺不一致。本元件把空狀態收斂成同一視覺語言：
 *   FA/SVG 圖示圈 + 標題 + 一句說明 + 明確「下一步」CTA（tap target ≥ 44px）。
 *
 * 依賴：tl-tokens.css（用 Semantic / Component 層 var(--tl-*)）。
 *   未載 tokens 的頁也有 fallback 值，不會整段崩掉。
 *
 * 用法（HTML）：
 *   <div class="tl-empty" role="status">
 *     <div class="tl-empty__icon"><i class="fas fa-id-card" aria-hidden="true"></i></div>
 *     <h2 class="tl-empty__title">標題</h2>
 *     <p class="tl-empty__msg">一句誠實說明（不造假數據）。</p>
 *     <div class="tl-empty__actions">
 *       <a class="tl-empty__cta" href="...">主要 CTA</a>
 *       <a class="tl-empty__cta tl-empty__cta--ghost" href="...">次要</a>
 *     </div>
 *   </div>
 *
 * 用法（JS）：見 tl-empty-state.js（含五 tab 誠實預設文案）。
 * ============================================================================= */

.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tl-space-3, 0.75rem);
  /* 同間距：上下用 page-y、左右留白；窄螢幕自動置中 */
  padding: var(--tl-space-12, 3rem) var(--tl-space-5, 1.25rem);
  max-width: 32rem;
  margin-inline: auto;
  color: var(--tl-text-muted, #94a3b8);
}

/* 圓形圖示圈：結構圖示一律 FA/SVG（CLAUDE.md §圖示標準），禁 emoji */
.tl-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--tl-radius-full, 9999px);
  background: var(--tl-bg-elevated-2, #1e293b);
  border: 1px solid var(--tl-border-subtle, #1e293b);
  color: var(--tl-primary, #38bdf8);
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: var(--tl-space-1, 0.25rem);
}

.tl-empty__icon i,
.tl-empty__icon svg {
  font-size: inherit;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 同字級：標題用 token text-xl、說明 text-sm */
.tl-empty__title {
  margin: 0;
  font-size: var(--tl-text-xl, 1.25rem);
  font-weight: var(--tl-weight-bold, 800);
  line-height: var(--tl-leading-snug, 1.35);
  color: var(--tl-text, #f8fafc);
}

.tl-empty__msg {
  margin: 0;
  font-size: var(--tl-text-sm, 0.875rem);
  line-height: var(--tl-leading-relaxed, 1.7);
  color: var(--tl-text-muted, #94a3b8);
  max-width: 28rem;
}

.tl-empty__msg code {
  font-family: var(--tl-font-mono, monospace);
  font-size: 0.85em;
  color: var(--tl-primary, #38bdf8);
  background: var(--tl-bg-inset, #050b14);
  padding: 0.1em 0.4em;
  border-radius: var(--tl-radius-xs, 4px);
}

.tl-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-3, 0.75rem);
  justify-content: center;
  margin-top: var(--tl-space-2, 0.5rem);
}

/* 同 CTA 樣式：主要 CTA = primary 實心，min-height 44px（行動端 tap target） */
.tl-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tl-space-2, 0.5rem);
  min-height: 44px;
  min-width: 44px;
  padding: var(--tl-space-2, 0.5rem) var(--tl-space-5, 1.25rem);
  border-radius: var(--tl-radius-control, 8px);
  border: 1px solid transparent;
  background: var(--tl-primary, #38bdf8);
  color: var(--tl-primary-contrast, #020617);
  font-size: var(--tl-text-sm, 0.875rem);
  font-weight: var(--tl-weight-bold, 800);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tl-duration-normal, 200ms) var(--tl-ease-standard, ease),
              transform var(--tl-duration-fast, 150ms) var(--tl-ease-standard, ease);
}

.tl-empty__cta:hover {
  background: var(--tl-primary-hover, #7dd3fc);
}

.tl-empty__cta:active {
  transform: translateY(1px);
}

.tl-empty__cta:focus-visible {
  outline: var(--tl-ring-width, 2px) solid var(--tl-ring, #38bdf8);
  outline-offset: var(--tl-ring-offset, 2px);
}

/* 次要 CTA = 透明描邊（同尺寸、同 tap target） */
.tl-empty__cta--ghost {
  background: transparent;
  border-color: var(--tl-border-strong, #475569);
  color: var(--tl-text, #f8fafc);
}

.tl-empty__cta--ghost:hover {
  background: var(--tl-bg-elevated-2, #1e293b);
}

/* compact 變體：嵌在卡片 / tab 容器內的小空狀態（如標籤無貼文） */
.tl-empty--compact {
  padding: var(--tl-space-8, 2rem) var(--tl-space-4, 1rem);
}

.tl-empty--compact .tl-empty__icon {
  width: 56px;
  height: 56px;
  font-size: 1.35rem;
}

.tl-empty--compact .tl-empty__title {
  font-size: var(--tl-text-lg, 1.125rem);
}

/* boxed 變體：自帶卡片底 + 描邊（獨立區塊用） */
.tl-empty--boxed {
  background: var(--tl-card-bg, #0f172a);
  border: 1px solid var(--tl-card-border, #334155);
  border-radius: var(--tl-radius-card, 12px);
}

@media (max-width: 480px) {
  .tl-empty {
    padding: var(--tl-space-10, 2.5rem) var(--tl-space-4, 1rem);
  }
  /* 手機：CTA 撐滿、堆疊，維持 ≥44px tap target */
  .tl-empty__actions {
    width: 100%;
    flex-direction: column;
  }
  .tl-empty__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-empty__cta {
    transition: none;
  }
  .tl-empty__cta:active {
    transform: none;
  }
}