/* Automatiseringsstad (c-797): aanvulling op /bouwspel/assets/bouwspel.css.
 * Alleen wat het stadje extra heeft: infopaneel, legenda en de telregel. */

.info {
  margin-top: calc(var(--u) * 2);
  min-height: 72px;
  padding: 12px 14px;
  background: var(--ui-panel); color: var(--ui-ink);
  box-shadow: inset 2px 2px 0 var(--ui-light), inset -2px -2px 0 var(--ui-shadow);
  font-size: 0.875rem; line-height: 1.5; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.info strong { color: #fff; font-size: 0.95rem; }
.info span { color: var(--ui-ink); opacity: 0.85; }

.telling {
  margin-top: calc(var(--u) * 1.5);
  font-size: 0.8rem; color: var(--text-secondary); text-align: center;
}

.legenda {
  list-style: none; margin: calc(var(--u) * 3) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
  text-align: left;
}
.legenda li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4;
}
.legenda strong { display: block; color: var(--text); font-weight: 600; }
.legenda canvas { width: 34px; height: 48px; image-rendering: pixelated; flex: none; }
.licht {
  flex: none; width: 14px; height: 14px; border-radius: 3px;
  box-shadow: 0 0 8px currentColor; background: currentColor;
}
.licht--amber { color: #fbbf24; }
.licht--cyaan { color: #22d3ee; }
.licht--violet { color: #a78bfa; }
.licht--donker { color: #1a2436; box-shadow: inset 0 0 0 1px #5f7aa8; }
/* leidingen (c-813): kleuren uit de motor, litGroen en litBlauw; lege buis = asfaltD in betonM */
.licht--groen { color: #34d399; }
.licht--blauw { color: #3b82f6; }
.licht--leeg { color: #26262b; box-shadow: inset 0 0 0 2px #858892; }
.legenda-licht { width: 34px; display: flex; justify-content: center; flex: none; }
.legenda-licht--paar { gap: 4px; }

/* Ankerdoel van de doorverwijzing /bouwspel/: houd de kop onder de vaste menubalk. */
#bouw-zelf { scroll-margin-top: 80px; }