.spatial-exposure { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--theme-foreground-faint); border-radius: 6px; color: var(--theme-foreground); }
.spatial-exposure figcaption { font: 0.95rem/1.5 var(--sans-serif); margin-bottom: 1rem; }
.spatial-exposure label { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; font: .9rem/1.5 var(--sans-serif); }
.spatial-exposure input { flex: 1; min-width: 8rem; accent-color: #16896e; }
.spatial-exposure output { min-width: 3rem; }
.spatial-exposure svg { display: block; width: 100%; max-width: 24rem; height: auto; margin: 1rem auto; }
.spatial-exposure .exposure-grid { fill: var(--theme-background-alt); stroke: var(--theme-foreground-faint); }
.spatial-exposure .exposure-parcels rect { fill: #8bc4a4; stroke: #315c47; stroke-width: 1; }
.spatial-exposure .exposure-parcels text { fill: #163626; text-anchor: middle; font: 9px sans-serif; }
.spatial-exposure .exposure-hatch { fill: none; stroke: #8c4b12; stroke-width: 1; }
.spatial-exposure .exposure-corridor { fill: none; stroke: #b86820; stroke-width: 1.5; stroke-dasharray: 4 3; }
.spatial-exposure .exposure-scale { fill: none; stroke: var(--theme-foreground); stroke-width: 1; }
.spatial-exposure .exposure-scale-label { fill: var(--theme-foreground); text-anchor: middle; font: 8px sans-serif; }
.spatial-exposure .exposure-summary { font: 1rem/1.5 var(--sans-serif); font-variant-numeric: tabular-nums; }
.spatial-exposure table { width: 100%; margin: 1rem 0; }
.spatial-exposure caption { text-align: left; font-size: .85rem; color: var(--theme-foreground-muted); }
.spatial-exposure td { font-variant-numeric: tabular-nums; }
.spatial-exposure .exposure-caption { margin-bottom: 0; font: .85rem/1.5 var(--sans-serif); color: var(--theme-foreground-muted); }