/* CalcYourReno - shared styles. Plain CSS, no framework, fast. */
:root{--brand:#b45309;--brand2:#92400e;--ink:#1c1917;--muted:#57534e;--bg:#fafaf9;--card:#ffffff;--line:#e7e5e4;--accent:#fef3c7;--good:#166534}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--brand2)}
header.site{background:#1c1917;color:#fff;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.logo span{color:#fbbf24}
.tagline{font-size:.75rem;color:#d6d3d1}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
nav.tools{background:#292524;overflow-x:auto;white-space:nowrap}
nav.tools a{display:inline-block;color:#e7e5e4;text-decoration:none;padding:10px 12px;font-size:.9rem}
nav.tools a:hover,nav.tools a.active{color:#fbbf24}
main{padding:24px 0 40px}
h1{font-size:2rem;line-height:1.15;margin:.2em 0 .4em}
h2{font-size:1.35rem;margin:1.4em 0 .5em}
h3{font-size:1.05rem;margin:1em 0 .3em}
.lede{font-size:1.05rem;color:var(--muted);max-width:46em}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin:18px 0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink);display:block}
.tool-card:hover{border-color:var(--brand)}
.tool-card h3{margin:.1em 0 .3em;color:var(--brand2)}
.tool-card p{margin:0;color:var(--muted);font-size:.92rem}
fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 14px;padding:12px}
legend{font-weight:700;padding:0 6px}
label{display:block;font-size:.88rem;font-weight:600;margin:8px 0 3px}
input,select{width:100%;padding:9px 10px;border:1px solid #d6d3d1;border-radius:8px;font-size:1rem;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:640px){.row,.row3{grid-template-columns:1fr}}
.unit-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:6px 0 12px}
.unit-toggle button{border:0;background:#fff;padding:8px 16px;font-weight:700;cursor:pointer;font-size:.9rem}
.unit-toggle button.on{background:var(--brand);color:#fff}
button.btn{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:.95rem}
button.btn.secondary{background:#fff;color:var(--brand2);border:1px solid var(--brand)}
button.btn.small{padding:6px 10px;font-size:.85rem}
.results{background:var(--accent);border:1px solid #fde68a;border-radius:12px;padding:16px 18px;margin-top:14px}
.results .big{font-size:1.7rem;font-weight:800;line-height:1.2}
.results ul{margin:.5em 0 0;padding-left:1.2em}
.results .working{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:#44403c;white-space:pre-wrap}
details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0}
summary{font-weight:700;cursor:pointer}
table{border-collapse:collapse;width:100%;margin:10px 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;font-size:.95rem}
th{background:#f5f5f4}
.disclaimer{font-size:.85rem;color:var(--muted);background:#f5f5f4;border-radius:10px;padding:12px 14px}
.room-block{border:1px dashed #d6d3d1;border-radius:10px;padding:12px;margin:10px 0}
footer.site{border-top:1px solid var(--line);padding:22px 0 34px;color:var(--muted);font-size:.88rem}
footer.site a{margin-right:14px}
/* Ad slots: reserved positions only. Hidden until AdSense is approved and enabled in assets/js/ads.js */
.ad-slot{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px dashed #d6d3d1;border-radius:10px;color:#a8a29e;margin:16px 0;padding:10px;text-align:center}
.ad-slot .ad-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ad-slot ins.adsbygoogle{display:block;width:100%}
.checks label{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin:4px 14px 4px 0}
.checks input{width:auto}
@media print{
  header.site,nav.tools,footer.site,.ad-slot,.no-print,.unit-toggle,button{display:none!important}
  body{background:#fff}
  .card,.results{box-shadow:none;border:1px solid #999}
}