/* ---------- analytics (.an-) ---------- */

/* Categorical slots 5–8 of the validated chart palette (1–4 are --series-1..4 in styles.css) and the
   de-emphasis grey used for "Other" / competitors. */
:root {
  --an-cat-5: #e87ba4;
  --an-cat-6: #008300;
  --an-cat-7: #4a3aa7;
  --an-cat-8: #e34948;
  --an-other: #a1a1aa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --an-cat-5: #d55181;
    --an-cat-6: #008300;
    --an-cat-7: #9085e9;
    --an-cat-8: #e66767;
    --an-other: #63636c;
  }
}
:root[data-theme="dark"] {
  --an-cat-5: #d55181;
  --an-cat-6: #008300;
  --an-cat-7: #9085e9;
  --an-cat-8: #e66767;
  --an-other: #63636c;
}

/* page bar */
.an-bar .page-bar-title { font-size: 15px; }
.an-acct-btn { max-width: 300px; gap: 8px; padding-left: 8px; }
.an-acct-btn > .ellipsis { max-width: 190px; }
.an-stack { flex: none; }
.an-stack .avatar > .pbadge { display: none; }
.an-stack-more { font-size: 9.5px; font-weight: 700; }
.an-range-btn { max-width: 100%; }
.an-btn-sub { color: var(--text-3); font-weight: 450; }
.an-acct-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.an-acct-meta:empty { display: none; }
.an-net-btn { gap: 8px; }

