/* Article "Democracy and economic growth" (/articles/democracy-and-economic-growth/):
   its own pictures, on top of articles.css (and the original-sources list and
   flag styles of art-world-economy-history.css / art-economic-miracles.css
   where present). Classes start with dg-. Democracy is c1, non-democracy c2,
   decades with a change of regime c6 — the same everywhere on the page. */

.dg-rules { margin: 0 0 16px; padding-left: 22px; }
.dg-rules li { margin: 0 0 6px; }
.dg-vs { font-size: 0.5em; font-weight: 600; letter-spacing: 0; opacity: 0.7; margin: 0 0.15em; vertical-align: 0.35em; }
.dg-plot-spread { min-height: 300px; }
.dg-plot-rank { min-height: 420px; }
.dg-plot-pair { min-height: 260px; }
.dg-plot-ev { min-height: 300px; }
.dg-plot-surv { min-height: 300px; }
.dg-plot-lad { position: relative; min-height: 120px; }
.dg-plot-spread svg, .dg-plot-rank svg, .dg-plot-pair svg, .dg-plot-ev svg, .dg-plot-lad svg { touch-action: pan-y; }
.dg-seg { margin-top: 4px; }
.dg-tip-note { color: var(--muted); font-size: 11px; margin-top: 3px; }
.dg-flag { display: inline-block; width: 18px; height: 13px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--border); vertical-align: -1px; margin-right: 6px; }
.dg-tip-h { display: flex; align-items: center; }

/* shared marks */
.dg-zero { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2; stroke-dasharray: 3 3; }
.dg-zero-s { stroke: var(--axis); stroke-width: 1; }
.dg-row-on { fill: var(--hover); }
.dg-axis-t { fill: var(--muted); font: 500 11px var(--font); }

/* 1. the spread */
.dg-dot { fill-opacity: 0.42; stroke: none; }
.dg-dot.c1 { fill: var(--s1); } .dg-dot.c2 { fill: var(--s2); } .dg-dot.c6 { fill: var(--s6); fill-opacity: 0.55; }
.dg-dot-on { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dg-box { fill: none; stroke: var(--ink); stroke-opacity: 0.7; stroke-width: 1.4; }
.dg-whisk { stroke: var(--ink); stroke-opacity: 0.6; stroke-width: 1.3; }
.dg-med { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.dg-row-l { font: 500 12px var(--font); }
.dg-row-name { fill: var(--ink); font-weight: 650; font-size: 13px; }
.dg-row-sub { fill: var(--muted); font-family: var(--mono); font-size: 11px; }

/* 2. the fastest and the worst */
.dg-panel-t { fill: var(--ink); font: 650 13.5px var(--display); }
.dg-rank-n { fill: var(--ink-2); font: 500 12px var(--font); }
.dg-rank-y { fill: var(--muted); font: 500 10.5px var(--mono); }
.dg-rank-n.s { font-size: 11px; }
.dg-rank-n.s .dg-rank-y { font-size: 9.5px; }
.dg-pair-l.s { font-size: 11px; }
.dg-panel-n { fill: var(--muted); font: 500 11px var(--font); }
.dg-ev-v { fill: var(--ink); font: 650 12px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.dg-rbar.c1 { fill: var(--s1); } .dg-rbar.c2 { fill: var(--s2); } .dg-rbar.c6 { fill: var(--s6); }
.dg-rank-v { fill: var(--ink); font: 600 11.5px var(--mono); }

/* 3. medians: dumbbells */
.dg-pair-l { fill: var(--ink-2); font: 600 12px var(--font); }
.dg-pair-ln { stroke: var(--axis); stroke-width: 3; stroke-linecap: round; }
.dg-pdot { stroke: var(--surface); stroke-width: 2; }
.dg-pdot.c1 { fill: var(--s1); } .dg-pdot.c2 { fill: var(--s2); }
.dg-pair-v { fill: var(--ink); font: 600 11.5px var(--mono); }

/* 4. around changes of regime */
.dg-band { stroke: none; fill-opacity: 0.11; }
.dg-band.c1 { fill: var(--s1); } .dg-band.c2 { fill: var(--s2); }
.sw-sq.dg-sw-band { background: color-mix(in srgb, var(--s6) 30%, transparent); }
.dg-change { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.2; stroke-dasharray: 5 4; }
.dg-change-l { fill: var(--muted); font: 600 11px var(--font); }
.dg-hover { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; }

/* 5. the income ladder */
.dg-lad-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 2px 10px 8px 0; }
.art .chart.has-full > .dg-lad-head { padding-right: 44px; }
.dg-lad-head .legend { margin: 0; padding: 0; }
.dg-lad-head .seg { margin: 0; }
.dg-tile { stroke: none; }
.dg-tile.c1 { fill: var(--s1); } .dg-tile.c2 { fill: var(--s2); }
.dg-tile.on { stroke: var(--ink); stroke-width: 2; }
.dg-lad-base { stroke: var(--axis); stroke-width: 1; }
.dg-lad-h { fill: var(--ink); font: 600 11.5px var(--mono); }
.dg-lad-f { fill: var(--muted); font: 500 11px var(--mono); }

/* research: a timeline of studies, each with its question and short answer */
.dg-papers { list-style: none; margin: 8px 0 16px; padding: 0; position: relative; }
.dg-papers::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--track); }
.dg-paper { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
.dg-paper-y { position: relative; z-index: 1; align-self: start; justify-self: center; margin-top: 12px; padding: 3px 0; width: 52px; text-align: center; border-radius: 999px; background: var(--solid); color: #fff; font: 600 12px var(--mono); }
.dg-paper-b { padding: 12px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.dg-paper-b p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.dg-paper-b p + p { margin-top: 6px; }
.dg-paper-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dg-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--track); color: var(--ink-2); font: 600 11.5px var(--font); letter-spacing: 0.01em; }
.dg-t-grow .dg-tag { background: color-mix(in srgb, var(--s1) 16%, var(--surface)); color: var(--ink); }
.dg-t-inc .dg-tag { background: color-mix(in srgb, var(--s3) 20%, var(--surface)); color: var(--ink); }
.dg-verdict { font: 650 15px/1.3 var(--display); color: var(--ink); }
@media (max-width: 520px) {
  .dg-papers::before { left: 19px; }
  .dg-paper { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .dg-paper-y { width: 40px; font-size: 11px; }
  .dg-paper-b { padding: 10px 12px; }
}
/* limits */
.dg-limits { margin: 0 0 12px; padding-left: 20px; }
.dg-limits li { margin: 0 0 10px; line-height: 1.5; }
.dg-table td:first-child, .dg-table th:first-child { white-space: nowrap; }