/* Ant colony optimization. Ants choose routes using pheromone strength and distance; evaporation and deposits guide later iterations.
 * Page-specific layout and controls; shared theme colors are supplied by /Theme.css.
 */
main { max-width: 1500px; }
.section-label { color: var(--site-accent); text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; }
.colony-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 1.5rem; align-items: start; }
.colony-controls,.colony-view { padding: 1.25rem; border: 1px solid var(--site-border); border-radius: 12px; background: var(--site-surface); }
.colony-controls label { display: block; margin: .75rem 0 .3rem; }
.colony-controls input[type="range"] { display: block; width: 100%; }
.colony-controls output { float: right; color: var(--site-accent); }
.colony-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.colony-controls dl { display: grid; grid-template-columns: 1fr 1fr; }
.colony-controls dd { text-align: right; color: var(--site-accent); font-variant-numeric: tabular-nums; }
.colony-controls h2 { font-size: 1rem; }
#colony-map { display: block; width: 100%; height: 70vh; min-height: 350px; }
/* Stack or resize the project layout on narrower screens. */
@media(max-width:700px) { .colony-layout { grid-template-columns: 1fr; } }