/* Nakładki · the public site (contract E5, CMS; prototype Wersja A): the home page (Main.dc.html), search (A_Szukaj),
   the pages for organisations (A_Dla), the AI page (A_AI), the documents, "Zgłoś treść" and the "Serwis" section of
   the staff pages.
   On top of nk-tokens.css and the building blocks of app.css (.wrap, .section, .h-*, .eyebrow, .lead, .search, .chip,
   .btn, .card, .badge, .on-dark); the studio of the home page has its own studio.css. The values are the prototype's,
   every var() with its value as the fallback. Colours of pages are data and come as SVG fill attributes
   (app/views/site/_mini.php, _glow.php), never from here or a style attribute. Mobile first, 44 px targets. */

/* The titles that are not h1 to h6 elements (a tile, a card of "Popularne teraz", a result, an empty search, the
   privacy statement, the questions of A_Dla) and the big numerals of the steps: the display face of the headings
   (app.css). */
.site-tile__name, .site-step__n, .site-pop__name, .site-statement, .site-result__name, .site-empty__title, .site-faq__item summary { font-family: var(--nk-font-display, 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif); }

/* The light behind the top of a page (_glow.php): at the top of the document, behind the transparent header. */
.site-glow { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 1100px; pointer-events: none; }
/* A thumbnail of an overlay (_mini.php): round, never squeezed; the size comes from its place. */
.site-mini { display: block; flex: 0 0 auto; border-radius: 50%; }

