/* Article "Inverted yield curve" (/articles/inverted-yield-curve/): its own
   pictures, on top of articles.css. Classes start with yc-. Treasury yields
   in the bonds color (--bond), inversions red (--bad), recessions gray. */

/* legend swatches */
.sw-sq.yc-sw-inv { background: var(--bad); opacity: 0.7; }
.sw-sq.yc-sw-rec { background: var(--track); box-shadow: inset 0 0 0 1px var(--axis); }
.sw-sq.yc-sw-recdot { background: var(--ink); border-radius: 50%; }
.sw-sq.yc-sw-win { background: color-mix(in srgb, var(--bond) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bond) 40%, transparent); }

/* plots */
.yc-plot-curve { min-height: 320px; }
.yc-plot-spread { min-height: 340px; }
.yc-plot-stripes { min-height: 220px; }
.yc-plot-lead { min-height: 380px; }
.yc-plot-curve svg, .yc-plot-spread svg, .yc-plot-stripes svg, .yc-plot-lead svg { touch-action: pan-y; }
.yc-recband { fill: var(--track); }
.yc-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.yc-tickln { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.yc-inv { fill: var(--bad); fill-opacity: 0.5; }
.yc-zero { stroke: var(--ink); stroke-width: 1.2; stroke-opacity: 0.55; }
.yc-hl { stroke: var(--ink-2); stroke-width: 1; opacity: 0.45; shape-rendering: crispEdges; }
.yc-row-lbl { fill: var(--ink-2); font: 600 11.5px var(--font); }
.yc-row-on { fill: var(--hover); }
.yc-mat { fill: var(--muted); font: 600 11px var(--mono); }
.yc-end { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.yc-end.sub { fill: var(--muted); font-weight: 500; }
.yc-rec { fill: color-mix(in srgb, var(--ink) 55%, var(--surface)); }
.yc-win { fill: color-mix(in srgb, var(--bond) 9%, var(--surface)); }
.yc-win-lbl { fill: var(--bond-ink); font: 600 10.5px var(--font); }
.yc-bar { fill: var(--bad); fill-opacity: 0.78; }
.yc-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.yc-dot.late { fill: var(--muted); }
.yc-open { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.yc-wait { stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 2 3; stroke-opacity: 0.6; }
.yc-link { stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.35; }
.yc-lbl { fill: var(--ink-2); font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; }
.yc-lbl.muted { fill: var(--muted); font-family: var(--font); font-weight: 500; }

/* stripes: nine steps from deeply inverted (red) to steep (blue) */
.yc-k0 { fill: var(--bad); }
.yc-k1 { fill: color-mix(in srgb, var(--bad) 72%, var(--surface)); }
.yc-k2 { fill: color-mix(in srgb, var(--bad) 48%, var(--surface)); }
.yc-k3 { fill: color-mix(in srgb, var(--bad) 28%, var(--surface)); }
.yc-k4 { fill: color-mix(in srgb, var(--bond) 12%, var(--surface)); }
.yc-k5 { fill: color-mix(in srgb, var(--bond) 30%, var(--surface)); }
.yc-k6 { fill: color-mix(in srgb, var(--bond) 52%, var(--surface)); }
.yc-k7 { fill: color-mix(in srgb, var(--bond) 76%, var(--surface)); }
.yc-k8 { fill: color-mix(in srgb, var(--bond) 100%, var(--ink) 12%); }
.yc-nodata { fill: var(--surface-2); }
.yc-strip-on { fill: none; stroke: var(--ink); stroke-width: 1.4; }

/* three shapes: steepest, most inverted, latest */
.yc-shapes .yc-shape-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 4px 6px 4px; }
@media (max-width: 680px) { .yc-shapes .yc-shape-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 2px; } }
.yc-shape { min-width: 0; padding: 12px 14px 8px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.yc-shape .label { display: block; }
.yc-shape-d { font: 650 15px/1.3 var(--display); color: var(--ink); margin-top: 2px; }
.yc-shape-v { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; flex-wrap: wrap; }
.yc-shape-v .num { font: 600 24px/1.1 var(--mono); letter-spacing: -0.05em; color: var(--ink); }
.yc-shape-v .label { font-size: 12px; }
.yc-shape[data-k="inv"] .yc-shape-v .num { color: var(--bad); }
.yc-shape-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; outline: none; }
.yc-shape-note { font: 500 11.5px var(--mono); color: var(--muted); margin-top: 2px; }
.yc-shape-tip { top: 0; min-width: 0; width: max-content; max-width: min(240px, 90vw); }

/* tables of inversions */
.art > .yc-table-h { margin: 22px auto 10px; padding: 0 4px; font: 650 17px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.yc-eps td.yc-after { text-align: left; white-space: normal; min-width: 150px; }
.yc-late { color: var(--muted); }
.yc-none { color: var(--ink); font-weight: 600; }
.yc-ch.up { color: var(--ink); }
.yc-ch.down { color: var(--ink); }