/* UK Timber cladding calculator: trade-friendly, desktop-first, one column on phones */
.cc{--ink:#1f2a1f;--muted:#5b655b;--line:#d9ddd5;--bg:#f6f7f3;--acc:#2f5d34;--acc2:#e8efe6;color:var(--ink);font-size:16px;line-height:1.45;max-width:1200px;margin:0 auto 40px}
.cc *{box-sizing:border-box}
.cc-head{margin:8px 0 20px}.cc-title{font-size:30px;margin:0 0 4px;font-weight:700}.cc-sub{color:var(--muted);margin:0}
.cc-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:28px;align-items:start}
.cc-step{border:1px solid var(--line);border-radius:8px;padding:16px 18px 18px;margin:0 0 16px;background:#fff}
.cc-step legend{font-size:18px;font-weight:700;padding:0 6px;width:auto;border:0;margin:0}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px}
.cc-chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;font-size:15px;cursor:pointer;color:var(--ink)}
.cc-chip[aria-checked=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.cc-lbl{display:block;text-align:left;font-weight:600;font-size:14px;margin:10px 0 4px}
.cc-in{width:100%;border:1px solid #b9c0b4;border-radius:6px;padding:8px 10px;font-size:16px;background:#fff;color:var(--ink);min-height:40px}
.cc-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc-note{color:var(--muted);font-size:14px;margin:10px 0 0}
.cc-seg{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 10px}.cc-seg label{font-weight:500;display:flex;gap:6px;align-items:center;margin:0}
.cc-tbl{width:100%;border-collapse:collapse;margin:4px 0}.cc-tbl th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:4px}
.cc-tbl td{padding:4px;vertical-align:middle}.cc-tbl td:first-child{white-space:nowrap;font-size:14px;width:90px}.cc-n{max-width:130px}
.cc-x{border:0;background:none;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.cc-add{border:1px dashed var(--acc);background:var(--acc2);color:var(--acc);border-radius:6px;padding:6px 12px;font-weight:600;cursor:pointer;margin-top:6px}
.cc-h3{font-size:16px;margin:16px 0 4px}
.cc-result{position:sticky;top:16px}
.cc-card{border:2px solid var(--acc);border-radius:10px;padding:18px;background:#fff}
.cc-h2{font-size:20px;margin:0 0 10px}
.cc-figs{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 12px;font-size:15px}.cc-figs dt{color:var(--muted);font-weight:500}.cc-figs dd{margin:0;font-weight:600;text-align:right}
.cc-line{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:6px}
.cc-line-n a{color:var(--acc);font-weight:600}.cc-q{display:block;font-size:13px;color:var(--muted)}
.cc-pb{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}.cc-p b{font-size:17px}.cc-p small{font-size:13px;color:var(--muted)}
.cc-pb-big .cc-p b{font-size:24px}
.cc-total{border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:4px}.cc-total>span{font-weight:700}
.cc-tog{align-self:flex-start;border:1px solid var(--line);background:#fff;border-radius:4px;padding:3px 8px;font-size:13px}
.cc-errors p{background:#fff4e5;border-left:4px solid #c77700;padding:8px 10px;margin:0 0 8px;font-size:14px}
.cc-small{font-size:13px;color:var(--muted);margin:10px 0 0}
.cc-sticky{display:none}
@media (max-width:900px){
 .cc-grid{grid-template-columns:1fr}.cc-result{position:static}.cc-title{font-size:24px}
 .cc-row2{grid-template-columns:1fr}.cc-step{padding:12px}
 .cc-tbl td:first-child{width:auto}.cc-n{max-width:none}
 .cc-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--acc);color:#fff;padding:10px 14px;gap:12px;align-items:center;justify-content:space-between;box-shadow:0 -2px 8px rgba(0,0,0,.2)}
 .cc-sticky .cc-p small{color:#dfe9dd}.cc-sticky .cc-p b{font-size:16px}
 .cc{padding-bottom:64px}
}

/* wall preview (uktdesigntools 1.1.0) */
.cc-preview{margin-top:16px}
.cc-pv-wall{display:block;width:100%;height:auto;max-height:420px;background:#fff}
.cc-pv-b0{fill:#d9b98c}.cc-pv-b1{fill:#cfae7f}.cc-pv-cut{fill:#e6cfa9}
.cc-pv-course{stroke:#6b4f2a;stroke-width:1.2;vector-effect:non-scaling-stroke}
.cc-pv-edge{fill:none;stroke:#333;stroke-width:1.5;vector-effect:non-scaling-stroke}
.cc-pv-open{fill:#eef3f7;stroke:#333;stroke-width:1.5;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.cc-pv-dim{fill:none;stroke:#555;stroke-width:1;vector-effect:non-scaling-stroke}
.cc-pv-t{fill:#222;font-family:inherit}
.cc-pv-sb0{fill:#333}.cc-pv-sb1{fill:#fff;stroke:#333;stroke-width:1;vector-effect:non-scaling-stroke}
.cc-pv-fig{margin:10px 0 0;display:flex;gap:10px;align-items:center}
.cc-pv-inset{width:150px;max-width:45%;height:auto;flex:none;background:#fafafa;border:1px solid #ddd}
.cc-pv-sec{fill:#d9b98c;stroke:#333;stroke-width:1;vector-effect:non-scaling-stroke}
.cc-pv-outline{fill:#f3ece1;stroke:#333;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.cc-pv-fig figcaption{font-size:.85em;color:#444}

/* Profile + Material (uktdesigntools 1.1.3): side by side on desktop, stacked on phones */
.cc-viz{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px}
.cc-viz-card{border:1px solid var(--line);border-radius:8px;padding:12px 16px 14px;background:#fff;min-width:0}
.cc-viz-card .cc-h3{margin:0 0 8px}
.cc-pf-svg{display:block;width:100%;height:auto;max-height:260px;background:#fbfbf8;border:1px solid #e3e5df;border-radius:4px}
.cc-pf-sec{fill:#d9b98c;stroke:#2b2b2b;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.cc-pf-outline{fill:#f3ece1;stroke:#333;stroke-width:1.2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.cc-pf-dim{fill:none;stroke:#444;stroke-width:1;vector-effect:non-scaling-stroke}
.cc-pf-t{fill:#1f2a1f;font-family:inherit;font-weight:600}
.cc-pf-sb0{fill:#333}.cc-pf-sb1{fill:#fff;stroke:#333;stroke-width:1;vector-effect:non-scaling-stroke}
.cc-mt-svg{display:block;width:100%;height:150px;border-radius:4px}
.cc-mt-edge{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1;vector-effect:non-scaling-stroke}
.cc-mt-name{font-weight:700;margin:8px 0 0}
@media (max-width:600px){.cc-viz{grid-template-columns:1fr}.cc-mt-svg{height:110px}}