/* dostepnosc2025.pl — one stylesheet, three themes.
 *
 * THE WORLD: an acuity chart. The object hanging on every optician's wall is
 * the one instrument the whole world already trusts to answer "can this be
 * seen?", which is the only question this site asks. So the page is printed
 * like a chart: one ink on white paper, square corners, hairline rules with
 * tick ends, a measuring edge across the top, and highlighter yellow as the
 * single second colour — always a ground to mark something with, never text.
 *
 * The type scale IS the chart's scale. Every step below is 10^0.1 ≈ 1.2589
 * apart, the LogMAR progression an optotype chart is built on, so the sizes on
 * this page descend exactly as the rows of a real chart do.
 *
 * The face is Inter Tight, self-hosted, at 18px base. It is a variable grotesk
 * drawn for screen text at tight measures, with the disambiguating shapes this
 * site needs — a tailed l, a serifed I and a flat-topped 1 — so l, I and 1 stay
 * apart at the small end of the ladder. There is no second family: the display,
 * body and gauge voices are one face at three treatments. The subsets carried
 * here are latin, latin-ext, cyrillic and cyrillic-ext, so the Ukrainian pages
 * are set in the same face as the Polish ones rather than falling back.
 *
 * Themes are tokens on the root element. The bare :root is the light theme;
 * [data-theme="dark"] and [data-theme="contrast"] swap the tokens and nothing
 * else. The inline script in the shell stamps the attribute before first paint,
 * and the media queries cover the reader with no stored choice. A colour that
 * exists in only one theme's block is a bug — every token is declared here.
 *
 * Contrast: every ink/ground pair in the light and dark themes is at or above
 * 7:1; the contrast theme is black, white and one yellow, the palette a person
 * with low vision most often asks for. Status is never carried by hue alone —
 * every state chip also carries a drawn shape (square / triangle / diamond /
 * circle / hollow), so it survives a monochrome screen and a colour-blind eye.
 */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/inter-tight-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* The LogMAR ladder: each step 10^0.1 from the one below it. */
  --t-2: .630rem;
  --t-1: .794rem;
  --t0: 1rem;
  --t1: 1.259rem;
  --t2: 1.585rem;
  --t3: 1.995rem;
  --t4: 2.512rem;
  --t5: 3.162rem;
  --t6: 3.981rem;
  --t7: 5.012rem;

  --paper: #ffffff;
  --field: #eef0f2;
  --ink: #0b0b0c;
  --ink-2: #54585e;
  --rule: #c8ccd2;
  --rule-2: #0b0b0c;
  --mark: #ffd400;
  --mark-ink: #0b0b0c;
  --accent: #0b0b0c;
  --accent-ink: #ffffff;
  --accent-field: #eef0f2;
  --figure: #5b21b6;
  --ok: #0a5c2e;
  --ok-field: #e2f1e9;
  --warn: #7a4b00;
  --warn-field: #fdefd8;
  --bad: #a81208;
  --bad-field: #fbe7e5;
  --focus: #0b0b0c;
  --focus-halo: #ffd400;
  --foot-bg: #0b0b0c;
  --foot-ink: #f2f3f5;
  --foot-mute: #aeb3ba;
  --foot-rule: #3a3d43;
  --plate-ink: grayscale(1) contrast(1.06);
  --shadow: none;
  --radius: 0px;
  /* The air between two chapters of a page. A chart is mostly paper: the rows
     are legible because of what is NOT printed around them, and these blocks
     now open with headings a rung under the headline, which need the same room.
     One token, two values, so the rhythm cannot drift between components. */
  --block-gap: 5rem;
  --font: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* The dark theme is the same chart under a lamp: the paper goes to ink, the
   ink to paper, and the yellow survives untouched because it is the one colour
   that reads on both grounds. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="contrast"]) {
    color-scheme: dark;
    --paper: #0b0b0c;
    --field: #17181b;
    --ink: #f2f3f5;
    --ink-2: #a3a8b0;
    --rule: #33363c;
    --rule-2: #f2f3f5;
    --accent: #f2f3f5;
    --accent-ink: #0b0b0c;
    --accent-field: #17181b;
    --figure: #b79cff;
    --ok: #5fd898;
    --ok-field: #0f2a1c;
    --warn: #ffc46b;
    --warn-field: #2e2208;
    --bad: #ff8d81;
    --bad-field: #33120f;
    --focus: #ffd400;
    --focus-halo: #0b0b0c;
    --foot-bg: #17181b;
    --foot-ink: #f2f3f5;
    --foot-mute: #a3a8b0;
    --foot-rule: #33363c;
    --plate-ink: grayscale(1) contrast(1.05) brightness(.86);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b0b0c;
  --field: #17181b;
  --ink: #f2f3f5;
  --ink-2: #a3a8b0;
  --rule: #33363c;
  --rule-2: #f2f3f5;
  --accent: #f2f3f5;
  --accent-ink: #0b0b0c;
  --accent-field: #17181b;
  --figure: #b79cff;
  --ok: #5fd898;
  --ok-field: #0f2a1c;
  --warn: #ffc46b;
  --warn-field: #2e2208;
  --bad: #ff8d81;
  --bad-field: #33120f;
  --focus: #ffd400;
  --focus-halo: #0b0b0c;
  --foot-bg: #17181b;
  --foot-ink: #f2f3f5;
  --foot-mute: #a3a8b0;
  --foot-rule: #33363c;
  --plate-ink: grayscale(1) contrast(1.05) brightness(.86);
}

/* The contrast theme is not an exception here — it is the same chart at its
   limit: black, white, and the marker yellow that was already the accent. */
