/* ── dept.css ──────────────────────────────────────────────────────────────
   校系獨立頁（/dept/*.html）與校系總覽（/dept/）專用樣式。
   顏色一律取自 styles/tokens.css，不自帶色碼；深色模式沿用首頁的
   :root[data-theme='dark'] 約定（由頁內 inline script 依 localStorage 設定）。
   由 data/gen_dept_pages.py 產出的頁面共用這一支，勿在此加入任何字型或圖片外連。
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: var(--color-surface-subtle);
  --bg2: var(--color-surface-sunken);
  --surface: var(--color-surface-page);
  --border: var(--color-border-subtle);
  --text: var(--color-ink-primary);
  --text2: var(--color-ink-secondary);
  --text3: var(--color-ink-tertiary);
  --accent: var(--color-brand-blue);
  --accent2: var(--color-brand-link);
  --up: var(--color-cat-safe);
  --down: var(--color-cat-fail);
  --warn: var(--color-cat-changed);
}

:root[data-theme='dark'] {
  --bg: var(--color-surface-dark);
  --bg2: color-mix(in srgb, var(--color-surface-dark) 82%, var(--color-surface-page));
  --surface: color-mix(in srgb, var(--color-surface-dark) 90%, var(--color-surface-page));
  --border: color-mix(in srgb, var(--color-surface-page) 18%, transparent);
  --text: var(--color-ink-on-dark);
  --text2: var(--color-ink-on-dark-muted);
  --text3: color-mix(in srgb, var(--color-ink-on-dark) 54%, transparent);
  --accent2: color-mix(in srgb, var(--color-brand-blue) 70%, var(--color-ink-on-dark));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-base);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent2); }

/* ── 頁首 / 麵包屑 ── */
.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.brand {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.3px;
}
.brand span {
  margin-left: 8px;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  color: var(--text3);
  letter-spacing: 0;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 18px 44px; }

.crumb { font-size: 12px; color: var(--text3); margin-bottom: 14px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

h1 {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.4px;
  font-weight: var(--font-weight-bold);
}
h1 .dep {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  color: var(--text2);
}
.lede { margin-top: 10px; font-size: 14px; color: var(--text2); }

/* ── 卡片 ── */
.card {
  margin-top: 16px;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card h2 {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}
.card p { font-size: 14px; }
.card p + p { margin-top: 8px; }
.note { font-size: 12.5px; color: var(--text3); margin-top: 8px; }
.card.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.card.warn h2 { color: var(--warn); }

/* ── 基本資料 ── */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fact {
  padding: 9px 11px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
}
.fact dt { font-size: 11.5px; color: var(--text3); }
.fact dd { font-size: 14.5px; font-weight: var(--font-weight-semibold); margin-top: 2px; }
.up { color: var(--up); font-weight: var(--font-weight-regular); font-size: 12.5px; }
.down { color: var(--down); font-weight: var(--font-weight-regular); font-size: 12.5px; }
.flat { color: var(--text3); font-weight: var(--font-weight-regular); font-size: 12.5px; }

/* ── 表格（寬內容自己橫向捲，body 不得橫捲）── */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 280px; }
caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  color: var(--text3);
  padding-bottom: 6px;
}
th, td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; }
thead th { font-size: 12px; color: var(--text3); font-weight: var(--font-weight-semibold); }
tbody th { font-weight: var(--font-weight-semibold); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tr.sum th, tr.sum td { border-top: 2px solid var(--border); font-weight: var(--font-weight-bold); }

/* ── CTA ── */
.card.cta { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.btn {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--color-ink-on-accent);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.btn:hover { background: var(--color-brand-blue-hover); }

/* ── 連結清單 / 同校其他系 ── */
.links { list-style: none; }
.links li { font-size: 13.5px; color: var(--text2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.links li:last-child { border-bottom: 0; }

.sib { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.sib li { font-size: 13.5px; }
.sib a { text-decoration: none; }
.sib a:hover { text-decoration: underline; }
.sib.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.school h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cnt { font-size: 11.5px; color: var(--text3); font-weight: var(--font-weight-regular); }
.back { margin-top: 12px; font-size: 13px; }

/* ── 頁尾 ── */
.foot {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 18px 40px;
  font-size: 12px;
  color: var(--text3);
  text-align: center;
}
.foot .quiet { margin-top: 6px; }
.foot a { color: var(--text3); }

/* ── 廣告插槽（預留，尚未啟用）──
   gen_dept_pages.py 的 ADS_ENABLED 預設 false 時容器帶 hidden，完全不佔版面；
   啟用與否都不會有任何第三方 script，實際廣告代碼須另行裁決後才可加入。 */
.ad-slot { display: block; margin-top: 16px; min-height: 0; }
.ad-slot[hidden] { display: none; }

@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .sib.cols { grid-template-columns: 1fr; }
  h1 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}