/* Housing explorer. Builds on story.css tokens; light theme only, like the rest of the site. */
.explorer{--c0:var(--accent);--c1:var(--blue);--c2:#1f7a6d;--c3:#9a6a12;--c4:#6d4f8a;
  margin:1.5rem 0 0;border:1.5px solid var(--ink);background:var(--white);padding:1rem 1.1rem 1.2rem}
.explorer .status{color:var(--muted);font-size:.92rem;margin:0}
.x-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem 1.4rem;
  margin:0 0 1rem}
.x-group{border:0;margin:0;padding:0;min-width:0}
.x-group legend,.x-group>label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;padding:0}
.x-group select{width:100%;font:inherit;font-size:.95rem;padding:.35rem .4rem;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);border-radius:0}
.x-group select:disabled{opacity:.45}
.x-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.x-chips label{display:inline-flex;align-items:center;gap:.25rem;font-size:.88rem;line-height:1.3;
  border:1px solid var(--rule);padding:.25rem .5rem;cursor:pointer;background:var(--paper)}
.x-chips input{margin:0;accent-color:var(--ink)}
.x-chips label:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--paper)}
.x-chips label:has(input:disabled){opacity:.4;cursor:not-allowed}
.x-chips label:has(input:focus-visible),.x-group select:focus-visible,.x-btn:focus-visible,
.x-chart:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.x-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.x-btn{font:inherit;font-size:.88rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:.3rem .65rem;cursor:pointer}
.x-btn:disabled{opacity:.4;cursor:not-allowed}
.x-compare{display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 0}
.x-compare .x-btn{display:inline-flex;align-items:center;gap:.35rem}
.x-compare .sw{display:inline-block;width:.8rem;height:.8rem;border:1px solid var(--ink)}
.x-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;align-items:baseline;
  border-top:1px solid var(--rule);padding:.8rem 0 .2rem}
.x-head h3{margin:0;font-size:1.05rem;line-height:1.35}
.x-head .x-latest{font-size:.92rem;color:var(--muted)}
.x-head .x-latest b{color:var(--ink);font-size:1.15rem}
.x-note{font-size:.85rem;color:var(--muted);margin:.25rem 0 0;min-height:1.2em}
.x-chart{display:block;width:100%;height:auto;touch-action:pan-y}
.x-chart text{fill:var(--ink);font-size:11px}
.x-chart .grid{stroke:var(--rule);stroke-width:1}
.x-chart .axis text{fill:var(--muted)}
.x-chart .rule{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.x-chart .tip rect{fill:var(--white);stroke:var(--ink);stroke-width:1}
.x-chart .tip text{font-size:11.5px}
.x-chart .band{opacity:.16}
.x-chart .line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.x-chart .rate{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:5 4}
.x-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;list-style:none;margin:.3rem 0 0;padding:0;font-size:.85rem}
.x-legend li{display:flex;align-items:center;gap:.35rem}
.x-legend .sw{display:inline-block;width:1.1rem;height:.2rem;background:currentColor}
.x-legend .sw.dash{height:0;border-top:2px dashed var(--ink);background:none}
@media (max-width:700px){
  .explorer{padding:.8rem .7rem 1rem;margin-left:-.25rem;margin-right:-.25rem}
  .x-controls{grid-template-columns:1fr}
}