/* 粉專觀測站 —— 唯一一份樣式表。
 *
 * 沒有前端建置步驟，所以這裡不用任何前處理器語法。深淺色靠 CSS 變數
 * 切換：小編白天在辦公室、晚上在手機上看，兩種情境都要能讀。
 *
 * 版面以手機為預設，寬螢幕才加欄 —— 反過來寫（桌機優先再壓縮）幾乎
 * 一定會留下需要左右捲動的表格。
 */

:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #1b1f24;
  --muted: #5c6672;
  --border: #dfe4e9;
  --accent: #1f5fd0;
  --accent-soft: #e6eefc;
  --positive: #1f7a52;
  --neutral: #6b7480;
  --negative: #b3283c;
  --warn: #9a5b00;
  --heat-0: transparent;
  --heat-1: #dbe9f8;
  --heat-2: #a9cbf0;
  --heat-3: #e2b98a;
  --heat-4: #cf6f5c;
  --radius: 10px;

  /* 圖表專用色。與 --accent 分開，因為兩者的約束不同：--accent 是文字連結
   * 用的，深色模式要夠亮才讀得清楚；圖表的色塊在深色底上太亮會發光。
   *
   * 這些值跑過 dataviz 的六項檢查（明度帶、彩度、色盲區辨、對比），
   * 淺色與深色各驗一次。第二個系列刻意不用灰 —— 灰的彩度低於下限，
   * 深色模式下與藍色的常人區辨度只有 12.3，低於 15 的硬底線。 */
  --chart-1: #1f5fd0;
  --chart-2: #eb6834;
  --chart-late: #b3283c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --surface: #1d2126;
    --surface-2: #252b31;
    --text: #e5e9ed;
    --muted: #9aa5b1;
    --border: #2e353d;
    --accent: #79a9ff;
    --accent-soft: #1e2b40;
    --positive: #57bd8c;
    --neutral: #98a2ae;
    --negative: #f0788a;
    --warn: #e0a458;
    /* 深色底上的圖表色：比 --accent 暗一階，OKLCH L 落在 0.48–0.67 的
     * 建議帶內。用 --accent（L 0.74）畫色塊會在深色背景上發光。 */
    --chart-1: #5a90e8;
    --chart-2: #d95926;
    --chart-late: #d9556c;
    --heat-1: #22384f;
    --heat-2: #2f5c86;
    --heat-3: #7a5330;
    --heat-4: #a8503f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Noto Sans TC", "PingFang TC",
    "Microsoft JhengHei", "Heiti TC", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  /* 整頁永遠不左右捲動。要捲的是表格自己的容器。 */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 頁首與導覽 ─────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; color: var(--text); font-size: 1.05rem; }
.who { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.who span { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* 分頁列在窄螢幕上自己橫向捲動，不換行也不撐破版面 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tab {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: .9rem;
  white-space: nowrap;
}
.tab:hover { background: var(--surface-2); text-decoration: none; }
.tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 14px 12px 40px; }
.foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px 28px;
  color: var(--muted);
  font-size: .78rem;
}

/* ── 區塊 ───────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

h1 { font-size: 1.25rem; margin: 4px 0 12px; }
h2 { font-size: 1rem; margin: 0 0 10px; }
.sub { color: var(--muted); font-size: .82rem; margin: -6px 0 12px; }

/* ── 數字磚 ─────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.card .label { color: var(--muted); font-size: .8rem; }
.card .value { font-size: 1.6rem; font-weight: 700; line-height: 1.3; }
.card .value small { font-size: .8rem; font-weight: 500; color: var(--muted); }
.card.alert .value { color: var(--negative); }
.card.good .value { color: var(--positive); }

/* ── 提示 ───────────────────────────────────────────── */

.notice {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--muted);
  font-size: .88rem;
}
.notice strong { color: var(--text); }

.empty { color: var(--muted); padding: 18px 4px; text-align: center; }

/* ── 表格 ───────────────────────────────────────────── */

/* 捲動的是這個容器，不是整頁 —— 手機上表格再寬也不會讓版面破掉 */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .88rem; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--surface-2); font-weight: 600; white-space: nowrap; color: var(--muted); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.said { max-width: 380px; }

/* ── 標籤 ───────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .75rem;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.tag.positive { color: var(--positive); }
.tag.negative { color: var(--negative); }
.tag.neutral { color: var(--neutral); }
.tag.sev-2, .tag.sev-3 { color: var(--negative); font-weight: 600; }
.tag.sev-1 { color: var(--warn); }
.tag.waiting { color: var(--warn); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 選單列 ─────────────────────────────────────────── */

.picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--muted);
}
.chip.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ── 圖 ─────────────────────────────────────────────── */

/* 內嵌 SVG，不引圖表函式庫：目標主機連不到 CDN，一條折線也不值幾百 KB */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
/* 直接標在資料上的值。用文字色而不是資料色 —— 色塊負責識別，
 * 文字負責閱讀，文字染上資料色只會讓兩件事互相干擾。 */
.chart .axis.strong { fill: var(--text); font-weight: 600; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.positive { stroke: var(--positive); }
.chart .line.neutral { stroke: var(--neutral); }
.chart .line.negative { stroke: var(--negative); }
.chart .bar { fill: var(--chart-1); }
.chart .bar.alt { fill: var(--chart-2); }
.chart .bar.late { fill: var(--chart-late); }
/* 長條之間留 2px 的底色縫，靠的是幾何而不是描邊 —— 描邊會多出一圈
 * 不是資料的墨水。縫寬在 column_path 那邊算。 */

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.legend .positive { background: var(--positive); }
.legend .neutral { background: var(--neutral); }
.legend .negative { background: var(--negative); }
.legend .chart-1 { background: var(--chart-1); }
.legend .chart-2 { background: var(--chart-2); }

.heat-wrap { overflow-x: auto; }
.heat { min-width: 520px; width: 100%; height: auto; display: block; }
.heat .cell { stroke: var(--bg); stroke-width: 1; }
.heat .lv0 { fill: var(--heat-0); }
.heat .lv1 { fill: var(--heat-1); }
.heat .lv2 { fill: var(--heat-2); }
.heat .lv3 { fill: var(--heat-3); }
.heat .lv4 { fill: var(--heat-4); }
.heat text { fill: var(--muted); font-size: 10px; }

/* 主題排行的長條用 CSS 畫：它跟著表格欄寬走，SVG 反而不會自適應 */
/* 主題排行那種 HTML 橫條。
 *
 * **名字不能叫 .bar。** SVG 圖表裡的長條也用 class="bar"，而 CSS 的
 * height 會覆蓋 SVG 的 height 屬性 —— 一條沒有限定範圍的 `.bar { height: 8px }`
 * 會把每張圖的長條都壓成 8 像素，浮在它原本該有的高度上，看起來像一堆
 * 亂飄的方塊。這種錯不會有任何錯誤訊息。 */
.meter { background: var(--surface-2); border-radius: 4px; height: 8px; min-width: 60px; }
.meter > span { display: block; height: 100%; border-radius: 4px; background: var(--chart-1); }

.delta.up { color: var(--negative); }
.delta.down { color: var(--positive); }
.delta.flat { color: var(--muted); }

/* ── 展開 ───────────────────────────────────────────── */

details.item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  margin-bottom: 8px;
}
details.item summary { cursor: pointer; list-style: none; }
details.item summary::-webkit-details-marker { display: none; }
.item-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.item-head .when { color: var(--muted); font-size: .8rem; }
.item-head .who { font-weight: 600; color: var(--text); }
.item-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.quote {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 6px 0;
}
.meta { color: var(--muted); font-size: .8rem; }

/* ── 對話串 ─────────────────────────────────────────── */

.timeline { display: flex; flex-direction: column; gap: 10px; }
.turn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
  max-width: 88%;
}
.turn.page { align-self: flex-end; background: var(--accent-soft); }
.turn.focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.turn .head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: .8rem; }
.turn .head .name { font-weight: 600; font-size: .9rem; color: var(--text); }
.turn .head .when { color: var(--muted); }

/* ── 表單 ───────────────────────────────────────────── */

form.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
}
form.filters label { display: block; font-size: .8rem; color: var(--muted); }
input, select, button {
  font: inherit;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.actions { display: flex; gap: 8px; align-items: center; }
.actions a { font-size: .85rem; white-space: nowrap; }

/* ── 登入頁 ─────────────────────────────────────────── */

.gate {
  max-width: 380px;
  margin: 12vh auto 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.gate h1 { margin-bottom: 6px; }
.gate p { color: var(--muted); font-size: .88rem; }
.gate .go {
  display: block;
  margin-top: 18px;
  padding: 10px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.gate .go:hover { text-decoration: none; opacity: .92; }

/* 翻譯排在原文底下，靠一條左線與縮排表示「這是同一句話的另一種說法」，
   而不是另一則發言。刻意不用引號 —— 引號會讓它看起來像客人說了兩次。 */
.translated {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}