/* ==========================================================================
   Velunio — velunio.css · system „Bloczek” (v2)
   Tożsamość: bloczek faktur samokopiujących. Papier oryginału, różowa i żółta
   kopia jako tinty stanów, niebieski tusz pieczątki jako akcja, czerwona
   i zielona pieczątka jako status. Archivo = tekst, Courier Prime = dane
   (numery, kwoty, daty). Dokumentacja: DESIGN.md. Bez zasobów zewnętrznych.
   ========================================================================== */

/* -------------------------------------------------------------- 1. Fonty */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/archivo-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------- 2. Tokeny */
:root {
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-data: "Courier Prime", "Courier New", Courier, monospace;

  /* role kolorów (jasny motyw) */
  --papier: #FBFAF7;        /* tło strony: biały oryginał z bloczka */
  --arkusz: #FFFFFF;        /* powierzchnia arkusza: tabele, formularze */
  --arkusz-2: #F2F0EA;      /* drugi arkusz pod spodem: sekcje naprzemienne, wiersze hover */
  --kopia-rozowa: #F9E1E3;  /* różowa kopia: zaległości, ostrzeżenia */
  --kopia-zolta: #FBF0C2;   /* żółta kopia: oczekujące, wyróżnienia */
  --tusz: #1E4FB5;          /* niebieski tusz pieczątki: akcje, linki */
  --tusz-2: #163C8C;        /* tusz mocniej dociśnięty: hover */
  --tusz-tlo: #E6EDFB;      /* ślad pieczątki: tło pod tuszem */
  --atrament: #1A2130;      /* długopis: tekst, linie nagłówkowe tabel */
  --olowek: #5B6270;        /* ołówek: tekst drugorzędny */
  --olowek-2: #8A909C;      /* ołówek jaśniej: podpisy */
  --perforacja: #D9D5CC;    /* linia perforacji: ramki, separatory */
  --perforacja-2: #C3BFB5;  /* perforacja mocniej: ramki pól */
  --zaplacono: #1D7A4A;     /* zielona pieczątka: opłacone, działa */
  --zaplacono-tlo: #DDF1E5;
  --po-terminie: #B4261F;   /* czerwony tusz: po terminie, błąd */
  --uwaga: #B7791F;         /* żółty tusz: spowolnienie, oczekuje */

  --cien-arkusz: 3px 3px 0 var(--perforacja);                 /* stos kartek pod arkuszem */
  --cien-unoszenie: 0 14px 28px -14px rgb(26 33 48 / .35);    /* tylko to, co unosi się nad kartką: menu, toast */

  --r-1: 2px;   /* pola, przyciski */
  --r-2: 4px;   /* pieczątki */
  --r-3: 7px;   /* znak firmowy */

  --t-xs: .8125rem; --t-sm: .9rem; --t-md: 1rem; --t-lg: 1.15rem; --t-xl: 1.4rem;
  --t-2xl: 1.85rem; --t-3xl: 2.4rem; --t-4xl: clamp(2.3rem, 4.4vw, 3.5rem);
  --lh-tight: 1.08; --lh-text: 1.55;

  --w-page: 1180px; --w-text: 72ch; --gutter: 20px; --header-h: 64px;
  --dur: .14s;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #15181E; --arkusz: #1D2129; --arkusz-2: #242933; --kopia-rozowa: #3B2529; --kopia-zolta: #3A3321;
    --tusz: #8FB0F5; --tusz-2: #B5CBFA; --tusz-tlo: #22304F; --atrament: #ECEAE3; --olowek: #AAB0BB; --olowek-2: #7B818C;
    --perforacja: #333945; --perforacja-2: #454C5A; --zaplacono: #63CC93; --zaplacono-tlo: #1D3A2C; --po-terminie: #F0877F; --uwaga: #E0B15A;
    --cien-arkusz: 3px 3px 0 #0C0E12; --cien-unoszenie: 0 14px 28px -14px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #15181E; --arkusz: #1D2129; --arkusz-2: #242933; --kopia-rozowa: #3B2529; --kopia-zolta: #3A3321;
  --tusz: #8FB0F5; --tusz-2: #B5CBFA; --tusz-tlo: #22304F; --atrament: #ECEAE3; --olowek: #AAB0BB; --olowek-2: #7B818C;
  --perforacja: #333945; --perforacja-2: #454C5A; --zaplacono: #63CC93; --zaplacono-tlo: #1D3A2C; --po-terminie: #F0877F; --uwaga: #E0B15A;
  --cien-arkusz: 3px 3px 0 #0C0E12; --cien-unoszenie: 0 14px 28px -14px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* --------------------------------------------------------------- 3. Baza */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--f-text); font-size: 16px; line-height: var(--lh-text); color: var(--atrament); background: var(--papier); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; min-width: 0; }
main:focus { outline: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.012em; color: var(--atrament); }
h1 { font-size: var(--t-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: 1.25; }
h4 { font-size: var(--t-md); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--tusz); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tusz-2); }
strong, b { font-weight: 700; }
small { font-size: .875em; }
img, svg, canvas { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--perforacja); margin: 32px 0; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
code, kbd, pre, .num { font-family: var(--f-data); }
code { font-size: .92em; background: var(--arkusz-2); padding: .1em .35em; border-radius: var(--r-1); }
pre { background: var(--arkusz-2); border: 1px solid var(--perforacja); padding: 16px 18px; overflow: auto; line-height: 1.5; font-size: .9rem; }
pre code { background: none; padding: 0; }
kbd { border: 1px solid var(--perforacja-2); border-bottom-width: 2px; border-radius: var(--r-1); padding: 1px 6px; font-size: .8em; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
::selection { background: var(--kopia-zolta); color: var(--atrament); }
:focus-visible { outline: 3px solid var(--tusz); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 8px 12px; background: var(--atrament); color: var(--papier); border-radius: var(--r-1); }
.skip-link:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* dane: numery, kwoty, daty */
.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num--big { font-size: var(--t-3xl); line-height: 1; font-weight: 700; }
.num--xl { font-size: var(--t-2xl); line-height: 1.1; font-weight: 700; }

/* --------------------------------------------------------------- 4. Układ */
.wrap { width: 100%; max-width: calc(var(--w-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; }
.wrap--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }
.wrap--mid { max-width: calc(900px + 2 * var(--gutter)); }
.section { padding: clamp(40px, 6vw, 72px) 0; }
.section--tight { padding: clamp(24px, 3vw, 40px) 0; }
.section--none { padding: 0; }
.section--sheet { background: var(--arkusz-2); }
.section--ruled { border-top: 2px solid var(--atrament); }
.cols { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.cols--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cols--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cols--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.cols--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.cols--3-9 { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--middle { align-items: center; }
.cols--end { align-items: end; }
.stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.stack--lg { gap: 32px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.lead { font-size: var(--t-lg); line-height: 1.5; }
.muted { color: var(--olowek); }
.faint { color: var(--olowek-2); }
.small { font-size: var(--t-sm); }
.tiny { font-size: var(--t-xs); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 8px !important; } .mt-2 { margin-top: 16px !important; } .mt-3 { margin-top: 24px !important; } .mt-4 { margin-top: 32px !important; } .mt-5 { margin-top: 48px !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 8px !important; } .mb-2 { margin-bottom: 16px !important; } .mb-3 { margin-bottom: 24px !important; } .mb-4 { margin-bottom: 32px !important; }
.maxw { max-width: 62ch; }
.title { font-size: var(--t-3xl); letter-spacing: -.018em; margin-bottom: 16px; }
.title--page { font-size: var(--t-4xl); margin-bottom: 20px; }
.title--sm { font-size: var(--t-xl); }

/* ---------------------------------------------------- 5. Arkusz, perforacja */
.sheet { background: var(--arkusz); border: 1px solid var(--perforacja); box-shadow: var(--cien-arkusz); padding: 24px; min-width: 0; }
.sheet--flat { box-shadow: none; }
.sheet--pink { background: var(--kopia-rozowa); border-color: #E8C3C8; }
.sheet--yellow { background: var(--kopia-zolta); border-color: #E6D79A; }
.sheet--tight { padding: 16px; }
.sheet--none { padding: 0; }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--perforacja); font-size: var(--t-sm); color: var(--olowek); }
.sheet__head strong { color: var(--atrament); }
.sheet__corner { position: absolute; top: 8px; right: 12px; font-size: .72rem; color: var(--olowek-2); }
.sheet--corner { position: relative; }
.sheet--none .register-wrap { margin: 0; }
.tear { height: 0; margin: 36px 0; border-top: 3px dotted var(--perforacja-2); }
.tear--wide { margin: clamp(40px, 6vw, 64px) 0; }
.tear--tight { margin: 20px 0; }

/* -------------------------------------------------------------- 6. Pieczątka */
.stamp { display: inline-block; font-family: var(--f-text); font-weight: 700; font-size: .72rem; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; padding: 4px 7px 3px; border: 2px solid currentColor; border-radius: var(--r-2); color: var(--tusz); white-space: nowrap; vertical-align: middle; }
.stamp--paid { color: var(--zaplacono); }
.stamp--late { color: var(--po-terminie); }
.stamp--ksef { color: var(--tusz); background: var(--tusz-tlo); }
.stamp--sent { color: var(--tusz); }
.stamp--draft { color: var(--olowek); border-style: dashed; }
.stamp--wait { color: var(--uwaga); }
.stamp--info { color: var(--olowek); }
.stamp--tilt { transform: rotate(-3deg); }
.stamp--big { font-size: 1rem; padding: 8px 12px 7px; border-width: 3px; border-radius: 6px; letter-spacing: .06em; }
.stamp--huge { font-size: clamp(1.3rem, 2.6vw, 1.9rem); padding: 10px 16px 8px; border-width: 4px; border-radius: 8px; letter-spacing: .07em; }
.initials { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--tusz); border-radius: var(--r-2); font-weight: 700; color: var(--tusz); font-size: .9rem; letter-spacing: .02em; flex: none; }

/* --------------------------------------------------------------- 7. Tabele */
.register-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.register { width: 100%; border-collapse: collapse; font-size: .95rem; }
.register th, .register td { padding: 11px 12px; text-align: left; vertical-align: top; }
.register thead th { font-size: var(--t-xs); font-weight: 700; color: var(--olowek); border-bottom: 2px solid var(--atrament); white-space: nowrap; }
.register tbody td { border-bottom: 1px solid var(--perforacja); }
.register tbody tr:last-child td { border-bottom: 1px solid var(--perforacja); }
.register tfoot td { border-top: 2px solid var(--atrament); font-weight: 700; padding-top: 12px; }
.register tbody tr:hover td { background: var(--arkusz-2); }
.register tr.is-late td { background: var(--kopia-rozowa); }
.register tr.is-wait td { background: var(--kopia-zolta); }
.register tr.is-late:hover td, .register tr.is-wait:hover td { filter: brightness(.97); }
.register .num, .register th.num { text-align: right; white-space: nowrap; }
.register td.num { font-size: .92rem; }
.register--compact th, .register--compact td { padding: 7px 10px; font-size: var(--t-sm); }
.register--ruled thead th { border-bottom-width: 1px; }
.register--firstcol td:first-child, .register--firstcol th:first-child { font-weight: 700; }
.register .stamp { font-size: .66rem; padding: 3px 6px 2px; }
.pricing thead th { vertical-align: bottom; }
.pricing tbody th { font-weight: 700; vertical-align: top; white-space: nowrap; }
.pricing .pricing__plan { font-size: var(--t-lg); color: var(--atrament); text-transform: none; letter-spacing: -.01em; display: block; }
.pricing .pricing__price { font-size: var(--t-2xl); line-height: 1; text-align: left; font-weight: 700; }
.pricing .pricing__price .pricing__unit { font-size: var(--t-xs); color: var(--olowek); font-weight: 400; display: block; margin-top: 6px; font-family: var(--f-text); white-space: normal; }
.pricing thead .pricing__unit { font-size: var(--t-xs); color: var(--olowek); font-weight: 400; display: block; margin-top: 4px; white-space: normal; }
.pricing td { vertical-align: top; }
.pricing tfoot td { border-top: 2px solid var(--atrament); }

/* ------------------------------------------------------------- 8. Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: .95rem; line-height: 1.2; padding: 11px 18px; border: 2px solid var(--tusz); border-radius: var(--r-1); background: var(--tusz); color: #FFFFFF; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--dur), border-color var(--dur), color var(--dur); }
:root[data-theme="dark"] .btn { color: #0F1A33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { color: #0F1A33; } }
.btn:hover { background: var(--tusz-2); border-color: var(--tusz-2); color: #FFFFFF; }
:root[data-theme="dark"] .btn:hover { color: #0F1A33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { color: #0F1A33; } }
.btn--outline { background: transparent; color: var(--tusz); }
.btn--outline:hover { background: var(--tusz-tlo); color: var(--tusz-2); }
:root[data-theme="dark"] .btn--outline, :root[data-theme="dark"] .btn--outline:hover { color: var(--tusz); }
.btn--ink { background: var(--atrament); border-color: var(--atrament); color: var(--papier); }
.btn--ink:hover { background: var(--olowek); border-color: var(--olowek); color: var(--papier); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--tusz); text-decoration: underline; text-underline-offset: 3px; padding-inline: 6px; }
.btn--quiet:hover { background: transparent; color: var(--tusz-2); }
:root[data-theme="dark"] .btn--quiet { color: var(--tusz); }
.btn--big { padding: 15px 24px; font-size: 1.05rem; }
.btn--sm { padding: 7px 12px; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--perforacja-2); border-radius: var(--r-1); background: var(--arkusz); color: var(--atrament); cursor: pointer; }
.iconbtn:hover { border-color: var(--atrament); }
.iconbtn .icon { width: 18px; height: 18px; vertical-align: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* --------------------------------------------------------- 9. Górna belka */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--perforacja); height: var(--header-h); }
.topbar__in { display: flex; align-items: center; gap: 16px; height: 100%; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--atrament); text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; }
.brand__mark { width: 30px; height: 30px; flex: none; transform: rotate(-5deg); }
.brand__mark rect { fill: none; stroke: var(--tusz); stroke-width: 5; }
.brand__mark path { fill: none; stroke: var(--tusz); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.brand--lg { font-size: 1.45rem; } .brand--lg .brand__mark { width: 38px; height: 38px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav__link { display: inline-block; padding: 6px 10px; color: var(--atrament); text-decoration: none; font-size: .95rem; border-bottom: 2px solid transparent; line-height: 1.3; }
.nav__link:hover { border-bottom-color: var(--perforacja-2); color: var(--atrament); }
.nav__link[aria-current="page"] { border-bottom-color: var(--tusz); }
.nav__mobile { display: none; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar__login { color: var(--atrament); text-decoration: none; font-size: .95rem; padding: 6px 4px; }
.topbar__login:hover { text-decoration: underline; }
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
}
.nav-toggle { display: none; }
.nav-toggle .icon--close { display: none; }
html.nav-open .nav-toggle .icon--close { display: block; }
html.nav-open .nav-toggle .icon--menu { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; }
  .nav { display: none; }
  .topbar__actions .btn, .topbar__login { display: none; }
  html.nav-open .nav { display: grid; gap: 2px; position: absolute; top: var(--header-h); left: 0; right: 0; margin: 0; padding: 12px var(--gutter) 20px; background: var(--arkusz); border-bottom: 1px solid var(--perforacja); box-shadow: var(--cien-unoszenie); }
  .nav__link { padding: 12px 8px; font-size: 1.05rem; border-bottom: 1px solid var(--perforacja); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--perforacja); color: var(--tusz); }
  html.nav-open .nav__mobile { display: grid; gap: 10px; margin-top: 14px; }
}

/* --------------------------------------------------------------- 10. Hero */
.hero { padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 5vw, 56px); }
.hero__title { font-size: var(--t-4xl); margin-bottom: 20px; max-width: 18ch; }
.hero__text { font-size: var(--t-lg); max-width: 52ch; }
.hero__text + .hero__text { margin-top: .6em; }
.hero__actions { margin-top: 28px; }
.hero__fine { margin-top: 14px; font-size: var(--t-sm); color: var(--olowek); }
.hero__sheet { position: relative; }
.hero__stamp { position: absolute; right: 22px; bottom: 54px; z-index: 2; }
@keyframes stamp-press { 0% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 60% { opacity: 1; transform: scale(.95) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
.anim-press { animation: stamp-press .45s cubic-bezier(.2, .9, .3, 1) .5s both; transform: rotate(-3deg); }

/* ------------------------------------------------------------- 11. Listy */
.dash { list-style: none; padding: 0; margin: 0 0 1em; }
.dash li { position: relative; padding-left: 1.4em; margin-bottom: .45em; }
.dash li::before { content: "—"; position: absolute; left: 0; color: var(--olowek-2); }
.dash--tight li { margin-bottom: .2em; }
.dash--no li::before { content: "×"; color: var(--po-terminie); font-weight: 700; left: .15em; }
.dash--yes li::before { content: "✓"; color: var(--zaplacono); font-weight: 700; left: .1em; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--perforacja); }
.steps > li:last-child { border-bottom: 1px solid var(--perforacja); }
.steps > li::before { content: counter(step, decimal-leading-zero); font-family: var(--f-data); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--tusz); padding-top: 2px; }
.steps__title { font-size: var(--t-lg); margin: 0 0 4px; }
.steps p { margin: 0; color: var(--olowek); }
.spec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; margin: 0; }
.spec dt { font-weight: 700; padding: 18px 24px 18px 0; border-top: 1px solid var(--perforacja); }
.spec dd { margin: 0; padding: 18px 0; border-top: 1px solid var(--perforacja); color: var(--olowek); }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 1px solid var(--perforacja); }
.spec dd p { margin: 0 0 .5em; }
.spec dd .num { color: var(--atrament); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-top: 2px solid var(--atrament); }
.facts > div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--perforacja); }
.facts .num { display: block; font-size: var(--t-2xl); font-weight: 700; line-height: 1.1; }
.facts .muted { display: block; font-size: var(--t-sm); margin-top: 4px; }
.files { list-style: none; padding: 0; margin: 0; font-family: var(--f-data); font-size: .9rem; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--perforacja); }
.files li span:last-child { color: var(--olowek); white-space: nowrap; }