/* popovers (accounts, date range, help) */
.an-pop { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.an-acct-list { overflow-y: auto; max-height: min(46vh, 360px); display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.an-acct-all, .an-acct-group-head, .an-acct-row { display: flex; width: 100%; gap: 8px; border-radius: 6px; }
.an-acct-all { padding: 6px 6px 8px; border-bottom: 1px solid var(--border); border-radius: 0; }
.an-acct-group-head { padding: 5px 6px; font-size: 12px; font-weight: 650; color: var(--text-2); background: var(--surface-2); }
.an-acct-row { padding: 4px 6px 4px 14px; font-size: 13px; }
.an-acct-row:hover, .an-acct-group-head:hover { background: var(--hover); }
.an-acct-none { padding: 8px 6px; }
.an-pop-foot { border-top: 1px solid var(--border); padding-top: 8px; gap: 8px; flex-wrap: wrap; }
.an-range-menu { display: flex; flex-direction: column; gap: 1px; }
.an-range-menu .menu-item[aria-checked="true"] { font-weight: 600; }
.an-range-custom { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px; }
.an-range-custom .menu-label { padding: 2px 0; }
.an-range-inputs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.an-range-inputs .input { flex: 1 1 0; min-width: 0; }
.an-help-text { padding: 10px 12px; color: var(--text-2); line-height: 1.5; }

.an-strip-wrap:empty { display: none; }
.an-strip { gap: 4px 12px; }

/* refetch keeps the frame: dim the previous render instead of flashing skeletons */
.an-content { transition: opacity .15s ease; }
.an-refreshing { opacity: .5; pointer-events: none; }

/* KPI row: six equal cards (3 and 2 per row on narrower containers) */
.an-kpis-wrap { container-type: inline-size; min-width: 0; }
.an-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 540px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 720px) { .an-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.an-kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.an-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.an-kpi-label { font-size: 12.5px; font-weight: 550; color: var(--text-2); line-height: 1.3; }
.an-kpi-icon { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-3); }
.an-kpi-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; margin-top: auto; min-width: 0; }
.an-kpi-value { font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.an-kpi-change { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; font-size: 11.5px; text-align: right; }
.an-kpi-pct { font-weight: 650; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.an-kpi-abs { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-kpi-change.is-up .an-kpi-pct { color: var(--success-ink); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.an-kpi-change.is-down .an-kpi-pct { color: var(--danger-ink); background: color-mix(in srgb, var(--danger) 11%, var(--surface)); }
.an-kpi-change.is-flat .an-kpi-pct { color: var(--text-2); background: var(--surface-2); }
.an-kpi-note { font-size: 11.5px; color: var(--text-3); margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chart cards: metric dropdown as the title, help, table toggle, full screen */
.an-card-title { display: flex; align-items: center; gap: 2px; min-width: 0; }
.an-card-title h2 { font-size: 14px; }
.an-metric-title { font-size: 14px; margin: 0 0 0 -6px; min-width: 0; }
.an-metric-btn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; padding: 3px 6px; border: 0; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; text-align: left; }
.an-metric-btn:hover { background: var(--hover); }
.an-help { color: var(--text-3); }
.an-chart-card .card-header { min-height: 52px; }
.an-chart-card .card-header .toolbar { gap: 2px; }
.an-chart-card.is-table .card-body { padding: 0; }
.an-chart-card.is-table .an-chart-sub { padding: 12px 16px 0; }
.an-chart-sub { font-variant-numeric: tabular-nums; }
.an-axis-row { gap: 6px; }
.an-axis-btn { max-width: 100%; gap: 6px; }
.an-details summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-2); padding: 4px 0; }
.an-full-table { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.an-full .modal-body { padding-bottom: 24px; }

.an-card-tabs { margin-bottom: 12px; }
.an-card-tabs button { padding: 7px 10px; font-size: 13px; }
.an-card-tabs-wrap { padding: 4px 12px 0; }
.an-card-tabs-wrap .an-card-tabs { margin-bottom: 0; }

/* donut + legend */
.an-donut { display: flex; align-items: center; justify-content: center; gap: 16px 24px; flex-wrap: wrap; }
.an-donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; min-width: 0; max-width: 360px; }
.an-donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.an-donut-legend strong { font-variant-numeric: tabular-nums; }
.an-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-share-pct { width: 46px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* post cards (top posts, competitor posts) */
.an-post-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.an-post-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.an-post-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.an-post-card.is-static { cursor: default; }
.an-post-card.is-static:hover { background: var(--surface); }
.an-post-card-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.an-post-rank { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.an-post-card-text { flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.an-post-card-stats { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); min-width: 0; }
.an-stat { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.an-stat-value { font-size: 15px; font-weight: 700; }
.an-stat-label { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-stat-rest { font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.an-post-card-link { display: inline-flex; align-items: center; gap: 4px; }

/* tables */
.an-acct-link { color: inherit; text-decoration: none; min-width: 0; max-width: 260px; }
.an-acct-link:hover .strong { text-decoration: underline; }
.an-row-quiet td { color: var(--text-3); }
.an-row-own { background: var(--accent-soft); }
.an-min-180 { min-width: 180px; }
.an-max-160 { max-width: 160px; }
.an-post-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: left; color: var(--text); min-width: 220px; max-width: 420px; line-height: 1.4; overflow-wrap: anywhere;
}
.an-post-text:hover { color: var(--accent-ink); }
.an-share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.an-share-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.an-share-bar > span { display: block; height: 100%; background: var(--series-1); border-radius: 999px; }

/* best times */
.an-best-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.an-best-list > li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.an-best-rank { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.an-best-bar { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 4px 0 2px; }
.an-best-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--series-1); }
.an-callout-sm { padding: 8px 10px; font-size: 12.5px; }

@media (max-width: 760px) {
  .an-btn-sub { display: none; }
}
@media (max-width: 560px) {
  .an-bar .page-bar-sep { display: none; }
  .an-acct-btn { max-width: 100%; }
  .an-acct-btn > .ellipsis { max-width: 150px; }
  .an-post-text { min-width: 180px; }
  .an-kpi { padding: 10px 12px; }
  .an-kpi-value { font-size: 21px; }
  /* post cards become a horizontally scrolling row inside their card */
  .an-post-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .an-post-card { scroll-snap-align: start; }
}