/* Where the owner says where they live and where they have been. */

.travel-story-form { display: grid; gap: var(--space-m); }
.travel-story-form .field { display: grid; gap: var(--space-3xs); }
.travel-story-form textarea { font-family: var(--font-body); line-height: 1.7; resize: vertical; }

/* The questions a save raised. This is the point of the page, so it leads it
   and reads as something to answer rather than as an error to dismiss. */
.travel-story__questions {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--accent-wash);
}
.travel-story__questions h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
}
.travel-story__questions .field-hint { margin: 0; }

.travel-story__question {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
/* The line the owner typed, named as the question being asked. */
.travel-story__question legend {
  padding-inline: var(--space-3xs);
  font-weight: 600;
  font-size: 0.9rem;
}

/* One candidate to a line. Side by side, five Springfields are unreadable. */
.travel-story__candidate,
.travel-story__drop {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  /* A comfortable target: these are answered on a phone too. */
  padding-block: var(--space-3xs);
  font-size: 0.85rem;
  cursor: pointer;
}
.travel-story__candidate:hover,
.travel-story__drop:hover { color: var(--accent); }
.travel-story__drop {
  margin-top: var(--space-3xs);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2xs);
  color: var(--ink-soft);
}
.travel-story__no-match { margin: 0; color: var(--signal); font-size: 0.85rem; }