#js-tool-container-screenings-cement-mix-calculator .mix-app { display:flex; flex-direction:column; gap:16px; --mix-cement:#69758b; --mix-screening:#c4865f; --mix-screening-deep:#8a543b; --mix-rule:rgba(138,84,59,.28); --mix-paper:#f6f1e9; }
html[data-theme="dark"] #js-tool-container-screenings-cement-mix-calculator .mix-app { --mix-cement:#aab4c6; --mix-screening:#cd936f; --mix-screening-deep:#edb18f; --mix-rule:rgba(238,188,158,.3); --mix-paper:#2f2d2c; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-fieldset { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-input, #js-tool-container-screenings-cement-mix-calculator .mix-app .tb-select { width:100%; box-sizing:border-box; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-zone[data-tb-zone="outcome"] { display:flex; flex-direction:column; gap:18px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-outcome-sheet, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-card { box-sizing:border-box; min-width:0; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-outcome-sheet { display:flex; flex-direction:column; gap:13px; padding:clamp(17px,2.6vw,27px); border:1px solid var(--mix-rule); border-radius:var(--radius-lg); background:linear-gradient(145deg,color-mix(in srgb,var(--mix-cement) 10%,var(--bg-secondary)),color-mix(in srgb,var(--mix-screening) 13%,var(--bg-secondary))); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-head, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-foot, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-kicker { color:var(--text-secondary); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-head strong { color:var(--text-primary); font-size:1rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.55fr); gap:18px; align-items:end; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-cement-readout, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-ratio-readout { display:flex; flex-direction:column; gap:6px; min-width:0; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-cement-readout > span, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-ratio-readout > span { color:var(--text-secondary); font-size:.82rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-cement-readout > div { display:flex; align-items:baseline; gap:9px; min-width:0; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-cement-readout .tb-hero-value { min-width:0; overflow-wrap:anywhere; font-size:clamp(2.55rem,7vw,5rem); line-height:.98; letter-spacing:-.06em; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-cement-readout b { color:var(--text-secondary); font-size:1rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-ratio-readout { padding-left:16px; border-left:2px solid var(--mix-screening-deep); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-ratio-readout output { color:var(--text-primary); font-family:var(--font-mono); font-size:clamp(1.35rem,3vw,2rem); font-variant-numeric:tabular-nums; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-hero-note { margin:0; max-width:58ch; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-foot { padding-top:12px; border-top:1px solid var(--mix-rule); color:var(--text-secondary); font-size:.8rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-card { display:flex; flex-direction:column; gap:16px; padding:clamp(16px,2.4vw,24px); border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-tertiary); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-head > div { display:flex; flex-direction:column; gap:4px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-head strong { color:var(--text-primary); font-size:.98rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-total { color:var(--mix-screening-deep); font-family:var(--font-mono); font-size:.84rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-lines { display:flex; flex-direction:column; gap:12px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-line { display:grid; grid-template-columns:minmax(106px,auto) minmax(70px,1fr) auto auto; gap:10px; align-items:center; min-width:0; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-name { display:flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:.84rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-swatch { display:block; width:9px; height:9px; border-radius:50%; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-swatch-cement { background:var(--mix-cement); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-swatch-screening { background:var(--mix-screening); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-fill { display:block; width:var(--mix-segment-width,50%); min-width:10px; height:13px; border-radius:2px; transition:width 180ms ease; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-fill-cement { background:var(--mix-cement); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-fill-screening { background:var(--mix-screening); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-line output { color:var(--text-primary); font-weight:750; font-variant-numeric:tabular-nums; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-line > span:last-child { color:var(--text-secondary); font-size:.82rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--border-color); background:var(--border-color); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip > div { display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px; background:var(--bg-secondary); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip span { color:var(--text-muted); font-size:.76rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip strong { color:var(--text-primary); font-size:.94rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip small { color:var(--text-secondary); font-size:.76rem; font-weight:500; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .mix-composition-caption { margin:0; color:var(--text-secondary); font-size:.84rem; overflow-wrap:anywhere; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-zone[data-tb-zone="details"] { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-dose-board { display:flex; flex-direction:column; gap:1px; border:1px solid var(--border-color); background:var(--border-color); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-dose-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:baseline; min-width:0; padding:13px 14px; background:var(--bg-secondary); color:var(--text-secondary); font-size:.88rem; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-dose-row output { color:var(--text-primary); font-weight:750; font-variant-numeric:tabular-nums; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-dose-accent { background:color-mix(in srgb,var(--mix-screening) 12%,var(--bg-secondary)); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-formula-block { box-sizing:border-box; overflow:auto; padding:14px 16px; border-left:3px solid var(--mix-screening-deep); border-radius:var(--radius-sm); background:var(--bg-tertiary); }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-formula-main { color:var(--text-primary); font-family:var(--font-mono); white-space:nowrap; }
#js-tool-container-screenings-cement-mix-calculator .mix-app .tb-details-note { margin:0; overflow-wrap:anywhere; }
@media (max-width:640px) { #js-tool-container-screenings-cement-mix-calculator .mix-app { gap:12px; } #js-tool-container-screenings-cement-mix-calculator .mix-app .tb-grid-3, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-sheet-main, #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-amount-strip { grid-template-columns:1fr; } #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-ratio-readout { padding:12px 0 0; border-left:0; border-top:2px solid var(--mix-screening-deep); } #js-tool-container-screenings-cement-mix-calculator .mix-app .mix-material-line { grid-template-columns:minmax(96px,auto) minmax(46px,1fr) auto auto; gap:7px; } }