/* Article "US house prices and affordability" (/articles/home-affordability/),
   on top of style.css and articles.css. Homes are green (--home) everywhere. */

.ha-plot-price { min-height: 300px; }
.ha-plot-bricks { min-height: 320px; }
.ha-plot-map { min-height: 320px; }
.ha-plot-share, .ha-plot-long { min-height: 300px; }

/* years of income: one column of bricks per year */
.ha-brick { fill: var(--home); fill-opacity: 0.62; stroke: var(--surface); stroke-width: 2; }
.ha-brick.part { fill-opacity: 0.3; }
.ha-brick.now { fill-opacity: 1; }
.ha-brick.now.part { fill-opacity: 0.55; }
.ha-brick.on { fill-opacity: 0.9; }
.ha-brick.on.part { fill-opacity: 0.5; }
.ha-avg { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.7; }
.ha-avg-label { fill: var(--ink-2); font: 600 11px/1 var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ha-col-label { fill: var(--ink-2); font: 600 11px/1 var(--mono); }
.ha-col-label.now { fill: var(--ink); }
.ha-unit { fill: var(--muted); font: 500 11px/1 var(--font); }
.ln.ha-avg-sw { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0.7; }

/* the map: rate against years of income */
.ha-iso { fill: none; stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1.2; stroke-dasharray: 3 4; }
.ln.ha-iso-sw { stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.4; stroke-dasharray: 3 3; }
.ha-iso-label { fill: var(--muted); font: 600 10.5px/1 var(--mono); }
.ha-trail { fill: none; stroke: var(--home); stroke-opacity: 0.35; stroke-width: 1.2; stroke-linejoin: round; }
.ha-dot { fill: var(--home); stroke: var(--surface); stroke-width: 1.2; }
.ha-dot.now { stroke: var(--ink); stroke-width: 2; }
.ha-dot.on { stroke: var(--ink); stroke-width: 2; fill-opacity: 1 !important; }
.ha-dot-label { fill: var(--ink-2); font: 600 11px/1 var(--mono); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.ha-dot-label.now { fill: var(--ink); font-weight: 700; }
.ha-axis { fill: var(--muted); font: 500 11px/1 var(--font); }

/* then and now */
/* seven cards: one row on wide screens; four or two columns below, the latest card then spans two */
.ha-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
@media (max-width: 1099px) {
  .ha-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ha-cards > .ha-now:nth-child(7) { grid-column: span 2; }
  .ha-cards > .ha-now:nth-child(7) dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}
.ha-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; }
.ha-y { margin: 0; font: 650 26px/1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.ha-card dl { margin: 0; display: grid; gap: 7px; }
.ha-card dl > div { display: grid; gap: 1px; }
.ha-card dt { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.ha-card dd { margin: 0; font: 600 15px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ha-meter { margin-top: auto; padding-top: 4px; }
.ha-meter svg { display: block; width: 100%; height: 6px; }
.ha-track { fill: var(--track); }
.ha-card.dark .ha-track { fill: rgba(255, 255, 255, 0.16); }
:root[data-theme="paper"] .ha-card.dark .ha-track { fill: rgba(70, 50, 20, 0.14); }
.ha-fill { fill: var(--home); }
.ha-share { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.ha-share b { color: var(--ink); font: 650 13px var(--mono); }
.ha-cards-foot { max-width: var(--wide) !important; }
@media (max-width: 699px) {
  .ha-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ha-cards > .ha-now:nth-child(odd) { grid-column: 1 / -1; }
  .ha-cards > .ha-now:nth-child(odd) dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .ha-card { padding: 14px 14px 12px; }
  .ha-y { font-size: 22px; }
  .ha-card dd { font-size: 14px; }
}


/* the bar charts: the asset color, a shade calmer */
#ha-share .bar, #ha-pay .bar { fill-opacity: 0.78; }