/* 單色數據新聞版型：全頁唯一的彩色是黨徽 */
:root {
  color-scheme: light dark;
  --bg: #f6f6f4;
  --ink: #171717;     /* 17.0:1 on --bg */
  --ink-2: #3b3b39;   /* 10.6:1 */
  --muted: #5a5a57;   /* 6.6:1 */
  --line: #d4d4cf;
  --note: #ebebe8;
  --emblem-bg: #f6f6f4;
  --map: #d4d4cf;
  --map-part: #c4c4bf;
  --map-deep: #9a9a96;
  --map-on: #3b3b39;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --ink: #ececea;   /* 15.6:1 on --bg */
    --ink-2: #c9c9c6; /* 11.3:1 */
    --muted: #a2a29f; /* 7.4:1 */
    --line: #383836;
    --note: #1e1e1d;
    --map: #3a3a38;
    --map-part: #444442;
    --map-deep: #6a6a67;
    --map-on: #d4d4cf;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.7 var(--sans);
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus, h1:focus { outline: none; }

.num, time, .fn { font-variant-numeric: tabular-nums; }

.site-header, main, .site-footer { max-width: 48rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* 頁首 */
.site-header nav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px;
  padding: 16px 0 14px; border-bottom: 1px solid var(--ink);
}
.brand { font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.brand:hover { text-decoration: underline; }
.brand-sub { color: var(--muted); font-size: 0.875rem; }

main { padding-top: 40px; padding-bottom: 64px; min-height: 60vh; }

/* 字級：無襯線，靠字重與字級分層 */
h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 8px; }
h2 {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.4;
  margin: 48px 0 16px; padding-top: 10px; border-top: 2px solid var(--ink);
}
.lede { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 28px; max-width: 40em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.hint { font-size: 0.9375rem; color: var(--ink-2); margin: 20px 0 0; }

/* 大號數字 */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.stats > div { border-top: 1px solid var(--line); padding-top: 8px; }
.stats dt { font-size: 0.875rem; color: var(--muted); }
.stats dd { margin: 0; font-size: 1rem; color: var(--ink-2); }
.stats .num { font-size: 2.75rem; font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; margin-right: 4px; }

/* 黨徽：固定淺色方塊，深色模式也看得清楚；尺寸固定避免版面位移 */
.party { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.emblem {
  flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; background: var(--emblem-bg); border: 1px solid var(--line);
}
.emblem.blank { background: none; border-color: transparent; }
.emblem img { width: 20px; height: 20px; object-fit: contain; display: block; }

/* 表單 */
.lookup { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
#vill-field:not([hidden]) ~ fieldset { grid-column: 1 / -1; }
#vill-field p { margin: 6px 0 0; }
div.field > label, legend { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; padding: 0; }
select {
  font: inherit; color: var(--ink); background: var(--bg);
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--ink-2); border-radius: 0;
}
.radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 20px; cursor: pointer; }
.radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }

/* 首頁結果 */
.results { list-style: none; padding: 0; margin: 0 0 16px; }
.results a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: end;
  padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.results li:first-child a { border-top: 1px solid var(--line); }
.results a:hover .result-title { text-decoration: underline; text-underline-offset: 4px; }
.result-title { font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.result-sub { grid-row: 2; color: var(--ink-2); font-size: 0.9375rem; }
.result-seats { grid-row: 1 / 3; grid-column: 2; color: var(--ink-2); white-space: nowrap; }
.result-seats .num { font-size: 2rem; font-weight: 700; color: var(--ink); margin-right: 2px; }

/* 麵包屑 */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0; margin: 0 0 16px; font-size: 0.875rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: 8px; }

/* 首頁：地圖＋縣市清單；地圖單色，深淺區分有深度資料、hover 與清單 focus */
.home { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 0 40px; align-items: start; }
.home h2 { margin-top: 0; }
.map svg { display: block; width: 100%; height: auto; }
.map #counties path { fill: var(--map); stroke: var(--bg); stroke-width: 0.8; cursor: pointer; }
.map #counties path.part { fill: var(--map-part); }
.map #counties path.deep { fill: var(--map-deep); }
.map #counties path:hover, .map #counties path.on { fill: var(--map-on); }
.map #frames * { fill: none; stroke: var(--muted); }
.counties { list-style: none; padding: 0; margin: 0 0 16px; columns: 2; column-gap: 24px; }
.counties li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; break-inside: avoid; border-bottom: 1px solid var(--line); }
.counties a { display: block; padding: 10px 0; min-height: 44px; font-weight: 700; white-space: nowrap; }
.counties .tag { white-space: nowrap; margin: 6px 0; }  /* 標籤換行時與下一列隔開；單列時高度仍由連結的 44px 決定 */

