/* Только страница лога. Основное оформление берётся из /style.css. */
body.log-page .log-controls {
  /* Внизу видимой области, внутри правой границы текста.
     Горизонтальные границы измеряются JS по реальному блоку лога.
     Кнопка не занимает место в потоке страницы. */
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px), var(--log-controls-right, 16px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 20;
  max-width: min(var(--log-controls-width, calc(100vw - 32px)), calc(100vw - 32px));
  margin: 0;
  padding: 0;
  transition: none;
  animation: none;
}
body.log-page .log-controls > button {
  display: block;
  max-width: 100%;
  margin: 0;
  white-space: normal;
  background: rgba(0, 0, 0, 0.94);
  transition: none;
  animation: none;
}
body.log-page .log-controls > button:hover,
body.log-page .log-controls > button:focus-visible {
  background: var(--cream);
}
body.log-page .log-controls[hidden],
body.log-page .log-archive[hidden] {
  display: none;
}
body.log-page .log-viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 1em 4%;
  padding: 0 min(2ch, 4%);
  font: inherit;
  color: inherit;
  text-align: left;
}
body.log-page .log-viewport:focus {
  outline: none;
}
body.log-page .log-line {
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  font: inherit;
  color: inherit;
  text-align: left;
}
body.log-page .log-url {
  word-break: break-all;
}
body.log-page .log-alert {
  color: var(--red-bright, #c43543);
}
body.log-page .log-viewport.is-playing {
  /* Страница растёт вместе с логом. Прокруткой управляет читатель. */
  overflow-anchor: none;
}
body.log-page .log-live,
body.log-page .log-archive {
  flex: 0 0 auto;
  margin-top: auto;
  width: 100%;
}
/* Ограничиваем горизонтальный выход тени заголовка. */
body.log-page > header {
  overflow-x: clip;
}