.cases-view { display: flex; flex-direction: column; gap: var(--space-5); }
.house-card {
  background: var(--bg-elevated); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
  border: 2px solid transparent; transition: border-color 600ms var(--ease-out), background 600ms var(--ease-out);
}
.house-card--highlight { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); }
/* scroll-margin-top gives the anchor-on-entry scroll (js/views/cases.js)
   some breathing room above the card, same as .dies-card--today (css/day.css)
   — uses --safe-top so the card clears the status bar/notch instead of
   surfacing right under it. */
.house-card--current { outline: 2px solid var(--accent); outline-offset: 2px; scroll-margin-top: var(--safe-top); }
.house-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.house-card__badge {
  flex-shrink: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--accent); color: #fff; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.house-card__title { font-size: var(--text-xl); color: var(--accent); }
.house-card__address { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.house-card__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); font-size: var(--text-sm); }
.house-card__facts dt { color: var(--text-muted); }
.house-card__facts dd a { color: var(--accent); }
.house-card__notes { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-1); }
.house-card__notes li::before { content: "· "; }