/* ------------------------------------------------------------- 12. Notki */
.note { padding: 12px 14px; border-left: 3px solid var(--perforacja-2); background: var(--arkusz-2); font-size: var(--t-sm); }
.note--warn { border-color: var(--po-terminie); background: var(--kopia-rozowa); }
.note--info { border-color: var(--uwaga); background: var(--kopia-zolta); }
.note--ok { border-color: var(--zaplacono); background: var(--zaplacono-tlo); }
.note--ink { border-color: var(--tusz); background: var(--tusz-tlo); }
.note__title { font-weight: 700; margin: 0 0 2px; }
.note p:last-child { margin: 0; }
.note--lg { font-size: var(--t-md); padding: 16px 18px; }

/* --------------------------------------------------------- 13. Formularze */
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.form__note { font-size: var(--t-xs); color: var(--olowek); margin: 0; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 700; font-size: var(--t-sm); display: flex; justify-content: space-between; gap: 8px; }
.field__label .optional { font-weight: 400; color: var(--olowek-2); }
.field__hint { font-size: var(--t-xs); color: var(--olowek); margin: 0; }
.field__error { font-size: var(--t-xs); color: var(--po-terminie); margin: 0; font-weight: 700; }
.field__error:empty { display: none; }
.input, .select, .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--perforacja-2); border-radius: var(--r-1); background: var(--arkusz); color: var(--atrament); font: inherit; line-height: 1.4; -webkit-appearance: none; appearance: none; }
.input::placeholder, .textarea::placeholder { color: var(--olowek-2); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--tusz); box-shadow: inset 0 0 0 1px var(--tusz); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--po-terminie); box-shadow: inset 0 0 0 1px var(--po-terminie); }
.input--big { padding: 13px 14px; font-size: 1.05rem; }
.input--num { font-family: var(--f-data); }
.textarea { min-height: 130px; resize: vertical; }
.select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6270' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: calc(100% - 10px) 50%; background-size: 18px 18px; background-repeat: no-repeat; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); cursor: pointer; }
.checkbox input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--tusz); flex: none; }
.input-group { position: relative; }
.input-group .input { padding-right: 44px; }
.input-group__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border-color: transparent; background: transparent; }
.form.is-sent [data-form-fields] { display: none; }
.segmented { display: inline-flex; border: 1px solid var(--perforacja-2); border-radius: var(--r-1); overflow: hidden; }
.segmented button { border: 0; background: var(--arkusz); color: var(--atrament); padding: 8px 14px; font-weight: 700; font-size: var(--t-sm); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--perforacja-2); }
.segmented button[aria-pressed="true"] { background: var(--atrament); color: var(--papier); }