@media (prefers-contrast: more) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --paper: #000000;
    --field: #000000;
    --ink: #ffffff;
    --ink-2: #ffffff;
    --rule: #ffffff;
    --rule-2: #ffffff;
    --accent: #ffd400;
    --accent-ink: #000000;
    --accent-field: #000000;
    --figure: #ffd400;
    --ok: #7fff9f;
    --ok-field: #000000;
    --warn: #ffe066;
    --warn-field: #000000;
    --bad: #ff8d81;
    --bad-field: #000000;
    --focus: #ffd400;
    --focus-halo: #000000;
    --foot-bg: #000000;
    --foot-ink: #ffffff;
    --foot-mute: #ffffff;
    --foot-rule: #ffffff;
    --plate-ink: grayscale(1) contrast(1.45);
  }
}
:root[data-theme="contrast"] {
  color-scheme: dark;
  --paper: #000000;
  --field: #000000;
  --ink: #ffffff;
  --ink-2: #ffffff;
  --rule: #ffffff;
  --rule-2: #ffffff;
  --accent: #ffd400;
  --accent-ink: #000000;
  --accent-field: #000000;
  --figure: #ffd400;
  --ok: #7fff9f;
  --ok-field: #000000;
  --warn: #ffe066;
  --warn-field: #000000;
  --bad: #ff8d81;
  --bad-field: #000000;
  --focus: #ffd400;
  --focus-halo: #000000;
  --foot-bg: #000000;
  --foot-ink: #ffffff;
  --foot-mute: #ffffff;
  --foot-rule: #ffffff;
  --plate-ink: grayscale(1) contrast(1.45);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scrollbar-color: var(--ink-2) var(--field);
  scrollbar-width: thin;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
::selection { background: var(--mark); color: var(--mark-ink); }
[hidden] { display: none !important; }

/* The focus ring is the brand's two colours: an ink rule inside a marker halo
   in the light theme, and the pair inverted in the dark and contrast themes.
   It is 3px because a hairline ring on a hairline design would vanish. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }
[data-theme="contrast"] :focus-visible { outline-width: 4px; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
}
.prose a:not(.btn):not(.card-link):hover {
  background: var(--mark);
  color: var(--mark-ink);
  text-decoration-color: var(--mark-ink);
}

h1, h2, h3, h4 { line-height: 1.14; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(var(--t3), 1.5rem + 2.6vw, var(--t5)); }
h2 { font-size: clamp(var(--t2), 1.2rem + 1.3vw, var(--t3)); margin-top: 2.8rem; }
h3 { font-size: var(--t1); margin-top: 2rem; letter-spacing: -.015em; }
h4 { font-size: var(--t0); margin-top: 1.5rem; letter-spacing: 0; }
p, ul, ol, dl, table, pre, blockquote, figure { margin: 0 0 1.15rem; }
h1 + p, h1 + ul, h1 + ol, h1 + div { margin-top: 1.1rem; }
h2 + p, h3 + p, h4 + p, h2 + ul, h3 + ul, h2 + ol, h3 + ol { margin-top: .8rem; }
ul, ol { padding-left: 1.4rem; }
li + li { margin-top: .4rem; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--field); padding: .1em .35em; }
/* A key is drawn as a key: the same ground as code, closed by a rule along the
   bottom edge — a printed keycap, with the square corners everything here has. */
kbd { background: var(--field); padding: .1em .4em; box-shadow: inset 0 -2px 0 var(--rule); }
pre { background: var(--field); border: 1px solid var(--rule); padding: 1rem; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; }
strong, b { font-weight: 800; }
small, .small { font-size: var(--t-1); }
hr { border: 0; border-top: 2px solid var(--rule-2); margin: 3rem 0; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
blockquote { margin-left: 0; padding-left: 1.2rem; border-left: 1px solid var(--rule-2); }
blockquote cite { display: block; color: var(--ink-2); font-style: normal; margin-top: .4rem; font-size: var(--t-1); }
button { font: inherit; }
figure { margin-inline: 0; }
.wrap { width: min(100% - 2.5rem, 78rem); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The gauge voice: the small ruled labels in a chart's margin. One face, wide
   tracking, tabular figures — used for every label that measures something. */
.foot-h, .rail summary, .law .art, .plate figcaption, .pill, .measure dt, .gauge {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* The same voice without the capitals, for gauge labels that run to a full
   sentence — a statute citation set in all caps is a legibility problem, and
   this site does not get to make that mistake. */
.eyebrow, .stat .l, .finding .basis {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- skip link */
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .8rem 1.2rem; background: var(--ink); color: var(--paper); font-weight: 800; }
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- header */
.site-head { position: relative; background: var(--paper); border-bottom: 2px solid var(--rule-2); }
@media (min-width: 64rem) { .site-head { position: sticky; top: 0; z-index: 60; } }
/* A shade more paper once the page is wide enough to show a whole break at
   once: 90px on a phone, 100px here. Both are deliberate round numbers rather
   than rungs of the type ladder — this is the space between chapters, not a
   size, and it was set by eye against the enlarged section headings. */
@media (min-width: 64rem) { :root { --block-gap: 5.556rem; } }

/* The measuring edge: the ruler printed along the top of the chart. Minor
   ticks every 8px, a major tick every 40px. */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 40px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 8px) 0 0 / 100% 3px no-repeat;
}
.head-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; min-height: 4.4rem; padding-block: .9rem .6rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 800; font-size: var(--t1); letter-spacing: -.03em; }
.brand-mark { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink); }
.brand:hover .brand-mark { color: var(--mark-ink); background: var(--mark); }
.brand-word b { font-weight: 800; box-shadow: inset 0 -.34em 0 var(--mark); }
.brand-tld { color: var(--ink-2); font-weight: 600; }
.site-nav { flex: 1 1 auto; }
/* `center`, not `stretch`: stretched list items left the links sitting at the
   top of a row whose height the CTA button sets, so the menu's text rode about
   10px above the wordmark's and the button's. Centred, all three optical
   centres land within half a pixel of each other. */
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.nav-list li { margin: 0; }
/* The 3px hover rule lives on the bottom edge only, so a matching transparent
   top border keeps the box symmetrical — otherwise centring the box leaves the
   lettering sitting 1.5px high against the wordmark and the button. */
