#properties-dialog{padding:0;overflow:hidden;max-height:90dvh}
#properties-dialog[open]{display:flex;flex-direction:column}
#properties-dialog>.modal-head{flex:none;position:relative;z-index:5;margin:0;padding:16px 22px;background:#fafbf5;border-bottom:1px solid #d6ddcc;gap:16px;align-items:center}
#properties-dialog>.modal-head h2{min-width:0;margin:0;overflow-wrap:anywhere}
#properties-dialog>.modal-head [data-close]{flex:0 0 44px;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid #b9c5ad;border-radius:50%;background:#fff;color:#304638;font-size:22px}
#properties-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 22px 24px;scroll-padding-top:18px}
.grain-controls{margin:14px 0;padding:14px;border:1px solid #d8dfcd;border-radius:10px;background:#f8faf2}
.grain-controls>div{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:8px 0}
.grain-controls strong,.grain-controls small{display:block}.grain-controls small{font-size:12px;color:#6c7965;margin-top:4px}
.grain-controls button{flex:none;min-height:42px}.front-interaction-note{color:#536a49}
@media(max-width:600px){#properties-dialog>.modal-head{padding:12px 14px}#properties-dialog>.modal-head h2{font-size:22px}#properties-body{padding:14px}.grain-controls>div{align-items:flex-start}.grain-controls button{font-size:12px;padding:10px}}