/* ════════════════════════════════════════════════════════
   PUBLIC TOOL PAGES — reskin layer
   TreeLookup / LocationVisualization / PlantingVisualization.
   Restyles existing app components to match the landing page's
   typography, color, and radius scale. No structural/JS changes —
   loaded only via a local <link> on these views, never globally.

   IMPORTANT — every font-family rule below is !important.
   site.css:87 has:
     body:not(.tc-landing) *:not(.fa-solid):not(.fa):not(.e-icons) {
       font-family: "Inter";
     }
   This directly sets font-family on every non-icon element on these
   (non body.tc-landing) pages, including elements nested under a
   restyled ancestor. A direct rule on a descendant always wins over
   an inherited value, and this reset's specificity beats any single
   or double class selector, so !important is the only reliable way
   to make serif/mono/Plus-Jakarta-Sans treatments stick here. This
   includes reused landing.css classes like .section-label and
   .footer-brand-name, which render correctly un-modified on the
   actual landing page only because body.tc-landing excludes them
   from that reset there.
════════════════════════════════════════════════════════ */

/* ── Tool page header ── */
.tc-tool-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--stone-200);
}

.tc-tool-header .section-label {
  font-family: var(--font-mono) !important;
  margin-bottom: 0.4rem;
}

.tc-tool-title {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--ink);
  line-height: 1.15;
}

.badge-green,
.badge-stone,
.badge-warning,
.badge-danger {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ── Cards ── */
.tm-card {
  border-radius: var(--radius-lg);
}

.tm-card-title {
  color: var(--ink);
}

/* ── Info panel ── */
.tm-info-panel {
  border-radius: var(--radius-lg);
}

.tm-info-panel-title {
  font-family: var(--font-mono) !important;
  color: var(--stone-400);
  letter-spacing: 0.1em;
}

/* ── KPI cards ── */
.tm-kpi-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em;
}

.tm-kpi-value {
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ── Form elements ── */
.form-input {
  border-radius: var(--radius-md);
}

/* ── Public link row ── */
.tm-public-link-input,
.tm-public-link-copy {
  border-radius: var(--radius-md);
}

/* ── Footer — full-bleed edge-to-edge, matching the landing page ──
   #tm-main-inner adds 1.5rem of horizontal padding (padding-inline:
   calc(var(--spacing) * 6)); cancel it here so the footer runs flush
   to the content column's edges instead of sitting inset. */
.tc-footer--bleed-wrap .tc-footer {
  margin-top: 3rem;
  margin-inline: calc(var(--spacing) * -6);
}

/* .footer-brand-name (serif) and .footer-col h4 (mono) already have
   the right font in landing.css — just re-asserted with !important
   here so they actually win against the site.css reset. */
.tc-footer--bleed-wrap .footer-brand-name {
  font-family: var(--font-serif) !important;
}

.tc-footer--bleed-wrap .footer-col h4 {
  font-family: var(--font-mono) !important;
}

/* These have no font-family of their own in landing.css, so they'd
   otherwise fall through to the site.css Inter reset. */
.tc-footer--bleed-wrap .footer-brand-desc,
.tc-footer--bleed-wrap .footer-col a,
.tc-footer--bleed-wrap .footer-bottom-left,
.tc-footer--bleed-wrap .footer-bottom-right a {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
}