/* Поля и кнопки форм, экран добавления сервера. */

.field {
  display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; appearance: none; -webkit-appearance: none;
  background: var(--bg); font-size: 16px; margin: 8px 0 0; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: var(--dim); }
.field:hover { border-color: var(--dim); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field::selection { background: var(--accent); color: var(--bg); }
.inline { display: flex; gap: 8px; align-items: center; }

/* переключатель из нескольких положений: приоритет, значимость */
.seg { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.segbtn { flex: 1; min-width: 0; padding: 7px 4px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segbtn:hover { color: var(--ink); background: var(--press); }
.segbtn[aria-selected='true'] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(10, 14, 22, .12); }
:root[data-theme='dark'] .segbtn[aria-selected='true'] { box-shadow: 0 0 0 1px var(--line); }
#tkPriority .segbtn[aria-selected='true']:not(:first-child), #adPriority .segbtn[aria-selected='true']:not(:first-child) { color: var(--warn); }
#tkImportance .segbtn[aria-selected='true']:not(:first-child), #adImportance .segbtn[aria-selected='true']:not(:first-child) { color: var(--accent); }
.inline .field { margin: 0; flex: 1; }
.inline .ibtn { border: 1px solid var(--line); }

/* даты задачи: срок и назначенное время — дата, время, быстрые кнопки и сброс */
.due-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.due-row .field { margin: 0; flex: 1 1 140px; min-width: 0; }
.due-row input[type='time'].field { flex: 0 1 110px; }
.due-row .ibtn { border: 1px solid var(--line); flex: 0 0 auto; }
.due-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
#tkDatesBox h4, #adDatesBox h4 { margin-top: 14px; }
.due-quick button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--dim); background: var(--bg); }
.due-quick button:hover { border-color: var(--accent); color: var(--accent); }

.go {
  width: 100%; margin-top: 24px; padding: 14px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font-size: 15.5px; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.go:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 30%, transparent); transform: translateY(-1px); }
.flat { width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px; font-size: 14.5px; color: var(--dim); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.flat:hover { background: var(--press); color: var(--ink); }
.flat.danger { margin-top: 20px; }
/* пара необязательных действий в один ряд: описание и файлы в новой задаче */
.flatrow { display: flex; gap: 8px; margin-top: 16px; }
.flatrow .flat { flex: 1; min-width: 0; margin-top: 0; white-space: nowrap; }
.flat.danger:hover { color: var(--warn); }
.note { padding: 16px var(--gut); font-size: 13px; color: var(--dim); }

.gate {
  max-width: 440px; margin: 40px auto; padding: 32px var(--gut); background: var(--panel);
  width: calc(100% - var(--gut) * 2);
  border: 1px solid var(--line); border-radius: 18px; animation: rise .32s var(--ease) both;
}
.gate h1 { font-family: var(--display); font-size: 32px; letter-spacing: -.03em; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.gate h1 .ic { width: 26px; height: 26px; color: var(--accent); }
.gate p { color: var(--dim); font-size: 14px; margin: 0 0 16px; line-height: 1.5; }
.gate .fail { margin: 12px 0 0; }