/* Shared alignment for summary metrics across the local previews. */
.analysis-page .analysis-kpi {
  padding-inline: 12px;
  text-align: center;
  min-width: 0;
}
.analysis-page .analysis-kpi-label {
  justify-content: center;
}
.analysis-page .analysis-kpi strong,
.analysis-page .analysis-kpi small {
  display: block;
  overflow-wrap: anywhere;
}
.analysis-page .analysis-kpi small { line-height: 1.6; }
.metrics > .metric { text-align: center; }
.metrics > .metric .metric-label,
.metrics > .metric .metric-foot {
  justify-content: center;
  gap: 8px;
}
.analysis-page .analysis-window-stats > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-width: 0;
}
.analysis-page .analysis-window-stats > div > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pos-creator-stats > div { text-align: center; }

/* Dashboard summary cards: hairline edges with a small, soft elevation. */
#dashboard-content > .metrics > .metric {
  border: 0.5px solid rgb(67 88 122 / 16%) !important;
  box-shadow: 0 2px 4px rgb(31 48 78 / 3%), 0 6px 16px rgb(31 48 78 / 4%);
}
.dark #dashboard-content > .metrics > .metric {
  border-color: rgb(180 198 227 / 18%) !important;
  box-shadow: 0 2px 5px rgb(0 0 0 / 12%), 0 6px 16px rgb(0 0 0 / 14%);
}

/* Trend totals: open metric row with hairline dividers, matching the overview. */
.analysis-page .analysis-window-stats.trend-window-stats {
  background: transparent;
  border: 0;
  border-block: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 0;
  gap: 0;
  box-shadow: none;
}
.analysis-page .trend-window-stats > div {
  padding-inline: 16px;
  border-inline-end: 1px solid var(--line);
}
.analysis-page .trend-window-stats > div:last-child { border-inline-end: 0; }
@media (min-width: 601px) and (max-width: 1100px) {
  .analysis-page .trend-window-stats > div:nth-child(3n) { border-inline-end: 0; }
  .analysis-page .trend-window-stats > div:nth-child(n + 4) {
    border-block-start: 1px solid var(--line);
    margin-top: 20px;
    padding-top: 20px;
  }
}
@media (max-width: 600px) {
  .analysis-page .analysis-window-stats.trend-window-stats { padding-block: 20px; }
  .analysis-page .trend-window-stats > div { padding-inline: 12px; }
  .analysis-page .trend-window-stats > div:nth-child(2n) { border-inline-end: 0; }
  .analysis-page .trend-window-stats > div:nth-child(n + 3) {
    border-block-start: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 16px;
  }
}
