/* ============================================================
   /tools/ — lead-capture components, loaded via $extra_css from
   tools/_tool-page.php on every tool page. Two patterns:

   .tools-cta   — an always-visible, contextual CTA sitting next to a
                  tool's output. For tools with no value in gating the
                  result.

   .tools-gate  — email-gates a tool's output. Locked/unlocked state is
                  set server-side (a tool's _mechanism.php partial checks
                  ?tools_lead=sent) and toggled by assets/app.js's
                  initToolsLeadForm without a reload once JS is available.
                  For higher-value tools worth gating.

   No new colors — every value below is an existing token from
   css/london.css (--hairline/--tint/--canvas/--publish/--write). Same for
   corners: every card uses var(--radius) (the site's "near-rectangular
   corners" 6px token, see london.css), not an invented pixel value —
   the only two exceptions are genuine pill shapes (999px: progress bar,
   effort chips) and the share bar's intentionally-smaller 4px (see its
   own comment). Card borders match .gbox's 0.5px; small pill/badge
   elements match .chip's 1.5px — both existing Design Scheme patterns,
   not new ones.
   ============================================================ */

.tools-cta {
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--tint);
}
.tools-cta__body { margin: 0; font-size: .96rem; }
.tools-cta__body a { font-weight: 600; }

.tools-gate__unlocked { display: none; scroll-margin-top: calc(72px + 1.5rem); }
.tools-gate--unlocked .tools-gate__locked { display: none; }
.tools-gate--unlocked .tools-gate__unlocked { display: block; }

.tools-gate__form {
  margin-top: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 0.5px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--canvas);
  max-width: 420px;
}
.tools-gate__status {
  font-size: .92rem;
  font-weight: 600;
  margin: .9rem 0 0;
  min-height: 1.3em;
}
.tools-gate__status--ok  { color: var(--publish); }
.tools-gate__status--err { color: var(--write); }