/* Housing uses the approved campaign type, palette, rules and scroll engine.
   Charts are progressively enhanced HTML; all evidence is readable without JS. */
/* The hero and display headings inherit Our Fight's actual shared classes.
   No housing-specific title scale, line height or mobile hero override. */
.housing-hero .fight-hero-line > span { overflow: visible; }
.housing-section h2 > span { color: var(--yellow); }
.housing-copy { color: var(--cream-dim); font-size: var(--text-base); line-height: 1.7; }
.housing-copy strong { color: var(--cream); font-weight: 500; }
.housing-explorer { border-top: 2px solid var(--yellow); padding-top: var(--space-6); min-width: 0; }
.housing-explorer h2 { font-family: var(--display); font-size: var(--text-xl); text-transform: uppercase; line-height: 1.2; }
.housing-chart-context { margin: var(--space-2) 0 var(--space-6); color: var(--cream-dim); font-size: var(--text-sm); }
.housing-income-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4); }
.housing-income-control[hidden] { display: none; }
.housing-income-control label { font-size: var(--text-sm); }
.housing-income-control select { font: 500 1rem var(--sans); color: var(--cream); background: var(--ink-raised); border: 1px solid var(--cream-dim); border-radius: 0; padding: .7rem 2rem .7rem .85rem; color-scheme: dark; cursor: pointer; max-width: 100%; min-height: 44px; }
.housing-income-picker { position: relative; min-width: 9rem; font: 500 1rem var(--sans); -webkit-tap-highlight-color: transparent; }
.housing-income-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 44px; padding: .7rem .85rem; border: 1px solid var(--cream-dim); border-radius: 0; background: var(--ink-raised); color: var(--yellow); font: inherit; cursor: pointer; }
.housing-income-trigger::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.housing-income-trigger:hover, .housing-income-trigger[aria-expanded="true"] { border-color: var(--yellow); }
.housing-income-trigger[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -1px); }
.housing-income-trigger:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.housing-income-options { position: absolute; z-index: 20; top: calc(100% + var(--space-2)); right: 0; width: 100%; max-height: 20rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--yellow); background: var(--ink-raised); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.housing-income-options[hidden] { display: none; }
.housing-income-picker.opens-up .housing-income-options { top: auto; bottom: calc(100% + var(--space-2)); }
.housing-income-option { display: flex; align-items: center; min-height: 44px; padding: .6rem .85rem; cursor: pointer; color: var(--cream); border-bottom: 1px solid var(--rule-faint); }
.housing-income-option:last-child { border-bottom: 0; }
.housing-income-option[aria-selected="true"] { color: var(--yellow); box-shadow: inset 3px 0 var(--yellow); }
.housing-income-option.is-active, .housing-income-option:hover { background: var(--yellow); color: var(--ink); }
.housing-income-option:last-child { border-top: 1px solid var(--rule); }
#housing-island-notes[hidden], #housing-standard-caption[hidden], #housing-island-caption[hidden], #housing-standard-source[hidden], #housing-share-track[hidden] { display: none; }
.housing-big-number { font-family: var(--display); font-size: clamp(6.5rem, 10vw, 10.5rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--yellow); margin: var(--space-5) 0 0; font-variant-numeric: tabular-nums; }
.housing-unit { font-size: .46em; padding-left: .04em; }
.housing-result-caption { font-family: var(--slab); font-size: var(--text-lg); line-height: 1.5; margin: var(--space-2) 0 var(--space-5); max-width: 32ch; }
.housing-result-caption strong { font-weight: 400; }
.housing-share-track { height: 12px; background: rgba(240,233,214,.18); }
.housing-share-track > span { display: block; background: var(--yellow); height: 100%; transition: width 650ms var(--ease-out); }
.housing-price { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); padding-block: var(--space-4); border-bottom: 1px solid var(--rule); margin: 0 0 var(--space-4); }
.housing-price strong { font-variant-numeric: tabular-nums; }
.housing-note { color: var(--cream-dim); font-size: var(--text-sm); line-height: 1.7; }
.housing-source { color: var(--cream-dim); font-size: var(--text-xs); line-height: 1.75; margin: var(--space-5) 0 0; overflow-wrap: anywhere; }
.housing-source a { color: var(--cream); text-underline-offset: .2em; }
.housing-source a:hover { color: var(--yellow); }
.housing-details { border-top: 1px solid var(--rule); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--cream-dim); line-height: 1.7; }
.housing-details summary { cursor: pointer; padding-block: var(--space-4); color: var(--cream); }
.housing-details > p { margin: 0 0 var(--space-4); max-width: 75ch; }
.housing-details[open] summary { color: var(--yellow); }
.housing-table-wrap { overflow-x: auto; }
.housing-details table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.housing-details caption { text-align: left; padding-bottom: var(--space-3); font-size: var(--text-xs); }
.housing-details th, .housing-details td { text-align: right; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--rule); }
.housing-details th:first-child { text-align: left; padding-left: 0; }
.housing-details tbody th { font-weight: 400; }
.housing-details thead th { font-weight: 500; color: var(--cream); }
.housing-jump { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); border-top: 1px solid var(--rule); padding-block: var(--space-5); margin-top: var(--space-8); }
.housing-jump a { font-size: var(--text-sm); color: var(--cream-dim); text-decoration: none; padding-block: var(--space-2); }
.housing-jump a:hover { color: var(--yellow); }
.housing-section { padding-block: clamp(5rem, 10vh, 8rem); border-top: 1px solid var(--rule-faint); scroll-margin-top: 100px; }
.housing-section-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: var(--space-9); align-items: center; }
.housing-editorial > p { max-width: 42ch; font-family: var(--slab); font-size: var(--text-base); line-height: 1.75; margin-top: var(--space-5); }
.housing-editorial > .housing-note { font-family: var(--sans); font-size: var(--text-sm); }
.housing-chart { margin: 0; min-width: 0; font-family: var(--sans); }
.housing-chart figcaption { color: var(--cream); font-size: var(--text-base); font-weight: 500; line-height: 1.5; margin-bottom: var(--space-6); max-width: 52ch; }
.housing-bar-row { margin-top: var(--space-5); }
.housing-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.housing-bar-label strong { font-size: var(--text-lg); flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.housing-bar-track { height: 26px; background: var(--rule-faint); }
.housing-bar-track span { display: block; height: 100%; background: var(--yellow); }
.housing-bar-row.is-neutral .housing-bar-track span { background: var(--cream); }
.housing-axis { display: flex; justify-content: space-between; color: var(--cream-dim); font-size: var(--text-xs); border-top: 1px solid var(--rule); padding-top: var(--space-2); margin-top: var(--space-4); }
.housing-section-rent { background: var(--ink-raised); }
.housing-gap { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.housing-gap strong { font-family: var(--display); font-size: clamp(3rem, 5vw, 5rem); color: var(--yellow); font-weight: 700; line-height: 1.1; }
.housing-gap > span { font-size: var(--text-sm); line-height: 1.6; }
.housing-chart-key { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--cream-dim); line-height: 1.6; margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.housing-chart-key > span { height: 20px; width: 2px; flex-shrink: 0; background: var(--cream); }
.housing-city-row { display: grid; grid-template-columns: 90px 1fr 44px; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.housing-city-row > strong { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.housing-city-track { height: 24px; position: relative; background: var(--rule-faint); }
.housing-city-track > i { display: block; height: 100%; background: rgba(240,233,214,.62); }
.housing-city-track::after { content: ''; position: absolute; left: 37.5%; top: -5px; bottom: -5px; width: 2px; background: var(--cream); box-shadow: 0 0 0 1px var(--ink); }
.housing-city-row.is-national .housing-city-track > i { background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(240,233,214,.62) 3px, rgba(240,233,214,.62) 5px); }
.housing-city-row.is-billings { color: var(--yellow); font-weight: 600; }
.housing-city-row.is-billings .housing-city-track > i { background: var(--yellow); }
.housing-city-axis { margin-left: 102px; margin-right: 56px; }
.housing-wide-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-9); align-items: end; margin-bottom: var(--space-8); }
.housing-wide-heading > p { font-family: var(--slab); color: var(--cream-dim); font-size: var(--text-base); line-height: 1.75; margin: 0; }
.housing-columns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.housing-column { min-width: 0; text-align: center; }
.housing-column-field { height: 250px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--cream-dim); }
.housing-column-field > div { position: relative; width: 65%; }
.housing-column-field > div::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(240,233,214,.62);
  transform: scaleY(var(--housing-column-reveal, 1));
  transform-origin: center bottom;
}
.housing-column-field strong { position: absolute; bottom: 100%; left: 0; right: 0; padding-bottom: var(--space-2); font-weight: 500; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.housing-column > span { display: block; margin-top: var(--space-3); font-size: var(--text-sm); }
.housing-column.is-latest .housing-column-field > div::before { background: var(--yellow); }
.housing-column.is-latest { color: var(--yellow); }
.housing-purchase-chart > .housing-note { margin-top: var(--space-6); }
.housing-progress { background: var(--ink-raised); }
.housing-progress-total { font-family: var(--display); color: var(--yellow); font-weight: 700; font-size: clamp(5rem, 8vw, 8rem); line-height: 1.1; margin: 0 0 var(--space-6); }
.housing-progress-total > strong { font-weight: inherit; }
.housing-progress-total > span { display: block; color: var(--cream-dim); font: 400 var(--text-sm)/1.5 var(--sans); margin-top: var(--space-2); }
.housing-stack { display: flex; height: 30px; gap: 3px; }
.housing-stack > span:first-child { background: var(--yellow); }
.housing-stack > span:last-child { background: var(--cream); }
.housing-stack-labels { display: flex; justify-content: space-between; gap: var(--space-6); }
.housing-stack-labels p { font-size: var(--text-sm); color: var(--cream-dim); }
.housing-stack-labels p:last-child { text-align: right; }
.housing-stack-labels strong { display: block; font-size: var(--text-xl); font-weight: 500; color: var(--cream); font-variant-numeric: tabular-nums; }
.housing-closing { padding-block: var(--space-9); }
.housing-closing > p { font-family: var(--slab); max-width: 64ch; font-size: var(--text-lg); line-height: 1.75; }
.housing-closing > .housing-note { font: 400 var(--text-sm)/1.75 var(--sans); max-width: 80ch; margin-top: var(--space-7); }
.housing-closing .fight-related { margin-top: var(--space-4); }
.housing-hero :focus-visible, .housing-section :focus-visible, .housing-closing :focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
@media (max-width: 1000px) {
  .housing-section-grid, .housing-wide-heading { gap: var(--space-7); }
  .housing-income-control { grid-template-columns: 1fr; gap: var(--space-2); }
  .housing-income-control select { width: 100%; }
}
@media (max-width: 760px) {
  .housing-section-grid, .housing-wide-heading { grid-template-columns: 1fr; gap: var(--space-7); }
  .housing-explorer { margin-top: var(--space-4); }
  .housing-big-number { font-size: 7.5rem; }
  .housing-income-control { grid-template-columns: 1fr auto; gap: var(--space-3); }
  .housing-closing { padding-block: var(--space-8); }
  .housing-jump { gap: var(--space-3) var(--space-5); margin-top: var(--space-7); }
  .housing-columns { gap: var(--space-2); }
  .housing-column-field { height: 190px; }
  .housing-column-field > div { width: 68%; }
  .housing-column > span { font-size: var(--text-xs); }
  .housing-column-field strong { font-size: 1.125rem; }
  .housing-city-row { grid-template-columns: 78px 1fr 38px; gap: var(--space-2); }
  .housing-city-axis { margin-left: 86px; margin-right: 46px; }
  .housing-wide-heading { margin-bottom: var(--space-7); }
}
@media (max-width: 360px) {
  .housing-income-control { grid-template-columns: 1fr; }
  .housing-column > span { font-size: .75rem; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .housing-share-track > span { transition: none; }
  .housing-hero .fight-hero-portrait img { transition: none; transform: none; }
}