/* Instarista — job-site practical */
:root{
  --ink:#1E2A3B;          /* slate ink */
  --ink-soft:#4A5668;
  --paper:#FFFFFF;
  --ground:#EEF0EF;       /* cool concrete */
  --line:#D3D7DA;
  --yellow:#F5B800;       /* safety / tape yellow */
  --yellow-deep:#8A6500;  /* readable yellow-family text */
  --blue:#1F5FA8;         /* links */
  --error:#B3261E;
  --radius-s:4px;
  --radius-m:8px;
  --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E6E9ED; --ink-soft:#A9B2BE; --paper:#18202B; --ground:#10161E;
    --line:#2C3644; --yellow:#F5B800; --yellow-deep:#F5C842; --blue:#7FB2EE; --error:#FF8A80;
  }
}
:root[data-theme="dark"]{
  --ink:#E6E9ED; --ink-soft:#A9B2BE; --paper:#18202B; --ground:#10161E;
  --line:#2C3644; --yellow:#F5B800; --yellow-deep:#F5C842; --blue:#7FB2EE; --error:#FF8A80;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem; line-height:1.6;
}
img,svg{max-width:100%}
a{color:var(--blue); text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px; border-radius:2px}

h1,h2,h3{font-family:"Barlow Condensed","Barlow",sans-serif; line-height:1.1; margin:0 0 .5em; letter-spacing:.005em}
h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700}
h2{font-size:1.75rem; font-weight:700; margin-top:2em}
h3{font-size:1.25rem; font-weight:600; margin-top:1.5em}
p{margin:0 0 1em}

.wrap{max-width:1120px; margin:0 auto; padding:0 16px}

