/* Lamr free tools (ATS resume checker, and future interactive tools)
   -------------------------------------------------------------------
   The marketing foundation (marketing.css) owns all visual constants and the
   page shell (.hero, .band, .sec-eyebrow, .proof-grid, .closing, etc — reused
   directly, unmodified). This file only adds the interactive form + result
   composition that the static product pages don't need. Scoped, no raw hex,
   same convention as marketing-legal.css / marketing-404.css. */

.tool-form {
  margin-top: 60px;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 760px) {
  .tool-form { grid-template-columns: 1fr 1fr; }
}

.tool-field { background: var(--bg); padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }

.tool-field label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.tool-field textarea {
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sub);
  color: var(--text-1);
  font: inherit;
  font-size: var(--type-body-sm);
  line-height: var(--leading-body);
  padding: 12px 14px;
}

.tool-field textarea::placeholder { color: var(--text-3); }
.tool-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tool-actions {
  grid-column: 1 / -1;
  background: var(--bg);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tool-actions .btn-solid[disabled] { opacity: .6; cursor: default; }

.tool-privacy-note { color: var(--text-3); font-size: var(--type-meta); font-family: var(--font-mono); }

.tool-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: .02em;
  color: var(--text-3);
  min-height: 18px;
}

.tool-note.err { color: var(--brand-red-ink); }

.tool-result { margin-top: 48px; display: none; }
.tool-result.is-visible { display: block; }

.tool-score-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.tool-score-num {
  font-size: var(--type-display-section);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--text-1);
}

.tool-score-tier {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.tool-score-tier--strong { color: var(--brand-green-ink); background: color-mix(in srgb, var(--brand-green) 14%, var(--bg)); }
.tool-score-tier--fair   { color: var(--brand-gold-ink);  background: color-mix(in srgb, var(--brand-gold) 16%, var(--bg)); }
.tool-score-tier--weak   { color: var(--brand-red-ink);   background: color-mix(in srgb, var(--brand-red) 12%, var(--bg)); }

.tool-score-role { color: var(--text-3); font-size: var(--type-body-sm); }

.tool-kw-cols { display: grid; gap: 32px; }

@media (min-width: 640px) {
  .tool-kw-cols { grid-template-columns: 1fr 1fr; }
}

.tool-kw-col label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tool-chip {
  font-size: var(--type-body-sm);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

.tool-chip--covered { color: var(--brand-green-ink); border-color: color-mix(in srgb, var(--brand-green) 35%, var(--border)); }
.tool-chip--missing { color: var(--brand-red-ink); border-color: color-mix(in srgb, var(--brand-red) 30%, var(--border)); }

.tool-empty { color: var(--text-3); font-size: var(--type-body-sm); }

@media (max-width: 560px) {
  .tool-field { padding: 20px; }
  .tool-actions { padding: 16px 20px; }
}