/* ═══════════════════════════════════════════════════════════════════
   Estatística de clicks — card do painel (no lugar do Monitor IA).
   Uma série por gráfico na cor s1 (chocolate); "hoje / esta semana" é a
   2ª série em s2 (verde). Texto sempre nos tokens de texto, nunca na cor
   da série. Tokens vêm do index.html / app.css / type.css.
   ═══════════════════════════════════════════════════════════════════ */
.clk { display: flex; flex-direction: column; min-height: 0; }
.clk .card__head { padding-bottom: 2px; }
.clk__badge { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface2); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
/* quantidade de clicks ao lado do título: número forte + período da aba */
.clk__count { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 4px; padding: 3px 10px; border-radius: 999px; background: var(--gold-bg); font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.clk__count:empty { display: none; }
.clk__count b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }

/* números-resumo: 3 por aba */
.clk__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px 18px 4px; }
.clk__stat { min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface2); }
.clk__stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk__stat b { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clk__stat b.is-soft { font-size: 13px; font-weight: 700; color: var(--text-muted); letter-spacing: 0; line-height: 1.6; }
.clk__stat small { display: block; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.clk__stat small .up { color: var(--ok); font-weight: 700; }
.clk__stat small .down { color: var(--bad); font-weight: 700; }

/* gráfico */
.clk__plot { position: relative; flex: 1 1 auto; min-height: 150px; padding: 2px 14px 0; }
.clk__plot > div:first-child { position: absolute; inset: 2px 14px 0; }
.clk__plot svg { width: 100%; height: 100%; display: block; font-family: var(--font-ui); overflow: visible; }
.clk__plot .axis text { fill: var(--text-muted); font-size: 10.5px; }
.clk__plot .axis text.sub { font-size: 9.5px; opacity: .8; }
.clk__plot .grid line { stroke: var(--border); stroke-width: 1; }
.clk__plot .bar { fill: var(--s1); }
.clk__plot .bar.dim { fill-opacity: .42; }
.clk__plot .bar.partial { fill: url(#clkHatch); }
.clk__plot .band { fill: var(--gold-bg); }
.clk__plot .band-lbl { fill: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.clk__plot .dl { fill: var(--text); font-size: 10.5px; font-weight: 700; }
.clk__plot .ref { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.clk__plot .ref-lbl { fill: var(--text-muted); font-size: 10px; font-weight: 700; }
.clk__plot .l2 { fill: none; stroke: var(--s2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.clk__plot .d2 { fill: var(--s2); stroke: var(--surface); stroke-width: 2; }
.clk__plot .l1 { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.clk__plot .a1 { fill: var(--s1); fill-opacity: .1; }
.clk__plot .d1 { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.clk__plot .lprev { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-opacity: .55; stroke-linejoin: round; }
.clk__plot .lproj { fill: none; stroke: var(--s1); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; stroke-opacity: .7; }
.clk__plot .out { fill: var(--text); }
.clk__plot .hit { fill: transparent; cursor: default; }
.clk__plot .hit:hover { fill: rgba(179, 2, 9, .07); }
[data-theme="dark"] .clk__plot .hit:hover { fill: rgba(255, 255, 255, .05); }
.clk__plot .cell { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.clk__plot .cell.is-top { stroke: var(--text); stroke-width: 1.5; }
.clk__legend { display: flex; justify-content: flex-end; gap: 12px; min-height: 16px; padding: 4px 18px 0; font-size: 11px; color: var(--text-muted); }
.clk__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; background: var(--s1); }
.clk__legend i.k2 { height: 2px; width: 12px; border-radius: 1px; background: var(--s2); vertical-align: 3px; }
.clk__legend i.kp { background: repeating-linear-gradient(45deg, var(--s1) 0 2px, transparent 2px 4px); }
.clk__legend i.kv { height: 2px; width: 12px; border-radius: 1px; background: var(--text-muted); opacity: .6; vertical-align: 3px; }

/* tabela (mesmos números do gráfico, sem depender de hover) */
.clk__tbl { position: absolute; inset: 2px 14px 0; overflow: auto; display: none; }
.clk.is-tbl .clk__tbl { display: block; }
.clk.is-tbl .clk__plot > div:first-child { display: none; }
.clk.is-tbl .clk__legend { visibility: hidden; }
.clk__tbl table { width: 100%; border-collapse: collapse; font-size: 12px; }
.clk__tbl th, .clk__tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clk__tbl th:first-child, .clk__tbl td:first-child { text-align: left; }
.clk__tbl th { position: sticky; top: 0; background: var(--surface); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

/* rodapé: leitura + alternadores */
.clk__foot { display: flex; align-items: center; gap: 8px; padding: 6px 14px 12px 18px; min-height: 40px; }
.clk__note { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clk__note b { color: var(--text); font-weight: 700; }
.clk__foot .seg button { white-space: nowrap; }
.clk__ico { width: 28px; height: 28px; flex: none; border-radius: 8px; border: 0; background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.clk__ico:hover, .clk__ico.is-on { background: var(--surface2); color: var(--text); }
.clk__ico .ti { font-size: 16px; }
.clk__about { padding: 14px 18px 18px; font-size: 13px; line-height: 1.5; }
.clk__about p { margin: 0 0 10px; }
.clk__about ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
.clk__about li { margin-bottom: 6px; }
.clk__about li b { color: var(--text); }

/* ── Os 4 cards do meio do painel com o MESMO tamanho (grade 2×2) ──── */
:root { --quad-h: 430px; }
.row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1101px) {
  .row2 > .card, .row-rank > .card { height: var(--quad-h); overflow: hidden; }
  #chartCard { display: flex; flex-direction: column; }
  #chartCard .chart { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
  #chartCard #chartSvg { flex: 1 1 auto; min-width: 0; min-height: 0; }
  #chartCard .chart svg { height: 100%; }
  #chartCard .ctbl.on { flex: 0 1 auto; max-height: 150px; overflow: auto; }
  .row-rank .rank__list { overflow-y: auto; }
}
@media (max-width: 1100px) { .clk { min-height: 420px; } .row2 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .clk__plot.is-anim .bar { transform-box: fill-box; transform-origin: bottom; animation: clkGrow .45s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes clkGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}