.nav-list a:not(.btn) { display: inline-block; padding: .5rem .55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--t-1) ; letter-spacing: .02em; border-block: 3px solid transparent; }
.nav-list a:not(.btn):hover { border-bottom-color: var(--rule-2); }
.nav-list a:not(.btn)[aria-current="page"] { background: var(--mark); color: var(--mark-ink); border-bottom-color: var(--rule-2); }
.nav-list .btn[aria-current="page"] { background: var(--mark); color: var(--mark-ink); border-color: var(--rule-2); box-shadow: inset 0 -5px 0 var(--ink); }
.nav-group { position: relative; }
.nav-group summary { list-style: none; cursor: pointer; padding: .5rem .55rem; font-weight: 700; font-size: var(--t-1); letter-spacing: .02em; display: inline-flex; align-items: center; gap: .4rem; border-block: 3px solid transparent; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.15em); }
.nav-group[open] summary::after { transform: rotate(225deg) translateY(-.05em); }
.nav-group summary:hover, .nav-group[open] summary { border-bottom-color: var(--rule-2); }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group li { margin: 0; }
.nav-group ul a { display: block; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.nav-group ul li:last-child a { border-bottom: 0; }
.nav-cta { margin-left: .5rem; display: flex; align-items: center; }
.menu-btn { display: none; }

@media (min-width: 64rem) {
  .nav-group ul { position: absolute; top: calc(100% + .6rem); left: 0; min-width: 17rem; background: var(--paper); border: 2px solid var(--rule-2); z-index: 30; }
  .nav-group ul a { padding-inline: .8rem; }
}
@media (max-width: 63.99rem) {
  .menu-btn { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; padding: .5rem .8rem; background: var(--paper); color: var(--ink); border: 2px solid var(--rule-2); font-weight: 800; font-size: var(--t-1); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
  .menu-bars { width: 1.2rem; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .site-nav { flex-basis: 100%; display: none; }
  .site-nav.is-open { display: block; border-top: 1px solid var(--rule); padding-top: .4rem; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-block: .3rem; }
  .nav-list > li > a:not(.btn), .nav-group summary { display: block; width: 100%; border-bottom: 1px solid var(--rule); }
  .nav-group ul { padding-left: 1.2rem; }
  .nav-cta { margin: .6rem 0 .2rem; }
  .nav-cta .btn { width: 100%; }
  /* Three tools abreast only while the labels fit. German ("Darstellung",
     "Sprache") and Ukrainian are longer than the Polish, and a fixed
     three-column grid pushed them out of their own boxes and the viewport —
     so the row wraps instead of overflowing. */
  .head-row .tools { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .4rem; }
  .head-row .tool, .head-row .picker summary { width: 100%; min-width: 0; justify-content: center; text-align: center; }
  .head-row .tool span, .head-row .picker summary span { min-width: 0; overflow-wrap: break-word; }
  .head-row .picker { width: 100%; }
  /* The picker menus are handled after the toolbar's own rules, below. */
}
@media (max-width: 30rem) {
  .brand { font-size: var(--t0); }
  .head-row { gap: .7rem; }
}

/* the toolbar: read aloud, theme, language */
.tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font-weight: 700; font-size: var(--t-1); letter-spacing: .04em; cursor: pointer; }
.tool:hover { background: var(--mark); color: var(--mark-ink); }
.tool svg { width: 1.05rem; height: 1.05rem; flex: none; }
.listen[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.listen[aria-pressed="true"]:hover { background: var(--mark); color: var(--mark-ink); }
.listen .ic-stop { display: none; }
.listen[aria-pressed="true"] .ic-play { display: none; }
.listen[aria-pressed="true"] .ic-stop { display: block; }
.picker { position: relative; padding: 0; border: 0; }
.picker summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; border: 1px solid var(--rule-2); cursor: pointer; font-weight: 700; font-size: var(--t-1); letter-spacing: .04em; }
.picker summary::-webkit-details-marker { display: none; }
.picker summary:hover { background: var(--mark); color: var(--mark-ink); }
.picker[open] summary { background: var(--ink); color: var(--paper); }
.picker-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; min-width: 13rem; margin: 0; padding: 0; list-style: none; background: var(--paper); border: 2px solid var(--rule-2); display: grid; }
.picker-menu li { margin: 0; }
.picker-menu button, .picker-menu a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; text-align: left; padding: .6rem .8rem; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-decoration: none; font-weight: 700; cursor: pointer; }
.picker-menu li:last-child a, .picker-menu button:last-child { border-bottom: 0; }
.picker-menu button:hover, .picker-menu a:hover { background: var(--mark); color: var(--mark-ink); }
.picker-menu button[aria-pressed="true"], .picker-menu a[aria-current="true"] { background: var(--ink); color: var(--paper); }
/* the "chosen" mark, drawn rather than typed: a tick built from two borders */
.picker-menu button[aria-pressed="true"]::after, .picker-menu a[aria-current="true"]::after {
  content: ""; width: .5rem; height: .85rem; flex: none;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-.15em);
}

/* On a phone the two menus drop as one full-width panel under the header
   instead of out of a 150px-wide button. This has to come after the toolbar's
   own rules above, not with the rest of the narrow-screen header block, which
   sits earlier in the file and would lose the cascade.

   It is also a correctness fix, not only a layout one: Chrome keeps a closed
   <details> in the layout tree (content-visibility: hidden), so a menu anchored
   to its own button widens the page's scrollable area while it is still shut —
   a horizontal scrollbar nobody asked for, worst in German and Ukrainian where
   the buttons sit furthest right. Anchoring to .site-head, the nearest
   positioned ancestor, removes the overflow at its source. */
@media (max-width: 63.99rem) {
  .picker { position: static; }
  .picker-menu { left: 1.25rem; right: 1.25rem; top: calc(100% + .4rem); min-width: 0; }
}

