/* Своё у Ватсона: то, чего в слое классов дизайн-системы нет. Цвета и
   расстояния только токенами `--axis-*`, ширины кратны 4 px; копия системы в
   `axis/` не правится. */

/* Оболочка входа. В системе её нет (`patterns/login.md` §7), собирается из
   `.axis-ambient` и `.axis-card`: карточка по центру окна. */
.axis-auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--axis-space-4);
}
.axis-auth-card {
  width: 100%;
  max-width: 400px;
}

/* Пары «подпись и значение» на карточке: подпись тихая, значение в чернилах. */
.axis-facts {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: var(--axis-gap-tight) var(--axis-gap-group);
  margin: 0;
  font-size: var(--axis-text-sm);
}
.axis-facts dt { color: var(--axis-muted); }
.axis-facts dd { margin: 0; color: var(--axis-ink); overflow-wrap: anywhere; }

.axis-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--axis-gap-tight);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--axis-text-sm);
}

/* Словомарка в шапке это дверь на первый экран; вид ссылки ей не нужен. */
.axis-home { text-decoration: none; }

.axis-segment[aria-pressed="true"] {
  background: var(--axis-surface-3);
  color: var(--axis-ink);
}

/* Расстояние между соседями ставит `gap` контейнера. Собственные поля абзаца
   складывались с ним, и текст отказа стоял с двойным зазором. */
.axis-stack > p,
.axis-empty > p { margin: 0; }

/* То же у подсказки и отказа под полем: соседей разводит `gap` поля. */
.axis-field > p { margin: 0; }

/* На узком экране словомарка, выбор темы и выход в одну строку не входят:
   выбор темы сжимался и терял третий вариант. Шапка переносит его ниже. */
.axis-topbar .axis-segmented { flex: 0 0 auto; }
@media (max-width: 640px) {
  .axis-topbar { flex-wrap: wrap; }
}

/* Дословный диалог длинный и без пробелов: переносится внутри своей рамки, а
   не раздвигает страницу. */
.axis-transcript {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}