/* Prosto w prawo: jasny, spokojny interfejs. Dużo światła, jeden kolor marki,
   wyraźna hierarchia: tekst przepisu najwyżej, wyjaśnienie pod nim, treść
   od modelu oznaczona i wyciszona. Zasady: docs/brand.md. */

:root {
  --bg: #fcfcfa;
  --surface: #ffffff;
  --tint: #f4f5f1;
  --law-bg: #f6f7f3;
  --fg: #15181c;
  --text: #262b32;
  --muted: #5e6670;
  /* wyciszony tekst: kontrast co najmniej 4,5:1 na tle strony i tła przepisu
     (WCAG 2.1 AA; dawne #8a919a miało 3,1:1 — axe-core, tests/e2e) */
  --faint: #666e77;
  --line: #e5e7e2;
  --line-strong: #d4d7d1;
  --line-soft: #eef0eb; /* a line inside a box (the question field) */
  --chip-bg: #f1f3ee; /* grey pills (home page examples) */
  --brand: #0f6e5f;
  --brand-hover: #0a5648;
  --brand-ink: #0b4f44;
  --brand-soft: #e6f4f0;
  --brand-line: #bfe0d7;
  --on-brand: #ffffff; /* text on a brand background (buttons, chips) */
  --selection: #b9d7fb;
  --green: #1c7a4a;
  --green-soft: #e4f4ea;
  --star: #f2b705; /* a starred act: yellow, as stars usually are */
  --amber: #8a5a00;
  --amber-soft: #fbf1dc;
  --mark: #fbeec7; /* words of the question in a fragment */
  --mark-strong: #f3d27e; /* the place in a judgment being looked at now */
  --mark-flash: #fff0b3; /* a place the page just jumped to */
  --info: #24448f; /* announced, not yet in force (blue, not the brand) */
  --info-soft: #e6edfb;
  --rose-hover: #8e2742;
  --diff-mod-line: #d4a72c;
  --visited: #6a3d9a; /* a result already opened (as in Google) */
  --overlay: rgba(21, 24, 28, 0.22); /* under the panel and dialogs */
  --shadow-lg: 0 24px 64px rgba(21, 24, 28, 0.2); /* the panel, dialogs */
  --rose: #a8324f;
  --rose-soft: #fbe9ee;
  --orange: #a44f12;
  --orange-soft: #fcefe4;
  --slate: #55606d;
  --slate-soft: #eef0f3;
  /* chart fills (web/stance.py): for the party, against, in part — a blue
     and a rose that colour-blind readers tell apart (green against rose they
     do not), a grey in the middle; never for text */
  --chart-for: #2563a8;
  --chart-against: #a8324f;
  --chart-mixed: #55606d;
  /* the grade of the search (web/admin_search.py): good blue, partial a light
     neutral midpoint, bad rose, no grade near the surface (validated with
     the dataviz palette check: pairs apart for colour-blind readers) */
  --chart-mid: #a3acb6;
  --chart-none: #e1e5e9;
  /* the closing band of /pro (web/page.py, pro_page): deep brand green with
     light text; in the dark theme a darker green than the brand-soft fills */
  --band: #0b4f44;
  --band-text: #ffffff;
  --band-muted: #bfe0d7;
  --shadow-sm: 0 1px 2px rgba(21, 24, 28, 0.05);
  --shadow: 0 2px 8px rgba(21, 24, 28, 0.05), 0 14px 36px rgba(21, 24, 28, 0.07);
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 760px;
  /* the widest the page gets (owner 6.10.2026): header and the act page with
     its table of contents stay together on a large screen */
  --page: 1280px;
  --radius: 14px;
  /* scales (docs/design-system.md): new and reworked rules use these */
  --fs-label: 12.5px; /* uppercase labels over sections, badges */
  --fs-small: 13.5px; /* notes, captions, hints under fields */
  --fs-meta: 14.5px; /* meta rows, menus, secondary text */
  --fs-ui: 15px; /* controls, lists, panels */
  --fs-body: 17px; /* running text, the text of the law */
  --fs-lead: 19px; /* lead under a title, a thesis */
  --r-sm: 8px; /* flat buttons, menu items, small chips */
  --r-md: 12px; /* fields, buttons, menus, notices */
  --r-lg: 14px; /* cards, boxes, specimens */
  --r-xl: 18px; /* the panel */
  --r-pill: 999px; /* badges, suggestions, chips */
  color-scheme: light;
}

/* ciemny motyw według ustawień systemu (docs/ux.md, etap 3): te same tokeny,
   ciemne tło, jaśniejszy kolor marki dla linków; przyciski marki z ciemnym
   napisem (--on-brand) */
:root { color-scheme: light dark; }
:root.light-only { color-scheme: light; } /* przepis osadzony na cudzej stronie */
/* chosen in the header (static/theme.js), over the system setting */
:root.theme-light { color-scheme: light; }
:root.theme-dark { color-scheme: dark; }
@media screen and (prefers-color-scheme: dark) {
  :root:not(.light-only):not(.theme-light) {
    --bg: #111413;
    --surface: #191d1b;
    --tint: #222725;
    --law-bg: #1b201e;
    --fg: #eef1ee;
    --text: #d6dbd7;
    --muted: #a5ada8;
    --faint: #939c97;
    --line: #2b322f;
    --line-strong: #3a433f;
    --line-soft: #242a27;
    --chip-bg: #222725;
    --brand: #5cc8ad;
    --brand-hover: #82d8c3;
    --brand-ink: #a7ead8;
    --brand-soft: #16362f;
    --brand-line: #2a5a4f;
    --on-brand: #08201a;
    --selection: #2f5580;
    --green: #6fd69a;
    --green-soft: #173225;
    --star: #facc15;
    --amber: #f2c063;
    --amber-soft: #352a12;
    --mark: #4a3a12;
    --mark-strong: #6e5516;
    --mark-flash: #5a4a14;
    --info: #b7c8f3;
    --info-soft: #1d2740;
    --rose-hover: #f7a8ba;
    --diff-mod-line: #8a6d1d;
    --visited: #c4a6ee;
    --overlay: rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
    --rose: #f2849c;
    --rose-soft: #3a1a23;
    --orange: #f5a36a;
    --orange-soft: #382215;
    --slate: #aeb8c3;
    --slate-soft: #232930;
    --chart-for: #4f93d6;
    --chart-against: #cf5f7a;
    --chart-mixed: #aeb8c3;
    --chart-mid: #535b64;
    --chart-none: #2a2f34;
    --band: #123c34;
    --band-text: #eef1ee;
    --band-muted: #a7ead8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.45);
  }
}
/* the same, chosen in the header (static/theme.js): kept in step with the
 block above by tests/test_css.py */
