/* French diaspora figure charts (charts/french-diaspora-*.html) — shared family
   stylesheet. Canvas pair per Embed Contract §1 (F1F4F8 light / 001234 dark).
   Light is the default; dark via [data-theme="dark"] (set by embed-contract.js). */
:root {
  --mv-bg: #F1F4F8;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-card: #FFFFFF;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.04);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-card-border: transparent;
  --mv-text: #0F172A;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-text-sec: #475569;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-text-faint: #94A3B8;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-footer-border: rgba(0,0,0,0.08);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --fd-kpi-border: rgba(15,23,42,0.08);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
}
[data-theme="dark"] {
  --mv-bg: #001234;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-card: #0A1F44;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-card-shadow: none;
  --mv-card-border: rgba(255,255,255,0.08);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-text: #FFFFFF;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-text-sec: rgba(255,255,255,0.82);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-text-faint: rgba(255,255,255,0.5);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --mv-footer-border: rgba(255,255,255,0.08);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --fd-kpi-border: rgba(255,255,255,0.10);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--mv-bg);
  color: var(--mv-text);
  -webkit-font-smoothing: antialiased;
}
.outer { padding: 24px; display: flex; justify-content: center; }
.card {
  background: var(--mv-card);
  border: 1px solid var(--mv-card-border);
  box-shadow: var(--mv-card-shadow);
  border-radius: 18px;
  padding: 26px 30px 18px;
  width: 100%;
  max-width: 1000px;
}
/* In-card headline: the card is what people screenshot and download, so it
   carries its own title. On a standalone /resources/<id>/ page the host hides
   it when it duplicates the page H1 (hideDuplicateTitle) and restores it for
   PNG export; inside the story it stays visible. */
.title { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.018em; line-height: 1.18; color: var(--mv-text); max-width: 900px; }
.subtitle { font-size: 14.5px; line-height: 1.45; color: var(--mv-text-sec); font-weight: 500; max-width: 860px; }
.fd-chart { position: relative; min-width: 0; margin-top: 16px; }
.fd-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.fd-kpi { padding: 11px 13px; border: 1px solid var(--fd-kpi-border); border-radius: 12px; min-width: 0; }
.fd-kpi .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--mv-text); font-variant-numeric: tabular-nums; }
.fd-kpi .l { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--mv-text-sec); }
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mv-footer-border);
}
.source { font-size: 12px; line-height: 1.4; color: var(--mv-text-faint); font-weight: 500; }
.logos { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.dr-logo { display: block; height: 26px; width: 110px; }
.dr-logo svg { width: 110px; height: 26px; display: block; }
[data-theme="light"] .dr-logo.is-dark { display: none; }
[data-theme="dark"]  .dr-logo.is-light { display: none; }
@media (max-width: 700px) {
  .outer { padding: 12px; }
  .card { padding: 18px 16px 14px; }
  .fd-kpis { grid-template-columns: repeat(2, 1fr); }
}