/* Article "Median household income in the US" (js/art-median-household-income.js). Classes hi-*. */

.hi-plot-mm { min-height: 380px; }
.hi-plot-fan { min-height: 440px; }
.hi-plot-slope { min-height: 420px; }
.hi-plot-age { min-height: 360px; }
@media (max-width: 640px) {
  .hi-plot-mm { min-height: 300px; } .hi-plot-fan { min-height: 340px; }
  .hi-plot-slope { min-height: 360px; } .hi-plot-age { min-height: 300px; }
}

/* the ladder: one hue, stronger toward the top */
.hi-band { fill: var(--s1); stroke: none; }
.hi-band.b0 { fill-opacity: 0.06; }
.hi-band.b1 { fill-opacity: 0.12; }
.hi-band.b2 { fill-opacity: 0.19; }
.hi-band.b3 { fill-opacity: 0.28; }
.hi-band.b4 { fill-opacity: 0.4; }
.sw-sq.hi-band { background: var(--s1); }
.sw-sq.hi-band.b0 { opacity: 0.12; }
.sw-sq.hi-band.b1 { opacity: 0.22; }
.sw-sq.hi-band.b2 { opacity: 0.34; }
.sw-sq.hi-band.b3 { opacity: 0.5; }
.sw-sq.hi-band.b4 { opacity: 0.7; }
:root[data-theme="dark"] .hi-band.b0, :root[data-theme="black"] .hi-band.b0 { fill-opacity: 0.12; }
:root[data-theme="dark"] .hi-band.b1, :root[data-theme="black"] .hi-band.b1 { fill-opacity: 0.2; }
:root[data-theme="dark"] .hi-band.b2, :root[data-theme="black"] .hi-band.b2 { fill-opacity: 0.3; }
:root[data-theme="dark"] .hi-band.b3, :root[data-theme="black"] .hi-band.b3 { fill-opacity: 0.42; }
:root[data-theme="dark"] .hi-band.b4, :root[data-theme="black"] .hi-band.b4 { fill-opacity: 0.56; }
:root[data-theme="dark"] .sw-sq.hi-band.b0, :root[data-theme="black"] .sw-sq.hi-band.b0,
:root[data-theme="dark"] .hi-seg.s0, :root[data-theme="black"] .hi-seg.s0 { opacity: 0.22; }
:root[data-theme="dark"] .sw-sq.hi-band.b1, :root[data-theme="black"] .sw-sq.hi-band.b1,
:root[data-theme="dark"] .hi-seg.s1, :root[data-theme="black"] .hi-seg.s1 { opacity: 0.32; }
.hi-rung { fill: none; stroke: var(--s1); stroke-width: 1.4; stroke-opacity: 0.75; stroke-linejoin: round; }
.hi-rung.top { stroke-width: 2.4; stroke-opacity: 1; }

/* two ladders */
.hi-rail { stroke: var(--axis); stroke-width: 2; stroke-linecap: round; }
.hi-year { fill: var(--ink); font: 700 13px var(--mono); }
.hi-slope { stroke: var(--s1); stroke-width: 2.2; stroke-linecap: round; stroke-opacity: 0.55; }
.hi-slope.r3 { stroke-opacity: 0.8; }
.hi-slope.r4 { stroke-width: 3; stroke-opacity: 1; }
.hi-slope.on { stroke-width: 4; stroke-opacity: 1; }
.hi-tick { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.hi-val { fill: var(--ink); font: 600 12px var(--mono); font-variant-numeric: tabular-nums; }
.hi-chg { fill: var(--good); font-weight: 650; }
.hi-name { fill: var(--muted); font: 500 11px var(--font); }

/* by age */
.hi-plot-age .bar.c1 { fill-opacity: 0.8; }
.hi-plot-age .bar.c1.on { fill-opacity: 1; }
.hi-then-ln { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-opacity: 0.55; }
.sw-sq.hi-then { background: var(--ink); opacity: 0.55; height: 3px; border-radius: 2px; }
.hi-bar-lbl { fill: var(--ink); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.hi-axis { fill: var(--muted); font: 500 11px var(--font); }

/* where does an income rank */
.hi-calc { margin-top: 8px; padding: 24px 28px 18px; }
.hi-calc-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hi-calc-box { display: inline-flex; align-items: center; gap: 6px; background: var(--track); border-radius: 14px; padding: 4px 14px; font: 600 22px var(--mono); color: var(--ink); }
.hi-calc-box input { width: 9ch; border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 6px 0; letter-spacing: -0.02em; }
.hi-calc-box:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.hi-calc-out { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); min-height: 3em; }
.hi-calc-out b { color: var(--ink); }
.hi-strip { position: relative; margin: 46px 4px 8px; }
.hi-strip-bar { position: relative; display: flex; height: 18px; border-radius: 9px; overflow: visible; }
.hi-seg { flex: 1; background: var(--s1); }
.hi-seg:first-child { border-radius: 9px 0 0 9px; }
.hi-seg:nth-child(5) { border-radius: 0 9px 9px 0; }
.hi-seg + .hi-seg { margin-left: 2px; }
.hi-seg.s0 { opacity: 0.12; } .hi-seg.s1 { opacity: 0.22; } .hi-seg.s2 { opacity: 0.34; } .hi-seg.s3 { opacity: 0.5; } .hi-seg.s4 { opacity: 0.7; }
.hi-top5 { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.hi-marker { position: absolute; top: -8px; width: 4px; height: 34px; margin-left: -2px; border-radius: 2px; background: var(--bad); box-shadow: 0 0 0 2px var(--surface); }
.hi-marker[hidden] { display: none; }
.hi-strip-lbl { position: relative; height: 34px; font: 500 11.5px var(--mono); color: var(--muted); }
.hi-strip-lbl span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.hi-strip-lbl span.med { top: -50px; color: var(--ink); font-weight: 600; }
.hi-calc-note { margin: 4px 0 0; }
@media (max-width: 560px) {
  .hi-calc { padding: 18px 18px 14px; }
  .hi-strip-lbl span { font-size: 10px; }
  .hi-strip-lbl span:nth-child(2), .hi-strip-lbl span:nth-child(4) { top: 20px; }
}

/* states table */
.hi-states .hi-rk { width: 2.6em; padding-right: 4px; color: var(--muted); text-align: right; }
.hi-states thead th:nth-child(2) { text-align: left; }

/* the legend keeps clear of the full-screen button in the corner */
.art.hi .chart .legend { padding-right: 44px; }