/* 名單 */
.roster { list-style: none; padding: 0; margin: 0 0 12px; }
.roster li {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.roster.office li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.roster.office .lines { grid-column: 1 / -1; }
.roster.office .lines p { margin: 2px 0; }
.roster .name { font-weight: 700; font-size: 1.0625rem; }
.roster .meta { display: inline-flex; align-items: center; gap: 10px; justify-self: end; color: var(--muted); font-size: 0.875rem; }
.tag { border: 1px solid var(--ink-2); color: var(--ink); font-size: 0.8125rem; line-height: 1; padding: 4px 6px; }
.fn { font-size: 0.8125rem; color: var(--muted); vertical-align: baseline; margin-left: 2px; }
.stats .fn { font-size: 0.8125rem; }

.status { border-left: 2px solid var(--ink); background: var(--note); padding: 10px 14px; margin: 0 0 16px; font-size: 0.9375rem; color: var(--ink-2); }

/* 人物頁 */
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 0; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.count { color: var(--ink-2); margin: 0 0 12px; }
.count .num { font-weight: 700; color: var(--ink); }
.inters { list-style: none; padding: 0; margin: 0; }
.inters li {
  display: grid; grid-template-columns: 6.5rem 4.5rem minmax(0, 1fr); gap: 2px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
}
h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 28px 0 8px; }
section.inter:first-of-type h3 { margin-top: 0; }
.inter[data-key="video"] .inters li { grid-template-columns: 6.5rem 5.5rem minmax(0, 1fr); }
.inters .video { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 0.875rem; }
.inters .date { color: var(--muted); }
.inters .dept { color: var(--ink-2); }
.more {
  font: inherit; font-weight: 700; color: var(--ink); background: transparent; cursor: pointer;
  margin-top: 16px; min-height: 44px; padding: 8px 20px; border: 1px solid var(--ink); border-radius: 0;
}
.more:hover { background: var(--note); }
.empty { margin: 32px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-2); }

[tabindex="-1"]:focus { outline: none; }

/* 摘要卡：說過什麼｜做了什麼 */
.summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; margin-top: 28px; }
.summary h2 { margin-top: 0; }
.summary h3 { margin-top: 20px; }
.summary p { margin: 0 0 8px; }
.kv { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0 12px; margin: 0 0 6px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv .num { font-weight: 700; }
.bars { list-style: none; padding: 0; margin: 0 0 8px; }
.bars li {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) 3rem; gap: 12px; align-items: center;
  padding: 3px 0; font-size: 0.9375rem;
}
.bars li > .num { text-align: right; }
.bars.rates li { grid-template-columns: 5rem minmax(0, 1fr) auto; }
.bar { display: block; height: 10px; background: var(--note); }
.bar > span { display: block; height: 100%; background: var(--ink); }

/* 2022 選舉公報 */
.plain { margin: 0; padding-left: 1.25em; }
.platform { white-space: pre-wrap; margin: 0 0 8px; max-width: 40em; }
.src { font-size: 0.875rem; color: var(--muted); margin: 8px 0 0; }

/* 前科資訊 */
.convictions { list-style: none; padding: 0; margin: 0 0 12px; }
.convictions li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.convictions li:first-child { border-top: 1px solid var(--line); }
.portals { padding-left: 1.25em; margin: 0; }
.portals li { margin: 0 0 8px; }
.portals p { margin: 4px 0 0; max-width: 40em; }