/* ----------------------------------------------------------------- layout */
.main { padding-block: 2.5rem 4.5rem; }
.main:focus { outline: none; box-shadow: none; }
.layout { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72rem) {
  .layout:has(.rail) { grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  .rail { position: sticky; top: 6.5rem; }
}
/* A word longer than the column breaks rather than pushing the page sideways.
   WCAG 1.4.10 asks for 320px with no horizontal scrolling, and ONE unbreakable
   word is enough to fail it — which this site did, at 336px against a 320px
   viewport, on the h3 "Czy jestem mikroprzedsiębiorcą?" inside a .steps list.
   Three of the four languages here build words like that as a matter of course:
   Polish inflects them, German compounds them, Ukrainian does both. `break-word`
   rather than `anywhere`, so a word only breaks when it genuinely cannot fit. */
.prose { max-width: 70ch; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.kind-landing .prose, .kind-tool .prose { max-width: none; }
.notice { padding: .9rem 1.1rem; background: var(--warn-field); border: 1px solid var(--warn); color: var(--ink); font-weight: 700; margin-bottom: 2rem; }

/* The page rail is the chart's row index: how far down the reader has got. */
.rail { font-size: var(--t-1); }
.rail summary { color: var(--ink-2); margin: 0 0 .8rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.rail summary::-webkit-details-marker { display: none; }
.rail summary::before { content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.rail details[open] summary::before { transform: rotate(45deg); }
.rail details { border: 1px solid var(--rule); padding: .7rem .9rem; }
@media (min-width: 72rem) { .rail details { border: 0; border-top: 2px solid var(--rule-2); padding: .8rem 0 0; } }
/* Set by the head script before first paint on a narrow screen, cleared by
   site.js in the same task as it sets the details' own `open` state. It exists
   so the article is laid out beside a folded rail from the very first frame. */
.rail-fold .rail details > ol { display: none; }
.rail-fold .rail details > summary::before { transform: rotate(-45deg); }
.rail ol { list-style: none; margin: 0; padding: 0; counter-reset: line; }
.rail li { margin: 0; counter-increment: line; }
.rail a {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .5rem;
  padding: .4rem 0; color: var(--ink); text-decoration: none; line-height: 1.35;
  border-top: 1px solid var(--rule);
}
.rail li:first-child a { border-top: 0; }
.rail a::before { content: counter(line, decimal-leading-zero); color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 700; }
.rail a:hover { background: var(--field); }
.rail a.is-here { background: var(--mark); color: var(--mark-ink); }
.rail a.is-here::before { color: var(--mark-ink); }

/* --------------------------------------------------------- the photo plate */
/* One photograph per article, printed in the chart's single ink. The yellow
   rule under it is the same marker that runs through the rest of the page. */
.plate { margin: 0 0 2.8rem; }
.plate img {
  display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover;
  filter: var(--plate-ink);
  border: 2px solid var(--rule-2); border-bottom-width: 0;
  background: var(--field);
}
.plate figcaption {
  color: var(--ink-2); background: var(--paper);
  border: 2px solid var(--rule-2); border-top: 0;
  border-bottom: 6px solid var(--mark);
  padding: .5rem .8rem;
}

/* ------------------------------------------------------------- components */
.lead { font-size: var(--t1); line-height: 1.5; }
.eyebrow { display: block; color: var(--ink-2); margin: 0 0 .5rem; }
.muted { color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.2rem; min-height: 2.9rem;
  border: 2px solid var(--rule-2); background: var(--paper); color: var(--ink);
  font-weight: 800; text-decoration: none; cursor: pointer; letter-spacing: -.01em;
}
.btn:hover { background: var(--mark); color: var(--mark-ink); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: inset 0 -5px 0 var(--mark); }
.btn-primary:hover { background: var(--mark); color: var(--mark-ink); box-shadow: inset 0 -5px 0 var(--ink); }
.btn-big { font-size: var(--t1); padding: .9rem 1.5rem; min-height: 3.4rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
[data-theme="contrast"] .btn:hover { text-decoration: underline; }

/* A quoted provision: a printed plate with the article stamped into its head. */
.law { margin: 2rem 0; padding: 1.1rem 1.3rem 1.2rem; border: 2px solid var(--rule-2); background: var(--paper); }
.law .art { display: inline-block; background: var(--ink); color: var(--paper); padding: .25rem .6rem; margin-bottom: .8rem; letter-spacing: .1em; }
.law p:last-child { margin-bottom: 0; }
.law cite { display: block; font-style: normal; font-size: var(--t-1); color: var(--ink-2); margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rule); }

/* A callout is a plate with a coloured head rule — never a thick side bar. */
.callout { margin: 2rem 0; padding: 1.1rem 1.2rem; background: var(--field); border: 1px solid var(--rule); border-top: 5px solid var(--ink); }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3 { margin-top: 0; }
.callout-ok { background: var(--ok-field); border-color: var(--ok); border-top-color: var(--ok); }
.callout-warn { background: var(--warn-field); border-color: var(--warn); border-top-color: var(--warn); }
.callout-bad { background: var(--bad-field); border-color: var(--bad); border-top-color: var(--bad); }

.deadline { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin: 2rem 0; padding: 1rem 0; border-block: 2px solid var(--rule-2); }
.deadline .date { font-size: var(--t3); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deadline p { margin: 0; flex: 1 1 16rem; }

/* A ruled index, not a deck of cards: hairlines separate, nothing floats. */
/* `min(Nrem, 100%)` everywhere below, never a bare `Nrem`: a minimum track
   wider than the container does not collapse, it overflows — which on a 360px
   phone is a horizontal scrollbar on every page that carries a two-up field. */
/* The column divider is a box-shadow, not a border-right, and every ruled
   field clips its own overflow. The shadow sits just outside the cell, so the
   last column's divider falls outside the container and is clipped away — and
   when `auto-fit` collapses a field to one column, every cell is the last
   column, so the stray line down the right edge on a phone disappears by
   itself. No breakpoint has to know where each field happens to collapse. */
.grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); margin: 2rem 0; border-top: 2px solid var(--rule-2); overflow: hidden; }
.card { padding: 1.2rem 1.3rem 1.4rem; background: none; border-bottom: 1px solid var(--rule); }
.grid > .card { box-shadow: 1px 0 0 var(--rule); }
.card h2, .card h3 { margin-top: 0; font-size: var(--t1); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-link { display: block; color: var(--ink); text-decoration: none; }
.card-link h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.card-link:hover { background: var(--field); }
.card-link:hover h3 { background: var(--mark); color: var(--mark-ink); box-shadow: 0 0 0 .2em var(--mark); }
.card-num { font-size: var(--t3); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
/* The four cases the act draws its line between are the second field of four on
   the home page, and they are read the same way the key figures are: as a set to
   choose from, not as a row of columns. So they take the same 2×2 field, with
   the heading a rung further up the ladder to match the extra room. The layout
   is asked for by name — a `.grid` of four does not get it automatically,
   because most grids on this site are lists rather than choices. */
.grid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-pair > .card { padding: 1.8rem 1.8rem 1.9rem; }
/* An odd last card runs the full width instead of leaving a ruled cell empty:
   a field with a hole in it reads as a missing item, not as a set that ends. */
.grid-pair > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid-pair .card h3 { font-size: var(--t2); letter-spacing: -.025em; }
.grid-pair .card p { margin-top: .8rem; }
@media (max-width: 46rem) {
  .grid-pair { grid-template-columns: minmax(0, 1fr); }
  .grid-pair > .card { padding: 1.4rem 1.2rem 1.5rem; }
}

.table-wrap { overflow-x: auto; margin: 2rem 0; border-top: 2px solid var(--rule-2); border-bottom: 2px solid var(--rule-2); }
table { width: 100%; border-collapse: collapse; margin: 0; }
th, td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 800; border-bottom: 2px solid var(--rule-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--field); }
caption { text-align: left; padding: .6rem .8rem; font-weight: 800; caption-side: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Steps: the numeral is set at chart scale and does the teaching. */
.steps { list-style: none; padding: 0; counter-reset: step; margin: 2rem 0; }
.steps > li { position: relative; padding: 1.1rem 0 1.2rem 4.6rem; margin: 0; counter-increment: step; border-top: 1px solid var(--rule); }
.steps > li:last-child { border-bottom: 1px solid var(--rule); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .9rem;
  font-size: var(--t2); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.steps h3 { margin-top: 0; }
.steps p:last-child { margin-bottom: 0; }
/* The number is set at --t2 and needs its column; the text does not need to
   start that far in on a 320px screen, where 4.6rem is a quarter of the width.
   Measured: "mikroprzedsiębiorcą?" wants 231px and had 192px. */
@media (max-width: 26rem) { .steps > li { padding-left: 3.2rem; } }

/* A state chip carries a drawn shape as well as a colour, so it still reads
   in one ink, on a monochrome screen, and to a colour-blind eye. */
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .55rem; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); line-height: 1.5; white-space: nowrap; }
.pill::before { content: ""; width: .6rem; height: .6rem; flex: none; background: currentColor; }
.pill-ok { background: var(--ok-field); border-color: var(--ok); color: var(--ok); }
.pill-warn { background: var(--warn-field); border-color: var(--warn); color: var(--warn); }
.pill-warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pill-bad { background: var(--bad-field); border-color: var(--bad); color: var(--bad); }
.pill-bad::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pill-info { background: var(--accent-field); border-color: var(--rule-2); color: var(--ink); }
.pill-info::before { border-radius: 50%; }
.pill-muted { background: var(--field); border-color: var(--ink-2); color: var(--ink-2); }
.pill-muted::before { background: none; box-shadow: inset 0 0 0 2px currentColor; }

/* Disclosure rows. The plus and minus are drawn from two rules, never typed. */
.faq details, .acc details { border: 0; border-top: 1px solid var(--rule); background: none; margin: 0; }
.faq details:last-of-type, .acc details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary, .acc summary { padding: .95rem 0; font-weight: 800; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; }
.faq summary::-webkit-details-marker, .acc summary::-webkit-details-marker { display: none; }
.faq summary:hover, .acc summary:hover { color: var(--ink); background: var(--field); box-shadow: 0 0 0 .5rem var(--field); }
.faq summary::after, .acc summary::after {
  content: ""; width: 1rem; height: 1rem; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 1rem 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 1rem no-repeat;
}
.faq details[open] summary::after, .acc details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 1rem 2px no-repeat;
}
.faq details > :not(summary), .acc details > :not(summary) { margin-right: 2.5rem; }
.faq details > :last-child, .acc details > :last-child { margin-bottom: 1.2rem; }

.check-list { list-style: none; padding: 0; }
.check-list li { padding-left: 1.8rem; position: relative; }
.check-list li::before { content: ""; position: absolute; left: .25rem; top: .35em; width: .5rem; height: .85rem; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check-list.bad li::before {
  left: 0; top: .3em; width: .9rem; height: .9rem; border: 0; transform: none;
  background:
    linear-gradient(45deg, transparent 43%, var(--bad) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--bad) 43% 57%, transparent 57%);
}

.compare { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin: 2rem 0; border-top: 2px solid var(--rule-2); overflow: hidden; }
.compare .card { box-shadow: 1px 0 0 var(--rule); }
.compare .card h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

figure.demo { margin: 2rem 0; padding: 1.1rem; border: 1px dashed var(--ink-2); background: var(--field); }
figure.demo figcaption { font-size: var(--t-1); color: var(--ink-2); margin-top: .7rem; }

/* ------------------------------------------------------------------ hero */
/* The chart's first rows: each line ruled, each with a tick in the margin
   whose length measures that line's type size — the gauge of a real chart. */
.hero { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); padding: 0 0 1rem; }
@media (min-width: 62rem) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(21rem, .7fr); gap: 3.5rem; align-items: start; }
}
.hero > div:first-child { position: relative; }
.hero > div:first-child > * { position: relative; margin: 0; padding: 1rem 0; border-top: 1px solid var(--rule); }
.hero > div:first-child > :first-child { border-top: 2px solid var(--rule-2); }
.hero > div:first-child > :last-child { border-bottom: 2px solid var(--rule-2); display: flex; flex-wrap: wrap; gap: .7rem; }
.hero h1 { font-size: clamp(var(--t3), 1.3rem + 4.2vw, var(--t7)); letter-spacing: -.035em; }
/* The deck line under the headline: the row that carries the date. One rung
   below the headline on the ladder and two above the lead, so the three text
   rows read as a descending chart rather than as three paragraphs. */
