/* HowTraitsWorkModal — full-screen trait-system explainer.

   The modal frame is the standard .modal-fullscreen container (see modals.css);
   these rules style the inner content only: a vertical stack of explanatory
   paragraphs, each of which may carry inline trait pills for reinforcement. */

.how-traits {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.how-traits-p {
  margin: 0;
  font-size: 1rem;      /* comprehension prose: keep at the readable floor */
  line-height: 1.6;
  color: var(--font-color-1);
}

/* Inline pills sit in the flow of a sentence. Nudge them onto the text
   baseline and keep the horizontal margin tight so they don't open gaps in
   the line. The vertical padding is trimmed slightly vs a standalone pill so
   the line-height doesn't jump on rows that contain a pill. */
.how-traits-p .pill {
  vertical-align: baseline;
  margin: 0 0.05rem;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}