/* Article "Federal Reserve interest rates" (/articles/fed-interest-rate-history/).
   Hikes and tight money in blue (--s1), cuts and loose money in orange (--s2): the
   same two hues in every chart of the article, a gray middle where a scale diverges. */

.art-plot.fr-plot-moves { min-height: 190px; }
.fr-plot-stairs { min-height: 320px; }
.fr-plot-sm { min-height: 360px; }
.fr-plot-heat { min-height: 260px; }
.fr-cyc-seg { margin-top: 4px; }

/* every move, in quarter-point bricks */
.fr-b { stroke: none; }
.fr-b-up { fill: var(--s1); fill-opacity: 0.86; }
.fr-b-dn { fill: var(--s2); fill-opacity: 0.86; }
.fr-b-part { fill-opacity: 0.5; }
.fr-b.on { fill-opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.fr-base { stroke: var(--axis); stroke-width: 1; }
.fr-run-y { fill: var(--ink); font: 650 12px/1 var(--font); }
.fr-run-n { fill: var(--muted); font: 500 11px/1 var(--font); }

/* the staircase */
.fr-step { fill: none; stroke: var(--line-gray); stroke-width: 1.3; stroke-linejoin: round; }
.fr-step.up { stroke: var(--s1); stroke-width: 2.2; }
.fr-step.dn { stroke: var(--s2); stroke-width: 2.2; }
.fr-step.on { stroke-width: 3.2; }
.fr-axis { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.fr-rec { fill: var(--ink); fill-opacity: 0.06; }
.sw-sq.fr-rec { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.fr-lbl { font: 600 10.5px/1 var(--mono); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.fr-cross { stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 1; }
.fr-dot { fill: var(--line-gray); stroke: var(--surface); stroke-width: 2; }
.fr-dot.up { fill: var(--s1); }
.fr-dot.dn { fill: var(--s2); }

/* small multiples */
.fr-sm-panel { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.fr-sm-panel.last { stroke: var(--ink); stroke-opacity: 0.35; }
.fr-sm-panel.on { stroke: var(--ink); stroke-opacity: 0.6; }
.fr-sm-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.fr-sm-yr { stroke: var(--axis); stroke-width: 1; }
.fr-sm-zero { stroke: var(--axis); stroke-width: 1; }
.fr-sm-tick { fill: var(--muted); font: 500 9.5px/1 var(--mono); }
.ln.fr-ghost { stroke: var(--muted); stroke-opacity: 0.45; stroke-width: 1.4; }
.fr-sm-ghost { fill: none; stroke: var(--muted); stroke-opacity: 0.22; stroke-width: 1; }
.fr-sm-ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fr-sm-ln.up, .fr-sm-end.up { stroke: var(--s1); }
.fr-sm-ln.dn, .fr-sm-end.dn { stroke: var(--s2); }
.fr-sm-end { fill: var(--surface); stroke-width: 2; }
.fr-sm-area { stroke: none; fill-opacity: 0.12; }
.fr-sm-area.up { fill: var(--s1); }
.fr-sm-area.dn { fill: var(--s2); }
.fr-sm-yrs { fill: var(--ink); font: 650 12.5px/1 var(--font); }
.fr-sm-v { fill: var(--ink); font: 600 12px/1 var(--mono); }
.fr-sm-dur { fill: var(--muted); font: 500 11px/1 var(--font); }

/* heat strip: the rate in one hue; after inflation two hues around a gray zero */
.fr-h { shape-rendering: crispEdges; }
.fr-h.on { stroke: var(--ink); stroke-width: 1.5; }
.fr-h.na { fill: var(--track); }
.fr-h.q0 { fill: color-mix(in srgb, var(--s1) 7%, var(--surface)); }
.fr-h.q1 { fill: color-mix(in srgb, var(--s1) 16%, var(--surface)); }
.fr-h.q2 { fill: color-mix(in srgb, var(--s1) 25%, var(--surface)); }
.fr-h.q3 { fill: color-mix(in srgb, var(--s1) 34%, var(--surface)); }
.fr-h.q4 { fill: color-mix(in srgb, var(--s1) 44%, var(--surface)); }
.fr-h.q5 { fill: color-mix(in srgb, var(--s1) 54%, var(--surface)); }
.fr-h.q6 { fill: color-mix(in srgb, var(--s1) 65%, var(--surface)); }
.fr-h.q7 { fill: color-mix(in srgb, var(--s1) 76%, var(--surface)); }
.fr-h.q8 { fill: color-mix(in srgb, var(--s1) 88%, var(--ink)); }
.fr-h.q9 { fill: color-mix(in srgb, var(--s1) 70%, var(--ink)); }
.fr-h.z { fill: color-mix(in srgb, var(--line-gray) 30%, var(--surface)); }
.fr-h.p1 { fill: color-mix(in srgb, var(--s1) 24%, var(--surface)); }
.fr-h.p2 { fill: color-mix(in srgb, var(--s1) 46%, var(--surface)); }
.fr-h.p3 { fill: color-mix(in srgb, var(--s1) 70%, var(--surface)); }
.fr-h.p4 { fill: color-mix(in srgb, var(--s1) 85%, var(--ink)); }
.fr-h.n1 { fill: color-mix(in srgb, var(--s2) 24%, var(--surface)); }
.fr-h.n2 { fill: color-mix(in srgb, var(--s2) 46%, var(--surface)); }
.fr-h.n3 { fill: color-mix(in srgb, var(--s2) 70%, var(--surface)); }
.fr-h.n4 { fill: color-mix(in srgb, var(--s2) 85%, var(--ink)); }
.fr-h-lbl { fill: var(--ink-2); font: 600 12px/1 var(--font); }
.fr-h-yr { fill: var(--muted); font: 500 10px/1 var(--mono); }
.fr-h-leg { fill: var(--ink-2); font: 600 11.5px/1 var(--font); }

/* the ranking: bars inside the table */
.fr-rank-table td.fr-bar-cell { text-align: left; min-width: 190px; width: 34%; }
.fr-bar-wrap { display: flex; align-items: center; gap: 10px; }
.fr-bar-track { flex: 1 1 auto; min-width: 70px; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.fr-bar { display: block; height: 100%; border-radius: 5px; background: var(--s1); }
.fr-bar-v { flex: none; min-width: 78px; text-align: right; font: 600 13px/1 var(--mono); color: var(--ink); }
.fr-rank-table thead th:nth-child(2), .fr-rank-table thead th.fr-bar-h { text-align: left; }
.fr-rank-table .fr-k { color: var(--muted); width: 2.2em; text-align: left; }
.fr-rank.fr-on > * { background: var(--surface-2); }
.fr-rank.fr-on th[scope="row"]::after { content: ""; }
.fr-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--track); color: var(--ink-2); font: 600 11px/1.4 var(--font); white-space: nowrap; }
.fr-nyfed { margin: 14px 0 0; font-size: 12px; line-height: 1.5; max-width: 82ch; }

@media (max-width: 560px) {
  .fr-rank-table td.fr-bar-cell { min-width: 150px; }
  .fr-bar-v { min-width: 70px; font-size: 12px; }
}