/* The founder's one-shot welcome letter — a native <dialog> styled as a calm
   personal note, not a marketing popup. */
.welcome-letter {
  background-color: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 0.75em;
  color: var(--color-ink);
  inline-size: min(34rem, calc(100vw - 2rem));
  line-height: 1.6;
  margin: auto;
  padding: 2.5rem 2rem var(--block-space-double);
  position: relative;

  &::backdrop {
    backdrop-filter: blur(2px);
    background-color: oklch(var(--lch-always-black) / 0.65);
  }

  p {
    color: var(--color-subtle-dark);
    font-size: 0.95rem;
    margin-block: 0 var(--block-space);
  }

  a {
    color: var(--color-link);
  }
}

.welcome-letter__close {
  background: none;
  border: 0;
  color: var(--color-subtle-dark);
  cursor: pointer;
  inset-block-start: var(--block-space);
  inset-inline-end: 1rem;
  padding: 0.25rem;
  position: absolute;

  .icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-ink);
    }
  }
}

.welcome-letter__avatar {
  align-items: center;
  border: 2px solid var(--color-subtle-dark);
  border-radius: 50%;
  block-size: 3.5rem;
  color: var(--color-ink);
  display: inline-flex;
  font-family: var(--font-display);
  font-weight: 700;
  inline-size: 3.5rem;
  justify-content: center;
  margin-block-end: var(--block-space);
}

.welcome-letter__title {
  font-size: 1.25rem;
  margin-block: 0 var(--block-space);
}

.welcome-letter__signature {
  color: var(--color-ink);
  margin-block-start: 1.5rem;
}

.welcome-letter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

/* The editor letter dismisses via real POSTs (button_to) — let the wrapping
   forms disappear so the buttons lay out as before. */
.welcome-letter__close-form,
.welcome-letter__actions form {
  display: contents;
}