/* Дополнения к Pico.
 *
 * Отдельным файлом, а не блоком <style> в разметке: политика безопасности
 * админки запрещает inline-стили, и внутри страницы они молча блокируются
 * браузером. Ослаблять политику ради оформления смысла нет. По той же
 * причине здесь нет ни одного style="…" в шаблонах — только классы.
 */

:root {
  --pico-font-size: 92%;
}

body > header,
body > main {
  max-width: 1200px;
}

nav a[aria-current="page"] {
  font-weight: 600;
}

table {
  font-size: 0.92rem;
}

td code {
  font-size: 0.86rem;
}

.muted {
  opacity: 0.62;
}

/* Панель заголовка со стоящей рядом кнопкой действия. */
.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.toolbar > * {
  margin-bottom: 0;
}

.toolbar > h1 {
  margin: 0;
  flex: 1 1 auto;
}

/* Pico растягивает ссылки-кнопки на всю ширину — во flex-строке это
   вытолкнуло бы заголовок на отдельную строку. */
.toolbar a[role="button"],
.toolbar button {
  flex: 0 0 auto;
  width: auto;
}

.grid-narrow {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.grid-narrow article {
  padding: 1rem 1.25rem;
}

.grid-narrow p {
  font-size: 0.85rem;
}

/* Выданный ключ: показывается ровно один раз, поэтому крупно и выделяемо
   двойным щелчком целиком. */
.key {
  font-family: var(--pico-font-family-monospace);
  font-size: 1.35rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
  border: 2px dashed var(--pico-primary);
  border-radius: var(--pico-border-radius);
  user-select: all;
}

.status {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 0 0.6rem;
  border-radius: 1rem;
  white-space: nowrap;
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
}

/* Строка-ссылка: щелчок в любом месте открывает карточку. */
.row-link {
  cursor: pointer;
}

.row-link:hover {
  background: var(--pico-code-background-color);
}

.cell-action {
  text-align: right;
  white-space: nowrap;
}

/* Карточки действий: пояснения у всех разной длины, поэтому кнопки
   прижимаются к низу — иначе они разъезжаются по высоте. */
.actions article {
  display: flex;
  flex-direction: column;
}

/* Содержимое формы прижато к низу: у карточек разной высоты пояснения и
   не у всех есть поле ввода, а кнопки должны стоять на одной линии. */
.actions article form {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  margin-bottom: 0;
}

.actions article form label {
  margin-bottom: 0.75rem;
}

/* Подписи короткие и в одну строку: кнопка, переносящаяся на две, сдвигает
   соседей и ломает всю линию. */
.actions article form button {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 1.5rem;
}

/* Форма внутри строки таблицы: поля и кнопка на одной линии. */
.row-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.row-form select,
.row-form input,
.row-form button {
  margin-bottom: 0;
  width: auto;
}

.row-form input {
  flex: 1 1 auto;
  min-width: 8rem;
}

.cell-action a[role="button"] {
  width: auto;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

.brand {
  text-decoration: none;
  color: inherit;
}

.status--active { background: #1a7f37; color: #fff; }
.status--issued { background: #0969da; color: #fff; }
.status--revoked,
.status--suspended { background: #b42318; color: #fff; }

.status--build-unknown { background: #b42318; color: #fff; }
.status--build-pending { background: #b54708; color: #fff; }
.status--build-supported { background: #1a7f37; color: #fff; }

/* Версии офсетов: цветом выделены только те, что кто-то сейчас получает. */
.status--version-published { background: #1a7f37; color: #fff; }
.status--version-canary { background: #0969da; color: #fff; }

/* Документ целиком: длинные строки прокручиваются, а не переносятся —
   так JSON читается и копируется без искажений. */
pre.json {
  white-space: pre;
  overflow-x: auto;
  font-size: 0.82rem;
}

/* Заметные врезки: предупреждение и ошибка. */
.notice {
  border-left: 3px solid var(--pico-primary);
}

.notice--danger {
  border-left: 3px solid #b42318;
}

.card-login {
  max-width: 26rem;
  margin: 3rem auto;
}

.metric {
  margin-bottom: 0;
}