/* Article "Hyperinflation: when prices run away" (pipeline/pages/art_hyperinflation.py,
   js/art-hyperinflation.js), on top of style.css and articles.css. One scale of
   inflation reds mixed from the theme's --cash, so every theme works; Cagan's
   pace (50% a month) in a deep wine of its own. Classes start with .hy-. */

.hy {
  --hy-c0: color-mix(in srgb, var(--s1) 34%, var(--surface));
  --hy-c1: var(--track);
  --hy-c2: color-mix(in srgb, var(--cash) 20%, var(--surface));
  --hy-c3: color-mix(in srgb, var(--cash) 40%, var(--surface));
  --hy-c4: color-mix(in srgb, var(--cash) 66%, var(--surface));
  --hy-c5: color-mix(in srgb, var(--cash) 92%, var(--surface));
  --hy-c6: color-mix(in srgb, var(--cash) 58%, #2a0010);
  --hy-na: var(--border);
}
:root[data-theme="dark"] .hy, :root[data-theme="black"] .hy {
  --hy-c1: color-mix(in srgb, var(--ink) 10%, var(--surface));
  --hy-c2: color-mix(in srgb, var(--cash) 30%, var(--surface));
  --hy-c3: color-mix(in srgb, var(--cash) 50%, var(--surface));
  --hy-c4: color-mix(in srgb, var(--cash) 74%, var(--surface));
  --hy-c6: color-mix(in srgb, var(--cash) 55%, #ff9ad5);
}
.hy-c0 { --c: var(--hy-c0); } .hy-c1 { --c: var(--hy-c1); } .hy-c2 { --c: var(--hy-c2); } .hy-c3 { --c: var(--hy-c3); }
.hy-c4 { --c: var(--hy-c4); } .hy-c5 { --c: var(--hy-c5); } .hy-c6 { --c: var(--hy-c6); }
rect.hy-c0, rect.hy-c1, rect.hy-c2, rect.hy-c3, rect.hy-c4, rect.hy-c5, rect.hy-c6,
circle.hy-c0, circle.hy-c1, circle.hy-c2, circle.hy-c3, circle.hy-c4, circle.hy-c5, circle.hy-c6 { fill: var(--c); }
.sw-sq.hy-c0, .sw-sq.hy-c1, .sw-sq.hy-c2, .sw-sq.hy-c3, .sw-sq.hy-c4, .sw-sq.hy-c5, .sw-sq.hy-c6 { background: var(--c); }
.sw-sq.hy-c1, .sw-sq.hy-c2 { box-shadow: inset 0 0 0 1px var(--border); }
.sw-sq.hy-cna { background: repeating-linear-gradient(45deg, var(--surface-2) 0 2px, var(--hy-na) 2px 3px); box-shadow: inset 0 0 0 1px var(--border); }
rect.hy-cna { fill: var(--surface-2); }
.hy-na-bg { fill: var(--surface-2); }
.hy-na-ln { stroke: var(--hy-na); stroke-width: 1.4; }
.bar.hy-b3, .sw-sq.hy-b3 { fill: var(--hy-c3); background: var(--hy-c3); }
.bar.hy-b4, .sw-sq.hy-b4 { fill: var(--hy-c4); background: var(--hy-c4); }
.bar.hy-b5, .sw-sq.hy-b5 { fill: var(--hy-c5); background: var(--hy-c5); }

/* flags */
.hy-flag { display: inline-block; width: 20px; height: 15px; margin-right: 7px; vertical-align: -0.2em; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--border); object-fit: cover; }
.hy-cty { display: inline-block; padding-left: 27px; text-indent: -27px; color: var(--ink); }
.hy-fimg { opacity: 0.95; }
.tip .hy-flag { width: 16px; height: 12px; margin-right: 3px; }

/* the heat grid */
.hy-plot-heat { min-height: 400px; }
.hy-dec { stroke: var(--grid); stroke-width: 1; }
.hy-rl { fill: var(--ink); font: 600 11.5px var(--font); }
.hy-ry { fill: var(--muted); font: 500 11px var(--mono); }
.hy-rowhl { fill: var(--hover); }
.hy-worst { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-opacity: 0.7; }
.hy-cellhl { fill: none; stroke: var(--ink); stroke-width: 2; }
.hy-tip-note { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.hy .tip { max-width: 300px; }

/* the count of countries */
.hy-cap { margin: 2px 10px 8px; font: 650 15px/1.35 var(--font); color: var(--ink); }

/* the worst years */
.hy-plot-top { min-height: 440px; }
.hy-stem { stroke: var(--axis); stroke-width: 1.4; }
.hy-dot { stroke: var(--surface); stroke-width: 2; }
.hy-val { fill: var(--ink-2); font: 500 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.hy-cagan { stroke: var(--hy-c6); stroke-width: 1.4; stroke-dasharray: 5 4; }
.hy-cagan-l { fill: var(--muted); font: 600 11px var(--font); }

/* the staircase */
.hy-plot-stairs { min-height: 380px; }
.hy-step { opacity: 0.9; }
.hy-stair { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-opacity: 0.55; stroke-linejoin: round; }
.hy-sl { fill: var(--ink); font: 600 12.5px var(--font); }
.hy-sl.em { font-weight: 700; }
.hy-ss { fill: var(--muted); font: 500 11px var(--font); }
.hy-st { fill: var(--ink); font: 600 12px var(--mono); }
.hy-sn { fill: var(--muted); font: 500 11.5px var(--font); }
.hy-val, .hy-cagan-l, .hy-st, .hy-sn { paint-order: stroke; stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; }
.hy-st.in { stroke: none; }
.hy-st.in.dk { fill: #fff; }
@media (max-width: 640px) {
  .hy-rl { font-size: 10.5px; }
  .hy-sl { font-size: 11.5px; }
  .hy-st { font-size: 11px; }
}

/* the table */
.hy-table th[scope="row"] { min-width: 170px; }

/* then and now */
.art > .hy-cards-wrap { margin-top: 8px; }
.hy-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.hy-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 16px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: box-shadow 0.15s ease; }
.hy-card a:hover { box-shadow: var(--shadow-lg); }
.hy-card-h { display: flex; align-items: center; font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.hy-card-h .hy-flag { width: 24px; height: 18px; margin-right: 9px; }
.hy-tn { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hy-then, .hy-now { display: flex; flex-direction: column; gap: 2px; }
.hy-then .label, .hy-now .label { margin: 0; }
.hy-big { font: 650 21px/1.1 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.hy-then .hy-big { color: var(--cash-ink); }
.hy-arrow { font-size: 18px; color: var(--muted); padding-bottom: 2px; }
.hy-strip { display: block; width: 100%; height: 14px; border-radius: 4px; overflow: hidden; }
.hy-strip-ax { display: flex; justify-content: space-between; margin-top: -6px; font: 500 10.5px var(--mono); color: var(--muted); }
.hy-card-sub { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .hy-card a { transition: none; } }