/* ============================================================
   IPFORTE — Tool Widgets  (css/tools.css)
   ------------------------------------------------------------
   Shared component styles for the interactive tools under
   /pages/tools/ (Trademark Cost Calculator, and — reusing these
   same classes — IP Readiness Audit, Class Finder) plus any
   compact embeds of those tools on service pages.

   Built ENTIRELY from the existing IPForte design system in
   css/style.css. Nothing here invents a new colour or font:
     • .tool-panel      → the dark card + crimson left-border
                          treatment of .ipforte-note / .cta-mid
                          / .stat-callout.
     • .tool-option     → the dark two-line choice card of the
                          hero .qlink, with the crimson
                          "is-active" state of .filter-pill.
     • .tool-disclaimer → the faint fine-print tone of the
                          footer .footer-disclaimer.
   Primary buttons keep the global .btn-primary class; warning
   notes keep the global .notice-box class.
   ============================================================ */

/* ---- Panel : dark content card, crimson left border -------- */
.tool-wrap{max-width:600px;margin:0 auto}
.tool-panel{
  background:var(--dark);
  border:1px solid rgba(255,255,255,.06);
  border-left:4px solid var(--crimson);
  border-radius:var(--radius);
  padding:2rem;
}
.tool-panel--compact{padding:1.6rem 1.7rem;margin:1.75rem 0}
.tool-panel-title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.2rem;color:#fff;margin:0 0 1.25rem;
}

/* ---- Field block + label ----------------------------------- */
.tool-field{margin-bottom:1.5rem}
.tool-field:last-of-type{margin-bottom:0}
.tool-panel--compact .tool-field{margin-bottom:1.15rem}
.tool-label{
  display:block;
  font-family:var(--font-body);font-weight:600;
  font-size:.82rem;color:#fff;
  margin-bottom:.6rem;
}
.tool-hint{
  font-family:var(--font-body);font-size:.76rem;line-height:1.55;
  color:rgba(255,255,255,.4);margin-top:.6rem;
}

