/* Article "Strange things that happen in crises" (/articles/strange-things-in-crises/):
   its own pictures, on top of articles.css. Classes start with co-. The odd
   moment of every series is red (--bad); lines are ink; recessions a faint red band. */

/* ---------- the weirdness meter ---------- */
.co-meter { padding-top: 14px; }
.co-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 2px 52px 12px 10px; }
.co-scale-k { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.co-scale-bar { flex: 1 1 220px; max-width: 360px; }
.co-scale-bar .co-gauge { height: 6px; }
.co-scale-lbl { position: relative; height: 16px; margin-top: 3px; font: 500 10.5px/1 var(--mono); color: var(--muted); }
.co-scale-lbl span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.co-scale-lbl span:first-child { transform: none; }
.co-scale-lbl span:last-child { transform: translateX(-100%); }

.co-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 6px 6px; }
@media (max-width: 1000px) { .co-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 2px 4px; } }
.is-full .co-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.co-card { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 10px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.co-card-top { display: flex; align-items: baseline; gap: 8px; }
.co-rank { flex: none; font: 600 11px/1 var(--mono); color: var(--muted); }
.co-name { font: 650 15px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.co-when { margin: 3px 0 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.co-move { margin: 8px 0 2px; font: 600 24px/1.05 var(--mono); letter-spacing: -0.05em; color: var(--ink); white-space: nowrap; }
.co-what { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.co-from { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--mono); color: var(--ink-2); letter-spacing: -0.02em; }
.co-rec { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--bad); }
.co-rec::first-letter { text-transform: uppercase; }
.co-spark { margin: 8px 0 6px; min-height: 48px; }
.co-spark svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; outline: none; }
.co-gauge { position: relative; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.co-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--solid); }
:root[data-theme="dark"] .co-gauge-fill, :root[data-theme="black"] .co-gauge-fill { background: var(--ink-2); }
.co-gauge i { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface-2); opacity: 0.9; }
.co-x { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 7px 0 0; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.co-x b { font: 650 15px/1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.co-sig { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--muted); }
.co-tip { min-width: 0; width: max-content; max-width: min(260px, 90vw); }
.co-tip-odd { margin-top: 4px; font: 600 12px var(--mono); color: var(--bad); }
.co-spark-ln { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.co-spark-hot { fill: none; stroke: var(--bad); stroke-width: 2.4; stroke-linecap: round; }
.co-ev { fill: var(--bad); stroke: var(--surface-2); stroke-width: 1.5; }
.co-evline { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.45; }
.co-on { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.co-zero { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.co-table td, .co-table th { vertical-align: top; }
.co-wry { font-style: italic; }
.co-wry:empty { display: none; }

/* ---------- oil ---------- */
.co-plot-oil, .co-plot-oil08 { min-height: 300px; }
.sw-sq.co-sw-pos { background: color-mix(in srgb, var(--ink) 30%, var(--surface)); }
.sw-sq.co-sw-neg { background: var(--bad); }
.co-area-pos { fill: var(--ink); fill-opacity: 0.08; }
.co-area-neg { fill: var(--bad); fill-opacity: 0.28; }
.co-oil-ln { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.co-oil-ln.neg { stroke: var(--bad); stroke-width: 2.4; }
.tip-row svg .co-oil-ln { stroke-width: 2.4; }
.co-zero-strong { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.4; }
.co-zero-lbl { fill: var(--ink-2); font: 600 11px var(--mono); }
.co-mline { stroke: var(--grid); stroke-width: 1; }
.co-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.co-dot.neg { fill: var(--bad); }
.co-lbl { fill: var(--ink); font: 650 12.5px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.co-lbl.neg { fill: var(--bad); }

/* ---------- the seismograph ---------- */
.co-plot-seis { min-height: 360px; }
.sw-sq.co-sw-rec { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }
.ln.co-sw-old { stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 4 3; }
.co-band { fill: var(--bad); fill-opacity: 0.09; }
.co-band-lbl { fill: var(--bad); font: 600 10.5px var(--font); opacity: 0.85; }
.co-trace { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.tip-row svg .co-trace { stroke-width: 2; }
.co-needle { stroke: var(--bad); stroke-width: 2; stroke-linecap: round; }
.co-arrow { fill: var(--bad); }
.co-break { fill: none; stroke: var(--surface); stroke-width: 2.5; }
.co-cut { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 1 3; opacity: 0.6; }
.co-cut-lbl { fill: var(--bad); }
.co-off { fill: var(--bad); font: 650 12px var(--mono); letter-spacing: -0.02em; }
.co-old { stroke: var(--bad); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: 0.85; }
.co-old-lbl { fill: var(--bad); font: 600 10.5px var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.co-link { fill: none; stroke: var(--bad); stroke-width: 1.2; stroke-dasharray: 2 3; opacity: 0.7; }
.co-inset-bg { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.co-inset-title { fill: var(--ink); font: 650 12px var(--font); }
.co-inset-area { fill: var(--bad); fill-opacity: 0.16; }
.co-inset-ln { fill: none; stroke: var(--bad); stroke-width: 2; stroke-linejoin: round; }

/* ---------- the 2020 timeline ---------- */
.co-plot-tl { min-height: 560px; }
.sw-sq.co-sw-x { background: var(--bad); border-radius: 50%; }
.co-ref { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.4; }
.legend .co-ref { stroke-width: 1.6; opacity: 0.6; }
.co-yr { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.co-row-base { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.co-row-lbl { fill: var(--ink); font: 650 13px var(--font); }
.co-row-unit { fill: var(--muted); font: 500 11px var(--font); }
.co-tl-ln { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.co-x-dot { fill: var(--bad); stroke: var(--surface); stroke-width: 1.5; }
.co-x-lbl { fill: var(--bad); font: 650 11px var(--mono); letter-spacing: -0.02em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.co-plot-seis svg, .co-plot-tl svg, .co-plot-oil svg, .co-plot-oil08 svg { touch-action: pan-y; }

/* ---------- two records of unemployment's length ---------- */
.co-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.co-duo-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.co-duo-card .label { margin: 0; }
.co-duo-sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 560px) { .co-duo { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- the unmeasured ---------- */
.co-unm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 8px; }
.co-unm-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.co-unm-card b { font: 650 16px/1.25 var(--display); color: var(--ink); }
.co-unm-card > span:last-child { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.co-unm-tag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; font: 600 11px/1 var(--font); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); background: var(--track); }
@media (max-width: 760px) { .co-unm { grid-template-columns: minmax(0, 1fr); gap: 8px; } }