/* ------------------------------------------------------ 14. Zakładki, FAQ */
.tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--perforacja); overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-weight: 700; color: var(--olowek); cursor: pointer; white-space: nowrap; }
.tabs__tab:hover { color: var(--atrament); }
.tabs__tab[aria-selected="true"] { color: var(--atrament); border-bottom-color: var(--tusz); }
.tabs__panel { padding-top: 20px; }
.faq { margin: 0; }
.faq details { border-top: 1px solid var(--perforacja); }
.faq details:last-child { border-bottom: 1px solid var(--perforacja); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--f-data); font-size: 1.4rem; color: var(--tusz); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--tusz); }
.faq__body { padding: 0 0 18px; color: var(--olowek); max-width: 70ch; }
.faq__body p:last-child { margin: 0; }

/* -------------------------------------------- 15. Treść długa, okruszki */
.prose { max-width: var(--w-text); font-size: 1.02rem; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--t-xl); margin: 2em 0 .6em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h3 { font-size: var(--t-lg); margin: 1.6em 0 .5em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose li { margin-bottom: .3em; }
.prose blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--tusz); color: var(--olowek); }
.prose table { width: 100%; font-size: var(--t-sm); margin: 1.4em 0; }
.prose th, .prose td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--perforacja); }
.prose thead th { border-bottom: 2px solid var(--atrament); font-size: var(--t-xs); color: var(--olowek); }
.prose .note { margin: 1.4em 0; }
.prose--legal ol.legal { counter-reset: item; list-style: none; padding-left: 0; }
.prose--legal ol.legal > li { counter-increment: item; position: relative; padding-left: 2.6em; margin-bottom: .7em; }
.prose--legal ol.legal > li::before { content: counters(item, ".") "."; position: absolute; left: 0; font-family: var(--f-data); font-weight: 700; color: var(--olowek); }
.prose--legal ol.legal ol.legal { margin-top: .5em; }
.prose--legal ol.legal ol.legal > li { padding-left: 2.6em; }
.prose--legal ol.legal ol.legal > li::before { content: counter(item, lower-alpha) ")"; }
.legal-meta { font-family: var(--f-data); font-size: var(--t-xs); color: var(--olowek); margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.toc { position: sticky; top: calc(var(--header-h) + 20px); font-size: var(--t-sm); }
.toc__title { font-weight: 700; margin: 0 0 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 5px 12px; border-left: 2px solid var(--perforacja); color: var(--olowek); text-decoration: none; }
.toc a:hover, .toc a.is-active { color: var(--tusz); border-left-color: var(--tusz); }
.breadcrumbs { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-xs); color: var(--olowek); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--perforacja-2); }
.breadcrumbs a { color: var(--olowek); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 28px 0 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--perforacja-2); border-radius: var(--r-1); font-family: var(--f-data); text-decoration: none; color: var(--atrament); }
.pagination a:hover { border-color: var(--atrament); }
.pagination [aria-current="page"] { background: var(--atrament); color: var(--papier); border-color: var(--atrament); }
.pagination .pagination__gap { border: 0; }

