/* pages/analytics.css */
/* ---------- Analytics dashboard (F6) ---------- */
.an-shell { padding: var(--space-16) var(--space-24); display: grid; gap: var(--space-16); max-width: 1180px; }

/* KPI tiles */
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--space-12); }
.an-tile { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-12); padding: var(--space-16); display: grid; gap: var(--space-4); position: relative; overflow: hidden; }
.an-tile--accent { border-color: var(--accent-soft-border); }
.an-tile--accent::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--accent); }
.an-tile__label { font-size: var(--fs-label); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--fw-medium); }
.an-tile__value { font-size: var(--fs-title); font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.an-tile__sub { font-size: var(--fs-label); color: var(--text-muted); }
.an-tile--skel { gap: var(--space-10); }
.an-tile--skel .skeleton-row { height: 22px; }

/* Cards + grid */
.an-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-12); padding: var(--space-16); }
.an-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); flex-wrap: wrap; }
.an-card__title { margin: 0 0 var(--space-12); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); }
.an-card__head .an-card__title { margin: 0; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }

/* Legend */
.an-legend { display: flex; gap: var(--space-16); font-size: var(--fs-label); color: var(--text-tertiary); }
.an-lg { display: inline-flex; align-items: center; gap: var(--space-6); }
.an-dot { width: 9px; height: 9px; border-radius: var(--radius-4); display: inline-block; }

/* SVG trend chart */
.an-chart-wrap { position: relative; }
.an-svg { width: 100%; height: auto; display: block; overflow: visible; }
.an-grid-line { stroke: var(--border-subtle); stroke-width: 1; }
.an-ax-y { fill: var(--text-muted); font-size: var(--fs-micro); text-anchor: end; font-variant-numeric: tabular-nums; }
.an-ax-x { fill: var(--text-muted); font-size: var(--fs-micro); text-anchor: middle; font-variant-numeric: tabular-nums; }
.an-area { stroke: none; }
.an-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-end { stroke: var(--bg-surface); stroke-width: 1.5; }
.an-cross { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.an-hot { stroke: var(--bg-surface); stroke-width: 2; }
.an-tooltip { position: absolute; top: var(--space-6); pointer-events: none; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-8); box-shadow: var(--shadow-md); padding: var(--space-8) var(--space-10); font-size: var(--fs-label); color: var(--text-secondary); display: grid; gap: var(--space-4); min-width: 138px; z-index: 2; }
.an-tooltip strong { color: var(--text-primary); font-size: var(--fs-secondary); font-variant-numeric: tabular-nums; }
.an-tooltip span { display: flex; align-items: center; gap: var(--space-6); }
.an-tooltip b { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-tooltip i { width: 8px; height: 8px; border-radius: var(--radius-4); display: inline-block; flex: 0 0 auto; }
.an-tooltip__muted { color: var(--text-muted); }

/* Horizontal bars (magnitude / identity) */
.an-bars { display: grid; gap: var(--space-8); }
.an-bar-row { display: grid; grid-template-columns: minmax(80px, 150px) 1fr auto; align-items: center; gap: var(--space-12); }
.an-bar-row__label { font-size: var(--fs-secondary); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-row__track { height: 8px; background: var(--bg-input); border-radius: var(--radius-pill); overflow: hidden; }
.an-bar-row__fill { display: block; height: 100%; border-radius: var(--radius-pill); min-width: 3px; }
.an-bar-row__val { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-secondary); color: var(--text-primary); font-weight: var(--fw-medium); white-space: nowrap; }
.an-bar-row__val small { color: var(--text-muted); font-weight: var(--fw-normal); margin-left: var(--space-6); }

/* Activation funnel panel (S9 P2) — reuses .an-card/.an-bars, only the
   section itself needs a hook for the funnel-order (unsorted) rows above. */
.an-activation-funnel .an-bar-row__val small { margin-left: var(--space-8); }

@media (max-width: 900px) { .an-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .an-shell { padding: var(--space-12); } .an-bar-row { grid-template-columns: 90px 1fr auto; } }