/* Colour controls continue the existing joint-width field rather than adding a new card. */
.wzd-product-balanced .wb-joint-colors{grid-column:1/-1;margin-top:0;padding-top:12px;border-top:1px solid var(--wb-line,#e5ddd4);min-width:0}
.wzd-product-balanced .wb-joint-color-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-size:13px;font-weight:600;line-height:1.6}
.wzd-product-balanced .wb-joint-color-selected{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wzd-product-balanced .wb-joint-color-grid{display:flex;flex-wrap:nowrap;gap:4px}
.wzd-product-balanced :is(button,label).wb-joint-color-chip{display:flex;align-items:center;justify-content:center;flex:0 1 44px;width:44px;height:44px;min-height:44px;min-width:36px;padding:6px;margin:0;background:transparent;border:1px solid transparent;border-radius:50%;cursor:pointer;box-sizing:border-box}
.wzd-product-balanced .wb-joint-color-chip i,.wzd-product-balanced .wb-joint-color-caption i{display:block;flex:0 0 auto;width:28px;height:28px;border:1px solid #0002;border-radius:50%;position:relative}
.wzd-product-balanced button.wb-joint-color-chip[aria-pressed=true]{background:#fcf4f0}
.wzd-product-balanced .wb-joint-color-chip:is([aria-pressed=true],.is-selected) i:after{content:'';position:absolute;inset:-4px;border:1px solid var(--c-brick,#8e2521);border-radius:50%}
.wzd-product-balanced .wb-joint-color-chip:focus-visible,.wzd-product-balanced .wb-joint-custom summary:focus-visible,.wzd-product-balanced .wb-joint-custom input:focus-visible{outline:2px solid var(--c-brick,#8e2521);outline-offset:3px}
.wzd-product-balanced .wb-joint-color-chip:disabled{opacity:.45;cursor:default}
.wzd-product-balanced .wb-joint-color-hint,.wzd-product-balanced .wb-joint-color-status{font-size:11px;line-height:1.7;color:var(--wb-muted,#6c6258);margin:9px 0 0}
.wzd-product-balanced .wb-joint-color-note{display:block;margin-top:4px;font-size:10px;line-height:1.6;color:var(--wb-muted,#6c6258)}
.wzd-product-balanced .wb-joint-custom-color{position:relative}
.wzd-product-balanced .wb-joint-custom-color i{background:conic-gradient(#ed5c51,#efba44,#77b955,#40b7ac,#6583d5,#aa66ba,#ed5c51)}
.wzd-product-balanced .wb-calculator .wb-joint-custom-color input[type=color]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.wzd-product-balanced .wb-joint-custom-color:focus-within{outline:2px solid var(--c-brick,#8e2521);outline-offset:2px}
.wzd-product-balanced .wb-joint-custom-color.is-disabled{opacity:.45;cursor:default}
.wzd-product-balanced .wb-joint-custom-color.is-disabled input{cursor:default}
.wzd-product-balanced .wb-joint-color-caption{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#faf8f5;border-top:1px solid var(--wb-line,#e5ddd4);font-size:11px;line-height:1.6;color:var(--wb-muted,#6c6258)}
.wzd-product-balanced .wb-joint-color-caption i{width:13px;height:13px}
.wzd-product-balanced .wb-joint-colors [hidden],.wzd-product-balanced .wb-joint-color-caption[hidden]{display:none!important}
@media(min-width:761px){
 .wzd-product-balanced .wb-has-joint-color .wb-desktop-preview{align-self:stretch;width:100%;height:auto;min-height:0}
 .wzd-product-balanced .wb-has-joint-color .wb-preview-meta{margin-top:0}
 .wb-layout-three .wzd-product-balanced .wb-calculator.wb-has-joint-color .wb-calc-summary>.wb-desktop-preview{flex:0 0 auto;align-self:stretch;width:100%;height:auto;min-height:0}
 .wb-layout-three .wzd-product-balanced .wb-calculator.wb-has-joint-color .wb-preview-meta{margin-top:0}
}
/* Mobile controls stay subordinate to the material preview. */
@media(max-width:760px){
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-visual.wb-mobile-toolbar .wb-surface-controls{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;padding:5px 8px;background:#fff;min-width:0}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls>[role=group]{display:flex;align-items:center;gap:4px;min-width:0;flex:1}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls>[role=group]:has([data-wb-surface-orientation]){flex:0 0 auto;border-left:1px solid var(--wb-line);padding-left:8px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls>[role=group]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls button{min-width:0;min-height:32px;height:32px;padding:3px 6px;font-size:11px;line-height:1.2;white-space:nowrap;border-color:transparent;background:#f6f5f2;border-radius:6px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls [data-wb-surface-orientation]{flex:0 0 32px;width:32px;font-size:17px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-surface-controls button[aria-pressed=true]{border-color:#d5b4a9;background:#f8ede7;color:var(--c-brick,#8e2521)}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-preview-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:36px;padding:3px 8px;background:#faf8f5;border-top:1px solid var(--wb-line);font-size:10px;color:var(--wb-muted)}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-preview-footer[hidden],.wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-area-label[hidden]{display:none!important}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-preview-footer .wb-joint-color-caption{border:0;background:transparent;padding:0;font-size:10px;gap:5px;min-width:0}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-area-switch{display:flex;flex:0 0 auto;gap:3px;padding:0;border:0;background:transparent;margin:0 0 0 auto;position:static;width:auto}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-area-switch button{flex:0 0 auto;min-width:38px;min-height:28px;height:28px;padding:3px 5px;font-size:10px;line-height:1.2;white-space:nowrap;border-radius:5px;border-color:transparent;background:transparent}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-area-switch button[aria-pressed=true]{background:#f1e5df;border-color:#d5b4a9;color:var(--c-brick,#8e2521)}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator :is(.wb-metric-controls,.wb-vent-w-controls,.wb-roof-controls,.wb-curve-controls) button{min-height:32px;padding:4px 6px;font-size:11px;line-height:1.3}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-area-switch button{min-height:28px;padding:3px 5px;font-size:10px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-area-toggle button{min-height:32px;padding:4px;font-size:11px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-chips button{min-height:32px;padding:4px 3px;font-size:11px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-chips button[aria-pressed=true]{background:#f8ede7;color:var(--c-brick,#8e2521);border-color:#d5b4a9}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-orientation button{min-height:36px;padding:4px 22px 4px 7px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-orientation strong{font-size:11px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-joint-color-heading{margin-bottom:2px;font-size:12px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator :is(button,label).wb-joint-color-chip{flex:1 1 0;width:auto;height:36px;min-height:36px;min-width:32px;padding:3px;background:transparent}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-joint-color-chip i{width:24px;height:24px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-controls{padding:6px 8px;background:#fff}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar :is(.wb-vent-pattern-heading,.wb-vent-desktop-hint,.wb-vent-pattern-status,.wb-vent-pattern-options button>span){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-options{display:flex;gap:4px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-options button{flex:1;min-width:0;height:40px;min-height:40px;padding:3px;gap:0;border-radius:6px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-options canvas{display:block;width:30px;height:30px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-options button[aria-pressed=true]{background:#f8ede7;border-color:#d5b4a9;box-shadow:none}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-actions{display:flex;gap:4px;margin-top:5px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-actions button{flex:1;min-width:0;min-height:28px;padding:3px 4px;font-size:9px;line-height:1.3;white-space:nowrap;border-color:transparent;background:#f6f5f2}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-mobile-toolbar .wb-vent-pattern-actions button[aria-pressed=true]{background:#f1e5df;color:var(--c-brick,#8e2521);border-color:#d5b4a9}
}
@media(max-width:760px){
 .wzd-product-balanced.wb-mobile-compact .wb-joint-colors{margin-top:12px;padding-top:10px}
 .wzd-product-balanced.wb-mobile-compact .wb-joint-color-heading{font-size:13px;margin-bottom:8px}
 .wzd-product-balanced.wb-mobile-compact .wb-joint-color-caption{font-size:11px;padding:8px 10px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-calc-form input[type=number]{height:32px;min-height:32px;padding:4px 8px;font-size:16px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-area-total{grid-template-rows:auto 32px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator .wb-area-total strong{height:32px;min-height:32px;padding:4px 8px}
 .wzd-product-balanced.wb-mobile-compact .wb-calculator :is(.wb-joint-color-hint,.wb-joint-color-status){margin:4px 0 0;font-size:11px;line-height:1.5;white-space:nowrap}
}

/* Mobile simulation frames: height is 70% of width; desktop remains 2:1. */
@media (max-width: 760px) {
 html body #main#main .wzd-product-balanced .wb-calculator .wb-visual .wb-preview {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 10 / 7 !important;
 }
}