/* 38 — ekran „Twoje zgłoszenie" (/zgloszenie): karty podglądu i formularz prośby
   o link. Wygląd kart trzyma się wzorca z 36-instrukcje.css, metryczka i pasek
   postępu zostają w 33-uczestnicy.css. Kolory wyłącznie z tokenów. */

.zgloszenie-page {
  max-width: 1020px;
}

/* Formularz prośby o link jest jednym polem — kolumna tekstu, nie cała szerokość. */
.zgloszenie-prosba {
  max-width: var(--ai-miara-waska);
  margin-top: var(--ai-s5);
}

.zgloszenie-karty {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ai-s4);
  margin: var(--ai-s5) 0;
}

.zgloszenie-karta {
  background: var(--ai-card);
  border: 1px solid var(--ai-line-strong);
  border-radius: var(--ai-r-lg);
  padding: var(--ai-s4);
}
.zgloszenie-karta > h2 {
  font-size: var(--ai-size-h3);
  color: var(--ai-heading);
  margin: 0 0 var(--ai-s3);
}
.zgloszenie-karta--szeroka {
  margin: var(--ai-s5) 0;
}

.zgloszenie-dl {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--ai-s1) var(--ai-s3);
  margin: 0;
}
.zgloszenie-dl dt {
  color: var(--ai-text-mute);
  font-size: var(--ai-size-small);
}
.zgloszenie-dl dd {
  margin: 0;
  color: var(--ai-heading);
  font-size: var(--ai-size-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.zgloszenie-lista {
  margin: 0;
  padding-left: var(--ai-s3);
  color: var(--ai-text);
  font-size: var(--ai-size-small);
}
.zgloszenie-lista li {
  margin-bottom: var(--ai-s1);
}
.zgloszenie-lista span {
  color: var(--ai-text-mute);
}

.zgloszenie-wyjscie {
  margin: var(--ai-s5) 0 var(--ai-s6);
  font-size: var(--ai-size-small);
}
.zgloszenie-wyjscie a {
  color: var(--ai-text-mute);
}

/* Pola rysuje wtyczka `form` swoim szablonem, a nie `.field` motywu — na `/zapis`
   ubiera je `form.html.twig`, tutaj nie ma kto. Bez tego input w karcie zostawał
   systemowym białym prostokątem, nieczytelnym w trybie ciemnym. Wartości jak
   w `.field` (31-zapis-pola-a.css), tło z `--ai-bg`, żeby odcięło się od karty. */
.zgloszenie-page .form-field {
  margin-bottom: var(--ai-s3);
  min-width: 0;
}
.zgloszenie-page .form-label label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 650;
  margin-bottom: 8px;
  color: var(--ai-heading);
}
.zgloszenie-page .form-label .required {
  color: var(--ai-rose);
}
.zgloszenie-page .form-input-wrapper input,
.zgloszenie-page .form-input-wrapper textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--ai-line-ui);
  border-radius: 3px;
  min-height: 48px;
  padding: 11px 13px;
  font-size: 1rem;
  background: var(--ai-bg);
  color: var(--ai-heading);
  font-family: var(--ai-font-body);
}
.zgloszenie-page .form-input-wrapper input:focus,
.zgloszenie-page .form-input-wrapper textarea:focus {
  border-color: var(--ai-akcent);
}

@media (min-width: 900px) {
  .zgloszenie-karty {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  /* Na wąskim ekranie etykieta nad wartością: dwie kolumny łamałyby adresy e-mail. */
  .zgloszenie-dl {
    grid-template-columns: 1fr;
    gap: 2px var(--ai-s1);
  }
  .zgloszenie-dl dd {
    margin-bottom: var(--ai-s2);
  }
}