/* css/umowy.css — podstrona /umowy/ (generator umów)
   Ciemny formularz po lewej (sticky) + jasna „kartka” A4 po prawej.
   Dziedziczy zmienne z style.css (--bg, --ink, --accent, --font-*, --space, --radius, --ease, --line-soft, --maxw). */

/* ------------------------------------------------------------------ */
/*  Zmienne lokalne                                                    */
/* ------------------------------------------------------------------ */
.umowy {
  --doc-ink: #14141a;         /* czerń dokumentu na białym */
  --doc-muted: #55555f;
  --doc-paper: #fbfbf8;       /* lekko kremowa kartka */
  --doc-line: #e2e2dc;
  --field-bg: #101014;
  --field-line: rgba(237, 237, 239, .14);
  --field-line-focus: var(--accent);
  --doc-serif: 'Times New Roman', Georgia, 'Fraunces', serif;
}

/* ------------------------------------------------------------------ */
/*  Hero                                                               */
/* ------------------------------------------------------------------ */
.umowy-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(96px, 14vh, 168px) var(--space) clamp(24px, 5vw, 48px);
}
.umowy-hero__eyebrow {
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: clamp(12px, 2vw, 20px);
}
.umowy-hero__heading {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.02;
  letter-spacing: -.015em; margin: 0 0 clamp(14px, 2.4vw, 24px);
}
.umowy-hero__intro {
  color: var(--muted); max-width: 62ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.62;
}

/* ------------------------------------------------------------------ */
/*  Pasek narzędzi (typ umowy + akcje)                                 */
/* ------------------------------------------------------------------ */
.umowy-toolbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 24px);
}
.umowy-toolbar__short {
  color: var(--muted); font-size: .92rem; flex: 1 1 260px; min-width: 0;
}
.umowy-toolbar__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.segmented {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.segmented__btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .92rem; font-weight: 500;
  color: var(--muted); background: transparent;
  padding: .55em 1.15em; border-radius: 999px;
  transition: color .25s var(--ease), background .3s var(--ease);
}
.segmented__btn:hover { color: var(--ink); }
.segmented__btn.is-active { color: #fff; background: var(--accent); }
.segmented__btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Przyciski */
.umowy .btn {
  display: inline-flex; align-items: center; gap: .5em;
  appearance: none; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; font-weight: 500;
  padding: .62em 1.05em; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--bg-2); color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease), transform .12s var(--ease);
}
.umowy .btn svg { flex: none; }
.umowy .btn:hover { border-color: var(--muted); }
.umowy .btn:active { transform: translateY(1px); }
.umowy .btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.umowy .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.umowy .btn--accent:hover { border-color: var(--accent); filter: brightness(1.08); }
.umowy .btn--ghost { background: transparent; }
.umowy .btn[disabled] { opacity: .55; cursor: progress; }

/* ------------------------------------------------------------------ */
/*  Layout: formularz | podgląd                                        */
/* ------------------------------------------------------------------ */
.umowy-layout {
  max-width: var(--maxw);
  margin: clamp(24px, 4vw, 44px) auto 0;
  padding: 0 var(--space) clamp(64px, 10vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .umowy-layout { grid-template-columns: 1fr; }
}

/* ---- Formularz (ciemny, sticky) ---- */
.umowy-form {
  position: sticky;
  top: calc(var(--header-h, 72px) + 16px);
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px);
  max-height: calc(100vh - var(--header-h, 72px) - 32px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--field-line) transparent;
}
.umowy-form::-webkit-scrollbar { width: 8px; }
.umowy-form::-webkit-scrollbar-thumb { background: var(--field-line); border-radius: 99px; }
@media (max-width: 900px) {
  .umowy-form { position: static; max-height: none; overflow: visible; padding-right: 0; }
}