/* 質詢摘要：原生 details，無動畫 */
.sess { border-top: 1px solid var(--line); }
.sess:last-of-type { border-bottom: 1px solid var(--line); }
.sess > summary { cursor: pointer; padding: 12px 0; min-height: 44px; }
.sess-title { font-weight: 700; }
.sess-title .muted { font-weight: 400; }
.disclaimer { display: block; font-size: 0.875rem; color: var(--muted); margin-left: 1.1em; }
.sess[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.issues { list-style: none; padding: 0; margin: 0; }
.issues > li { padding: 4px 0 12px; }
.issues h3 { margin: 12px 0 6px; }
.issue { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 0.9375rem; }
.issue dt { color: var(--muted); }
.issue dd { margin: 0; }
.issue p { margin: 0 0 4px; max-width: 40em; }
.srcs { font-size: 0.875rem; color: var(--ink-2); margin-bottom: 16px; }

/* 腳註 */
.notes ul { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.notes li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 3px 0; }
.notes time { white-space: nowrap; }
.fn-n { color: var(--muted); font-variant-numeric: tabular-nums; }

/* 頁尾 */
.site-footer { padding-top: 20px; padding-bottom: 48px; color: var(--muted); font-size: 0.875rem; }
.site-footer::before { content: ""; display: block; border-top: 1px solid var(--ink); margin-bottom: 16px; }
.site-footer p { margin: 0 0 6px; }
.site-footer h2 { font-size: 0.875rem; color: var(--ink-2); margin: 20px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ext p { max-width: 40em; }

/* 支持作者：頁首右側小按鈕＋原生 dialog；QR 圖本身是白底黑碼，深色模式也能掃 */
.support-open {
  margin-left: auto; align-self: center; flex: none;
  font: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.4; color: var(--ink); background: transparent; cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--ink); border-radius: 0;
}
.support-open:hover { background: var(--note); }
/* 窄螢幕（約 400px 以下）頁首放不下副標與「小額支持作者」，副標先收起，首頁標題已說明用途 */
@media (max-width: 400px) { .brand-sub { display: none; } }
.support {
  width: min(28rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 16px 20px 20px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--ink); font-size: 0.9375rem;
}
.support::backdrop { background: rgb(0 0 0 / 0.5); }
.support form { display: flex; justify-content: flex-end; }
.support .more { margin-top: 0; }
.support h2 { margin: 8px 0 16px; }
.support p { margin: 0 0 12px; }
.support-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.support-list .more { display: block; width: 100%; text-align: left; text-decoration: none; }
.support .qr { display: block; width: 200px; height: 200px; margin: 0 auto 12px; image-rendering: pixelated; }
.support .addr { margin: 0 0 8px; }
.support .addr code { font: 0.9375rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); word-break: break-all; user-select: all; }
.support .addr strong { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.support-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }

@media (max-width: 600px) {
  main { padding-top: 28px; }
  h1 { font-size: 1.625rem; }
  .lookup { grid-template-columns: minmax(0, 1fr); }
  .home { grid-template-columns: minmax(0, 1fr); }
  .map { width: 70%; margin: 0 auto 24px; }
  .summary { grid-template-columns: minmax(0, 1fr); }
  .summary .did h2 { margin-top: 32px; }
  .bars.rates li { grid-template-columns: 4rem minmax(0, 1fr) auto; }
  .stats { gap: 0 12px; }
  .stats .num { font-size: 2.25rem; }
  .roster li { grid-template-columns: minmax(0, 1fr) auto; }
  .roster .party { grid-row: 2; grid-column: 1 / -1; }
  .roster.office li { grid-template-columns: minmax(0, 1fr) auto; }
  .roster.office li > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .inters li, .inter[data-key="video"] .inters li { grid-template-columns: auto minmax(0, 1fr); }
  .inters .title { grid-column: 1 / -1; }
}

/* 分享圖卡：沿用支持作者的 dialog 外框；預覽圖固定淺色（就是要分享出去的圖） */
.share-open { margin: 12px 0 0; }
.share-open .more { margin-top: 0; }
.share fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.share legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.share fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-right: 16px; }
.share-preview { display: block; width: 100%; max-height: 60dvh; object-fit: contain; border: 1px solid var(--line); background: #f6f6f4; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.share-actions .more { margin-top: 0; text-decoration: none; display: inline-flex; align-items: center; }