/* Article "Is real estate a good investment?" (/articles/is-real-estate-a-good-investment/):
   its own pictures, on top of articles.css. Classes start with rl-. Homes and
   land in the home color, buildings gray, farm real estate in the darker home
   ink, busts a faint red, the price-to-rent cells aqua (below the average) and
   orange (above). Colors only from the theme variables. */

.rl-plot-flat { min-height: 320px; }
.rl-plot-land { min-height: 300px; }
.rl-plot-farm { min-height: 300px; }
.rl-plot-rent { min-height: 160px; }
.rl-plot-flat svg, .rl-plot-land svg, .rl-plot-farm svg, .rl-plot-rent svg, .rl-pan svg { touch-action: pan-y; }

/* shared marks */
.rl-base { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 4; }
.rl-guide { stroke: var(--axis); stroke-width: 1; }
.rl-on { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.rl-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.rl-end { stroke: var(--surface); stroke-width: 1.5; }
.rl-end.a-home { fill: var(--home); } .rl-end.a-spx { fill: var(--spx); } .rl-end.a-bond { fill: var(--bond); }
.rl-end.a-gold { fill: var(--gold); } .rl-end.rl-farm { fill: var(--home-ink); }
.rl-lbl { fill: var(--ink); font: 650 12px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.rl-lbl.small { font: 600 11px var(--mono); letter-spacing: -0.02em; stroke-width: 3px; }
.rl-mark-ln { stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 1; }

/* 1. a hundred flat years */
.rl-band { fill: var(--ink); fill-opacity: 0.06; }
.rl-band-edge { stroke: var(--ink); stroke-opacity: 0.28; stroke-width: 1; stroke-dasharray: 2 3; }
.rl-band-lbl { fill: var(--ink-2); font: 600 12px var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.sw-sq.rl-band-sw { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.rl-area-home { fill: var(--home); fill-opacity: 0.1; }

/* 2. land and buildings */
.rl-land-a { fill: var(--home); fill-opacity: 0.5; }
.rl-bld-a { fill: var(--line-gray); fill-opacity: 0.4; }
.rl-bld-ln { fill: none; stroke: var(--line-gray); stroke-width: 1.5; }
.sw-sq.rl-land { background: color-mix(in srgb, var(--home) 55%, var(--surface)); }
.sw-sq.rl-bld { background: color-mix(in srgb, var(--line-gray) 45%, var(--surface)); }
.rl-area-lbl { fill: var(--ink); font: 650 13px var(--font); opacity: 0.85; }

/* 3. farm real estate */
.ln.rl-farm { stroke: var(--home-ink); }
.ln.rl-farm.bold { stroke-width: 2.6; }
.rl-farm-a { fill: var(--home-ink); fill-opacity: 0.08; }
.rl-bust { fill: var(--bad); fill-opacity: 0.1; }
.rl-bust-lbl { fill: var(--bad); font: 650 12px var(--mono); letter-spacing: -0.02em; }
.sw-sq.rl-bust-sw { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 30%, transparent); }

/* 4. small multiples */
.rl-wins { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 6px 6px; }
@media (max-width: 900px) { .rl-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rl-wins { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 2px 0 4px; } }
.rl-pan.wide { grid-column: span 2; }
@media (max-width: 560px) { .rl-pan.wide { grid-column: auto; } }
.rl-pan { display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 10px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.rl-pan-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 4px; }
.rl-pan-h b { font: 650 15px/1.2 var(--display); color: var(--ink); }
.rl-pan-h span { font: 500 11.5px var(--mono); color: var(--muted); }
.rl-pan-plot { min-height: 140px; }
.rl-pan-plot svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; }
.rl-pan-end { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.rl-pan-end li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.rl-pan-end li span:not(.sw-sq) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-pan-end li b { font: 600 12px var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.rl-pan-end li em { font: 500 11px var(--mono); font-style: normal; color: var(--muted); min-width: 8.5ch; text-align: right; }
.rl-pan-end li.me span:not(.sw-sq) { color: var(--ink); font-weight: 650; }
.rl-pan-end li.na em { grid-column: 3 / 5; }
.is-full .rl-wins { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); overflow: auto; align-content: start; }
.rl-tip { min-width: 0; width: max-content; max-width: min(280px, 90vw); }
.rl-win-table td.rl-best { font-weight: 700; color: var(--ink); }

/* 5. what the price leaves out: a ledger */
.rl-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 860px) { .rl-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rl-ledger { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.rl-led { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 4px; padding: 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.rl-led b { font: 650 16px/1.25 var(--display); color: var(--ink); align-self: center; }
.rl-led > span:last-child { grid-column: 2; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rl-sign { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 600 22px/1 var(--mono); color: var(--ink); background: var(--track); }
.rl-led.plus .rl-sign { color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.rl-led.minus .rl-sign { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }

/* 6. price-to-rent heat map */
.rl-hot { fill: var(--s2); }
.rl-cold { fill: var(--s3); }
.sw-sq.rl-hot { background: var(--s2); }
.sw-sq.rl-cold { background: var(--s3); }
.rl-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.rl-cell-on { fill: none; stroke: var(--ink); stroke-width: 2; }




/* tables: row names and headers may wrap on phones */
.rl-table th[scope="row"] { white-space: normal; min-width: 8.5em; }
.rl-table thead th { white-space: normal; vertical-align: bottom; }
@media (max-width: 560px) { .rl-table th, .rl-table td { padding: 9px 10px; } }