/* Слой надписей поверх сцены сборки истории (ui/story-new-text.js)
   и кнопка «добавить текст» в подвале — отдельно от components/
   story-new.css по длине файла. Литералы цвета — только themes.css. */

/* Слой надписей лежит поверх кадров, но пустое место в нём прозрачно
   для касаний — иначе жесты кадра и границы (ui/story-cell-drag.js)
   не доходили бы до сцены под ним. Сама надпись жест обратно ловит —
   на ней `pointer-events` снова включён. */
.story-new__texts {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.story-text {
  position: absolute;
  pointer-events: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.15;
  cursor: grab;
  touch-action: none;
  /* Иначе перенос пальцем читается браузером как выделение текста —
     родное поведение спорит с ui/story-text-drag.js за тот же жест. */
  user-select: none;
  -webkit-user-drag: none;
  text-shadow: 0 .2cqw 1cqw var(--card-veil);
}

/* Линия-гид: показывается на миг, пока надпись рядом с центром или
   третью — тем же приёмом, что направляющие в графических редакторах. */
.story-new__guide {
  position: absolute;
  z-index: 3;
  background: var(--accent);
  pointer-events: none;
}

.story-new__guide--v { top: 0; bottom: 0; width: 1px; }
.story-new__guide--h { left: 0; right: 0; height: 1px; }

.story-new__addtext {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-10);
  height: var(--sp-10);
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.story-new__addtext .icon { width: var(--fs-md); height: var(--fs-md); }