/* ============================================================================
   CureMyPlants Web Diagnoser: "already know the problem" shortcut finder.
   Secondary, visually lighter styling so the photo tool below stays the hero.
   Reuses the tokens defined in diagnose.css. House rule: no em dashes or en
   dashes anywhere. CSS gotcha: every clamp() keeps SPACES around + and -.
   ============================================================================ */

.finder {
  max-width: var(--tool-max);
  margin: var(--space-5) auto 0;
}

/* A quiet inset panel, lighter than the white photo tool card below it.
   Rounded and padded on all sides so nothing hugs a border (V3 curves). */
.finder-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--space-6);
}
@media (max-width: 520px) {
  .finder-card { padding: var(--space-5); }
}

.finder-card h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 620;
  line-height: 1.15;
  letter-spacing: -.01em;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* 22 -> 28 */
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.finder-sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--soft);
  margin: 0 0 var(--space-4);
}

.finder-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 520px) {
  .finder-fields {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.finder-field label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.finder-field input {
  width: 100%;
  min-height: 48px;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  padding: 14px 16px; /* comfortable padding on all sides */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.finder-field input::placeholder { color: var(--muted); }
/* System focus ring: 3px sage, matching the rest of the site. */
.finder-field input:focus {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

.finder-result { margin-top: var(--space-4); }

/* Result cards sit on white so the match reads as the answer, while the panel
   around them stays quiet. */
.finder-hit,
.finder-miss {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--space-5);
}

.finder-hit-plant {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 var(--space-1);
}
.finder-hit-cond {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 620;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.finder-hit-teaser {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--soft);
  margin: 0 0 var(--space-4);
}
.finder-hit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.finder-miss-msg {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--soft);
  margin: 0 0 var(--space-4);
}

/* Reuse the page fade for the reveal, respecting reduced motion (the keyframes
   and the reduced-motion guard live in diagnose.css via .screen). */