/* Страницы добавления сервера, входа, кабинета и модерации. Цвета, скругления и шрифты только из переменных тем (themes.css). */
.form-page { padding-block: 24px 40px; }
/* overflow-wrap наследуется: длинные адреса и почта переносятся и не дают горизонтальной прокрутки */
.form-panel { max-width: 640px; margin-inline: auto; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; overflow-wrap: anywhere; }
.form-panel h1 { margin: 0; font-size: clamp(26px, 6vw, 32px); line-height: 1.15; }
.form-panel h2 { margin: 8px 0 0; font-size: 20px; line-height: 1.25; }
.form-panel p { margin: 0; }
/* Толщина задана явно: у моноширинного шрифта есть только начертание 500, в заголовке браузер рисовал бы поддельный жирный */
.form-panel code { padding: 2px 6px; font: 500 .9em var(--font-mono); background: var(--surface-2); border-radius: var(--radius-xs); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.form-panel h1 code { padding: 0; background: none; }

/* Поля */
.form-stack, .form-field, .form-endpoint { display: grid; grid-template-columns: minmax(0, 1fr); }
.form-stack { gap: 14px; }
.form-field { gap: 6px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.form-panel input:not([type="radio"], [type="checkbox"], [type="hidden"]), .form-panel textarea {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px;
  font: 16px/1.4 var(--font-body); background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--field-edge); border-radius: var(--radius-md);
  -webkit-appearance: none; appearance: none;
}
.form-panel textarea { resize: vertical; }
.form-panel ::placeholder { color: var(--muted); opacity: 1; }
/* Обводку фокуса (--focus, --focus-style) задаёт общее правило :focus-visible в site.css */
.form-panel input:focus, .form-panel textarea:focus { border-color: var(--focus); }

/* Выбор вариантов. Браузер задаёт fieldset минимальную ширину по содержимому, из-за неё появлялась бы прокрутка */
.form-choice, .form-endpoint { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 12px; }
.form-choice legend { padding: 0; }
.form-choice label, .form-check { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.form-panel [type="radio"], .form-panel [type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.form-endpoint { gap: 12px; padding: 4px 14px 14px; border: var(--divider-w) solid var(--line); border-radius: var(--radius-md); }
.form-endpoint legend { margin-inline-start: -6px; padding-inline: 6px; font-weight: 600; }
/* На странице добавления поля только для компьютера скрываются при выборе телефона. Для телефона сервер эти поля не читает */
.form-stack:has([name="PlatformCode"][value="bedrock"]:checked) .java-only { display: none; }

/* Кнопки и сообщения */
.form-actions, .form-result { display: flex; flex-wrap: wrap; gap: 10px; }
.form-actions .btn { flex: 1 1 auto; }
.form-stack > .btn, .form-actions .btn { min-height: 48px; }
.form-result > p { flex-basis: 100%; }
.form-ok, .form-errors { margin: 0; padding: 10px 14px; font-weight: 500; border-radius: var(--radius-md); }
.form-ok { background: var(--done); color: var(--done-ink); }
.form-errors { display: grid; gap: 4px; list-style: none; background: var(--red); color: var(--on-red); }

/* Списки серверов и заявок */
.form-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* В очереди модерации список бывает пустым и дал бы лишний отступ */
.form-list:not(:has(li)) { display: none; }
.form-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.form-list li + li { padding-top: 12px; border-top: var(--divider-w) solid var(--line); }
/* Кнопка стоит справа, пока рядом хватает места под текст, иначе уходит на строку ниже */
.form-list li > div { flex: 1 1 140px; }
.form-list .note { display: block; font-size: 14px; }

.form-details { border: var(--divider-w) solid var(--line); border-radius: var(--radius-md); }
.form-details summary { padding: 12px 14px; font-weight: 600; cursor: pointer; border-radius: var(--radius-md); }
.form-details form { padding: 0 14px 14px; }
.form-icon { border-radius: var(--radius-icon); image-rendering: pixelated; }
.form-art { display: block; max-width: 100%; max-height: 280px; border-radius: var(--radius-md); }

/* На телефоне основные кнопки во всю ширину, на компьютере по размеру подписи */
@media (min-width: 640px) {
  .form-panel { padding: 32px; }
  .form-panel > .btn, .form-stack > .btn { justify-self: start; min-width: 160px; }
  .form-actions .btn { flex: none; }
}