/* Cost of Living inherits the approved Housing layout, hero, charts and tokens. */
.living-hero .fight-hero-portrait img { filter: grayscale(1); }
@media (max-width: 1000px) {
  .living-hero .fight-hero-portrait img { object-position: 80% 20%; }
}
.living-regions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.living-regions[hidden], .living-wage-control[hidden] { display: none; }
.living-regions button {
  font: 500 var(--text-sm)/1.5 var(--sans);
  color: var(--cream); background: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
  padding: var(--space-3) var(--space-4); min-height: 44px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.living-regions button[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
.living-regions button:hover { background: var(--ink-raised); border-color: var(--yellow); }
.living-household-chart .housing-bar-track span { transition: width 650ms var(--ease-out); }
.living-caption-note { color: var(--cream-dim); font-size: var(--text-sm); font-weight: 400; }
.living-live { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; margin: 0; }
.living-budget-chart .housing-bar-track { height: 18px; }
.living-totals { margin: var(--space-7) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); font-family: var(--sans); }
.living-totals > div { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-3); font-size: var(--text-sm); }
.living-totals dd { margin: 0; font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
.living-totals .is-total { border-top: 1px solid var(--rule); margin-top: var(--space-3); padding-top: var(--space-5); color: var(--yellow); }
.living-wage-control { padding-block: var(--space-4); margin-bottom: var(--space-6); }
.living-wage-control label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.living-wage-control output { font-size: var(--text-xl); font-weight: 500; color: var(--yellow); font-variant-numeric: tabular-nums; }
.living-wage-control input { --wage-fill: 28.5714%; display: block; width: 100%; height: 44px; margin: var(--space-3) 0 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.living-wage-control input::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--yellow) 0 var(--wage-fill), var(--cream-faint) var(--wage-fill) 100%); }
.living-wage-control input::-moz-range-track { height: 6px; background: linear-gradient(to right, var(--yellow) 0 var(--wage-fill), var(--cream-faint) var(--wage-fill) 100%); }
.living-wage-control input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; height: 22px; width: 22px; margin-top: -8px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 0; box-shadow: 0 0 0 1px var(--yellow); }
.living-wage-control input::-moz-range-thumb { height: 18px; width: 18px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 0; box-shadow: 0 0 0 1px var(--yellow); }
.living-wage-scale { display: flex; justify-content: space-between; color: var(--cream-dim); font-size: var(--text-xs); }
.living-paycheck-result { flex-wrap: wrap; }
.living-paycheck-result strong { font-variant-numeric: tabular-nums; }
.living-paycheck-result.is-above strong { color: var(--cream); }
.living-paycheck-chart > .housing-note { margin-top: var(--space-5); }
.living-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-7); }
.living-principles article, .living-priorities article { border-top: 1px solid var(--rule); padding-top: var(--space-5); min-width: 0; }
.living-principles h3, .living-priorities h3 { font: 600 var(--text-lg)/1.35 var(--sans); margin-bottom: var(--space-4); }
.living-principles p, .living-priorities p { color: var(--cream-dim); }
.living-priorities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-9); }
.living-policy-note { margin-top: var(--space-7); max-width: 85ch; }
@media(max-width:850px) { .living-principles { grid-template-columns: 1fr; } }
@media(max-width:760px) { .living-priorities { grid-template-columns: 1fr; gap: var(--space-6); } }
@media(prefers-reduced-motion:reduce) { .living-household-chart .housing-bar-track span { transition: none; } }