/* ConcreteCalc — "jobsite notebook": paper, charcoal ink, safety orange used sparingly, blueprint result board. */
:root{
  --paper:#f3efe6;--paper2:#ebe6da;--card:#faf8f3;--ink:#1c1b18;--ink2:#45433d;--mute:#7b786f;--rule:#d8d2c3;--rule2:#c4bcaa;
  --orange:#f26b1d;--orange-ink:#fff;--orange-soft:#fbe4d3;
  --board:#1f2023;--board2:#26282c;--board-ink:#f3efe6;--board-mute:#9b9c95;--board-line:#3a3c41;
  --f1:#e4ddcd;--f2:#c9c0ab;--f3:#aaa08a;--ground:#dcd3c0;--wood:#a8702f;
  --ff-h:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--ff-ui:Barlow,"Helvetica Neue",Arial,sans-serif;--ff-body:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#161614;--paper2:#1d1d1a;--card:#1f1f1c;--ink:#efeadf;--ink2:#cbc6b8;--mute:#8f8c82;--rule:#2e2d29;--rule2:#403e38;
  --orange:#ff7a2e;--orange-ink:#161614;--orange-soft:#3a2416;
  --board:#0f0f10;--board2:#171718;--board-ink:#efeadf;--board-mute:#8f8c82;--board-line:#2a2a2d;
  --f1:#3b3934;--f2:#2d2b27;--f3:#23221e;--ground:#2a2721;--wood:#7d5424;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--ff-body);-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .48 0 0 0 0 .44 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.18}}
main,header.top,footer,.minibar{position:relative;z-index:1}
a{color:var(--ink);text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--orange)}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
@media (max-width:640px){.wrap{padding:0 16px}}
h1,h2,h3,.big,.tabs button,.step,.seg button,.actions button,.bag strong,.minibar strong{font-family:var(--ff-h)}
.ui,.field label,.inp,.chips,.lang,.toc,.hint,.note,.stat,.rows,.bag,.res-head h2,.byline,.empty-msg,footer{font-family:var(--ff-ui)}

