/* =====================================================================
   Blog Automation – visitor statistics (Statistik page) and the "ideas first" dialog of automations.
   Colours only from theme.css tokens.
   ===================================================================== */

/* ---------- Statistik: visitor section ---------- */
.an-sec { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: var(--fs-lg, 18px); }
.an-sec:first-child { margin-top: 4px; }
.an-sec .ico { width: 20px; height: 20px; color: var(--accent); }
.an-sec .xs { margin-left: auto; font-weight: 400; }
.an-empty { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; }
.an-empty > .ico { flex: none; width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: 50%; background: var(--accent-50); color: var(--accent); }
.an-empty p { margin: 4px 0 0; max-width: 70ch; }
.an-top { margin-top: 16px; }
.an-top td { vertical-align: middle; }
.an-title { max-width: 420px; }
.an-title > a:first-child { color: var(--text); font-weight: 600; }
.an-title > a:first-child:hover { color: var(--accent); }
.an-ext { color: var(--text-3); margin-left: 4px; }
.an-ext:hover { color: var(--accent); }
.an-bar-h { width: 22%; }
.an-bar span { display: block; height: 6px; min-width: 4px; border-radius: 99px; background: var(--accent); }
@media (max-width: 700px) { .an-bar, .an-bar-h, .an-top th:nth-child(3), .an-top td:nth-child(3) { display: none; } .an-title { max-width: none; } }

/* ---------- Automations: "collect ideas first" dialog ---------- */
.au-first { display: flex; flex-direction: column; gap: 14px; }
.au-first-ico { align-self: flex-start; display: inline-flex; padding: 11px; border-radius: 50%; background: var(--coral-50); color: var(--coral); }
.au-first-ico .ico { width: 22px; height: 22px; }
.au-first > p { margin: 0; line-height: 1.55; }
.au-first-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.au-first-steps li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; }
.au-first-steps li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-50); color: var(--accent-700); font-weight: 700; font-size: var(--fs-sm); }
[data-mode="dark"] .au-first-steps li::before { color: var(--text); }
.au-first-steps b { font-size: var(--fs-sm); }
.au-first-steps span { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.45; }
.au-first .alert { margin: 0; }

/* ---------- Dashboard: "Most read (30 days)" ---------- */
.c-mostread .card-head h3 + .xs { margin-left: 8px; }
.c-mr { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.c-mr-kpis { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.c-mr-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.c-mr-kpis .xs { display: inline-flex; align-items: center; gap: 5px; }
.c-mr-kpis b { font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.c-mr-list { margin: 0; padding: 0; list-style: none; counter-reset: mr; display: flex; flex-direction: column; }
.c-mr-list li { counter-increment: mr; display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.c-mr-list li:first-child { border-top: 0; }
.c-mr-list li::before { content: counter(mr); flex: none; width: 22px; color: var(--text-3); font-weight: 600; font-size: var(--fs-sm); text-align: center; }
.c-mr-list a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.c-mr-list a:hover .c-mr-t { color: var(--accent); }
.c-mr-t { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-mr-n { flex: none; width: 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--fs-sm); }
.c-mr-bar { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.c-mr-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
@media (max-width: 700px) { .c-mr { grid-template-columns: 1fr; } .c-mr-kpis { flex-direction: row; gap: 28px; } .c-mr-n { width: 70px; } }