/* ============================================================================
   v1.34.0 儀錶板設計系統（八頁共用）——home / cost / channels / recipients /
   quality / sources / health / sla 一起引用這一份。

   問題：八頁各自 inline 樣式、各自配色（同一個「失敗紅」有三種寫法），業主 0817
   評「配色、配置、分佈、視覺化太陽春」。
   做法：把顏色收斂成一套設計代幣（主色／強調／狀態色／文字三階／表面兩階＋一組
   通過 dataviz 六檢驗的分類系列色），元件（磁貼、表格、徽章、量條、圖例、
   tooltip）只寫一次。
   驗證：node scripts/validate_palette.js "#3987e5,#d95926,#199e70,#c98500,
   #d55181,#008300,#9085e9,#e66767" --mode dark --surface "#111a2b" → ALL PASS；
   文字與狀態代幣對兩階表面 WCAG 對比全數 ≥4.5:1（muted 一階為此從 #6b7c93 調亮
   成 #78889f）。

   注意：此檔只做視覺。停更判斷（markStale）依 v1.27 規則必須內嵌在各頁，
   不得移進外部檔案——外連失敗就沒有警告。
   ========================================================================== */

:root{
  /* 表面兩階 */
  --bg:#0b1220;            /* 頁面底 */
  --surface:#111a2b;       /* 卡片／圖表表面 */
  --surface-2:#0d1526;     /* 內凹（表頭、量條軌、tooltip 底） */
  --line:#1d2a40;          /* 卡片邊 hairline */
  --grid:#18243a;          /* 圖表格線（比表面亮一階、實線） */
  /* 文字三階 */
  --text-1:#e8eef7;
  --text-2:#9fb3cc;
  --text-3:#78889f;
  /* 主色（視覺統一：導覽、連結、區塊記號、焦點） */
  --brand:#7fb0ff;
  --brand-ink:#0b1220;
  /* 狀態色（專用——只表達 好/警/壞/沉默/停用，不得當系列色；一律配字或圖示） */
  --ok:#8be08b;   --ok-dim:#0f2016;
  --warn:#ffd166; --warn-dim:#221c0e;
  --bad:#ff6b6b;  --bad-dim:#231016;
  --notice:#ffa94d; --notice-dim:#241708;
  --off:#3a475c;
  /* 分類系列色（僅圖表標記用；固定順序、不循環；validate_palette PASS on --surface） */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --other:#55647c;         /* 「其他」摺疊桶／去強調 */
  --sans:system-ui,-apple-system,"Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text-1);font-family:var(--sans);
  margin:0 auto;padding:20px 18px 36px;max-width:1020px;line-height:1.6;
  font-size:14px;
}
a{color:var(--brand)}

/* ── 頁首 ─────────────────────────────────────────────────────────────── */
h1{font-size:19px;font-weight:700;color:var(--text-1);margin:0 0 2px;letter-spacing:.01em}
.sub{color:var(--text-3);font-size:12px;margin-bottom:14px}
h2{
  font-size:13px;font-weight:700;color:var(--text-1);
  margin:26px 0 8px;letter-spacing:.02em;
}
h2::before{
  content:"";display:inline-block;width:4px;height:13px;border-radius:2px;
  background:var(--brand);margin-right:8px;vertical-align:-2px;
}

/* ── 導覽列 ───────────────────────────────────────────────────────────── */
.tn{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tn a{
  color:var(--text-2);text-decoration:none;font-size:12px;padding:4px 12px;
  border:1px solid var(--line);border-radius:15px;background:var(--surface);
}
.tn a:hover{border-color:var(--brand);color:var(--brand)}
.tn a.cur{color:var(--brand-ink);background:var(--brand);border-color:var(--brand);font-weight:700}

/* ── 停更橫幅（顯示與否由各頁內嵌 markStale 控制） ─────────────────────── */
#stale{
  display:none;background:var(--bad-dim);border:1px solid var(--bad);
  border-radius:10px;padding:10px 14px;margin-bottom:12px;
  font-size:13px;color:#ff9d9d;line-height:1.55;
}

