/* ==========================================================================
   Twoja Sprawa — wspólne style biblioteki darmowych narzędzi
   Spójne ze zmiennymi z ../styles.css (navy #0f1f3d, accent #10b981, Inter).
   Tailwind (CDN) odpowiada za większość layoutu; tu tylko dodatki + PRINT.
   ========================================================================== */

:root{
  --color-navy:#0f1f3d;
  --color-navy-50:#eef1f7;
  --color-accent:#10b981;
  --color-accent-600:#059669;
}

/* Pasek postępu kroków */
.ts-progress{height:6px;background:var(--color-navy-50);border-radius:9999px;overflow:hidden}
.ts-progress__bar{height:100%;background:var(--color-accent);transition:width .3s ease}

/* Karty wyboru (krok 1 / radio jako duże przyciski) */
.ts-choice{cursor:pointer;border:1px solid var(--color-navy-50);border-radius:.75rem;padding:1rem;
  transition:border-color .15s ease,background .15s ease;display:flex;gap:.75rem;align-items:flex-start}
.ts-choice:hover{border-color:var(--color-accent)}
.ts-choice--active{border-color:var(--color-accent);background:rgba(16,185,129,.06)}
.ts-choice input{margin-top:.2rem}

/* Pole formularza */
.ts-field{margin-bottom:1.25rem}
.ts-label{display:block;font-size:.875rem;font-weight:600;color:var(--color-navy);margin-bottom:.25rem}
.ts-input,.ts-textarea,.ts-select{width:100%;border:1px solid var(--color-navy-50);background:rgba(238,241,247,.4);
  border-radius:.5rem;padding:.625rem .75rem;font-size:.875rem;color:var(--color-navy)}
.ts-input:focus,.ts-textarea:focus,.ts-select:focus{outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.ts-textarea{min-height:96px;resize:vertical}
.ts-help{margin-top:.25rem;font-size:.75rem;color:rgba(15,31,61,.55)}
.ts-error{display:none;margin-top:.25rem;font-size:.8rem;font-weight:500;color:#dc2626}
.ts-field--invalid .ts-input,.ts-field--invalid .ts-textarea,.ts-field--invalid .ts-select{border-color:#dc2626}
.ts-field--invalid .ts-error{display:block}

/* Wygenerowane pismo */
.ts-output{white-space:pre-wrap;font-family:Inter,system-ui,Arial,sans-serif;font-size:.9rem;line-height:1.7;
  color:var(--color-navy);background:#fff;border:1px solid var(--color-navy-50);border-radius:.75rem;padding:1.5rem}

/* Banner ryzyka „skontaktuj się z człowiekiem" */
.ts-human{border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.08);border-radius:.75rem;padding:1rem 1.25rem}

/* ==========================================================================
   DRUK / ZAPIS DO PDF — natywna obsługa polskich znaków przez przeglądarkę.
   Drukujemy WYŁĄCZNIE treść pisma (#ts-print-area), nic poza nią.
   ========================================================================== */
@media print{
  body * { visibility:hidden !important; }
  #ts-print-area, #ts-print-area * { visibility:visible !important; }
  #ts-print-area{ position:absolute; left:0; top:0; width:100%;
    padding:24mm 20mm; font-size:12pt; line-height:1.6; color:#000;
    white-space:pre-wrap; border:none; }
  .ts-no-print{ display:none !important; }
  @page{ margin:0; size:A4; }
}