/* ---------- 監測指標 ---------- */
  /* 2026-09-15 重設計：分段按鈕收斂成設計稿唯一那顆 .seg——一個 32px 高的外框，格與格之間一條
     1px 分隔線，選中只換 --surface-3 底色，沒有陰影（重設計全站只有真浮層才有陰影）。
     設計稿用 overflow:hidden 切首尾圓角，這裡刻意不抄：那會把 :focus-visible 的外框
     （20-base.css 的 outline-offset:2px）整條裁掉，鍵盤使用者看不到焦點。改讓首尾按鈕各自畫圓角。 */
  .seg-range{ display:inline-flex; height:32px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); }
  .seg-range button{ border:none; border-right:1px solid var(--line); background:none; cursor:pointer; border-radius:0; color:var(--ink-faint); font-size:var(--fs-sm); padding:0 10px; white-space:nowrap; }
  .seg-range button:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); }
  .seg-range button:last-child{ border-right:0; border-radius:0 var(--r-md) var(--r-md) 0; }
  .seg-range button[aria-checked="true"]{ background:var(--surface-3); color:var(--ink); font-weight:600; }

  /* 這裡的欄數拍板history：原本兩欄→業主拍板改一列一圖（單欄，讓每張圖有更多寬度放刻度與
     hover tooltip）→2026-09-08 使用者又拍板改回「最多兩欄」（單欄要滑太長一段捲軸）。
     這次不是走回頭路寫死兩欄：這裡的圖是 SVG 等比縮放（寬高比鎖死在 CHART_W:CHART_H），欄位
     變窄時圖的高度也會跟著等比變矮，中等寬度的筆電螢幕硬塞兩欄會太扁，違背當初改單欄的理由。
     用 auto-fit + minmax 讓瀏覽器自己決定：容器夠寬（差不多筆電以上）自動排兩欄，變窄（手機、
     平板直向）自動退回一欄，不用另外猜一個斷點寫死，跟這支檔案其他響應式寫法一致。 */
  .chart-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:16px; }
  .chart-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px 16px; background:var(--surface-2); min-width:0; }
  .chart-card.is-real{ border-color:var(--ok); }
  .chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
  .chart-title{ font-size:var(--fs-md); font-weight:600; }
  .chart-now{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-sm); color:var(--ink); font-weight:500; }
  .chart-tag{ font-size:var(--fs-2xs); font-weight:600; letter-spacing:.04em; flex:none; border-radius:var(--r-pill); padding:2px 8px; border:1px dashed var(--line-strong); color:var(--ink-faint); }
  /* 圖 = 左邊一欄刻度數字（HTML）＋右邊繪圖區（SVG），底下再一列時間標籤（HTML）。
     標籤留在 HTML 是刻意的：SVG 等比縮放會把字一起縮掉（實測 900px 視窗下只剩 3px）。 */
  .chart{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:4px; align-items:stretch; }
  .chart-plot{ min-width:0; position:relative; }
  .chart svg{ display:block; width:100%; height:auto; }
  .chart svg path[data-series-index]{ transition:opacity .15s ease; }
  .chart svg path.is-series-hidden{ opacity:0; }
  .chart-y{ position:relative; width:44px; }
  .chart-y span{ position:absolute; right:0; transform:translateY(-50%); font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xs); color:var(--ink-faint); white-space:nowrap; line-height:1; }
  .chart-x{ grid-column:2; position:relative; height:12px; }
  .chart-x span{ position:absolute; top:0; font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xs); color:var(--ink-faint); white-space:nowrap; line-height:1; }
  /* hover 參考線＋數值卡：兩個都 pointer-events:none，滑鼠事件才會一路落在底下的 .chart-plot 上，
     不會因為蓋住游標而讓委派的 mouseout 誤判、閃爍。 */
  .chart-hoverline{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-strong); pointer-events:none; }
  .chart-tooltip{
    position:absolute; top:4px; z-index:5; pointer-events:none; min-width:132px;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
    box-shadow:var(--shadow-card); padding:6px 10px; font-size:var(--fs-2xs); line-height:1.6;
  }
  .chart-tooltip-time{ font-family:'JetBrains Mono',monospace; color:var(--ink-faint); margin-bottom:2px; }
  .chart-tooltip-row{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
  .chart-tooltip-row i{ width:8px; height:8px; border-radius:50%; flex:none; }
  .chart-tooltip-name{ color:var(--ink-faint); }
  .chart-tooltip-val{ margin-left:auto; padding-left:12px; font-family:'JetBrains Mono',monospace; font-weight:600; }
  .chart-legend{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:var(--fs-xs); color:var(--ink-faint); }
  /* 圖例改成可點擊的 button：點一下切換對應那條線的顯示/隱藏，見 JS 的 toggleChartSeries()。 */
  .chart-legend-item{ display:inline-flex; align-items:center; gap:4px; background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
  .chart-legend-item i{ width:12px; height:2px; flex:none; }
  .chart-legend-item.is-hidden{ color:var(--ink-faint); text-decoration:line-through; opacity:.65; }
  .chart-legend-item.is-hidden i{ background:none !important; border:1px solid currentColor; }
  /* 2026-09-15 重設計：.chart-empty 併掉——全站空狀態統一成 70-table.css 那顆 .empty-state，
     原本五種空狀態並存，同一句「沒有資料」在不同頁面長得不一樣。chart.mjs 的兩處已改吃 .empty-state。 */
  .section-head{ display:flex; align-items:center; gap:8px; margin:24px 0 8px; flex-wrap:wrap; }
  .section-title{ font-size:var(--fs-md); font-weight:600; }
  .metrics-note{
    display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; margin-top:16px; padding-top:12px;
    border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink-faint);
  }