/* Рамка выделения отделена от legend: заголовок всегда внутри поля. */
.field.invalid,.field.correct{
  position:relative;
  border:0!important;
  margin:14px -14px 0!important;
  padding:43px 14px 19px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
.field.invalid::before,.field.correct::before{
  content:"";
  position:absolute;
  inset:0;
  border:3px solid;
  border-radius:10px;
  pointer-events:none;
}
.field.invalid::before{border-color:var(--bad)}
.field.correct::before{border-color:var(--green)}
.field.invalid legend,.field.correct legend{
  position:absolute;
  z-index:1;
  top:12px;
  left:14px;
  margin:0;
  padding:0 4px;
  background:inherit;
}
@media(max-width:700px){
  .field.invalid,.field.correct{margin:12px -12px 0!important;padding:40px 12px 16px!important}
  .field.invalid legend,.field.correct legend{top:11px;left:12px}
}