/* ============================================================
EARTHWORKS NV: calculators + checklists (Oct 2026)
Uses the tokens from styles.css
============================================================ */

.calc{
display:grid;grid-template-columns:1.05fr .95fr;gap:0;
background:var(--white);border:1px solid var(--gridline);
border-top:5px solid var(--flag);border-radius:var(--radius);
}
@media(max-width:860px){.calc{grid-template-columns:minmax(0,1fr)}}

.calc-inputs{padding:28px 28px 30px}
.calc-inputs fieldset{border:0;margin:0 0 22px;padding:0}
.calc-inputs fieldset:last-child{margin-bottom:0}
.calc-inputs legend{
font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--flag-dark);margin-bottom:12px;padding:0;
}
.calc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.calc-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){.calc-row,.calc-row.three{grid-template-columns:minmax(0,1fr)}}
.calc-field{margin-bottom:14px}
.calc-field label{
display:block;font-size:13px;font-weight:700;letter-spacing:.03em;
margin-bottom:6px;color:var(--ink);
}
.calc-field .unit{font-weight:500;color:var(--ink-soft)}
.calc-field input{
width:100%;min-width:0;padding:12px 13px;border:1px solid var(--gridline);
border-radius:var(--radius);background:var(--paper);color:var(--ink);
font-family:'IBM Plex Mono',monospace;font-size:16px;
}
.calc-field input:focus{outline:2px solid var(--flag);border-color:var(--flag);background:var(--white)}
.calc-field .hint{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45}

.calc-results{
background:var(--ink);color:var(--paper);padding:28px 26px 30px;
display:flex;flex-direction:column;
}
.calc-results h2{font-size:26px;color:var(--white);margin:0 0 14px;max-width:none}
.result-line{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:13px 0;border-bottom:1px dashed #3A3E42;
}
.result-line:last-of-type{border-bottom:0}
.result-line span{font-size:14px;color:#B9B7AF}
.result-line b{
font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;
color:var(--white);white-space:nowrap;text-align:right;
}
.result-line.key b{font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:700;color:var(--flag);white-space:normal}
.result-note{font-size:13px;color:#9A9890;margin-top:auto;padding-top:18px;line-height:1.5}
.result-note a{color:#B9B7AF}

.calc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.calc-actions button{
background:none;border:1.5px solid var(--gridline);color:var(--ink);
padding:10px 18px;border-radius:var(--radius);font-family:inherit;
font-size:14px;font-weight:700;cursor:pointer;
}
.calc-actions button:hover{border-color:var(--flag);color:var(--flag-dark)}

.formula{
font-family:'IBM Plex Mono',monospace;font-size:15px;background:var(--white);
border:1px solid var(--gridline);border-left:4px solid var(--flag);
padding:16px 18px;margin:18px 0;color:var(--ink);overflow-x:auto;
}
.formula div+div{margin-top:6px}

/* hub + checklist cards */
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.tool-grid{grid-template-columns:minmax(0,1fr)}}
.tool-card{
background:var(--white);border:1px solid var(--gridline);border-top:5px solid var(--flag);
border-radius:var(--radius);padding:26px 24px;display:flex;flex-direction:column;
text-decoration:none;color:var(--ink);transition:border-color .15s ease;
}
a.tool-card:hover{border-color:var(--flag)}
.tool-card .tag{
font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--flag-dark);margin-bottom:10px;
}
.tool-card h3{font-size:25px;margin-bottom:10px}
.tool-card p{color:var(--ink-soft);font-size:15px;flex:1}
.tool-card .go{margin-top:16px;font-weight:700;color:var(--blueprint)}
.tool-card ul{list-style:none;margin:12px 0 18px;flex:1}
.tool-card ul li{
padding:6px 0 6px 22px;position:relative;font-size:14.5px;color:var(--ink-soft);
border-bottom:1px dashed var(--paper-deep);
}
.tool-card ul li::before{content:"■";color:var(--flag);position:absolute;left:0;top:10px;font-size:9px}
.tool-card .btn{text-align:center}

/* crew rows + checkbox (prevailing wage calculator) */
.crew-row{border-bottom:1px dashed var(--gridline);padding-bottom:4px;margin-bottom:14px}
.crew-row:last-child{border-bottom:0}
.crew-row .calc-field{margin-bottom:10px}
.calc-field input[type="text"]{font-family:'Public Sans',system-ui,sans-serif;font-size:15px}
.calc-check label{display:flex;gap:10px;align-items:flex-start;font-weight:600;cursor:pointer}
.calc-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--flag);flex:0 0 auto}