/* The second room: why the circle is worth the trouble, then the naming of
   it — the list growing under the argument as the seeker works. */
@layer components {

/* The doorway's dots: four rooms, the lit one underfoot. */
.doorway { display: flex; gap: 0.45rem; margin: 0 0 0.9rem; }
.doorway__dot {
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--line-strong);
}
.doorway__dot--here { background: var(--gold); }

.gathering__why p { margin: 0 0 0.9rem; }
.gathering__why p:last-child { margin-bottom: 0; }
.gathering__ask { color: var(--ink-dim); font-size: 0.92rem; }
.gathering__form { margin-top: 1.25rem; }

.gathered { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.gathered__person {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; align-items: baseline;
  padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
}
.gathered__name { font-weight: 600; }
.gathered__relation {
  grid-row: 1; grid-column: 2; color: var(--ink-dim);
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.04em;
}
.gathered__born { grid-column: 1 / -1; color: var(--ink-dim); font-size: 0.85rem; }
.gathered__remove {
  grid-column: 1 / -1; justify-self: start; margin-top: 0.35rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.8rem;
  text-decoration: underline;
}
@media (hover: hover) {
  .gathered__remove:hover { color: var(--ink); }
}

.onward { margin-top: 1.75rem; }
.onward .form__hint { margin-top: 0.6rem; }

}