/* Shared calculator: the drawing and tile calculations remain independent. */
.material-calculator-drawer { margin: 0; min-width: 0; }
.material-calculator-content { margin-top: 5px; padding: 0; }
.material-calculator-content[hidden], .screed-results[hidden], .screed-output[hidden] { display: none !important; }
.material-calculator-drawer .desktop-drawer-choice { width: 100%; }
.material-calculator-toggle .desktop-drawer-label { white-space: normal !important; }
.screed-dialog {
    box-sizing: border-box;
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    border: 2px solid #f28c18;
    border-radius: 10px;
    background: #102a43;
    color: #fff;
    font: 400 14px/1.4 'Sansita', Arial, sans-serif;
}
.screed-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.screed-dialog h2 { margin: 0 0 16px; font: 700 22px/1.2 'Sansita', Arial, sans-serif; color: #fff; }
.screed-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.screed-inputs label { display: grid; gap: 5px; min-width: 0; font: inherit; color: #fff; }
.screed-inputs label:first-child { grid-column: 1 / -1; }
.screed-inputs :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid #9ba9b4; border-radius: 5px; background: #fff; color: #102a43; font: 16px/1.2 'Sansita', Arial, sans-serif; }
.screed-inputs [aria-invalid="true"] { border: 2px solid #f58d8d; }
.screed-message:empty { display: none; }
.screed-message, .screed-yield { margin: 14px 0; font-size: 12px; }
.screed-dialog .dialog-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.screed-dialog button { min-height: 36px; padding: 6px 18px; border: 1px solid #f28c18; border-radius: 6px; background: #102a43; color: #fff; font: inherit; cursor: pointer; }
.screed-dialog button:hover { background: #27465f; }
.screed-output h3, .screed-results h3 { margin: 14px 0 6px; font: inherit; font-weight: 700; }
.screed-output h4, .screed-results h4 { margin: 10px 0 4px; font: inherit; font-weight: 700; }
.screed-basis { margin: 0 0 8px; font: inherit; }
.screed-quantities { margin: 0; }
.screed-quantities > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 3px 0; }
.screed-quantities :is(dt, dd) { margin: 0; font: inherit; }
.screed-quantities dd { text-align: right; }
.screed-results { margin-top: 12px; padding-top: 8px; border-top: 1px solid #9ba9b4; font: 400 11px/1.4 'Sansita', Arial, sans-serif; }
#appShell .desktop-measurement-results .screed-results .screed-quantities { display: block; }
#appShell .desktop-measurement-results .screed-results .screed-quantities > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
#appShell .desktop-measurement-results .screed-results :is(h3, h4, p, dt, dd) { color: inherit; font-size: 11px !important; line-height: 1.4; white-space: normal; }
.material-calculator-compact { margin-top: 10px; }
.material-calculator-compact .desktop-drawer-choice { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px; border: 1px solid #f28c18; border-radius: 6px; background: #102a43; color: #fff; font: 400 12px/16px 'Sansita', Arial, sans-serif; cursor: pointer; }
.material-calculator-compact .desktop-drawer-icon { width: 20px; height: 20px; flex-shrink: 0; }
.material-calculator-compact svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 380px) { .screed-inputs { grid-template-columns: 1fr; } }