/* Публичные экраны без входа — главная, приглашение, условия: одна шапка
   (знак и переключатель темы) и один фон. Раньше каждая страница держала
   свою копию, и условия остались вовсе без шапки. Только токены. */

/* Фон body уходит на холст, а холст берёт область html (высота окна): без
   no-repeat свечение повторялось каждые 100vh и резало страницу жёсткой
   зелёной кромкой — на телефоне прямо под формой входа. */
.public-page {
  height: auto;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent-sunk) 78%, transparent), transparent 34%) no-repeat,
    var(--page);
}

/* Край шапки — край контента главной: контейнер --content-max с полем
   --sp-6. Проценты padding считаются от ширины body, без полосы прокрутки,
   поэтому знак стоит на одной вертикали с героем, а тема — с правым краем
   формы входа. */
.public-header {
  width: 100%; min-height: 68px;
  padding: var(--sp-3) max(var(--sp-6), calc((100% - var(--content-max)) / 2 + var(--sp-6)));
  display: flex; align-items: center; gap: var(--sp-6);
  background: color-mix(in srgb, var(--win) 92%, transparent);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
/* Знак слева, всё остальное (навигация, тема) прижато вправо. */
.public-brand {
  display: flex; align-items: center; gap: var(--sp-2); margin-right: auto;
  color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-read);
}
.public-mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--control-radius);
  background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-bold);
}
.public-header .theme-switch { flex: none; }

/* Телефон: поле 16, как у формы и текста под шапкой — одна левая вертикаль. */
@media (max-width: 660px) {
  .public-header { gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4); }
}
/* Знак и переключатель темы не помещаются рядом с названием на 320. */
@media (max-width: 380px) {
  .public-brand .label { display: none; }
}