/* Formularze z kreatora w panelu — zwarte ramki jak w aplikacji: podpis u góry ramki, wpis pod nim,
   podpowiedź jako tekst w polu (builder.py). Wpis 16 px (iOS nie powiększa strony), błędy przy polu. */

.form { display: grid; gap: 10px; }
.form__head { display: grid; gap: 8px; }
.form__head + .form { margin-top: 20px; }
.form__intro { font-size: 14px; line-height: 1.65; color: var(--ink); }
.form__problem { border-left: 2px solid var(--error); padding: 8px 12px; font-size: 13px; color: var(--error); background: #fbf3f1; }
.form__problem:empty { display: none; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 12px; color: var(--muted); }
.form__note a { border-bottom: 1px solid var(--line-strong); color: var(--ink); }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form__actions .btn { flex: 1 1 200px; }

/* ---------- ramka pola ---------- */
.field {
    position: relative; display: grid; gap: 2px; padding: 8px 12px 5px;
    background: #fff; border: 1px solid var(--line-strong); transition: border-color 0.18s;
}
.field:focus-within { border-color: var(--ink-strong); }
.field.has-error { border-color: var(--error); }
/* Podpis zwykłym krojem strony, zwykłą wielkością liter — jak w formularzu pisanym ręcznie, nie w terminalu. */
.field__label { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.field:focus-within .field__label { color: var(--ink-strong); }
.field input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    width: 100%; min-height: 28px; margin: 0; padding: 1px 0;
    font: inherit; font-size: 16px; font-weight: 300; color: var(--ink-strong);
    background: transparent; border: 0; border-radius: 0; outline: none;
}
.field ::placeholder { color: var(--muted-2); opacity: 0.8; font-size: 14px; }
/* Opis rośnie z treścią (field-sizing), a bez tej funkcji startuje od 3 wierszy. */
.field textarea { min-height: 66px; max-height: 40vh; resize: vertical; field-sizing: content; }
.field select {
    -webkit-appearance: none; appearance: none; padding-right: 24px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b2f33' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 2px center / 11px 8px;
}
.field__help { font-size: 12px; color: var(--muted); }
.field__error { font-size: 12px; color: var(--error); }
.field__error:empty { display: none; }

/* Plik: niski przycisk wyboru zamiast szerokiego pola przeglądarki. */
.field--file { border-style: dashed; background: var(--paper-2); }
.field input[type="file"] { width: 100%; padding: 4px 0 2px; font: inherit; font-size: 13px; color: var(--muted); }
.field input[type="file"]::file-selector-button {
    margin-right: 10px; padding: 7px 12px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 400;
    color: var(--ink-strong); background: #fff; border: 1px solid var(--ink-strong); border-radius: 0;
}
.field--file .field__help { font-size: 11px; }

/* Zgoda i wybór bez ramki pola; opcje wyboru jako niskie kafelki w rzędzie. */
.field--checkbox, .field--choices { padding: 0; border: 0; background: none; }
.choices { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choices ul, .choices > div { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.choices label {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--line-strong); background: #fff; font-size: 13px; line-height: 1.3; cursor: pointer;
}
.choices input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink-strong); flex: 0 0 auto; }
.choices label:has(input:checked) { border-color: var(--ink-strong); background: var(--paper-2); }
.check {
    display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0;
    font-size: 13px; line-height: 1.5; color: var(--ink); cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink-strong); flex: 0 0 auto; }
.field--checkbox.has-error .check { color: var(--error); }

/* ---------- skrót kontaktu nad polami (forms/includes/shortcut.html) ---------- */
.shortcut { display: grid; gap: 16px; margin-top: 18px; }
.shortcut + .form { margin-top: 14px; }
.shortcut__call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; }
.shortcut__call .icon { width: 20px; height: 20px; }
.shortcut__or {
    display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted);
}
.shortcut__or::before, .shortcut__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.shortcut--mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
/* Adres tuż nad kreską (tekst przy dolnej krawędzi pola pod palec, nie na środku). */
.shortcut--mail .reveal { min-height: 32px; align-items: flex-end; padding-block: 0 2px; font-size: 14px; }

.thanks { display: grid; gap: 14px; padding-block: 8px; }
.thanks__title { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink-strong); }
.thanks__title em { display: block; font-family: var(--serif-italic); font-style: italic; font-size: 0.86em; }

.form-section { display: grid; gap: 26px; }
@media (min-width: 621px) {
    .form__actions .btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
    .form-section { grid-template-columns: 0.8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
}