/* =====================================================
   歷屆統計（history.html）
   圖表主色用縹藍（--sat），不用木色：木色留給頁首與連結，
   整頁都木色會單調。冠軍以黑子、二三名以白子標示。
   ===================================================== */

.hs-wrap { padding-top: clamp(1.75rem, 4vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- 程度帶色票 ----------
   兩張圖共用：參賽人數堆疊、各組人數熱度表。使用者指定的 Pantone 粉彩色系
   （Ice Melt、Peach Dust、Almost Aqua、Lemon Icing、Raindrops on Roses、
   Nimbus Cloud、Orchid Tint、Cloud Dancer）。
   原色太淡（明度 0.85 以上），各色保留色相、往下壓一階明度並稍微提彩度。
   白底上對比仍低，所以：
   - 每塊色都描一圈同色相的深邊（--band-edge），Cloud Dancer 才看得到
   - 色與色之間差異小，辨識靠圖例、tooltip、表格裡的組名與數字，不能只靠顏色
   深淺模式共用同一組色；深底上粉彩本身就夠亮。 */
:root {
  --band-hi: #A9C3DD;  /* Ice Melt 加深 */
  --band-d5: #E8B9A2;  /* Peach Dust 加深 */
  --band-d4: #A9BA9C;  /* Almost Aqua 加深 */
  --band-d3: #EED89A;  /* Lemon Icing 加深 */
  --band-d2: #DDB3B9;  /* Raindrops on Roses 加深 */
  --band-d1: #B9B9BF;  /* Nimbus Cloud 加深 */
  --band-kyu: #C2B0C3; /* Orchid Tint 加深 */
  --band-etc: #DCD7CC; /* Cloud Dancer 加深 */
}
[data-band="hi"] { --band: var(--band-hi); }
[data-band="d5"] { --band: var(--band-d5); }
[data-band="d4"] { --band: var(--band-d4); }
[data-band="d3"] { --band: var(--band-d3); }
[data-band="d2"] { --band: var(--band-d2); }
[data-band="d1"] { --band: var(--band-d1); }
[data-band="kyu"] { --band: var(--band-kyu); }
[data-band="etc"] { --band: var(--band-etc); }
/* 整個系列只有非段級組別：用圖表主色縹藍，不要整張米灰 */
[data-band="solo"] { --band: var(--sat); }
[data-band] { --band-edge: color-mix(in oklab, var(--band) 72%, var(--ink-mid)); }
:root[data-theme="dark"] [data-band] { --band-edge: transparent; }

/* ---------- 系列選擇 ---------- */
.hs-picker { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hs-picker-label { font-family: var(--f-mincho); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--ink); }
.hs-picker-label .num { font-family: var(--f-latin); font-style: italic; color: var(--ink-light); letter-spacing: 0.04em; }
.hs-select { position: relative; flex: 1 1 18rem; max-width: 30rem; }
.hs-select::after {
  content: '▾'; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-mid); pointer-events: none; font-size: 0.8rem;
}
.hs-select select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: 0.7rem 2.2rem 0.7rem 0.9rem;
  font: 500 0.95rem var(--f-sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0;
  cursor: pointer;
}
.hs-select select:focus { outline: none; border-color: var(--sat-deep); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sat) 18%, transparent); }

.hs-loading { color: var(--ink-mid); padding: 3rem 0; text-align: center; }

/* ---------- 標題 ---------- */
.hs-title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hs-title h2 { font-family: var(--f-mincho); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: 0.04em; }
.hs-title-years { font-family: var(--f-latin); font-style: italic; font-size: 1.15rem; color: var(--ink-mid); }

/* ---------- KPI ---------- */
.hs-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.hs-kpi { padding: 1.1rem 1.1rem 1.2rem; border-left: 1px solid var(--line); min-width: 0; }
.hs-kpi:first-child { border-left: 0; padding-left: 0; }
.hs-kpi-label { font-size: 0.78rem; letter-spacing: 0.12em; color: var(--ink-mid); }
.hs-kpi-value {
  font-family: var(--f-latin); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1;
  color: var(--ink); margin-top: 0.35rem; font-variant-numeric: tabular-nums;
}
.hs-kpi-value small { font-family: var(--f-sans); font-size: 0.8rem; color: var(--ink-mid); margin-left: 0.25rem; }
.hs-kpi-sub { font-size: 0.78rem; color: var(--ink-mid); margin-top: 0.3rem; }
.hs-delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.hs-delta.is-up { color: var(--moss-deep); }
.hs-delta.is-down { color: var(--hanko); }
.hs-delta-note { color: var(--ink-mid); font-weight: 400; margin-left: 0.35rem; }

