/* Полоса режима: тонкая строка под шапкой, объясняющая, что экран
   сейчас делает не то же, что обычно.

   Правка продажи выглядит той же формой, что и новая запись, и
   человек, пришедший в неё из просмотра, легко забывает, что меняет
   записанное. Полоса говорит об этом одним словом и не отнимает
   у формы ничего, кроме одной строки.

   Тем же тёплым тоном, что плашка незакрытых дел над шапкой
   (components/notice.css): это не ошибка и не запрет, а состояние —
   к красному ему отношения нет. */

.mode {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 calc(var(--sp-4) * -1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--notice-bg);
  border-bottom: 1px solid var(--notice-line);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  font-weight: 650;
}

/* Знак того же цвета, что и слово: они говорят одно и то же, и разный
   цвет делал бы из них две разные пометки. */
.mode .icon {
  width: var(--fs-sm);
  height: var(--fs-sm);
}

/* Полоса примыкает к шапке вплотную: зазор над ней читается как щель
   под шапкой. Верхнее поле экрана снимаем там, где полоса стоит
   первой. */
.screen:has(> .mode:first-child) { padding-top: 0; }

.screen > .mode:first-child { margin-bottom: var(--sp-4); }