/* Header + tape-measure strip (the signature) */
.site-header{background:var(--ink); color:var(--paper)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .site-header{background:#0A0F15; color:var(--ink)}}
:root[data-theme="dark"] .site-header{background:#0A0F15; color:var(--ink)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px}
.brand{color:inherit; text-decoration:none; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:.01em; display:flex; align-items:center; gap:8px}
.brand-mark{width:22px; height:22px; background:var(--yellow); border-radius:3px; display:inline-block; position:relative}
.brand-mark::after{content:""; position:absolute; left:5px; top:5px; right:5px; bottom:5px; border:2px solid #1E2A3B; border-radius:1px}
.site-nav{display:flex; gap:4px 18px; flex-wrap:wrap}
.site-nav a{color:inherit; opacity:.85; text-decoration:none; font-weight:500; font-size:.98rem}
.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1; text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:2px}
.tape{
  height:22px; background-color:var(--yellow);
  background-image:
    repeating-linear-gradient(90deg, #1E2A3B 0 2px, transparent 2px 96px),
    repeating-linear-gradient(90deg, #1E2A3B 0 1.5px, transparent 1.5px 48px),
    repeating-linear-gradient(90deg, #1E2A3B 0 1px, transparent 1px 12px);
  background-size:100% 100%, 100% 60%, 100% 35%;
  background-repeat:no-repeat;
  background-position:0 0, 0 0, 0 0;
}

main{padding:36px 0 64px}
.lede{font-size:1.2rem; color:var(--ink-soft); max-width:var(--measure)}
.crumbs{font-size:.92rem; color:var(--ink-soft); margin-bottom:12px}
.crumbs a{color:inherit}

/* Calculator layout */
.calc-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px; align-items:start; margin-top:24px}
@media (max-width:860px){.calc-grid{grid-template-columns:1fr}}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.panel-head h2{margin:0; font-size:1.35rem}

.units{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--ground)}
.units button{font:inherit; font-size:.92rem; font-weight:600; border:0; background:transparent; color:var(--ink-soft); padding:4px 14px; border-radius:999px; cursor:pointer}
.units button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:5px}
.field.full{grid-column:1/-1}
.field label,.field .label{font-weight:600; font-size:.95rem}
.field .hint{font-size:.85rem; color:var(--ink-soft)}
.input-wrap{display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:var(--radius-s); background:var(--paper); overflow:hidden}
.input-wrap:focus-within{border-color:var(--ink)}
.input-wrap input,.input-wrap select{flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:1.05rem; padding:9px 11px}
.input-wrap input:focus,.input-wrap select:focus{outline:none}
.input-wrap .u{display:flex; align-items:center; padding:0 11px; background:var(--ground); color:var(--ink-soft); font-size:.9rem; font-weight:600; border-left:1px solid var(--line); white-space:nowrap}
select{appearance:auto}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{display:flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:var(--radius-s); padding:7px 12px; cursor:pointer; font-weight:500; background:var(--paper)}
.seg input{accent-color:var(--ink)}
.seg label:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.optional{font-weight:400; color:var(--ink-soft); font-size:.85rem}
[hidden]{display:none !important}

/* Results: lumberyard order slip */
.slip{position:sticky; top:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden}
.slip-top{background:var(--yellow); color:#1E2A3B; padding:14px 22px 16px}
.slip-top .k{font-weight:600; font-size:.95rem}
.slip-top .big{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:clamp(2.4rem,6vw,3.2rem); line-height:1; margin-top:4px; font-variant-numeric:tabular-nums}
.slip-top .big small{font-size:.45em; font-weight:600; margin-left:4px}
.slip-body{padding:6px 22px 18px; border-top:2px dashed var(--line)}
.slip-body dl{margin:0}
.slip-row{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line)}
.slip-row:last-child{border-bottom:0}
.slip-row dt{color:var(--ink-soft)}
.slip-row dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.slip-note{font-size:.9rem; color:var(--ink-soft); margin:12px 0 0}
.slip-error{color:var(--error); font-weight:600; padding:18px 22px}
.slip-actions{display:flex; gap:10px; padding:0 22px 18px}
.btn{font:inherit; font-weight:600; font-size:.95rem; border:1.5px solid var(--ink); background:transparent; color:var(--ink); padding:7px 14px; border-radius:var(--radius-s); cursor:pointer}
.btn:hover{background:var(--ink); color:var(--paper)}

/* Article */
.article{max-width:var(--measure); margin-top:48px}
.article ul,.article ol{padding-left:1.3em; margin:0 0 1em}
.article li{margin-bottom:.35em}
.formula{background:var(--paper); border-left:4px solid var(--yellow); padding:12px 16px; margin:0 0 1em; font-weight:500; border-radius:0 var(--radius-s) var(--radius-s) 0}
.table-scroll{overflow-x:auto; margin:0 0 1.2em}
table{border-collapse:collapse; width:100%; background:var(--paper); font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
th{font-weight:600; background:var(--ground)}
.faq details{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:0 16px; margin-bottom:8px}
.faq summary{cursor:pointer; font-weight:600; padding:12px 0}
.faq details[open] summary{border-bottom:1px solid var(--line); margin-bottom:10px}
.related{margin-top:40px}
.related ul{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.related a{display:inline-block; border:1.5px solid var(--line); background:var(--paper); padding:6px 12px; border-radius:var(--radius-s); text-decoration:none; color:var(--ink); font-weight:500}
.related a:hover{border-color:var(--ink)}

/* Home */
.hero{padding:16px 0 8px}
.hero h1{max-width:16ch}
.tool-list{margin-top:36px; border-top:2px solid var(--ink)}
.tool-row{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr) auto; gap:8px 24px; align-items:baseline; padding:18px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}
.tool-row:hover{background:var(--paper)}
.tool-row .name{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.55rem}
.tool-row .what{color:var(--ink-soft)}
.tool-row .go{font-weight:600; color:var(--blue); white-space:nowrap}
@media (max-width:700px){.tool-row{grid-template-columns:1fr}.tool-row .go{display:none}}
.coming{margin-top:32px; color:var(--ink-soft)}

/* Plain pages */
.prose{max-width:var(--measure)}
.prose ul{padding-left:1.3em}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:28px 0 40px; font-size:.95rem; color:var(--ink-soft)}
.site-footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.site-footer nav{display:flex; gap:6px 18px; flex-wrap:wrap}
.site-footer a{color:inherit}

@media print{
  .site-header,.tape,.site-footer,.related,.article,.slip-actions,.units,.ad{display:none !important}
  body{background:#fff}
  .calc-grid{grid-template-columns:1fr 1fr}
  .slip{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
.calc-grid > *{min-width:0}
@media (max-width:520px){
  .panel{padding:16px}
  .slip-top,.slip-body,.slip-actions{padding-left:16px; padding-right:16px}
  .slip{position:static}
}
.field{min-width:0}
.input-wrap input,.input-wrap select{width:100%}