/* Article "The history of the world economy" (/articles/world-economy-history/):
   its own pictures, on top of articles.css. Classes start with wh-. The world is
   blue (c1), the UK orange (c2) on the staircase; regions keep one color each:
   East Asia c2, South Asia c3, Eastern Europe c4, Western Europe c1, the
   offshoots c5, and the three other regions in grays. */

.wh-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wh-plot-stick { min-height: 340px; }
.wh-plot-stair { min-height: 330px; }
.wh-plot-era { min-height: 300px; }
.wh-plot-stack { min-height: 340px; }
.wh-plot-csh { min-height: 300px; }
.wh-plot-ratio { min-height: 300px; }
.wh-plot-stick svg, .wh-plot-stair svg, .wh-plot-stack svg, .wh-sm svg { touch-action: pan-y; }

/* legend swatches */
.sw-sq.wh-sw-pre { background: var(--s6); border-radius: 50%; transform: scale(0.8); }
.sw-sq.wh-sw-era { background: var(--track); box-shadow: inset 0 0 0 1px var(--axis); }
.sw-sq.wh-g1 { background: color-mix(in srgb, var(--s6) 78%, var(--surface)); }
.sw-sq.wh-g2 { background: color-mix(in srgb, var(--s6) 55%, var(--surface)); }
.sw-sq.wh-g3 { background: color-mix(in srgb, var(--s6) 34%, var(--surface)); }
.sw-sq.wh-c0 { background: var(--track); }

