/* =========================================================================
   Express a new change — PW-08, PW-09

   Three steps, one column, nothing competing for attention. The design job
   here is almost entirely restraint: someone is being asked to write the
   thing they want changed about the world, and every extra control on the
   screen is a reason to close the tab.

   The one composition decision that carries a product rule is the choice
   list: "My request is different" is a card in the same list as the matches,
   with the same shape and the same button. It is not styled as the quieter
   option, because a refusal path that looks like a fallback is not a
   refusal path (PRD §15).
   ========================================================================= */

.pw-express {
  max-inline-size: var(--pw-container-narrow);
  margin-inline: auto;
  padding: var(--pw-space-7) var(--pw-gutter) var(--pw-space-8);
}

.pw-express__title {
  margin: 0;
  font-size: var(--pw-text-2xl);
  font-weight: var(--pw-weight-bold);
  line-height: var(--pw-leading-tight);
  letter-spacing: var(--pw-tracking-tight);
}

.pw-express__lead {
  margin: var(--pw-space-4) 0 var(--pw-space-6);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

/* --- Step 1: write ------------------------------------------------------- */

.pw-express__form {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-4);
  margin-block-start: var(--pw-space-5);
}

.pw-express__label {
  margin: 0;
}

/* Large, because it is the only thing on the screen that matters. */
.pw-express__input {
  min-block-size: 8rem;
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

.pw-express__counter {
  margin: 0;
  text-align: end;
}

.pw-express__form .pw-button {
  align-self: flex-start;
}

.pw-express__field {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
}

/* --- What you wrote, shown back ------------------------------------------ */

.pw-express__yourWords,
.pw-express__preview {
  margin: 0 0 var(--pw-space-5);
  padding: var(--pw-space-4) var(--pw-space-5);
  border-inline-start: 4px solid var(--pw-primary);
  border-radius: 0 var(--pw-radius-md) var(--pw-radius-md) 0;
  background: var(--pw-bg-subtle);
}

.pw-express__yourWordsLabel {
  margin-block-end: var(--pw-space-2);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

.pw-express__yourWords blockquote,
.pw-express__preview blockquote {
  margin: 0;
}

.pw-express__yourWords blockquote p,
.pw-express__preview blockquote p {
  margin: 0;
  font-size: var(--pw-text-lg);
  line-height: var(--pw-leading-relaxed);
}

/* --- The AI statement, inline -------------------------------------------- */

/* PRD §17.4. This is the screen the commitment was made about: the person is
   being told their words may belong with someone else's, so the fact that
   they can refuse has to be readable here, not one navigation away. */
.pw-ai-note {
  display: flex;
  gap: var(--pw-space-4);
  align-items: flex-start;
  margin-block-end: var(--pw-space-6);
  padding: var(--pw-space-4) var(--pw-space-5);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-surface);
}

.pw-ai-note__icon {
  flex: 0 0 auto;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--pw-topic-technology-ai);
}

.pw-ai-note__body {
  margin: 0;
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}

.pw-ai-note__simulated {
  margin: var(--pw-space-2) 0 0;
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  line-height: var(--pw-leading-relaxed);
}

.pw-ai-note__link {
  display: inline-block;
  margin-block-start: var(--pw-space-2);
  font-size: var(--pw-text-sm);
}

/* --- The choices --------------------------------------------------------- */

.pw-express__choices {
  display: grid;
  gap: var(--pw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-express__choice {
  display: flex;
  flex-direction: column;
  gap: var(--pw-space-2);
  padding: var(--pw-space-5);
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-lg);
  background: var(--pw-surface);
}

/* Same padding, same border, same radius, same button as a match card. The
   only difference is a dashed edge, which marks it as the other kind of
   answer without making it the lesser one. */
.pw-express__choice--different {
  border-style: dashed;
  border-color: var(--pw-border-strong);
}

.pw-express__choiceMeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-3);
  align-items: center;
  margin: 0;
}

.pw-similarity {
  padding: var(--pw-space-1) var(--pw-space-3);
  border-radius: var(--pw-radius-full);
  background: var(--pw-primary-tint);
  color: var(--pw-primary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-semibold);
}

.pw-express__choiceKicker {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-xs);
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-wide);
  text-transform: uppercase;
}

.pw-express__choiceCount {
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-express__choiceTitle {
  margin: 0;
  font-size: var(--pw-text-lg);
  font-weight: var(--pw-weight-semibold);
  line-height: var(--pw-leading-snug);
}

.pw-express__choiceSummary {
  margin: 0;
  color: var(--pw-text-secondary);
  line-height: var(--pw-leading-normal);
}

.pw-express__choiceButton {
  align-self: flex-start;
  margin-block-start: var(--pw-space-3);
}

/* --- Confirm ------------------------------------------------------------- */

.pw-express__queueNote {
  margin: 0 0 var(--pw-space-5);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  line-height: var(--pw-leading-relaxed);
}