/* The site's plain pages (task #108): /vip/, /konto/, /regulamin/, /prywatnosc/. Since task #181 they
   wear the main site's header, drawer and footer (/dokumenty/chrome.js, the markup and classes of
   site/v3) and its colours: /v3.css is loaded first, and everything here is built on its tokens, so
   the palette picked in the header (dark or light) holds here too. Only rules for these pages, all
   under body.doc-page or main.doc. Served at /dokumenty/dokumenty.css. */

/* No sport bar under the header here: one row of 76 px on a computer, and no sport bar at the
   bottom on a phone. */
@media (min-width: 721px) { body.doc-page { --head-h: 77px; } }
@media (max-width: 720px) { body.doc-page { padding-bottom: 0; } }
.footnav a[aria-current="page"] { color: var(--text-strong); font-weight: 600; }

/* ---------- the page ---------- */
.doc { display: flex; flex-direction: column; gap: 22px; overflow-wrap: anywhere; }
.doc .page-head { display: flex; flex-direction: column; gap: 0; }
.doc .page-sub { font-size: 14px; }
.doc-lang-note { width: fit-content; max-width: 100%; margin-top: 12px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); }

/* Text of a document: one readable column. */
.doc-body { max-width: 760px; min-width: 0; color: var(--text-prose); font-size: 15.5px; line-height: 1.65; }
.doc-body h2 { margin: 34px 0 10px; font: 700 26px/1.15 var(--display); color: var(--text-strong); scroll-margin-top: calc(var(--head-h) + 16px); }
.doc-body > h2:first-child { margin-top: 0; }
.doc-body h3 { margin: 20px 0 6px; font-size: 16px; color: var(--text-strong); }
.doc-body p, .doc-body li { margin: 0 0 10px; }
.doc-body ol, .doc-body ul { margin: 0 0 10px; padding-left: 22px; }
.doc-body strong, .doc-body b { color: var(--text-strong); }
.doc a:not(.btn) { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.doc a:not(.btn):hover { color: var(--text-strong); }

/* A document with a column beside it on a computer: the price on /vip/, the contents on
   /regulamin/. The column comes first in the page, so on a phone it is first too. */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px 40px; align-items: start; }
.doc-grid > .doc-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 48px); overflow-y: auto; }
.doc-grid > .doc-body { grid-column: 1; grid-row: 1; }
@media (max-width: 980px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-grid > .doc-aside, .doc-grid > .doc-body { grid-column: auto; grid-row: auto; position: static; }
}

/* ---------- cards, buttons ---------- */
.doc .card { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text-2); }
.doc .card h2 { margin: 0; font: 700 24px/1.1 var(--display); color: var(--text-strong); }
.doc .card p { margin: 0; }
.doc .muted { color: var(--text-muted); font-size: 14px; }
.doc .price { font: 800 48px/1 var(--display); color: var(--text-strong); }
/* Long words on the buttons here ("Kup VIP na 30 dni (test, bez pieniędzy)"): they wrap on a phone. */
.doc .btn { height: auto; min-height: 44px; padding: 10px 20px; white-space: normal; text-align: center; line-height: 1.25; }
.doc .btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.doc-aside .box-actions .btn-primary { flex: 1 1 100%; }
@media (max-width: 720px) { .doc .card { padding: 18px 16px; } .doc .price { font-size: 40px; } }

/* The test payment provider (task #108): no money moves, and it must look like it. */
.doc .test-note { margin: 0; padding: 10px 14px; border: 2px dashed var(--warn-line); border-radius: var(--r); background: var(--warn-bg); color: var(--warn-text); font-size: 14px; line-height: 1.5; }
.doc .test-note b { letter-spacing: .06em; }
/* "Projekt — do sprawdzenia przez prawnika (#23)" on every document. */
.doc .draft { padding: 12px 16px; border: 2px dashed var(--warn-line); border-radius: var(--r); background: var(--warn-bg); color: var(--warn-text); font-size: 14.5px; line-height: 1.5; }
.doc .draft b { display: block; font-size: 16px; }
/* Data still to be filled in (seller, address, NIP ...): never invented, always visible. */
.doc .ph { padding: 0 4px; border-radius: 4px; background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-line); color: var(--warn-text); font-weight: 700; }

/* ---------- the documents ---------- */
.doc .toc { gap: 8px; font-size: 14.5px; }
.doc .toc b { font: 700 20px/1.1 var(--display); color: var(--text-strong); text-transform: uppercase; letter-spacing: .02em; }
.doc .toc ol { margin: 0; padding-left: 22px; line-height: 1.5; }
.doc .toc li { margin: 3px 0; }
.doc .toc a { text-decoration: none; }
.doc .toc a:hover { text-decoration: underline; }
.doc .table-wrap { overflow-x: auto; margin: 6px 0 14px; border: 1px solid var(--border); border-radius: var(--r); }
/* A table keeps whole words: on a phone it scrolls sideways inside its frame, not the page. */
.doc table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; }
.doc th, .doc td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc td + td, .doc th + th { border-left: 1px solid var(--border); }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc th { background: var(--surface); color: var(--text-strong); font-weight: 700; }
.doc .docs { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
.doc .docs a { color: var(--text-muted); text-decoration: none; }
.doc .docs a:hover { color: var(--text-strong); }
.doc .docs a[aria-current="page"] { color: var(--text-strong); font-weight: 700; }

/* ---------- /konto/ ---------- */
.doc-narrow { width: 100%; max-width: 480px; margin: 0 auto; }
.doc-narrow > section { display: flex; flex-direction: column; gap: 14px; }
.doc-narrow .docs { justify-content: center; }
.doc .tabs { display: flex; gap: 6px; }
.doc .tabs button { flex: 1; min-height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font-weight: 700; cursor: pointer; }
.doc .tabs button:hover { color: var(--text-strong); }
.doc .tabs button[aria-selected="true"] { background: var(--surface); color: var(--text-strong); border-color: var(--green); }
.doc form { display: grid; gap: 14px; }
.doc .contact-field input { width: 100%; }
.doc .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.doc .check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); }
.doc .error { margin: 0; color: var(--miss); font-size: 14px; }
.doc .ok { margin: 0; color: var(--green); font-size: 14px; }
.doc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 15px; }
.doc dt { color: var(--text-muted); }
.doc dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
/* A page in both languages (odpowiedzialna-gra): the text that does not match <html lang> is hidden. */
html[lang="en"] [data-only="pl"], html[lang="pl"] [data-only="en"] { display: none; }