/* woning.css — het woning-record (RE4). Zelfde vormtaal als het
   klantrecord (kd-blok, kd-rooster), met wat dit scherm eigen is: de
   bewonersperiodes, de maatregelen-strip en de garanties die bij de
   wóning horen. Alleen tokens. */

.wn-wortel { max-width: 1240px; margin: 0 auto; width: 100%; padding: 22px 32px 72px;
  display: flex; flex-direction: column; gap: 16px; }
.wn-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.wn-links, .wn-rechts { display: flex; flex-direction: column; gap: 14px; }
.wn-leeg { font-size: .76rem; color: var(--c-ink-3); margin: 4px 0; }
.wn-bron { display: block; font-size: .62rem; color: var(--c-ink-3); font-style: normal; }

/* maatregelen */
.wn-maatregelen { display: flex; flex-wrap: wrap; gap: 5px; }
.wn-maatregel { font-size: .7rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 2px 10px; color: var(--c-ink-3); }
.wn-maatregel.is-gedaan { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); font-weight: 700; }

/* garanties bij de woning */
.wn-garanties { display: flex; flex-direction: column; gap: 8px; }
.wn-garantie { display: flex; flex-direction: column; font-size: .74rem; border-left: 3px solid var(--c-lijn-2);
  padding-left: 8px; color: var(--c-ink-2); }
.wn-garantie.is-actief { border-left-color: var(--c-groen); }
.wn-garantie em { font-size: .64rem; color: var(--c-ink-3); font-style: normal; }

/* bewoners met periode */
.wn-bewoners { display: flex; flex-direction: column; gap: 8px; }
.wn-bewoner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .78rem;
  padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.wn-bewoner:first-child { border-top: 0; }
.wn-bewoner.is-vorig { opacity: .68; }
.wn-bewoner__wie { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 180px; }
.wn-knr { font-size: .64rem; color: var(--c-ink-3); }
.wn-rol { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 0 7px; color: var(--c-ink-3); }
.wn-bewoner__periode { font-size: .7rem; color: var(--c-ink-2); }
.wn-bewoner__reden { font-size: .68rem; color: var(--c-ink-3); font-style: italic; }

/* historie van het adres */
.wn-historie { display: flex; flex-direction: column; }
.wn-hrij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 10px; align-items: baseline;
  padding: 8px 2px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.wn-hrij:first-child { border-top: 0; }
.wn-hrij__tijd { font-size: .68rem; color: var(--c-ink-3); }
.wn-hrij__wie { display: block; font-size: .66rem; color: var(--c-ink-3); font-style: normal; }
.wn-hrij__soort { font-size: .64rem; color: var(--c-ink-3); text-align: right; }
.wn-docs { display: flex; flex-direction: column; gap: 4px; }
.wn-doc { font-size: .74rem; color: var(--c-ink-2); }

@media (max-width: 1000px) { .wn-raster { grid-template-columns: 1fr; } }