/* ---------- 卡片 ---------- */
.hs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.hs-card { border: 1px solid var(--line); background: var(--paper); padding: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 1.5rem; min-width: 0; }
.hs-card { scroll-margin-top: 6rem; }  /* 收起得獎者表時捲回卡片頂端，要讓出黏著的導覽列 */
.hs-grid .hs-card { margin-bottom: 0; background: var(--paper-warm); }  /* 只有上排兩張圖表卡墊底色 */
.hs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hs-h2 { font-family: var(--f-mincho); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; }
.hs-h2 .alt { font-family: var(--f-latin); font-style: italic; font-weight: 400; font-size: 0.85em; color: var(--ink-light); margin-left: 0.7em; letter-spacing: 0.03em; }
.hs-note { font-size: 0.78rem; color: var(--ink-mid); margin-top: 0.4rem; line-height: 1.7; }
.hs-scroll { overflow-x: auto; margin-top: 1rem; -webkit-overflow-scrolling: touch; }

/* ---------- 長條 ---------- */
.hs-bars {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1.25rem); margin-top: 1.25rem; align-items: end;
}
.hs-bar-col { display: flex; flex-direction: column; align-items: center; outline: none; cursor: default; }
.hs-bar-val { font-family: var(--f-latin); font-size: 1.05rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.hs-bar-track { width: 100%; max-width: 3.2rem; height: 11rem; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.hs-bar { width: 100%; display: flex; flex-direction: column; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.hs-seg-bar { flex-basis: 0; min-height: 2px; background: var(--band); box-shadow: inset 0 0 0 1px var(--band-edge); outline: none; transition: filter var(--t-quick, .2s); }
.hs-seg-bar:hover, .hs-seg-bar:focus-visible { filter: saturate(1.6) brightness(0.96); box-shadow: inset 0 0 0 1.5px var(--ink); }

.hs-legend { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.74rem; color: var(--ink-soft); }
.hs-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.hs-legend i, .hs-dot { width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--band); box-shadow: inset 0 0 0 1px var(--band-edge); flex: none; display: inline-block; }
.hs-dot { margin-right: 0.45rem; vertical-align: 0.05em; }
.hs-bar-year { font-size: 0.8rem; color: var(--ink); margin-top: 0.45rem; font-variant-numeric: tabular-nums; }
.hs-bar-ed { font-size: 0.68rem; color: var(--ink-light); min-height: 1.3em; line-height: 1.3; white-space: nowrap; }
/* 欄太多時一欄放不下「第31屆」，只留年份（屆數在得獎者表的表頭還看得到）；
   否則有屆數和沒屆數的欄高度不同，柱子底線會對不齊 */
.hs-bars.is-dense .hs-bar-ed { display: none; }
.hs-bars.is-dense .hs-bar-year { font-size: 0.66rem; letter-spacing: -0.02em; }
/* 季賽一年好幾欄，年份都一樣：季別（每欄都有，高度一致）要留著 */
.hs-bars.is-dense.has-term .hs-bar-ed { display: block; }
.hs-bar-year .y2 { display: none; }
/* 手機上十幾欄連四位數年份都排不下，改兩位數 */
@media (max-width: 600px) {
  .hs-bars.is-dense { gap: 0.25rem; }
  .hs-bars.is-dense .hs-bar-year .y4 { display: none; }
  .hs-bars.is-dense .hs-bar-year .y2 { display: inline; }
  .hs-bars.is-dense.has-term .hs-bar-ed { display: none; }   /* y2 已帶季別：'26秋 */
}

/* ---------- 熱度表 ---------- */
.hs-heat { border-collapse: separate; border-spacing: 2px; width: 100%; font-variant-numeric: tabular-nums; }
.hs-heat th { font-weight: 400; font-size: 0.78rem; color: var(--ink-mid); padding: 0.3rem 0.5rem; white-space: nowrap; }
.hs-heat thead th { text-align: center; }
.hs-heat tbody th { text-align: right; color: var(--ink-soft); }
.hs-heat td { text-align: center; font-size: 0.85rem; padding: 0.45rem 0.4rem; min-width: 3rem; color: var(--ink); outline: none; }
.hs-heat td sup { font-size: 0.62rem; color: var(--ink-mid); margin-left: 0.1rem; }
/* 粉彩本身就很淺：淺色模式從 35% 疊到原色，最多一階再壓一點墨；
   深色模式粉彩疊在深底上，比例要低才不刺眼 */
.hs-heat-cell[data-step="0"] { background: color-mix(in oklab, var(--band) 35%, var(--paper)); }
.hs-heat-cell[data-step="1"] { background: color-mix(in oklab, var(--band) 60%, var(--paper)); }
.hs-heat-cell[data-step="2"] { background: color-mix(in oklab, var(--band) 85%, var(--paper)); }
.hs-heat-cell[data-step="3"] { background: var(--band); }
.hs-heat-cell[data-step="4"] { background: color-mix(in oklab, var(--band) 86%, var(--ink-mid)); }
/* 深色模式：粉彩疊進深底會變泥灰，改成粉彩實底＋深字，深淺照樣分五階 */
:root[data-theme="dark"] .hs-heat-cell { color: var(--paper); }
:root[data-theme="dark"] .hs-heat-cell sup { color: color-mix(in oklab, var(--paper) 70%, transparent); }
:root[data-theme="dark"] .hs-heat-cell[data-step="0"] { background: color-mix(in oklab, var(--band) 50%, var(--paper)); color: var(--ink); }
:root[data-theme="dark"] .hs-heat-cell[data-step="0"] sup { color: var(--ink-mid); }
:root[data-theme="dark"] .hs-heat-cell[data-step="1"] { background: color-mix(in oklab, var(--band) 68%, var(--paper)); }
:root[data-theme="dark"] .hs-heat-cell[data-step="2"] { background: color-mix(in oklab, var(--band) 80%, var(--paper)); }
:root[data-theme="dark"] .hs-heat-cell[data-step="3"] { background: color-mix(in oklab, var(--band) 90%, var(--paper)); }
:root[data-theme="dark"] .hs-heat-cell[data-step="4"] { background: var(--band); }
/* 縹藍比粉彩深，淺色模式後兩階改白字 */
:root:not([data-theme="dark"]) .hs-heat-cell[data-band="solo"]:is([data-step="3"], [data-step="4"]) { color: var(--paper); }
:root:not([data-theme="dark"]) .hs-heat-cell[data-band="solo"]:is([data-step="3"], [data-step="4"]) sup { color: color-mix(in oklab, var(--paper) 75%, transparent); }
.hs-heat-cell:hover, .hs-heat-cell:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hs-heat-empty { color: var(--ink-light) !important; }

/* ---------- 冠軍表 ---------- */
.hs-seg { display: inline-flex; border: 1px solid var(--line-strong); }
.hs-seg button {
  font: 0.78rem var(--f-sans); letter-spacing: 0.08em; padding: 0.35rem 0.85rem;
  background: var(--paper); color: var(--ink-soft); border: 0; cursor: pointer;
}
.hs-seg button + button { border-left: 1px solid var(--line-strong); }
.hs-seg button.is-active { background: var(--ink); color: var(--paper); }

.hs-champ { border-collapse: collapse; width: 100%; min-width: calc(6rem + var(--cols) * 10.5rem); }
.hs-champ th, .hs-champ td { border-top: 1px solid var(--line); padding: 0.65rem 0.6rem; vertical-align: top; text-align: left; }
.hs-champ thead th { border-top: 0; border-bottom: 1px solid var(--ink); font-family: var(--f-latin); font-size: 1.05rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.hs-champ thead th span { font-family: var(--f-sans); font-size: 0.68rem; color: var(--ink-light); margin-left: 0.4rem; }
.hs-champ tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--paper);
  font-weight: 500; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; width: 6rem;
}
.hs-champ-empty { color: var(--ink-light); }
.hs-champ-div + .hs-champ-div { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed var(--line); }
.hs-champ-divname { font-size: 0.68rem; line-height: 1.5; color: var(--ink-light); letter-spacing: 0.05em; margin-bottom: 0.15rem; }

.hs-place { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.4rem; font-size: 0.86rem; line-height: 1.5; }
/* 至少放得下「棋子＋姓名＋勝敗」一行：配對賽的「鍾承恩、王怡人」七個字會把勝敗擠到下一行，
   撐出最小寬度讓欄位自己變寬（表格本來就能橫捲）。 */
.hs-place { min-width: calc(1.15rem + var(--nw, 3em) + 0.1em + 0.8rem + 3.6em); }
/* 升段標籤也不換行：「升甲組」比「升1段」寬一點，同欄放得下升1段時會被擠到下一行 */
.hs-place:has(.hs-tag) { flex-wrap: nowrap; }
.hs-place + .hs-place { margin-top: 0.2rem; }
/* 名次用棋子：冠軍黑子、二三名白子 */
.hs-rank {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: inline-grid; place-items: center; font: 600 0.62rem var(--f-sans);
  background: var(--stone-white); color: #3a3833; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.hs-place.r1 .hs-rank { background: var(--stone-black); color: #F2EFE8; box-shadow: none; }
/* 代表權：選拔賽才有的一行，放在各組得獎者上面 */
.hs-rep { display: flex; flex-direction: column; font-size: 0.86rem; line-height: 1.45; }
.hs-rep + .hs-rep { margin-top: 0.45rem; }
.hs-rep-label { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--hanko); }
.hs-rep .hs-name { min-width: 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hs-name { flex: none; min-width: calc(var(--nw, 3em) + 0.1em); }
.hs-place.r1 .hs-name { font-weight: 600; color: var(--ink); }
.hs-place:not(.r1) .hs-name { color: var(--ink-soft); }
.hs-rec { flex: none; white-space: nowrap; font-size: 0.74rem; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.hs-tag { flex: none; font-size: 0.66rem; padding: 0 0.3rem; border: 1px solid; line-height: 1.5; letter-spacing: 0.04em; white-space: nowrap; }
.hs-tag.is-promo { border-radius: 3px; color: var(--on-accent); background: var(--sat-deep); border-color: var(--sat-deep); }

/* ---------- 多屆上榜 ---------- */
.hs-rp-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.hs-rp { border: 1px solid var(--line); padding: 0.8rem 0.9rem; background: var(--paper); }
.hs-rp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.55rem; }
.hs-rp-name { font-family: var(--f-mincho); font-size: 1.05rem; font-weight: 600; }
.hs-rp-count { font-size: 0.72rem; color: var(--ink-mid); }
.hs-rp-line { list-style: none; padding: 0 0 0 0.9rem; margin: 0; position: relative; }
.hs-rp-line::before { content: ''; position: absolute; left: 0.27rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--line-strong); }
.hs-rp-line { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 0.5rem; }
.hs-rp-line.has-term { grid-template-columns: max-content max-content minmax(0, 1fr) max-content; }
.hs-rp-line li { position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; font-size: 0.8rem; padding: 0.12rem 0; }
.hs-rp-line li::before {
  content: ''; position: absolute; left: -0.9rem; top: 0.5em; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--stone-white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.hs-rp-line li.r1::before { background: var(--stone-black); box-shadow: none; }
.hs-rp-year { font-variant-numeric: tabular-nums; color: var(--ink-mid); }
.hs-rp-term { font-variant-numeric: tabular-nums; color: var(--ink-mid); text-align: right; }
.hs-rp-div { color: var(--ink-soft); min-width: 0; }
.hs-rp-rank { color: var(--ink); white-space: nowrap; }
.hs-rp-line li.r1 .hs-rp-rank { font-weight: 600; }

.hs-more {
  display: block; margin: 1rem auto 0; font: 0.8rem var(--f-sans); letter-spacing: 0.08em;
  padding: 0.45rem 1.2rem; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line-strong); cursor: pointer;
}
.hs-more:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- 來源 ---------- */
.hs-sources { font-size: 0.8rem; color: var(--ink-mid); }
.hs-sources summary { cursor: pointer; padding: 0.4rem 0; }
.hs-sources ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.hs-sources li { display: flex; gap: 0.8rem; padding: 0.2rem 0; }
.hs-sources li span { font-variant-numeric: tabular-nums; color: var(--ink-light); flex: none; }
.hs-sources a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); }

/* ---------- tooltip ---------- */
.hs-tip {
  position: absolute; z-index: 50; pointer-events: none; white-space: pre-line;
  background: var(--ink); color: var(--paper); font-size: 0.76rem; line-height: 1.55;
  padding: 0.4rem 0.6rem; box-shadow: var(--shadow-lg); max-width: 14rem;
}

/* ---------- 手機 ---------- */
@media (max-width: 860px) {
  .hs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-kpi:nth-child(3) { border-left: 0; padding-left: 0; }
  .hs-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hs-kpi:nth-child(2n) { padding-right: 0; }
  .hs-bar-track { height: 8rem; }
  .hs-champ tbody th { width: 4.5rem; }
}

/* 冠軍表：得獎者超過 8 位時收起 */
.hs-champ-more { margin-top: 0.25rem; }
.hs-champ-more summary { font-size: 0.72rem; color: var(--ink-mid); cursor: pointer; list-style: none; padding: 0.15rem 0; }
.hs-champ-more summary::-webkit-details-marker { display: none; }
.hs-champ-more summary::before { content: '＋ '; }
.hs-champ-more[open] summary::before { content: '－ '; }
.hs-champ-more[open] summary { margin-bottom: 0.2rem; }