/* Section heads: the title with "Przeglądaj wszystkie" on the right (Main). */
.site-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.site-head__title { max-width: 680px; }
.site-head--popular { margin-bottom: 24px; }
.site-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* Hero (Main, A_Dla): the text with the search on the left, the overlay with three formats on the right. */
.site-hero { padding-top: clamp(32px, 6vw, 80px); }
.site-hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 48px; }
.site-hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.site-hero__line { display: block; }
.site-hero__art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.site-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.site-picks__label { padding-right: 4px; color: var(--nk-muted, #5D6372); }
.site-note { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--nk-muted, #5D6372); }

/* The overlay with three formats (_art.php): cards placed in a square, turned, floating slowly. Each card is the
   prototype's Edytor preview: grey until drawn, a white edge and a soft shadow, round for the overlay. */
.site-art { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.site-art--home { max-width: 540px; }
.site-art--seg { max-width: 500px; }
.site-art__card { position: absolute; z-index: 1; }
.site-art__card--b { left: 66%; top: 2%; width: 30%; transform: rotate(6deg); }
.site-art__card--a { left: 0; top: 42%; width: 31%; transform: rotate(-6deg); }
.site-art__card--d { left: 62%; top: 66%; width: 28%; transform: rotate(4deg); }
.site-art__card--c { left: 20%; top: 18%; z-index: 2; width: 60%; }
@keyframes site-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: no-preference) {
  .site-art__float--a { animation: site-float 6.5s ease-in-out infinite; }
  .site-art__float--b { animation: site-float 7.5s ease-in-out -2.5s infinite; }
  .site-art__float--c { animation: site-float 9s ease-in-out -1s infinite; }
  .site-art__float--d { animation: site-float 7s ease-in-out -4s infinite; }
}
.site-pv { position: relative; width: 100%; overflow: hidden; border-radius: var(--nk-r-field, 14px); background: var(--nk-surface-2, #EFEDE7); box-shadow: var(--nk-shadow-float, 0 0 0 4px #FFFFFF, 0 18px 40px rgba(11, 18, 32, 0.16)); }
.site-pv--ov { aspect-ratio: 1 / 1; border-radius: 50%; }
.site-pv--p11 { aspect-ratio: 1 / 1; }
.site-pv--p34 { aspect-ratio: 3 / 4; }
.site-pv--st { aspect-ratio: 9 / 16; }
.site-pv__canvas { display: block; width: 100%; height: 100%; }

/* Category tiles (Main): white tiles in a wrapping row, sized like the prototype's xl, tall, md and wide; the overlay of
   a page of the type fades in from the right (drawn by studio.js), the text on top. */
.site-tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.site-tiles__item { display: flex; min-width: 0; flex: 1 1 260px; }
.site-tiles__item--xl { flex: 2 1 520px; }
.site-tiles__item--wide { flex: 3 1 560px; }
.site-tile { position: relative; isolation: isolate; overflow: hidden; flex: 1 1 auto; min-width: 0; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 20px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); text-decoration: none; }
.site-tile:hover { border-color: var(--nk-ink, #0B1220); color: var(--nk-ink, #0B1220); }
.site-tile--xl, .site-tile--tall { min-height: 320px; }
.site-tile--wide { min-height: 220px; }
.site-tile__art { position: absolute; z-index: -1; top: 50%; right: -40px; width: 250px; transform: translateY(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to left, #000000 38%, transparent 92%); mask-image: linear-gradient(to left, #000000 38%, transparent 92%); }
.site-tile--xl .site-tile__art { right: -30px; width: 350px; }
.site-tile--tall .site-tile__art { right: -50px; width: 300px; }
.site-tile--wide .site-tile__art { right: -30px; }
.site-tile__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.site-tile__text { display: flex; flex-direction: column; gap: 6px; max-width: 64%; }
.site-tile--xl .site-tile__text { max-width: 360px; }
.site-tile--wide .site-tile__text { max-width: 460px; }
.site-tile__name { font-size: 26px; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.site-tile--xl .site-tile__name { font-size: 36px; }
.site-tile--wide .site-tile__name { font-size: 30px; }
.site-tile__desc { color: var(--nk-ink-2, #3A4050); }
.site-tile__more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }

/* The three steps (Main): big light numerals over the title and the text. */
.site-steps__title { max-width: 680px; }
.site-steps { display: flex; flex-wrap: wrap; gap: 32px 0; margin: 40px 0 0; padding: 0; list-style: none; }
.site-step { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; padding: 4px 32px 4px 0; }
.site-step__n { font-size: clamp(80px, 10vw, 132px); font-weight: 600; line-height: 0.85; letter-spacing: -0.06em; color: var(--nk-numeral, #D9D5CC); }
.site-step__title { font-size: 24px; letter-spacing: -0.01em; }
.site-step__text { max-width: 300px; color: var(--nk-muted, #5D6372); }

/* "Popularne teraz" (Main): a row of tall cards tinted with the page colour, scrolled sideways, snapping to a card. */
.site-pop { display: flex; gap: 16px; margin: 0; padding: 4px 4px 16px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; }
.site-pop__item { flex: 0 0 236px; scroll-snap-align: start; }
.site-pop__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 100%; aspect-ratio: 3 / 4; padding: 20px; border-radius: var(--nk-r-tile, 24px); color: var(--nk-ink, #0B1220); text-decoration: none; }
.site-pop__tint { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; }
.site-pop__mini { width: 132px; height: 132px; }
.site-pop__text { display: flex; flex-direction: column; gap: 2px; }
.site-pop__name { font-size: 19px; font-weight: 600; line-height: 1.2; }
.site-pop__meta { font-size: 14px; color: var(--nk-ink-2, #3A4050); }
/* As the tiles: the card keeps its ink on hover, only the name is underlined. */
.site-pop__card:hover { color: var(--nk-ink, #0B1220); }
.site-pop__card:hover .site-pop__name { text-decoration: underline; }

/* The privacy statement (Main): one big sentence, its second part lighter; the three points under it. The lighter
   part is #888D9A, the closest shade to the prototype's --nk-subtle #8A8F9C (2.99:1 on the page) that keeps the 3:1
   of large text (3.07:1). */
.site-statement { max-width: 1040px; font-size: clamp(34px, 5.4vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
.site-statement__more { color: #888D9A; }
.site-points { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 17px; font-weight: 600; }
.site-points li { display: flex; align-items: center; gap: 10px; }

/* The AI block (Main): the text with the button, three overlays with a transparent hole beside it. */
.site-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.site-ai__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.site-ai__btn { align-self: flex-start; }
.site-ai__art { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.site-ai__minis { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 260; }
.site-ai__mini { position: absolute; width: clamp(110px, 32vw, 180px); height: auto; }
.site-ai__mini--1 { left: 0; top: 14%; transform: rotate(-9deg); }
.site-ai__mini--2 { left: 59%; top: 14%; transform: rotate(9deg); }
.site-ai__mini--3 { left: 29%; top: 0; z-index: 2; }

/* "Dla organizacji" (Main): the ink block with the five pages and two big buttons. */
.site-org { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px; padding: clamp(24px, 5vw, 64px); border-radius: var(--nk-r-hero, 28px); }
.site-org__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.site-org__lead { color: var(--nk-dark-text-2, #C9CED8); }
.site-org__links { margin-top: 4px; }
/* The prototype's links are content-box: 44 px and the 1 px edge make 46. */
.site-org__links .chip { min-height: 46px; font-size: inherit; }
.site-org__actions { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.site-org__btn { display: flex; min-height: 54px; font-size: inherit; }
.site-org__btn.btn--on-dark { min-height: 56px; }

/* Search (A_Szukaj): the title, the field with the magnifier, the categories, the count, the results, the hint. */
.site-find__lead { max-width: 620px; margin-top: 12px; color: var(--nk-muted, #5D6372); }
.site-find__search { max-width: 640px; margin-top: 28px; gap: 10px; padding: 6px 6px 6px 18px; }
.site-find__search .search__icon { margin-left: 0; }
.site-find__search .search__input { padding: 0 2px; }
.site-find__cats { margin-top: 18px; }
.site-count { margin: 28px 0 14px; font-size: 15px; color: var(--nk-muted, #5D6372); font-variant-numeric: tabular-nums; }
.site-results { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.site-results__item { display: flex; flex: 1 1 340px; min-width: 0; }
.site-result { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); text-decoration: none; }
.site-result:hover { border-color: var(--nk-ink, #0B1220); color: var(--nk-ink, #0B1220); }
.site-result__mini { width: 88px; height: 88px; }
.site-result__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.site-result__name { font-size: 19px; font-weight: 600; line-height: 1.25; }
.site-result__meta { font-size: 15px; color: var(--nk-muted, #5D6372); }
.site-result__type { align-self: flex-start; margin-top: 4px; }
.site-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface, #FFFFFF); }
.site-empty__title { font-size: 22px; font-weight: 600; }
.site-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* 48 px and the 1 px edge of the prototype's link (content-box); the button beside it stretches to the same 50 px. */
.site-empty__actions .btn--ghost { min-height: 50px; }
.site-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 32px; padding: 22px 24px; border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface-3, #ECE9E2); }
.site-hint__text { max-width: 680px; }
.site-hint__soft { color: var(--nk-ink-2, #3A4050); }
.site-hint__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.site-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; margin-top: 24px; font-size: 15px; }
.site-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface, #FFFFFF); font-weight: 600; text-decoration: none; }
.site-pager a:hover { border-color: var(--nk-ink, #0B1220); color: var(--nk-ink, #0B1220); }

/* Pages "Dla …" (A_Dla): the hero, the uses, the steps, the plans with the period, the free limit, the questions and
   the closing ink block. */
.site-seg-hero .site-hero__text { flex: 1 1 460px; }
.site-seg-hero .site-hero__art { flex: 1 1 400px; }
.site-seg__title { font-size: clamp(40px, 5.8vw, 74px); line-height: 1.02; letter-spacing: -0.03em; }
.site-seg__lead { max-width: 540px; }
.site-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-actions .btn { min-height: 54px; padding: 0 26px; }
/* 54 px and the 1 px edge of the prototype's link (content-box); the button beside it stretches to the same 56 px. */
.site-actions .btn--ghost { min-height: 56px; }
.site-seg__note { font-size: 15px; color: var(--nk-muted, #5D6372); }
.site-sec { padding-top: clamp(72px, 10vw, 120px); }
.site-sec__title { margin-bottom: 28px; max-width: 720px; }
.site-uses { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.site-use { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel, 20px); background: var(--nk-surface, #FFFFFF); }
.site-use__title { font-size: 22px; letter-spacing: -0.01em; }
.site-use__text { color: var(--nk-muted, #5D6372); }
.site-flow { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.site-flow__step { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-top: 2px solid var(--nk-ink, #0B1220); }
.site-flow__n { font-size: 14px; font-weight: 600; color: var(--nk-muted, #5D6372); }
.site-flow__title { font-size: 21px; }
.site-flow__text { color: var(--nk-muted, #5D6372); }
.site-plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 24px; margin-bottom: 32px; }
.site-plans-head__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.site-plans-head__text p { color: var(--nk-muted, #5D6372); }
/* The period of the subscription: two radios drawn as the prototype's switch, no JavaScript. Without :has() both
   prices stay on the card and the switch is not shown. */
.site-period { display: none; margin: 0; padding: 4px; border: 0; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface-3, #ECE9E2); }
.site-period__opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--nk-r-pill, 999px); color: var(--nk-muted, #5D6372); font-size: 15px; font-weight: 600; cursor: pointer; }
.site-period__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@supports selector(:has(*)) {
  .site-period { display: inline-flex; gap: 4px; }
  .site-period__opt:has(.site-period__input:checked) { background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); }
  .site-period__opt:has(.site-period__input:focus-visible) { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: 2px; }
  .site-plans-sec:has(.site-period__input[value="miesiac"]:checked) .site-plan__year,
  .site-plans-sec:has(.site-period__input[value="rok"]:checked) .site-plan__month,
  .site-plans-sec:has(.site-period__input:checked) .site-plan__or { display: none; }
}
@media (forced-colors: active) {
  .site-period__opt:has(.site-period__input:checked) { outline: 2px solid Highlight; outline-offset: -2px; text-decoration: underline; }
}
.site-plans { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; margin: 0; padding: 0; list-style: none; }
.site-plan { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 30px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-panel-lg, 22px); background: var(--nk-surface, #FFFFFF); }
.site-plan--rec { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }
.site-plan__badge { align-self: flex-start; padding: 4px 12px; border-radius: var(--nk-r-pill, 999px); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); font-size: 13px; font-weight: 600; }
.site-plan__name { font-size: 21px; }
.site-plan__price { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site-plan__or { font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--nk-muted, #5D6372); }
.site-plan__note { margin-top: -6px; font-size: 15px; color: var(--nk-muted, #5D6372); }
/* E6 §3.11: the price per month with its unit, and the calculator of a paid plan (works without JS: Przelicz). */
.site-plan__per { font-size: 17px; font-weight: 400; letter-spacing: 0; }
.site-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.site-calc__field { display: flex; flex: 1 1 120px; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; font-weight: 600; }
.site-calc__input { width: 100%; min-height: 44px; }
.site-calc__go { flex: 0 0 auto; }
.site-plan--rec .site-calc__input { color: var(--nk-ink, #0B1220); }
.site-plan--rec .site-plan__note, .site-plan--rec .site-plan__or { color: var(--nk-dark-muted, #B4BAC6); }
.site-plan__feats { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
.site-plan__feats li { display: flex; gap: 10px; }
.site-plan__feats .icon { margin-top: 2px; }
.site-plan__cta { display: flex; min-height: 54px; border: 1px solid var(--nk-line-strong, #D6D2C9); background: transparent; color: var(--nk-ink, #0B1220); }
.site-plan__cta:hover { border-color: var(--nk-ink, #0B1220); color: var(--nk-ink, #0B1220); }
.site-plan--rec .site-plan__cta { border-color: var(--nk-surface, #FFFFFF); background: var(--nk-surface, #FFFFFF); }
.site-plan--rec .site-plan__cta:hover { color: var(--nk-ink, #0B1220); }
.site-plan--rec :focus-visible { outline-color: var(--nk-on-ink, #FFFFFF); }
.site-limit { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding: clamp(20px, 3vw, 30px); border-radius: var(--nk-r-panel-lg, 22px); background: var(--nk-surface-3, #ECE9E2); }
.site-limit__title { font-size: 17px; }
.site-limit__bar { display: block; width: 100%; height: 10px; overflow: visible; }
.site-limit__track { fill: var(--nk-numeral, #D9D5CC); }
.site-limit__fill, .site-limit__mark { fill: var(--nk-ink, #0B1220); }
.site-limit__scale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--nk-ink-2, #3A4050); font-variant-numeric: tabular-nums; }
.site-limit__scale strong { color: var(--nk-ink, #0B1220); }
.site-limit__note { font-size: 15px; color: var(--nk-muted, #5D6372); }
.site-extra { margin-top: 20px; color: var(--nk-muted, #5D6372); }
@media (forced-colors: active) {
  .site-limit__fill, .site-limit__mark { fill: CanvasText; }
  .site-plan__badge { border: 1px solid CanvasText; }
}
.site-faq { max-width: 820px; margin: 0 auto; }
.site-faq__title { margin-bottom: 20px; }
.site-faq__item { border-top: 1px solid var(--nk-line, #E3E0D9); }
.site-faq__item:last-child { border-bottom: 1px solid var(--nk-line, #E3E0D9); }
/* The summary stays a list item, so it keeps the disclosure triangle (open or closed) of the browser, forced colours too;
   its padding makes the whole row the target. */
.site-faq__item summary { display: list-item; padding: 18px 0; font-size: 19px; font-weight: 600; cursor: pointer; }
.site-faq__item p { margin-top: -8px; padding-bottom: 18px; max-width: 760px; color: var(--nk-muted, #5D6372); }
.site-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 64px); border-radius: var(--nk-r-hero, 28px); }
/* A_Dla keeps clamp(72px, 10vw, 120px) above its footer; the compact footer of app.css brings clamp(56px, 8vw, 96px). */
.site-seg-end { padding-bottom: clamp(16px, 2vw, 24px); }
.site-cta__title { flex: 1 1 460px; min-width: 0; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; letter-spacing: -0.025em; }
.site-cta .btn { min-height: 54px; padding: 0 28px; }

/* The AI page (A_AI): the form in a white card, the progress card and the credits. */
.site-gen { max-width: 760px; }
.site-gen__lead { margin-top: 12px; color: var(--nk-muted, #5D6372); }
.site-gen__staff { margin-top: 20px; }
/* A note's links take its colour (app.css); its button keeps the white of the ink pill. */
.site-gen__staff .btn, .site-gen__staff .btn:hover { color: var(--nk-on-ink, #FFFFFF); }
.site-gen__form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface, #FFFFFF); }
.site-gen__field { display: flex; flex-direction: column; gap: 8px; }
.site-gen__label { font-weight: 600; }
.site-gen__label--big { font-size: 18px; }
.site-gen__opt { font-weight: 400; color: var(--nk-muted, #5D6372); }
.site-gen__input--big { min-height: 58px; padding: 0 20px; border-radius: var(--nk-r-box, 16px); font-size: 18px; }
.site-gen__help { font-size: 14px; color: var(--nk-muted, #5D6372); }
.site-gen__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.site-gen__note { font-size: 14px; color: var(--nk-muted, #5D6372); }
.site-gen__card { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface, #FFFFFF); }
.site-gen__steps { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.site-gen__step { display: flex; align-items: center; gap: 10px; }
.site-gen__dot { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nk-surface-2, #EFEDE7); color: var(--nk-muted, #5D6372); font-size: 14px; font-weight: 700; }
.site-gen__step-name { font-weight: 600; color: var(--nk-muted, #5D6372); }
/* The state of a step ("gotowe", "w toku…" when it runs); empty while nothing runs, it keeps the prototype's spacing. */
.site-gen__state { font-size: 14px; color: var(--nk-muted, #5D6372); }
.site-gen__idle { color: var(--nk-muted, #5D6372); }
.site-gen__soon { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--nk-r-box, 16px); background: var(--nk-bg, #F7F6F2); }
.site-gen__soon-title { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nk-muted, #5D6372); }
.site-gen__soon-text { font-size: 15px; color: var(--nk-ink-2, #3A4050); }
.site-gen__links { display: flex; flex-wrap: wrap; gap: 10px; }
.site-gen__credits { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 20px; padding: clamp(20px, 3vw, 28px); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface-3, #ECE9E2); }
.site-gen__credits-title { font-size: 20px; font-weight: 600; }
.site-gen__credits-text { margin-top: 2px; color: var(--nk-ink-2, #3A4050); }

/* Documents (/regulamin, /prywatnosc): the title of a public page, the text in a white card. */
.site-doc { max-width: 780px; }
.site-doc__since { margin-top: 12px; }
.site-doc__since:not(.msg) { color: var(--nk-muted, #5D6372); }
.site-doc__card { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-tile, 24px); background: var(--nk-surface, #FFFFFF); }
.site-doc__text { display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.site-doc__text h2 { margin-top: 10px; font-size: 22px; }
.site-doc__text ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 22px; }
.site-doc__actions { margin-top: 24px; }

/* "Zgłoś treść" (/zglos): the address of a page in the centred card of the prototype's one-field steps (A_Konto:
   480 px, its parts 18 px apart, the title at 40 px, "Dalej" across the card, the small print muted). The form of
   one page (/zglos/<adres>) balances the lines of its title, so a short name in quotes stays on one line on a phone. */
.site-report { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.site-report__title { font-size: clamp(30px, 4vw, 40px); }
.site-report__name { text-wrap: balance; }
.site-report__fine { font-size: 14px; color: var(--nk-muted, #5D6372); overflow-wrap: anywhere; }
.site-report__fine a, .site-report__fine a:hover { color: var(--nk-muted, #5D6372); }

/* "Serwis" in the staff pages (with admin.css) */
.site-adm__key { scroll-margin-top: 16px; }
.site-adm__tile { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-box, 16px); }
.site-adm__tile legend { padding: 0 6px; }
.site-adm__slugs { max-width: 420px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; }
.site-adm__date { max-width: 220px; }