/* Color Use Case Generator — editorial moodboard treatment (spec 12). */

.pct-use-case-layout .paletier-tool-result {
  background: linear-gradient(150deg, #fffaf4, #f5ebe1);
}

.pct-use-case-empty span {
  display: block;
  width: min(340px, 80%);
  aspect-ratio: 16 / 9;
  margin: 0 auto 14px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 32%, #d8a550 0 15%, transparent 16%),
    radial-gradient(circle at 68% 40%, var(--pct-current-color, #6e2b3f) 0 20%, transparent 21%),
    radial-gradient(circle at 46% 68%, #b4838f 0 11%, transparent 12%),
    linear-gradient(135deg, #f0d8c6, #f7efe7);
}

.pct-use-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pct-use-card {
  border: 1px solid var(--pct-line);
  border-radius: 8px;
  padding: 14px;
  background: var(--pct-panel);
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.pct-use-card.is-focused {
  border-color: var(--pct-accent);
  box-shadow: 0 0 0 1px var(--pct-accent);
  order: -1;
}

.pct-use-card .pct-palette-strip span { min-height: 44px; font-size: 9px; }

[data-theme="dark"] .pct-use-case-layout .paletier-tool-result {
  background: linear-gradient(150deg, #262420, #211f1c);
}

[data-theme="dark"] .pct-use-card { background: #20201d; }

@media (max-width: 640px) {
  .pct-use-cards { grid-template-columns: 1fr; }
}