/* Shared style picker cards used by create story and storyboard flows */

.storyboard-create-style-wrap,
.create-style-wrap {
  display: grid;
  gap: 7px;
}

.storyboard-create-style-label,
.create-style-note {
  color: #aac0db;
  font-size: 0.82rem;
  margin: 0;
}

.storyboard-create-style-scroll,
.create-style-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(126px, 1fr);
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.storyboard-style-card,
.create-style-card {
  border: 1px solid rgba(104, 66, 170, 0.62);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(10, 20, 31, 0.9), rgba(8, 17, 28, 0.92));
  color: #e5f0ff;
  font: inherit;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  padding: 8px;
  min-height: 92px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.storyboard-style-card:hover,
.create-style-card:hover {
  border-color: rgba(206, 178, 254, 0.62);
  transform: translateY(-1px);
}

.storyboard-style-card:focus-visible,
.create-style-card:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.42);
  outline-offset: 1px;
}

.storyboard-style-card.is-selected,
.create-style-card.is-selected {
  border-color: rgba(104, 66, 170, 0.62);
  /*background: linear-gradient(180deg, rgba(31, 52, 76, 0.97), rgba(22, 41, 64, 0.97));*/
  box-shadow:
    inset 0 0 0 1px rgba(122, 181, 255, 0.34),
    0 6px 14px rgba(8, 20, 34, 0.38);
}

.storyboard-style-swatch,
.create-style-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid rgba(164, 199, 236, 0.26);
}

.storyboard-style-name,
.create-style-name {
  display: block;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.35;
}