/* header */
header.top{border-bottom:2px solid var(--ink)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--ff-h);font-weight:800;font-size:1.5rem;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.brand b{color:var(--orange);font-weight:800}
.brand small{display:block;font:500 .62rem/1 var(--ff-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.mark{width:30px;height:30px;flex:none}
.lang{border:1.5px solid var(--ink);background:var(--card);border-radius:3px;padding:7px 10px;font-size:.9rem;font-weight:600;max-width:48vw}

/* hero */
.hero{padding:44px 0 26px;border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:end}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.kicker{font:600 .78rem/1 var(--ff-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:.95;letter-spacing:-.01em;margin:0 0 14px;font-weight:800;text-transform:uppercase}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.5;color:var(--ink2);max-width:60ch;margin:0;font-style:italic}
.byline{font-size:.86rem;color:var(--mute);border-left:3px solid var(--orange);padding:6px 0 6px 14px;line-height:1.5}
.byline b{color:var(--ink);font-weight:600}
.byline a{color:var(--ink2)}

/* app layout */
.app{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start;padding:28px 20px 10px}
@media (max-width:900px){.app{grid-template-columns:1fr}}
@media (max-width:640px){.app{padding:20px 16px 10px}}
.panel{background:var(--card);border:1.5px solid var(--ink);border-radius:4px;padding:22px;box-shadow:6px 6px 0 var(--paper2)}
@media (max-width:640px){.panel{padding:16px}}
.step{margin:0 0 12px;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);display:flex;align-items:center;gap:10px}
.step::before{content:attr(data-n);display:inline-grid;place-items:center;width:26px;height:26px;background:var(--ink);color:var(--paper);border-radius:2px;font-size:.9rem}

/* shape tabs */
.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
@media (max-width:640px){.tabs{grid-template-columns:repeat(3,1fr)}}
.tabs button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border:0;border-right:1.5px solid var(--ink);background:var(--card);cursor:pointer;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.1;text-align:center;color:var(--ink2)}
.tabs button:nth-child(6n){border-right:0}
@media (max-width:640px){.tabs button:nth-child(3n){border-right:0}.tabs button:nth-child(-n+3){border-bottom:1.5px solid var(--ink)}}
.tabs button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.tabs button:hover{background:var(--paper2)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.tabs button[aria-selected=true] svg{stroke:var(--orange)}

/* diagram: blueprint feel */
.figwrap{position:relative;margin:14px 0 18px;padding:10px;border:1px dashed var(--rule2);border-radius:3px;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}
.fig{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
.fig .f1{fill:var(--f1)}.fig .f2{fill:var(--f2)}.fig .f3{fill:var(--f3)}.fig .ground{fill:var(--ground)}.fig .wood{fill:var(--wood)}
.fig path,.fig ellipse,.fig rect{stroke:var(--ink);stroke-opacity:.45;stroke-width:1.2}
.fig .dl{fill:none;stroke:var(--ink);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:3 3}
.fig circle{fill:var(--card);stroke:var(--ink);stroke-width:1.4}
.fig text{font:700 12px var(--ff-h);fill:var(--ink);text-anchor:middle}
.fig g.on .dl{stroke:var(--orange);stroke-opacity:1;stroke-dasharray:none;stroke-width:2.5}
.fig g.on circle{fill:var(--orange);stroke:var(--orange)}.fig g.on text{fill:var(--orange-ink)}

/* fields */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
@media (max-width:480px){.fields{grid-template-columns:1fr}}
.field label,.waste>label{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:var(--ink2);text-transform:uppercase}
.tag{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);font:700 .72rem var(--ff-h)}
.inp{display:flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:3px;background:var(--paper);overflow:hidden}
.inp:focus-within{box-shadow:0 0 0 3px var(--orange-soft);border-color:var(--orange)}
.inp input{flex:1;min-width:0;border:0;background:transparent;padding:11px 12px;font-size:1.15rem;font-weight:600;font-family:var(--ff-ui);font-variant-numeric:tabular-nums;outline:none}
.inp select{border:0;border-left:1.5px solid var(--ink);background:var(--card);padding:0 8px;font-weight:700;font-size:.9rem;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.inp .suffix{display:grid;place-items:center;padding:0 12px;border-left:1.5px solid var(--ink);color:var(--mute);font-weight:700;font-size:.85rem;background:var(--card)}
.inp.small{max-width:130px}
.waste{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.waste>label{width:100%;margin:0}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.seg button{border:0;border-right:1.5px solid var(--ink);background:var(--card);padding:7px 12px;font-weight:700;font-size:.95rem;cursor:pointer;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--paper2)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.prices{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}
.prices summary{cursor:pointer;font:700 1rem var(--ff-h);text-transform:uppercase;letter-spacing:.06em;list-style:none;display:flex;align-items:center;gap:10px}
.prices summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:2px;font-family:var(--ff-ui);font-weight:700}
.prices[open] summary::before{content:"−"}
.prices .fields{margin-top:14px}
summary::-webkit-details-marker{display:none}

/* result board */
.result{position:sticky;top:16px;background:var(--board);color:var(--board-ink);border-color:var(--board);box-shadow:6px 6px 0 var(--orange);
  background-image:linear-gradient(var(--board-line) 1px,transparent 1px),linear-gradient(90deg,var(--board-line) 1px,transparent 1px);background-size:24px 24px}
.result.empty .res-body{display:none}
.result:not(.empty) .empty-msg{display:none}
.empty-msg{color:var(--board-mute);margin:0}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.res-head h2{margin:0;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--board-mute)}
.result .seg{border-color:var(--board-mute)}
.result .seg button{background:transparent;color:var(--board-mute);border-color:var(--board-mute)}
.result .seg button[aria-pressed=true]{background:var(--board-ink);color:var(--board)}
.big{margin:12px 0 0;font-weight:800;line-height:.9;font-size:clamp(4rem,10vw,5.6rem);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big .u{font-size:.4em;color:var(--orange);letter-spacing:0}
.note{margin:8px 0 14px;color:var(--board-mute);font-size:.9rem}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--board-line);font-size:.95rem}
.stat span{color:var(--board-mute)}
.block{border-top:1px solid var(--board-line);padding:14px 0 6px}
.block h3{margin:0 0 10px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--board-mute)}
.bags{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.bag{background:var(--board2);border:1px solid var(--board-line);border-radius:3px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.bag svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:1.5;stroke-linejoin:round;margin-bottom:4px}
.bag strong{font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.bag span{font-size:.78rem;color:var(--board-mute);font-weight:600;white-space:nowrap}
.rows .row{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:7px 0;border-bottom:1px dashed var(--board-line);font-size:.95rem}
.rows .row:last-child{border-bottom:0}
.rows .row strong{font-variant-numeric:tabular-nums;text-align:right}
.rows .row em{grid-column:2;text-align:right;font-style:normal;font-size:.8rem;color:var(--board-mute)}
.hint{margin:0;color:var(--board-mute);font-size:.9rem}
.calcsteps code{display:block;font:500 .82rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--board2);border:1px solid var(--board-line);border-radius:3px;padding:10px 12px;white-space:normal;word-break:break-word;color:var(--board-ink)}
.actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.actions button{flex:1;min-width:130px;border:1.5px solid var(--orange);border-radius:3px;padding:12px 14px;font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:var(--orange);color:var(--orange-ink)}
.actions button:active{transform:translate(1px,1px)}
.actions .ghost{background:transparent;border-color:var(--board-mute);color:var(--board-ink)}

/* quick answers strip */
.quick{padding:10px 20px 0}
@media (max-width:640px){.quick{padding:10px 16px 0}}
.quick table{width:100%;border-collapse:collapse;font-family:var(--ff-ui);font-size:.92rem;background:var(--card);border:1.5px solid var(--ink)}
.quick th,.quick td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.quick th{font:700 .75rem var(--ff-ui);letter-spacing:.1em;text-transform:uppercase;background:var(--paper2);color:var(--ink2)}
.quick td strong{font-family:var(--ff-h);font-size:1.15rem}
.quick caption{caption-side:top;text-align:left;font:700 1.05rem var(--ff-h);text-transform:uppercase;letter-spacing:.08em;padding:0 0 8px}
.quick .scroll{overflow-x:auto}

/* content */
.content{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding:48px 20px 20px}
@media (max-width:900px){.content{grid-template-columns:1fr;gap:16px;padding-top:32px}}
@media (max-width:640px){.content{padding:28px 16px 10px}}
.toc{position:sticky;top:20px;align-self:start;font-size:.9rem}
.toc p{margin:0 0 10px;font:700 .95rem var(--ff-h);text-transform:uppercase;letter-spacing:.1em}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;border-top:1.5px solid var(--ink)}
.toc li{counter-increment:toc;border-bottom:1px solid var(--rule)}
.toc a{display:flex;gap:10px;padding:8px 0;color:var(--ink2);text-decoration:none;font-weight:500}
.toc a::before{content:counter(toc,decimal-leading-zero);font:700 .85rem var(--ff-h);color:var(--orange);min-width:22px}
.toc a:hover{color:var(--orange)}
@media (max-width:900px){.toc{position:static}}
article{max-width:700px}
article section{scroll-margin-top:24px;margin-bottom:40px}
article h2{font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.05;margin:0 0 14px;font-weight:800;text-transform:uppercase;letter-spacing:.005em;padding-top:14px;border-top:3px solid var(--ink)}
article h3{font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;margin:22px 0 6px}
article p{color:var(--ink2);margin:0 0 14px}
article p strong,article li strong{color:var(--ink)}
article ul,article ol{color:var(--ink2);padding-left:22px;margin:0 0 14px}
article li{margin:4px 0}
article table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-family:var(--ff-ui);font-size:.93rem;border:1.5px solid var(--ink);background:var(--card)}
article td,article th{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
article tr:last-child td{border-bottom:0}
article th{background:var(--paper2);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink2)}
article p.formula{font:500 .95rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--board);color:var(--board-ink);border-radius:3px;padding:12px 14px;overflow-x:auto;border-left:4px solid var(--orange)}
article .ex{background:var(--card);border:1px solid var(--rule2);border-left:4px solid var(--orange);padding:12px 16px;margin:0 0 16px;border-radius:0 3px 3px 0}
article .ex p{margin:0 0 6px}
article .src{font:.82rem var(--ff-ui);color:var(--mute);margin-top:-6px}
article details{border-bottom:1px solid var(--rule);padding:12px 0}
article details summary{cursor:pointer;font:600 1.05rem var(--ff-body);list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--ink)}
article details summary::after{content:"+";color:var(--orange);font:800 1.3rem var(--ff-h)}
article details[open] summary::after{content:"−"}
article details p{margin:8px 0 0}
.refs{font-family:var(--ff-ui);font-size:.88rem;color:var(--ink2)}
.refs li{margin:6px 0}
.method{background:var(--card);border:1.5px solid var(--ink);padding:16px 18px;border-radius:3px;font-family:var(--ff-ui);font-size:.92rem;box-shadow:4px 4px 0 var(--paper2)}
.method h3{margin:0 0 8px;font-size:1.1rem}
.method p{margin:0 0 8px;color:var(--ink2)}
.disclaimer{font:.84rem var(--ff-ui);color:var(--mute);margin-top:28px;border-top:1px solid var(--rule);padding-top:12px}

