/* European Diaspora Index figure charts (charts/european-diaspora-index*.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). Cloned from charts/french-diaspora-base.css. */
: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 */
  --edi-pill-bg: #F1F4F8;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-border: rgba(15,23,42,0.10);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-on-bg: #0F172A;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-on-text: #FFFFFF;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-bg: #FFFFFF;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-border: rgba(15,23,42,0.12);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-shadow: 0 6px 24px rgba(15,23,42,0.14);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-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 */
  --edi-pill-bg: rgba(255,255,255,0.06);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-border: rgba(255,255,255,0.14);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-on-bg: #FFFFFF;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-pill-on-text: #0A1F44;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-bg: #12295A;  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-border: rgba(255,255,255,0.16);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-tip-shadow: 0 6px 24px rgba(0,0,0,0.45);  /* theme-guardrail-allow: chart-family token layer, both themes defined here */
  --edi-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: 1080px;
}
/* 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 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: 940px; }
.subtitle { font-size: 14.5px; line-height: 1.45; color: var(--mv-text-sec); font-weight: 500; max-width: 900px; }
.edi-controls { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.edi-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.edi-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mv-text-faint); min-width: 92px; }
.edi-pill {
  border: 1px solid var(--edi-pill-border); background: var(--edi-pill-bg); color: var(--mv-text-sec);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.edi-pill:hover { color: var(--mv-text); }
.edi-pill.is-on { background: var(--edi-pill-on-bg); color: var(--edi-pill-on-text); border-color: transparent; }
.edi-pill[disabled] { opacity: 0.45; cursor: default; }
.edi-pill .edi-count { margin-left: 6px; font-weight: 600; font-size: 12px; opacity: 0.72; font-variant-numeric: tabular-nums; }
.edi-pill.is-on .edi-count { opacity: 0.8; }
.edi-caption { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--mv-text-sec); }
.edi-plot { position: relative; margin-top: 8px; min-width: 0; }
.edi-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.edi-tip {
  position: absolute; pointer-events: none; z-index: 2; max-width: 280px;
  background: var(--edi-tip-bg); border: 1px solid var(--edi-tip-border); box-shadow: var(--edi-tip-shadow);
  border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.4; color: var(--mv-text);
}
.edi-tip b { font-weight: 800; }
.edi-tip .m { color: var(--mv-text-sec); font-weight: 500; }
.edi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--mv-text-sec); }
.edi-legend:empty { display: none; }
.edi-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.edi-note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--mv-text-sec); }
.edi-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.edi-kpi { padding: 11px 13px; border: 1px solid var(--edi-kpi-border); border-radius: 12px; min-width: 0; }
.edi-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; }
.edi-kpi .l { margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--mv-text-sec); }
.edi-error { margin-top: 16px; padding: 14px; border: 1px dashed var(--edi-pill-border); border-radius: 12px; font-size: 13px; 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; }
/* ?preview=1 — card thumbnails show the graphic only (charts/preview-crop.js
   convention); body[data-export-restore] turns the class off for PNG export. */
body.edi-preview .title, body.edi-preview .subtitle, body.edi-preview .edi-controls,
body.edi-preview .edi-caption, body.edi-preview .edi-note, body.edi-preview .edi-kpis,
body.edi-preview .edi-legend, body.edi-preview .footer { display: none !important; }
body.edi-export .edi-controls { display: none !important; }
body.edi-preview .outer { padding: 10px; }
body.edi-preview .card { padding: 14px 16px; box-shadow: none; }
body.edi-preview .edi-plot { margin-top: 0; }
@media (max-width: 700px) {
  .outer { padding: 12px; }
  .card { padding: 18px 16px 14px; }
  .title { font-size: 20px; }
  .edi-label { min-width: 100%; }
  .edi-kpis { grid-template-columns: repeat(2, 1fr); }
}