*{box-sizing:border-box}body{margin:0;font:16px/1.45 Arial,sans-serif;background:#f4f5f1;color:#203e34}header{padding:20px 28px;background:#203e34;color:white}h1{margin:4px 0}header p{margin:0}nav,#areas,.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}nav{background:#e6ede6;padding:12px 24px}a{color:#205343}main{padding:20px;max-width:1600px;margin:auto}button,select{font:inherit;padding:9px 13px;border:1px solid #8ba99b;border-radius:5px;background:white;color:#203e34;cursor:pointer}button[aria-pressed=true]{background:#205343;color:white}.note{font-size:14px;max-width:1100px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}section,aside,details{background:white;border:1px solid #c7d6cd;border-radius:8px;padding:14px}.tools h2{margin:0 auto 0 0}#planWrap{overflow:auto;max-height:720px;margin-top:12px}#plan{display:block;width:100%;min-width:600px}.wall{cursor:pointer}.wall line{stroke:#226a98;stroke-width:5}.wall .hit{stroke:transparent;stroke-width:22}.wall text{font:bold 15px Arial;fill:#153e51;stroke:white;stroke-width:4px;paint-order:stroke;pointer-events:none}.wall.selected text{fill:#a94200}#wallPicker{width:100%;margin:8px 0}#details section{margin:10px 0;padding:10px}#details p{margin:4px 0;font-size:14px}.held{color:#9a4400}details{margin-top:18px}summary{cursor:pointer;font-weight:bold}table{border-collapse:collapse;width:100%;font-size:14px}td,th{border-bottom:1px solid #dde5df;padding:10px;text-align:left}td button{padding:5px}#status{font-size:14px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #e89833}@media(max-width:850px){.layout{grid-template-columns:1fr}main{padding:12px}#planWrap{max-height:520px}}

.face-tools,#legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.color-chart{margin:14px 0}.color-chart p{font-size:14px}.legend-item,.selected-key{display:inline-flex;align-items:center;gap:7px}.legend-item{font-size:13px;min-width:145px}.swatch{display:inline-block;width:20px;height:20px;flex-shrink:0;border:1px solid #506258;border-radius:3px}.wall .outline{stroke:white;stroke-width:10}.wall .finish{stroke:var(--finish);stroke-width:6}.wall.selected .outline{stroke:#172f26;stroke-width:13}.wall.selected .finish{stroke:var(--finish);stroke-width:8}.wall.mixed .finish{stroke-dasharray:9 5}.wall .hit{stroke:transparent;stroke-width:24}#details select{width:100%;margin:5px 0}#details h3{font-size:16px;margin:0 0 8px}#status.error{color:#a02c22;font-weight:bold}#previewFlag{font-size:14px;color:#ffe19e}

/* Running pricing total — sticky so the client sees the change at all times. */
.summary{position:sticky;top:0;z-index:7;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;padding:10px 0;background:#f4f5f1}
.summary .metric{flex:1;min-width:210px;background:white;border:1px solid #c7d6cd;border-radius:8px;padding:10px 14px;font-size:13px;color:#4c5c54}
.summary .metric strong{display:block;font-size:24px;margin-top:4px;color:#15372c}
.summary .metric strong.credit{color:#1c6b4f}
.summary .metric small{display:block;margin-top:5px;font-size:12px;color:#6b776f;line-height:1.35}
@media(max-width:850px){.summary{position:static}.summary .metric strong{font-size:20px}}