footer{border-top:2px solid var(--ink);margin-top:36px;padding:28px 0 44px;color:var(--mute);font-size:.86rem}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:16px 30px;align-items:start}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr}}
footer .langs{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0}
footer .langs a{color:var(--ink2);text-decoration:none;font-weight:500}
footer .langs a:hover{color:var(--orange)}
footer nav.legal a{margin-right:14px;color:var(--ink2);text-decoration:none}
.brand.small{font-size:1.2rem}

/* mobile floating result */
.minibar{display:none}
@media (max-width:900px){
  .minibar{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:var(--board);color:var(--board-ink);text-decoration:none;border-radius:4px;padding:12px 16px;box-shadow:4px 4px 0 var(--orange);transition:opacity .2s,transform .2s;font-family:var(--ff-ui)}
  .minibar strong{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
  .minibar span{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--board-mute)}
  .minibar.off{opacity:0;transform:translateY(20px);pointer-events:none}
  footer{padding-bottom:96px}
}
@media print{
  header.top,.tabs,.figwrap,.actions,.content,footer,.prices,.seg,.minibar,.byline,body::before{display:none!important}
  body{background:#fff;color:#000}.app{display:block}.panel{box-shadow:none;border:1px solid #999;margin-bottom:12px;background:#fff;color:#000}
  .result{position:static;background:#fff;color:#000;background-image:none}
}