/* Article "US unemployment rate" (/articles/unemployment-rate/), on top of
   style.css and articles.css. Classes start with .un-. Unemployment is drawn in
   the loss color (--bad) on a light-to-dark scale; recessions in ink. */

.un-plot-cal { min-height: 380px; }
.un-plot-rr { min-height: 460px; }
.un-plot-who { min-height: 300px; }

/* heat calendar: seven steps of --bad over the card's surface */
.un-cell { fill: var(--bad); }
.un-c0 { fill-opacity: 0.15; }
.un-c1 { fill-opacity: 0.27; }
.un-c2 { fill-opacity: 0.41; }
.un-c3 { fill-opacity: 0.56; }
.un-c4 { fill-opacity: 0.71; }
.un-c5 { fill-opacity: 0.86; }
.un-c6 { fill-opacity: 1; }
.un-cell.on, .un-miss.on { stroke: var(--ink); stroke-width: 2; }
.un-miss { fill: none; stroke: var(--axis); stroke-width: 1; stroke-dasharray: 2 2; }
.un-recdot { fill: var(--ink); pointer-events: none; }
.un-dec { fill: var(--ink); font: 650 13px/1 var(--font); letter-spacing: -0.01em; }
.un-mon { fill: var(--muted); font: 500 9px/1 var(--mono); }
.un-yr { fill: var(--muted); font: 500 9px/1 var(--mono); }
.un-scale .sw-sq { border-radius: 3px; }
.sw-sq.un-c0, .sw-sq.un-c1, .sw-sq.un-c2, .sw-sq.un-c3, .sw-sq.un-c4, .sw-sq.un-c5, .sw-sq.un-c6 { background: var(--bad); }
.sw-sq.un-c0 { opacity: 0.15; } .sw-sq.un-c1 { opacity: 0.27; } .sw-sq.un-c2 { opacity: 0.41; }
.sw-sq.un-c3 { opacity: 0.56; } .sw-sq.un-c4 { opacity: 0.71; } .sw-sq.un-c5 { opacity: 0.86; }
.sw-sq.un-sw-miss { background: transparent; box-shadow: inset 0 0 0 1px var(--axis); }
.un-sw-rec { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--ink); }
.un-scale { gap: 6px 14px; }
.un-tip-d { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* recessions shaded on the line charts */
.un-band { fill: var(--ink); fill-opacity: 0.07; }
.sw-sq.un-sw-band { background: var(--ink); opacity: 0.14; }

/* rise and return */
.un-rdur { fill: var(--ink); fill-opacity: 0.1; }
.un-rise { fill: var(--bad); }
.un-back { fill: var(--ink); fill-opacity: 0.3; }
.un-open { fill: none; stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 3 3; }
.un-hi { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.un-rlab { fill: var(--ink); font: 650 13px/1 var(--mono); letter-spacing: -0.02em; }
.un-rtxt { fill: var(--ink-2); font: 500 12px/1 var(--font); }
.un-rowhi { fill: var(--hover); }
.sw-sq.un-sw-rise { background: var(--bad); }
.sw-sq.un-sw-back { background: var(--ink); opacity: 0.3; }
.sw-sq.un-sw-dur { background: var(--ink); opacity: 0.14; }

/* who is hit hardest */
.un-range { stroke: var(--ink); stroke-opacity: 0.1; stroke-width: 10; stroke-linecap: round; }
.dot.un-now { fill: var(--ink); }
.un-glab { fill: var(--ink-2); font: 500 13px/1 var(--font); }
.un-glab.all { fill: var(--ink); font-weight: 650; }
.un-gval { fill: var(--ink); font: 600 12px/1 var(--mono); }
.un-sep { stroke: var(--border); stroke-width: 1; }
.un-sw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.un-sw-dot.un-now { background: var(--ink); }
.un-sw-dot.c1 { background: var(--s1); }
.un-sw-dot.c2 { background: var(--s2); }
.un-sw-dot.c5 { background: var(--s5); }
.un-sw-range { display: inline-block; width: 22px; height: 8px; border-radius: 4px; background: var(--ink); opacity: 0.12; }

/* groups chart: its own switch above the legend */
.un-groups .un-seg { margin: 0 10px 10px; }
.un-no { color: var(--muted); }
.un-scroll { max-height: 460px; overflow: auto; }

/* keep legends clear of the full-screen button (articles.css pads them 10px) */
.art .chart.has-full > .legend, .art .chart.has-full > div > .legend { padding-right: 44px; }