/* ==========================================================================
   TOOL FEEDBACK
   Shared by every tool page — the cut list optimizer and the legend plate
   bench today, whatever comes next after that. Self-contained on purpose: it
   carries its own tokens rather than borrowing tp-* or lp-*, so dropping it
   onto a new page is one link, one script and one section.
   ========================================================================== */
.tpf{
  --tpf-navy:#0F2138; --tpf-slate:#465972; --tpf-gold:#CA9739; --tpf-gold-dk:#8A6414;
  --tpf-ink:#53575A; --tpf-mist:#F4F6F8; --tpf-line:#E3E7ED;
  background:var(--tpf-mist); padding:58px 0 64px;
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.tpf__wrap{max-width:1240px; margin:0 auto; padding:0 24px}
.tpf__card{
  background:#fff; border:1px solid var(--tpf-line); border-top:3px solid var(--tpf-gold);
  border-radius:8px; padding:30px 32px 32px; box-shadow:0 2px 16px rgba(15,33,56,.06);
  max-width:760px;
}
.tpf__eyebrow{
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tpf-gold-dk); display:block; margin-bottom:8px;
}
.tpf__card h2{
  font-size:clamp(1.3rem,2.4vw,1.75rem); color:var(--tpf-navy); margin:0 0 8px; line-height:1.2;
}
.tpf__lede{font-size:.92rem; line-height:1.65; color:var(--tpf-ink); margin:0 0 22px; max-width:60ch}

/* --- stars ------------------------------------------------------------- */
.tpf__rate{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.tpf__stars{display:flex; gap:4px}
.tpf__star{
  background:none; border:0; padding:2px; cursor:pointer; line-height:0;
  color:#CFD6DE; transition:color .12s ease, transform .12s ease;
}
.tpf__star svg{width:30px; height:30px; display:block}
.tpf__star:hover{transform:translateY(-1px)}
.tpf__star.on{color:var(--tpf-gold)}
.tpf__star:focus-visible{outline:2px solid var(--tpf-gold); outline-offset:2px; border-radius:4px}
.tpf__ratetxt{font-size:.82rem; font-weight:700; color:var(--tpf-slate); min-height:1.2em}

/* --- fields ------------------------------------------------------------ */
.tpf__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.tpf__f{display:flex; flex-direction:column; gap:5px; min-width:0}
.tpf__f--wide{grid-column:1 / -1}
.tpf__f label{
  font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tpf-slate);
}
.tpf__f input, .tpf__f textarea{
  font:inherit; font-size:.92rem; color:var(--tpf-navy);
  border:1px solid var(--tpf-line); border-radius:5px; padding:10px 12px; background:#fff;
  width:100%; box-sizing:border-box;
}
.tpf__f textarea{min-height:104px; resize:vertical; line-height:1.55}
.tpf__f input:focus, .tpf__f textarea:focus{outline:0; border-color:var(--tpf-gold); box-shadow:0 0 0 3px rgba(202,151,57,.16)}
.tpf__f input[aria-invalid="true"], .tpf__f textarea[aria-invalid="true"]{border-color:#B4231A; background:#FFF7F6}

.tpf__actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
/* gold never sits behind white text — navy on gold is 6.2:1 */
.tpf__send{
  background:var(--tpf-gold); color:var(--tpf-navy); border:0; border-radius:99px;
  padding:12px 30px; font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:background .15s ease;
}
.tpf__send:hover{background:#B98730}
.tpf__send[disabled]{opacity:.55; cursor:default}
.tpf__note{font-size:.76rem; color:var(--tpf-slate)}
.tpf__err{
  display:none; margin-top:14px; padding:10px 13px; border-radius:5px;
  background:#FFF4F3; border:1px solid #F0C8C4; border-left:3px solid #B4231A;
  color:#8A2018; font-size:.83rem; line-height:1.5;
}
.tpf__err.show{display:block}

/* --- thanks ------------------------------------------------------------ */
.tpf__done{display:none}
.tpf__done.show{display:block}
.tpf.is-done .tpf__form{display:none}
.tpf__done h3{font-size:1.15rem; color:var(--tpf-navy); margin:0 0 8px; display:flex; align-items:center; gap:9px}
.tpf__done h3 svg{width:20px; height:20px; color:#2E7D5B; flex:none}
.tpf__done p{font-size:.9rem; line-height:1.6; color:var(--tpf-ink); margin:0; max-width:56ch}

@media (max-width:640px){
  .tpf{padding:40px 0 46px}
  .tpf__wrap{padding:0 16px}
  .tpf__card{padding:24px 20px 26px}
  .tpf__grid{grid-template-columns:1fr}
  .tpf__star svg{width:34px; height:34px}
  .tpf__actions{gap:12px}
  .tpf__send{width:100%; text-align:center}
}