/* The interactive figures: the shared panel parts (static/js/figkit.js). Each opens from its printed figure on the
   dark stage, and every figure draws with these tokens, so the six read as one system. */

:root {
  --fig-panel: #111822;           /* a panel on the stage */
  --fig-panel-2: #18212e;         /* a raised part inside a panel (chips, a selected row) */
  --fig-ink: #e8ebee;             /* text and strong marks */
  --fig-muted: #9aa4b2;           /* labels, axis text */
  --fig-faint: #5d6877;           /* ticks, quiet text */
  --fig-grid: rgba(255, 255, 255, 0.08);
  --fig-line: rgba(255, 255, 255, 0.14);
  --fig-seed: #a3acb8;            /* seed papers: the paper's grey, lightened for the dark ground */
  --fig-closure: #4ea3dd;         /* papers added through citations (closure): the paper's blue */
  --fig-accent: #a59cff;          /* what the reader can act on: links, the selected item (the template's purple) */
  --fig-warm: #ffb86b;            /* one emphasised item, such as "media bias" itself */
  --fig-good: #5cc8a1;
  --fig-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --fig-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------------------------------------------------------------- on the stage
   A panel opens from its printed figure, on the stage (mbdef.css): the stage's header names it and the printed
   caption explains it, so the panel is just the chart, what a click reveals, and the method one click away. */
.fig-stage .fig-panel { margin: 0; padding: 0.5rem 0 0; background: transparent; border: none; box-shadow: none; min-height: 16rem; }
.fig-stage .fig-panel.is-loading::after { left: 0; top: 0.5rem; }
.fig-stage .fig-panel.is-arriving, .fig-stage .fig-panel.is-settling { pointer-events: none; } /* the figure answers the pointer once it has arrived and the pointer has moved */
.fig-stage .fig-method { margin-top: 1.25rem; padding-top: 0.9rem; border-top: 1px solid var(--fig-grid); }

/* ---------------------------------------------------------------- a panel */
.fig-panel {
  position: relative;
  margin: 0 auto 2rem;
  padding: 1.6rem 1.75rem 1.25rem;
  background: var(--fig-panel);
  border: 1px solid var(--fig-line);
  border-radius: var(--border-radius-lg, 16px);
  color: var(--fig-ink);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  min-height: 12rem;
}
.fig-panel.is-loading::after {
  content: 'Loading…'; position: absolute; left: 1.75rem; top: 1.6rem;
  font-family: var(--fig-mono); font-size: 0.8rem; color: var(--fig-muted);
}
.fig-head { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.fig-head-text { min-width: 0; max-width: 720px; }
.fig-eyebrow {
  margin: 0 0 0.35rem; font-family: var(--fig-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fig-accent);
}
.fig-title { margin: 0; font-family: var(--fig-display); font-weight: 600; font-size: 1.75rem; line-height: 1.2; color: #fff; text-wrap: balance; }
.fig-lead { margin: 0.45rem 0 0; color: var(--fig-muted); font-size: 0.98rem; line-height: 1.55; }
.fig-lead b, .fig-note b { color: var(--fig-ink); }
.fig-stats { display: flex; gap: 1.5rem; flex: none; }
.fig-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 5.5rem; }
.fig-stat b { font-family: var(--fig-display); font-weight: 600; font-size: 1.9rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.fig-stat span { font-size: 0.8rem; color: var(--fig-muted); text-align: right; }
.fig-body { position: relative; min-width: 0; }
.fig-body svg { display: block; max-width: 100%; overflow: visible; }
/* defaults only where a figure sets none: a CSS rule would override the SVG's own fill and font-size attributes */
.fig-body text:not([fill]) { fill: var(--fig-muted); }
.fig-body text:not([font-size]) { font-size: 12px; }
.fig-body text:not([font-family]) { font-family: Inter, system-ui, sans-serif; }

.fig-notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.5rem;
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--fig-grid);
}
.fig-note { min-width: 0; }
.fig-note-k { display: block; font-family: var(--fig-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fig-faint); margin-bottom: 0.2rem; }
.fig-note p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--fig-muted); }
.fig-note i, .fig-lead i { color: var(--fig-ink); }

.fig-method { margin-top: 1rem; }
.fig-method summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--fig-accent);
}
.fig-method summary::-webkit-details-marker { display: none; }
.fig-method summary::before { content: '+'; font-family: var(--fig-mono); }
.fig-method[open] summary::before { content: '–'; }
.fig-method-body { margin-top: 0.6rem; font-size: 0.86rem; line-height: 1.6; color: var(--fig-muted); max-width: 820px; }
.fig-method-body p { margin: 0; }
.fig-method-body p + p, .fig-method-body p + ul, .fig-method-body ul + p { margin-top: 0.6rem; }
.fig-method-body code { background: var(--fig-panel-2) !important; color: var(--fig-ink) !important; padding: 0.05em 0.35em; border-radius: 4px; font-size: 0.85em; }
.fig-method-body a, .fig-note a, .fig-lead a { color: var(--fig-accent); }

.fig-fail { color: var(--fig-warm); font-size: 0.9rem; }

/* ---------------------------------------------------------------- shared controls */
.fig-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.fig-chip {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem; line-height: 1.2;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  color: var(--fig-muted); background: var(--fig-panel-2); border: 1px solid var(--fig-line);
}
.fig-chip:hover { color: var(--fig-ink); border-color: var(--fig-accent); }
.fig-chip[aria-pressed="true"] { color: #fff; background: rgba(165, 156, 255, 0.22); border-color: var(--fig-accent); }
.fig-chip:focus-visible, .fig-panel [tabindex]:focus-visible { outline: 2px solid var(--fig-accent); outline-offset: 2px; }
.fig-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.82rem; color: var(--fig-muted); margin: 0 0 0.75rem; }
.fig-legend i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -0.1em; }
.fig-link { color: var(--fig-accent) !important; font-weight: 600; font-size: 0.88rem; }
.fig-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the tooltip (one for the page) */
.fig-tip {
  position: fixed; z-index: 2000; max-width: 340px; pointer-events: none;
  padding: 0.6rem 0.75rem; border-radius: 10px;
  background: rgba(17, 24, 34, 0.97); border: 1px solid var(--fig-line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: var(--fig-ink); font-size: 0.84rem; line-height: 1.45;
  opacity: 0; transition: opacity 0.12s;
}
.fig-tip.on { opacity: 1; }
.fig-tip b { color: #fff; }
.fig-tip .k { color: var(--fig-muted); }

/* ---------------------------------------------------------------- small screens */
@media screen and (max-width: 768px) {
  .fig-panel { padding: 1.2rem 1rem 1rem; }
  .fig-head { flex-direction: column; gap: 0.75rem; }
  .fig-stats { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .fig-stat { align-items: flex-start; min-width: 0; }
  .fig-stat b { font-size: 1.45rem; }
  .fig-stat span { text-align: left; }
  .fig-title { font-size: 1.45rem; }
}