/* EVOLVE 033 — responsive constraint optimization workbench */
.constraint-lab{margin:20px 0;padding:clamp(12px,2vw,22px);background:linear-gradient(145deg,#101f2d,#0a1725);border:1px solid #365064;border-radius:14px;color:#d2e3ee}
.constraint-lab h2,.constraint-lab h3{margin:.25rem 0 .6rem;color:#eef6fb}
.constraint-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.constraint-head p{line-height:1.5;max-width:810px}
#constraint-badge{font:600 11px ui-monospace,monospace;color:#8ce6d8;border:1px solid #486c76;border-radius:6px;padding:8px;white-space:nowrap}
.constraint-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:16px 0}
.constraint-controls label,.constraint-editor label{display:flex;flex-direction:column;gap:5px;font:500 11px ui-monospace,monospace;color:#a9c9d8}
.constraint-controls input,.constraint-controls select,.constraint-editor input{width:100%;min-width:0;padding:8px;background:#091522;border:1px solid #3b596c;border-radius:6px;color:#f0f7fc;font:inherit}
.constraint-controls input[type=range]{padding:0;accent-color:#7de5d7}
.constraint-workspace{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(210px,1fr);gap:14px}
.constraint-stage{min-width:0;border:1px solid #3c5667;border-radius:9px;overflow:hidden;background:#0b1926}
#constraint-map{display:block;width:100%;height:auto;aspect-ratio:2;touch-action:none;cursor:crosshair}
#constraint-map:focus-visible{outline:2px solid #9beedd;outline-offset:-3px}
.constraint-legend{display:flex;flex-wrap:wrap;gap:12px;padding:9px;font:11px ui-monospace,monospace;color:#bdd4e0}
.constraint-legend span:nth-child(1){color:#80e5c7}.constraint-legend span:nth-child(2){color:#f5c387}
.constraint-editor{border:1px solid #3c5667;border-radius:9px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start}
.constraint-editor h3,.constraint-editor .quiet,.constraint-points{grid-column:1/-1}
.constraint-points{display:flex;gap:8px}
.constraint-lab button{background:#1b3547;border:1px solid #45657a;color:#e0eef6;padding:9px 11px;border-radius:7px;min-height:40px;cursor:pointer;font:600 11px ui-monospace,monospace}
.constraint-lab button.primary{background:#225665;border-color:#65b4c0}
.constraint-lab button[aria-pressed=true],.constraint-lab button.active{border-color:#7be9d9;background:#1c5157}
.constraint-lab button:disabled{opacity:.4;cursor:not-allowed}
.constraint-lab button:focus-visible{outline:2px solid #9cf5e8;outline-offset:2px}
.constraint-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.constraint-progress{display:flex;gap:12px;align-items:center;font:12px ui-monospace,monospace}
.constraint-progress progress{width:100%;height:10px;accent-color:#7ce8d7}
.constraint-results{margin-top:16px}
.constraint-results h3{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.constraint-results small{font:11px ui-monospace,monospace;color:#a3c2d3}
.constraint-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:7px;max-height:330px;overflow-y:auto;padding:3px}
.constraint-table button{text-align:left;white-space:normal;line-height:1.5;font-size:11px}
.constraint-lab .quiet{color:#a8c1d0;font-size:12px;line-height:1.55}
@media(max-width:800px){.constraint-workspace{grid-template-columns:1fr}.constraint-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.constraint-actions button{flex:1 1 140px}.constraint-head{flex-wrap:wrap}}
@media(max-width:390px){.constraint-editor{padding:9px}.constraint-lab{padding:10px}.constraint-controls{gap:8px}.constraint-controls label,.constraint-editor label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.constraint-lab *{transition:none!important;animation:none!important}}