/* Pochatok — сторінки, яких не було в макетах (додано 03.10 за запитом «подумай, яких сторінок не вистачає»):
   help-article.html, offer.html, privacy.html, request.html, 404.html.
   Макетів немає — мої компонування на токенах дизайн-системи (Manrope 400, чорне / біле / сірі, прямі кути,
   інфо-плашки жовті --accent). Підключається після style.css + inner.css (+ cabinet.css / onboarding.css, де треба). */

/* ================= black top for documents: crumbs + title + lead ================= */
.doc-top { display: flex; flex-direction: column; gap: 20px; width: calc(1120px + 2 * var(--pad)); max-width: 100%; margin: 0 auto; padding: 60px var(--pad) 80px; }
.doc-top--narrow { width: calc(808px + 2 * var(--pad)); }   /* request: same column as its form */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--grey-soft); }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--white); }
.doc-top__title { font-size: var(--fs-xl); line-height: 1.1; }
.doc-top__lead { max-width: 640px; font-size: 18px; line-height: 1.65; color: #d9d9d9; }

/* ================= document: text | sticky side ================= */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; align-items: start; width: calc(1120px + 2 * var(--pad)); max-width: 100%; margin: 0 auto; padding: 80px var(--pad) 140px; }
.doc__body { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.doc__body a { text-decoration: underline; text-underline-offset: 4px; }
.doc-sec { display: flex; flex-direction: column; gap: 14px; padding-top: 32px; border-top: 1px solid var(--black); scroll-margin-top: 24px; }
.doc-sec h2 { font-size: var(--fs-l); line-height: 1.1; }
.doc-sec p { font-size: 16px; line-height: 1.65; color: var(--grey-text); }
/* info plate → yellow */
.doc-plate { padding: 20px 24px; background: var(--accent); font-size: 16px; line-height: 1.6; }

.doc__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.doc__side-title { margin-bottom: 12px; font-size: 14px; line-height: 1.35; color: var(--grey-text); }
.doc__side > a { padding: 10px 0; border-bottom: 1px solid var(--grey-soft); font-size: 16px; line-height: 1.35; transition: color .2s; }
.doc__side > a:hover { color: var(--grey-text); }
.doc__side > a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.doc__other { margin-top: 20px; border: 0 !important; }
.doc__ask { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; padding: 40px; background: var(--grey-bg); font-size: 16px; }

/* help article: numbered steps */
.doc-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.doc-steps li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 0 32px 72px; border-top: 1px solid var(--black); counter-increment: st; }
.doc-steps li::before { content: counter(st); position: absolute; left: 0; top: 30px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--black); color: var(--white); font-size: 16px; }
.doc-steps h2 { font-size: var(--fs-l); line-height: 1.1; }
.doc-steps p { font-size: 16px; line-height: 1.65; color: var(--grey-text); }

/* ================= request ================= */
.req { gap: 0; }
.req__form { display: flex; flex-direction: column; gap: 32px; }
.req__form[hidden] { display: none; }
.req__area { height: auto; padding: 16px 20px; resize: vertical; }
.req__error { min-height: 1.35em; margin: -16px 0 0; font-size: 14px; line-height: 1.35; color: #c4320a; }
.req__nav { margin-top: 0; }
.req__done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px; background: var(--grey-bg); outline: none; }
.req__done[hidden] { display: none; }
.req__done-icon { display: grid; place-items: center; width: 64px; height: 64px; background: var(--black); color: var(--white); }
.req__done-title { font-size: var(--fs-l); line-height: 1.1; }
.req__done-text { font-size: 16px; line-height: 1.65; color: var(--grey-text); }
.req__done-text a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
/* report.html (19.10): the good-faith checkbox is a sentence, so the option grows in height */
.rep__faith { height: auto; min-height: 48px; padding: 12px 20px 12px 16px; align-items: flex-start; line-height: 1.5; }
.rep__faith .rq__box { margin-top: 2px; }
.rep__faith a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }

/* ================= 404 ================= */
.nf { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 60px var(--pad); background: var(--black); color: var(--white); text-align: center; }
.nf__box { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 520px; }
.nf__mark { --p: 70px; width: 90px; height: 88px; margin-bottom: 20px; color: var(--white); }
.nf__code { font-size: 14px; letter-spacing: 1.2px; color: var(--grey-soft); }
.nf__title { font-size: var(--fs-xl); line-height: 1.1; }
.nf__text { font-size: 18px; line-height: 1.65; color: #d9d9d9; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 20px; }
.nf__actions .cbtn { min-width: 200px; }
.cbtn--soft { background: rgba(186, 185, 185, .15); color: var(--white); }   /* secondary on black: filled, like .sbtn */

/* ================= mobile ================= */
@media (max-width: 900px) {
  .doc-top { padding: 32px var(--pad) 48px; gap: 16px; }
  .doc-top__title, .nf__title { font-size: 28px; }
  .doc-top__lead, .nf__text { font-size: 16px; }
  .doc { grid-template-columns: 1fr; gap: 48px; padding: 40px var(--pad) 100px; }
  .doc__side { position: static; }
  .doc-sec h2, .doc-steps h2 { font-size: 20px; }
  .doc-sec p, .doc-steps p { font-size: 16px; }
  .doc-steps li { padding-left: 60px; }
  .doc-steps li::before { width: 40px; height: 40px; }
  .req__done { padding: 24px; }
  .req__done-title { font-size: 22px; }
  .nf__mark { --p: 51px; width: 65.5px; height: 64px; }
  .nf__actions, .nf__actions .cbtn { width: 100%; }
}

/* ================= invoice (invoice.html) — faktura / daňový doklad, sent by e-mail after every payment (03.10) =================
   On screen: a sheet on the grey page + toolbar; in print / «Завантажити PDF» only the sheet. Czech first, Ukrainian under it. */
.inv-page { min-height: 100vh; background: var(--grey-bg); }
.inv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: calc(794px + 2 * var(--pad)); max-width: 100%; margin: 0 auto; padding: 32px var(--pad) 20px; }
.inv-bar .acc-back { margin-right: auto; }
.inv-note { width: calc(794px + 2 * var(--pad)); max-width: 100%; margin: 0 auto 20px; padding: 0 var(--pad); }
.inv-note p { padding: 16px 20px; background: var(--accent); font-size: 15px; line-height: 1.5; }
.inv-wrap { padding: 0 var(--pad) 100px; }
.inv { display: flex; flex-direction: column; gap: 36px; width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto; padding: 64px 64px 48px; background: var(--white); color: var(--black); font-size: 13px; line-height: 1.5; }
.inv small, .inv .uk { color: var(--grey-text); }
.inv .uk { display: block; font-size: 11px; line-height: 1.4; }
.inv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.inv__logo { display: flex; align-items: center; gap: 10px; color: var(--black); }
.inv__logo img { display: block; height: 28px; width: auto; filter: invert(1); }
.inv__logo img + img { height: 23px; }
.inv__title { text-align: right; }
.inv__title h1 { font-size: 26px; line-height: 1.15; }
.inv__title p { margin-top: 4px; font-size: 15px; }
.inv__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.inv__party { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1.5px solid var(--black); }
.inv__party h2 { margin-bottom: 8px; font-size: 13px; line-height: 1.35; }
.inv__party b { font-weight: 400; font-size: 16px; }
.inv__party .ph { display: inline; padding: 0 4px; background: var(--accent); }
.inv__dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 0; border-top: 1px solid var(--grey-soft); border-bottom: 1px solid var(--grey-soft); }
.inv__dates dt { font-size: 12px; color: var(--grey-text); }
.inv__dates dd { margin: 2px 0 0; font-size: 14px; }
.inv__table { width: 100%; border-collapse: collapse; }
.inv__table th { padding: 0 0 10px; border-bottom: 1.5px solid var(--black); font-weight: 400; font-size: 12px; color: var(--grey-text); text-align: left; vertical-align: bottom; }
.inv__table td { padding: 14px 0; border-bottom: 1px solid var(--grey-soft); vertical-align: top; font-size: 14px; }
.inv__table .num { padding-left: 16px; text-align: right; white-space: nowrap; }
.inv__sum { display: flex; flex-direction: column; align-self: flex-end; width: 330px; max-width: 100%; }
.inv__sum div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 14px; }
.inv__sum div:last-child { margin-top: 6px; padding-top: 14px; border-top: 1.5px solid var(--black); font-size: 20px; }
.inv__paid { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1.5px solid var(--black); font-size: 14px; }
.inv__foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--grey-soft); font-size: 12px; color: var(--grey-text); }
@media (max-width: 860px) {
  .inv-wrap { padding: 0 0 60px; overflow-x: auto; }
  .inv { min-height: 0; padding: 32px 20px; gap: 28px; }
  .inv__top, .inv__parties { grid-template-columns: 1fr; flex-direction: column; }
  .inv__title { text-align: left; }
  .inv__dates { grid-template-columns: 1fr 1fr; }
}
@media print {
  @page { size: A4; margin: 0; }
  .inv-page { background: none; }
  .inv-bar, .inv-note, .ck { display: none !important; }
  .inv-wrap { padding: 0; }
  .inv { width: auto; min-height: 297mm; margin: 0; padding: 18mm 16mm 14mm; }
  .inv__party .ph { background: none; }
}