/* Шапка сборки истории (ui/story-new-view.js): закрыть, шаг назад/
   вперёд, подсказка, заголовок, публикация. Отдельно от components/
   story-new.css по длине файла. Литералы цвета — только themes.css. */

.story-new__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

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

.story-new__undo:disabled,
.story-new__redo:disabled { opacity: .4; }

.story-new__close .icon,
.story-new__undo .icon,
.story-new__redo .icon,
.story-new__help .icon { width: var(--fs-md); height: var(--fs-md); }

.story-new__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}

/* Круглая, как соседи по шапке, не прямоугольная с подписью: значок
   самолётика говорит то же самое короче, а ряд из пяти круглых кнопок
   не спорит формами друг с другом. */
.story-new__done {
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.story-new__done:disabled { opacity: .4; }

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

/* Письмо надписи (ui/story-write.js) полупрозрачно нарочно — сквозь
   него виден предпросмотр самого фото. Но не шапка, не подвал
   (components/story-new.css: .story-new__foot) и не подсказка про
   мышь (components/story-new-text.css: .story-new__hint) — все они
   про работу с кадром, а не с текстом, и путают, просвечивая под
   чужим инструментом (решение №257). Класс ставит ui/story-new-text.js.
   `visibility`, не `display: none`: `.story-new__frame` — flex:1
   между ними, и без места, которое шапка с подвалом держат собой,
   сцена вросла бы в их долю и вернулась другого размера, стоило
   закрыть письмо. */
.story-new--writing .story-new__head,
.story-new--writing .story-new__foot,
.story-new--writing .story-new__hint { visibility: hidden; }