/* the hockey stick */
.wh-era { fill: var(--track); opacity: 0.75; }
.wh-era-l { fill: var(--muted); font: 600 10.5px var(--font); }
.wh-pre { fill: none; stroke: var(--s6); stroke-width: 1.3; stroke-opacity: 0.6; stroke-linejoin: round; }
.wh-pre.on { stroke: var(--ink); stroke-width: 2.2; stroke-opacity: 1; }
.wh-pre-dot { fill: var(--s6); fill-opacity: 0.7; }
.wh-pre-dot.on { fill: var(--ink); fill-opacity: 1; }
.wh-w-dot { fill: var(--surface); stroke: var(--s1); stroke-width: 2.5; }
.wh-w-dot.on { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.wh-end { fill: var(--ink); font: 650 12px var(--mono); }
.wh-brace { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.wh-anno { fill: var(--ink-2); font: 600 12px var(--font); }
.wh-tip-h { display: flex; align-items: center; gap: 6px; }
.wh-tip-note { color: var(--muted); font-size: 11px; margin-top: 2px; }
.wh-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; }

/* the doubling staircase */
.wh-stair { stroke-linejoin: miter; stroke-linecap: square; }
.wh-tread { font: 600 11.5px var(--mono); }
.wh-tread.c1 { fill: var(--s1); } .wh-tread.c2 { fill: var(--btc-ink); }
.wh-tread.on { font-weight: 750; }
.wh-hot { stroke-width: 7; stroke-opacity: 0.28; stroke-linecap: round; }
.wh-hot.c1 { stroke: var(--s1); } .wh-hot.c2 { stroke: var(--s2); }
.wh-st-l { font: 600 11px var(--font); }
.wh-st-l.c1 { fill: var(--s1); } .wh-st-l.c2 { fill: var(--btc-ink); }

/* then and now */
.wh-thens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.wh-then { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.wh-then .label { margin: 0 0 2px; }
.wh-then-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wh-then-y { font: 600 13px var(--mono); color: var(--muted); }
.wh-then-row b { font: 650 22px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.wh-then-row:first-of-type b { font-size: 17px; color: var(--ink-2); font-weight: 600; }
.wh-then .pill { align-self: flex-start; margin-top: 2px; }
@media (max-width: 720px) { .wh-thens { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* regional shares */
.wh-band { stroke: var(--surface); stroke-width: 0.8; stroke-linejoin: round; fill-opacity: 0.88; }
.wh-band.c1 { fill: var(--s1); } .wh-band.c2 { fill: var(--s2); } .wh-band.c3 { fill: var(--s3); }
.wh-band.c4 { fill: var(--s4); } .wh-band.c5 { fill: var(--s5); }
.wh-band.wh-g1 { fill: color-mix(in srgb, var(--s6) 78%, var(--surface)); }
.wh-band.wh-g2 { fill: color-mix(in srgb, var(--s6) 55%, var(--surface)); }
.wh-band.wh-g3 { fill: color-mix(in srgb, var(--s6) 34%, var(--surface)); }
.wh-veil { fill: var(--surface); opacity: 0.32; }
.wh-grid { stroke: var(--surface); stroke-opacity: 0.55; stroke-width: 1; shape-rendering: crispEdges; }
.wh-yr { stroke: var(--ink-2); stroke-width: 1.2; }
.wh-end-l { fill: var(--ink-2); font: 600 11.5px var(--font); }
.wh-end-v { fill: var(--muted); font: 500 11px var(--mono); }
.wh-hover { stroke: var(--ink); stroke-width: 1.2; stroke-opacity: 0.7; }
.wh-one { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2; }
.wh-w-dot.on.c2 { fill: var(--s2); } .wh-w-dot.on.c3 { fill: var(--s3); } .wh-w-dot.on.c5 { fill: var(--s5); }

/* who had the largest economy */
.wh-rank { padding: 10px 18px 4px; }
.wh-rank-list { list-style: none; margin: 0; padding: 0; }
.wh-rank-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.wh-rank-row:last-child { border-bottom: 0; }
.wh-rank-y { grid-row: span 2; font: 700 22px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.wh-rank-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: wh; }
.wh-rank-chips li { counter-increment: wh; }
.wh-chip { display: inline-flex; align-items: center; gap: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--track); color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.wh-chip::before { content: counter(wh); font: 650 11px var(--mono); color: var(--muted); margin-right: 6px; }
a.wh-chip:hover { box-shadow: inset 0 0 0 1.5px var(--axis); }
.wh-chip .wh-flag { margin-right: 5px; }
.wh-chip-n { font-weight: 600; }
.wh-chip-v { margin-left: 7px; font: 500 12px var(--mono); color: var(--muted); }
.wh-chip.c1 { background: color-mix(in srgb, var(--s1) 15%, var(--surface)); }
.wh-chip.c2 { background: color-mix(in srgb, var(--s2) 18%, var(--surface)); }
.wh-chip.c3 { background: color-mix(in srgb, var(--s3) 18%, var(--surface)); }
.wh-chip.c5 { background: color-mix(in srgb, var(--s5) 15%, var(--surface)); }
.wh-rank-note { font-size: 11.5px; color: var(--muted); }
@media (max-width: 560px) {
  .wh-rank { padding: 6px 12px 2px; }
  .wh-rank-row { grid-template-columns: minmax(0, 1fr); }
  .wh-rank-y { grid-row: auto; font-size: 19px; }
  .wh-chip { font-size: 12.5px; padding: 4px 9px 4px 7px; }
}

/* nine countries on one scale */
.wh-sm { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 6px 4px; }
@media (max-width: 720px) { .wh-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 4px 2px; } }
.wh-sm-card { min-width: 0; padding: 10px 10px 4px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.wh-sm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 2px; }
.wh-sm-name { display: inline-flex; align-items: center; font: 650 14px/1.25 var(--display); color: var(--ink); min-width: 0; }
.wh-sm-val { font: 500 11.5px var(--mono); color: var(--muted); }
.wh-sm-plot { position: relative; }
.wh-sm-plot svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; }
.wh-sm-t { font-size: 9.5px; }
.wh-sm-tip { top: 0; min-width: 0; width: max-content; max-width: min(260px, 90vw); }
.is-full .wh-sm { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* original sources */
.wh-src { margin-top: 18px; }
.wh-src summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.wh-src h3 { font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
.wh-src-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.wh-src-list li { margin: 0 0 4px; }
.wh-src-list b { color: var(--ink); font-weight: 600; }