/* =========================================================================
   tl-skeleton.css — 全站共用「載入骨架 + 空狀態」標準元件（#852）
   建立：2026-06-01 by Claude ｜ 狀態：Active

   用途：>300ms 的非同步載入用 shimmer 骨架；無資料時用「訊息 + 下一步」空狀態。
   設計：主題無關（半透明灰，深色/淺色底皆可用）、尊重 prefers-reduced-motion、
         手機自動單欄。class 名沿用 PR #921 reference（tools/index.html），
         既有 markup 可直接改用本檔、不必改結構。

   引用：<link rel="stylesheet" href="/global/tl-skeleton.css">
   （若該頁用設計 token，建議先載 /global/tl-tokens.css；本檔不依賴 token、有 fallback。）

   ── 骨架 markup 範例 ──────────────────────────────────────────────
   <div class="tl-skel" id="tl-skel" aria-hidden="true" aria-busy="true">
     <div class="tl-skel-head">
       <div class="tl-skel-bar" style="height:38px;max-width:380px;"></div>
       <div class="tl-skel-bar" style="height:18px;max-width:280px;margin-top:14px;"></div>
     </div>
     <div class="tl-skel-grid">
       <div class="tl-skel-card tl-skel-hero"></div>
       <div class="tl-skel-card"></div><div class="tl-skel-card"></div>
     </div>
   </div>
   內容就緒後：document.getElementById('tl-skel').style.display='none';

   ── 空狀態 markup 範例 ────────────────────────────────────────────
   <div class="tl-empty">
     <div class="tl-empty-icon"><i class="fas fa-inbox"></i></div>
     <h3 class="tl-empty-title">目前沒有資料</h3>
     <p class="tl-empty-desc">這裡會顯示 XXX。一旦有資料就會自動出現。</p>
     <p class="tl-empty-hint"><i class="fas fa-flag"></i> 下一步：先做 OOO。</p>
     <a class="tl-empty-action" href="...">前往設定</a>
   </div>
   ========================================================================= */

:root {
  --tl-skel-base: rgba(148, 163, 184, 0.14);   /* 骨架底色（半透明 slate，深淺底通用）*/
  --tl-skel-shine: rgba(148, 163, 184, 0.30);  /* shimmer 高光 */
  --tl-skel-radius: 12px;
  --tl-skel-speed: 1.4s;
}

/* ── 骨架基元 ────────────────────────────────────────────────── */
.tl-skel { max-width: 1200px; margin: 0 auto; padding: 40px 20px 100px; }
.tl-skel-head { text-align: center; margin-bottom: 50px; }
.tl-skel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }

.tl-skel-bar,
.tl-skel-card,
.tl-skel-line,
.tl-skel-circle {
  background-color: var(--tl-skel-base);
  background-image: linear-gradient(100deg, transparent 30%, var(--tl-skel-shine) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: tlSkelShimmer var(--tl-skel-speed) ease-in-out infinite;
}

.tl-skel-bar { height: 16px; border-radius: 8px; margin: 0 auto; }
.tl-skel-line { height: 14px; border-radius: 7px; margin: 0 0 10px; }
.tl-skel-line:last-child { margin-bottom: 0; }
.tl-skel-line.is-short { width: 60%; }
.tl-skel-line.is-shorter { width: 40%; }
.tl-skel-card { height: 210px; border-radius: 20px; }
.tl-skel-hero { grid-column: 1 / -1; height: 150px; }
.tl-skel-circle { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }

/* 列型骨架（頭像 + 兩行文字），給清單/表格列用 */
.tl-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.tl-skel-row-body { flex: 1 1 auto; min-width: 0; }

@keyframes tlSkelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 480px) {
  .tl-skel { padding: 28px 16px 80px; }
  .tl-skel-grid { grid-template-columns: 1fr; gap: 18px; }
  .tl-skel-card { height: 170px; }
}

/* 無障礙：關閉動態時靜止（仍可見骨架輪廓）*/
@media (prefers-reduced-motion: reduce) {
  .tl-skel-bar,
  .tl-skel-card,
  .tl-skel-line,
  .tl-skel-circle { animation: none; }
}

/* ── 空狀態（訊息 + 下一步）─────────────────────────────────── */
.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
  max-width: 460px;
  margin: 0 auto;
}

.tl-empty-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--tl-skel-base);
  color: var(--tl-text-muted, #94A3B8);
  font-size: 1.5rem;
}

.tl-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tl-text-main, inherit);
}

.tl-empty-desc {
  margin: 2px 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tl-text-muted, #94A3B8);
}

/* 「下一步」提示（用品牌主色提醒可採取的行動）*/
.tl-empty-hint {
  margin: 10px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--tl-primary, #0EA5E9);
  opacity: 0.92;
}

.tl-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--tl-border, rgba(148, 163, 184, 0.3));
  background: var(--tl-card, transparent);
  color: var(--tl-text-main, inherit);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tl-empty-action:hover {
  transform: translateY(-1px);
  border-color: var(--tl-primary, #0EA5E9);
}

/* error 變體：把空狀態當錯誤狀態用（換色 + 重試）*/
.tl-empty.is-error .tl-empty-icon { color: var(--tl-danger, #EF4444); }
.tl-empty.is-error .tl-empty-hint { color: var(--tl-danger, #EF4444); }

@media (prefers-reduced-motion: reduce) {
  .tl-empty-action:hover { transform: none; }
}