/* ── 卡片／磁貼 ───────────────────────────────────────────────────────── */
.card,.tile,.st{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.tile{display:block;padding:12px 14px;text-decoration:none;color:var(--text-1)}
a.tile{transition:border-color .12s}
a.tile:hover{border-color:var(--brand)}
.tile .v{font-size:23px;font-weight:600;line-height:1.25}
.tile .t{font-size:11.5px;color:var(--text-2);margin-top:1px}
.tile .s{font-size:11px;color:var(--text-3)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.silent{color:var(--notice)}.dim{color:var(--text-3)}.off{color:var(--text-3)}

/* ── 表格（斑馬紋＋數字右對齊） ──────────────────────────────────────── */
.tblcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 12px 8px;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{
  color:var(--text-3);font-weight:600;font-size:11px;text-align:left;
  padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:6px 8px;border-bottom:1px solid var(--grid);text-align:left}
tbody tr:nth-child(even) td,table tr:nth-child(even) td{background:rgba(127,176,255,.035)}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── 徽章（狀態色一律伴隨文字，圖示由內容帶入） ─────────────────────── */
.bdg{font-size:10.5px;border-radius:9px;padding:1px 8px;font-weight:700;white-space:nowrap}
.bdg.b-ok{background:var(--ok-dim);border:1px solid var(--ok);color:var(--ok)}
.bdg.b-warn{background:var(--warn-dim);border:1px solid var(--warn);color:var(--warn)}
.bdg.b-bad{background:var(--bad-dim);border:1px solid var(--bad);color:var(--bad)}
.bdg.b-notice{background:var(--notice-dim);border:1px solid var(--notice);color:var(--notice)}
.bdg.b-off{background:var(--surface-2);border:1px solid var(--off);color:var(--text-3)}
.bdg.b-brand{background:#12233c;border:1px solid var(--brand);color:var(--brand)}

/* ── 篩選 chips＋搜尋框 ───────────────────────────────────────────────── */
.bar{margin:0 0 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:3px 12px;font-size:12px;color:var(--text-2);cursor:pointer;user-select:none;
}
.chip:hover{border-color:var(--brand)}
.chip.on{border-color:var(--brand);color:var(--brand-ink);background:var(--brand);font-weight:700}
input.q{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:3px 12px;font-size:12px;color:var(--text-1);outline:none;width:170px;
}
input.q:focus{border-color:var(--brand)}

/* ── 量條（軌＝同色系暗一階，填色帶狀態） ────────────────────────────── */
.meter{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin:7px 0 3px}
.meter i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.meter.m-ok{background:var(--ok-dim)}.meter.m-ok i{background:var(--ok)}
.meter.m-warn{background:var(--warn-dim)}.meter.m-warn i{background:var(--warn)}
.meter.m-bad{background:var(--bad-dim)}.meter.m-bad i{background:var(--bad)}

/* ── 圖例（≥2 系列必有；文字用文字色，色票只在 swatch 上） ───────────── */
.legend{font-size:11.5px;color:var(--text-2);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px}

/* ── 浮動 tooltip（逐標記 hover；值為主、名為輔） ────────────────────── */
.viz-tip{
  position:fixed;z-index:50;pointer-events:none;display:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:12px;line-height:1.5;color:var(--text-2);
  box-shadow:0 4px 16px rgba(0,0,0,.45);max-width:280px;
}
.viz-tip b{color:var(--text-1);font-weight:600}
.viz-tip .tt-t{color:var(--text-3);font-size:11px}

/* ── 佔位（缺檔）與註腳 ──────────────────────────────────────────────── */
.ph{
  color:var(--text-3);font-size:12.5px;background:var(--surface);
  border:1px dashed var(--line);border-radius:10px;padding:12px 14px;
}
.note{color:var(--text-3);font-size:11px;margin-top:20px;line-height:1.7}

/* ── 導覽卡（home 下鑽用） ───────────────────────────────────────────── */
.nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.navcard{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--text-1);
  transition:border-color .12s;
}
.navcard:hover{border-color:var(--brand)}
.navcard b{color:var(--brand);font-size:13.5px}
.navcard .d{font-size:12px;color:var(--text-2);margin-top:3px}