/* "Tell us in your own words": a roomy box, example sentences to start from, and the note on the cards that follow. */
.describe textarea { min-height: 176px; resize: vertical; line-height: 1.5; }
.describe textarea:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.describe__help { margin: 0; font-size: 14px; line-height: 20px; }
.describe__count { white-space: nowrap; }
.describe__examples { margin-top: var(--s3); }
.describe__examples p { margin: 0 0 var(--s2); }
.describe__examples .chips { flex-direction: column; align-items: flex-start; }
.chip-button {
  display: inline-flex; align-items: center; gap: var(--s2); font: inherit; text-align: left; cursor: pointer;
  padding: var(--s2) var(--s3); min-height: 44px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-control); color: var(--charcoal);
}
.chip-button::before { content: "+"; flex: none; color: var(--blue-text); font-weight: 600; font-size: 18px; line-height: 20px; }
.chip-button:hover { border-color: var(--charcoal); background: var(--blue-tint); }
.chip-button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.describe__ai { margin: var(--s3) 0 0; padding: var(--s3); font-size: 14px; line-height: 20px; background: var(--surface-2); border-radius: var(--r-card); }
.intake-note__quote { margin: var(--s2) 0; font-style: italic; }
.intake-note p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  /* Three buttons would make the sticky bar too tall to leave room for the page, so this step keeps them in the page: the main one first. */
  .describe .action-bar { position: static; flex-wrap: wrap; margin: var(--s4) 0 0; padding: 0; border-top: 0; background: none; }
  .describe .action-bar .btn--primary { order: -1; flex: 1 1 100%; }
  .describe .action-bar .btn--secondary { flex: 1 1 auto; }
}