/* Random Things to Draw controls, result and browse cards. */
:root {
  --drawing-image-size: 12rem;
}

.drawing-category-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-5) 0;
}

.drawing-category-button {
  min-height: 44px;
}

.drawing-category-button.is-selected {
  color: var(--color-surface);
  background: var(--color-link);
  border-color: var(--color-link);
}

.drawing-generator-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

#drawing-result {
  min-height: 3em;
}

.sct-fun-message-wrap {
  height: auto;
  min-height: 6rem;
}

.drawing-result-label {
  display: block;
}

.drawing-result-images {
  display: grid;
  grid-template-columns: minmax(0, var(--drawing-image-size));
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.drawing-result-image-button {
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  color: #0D0812;
  background: #FFFFFF;
}

.sct-page .drawing-result-image-button:is(:hover, :focus, :focus-visible, :active) {
  color: #0D0812;
  background: #FFFFFF;
}

.drawing-browse-section {
  margin-top: var(--space-12);
}

.drawing-category-guide > h3,
.drawing-category-guide h4 {
  font-weight: var(--font-weight-heavy);
}

.drawing-category-guide > h3 {
  font-size: 1.2rem;
}

.drawing-category-guide h4 {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.3;
}

.drawing-category-guide > div + div {
  margin-top: var(--space-2);
}

.drawing-category-guide > div > p {
  margin: 0;
}

.drawing-ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.drawing-idea-tile {
  flex-direction: column;
  gap: var(--space-3);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  text-align: center;
  color: #0D0812;
  background: #FFFFFF;
}

.sct-page .drawing-idea-tile:is(:hover, :focus, :focus-visible, :active) {
  color: #0D0812;
  background: #FFFFFF;
}

.sct-page .drawing-idea-tile--text-only {
  cursor: default;
}

.sct-page .drawing-idea-tile--text-only:is(:hover, :focus, :focus-visible, :active) {
  transform: none;
}

.drawing-idea-image {
  display: block;
  width: min(100%, var(--drawing-image-size));
  aspect-ratio: 1;
  margin-inline: auto;
  object-fit: contain;
}

#drawing-result .drawing-idea-image {
  width: 100%;
  height: 100%;
}

.drawing-image-copy:is(.image-copied, .copy-failed)::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, .62);
  border-radius: calc(var(--radius-panel) - 2px);
  font-size: .9rem;
  font-weight: var(--font-weight-semibold);
}

.drawing-image-copy.image-copied::after {
  content: "Image copied!";
}

.drawing-image-copy.copy-failed::after {
  content: "Copy failed";
}

@media (max-width: 650px) {
  .drawing-category-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  #drawing-result {
    transition: none;
  }
}