/* ---- Segmented toggle : dark two-line option cards --------- */
.tool-options{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.tool-option{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  text-align:left;transition:.18s;
}
.tool-option:hover{border-color:var(--crimson)}
.tool-option:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.tool-option.is-active{background:var(--crimson);border-color:var(--crimson)}
.tool-option-name{
  font-family:var(--font-body);font-weight:600;
  font-size:.84rem;color:#fff;line-height:1.3;
}
.tool-option-price{
  font-family:var(--font-mono);font-size:.7rem;
  color:rgba(255,255,255,.45);
}
.tool-option.is-active .tool-option-price{color:rgba(255,255,255,.85)}

/* ---- Stepper : segmented  −  value  +  control ------------- */
.tool-stepper{
  display:inline-flex;align-items:stretch;
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:var(--radius);overflow:hidden;
}
.tool-stepper button{
  width:46px;
  background:rgba(255,255,255,.05);border:none;
  color:var(--crimson);
  font-family:var(--font-body);font-size:1.4rem;font-weight:700;
  line-height:1;transition:.15s;
}
.tool-stepper button:hover{background:var(--crimson);color:#fff}
.tool-stepper button:focus-visible{outline:2px solid var(--crimson);outline-offset:-3px}
.tool-stepper input{
  width:70px;height:46px;text-align:center;
  background:rgba(255,255,255,.03);border:none;
  border-left:1.5px solid rgba(255,255,255,.15);
  border-right:1.5px solid rgba(255,255,255,.15);
  font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:#fff;
  -moz-appearance:textfield;
}
.tool-stepper input:focus{outline:none;background:rgba(255,255,255,.09)}
.tool-stepper input::-webkit-outer-spin-button,
.tool-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- Breakdown : label left / value right, total emphasised  */
.tool-breakdown{
  margin-top:1.6rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:.35rem 1.15rem;
}
.tool-breakdown-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;padding:.8rem 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.tool-breakdown-row:first-child{border-top:none}
.tool-breakdown-label{
  font-family:var(--font-body);font-size:.86rem;
  color:rgba(255,255,255,.6);
}
.tool-breakdown-sub{
  display:block;
  font-family:var(--font-mono);font-size:.68rem;
  color:rgba(255,255,255,.35);margin-top:.25rem;
}
.tool-breakdown-value{
  font-family:var(--font-display);font-weight:700;
  font-size:1.1rem;color:#fff;white-space:nowrap;
}
.tool-breakdown-row--total{
  margin-top:.35rem;padding-top:1rem;
  border-top:2px solid rgba(184,24,40,.45);
}
.tool-breakdown-row--total .tool-breakdown-label{
  font-size:.95rem;font-weight:600;color:#fff;
}
.tool-breakdown-row--total .tool-breakdown-value{
  font-size:1.7rem;color:var(--crimson);text-align:right;
}
/* "Professional fees" row : WhatsApp pricing link instead of a figure */
.tool-breakdown-link{
  font-family:var(--font-body);font-size:.82rem;font-weight:600;
  color:#f87171;white-space:nowrap;transition:color .15s;
}
.tool-breakdown-link:hover{color:#fff}
/* "+ professional fees" caveat under the estimated-total figure */
.tool-breakdown-plus{
  display:block;
  font-family:var(--font-body);font-size:.74rem;font-weight:500;
  color:rgba(255,255,255,.5);margin-top:.15rem;
}

/* ---- CTA : full-width helper; button keeps .btn-primary ---- */
.tool-cta{width:100%;justify-content:center;margin-top:1.4rem}

/* ---- Disclaimer : fine print, footer-disclaimer tone ------- */
.tool-disclaimer{
  font-family:var(--font-body);font-size:.72rem;line-height:1.6;
  color:rgba(255,255,255,.4);
  text-align:center;margin-top:1rem;
}
.tool-disclaimer a{color:#f87171;font-weight:600}

/* ---- Quiz : stacked options + validation error ------------ */
.tool-options--stack{grid-template-columns:1fr}
.tool-error{
  display:none;
  font-family:var(--font-body);font-size:.82rem;font-weight:600;
  color:#f87171;text-align:center;margin-top:.9rem;
}

/* ---- Scored result : score, band, gap list ---------------- */
.tool-result{
  display:none;
  margin-top:1.7rem;padding-top:1.7rem;
  border-top:2px solid rgba(184,24,40,.45);
}
.tool-score{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.tool-score-num{
  font-family:var(--font-display);font-weight:900;
  font-size:3rem;line-height:1;color:#fff;
}
.tool-score-num small{font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.4)}
.tool-score-band{
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:20px;
}
.tool-score-band.is-exposed{background:rgba(184,24,40,.18);color:#f87171;border:1px solid rgba(184,24,40,.5)}
.tool-score-band.is-developing{background:rgba(251,191,36,.14);color:#fbbf24;border:1px solid rgba(251,191,36,.4)}
.tool-score-band.is-strong{background:rgba(74,222,128,.14);color:#4ade80;border:1px solid rgba(74,222,128,.4)}
.tool-result-desc{
  font-family:var(--font-body);font-size:.9rem;line-height:1.7;
  color:rgba(255,255,255,.7);margin-bottom:1.5rem;
}
.tool-gaps-title{
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);
  margin-bottom:.75rem;
}
.tool-gaps{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.6rem}
.tool-gap{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--crimson);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:.7rem .95rem;
}
.tool-gap strong{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:.85rem;color:#fff;margin-bottom:.15rem;
}
.tool-gap span{
  font-family:var(--font-body);font-size:.8rem;line-height:1.55;
  color:rgba(255,255,255,.55);
}
.tool-gap--none{border-left-color:#4ade80}
.tool-gap--none span{color:rgba(255,255,255,.7)}

/* ---- Stacked CTA group : reuses .btn-primary / .btn-ghost -- */
.tool-cta-group{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.tool-cta-group > a{
  width:100%;justify-content:center;
  white-space:normal;text-align:center;line-height:1.35;
}

@media(max-width:480px){
  .tool-panel{padding:1.6rem 1.4rem}
  .tool-options{grid-template-columns:1fr}
}

/* ---- Trademark Class Finder : search box + result cards ---- */
.tcf-search{display:flex;gap:.6rem;max-width:560px;margin:0 auto 1.4rem;flex-wrap:wrap}
.tcf-search input{flex:1;min-width:200px}
.tcf-status{max-width:680px;margin:0 auto 1.2rem;text-align:center;font-family:var(--font-body);font-size:.84rem;color:var(--grey)}
.tcf-results{display:flex;flex-direction:column;gap:1rem;max-width:680px;margin:0 auto}
.tcf-card{background:#fff;border:1px solid var(--light-grey);border-left:3px solid var(--crimson);border-radius:0 8px 8px 0;padding:1.5rem 1.6rem}
.tcf-card-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.65rem}
.tcf-num{flex-shrink:0;width:46px;height:46px;background:var(--crimson);color:#fff;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.tcf-num small{font-family:var(--font-mono);font-size:.46rem;font-weight:500;letter-spacing:.1em;opacity:.85}
.tcf-num b{font-family:var(--font-display);font-weight:900;font-size:1.2rem;margin-top:1px}
.tcf-card-head h3{font-size:1.05rem;color:#111;line-height:1.3}
.tcf-card > p{font-size:.86rem;line-height:1.65;color:var(--grey);margin-bottom:.9rem}
.tcf-examples{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.15rem}
.tcf-example{background:rgba(184,24,40,.07);color:var(--crimson);font-family:var(--font-body);font-size:.72rem;font-weight:600;padding:.28rem .6rem;border-radius:3px}
.tcf-card-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.tcf-empty{max-width:600px;margin:0 auto;text-align:center;background:var(--off-white);border:1px solid var(--light-grey);border-radius:8px;padding:2rem 1.6rem}
.tcf-empty p{font-size:.9rem;color:var(--grey);line-height:1.6;margin-bottom:.5rem}

/* ---- Class directory grid (reuses the .tm-by-city box) ----- */
.tcf-dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem .9rem}
.tcf-dir-grid a{font-family:var(--font-body);font-size:.82rem;color:var(--dark-2);text-decoration:none;padding:.4rem 0;border-bottom:1px solid var(--light-grey);transition:color .15s}
.tcf-dir-grid a:hover{color:var(--crimson)}
@media(max-width:700px){.tcf-dir-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.tcf-dir-grid{grid-template-columns:1fr}}