/* Slope and aspect legend and preview panel, on top of the app's tokens in
   web/style.css. */
.slope-legend { font-size: 13px; color: var(--ink); }
.slope-legend-title { color: var(--soft); font-size: 12.5px; margin-bottom: 6px; }
.slope-legend-items { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.slope-legend-items span { display: inline-flex; align-items: center; gap: 6px; }
.slope-legend-items i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--rule); }
.slope-legend.aspect .slope-legend-items { display: grid; grid-template-columns: 1fr 1fr; }