/* Arizona Moving Report (arizona-moving-report.html): the figures tools/az-report.js builds from the data — bars,
   columns, a waffle, the heat clock, a line chart — on top of the blog's article (role.css + blog.css, .bl-blue).
   Every number is real text. Heat gets warm colours, everything else the blog's blue. */
.rp-page{ --rp-bar: #9fc3fb; --rp-gray: #a7afbc; --rp-hot: #c2410c; --rp-warm: #f29a3e; }

/* ---------- the first screen: one in seven ---------- */
.rp-hero{ display: grid; place-items: center; margin: 0; }
.rp-hero-card{ display: grid; gap: 16px; width: min(100%, 440px); padding: 28px 28px 22px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -36px rgba(6, 26, 63, .45), inset 0 0 0 1px var(--hair); }
.rp-hero-k{ margin: 0; color: var(--accent-ink); font: 600 12.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.rp-people{ display: flex; gap: 10px; }
.rp-people span{ flex: 1; color: var(--tint-2); }
.rp-people span.on{ color: var(--accent); }
.rp-people svg{ display: block; width: 100%; height: auto; max-height: 64px; fill: currentColor; }
.rp-hero-big{ margin: 0; color: var(--navy); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.rp-hero-big b{ display: block; font-size: 62px; line-height: 1; font-weight: 640; letter-spacing: -.045em; color: var(--accent); }
.rp-hero-dl{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.rp-hero-dl div{ padding: 10px 12px; border-radius: 12px; background: var(--tint); }
.rp-hero-dl dt{ color: var(--muted); font: 500 12px/1.2 var(--font-ui); }
.rp-hero-dl dd{ margin: 4px 0 0; color: var(--navy); font: 600 17px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.rp-hero-cap{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- a figure ---------- */
.rp-fig{ margin: 30px 0 32px; padding: 22px 22px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.rp-title{ margin: 0 0 16px !important; color: var(--navy); font: 600 17px/1.35 var(--font); letter-spacing: -.01em; }
.rp-fig figcaption{ margin-top: 16px; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.rp-fig figcaption b{ color: var(--ink); font-weight: 650; }
.rp-src{ display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* the row under a chart: "Show the data" on the left, the picture to download floated right. The float is as tall as
   the summary line, so an opened table starts below it at full width. */
.rp-foot{ margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 10px; }
.rp-fig a.rp-dl{ float: right; display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; color: var(--accent-600); font: 600 13.5px/1.6 var(--font-ui); text-decoration: none; }
.rp-fig a.rp-dl:hover{ text-decoration: underline; text-underline-offset: 3px; }
.bl-toc-cta .rp-cta-alt{ color: var(--muted); font-size: 12.5px; }
.bl-toc-cta .rp-cta-alt a{ color: var(--accent-600); text-decoration: underline; text-underline-offset: 2px; }
.rp-dl svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-data summary{ cursor: pointer; width: max-content; color: var(--accent-600); font: 600 13.5px/1.6 var(--font-ui); }
.rp-data .bl-table{ margin: 10px 0 2px; }
.rp-data .bl-table table{ min-width: 420px; font-size: 14px; }
.rp-sub{ margin: 22px 0 12px !important; color: var(--ink); font: 600 14.5px/1.3 var(--font-ui); }

/* ---------- horizontal bars ---------- */
.rp-bars{ position: relative; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rp-bars li{ display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 62px; align-items: center; gap: 12px; padding: 0 !important; }
.rp-bars.is-wide li{ grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 76px; }
.rp-bars li::marker{ content: none; }
.rp-l{ color: var(--ink); font: 500 14.5px/1.25 var(--font-ui); }
.rp-l small{ display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.rp-b{ position: relative; height: 16px; border-radius: 5px; background: #f2f4f7; overflow: hidden; }
.rp-b i{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--rp-bar); }
.rp-bars li.is-hot .rp-b i{ background: var(--accent); }
.rp-bars li.is-hot .rp-l{ font-weight: 650; }
.rp-v{ color: var(--navy); font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* reference lines (Arizona, U.S.) drawn through every track */
.rp-bars[style*="--r1"] .rp-b{ background:
  linear-gradient(90deg, transparent calc(var(--r1) - 1px), var(--accent-ink) 0 calc(var(--r1) + 1px), transparent 0),
  linear-gradient(90deg, transparent calc(var(--r2) - 1px), var(--rp-gray) 0 calc(var(--r2) + 1px), transparent 0), #f2f4f7; }
.rp-bars[style*="--r1"] .rp-b i{ z-index: 0; opacity: .9; }
.rp-refs{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 !important; color: var(--ink-2); font: 500 13px/1.3 var(--font-ui); }
.rp-refs span::before{ content: ""; display: inline-block; width: 2px; height: 12px; margin-right: 7px; vertical-align: -1px; background: var(--accent-ink); }
.rp-refs .rp-ref2::before{ background: var(--rp-gray); }
.rp-pairs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.rp-pair > p{ margin: 0 0 10px !important; color: var(--muted); font: 600 12.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.rp-pair .rp-bars li{ grid-template-columns: 100px minmax(0, 1fr) 48px; }

/* ---------- columns: days at 110°F, companies by year ---------- */
.rp-cols{ position: relative; --ch: 204px; }   /* the columns' own height; a column's % and the normal line both use it */
.rp-cols ol{ display: flex; align-items: stretch; gap: 8px; height: calc(var(--ch) + 26px); margin: 0; padding: 0 0 26px; list-style: none; }
.rp-cols li{ position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; padding: 0 !important; }
.rp-cols li::marker{ content: none; }
.rp-cols li > b{ margin-bottom: 6px; color: var(--navy); font: 600 13.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-cols li > b small{ color: var(--muted); font-weight: 500; font-size: 11.5px; }
.rp-cols li > i{ width: min(100%, 44px); border-radius: 6px 6px 3px 3px; background: var(--rp-bar); }
.rp-cols li > span:last-child{ position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); color: var(--muted); font: 500 12.5px/1 var(--font-ui); white-space: nowrap; }
.rp-cols.is-heat li > i{ background: var(--rp-warm); }
.rp-cols.is-heat li.is-hot > i{ background: var(--rp-hot); }
.rp-cols.is-heat li.is-hot > b{ color: var(--rp-hot); }
.rp-normal{ position: absolute; left: 0; right: 0; bottom: calc(26px + var(--ch) * var(--nk)); z-index: 1; height: 0; border-top: 1.5px dashed var(--ink-2); pointer-events: none; }
.rp-cols.is-pair li.is-band{ background: var(--tint); border-radius: 10px 10px 0 0; }
.rp-colpair{ display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; height: 100%; max-height: calc(100% - 22px); }
.rp-colpair i{ width: min(42%, 18px); border-radius: 4px 4px 2px 2px; }
.rp-colpair .reg{ background: #d7e5fd; }
.rp-colpair .act{ background: var(--accent); }

/* ---------- legends ---------- */
.rp-keys{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 !important; color: var(--ink-2); font: 500 13px/1.3 var(--font-ui); }
.rp-keys span::before{ content: ""; display: inline-block; width: 14px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: 0; }
.rp-keys .k-az::before{ height: 3px; vertical-align: 3px; background: var(--accent); }
.rp-keys .k-us::before{ height: 0; vertical-align: 4px; border-top: 2px dashed var(--rp-gray); }
.rp-keys .k-act::before{ background: var(--accent); }
.rp-keys .k-reg::before{ background: #d7e5fd; }
.rp-keys .k-normal::before{ height: 0; vertical-align: 4px; border-radius: 0; border-top: 1.5px dashed var(--ink-2); }   /* the normal line is named here, not on the chart: every year's column crosses it */

/* ---------- the heat clock ---------- */
.rp-clock-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px 4px; }
.rp-clock{ display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; min-width: 560px; }
.rp-clock .rp-h{ color: var(--muted); font: 500 10.5px/1 var(--font-ui); text-align: left; white-space: nowrap; padding-bottom: 4px; }
.rp-clock .rp-m{ align-self: center; color: var(--ink-2); font: 600 11.5px/1 var(--font-ui); }
.rp-clock i{ position: relative; height: 17px; border-radius: 3px; }
.rp-clock i.is-100::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255, 255, 255, .9); }
.rp-legend{ display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0 !important; color: var(--muted); font: 500 12px/1 var(--font-ui); }
.rp-scale{ width: 140px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #dbeafe, #f1f5f9 28%, #fde68a 55%, #fb923c 75%, #ea580c 88%, #991b1b); }
.rp-legend .rp-dot{ margin-left: 8px; color: var(--ink-2); }
.rp-legend .rp-dot::before{ content: ""; display: inline-block; width: 14px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; background: radial-gradient(circle, #fff 2px, transparent 2.5px), #ea580c; }

/* ---------- the line chart ---------- */
.rp-svg{ display: block; width: 100%; height: auto; overflow: visible; }
.rp-svg .rp-grid{ stroke: #e8ebf0; stroke-width: 1; }
.rp-svg .rp-ax{ fill: var(--muted); font: 500 13px var(--font-ui); }
.rp-svg .rp-az{ fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rp-svg .rp-us{ fill: none; stroke: var(--rp-gray); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.rp-svg .rp-az-dot{ fill: var(--accent); stroke: #fff; stroke-width: 2; }
.rp-svg .rp-lab{ fill: var(--navy); font: 650 14px var(--font-ui); }

/* ---------- fleet: a 10 × 10 waffle ---------- */
.rp-waffle-wrap{ display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 26px; }
.rp-waffle{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.rp-waffle i{ aspect-ratio: 1; border-radius: 3px; }
.w0{ background: #0e5bd6; } .w1{ background: #4f8ff5; } .w2{ background: #8fb8f9; } .w3{ background: #bcd5fc; } .w4{ background: #dbe8fd; } .w5{ background: #d5d9df; }
.rp-wkey{ display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; }
.rp-wkey li{ display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; color: var(--ink); font: 500 14.5px/1.3 var(--font-ui); }
.rp-wkey li::marker{ content: none; }
.rp-wkey i{ width: 14px; height: 14px; border-radius: 3px; }
.rp-wkey b{ font-weight: 600; }
.rp-wkey span{ color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- a split bar ---------- */
.rp-split{ display: flex; overflow: hidden; border-radius: 12px; font: 500 14px/1.3 var(--font-ui); }
.rp-split span{ display: flex; align-items: center; gap: 8px; min-width: 0; padding: 14px 16px; white-space: nowrap; }
.rp-split b{ font: 650 20px/1 var(--font-ui); }
.rp-split .s1{ background: var(--accent); color: #fff; }
.rp-split .s2{ background: var(--tint-2); color: var(--accent-ink); }

/* ---------- stat tiles ---------- */
.rp-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-stats div, .rp-duo div{ display: grid; gap: 6px; align-content: start; padding: 16px 16px 14px; border-radius: 14px; background: var(--tint); }
.rp-stats b{ color: var(--navy); font: 650 26px/1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-stats span, .rp-duo span{ color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.rp-duo{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-duo b{ color: var(--accent); font: 650 40px/1 var(--font-ui); letter-spacing: -.03em; }
.rp-duo .is-zero{ background: #fff4ec; }
.rp-duo .is-zero b{ color: var(--rp-hot); }

/* ---------- boxes in the text ---------- */
.rp-choose{ margin: 8px 0 24px; padding: 22px 24px 18px; border-radius: 20px; background: var(--tint); }
.rp-choose ol{ margin: 0; }
.rp-choose li{ text-wrap: pretty; }
.rp-sources li{ font-size: 16px; line-height: 1.6; }
.rp-reuse{ margin: 24px 0 0; padding: 18px 20px 4px; border-radius: 16px; background: var(--tint); font-size: 16px; }

/* ---------- small screens ---------- */
@media (max-width: 720px){
  .rp-fig{ margin: 24px -4px 26px; padding: 18px 14px 12px; border-radius: 16px; }
  .rp-bars li, .rp-bars.is-wide li{ grid-template-columns: minmax(0, 112px) minmax(0, 1fr) 56px; gap: 8px; }
  .rp-l{ font-size: 13.5px; }
  .rp-pairs{ grid-template-columns: minmax(0, 1fr); }
  .rp-cols{ --ch: 174px; }
  .rp-cols ol{ gap: 4px; }
  .rp-cols li > b{ font-size: 11.5px; }
  .rp-cols li > b small{ display: none; }
  .rp-cols li > span:last-child{ font-size: 10.5px; }
  .rp-waffle-wrap{ grid-template-columns: minmax(0, 1fr); }
  .rp-waffle{ max-width: 260px; }
  .rp-stats{ grid-template-columns: minmax(0, 1fr); }
  .rp-duo b{ font-size: 32px; }
  .rp-split b{ font-size: 17px; }
  .rp-split span{ flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 10px; font-size: 12px; white-space: normal; }   /* number over words: "also interstate" fits a 28% slice */
  .rp-bars.is-wide li{ grid-template-columns: minmax(0, 128px) minmax(0, 1fr) 52px; }
  .rp-l small{ font-size: 11.5px; white-space: nowrap; }
  /* the heat clock fits the phone whole (24 narrow columns) instead of hiding the afternoon behind a sideways scroll */
  .rp-clock-wrap{ overflow: visible; margin: 0; padding: 0; }
  .rp-clock{ min-width: 0; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 1px; }
  .rp-clock i{ height: 13px; border-radius: 2px; }
  .rp-clock .rp-m{ font-size: 10px; }
  .rp-clock .rp-h{ font-size: 9.5px; }
  .rp-clock i.is-100::after{ width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
  /* the line chart shrinks to ~60%: bigger type in its own units, strokes kept in screen pixels */
  .rp-svg .rp-ax{ font-size: 20px; }
  .rp-svg .rp-lab{ font-size: 22px; }
  .rp-svg .rp-az, .rp-svg .rp-us, .rp-svg .rp-grid, .rp-svg .rp-az-dot{ vector-effect: non-scaling-stroke; }
  .rp-hero-card{ padding: 22px 20px 18px; }
  .rp-hero-big b{ font-size: 52px; }
}