.hero-sub { font-size: clamp(var(--t1), .8rem + 1.7vw, var(--t3)); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; max-width: 24ch; text-wrap: balance; }
.hero .lead { max-width: 58ch; color: var(--ink); }

@media (min-width: 48rem) {
  .hero > div:first-child > * { padding-left: 4.5rem; }
  .hero > div:first-child::after { content: ""; position: absolute; left: 3.4rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
  .hero > div:first-child > *::before { content: ""; position: absolute; left: 0; top: 1.55rem; height: 2px; background: var(--rule-2); }
  /* Each tick measures the row beside it, so the gauge descends with the type. */
  .hero > div:first-child > :nth-child(1)::before { width: .8rem; }
  .hero > div:first-child > :nth-child(2)::before { width: 2.8rem; }
  .hero > div:first-child > :nth-child(3)::before { width: 1.9rem; }
  .hero > div:first-child > :nth-child(4)::before { width: 1.4rem; }
  .hero > div:first-child > :nth-child(5)::before { width: 1rem; }
}

/* The one authored moment: the chart coming into focus, top row first. */
@media (prefers-reduced-motion: no-preference) {
  .hero > div:first-child > * { animation: focus-in .75s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero > div:first-child > :nth-child(1) { animation-delay: 0s; }
  .hero > div:first-child > :nth-child(2) { animation-delay: .09s; }
  .hero > div:first-child > :nth-child(3) { animation-delay: .18s; }
  .hero > div:first-child > :nth-child(4) { animation-delay: .27s; }
  .hero > div:first-child > :nth-child(5) { animation-delay: .36s; }
  .quick { animation: focus-in .75s .43s cubic-bezier(.16, 1, .3, 1) backwards; }
}
@keyframes focus-in {
  from { filter: blur(9px); opacity: .3; }
  to { filter: blur(0); opacity: 1; }
}

/* The test card: a framed instrument with registration corners and one blank. */
.quick { position: relative; padding: 1.7rem 1.5rem 1.5rem; background: var(--paper); border: 2px solid var(--rule-2); }
.quick::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--rule-2), var(--rule-2)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 100% 100% / 2px 14px no-repeat;
}
.quick > * { position: relative; }
.quick h2 { margin: 0 0 1.1rem; font-size: var(--t1); padding-bottom: .7rem; border-bottom: 2px solid var(--rule-2); }
.quick .btn { width: 100%; }
.quick .hint { color: var(--ink-2); font-size: var(--t-1); margin: .9rem 0 0; line-height: 1.5; letter-spacing: 0; text-transform: none; }

