.sitework-direct-answer{max-width:880px;margin:0 0 22px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}.sitework-direct-answer h2{margin-top:0}.sitework-direct-answer p{max-width:72ch}.sitework-formula{padding:12px 14px;border-left:4px solid var(--navy-deep);background:#fff}.sitework-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;max-width:820px}.sitework-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(8rem,10rem) auto;gap:8px;align-items:center;font-weight:700}.sitework-field input{width:100%;max-width:10rem}.sitework-unit{color:var(--muted);font-weight:700;white-space:nowrap}.sitework-actions{margin-top:18px}.sitework-results{max-width:820px}.sitework-primary-result,.sitework-result-row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}.sitework-primary-result{font-size:1.15rem}.sitework-primary-result strong{font-size:1.35rem}.sitework-source,.sitework-example{max-width:880px}.sitework-source p,.sitework-example>p{max-width:72ch}.sitework-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.sitework-example-grid h3{margin-bottom:8px}.sitework-table-wrap{overflow-x:auto}.sitework-table-wrap table{width:100%;border-collapse:collapse}.sitework-table-wrap th,.sitework-table-wrap td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.sitework-table-wrap th{font-weight:700}.sitework-faq{max-width:760px;padding:10px 0;border-bottom:1px solid var(--line)}.sitework-faq summary{cursor:pointer;font-weight:750}.sitework-faq p{max-width:70ch}@media(max-width:760px){.sitework-fields,.sitework-example-grid{grid-template-columns:1fr}.sitework-field{grid-template-columns:minmax(0,1fr) minmax(7rem,9rem) auto}.sitework-primary-result,.sitework-result-row{align-items:flex-start;flex-direction:column;gap:4px}.sitework-direct-answer{padding:14px}}
/* Cohort B follows the established live-measurement layout used by the original calculators. */
.sitework-input-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,290px);gap:24px;align-items:start;padding:16px}
.sitework-input-main{min-width:0}.sitework-input-panel .sitework-fields{max-width:none;gap:10px 16px}
.sitework-input-panel .sitework-field{grid-template-columns:minmax(0,1fr) minmax(6.5rem,9.5rem) auto;gap:7px}
.sitework-input-panel .sitework-field input{max-width:9.5rem;min-height:42px;padding:8px 10px}
.sitework-input-panel .sitework-actions{margin-top:14px}
.sitework-diagram{margin:0;min-width:0}.sitework-diagram svg{display:block;width:100%;max-width:290px;height:auto;margin:0 auto}
.sitework-diagram figcaption{display:grid;gap:2px;margin-top:8px;text-align:center}
.sitework-diagram figcaption small{color:var(--muted);font-size:.88rem;font-weight:600}
.sitework-diagram figcaption strong{color:var(--navy-deep);font-size:.92rem;font-weight:800;line-height:1.3}
.sitework-diagram svg text{fill:var(--navy-deep);font:700 10px system-ui,sans-serif;text-anchor:middle}
.diagram-concrete{fill:#e8eef2;stroke:var(--navy-deep);stroke-width:2}.diagram-void{fill:#fff;stroke:var(--navy-deep);stroke-width:2}
.diagram-dim{fill:none;stroke:#a34712;stroke-width:2}.diagram-ground{fill:none;stroke:#65727d;stroke-width:3}
@media(max-width:760px){.sitework-input-panel{grid-template-columns:1fr;padding:12px}.sitework-diagram{max-width:320px;margin:0 auto}.sitework-input-panel .sitework-field{grid-template-columns:minmax(0,1fr) minmax(6rem,9.5rem) auto}}

/* Keep the established input-first layout, but give dense Cohort B forms enough room for readable labels. */
.sitework-input-panel{grid-template-columns:minmax(0,1fr) minmax(230px,270px);gap:28px}
.sitework-input-panel .sitework-fields{grid-template-columns:repeat(2,minmax(300px,1fr));column-gap:30px;row-gap:14px}
.sitework-input-panel .sitework-field{grid-template-columns:minmax(130px,1fr) minmax(8rem,9.5rem) auto;gap:10px}
.sitework-input-panel .sitework-field label{line-height:1.25}
@media(max-width:1080px){.sitework-input-panel{grid-template-columns:1fr}.sitework-diagram{max-width:290px;margin:4px auto 0}}
@media(max-width:760px){.sitework-input-panel .sitework-fields{grid-template-columns:1fr}.sitework-input-panel .sitework-field{grid-template-columns:minmax(130px,1fr) minmax(7rem,9.5rem) auto}}

/* Overlap-only correction: reserve a separate right-hand column for the live check on wide screens. */
@media(min-width:1081px){
  .sitework-input-panel{grid-template-columns:minmax(650px,1fr) 300px;column-gap:48px}
  .sitework-input-panel .sitework-fields{grid-template-columns:repeat(2,minmax(290px,1fr));column-gap:24px}
  .sitework-diagram{width:300px;justify-self:end}
  .sitework-diagram svg{width:280px;max-width:280px}
}

/* Hard containment: the live-check figure must stay inside its allocated grid column. */
.sitework-input-panel>.sitework-input-main{grid-column:1;min-width:0}
.sitework-input-panel>.sitework-diagram{grid-column:2;box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}
.sitework-input-panel>.sitework-diagram svg{box-sizing:border-box;max-width:100%}
@media(min-width:1081px){
  .sitework-input-panel{grid-template-columns:minmax(0,1fr) minmax(320px,340px);column-gap:56px}
  .sitework-input-panel>.sitework-diagram{width:100%;padding-left:12px}
  .sitework-input-panel>.sitework-diagram svg{width:100%;max-width:300px}
}
@media(max-width:1080px){
  .sitework-input-panel>.sitework-input-main,.sitework-input-panel>.sitework-diagram{grid-column:1}
}

/* Interaction containment: diagram must never sit above or intercept input controls. */
.sitework-input-panel>.sitework-input-main{position:relative;z-index:2}
.sitework-input-panel>.sitework-diagram{position:relative;z-index:1;pointer-events:none}
.sitework-input-panel .sitework-field,.sitework-input-panel .sitework-field input{position:relative;z-index:3}

/* Headwall-only legibility: distinguish components and keep annotations off the geometry. */
.sitework-diagram .headwall-live-svg{max-width:340px}
.headwall-live-svg text{font-size:13px;font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.headwall-live-svg .diagram-headwall{fill:#d9e7f0;stroke:var(--navy-deep);stroke-width:3}
.headwall-live-svg .diagram-wing{fill:#e9d7c7;stroke:var(--navy-deep);stroke-width:3}
.headwall-live-svg .diagram-apron{fill:#edf0d5;stroke:var(--navy-deep);stroke-width:3}
.headwall-live-svg .diagram-void{fill:#fff;stroke:var(--navy-deep);stroke-width:3}
.headwall-live-svg .headwall-notes text{font-size:12px;stroke-width:3px}
@media(min-width:1081px){.sitework-input-panel>.sitework-diagram:has(.headwall-live-svg){width:340px;padding-left:0}.sitework-input-panel>.sitework-diagram .headwall-live-svg{width:340px;max-width:340px}}

/* Duct-bank-only: nudge the live diagram right without moving or covering inputs. */
@media(min-width:1081px){
  [data-narrow-sitework-b-calculator="duct-bank-concrete"] .sitework-input-panel>.sitework-diagram{transform:translateX(18px)}
}

/* Duct-bank-only: prevent the two input columns from colliding at laptop widths.
   Preserve the existing desktop diagram position and all calculator behavior. */
@media(min-width:1081px){
  [data-narrow-sitework-b-calculator="duct-bank-concrete"] .sitework-input-panel{
    grid-template-columns:minmax(0,1fr) minmax(260px,300px);
    column-gap:24px;
  }
  [data-narrow-sitework-b-calculator="duct-bank-concrete"] .sitework-input-panel .sitework-fields{
    grid-template-columns:minmax(0,1fr);
    row-gap:12px;
  }
  [data-narrow-sitework-b-calculator="duct-bank-concrete"] .sitework-input-panel .sitework-field{
    grid-template-columns:minmax(0,1fr) minmax(8rem,9.5rem) 3.5rem;
    column-gap:12px;
  }
}