/* ---------------------------------- 16. Wpisy, dziennik zmian, status */
.posts { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--atrament); }
.post { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--perforacja); }
.post__date { font-family: var(--f-data); font-size: var(--t-sm); color: var(--olowek); padding-top: 3px; }
.post__title { font-size: var(--t-lg); font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.post__title a { color: var(--atrament); text-decoration: none; }
.post__title a:hover { color: var(--tusz); text-decoration: underline; }
.post__excerpt { color: var(--olowek); margin: 0 0 6px; max-width: 70ch; }
.post__meta { font-size: var(--t-xs); color: var(--olowek-2); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.log { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--atrament); }
.log__entry { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 24px; padding: 22px 0; border-bottom: 1px solid var(--perforacja); }
.log__date { font-family: var(--f-data); font-size: var(--t-sm); color: var(--olowek); line-height: 1.6; }
.log__date .stamp { display: block; width: max-content; margin-top: 6px; }
.log__title { font-size: var(--t-lg); margin: 0 0 6px; line-height: 1.3; }
.log__title .stamp { margin-right: 6px; vertical-align: 2px; }
.log__text { color: var(--olowek); margin: 0 0 8px; max-width: 70ch; }
.log__changes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.log__changes li { display: flex; gap: 10px; align-items: flex-start; color: var(--olowek); }
.log__changes .stamp { flex: none; margin-top: 2px; }
.log__updates { list-style: none; padding: 0; margin: 8px 0 0; font-size: var(--t-sm); color: var(--olowek); }
.log__updates li { padding: 2px 0; }
.log__updates .num { color: var(--atrament); }
.log__tags { margin-top: 8px; font-size: var(--t-xs); color: var(--olowek-2); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
.status-row__name { font-weight: 700; }
.status-row__meta { font-size: var(--t-sm); color: var(--olowek); }
.status-row__meta .num { color: var(--atrament); }
.daybar { display: flex; gap: 2px; height: 26px; }
.daybar i { flex: 1 1 0; background: var(--zaplacono); min-width: 0; border-radius: 1px; }
@media (max-width: 640px) { .daybar { gap: 1px; } }
.daybar .is-degraded { background: var(--uwaga); }
.daybar .is-down { background: var(--po-terminie); }
.daybar .is-maintenance { background: var(--tusz); }
.daybar__legend { display: flex; justify-content: space-between; font-family: var(--f-data); font-size: var(--t-xs); color: var(--olowek); margin-top: 6px; }
.status-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-weight: 700; font-size: var(--t-lg); }
.status-banner .small { margin-left: auto; font-weight: 400; color: var(--olowek); }

/* ------------------------------------------------------------ 17. Stopka */
.footer { margin-top: clamp(48px, 7vw, 80px); border-top: 2px solid var(--atrament); padding: 40px 0 24px; font-size: var(--t-sm); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer__claim { color: var(--olowek); max-width: 34ch; margin: 14px 0 16px; }
.footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; color: var(--olowek); }
.footer__contact a { color: var(--olowek); }
.footer__contact a:hover { color: var(--tusz); }
.footer__col h2 { font-size: var(--t-xs); font-weight: 700; margin: 0 0 12px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__col a, .footer__col button { color: var(--olowek); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.footer__col a:hover, .footer__col button:hover { color: var(--tusz); text-decoration: underline; }
.footer__legal { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--perforacja); font-size: var(--t-xs); color: var(--olowek-2); line-height: 1.6; }
.footer__legal a { color: var(--olowek-2); }
.footer__bottom { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: var(--t-xs); color: var(--olowek-2); }
.footer__bottom a { color: var(--olowek-2); }

/* ----------------------------------------------------- 18. Cookies, toast */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(440px, calc(100% - 32px)); background: var(--arkusz); border: 1px solid var(--perforacja-2); box-shadow: var(--cien-arkusz); padding: 18px 20px; transform: translateY(12px); opacity: 0; visibility: hidden; transition: transform .2s, opacity .2s, visibility .2s; }
.cookie.is-open { transform: none; opacity: 1; visibility: visible; }
.cookie__title { font-weight: 700; margin: 0 0 6px; font-size: var(--t-md); }
.cookie__text { font-size: var(--t-sm); color: var(--olowek); margin: 0; }
.cookie__prefs { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--perforacja); }
.cookie__prefs small { display: block; color: var(--olowek-2); font-weight: 400; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 100; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; padding: 10px 16px; background: var(--atrament); color: var(--papier); font-size: var(--t-sm); font-weight: 700; box-shadow: var(--cien-unoszenie); transition: transform .2s, opacity .2s, visibility .2s; max-width: calc(100% - 32px); }
.toast.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------------------------------------------------------- 19. Responsywność */
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cols--5-7, .cols--7-5, .cols--4-8, .cols--8-4, .cols--3-9, .cols--3 { grid-template-columns: minmax(0, 1fr); }
  .spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec dt { padding-bottom: 4px; }
  .spec dd { border-top: 0; padding-top: 0; }
  .spec dt:last-of-type { border-bottom: 0; }
  .toc { position: static; }
  .hero__stamp { right: 10px; bottom: 44px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .cols--2, .cols--4, .form__row { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .post, .log__entry { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .register .hide-sm { display: none; }
  .register th, .register td { padding: 9px 8px; font-size: var(--t-sm); }
  .sheet { padding: 16px; }
  .sheet__corner { display: none; }
  .hero__stamp { display: none; }
  .stamp--huge { font-size: 1.2rem; padding: 8px 12px 6px; border-width: 3px; }
  .hero__title { max-width: none; }
  .actions .btn { flex: 1 1 auto; }
  .status-row { flex-wrap: wrap; }
  .cookie { left: 8px; bottom: 8px; width: calc(100% - 16px); }
}

/* --------------------------------------------- 20. Ruch ograniczony, druk */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .anim-press { opacity: 1; transform: rotate(-3deg); }
}
@media print {
  .topbar, .footer, .cookie, .toast, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .sheet { box-shadow: none; }
}