/* Fit Build Estimate to the actual work-area width, including inside visits. */
@media screen {
 #estimateView .work-area{min-width:0;max-width:100%}
 #estimateView .work-area>.table-wrap{container:estimate-row / inline-size;min-width:0;max-width:100%}
 #estimateView .estimate-table{width:100%;min-width:0;table-layout:fixed}
 #estimateView .estimate-table :is(th,td){min-width:0;padding:6px 5px!important;white-space:normal;overflow-wrap:anywhere;letter-spacing:normal}
 #estimateView .estimate-table .estimate-column-headings th{font-size:.8125rem;line-height:1.3}
 #estimateView .estimate-table :is(input,select){width:100%;min-width:0;max-width:100%;padding:5px 6px;min-height:32px;font-size:.875rem;box-sizing:border-box}
 #estimateView .estimate-table select{text-overflow:ellipsis}
 #estimateView .estimate-table input:is([data-field="output"],[data-field="depth"]){appearance:textfield;-moz-appearance:textfield;padding-inline:4px;font-variant-numeric:tabular-nums}
 #estimateView .estimate-visit .estimate-table input:is([data-field="output"],[data-field="daysAllocated"]){background:#f0f7fc;border-color:#9fbdd1;color:#183f5b;font-weight:700;font-variant-numeric:tabular-nums}
 #estimateView .estimate-visit .estimate-table input:is([data-field="output"],[data-field="daysAllocated"]):focus{outline:2px solid #386d94;outline-offset:1px;background:white}
 #estimateView .estimate-table input:is([data-field="output"],[data-field="depth"])::-webkit-inner-spin-button,
 #estimateView .estimate-table input:is([data-field="output"],[data-field="depth"])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
 #estimateView .estimate-table .material-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px;min-width:0;align-items:center}
 #estimateView .estimate-table .material-headings{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0;align-items:center}
 #estimateView .estimate-table .material-headings span{width:auto;min-width:0}
 #estimateView .estimate-table .material-line>select{grid-column:1;grid-row:1;width:100%;min-width:0}
 #estimateView .estimate-table .material-line .job-layer-rate{min-width:0;width:auto;margin:0}
 #estimateView .estimate-table .material-line .job-layer-rate :is(input,select){width:100%;min-width:0;max-width:100%}
 #estimateView .estimate-table .material-line>.psv-toggle{grid-column:2;grid-row:1;display:flex;align-items:center;gap:4px;margin:0;font-size:.75rem;font-weight:700;color:#435166;cursor:pointer}
 #estimateView .estimate-table .material-line>.psv-toggle input{width:15px;min-width:15px;max-width:15px;height:15px;min-height:15px;margin:0;padding:0}
 #estimateView .estimate-table .material-line>.material-base-rate{grid-column:3;grid-row:1;display:flex;align-items:center;gap:2px}
 #estimateView .estimate-table .material-line>.material-base-rate .compact-field-label{position:static;clip-path:none;width:auto;height:auto;white-space:nowrap;font-size:.6875rem;font-weight:700;color:#566477}
 #estimateView .estimate-table .material-line>.material-base-rate input{width:48px;min-width:48px;max-width:48px;min-height:32px;height:32px;padding:3px 4px;font-size:.75rem}
 /* Keep rate controls in one compact strip beneath the material. */
 #estimateView .estimate-table tbody td{vertical-align:top}
 #estimateView .estimate-table td:is(.sellRate,.total,.tonnage-cell){line-height:32px}
 #estimateView .estimate-table .material-pricing-row{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap}
 #estimateView .estimate-table .material-pricing-row.psv-inactive{display:none}
 #estimateView .estimate-table .material-pricing-row>.job-layer-rate{display:flex;align-items:center;gap:2px;flex:0 0 auto}
 #estimateView .estimate-table .material-pricing-row>.job-layer-rate :is(input,select){min-height:22px;height:22px;padding:1px 3px;font-size:.6875rem}
 #estimateView .estimate-table .material-pricing-row>.psv-rate-details select{width:42px;min-width:42px;max-width:42px}
 #estimateView .estimate-table .material-extras{display:flex;align-items:center;flex:0 1 auto;gap:3px;min-width:0;margin:0}
 #estimateView .estimate-table .material-extras .job-layer-rate{display:flex;align-items:center;gap:2px;flex:0 0 auto}
 #estimateView .estimate-table .material-pricing-row .compact-field-label{position:static;clip-path:none;width:auto;height:auto;white-space:nowrap;font-size:.6875rem;line-height:1.2;font-weight:600;color:#566477}
 #estimateView .estimate-table .material-extras .job-layer-rate input{width:42px;min-width:42px;max-width:42px;min-height:22px;height:22px;padding:1px 3px;font-size:.6875rem}
 #estimateView .estimate-table .material-extras .psv-total{margin:0;white-space:nowrap;font-size:.75rem;line-height:1.3;color:#263548}
 #estimateView .estimate-table .material-extras .psv-visibility{margin:0;min-width:0;gap:4px;flex:0 1 auto}
 #estimateView .estimate-table .material-extras .psv-visibility input{width:14px;min-width:14px;min-height:14px;height:14px;padding:0}
 #estimateView .estimate-table .tonnage-cell{white-space:normal}
 #estimateView .estimate-table .tonnage-main{display:grid;grid-template-columns:minmax(0,1fr) 22px;align-items:center;gap:3px;min-height:32px;font-variant-numeric:tabular-nums}
 #estimateView .estimate-table .tonnage-main .tonnes{text-align:right;white-space:nowrap}
 #estimateView .estimate-table .tonnage-main .tonnage-allowance-button{width:22px;margin:0;max-width:100%}
 #estimateView .estimate-table :is(.sellRate,.total){white-space:normal;overflow-wrap:anywhere}
 #estimateView .estimate-table td:last-child{text-align:center}
 #estimateView .estimate-table .estimate-section-headings th:not(:first-child),
 #estimateView .estimate-table .estimate-column-headings th:is(:nth-child(3),:nth-child(4),:nth-child(9)),
 #estimateView .estimate-table tbody td:is(:nth-child(3),:nth-child(4),:nth-child(9)){border-left-width:4px}
 @container estimate-row (max-width:1150px){
  #estimateView .estimate-table{display:block}
  #estimateView .estimate-table colgroup{display:none}
  #estimateView .estimate-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #estimateView .estimate-table tbody{display:grid;gap:8px;padding:6px}
  #estimateView .estimate-table tbody tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid #d5dbe4;border-radius:6px;overflow:hidden}
  #estimateView .estimate-table tbody td{display:block;border:0;min-width:0;padding:7px!important}
  #estimateView .estimate-table tbody td::before{content:attr(data-label);display:block;min-height:1.3em;margin-bottom:5px;font-size:.8125rem;font-weight:500;color:#566477}
  #estimateView .estimate-table tbody td:nth-child(3){grid-column:span 2}
  #estimateView .estimate-table tbody td:nth-child(n+6){border-top:1px solid #dce2e9}
  #estimateView .estimate-table tbody td:last-child{display:flex;align-items:center;justify-content:center}
  #estimateView .estimate-table tbody td:last-child::before{display:none}
  #estimateView .estimate-table .material-headings{display:none}
 }
 @container estimate-row (max-width:650px){
  #estimateView .estimate-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  #estimateView .estimate-table tbody td{border-top:1px solid #dce2e9}
  #estimateView .estimate-table tbody td:nth-child(3){grid-column:1/-1}
 }
}
/* Identify each kind of work without adding height to the pricing rows. */
@media screen {
 #estimateView #lineItems .work-area{border:1px solid #a5b1bf;border-left:4px solid #65758a;box-shadow:0 2px 4px #22304712;margin-bottom:16px}
 #estimateView #lineItems .work-area>summary{background:#e2e8ef;border-bottom:1px solid #aebbc9;padding:10px 14px}
 #estimateView #lineItems .work-area:not([open])>summary{border-bottom:0}
 #estimateView #lineItems .work-area-title small{color:#566579}
 #estimateView #lineItems .work-area-title strong{color:#202f43;font-size:18px}
 #estimateView #lineItems .work-area>summary>span:last-child{color:#405168}
 #estimateView .build-up-material,#estimateView .table-wrap:has(>.estimate-table){--build-up-accent:#8695a5;--build-up-heading:#edf0f4;--build-up-tint:#fafbfd}
 #estimateView .build-up-regulating,#estimateView .regulating-wrap{--build-up-accent:#a39884;--build-up-heading:#f2efe9;--build-up-tint:#fdfcf9}
 #estimateView .build-up-planing,#estimateView .planing-wrap{--build-up-accent:#9a91a5;--build-up-heading:#efedf3;--build-up-tint:#fcfbfd}
 #estimateView .surfacing-heading .build-up-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:5px 0 0;font-size:12px;line-height:1.4}
 #estimateView .build-up-key>span{display:inline-flex;align-items:center;gap:6px;color:var(--ink,#17212b)}
 #estimateView .build-up-key>span::before{content:'';width:12px;height:12px;border-radius:2px;background:var(--build-up-heading);border:1px solid var(--build-up-accent)}
 #estimateView #lineItems .table-wrap:has(>.estimate-table),#estimateView #lineItems .regulating-wrap,#estimateView #lineItems .planing-wrap{border-top:2px solid var(--build-up-accent)}
 #estimateView #lineItems :is(.estimate-table,.regulating-table,.planing-table) thead th{background:var(--build-up-heading);color:#263548;border-bottom-color:var(--build-up-accent)}
 #estimateView #lineItems :is(.estimate-table,.regulating-table,.planing-table) tbody td{background:var(--build-up-tint)}
 #estimateView #lineItems :is(.estimate-table,.regulating-table,.planing-table) tbody td:first-child{box-shadow:inset 2px 0 var(--build-up-accent)}
}
/* Make the main quantity and production figures easy to scan. */
@media screen {
 #estimateView input[type=number]{appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
 #estimateView input[type=number]::-webkit-inner-spin-button,
 #estimateView input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
 #estimateView #metricTonnage{color:#174c73;font-weight:700}
 #estimateView .metric-grid article:has(#metricTonnage){background:#e8f3fc;border:1px solid #39759e}
 #estimateView #lineItems .estimate-table .tonnage-main{background:#e8f3fc;border:1px solid #39759e;border-radius:5px;padding:0 4px;min-height:32px;height:32px}
 #estimateView #lineItems .estimate-table .tonnage-main .tonnes{color:#174c73;font-weight:700;font-size:.875rem;line-height:1.4}
 #estimateView #lineItems input:is([data-field=output],[data-planing-field=output],[data-regulating-field=output]){background:#fff;border:1px solid var(--bindr-border,#ccd4df);color:var(--bindr-text,#263548);font-weight:700;font-size:.875rem;min-height:32px;height:32px;padding:5px 4px;font-variant-numeric:tabular-nums}
 #estimateView #lineItems input:is([data-field=daysAllocated],[data-planing-field=daysAllocated]){min-width:8ch;width:100%;min-height:32px;height:32px;font-size:.875rem;padding:5px 4px;text-align:right;font-variant-numeric:tabular-nums}
 #estimateView #lineItems :is(.estimate-table,.regulating-table) col:nth-child(3){width:25%!important}
 #estimateView #lineItems :is(.estimate-table,.regulating-table) col:nth-child(6){width:8%!important}
 #estimateView #lineItems :is(.estimate-table,.regulating-table) col:nth-child(7){width:9%!important}
 #estimateView #lineItems :is(.estimate-table,.regulating-table) col:nth-child(8){width:8%!important}
 #estimateView #lineItems .planing-col-days{width:8rem}
 #estimateView #lineItems input:is([data-field=output],[data-planing-field=output],[data-regulating-field=output]):focus{background:#fff;outline:2px solid #39759e;outline-offset:2px}
}