/* The measurement strip: the act's own numbers, ruled and ticked — and the one
   place on the site that is read from across the room rather than up close, so
   it is set as a 2×2 field of four large figures instead of a thin four-across
   band. Each figure is opened by a drawn mark: an SVG geometry mask painted
   with --figure, never a glyph, an emoji or an icon font, which is the same
   refusal the pills and the disclosure make. The mark is decorative and carries
   no meaning the figure and its label do not already carry, so a reader who
   never sees it loses nothing. */
.stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 3rem 0;
  border-top: 2px solid var(--rule-2);
  border-bottom: 2px solid var(--rule-2);
  overflow: hidden;
}
/* Each cell draws its own right and bottom hairline; the container clips the
   two that would fall on its outer edge, so the field is divided from within
   and never boxed. */
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  container-type: inline-size;
  column-gap: 1.15rem;
  padding: 2rem 1.9rem 2.1rem;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}
.stat::before {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: span 2;
  align-self: center;
  justify-self: start;
  width: 1.6rem;
  height: 3px;
  background: var(--rule-2);
}
/* A stat that names its mark gets the drawn one in place of the plain tick;
   one that does not keeps the tick, so a new figure can never render as a
   blank violet square. */
.stat[class*="stat-"]::before {
  /* Pinned to the top row rather than centred, so the mark sits beside the
     figure whether the label below it runs to one line or three. */
  align-self: start;
  margin-top: .1rem;
  width: 3.3rem;
  height: 3.3rem;
  width: clamp(2.4rem, 8.6cqi, 3.3rem);
  height: clamp(2.4rem, 8.6cqi, 3.3rem);
  background: var(--figure);
  -webkit-mask: var(--mark-icon) center / contain no-repeat;
  mask: var(--mark-icon) center / contain no-repeat;
}
.stat-date { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 6h18v15H3z'/%3E%3Cpath d='M3 11h18M8 3v5M16 3v5'/%3E%3Cpath d='M7 14h4v4H7z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.stat-fine { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M2 6h20v12H2z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M6 12h1M17 12h1'/%3E%3C/svg%3E"); }
.stat-clock { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.4V12l4.6 2.9'/%3E%3C/svg%3E"); }
.stat-deadline { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 3h14M5 21h14M18 3v4.2L12 12l6 4.8V21M6 3v4.2L12 12l-6 4.8V21'/%3E%3C/svg%3E"); }
.stat-scale { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3Cpath d='M8.4 8.4l7.2 7.2M15.6 8.4l-7.2 7.2'/%3E%3C/svg%3E"); }
.stat-share { --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3.5 3.5h6v6h-6zM14.5 14.5h6v6h-6zM20 4L4 20'/%3E%3C/svg%3E"); }
/* The figure is measured against its own cell, not the window: the same block
   sits in the full-width hero and in the narrow column beside an article rail,
   and a figure that wraps mid-number reads as two numbers. The plain rung comes
   first so a browser without container queries still gets the large size. */
.stat .n { display: block; grid-column: 2; font-size: var(--t4); font-size: clamp(var(--t2), 6.2cqi, var(--t4)); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .l { display: block; grid-column: 2; font-size: var(--t0); color: var(--ink-2); margin-top: .55rem; letter-spacing: .02em; line-height: 1.45; }
/* A phone gets the four figures stacked: two columns of this weight on a narrow
   screen would set the numbers smaller than the body text they outrank. */
@media (max-width: 46rem) {
  .stats { grid-template-columns: minmax(0, 1fr); margin: 2.5rem 0; }
  .stat { padding: 1.5rem 1.2rem 1.6rem; column-gap: 1rem; }
  .stat[class*="stat-"]::before { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 26rem) {
  .stat[class*="stat-"]::before { width: 2rem; height: 2rem; }
  .stat .l { font-size: var(--t-1); }
}
.section { margin-top: var(--block-gap); }
/* The key figures are a block of the page in their own right, so the field of
   four takes the same break above it as a section does. */
.prose > .stats { margin-top: var(--block-gap); }
/* A section heading opens a whole chapter of the page, not a paragraph of one,
   so it is set one rung under the headline rather than three: on the chart the
   reader is meant to see these four rows from across the room, and a 2px rule
   above a heading that reads at body scale looks like a divider, not a title. */
.section > h2 {
  margin-top: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--rule-2);
  font-size: clamp(var(--t3), 1.2rem + 3.1vw, var(--t6));
  letter-spacing: -.03em;
}

/* The reading list that closes an article. Its label is set in the margin-gauge
   voice rather than as a heading, because it names a shelf, not a chapter — the
   three destinations are the loud part, at card-title size, in a ruled field
   like every other set of choices on this site. */
.related { margin-top: var(--block-gap); border-top: 2px solid var(--rule-2); padding-top: .9rem; }
.related h2 {
  margin: 0;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.related ul {
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  border-top: 1px solid var(--rule);
}
.related li { margin: 0; padding: .9rem 1.1rem 1rem 0; box-shadow: 1px 0 0 var(--rule); }
.related a { font-size: var(--t1); font-weight: 800; letter-spacing: -.02em; }

/* ------------------------------------------------------------- the offer */
/* The two things we sell, above the footer on every page that is not a legal
   page, the contact form or a 404. It is the only block on the site allowed to
   open with a marker rule at full width — that band is what marks it as the
   page's last and largest claim on the reader, and nothing else gets one. */
.duo { margin-top: var(--block-gap); border-top: 3px solid var(--rule-2); padding-top: 1.6rem; }
.duo > h2 { margin-top: 0; font-size: clamp(var(--t2), 1.2rem + 1.9vw, var(--t4)); }
.duo-lead { font-size: var(--t1); line-height: 1.5; max-width: 58ch; margin-top: .7rem; }
.duo-plates {
  display: grid; gap: 0; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  border-top: 8px solid var(--mark);
  border-bottom: 2px solid var(--rule-2);
  overflow: hidden;
}
.duo-plate { display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.8rem; box-shadow: 1px 0 0 var(--rule); }
.duo-label { display: inline-block; align-self: flex-start; margin: 0 0 .9rem; padding: .25rem .6rem; background: var(--ink); color: var(--paper); font-size: var(--t-1); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.duo-plate h3 { margin: 0 0 .6rem; font-size: var(--t2); }
.duo-plate > p { margin-bottom: 1.1rem; }
.duo-plate .check-list { flex: 1 1 auto; margin-bottom: 1.4rem; }
.duo-act { margin: 0; }
.duo-act .btn { width: 100%; }
.duo-note { margin-top: 1rem; color: var(--ink-2); font-size: var(--t-1); }

/* ----------------------------------------------------------------- forms */
.field { display: grid; gap: .4rem; margin-bottom: 1.2rem; }
.field label, .field .label { font-weight: 800; }
.field .help { font-size: var(--t-1); color: var(--ink-2); }
input[type="text"], input[type="url"], input[type="email"], input[type="number"], textarea, select {
  width: 100%; font: inherit; padding: .7rem .75rem; min-height: 2.9rem;
  color: var(--ink); background: var(--field);
  border: 0; border-bottom: 2px solid var(--rule-2); border-radius: 0;
  caret-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }
input:hover, textarea:hover, select:hover { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
textarea { min-height: 8rem; resize: vertical; }
.field-check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.2rem; }
.field-check input { width: 1.3rem; height: 1.3rem; margin: .2rem 0 0; flex: none; accent-color: var(--ink); }
.field-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.field-row input { flex: 1 1 14rem; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 1.2rem; padding: .9rem 1rem; border: 1px solid var(--rule); border-top: 5px solid var(--ink); background: var(--field); }
.form-msg.ok { border-color: var(--ok); border-top-color: var(--ok); background: var(--ok-field); }
.form-msg.bad { border-color: var(--bad); border-top-color: var(--bad); background: var(--bad-field); }
.form-msg:empty { display: none; }

/* -------------------------------------------------------------- analyzer */
.scan-status { display: flex; gap: 1rem; align-items: center; margin: 2rem 0; padding: 1rem 1.2rem; border: 2px solid var(--rule-2); background: var(--paper); }
.spinner { width: 1.6rem; height: 1.6rem; flex: none; border: 3px solid var(--rule); border-top-color: var(--ink); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.report { margin-top: 2.5rem; }
.report-head { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 1.5rem; border: 2px solid var(--rule-2); }
@media (min-width: 50rem) { .report-head { grid-template-columns: auto minmax(0, 1fr); } }
.report-head h2 { margin-top: 0; font-size: var(--t2); overflow-wrap: anywhere; }
.dial { width: 9rem; height: 9rem; position: relative; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 8; }
.dial .track { stroke: var(--rule); }
.dial .bar { stroke: var(--ink); stroke-linecap: butt; transition: stroke-dashoffset .8s ease; }
.dial .bar.g-a, .dial .bar.g-b { stroke: var(--ok); }
.dial .bar.g-c { stroke: var(--warn); }
.dial .bar.g-d, .dial .bar.g-e { stroke: var(--bad); }
.dial .val { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--t4); font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.dial .val small { display: block; font-size: var(--t-1); font-weight: 700; color: var(--ink-2); text-align: center; letter-spacing: .12em; text-transform: uppercase; }
.pad-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; font-weight: 800; border: 2px solid currentColor; margin-top: .6rem; }
.pad-badge::before { content: ""; width: .7rem; height: .7rem; background: currentColor; flex: none; }
.pad-ready { color: var(--ok); background: var(--ok-field); }
.pad-gaps { color: var(--warn); background: var(--warn-field); }
.pad-gaps::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pad-serious { color: var(--bad); background: var(--bad-field); }
.pad-serious::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.counts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }

/* A finding is a row in a report, not a card with a coloured spine. */
.finding { border: 0; border-top: 1px solid var(--rule); background: none; margin: 0; }
.finding:last-of-type { border-bottom: 1px solid var(--rule); }
.finding.s-critical, .finding.s-serious { background: var(--bad-field); }
.finding summary { padding: .9rem .8rem; cursor: pointer; list-style: none; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.finding summary::-webkit-details-marker { display: none; }
.finding summary:hover { background: var(--field); }
.finding summary .t { font-weight: 800; flex: 1 1 14rem; }
.finding .body { padding: 0 .8rem 1.2rem; }
.finding .body > :last-child { margin-bottom: 0; }
.finding .basis { color: var(--ink-2); letter-spacing: .06em; }
.finding .basis span, .finding .basis a { display: inline-block; margin-right: .9rem; }
.samples { list-style: none; padding: 0; margin: .7rem 0; display: grid; gap: 2px; }
.samples li { font-size: var(--t-1); padding: .45rem .6rem; background: var(--field); overflow-wrap: anywhere; }
.samples code { background: none; padding: 0; }
.swatch { display: inline-block; width: 1em; height: 1em; border: 1px solid var(--rule-2); vertical-align: -.15em; margin-right: .25em; }
.fix { margin-top: .9rem; padding: .9rem 1rem; background: var(--ok-field); border: 1px solid var(--ok); border-top: 5px solid var(--ok); }
.fix-locked { margin-top: .9rem; padding: .9rem 1rem; background: var(--field); border: 1px dashed var(--ink-2); font-size: var(--t-1); }
.fix-locked a { font-weight: 800; }
.acc-plain summary { cursor: pointer; font-weight: 800; padding: .6rem 0; }
.passed { columns: 2; column-gap: 2.5rem; }
@media (max-width: 40rem) { .passed { columns: 1; } }
.passed li { break-inside: avoid; }
.measure { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); margin: 1.2rem 0; border-top: 2px solid var(--rule-2); border-bottom: 2px solid var(--rule-2); overflow: hidden; }
.measure div { padding: .9rem 1rem; box-shadow: 1px 0 0 var(--rule); }
.measure dt { color: var(--ink-2); }
.measure dd { margin: .3rem 0 0; font-size: var(--t1); font-weight: 800; font-variant-numeric: tabular-nums; }
.shots { display: grid; gap: 1.2rem; grid-template-columns: 2fr 1fr; align-items: start; margin: 1.2rem 0; }
@media (max-width: 40rem) { .shots { grid-template-columns: 1fr; } }
.shots figure { margin: 0; }
.shots img { border: 2px solid var(--rule-2); background: #fff; }
.shots figcaption { font-size: var(--t-1); color: var(--ink-2); margin-top: .5rem; }
.profile dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; }
.profile dt { font-weight: 800; }
.profile dd { margin: 0; overflow-wrap: anywhere; }
.discovered ol { columns: 2; column-gap: 2.5rem; }
@media (max-width: 48rem) { .discovered ol { columns: 1; } }
.discovered li { break-inside: avoid; overflow-wrap: anywhere; }
.offer { margin-top: 3rem; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); border-top: 2px solid var(--rule-2); overflow: hidden; }
.offer .card { box-shadow: 1px 0 0 var(--rule); }
.offer .card.primary { background: var(--field); }
.offer .price { display: block; font-size: var(--t3); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.offer .total { font-size: var(--t2); font-weight: 800; font-variant-numeric: tabular-nums; }
.report-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 2rem 0; }

/* ------------------------------------------------------------- read aloud */
.is-reading { background: var(--mark); color: var(--mark-ink); box-shadow: 0 0 0 .2em var(--mark); }
[data-theme="contrast"] .is-reading { outline: 2px solid var(--ink); outline-offset: .2em; }

/* ---------------------------------------------------------------- footer */
/* The close is an inked plate: the chart printed in reverse at the foot. */
.site-foot { margin-top: 4rem; padding: 3.5rem 0 2.5rem; background: var(--foot-bg); color: var(--foot-ink); font-size: var(--t-1); border-top: 2px solid var(--rule-2); }
.site-foot a { color: var(--foot-ink); }
.site-foot a:hover { background: var(--mark); color: var(--mark-ink); text-decoration-color: var(--mark-ink); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .foot-grid { grid-template-columns: 1.1fr 2fr; } }
.foot-about p { max-width: 40ch; }
.foot-brand { font-weight: 800; font-size: var(--t1); margin-bottom: .6rem; letter-spacing: -.03em; }
.foot-brand b { box-shadow: inset 0 -.34em 0 var(--mark); }
.site-foot .btn { background: none; border-color: var(--foot-ink); color: var(--foot-ink); }
.site-foot .btn-primary { background: var(--foot-ink); color: var(--foot-bg); box-shadow: inset 0 -5px 0 var(--mark); }
.site-foot .btn:hover, .site-foot .btn-primary:hover { background: var(--mark); color: var(--mark-ink); border-color: var(--mark); box-shadow: none; }
.foot-nav { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.foot-h { color: var(--foot-mute); margin: 0 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--foot-rule); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0 0 .35rem; }
.foot-hint { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--foot-rule); color: var(--foot-mute); }
/* --t-1, not --t-2. Against the 18px root, --t-2 renders at 11.34px, and this
   site's own analyzer fails text under 12px against art. 12 ust. 2 pkt 1 lit. d
   — "a font of appropriate size". It was failing exactly here: the statutory
   notice, the contact address and the date the page was last true, which is the
   one block on the page that has to be legible by law. Contrast was never the
   problem (7.43:1 measured); the size was. --t-2 stays defined because it is a
   step on the ladder, not because anything is set in it. */
.foot-legal { font-size: var(--t-1); color: var(--foot-mute); line-height: 1.6; }
.foot-copy { font-size: var(--t-1); color: var(--foot-mute); margin: 0; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .spinner { animation: none; border-top-color: var(--ink); }
}

/* ----------------------------------------------------------------- print */
/* People print this site. It is a legal reference: a page gets taken into a
   meeting, filed with a quote, or handed to whoever owns the website. What
   comes out of the printer is a document, so it is set like one — and it has
   to survive leaving the browser, which means every link says where it went
   and the publisher's name is still on the paper.
   site.js opens every <details> on beforeprint; a collapsed FAQ prints blank. */
@media print {
  @page { margin: 18mm 16mm; }

  .site-head, .rail, .skip, .report-actions, .offer, .quick, .tools, .menu-btn,
  .plate, .related, .notice, .foot-grid, .foot-hint { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .prose { max-width: none; }
  a { color: #000; }

  /* A URL on paper is the only way back to the source. In-page anchors are
     left bare — "(#art-32)" on a sheet of paper points at nothing. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  a[href^="/"]::after { content: " (dostepnosc2025.pl" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a[href^="#"]::after, .toc a::after { content: none; }

  /* Nothing that reads as one object may be split across a page break, and a
     heading may never be the last line on a page. */
  h1, h2, h3, h4 { break-after: avoid; break-inside: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }
  .finding, .law, .callout, .card, .stat, figure, tr { break-inside: avoid; }
  thead { display: table-header-group; }

  /* The statutory notice and the credit line stay: a printed sheet has to say
     who published it and when it was last true. The rest of the footer is
     navigation, which paper cannot follow. */
  .site-foot { background: none; color: #000; border-top: 1px solid #000; margin-top: 2rem; padding: .8rem 0 0; }
  .site-foot a { color: #000; }
}