/* One palette renderer for course cards and their editor preview.
   The shade preserves readable white titles over user-selected colors. */
.course-cover-palette {
  --course-cover-shade: #17283f; /* guardrail-allow-local-color: fixed ink used to shade authored cover colors */
  --course-cover-muted: #8293ac; /* guardrail-allow-local-color: original cover palette mixing endpoint */
  --course-cover-color: color-mix(in srgb, var(--course-cover-start, var(--site-accent)) 76%, var(--course-cover-shade));
  --course-cover-mid: color-mix(in srgb, var(--course-cover-color) 82%, var(--course-cover-end, var(--site-accent)));
  --course-cover-finish: color-mix(in srgb, var(--course-cover-start, var(--site-accent)) 66%, var(--course-cover-muted));
  background-color: var(--course-cover-color);
  background-image: linear-gradient(128deg, var(--course-cover-color) 0%, var(--course-cover-mid) 56%, var(--course-cover-finish) 100%);
  color: var(--white);
}

.course-cover-picker {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.course-cover-picker__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.course-cover-picker legend {
  float: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 12px;
}

.course-cover-picker__colors input {
  width: 56px;
  height: 36px;
  cursor: pointer;
}

.course-cover-picker__preview {
  padding: 24px 16px;
  border-radius: 8px;
  text-align: center;
}