/* ==========================================================================
   Insights articles: shared look, loaded LAST on every /insights/<slug> page.
   The five articles were converted separately and drifted; this file pins the
   two things that must match across them:
   1. Tag pills look like the hub's (.ins-pill in insights.css): first tag
      solid accent, the rest a neutral outline, sentence case.
   2. One centred 760px reading column (charts/tables inside it follow).
   ========================================================================== */

/* 1. Tag pills */
.ia-pill,
.ibh-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--v2-r-pill);
  border: 1px solid var(--v2-chip-border);
  background: transparent;
  font-size: var(--v2-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.2;
  color: var(--v2-text-muted);
}
.ia-pill.ia-pill--primary,
.ibh-pill.is-primary {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: #211E28;   /* fixed ink on accent fills, as the hub does */
}

/* 2. Reading column: 760px, centred */
.ia-wrap,
.ibh-col,
.ia-article .v2-container--narrow {
  max-width: calc(760px + 2 * var(--v2-gutter));
}

/* 3. "In short" summary and the "On this page" contents list. The contents list
      is generated from the article's H2s by scripts/seo_site.py (data-seo="toc");
      never edit it by hand. */
.ia-summary,
.ia-toc {
  margin: 0 0 40px;
  padding: 20px 24px;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-r-banner);
  background: var(--v2-card-bg);
}
.ia-summary { margin-bottom: 24px; }
.ia-summary p { margin: 0; font-size: var(--v2-fs-body); line-height: var(--v2-lh-body); color: var(--v2-text-body); }
.ia-summary .ia-summary__title,
.ia-toc__title {
  margin: 0 0 10px;
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-small);
  font-weight: 700;
  color: var(--v2-text);
}
.ia-toc__list {
  margin: 0;
  padding-left: 1.4em;
  font-size: var(--v2-fs-small);
  line-height: 1.5;
  color: var(--v2-text-muted);
}
.ia-toc__list li + li { margin-top: 6px; }
.ia-toc__list a {
  color: var(--v2-text-body);
  text-decoration: none;
}
.ia-toc__list a:hover,
.ia-toc__list a:focus-visible {
  color: var(--v2-accent-ink);
  text-decoration: underline;
}