/* ==========================================================================
   Embeddable charts (/embed/...): one chart on a bare page for an <iframe>.
   Defines the site tokens the chart stylesheets use (trade.css, trackers.css)
   without loading site.css, and redefines them for dark mode, following the
   reader's system setting. Loaded after the chart's own stylesheet.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #2A1B45;
  --mist: #F4F2F7;
  --paper: #FFFFFF;
  --accent: #6E42A6;
  --accent-dark: #5A3689;
  --accent-soft: #C9B8DE;
  --text: #1C1C19;
  --muted: #5D5B54;
  --line: #E4E1EA;
  --on-ink: #D8D2E0;
  --on-ink-muted: #A79BB5;
  --em-grid: #ECE8F1;
  --em-axis: #B9B2C6;
  --em-track: #F1EEF5;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ECE6F5;
    --mist: #1D1729;
    --paper: #15101F;
    --accent: #B395DB;
    --accent-dark: #C7B0E6;
    --accent-soft: #6E5A8C;
    --text: #E3DEEA;
    --muted: #ABA3B8;
    --line: #362C47;
    --em-grid: #2A2238;
    --em-axis: #554A68;
    --em-track: #251E33;
  }
  /* Series colours, lifted for a dark ground (same hues). */
  :root:not([data-theme="light"]) .tr, :root:not([data-theme="light"]) .em-trade { --tr-exports: #A07CD6; --tr-imports: #3FC2B1; }
  :root:not([data-theme="light"]) .tr-grid { stroke: var(--em-grid); }
  :root:not([data-theme="light"]) .tr-base, :root:not([data-theme="light"]) .tr-xtick { stroke: var(--em-axis); }
  :root:not([data-theme="light"]) .tr-dot, :root:not([data-theme="light"]) .tr-end { stroke: var(--paper); }
  :root:not([data-theme="light"]) .tr-col:hover .tr-hit, :root:not([data-theme="light"]) .tr-col.is-active .tr-hit { fill: rgba(255, 255, 255, 0.05); }
  :root:not([data-theme="light"]) .tr-tip { background: #F4F0FA; color: #1C1430; }
  :root:not([data-theme="light"]) .tk-status { background: #2A2338; color: #DDD5EA; border-color: #3A3049; }
  :root:not([data-theme="light"]) .tk-timeline::before, :root:not([data-theme="light"]) .tk-tl-item::before { filter: brightness(1.6); }
  :root:not([data-theme="light"]) .tk-tl-year span { color: var(--paper); }
}
/* ?theme=dark (or light) fixes the theme whatever the system says (the previews on /developers). */
:root[data-theme="dark"] {
  --ink: #ECE6F5;
  --mist: #1D1729;
  --paper: #15101F;
  --accent: #B395DB;
  --accent-dark: #C7B0E6;
  --accent-soft: #6E5A8C;
  --text: #E3DEEA;
  --muted: #ABA3B8;
  --line: #362C47;
  --em-grid: #2A2238;
  --em-axis: #554A68;
  --em-track: #251E33;
}
/* Series colours, lifted for a dark ground (same hues). */
:root[data-theme="dark"] .tr, :root[data-theme="dark"] .em-trade { --tr-exports: #A07CD6; --tr-imports: #3FC2B1; }
:root[data-theme="dark"] .tr-grid { stroke: var(--em-grid); }
:root[data-theme="dark"] .tr-base, :root[data-theme="dark"] .tr-xtick { stroke: var(--em-axis); }
:root[data-theme="dark"] .tr-dot, :root[data-theme="dark"] .tr-end { stroke: var(--paper); }
:root[data-theme="dark"] .tr-col:hover .tr-hit, :root[data-theme="dark"] .tr-col.is-active .tr-hit { fill: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .tr-tip { background: #F4F0FA; color: #1C1430; }
:root[data-theme="dark"] .tk-status { background: #2A2338; color: #DDD5EA; border-color: #3A3049; }
:root[data-theme="dark"] .tk-timeline::before, :root[data-theme="dark"] .tk-tl-item::before { filter: brightness(1.6); }
:root[data-theme="dark"] .tk-tl-year span { color: var(--paper); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.em {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.em a { color: var(--accent-dark); }
.em-frame { flex: 1; padding: 16px 16px 8px; min-width: 0; }

/* Credit line (always shown, links back to the full page). */
.em-credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.em-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink) !important; text-decoration: none; }
.em-brand img { border-radius: 3px; }
.em-brand:hover span { text-decoration: underline; }
.em-source a { font-weight: 600; }

/* Shared headings. */
.em-title { margin: 0; font-family: var(--font-serif); font-weight: 560; font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.em-sub { margin: 4px 0 0; font-size: 0.9rem; color: var(--muted); }
.em-meta, .em-note { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.em-kicker { margin: 0 0 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.em-h2 { margin: 18px 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* Trade: the chart fills the frame. */
.em-trade.tr { padding: 0; background: transparent; }
.em-trade .tr-chart-title { font-family: var(--font-serif); font-weight: 560; font-size: 1.2rem; }
.em-trade .tr-table thead th { background: var(--mist); }

/* Congress: stage bars. */
.em-figure { margin: 0; }
.em-figure figcaption { margin-bottom: 14px; }
.em-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.em-bar-row a { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); align-items: center; gap: 12px; padding: 3px 4px; border-radius: 3px; color: inherit; text-decoration: none; }
.em-bar-row a:hover, .em-bar-row a:focus-visible { background: var(--mist); }
.em-bar-row a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.em-bar-label { font-size: 0.86rem; color: var(--text); }
.em-bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.em-bar { display: block; height: 14px; min-width: 0; max-width: calc(100% - 3.5rem); border-radius: 0 4px 4px 0; background: var(--accent); }
.em-bar-value { font-size: 0.86rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 460px) {
  .em-bar-row a { grid-template-columns: 1fr; gap: 2px; }
}

/* Trackers: the site timeline, narrower. */
.em-head { margin-bottom: 16px; }
.em-timeline .tk-tl-card { background: var(--paper); }
@media (max-width: 640px) {
  .em-timeline .tk-timeline::before { left: 6px; }
  .em-timeline .tk-tl-year { padding-left: 28px; }
  .em-timeline .tk-tl-item { grid-template-columns: 1fr; gap: 0.3rem; padding-left: 28px; }
  .em-timeline .tk-tl-item::before { left: 0; top: 0.3rem; }
  .em-timeline .tk-tl-date { text-align: left; }
}

/* Issues: status card. */
.em-issue { max-width: 46rem; }
.em-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; }
.em-facts dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.em-facts dd { margin: 3px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.em-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.em-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--status, #9AA0A6); }
.em-overview { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.em-updates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.em-updates li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--text); }
.em-updates time { display: inline-block; min-width: 7.5rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }