/* DwellDelta Tools - the few rules the main site's stylesheet lacks, because that site has no forms.
 * Loaded after styles.css and uses its tokens. No @import, no URL of any kind. */

form .cards p { margin: 0; }
form label { display: block; font-size: .95rem; color: var(--ink-soft); margin-bottom: .35rem; }
form label .for { display: inline; margin: 0 0 0 .35rem; }

form input, form select {
  width: 100%; max-width: 22rem;
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: .5rem;
  padding: .6rem .8rem;
}
form input:focus-visible, form select:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* The same pill the site draws for `main a.button`, on a real button. */
main button.button {
  display: inline-block; padding: 11px 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--green); color: var(--paper);
  font: inherit; font-weight: 600;
}
main button.button:disabled { background: var(--ink-faint); cursor: default; }
main button.button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

#result { margin-top: 1.5rem; }
#result .card {
  max-width: 44rem; padding: 1.25rem 1.5rem;
  background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: .75rem;
}
#result .card h3 { margin-top: 0; }
#result .card p { margin: .5rem 0; }
#result .card p.for { color: var(--coral); }