/* Панель под кнопками надписи (ui/story-kit.js): ряд образцов
   шрифта или быстрый выбор цвета (ui/story-kit-row.js). Открыта одна
   панель зараз, под самими кнопками. Литералы цвета — только
   themes.css; восемнадцать кружков палитры красит она же, классом
   на кружок, а не инлайновым style — иначе проверка мёртвых токенов
   (tools/check.ps1) не находит, что переменная вообще используется:
   в разметке цвет надписи читает getComputedStyle, а не сам CSS. */

.story-kit__panel {
  display: flex;
  margin-top: var(--sp-4);
}

.story-kit__panel[hidden] { display: none; }

.story-kit__fonts {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.story-kit__fonts::-webkit-scrollbar { display: none; }

.story-kit__font {
  flex: none;
  min-width: var(--sp-12);
  height: var(--sp-10);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
}

.story-kit__font.is-on {
  border-color: var(--accent);
  color: var(--accent-text);
}

.story-kit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

/* Палитра, пипетка и сброс — не цвета, а инструменты, и искать их
   в общей ленте незачем: закреплены слева, лента цветов течёт
   за ними. */
.story-kit-row__tools {
  display: flex;
  flex: none;
  gap: var(--sp-2);
}

.story-kit-row__tool {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-9);
  height: var(--sp-9);
  border: none;
  border-radius: 50%;
  background: var(--veil);
  color: var(--on-badge);
}

.story-kit-row__tool .icon { width: var(--fs-sm); height: var(--fs-sm); }

.story-kit-row__list {
  flex: 1;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.story-kit-row__list::-webkit-scrollbar { display: none; }

.story-kit-row__swatch {
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.story-kit-row__swatch.is-on {
  border-color: var(--on-badge);
  border-width: 2px;
}

.story-kit-row__swatch--c1  { background: var(--story-c1); }
.story-kit-row__swatch--c2  { background: var(--story-c2); }
.story-kit-row__swatch--c3  { background: var(--story-c3); }
.story-kit-row__swatch--c4  { background: var(--story-c4); }
.story-kit-row__swatch--c5  { background: var(--story-c5); }
.story-kit-row__swatch--c6  { background: var(--story-c6); }
.story-kit-row__swatch--c7  { background: var(--story-c7); }
.story-kit-row__swatch--c8  { background: var(--story-c8); }
.story-kit-row__swatch--c9  { background: var(--story-c9); }
.story-kit-row__swatch--c10 { background: var(--story-c10); }
.story-kit-row__swatch--c11 { background: var(--story-c11); }
.story-kit-row__swatch--c12 { background: var(--story-c12); }
.story-kit-row__swatch--c13 { background: var(--story-c13); }
.story-kit-row__swatch--c14 { background: var(--story-c14); }
.story-kit-row__swatch--c15 { background: var(--story-c15); }
.story-kit-row__swatch--c16 { background: var(--story-c16); }
.story-kit-row__swatch--c17 { background: var(--story-c17); }
.story-kit-row__swatch--c18 { background: var(--story-c18); }