/* Świadomy wybór ścieżki: błąd fieldsetu zajmuje oba kolumny grida i podświetla karty radio. */
.contact-form fieldset #error-path {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.contact-form fieldset.has-error .route-radio {
  border-color: #9e3434;
}

/* Osiem stron: jawny, edytowalny temat zgłoszenia. */
.contact-form .contact-context {
  padding: 17px;
  border: 1px solid #b8d0d1;
  border-radius: 14px;
  background: #fff;
}
.contact-layout .contact-context h2 {
  margin: 0 0 4px;
  color: #20383b;
  font-size: 20px;
  line-height: 1.3;
}
.contact-context > p {
  margin: 0 0 14px;
  color: #52686b;
  font-size: 14px;
  line-height: 1.5;
}
.contact-context__grid { display: grid; gap: 12px; }
.contact-context__details summary {
  cursor: pointer;
  color: #145c63;
  font-weight: 700;
  line-height: 1.5;
}
.contact-context__details summary:focus-visible {
  outline: 3px solid #145c63;
  outline-offset: 3px;
}
.contact-context__details[open] summary { margin-bottom: 13px; }
.contact-form #error-problem {
  display: block;
  min-height: 2.8em;
  line-height: 1.4;
}
.contact-form .contact-example {
  display: block;
  color: #52686b;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 650px) {
  .contact-form .contact-context { padding: 14px; }
}

@media (max-width: 420px) {
  html body .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html body .contact-layout > aside,
  html body .contact-layout > form,
  html body .contact-layout .contact-context { min-width: 0; width: 100%; }
  html body .contact-layout a,
  html body .contact-layout h2,
  html body .contact-layout p,
  html body .contact-layout label { overflow-wrap: anywhere; }
}