/* 總覽分頁（charts.mjs）。配色已用 dataviz 驗證腳本跑過（表面 #fbf1e6）：
   收入 #0b84a5／流出 #c45a1c；對應依據：金額相等或退回 #2b7a4b、推測 #d08a1e、未分類用斜線。
   上限一律銅色：線＝算出來的上限，環＝PIP 內文寫的上限。 */
.ov {
  --ov-in: #0b84a5; --ov-out: #c45a1c; --ov-link: #2b7a4b; --ov-poss: #d08a1e;
  --ov-ink: var(--ink, #261C16); --ov-soft: var(--ink-soft, #5A4636);
  --ov-hair: rgba(107, 67, 34, .16); --ov-axis: rgba(107, 67, 34, .4); --ov-surface: #fbf1e6;
  display: flex; flex-direction: column; gap: 12px; padding: 10px; color: var(--ov-ink);
}
.ov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ov-kpi { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #fff5ea; border: 1px solid rgba(107, 67, 34, .22); min-width: 0; }
.ov-kl { font-size: 13px; font-weight: 700; color: var(--ov-soft); }
.ov-kv { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.ov-kv .ev { font-size: 24px; font-weight: 800; }
.ov-kv .unit { font-size: 14px; font-weight: 700; color: var(--ov-soft); }
.ov-two { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: baseline; }
.ov-two .ev, body[data-mode="phone"] .ov-two .ev { font-size: 20px; justify-self: start; }
.ov-two-tag { font-size: 12px; font-weight: 700; color: var(--ov-soft); }
.ov-ks { font-size: 13px; color: var(--ov-soft); line-height: 1.35; }
.ov-ks .ev { font-size: 13px; }
.ov-kpi .ov-link { margin-top: auto; padding-top: 4px; align-self: flex-start; }

.ov-card { container-type: inline-size; background: #fff5ea; border: 1px solid rgba(107, 67, 34, .22); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.ov-head { margin-bottom: 6px; }
.ov-title { margin: 0; font: 800 16px/1.3 ui-sans-serif, system-ui, sans-serif; color: var(--ov-ink); }
.ov-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ov-soft); max-width: 80ch; }
.ov-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.ov-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 6px 0; }
.ov-seg { display: inline-flex; border: 1.5px solid var(--ov-ink); border-radius: 8px; overflow: hidden; }
.ov-seg-btn { min-height: 34px; padding: 0 12px; border: 0; background: none; color: var(--ov-ink); font: 700 14px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.ov-seg-btn + .ov-seg-btn { border-left: 1.5px solid var(--ov-ink); }
.ov-seg-btn[aria-pressed="true"] { background: var(--ov-ink); color: #fff8ee; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ov-soft); margin: 4px 0; }
.ov-key { display: inline-flex; align-items: center; gap: 6px; }
.ov-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ov-sw.in { background: var(--ov-in); }
.ov-sw.out { background: var(--ov-out); }
.ov-sw.missing { border: 1.5px dashed var(--ov-axis); }
.ov-sw.linked { background: var(--ov-link); }
.ov-sw.possible { background: var(--ov-poss); }
.ov-sw.unc { background: repeating-linear-gradient(135deg, #cdb9a2 0 2px, #f3e3d0 2px 5px); border: 1px solid var(--ov-axis); }
.ov-sw.line { height: 3px; border-radius: 2px; background: var(--ov-ink); }
.ov-sw.lim { height: 3px; border-radius: 2px; background: var(--ov-out); }
.ov-sw.tri { width: 0; height: 0; border-radius: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--ov-in); }
.ov-sw.dot { border-radius: 50%; background: var(--ov-ink); }
.ov-sw.hollow { border-radius: 50%; border: 2px solid var(--ov-ink); }
.ov-sw.ring { border-radius: 50%; border: 2px solid var(--ov-out); }
.ov-sw.dia { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); border: 1.5px solid var(--ov-soft); background: var(--ov-surface); }
.ov-panel { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ov-soft); }

.ov-plot { width: 100%; min-width: 0; }
.ov-svg { display: block; overflow: visible; font-family: ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif; touch-action: manipulation; }
.ov-svg:focus { outline: none; }
.ov-svg:focus-visible { outline: 3px solid var(--gold-dark, #C97D3D); outline-offset: 3px; border-radius: 4px; }
.ov-grid { stroke: var(--ov-hair); stroke-width: 1; }
.ov-base { stroke: var(--ov-axis); stroke-width: 1; }
.ov-ax { font-size: 11.5px; fill: var(--ov-soft); }
.ov-lab { font-size: 12px; fill: var(--ov-ink); }
.ov-lab.strong { font-weight: 700; }
.ov-lab.lim { fill: #8a3d12; font-weight: 700; }
.ov-note { font-size: 11.5px; fill: var(--ov-soft); }
.ov-in { fill: var(--ov-in); }
.ov-out { fill: var(--ov-out); }
.ov-missing { fill: none; stroke: var(--ov-axis); stroke-width: 1; stroke-dasharray: 2 2; }
.ov-hatch-bg { fill: #f3e3d0; }
.ov-hatch-line { stroke: #d2bea6; stroke-width: 2; }
.ov-nocap { opacity: .7; }
.ov-selcol { fill: rgba(201, 125, 61, .14); }
.ov-line { fill: none; stroke: var(--ov-ink); stroke-width: 2; }
.ov-limit { fill: none; stroke: var(--ov-out); stroke-width: 2; }
.ov-tri { fill: var(--ov-in); }
.ov-dot { fill: var(--ov-ink); stroke: var(--ov-surface); stroke-width: 2; }
.ov-hollow { fill: var(--ov-surface); stroke: var(--ov-ink); stroke-width: 2; }
.ov-dia { fill: var(--ov-surface); stroke: var(--ov-soft); stroke-width: 1.5; }
.ov-ring { fill: none; stroke: var(--ov-out); stroke-width: 2; }
.ov-badge { fill: var(--ov-ink); }
.ov-badge-t { font-size: 11px; font-weight: 800; fill: #fff8ee; }
.ov-selring { fill: none; stroke: var(--gold-dark, #C97D3D); stroke-width: 2.5; }
.ov-band { fill: rgba(201, 125, 61, .08); }
.ov-cov.linked { fill: var(--ov-link); }
.ov-cov.possible { fill: var(--ov-poss); }
.ov-cov.unclassified { stroke: var(--ov-axis); stroke-width: 1; }
.ov-seglab { font-size: 11.5px; font-weight: 700; fill: var(--ov-ink); }
.ov-seglab.linked { fill: #fff; }
.ov-hit { fill: transparent; cursor: pointer; }

.ov-readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 2.4em; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(250, 236, 220, .7); font-size: 14px; line-height: 1.45; }
.ov-rh { font-weight: 800; }
.ov-rt { flex-basis: 100%; order: 0; }
.ov-ri { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.ov-rl { font-size: 12.5px; font-weight: 700; color: var(--ov-soft); }
.ov-dim { color: var(--ov-soft); }
.ov-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: rgba(90, 70, 54, .08); color: var(--ov-soft); border: 1px solid rgba(107, 67, 34, .3); }
.ov-chip.ok { background: rgba(31, 90, 58, .12); color: #1f5a3a; border-color: rgba(31, 90, 58, .35); }
.ov-chip.bad { background: rgba(217, 37, 76, .1); color: var(--danger-ink, #801A3A); border-color: rgba(128, 26, 58, .35); }
.ov-note-inline { flex-basis: 100%; font-size: 13px; color: var(--ov-soft); }
.ov-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ov-soft); }
.ov-notes .ov-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ov-ink); color: #fff8ee; font-size: 11px; margin-right: 6px; }
.ov-notes strong { color: var(--ov-ink); }
.ov-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.ov-link { padding: 0; min-height: 30px; border: 0; background: none; color: #3b1f8f; font: 700 14px/1.3 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.ov-tablebox { margin-top: 8px; max-height: 320px; overflow: auto; border: 1px solid rgba(107, 67, 34, .25); border-radius: 8px; }
.ov-tablewrap { overflow-x: auto; }
/* 半寬卡片（平板並排、手機）放不下全部欄位：平均 PVP 與成就數只在寬卡片顯示（數字在證據與 Council 統計裡都有）。 */
@container (max-width: 520px) {
  .ov-wide-only { display: none; }
  .ov-terms th { white-space: normal; }
  .ov-terms .ov-dates { font-size: 11.5px; }
}
.ov-terms th .ov-term { display: block; }
.ov-terms th .ov-dates { display: block; font-size: 12px; font-weight: 600; }
.ov-terms .ev { font-size: 15px; }
.ov-terms thead th { white-space: normal; vertical-align: bottom; }
body[data-mode="phone"] .ov-terms th { white-space: normal; }
body[data-mode="phone"] .ov-terms .ov-dates { font-size: 11.5px; }
body[data-mode="phone"] .ov { padding: 8px 6px; }
body[data-mode="phone"] .ov-kpis { grid-template-columns: 1fr 1fr; }
body[data-mode="phone"] .ov-kv, body[data-mode="phone"] .ov-kv .ev { font-size: 18px; }
body[data-mode="phone"] .ov-kv .unit { font-size: 12px; }
/* 兩個上限數字在手機半寬卡放不下（德文 13,99 Mio.），這張卡橫跨整列。 */
body[data-mode="phone"] .ov-kpi:has(.ov-two) { grid-column: 1 / -1; }
body[data-mode="phone"] .ov-card { padding: 10px; }
body[data-mode="phone"] .ov-wide-only { display: none; }
body[data-mode="phone"] .ov-pair { grid-template-columns: 1fr; }