/* "What are you making?" — the 2D / 3D choice.
   Two large tap targets, side by side on a desktop and stacked on a phone.
   ALYSSIUN semantic tokens only: no brand colour, font or shadow is written here. */
.aly-kind-dialog { max-width: 560px; }

.aly-kind-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

/* Deliberately tall. This is meant to be hit with a thumb, and it is the whole
   card that is the button — there is no small control inside it to aim at. */
.aly-kind-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-height: 168px;
  padding: 20px 18px;
  text-align: left;
  border: 1px solid var(--hair-2);
  border-radius: var(--radius, 12px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.aly-kind-option:hover:not(:disabled),
.aly-kind-option:focus-visible:not(:disabled) { border-color: var(--text); }

.aly-kind-option:disabled { opacity: .5; cursor: not-allowed; }

.aly-kind-glyph { font-size: 26px; line-height: 1; color: var(--muted); }

.aly-kind-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

.aly-kind-blurb {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}

/* Step two for a 3D Project: four starting points, two by two, shorter cards. */
.aly-kind-options.is-starting-points .aly-kind-option { min-height: 132px; }

@media (max-width: 560px) {
  .aly-kind-options { grid-template-columns: 1fr; }
  .aly-kind-options.is-starting-points { grid-template-columns: 1fr 1fr; gap: 10px; }
  .aly-kind-option { min-height: 0; }
  .aly-kind-options.is-starting-points .aly-kind-option { padding: 14px 12px; }
}