#js-tool-container-granite-screenings-calculator .screen-app { display:flex; flex-direction:column; gap:16px; --screen-stone:#9b6c55; --screen-stone-deep:#704738; --screen-sand:#d9b79f; --screen-line:rgba(112,71,56,.3); --screen-ink:#3f302a; }
html[data-theme="dark"] #js-tool-container-granite-screenings-calculator .screen-app { --screen-stone:#a9775e; --screen-stone-deep:#e0a987; --screen-sand:#62463c; --screen-line:rgba(240,193,165,.32); --screen-ink:#f0d9ca; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-fieldset { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-grid-2, #js-tool-container-granite-screenings-calculator .screen-app .tb-grid-3 { display:grid; gap:14px 18px; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-grid-2 { grid-template-columns:1fr 1fr; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
#js-tool-container-granite-screenings-calculator .screen-app .tb-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-input, #js-tool-container-granite-screenings-calculator .screen-app .tb-select { width:100%; box-sizing:border-box; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-zone[data-tb-zone="outcome"] { display:flex; flex-direction:column; gap:18px; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-outcome-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); gap:14px; align-items:stretch; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-card, #js-tool-container-granite-screenings-calculator .screen-app .screen-dispatch-note, #js-tool-container-granite-screenings-calculator .screen-app .screen-cross-section { box-sizing:border-box; min-width:0; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-card { display:flex; flex-direction:column; gap:12px; padding:clamp(17px,2.5vw,26px); border:1px solid var(--screen-line); border-radius:var(--radius-lg); background:linear-gradient(135deg, color-mix(in srgb, var(--screen-sand) 28%, var(--bg-secondary)), var(--bg-secondary)); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-top, #js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-foot, #js-tool-container-granite-screenings-calculator .screen-app .screen-note-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-kicker, #js-tool-container-granite-screenings-calculator .screen-app .screen-density-readout, #js-tool-container-granite-screenings-calculator .screen-app .screen-foot-rule { color:var(--text-secondary); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-density-readout { text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-number { display:flex; align-items:baseline; gap:10px; min-width:0; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-number .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-granite-screenings-calculator .screen-app .screen-purchase-unit { color:var(--text-secondary); font-size:clamp(1rem,2vw,1.25rem); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-hero-note { margin:0; max-width:52ch; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-foot { padding-top:11px; border-top:1px solid var(--screen-line); color:var(--text-secondary); font-size:.84rem; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-dispatch-note { display:flex; flex-direction:column; gap:8px; padding:clamp(16px,2.2vw,22px); border:1px solid var(--border-color); border-left:4px solid var(--screen-stone-deep); border-radius:var(--radius-md); background:var(--bg-tertiary); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-note-heading { padding-bottom:12px; color:var(--text-primary); font-weight:700; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-note-mark { color:var(--screen-stone-deep); font-size:.68rem; letter-spacing:.12em; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-dispatch-row { display:grid; grid-template-columns:1fr minmax(0,auto); gap:12px; align-items:baseline; padding:12px 0; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:.86rem; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-dispatch-row output { max-width:100%; color:var(--text-primary); font-weight:750; font-variant-numeric:tabular-nums; text-align:right; overflow-wrap:anywhere; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-dispatch-caption { margin-top:auto; padding-top:14px; color:var(--text-muted); font-size:.78rem; line-height:1.45; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-section { display:flex; flex-direction:column; gap:16px; padding:clamp(16px,2.5vw,24px); border:1px solid var(--screen-line); border-radius:var(--radius-lg); background:var(--bg-secondary); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-head > div { display:flex; flex-direction:column; gap:4px; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-head strong { color:var(--text-primary); font-size:.98rem; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-rule { color:var(--screen-stone-deep); font-family:var(--font-mono); font-size:.8rem; font-variant-numeric:tabular-nums; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(80px,.28fr) minmax(0,1fr); align-items:end; gap:14px; min-height:184px; padding:14px 0 0; border-bottom:1px solid var(--screen-line); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-column { display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-width:0; height:164px; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-label { color:var(--text-secondary); font-size:.78rem; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-fill { display:block; width:100%; height:var(--screen-column-height,60%); border:1px solid var(--screen-stone-deep); border-bottom:0; border-radius:10px 10px 2px 2px; background-color:var(--screen-stone); background-image:radial-gradient(circle at 18% 30%, var(--screen-sand) 0 2px, transparent 3px),radial-gradient(circle at 72% 64%, var(--screen-stone-deep) 0 2px, transparent 3px),radial-gradient(circle at 42% 78%, var(--screen-sand) 0 1px, transparent 2px); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-compact .screen-cross-fill { height:var(--screen-compact-height,48%); background-color:var(--screen-stone-deep); background-image:radial-gradient(circle at 25% 35%, var(--screen-sand) 0 1px, transparent 2px),radial-gradient(circle at 70% 60%, var(--screen-sand) 0 2px, transparent 3px); }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-value { color:var(--text-primary); font-family:var(--font-mono); font-size:.82rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-action { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding-bottom:20px; color:var(--screen-stone-deep); text-align:center; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-action b { font-size:1.65rem; line-height:1; font-weight:500; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-cross-measure { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-size:.78rem; text-align:center; }
#js-tool-container-granite-screenings-calculator .screen-app .screen-measure-line { flex:1 1 auto; height:1px; background:var(--screen-line); }
#js-tool-container-granite-screenings-calculator .screen-app .tb-zone[data-tb-zone="details"] { display:flex; flex-direction:column; gap:14px; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-formula-block { box-sizing:border-box; overflow:auto; padding:14px 16px; border-left:3px solid var(--screen-stone-deep); border-radius:var(--radius-sm); background:var(--bg-tertiary); }
#js-tool-container-granite-screenings-calculator .screen-app .tb-formula-main { color:var(--text-primary); font-family:var(--font-mono); white-space:nowrap; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-check-line { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:baseline; min-width:0; padding:12px; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:.84rem; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-check-line output { color:var(--text-primary); font-weight:750; font-variant-numeric:tabular-nums; }
#js-tool-container-granite-screenings-calculator .screen-app .tb-details-note { margin:0; overflow-wrap:anywhere; }
@media (max-width:640px) { #js-tool-container-granite-screenings-calculator .screen-app { gap:12px; } #js-tool-container-granite-screenings-calculator .screen-app .tb-grid-2, #js-tool-container-granite-screenings-calculator .screen-app .tb-grid-3, #js-tool-container-granite-screenings-calculator .screen-app .screen-outcome-layout, #js-tool-container-granite-screenings-calculator .screen-app .tb-check-grid { grid-template-columns:1fr; } #js-tool-container-granite-screenings-calculator .screen-app .screen-cross-stage { grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr); gap:8px; min-height:156px; } #js-tool-container-granite-screenings-calculator .screen-app .screen-cross-column { height:136px; } #js-tool-container-granite-screenings-calculator .screen-app .screen-cross-action { font-size:.62rem; } #js-tool-container-granite-screenings-calculator .screen-app .screen-purchase-number .tb-hero-value { font-size:clamp(2.25rem,13vw,4rem); } }