:root.theme-dark {
  --bg: #111413;
  --surface: #191d1b;
  --tint: #222725;
  --law-bg: #1b201e;
  --fg: #eef1ee;
  --text: #d6dbd7;
  --muted: #a5ada8;
  --faint: #939c97;
  --line: #2b322f;
  --line-strong: #3a433f;
  --line-soft: #242a27;
  --chip-bg: #222725;
  --brand: #5cc8ad;
  --brand-hover: #82d8c3;
  --brand-ink: #a7ead8;
  --brand-soft: #16362f;
  --brand-line: #2a5a4f;
  --on-brand: #08201a;
  --selection: #2f5580;
  --green: #6fd69a;
  --green-soft: #173225;
  --star: #facc15;
  --amber: #f2c063;
  --amber-soft: #352a12;
  --mark: #4a3a12;
  --mark-strong: #6e5516;
  --mark-flash: #5a4a14;
  --info: #b7c8f3;
  --info-soft: #1d2740;
  --rose-hover: #f7a8ba;
  --diff-mod-line: #8a6d1d;
  --visited: #c4a6ee;
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --rose: #f2849c;
  --rose-soft: #3a1a23;
  --orange: #f5a36a;
  --orange-soft: #382215;
  --slate: #aeb8c3;
  --slate-soft: #232930;
  --chart-for: #4f93d6;
  --chart-against: #cf5f7a;
  --chart-mixed: #aeb8c3;
  --chart-mid: #535b64;
  --chart-none: #2a2f34;
  --band: #123c34;
  --band-text: #eef1ee;
  --band-muted: #a7ead8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.45);
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
/* the whole act: a link from the table of contents jumps at once (a smooth
   scroll through a long act takes too long, owner 6.10.2026) */
html:has(main.doc.reader) { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
/* zaznaczenie tekstu: niebieskie, nie w kolorze marki — na zielonkawych
   polach („Doprecyzuj swoją sytuację”) zielone było niewidoczne */
::selection { background: var(--selection); }
h1, h2, h3 { color: var(--fg); letter-spacing: -0.01em; }
/* a row of links side by side, spaced instead of separated by dots (no
   middle dots on the site, owner 7.10.2026) */
.link-row { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* the number after a section name: grey, no dot, no brackets */
.g-count { margin-left: 6px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
/* the label over a section (docs/design-system.md, „Etykieta sekcji”): one
   look for every small uppercase label */
.label,
.examples-title,
.lawcard-group > h3,
.cond-map h3,
.ask-more-label,
.unit h2, .doc h2,
.day .item .act,
.acts-label,
.foot-title,
.brief h3,
.thesis > span,
.hit-label,
.doc-text h2,
.doc-cited h2,
.doc-ai-head h2,
.plain h2,
.sg-group h3,
.sg-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
p { margin: 0 0 1em; }

/* ——— icons ——— */
/* Lucide (lucide.dev, ISC licence), lucide-static 1.52.0: the shape as a mask,
   colour from the surrounding text. In HTML <span class="i i-name"
   aria-hidden="true"> (web/page.py, icon; static/app.js, icon); keep a text
   label next to it, an icon alone is rarely unambiguous. New icon: the <svg>
   content from lucide.dev as a data URI like below (stroke='%23000', "<" and
   ">" as %3C, %3E). */
.i { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-circle-user-round { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.925 20.056a6 6 0 0 0-11.851.001'/%3E%3Ccircle cx='12' cy='11' r='4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.i-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-folder { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.i-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); }
.i-history { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E"); }
.i-log-out { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E"); }

.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.i-trash-2 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.i-sparkles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); }
.i-languages { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E"); }
.i-corner-down-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E"); }
.i-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); }
.i-share-2 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' x2='15.42' y1='13.51' y2='17.49'/%3E%3Cline x1='15.41' x2='8.59' y1='6.51' y2='10.49'/%3E%3C/svg%3E"); }
.i-chevron-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.i-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.i-code-xml { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 16 4-4-4-4'/%3E%3Cpath d='m6 8-4 4 4 4'/%3E%3Cpath d='m14.5 4-5 16'/%3E%3C/svg%3E"); }
.i-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E"); }
.i-quote { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); }
.i-file-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.i-folder-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10v6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.i-maximize-2 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m21 3-7 7'/%3E%3Cpath d='m3 21 7-7'/%3E%3Cpath d='M9 21H3v-6'/%3E%3C/svg%3E"); }
.i-external-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.i-book-open { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v16'/%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E"); }
.i-scale { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.i-printer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.i-panel-left-close { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E"); }
.i-panel-left-open { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E"); }
.i-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.i-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
.i-ellipsis { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E"); }
.i-file-diff { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M9 10h6'/%3E%3Cpath d='M12 13V7'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E"); }
.i-arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.i-chevron-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.i-chevron-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.i-chevron-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
.i-arrow-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
.i-arrow-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
.i-arrow-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E"); }
.i-shield-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.i-triangle-alert { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.i-circle-help { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.i-message-square-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7 11h10'/%3E%3Cpath d='M7 15h6'/%3E%3Cpath d='M7 7h8'/%3E%3C/svg%3E"); }
.i-thumbs-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E"); }
.i-thumbs-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 14V2'/%3E%3Cpath d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z'/%3E%3C/svg%3E"); }
.i-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E"); }
.i-share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v13'/%3E%3Cpath d='m16 6-4-4-4 4'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.i-sun { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); }
.i-keyboard { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8h.01'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M14 8h.01'/%3E%3Cpath d='M16 12h.01'/%3E%3Cpath d='M18 8h.01'/%3E%3Cpath d='M6 8h.01'/%3E%3Cpath d='M7 16h10'/%3E%3Cpath d='M8 12h.01'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/svg%3E"); }
.i-globe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); }
.i-moon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E"); }
.i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
.i-star-fill { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='%23000' d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); }
.i-sliders-horizontal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H3'/%3E%3Cpath d='M12 19H3'/%3E%3Cpath d='M14 3v4'/%3E%3Cpath d='M16 17v4'/%3E%3Cpath d='M21 12h-9'/%3E%3Cpath d='M21 19h-5'/%3E%3Cpath d='M21 5h-7'/%3E%3Cpath d='M8 10v4'/%3E%3Cpath d='M8 12H3'/%3E%3C/svg%3E"); }
/* Judge Dredd's helmet (icon: Freepik, flaticon.com, free licence with attribution) */
.i-dredd { --i: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAVCklEQVR42t1debRV1Xn/nQHeIw8e08OAoiGI4LKgCAYwvhCtTSJLogY1NoPBoa5lEcS0OLTUZqUxWmMaE2tqY0kwRqKQValW06DRJA4FjTJLH6gJpE1lkKHAg/fg3nv6x/l9uR/bfc7Z595zZThrnXXfO8Pe37D3t7/9TcfD4T08AD5/S8a93gBGATgNwBgApwIYBmAwgP4AQuP5MoAdADYD2AigA8AaAOsArAew13g+BBABqPD3sBHgcBxC9LK61gTgTACfAHA2gPEAjrO82wlgF4D96v0AQDOAfmSceWwF8DqApQCeAbASQLfBjArPY5oBgRp1INHOAzANwAUAhhpEWw5gBYA3OKq3cpTvBXBAjVwPQA8Svz+AD3K2/BGAcTw1M/8HwM8APA7gFwC6UgbGMXH4POU4E8BdAH5LIkYk6jMkxloAvQrsv5ltdgFYwr6k398AuBPA2BR4j9rD46iX4xMAnlTIHwCwCMBlAAZSvlcAPK9Eg5yBGqGeMXv1NZ/P6nfBkV7h7BgA4FIAC9VMigjbnxgz1juaR70cYwEsVoiuAjATwInGOx/h/YUW5tUj9jy2GbEPfZxIWFYp+B63zIij6gjUCJ5LmRoBeI3yPjSebSKRPsnn7lPv13tIG/ex7U+yryaDwSFhe43PlQl7aOB0xB8C8DCKkohaywyDoKEaWXL983x+bgMYMJdtf9647lvgmkGYI+IwrEB43hfiTwbweyLwMwAjMuSqvDeb71zXAAZcx7ZnJ7RtirwRhD0iLpOPdCYIYBcD2EfA71bEDh3e/Trfu7gBDLiYbX89BzwecYiI00VHKhMEoE9zRxtxYXNV6eT9eXy3vUC5K220s+15jkTUcM/kuwcBTD3SmBAosSMj/ype6+GoxkkboqKeVqD2IW2cplRNV+bKBg/ESWbC5CNlYfbVgvsOAZyhiJ93R76MbZzQAAacwLaX1WAFEFxmsI131MLsH+5NVk9FuLvqIL4H4E2OsH4FmkqkjX5s+02jz7xMuEsxsufh3KzJ9LuHAD2lZKNXA4GaaOvZQsSKZkBPtr2NfaEGOEXuP0Wc7zlcokg6/DgB+V+aEbwapqQ5QjcUbCzUbWxAbEWtdYaJKWQwcY5Ig/eVCULkZgCrCcS0OjQDYdjxbOvXDbDUSluvso/j65DfguM0trWatPDfL1EknP5LZTepRy3z1cYnQmwRLXpxE5iXsI8RdfYhuD7O9v7i/ZoFwuU2AO9SZAyvUfSYxDlTGeKKRkbaepR9nFlnH0KH4aTBNtIkNx1qkdcRgJsQm4//GbE9PUD93qQ+/N3ZQBG0y+ir1qNCnH9DGrQBuJG0aZgYEnv7AADbAewBMKTO0a+n84VE4B8asNMMDY3twgL6kFkwhLTYTtp4eZjg1+BOnM6O5nND4hfkSxUP2L4GitD9Rl/1zgKfNJhPmkwnjYKiGSB+0hDA9fz7fiWSUCADOhvIgM4CGQAlcu4nTf6cNCq7zgI/B6NE5x0J4OfUqb0CIwlsDPDwXnejy2m+1ygGVNj+BtLkFLU38huxCF/J3wcLkP1JDOhS2/vIOCuOp/memE26C2aAXgseNGiUa3FyET99ENvDd5HbUcHhG82ohqOUVds9aEbQp6+c7+CzQvwDxnmQp7St+yriEHfrz0mbi0irPS4iOnRcfEucWv0BPAxgN68XyQAJqLoZsdWxP4BWAH0BfID2mybHtrp57gPwf4R3J4AWo6+i1oGAfTwJ4Euk1VOKdnUxQI4p/H0ir6qVcwacY2gtnYiDsfbz7CJSZYVcqEJRmiliepHQJ1lETjMao6I/QQZMUcbJukVQic9dwFH1UgPED9RUnQXgP9jXXhL9QA3alkdxJYxoImH+sQGxoCKGXiLcF5BmpXoZIDr+Kdx2v0g56jcgjvIAf98C8HbGSMtipJwiinaptnVfRQ4en7R5FcDHSLP/yqKV76gljWcnv2qgF0iI0qocPbZIuCjjtEXKieOktUEM0DT5FeEY70IrV0K2E5mXDXHRCAYESguqOBA866yo9oIGMkBo8jJp1V7EGiBy/iz+rmsgAw4qzxUsU9dz7Nv2nE9cehp9NYIB6wyalWtlgOiwrYiTI94C8LsGqJ96VwkAfw/gdsvsPOjg8ozUwtfD0n6L0VfR8Aek0VukWSvV08T9gAsDhhPw/TQ47VD2jqgBhrJW9mcCLSbkvSn9ekrH32PBJWiQwc9TOv8A4tJC2q2s1WYmzLkMh8bSf8ri6EABpuLPso87SGzZiPXhKWlGQ/m/vid/D+Uz6417/fn3HezjswWavDUNPkUaCb0uy+rHZREext8VAD6MOF7yHurX5QKQiIwR28S/d3L67uHZzXt7+b++J3/v5TPdxr2d/LvJ6CsqYPCUSYt7SJsPk1aadnVpQR/i75e5wdgMYA43HRM57YowzImlsr+KSNNJfAfUTtdTBjv9dzOfOWC8K231V2KsCANciTR4iTTZTBp92aBdTQyQ0TFEAb2Eq/sixHlXSwHcphahemaDEKWvJXsxUpbMMEXlDJUtSL8rbfUtwOcQqkX8NtJgHGnyEZUCpWkX1bOxeJENnGTIuz/j9BZL4KlKJvo19DMyISpCfp9TSoE5eOTv4XzmuYQ2nuH9kTVsKLX19VRlEd5NWug14STee6GIjesbVAHbLAQeBeBZdrYH1bj+PAu0GRf0iqHPy/2f8v6oFAaM4jM/Na5LW6/UGBekcblODbxn1cDTDGojzdbWG0XgA9jERayXcU/H0N+qpvkihaBL3KSnRM8+ajC2pAmJwRmTwoAxRqxSYImM26dEkZcjyfB44iYi7dYEWoC02kna+bVEeeh4zXcRO55DS0M6GmwCqvlVv0c1Wi5rNmgk3sF7YzfNmJ7xljYDw2b1qIUBTWw7CZe0UT9NZfy8zoUXFuUjC5fcDOjN6bYxg5Oh4vw31KL4gBptSTtYfW0dNZiBloDYh9jmpBQGTOIzD1n6HMi212XEnuo++xKHSAXj9krR7bXk2IjYGdQ7jQG+o6OhlLF9L5EI+wHcQlXsbcQRFMsQZ8OXEpzV+toOqox9LEB3qZGcdDQZz+o2+rDtHUaggS34oESYlxGHt4nTzcQxy9NV4f3MeFEXc7TvqEaV1ehZwmn6Ay5Sz3MX2jNBXRUgtyhzhHl0GcY629HTwgAYbW5JGJGiXvYkrM8T9vnEZYkSaeUcPoK6zNEVFYDkWRanIMEYFiCOFLsWwOcoC+cC+CXiuMySAZzJgAEWInXnmAHdFuYOSGCAwFEibL8krO8iTmm9hrgECfavwLLYe8qaW6mHAeJRMnO9ImVjt3mpyopJj3GD8gTiKiivII4trVhmw2b+DnIQQV6C0pAkggYZfZhVUm4ibGcjdq6fxcU8adR76rrJGNl9dxuDITcDSlTbWoyp3w/AAsT+2yghHC9StqJNAC5BnG1YBnAvgKe5cSopJIU4gxMGAzIc6s2WGQBjV7rZsF4OJyz3EraZiFNaN6VYfQOF9yzSop8hCltIuxJQX1ZJh5G3pXecEYB/VcglaTq+oau/wHd34NBApst5/U6jWAcQx+BHAK62aCHy99VGvL5+/07euxyHBprtULvWMRmptVpDGkLcI2OHrrN9OorI9lnOKTrYQPYBtfn6Har5s2kzK1S/f6uAX0BDmWyk5lsIeAPvXZ/CgOv5zA2W9+erjVx/9in9f8WALUtaTCXOsil7wHhXqr4sL8LJ/DI7GmZ0MlSZiSMVWt7sgIinfM1r+O56xGUEKtQ4dNkZcEGX3IQkBtzEZ6414oV8tllhH+v53BrEEQzIsOiGSsR904i62KMKTek6GZHyofv1OBpsydNy72sqT2qDyvEal2Mq90a1koloUa8qGHoocRHRBJDEgFv5zJXKLRmo/LCS6uc+td9wEZ3jVI7ZBpUf9zWLjayWpPBErn/PUj5ARks/LmpbAXwUwCOqENNsB1OEvv5pLnwR1b52o6rK5UpcJDHgK0rO6yoo7VQrI/ZxUU7YblTBYY8Q163EvZ+a1WZZhO/V43mTl76a4F4LDNm8ANXIti5e+zdUizIFDlv/D1JtlVF6u5oBl+LQZHAbAySJ+lI1A25X7S001jIvwwA3FNVCU13EDWr9uMFSHwnKjfvVIhhwvVK3TMufpKt28JlzVIWspSqtf1rOEXc1rYkR/REnKzvPt1IY8C1lLzpZ+TJ2cUOVB4bPoJoLvFRV0DqH1zos6amhGoRJCkPN+bC2kRcY6uMv1LWeqJZ6EZnbkgGQHn0jEMeIiro6T03rwMKAQInLeUq91PWK0szj0l6LsSbdrfZAAXHU6myQMhPryZ/+Q8PC8YcTGpOFaplKgNML9RRUqyOuVNZM30HrAOJ85JJaoL+vGOypIFzwnn52jkMIjoZjImKHekSYpxgL7IWqToQNfunjYUMiBPWoocPV6LapVNL4eaogX2iM0uMA/Fjtjm/OSZhxypu1FcAVluev4D3xqo3Pyeg5atf7Y1VnVOMihf3OSyCsryo0JrlPa/YJbFIdeglMeNqoFxRY3HkSWPU04hAOV9HQZIi0ebRwtirxJCKjKYeoG6bg3mtxq8pzVym4bcT31PVNpFnvonKe1yD2cQ7KYMBYTv2N7Nw3QkeAuJqtmCK2AfhTh8VRj6Dz1UaqQykA63kvz0KrZ80LhA1GyItPXDYSt7EZDBhEWq0Biov6ks3Y6SlTKjA8V7ekaCuh2sTJwtrXYdSGytbyoHr/QWWrCh1mUyviDPdIbabCFHhvwaGetiBlkJxexCbMBOBeNjo1AwCPU7qTG59Bli2+VtvOR1xAKUIcfdGewywgls3NjuuJp5SKtezzTTVrkuAcRFw6iZuXMQCnsu17iwh/DI1SXbMzGhUgxC/8zZTpGipf7UNqNM7NqLToqSi4LTybU7Jn9L7lr1U/Dynfc5giVsX2842MEW2W3pxRBAOksz9WU91lpLVRvu/L0AQ0MtNVsdRnkRw8ZVbASquwpUvhPKM2ZdMz1gqtAbpWQwlVDnVEmtUtgvwE655LOMccY/8QOGgkI1GNgNuttCm/BgbIO19CHJ0gEXMjHTSvwNDn5+QIrzGtx34RZV6aiOh2vDdAK6miVgviUO2ysgf5DuIuoFVzj2F8C3IwIDCMc3vZZuAgFnxV1LtMHFoyIhx0QNZ2wuQUD+Q7eva7qeYNQLWkpJdRwKKTqpjvWJ+nRONZGXE0xbtwSPGBW4rVNrZZZh8lx/pFPnHozEiy8FRpzAGkVbdLRImfQwy9wd+TawjrixzXm4NE4iVO4fsRh4j4FkYEKXK8zHfuYBvD2OYJ7CPIkbeQJ7zyZINWfpHFOlYoPReO+bplx34k5KMNwL9TTv+AVkXfknDnIQ6QkoiG/ZYFUmbvLLY1km23GRmTWbQp50gMPN2gFYrcjIk5+DGHBUnuLU4JqDURbVUL2KNG4oVNz5+uwj6mJzyj25DY0v9UQVpp8Ih/enEOfB9LCZ+seyFuU2tBVuVZ6ViiBs7IUCl7ofqtgSeUF8y3GNRORPVrGDomZ6Gx2JvvhmxbDIu9MlTXM1TUR5YWJ78i+9uKrnsnDa3mAjY4Q7QIsD8hEmMT1EmxszypPGgthjgJjTCSrYZpexL/FkvplZbZIGKrhX2IqaC3RbvxlV0rIg4udqrBpM3qRnyhSjr/IYGa7Gjwkik5LmXhHKf8yJcYtv7AMuolbkhXQOml4n7M2RAYPoNLlH/XBa7HHHGdzOd/2IgaouY2e5ajSUJ8ABNUhINnsfnfpvyuX8R7q3TJqF+hmG8zd09WDpWtlupVX1T+6tssvgJPRVJMUL4BFxPELEdzTV0z4FxL4FTa848YaUX6fmgQ8Bo1gmdTdVyUMOpDS2xomDAbFrGt2eraNQYDQwuBR6koCBcGSODXuY2YAb4Kxysj9gy5LMI/IlD3I3bvfSijNPxF3PREynywAtXgKVdtBHxnhdFWpwpJ6ZGSljuFMEfEwWURXkXaDGlERRkdyr2B03hgChNMW4o+OziqbqRpeKDx7mhU44PuVl4l17L4ZtDX3SoeaLTx7ADEMT43EqYOC7xptiydfdNF2uTKCQtz1kUrU+M4hef2hF2qZxTFuItb+3YSYRSAL6Bat2EVYkf369TTzzcKLMGIoo6M3apn1IQoqdzjWwH8i4rj/AJif/EkqpofMPpYyV3zHgB/pXBIipwrkxZNfLeSp6BJWMMseA1x4NHpJJrnYItZqMTWcWTAWYhj8eX3bPXef7PtN/i7FnGSXB670Alk9iTErsaJiPN39fFb4rOUv+tVZcUzyICy4w5YPlSXSwUNa6jpsJwdTFT+AWSUoNHf/93K80XEXqOQi+QYxIkcEzhCL8ehoeTriOAaEmqLynhvQRxVN4rtnIVqLCtU4e7nEMd3/prtbLQY5kIFs2tpm4mkyfK8mfFhDfV8VlGP/phK7cliWsUQIb4hLt7iuVjJ7pHUxSeRMaMtRE2DdTUJvYyE2ZBQI0KLtYraYVcciCmpVu2kyaq89YjCGuokb6Osm4DY07QhpTBdxaIRmBUXzTLDFRJqOc95Km50FM9TKcrEprObs6qDs2O9ygVLSjqMMqo/+hnEFJxHcLC8Stp4jZoBuojrk2TAVMTxmFkM8ByqHNr8vr4ikjhfXqjhS6oVo/RxnjUviwEXqsgRuBRrrad2dMXo7NqMFT+q0S4SKbFVNiybobGJCyzXPaUElGr8bnxWjToxaV9r0KTSyC9oSMrqWpqOT1Ox8IGjCEIdhZ2EoCVlCS1brkcFbj4rKd9S+Cg1rJdJE7/RDNDZ5PLN39sdFuGj8avULlUa/4a/38lTsr5eBoi7bzE1jfO5FtjKl1WOAQZUErx3FyD+OPQamrj9WvzXfh1fjTioqmV9G3FoYMWi8RxLM0A0nD4c9eBO+2CtlRH9OqINAsQJFAsQO6P/yVLWoHK0fpPdsgZ4KrP+PqqeC0iDmmup+gV8xGYm9wKfQ/yxZF0l5FgRQaISH+SadxVxnllvIXO/gHKTu2gy2Ik49vLvUM0d9o8BBvgqJ3gu8dtBe9iuBpZyrumL1duVF6lFZShOPdK/x27ZnE5VmZrNqAYQby/4i9+FMmG0SmBeS+NXBVVf79HEgEtUoPBKlZA++kgjvsmEvgC+a9hbrjgKGXCFgcN3VRJJcKQCrwE7F9UvC407irQhnRi4mzh8vOB62X84/h90p0haFWtMnwAAAABJRU5ErkJggg=="); }
/* ——— nagłówek ——— */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* the bar (design "Strona główna v2", 8.10.2026): mark, the menu with
   "Skocz do ⌘K", then on the right the shortcuts, the theme, a thin line,
   the account and "Dla profesjonalisty" last, within the page width */
.top-inner {
  max-width: var(--page);
  margin: 0 auto;
  min-height: 68px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px 12px;
}
.top-inner > .brand { margin-right: 16px; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); }
.brand:hover { color: var(--fg); text-decoration: none; }
/* znak (logo 5a): zielony kwadrat z białym „pp”, ten sam obrazek co favikona
   (web/page.py, MARK_SVG); w ciemnym motywie bez zmian, jak ikona aplikacji */
.brand-mark {
  width: 38px;
  height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='5.76' fill='%230f6e5f'/%3E%3Cpath d='M8.37 19.29V8.01H10.24V9.37H10.36Q10.5 9.08 10.77 8.74Q11.05 8.4 11.52 8.15Q11.99 7.91 12.71 7.91Q13.66 7.91 14.43 8.39Q15.2 8.88 15.65 9.82Q16.1 10.76 16.1 12.13Q16.1 13.48 15.65 14.43Q15.21 15.38 14.45 15.87Q13.68 16.37 12.71 16.37Q12 16.37 11.53 16.13Q11.07 15.89 10.79 15.55Q10.51 15.21 10.36 14.92H10.28V19.29ZM12.19 14.8Q13.15 14.8 13.64 14.04Q14.14 13.28 14.14 12.12Q14.14 10.98 13.65 10.23Q13.16 9.48 12.19 9.48Q11.24 9.48 10.75 10.2Q10.25 10.93 10.25 12.12Q10.25 13.32 10.75 14.06Q11.26 14.8 12.19 14.8ZM15.89 24.1V12.82H17.76V14.18H17.88Q18.02 13.89 18.29 13.55Q18.57 13.21 19.04 12.96Q19.51 12.72 20.23 12.72Q21.18 12.72 21.95 13.2Q22.72 13.69 23.17 14.63Q23.62 15.57 23.62 16.94Q23.62 18.29 23.17 19.24Q22.73 20.19 21.97 20.68Q21.2 21.18 20.23 21.18Q19.52 21.18 19.05 20.94Q18.59 20.7 18.31 20.36Q18.03 20.02 17.88 19.73H17.8V24.1ZM19.71 19.61Q20.67 19.61 21.16 18.85Q21.66 18.09 21.66 16.93Q21.66 15.79 21.17 15.04Q20.68 14.29 19.71 14.29Q18.76 14.29 18.27 15.01Q17.77 15.74 17.77 16.93Q17.77 18.13 18.27 18.87Q18.78 19.61 19.71 19.61Z' fill='%23fff' stroke='%23fff' stroke-width='0.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  flex: none;
}
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.top nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.top nav a {
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 15.5px;
  white-space: nowrap;
}
.top nav a:hover { color: var(--fg); background: var(--tint); text-decoration: none; }
.top nav a.active { color: var(--fg); font-weight: 600; }
/* "Więcej" with the rest of the navigation: only on a phone (web/page.py, nav) */
.nav-more { display: none; position: relative; }
.nav-more summary { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary .i { width: 1em; height: 1em; transition: transform .15s; }
.nav-more[open] summary .i { transform: rotate(180deg); }
.nav-more summary:hover, .nav-more[open] summary { color: var(--fg); background: var(--tint); }
.nav-more:has(a.active) summary { color: var(--fg); font-weight: 600; }
.nav-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.top nav .nav-more-menu a { display: block; padding: 9px 10px; border-radius: 8px; font-size: 15px; }
/* "Dla profesjonalisty" as a black button, "Logowanie" right of it at the end
   (owner 6.10.2026, like the "Pro" mark on board A6); in the dark theme the
   same, inverted */
.pro-link {
  flex: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bg);
  background: var(--fg);
  padding: 8px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.top .nav-keys { margin-left: auto; }
.top-sep { flex: none; width: 1px; height: 20px; margin: 0 8px; background: var(--line); }
.pro-link:hover { color: var(--bg); background: color-mix(in srgb, var(--fg) 82%, var(--bg)); text-decoration: none; }
.pro-link.active { box-shadow: 0 0 0 3px var(--line-strong); }
/* on a narrow phone the button says just "Pro": mark, Pro, theme and account
   fit in one row, the navigation in the second */
.pro-short { display: none; }
@media (max-width: 520px) { .pro-full { display: none; } .pro-short { display: inline; } }
/* "Skocz do ⌘K" at the end of the menu, like its items (web/page.py, JUMP),
   the key for the platform (html.mac); not on a phone */
.jump-button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 15.5px; white-space: nowrap; cursor: pointer; }
.jump-button:hover { background: var(--tint); color: var(--fg); }
.jump-button kbd { min-width: 0; font: 11.5px/1 var(--sans); color: var(--faint); background: var(--tint); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; }
.kbd-mac, .mac .kbd-pc { display: none; }
.mac .kbd-mac { display: inline; }
@media (max-width: 720px), (hover: none) { .jump-button, .top-sep { display: none; } .top .theme-button { margin-left: auto; } }

.banner {
  max-width: var(--measure);
  width: calc(100% - 48px);
  margin: 10px auto 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 14.5px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.banner.error { background: var(--orange-soft); color: var(--orange); }

main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + 64px);
  margin: 0 auto;
  padding: 24px 32px 96px;
}

/* ——— strona główna ——— */

/* design "Strona główna v2" (8.10.2026): the day of the law, the title with
   "aktualne" in green, the sentence, the field, the examples */
.hero { padding: clamp(40px, 9vh, 104px) 0 0; text-align: center; }
.hero-asof { margin: 0 0 30px; display: inline-flex; align-items: center; gap: 10px; min-height: 1.5em; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--brand-ink); cursor: help; }
.hero h1 {
  font-size: clamp(44px, 6.4vw, 68px);
  line-height: 1.02;
  /* bolder than other headings (600): the promise of the site (owner 7.10.2026) */
  font-weight: 650;
  letter-spacing: -0.03em;
  margin: 0 0 30px;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--brand); }
.hero .lead {
  margin: 0 auto 56px;
  max-width: 640px;
  text-wrap: balance;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}
.hero .lead a { font-weight: 600; color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero .lead a:hover { color: var(--brand-hover); text-decoration-color: var(--brand); }
/* a sentence a line on wide screens */
.hero .lead .line { display: block; }
@media (min-width: 900px) { .hero .lead .line { white-space: nowrap; } }
.hero .search { text-align: left; }
/* the results under the home page field; scrolled to below the header */
.hero .search { scroll-margin-top: 92px; }
.results { margin-top: 40px; }
.results > .layer:not(.first):not(.explain) { margin-top: 28px; }
/* under the field: no personal data (owner 7.10.2026); what looks like a
   number, an e-mail or an address in the question turns it into a note */
.privacy-note { margin: 14px 4px 0; font-size: 14px; line-height: 1.45; color: var(--faint); text-align: left; }
.privacy-note.warn { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--amber); }
.privacy-note .i { width: 1.05em; height: 1.05em; margin-right: 6px; vertical-align: -0.15em; }
.privacy-note .link-button { font-size: inherit; color: inherit; font-weight: 600; }
/* the quiet line: the shield on the left, the text wrapping beside it */
.privacy-note:not(.warn) { display: flex; align-items: flex-start; }
.privacy-note:not(.warn) .i { flex: none; margin-top: 0.2em; color: var(--brand); }
.examples { margin: 40px 0 0; padding-left: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
/* "Na przykład:" over the examples, in sentence case (not the section label) */
.hero .examples-title { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); }
.example-list { display: flex; flex-wrap: wrap; gap: 8px; }
.example-list > * { flex: none; }
.examples a { display: inline-flex; align-items: center; text-decoration: none; line-height: normal; }

.home-section { margin-top: 112px; }
.home-section > h2 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.steps h3 { margin: 0 0 6px; font-size: 18px; font-weight: 650; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }


.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
.trust div { padding-left: 16px; border-left: 2px solid var(--brand-line); }
.trust h3 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.trust p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* under the field on the home page (web/page.py, home_more; design "Strona
   główna v2", 8.10.2026): the headline, three big numbers, four pillars, the
   quality box, then a band inviting a question */
.home-trust { margin-top: 128px; }
.home-trust > h2 { margin: 0 0 48px; font-size: clamp(30px, 4vw, 40px); line-height: 1.12; font-weight: 650; letter-spacing: -0.025em; text-wrap: balance; }
.home-numbers { margin: 0 0 56px; padding: 0 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; border-bottom: 1px solid var(--line); }
.home-numbers > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-numbers dt { order: 2; font-size: 14.5px; color: var(--muted); }
.home-numbers dd { order: 1; margin: 0; font-size: clamp(36px, 5vw, 52px); line-height: 1; font-weight: 650; letter-spacing: -0.03em; color: var(--brand); white-space: nowrap; }
.home-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.home-pillars > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-pillars h3, .home-quality h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.home-pillars p, .home-quality > p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.home-pillars a { font-weight: 600; color: var(--brand-ink); text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.home-pillars a:hover { color: var(--brand-hover); text-decoration-color: var(--brand); }
.home-quality { margin: 56px 0 0; padding: 28px 30px; border-radius: 16px; background: var(--law-bg); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.home-quality > p b { font-weight: 600; color: var(--fg); }
.home-quality dl { margin: 12px 0 12px; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.home-quality dl > div { display: flex; flex-direction: column; gap: 2px; max-width: 320px; }
.home-quality dd { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; color: var(--brand); }
.home-quality dd span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.home-quality dt { order: 2; font-size: 14px; color: var(--muted); }
.home-quality dl > div[title] { cursor: help; }
.home-quality .btn.secondary { background: var(--surface); border: 1px solid var(--brand-line); }
.home-quality .btn.secondary:hover { background: var(--brand-soft); }
.trust-note { margin: 40px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.home-trust .link-row { margin-top: 10px; font-size: 15px; }
.home-cta { margin-top: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 28px 30px; border-radius: 16px; background: var(--brand-soft); }
.home-cta > p { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--brand-ink); text-wrap: balance; }
.home-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.home-cta .btn { padding: 10px 18px; font-size: 15px; border-radius: 11px; }
.home-cta a { font-weight: 600; color: var(--brand-ink); white-space: nowrap; }

.browse-all { margin-top: 28px; font-size: 16px; font-weight: 600; }

/* ——— wyszukiwarka ——— */

.search {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 12px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search:focus-within { border-color: var(--brand); box-shadow: var(--shadow), 0 0 0 4px var(--brand-soft); }
/* the question field of the home page (and over the results, one page,
   6.10.2026): the question on top, under it the switch on the left and
   "× Wyczyść", "Szukaj →" on the right, the brand border always (redesign
   "Kierunek A", 5.10.2026). Other search forms (/orzeczenia) keep the plain
   look above. */
.hero .search { display: flex; flex-direction: column; gap: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 1px 2px rgba(21, 24, 28, 0.04), 0 24px 48px -28px rgba(11, 79, 68, 0.35); }
/* the green ring only while typing (design "Strona główna v2", 8.10.2026) */
.hero .search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px var(--brand-soft), 0 24px 48px -28px rgba(11, 79, 68, 0.35); }
.hero .search textarea {
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: 18px/1.5 var(--sans);
  padding: 24px 26px 16px;
  min-height: 120px;
  max-height: 280px;
}
.hero .search-bar { gap: 10px 14px; padding: 12px 14px 12px 22px; border-top: 1px solid var(--line-soft); }
/* AI off (LEX_AI=off, 8.10.2026): no switch under the question, so one row,
   the question and "Szukaj" beside it (the button at the last line of
   a longer question); "×" without its word */
.hero .search.one-row { flex-direction: row; align-items: flex-end; }
.hero .search.one-row textarea { flex: 1; min-width: 0; min-height: 0; padding: 19px 8px 19px 24px; }
.hero .search.one-row .search-bar { flex: none; padding: 10px 10px 10px 0; border-top: 0; }
.hero .search.one-row .options { display: none; }
.hero .search.one-row .search-actions { gap: 4px; }
.hero .search.one-row .clear-q span:not(.i) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero .search-actions .btn { padding: 11px 18px 11px 20px; gap: 8px; font-size: 15.5px; border-radius: 12px; }
.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.search-bar .options { padding: 0; }
.search-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.search-actions .btn { padding: 9px 13px 9px 16px; gap: 6px; font-size: 15px; border-radius: 11px; } /* the arrow glyph has its own side bearing */
.clear-q { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; }
.clear-q:hover { color: var(--fg); background: var(--tint); }
.clear-q.off { visibility: hidden; }
/* lighter than typed text, so the example does not look filled in */
.search textarea::placeholder { color: color-mix(in srgb, var(--faint) 70%, var(--surface)); opacity: 1; }
/* recent questions under the field (static/app.js, recentList): over the
   content, without shifting the page */
.search { position: relative; }
.recent-menu { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 15; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 15.5px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 2px 10px; }
.recent-item { display: flex; align-items: center; border-radius: 9px; }
.recent-item:hover, .recent-item:focus-within { background: var(--tint); }
.recent-q { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.recent-q span:not(.i) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-q .i { color: var(--faint); }
.recent-q .recent-sub { margin-left: auto; flex: none; padding-left: 8px; color: var(--faint); font-size: 13px; }
.recent-q:focus-visible, .recent-remove:focus-visible, .history-remove:focus-visible { outline-offset: -2px; }
.recent-remove, .history-remove { flex: none; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--rose); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.recent-remove:hover, .history-remove:hover { color: var(--rose-hover); background: var(--rose-soft); }
.recent-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.recent-foot .link-button { color: var(--muted); }
.btn {
  border: 0;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 22px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn:has(.i) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { background: var(--brand-hover); }
.btn.secondary { background: var(--brand-soft); color: var(--brand-ink); }
.btn.secondary:hover { background: var(--brand-line); }
/* a link drawn as a button keeps its text colour on hover (a:hover would
   paint it in the colour of the background) */
a.btn { display: inline-block; text-decoration: none; }
a.btn:hover { color: var(--on-brand); text-decoration: none; }
a.btn.secondary:hover { color: var(--brand-ink); }
/* a smaller button inside cards and fields (docs/design-system.md) */
.btn.sm { padding: 8px 14px; font-size: 14.5px; border-radius: 10px; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.secondary:disabled:hover { background: var(--brand-soft); }
.btn:not(.secondary):disabled:hover { background: var(--brand); }
/* the field (docs/design-system.md): one look for every place where you type
   a question or search — brand border with a soft ring, the button inside
   on the right (Orzeczenia, „Zapytaj o to orzeczenie”) */
.field, .doc-search { display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border: 1.5px solid var(--brand); border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); transition: border-color 0.12s, box-shadow 0.12s; }
.field:focus-within, .doc-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-line); }
.field > .i-search, .doc-search > .i-search { flex: none; width: 18px; height: 18px; color: var(--brand); }
.field input, .doc-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: 16.5px/1.45 var(--sans); padding: 8px 0; }
.field input::placeholder, .doc-search input[type="search"]::placeholder { color: color-mix(in srgb, var(--faint) 78%, var(--surface)); opacity: 1; }
.field .btn { padding: 9px 13px 9px 16px; gap: 6px; font-size: 15px; border-radius: 9px; }
.field textarea { flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; resize: none; background: transparent; color: var(--fg); font: 16.5px/1.45 var(--sans); padding: 8px 0; }
.field textarea::placeholder { color: color-mix(in srgb, var(--faint) 78%, var(--surface)); opacity: 1; }
.field:has(textarea) { align-items: flex-end; }
/* suggestions under a field: example questions as outlined pills, a click
   puts the question into the field (as the home page examples) */
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion, .examples button, .examples a { white-space: nowrap; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14.5px; line-height: normal; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.suggestion:hover, .examples button:hover, .examples a:hover { border-color: var(--brand-line); color: var(--brand-ink); background: var(--brand-soft); text-decoration: none; }
/* the home page examples: grey filled pills (design "Strona główna v2") */
.examples button, .examples a { border-color: transparent; background: var(--chip-bg); padding: 6px 13px; }
/* a card: a box on the page for one thing (summary, settings, a plan) */
.card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.options {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 2px;
  font-size: 14px;
  color: var(--muted);
}
.options:empty { display: none; }
/* przełącznik wyjaśnienia: jedno ustawienie zamiast list wyboru */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch .track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #d3d6d0; transition: background 0.15s; }
.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(21, 24, 28, 0.25);
  transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: 0.55; }
.switch-label { font-weight: 600; color: var(--fg); font-size: 14.5px; }
.quota-note { font-size: 13.5px; color: var(--faint); }
.quota-note:empty { display: none; }

/* ——— wyniki: warstwy ——— */

.layer { margin-top: 76px; }
.layer.first { margin-top: 0; }
.layer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 6px; }
.layer-head h2, .section-head h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.section-note { color: var(--muted); font-size: 15px; margin: 4px 0 22px; line-height: 1.55; }
.section { margin-top: 64px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.section-head .meta { color: var(--faint); font-size: 14px; white-space: nowrap; }
.refining { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; margin: 0 0 20px; }
/* results skeleton (static/app.js, resultsSkeleton): at once, shaped like the
   provision box and the explanation; a calm pulse, no motion with reduced
   motion */
/* the bar along the top while the next page loads (static/progress.js,
   only after a second of waiting): fades in at a fifth of the width, then
   towards the end, slower and slower; the new page replaces it */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 3px; background: var(--brand); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.nav-progress.going { opacity: 1; transform: scaleX(0.94); animation: nav-progress 12s cubic-bezier(0.1, 0.7, 0.2, 1) both, fade 0.2s ease; }
@keyframes nav-progress { from { transform: scaleX(0.2); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skeleton { animation: fade 0.2s ease both; }
.skel-provision { margin: 0 0 24px; }
.skel-line { display: block; height: 12px; border-radius: 6px; background: var(--line); }
.skel-text .skel-meta { width: 34%; height: 11px; margin: 2px 0 4px; }
.skel-text { display: grid; gap: 15px; padding: 20px 26px 22px; border-left: 3px solid var(--line-strong); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); }
.skel-text .skel-line { height: 13px; background: #e6e8e2; }
.skel-answer .layer-head { margin-bottom: 18px; }
.skel-law { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.skel-para { display: grid; gap: 16px; }
.skel-para .skel-line { height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .skel-line { animation: skel-pulse 1.6s ease-in-out infinite; }
  .skel-provision:nth-of-type(2) .skel-line, .skel-explain .skel-line { animation-delay: 0.2s; }
}
@keyframes skel-pulse { 50% { opacity: 0.5; } }
/* motion (owner 6.10.2026): what comes in rises a little and fades in, one
   part after another; nothing moves with reduced motion */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
/* one motion for everything that comes onto a page (owner 6.10.2026): the
   search results, the home page, the server pages and a group picked on
   /ustawy rise the same way, part after part every --enter-step */
:root { --enter-time: 0.42s; --enter-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --enter-step: 0.06s; }
@keyframes landed {
  0%, 25% { background-color: var(--brand-soft); box-shadow: 0 0 0 10px var(--brand-soft); }
  100% { background-color: transparent; box-shadow: 0 0 0 10px transparent; }
}
@media (prefers-reduced-motion: no-preference) {
  .results > :not(.skeleton):not(.first), .layer.first > :not(.lawcard), .lawcard > *, .hero ~ .home-section, .cond-card, .verdict-slot > .verdict { animation: rise var(--enter-time) var(--enter-ease) backwards; }
  .lawcard > :nth-child(2) { animation-delay: var(--enter-step); }
  .lawcard > :nth-child(3) { animation-delay: calc(2 * var(--enter-step)); }
  .lawcard > :nth-child(4) { animation-delay: calc(3 * var(--enter-step)); }
  .lawcard > :nth-child(n + 5) { animation-delay: calc(4 * var(--enter-step)); }
  .results > :nth-child(n + 2):not(.skeleton):not(.first) { animation-delay: calc(5 * var(--enter-step)); }
  .cond-card:nth-child(2) { animation-delay: var(--enter-step); }
  /* page load (owner 6.10.2026): the home page title, field, examples one
     after another; on pages from the server their parts the same way; the
     act's text only fades in (thousands of lines, no movement) */
  .hero > *, main.doc > :not(.reader-grid):not(.acts-page), .acts-page > :not(.acts-group), .reader-grid > .act-head > * { animation: rise var(--enter-time) var(--enter-ease) backwards; }
  .hero > :nth-child(2), main.doc > :nth-child(2), .acts-page > :nth-child(2), .act-head > :nth-child(2) { animation-delay: var(--enter-step); }
  .hero > :nth-child(3), main.doc > :nth-child(3), .acts-page > :nth-child(3), .act-head > :nth-child(3) { animation-delay: calc(2 * var(--enter-step)); }
  .hero > :nth-child(4), main.doc > :nth-child(4), .acts-page > :nth-child(4), .act-head > :nth-child(4) { animation-delay: calc(3 * var(--enter-step)); }
  .hero > :nth-child(n + 5), main.doc > :nth-child(n + 5), .acts-page > :nth-child(n + 5), .act-head > :nth-child(n + 5) { animation-delay: calc(4 * var(--enter-step)); }
  /* the list of acts after the bar above it, all groups at once */
  .acts-page > .acts-group { animation: rise var(--enter-time) var(--enter-ease) backwards; animation-delay: calc(5 * var(--enter-step)); }
  .reader-grid > .toc-nav, .reader-grid > .law, .reader-grid > .law-on-day { animation: fade var(--enter-time) ease calc(2 * var(--enter-step)) backwards; }
  .hero ~ .home-section { animation-delay: calc(5 * var(--enter-step)); }
  /* the whole act: the part a link jumped to lights up softly for a moment,
     so it is clear where the page went (owner 6.10.2026) */
  .doc.reader .law :target { border-radius: 6px; animation: landed 1.6s ease-out; }
  .cond-card:nth-child(3) { animation-delay: 0.16s; }
}
.provisional { opacity: 0.6; transition: opacity 0.2s; }
.notice { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--amber); font-size: 14.5px; line-height: 1.55; }
.layer.first > .notice { margin: 0 0 28px; }

/* przepis dosłownie (karta „Co mówią przepisy”) */
.verbatim { font-size: 14px; color: var(--muted); white-space: nowrap; }
.law-state .day-pick .icon-btn { color: var(--brand); }
/* one style of headings in the results (docs/ux.md, stage 2): capitals only
   for the label above cards ("Do pełnego obrazu"); a collapsed section is
   plain text with a count, as "Więcej przepisów" (.more-all) */
.lawcard-group > h3 { margin: 40px 0 16px; }
/* separate matters of one question: the name over each main provision */
.lawcard-group.aspect > h3 { margin: 28px 0 12px; }
.layer-head + .lawcard-group.aspect > h3 { margin-top: 4px; }
.lawcard > .layer.explain { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); } /* right after the main provision */
/* without AI the offer right after the rating, which ends with a line */
.lawcard > .layer.explain.teaser { margin-top: 8px; padding: 18px 22px; border-top: 1px dashed var(--brand-line); }
/* the answer first (owner 8.10.2026), the provisions right under it */
.results > .layer.explain:first-child, .results > .calc:first-child { margin-top: 0; }
.results > :is(.calc, .layer.explain) + :is(.layer.explain, .layer.first) { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
/* rows under the explanation: case law and earlier wordings, opening in place */
.prov-rows { margin-top: 28px; border-top: 1px solid var(--line); }
.prov-row { border-bottom: 1px solid var(--line); }
.prov-row > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 2px; font-size: 16px; color: var(--text); }
.prov-row > summary::-webkit-details-marker { display: none; }
.prov-row > summary > .i:first-child { color: var(--muted); width: 1.15em; height: 1.15em; }
.prov-row > summary .g-count { color: var(--faint); font-size: 15px; }
.prov-row > summary .i-chevron-down { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.prov-row[open] > summary .i-chevron-down { transform: rotate(180deg); }
.prov-row > summary:hover { color: var(--fg); }
.row-body { padding: 0 2px 18px; }
.row-more { margin: 10px 0 0; font-size: 15px; }
/* case law in a row and in the panel: who and when, signature, one sentence */
.refs.practice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; columns: auto; }
.practice-list li { display: grid; gap: 4px; padding: 0; border: 0; }
.practice-list .pr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14.5px; }
.practice-list .pr-head a { font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.practice-list .pr-head a:hover { color: var(--brand); text-decoration: underline; }
.practice-list .kind { color: var(--faint); }
.practice-list .ctx-text { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.55; }
.other-acts { display: flex; flex-direction: column; gap: 4px; }
.other-acts button { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.other-acts button:hover { background: var(--tint); }
.oa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oa-name { font-size: 16px; font-weight: 600; color: var(--fg); }
.oa-units { margin-left: 10px; font-size: 14px; font-weight: 400; color: var(--muted); }
/* the beginning of the first provision, fading out after two lines */
.oa-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--text); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.oa-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 14px; color: var(--brand); white-space: nowrap; }
.oa-go .i { width: 1em; height: 1em; }
.answer-head:empty { display: none; }
.layer.explain > .layer-head { margin-bottom: 12px; }
.answer > .answer-head { margin-bottom: 12px; }
/* the rows, other provisions, the rating and "Więcej przepisów" closer
   together: one line between them, not two */
.verdict-slot { align-self: center; }
.lawcard-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 20px 0; font-size: 16px; font-weight: 500; color: var(--text); }
.lawcard-group > summary::-webkit-details-marker { display: none; }
.lawcard-group > summary::before { content: "›"; color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.15s; width: 12px; }
.lawcard-group[open] > summary::before { transform: rotate(90deg); }
.lawcard-group > summary:hover { color: var(--fg); }
.lawcard-group > summary .g-count, .more-all > summary .g-count { color: var(--faint); font-size: 14px; font-weight: 500; }

.provision { margin-bottom: 30px; }
.provision.primary { margin-bottom: 36px; }
/* the provision as one box (redesign "Kierunek A", 5.10.2026): source line,
   text and actions on the law background with the brand line on the left */
.prov-box { padding: 18px 26px 16px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); }
.prov-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 10px; }
/* the main provision (design "Szukaj", 6.10.2026): its place in the act on
   top, "Cały przepis" as an icon on the right, the number as a heading */
.provision.primary .prov-head { flex-wrap: nowrap; margin-bottom: 8px; }
.prov-path { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; color: var(--muted); }
.prov-path a { color: var(--muted); }
.prov-path a:hover { color: var(--brand); }
.prov-path .prov-act { color: var(--brand-ink); font-weight: 600; }
.prov-path .sep { color: var(--faint); }
.prov-whole { flex: none; align-self: flex-start; margin: -5px -10px -5px auto; width: 30px; height: 30px; border: 0; background: none; }
.prov-whole .i { width: 16px; height: 16px; }
.provision.small .prov-whole { margin: -4px -12px -4px auto; width: 26px; height: 26px; }
.provision.small .prov-whole .i { width: 15px; height: 15px; }
.prov-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.prov-title .prov-label:hover { text-decoration: none; }
.provision.primary .prov-text .ln.hit { margin-left: -10px; padding: 6px 10px; padding-left: calc(10px + var(--d, 0) * 22px); border-radius: 8px; background: var(--brand-soft); }
/* under the main provision: "Udostępnij" and "…" */
.prov-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 4px; margin: 12px -10px 0 0; }
.prov-tools > .toolbar { display: contents; }
.prov-tools .icon-btn { width: 32px; height: 32px; margin: 0; }
.more-menu .dropdown-menu { min-width: 240px; }
.more-menu .dropdown-menu hr { height: 1px; margin: 4px 6px; border: 0; background: var(--line); }
.more-menu .dropdown-menu .i-external-link { width: 0.85em; height: 0.85em; }
.src-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 14.5px; font-weight: 600; color: var(--brand-ink); }
.src-line a, .src-line .prov-act { color: inherit; }
.src-line a:hover { color: var(--brand); }
.prov-label { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.prov-label:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
/* tekst ustawy: wyraźnie inny niż objaśnienia, przez tło i pionową linię */
.law-quote, .prov-text {
  margin: 0;
  padding: 20px 24px 20px 26px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--law-bg);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--fg);
}
.provision.small .prov-text { font-size: 16px; line-height: 1.65; color: var(--text); padding: 12px 18px 12px 20px; }
.prov-box .prov-text { padding: 0; border: 0; border-radius: 0; background: none; font-size: 18px; line-height: 1.65; }
.provision.small .prov-box { padding: 12px 20px; border-left-color: var(--brand-line); }
.provision.small .prov-head { flex-wrap: nowrap; margin-bottom: 4px; }
.provision.small .src-line { font-size: 14px; }
.provision.small .src-line .prov-label { color: var(--fg); }
.lawcard-group > .provision.small { margin-bottom: 14px; }
.provision.small .prov-box .prov-text { padding: 0; font-size: 16px; }
.prov-text .ln { padding-left: calc(var(--d, 0) * 22px); margin: 7px 0; }
.prov-text .hd { font-weight: 650; margin-right: 6px; }
.prov-text .gapline, .prov-text .gap { color: var(--faint); font-size: 14px; }
.prov-text .repealed { color: var(--faint); font-style: italic; }
.prov-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13.5px; color: var(--faint); }
/* a table from the text as in the Journal of Laws (page.table_layout): a
   header in bold, captions across the table, numbers centred */
.law-table { border-collapse: collapse; width: 100%; margin: 10px 0; font: 14.5px/1.5 var(--sans); }
.law-table td, .law-table th { border: 1px solid var(--line-strong); padding: 5px 10px; vertical-align: top; text-align: left; }
.law-table th { font-weight: 600; color: var(--fg); background: color-mix(in srgb, var(--line) 45%, transparent); vertical-align: middle; }
.law-table td.num { white-space: nowrap; text-align: center; }

mark { background: none; color: inherit; }
.m-value { font-weight: 700; background: linear-gradient(transparent 56%, #ffe9a8 56%); padding: 0 1px; }
.m-value-cond { font-weight: 600; }
.m-cond { font-weight: 600; color: var(--amber); }
.m-time { text-decoration: underline 2px var(--brand-line); text-underline-offset: 3px; }
.m-modal { font-weight: 700; text-decoration: underline 2px var(--brand); text-underline-offset: 3px; }
.m-term { font-weight: 700; background: linear-gradient(transparent 56%, #d3f0df 56%); }
.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 30% { background: var(--mark-flash); } 100% { background: transparent; } }

/* ——— „Co to oznacza”: wyjaśnienie z modelu, oznaczone i wyciszone ——— */

.answer { margin-top: 0; }
.answer + .answer, .followup-answer { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.answer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 6px; }
.answer-head h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.answer-head h2.sub { font-size: 18px; }
.answer-date { margin: 4px 0 0; color: var(--faint); font-size: 13.5px; }
/* "Czy to odpowiada na Twoje pytanie?" as a visible card with green and red
   thumbs (5.10.2026: every answer here is valuable feedback) */
/* right under the main provision (owner 6.10.2026), the buttons as pills
   like the panel's, the thumbs in green and red */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 36px 0 0; }
.rating:empty { display: none; }
/* one provision at a time under the main one (design "Szukaj v2",
   8.10.2026): its question under each, a line closing it */
.rating-flow > .rating { margin: 4px 0 32px 2px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.rating-flow > .provision.primary { margin-bottom: 16px; animation: rise var(--enter-time, 0.35s) var(--enter-ease, ease-out) backwards; }
.lawcard > .provision.primary:has(+ .rating-flow) { margin-bottom: 16px; }
.rating-q { margin: 0; color: var(--text); font-size: 17px; font-weight: 500; }
.rating-no { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; }
.rating-no .i { width: 14px; height: 14px; color: var(--rose); }
.rating-all { margin-left: auto; font-size: 14px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; white-space: nowrap; }
.rating-all:hover { color: var(--brand); text-decoration-color: currentColor; }
/* the footnote of the explanation beside the provision's number */
.prov-cite { margin-left: 2px; vertical-align: 4px; }
.rating-q.thanks { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 600; }
.rating-buttons { display: inline-flex; gap: 10px; }
.rate { display: inline-flex; align-items: center; gap: 9px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.rate.yes { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.rate.no { border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
.rate .i { width: 1.15em; height: 1.15em; }
.rate.yes { color: var(--green); }
.rate.yes:hover { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.rate.no { color: var(--rose); }
.rate.no:hover { background: var(--rose-soft); border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
/* "Nie": what did not fit, reasons as chips and a line of text */
.rating-why { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reason { padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.reason:hover { border-color: var(--brand-line); color: var(--brand); }
.reason[aria-pressed="true"] { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.rating-note { display: flex; gap: 10px; align-items: center; }
.rating-note input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.rating-note input:focus { outline: 0; border-color: var(--brand); }
.rating-keep { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-right: auto; }
.rating-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rating-undo { font-size: 14px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.rating-undo:hover { color: var(--brand); text-decoration-color: currentColor; }
.verdict { font-size: 13px; line-height: 16px; font-weight: 600; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.verdict.wprost { background: var(--green-soft); color: var(--green); }
.verdict.zalezy { background: var(--amber-soft); color: var(--amber); }
.verdict.brak { background: var(--slate-soft); color: var(--slate); }
.auto-note { margin: 0 0 28px; font-size: 13.5px; line-height: 1.6; color: var(--faint); }
.layer.explain > .answer + .auto-note { margin: 18px 0 0; }
.ai-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--slate); background: var(--slate-soft); border-radius: 999px; padding: 2px 9px; margin-right: 4px; vertical-align: 1px; }
.layer.explain > .layer-head { align-items: center; }
.layer.explain > .layer-head h2 { display: flex; align-items: center; gap: 10px; }
.layer-head h2 .ai-badge { margin: 0; padding: 4px 10px; font-size: 12.5px; line-height: 16px; letter-spacing: 0.01em; }
.answer-text { font-size: 18px; line-height: 1.75; color: var(--text); }
.answer-text p { margin: 0 0 12px; }
.answer-text ul { margin: 0 0 12px; padding-left: 1.3em; }
.answer-text li { margin: 0 0 4px; padding-left: 2px; }
.answer-text li::marker { color: var(--faint); }
.answer-text.streaming > :last-child::after, .answer-text.streaming > ul:last-child > li:last-child::after { content: "▍"; color: var(--brand); animation: blink 1s steps(2) infinite; margin-left: 2px; }
.answer-text.streaming > ul:last-child::after { content: none; }
@keyframes blink { 50% { opacity: 0; } }
.cite {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  margin: 0 1px 0 2px;
  border: 0;
  border-radius: 999px; /* a circle; two digits make it a pill */
  background: var(--brand-soft);
  color: var(--brand-ink);
  font: 700 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
  cursor: pointer;
}
.cite:hover { background: var(--brand); color: var(--on-brand); }
.cite.flash { animation: cite-flash 1.8s ease-out; }
@keyframes cite-flash { 0%, 40% { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px var(--brand-line); } }
.cites { white-space: nowrap; margin-left: 3px; }
.amount-check { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--rose-soft); color: var(--rose); font-size: 14.5px; line-height: 1.55; }
.answer-foot { margin-top: 20px; color: var(--faint); font-size: 13.5px; line-height: 1.55; }
.answer .pending { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; padding: 6px 0; }
.warn { color: var(--orange); }
.eta { display: flex; flex-direction: column; gap: 10px; width: 100%; color: var(--muted); font-size: 15px; }
.eta-bar { height: 6px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.eta-fill { width: 0; height: 100%; background: var(--brand); border-radius: 999px; }
/* dopytanie (design "Szukaj"): pytania od modelu z szybkimi odpowiedziami,
   pod nimi pole i „Uściślij wyjaśnienie”; bez pytań samo pole „Dopytaj” */
/* grey like the law boxes (design "Szukaj v2", 8.10.2026) */
.ask-more { margin-top: 40px; padding: 22px 24px 24px; border-radius: 16px; background: var(--law-bg); }
.ask-more-label { margin: 0 0 10px; }
.ask-more-questions .ask-value { flex: 0 1 220px; min-width: 0; padding: 7px 12px; font-size: 16px; }
.ask-more-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 4px; }
.ask-more-head > span { font-size: 14px; color: var(--muted); }
.ask-more-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); }
.ask-more-questions { list-style: none; margin: 0 0 18px; padding: 0; }
.ask-more-questions li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ask-more-questions p { flex: 1 1 320px; margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--text); }
.seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
.seg button { padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.seg button:hover { color: var(--brand-ink); }
.seg button[aria-checked="true"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.ask-more-questions .seg { flex-wrap: wrap; max-width: 100%; } /* four answers and "Nie wiem" on a phone */
.followup { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
/* the follow-up question: the standard field (.field), its button beside */
.followup-field { flex: 1 1 320px; display: flex; min-width: 0; padding: 4px 4px 4px 14px; border: 1.5px solid var(--brand); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); transition: box-shadow 0.12s; }
.followup-field:focus-within { box-shadow: 0 0 0 5px var(--brand-line); }
.followup input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px/1.4 var(--sans); color: var(--fg); padding: 7px 0; }
.followup input::placeholder { color: var(--faint); }
.followup textarea.prepared { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px/1.4 var(--sans); color: var(--fg); padding: 7px 0; resize: none; overflow: hidden; cursor: pointer; }
.followup .btn { white-space: nowrap; }
.followup .btn.waiting { background: var(--slate-soft); color: var(--faint); }
.btn-note { margin-left: 8px; font-weight: 400; opacity: 0.8; }
.asked { margin: -2px 0 12px; color: var(--muted); font-size: 15.5px; font-style: italic; white-space: pre-line; }
.understood { margin-top: 14px; color: var(--muted); font-size: 14px; }
.understood summary { cursor: pointer; color: var(--muted); }
.understood ul { margin: 8px 0 0; padding-left: 20px; }
.pro-hint { margin-top: 44px; }
p.pro-hint { color: var(--faint); font-size: 15px; }
/* reszta przepisów zwinięta pod jednym nagłówkiem */
.more-all { margin-top: 20px; border-top: 1px solid var(--line); }
.more-all > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 20px 0; font-size: 16px; font-weight: 500; color: var(--text); }
.more-all > summary::-webkit-details-marker { display: none; }
.more-all > summary::before { content: "›"; color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.15s; width: 12px; }
.more-all[open] > summary::before { transform: rotate(90deg); }
.more-all > summary:hover { color: var(--fg); }
.more-all > .section:first-of-type { margin-top: 8px; }
.more-group > h3 { margin: 12px 0 14px; font-size: 15px; font-weight: 600; color: var(--fg); }
.more-group + .more-group, .more-group + .understood { margin-top: 28px; }
.more-provisions { padding-bottom: 8px; }
.more-all + .more-all, .more-all + .stance-layer > .more-all, .stance-layer + .more-all { margin-top: 0; }
/* parts under "Więcej przepisów" and the other matching provisions under
   the main one: folded, a title with a count (owner 6.10.2026) */
/* folded parts under the results follow each other with one line between */
/* right after the rows under the explanation, in the same list (owner
   6.10.2026); without the rows above, a line on top */
.results > .layer:not(.first) > .more-row:first-child { margin-top: -28px; }
.results > .layer.first:not(:has(.prov-rows)) + .layer > .more-row:first-child { margin-top: 0; border-top: 1px solid var(--line); }
/* a small provision: the same box everywhere, the note at the bottom */
.provision.small, .provision.found { margin-bottom: 16px; }
.prov-sub { margin: -2px 0 6px; font-size: 14px; color: var(--muted); }
.prov-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13px; color: var(--faint); }
.prov-note .by { color: var(--muted); }
/* chips in the note sit on the law background: the page colour and a line */
.prov-note .chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.provision.found .prov-text .law { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.65; }
.provision.found.compact .law .ln { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* podobne sprawy pod wynikami (etap G3a) */
.similar > .section-note { margin: 0 0 4px; font-size: 14.5px; }
.similar .refs.results li:last-child { border-bottom: 0; }
.similar .chip { margin-left: 8px; vertical-align: 1px; }

/* mapa warunków: przepis i jego skutek, pod nim warunki i wyjątki, każdy
   z oceną słowami w osobnym wierszu (✓ spełniony, ✗ niespełniony,
   ? do ustalenia); pismo jak w tekście, nie drobny dopisek */
.cond-map { margin: 4px 0 18px; }
/* the condition map folded under the answer text (owner 8.10.2026) */
.cond-fold { margin: 8px 0 4px; border-top: 1px solid var(--line); }
.cond-fold .cond-cards { margin-top: 4px; }
.cond-map h3 { margin-top: 40px; margin-bottom: 14px; }
/* in short: three cards under the text (redesign "Kierunek A", 5.10.2026) */
.cond-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 22px 0 6px; }
.cond-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cond-card h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.cond-card.ok h4 { color: var(--green); }
.cond-card.warn h4 { color: var(--amber); }
.cond-card.unknown h4 { color: var(--muted); }
.cond-card.none h4 { color: var(--slate); }
.cond-fact { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.cond-card ul { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.cond-card li + li { margin-top: 8px; }
.cond-card .cond-ask { margin-top: 10px; font-size: 14px; }
.cond-details { margin-top: 14px; }
.cond-details > summary { cursor: pointer; color: var(--muted); font-size: 14.5px; padding: 6px 0; }
.cond-details[open] > summary { margin-bottom: 14px; }
.cond-details .cond-note { color: var(--amber); font-weight: 500; }
.cond-note { text-transform: none; letter-spacing: 0; color: var(--amber); font-weight: 600; }
.cond-provision { border-top: 1px solid var(--line); padding: 24px 0 10px; }
.cond-provision:first-of-type { border-top: 0; padding-top: 0; }
.cond-head { font-weight: 600; font-size: 17px; }
.cond-effect { margin: 8px 0 12px; font-size: 17px; line-height: 1.65; color: var(--fg); }
.cond-list { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.55; color: var(--text); }
.cond-list li { display: flex; gap: 12px; padding: 9px 0; }
.cond-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 13px/1 var(--sans); margin-top: 1px; }
.cond-list li.ok .cond-icon { background: var(--green-soft); color: var(--green); }
.cond-list li.no .cond-icon { background: var(--slate-soft); color: var(--slate); }
.cond-list li.warn .cond-icon { background: var(--amber-soft); color: var(--amber); }
.cond-list li.unknown .cond-icon { background: var(--amber-soft); color: var(--amber); }
.cond-status { margin-top: 2px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.cond-status b { font-weight: 600; }
.cond-list li.ok .cond-status b { color: var(--green); }
.cond-list li.no .cond-status b { color: var(--slate); }
.cond-list li.warn .cond-status b { color: var(--amber); }
.cond-ask { font-size: inherit; }
.cond-list li.unknown .cond-status b { color: var(--amber); }
.cond-kind { font-weight: 650; color: var(--fg); }
mark.from-law { cursor: help; }

/* ——— powiązane przepisy: lista kart ——— */


.law { font-size: 17px; line-height: 1.7; color: var(--text); margin: 12px 0 4px; }
.law .ln { padding-left: calc(var(--d, 0) * 24px); margin: 4px 0; }
.law .hd { font-weight: 650; margin-right: 6px; color: var(--fg); }
.law a.hd { color: var(--brand); }
.law .heading { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--muted); margin: 26px 0 10px; letter-spacing: 0.01em; }
.law .heading-title { margin-left: 10px; font-weight: 500; color: var(--text); }
.doc-text a.ref-link, .law a.ref-link, .prose a.ref-link { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* links to the law stand out everywhere (owner 7.10.2026: green alone was
   too faint); defined terms and long act names stay at text weight */
a.ref-link:not(.def) { font-weight: 600; }
a.ref-link.act { font-weight: 500; }
.doc-text a.web-link { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-text a.web-link:hover { text-decoration-color: var(--brand); }
.doc-text a.ref-link:hover, .law a.ref-link:hover, .prose a.ref-link:hover { text-decoration-color: var(--brand); background: var(--brand-soft); border-radius: 3px; }
.law a.ref-link.ext::after, .prose a.ref-link.ext::after { content: "↗"; font-size: 0.72em; margin-left: 2px; vertical-align: 0.3em; }
.law .repealed { color: var(--faint); font-style: italic; }
.law .annex { white-space: pre-line; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.law.clip { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.more { margin-top: 2px; }
.more button { border: 0; background: none; padding: 0; color: var(--brand); font-size: 14px; cursor: pointer; }
.more button:hover { text-decoration: underline; text-underline-offset: 3px; }

.why { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--faint); }
.why .by { color: var(--faint); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--tint);
  color: var(--muted);
}
.chip.src { background: var(--tint); color: var(--muted); }
.chip.src.llm { background: var(--slate-soft); color: var(--slate); }
.chip.general { background: var(--slate-soft); color: var(--slate); }
.chip.cocite { background: var(--amber-soft); color: var(--amber); }
.chip.ref { background: var(--slate-soft); color: var(--slate); }
.chip.def { background: var(--green-soft); color: var(--green); }
.chip.pending { background: var(--orange-soft); color: var(--orange); }
.chip.recent { background: var(--brand-soft); color: var(--brand-ink); }
.why .from a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.why .from a:hover { color: var(--brand); text-decoration-color: currentColor; }

/* dołożone: zwinięte grupy */
.group { border-top: 1px solid var(--line); padding: 2px 0; }
.group:last-child { border-bottom: 1px solid var(--line); }
.group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 16px 4px; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: "›"; color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.15s; transform: translateY(1px); width: 12px; }
.group[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.group .g-title { font-size: 16.5px; font-weight: 650; color: var(--fg); }
.group .g-hint { color: var(--muted); font-size: 14px; flex: 1; }
.group .g-count { color: var(--faint); font-size: 14px; }
.group .cards { padding: 0 0 12px; }

.empty, .loading, .error-box { text-align: center; color: var(--muted); padding: 56px 0; font-size: 16px; }
.error-box { color: var(--orange); }
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s linear infinite;
  vertical-align: -3px;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ——— panel przepisu ——— */

.scrim { position: fixed; inset: 0; background: var(--overlay); z-index: 30; animation: fade 0.18s; }
@keyframes fade { from { opacity: 0; } }
.panel {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(720px, calc(100vw - 24px));
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slide 0.2s ease-out;
}
.panel:focus { outline: none; } /* fokus z kodu dla czytnika; obramówki mają elementy w środku */
@keyframes slide { from { transform: translateX(28px); opacity: 0.5; } }
.panel.closing { animation: slide-out 0.18s ease-in forwards; }
.scrim.closing { animation: fade-out 0.18s ease-in forwards; }
@keyframes slide-out { to { transform: translateX(28px); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes page-in { from { transform: translateX(100%); } }
@keyframes page-out { to { transform: translateX(100%); } }
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.panel-bar > .icon:first-child { margin-left: -8px; }
/* the bar: back, where the provision is (breadcrumbs, the act named once,
   capitalised), its icons, close (owner 6.10.2026) */
.panel-title { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-title.crumbs > * + *::before { content: "›"; display: inline-block; margin: 0 7px 0 5px; color: var(--faint); }
.panel-title.crumbs a, .panel-title.crumbs .link-button { color: var(--muted); font-size: inherit; }
.panel-title.crumbs a:hover, .panel-title.crumbs .link-button:hover { color: var(--brand); }
/* the heart in the top right corner of the provision's text, sharing under
   it on the right (owner 6.10.2026) */
.unit-text { position: relative; }
/* "Cytuj", "Udostępnij" and the folder under the text, on the right (design
   "Szukaj v2", 8.10.2026) */
.unit-tools { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.unit-tools .actions-bar { margin: 0; padding: 0; border: 0; }
.unit-text > .law-quote { padding-right: 56px; }
/* the book in the corner of the text: the provision in the act */
.unit-in-act { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; margin: 0; color: var(--muted); }
.unit-in-act .i { width: 20px; height: 20px; }

.icon { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: var(--muted); font-size: 17px; }
/* icon-only buttons hover like the flat ones (docs/design-system.md) */
.icon:hover { background: var(--brand-soft); color: var(--brand); }
.icon .i { width: 18px; height: 18px; }
.panel-body { overflow-y: auto; overscroll-behavior: contain; padding: 30px 40px 56px; }

.unit .crumbs { font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.unit .crumbs > * + *::before { content: "›"; display: inline-block; margin: 0 6px 0 2px; color: var(--faint); }
.unit .crumbs a { color: var(--muted); }
.unit .crumbs a:hover { color: var(--brand); text-decoration: none; }
.unit h1 { font-size: 30px; line-height: 1.2; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; }
.unit .sub { color: var(--muted); font-size: 15.5px; }
.unit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 10px 0 4px; font-size: 14.5px; }
.unit-meta > a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.unit-meta > a .i-external-link { width: 0.9em; height: 0.9em; }
.unit .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
/* strona przepisu: kopiuj link, kopiuj cytat, udostępnij (static/share.js) */
.toolbar.share { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pill {
  font-size: 14px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--brand-line); color: var(--brand); text-decoration: none; }
.pill.primary { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.pill.primary:hover { background: var(--brand-line); color: var(--brand-ink); }
/* button with an icon (web/page.py, icon): icon before the label, menu chevron after */
.pill:has(.i) { display: inline-flex; align-items: center; gap: 7px; }
.pill .i { color: var(--muted); }
.pill:hover .i, .pill.primary .i { color: inherit; }
.pill .i-chevron-down { width: 0.95em; height: 0.95em; margin: 0 -3px 0 -1px; }
/* menu under a button (web/page.py, dropdown; static/share.js) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.dropdown[open] > summary .i { color: inherit; }
.dropdown-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; min-width: 250px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.dropdown-menu.to-left { left: auto; right: 0; }
.dropdown-menu.fit { min-width: 0; width: max-content; max-width: calc(100vw - 32px); }
/* small icon for a tool few people need — the calendar next to "stan na …"
   (page.icon_dropdown, static/app.js dayPicker); the name in title and aria-label */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px 0; border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover, details[open] > .icon-btn { background: var(--brand-soft); color: var(--brand); }
.state-day { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 15px; text-align: left; white-space: nowrap; cursor: pointer; }
.dropdown-menu button:hover, .dropdown-menu button:focus-visible { background: var(--tint); color: var(--fg); outline-offset: -2px; }
.dropdown-menu .i { color: var(--muted); }
.dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); font-size: 15px; white-space: nowrap; }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: var(--tint); color: var(--fg); text-decoration: none; outline-offset: -2px; }
.dropdown-menu .on-date { padding: 8px 10px 10px; }
/* the actions bar (web/page.py, actions_bar; docs/design-system.md): the
   page's actions in one row under its title and dates, the same place on
   every page — Cytuj, Udostępnij, then the page's own; flat buttons with an
   icon and a name, a menu under the ones that have one (owner 7.10.2026) */
.actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0 -10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* the share and keep toolbars dissolve into the bar; `.toolbar.keep` further
   down (its own margins) must not win, or its buttons sit 3 px lower */
.actions-bar > .toolbar, .actions-bar > .toolbar.keep { display: contents; }
.actions-bar > .folder-pick, .actions-bar > .keep-note { flex-basis: 100%; margin-left: 10px; }
.flat, .ghost, .actions-bar .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.flat .i, .ghost .i, .actions-bar .pill .i { width: 1.05em; height: 1.05em; color: inherit; }
.flat:hover, .ghost:hover, .actions-bar .pill:hover, .dropdown[open] > summary.flat { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.actions-bar .pill.primary, .actions-bar .pill[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-soft); }
.menu-note { margin: 0; padding: 8px 10px 6px; max-width: 320px; font-size: 14px; line-height: 1.5; color: var(--muted); white-space: normal; }
/* the note where the click was, after copying (owner 6.10.2026: "tooltip przy
   kursorze"; static/app.js tipAt, static/share.js) */
.click-tip { position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100vw - 16px); padding: 7px 12px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 14px; box-shadow: var(--shadow); pointer-events: none; animation: fade 0.12s ease; }
.click-tip .i { color: #9fe3cf; }
.unit .law { font-size: 18px; line-height: 1.75; margin-top: 20px; }
.unit .law-quote { margin-top: 20px; }
.unit .law-quote .law { margin: 0; padding: 0; }
.unit h2, .doc h2 { line-height: 1; margin: 40px 0 14px; }
.change { padding: 12px 16px; margin-bottom: 10px; border-radius: 12px; background: var(--orange-soft); font-size: 15px; }
.change.in-force { background: var(--brand-soft); }
.change .when { font-weight: 600; color: var(--fg); }
.change .units { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.refs { list-style: none; padding: 0; margin: 0; font-size: 15.5px; columns: 2; column-gap: 28px; }
.refs li { break-inside: avoid; padding: 4px 0; }
.refs .kind { color: var(--faint); font-size: 12.5px; margin-left: 6px; }
.terms { font-size: 16.5px; line-height: 1.7; color: var(--text); }
.source-note { margin-top: 40px; padding: 14px 18px; background: var(--tint); border-radius: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.source-note b { color: var(--text); font-weight: 600; }

/* wyszukiwarka w tekście (panel, strona przepisu, cała ustawa) */
.find {
  position: sticky;
  top: 72px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 22px -12px 6px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 14px;
}
.find input {
  flex: 1;
  min-width: 0;
  font: 15px/1.4 var(--sans);
  color: var(--fg);
  padding: 9px 12px 9px 36px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666e77' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 12px center;
}
.find input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.find input::-webkit-search-cancel-button { cursor: pointer; }
/* the count and the arrows inside the field at its right end, the arrows
   only with hits (owner 6.10.2026) */
.find-field { position: relative; flex: 1; min-width: 0; display: flex; }
.find-tools { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px; }
.find-arrows { display: inline-flex; }
.find-arrows[hidden] { display: none; }
.find-field:has(.find-count:not(:empty)) input { padding-right: 64px; }
.find-field:has(.find-arrows:not([hidden])) input { padding-right: 140px; }
.find-count { padding: 0 4px; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.icon.small { width: 32px; height: 32px; font-size: 15px; }
.panel-body .find { top: -30px; }
mark.found { background: #fff0a0; color: inherit; border-radius: 3px; }
mark.found.current { background: #ffc94d; box-shadow: 0 0 0 2px #ffc94d; }

/* ——— zmiany jak w GitHubie ——— */

ins, del { text-decoration: none; border-radius: 4px; padding: 1px 2px; }
ins { background: #abf2bc; color: #0f3d1d; text-decoration: underline; text-decoration-color: rgba(15, 61, 29, 0.45); text-underline-offset: 2px; }
/* zmiana nie tylko kolorem: dla czytników ekranu słowo przed i po (WCAG 1.4.1) */
ins::before, ins::after, del::before, del::after { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
ins::before { content: " [dodano: "; }
del::before { content: " [usunięto: "; }
ins::after, del::after { content: "] "; }
del { background: #ffcecb; color: #6e0b17; text-decoration: line-through; text-decoration-color: rgba(110, 11, 23, 0.45); }
.law .diffline { margin-left: calc(var(--d, 0) * 24px - 12px); padding: 4px 10px 4px 12px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
.law .diffline.add { background: #e6ffec; border-left-color: #1a7f37; }
.law .diffline.del { background: #ffebe9; border-left-color: #cf222e; }
.law .diffline.mod { background: #fff8e6; border-left-color: var(--diff-mod-line); }
.law .diffline.add::before, .law .diffline.del::before { font: 600 13px/1 var(--sans); margin-right: 8px; }
.law .diffline.add::before { content: "+"; color: #1a7f37; }
.law .diffline.del::before { content: "−"; color: #cf222e; }
.law .diffline .chip { vertical-align: 2px; }
.diffblock { margin: 6px 0 10px calc(var(--d, 0) * 24px); padding: 10px 14px; background: #fff8e6; border-left: 3px solid var(--diff-mod-line); border-radius: 0 8px 8px 0; font-size: 15.5px; }
.diffblock .cap { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 6px; }
.pill.diff-toggle.on { background: #fff8e6; border-color: #eed9a0; color: #7a5a06; }

/* ——— strony aplikacji: zmiany, historia, koszty, sprawdzian ——— */

.page-title { font-size: 38px; line-height: 1.12; font-weight: 700; margin: 4vh 0 12px; letter-spacing: -0.025em; }
.page-lead, .doc .lead { color: var(--muted); margin: 0 0 28px; font-size: 17px; line-height: 1.55; max-width: 640px; }
.day { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.day .date { font-size: 18px; line-height: 1.3; font-weight: 650; color: var(--fg); }
.day .date small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.5; font-weight: 400; margin-top: 2px; }
.day .item { margin-bottom: 16px; font-size: 15.5px; }
.day .item:last-child { margin-bottom: 0; }
.day .item .act { display: block; margin-bottom: 2px; }
.day .item .units { color: var(--muted); font-size: 14px; margin-top: 4px; }
.undated { margin: 24px 0; }
.undated summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.act-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); margin: 4px 0 8px; max-width: 100%; }
.act-pick select { font: inherit; color: var(--fg); padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); max-width: min(100%, 480px); }

.hint { color: var(--muted); font-size: 14.5px; margin: -4px 0 12px; line-height: 1.55; }
.hist-list { display: flex; flex-direction: column; gap: 12px; }
.hist { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hist-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.hist-head .when { font-weight: 600; }
.op { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--tint); color: var(--muted); white-space: nowrap; }
.op.dodanie { background: var(--green-soft); color: var(--green); }
.op.uchylenie { background: var(--rose-soft); color: var(--rose); }
.op.wyrazy, .op.brzmienie { background: var(--brand-soft); color: var(--brand-ink); }
.hist-diff { line-height: 1.6; font-size: 15px; }
/* recent or announced change of a provision, under the action bar
   (web/page.py _change_note, docs/design-system.md „Ramki i tekst”) */
.change-note { margin: 4px 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--info-soft); font-size: 14.5px; line-height: 1.55; }
.change-note p { margin: 0; }
.change-note p + p, .change-note details + p { margin-top: 6px; }
.change-note .badge { margin-right: 4px; }
.change-note summary { cursor: pointer; color: var(--brand); margin-top: 4px; width: fit-content; }
.change-note .hist-diff { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--surface); }
.hist > .hist-diff { margin-top: 8px; }
.hist-note { color: var(--muted); font-size: 14.5px; }
.hist-text summary { cursor: pointer; color: var(--brand); font-size: 14px; }
.hist-text div { margin-top: 8px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.hist-src { margin-top: 8px; font-size: 13px; color: var(--muted); }
.hist-stats { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.ver-text { white-space: pre-wrap; }
.hist.ver-now { border-color: var(--brand-line); }
.ver-pick { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14.5px; margin: 0 0 12px; }
.ver-pick .day-pick-box { left: 0; right: auto; }
.ver-at { margin: 0 0 18px; }
.ver-box { background: var(--tint); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chip-filter { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 14px; cursor: pointer; }
.chip-filter.on { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); font-weight: 600; }
.year { margin-bottom: 28px; }
.year-head { font-size: 22px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.event { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.event:last-child { border-bottom: 0; }
.event-date { font-weight: 600; font-size: 15px; }
.event-date small { display: block; font-weight: 400; color: var(--muted); }
.event-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 14px; }
/* the state of a document or an event (docs/design-system.md, „Etykiety”):
   one shape, the tone by meaning */
.badge, .badge-outdated { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--brand-soft); color: var(--brand-ink); }
.badge .i { width: 0.95em; height: 0.95em; }
.badge.ok { background: var(--green-soft); color: var(--green); }
.badge.pending { background: var(--orange-soft); color: var(--orange); }
.badge.warn, .badge-outdated { background: var(--amber-soft); color: var(--amber); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.off { background: var(--tint); color: var(--muted); }
.badge.removed { background: var(--rose-soft); color: var(--rose); }
.event.tekst-jednolity .badge { background: var(--tint); color: var(--muted); }
.event.wyrok-TK .badge { background: var(--amber-soft); color: var(--amber); }
.event.future .badge { background: var(--brand); color: var(--on-brand); }
.event-title { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
.event-note { font-size: 13px; color: var(--muted); }
.event-points { margin-top: 10px; }
.event-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.points-date { font-weight: 600; font-size: 14px; margin: 10px 0 4px; }
.points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.points li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.points .words { font-size: 14px; }
.muted { color: var(--muted); }
.digest { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--slate-soft); font-size: 15px; line-height: 1.6; }
.digest ul { margin: 8px 0; padding-left: 20px; }
.digest li + li { margin-top: 4px; }
.digest-lead { font-weight: 600; margin: 0 0 6px; }
.digest-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }

.cost-card { border-top: 1px solid var(--line); padding: 24px 0; }
.cost-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cost-head h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 650; }
.cost-head .meta { color: var(--muted); font-size: 14px; }
.meter { height: 8px; background: var(--tint); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.meter-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.stat-label { color: var(--muted); font-size: 13.5px; }
.stat-value { font-size: 26px; line-height: 1.3; font-weight: 650; color: var(--fg); margin-top: 2px; letter-spacing: -0.01em; }
.stat-note { color: var(--faint); font-size: 13px; }
.cost-note { color: var(--muted); font-size: 14px; margin: 16px 0 0; line-height: 1.55; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cost-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.cost-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.cost-table td:not(:first-child), .cost-table th:not(:first-child) { text-align: right; }
.sources-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 4px; }
.sources-table th { text-align: left; font-weight: 600; padding: 10px 12px 10px 0; vertical-align: top; width: 34%; }
.sources-table td { padding: 10px 12px 10px 0; color: var(--text); vertical-align: top; }
.sources-table td:last-child { color: var(--muted); white-space: nowrap; }
.sources-table tr { border-bottom: 1px solid var(--line); }

.back { margin: 0 0 8px; font-size: 14px; }
.filters .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 14px; padding: 6px 13px; }
.filters .chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); font-weight: 600; }
.case { border-top: 1px solid var(--line); padding: 20px 0; }
.case-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.case-sig { font-weight: 600; color: var(--fg); }
.case-head .grade { margin-left: auto; }
.grade { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.grade.good { background: var(--green-soft); color: var(--green); }
.grade.mid { background: var(--amber-soft); color: var(--amber); }
.grade.bad { background: var(--rose-soft); color: var(--rose); }
.grade.none { background: var(--slate-soft); color: var(--slate); }
.case-q { font-size: 17.5px; line-height: 1.5; font-weight: 650; color: var(--fg); margin: 10px 0 6px; }
.case-more { margin: 6px 0; font-size: 14.5px; color: var(--text); }
.case-more summary { cursor: pointer; color: var(--muted); }
.case-more p { white-space: pre-line; margin: 6px 0 0; }
.case-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.case-col { background: var(--tint); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; line-height: 1.6; }
.case-col h3 { margin: 0 0 8px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.case-col p { margin: 0 0 8px; }
.answer-text.small { font-size: 14.5px; line-height: 1.6; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 20px; }
.tile { border-top: 2px solid var(--brand-line); padding: 16px 0 4px; }
.tile-value { font-size: 44px; line-height: 1.1; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.tile-unit { font-size: 16px; line-height: 1; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tile-label { margin-top: 8px; font-size: 15.5px; color: var(--text); }
.tile-note { margin-top: 6px; font-size: 13.5px; color: var(--faint); }
.checkup-note { max-width: 680px; font-size: 16px; color: var(--text); }
.checkup-note.small { font-size: 14px; color: var(--muted); line-height: 1.55; }
.checkup-link { font-size: 15.5px; }
.models { margin: 40px 0 8px; }
.models h2 { font-size: 22px; line-height: 1.3; font-weight: 650; margin: 0 0 14px; }
.table-scroll { overflow-x: auto; margin: 0 0 14px; }
.models-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.models-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; line-height: 1.35; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.models-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.models-table small.ci { display: block; color: var(--faint); font-size: 12px; white-space: nowrap; }
.models-table .model-name { font-weight: 600; color: var(--fg); margin-right: 6px; }
.models-table .badge { margin-right: 4px; }
.cases-table tr.clickable { cursor: pointer; }
.cases-table tr.clickable:hover td { background: var(--tint); }
.cases-table .grade { display: inline-block; margin-bottom: 4px; }
.case-q-small { font-size: 14px; color: var(--text); margin-top: 4px; min-width: 220px; max-width: 360px; }
.answers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
/* na szerokim ekranie wyjaśnienia modeli obok siebie szerzej niż kolumna treści */
@media (min-width: 1100px) {
  .answers-grid { position: relative; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 64px)); }
}
.answer-col h3 .grade { margin-left: auto; }
.answer-col .cond-map { margin-top: 12px; }
.judge-conds { list-style: none; padding: 0; margin: 12px 0 8px; font-size: 13.5px; line-height: 1.5; }
.judge-conds li + li { margin-top: 4px; }
.judge-conds li.ok { color: var(--green); }
.judge-conds li.no { color: var(--rose); }
.urzad-conds { margin: 4px 0 8px; padding-left: 20px; }
.given-sources { list-style: none; padding: 0; margin: 8px 0; font-size: 14.5px; }
.given-sources summary { cursor: pointer; }
.given-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; background: var(--law-bg); border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 8px 12px; margin: 6px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ——— strony renderowane na serwerze (web/page.py, web/changes.py) ——— */

.doc .crumbs { font-size: 14px; color: var(--muted); margin: 8px 0 14px; }
.doc .crumbs a { color: var(--muted); }
.doc .crumbs a:hover { color: var(--brand); }
.doc h1 { font-size: 34px; line-height: 1.15; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.025em; }
.doc.reader h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; }
.doc.unit-page h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; }
/* state of a text as a dot and a word (redesign 5.10.2026), not a chip */
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--brand-ink); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.status.off { color: var(--muted); }
.status.off::before { background: var(--faint); }
.doc h1 .act, .doc h1 .sub { display: block; font-size: 16px; line-height: 1.45; font-weight: 400; color: var(--muted); margin-top: 8px; letter-spacing: 0; }
.doc h3 { font-size: 16.5px; line-height: 1.4; font-weight: 650; margin: 28px 0 8px; }
.doc .ttl { color: var(--muted); font-size: 16px; margin: 0 0 8px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 6px; font-size: 14.5px; color: var(--muted); }
.doc > .law, .unit-main > .law, .doc .reader-grid > .law { font-size: 18px; line-height: 1.75; margin-top: 20px; }
.doc > .law, .unit-main > .law { padding: 18px 22px 18px 24px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); }
/* strona przepisu: tekst prawa jest treścią strony, nie cytatem — bez tła
   i paska, jak na stronie całej ustawy (właściciel 8.10.2026) */
.doc.unit-page > .law, .unit-page .unit-main > .law { font-size: 19px; line-height: 1.7; padding: 0; margin-top: 26px; border: 0; border-radius: 0; background: none; }
.doc .hint { color: var(--muted); font-size: 14.5px; margin: 0 0 12px; }
.doc .source-note { margin-top: 24px; }
.doc .ctx li { margin-bottom: 8px; }
.doc .ctx-text { color: var(--muted); font-size: 14.5px; }
details.more-section { margin-top: 36px; border-top: 1px solid var(--line); }
details.more-section > summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; align-items: baseline; gap: 12px; }
details.more-section > summary::-webkit-details-marker { display: none; }
details.more-section > summary::before { content: "›"; color: var(--faint); font-size: 20px; line-height: 1; transition: transform 0.15s; width: 12px; }
details.more-section[open] > summary::before { transform: rotate(90deg); }
details.more-section > summary h2 { margin: 0; }
details.more-section > summary .g-hint { color: var(--muted); font-size: 14px; }
details.more-section > div { padding: 0 0 12px; }
/* /ustawy — "Przeglądaj prawo" (design "Ustawy", 6.10.2026; static/acts.js) */
main.doc.acts { max-width: 928px; padding-top: 40px; }
.acts-page h1 { margin: 0 0 14px; font-size: 36px; letter-spacing: -0.02em; }
.acts-lead { max-width: 600px; margin: 0 0 36px; font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.acts-search { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; border: 1.5px solid var(--brand); border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); transition: border-color 0.12s, box-shadow 0.12s; } /* the green frame of the question field on the home page */
.acts-search:focus-within { box-shadow: 0 0 0 5px var(--brand-line); }
.acts-search > .i { width: 18px; height: 18px; color: var(--brand); }
.acts-search:focus-within > .i { color: var(--brand); }
.acts-filter { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 13px 0; font: 16.5px var(--sans); color: var(--fg); }
.acts-filter::-webkit-search-cancel-button { display: none; }
.acts-filter::placeholder { color: color-mix(in srgb, var(--faint) 78%, var(--surface)); opacity: 1; } /* a hint, lighter than text */
.acts-clear { width: 32px; height: 32px; margin: 0; border: 0; background: none; color: var(--muted); }
.acts-clear:hover { background: var(--tint); color: var(--fg); }
.acts-groups { display: flex; max-width: 100%; }
/* the group: an ordinary button like the filters of the case law search
   (.pick), green only with a group picked (owner 7.10.2026) */
.acts-groups > summary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 10px 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 500; cursor: pointer; list-style: none; }
.acts-groups > summary::-webkit-details-marker { display: none; }
.acts-groups > summary:hover, .acts-groups[open] > summary { border-color: var(--brand-line); color: var(--brand-ink); }
.acts-groups.on > summary { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.acts-groups .lbl { color: var(--muted); white-space: nowrap; }
.acts-groups.on .lbl, .acts-groups > summary:hover .lbl { color: inherit; }
.acts-groups .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts-groups > summary .i { width: 1em; height: 1em; transition: transform 0.15s; }
.acts-groups[open] > summary .i { transform: rotate(180deg); }
.acts-groups .dropdown-menu { left: 0; right: auto; min-width: 300px; }
.acts-groups .dropdown-menu button { justify-content: space-between; gap: 12px; font-size: 14.5px; }
.acts-groups .dropdown-menu button[aria-checked="true"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.acts-groups .dropdown-menu .n { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
/* under the field: the group choice and, with a filter, how many acts match
   (the starred and the recent are over the field, owner 7.10.2026) */
.acts-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 18px 0 4px; scroll-margin-top: 88px; }
/* a group picked in the menu comes in softly, group after group */
@keyframes rise-again { from { opacity: 0; transform: translateY(12px); } } /* = rise; a new name restarts it */
.acts-page.ready > .acts-group { animation: none; }
.acts-page.ready > .acts-group.entering { animation: rise-again var(--enter-time) var(--enter-ease) backwards; }
.acts-only { font-size: 14.5px; }
.acts-mine { display: flex; flex-direction: column; gap: 24px; margin: 0 0 32px; }
.acts-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.acts-label { padding-left: 4px; }
.acts-mine .chips { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.acts-mine .chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); color: var(--fg); font-weight: 500; font-size: 14.5px; white-space: nowrap; text-decoration: none; }
.acts-mine .chips a:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); text-decoration: none; }
.acts-mine .chips span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.acts-row > .chips, .acts-mine .chips a { max-width: 100%; }
.acts-mine .chips .cn { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: inherit; color: inherit; }
.acts-stars .chips a { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.acts-stars .chips a:hover { border-color: color-mix(in srgb, var(--star) 60%, var(--line-strong)); background: color-mix(in srgb, var(--star) 12%, var(--surface)); color: var(--fg); }
.acts-stars .chips a .i { width: 14px; height: 14px; color: var(--star); }
.acts-count { margin: 0; font-size: 15.5px; color: var(--muted); }
.acts-count b { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.acts-empty { margin: 16px 0 0; padding: 40px 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.acts-empty p { margin: 0 0 6px; }
.acts-empty p + p { margin: 0; font-size: 15px; }
.acts-empty a { font-weight: 600; }
.doc .acts-group { margin: 48px 0 0; scroll-margin-top: 88px; }
.doc .acts-group > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
/* the line close to its heading, air between it and the list */
.acts-group > .acts-list { margin-top: 14px; }
/* the long group folds under its heading: the same heading and line as the
   others, a plain chevron at the right end; the row gets the light hover
   background like every folding row */
.acts-group.fold > summary, .acts-group.away > .away-link { display: flex; align-items: center; gap: 10px; margin-top: -12px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); cursor: pointer; list-style: none; }
.acts-group.fold > summary::-webkit-details-marker { display: none; }
.fold-mark { margin-left: auto; display: inline-grid; place-items: center; color: var(--muted); transition: transform 0.15s; }
.fold-mark .i { width: 20px; height: 20px; }
.acts-group.fold > summary:hover .fold-mark, .acts-group.fold > summary:focus-visible .fold-mark, .away-link:hover .fold-mark, .away-link:focus-visible .fold-mark { color: var(--fg); }
/* the regulations by act (/ustawy/rozporzadzenia): ~500 acts, so one
   compact row each, the line under it lighter */
.doc .acts-page.by-act .acts-group { margin: 0; }
.acts-page.by-act .acts-search { margin-bottom: 28px; }
.acts-page.by-act .acts-group.fold > summary { margin-top: 0; border-bottom-color: var(--line); }
.doc .acts-page.by-act .acts-group h2 { font-size: 16.5px; font-weight: 500; }
.acts-page.by-act .acts-group.fold[open] > .acts-list { margin: 10px 0 18px; }
/* the regulations on /ustawy: the same row, leading to their page */
.acts-group.away > .away-link { color: inherit; text-decoration: none; }
.acts-group.away > .away-link h2 { color: var(--fg); }
.acts-group.fold[open] > summary .fold-mark { transform: rotate(180deg); }
.acts-group.fold[open] > summary { margin-bottom: 0; }
/* every row that folds and opens (here, the rows under the results, "Więcej
   przepisów", the groups of added provisions, the sections in the panel):
   on hover a light background across the whole row, as high above the text
   as below it and down to the line under the row; square and no wider than
   the line, the text in line with the page (owner 7.10.2026, before: wider
   than the line, rounded on top) */
.prov-row > summary, .more-all > summary, .lawcard-group > summary, .group > summary, details.more-section > summary, .acts-group.fold > summary, .acts-group.away > .away-link { position: relative; z-index: 0; }
.prov-row > summary::after, .more-all > summary::after, .lawcard-group > summary::after, .group > summary::after, details.more-section > summary::after, .acts-group.fold > summary::after, .acts-group.away > .away-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tint); opacity: 0; transition: opacity 0.12s; }
.prov-row > summary:hover::after, .more-all > summary:hover::after, .lawcard-group > summary:hover::after, .group > summary:hover::after, details.more-section > summary:hover::after, .acts-group.fold > summary:hover::after, .acts-group.away > .away-link:hover::after,
.prov-row > summary:focus-visible::after, .more-all > summary:focus-visible::after, .lawcard-group > summary:focus-visible::after, .group > summary:focus-visible::after, details.more-section > summary:focus-visible::after, .acts-group.fold > summary:focus-visible::after, .acts-group.away > .away-link:focus-visible::after { opacity: 1; }
.doc .acts-group h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 19px; line-height: 1.3; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg); }
.doc .acts-group h2 .n { font-size: 14px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
/* two columns of names; a row reaches left past the text so the hover
   background frames it, the text stays in line with the heading */
.acts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 48px; }
/* the whole row is the hover target; the star sits at its right end */
.acts-list li { position: relative; display: flex; min-width: 0; margin-left: -10px; border-radius: 8px; }
.acts-list li:hover, .acts-list li:focus-within { background: var(--tint); }
.acts-list a { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; padding: 9px 42px 9px 10px; border-radius: 8px; color: var(--fg); font-size: 16px; font-weight: 400; line-height: 1.45; text-decoration: none; }
.acts-list a.popular { font-weight: 650; } /* the acts people need most (page.POPULAR) */
.acts-list a:hover { color: var(--brand-ink); text-decoration: none; }
.acts-list .nm { flex: 1; min-width: 0; text-wrap: pretty; }
/* the regulations issued under an act, on its page (page._delegations): one
   column for their long names, the authorising article beside each; the
   section right under the actions bar without a second line */
.acts-list.one { grid-template-columns: minmax(0, 1fr); }
.acts-list.one li { align-items: baseline; }
.acts-list.one a.act-link { padding-right: 16px; }
/* the authorising article(s) beside, each opening in the panel */
.acts-list .basis { flex: none; padding: 9px 42px 9px 0; color: var(--muted); font-size: 14px; line-height: 1.45; white-space: nowrap; }
.acts-list .basis a { display: inline; padding: 0; color: inherit; font-size: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.acts-list .basis a:hover { color: var(--brand-ink); text-decoration-color: currentColor; }
.act-head > .actions-bar + details.more-section { margin-top: 0; border-top: 0; }
/* there the line above is the bar's, which starts 10 px left of the text */
.act-head > .actions-bar + details.more-section > summary::after { left: -10px; }
/* the regulations' rows on /ustawy while they load for a filter
   (static/acts.js) */
.acts-list li.acts-wait { grid-column: 1 / -1; align-items: center; gap: 10px; margin: 0; padding: 9px 0; color: var(--muted); font-size: 15px; }
.acts-list li.acts-wait:hover { background: none; }
.act-badge { position: relative; flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--slate-soft); color: var(--text); }
/* ☆ on a row or tile (static/acts.js): shown on hover and keyboard focus
   only, always when starred (filled, amber) — not a column of outlines; on
   touch screens, without hover, a quiet outline (Gmail, GitHub pattern) */
.act-star { position: absolute; top: 50%; right: 6px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity 0.12s; }
.act-star:hover { color: var(--star); background: color-mix(in srgb, var(--star) 14%, transparent); }
.act-star .i { width: 17px; height: 17px; }
li:hover > .act-star, .act-star:focus-visible, .act-star[aria-pressed="true"] { opacity: 1; }
.act-star[aria-pressed="true"] { color: var(--star); }
@media (hover: none) { .act-star { opacity: 0.6; } }
/* on the act page: a labelled button beside "Obserwuj" */
.act-fav[aria-pressed="true"] { border-color: color-mix(in srgb, var(--star) 60%, var(--line-strong)); color: var(--text); }
.act-fav[aria-pressed="true"] .i { color: var(--star); }
.act-badge.today { background: var(--green-soft); color: var(--green); }
.act-badge.pending { background: var(--info-soft); color: var(--info); }
/* dark tooltip with a tail, on hover of the badge */
.tip-host { position: relative; }
.act-badge .tip, .tip-host > .tip { position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 5; display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: 280px; padding: 10px 13px; border-radius: 10px; background: var(--fg); color: color-mix(in srgb, var(--bg) 80%, var(--fg)); font-size: 13.5px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; text-wrap: pretty; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.act-badge .tip::after, .tip-host > .tip::after { content: ""; position: absolute; top: 100%; right: 14px; width: 9px; height: 9px; margin-top: -5px; background: var(--fg); transform: rotate(45deg); }
.act-badge .tip b, .tip-host > .tip b { font-size: 14px; font-weight: 600; color: var(--bg); }
.act-badge:hover .tip, .tip-host:hover > .tip, .tip-host:focus-visible > .tip { opacity: 1; }
.tip-host > .tip { font-style: normal; letter-spacing: normal; }
.tip-host > .tip.start { right: auto; left: 0; }
.tip-host > .tip.start::after { right: auto; left: 14px; }
/* held acts in the admin band under the footer */
.dev-held { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dev-held li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid #262c32; font-size: 16px; }
.dev-held .why { font-size: 14px; color: #8d97a1; }
.dev-held a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #7fd1bd; font-size: 14px; }
.acts-foot { display: flex; flex-direction: column; gap: 6px; margin: 56px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.acts-foot .links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.acts-foot a { display: inline-flex; align-items: center; gap: 5px; }
.acts-foot .i { width: 0.85em; height: 0.85em; }
@media (max-width: 720px) {
  .acts-list { grid-template-columns: 1fr; }
  .acts-page h1 { font-size: 30px; }
}
.doc .law .ln[id] { scroll-margin-top: 80px; }

/* strony informacyjne: jak to działa, dla profesjonalistów */
.doc.prose h1 { font-size: 40px; margin: 3vh 0 14px; }
/* the Pro hero (owner 7.10.2026): what the base holds, in numbers */
.pro-eyebrow { margin: 3vh 0 10px; color: var(--brand); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.doc.prose h1.pro-title { margin-top: 0; font-size: 52px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.doc.prose .lead { color: var(--muted); font-size: 19px; line-height: 1.55; margin: 0 0 40px; max-width: 620px; text-wrap: balance; }
.doc.prose h2 { font-size: 24px; line-height: 1.25; font-weight: 700; text-transform: none; letter-spacing: -0.02em; color: var(--fg); margin: 56px 0 14px; }
.doc.prose p, .doc.prose li { font-size: 17px; line-height: 1.65; }
.doc.prose ul { padding-left: 22px; }
.doc.prose li { margin: 6px 0; }
.doc.prose .steps { margin: 24px 0 0; }
.doc.prose .trust { margin: 24px 0 0; }
.doc.prose .cta { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.doc.prose .cta .btn { display: inline-block; text-decoration: none; }
.doc.prose .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 24px; }
.doc.prose .plans h3 { margin: 0 0 6px; }
.doc.prose .plans ul { margin: 0; }

/* ——— the OAuth consent of an AI assistant (web/oauth.py, /polacz-ai) ——— */
.oa { max-width: 560px; margin: 4vh auto 0; }
.doc.prose .oa h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.15; text-wrap: balance; }
.oa-host { font-weight: 500; color: var(--muted); }
.oa-lead { color: var(--muted); }
.oa-list { list-style: none; padding: 0 !important; margin: 10px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.doc.prose .oa-list li { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 16px; }
.oa-list .i { flex: none; color: var(--green); transform: translateY(0.12em); }
.oa-note { font-size: var(--fs-meta) !important; color: var(--muted); }
.oa-form { margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.oa-who { margin: 22px 0 0 !important; }
.oa-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.oa-buttons .btn { text-decoration: none; }
.oa-back { margin-top: 26px !important; font-size: var(--fs-meta) !important; color: var(--faint); }
.oa-review { margin-top: 22px; font-size: var(--fs-meta); }
.oa-review summary { cursor: pointer; color: var(--muted); }
.oa-review .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; box-shadow: none; background: none; }
.oa-review .input { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: 16px/1.4 var(--sans); }
/* ——— the calendar of announced changes (web/amendments.py, /zmiany/kalendarz) ——— */
.cal-day { margin-top: 40px; }
.doc.prose .cal-day h2 { margin: 0 0 10px; font-size: 22px; }
.cal-day h2 .g-count { margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.doc.prose .cal-list { list-style: none; padding: 0; margin: 0; }
.doc.prose .cal-list li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.cal-title { font-weight: 600; color: var(--fg); }
.cal-title:hover { color: var(--brand-ink); text-decoration: underline; }
.doc.prose .cal-meta { margin: 4px 0 0; font-size: var(--fs-meta); color: var(--muted); }
.doc.prose .cal-note { margin: 8px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--law-bg); font-size: 15.5px; line-height: 1.55; }

/* ——— /pro, the page for professionals (web/page.py pro_page; design
   "Pro, strona docelowa" from the canvas of 1.10.2026, owner 13.10.2026) ——— */
/* /pro (web/page.py, pro_page), design "Pro, propozycja 3" of 14.10.2026:
   one promise with the e-mail field and the digest of announced changes,
   the sources as a bar, three pain points as rows with a real screen, three
   numbers, two price tiles, questions, a closing band */
main.doc.pro-landing { max-width: none; padding: 0 0 96px; }
.pl-wrap { max-width: 1184px; margin: 0 auto; padding: 0 32px; }
.pro-landing h2, .pro-landing h3, .pro-landing p { margin: 0; }
.doc.pro-landing h2 { text-transform: none; font-size: clamp(26px, 3.2vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--fg); }
/* the first screen as a band in the brand tint from edge to edge of the
   window, straight under the bar (owner 14.10.2026: a colour behind the
   whole hero, not a stage under the screen; then "too sharp", so the tint
   is thinned with the page background); the rest of the page sits in
   .pl-wrap, the page width */
.pl-hero { padding: clamp(40px, 6vh, 64px) 0 clamp(48px, 7vh, 72px); background: color-mix(in srgb, var(--brand-soft) 55%, var(--bg)); scroll-margin-top: 69px; }
.pl-hero-in { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.pl-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: 14px; color: var(--muted); }
.pl-pro { padding: 2px 9px; border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 650; letter-spacing: 0.03em; }
.pro-landing h1.pl-title { margin: 22px 0 0; font-size: clamp(42px, 5.4vw, 62px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: var(--fg); text-wrap: balance; }
.pl-title span { color: var(--brand); }
.pl-lead { margin-top: 24px !important; max-width: 500px; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.pl-signup { margin-top: 34px; max-width: 500px; scroll-margin-top: 100px; }
.pl-field { padding: 6px 6px 6px 16px; border-radius: 16px; }
.pl-hero .pl-field:not(:focus-within) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.pl-field input { font-size: 16.5px; }
.pl-field .btn { padding: 13px 20px; font-size: 16px; border-radius: 11px; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pl-form-note { margin: 12px 0 0 4px !important; font-size: var(--fs-small); line-height: 1.5; color: var(--faint); }
.pl-form-note a { color: var(--faint); text-decoration: underline; }
.pl-form-note.error { color: var(--rose); }
.pl-details { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.pl-ok, .pl-done { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--fg); }
.pl-ok .i, .pl-done .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.pl-done { padding: 18px 20px; border-radius: var(--r-lg); background: var(--green-soft); }
.pl-details .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; box-shadow: none; background: none; }
.pl-details .field > span, .pl-prices legend { font-size: var(--fs-meta); font-weight: 600; color: var(--fg); }
.pl-details .input { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: 16px/1.45 var(--sans); }
.pl-details .input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.pl-details textarea.input { resize: vertical; min-height: 64px; }
.pl-prices { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-prices legend { margin-bottom: 8px; padding: 0; }
.pl-radio { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 14.5px; color: var(--text); cursor: pointer; }
.pl-radio:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.pl-radio input { margin: 0; accent-color: var(--brand); }
.pl-form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pl-form-end .link-button { font-size: 15px; color: var(--muted); }
/* the stage: a soft panel under a screen of the product (the rows) */
.pl-stage { padding: 40px; border-radius: 28px; background: var(--tint); }
.pl-shot { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pl-hero .pl-shot { box-shadow: 0 1px 2px rgba(21, 24, 28, 0.04), 0 24px 48px -28px rgba(11, 79, 68, 0.35); }
.pl-shot-title { font-size: 17px; font-weight: 650; color: var(--fg); }
.pl-shot-note { margin-top: 4px !important; font-size: var(--fs-small); line-height: 1.5; color: var(--faint); }
.pl-digest { padding: 0; overflow: hidden; }
.pl-digest-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pl-digest-head .brand-mark { width: 34px; height: 34px; }
.pl-digest-head b { display: block; font-size: 15.5px; font-weight: 650; color: var(--fg); }
.pl-digest-head span span { display: block; font-size: var(--fs-small); color: var(--faint); }
.pl-digest-head .badge { margin-left: auto; }
.pl-digest ul { list-style: none; margin: 0; padding: 0; }
.pl-digest li { padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.pl-digest li:first-child { border-top: 0; }
.pro-landing .pl-digest a { display: flex; gap: 16px; align-items: flex-start; color: var(--text); text-decoration: none; }
.pro-landing .pl-digest a:hover b { color: var(--brand-ink); text-decoration: underline; }
.pl-day { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: var(--tint); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; color: var(--muted); }
.pl-day b { font-size: 19px; font-weight: 700; letter-spacing: 0; color: var(--fg); }
.pl-what { min-width: 0; padding-top: 2px; font-size: 15px; line-height: 1.45; }
.pl-what b { font-weight: 600; color: var(--fg); }
.pl-what small { display: block; font-size: var(--fs-small); color: var(--faint); }
.pl-diff { margin: 10px 0 0 76px !important; padding: 10px 12px; border-radius: 10px; background: var(--law-bg); font-size: 14.5px; line-height: 1.65; color: var(--text); }
/* the sources, like a bar of logos */
.pl-sources { margin-top: 72px; text-align: center; }
.pl-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pl-sources ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: color-mix(in srgb, var(--faint) 80%, var(--bg)); }
.pl-section { margin-top: 128px; scroll-margin-top: 80px; }
.pro-landing .pl-section h2, .pl-final h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); text-wrap: balance; }
.pl-center { max-width: 720px; margin-left: auto !important; margin-right: auto !important; text-align: center; }
.pl-sub { margin-top: 16px !important; max-width: 560px; font-size: 18.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* a pain point and the answer next to a screen; every other row flipped */
.pl-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; margin-top: 112px; scroll-margin-top: 90px; }
.pl-row:first-of-type { margin-top: 80px; }
.pl-row.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.pl-row.flip .pl-row-text { order: 2; }
.pl-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand); }
.pl-tag .i { width: 16px; height: 16px; }
.pro-landing .pl-row h3 { margin-top: 14px; font-size: clamp(25px, 2.6vw, 32px); line-height: 1.18; font-weight: 700; letter-spacing: -0.025em; color: var(--fg); text-wrap: balance; }
.pl-row-text > p:last-child { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.pl-law-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pl-law-head b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.pl-law-head span { font-size: 15.5px; color: var(--muted); }
.pl-law-meta { margin-top: 10px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-small); color: var(--faint); }
.pl-law-text { margin-top: 18px !important; padding: 14px 16px; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; background: var(--law-bg); font-size: 15.5px; line-height: 1.7; color: var(--text); }
.pl-law-text mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.pl-law-tools { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-law-tools span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); }
.pl-query { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font-size: 15px; color: var(--fg); }
.pl-query .i { flex: none; color: var(--faint); }
.pl-query + .pl-shot-title { margin-top: 22px; }
.pl-stance .stance-rows { margin-top: 18px; }
.pl-chat { display: flex; flex-direction: column; gap: 16px; padding: 0; overflow: hidden; }
.pl-chat-q { margin: 22px 24px 0 auto !important; max-width: 80%; padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--fg); color: var(--bg); font-size: 15px; line-height: 1.5; }
.pl-chat-tool { margin: 0 24px !important; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.pl-chat-tool .i { width: 14px; height: 14px; }
.pl-chat-a { margin: 0 24px !important; font-size: 15.5px; line-height: 1.65; color: var(--text); }
.pl-chat-src { padding: 12px 24px; border-top: 1px solid var(--line-soft); background: var(--law-bg); font-size: var(--fs-small); color: var(--muted); }
.pl-chat-src a { font-weight: 600; }
/* three numbers */
.pl-proof { margin-top: 128px; padding: 56px 48px 40px; border-radius: 28px; background: var(--tint); }
.pl-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-nums > div { padding: 0 32px; border-left: 1px solid var(--line-strong); }
.pl-nums > div:first-child { padding-left: 0; border-left: 0; }
.pl-nums b { display: block; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--fg); }
.pl-nums > div:first-child b { color: var(--brand); }
.pl-nums b { position: relative; }
.pl-nums small { position: absolute; bottom: 100%; left: 0; margin-bottom: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pl-nums span { display: block; max-width: 280px; margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--text); }
.pl-foot { margin-top: 36px !important; font-size: 13px; line-height: 1.5; color: var(--faint); }
/* two price tiles */
.pl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; margin: 48px auto 0; align-items: stretch; }
.pl-plans > div { display: flex; flex-direction: column; padding: 32px 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.pl-plans > div.pl-main { border: 2px solid var(--brand); box-shadow: var(--shadow); }
.pro-landing .pl-plans h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 650; color: var(--fg); }
.pl-price { margin-top: 18px !important; font-size: clamp(34px, 3.6vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: var(--fg); }
.pl-for { margin-top: 8px !important; min-height: 22px; font-size: 14.5px; color: var(--faint); }
.pl-plans .btn { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; text-decoration: none; }
.pl-plans ul { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; }
.pl-plans li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.5; color: var(--text); scroll-margin-top: 120px; }
.pl-plans li .i { flex: none; width: 18px; height: 18px; color: var(--faint); transform: translateY(0.15em); }
.pl-main li { color: var(--fg); }
.pl-main li .i { color: var(--brand); }
.pl-main li.pl-all { color: var(--muted); }
.pl-plans li:target, .pl-plans li:has(.pl-anchor:target) { margin: -4px -8px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--mark-flash); }
.pl-anchor { display: block; width: 0; height: 0; scroll-margin-top: 140px; }
.pl-api { margin-top: 28px !important; text-align: center; font-size: 15.5px; color: var(--muted); }
.pl-api a { font-weight: 600; }
/* questions */
.pl-faq { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); gap: 24px 72px; align-items: start; }
.pl-faq > div > p { margin-top: 14px !important; font-size: 16px; line-height: 1.6; color: var(--muted); }
.pl-faq-list { border-top: 1px solid var(--line); }
.pl-faq details { border-bottom: 1px solid var(--line); }
.pl-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 22px 0; font-size: 18px; font-weight: 600; color: var(--fg); cursor: pointer; list-style: none; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary .i { flex: none; color: var(--faint); transition: transform 0.15s; }
.pl-faq details[open] summary .i { transform: rotate(180deg); }
.pl-faq details p { max-width: 620px; padding: 0 0 22px; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.pro-landing .byok { margin-top: 72px; }
/* the closing band */
.pl-final { margin-top: 128px; padding: 72px 48px; border-radius: 28px; background: var(--band); text-align: center; }
.pro-landing .pl-final h2 { max-width: 640px; margin: 0 auto; color: var(--band-text); }
.pl-final p { max-width: 480px; margin: 16px auto 0 !important; font-size: 18px; line-height: 1.55; color: var(--band-muted); }
.pl-final-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.pl-final .btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; background: var(--band-text); color: var(--band); font-size: 16.5px; text-decoration: none; }
.pl-final .btn:hover { background: var(--band-muted); color: var(--band); }
.pl-final-actions > a:last-child { font-size: 16.5px; font-weight: 600; color: var(--band-text); }
@media (max-width: 980px) {
  .pl-hero-in, .pl-row, .pl-row.flip { grid-template-columns: 1fr; gap: 40px; }
  .pl-row.flip .pl-row-text { order: 0; }
  .pl-faq { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  main.doc.pro-landing { padding-bottom: 64px; }
  .pl-wrap { padding: 0 16px; }
}
@media (max-width: 640px) {
  .pl-wide { display: none; }
  .pl-hero { padding: 28px 0 36px; }
  .pl-field { flex-wrap: wrap; padding: 6px; border-radius: 14px; }
  .pl-field input { padding: 8px 10px; }
  .pl-field .btn { flex: 1 1 100%; justify-content: center; }
  .pl-stage { padding: 16px; border-radius: 18px; }
  .pl-shot { padding: 18px; }
  .pl-digest { padding: 0; }
  .pl-digest-head .badge { display: none; }
  .pl-diff { margin-left: 0 !important; }
  .pl-chat-q, .pl-chat-tool, .pl-chat-a { margin-left: 18px !important; margin-right: 18px !important; }
  .pl-sources { margin-top: 56px; }
  .pl-section, .pl-proof, .pl-final { margin-top: 72px; }
  .pl-row, .pl-row:first-of-type { margin-top: 56px; }
  .pl-proof { padding: 36px 22px 28px; border-radius: 18px; }
  .pl-nums { grid-template-columns: 1fr; gap: 44px; }
  .pl-nums > div { padding: 0; border-left: 0; }
  .pl-plans { grid-template-columns: 1fr; }
  .pl-plans > div { padding: 26px 22px; }
  .pl-final { padding: 44px 22px; border-radius: 18px; }
}
.doc.prose h2[id] { scroll-margin-top: 120px; }
.human-check { margin: 12px 0; }
.doc.prose .byok { margin: 18px 0 10px; }
.doc.prose .byok-note { font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--r-md); padding: 10px 14px; }
.doc.prose .byok details { margin-top: 12px; }
.doc.prose .byok summary { cursor: pointer; color: var(--brand-ink); }
.doc.prose .byok-key { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.doc.prose .byok-key input { flex: 1 1 260px; font: inherit; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); }
.doc.prose .byok [hidden] { display: none; }
.doc.prose .faq dt { font-weight: 650; margin-top: 18px; }
.doc.prose .faq dd { margin: 4px 0 0; color: var(--text); }

/* account and login (web/auth.py): header account entry (web/page.py,
   ACCOUNT; static/account.js), login buttons on the page and in the offer
   under results, account page. "Zaloguj się" without a session, an avatar
   with an initial and a menu with one; the signed-in class on <html>, set
   before first paint (page.SIGNED_IN_JS), decides, so the header never jumps */
/* light ↔ dark in the header (static/theme.js) */
.theme-button { flex: none; width: 36px; height: 36px; margin: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); }
.theme-button:hover { background: var(--tint); color: var(--fg); }
.theme-button .i { width: 19px; height: 19px; }
.account { position: relative; display: flex; align-items: center; flex: none; }
.account-login { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 7px 4px; }
.account-login:hover { color: var(--fg); text-decoration: none; }
.account-login .i { width: 22px; height: 22px; }
@media (min-width: 721px) { .account-login .i { display: none; } .account-login { font-size: 15px; font-weight: 500; padding: 7px 10px; border-radius: 9px; } .account-login:hover { background: var(--tint); } }
.account-button { display: none; padding: 2px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.signed-in .account-login { display: none; }
.signed-in .account-button { display: inline-flex; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-size: 15px; font-weight: 650; line-height: 1; transition: box-shadow 0.15s; }
.avatar .i { width: 18px; height: 18px; }
.account-button:hover .avatar, .account-button[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--brand-line); }
.account-button:focus-visible { outline-offset: 2px; border-radius: 50%; }
/* explanations left beside the avatar (static/account.js), a pill from
   900 px (design "Strona główna", 6.10.2026) */
.account-pill { display: none; align-items: center; gap: 8px; padding-right: 10px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.quota-dots { display: inline-flex; gap: 3px; }
.quota-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.quota-dots i.on { background: var(--brand); }
@media (min-width: 901px) {
  .account-pill:not([hidden]) { display: inline-flex; }
  .signed-in .account-button:has(.account-pill:not([hidden])) { align-items: center; gap: 10px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
  .account-button:has(.account-pill:not([hidden])):hover { border-color: var(--brand-line); background: var(--tint); }
  .account-button:has(.account-pill:not([hidden])) .avatar { width: 30px; height: 30px; font-size: 14px; }
  .account-button:has(.account-pill:not([hidden])):focus-visible { border-radius: 999px; }
}
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 272px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 15px; }
.account-menu .account-head { display: grid; gap: 2px; margin: 0 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.35; }
.account-email { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-quota { color: var(--muted); font-size: 13.5px; }
.account-quota:empty { display: none; }
.account-menu a, .account-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover, .account-menu a:focus-visible, .account-menu button:focus-visible { background: var(--tint); color: var(--fg); text-decoration: none; outline-offset: -2px; }
.account-menu .i { color: var(--muted); }
.account-menu form { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }
/* first-login prompt about question history (static/account.js) */
dialog.prompt { width: calc(100% - 32px); max-width: 440px; padding: 26px 26px 22px; border: 0; border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog.prompt::backdrop { background: var(--overlay); }
.prompt-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.prompt-mark .i { width: 22px; height: 22px; }
.prompt h2 { margin: 14px 0 8px; font-size: 21px; line-height: 1.3; }
.prompt p { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc.prose.narrow { max-width: 560px; }
.doc.prose .small, .small { font-size: 14.5px; }
/* a statute-like block on a text page (404, the end of the terms) */
.doc.prose > .law { margin-bottom: 24px; }
.login { display: grid; gap: 12px; max-width: 420px; margin: 8px 0 24px; }
.login form { margin: 0; display: grid; gap: 10px; }
.login .btn { width: 100%; text-align: center; }
.btn.google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); }
.btn.google:hover { background: var(--tint); }
/* znak Google na przycisku (wytyczne marki Google: „G” w kolorach) */
.g-mark {
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.login-or { margin: 0; text-align: center; color: var(--faint); font-size: 14.5px; }
.login-email label { font-size: 15px; font-weight: 600; color: var(--fg); }
.login-email input { font: 17px/1.4 var(--sans); padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--fg); }
.login-email input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.login-offer { margin-top: 16px; }
.form-error { color: var(--rose); background: var(--rose-soft); border-radius: var(--r-md); padding: 10px 14px; font-size: 15px; }
.explain-note { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.account-left { font-size: 20px; font-weight: 650; color: var(--fg); margin: 0 0 6px; }
.account-facts { margin-top: 0; }
.account-delete { display: grid; gap: 12px; justify-items: start; }
.account-delete input[type="email"] { width: 100%; max-width: 420px; font: 17px/1.4 var(--sans); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--fg); }
.account-delete input[type="email"]:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.btn.danger-solid { background: var(--rose); color: #fff; }
.btn.danger-solid:hover { background: var(--rose-hover); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.field-row { display: flex; gap: 8px; width: 100%; }
.field-row input { flex: 1; min-width: 0; }

/* account page (web/page.py, account_page): settings in cards like large
   services, section index at the side on desktop and on top on phones;
   account deletion as a plain link in the last card, confirmed on its own page */
.doc.settings-page { max-width: 1040px; }
.settings-head { display: flex; align-items: center; gap: 16px; margin: 3vh 0 28px; }
.avatar.avatar-lg { width: 56px; height: 56px; font-size: 24px; }
.settings-who { flex: 1; min-width: 0; }
.doc.prose .settings-who h1 { margin: 0; font-size: 30px; }
.doc.prose .settings-who p { margin: 2px 0 0; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.settings-head .account-out { margin: 0; }
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; align-items: start; }
.settings-nav { position: sticky; top: 84px; display: grid; gap: 2px; }
.settings-nav a { color: var(--muted); padding: 7px 12px; border-radius: 9px; font-size: 15px; }
.settings-nav a:hover { background: var(--tint); color: var(--fg); text-decoration: none; }
.settings-body { display: grid; gap: 20px; min-width: 0; }
/* the admin panel (web/admin.py; owner 8.10.2026: light, clear,
   functional): a side menu and one column; sections divided by space and
   a label, no boxes inside boxes, no frame around text, numbers without
   tiles, tables with a row highlight */
.doc.admin-page { max-width: 1120px; }
.admin { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 3vh; }
.admin-nav { position: sticky; top: 84px; display: grid; gap: 1px; }
.admin-nav .label { margin: 0 0 10px 12px; }
.admin-nav a { display: flex; align-items: baseline; padding: 7px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-ui); }
.admin-nav a:hover { background: var(--tint); color: var(--fg); text-decoration: none; }
.admin-nav a[aria-current="page"] { background: var(--tint); color: var(--fg); font-weight: 600; }
.admin-nav .g-count { margin-left: auto; padding-left: 8px; }
.admin-main { min-width: 0; }
.admin-main > .crumbs { margin: 0 0 8px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 20px; }
.admin-head h1 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; overflow-wrap: anywhere; }
.admin-aside { margin: 0; color: var(--faint); font-size: var(--fs-meta); }
.admin-section { margin-top: 40px; }
.admin-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.admin-section-head h2 { margin: 0; }
.admin-section-head a { font-size: var(--fs-meta); }
.admin-lead { margin: 0 0 16px; max-width: 640px; color: var(--muted); line-height: 1.55; }
/* numbers of the overview: no tiles, a row of figures */
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 20px 28px; margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.admin-kpis dt { color: var(--muted); font-size: var(--fs-meta); }
.admin-kpis dd { margin: 2px 0 4px; color: var(--fg); font-size: 30px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.admin-kpis p { margin: 0; color: var(--faint); font-size: var(--fs-small); line-height: 1.45; }
.admin-health { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: var(--fs-ui); }
.admin-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.admin-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.admin-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
/* tables: plain rows, the whole row lights up, times on one line */
.admin table.ledger th, .admin table.ledger td { padding-right: 16px; }
.admin table.ledger th { font-size: var(--fs-meta); font-weight: 500; vertical-align: bottom; }
.admin-table tbody tr:hover { background: var(--tint); }
table.ledger td.when { white-space: nowrap; color: var(--muted); font-size: var(--fs-meta); }
.admin-msg { min-width: 260px; }
.admin-msg a { color: var(--fg); font-weight: 500; }
.admin-msg small { display: block; margin-top: 2px; color: var(--faint); font-size: var(--fs-small); }
table.admin-questions td:nth-child(2) { min-width: 260px; }
table.admin-days .admin-bar-cell { width: 30%; }
.admin-bar { display: block; height: 6px; min-width: 2px; border-radius: var(--r-pill); background: var(--brand-line); }
.admin-filter { margin: 0 0 16px; flex-wrap: wrap; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; }
.admin-filters .admin-filter { margin: 0; }
.admin-verdict { margin: 0 0 8px; max-width: 68ch; line-height: 1.55; }
.admin-verdict .badge { margin-right: 8px; }
/* a long question (an explanation with its follow-ups) in three lines; whole on its page */
.admin-table a.admin-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.admin-results { margin: 0; padding-left: 1.6em; font-size: var(--fs-ui); }
.admin-results li { padding: 5px 0; }
.admin-results .badge { margin-left: 6px; }
.admin-search { margin: 0 0 20px; }
/* a report, read like an e-mail */
.admin-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -8px 0 18px; color: var(--muted); font-size: var(--fs-meta); }
.admin-message { max-width: 68ch; color: var(--text); font-size: var(--fs-body); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-where { margin: 14px 0 0; color: var(--muted); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 18px 0 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.admin-actions .btn { margin-right: 6px; }
.admin-status { margin: 0; }
.admin-status fieldset { margin: 0; min-width: 0; }
.admin-status label { padding: 5px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.admin-status label:hover { color: var(--fg); }
.admin-status label:has(input:checked) { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-sm); }
.admin-status label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 1px; }
.admin-status input { position: absolute; opacity: 0; width: 1px; height: 1px; }
dl.admin-facts { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; font-size: var(--fs-ui); }
dl.admin-facts dt, dl.admin-facts dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
dl.admin-facts dt { padding-right: 16px; color: var(--muted); }
dl.admin-facts dd { color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.admin-note textarea { width: 100%; max-width: 68ch; }
.admin-note p { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; }
.admin-more summary { cursor: pointer; color: var(--muted); padding: 4px 0; }
.admin-more summary:hover { color: var(--brand); }
.admin-prompt { width: 100%; margin-top: 8px; font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
/* an account: facts, then one row per change */
.admin-done { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--green); font-weight: 600; }
.admin-change { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 8px 0; padding: 12px 0; border-top: 1px solid var(--line); }
.admin-change-label, .admin-change-label label { color: var(--muted); font-size: var(--fs-ui); }
.admin-change-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-change .input { padding: 6px 10px; font-size: 15px; }
.admin-change .admin-narrow { width: 80px; }
@media (max-width: 860px) {
  .admin { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .admin-nav { position: static; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .admin-nav .label { display: none; }
  .admin-nav a { flex: none; }
  dl.admin-facts, .admin-change { grid-template-columns: minmax(0, 1fr); }
  dl.admin-facts dt { padding-bottom: 0; }
  dl.admin-facts dd { border-top: 0; padding-top: 2px; }
}
.admin .inline-form + .inline-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
/* the search (web/admin_search.py): filters in one row, figures with the
   change, a stacked column chart with a legend, tooltip and table, bars of
   the opened place, the log with a search field and a pager */
.admin-filters { align-items: center; }
.admin-select { margin: 0; }
.admin-select select.input { padding: 6px 30px 6px 10px; font-size: 14px; }
.admin-search-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.admin-search-row .input { flex: 1 1 260px; max-width: 520px; padding: 7px 12px; font-size: 15px; }
.admin-kpis dd a { color: inherit; }
.admin-kpis dd a:hover { color: var(--brand); text-decoration: none; }
.delta { font-weight: 600; white-space: nowrap; color: var(--muted); }
.admin-kpis .delta { margin-left: 8px; font-size: var(--fs-small); vertical-align: 0.35em; }
.delta.good { color: var(--green); }
.delta.bad { color: var(--rose); }
a.admin-q { color: var(--fg); font-weight: 500; }
a.admin-q:hover { color: var(--brand); }
.admin-chart { margin: 0; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.chart-legend b { margin-left: 6px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.chart-sw.good, .chart-col .good, .chart-tip .good { background: var(--chart-for); }
.chart-sw.mid, .chart-col .mid, .chart-tip .mid { background: var(--chart-mid); }
.chart-sw.bad, .chart-col .bad, .chart-tip .bad { background: var(--chart-against); }
.chart-sw.none, .chart-col .none, .chart-tip .none { background: var(--chart-none); }
.chart-plot { position: relative; height: 180px; margin-left: 40px; border-bottom: 1px solid var(--line-strong); }
.chart-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.chart-tick span { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-cols { position: absolute; inset: 0; display: flex; gap: 2px; }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; border-radius: 4px 4px 0 0; cursor: default; }
.chart-col > span { display: block; width: min(100%, 22px); flex: none; }
.chart-col > span:last-child { border-radius: 4px 4px 0 0; }
.chart-col:hover, .chart-col:focus-visible { background: var(--tint); outline: 0; }
.chart-x { display: flex; gap: 2px; margin: 6px 0 0 40px; }
.chart-x span { flex: 1 1 0; min-width: 0; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible; }
.admin-chart .admin-more { margin-top: 14px; }
.chart-tip { position: fixed; z-index: 60; min-width: 150px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs-small); color: var(--muted); pointer-events: none; }
.chart-tip p { margin: 0 0 4px; color: var(--fg); font-weight: 600; }
.chart-tip div { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.chart-tip i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.chart-tip b { min-width: 2.5em; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.admin-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 40px; }
.hbars { display: grid; gap: 6px; font-size: var(--fs-small); }
.hbar-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 3em; align-items: center; gap: 10px; color: var(--muted); }
.hbars.words .hbar-row { grid-template-columns: minmax(7em, 10.5em) minmax(0, 1fr) 2.5em; }
.hbar { display: block; height: 12px; }
.hbar > span { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--chart-for); }
.hbar-row .num { color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
.admin-pager { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.admin-pager .btn:only-child:last-child { margin-left: auto; }
table.admin-fix td:nth-child(1) { min-width: 240px; }
table.admin-fix td:nth-child(3) { min-width: 160px; color: var(--text); font-size: var(--fs-meta); }
.admin-cause { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); }
table.admin-fix td:nth-child(4) { color: var(--muted); font-size: var(--fs-meta); white-space: nowrap; }
@media (max-width: 860px) {
  .admin-split { grid-template-columns: minmax(0, 1fr); }
  .chart-plot { height: 150px; }
}
.card { scroll-margin-top: 84px; }
.card > :last-child { margin-bottom: 0; }
.doc.prose .card h2 { font-size: 19px; margin: 0 0 14px; }
.doc.prose .card h3 { font-size: 16px; margin: 22px 0 8px; }
.doc.prose .card .account-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 20px; }
.doc.prose .card .account-facts li { margin: 0; font-size: 15px; color: var(--muted); }
.card .folder-new { margin-top: 14px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc.prose .card-foot h3 { margin: 0 0 2px; font-size: 15.5px; }
.card-foot p { margin: 0; }
.quiet-link { color: var(--rose); font-size: 15px; font-weight: 600; white-space: nowrap; }
.quiet-link:hover { color: var(--rose-hover); }
@media (max-width: 900px) {
  .settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .settings-nav { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 14px; }
}
@media (max-width: 600px) {
  .settings-head { flex-wrap: wrap; margin-top: 8px; }
  .avatar.avatar-lg { width: 48px; height: 48px; font-size: 20px; }
  .settings-head .account-out { flex-basis: 100%; }
  .card { padding: 18px 16px; }
  .card-foot { flex-direction: column; align-items: flex-start; }
}
.btn.danger { background: var(--rose-soft); color: var(--rose); }
.btn.danger:hover { background: color-mix(in srgb, var(--rose) 16%, var(--rose-soft)); }
/* zapowiedź wyjaśnienia pod przepisami i „Zapytaj o swoją sytuację” (etap C) */
/* without AI (design "Szukaj v2", 8.10.2026): a dashed box, the teaser on
   the left, the one action on the right */
.layer.explain.teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; padding: 18px 22px; border: 1px dashed var(--brand-line); border-radius: 14px; background: var(--surface); }
.teaser .teaser-text { flex: 1 1 260px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.teaser .pro-hint { margin: 0; }
.teaser .pro-hint .explain-note { margin: 8px 0 0; }
.ask-own { margin: 36px 0 8px; padding: 22px 22px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ask-own h2 { margin: 0 0 12px; }
.ask-own .small { margin: 10px 0 0; }
/* doładowanie (web/payments.py): pakiety, zgoda, BLIK jako pierwszy przycisk */
.topup { display: grid; gap: 14px; max-width: 560px; margin: 8px 0 0; }
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.package { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.package:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.package input { position: absolute; opacity: 0; pointer-events: none; }
.package-amount { font-size: 20px; font-weight: 700; color: var(--fg); }
.package-bonus { font-size: 13.5px; font-weight: 600; color: var(--green); }
.package-answers { font-size: 13.5px; color: var(--muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.consent input { margin-top: 4px; flex: none; }
.invoice summary { cursor: pointer; color: var(--brand-ink); font-size: 15px; }
.invoice input { display: block; margin-top: 6px; font: 16px/1.4 var(--sans); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.invoice label { font-size: 14px; color: var(--muted); }
.topup-pay { display: flex; flex-wrap: wrap; gap: 10px; }
.topup-pay .btn { flex: 1 1 200px; white-space: normal; }
@media (max-width: 720px) { .packages { grid-template-columns: 1fr; } }
table.ledger { width: 100%; border-collapse: collapse; font-size: 15px; }
table.ledger th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px 6px 0; }
table.ledger td { border-bottom: 1px solid var(--line); padding: 8px 8px 8px 0; }
table.ledger .num { text-align: right; white-space: nowrap; padding-right: 0; }
/* obserwowanie (web/watches.py, static/keep.js): przycisk przy przepisie,
   ustawie, dokumencie i wynikach; lista i skrót na stronie konta */
.toolbar.keep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.keep-note { color: var(--muted); font-size: 14.5px; }
.keep-note a { text-decoration: underline; text-underline-offset: 3px; }
.refs.folder-list, .doc.prose .refs.folder-list { columns: 1; padding-left: 0; }
.folder-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
form.inline { display: inline; margin-left: auto; }
.link-button { background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px; color: var(--brand-ink); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--brand); }
.digest-form { display: grid; gap: 12px; justify-items: start; margin-top: 18px; }
.digest-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.digest-form legend { font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.digest-form label { font-size: 16px; }
/* teczki i notatka z researchu (web/folders.py, static/keep.js, folder.js) */
.folder-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 15px; }
.folder-pick select, .folder-pick input, .folder-form input, .folder-form textarea, .folder-new input { font: 16px/1.4 var(--sans); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--fg); }
.folder-pick input { flex: 1 1 220px; min-width: 0; }
.folder-new, .folder-form { display: grid; gap: 8px; justify-items: start; max-width: 560px; margin: 18px 0 0; }
.folder-form textarea { width: 100%; resize: vertical; }
.folder-new label, .folder-form label { font-size: 15px; font-weight: 600; color: var(--fg); }
.folder-settings { margin: 8px 0 24px; }
.folder-settings summary { cursor: pointer; color: var(--brand-ink); font-size: 15px; }
.folder-delete { display: grid; gap: 10px; justify-items: start; margin-top: 18px; }
.folder-item { padding: 6px 0 16px; border-bottom: 1px solid var(--line); }
.doc .folder-item h2 { margin: 26px 0 10px; font-size: 20px; line-height: 1.3; font-weight: 650; text-transform: none; letter-spacing: -0.01em; color: var(--fg); }
.folder-item h2 a { color: inherit; text-decoration-color: var(--brand-line); }
.folder-item .law { padding: 14px 18px 14px 20px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); }
.folder-item .hint { margin: 8px 0 0; }
.folder-thesis { font-size: 16.5px; line-height: 1.6; color: var(--text); }
.folder-text p { margin: 0 0 10px; }
.folder-controls { display: flex; gap: 14px; margin-top: 8px; }
.folder-controls form.inline { margin-left: 0; }
.refs.folder-cited { columns: 1; margin: 6px 0; }
.fn-ref { font-size: 0.75em; margin-left: 2px; }
ol.footnotes, ul.folder-sources { font-size: 15px; line-height: 1.6; padding-left: 22px; overflow-wrap: anywhere; }
ol.footnotes li, ul.folder-sources li { margin: 4px 0; }
/* question history (web/history.py): /konto/historia like the watch history
   of YouTube and the history of Chrome, the questions by day in the wide
   column, the switch and "Usuń całą historię" at the side; on a phone the
   side goes between the search field and the list. The same rows in the
   card on /konto. */
main.doc.history-page { max-width: 1040px; }
.history-page h1 { margin: 3vh 0 28px; }
.history-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "search side" "list side"; gap: 0 48px; align-items: start; }
.history-search { grid-area: search; margin: 0 0 6px; }
.history-side { grid-area: side; position: sticky; top: 84px; display: grid; gap: 16px; padding: 18px 20px; }
.history-side .history-toggle:not(:last-child) { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.history-side .flat { justify-self: start; margin: -6px -10px; }
.history-main { grid-area: list; min-width: 0; }
.history-main .resultbar { margin-top: 18px; }
.history-main .resultbar-tools { gap: 2px; margin: -6px -10px; }
.history-main.editing [data-edit] { color: var(--brand); font-weight: 600; }
.history-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.history-toggle .switch-label { font-size: var(--fs-ui); }
.history-off, .doc.prose .history-off { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.history-day { margin-top: 22px; }
.doc .history-day h2 { margin: 0 0 6px; line-height: 1.4; }
.history-list, .doc.prose .history-list { list-style: none; margin: 0; padding: 0; }
.history-item, .doc.prose .history-item { display: flex; align-items: center; margin: 0 -12px; border-radius: 10px; }
.history-item:hover, .history-item:focus-within { background: var(--tint); }
.history-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 10px 4px 10px 12px; border-radius: 10px; color: inherit; }
.history-link:hover { color: inherit; text-decoration: none; }
.history-link:focus-visible { outline-offset: -2px; }
.history-link > .i { width: 18px; height: 18px; margin-top: 3px; color: var(--faint); }
.history-text { display: grid; gap: 1px; min-width: 0; }
.history-q { color: var(--brand-ink); font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; }
.history-link:hover .history-q { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.history-meta { color: var(--faint); font-size: var(--fs-small); line-height: 1.5; }
.history-place { color: var(--muted); font-size: var(--fs-meta); line-height: 1.45; overflow-wrap: anywhere; }
.history-follow { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: var(--fs-meta); line-height: 1.45; }
.history-meta + .history-follow { margin-top: 4px; }
.history-follow > .i { width: 15px; height: 15px; margin-top: 2px; color: var(--faint); }
.history-follow > span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.history-follow.more { padding-left: 21px; color: var(--faint); font-size: var(--fs-small); }
/* "Usuń" only after "Edytuj" (no column of icons, owner 7.10.2026) */
.history-item form { flex: none; margin: 0 6px 0 0; }
.history-main:not(.editing) .history-item form { display: none; }
.history-empty { display: grid; justify-items: center; gap: 4px; padding: 56px 16px; text-align: center; color: var(--muted); }
.history-empty > .i { width: 28px; height: 28px; margin-bottom: 8px; color: var(--faint); }
.history-empty p { margin: 0 0 10px; font-size: var(--fs-ui); }
.history-main .pager.split { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.settings-body .history-toggle { margin: 0 0 12px; }
.doc.prose .card .history-all { margin: 10px 0 0; font-size: var(--fs-ui); }
@media (max-width: 900px) {
  .history-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "side" "list"; }
  .history-side { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; padding: 14px 16px; }
  .history-side .history-toggle:not(:last-child) { padding-bottom: 0; border-bottom: 0; }
}

/* odesłanie rozwinięte w tekście */
.law a.ref-link[data-ref]::after, .law a.ref-link.expandable::after { content: "▸"; font-size: 0.55em; margin-left: 2px; color: var(--brand); opacity: 0.8; vertical-align: 0.15em; }
.doc-text a.ref-link.open, .law a.ref-link.open { background: var(--brand-soft); border-radius: 3px; text-decoration-color: var(--brand); }
.law a.ref-link.open::after { content: "▾"; }
/* pojęcie ze słowniczka ustawy (corpus/terms.py): tekst jak przepis,
   kropkowane podkreślenie; dotknięcie rozwija definicję jak odesłanie */
.law a.ref-link.def { color: inherit; text-decoration-style: dotted; text-decoration-color: var(--muted); }
.law a.ref-link.def::after, .law a.ref-link.def.open::after { content: none; }
.ref-box {
  margin: 6px 0 14px calc(var(--d, 0) * 24px + 24px);
  padding: 10px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.ref-box-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--brand-line); }
.ref-box-kind { font-size: 11.5px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand); }
.ref-box-head a { flex: 1; color: var(--fg); font-weight: 600; }
.ref-box-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -4px -6px -4px 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.ref-box-close:hover { background: var(--brand-soft); color: var(--brand); }
.ref-box .law { font-size: 16px; line-height: 1.65; margin: 0; padding: 0; border: 0; background: none; }
.ref-box .law .ln { margin: 3px 0; }
.ref-box-more { margin-top: 6px; font-size: 13.5px; }
.ref-box-loading { color: var(--muted); font-size: 14px; }
/* explanation of a selected passage (static/explain.js): a button under the
   selection, the explanation under the line in the frame of a reference */
.sel-tip { position: fixed; z-index: 18; padding: 4px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow); animation: fade 0.12s ease; }
.sel-tip { display: flex; gap: 4px; }
.sel-tip .btn { gap: 6px; }
.explain-gap { flex: 1; }
.explain-quote { margin: 0 0 8px; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--muted); }
.explain-box .ai-text { font-size: 16px; line-height: 1.65; color: var(--text); animation: fade 0.25s; }
.explain-box .ai-text p { margin: 0; }
.explain-box .doc-ai-answer { margin-top: 12px; padding-top: 12px; }
.explain-ask { margin-top: 12px; }
.explain-box .auto-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.law .ln.frag-on { background: var(--brand-soft); box-shadow: 0 0 0 6px var(--brand-soft); border-radius: 2px; }
:is(.plain, .unit-ai, .explain-box) .cite.on { background: var(--brand); color: var(--on-brand); }

/* strona ustawy: cały tekst ze spisem treści jako nawigacją i wyszukiwarką
   w obrębie ustawy */
/* act page (redesign "Kierunek A", 5.10.2026): on a wide screen the table of
   contents as a column on the left edge, the title, metadata and text in the
   reading column next to it; on a narrow one title, contents, text */
.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "toc" "law"; gap: 0 40px; }
.reader-grid > .act-head { grid-area: head; min-width: 0; }
.reader-grid > .toc-nav { grid-area: toc; }
.reader-grid > .law, .reader-grid > .law-on-day { grid-area: law; min-width: 0; }
.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 16px 0 0; }
.act-meta .meta-row { flex: 1 1 auto; margin: 0; }
.toc-nav { margin: 12px 0 0; font-size: 15px; line-height: 1.4; }
.toc-nav > summary { cursor: pointer; font-weight: 600; color: var(--fg); padding: 8px 0; list-style: none; }
.toc-nav > summary::-webkit-details-marker { display: none; }
.toc-nav > summary::before { content: "▸ "; color: var(--brand); }
.toc-nav[open] > summary::before { content: "▾ "; }
/* a calm list (redesign "Kierunek A", 5.10.2026): one colour for number and
   title, the section being read in bold with its articles under it, the
   article being read on a tint (static/reader.js) */
.toc-nav nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 12px; }
.toc-nav nav a { color: var(--muted); text-decoration: none; padding: 7px 12px 7px calc(var(--d, 0) * 12px + 12px); border-radius: 9px; }
.toc-nav nav a:hover { color: var(--fg); background: var(--tint); }
.toc-nav .toc-title { color: inherit; margin-left: 4px; }
.toc-nav nav a.toc-section { color: var(--fg); font-weight: 600; }
.toc-arts { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px; }
.toc-arts.open { display: flex; }
.toc-nav nav a.toc-art { padding: 6px 12px 6px 28px; }
/* strona przepisu: spis ustawy obok (web/page.py, _unit_toc), nagłówki
   rozwinięte do tego przepisu, wcięte według stopnia */
.unit-toc { margin: 0 0 10px; }
.unit-toc nav a.toc-art { padding-left: calc(var(--d, 0) * 12px + 12px); }
.toc-nav nav a.toc-art.toc-current { color: var(--brand-ink); background: var(--brand-soft); font-weight: 500; }
.reader-find { position: relative; display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; }
.reader-find > .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.reader-find input { flex: 1; min-width: 0; height: 44px; font: 15px/1.4 var(--sans); color: var(--fg); padding: 0 40px 0 38px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.reader-find input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* hits in the act's text (static/reader.js): painted ranges, no marks */
::highlight(found) { background-color: #fff0a0; }
::highlight(found-current) { background-color: #ffc94d; }
.find-nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: 0 0 6px; padding: 0 2px; font-size: 13.5px; color: var(--muted); }
.find-nav[hidden] { display: none; }
.find-nav .find-count { position: static; margin-right: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.find-nav .icon-btn { width: 28px; height: 28px; margin: 0; border: 0; background: none; }
.find-nav .icon-btn:disabled { opacity: 0.4; cursor: default; background: none; color: var(--muted); }
.reader-find .find-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-width: 0; padding: 0 6px; border-bottom-width: 1px; font: 12px/1.5 var(--sans); color: var(--faint); background: none; pointer-events: none; }
.reader-find input:focus ~ .find-key, .reader-find input:not(:placeholder-shown) ~ .find-key { display: none; }
/* the clear button of the field at its right edge (no room kept for a count) */
.reader-find input:not(:placeholder-shown) { padding-right: 12px; }
/* hiding the contents column (web/page.py, TOC_HIDE): only beside the text */
.toc-toggle-btn, .reader-top { display: none; }
.toc-toggle-btn { width: 36px; height: 36px; margin: 0; border: 0; background: none; }
.toc-toggle-btn .i { width: 19px; height: 19px; }
html.toc-hidden .toc-toggle-btn .i-panel-left-close, html:not(.toc-hidden) .toc-toggle-btn .i-panel-left-open { display: none; }
.law .heading, .law .ln { scroll-margin-top: 72px; }

/* skład tekstu ustawy na stronie ustawy: kolumna do czytania (ok. 70 znaków),
   artykuł jako blok z numerem nad tekstem, § i punkty z numerem w marginesie
   (wcięcie wiszące), nagłówki w trzech stopniach, wartości pogrubione,
   słowa warunku oznaczone kropkowanym podkreśleniem */
.doc.reader .reader-grid > .law { max-width: 46rem; font-size: 18px; line-height: 1.65; margin-top: 8px; }
/* Czytelnia całej ustawy: przeglądarka pomija układanie jednostek, których
   nie widać (ustawa o VAT to 4 338 bloków i ok. 0,9 s układania przed
   pierwszym malowaniem). Przybliżona wysokość liczona z długości tekstu
   (--c z web/page.py) i szerokości wiersza, więc pasek przewijania ma od razu
   właściwą długość; „auto” w contain-intrinsic-size zapamiętuje prawdziwą
   wysokość po pierwszym ułożeniu. Zmierzone: praca nad układem 863 → 305 ms,
   czas blokowania 920 → 30 ms (done/2026-10-05-ustawa-pierwsze-malowanie.md).
   Druk i szukanie w treści działają bez zmian: pominięta treść jest w DOM,
   a Ctrl+F i wydruk same ją odsłaniają. */
.doc.reader .law > .ln { content-visibility: auto; contain-intrinsic-size: auto calc(var(--c, 80) / var(--cpl, 90) * 1.5rem + 1rem); }
@media (max-width: 600px) { .doc.reader .law > .ln { --cpl: 42; } }
/* ramka odesłania (static/refs.js) jest krótka, a jej wysokość potrzebna
   od razu: rozwija się płynnie do zmierzonej */
.doc.reader .ref-box .law > .ln { content-visibility: visible; }
@media print { .doc.reader .law > .ln { content-visibility: visible; } }
.doc.reader .law .ln { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: .6rem; padding-left: calc(var(--d, 0) * 1.7rem); margin: .4rem 0; }
.doc.reader .law .ln > .hd { margin: 0; font-weight: 600; color: var(--muted); min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.doc.reader .law .ln[data-kind="par"] > .hd, .doc.reader .law .ln[data-kind="ust"] > .hd { color: var(--muted); }
.doc.reader .law .ln[data-kind="art"] { display: block; padding-left: 0; margin: 2.1rem 0 .5rem; }
.doc.reader .law .ln[data-kind="art"] + .ln[data-kind="par"], .doc.reader .law .ln[data-kind="art"] + .ln[data-kind="ust"] { margin-top: .2rem; }
.doc.reader .law .ln[data-kind="art"] > .hd { display: block; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 .5rem; }
.doc.reader .law .ln[data-kind="art"] > .hd:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.doc.reader .law .ln[data-kind="art"] > .tx { display: block; }
.doc.reader .law .ln.repealed-unit { color: var(--faint); font-size: .92em; margin: .9rem 0 .2rem; }
.doc.reader .law .ln.repealed-unit > .hd { color: var(--faint); }
/* uchylony artykuł w jednym wierszu: „Art. 4. (uchylony)” */
.doc.reader .law .ln.repealed-unit[data-kind="art"] { margin: .9rem 0 .2rem; }
.doc.reader .law .ln.repealed-unit[data-kind="art"] > .hd, .doc.reader .law .ln.repealed-unit[data-kind="art"] > .tx { display: inline; font-size: 14px; }
.doc.reader .law .ln.repealed-unit[data-kind="art"] > .hd { margin-right: .4rem; }
.doc.reader .law .ln.repealed-unit[data-kind="art"] + .ln.repealed-unit[data-kind="art"] { margin-top: .2rem; }
.doc.reader .law .heading { margin: 3.2rem 0 1rem; }
.doc.reader .reader-grid > .law > .heading:first-child { margin-top: 2.2rem; padding-top: 0; border-top: 0; }
.doc.reader .law .heading .heading-title { display: block; margin: .3rem 0 0; letter-spacing: 0; text-transform: none; color: var(--fg); }
.doc.reader .law .heading[data-kind="czesc"], .doc.reader .law .heading[data-kind="ksiega"], .doc.reader .law .heading[data-kind="tytul"], .doc.reader .law .heading[data-kind="dzial"] { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 3.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.doc.reader .law .heading[data-kind="czesc"] .heading-title, .doc.reader .law .heading[data-kind="ksiega"] .heading-title, .doc.reader .law .heading[data-kind="tytul"] .heading-title, .doc.reader .law .heading[data-kind="dzial"] .heading-title { font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.doc.reader .law .heading[data-kind="rozdzial"] { font-size: 12.5px; line-height: 1.4; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 2.8rem; }
.doc.reader .law .heading[data-kind="rozdzial"] .heading-title { font-size: 19px; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; }
.doc.reader .law .heading[data-kind="oddzial"] { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 2.2rem; }
.doc.reader .law .heading[data-kind="oddzial"] .heading-title { font-size: 16.5px; line-height: 1.35; font-weight: 650; }
.doc.reader .law .heading[data-kind="zal"] { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.doc.reader .law .annex { font-size: 14px; }
@media (max-width: 720px) {
  .doc.reader .reader-grid > .law { font-size: 17px; line-height: 1.6; }
  .doc.reader .law .ln { padding-left: calc(var(--d, 0) * 1rem); column-gap: .45rem; }
  .doc.reader .law .ln[data-kind="art"] { margin-top: 1.7rem; }
}

/* w warstwie pierwszej wyników sekcje nie mają górnego odstępu (jest nad nią
   pole pytania); między „Przepis z pytania” a „Co mówią przepisy” zostaje */
.layer.first > .section { margin-top: 0; }
.layer.first > .section ~ .section { margin-top: 48px; }

/* ——— stopka ——— */

/* footer (web/page.py, footer; design "Strona główna", 6.10.2026): the mark
   with the line, numbers and as-of date, three link columns, the note */
.foot { border-top: 1px solid var(--line); background: var(--law-bg); }
.foot-inner { max-width: var(--page); margin: 0 auto; padding: 44px 24px 36px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 300px; }
.foot-brand p { margin: 0; }
.foot .brand { gap: 10px; }
.foot .brand-mark { width: 30px; height: 30px; }
.foot .wordmark { font-size: 17px; font-weight: 700; }
.asof-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.foot nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot nav a { color: var(--text); }
.foot nav a:hover { color: var(--brand); }
.foot-title { margin: 0 0 4px; }
/* the last row: only "Dura lex, sed lex." on the right (design "Strona
   główna v2", 8.10.2026) */
.foot-bottom { border-top: 1px solid var(--line); }
.foot-bottom-inner { max-width: var(--page); margin: 0 auto; padding: 14px 24px; display: flex; justify-content: flex-end; align-items: center; font-size: 13px; color: var(--faint); }
/* Judge Dredd's helmet: a surprise at the very end of the page (static/egg.js) */
.foot-egg { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-left: 8px; padding: 0; border: 0; border-radius: 8px; background: none; font: inherit; font-style: italic; color: var(--muted); cursor: pointer; transition: color 0.15s; }
.foot-egg:hover { color: var(--brand); }
.foot-egg .i { width: 20px; height: 20px; transition: transform 0.2s; }
.foot-egg:hover .i { transform: rotate(-12deg) scale(1.1); }

/* the bottom right corner of every page (web/page.py, CORNER;
   static/report.js; owner 7.10.2026): back to the top once the reader is
   well down the page, and "Zgłoś uwagę". Fixed over the page, under menus,
   the panel and dialogs; the arrow fades in to the left of the pill, which
   never moves. The footer ends with room for them, so the last line stays
   readable at the very bottom */
.corner { position: fixed; right: 16px; bottom: 16px; z-index: 24; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.corner > * { pointer-events: auto; }
.to-top, .report-button { height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.to-top { display: grid; place-items: center; width: 44px; padding: 0; color: var(--muted); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s, background 0.15s, color 0.15s; }
.to-top.on { opacity: 1; visibility: visible; transform: none; }
.to-top .i { width: 20px; height: 20px; }
.report-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px 0 15px; color: var(--fg); font: 600 var(--fs-ui) var(--sans); }
.report-button .i { width: 18px; height: 18px; color: var(--brand); }
.to-top:hover, .report-button:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.foot-bottom-inner { padding-bottom: 76px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
/* a phone: smaller, closer to the edge; hidden while typing (the keyboard
   moves fixed elements over the field) */
@media (max-width: 720px) {
  .corner { right: 12px; bottom: 12px; }
  .to-top, .report-button { height: 40px; }
  .to-top { width: 40px; }
  .report-button { padding: 0 14px 0 12px; font-size: 14.5px; }
  body:has(main :is(input, textarea, select):focus) .corner { visibility: hidden; }
}
/* the form: a card over the corner on a computer, a sheet from the bottom
   on a phone; the same fields as elsewhere (.reason, .input, .btn) */
dialog.report { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto 16px 16px auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; animation: report-in 0.18s ease-out; }
dialog.report::backdrop { background: var(--overlay); }
@keyframes report-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes report-up { from { transform: translateY(40%); } }
.report-form, .report-sent { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 20px; }
.report-form[hidden], .report-sent[hidden] { display: none; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -8px -4px 0; }
.report h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.report-lead { margin: 0; color: var(--muted); font-size: var(--fs-ui); line-height: 1.5; }
.report-kinds { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.report-kinds legend { margin: 0 0 8px; padding: 0; }
label.reason { display: inline-flex; align-items: center; }
label.reason input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.reason:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
label.reason:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.report textarea { width: 100%; min-height: 132px; resize: vertical; font-size: 16px; line-height: 1.5; }
.report textarea::placeholder { color: var(--faint); }
.report .input { width: 100%; }
.report-hint { margin: -4px 0 0; color: var(--faint); font-size: var(--fs-small); }
.report-field { margin: 4px 0 -6px; color: var(--text); font-size: var(--fs-meta); font-weight: 500; }
.report-optional { color: var(--faint); font-weight: 400; }
.report-attach { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-meta); }
.report-attach label { display: inline-flex; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
.report-attach input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.report-more summary { color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.report-more summary:hover { color: var(--brand); }
.report-more[open] { flex-basis: 100%; }
.report-list { margin: 8px 0 0; padding: 10px 14px; list-style: none; border-radius: var(--r-md); background: var(--tint); color: var(--muted); font-size: var(--fs-small); line-height: 1.5; overflow-wrap: anywhere; }
.report-list b { color: var(--text); font-weight: 600; }
.report-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.report-error { margin: 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--rose-soft); color: var(--rose); font-size: var(--fs-meta); }
.report-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.report-actions .btn { padding: 11px 20px; }
.report-actions .link-button { color: var(--muted); font-size: var(--fs-ui); }
.report-sent { align-items: flex-start; padding: 26px 26px 22px; }
.report-sent h2 { margin-top: 2px; }
.report-sent p { margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 600px) {
  dialog.report { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 16px 16px 0 0; animation-name: report-up; }
  .report-form, .report-sent { padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
  .report-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { dialog.report { animation: none; } }
.egg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 14, 0.78); animation: fade 0.2s ease; }
.egg.out { animation: fade-out 0.2s ease forwards; }
.egg-card { position: relative; width: min(860px, 100%); animation: egg-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.egg.still .egg-card, .egg.still { animation: none; }
@keyframes egg-in { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
.egg-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 12px; margin: 0 0 12px; }
.egg-head .egg-title { grid-column: 2; }
.egg-title { margin: 0; text-align: center; font-size: clamp(28px, 6vw, 56px); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #f5c518; text-shadow: 0 3px 0 #7a1b1b, 0 0 24px rgba(245, 197, 24, 0.45); }
.egg-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }
.egg-close { grid-column: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 16px; cursor: pointer; }
.egg-close:hover { background: rgba(255, 255, 255, 0.28); }
.egg-credit { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 900px) {
  .foot-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 600px) {
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

/* previous and next article under the text (web/page.py, _neighbors) */
.unit-pager { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15.5px; }
.unit-pager a { padding: 6px 10px; margin: -6px -10px; border-radius: 8px; font-weight: 500; }
.unit-pager a:hover { background: var(--tint); text-decoration: none; }
/* signed in: the note under "Zapytaj o swoją sytuację" waits for /api/me
   (static/ask.js) instead of showing "sign in" for a moment */
.signed-in .ask-note:not(.filled) { visibility: hidden; }
/* "Przejdź do…" (Ctrl+K, static/jump.js): palette at the top of the screen */
dialog.jump { width: min(640px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 120px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.jump::backdrop { background: var(--overlay); }
.jump-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.jump-field .i { color: var(--brand); width: 20px; height: 20px; }
.jump-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 18px/1.4 var(--sans); color: var(--fg); }
/* the header "?" after the main menu: the shortcuts of the page on hover
   (web/page.py, KEYS_HELP; static/keys.js hides those not working here) */
/* the keyboard on the right of the header: the shortcuts of the page in a
   dark tip on hover (web/page.py, KEYS_HELP; static/keys.js hides those not
   working here) */
.top .nav-keys { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); cursor: help; outline-offset: 2px; }
.top .nav-keys:hover, .top .nav-keys:focus-visible { color: var(--fg); background: var(--tint); }
.nav-keys .i { width: 18px; height: 18px; }
.keys-tip { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; display: grid; gap: 12px; width: 340px; padding: 16px 18px 14px; border-radius: 14px; background: var(--fg); color: color-mix(in srgb, var(--bg) 78%, var(--fg)); font-size: 14.5px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 12px 32px rgba(21, 24, 28, 0.3); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s; }
.nav-keys:hover .keys-tip, .nav-keys:focus .keys-tip { opacity: 1; visibility: visible; }
.keys-tip > b { color: var(--bg); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.keys-row { display: grid; grid-template-columns: 4.4em 1fr; gap: 14px; align-items: start; }
.keys-row > span:first-child { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.keys-row > span:last-child { padding-top: 3px; }
.keys-row[hidden] { display: none; }
.keys-tip kbd { min-width: 26px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--bg) 28%, var(--fg)); border-radius: 7px; background: color-mix(in srgb, var(--bg) 8%, var(--fg)); color: var(--bg); font: 600 13px/1 var(--sans); }
@media (max-width: 720px), (hover: none) { .top .nav-keys { display: none; } }
kbd { display: inline-block; min-width: 1.7em; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--fg); font: 600 13px/1.5 var(--sans); text-align: center; }
.jump-field kbd { font: 12px var(--sans); color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
/* suggestions under a line; before the first letter only the field. A row:
   a tile with the icon of the thing (green the law, blue case law; a
   magnifier on it when the row searches), the name, under it the kind or
   the query; the arrow on the chosen row. Searches after a thin line. */
dialog.jump ul { list-style: none; margin: 0; padding: 8px; max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line); }
dialog.jump ul:empty { display: none; }
dialog.jump li { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 10px; border-radius: 12px; cursor: pointer; }
dialog.jump li[aria-selected="true"] { background: var(--tint); }
dialog.jump li.jump-group { position: relative; margin-top: 13px; }
dialog.jump li.jump-group::before { content: ""; position: absolute; top: -7px; left: 12px; right: 12px; border-top: 1px solid var(--line); }
.jump-tile { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.jump-tile.tone-law { background: var(--brand-soft); color: var(--brand); }
.jump-tile.tone-case { background: var(--info-soft); color: var(--info); }
.jump-tile > .i { width: 19px; height: 19px; }
.jump-badge { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--surface); border-radius: 50%; background: currentColor; }
.jump-badge .i { width: 11px; height: 11px; color: var(--surface); }
dialog.jump li[aria-selected="true"] .jump-badge { border-color: var(--tint); }
.jump-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.jump-label, .jump-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-label { font-size: var(--fs-ui); font-weight: 500; color: var(--fg); }
.jump-sub { font-size: var(--fs-small); color: var(--muted); }
.jump-go { flex: none; display: grid; color: var(--muted); visibility: hidden; }
.jump-go .i { width: 16px; height: 16px; }
dialog.jump li[aria-selected="true"] .jump-go { visibility: visible; }
@media (max-width: 720px) {
  dialog.jump { margin-top: 12px; }
  dialog.jump li { gap: 12px; }
  .jump-tile { width: 34px; height: 34px; border-radius: 10px; }
  .jump-field kbd { display: none; }
}

/* "Zmiany w prawie" (web/changes.py, design "Zmiany" 7.10.2026): the column,
   title, filters and count as the case law search; days with the date on the
   left, in a day the acts, in an act the provisions; a row opens the
   difference under it */
.chg-page .page-lead { max-width: 560px; margin: 0 0 24px; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.chg-page .filterbar { margin: 0; }
.chg-page .filterbar .pick-clear { margin-left: 0; padding: 7px 4px; }
.chg-page .segmented { flex-wrap: wrap; }
.chg-page .segmented > a, .chg-page .segmented > b { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; white-space: nowrap; }
.chg-page .segmented .g-count { margin: 0; padding: 1px 7px; border-radius: var(--r-pill); background: var(--line); color: var(--faint); font-size: 12px; font-weight: 600; }
.chg-page .segmented > .on .g-count { background: var(--brand-soft); color: var(--brand-ink); }
.chg-acts-pick .pick-menu { min-width: 360px; }
.chg-acts-pick .pick-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-find { position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: -6px -6px 6px; padding: 10px 14px 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pick-find .i { flex: none; width: 1em; height: 1em; color: var(--faint); }
.pick-find input { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-meta); }
.pick-find input::-webkit-search-cancel-button { display: none; }
.pick-none { margin: 0; padding: 12px 10px; font-size: var(--fs-meta); color: var(--faint); }
.chg-page .resultbar-tools .pill { font-size: 13.5px; padding: 6px 12px; font-weight: 500; }
.chg-days { display: flex; flex-direction: column; transition: opacity 0.2s; }
.chg-days.loading { opacity: 0.5; }
.chg-day { display: flex; gap: 16px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.chg-day:last-child { border-bottom: 0; }
.chg-date { flex: none; width: 184px; }
.chg-date time { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.chg-date time:focus { outline: 0; }
.chg-wd { display: block; margin-top: 3px; font-size: var(--fs-small); color: var(--faint); }
.chg-date .badge { margin-top: 8px; font-size: 12px; padding: 2px 9px; }
.chg-acts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.chg-act { display: flex; flex-direction: column; gap: 8px; }
.chg-act-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.chg-act-head > a { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--fg); }
.chg-act-head > a:hover { color: var(--brand); }
.chg-n { font-size: var(--fs-small); color: var(--faint); white-space: nowrap; }
.chg-basis { margin: 0; font-size: var(--fs-meta); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.chg-units { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
details.chg > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 -8px; padding: 6px 8px; border-radius: var(--r-sm); list-style: none; font-size: 15.5px; line-height: 1.5; color: var(--text); cursor: pointer; }
details.chg > summary::-webkit-details-marker { display: none; }
details.chg > summary:hover { background: var(--tint); }
details.chg > summary b { font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.chg-parts { flex: 1; min-width: 0; color: var(--muted); }
details.chg .badge { flex: none; font-size: 12px; padding: 1px 8px; line-height: 1.5; }
details.chg > summary .i-chevron-down { flex: none; align-self: center; width: 1em; height: 1em; color: var(--faint); transition: transform 0.2s; }
details.chg[open] > summary .i-chevron-down { transform: rotate(180deg); }
.chg-diff { margin: 0 0 8px; padding: 12px 16px 12px 0; animation: rise 0.2s ease-out; }
.chg-diff .hist-diff { margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-strong); font-size: 15.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; text-wrap: pretty; }
.chg-open { display: inline-block; margin: 10px 0 0 16px; font-size: 14px; font-weight: 600; }
.chg-rest { font-size: var(--fs-meta); color: var(--muted); }
.chg-rest:hover { color: var(--brand); }
.chg-next { display: flex; justify-content: center; margin: 28px 0 0; }
.chg-next .pill { padding: 9px 18px; font-size: var(--fs-meta); font-weight: 500; }
.chg-next .pill[aria-busy] { opacity: 0.6; }
/* Pro on the changes page (web/changes.py, web/pro.py): a mark at choices
   only in Pro, the card in place of the days of a Pro view and at the end of
   the free 7 days; someone with Pro (.is-pro, static/account.js) sees neither
   the marks nor the card at the end. The card is white with a brand frame
   (owner 7.10.2026: a plain one blended into the page, a dark one looked
   bad) */
.pro-mark { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 650; line-height: 1.6; letter-spacing: 0.02em; vertical-align: 1px; }
.is-pro .pro-mark, .is-pro [data-pro-teaser] { display: none; }
/* odpowiedź dla klienta (static/client.js): the letter in a card under the
   explanation, to correct in place; the footnotes in legal form under it */
.client-box { margin: 16px 0 0; }
.client-letter { display: grid; gap: 12px; }
.client-letter .doc-ai-head { margin: 0; }
.client-letter .field-row { display: grid; gap: 4px; font-size: var(--fs-meta); color: var(--muted); }
.client-letter textarea.client-text { width: 100%; min-height: 16rem; resize: vertical; font: inherit; font-size: var(--fs-ui); line-height: 1.6; color: var(--text); }
.client-letter .label { margin: 4px 0 0; }
.client-notes { margin: 0; padding-left: 1.6em; font-size: var(--fs-small); color: var(--text); line-height: 1.5; }
.client-notes li + li { margin-top: 4px; }
.client-letter .auto-note { margin: 0; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.client-status { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.client-pitch { margin: 12px 0 0; }
.signature-form { display: grid; gap: 12px; max-width: 440px; }
.signature-form .field-row { display: grid; gap: 4px; font-size: var(--fs-meta); color: var(--muted); }
.chg-pro { margin: 32px 0 0; border: 1.5px solid var(--brand); }
.chg-pro h3 { margin: 0 0 8px; }
.chg-pro p { margin: 0 0 16px; color: var(--text); line-height: 1.6; }
.chg-pro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
/* stanowisko organów i sądów (web/stance.py): shares of the sides as thin
   stacked bars with a surface gap between segments, the legend always
   present, the years as a table with the bars inside */
.stance { margin: 26px 0 0; }
.stance h3 { margin: 0 0 6px; font-size: 17px; }
.stance h3 .pro-mark { vertical-align: 2px; }
.stance-lead { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-meta); line-height: 1.55; }
.stance-rows { display: grid; gap: 10px; }
.stance-row { display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto; align-items: center; gap: 12px; font-size: var(--fs-ui); }
.stance-name { font-weight: 500; color: var(--fg); }
.stance-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--tint); }
.stance-bar span { display: block; height: 100%; }
.stance-bar .for, .stance-legend .for { background: var(--chart-for); }
.stance-bar .against, .stance-legend .against { background: var(--chart-against); }
.stance-bar .mixed, .stance-legend .mixed { background: var(--chart-mixed); }
.stance-pct { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.stance-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--muted); }
.stance-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.stance-years { margin: 14px 0 0; }
.stance-years > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 500; color: var(--text); }
.stance-table { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.stance-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 10px 3px 0; white-space: nowrap; }
.stance-table td { padding: 3px 0; }
.stance-table td.bar { width: 100%; padding-right: 12px; }
.stance-table .n, .stance-table .pct { text-align: right; color: var(--muted); padding-left: 10px; white-space: nowrap; }
.stance-note { margin: 14px 0 0; font-size: var(--fs-small); color: var(--faint); line-height: 1.5; }
.stance-latest { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.stance-latest .badge { margin-left: 6px; }
.stance-latest .quote { margin: 4px 0 0; color: var(--text); font-size: var(--fs-meta); line-height: 1.55; }
.stance-more { margin: 14px 0 0; font-size: var(--fs-ui); }
.stance-live:not([hidden]) + .resultbar, .stance-wall + .stance-live:not([hidden]) { margin-top: 0; }
.stance-layer .label { margin: 24px 0 8px; }
@media (max-width: 560px) { .stance-row { grid-template-columns: 1fr; gap: 4px; } }
.chg-undated { margin: 32px 0 0; padding: 0; overflow: hidden; }
.chg-undated > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none; font-size: 15.5px; font-weight: 600; color: var(--fg); cursor: pointer; }
.chg-undated > summary::-webkit-details-marker { display: none; }
.chg-undated > summary:hover { background: var(--law-bg); }
.chg-undated > summary .i { flex: none; width: 1em; height: 1em; color: var(--faint); transition: transform 0.2s; }
.chg-undated[open] > summary .i { transform: rotate(180deg); }
.chg-undated ul { list-style: none; margin: 0; padding: 4px 18px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.chg-undated li { padding-top: 14px; font-size: 15px; line-height: 1.55; }
.chg-undated li p { margin: 0; color: var(--text); }
.chg-undated b { font-weight: 600; }
.chg-undated .chg-undated-units { margin-top: 4px; font-size: 14px; color: var(--muted); }
.chg-source { display: flex; flex-direction: column; gap: 4px; margin: 28px 0 0; font-size: var(--fs-small); line-height: 1.6; color: var(--faint); }
.chg-source a { display: inline-flex; align-items: center; gap: 5px; }
.chg-source .i { width: 0.85em; height: 0.85em; }
@media (max-width: 720px) {
  .chg-day { flex-direction: column; gap: 12px; }
  .chg-date { width: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .chg-wd { margin: 0; }
  .chg-date .badge { margin: 0; }
  .chg-acts-pick .pick-menu { min-width: 0; }
}

/* API keys on the account page (web/apikeys.py) */
.table-wrap { overflow-x: auto; }
.inline-form { display: grid; gap: 8px; justify-items: start; max-width: 560px; margin: 18px 0 0; }
.inline-form label { font-size: 15px; font-weight: 600; color: var(--fg); }
.inline-form input { font: 16px/1.4 var(--sans); padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--fg); width: 100%; }
.inline-form .btn { display: inline-flex; align-items: center; gap: 8px; }
table.api-keys code { font-size: 13px; color: var(--muted); }
table.api-keys .quiet-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
table.api-keys td.act { padding-left: 20px; text-align: right; }
.api-key-done { margin-top: 20px; }
.api-key-done .btn { text-decoration: none; }
.api-key-value { width: 100%; font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 10px; background: var(--brand-soft); color: var(--fg); }
pre.code { overflow-x: auto; padding: 12px 14px; border-radius: 10px; background: var(--tint); font-size: 13.5px; }
/* another day in the results: calendar next to "stan na …" (static/app.js, dayPicker, wordingOn) */
.law-state { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.day-pick { position: relative; }
.law-state .day-pick { display: flex; }
.law-state .day-pick .icon-btn { margin: 0; }
.lawcard > .layer-head { position: relative; z-index: 3; }
.day-pick-box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); white-space: nowrap; font-size: 14px; }
.day-pick-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); }
.day-pick-close:hover { background: var(--tint); color: var(--fg); }
.day-pick-box .date-form > label { padding-right: 30px; }
/* a very simple date field in Polish (static/datepick.js, static/app.js
   dateField, web/page.py _date_form): the day typed or picked from the month
   under the field, "Pokaż" next to it */
.date-form { display: grid; gap: 10px; margin: 0; white-space: normal; }
.date-form > label { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.date-row { display: flex; align-items: center; gap: 8px; }
.date-row > .btn { align-self: stretch; }
.date-row input[type="text"] { width: 140px; height: 38px; padding: 0 12px; font: 15px var(--sans); color: var(--fg); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.date-row input[type="text"]:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.date-form .pill { width: auto; height: 38px; padding: 0 16px; border-radius: 10px; border-color: var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 600; }
.date-form .pill:hover { background: var(--brand-hover); color: var(--on-brand); }
.date-hint { margin: 0; font-size: 13px; color: var(--rose); }
.date-hint:empty { display: none; }
.cal { width: 252px; }
.cal-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.cal-title { flex: 1; white-space: nowrap; text-align: center; font-size: 14px; font-weight: 600; color: var(--fg); }
/* buttons of the calendar also inside a menu (.dropdown-menu button) */
.cal button { display: grid; place-items: center; gap: 0; padding: 0; white-space: nowrap; text-align: center; }
.cal button.cal-nav { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 16px/1 var(--sans); cursor: pointer; }
.cal button.cal-nav:hover { background: var(--tint); color: var(--fg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { padding: 4px 0; text-align: center; font-size: 12px; color: var(--faint); }
.cal button.cal-day { width: auto; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 14px var(--sans); cursor: pointer; }
.cal button.cal-day:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); }
.cal button.cal-day.today { box-shadow: inset 0 0 0 1px var(--brand-line); }
.cal button.cal-day.on { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.cal button.cal-day:disabled { color: var(--line-strong); cursor: default; }
.day-chip { font-size: 13px; font-weight: 600; padding: 4px 12px; border: 0; cursor: pointer; }
.wording-on { margin: 0 0 10px; min-height: 22px; }
.wording-on.differs { padding: 10px 14px; border-radius: 12px; background: var(--amber-soft); }
.wording-note { margin: 0; font-size: 14.5px; color: var(--text); }
.wording-note.same { display: flex; align-items: center; gap: 6px; color: var(--green); }
.wording-note.unknown { color: var(--muted); }
.wording-on .hist-diff { margin-top: 8px; }

/* ——— wąski ekran ——— */

/* nagłówek w dwóch wierszach, zanim jeden przestanie się mieścić (tablet,
   wąskie okno): znak i „Dla profesjonalistów”, pod nimi nawigacja i konto */
@media (max-width: 1240px) {
  .top-inner { gap: 8px 14px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 8px; }
  .top-inner::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .top nav { order: 3; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 0 0 -12px; }
  .top nav::-webkit-scrollbar { display: none; }
  .account, .pro-link { order: 1; }
  .top-inner > .brand { margin-right: auto; }
  .top .nav-keys { margin-left: 0; }
}
@media (max-width: 720px) {
  /* the header scrolls away on a phone: two rows sticking over the page took
     a fifth of the screen and covered the field after a search (owner
     7.10.2026); sticky bars and anchors then need no room for it */
  .top { position: relative; background: var(--bg); backdrop-filter: none; }
  .find { top: 0; }
  .hero .search, .law .heading, .law .ln, .doc .law .ln[id], .acts-toolbar, .doc .acts-group, .card, .doc.prose h2[id], .sg-section { scroll-margin-top: 12px; }
  .top-inner { padding: 12px 16px 8px; }
  .top nav { margin: 0 0 0 -8px; overflow: visible; }
  .top nav .nav-wide { display: none; }
  .nav-more { display: block; }
  .top nav a { padding: 6px 10px; font-size: 15px; }
  .pro-link { padding: 6px 11px; font-size: 13.5px; }
  .account-login span:not(.i) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .account-login { padding: 4px 0; }
  .account-login .i { width: 26px; height: 26px; }
  .top-inner { column-gap: 10px; }
  .account-button { padding: 0; }
  .avatar { width: 30px; height: 30px; font-size: 14px; }
  .brand-mark { width: 32px; height: 32px; }
  .wordmark { font-size: 17px; }
  .cost-table th:nth-child(3), .cost-table td:nth-child(3), .cost-table th:nth-child(4), .cost-table td:nth-child(4) { display: none; }
  main { padding: 16px 16px 64px; }
  .hero h1 { font-size: 38px; margin-bottom: 12px; }
  /* on a phone the field comes first: less room over the headline, the
     sentences wrap as one text */
  .hero { padding-top: 3vh; }
  .hero-asof { margin-bottom: 14px; font-size: 13px; }
  .hero .lead { font-size: 16px; margin-bottom: 20px; text-wrap: pretty; }
  .examples { margin-top: 24px; }
  .hero .lead .line { display: inline; white-space: normal; }
  .home-section { margin-top: 72px; }
  .home-section > h2 { font-size: 24px; }
  .steps, .trust, .doc.prose .plans { grid-template-columns: 1fr; gap: 22px; }
  .home-trust > h2 { font-size: 28px; margin-bottom: 28px; }
  .home-numbers { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; padding-bottom: 28px; }
  .home-pillars { grid-template-columns: 1fr; gap: 26px; }
  .home-quality { margin-top: 40px; padding: 22px 20px; }
  .home-cta { margin-top: 64px; padding: 22px 20px; }
  .home-cta > p { font-size: 19px; }
  .hero .search textarea { font-size: 17px; }
  .clear-q span:not(.i) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .card-head { flex-wrap: wrap; }
  .card-actions { width: 100%; margin-left: -9px; }
  .refs { columns: 1; }
  /* the provision on a phone (owner 7.10.2026): a page over the results,
     coming in from the right; X or the back gesture (the address changes)
     returns to the same place in the results, which do not scroll under it */
  .panel { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; box-shadow: none; animation: page-in 0.22s ease-out; }
  .panel.closing { animation: page-out 0.18s ease-in forwards; }
  html.panel-open, html.panel-open body { overflow: hidden; }
  .panel-bar { padding: 6px 6px 6px 16px; min-height: 52px; }
  .panel-bar .icon { width: 44px; height: 44px; }
  .panel-bar .icon .i { width: 20px; height: 20px; }
  .panel-body { padding: 22px 18px 40px; }
  .panel-body .find { top: -22px; }
  .day { grid-template-columns: 1fr; gap: 8px; }
  .event { grid-template-columns: 1fr; gap: 4px; }
  .case-cols { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .law .ln { padding-left: calc(var(--d, 0) * 16px); }
  .law-quote, .prov-text, .doc > .law, .unit-main > .law { padding: 12px 14px 12px 16px; font-size: 16.5px; }
  .prov-text .ln { padding-left: calc(var(--d, 0) * 14px); }
  .prov-title { font-size: 20px; }
  .prov-box { padding: 14px 16px 12px 18px; }
  /* "Cały przepis": the same icon, a finger-sized target */
  .prov-whole, .provision.small .prov-whole { width: 40px; height: 40px; margin: -11px -12px -11px auto; }
  .results { margin-top: 28px; }
  /* over the results the examples are one row to swipe: the field and the
     first provision fit on the first screen (examples stay, owner 6.10.2026) */
  .hero.over-results .examples { margin-top: 14px; gap: 8px; }
  .hero.over-results .privacy-note:not(.warn) { display: none; }
  .hero.over-results .example-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; }
  .hero.over-results .example-list::-webkit-scrollbar { display: none; }
  /* other acts: the name over the excerpt, "Zobacz" under them */
  .other-acts button { flex-direction: column; gap: 6px; padding: 10px 8px; }
  .prov-box .prov-text { font-size: 16.5px; }
  .followup .btn { flex: 1 1 100%; }
  .ref-box { margin-left: calc(var(--d, 0) * 16px + 8px); padding: 10px 12px; }
  .ref-box-head { flex-wrap: wrap; }
  .page-title { font-size: 30px; }
  .doc h1, .doc.reader h1 { font-size: 28px; }
  .doc.unit-page h1 { font-size: 34px; }
  .doc.unit-page > .law, .unit-page .unit-main > .law { font-size: 17px; padding: 0; }
  .doc.prose h1 { font-size: 32px; }
  .doc.prose h1.pro-title { font-size: 36px; }
  .foot-inner { padding: 32px 16px 28px; }
  .foot-bottom-inner { padding: 12px 16px 64px; }
  .dev-inner { padding: 24px 16px 32px; }
  .dev-row { grid-template-columns: 1fr; gap: 2px; }
}
/* the four navigation items fit inline from 375 px (the account is in the
   first row); narrower, the last one goes under "Więcej" */
@media (min-width: 375px) and (max-width: 720px) {
  .top nav .nav-wide { display: inline-block; }
  .nav-more { display: none; }
  .top nav { overflow-x: auto; scrollbar-width: none; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { padding: 6px 8px; }
}
@media (min-width: 375px) and (max-width: 399px) { .top nav a { padding: 6px 7px; } }
@media (max-width: 359px) { .top nav { gap: 2px; } .top nav a, .nav-more summary { padding: 6px 6px; } }
@media (min-width: 1100px) {
  .doc.reader { max-width: var(--page); padding: 0 40px; }
  /* the contents column is as high as the window: a short act would share
     its height out between the title and the text (a gap above § 1), so the
     text row takes what is left */
  .reader-grid { grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "toc head" "toc law"; column-gap: 0; }
  .doc.reader .reader-grid > .act-head, .doc.reader .reader-grid > .law, .doc.reader .reader-grid > .law-on-day { width: 100%; max-width: calc(46rem + 80px); margin-left: auto; margin-right: auto; padding: 0 40px; }
  .doc.reader .reader-grid > .act-head { padding-top: 32px; }
  .doc.reader .reader-grid > .law, .doc.reader .reader-grid > .law-on-day { padding-bottom: 96px; }
  .toc-nav { grid-row: 1 / span 2; position: sticky; top: 69px; align-self: start; height: calc(100vh - 69px); overflow: auto; margin: 0; padding: 28px 24px 28px 0; border-right: 1px solid var(--line); }
  .toc-nav .reader-find { margin-top: 0; }
  .toc-nav > summary { display: none; }
  .toc-nav nav { display: flex; }
  /* the search with its count at the top of the column while the contents
     scroll under it */
  .toc-nav .find-box { position: sticky; top: -28px; z-index: 1; margin: -28px 0 0; padding: 28px 0 4px; background: var(--bg); }
  /* the button hiding the column on the reading side of its edge and the
     arrow to the top on the other side of the text, both at the top while
     reading (owner 8.10.2026); the arrow in the page corner gives way */
  :is(.reader-grid, .doc-grid) > :is(.toc-toggle-btn, .reader-top) { grid-row: 1 / span 2; grid-column: -2 / -1; position: sticky; top: calc(69px + 28px); align-self: start; z-index: 2; height: 44px; }
  /* right outside the reading column (46rem + 2 × 40px, centred in the
     area; a percentage margin of a grid item is of its area), at the edge
     of the area when the column fills it */
  /* level with the search field: as high, as far from the top, at rest and
     while reading */
  :is(.reader-grid, .doc-grid) > .toc-toggle-btn { display: inline-flex; justify-self: start; margin: 28px 0 0 max(8px, calc(50% - 23rem - 40px - 36px)); }
  :is(.reader-grid, .doc-grid) > .reader-top { display: grid; justify-self: end; margin: 28px max(8px, calc(50% - 23rem - 40px - 44px)) 0 0; }
  body:has(:is(.reader-grid, .doc-grid) > .reader-top) > .corner > .to-top { display: none; }
  /* without the column the text stays alone in the middle of the page */
  html.toc-hidden .reader-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "law"; }
  html.toc-hidden .reader-grid > .toc-nav { display: none; }
  main.doc.unit-page:has(> .unit-grid) { max-width: calc(var(--measure) + 64px + 300px); }
  .unit-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 40px; }
  .unit-grid > .unit-toc { grid-row: auto; top: 69px; height: calc(100vh - 69px); margin: -24px 0 0; padding: 24px 16px 28px 0; }
}

/* ——— przegląd zmian w prawie (web/briefs.py): przepis przed i po, pod nim
   wyjaśnienie z przypisami, źródła, poprawki; panel właściciela ——— */

.brief { margin: 36px 0 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc h2.brief-title { margin: 0 0 6px; font-size: 26px; line-height: 1.25; font-weight: 700; text-transform: none; letter-spacing: -0.015em; color: var(--fg); }
.brief-title .act { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.brief h3 { margin: 26px 0 10px; }
.brief h4 { margin: 18px 0 6px; font-size: 16px; color: var(--fg); }
.brief-text { font-size: 17px; line-height: 1.7; }
.brief-text > p { font-size: 18px; margin: 0 0 10px; }
.brief-list { margin: 0 0 8px; padding-left: 20px; }
.brief-list li { margin: 6px 0; }
.brief .auto-note { margin: 12px 0 0; }
.brief-sources { font-size: 14.5px; line-height: 1.55; color: var(--muted); padding-left: 22px; }
.brief-sources li { margin: 6px 0; }
.brief-sources li:target { background: #fff8e6; border-radius: 6px; }
.fn-quote { display: inline; margin-left: 6px; }
.fn-quote summary { display: inline; cursor: pointer; color: var(--brand); font-size: 13.5px; }
.fn-quote blockquote { margin: 8px 0; padding: 8px 12px; border-left: 2px solid var(--line-strong); background: var(--law-bg); white-space: pre-line; color: var(--text); font-size: 14.5px; }
.brief-fixes { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--amber-soft); color: var(--text); font-size: 14.5px; }
.brief-fixes h4 { margin: 0 0 6px; }
.brief-fixes ul { margin: 0; padding-left: 18px; }
.review { margin: 12px 0 20px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); }
.review-meta { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.review-row { margin: 10px 0 14px; }
.review-row textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.review-row.rejected textarea { border-color: var(--rose); background: var(--rose-soft); }
.review-row label { font-size: 14px; }
.review-problems { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.review-row.rejected .review-problems { color: var(--rose); }
.review .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.review-fix { display: flex; gap: 8px; margin-top: 10px; }
.review-fix input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; }

/* ——— udostępnianie odpowiedzi (static/app.js, web/shared.py) ——— */

/* under the explanation (design "Szukaj v2", 8.10.2026): "Udostępnij
   odpowiedź" in the brand colour, "Kopiuj tekst" and "Dla klienta" (Pro)
   beside it, flat, on the left */
.answer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 14px 0 0 -10px; }
.answer-tools .ghost { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.answer-tools .ghost:hover { background: var(--tint); color: var(--fg); }
.answer-tools .share-main { color: var(--brand); font-weight: 600; }
.answer-tools .share-main:hover { background: var(--brand-soft); color: var(--brand); }
/* a note where the click was: link or quote copied */
/* for the administrator: technical details in a dark band under the footer */
.dev-panel { background: #101316; color: #e3e7ea; border-top: 3px solid #b8440a; }
.dev-inner { max-width: var(--page); margin: 0 auto; padding: 32px 40px 48px; }
.dev-inner > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 20px; }
.dev-inner h2 { margin: 0; font-size: 20px; font-weight: 600; color: #fff; }
.dev-inner > header p { margin: 0; font-size: 14px; color: #8d97a1; }
.dev-tag { align-self: center; padding: 3px 8px; border-radius: 6px; background: #b8440a; color: #fff; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.dev-card { padding: 18px 20px; border: 1px solid #262c32; border-radius: 14px; background: #171b1f; }
.dev-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #f08c4b; }
.dev-card dl { margin: 0; display: grid; gap: 10px; }
.dev-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.dev-row dt { font-size: 14px; color: #8d97a1; }
.dev-row dd { margin: 0; font-size: 16px; line-height: 1.5; color: #e3e7ea; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dev-row dd b { color: #fff; }
.dev-row a { color: #7fd1bd; }
/* "Udostępnij" in the answer's heading, beside the verdict, once the answer
   is there, with the link made (a click copies it) */
.head-tools { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.answer-share { display: inline-flex; align-items: center; gap: 8px; }
.answer-share[hidden] { display: none; }
.answer-share .btn { padding: 6px 13px; margin: -4px 0; font-size: 14px; border: 1px solid var(--brand-line); background: var(--surface); color: var(--brand-ink); }
.answer-share .btn:hover { background: var(--brand-soft); }
.share-pill { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 5px 10px; margin: -4px 0; border: 1px solid var(--brand-line); border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); font: 500 13.5px var(--sans); cursor: pointer; }
.share-pill[hidden] { display: none; }
.share-pill .i { flex: none; width: 1em; height: 1em; }
.share-pill-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* the share window (static/app.js, shareControl) */
dialog.share-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow-y: auto; overscroll-behavior: contain; }
dialog.share-dialog::backdrop { background: var(--overlay); }
.share-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 28px; border-bottom: 1px solid var(--line); }
.share-head h2 { flex: 1; margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.share-body { display: flex; flex-direction: column; gap: 22px; padding: 22px 28px 26px; }
.share-field { display: flex; flex-direction: column; gap: 8px; }
.share-label { font-size: 14px; font-weight: 600; color: var(--fg); }
.share-field textarea { width: 100%; resize: none; font: 17px/1.45 var(--sans); padding: 10px 12px; }
.share-help, .share-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--faint); }
.share-preview { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.share-preview-band { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; background: var(--brand-soft); border-bottom: 1px solid var(--brand-line); }
.share-preview-band .brand-mark { width: 28px; height: 28px; }
.share-preview-brand { font-size: 15px; font-weight: 600; color: var(--brand-ink); white-space: nowrap; }
.share-preview-verdict { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--surface); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.share-preview-text { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 14px; }
.share-preview-site { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.share-preview-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; }
.share-preview-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
/* who will see it: a private link or a public page (design "Szukaj v2") */
.share-scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.share-scope { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.share-scope:hover { border-color: var(--brand-line); }
.share-scope[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
.share-scope-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--fg); }
.share-scope-name .i { width: 17px; height: 17px; color: var(--brand); }
.share-scope-text { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.share-address[hidden] { display: none; }
.share-address .share-label { display: flex; align-items: baseline; gap: 10px; }
.share-slug-state { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--slate-soft); color: var(--slate); }
.share-slug-state[data-state="free"] { background: var(--green-soft); color: var(--green); }
.share-slug-state[data-state="taken"] { background: var(--rose-soft); color: var(--rose); }
.share-slug { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); overflow: hidden; }
.share-slug:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.share-slug > span { display: inline-flex; align-items: center; padding: 0 2px 0 12px; background: var(--law-bg); border-right: 1px solid var(--line); color: var(--muted); font: 14.5px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.share-slug-input { flex: 1; min-width: 0; padding: 10px 12px; border: 0; outline: 0; background: transparent; color: var(--fg); font: 14.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-help-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.share-help-row .link-button { font-size: 13.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn.dark { background: var(--fg); color: var(--bg); }
.btn.dark:hover, a.btn.dark:hover { background: color-mix(in srgb, var(--fg) 82%, var(--bg)); color: var(--bg); }
.share-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.share-foot .share-note { flex: 1 1 280px; }
.share-msg { margin: 0; font-size: 14px; color: var(--rose); }
.share-msg:empty { display: none; }
.share-done { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--green); font-size: 16px; font-weight: 600; }
.share-url { display: flex; align-items: stretch; border: 1.5px solid var(--brand); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 4px var(--brand-soft); }
.share-url > span { flex: 1; min-width: 0; padding: 12px 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 16px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); }
.share-url .btn { border-radius: 0; padding: 0 18px; font-size: 15px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-own { padding-top: 16px; border-top: 1px solid var(--line); }
.share-own .link-button { font-size: inherit; }
.link-button.danger { color: var(--rose); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--rose) 40%, transparent); text-underline-offset: 3px; }
@media (max-width: 600px) {
  .share-scopes { grid-template-columns: 1fr; }
  .share-head { padding-left: 18px; }
  .share-body { padding: 18px 18px 22px; }
}
.flat.danger { color: var(--rose); }
.flat.danger:hover { background: var(--rose-soft); color: var(--rose); }
/* the shared answer (web/shared.py; design "Szukaj v2", 8.10.2026): the bar
   saying where the page comes from, the question, the answer, the provisions
   in the law boxes of the results, an invitation to ask one's own */
.shared-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 28px; padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; color: var(--muted); }
.shared-bar > .i { flex: none; width: 1em; height: 1em; color: var(--brand); }
.shared-bar > span:nth-child(2) { flex: 1 1 240px; min-width: 0; }
.shared-bar-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.shared-bar .actions-bar { margin: 0; padding: 0; border: 0; }
.shared-q { font-size: 28px; margin-bottom: 18px; }
.doc .layer.explain { margin-top: 24px; }
.doc .layer.explain .layer-head h2, .doc .lawcard .layer-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: -0.015em; font-size: 22px; color: var(--fg); }
.doc .lawcard { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc .lawcard .layer-head { margin-bottom: 14px; }
.shared-conds { margin-top: 18px; border-top: 1px solid var(--line); }
.provision[id]:target .prov-box { box-shadow: 0 0 0 3px var(--mark-flash); }
.prov-path .cite { cursor: default; align-self: center; margin-left: 2px; }
.shared-more { margin: 32px 0 14px; font-size: 15px; font-weight: 600; color: var(--fg); }
.shared-own { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 56px 0 8px; text-align: center; }
.shared-own > p { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); }
.shared-own > span { font-size: 13.5px; color: var(--faint); }
/* the catalog of public answers (/pytania) and the author's pages on the
   account page */
.catalog, .own-pages { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.catalog li, .own-pages li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.catalog li > a { flex: 1 1 320px; font-size: 17px; font-weight: 600; color: var(--fg); }
.catalog .when { font-size: 14px; color: var(--faint); }
.own-pages li > a { flex: 1 1 260px; font-weight: 600; }
.own-pages form { margin: 0; }
/* the answers about the situation under the question, the follow-ups of the conversation */
.shared-facts { margin: -4px 0 14px; padding-left: 20px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.shared-followup { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.shared-followup .answer-head h2 { margin: 0; }

/* ——— stały link do brzmienia, przepis osadzony w ramce (web/page.py) ——— */

.ver-link { font-size: 13px; margin-left: 4px; }
body.embed { min-height: 0; background: var(--surface); }
.embed-main { padding: 14px 18px 10px; }
.embed-head { font-weight: 650; font-size: 17px; margin-bottom: 4px; }
.embed-head .act { font-weight: 400; color: var(--muted); margin-left: 6px; }
.embed .law { font-size: 16px; margin: 6px 0; }
.embed-foot { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* ——— orzeczenie i interpretacja u nas (etap G1; makieta „Orzeczenie”,
   claude.ai/design, 7.10.2026, z uwagami właściciela): pasek położenia pod
   nagłówkiem, po lewej spis treści i powołane przepisy, obok tekst
   dosłownie (metryka, sentencja, „W skrócie”, uzasadnienie) w kolumnie do
   czytania jak w czytelni ustawy; na wąskim ekranie jedna kolumna
   (web/documents.py, static/docview.js) ——— */

main.doc.doc-page { max-width: none; padding: 0 0 96px; --pos-h: 47px; }
.doc-page :is(h2, h3, mark.hit, .doc-ai)[id], .doc-page mark.hit, .doc-text .frag-on { scroll-margin-top: calc(var(--top-h, 69px) + var(--pos-h) + 24px); }

.pos-bar { position: sticky; top: var(--top-h, 69px); z-index: 15; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pos-inner { max-width: var(--page); margin: 0 auto; min-height: 46px; padding: 0 40px; display: flex; align-items: center; gap: 16px; }
.pos-back { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 260px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pos-back:hover { background: var(--brand-line); color: var(--brand-ink); text-decoration: none; }
.pos-back > span:first-child { font-size: 15px; line-height: 1; }
.pos-back > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* in the crumbs of a law page (static/refs.js): as low as a line of them,
   so nothing moves when it shows */
.crumbs .pos-back { margin-right: 12px; padding: 1px 12px 1px 9px; vertical-align: bottom; line-height: 1.5; }
.pos-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.pos-crumbs a { color: var(--muted); flex: none; }
.pos-crumbs a:hover { color: var(--brand); }
.pos-crumbs .pos-court { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pos-crumbs .sep { margin: 0 8px; color: var(--faint); flex: none; }
.pos-current { color: var(--fg); font-weight: 600; flex: none; }
/* the places where the text names the provision the reader came from */
.pos-marks { flex: none; display: flex; align-items: center; gap: 2px; font-size: 13.5px; color: var(--muted); }
.pos-marks-what { display: inline-flex; align-items: center; margin-right: 6px; white-space: nowrap; }
.pos-marks-what::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; background: var(--mark-strong); }
/* the searched words (?q=) can be long: cut, the whole in the tooltip */
.pos-marks-what .what { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.pos-marks .mark-pos { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
.pos-marks .icon.small { width: 28px; height: 28px; font-size: 16px; }

.doc-grid { max-width: var(--page); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.doc-main { min-width: 0; width: 100%; max-width: 46rem; margin: 0 auto; }

/* tytuł, metryka, sentencja */
.doc-top { padding-top: 32px; }
.doc-page h1 { margin: 0 0 6px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.doc-page h1 .sub { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; font-size: 14.5px; color: var(--muted); }
.src-link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.src-link:hover { color: var(--brand); }
.src-link .i { width: 0.9em; height: 0.9em; }
.doc-top .notice, .doc-top .hint { margin: 14px 0 0; }
.thesis { margin: 26px 0 0; font-size: 19px; line-height: 1.55; color: var(--fg); text-wrap: pretty; }
.thesis > span { display: block; margin: 0 0 6px; }

/* tekst dokumentu: dosłownie, w układzie wzoru orzeczenia (web/judgment.py) */
.doc-text { font-size: 17px; }
.doc-text h2 { margin: 36px 0 12px; line-height: 1; }
.doc-text h3 { margin: 28px 0 10px; font-size: 17px; line-height: 1.4; font-weight: 650; letter-spacing: 0; color: var(--fg); }
.doc-text p { margin: 0 0 16px; line-height: 1.75; text-wrap: pretty; }
.doc-text .metryka { margin: 0; padding: 2px 18px; background: var(--law-bg); border: 1px solid var(--line); border-radius: 12px; font-size: 15.5px; line-height: 1.55; }
.doc-text .metryka > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.doc-text .metryka > div:last-child { border-bottom: 0; }
.doc-text .metryka dt { color: var(--muted); }
.doc-text .metryka dd { margin: 0; }
.doc-text .metryka dd i { color: var(--muted); }
/* wyliczenia z numeracją sądu jak punkty w ustawie (.law): znacznik
   w kolumnie, tekst wcięty pod sobą, poziom --d z rodzaju numeracji */
.doc-text :is(.enum, .sentencja) { list-style: none; margin: 0 0 16px; padding: 0; }
.doc-text :is(.enum, .sentencja) > li { display: grid; grid-template-columns: minmax(1.6em, max-content) minmax(0, 1fr); column-gap: 0.5em; margin: 0 0 8px calc(var(--d, 0) * 24px); line-height: 1.7; }
.doc-text :is(.enum, .sentencja) > li > .tx:only-child { grid-column: 1 / -1; }
.doc-text :is(.enum, .sentencja, .np) .hd { font-weight: 650; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-text :is(.enum, .sentencja) .hd.dash { color: var(--faint); font-weight: 400; }
.doc-text .sentencja { font-size: 18px; }
.doc-text .lead { margin: 0 0 10px; font-weight: 600; color: var(--fg); }
.doc-text .note { margin: 4px 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.doc-text .quote { margin: 0 0 18px; padding: 2px 0 2px 18px; border-left: 3px solid var(--line-strong); color: var(--text); font-size: 16px; }
.doc-text .quote p { margin: 0 0 8px; }
.doc-text .quote > :last-child { margin-bottom: 0; }
.doc-text ul { margin: 0 0 16px; padding-left: 24px; }
.doc-text ul li { margin: 0 0 8px; line-height: 1.7; }
.doc-text .akta { margin: -6px 0 18px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.doc-text .akta-label { font-weight: 600; color: var(--text); }
/* dates and amounts in the text of a ruling: easy to pick out (web/documents._emphasis) */
.doc-text :is(.hl-date, .hl-amount) { font-weight: 600; color: var(--fg); }
.doc-text .hl-amount { font-variant-numeric: tabular-nums; }
.doc-text :is(p, li, dd, ol) { border-radius: 6px; transition: background 0.35s, box-shadow 0.35s; }
/* the fragment a footnote of the summary rests on */
.doc-text .frag-on { background: var(--brand-soft); box-shadow: 0 0 0 10px var(--brand-soft); }
/* where the text names the provision the reader came from (?przepis=) or
   the words they searched for (?q=) */
:is(.doc-text, .thesis) mark.hit { padding: 1px 3px; margin: -1px -3px; border-radius: 4px; background: var(--mark); color: inherit; transition: background 0.3s; }
:is(.doc-text, .thesis) mark.hit.current { background: var(--mark-strong); }
.doc-end { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.doc-end p { margin: 0; }
.doc-others b { font-weight: 600; color: var(--text); }
.doc-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13.5px; color: var(--faint); }
.doc-end-row a { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.doc-end-row a:hover { color: var(--brand); }
.doc-end-row .i { width: 0.95em; height: 0.95em; }
.doc-end .doc-processed { font-size: 13px; line-height: 1.5; color: var(--faint); }

/* spis treści, wyszukiwarka w tekście i powołane przepisy: kolumna boczna
   strony ustawy (.toc-nav, page.side_column; owner 9.10.2026) */
.doc-grid > .toc-nav { margin: 16px 0 0; }
.doc-cited { margin: 12px 0 0; padding: 20px 0 0 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.doc-cited h2 { margin: 0 0 10px; line-height: 1; }
.cited-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.cited-act { font-weight: 600; color: var(--text); }
.cited-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cited-links a.hot { padding: 0 4px; margin: 0 -4px; border-radius: 4px; background: var(--mark); color: var(--text); font-weight: 600; }

/* „W skrócie”: a card in the text, after what the court ruled and before its
   reasons (the law over the explanation, docs/brand.md); without a summary
   — most judgments — a low card: a sentence, the button, the question field */
.doc-ai { margin: 32px 0 4px; padding: 16px 20px 14px; }
.doc-ai-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.doc-ai-head h2 { margin: 0; line-height: 1; }
.doc-ai-head .ai-badge { margin: 0; font-size: 11.5px; padding: 3px 8px; }
.doc-ai-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.doc-ai-note { flex: 1 1 280px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.doc-ai-note a { font-weight: 600; }
.doc-ai-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
.doc-ai-skel span { display: block; height: 11px; border-radius: 6px; background: var(--line); animation: skel-pulse 1.4s ease-in-out infinite; }
.doc-ai-skel span:nth-child(2) { width: 92%; }
.doc-ai-skel span:nth-child(3) { width: 70%; }
.doc-ai-skel + p { margin: 6px 0 0; font-size: 13.5px; color: var(--faint); }
.doc-ai .ai-text { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.65; color: var(--text); animation: fade 0.25s; }
.doc-ai .ai-text h3 { margin: 0 0 3px; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--brand-ink); }
.doc-ai .ai-text p { margin: 0; }
.doc-ai .ai-text ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.doc-ai .cite.on { background: var(--brand); color: var(--on-brand); }
.doc-frag { margin: 14px 0 0; padding: 10px 12px 10px 14px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: pre-line; animation: fade 0.2s; }
.doc-frag-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: normal; }
.doc-frag-where { font-weight: 400; }
.doc-frag-head .link-button { margin-left: auto; font-size: 13px; font-weight: 500; }
.doc-frag-head button:last-child { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.doc-frag-head button:last-child:hover { background: var(--line); color: var(--fg); }
.doc-frag-head .i { width: 0.9em; height: 0.9em; }
.doc-ai-answer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); animation: fade 0.25s; }
.doc-ai-answer .q { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; font-style: italic; color: var(--muted); }
.doc-ai-answer .ai-text { gap: 0; }
.doc-ai-ask { margin-top: 16px; }
.doc-ai .suggestions { margin-top: 10px; }
.doc-ai-busy { margin: 10px 0 0; font-size: 14px; color: var(--faint); }
.doc-ai .auto-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.doc-ai.working [data-ai-make] { opacity: 0.6; cursor: progress; }

@media (min-width: 1100px) {
  /* as the act page (.reader-grid): the column under the position bar, the
     reading column centred beside it */
  .doc-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .doc-grid > .toc-nav { grid-column: 1; grid-row: 1; top: calc(var(--top-h, 69px) + var(--pos-h)); height: calc(100vh - var(--top-h, 69px) - var(--pos-h)); margin: 0; }
  .doc-main { grid-column: -2 / -1; grid-row: 1; max-width: calc(46rem + 80px); padding: 0 40px; }
  .doc-grid > :is(.toc-toggle-btn, .reader-top) { grid-row: 1; top: calc(var(--top-h, 69px) + var(--pos-h) + 28px); }
  html.toc-hidden .doc-grid { grid-template-columns: minmax(0, 1fr); }
  html.toc-hidden .doc-grid > .toc-nav { display: none; }
}
@media (max-width: 1099px) {
  .doc-grid { padding: 0 24px; }
  .doc-main { margin: 0; }
  .doc-top { padding-top: 24px; }
  .pos-inner { padding: 0 24px; }
}
@media (max-width: 720px) {
  main.doc.doc-page { padding: 0 0 64px; }
  .pos-bar { position: static; }
  .pos-inner { padding: 0 16px; gap: 10px; min-height: 42px; }
  .pos-back { max-width: 46vw; }
  /* the bar does not stick on a phone: the place in the text is not needed,
     and the court would squeeze the signature */
  .pos-crumbs .sep:has(+ :is(.pos-court, .pos-current)), .pos-court, .pos-current, .pos-marks { display: none; }
  .doc-grid { padding: 0 16px; }
  .doc-page h1 { font-size: 26px; }
  .thesis { font-size: 17.5px; }
  .doc-text .sentencja { font-size: 17px; }
  .doc-text :is(.enum, .sentencja) > li { margin-left: calc(var(--d, 0) * 16px); }
  .doc-ai { padding: 14px 16px 12px; }
  .doc-page :is(h2, h3, mark.hit, .doc-ai)[id], .doc-page mark.hit, .doc-text .frag-on { scroll-margin-top: calc(var(--top-h, 69px) + 16px); }
}
@media (max-width: 600px) {
  .doc-text .metryka > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.masked { color: var(--muted); font-size: 0.92em; background: var(--tint); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
/* filters of case law lists (web/documents.py, _filters): a plain box when
   open on a wide screen, a "Filtry" button on a phone */
/* pasek filtrów orzeczeń (web/documents.py, facet_bar): cztery menu z liczbami
   zamiast ściany etykiet, wybrana wartość widoczna w przycisku */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.pick > summary { display: inline-flex; align-items: center; gap: 6px; max-width: min(100%, 320px); padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14.5px; cursor: pointer; }
.pick > summary:hover { border-color: var(--brand-line); }
.pick > summary.on { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.pick .pick-name { color: var(--muted); white-space: nowrap; }
.pick > summary.on .pick-name { color: var(--brand-ink); }
.pick .pick-value { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick > summary .i-chevron-down { width: 14px; height: 14px; flex: none; }
.pick-menu { min-width: 280px; max-width: min(92vw, 420px); max-height: min(60vh, 420px); overflow-y: auto; }
.pick-menu a { justify-content: space-between; gap: 16px; white-space: normal; }
.pick-menu .n { color: var(--faint); font-size: 13.5px; font-variant-numeric: tabular-nums; flex: none; }
.pick-menu a.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.pick-menu a.on .n { color: var(--brand-ink); }
.pick-off { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; margin-bottom: 4px; padding-bottom: 10px; color: var(--muted); }
.pick-unit { max-width: min(100%, 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-clear { margin-left: 2px; font-size: 14.5px; color: var(--muted); }
.pick-clear:hover { color: var(--brand); }
/* liczba wyników, sortowanie i plik tuż nad listą */
.resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 18px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.resultbar .count { margin: 0; color: var(--muted); font-size: 15.5px; }
.resultbar .count b { color: var(--fg); font-weight: 650; font-variant-numeric: tabular-nums; }
.resultbar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.resultbar-tools .pill { font-size: 14px; padding: 6px 12px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); font-size: 14px; }
.segmented > a, .segmented > b { padding: 5px 12px; border-radius: 8px; color: var(--muted); font-weight: 400; }
.segmented > a:hover { color: var(--fg); text-decoration: none; }
.segmented > .on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-sm); }
/* zakładki Przepisy / Orzeczenia / Interpretacje nad wynikami (D9) */
.doc-tabs { margin: 0 0 16px; }
.doc-tabs .g-count:empty { display: none; }
@media (max-width: 600px) {
  .filterbar { gap: 6px; }
  .pick { flex: 1 1 calc(50% - 6px); }
  .pick > summary { width: 100%; justify-content: space-between; max-width: none; }
  .pick-menu { position: fixed; left: 16px; right: 16px; min-width: 0; max-width: none; }
}
.facet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0; font-size: 14.5px; }
.facet b { font-weight: 600; margin-right: 4px; }
.facet .chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 14px; padding: 6px 13px; }
.facet .chip:hover, .filters .chip:hover, .chip-filter:hover { border-color: var(--brand-line); color: var(--brand); text-decoration: none; }
.facet .chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); font-weight: 600; }
.pager { display: flex; gap: 18px; margin: 18px 0 8px; }
/* wyszukiwarka orzeczeń (etap G2; makieta „Orzeczenia”, 7.10.2026): pole
   z ramką marki jak na stronie głównej, pod nim wyszukiwanie zaawansowane,
   filtry, liczba wyników z sortowaniem i lista w jednej kolumnie */
.refs.results { columns: 1; margin-top: 8px; }
.refs.results li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.refs.results .ctx-text, .refs.results .snippet { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 4px; }
.snippet mark { background: var(--brand-soft); color: inherit; padding: 0 1px; border-radius: 3px; }
/* the same column, title and field as /ustawy ("Przeglądaj prawo") */
main.case-law, main.chg-page { max-width: 928px; padding-top: 40px; }
.case-law h1 { font-size: 36px; margin: 0 0 14px; letter-spacing: -0.02em; }
.chg-page h1 { font-size: 36px; margin: 0 0 8px; letter-spacing: -0.02em; }
.case-law .page-lead { max-width: 600px; margin: 0 0 36px; font-size: 16px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.notice.warn { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 16px; font-size: 15px; }
.notice.warn > .i { flex: none; margin-top: 3px; }
.doc-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.field-clear { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; }
.field-clear:hover { color: var(--fg); background: var(--tint); }
.case-law .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 15px; border-radius: 9px; white-space: nowrap; }
.adv { margin: 10px 4px 0; }
.adv > summary { display: flex; align-items: center; gap: 4px; width: fit-content; list-style: none; font-size: 13.5px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary:hover, .adv[open] > summary { color: var(--brand); }
.adv > summary .i { width: 1em; height: 1em; transition: transform 0.15s; }
.adv[open] > summary .i { transform: rotate(90deg); }
.adv-form { margin: 14px -4px 0; padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); animation: rise 0.2s ease-out; }
.adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.adv-grid label { display: flex; flex-direction: column; gap: 6px; }
.adv-name { font-size: 14px; font-weight: 600; color: var(--text); }
.adv-name span { display: block; font-weight: 400; color: var(--faint); }
.adv-grid input { border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; font: 15.5px/1.4 var(--sans); color: var(--fg); background: var(--bg); outline: 0; }
.adv-grid input::placeholder { color: var(--faint); }
.adv-grid input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.adv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.adv-query { flex: 1; min-width: 220px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.adv-query > span { color: var(--faint); }
.adv-query code, .ops-help code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--fg); background: var(--tint); border-radius: 5px; padding: 2px 6px; }
.adv-clear { padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 14.5px; cursor: pointer; }
.adv-clear:hover { color: var(--fg); background: var(--tint); }
.adv-foot .btn { padding: 9px 16px; }
/* operatory: pomoc wysuwana pod polem (static/caselaw.js; owner 7.10.2026),
   kursor zostaje w polu; bez skryptu link do strony pomocy */
.search-more { position: relative; }
.ops-toggle { position: absolute; right: 4px; top: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.ops-toggle:hover, .ops-toggle[aria-expanded="true"] { color: var(--brand); text-decoration: none; }
.ops-toggle .i { width: 1em; height: 1em; }
.ops-help { position: relative; margin: 14px 0 0; padding: 18px 22px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); animation: rise 0.2s ease-out; }
.ops-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; margin: 0; border: 0; background: none; }
.case-law .ops-help h2 { margin: 0 44px 4px 0; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg); }
.ops-help > p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ops-help dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; font-size: 15px; line-height: 1.5; }
.ops-help dt, .ops-help dd { margin: 0; }
.ops-help dt code { font-size: 14px; padding: 2px 7px; white-space: nowrap; }
.ops-help dd code { font-size: 14px; background: none; padding: 0; }
.ops-help .hint { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
@media (max-width: 520px) {
  .ops-help dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ops-help dd { margin-bottom: 8px; }
}
.case-law .filterbar { margin: 26px 0 0; }
.case-law .pick > summary, .chg-page .pick > summary { padding: 7px 10px 7px 13px; }
.case-law .pick-unit { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px; border: 1px solid var(--brand-line); border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 14.5px; font-weight: 600; }
.case-law .pick-unit:hover { background: var(--brand-line); text-decoration: none; }
.case-law .pick-unit .i { width: 1em; height: 1em; color: var(--brand); }
.case-law .pick-clear, .chg-page .pick-clear { padding: 7px 10px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.case-law .pick-clear:hover, .chg-page .pick-clear:hover { text-decoration-color: var(--brand); }
.case-law .resultbar, .chg-page .resultbar { margin: 28px 0 0; padding: 0 0 14px; }
.case-law .resultbar-tools, .chg-page .resultbar-tools { margin-left: auto; gap: 8px; }
.case-law .segmented, .chg-page .segmented { border-radius: 999px; background: var(--law-bg); font-size: 13.5px; }
.case-law .segmented > a, .case-law .segmented > b, .chg-page .segmented > a, .chg-page .segmented > b { border-radius: 999px; font-weight: 500; }
.case-law .segmented > .on, .chg-page .segmented > .on { font-weight: 600; }
.hits { list-style: none; margin: 0; padding: 0; transition: opacity 0.2s; }
.hits > li { border-bottom: 1px solid var(--line); }
/* the whole row is the link (owner 7.10.2026): a light background to the
   edges of the column on hover, the title underlined */
/* the hover background between the lines, square (owner 7.10.2026) */
.hits .hit { display: flex; flex-direction: column; gap: 7px; padding: 20px 0; color: inherit; text-decoration: none; }
.hits .hit:hover { background: var(--tint); text-decoration: none; }
.hits .hit:focus-visible { outline-offset: -2px; }
.hit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.hit-title { font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--brand-ink); text-wrap: pretty; }
.hits .hit:hover .hit-title { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
/* a result already opened: the title in the visited colour, as in Google */
.hits .hit:visited .hit-title { color: var(--visited); }
.hit-thesis, .hit-snippet { margin: 0; line-height: 1.6; text-wrap: pretty; }
.hit-thesis { font-size: 15.5px; color: var(--text); }
.hit-snippet { font-size: 15px; color: var(--muted); }
.hit-snippet mark, .hit-thesis mark, .hit-title mark { background: var(--mark); color: var(--text); border-radius: 3px; padding: 0 2px; margin: 0 -1px; }
.hit-title mark { color: inherit; }
.hit-label { margin-right: 8px; }
.hit-source { font-size: 13.5px; color: var(--faint); }
.hits-empty { padding: 56px 0; text-align: center; color: var(--muted); font-size: 16px; line-height: 1.6; }
.hits-empty p { margin: 0 0 10px; }
.pager.split { justify-content: space-between; align-items: center; gap: 16px; margin: 18px 0 0; font-size: 15px; }
.pager.split > a { font-weight: 600; padding: 6px 10px; margin: -6px -10px; border-radius: 8px; }
.pager.split > a:hover { background: var(--tint); text-decoration: none; }
.pager.split > .off { color: var(--line-strong); }
.pager.split > .where { color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  main.case-law, main.chg-page { padding-top: 24px; }
  .case-law h1, .chg-page h1 { font-size: 30px; }
  .adv-grid { grid-template-columns: minmax(0, 1fr); }
  .adv-form { padding: 16px 16px 14px; }
  .doc-search { padding-left: 14px; }
  .doc-search .btn { padding: 10px 12px; }
}
/* opis przepisu prostym językiem (answer/plain.py): zwinięty nad tekstem przepisu */
/* zwinięty, otwierany na żądanie */
.plain { margin: 16px 0; padding: 0 16px; background: var(--tint); border-radius: 12px; }
.plain > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 15px; font-weight: 500; color: var(--text); }
.plain > summary::-webkit-details-marker { display: none; }
.plain > summary .ai-badge { margin: 0; text-transform: none; letter-spacing: 0; }
.plain > summary .i-chevron-down { margin-left: auto; color: var(--muted); transition: transform 0.15s; }
.plain[open] > summary .i-chevron-down { transform: rotate(180deg); }
.plain > summary:hover { color: var(--fg); }
.plain[open] { padding-bottom: 14px; }
.plain p { margin: 0 0 6px; line-height: 1.65; }
.plain .hint { margin: 6px 0 0; font-size: 13.5px; }
/* plain-language explanation from the model and follow-up questions
   (static/unit.js) */
.plain .ai-text { line-height: 1.65; animation: fade 0.25s; }
.plain .ai-text p { margin: 0 0 6px; }
/* the row without a description: "Prostym językiem" and the button, the
   height of the folded row (static/unit.js swaps them) */
.plain-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 16px; font-size: 15px; font-weight: 500; color: var(--text); }
.unit-ai { margin: 18px 0 8px; }
.unit-ai .doc-ai-answer .ai-text { line-height: 1.65; animation: fade 0.25s; }
.unit-ai .doc-ai-answer .ai-text p { margin: 0; }
.unit-ai-ask { margin-top: 14px; }
.unit-ai .ask-note { margin: 8px 0 0; }
.unit-ai .doc-ai-busy + .ask-note { margin-top: 4px; }
.unit-ai > .hint { margin: 6px 0 0; font-size: 13.5px; }
.unit-ai-more { margin: 6px 0 0; font-size: 14.5px; }

/* linki w tekście nie tylko kolorem (WCAG 1.4.1, axe link-in-text-block):
   delikatne podkreślenie w akapitach, notach i stopce dokumentu */
p a, .source-note a, .hint a, .lead a, main li a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--brand-line);
  text-underline-offset: 3px;
}
p a:hover, .source-note a:hover, .hint a:hover { text-decoration-color: currentColor; }
/* zanim aplikacja narysuje widok, stopka nie wskakuje na górę ekranu
   (przesunięcie układu, CLS 0,4 na stronie głównej — Lighthouse) */
#app:empty { min-height: 100vh; }

/* druk (master-plan.md, czytelnia P1): tekst przepisu, ustawy albo orzeczenia
   bez nawigacji, przycisków i stopki serwisu; adres i stan prawny zostają
   w nocie źródła, linki z adresem przy odesłaniach */
@media print {
  .top, .foot, .toolbar, .share, .toc-nav, .banner, .scrim, .panel,
  .pos-bar, .doc-ai, .mark-nav,
  .search, .examples, .pager, .facet, details:not([open]),
  .feedback, .pro-link, .no-print, .folder-pick, .corner { display: none !important; }
  .folder-item { border-color: #999; }
  .folder-sources a, .footnotes a { color: #000; }
  .footnotes a[href^="#"] { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  main.doc, #app { max-width: none; padding: 0; margin: 0; }
  a { color: #000; text-decoration: none; }
  .source-note a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .law, .law-quote, .plain, .source-note { background: none; border-color: #999; }
  h1, h2 { break-after: avoid; }
  .law p, .doc-text p { orphans: 3; widows: 3; }
}
/* cała ustawa na dzień (web/page.py, act_on_page) */
.on-date { margin: 6px 0 14px; }
.on-day { margin: 0 0 14px; }
.on-day-now { font-size: 13.5px; }

/* narrowest phones: logo and "Dla profesjonalistów" in one row, the account
   at the end of the navigation row */
/* the question field on a phone (owner 7.10.2026, "a lot going on"): the
   question, "×" in its corner only with text, one row with the switch and
   "Szukaj", the explanations left in small print under it */
@media (max-width: 600px) {
  .hero .search textarea { font-size: 17px; padding: 14px 40px 10px 16px; min-height: 88px; }
  .hero .search-bar { padding: 8px 8px 8px 14px; }
  .hero .search-actions .btn { padding: 8px 12px 8px 14px; font-size: 15px; border-radius: 11px; }
  .hero .search .clear-q { position: absolute; top: 9px; right: 8px; padding: 6px; }
  .hero .search.one-row textarea { min-height: 0; padding: 14px 4px 14px 16px; }
  .hero .search.one-row .search-bar { padding: 7px 7px 7px 0; }
  .hero .search.one-row .clear-q { position: static; }
  .search-bar { flex-wrap: wrap; gap: 4px 10px; }
  .search-bar .options { display: contents; }
  .search-actions { order: 2; }
  .search-actions .btn { padding: 8px 12px 8px 14px; }
  .switch { order: 1; gap: 8px; }
  .switch-label { font-size: 14px; }
  .quota-note { order: 3; flex-basis: 100%; padding-left: 46px; font-size: 13px; line-height: 1.4; }
}
@media (max-width: 374px) { .sw-more { display: none; } }
@media (max-width: 400px) {
  .brand { gap: 9px; }
  .brand-mark { width: 30px; height: 30px; }
  .wordmark { font-size: 16px; }
  .pro-link { font-size: 13px; padding: 5px 9px; }
}

/* poradniki (web/guides.py): przepis dosłownie nad wyjaśnieniem */
.guide-law { margin: 12px 0 14px; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--law-bg); border-radius: 0 var(--r-md) var(--r-md) 0; }
.guide-law p { margin: 0; white-space: pre-line; }
.guide-law footer { margin-top: 8px; font-size: 14px; }

/* teczka: powiadomienia o zmianach w jej przepisach (web/folders.py) */

/* ciemny motyw: kolory wpisane na stałe (podświetlenia, różnice); na końcu,
   żeby wygrały z regułami wyżej; druk zostaje jasny (screen) */
@media screen and (prefers-color-scheme: dark) {
  :root:not(.light-only):not(.theme-light) .switch input:not(:checked) + .track { background: #3a433f; }
  :root:not(.light-only):not(.theme-light) .skel-text .skel-line { background: #262c29; }
  :root:not(.light-only):not(.theme-light) .m-value { background: linear-gradient(transparent 56%, #5a4a14 56%); }
  :root:not(.light-only):not(.theme-light) .m-term { background: linear-gradient(transparent 56%, #1f4a35 56%); }
  :root:not(.light-only):not(.theme-light) mark.found { background: #5a4a14; }
  :root:not(.light-only):not(.theme-light) ::highlight(found) { background-color: #5a4a14; }
  :root:not(.light-only):not(.theme-light) ::highlight(found-current) { background-color: #8a6d12; }
  :root:not(.light-only):not(.theme-light) mark.found.current { background: #8a6d12; box-shadow: 0 0 0 2px #8a6d12; }
  :root:not(.light-only):not(.theme-light) ins { background: #1f4d2c; color: #b8f0c6; text-decoration-color: rgba(184, 240, 198, 0.45); }
  :root:not(.light-only):not(.theme-light) del { background: #5a1f25; color: #ffc9cd; text-decoration-color: rgba(255, 201, 205, 0.45); }
  :root:not(.light-only):not(.theme-light) .law .diffline.add { background: #16301f; border-left-color: #3fb26a; }
  :root:not(.light-only):not(.theme-light) .law .diffline.del { background: #351a1d; border-left-color: #e5534b; }
  :root:not(.light-only):not(.theme-light) .law .diffline.mod, :root:not(.light-only):not(.theme-light) .diffblock, :root:not(.light-only):not(.theme-light) .brief-sources li:target { background: #2f2711; }
  :root:not(.light-only):not(.theme-light) .law .diffline.add::before { color: #3fb26a; }
  :root:not(.light-only):not(.theme-light) .law .diffline.del::before { color: #e5534b; }
  :root:not(.light-only):not(.theme-light) .pill.diff-toggle.on { background: #2f2711; border-color: #5a4a14; color: #f2c063; }
  :root:not(.light-only):not(.theme-light) .btn.danger-solid { color: #22080f; }
  :root:not(.light-only):not(.theme-light) .btn.danger-solid:hover { background: #f5a3b5; }
  :root:not(.light-only):not(.theme-light) .btn.danger:hover { background: #4a1f2b; }
  :root:not(.light-only):not(.theme-light) .quiet-link:hover { color: #f5a3b5; }
  :root:not(.light-only):not(.theme-light) .click-tip .i { color: #1c7a64; }
}
/* the same, chosen in the header (static/theme.js): kept in step with the
 block above by tests/test_css.py */
:root.theme-dark .switch input:not(:checked) + .track { background: #3a433f; }
:root.theme-dark .skel-text .skel-line { background: #262c29; }
:root.theme-dark .m-value { background: linear-gradient(transparent 56%, #5a4a14 56%); }
:root.theme-dark .m-term { background: linear-gradient(transparent 56%, #1f4a35 56%); }
:root.theme-dark mark.found { background: #5a4a14; }
:root.theme-dark ::highlight(found) { background-color: #5a4a14; }
:root.theme-dark ::highlight(found-current) { background-color: #8a6d12; }
:root.theme-dark mark.found.current { background: #8a6d12; box-shadow: 0 0 0 2px #8a6d12; }
:root.theme-dark ins { background: #1f4d2c; color: #b8f0c6; text-decoration-color: rgba(184, 240, 198, 0.45); }
:root.theme-dark del { background: #5a1f25; color: #ffc9cd; text-decoration-color: rgba(255, 201, 205, 0.45); }
:root.theme-dark .law .diffline.add { background: #16301f; border-left-color: #3fb26a; }
:root.theme-dark .law .diffline.del { background: #351a1d; border-left-color: #e5534b; }
:root.theme-dark .law .diffline.mod, :root.theme-dark .diffblock, :root.theme-dark .brief-sources li:target { background: #2f2711; }
:root.theme-dark .law .diffline.add::before { color: #3fb26a; }
:root.theme-dark .law .diffline.del::before { color: #e5534b; }
:root.theme-dark .pill.diff-toggle.on { background: #2f2711; border-color: #5a4a14; color: #f2c063; }
:root.theme-dark .btn.danger-solid { color: #22080f; }
:root.theme-dark .btn.danger-solid:hover { background: #f5a3b5; }
:root.theme-dark .btn.danger:hover { background: #4a1f2b; }
:root.theme-dark .quiet-link:hover { color: #f5a3b5; }
:root.theme-dark .click-tip .i { color: #1c7a64; }


/* ——— fields for data (docs/design-system.md, „Pola”): a name, a date, a
   key, a note — one look everywhere; a question or a search is .field ——— */
.input, .login-email input, .account-delete input, .byok-key input, .folder-pick select, .folder-pick input, .folder-form input, .folder-form textarea, .folder-new input, .inline-form input, .invoice input, .adv-grid input, .date-row input, .rating-note input, .act-pick select, .share-pop textarea { font: 16px/1.45 var(--sans); padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); }
.input:focus, .login-email input:focus, .account-delete input:focus, .byok-key input:focus, .folder-pick select:focus, .folder-pick input:focus, .folder-form input:focus, .folder-form textarea:focus, .folder-new input:focus, .inline-form input:focus, .invoice input:focus, .adv-grid input:focus, .date-row input:focus, .rating-note input:focus, .act-pick select:focus, .share-pop textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ——— wzornik (/wzornik, web/styleguide.py): the design system drawn with
   this stylesheet; docs/design-system.md ——— */
main.doc.styleguide { max-width: var(--page); padding: 32px 40px 96px; }
.sg-head h1 { margin: 0 0 8px; font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.sg-lead { margin: 0 0 18px; max-width: 46rem; color: var(--muted); font-size: var(--fs-ui); line-height: 1.55; }
.sg-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px -10px; }
.sg-nav a { padding: 6px 10px; border-radius: var(--r-sm); color: var(--muted); font-size: var(--fs-ui); }
.sg-nav a:hover { background: var(--tint); color: var(--fg); text-decoration: none; }
.sg-section { padding: 32px 0 8px; border-top: 1px solid var(--line); margin-top: 24px; scroll-margin-top: 88px; }
.sg .sg-title { margin: 0 0 6px; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); text-transform: none; }
.sg-group h3 { margin: 18px 0 10px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sg-swatch { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.sg-swatch span { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.sg-swatch b { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); }
.sg-swatch small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.sg-type { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sg-type-name { font-size: var(--fs-small); color: var(--faint); }
.sg-type > * { margin: 0; }
.sg-doc-h1 { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.sg-doc-h1 .sub { display: block; margin-top: 8px; font-size: 16px; line-height: 1.45; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.sg-label { line-height: 1; }
.sg-doc-h3 { font-size: 17px; line-height: 1.4; font-weight: 650; letter-spacing: 0; color: var(--fg); }
.sg-body { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }
.sg-meta { font-size: var(--fs-meta); color: var(--muted); }
.sg-auto-note { font-size: var(--fs-small); color: var(--faint); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.sg-specimen { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: visible; background: var(--bg); }
.sg-stage { flex: 1; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.sg-stage > .card, .sg-stage > .law-quote, .sg-stage > .field, .sg-stage > p { flex: 1 1 100%; margin: 0; }
/* the page corner drawn in place, not over the page */
.sg-stage > .sg-corner { position: static; z-index: auto; }
.sg-specimen figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--tint); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: 13.5px; color: var(--muted); }
.sg-specimen figcaption b { color: var(--fg); font-weight: 600; }
.sg-specimen code, .sg-lead code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--brand-ink); word-break: break-word; }
.sg-page-head { max-width: 46rem; margin-top: 18px; }
@media (max-width: 720px) {
  main.doc.styleguide { padding: 20px 16px 64px; }
  .sg-type { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
/* pensja na umowie o pracę (static/app.js, calcView): kwota na rękę,
   założenia jako filtry (.pick), składki i zaliczka z przepisami */
.calc .calc-picks { margin: 6px 0 18px; }
.calc .pick-find .input { width: 100%; padding: 6px 10px; font-size: 15px; }
.calc.busy { opacity: 0.6; transition: opacity 0.15s; }
.calc-sum { margin: 0 0 14px; }
.calc-net { font-size: 30px; font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.calc-note { margin: 4px 0 0; color: var(--muted); font-size: 15.5px; }
.calc-events { margin: 0 0 18px; padding-left: 20px; color: var(--text); font-size: 15.5px; line-height: 1.55; }
.calc-events li + li { margin-top: 6px; }
.calc-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.calc-table th[scope="row"], .calc-table thead th:first-child { text-align: left; font-weight: 500; color: var(--text); }
.calc-table thead th { font-size: 13px; font-weight: 500; color: var(--muted); }
.calc-table td { white-space: nowrap; }
.calc-ref { display: block; margin-top: 2px; font-size: 13px; }
.calc-ref a { color: var(--muted); }
.calc-table .calc-total th, .calc-table .calc-total td { font-weight: 650; color: var(--fg); border-bottom: 0; }
.calc-table.months th, .calc-table.months td { padding: 6px 4px; font-size: 14px; }
@media (max-width: 560px) {
  .calc-net { font-size: 25px; }
  /* on a phone the month only: the year is in the sentence above */
  .calc-table:not(.months) tr > :nth-child(3) { display: none; }
  .calc-table { font-size: 14px; }
  .calc-table.months th, .calc-table.months td { font-size: 12.5px; }
}
/* the calculation from the provisions (static/app.js, computeView) above
   the explanation: the answer first, the steps folded */
.compute { margin-bottom: 18px; }
.compute .layer-head { align-items: center; gap: 10px; justify-content: flex-start; }
.compute-answer { margin: 6px 0 14px; font-size: 18px; line-height: 1.5; color: var(--fg); font-weight: 550; }
.compute-sub { margin: 16px 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* ——— Sprawdzian (/sprawdzian, web/benchmark.py): asystenci AI z nami i bez ——— */
main.doc.bench-page { max-width: 1000px; }
.bench .lead { margin-bottom: 16px; }
.bench-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-meta); color: var(--muted); margin: 0 0 8px; }
.bench-figures { margin: 28px 0 0; padding: 24px 28px; border-radius: 16px; background: var(--law-bg); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 40px; }
.bench-figures > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bench-figures dd { margin: 0; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.bench-figures dt { order: 2; font-size: 15px; line-height: 1.4; color: var(--muted); }
.doc.prose .bench-group { margin: 32px 0 12px; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); font-weight: 600; }
.bench-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bench-cat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.doc.prose .bench-cat h3 { margin: 0; font-size: 16.5px; }
.doc.prose .bench-cat p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.doc.prose .bench-cat .bench-example { color: var(--text); font-size: 14.5px; }
.bench-rows { display: grid; gap: 6px; margin-top: 8px; }
.bench-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 46%); align-items: center; gap: 10px; font-size: 13.5px; }
.bench-row .how { color: var(--faint); }
.bench-bar { position: relative; display: block; height: 20px; border-radius: 6px; background: var(--tint); overflow: hidden; }
.bench-bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--slate); opacity: 0.55; }
.bench-bar.ours .fill { background: var(--brand); opacity: 1; }
.bench-bar .num { position: relative; padding: 0 8px; font-size: 12.5px; font-weight: 600; line-height: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }
.bench-bar.ours .num { color: var(--on-brand); }
.bench-bar.none { background: none; height: auto; color: var(--faint); font-size: 12.5px; }
.doc.prose ul.bench-variants { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.bench-variants li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; margin: 0; border-bottom: 1px solid var(--line); }
.bench-variants li:last-child { border-bottom: 0; }
.bench-variants li > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.bench-model { display: block; width: 100%; font-size: var(--fs-small); color: var(--faint); }
.doc.prose ol.bench-steps { padding-left: 22px; }
.bench-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-top: 16px; }
.bench-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
.bench-table th, .bench-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.bench-table tbody tr:last-child th, .bench-table tbody tr:last-child td { border-bottom: 0; }
.bench-table thead th { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.bench-table thead th span { display: block; font-weight: 400; color: var(--faint); }
.bench-table tbody th { text-align: left; font-weight: 400; }
.bench-table tbody th a { color: var(--text); }
.bench-table tbody th a:hover { color: var(--brand); }
.bench-cat-name { display: block; font-size: var(--fs-small); color: var(--faint); }
.score { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 7px; font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.score.s5, .score.s4 { background: var(--green-soft); color: var(--green); }
.score.s3 { background: var(--amber-soft); color: var(--amber); }
.score.s2, .score.s1 { background: var(--rose-soft); color: var(--rose); }
.score.none { background: var(--tint); color: var(--faint); font-weight: 400; }
.bench-fact { padding: 14px 18px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--law-bg); }
.doc.prose .bench-fact p { margin: 0; }
.doc.prose .bench-fact .label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.07em; color: var(--faint); font-weight: 600; margin-bottom: 4px; }
.bench-replies { display: grid; gap: 10px; }
details.bench-reply { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
details.bench-reply summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; list-style: none; }
details.bench-reply summary::-webkit-details-marker { display: none; }
details.bench-reply summary > span:first-child { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
details.bench-reply > :not(summary) { margin: 0 18px 14px; }
.doc.prose .bench-why { font-size: 15px; color: var(--muted); }
.bench-answer { overflow-wrap: anywhere; }
.doc.prose .bench-answer p { font-size: 15.5px; margin: 0 0 8px; }
@media (max-width: 640px) {
  .bench-figures { padding: 20px; }
  .bench-figures dd { font-size: 36px; }
  .bench-row { grid-template-columns: minmax(0, 1fr) 90px; }
}
.doc.prose .bench-cat .bench-count { font-size: var(--fs-small); color: var(--faint); font-variant-numeric: tabular-nums; }
.doc.prose .bench-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--faint); margin: 0 0 6px; }
.bench-variants .bench-memory { font-size: var(--fs-small); color: var(--faint); margin-right: 8px; }

/* ——— wyniki od nowa (13.10.2026, projekt „Jedno pole, jedna lista, jeden
   panel”): na wynikach samo pole (bez tytułu, przykładów i uwagi o danych,
   która wraca tylko z ostrzeżeniem), pasek rodzajów dokumentów z dniem stanu
   prawnego, najlepsze dopasowanie z trzema działaniami i listy wierszy ——— */
.hero.over-results { padding-top: 28px; }
.hero.over-results > .hero-asof,
.hero.over-results > h1,
.hero.over-results > .lead,
.hero.over-results .examples,
.hero.over-results .privacy-note:not(.warn) { display: none; }
.hero.over-results ~ .results { margin-top: 20px; }
/* the tabs stay on the line; the day of the law goes over them on the right
   when both do not fit */
.res-bar { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: space-between; gap: 2px 16px; margin: 0 0 24px; border-bottom: 1px solid var(--line); }
.res-date { margin-left: auto; }
.res-tabs { position: relative; display: flex; gap: 22px; font-size: 15px; }
.res-tabs > a { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 10px 0 11px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; }
.res-tabs > a:hover { color: var(--fg); text-decoration: none; }
.res-tabs > a.on { color: var(--fg); font-weight: 600; border-bottom-color: var(--brand); }
.res-tabs .g-count { margin: 0; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; }
.res-tabs .g-count:empty { display: none; }
/* the tabs in place: Wszystko is everything but the views, a view is its tab */
.results > .res-view { display: none; }
.results[data-tab]:not([data-tab=""]) > :not(.res-bar):not(.res-view) { display: none; }
.results[data-tab="przepisy"] > .v-przepisy,
.results[data-tab="orzeczenia"] > .v-orzeczenia,
.results[data-tab="interpretacje"] > .v-interpretacje { display: block; }
.res-view > .res-section { margin-top: 0; }
.res-view .filterbar { margin-top: 0; }
/* Pro: the card over the judgments, apart from their filters */
.res-view .stance-layer { margin: 0 0 28px; }
.res-view .stance-layer .stance { margin-top: 0; }
.res-adv { margin-left: auto; }
.res-count { margin: 0 0 6px; font-size: var(--fs-meta); color: var(--muted); }
.res-view .loading { padding: 24px 0; }
.res-date { padding-bottom: 6px; font-size: var(--fs-meta); color: var(--faint); }
.best-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.best-actions .btn .i { width: 16px; height: 16px; }
.helpful { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: var(--fs-meta); color: var(--faint); }
.helpful .icon-btn { color: var(--muted); }
.helpful-q.thanks { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }
.best-actions + .rating-why { margin-top: 12px; }
.res-section { margin-top: 36px; }
.res-label { margin: 0 0 4px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.res-list { display: flex; flex-direction: column; }
.res-row { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.res-row:hover { background: var(--tint); text-decoration: none; }
.res-row:hover .res-title { text-decoration: underline; }
.res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--faint); }
.res-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--brand); }
a.res-row:visited .res-title { color: var(--visited); }
.res-text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.55; color: var(--text); }
.res-text-label { color: var(--faint); }
mark.m-q { padding: 0 1px; border-radius: 3px; background: var(--mark); color: inherit; }
.res-more { display: flex; align-items: center; gap: 4px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--brand); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.res-more:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .res-tabs { max-width: 100%; overflow-x: auto; gap: 18px; scrollbar-width: none; }
  .res-tabs::-webkit-scrollbar { display: none; }
}

/* ——— dokument w panelu obok wyników (wyniki od nowa, etap 3, 13.10.2026):
   nagłówek jak przepis w panelu (.unit), rozstrzygnięcie, teza, sentencja,
   miejsca ze słowami pytania, powołane przepisy jako pigułki ——— */
.doc-pv .unit-meta { flex-wrap: wrap; }
.doc-pv .unit-meta a .i { width: 0.9em; height: 0.9em; }
.doc-pv-quote { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--brand-line); background: var(--law-bg); border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.6; }
.doc-pv-section { margin-top: 28px; }
.doc-pv-section > .res-label { display: flex; align-items: baseline; }
.doc-pv-thesis { margin: 6px 0 0; font-size: 17px; line-height: 1.6; color: var(--fg); text-wrap: pretty; }
.doc-pv-sentence { margin-top: 6px; padding: 12px 16px; background: var(--law-bg); border: 1px solid var(--line); border-radius: 12px; font-size: 15.5px; line-height: 1.6; }
.doc-pv-sentence p { margin: 0 0 8px; }
.doc-pv-sentence p:last-child { margin: 0; }
.doc-pv-places p { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; }
.doc-pv-places p:first-child { border-top: 0; padding-top: 6px; }
.doc-pv-cited { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
.doc-pv-act { font-size: var(--fs-meta); color: var(--muted); }
.doc-pv-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-pv-refs .pill { padding: 4px 12px; font-size: 14px; }

/* the act as the best match (results redesign, stage 4): „kodeks pracy” */
.act-best-name { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
.act-best-name a { color: var(--fg); text-decoration: none; }
.act-best-name a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.act-best-title { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.act-best .res-meta { margin-top: 6px; }
.results > .res-section.first { margin-top: 0; }
.act-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.act-parts a { color: var(--brand); }
@media (max-width: 720px) { .act-parts { grid-template-columns: minmax(0, 1fr); } }