.fgroup {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  /* .umowy-form to przewijalny panel flex-column; bez tego overflow:hidden
     zeruje auto-min-height grup i kurczą się do wysokości nagłówka zamiast
     wypełnić i uruchomić scroll panelu. */
  flex: none;
}
.fgroup__head {
  width: 100%; text-align: left; cursor: pointer;
  appearance: none; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  padding: clamp(13px, 1.6vw, 17px) clamp(15px, 1.8vw, 19px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fgroup__head:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.fgroup__chev {
  flex: none; color: var(--muted);
  transition: transform .3s var(--ease);
}
.fgroup[aria-expanded="false"] .fgroup__chev { transform: rotate(-90deg); }
.fgroup__body {
  padding: 0 clamp(15px, 1.8vw, 19px) clamp(15px, 1.8vw, 19px);
  display: grid; gap: clamp(11px, 1.4vw, 15px);
}
.fgroup[aria-expanded="false"] .fgroup__body { display: none; }

.umowy .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.umowy .field__label {
  font-size: .82rem; color: var(--muted); letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 6px;
}
.umowy .field__req { color: var(--accent-text); }
.umowy .field__unit { margin-left: auto; color: var(--muted); font-size: .76rem; }

.umowy .field input,
.umowy .field select,
.umowy .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: .62em .72em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.umowy .field textarea { resize: vertical; min-height: 3.4em; line-height: 1.5; }
.umowy .field input::placeholder,
.umowy .field textarea::placeholder { color: #5a5a63; }
.umowy .field input:focus,
.umowy .field select:focus,
.umowy .field textarea:focus {
  outline: none;
  border-color: var(--field-line-focus);
  box-shadow: 0 0 0 3px rgba(59, 91, 255, .18);
}
.umowy .field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8A8E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7em center;
  padding-right: 2.2em;
}
.umowy .field input[type="date"] { color-scheme: dark; }

/* Miękkie pojawienie grup pól sterowane z JS (bez [data-reveal], bo main.js
   nie skanuje dynamicznie wstrzykniętych węzłów). */
.umowy-form .fgroup { opacity: 0; transform: translateY(20px); }
.umowy-form.is-ready .fgroup {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* ------------------------------------------------------------------ */
/*  Podgląd — „kartka” A4                                              */
/* ------------------------------------------------------------------ */
.umowy-preview { min-width: 0; }
.umowy-preview__hint {
  margin-top: 14px; font-size: .86rem; color: var(--muted); min-height: 1.2em;
}
.umowy-preview__hint[data-state="ok"] { color: var(--accent-text); }
.umowy-preview__hint[data-state="err"] { color: #ff8f8f; }
.umowy-preview__hint a { color: inherit; text-decoration: underline; }

.doc {
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px);
  opacity: 0; transform: translateY(16px);
}
.doc.is-ready { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }

.doc__page {
  background: var(--doc-paper);
  color: var(--doc-ink);
  font-family: var(--doc-serif);
  font-size: clamp(.82rem, 1.05vw, .95rem);
  line-height: 1.62;
  border-radius: 6px;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .7), 0 2px 8px -4px rgba(0, 0, 0, .5);
  padding: clamp(28px, 5%, 60px) clamp(26px, 7%, 68px);
  /* proporcja A4 jako minimum wysokości względem szerokości kolumny */
  min-height: 0;
}

.doc__block { margin: 0 0 1.35em; }
.doc__block:last-child { margin-bottom: 0; }
.doc__h {
  font-weight: 700; font-size: 1.02em; margin: 0 0 .5em;
  letter-spacing: .01em;
}
.doc__title {
  text-align: center; font-weight: 700; font-size: 1.14em;
  line-height: 1.3; margin: 0 0 1.1em; text-transform: uppercase;
  letter-spacing: .02em;
}
.doc__p { margin: 0 0 .55em; text-align: justify; hyphens: auto; }
.doc__p:last-child { margin-bottom: 0; }

/* Placeholder niewypełnionego tokenu */
.doc .ph {
  background: rgba(59, 91, 255, .14);
  color: #2c3a99;
  border-bottom: 1px dashed rgba(59, 91, 255, .55);
  border-radius: 3px;
  padding: 0 .28em;
  font-style: normal;
  white-space: nowrap;
}

/* Blok podpisów */
.doc__sign {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 6%, 60px);
  margin-top: 2.2em;
}
.doc__sign-slot { text-align: center; }
.doc__sign-line {
  border-top: 1px solid var(--doc-ink);
  margin: 3.4em 0 .5em;
}
.doc__sign-role { font-size: .9em; color: var(--doc-muted); }

/* Etykieta „Załącznik” pod nagłówkiem strony przeniesionej */
.doc__page--annex { position: relative; }

/* ------------------------------------------------------------------ */
/*  Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .umowy-form .fgroup,
  .umowy-form.is-ready .fgroup,
  .doc, .doc.is-ready {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
html.anim-failed .umowy-form .fgroup,
html.anim-failed .doc {
  opacity: 1 !important; transform: none !important;
}

/* ------------------------------------------------------------------ */
/*  DRUK — tylko dokument, czysty A4 czarny-na-białym                  */
/* ------------------------------------------------------------------ */
@media print {
  /* wygasza cały chrome strony */
  .header, .mobile-menu, .progress, .skip-link,
  .footer, .umowy-hero, .umowy-toolbar,
  .umowy-form, .umowy-preview__hint { display: none !important; }

  html, body {
    background: #fff !important; color: #000 !important;
    overflow: visible !important;
  }
  .umowy, .umowy-layout, .umowy-preview {
    display: block !important; margin: 0 !important; padding: 0 !important;
    max-width: none !important;
  }

  .doc {
    display: block !important; opacity: 1 !important; transform: none !important;
    gap: 0 !important;
  }
  .doc__page {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; border-radius: 0 !important;
    font-family: 'Times New Roman', Georgia, serif !important;
    font-size: 11pt !important; line-height: 1.5 !important;
    padding: 18mm 20mm !important;
    /* każda „kartka” danych zaczyna nową stronę fizyczną, gdy oznaczona pagebreak */
    break-inside: auto;
  }
  .doc__page + .doc__page { break-before: page; }
  .doc__title { font-size: 13pt !important; }
  .doc__h { font-size: 11.5pt !important; }
  .doc__block, .doc__h { break-after: avoid; }
  .doc__p { orphans: 3; widows: 3; }

  /* Niewypełnione tokeny w druku — czytelne, bez koloru tła */
  .doc .ph {
    background: transparent !important; color: #000 !important;
    border-bottom: 1px solid #000 !important; border-radius: 0 !important;
  }
  .doc__sign { break-inside: avoid; }

  @page { size: A4; margin: 0; }
}