/* Housing Monitor */
.hm-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.hm-muted, .hm-note, .hm-sub { margin: 6px 0 0; color: var(--ls-tertiary); font-size: 12px; line-height: 1.55; }
.hm-sub { margin: 0 0 12px; }
.hm-muted a { color: var(--ls-accent); }

.hm-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ls-rule); border-radius: var(--ls-radius); background: var(--ls-card); }
.hm-search { flex: 1 1 320px; min-width: 220px; max-width: 460px; }
.hm-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-picks button { padding: 6px 11px; border: 1px solid var(--ls-rule); border-radius: 999px; background: transparent; color: var(--ls-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.hm-picks button:hover { border-color: var(--ls-accent); color: var(--ls-ink); }

.hm-market-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-market-title h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.hm-type { padding: 3px 10px; border: 1px solid var(--ls-rule); border-radius: 999px; color: var(--ls-tertiary); font-size: 11.5px; }
.hm-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-jump a { padding: 6px 12px; border: 1px solid var(--ls-rule); border-radius: 999px; color: var(--ls-secondary); font-size: 12px; text-decoration: none; }
.hm-jump a:hover { border-color: var(--ls-accent); color: var(--ls-ink); }

.hm-block { min-width: 0; scroll-margin-top: 16px; }
.hm-block > h2, .hm-compare-head h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.02em; }
.hm-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hm-check { display: flex; align-items: center; gap: 7px; color: var(--ls-secondary); font-size: 12.5px; cursor: pointer; }

.hm-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hm-card { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 14px; border: 1px solid var(--ls-rule); border-radius: 12px; background: var(--ls-card); }
.hm-card h3 { margin: 0; color: var(--ls-secondary); font-size: 12px; font-weight: 600; line-height: 1.3; }
.hm-value { margin-top: 3px; font-size: 25px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hm-card.empty .hm-value { color: var(--ls-tertiary); }
.hm-asof { margin: 0; color: var(--ls-tertiary); font-size: 11px; }
.hm-asof b { color: var(--ls-secondary); font-weight: 600; }
.hm-area { margin: 0; color: var(--ls-warning); font-size: 10.5px; line-height: 1.4; }
.hm-hint { margin: 2px 0 0; color: var(--ls-tertiary); font-size: 10.5px; line-height: 1.4; }
.hm-spark { height: 28px; min-width: 0; margin-top: 4px; }

.hm-scroll { overflow-x: auto; border: 1px solid var(--ls-rule); border-radius: 12px; background: var(--ls-card); }
.hm-panel .hm-scroll { border: 0; border-radius: 0; background: transparent; }
.hm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hm-table th, .hm-table td { padding: 7px 12px; border-bottom: 1px solid var(--ls-rule); text-align: left; }
.hm-table thead th { color: var(--ls-tertiary); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hm-table tbody th { font-weight: 400; color: var(--ls-secondary); }
.hm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-table td.sel { font-weight: 700; background: color-mix(in srgb, var(--ls-accent) 7%, transparent); }
.hm-table tr.hm-group th { padding-top: 12px; color: var(--ls-ink); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom-color: var(--ls-strong-rule); }
.hm-table tr:last-child td, .hm-table tr:last-child th { border-bottom: 0; }

.hm-extra:not(:empty) { margin-bottom: 14px; }
.hm-panel { padding: 14px 16px; border: 1px solid var(--ls-rule); border-radius: 12px; background: var(--ls-card); }
.hm-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.hm-panel-head h3 { margin: 0; font-size: 14px; }
.hm-panel-head small { color: var(--ls-tertiary); font-size: 11.5px; }
.hm-mixrow { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); align-items: start; gap: 12px; padding: 8px 0; border-top: 1px solid var(--ls-rule); }
.hm-mixrow:first-of-type { border-top: 0; }
.hm-mixname { font-size: 12.5px; font-weight: 600; padding-top: 1px; }
.hm-bar { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--ls-rule); }
.hm-bar span { min-width: 2px; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--ls-secondary); font-size: 11.5px; }
.hm-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.hm-legend b { color: var(--ls-ink); font-variant-numeric: tabular-nums; }
.st0, .st-0 { background: #3b82f6; } .st1 { background: #06b6d4; } .st2 { background: #22c55e; } .st3 { background: #eab308; } .st4 { background: #f97316; } .st5 { background: #a855f7; }
.oc0 { background: #3b82f6; } .oc1 { background: #f59e0b; } .oc2 { background: var(--ls-faint); }
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.hm-tile { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--ls-rule); border-radius: 8px; }
.hm-tile span { color: var(--ls-tertiary); font-size: 11.5px; line-height: 1.4; }
.hm-tile b { font-size: 18px; font-variant-numeric: tabular-nums; }

.hm-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hm-chart { min-width: 0; padding: 12px 14px 8px; border: 1px solid var(--ls-rule); border-radius: 12px; background: var(--ls-card); }
.hm-chart-missing { margin: 0 0 4px; font-size: 14px; }
.hm-method { padding: 14px 16px; border: 1px solid var(--ls-rule); border-radius: 12px; background: var(--ls-card); }
.hm-method h2 { margin-top: 0; }
.hm-method ul { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 18px; color: var(--ls-secondary); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 1280px) { .hm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hm-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-mixrow { grid-template-columns: minmax(0, 1fr); gap: 4px; } .hm-value { font-size: 21px; } }