/* =====================================================================
   Blog Automation – charts (js/ui.js barChart / lineChart) and keyword chips
   HTML + CSS instead of a stretched SVG: labels stay sharp at every width. Colours only from theme.css tokens.
   ===================================================================== */
.bc { --x-h: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: var(--h, 220px); padding-top: 18px;
  font: 500 11.5px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.bc-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: var(--x-h); text-align: right; min-width: 18px; }
.bc-y span { transform: translateY(-50%); }
.bc-y span:last-child { transform: translateY(50%); }
.bc-plot { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--x-h); min-width: 0; }
.bc-grid { position: absolute; inset: 0 0 var(--x-h) 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.bc-grid i { border-top: 1px dashed var(--border); }
.bc-grid i:last-child { border-top: 1px solid var(--border-strong); }

/* bars */
.bc-cols { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(3px, 1.2%, 10px); align-items: end; margin: 0; padding: 0; list-style: none; }
.bc-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.bc-bar { position: relative; width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--accent) 55%, var(--surface)); transition: background .15s, height .45s cubic-bezier(.2, .8, .2, 1); }
.bc-col.now .bc-bar, .bc-col:hover .bc-bar { background: var(--accent); }
[data-mode="dark"] .bc-bar { background: color-mix(in srgb, var(--accent) 60%, var(--text-3)); }
[data-mode="dark"] .bc-col.now .bc-bar, [data-mode="dark"] .bc-col:hover .bc-bar { background: color-mix(in srgb, var(--accent) 80%, white); }
/* no value: a thin grey stub on the base line (also for today and on hover) */
.bc-cols .bc-col.zero .bc-bar, [data-mode="dark"] .bc-cols .bc-col.zero .bc-bar { height: 3px !important; background: var(--border-strong); border-radius: 2px; }

.bc-bar b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.bc-bar b.hov { opacity: 0; transition: opacity .12s; padding: 3px 6px; border-radius: 6px; background: var(--text); color: var(--surface); }
.bc-col:hover .bc-bar b.hov { opacity: 1; }
.bc-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(3px, 1.2%, 10px); align-items: end; }
.bc-x span { text-align: center; white-space: nowrap; overflow: visible; }
.bc-x span.now { color: var(--text); font-weight: 700; }

/* chart that grows with its card (dashboard) */
.bc-fill { height: auto; min-height: var(--h); flex: 1; }
.card:has(.bc-fill) { display: flex; flex-direction: column; }
.card:has(.bc-fill) > .card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* line */
.lc .bc-plot > .lc-svg, .lc-pts { position: absolute; inset: 0 0 var(--x-h) 0; width: 100%; height: calc(100% - var(--x-h)); }
.lc-svg { overflow: visible; }
.lc-area { fill: var(--accent); opacity: .12; }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lc-pts { margin: 0; padding: 0; list-style: none; }
.lc-pts li { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.lc-dot { position: absolute; left: 50%; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); opacity: 0; transition: opacity .12s; }
.lc-dot b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 7px; padding: 3px 6px; border-radius: 6px; background: var(--text); color: var(--surface); font-weight: 600; white-space: nowrap; }
.lc-pts li:hover .lc-dot, .lc-pts li:last-child .lc-dot { opacity: 1; }
.lc-pts li:last-child:not(:hover) .lc-dot b { display: none; }
.lc-x { position: relative; grid-row: 2; }
.lc-x span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.lc-x span:first-child { transform: none; }
.lc-x span:last-child { transform: translateX(-100%); }
.lc { container-type: inline-size; }
@container (max-width: 520px) { .lc-x span.alt { display: none; } }

@media (prefers-reduced-motion: reduce) { .bc-bar { transition: none; } }

/* ---------- keyword chips (Statistik → Top-Keywords) ---------- */
.kw-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kw { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 5px 0 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); font: 500 var(--fs-sm)/1 var(--font); max-width: 100%; }
.kw-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-n { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kw.top { border-color: var(--accent-100); background: var(--accent-50); color: var(--accent-700); }
.kw.top .kw-n { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
[data-mode="dark"] .kw { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
[data-mode="dark"] .kw-n { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }
[data-mode="dark"] .kw.top { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); }