/* Keep these density changes local to the costs beneath Surfacing build-ups. */
@media screen {
 #estimateView #breakdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px}
 #estimateView .estimate-cost-card{min-width:0;padding:10px 12px;border:1px solid #d5dce4;border-radius:5px;background:#f8f9fb}
 #estimateView .estimate-cost-card h3{margin:0 0 10px;font-size:14px;color:#293b50}
 #estimateView .estimate-cost-card p{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin:5px 0}
 #estimateView #breakdown span{font-size:13px;margin:0;color:#556174}
 #estimateView #breakdown strong{font-size:16px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
 #estimateView #breakdown .estimate-markup{padding-top:6px;border-top:1px solid #e0e5eb}
 #estimateView #breakdown .estimate-markup strong{font-size:14px;font-weight:600}
 #estimateView #breakdown .gang-day-total{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 8px;margin-top:8px;padding-top:8px;border-top:1px solid #cbd5df}
 #estimateView #breakdown .gang-day-total>span{font-weight:700;color:#293b50}
 #estimateView #breakdown .gang-day-total>strong{font-size:17px;color:#233c53}
 #estimateView #breakdown .gang-day-total>small{grid-column:1/-1;color:#657286;font-size:11px;line-height:1.35}
 #estimateView .estimate-profit-summary{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:10px 12px;background:#e8edf3;border:1px solid #c8d2de;border-radius:5px}
 #estimateView .estimate-profit-summary p{display:grid;gap:4px;margin:0;min-width:0}
 #estimateView #breakdown .estimate-profit strong{font-size:21px;color:#233c53}
 #estimateView #breakdown .estimate-profit.is-loss strong{color:#a13530}
 @media(max-width:900px){#estimateView #breakdown,#estimateView .estimate-profit-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:450px){#estimateView #breakdown,#estimateView .estimate-profit-summary{grid-template-columns:minmax(0,1fr)}}
 #estimateView .split-grid:has(>.allowances-panel){grid-template-columns:minmax(0,1fr)}
 #estimateView .commercial-section .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
 #estimateView #allowanceInputs{gap:12px;container:estimate-costs / inline-size}
 #estimateView #allowanceInputs .compact-cost-section{padding:0 10px 8px}
 #estimateView #allowanceInputs .compact-cost-section>.allowance-section-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 -10px;padding:7px 10px}
 #estimateView #allowanceInputs .allowance-section-heading h3{font-size:15px;line-height:1.4;margin:0}
 #estimateView #allowanceInputs .cost-section-total{margin-left:auto;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
 #estimateView #allowanceInputs .labour-mode-switch{margin:0;font-size:12px;gap:5px}
 #estimateView #allowanceInputs .cost-section-help{font-size:12px;color:var(--muted)}
 #estimateView #allowanceInputs .cost-section-help summary{cursor:pointer}
 #estimateView #allowanceInputs .cost-section-help[open]{flex-basis:100%;order:3}
 #estimateView #allowanceInputs .cost-section-help p{margin:5px 0;font-size:13px}
 #estimateView #allowanceInputs .allowance-row{margin:0;padding:7px 0;border:0;border-bottom:1px solid var(--border,#dde2e8);border-radius:0;background:transparent}
 #estimateView #allowanceInputs .allowance-row:focus-within{box-shadow:none}
 #estimateView #allowanceInputs .compact-cost-row{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(90px,.7fr) minmax(65px,.6fr) minmax(145px,1.35fr) minmax(100px,.8fr) 76px 28px;align-items:end;gap:8px}
 #estimateView #allowanceInputs .other-daily-cost-row{grid-template-columns:minmax(150px,1.4fr) minmax(90px,.7fr) minmax(75px,.6fr) minmax(145px,1.35fr) minmax(100px,.8fr) 28px}
 #estimateView #allowanceInputs .transport-cost-row{grid-template-columns:minmax(140px,1.4fr) minmax(90px,.7fr) minmax(90px,.7fr) minmax(75px,.6fr) minmax(140px,1.3fr) minmax(100px,.8fr) 76px 28px}
 #estimateView #allowanceInputs :is(.compact-cost-row,.cost-options-panel,.compact-part-load-row) label{display:grid;gap:3px;min-width:0;margin:0;font-size:12px;line-height:1.3;font-weight:400}
 #estimateView #allowanceInputs :is(.compact-cost-row,.cost-options-panel,.compact-part-load-row) :is(input,select){width:100%;min-width:0;max-width:100%;min-height:30px;height:30px;margin:0;padding:4px 6px;font-size:14px;text-overflow:ellipsis}
 #estimateView #allowanceInputs .compact-cost-row label>span{font-size:12px}
 #estimateView #allowanceInputs .cost-item-name{display:flex;align-items:center;min-height:30px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
 #estimateView #allowanceInputs :is(.cost-total,.cost-quantity){display:grid;gap:3px;min-width:0;font-size:12px;line-height:1.3}
 #estimateView #allowanceInputs .compact-cost-row output{display:flex;align-items:center;height:30px;padding:0;margin:0;font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0}
 #estimateView #allowanceInputs .cost-total{text-align:right}
 #estimateView #allowanceInputs .cost-total output{justify-content:flex-end}
 #estimateView #allowanceInputs .cost-options-button{height:30px;min-height:30px;padding:3px 6px;font-size:12px;font-weight:500;width:100%}
 #estimateView #allowanceInputs .cost-remove{width:28px;height:30px;min-height:30px;padding:0}
 #estimateView #allowanceInputs .cost-options-panel{display:flex;flex-wrap:wrap;gap:8px 14px;padding:8px;margin-top:6px;background:var(--bindr-subtle,#f4f6f8);border-radius:4px}
 #estimateView #allowanceInputs .cost-options-panel>label{flex:0 1 220px}
 #estimateView #allowanceInputs .cost-options-panel>.layer-choices{flex-basis:100%;margin:0;padding:6px}
 #estimateView #allowanceInputs .cost-options-panel input[type=checkbox]{width:14px;height:14px;min-height:14px}
 #estimateView #allowanceInputs .cost-options-panel .layer-choices label{display:flex;align-items:center;gap:5px}
 #estimateView #allowanceInputs .compact-cost-section>.btn.secondary{min-height:28px;padding:4px 8px;margin-top:7px;font-size:12px}
 #estimateView #allowanceInputs .compact-part-load-row{display:flex;flex-wrap:wrap;align-items:end;gap:8px;padding-top:8px}
 #estimateView #allowanceInputs .compact-part-load-row label{flex:1 1 150px}
 #estimateView #allowanceInputs .compact-part-load-row output{flex:1 1 190px;margin:0;padding:4px 0;font-size:13px;text-align:right}
 #estimateView #allowanceInputs [hidden]{display:none!important}
 /* Fit the smaller cost sections alongside one another when the workspace allows it. */
 #estimateView .allowances-panel{container:allowance-layout / inline-size}
 @container allowance-layout (min-width:1100px){
  #estimateView #allowanceInputs>[data-cost-basis="area"] .compact-cost-row{grid-template-columns:minmax(95px,1.1fr) minmax(70px,.65fr) minmax(58px,.55fr) minmax(130px,1.5fr) minmax(68px,.7fr);gap:6px}
  #estimateView #allowanceInputs>[data-cost-basis="load"] .compact-cost-row{grid-template-columns:minmax(100px,1fr) minmax(70px,.7fr) minmax(45px,.45fr) minmax(130px,1.4fr) minmax(65px,.65fr) 28px;gap:6px}
  #estimateView #allowanceInputs>:is([data-cost-basis="area"],[data-cost-basis="load"]) .compact-cost-row>span:empty{display:none}
  #estimateView #allowanceInputs>:is([data-cost-basis="area"],[data-cost-basis="load"]) .cost-options-slot:not(:empty){grid-column:1/-1;grid-row:2;justify-self:end}
  #estimateView #allowanceInputs>[data-cost-basis="load"] .cost-remove{grid-column:6;grid-row:1}
  #estimateView #allowanceInputs>.compact-part-loads .compact-part-load-row output{flex-basis:100%}
 }
 @container estimate-costs (max-width:950px){
  #estimateView #allowanceInputs :is(.compact-cost-row,.transport-cost-row){grid-template-columns:repeat(3,minmax(0,1fr))}
  #estimateView #allowanceInputs .cost-options-slot:empty{display:none}
  #estimateView #allowanceInputs .cost-remove{justify-self:end}
 }
 @container estimate-costs (max-width:520px){
  #estimateView #allowanceInputs :is(.compact-cost-row,.transport-cost-row){grid-template-columns:repeat(2,minmax(0,1fr))}
  #estimateView #allowanceInputs .cost-item{grid-column:1/-1}
 }
 @media(max-width:700px){#estimateView .commercial-section .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
}