/* Lake Norman Dock & Lift Repair: interactive tool pages.
   Loaded after style.css on /tools/* only. Adds nothing to existing pages. */

.tool{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:1.9rem 1.7rem;margin:0 0 2.2rem;max-width:56rem}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.tool-head .eyebrow{margin-bottom:0}
.tool-step-n{font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tool h2.tool-q{font-size:clamp(1.45rem,2.6vw,1.95rem);margin-bottom:.35rem}
.tool .tool-hint{font-size:.95rem;color:var(--muted);margin-bottom:1.2rem}

.opts{display:grid;gap:.7rem;grid-template-columns:1fr}
.opt{display:flex;align-items:flex-start;gap:.8rem;width:100%;text-align:left;font:inherit;font-size:1.02rem;line-height:1.45;color:var(--ink);background:#fbfcfd;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.95rem 1.1rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s,transform .12s}
.opt:hover{border-color:var(--teal);background:#fff;box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.opt:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.opt b{display:block;font-weight:700}
.opt span{display:block;font-size:.92rem;color:var(--muted);margin-top:.15rem}
.opt-mark{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--line);margin-top:.15rem;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;background:#fff}
.opt.sel{border-color:var(--orange);background:#fff8f3}
.opt.sel .opt-mark{background:var(--orange);border-color:var(--orange)}
.opt.sel .opt-mark::after{content:"✓"}

.tool-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.4rem}
.tool-actions .btn{padding:.75rem 1.5rem}
.linkbtn{font:inherit;font-weight:600;font-size:.95rem;color:var(--muted);background:none;border:0;cursor:pointer;padding:.5rem .2rem;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

.qty{display:grid;grid-template-columns:1fr auto;gap:.7rem 1rem;align-items:center;background:var(--cream);border-radius:var(--r-sm);padding:.9rem 1.1rem;margin-top:.7rem}
.qty label{font-weight:600;color:var(--ink);font-size:.98rem}
.qty input{width:110px;padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}

.verdict{border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:1.3rem;border-left:5px solid var(--teal);background:var(--teal-soft)}
.verdict.now{border-left-color:#c0331b;background:#fdeeeb}
.verdict.soon{border-left-color:var(--orange);background:#fff4ec}
.verdict .v-tag{font-family:var(--body);font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.verdict.now .v-tag{color:#c0331b}
.verdict.soon .v-tag{color:var(--orange-2)}
.verdict h3{font-size:clamp(1.35rem,2.4vw,1.75rem);color:var(--ink);margin:.3rem 0 .5rem}
.verdict p{color:var(--ink-2);margin-bottom:.6rem}
.verdict p:last-child{margin-bottom:0}

.res-block{margin-bottom:1.4rem}
.res-block h4{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:.5rem}
.res-block ul{margin:0 0 0 1.15rem;padding:0}
.res-block li{margin-bottom:.45rem}

.est{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:.4rem 0 1.2rem;font-size:.98rem}
.est th,.est td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line)}
.est th{font-family:var(--display);color:var(--ink);background:var(--cream)}
.est td:last-child,.est th:last-child{text-align:right;white-space:nowrap}
.est tr:last-child td{border-bottom:0}
.est tr.tot td{background:var(--cream);font-weight:800;color:var(--ink);font-size:1.05rem}

.tool-cta{background:linear-gradient(150deg,var(--navy-2),var(--navy) 70%);color:#fff;border-radius:var(--r);padding:1.5rem 1.5rem;margin-top:1.5rem}
.tool-cta h4{font-family:var(--display);font-weight:700;font-size:1.4rem;color:#fff;margin-bottom:.4rem}
.tool-cta p{color:#cfe0e9;font-size:.98rem;margin-bottom:1rem}
.tool-cta .btn-call{font-size:1.05rem}
.tool-note{font-size:.9rem;color:var(--muted);margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}

.tool-fallback{border:1px dashed var(--line);border-radius:var(--r-sm);padding:1.1rem 1.2rem;background:var(--cream)}

@media(min-width:720px){
  .opts.two{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .tool{padding:1.4rem 1.15rem;border-radius:var(--r)}
  .qty{grid-template-columns:1fr}
  .qty input{width:100%}
}