/* 成效分析 (insights-dashboard.js, mini-charts.js; redesign stage 3). Only the desk's tokens (app.css :root, theme.css
   dark): the heat levels and chart fills mix --blue into --canvas, so the dark theme follows without colours of its own. */
.insights-dashboard .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.insights-summary { display: grid; gap: 8px; }
.insights-summary h2, .insights-side h2, .platform-card h2, .compare h2, .rank h2, .growth h2 { margin: 0; }
.summary-lines { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0 0 0 18px; }
.summary-lines li::marker { color: var(--blue); }

.insights-overview { display: grid; gap: 16px; }
.insights-overview-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1180px) { .insights-overview-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } }
.platform-cards { display: grid; gap: 16px; min-width: 0; }

.platform-card { display: grid; gap: 12px; min-width: 0; }
.platform-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.platform-open { margin-left: auto; }
.platform-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px;
  background: var(--ink); color: var(--canvas); font-weight: 700;
}
.platform-mark.instagram { background: var(--red); }
.platform-mark.facebook { background: var(--blue); color: var(--canvas); }
.platform-mark.small { width: 22px; height: 22px; border-radius: 11px; font-size: 14px; vertical-align: middle; }
.platform-card-body { display: grid; gap: 14px; }
@media (min-width: 760px) { .platform-card-body { grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); } }
.platform-card-main { display: grid; gap: 10px; min-width: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kpi { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.kpi dt { color: var(--muted); font-size: 14px; }
.kpi dd { margin: 0; }
.kpi-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-change { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-change.is-up { color: var(--green); }
.kpi-change.is-down { color: var(--red); }
.kpi-change.is-none { color: var(--muted); }
/* Threads' 檔案瀏覽 under the four numbers when 貼文瀏覽 leads them (stage 4). */
.kpi-secondary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sparkline { display: block; width: 100%; height: 44px; }
.sparkline-line, .line-path { stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline-area, .line-area { fill: color-mix(in srgb, var(--blue) 14%, transparent); stroke: none; }
.chart-empty { margin: 0; }

.best-post { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--blue) 8%, var(--canvas)); }
.best-heading { margin: 0; color: var(--blue-dark); font-weight: 700; }
.best-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* A post with no stored text (6-09): its placeholder name reads quieter than a real title. */
.best-title.is-missing-text, .growth-title.is-missing-text, .rank-post.is-missing-text,
.insights-ranking-title.is-missing-text { color: var(--muted); font-weight: 400; }
.best-when { margin: 0; }
.best-numbers { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.insights-side { display: grid; gap: 18px; }
.insights-side section { display: grid; gap: 10px; }
.heatmap { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.heatmap th { color: var(--muted); font-size: 14px; font-weight: 700; text-align: center; }
.heatmap .heatmap-band { width: 28px; text-align: right; padding-right: 4px; font-variant-numeric: tabular-nums; }
.heatmap-cell { height: 26px; border-radius: 6px; }
.heat-0 { background: color-mix(in srgb, var(--line) 50%, transparent); }
/* Levels run from --line-strong to --blue, so in both themes an empty cell (--line, faded) stays the quietest. */
.heat-1 { background: color-mix(in srgb, var(--blue) 15%, var(--line-strong)); }
.heat-2 { background: color-mix(in srgb, var(--blue) 35%, var(--line-strong)); }
.heat-3 { background: color-mix(in srgb, var(--blue) 55%, var(--line-strong)); }
.heat-4 { background: color-mix(in srgb, var(--blue) 77%, var(--line-strong)); }
.heat-5 { background: var(--blue); }
.heatmap-cell.is-best { box-shadow: inset 0 0 0 2px var(--ink); }
.heatmap-key { display: flex; align-items: center; justify-content: center; gap: 4px; }
.heatmap-swatch { width: 22px; height: 12px; border-radius: 3px; }

.followers-total { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.followers-total strong { color: var(--blue); font-size: 28px; font-variant-numeric: tabular-nums; }
.bar-chart, .line-chart { display: block; width: 100%; height: auto; }
.bar { fill: var(--blue); }
.bar.is-negative { fill: var(--red); }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-value { fill: var(--ink); font-size: 11px; font-weight: 700; }
.chart-label { fill: var(--muted); font-size: 11px; }
.line-dot { fill: var(--blue); stroke: var(--canvas); stroke-width: 1.5; }

.insights-platform-detail { display: grid; gap: 16px; }
.detail-nav { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* min-width: 0 lets a grid item shrink to its column, so a wide table scrolls inside it instead of widening the card. */
.table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.compare, .rank, .growth { display: grid; gap: 10px; min-width: 0; }
.compare-table, .rank-table, .growth-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare-table th, .compare-table td, .rank-table th, .rank-table td, .growth-table th, .growth-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle;
}
.compare-table .num, .rank-table .num, .growth-table .num { text-align: right; white-space: nowrap; }
.compare-table thead th, .rank-table thead th, .growth-table thead th { color: var(--muted); font-size: 14px; }
.compare-table th.is-current { color: var(--ink); }
.rank-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1180px) { .rank-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } }
.rank-pair { display: grid; gap: 12px; min-width: 0; }
.rank-pair > .hint { margin: 0; }
.rank-badge {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-bg); color: var(--green); font-weight: 700;
}
.rank-badge.is-bottom { background: var(--red-bg); color: var(--red); }
.rank-post { display: block; padding: 0; min-height: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.rank-when { display: block; font-size: 14px; }
.rank-table tr.is-chosen { background: color-mix(in srgb, var(--blue) 8%, transparent); }
/* The seven windows as rows (stage 4): two columns fit the side panel; a label never breaks into single characters. */
.growth-table th, .growth-table td { padding: 6px 10px; }
.growth-table th { white-space: nowrap; }
.growth-title { margin: 0; font-weight: 700; }
.growth-total { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.growth-total strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.insights-table-mode { display: grid; gap: 10px; }