/* Wygenerowane z indexv5.html — współdzielony arkusz hub + podstrony (P0.1) */
/* Noto Sans — self-hosted (RODO: bez zależności od Google, subset łaciński) */
@font-face { font-family: 'Noto Sans'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-400i.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-400n.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-500n.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-600n.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-700n.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/fonts/noto-800n.woff2) format('woff2'); unicode-range: U+20-7e, U+91-92, U+99, U+a0-17f, U+3b1-3b2, U+3ba, U+3bc, U+2010, U+2013-2014, U+2018-2019, U+201c-201e, U+2022, U+2026, U+2032-2033, U+2078, U+20ac, U+2122, U+2190, U+2192, U+2197, U+2260, U+2264-2265, U+25b8, U+25be, U+25cf, U+2640, U+2713; }
/* ═══════════════════════════════════════════════════════════════════════════
WARSTWA TOKENÓW — v4, spójna z panelem partnera Office (2026-08-13)
Wartości ze ŹRÓDŁA panelu (office/public/assets/app.css), nie próbkowane
ze zrzutów — próbkowanie dawało #8B6238 zamiast #92602f i promień 12px
zamiast 18px, a te różnice widać przy zestawieniu obok siebie.
ZASADA: żadna nazwa tokenu nie znika (474 klasy, 500+ wywołań var()).
Nazwy zostają, zmieniają się wartości.
KONTRAST policzony. Dwa tokeny Office ŚWIADOMIE odrzucone, bo oblewają AA:
--muted #877a6a (4,18:1) i --gold #a4761f (4,05:1). Nie kopiuj ich tu
z powrotem „dla spójności z Office" — to spójność z błędem.
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* ——— SKALA ODSTĘPÓW (jedyna dopuszczalna) ——— */
--space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:40px; --space-6:64px;
/* ——— SKALA TYPOGRAFICZNA ——— */
--fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:18px; --fs-lg:24px; --fs-xl:32px;
/* ——— POWIERZCHNIE ———
Było #EFEBE3 — dwa stopnie ciemniej i bardziej żółto niż Office.
--paper = Office --bg-canvas (obszar treści)
--paper2 = Office --field (tła pól, nagłówek tabeli, badge neutralny)
--paper3 = Office --bg-app (tło poza kartami)
--surface-hero: hero przestaje mieć własne ciemniejsze tło. Pas nagłówka
odróżnia się OBRAMOWANIEM DOLNYM, nie zmianą tła (§6.2). */
--paper:#f7f6f2; --paper2:#f4f5f1; --paper3:#eceae4;
--surface-hero:#f7f6f2; --surface-inset:#faf9f5;
/* ——— TEKST ———
--ink, --ink-soft prosto z Office.
--ink-faint NIE jest Office'owym --muted #877a6a: ten ma 4,18:1 na bieli
i 3,82:1 na --paper2, a w tym arkuszu stoi pod tekstem w 53 miejscach.
#6f6357 to ta sama rodzina barwna przy 5,84:1 / 5,33:1. */
--ink:#2c2219; --ink-soft:#5c4d3c; --ink-faint:#6f6357;
/* ——— MARKA ———
--brand = Office --brown 5,33:1 na bieli — wypełnienia i tekst
--brand-deep = Office --brown-hover 6,92:1 — hover, linki w treści
--brand-950 = Office --ink 15,56:1 — nagłówki (63 użycia; było
#2D1D1B, czyli osobny kolor tekstu obok --ink; teraz jeden) */
/* A-02: brąz ma DWIE role, nie jedną.
--brand TYLKO wypełnienia (przycisk główny, aktywna pigułka, aktywna zakładka)
--brand-text TYLKO tekst (linki w treści, przycisk drugorzędny) — 7,0:1 na --paper,
podczas gdy --brand daje tam 4,98:1, czyli na styku progu. */
--brand:#8B6238; --brand-text:#674F40; --brand-deep:#674F40; --brand-950:#2c2219;
--brand-soft:#f1eae4; --brand-200:#dfd0bd;
/* ——— STATUSY — wzorzec „dwa odcienie na barwę" z Office ———
Office rozdziela token PASKA od tokenu TEKSTU, bo pasek może być jaśniejszy,
a tekst musi trzymać kontrast. Tu ten sam podział:
--{x} kolor tekstu i pigułki (≥4,5:1 na bieli i na własnej tincie)
--{x}-deep ciemniejszy wariant tekstu
--{x}-soft tinta 13% — JEDYNE dopuszczalne kolorowe tło
--{x}-line obramowanie tinty
--acc-{x} pasek akcentu 5px na karcie (nie niesie tekstu)
Bursztyn: tekst to #8a6318 (5,41:1), a NIE Office'owe --gold #a4761f
(4,05:1). Złoto zostaje wyłącznie na pasku --acc-amber. */
--green:#2f7a57; --green-deep:#33604a; --green-soft:#e4eee9; --green-line:#c3ded1;
--amber:#8a6318; --amber-deep:#6d4e13; --amber-soft:#f3ede2; --amber-line:#e2d3b4;
--red:#96362c; --red-deep:#7d2c24; --red-soft:#f1e5e4; --red-line:#e0c4c1;
--rev:#7a4a3d; --rev-deep:#5f382e; --rev-soft:#efe6e2; --rev-line:#d5c0b7;
--leaf:#2f7a57; --leaf-soft:#e4eee9;
/* Paski akcentu — z Office (--acc-*). Karta neutralna to NIE karta bez paska,
tylko karta z paskiem szarym. Ustalenie rundy v5 panelu, nie cofać. */
--acc-green:#3d6b4f; --acc-amber:#b8862b; --acc-red:#a5402d;
--acc-blue:#3a6b96; --acc-neutral:#c4bba9;
/* Tekst etykiet sparowany z paskiem — Office --ink-* */
--ink-green:#33604a; --ink-amber:#8a6318; --ink-red:#98392a;
/* --ink-blue USUNIĘTY (PATCH-05 P-03): jedynym jego użyciem była plakietka
„Alergen", która wróciła do bursztynu. Niebieski nie ma w tym systemie
przypisanego znaczenia — token bez znaczenia zostawiony „na później"
wraca jako czwarta barwa semantyczna. */
--ink-neutral:#6f6357;
--blue:#35688f; --blue-soft:#e6ecf2; --blue-line:#c5d4e2;
/* ——— LINIE I CIENIE — z Office ——— */
--card:#FFFFFF;
--line:rgba(51,39,29,.09); --line-soft:rgba(51,39,29,.06); --border-strong:rgba(51,39,29,.16);
--shadow-sm:0 1px 2px rgba(51,39,29,.06);
--shadow-md:0 6px 18px -6px rgba(51,39,29,.16),0 2px 5px -2px rgba(51,39,29,.08);
--shadow-lg:0 18px 50px -12px rgba(51,39,29,.20);
/* ——— PROMIENIE — z Office: karta 18px, kontrolka 10px ——— */
--radius:10px; --radius-sm:10px; --radius-card:18px; --radius-lg:18px;
--sans:'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mono:ui-monospace,'SF Mono','IBM Plex Mono',Menlo,Consolas,monospace;
/* --measure 65ch → 68ch: audyt zmierzył akapity na ~1150px (~140 znaków) */
--container:1200px; --results-max:900px; --measure:68ch;
/* ——— Tokeny wymagane przez komponenty przeniesione z Office ———
Pozostałe nazwy Office (--surface, --field, --muted, --brown…) NIE są tu
dopisywane: wklejany CSS ma je przepisane na nazwy tego projektu.
Te pięć nie ma odpowiednika i musi istnieć. */
--brand-ring:rgba(146,96,47,.13); /* Office --brown-soft: pierścień fokusu pól */
--pad-card:1.75rem; /* Office --pad-card: 28 px */
--btn-2:#eef0ea; /* Office --btn-secondary */
--btn-2-hover:#e4e8df;
--btn-2-ink:#5c6a54;
/* ——— Zestaw statusowy wg SPEC-u wykonawczego: jeden odcień = jedno znaczenie ———
Trzy role na status: -bg (tinta, JEDYNE dopuszczalne kolorowe tło),
-fg (tekst, ≥4,5:1 na swojej tincie), -accent (pasek 4 px, nie niesie tekstu). */
--ok-bg:#EAEFE8; --ok-fg:#395942; --ok-accent:#486A51;
--hold-bg:#FBF3E3; --hold-fg:#7A5A1E; --hold-accent:#B0883E;
--bad-bg:#F6E4E3; --bad-fg:#8E3B37; --bad-accent:#A8443F;
--border:#E6E2D9;
--ink-muted:#6B6259;
--brand-tint:#F2EBE1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;font-size:var(--fs-base);overflow-x:clip}
.claim-orig,.meta,.card-meta,.cond,.f-phrase,.preview{overflow-wrap:anywhere}
img{max-width:100%}
input,button,textarea,td,th,.mono,.meta,.id,time{font-variant-numeric:tabular-nums}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand-deep)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
::selection{background:var(--brand-200);color:var(--brand-950)}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;line-height:1.2}
/* pasek prawny (sticky u góry) */
/* PATCH-06 P-04 — pasek zostaje na wszystkich ekranach, ale jako JEDNA linia.
line-height 1.45 zamiast dziedziczonego 1.6: 41 px → 39 px, próg ≤40 px. */
.notice{background:var(--brand-950);color:#EDE4D8;font-size:var(--fs-sm);line-height:1.45;padding:10px 0;text-align:center;position:static}
.notice b{color:#E2C39C;font-weight:500}
.notice .wrap{display:flex;gap:var(--space-2);align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
/* nagłówek marki — pas pełnej szerokości (tło/border sięga krawędzi), treść w kontenerze */
.siteband{background:var(--surface-hero);border-bottom:1px solid var(--line)}
/* ── PATCH-06 P-04 — geometria hero ─────────────────────────────────────────
Odzyskujemy wysokość na blokach wtórnych i odstępach, NIGDY na H1 ani na
pierwszym zdaniu podtytułu (patrz „Czego nie robić”).
40 px nad H1 = padding-top paska + wyzerowany margin-top nagłówka; wcześniej
te dwie wartości się sumowały (24 + 24 = 48).
padding-bottom 24 px to jednocześnie odstęp „karta KPI → pasek zakładek”:
spec podaje w P-04 dwie liczby na tę samą odległość (32 i 24) — biorę
mniejszą, bo test 7 jest wiążący, a różnica to 8 px zapasu. */
.siteband>.wrap{padding-top:40px;padding-bottom:24px}
.hero-fresh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;
margin:12px 0 0;font-size:var(--fs-sm);color:var(--ink-soft)}
.hero-fresh a{color:var(--brand-text);font-weight:600;text-decoration:none}
.hero-fresh a:hover{text-decoration:underline}
#herostats{margin-top:20px}
/* Etap 2 — hero „narzędziowy": tytuł → zdanie → pasek liczb → DUŻE pole → chipy */
.hero-inner{max-width:760px}
/* ── Hero DWUKOLUMNOWY od 1024 px (23.08.2026) ──────────────────────────────
Kafle KPI stały POD tekstem i dokładały ~110 px wysokości, spychając pole
wyszukiwania — to, po co użytkownik przyszedł — coraz niżej. Przeniesione do
prawej kolumny wchodzą w wysokość, którą i tak zajmuje tytuł z lidem, więc
sekcja kurczy się do wysokości samego tekstu.
⚠ Poniżej 1024 px WRACAMY do jednej kolumny: przy węższym oknie druga kolumna
zwęża tytuł bardziej, niż oszczędza wysokości. Próg był chwilowo na 1180 px,
bo linia świeżości niosła jeszcze datę przebudowy i link do metodologii
i przy węższej kolumnie łamała się na dwa wiersze; po jej skróceniu
do samego „Stan bazy … · Rejestr KE + EFSA + GIS" mieści się w jednym.
⚠ Statystyki nadal są w hero (patrz komentarz przy .ph-kpibar) — zmienia się
ich MIEJSCE, nie obecność. */
@media(min-width:1024px){
.hero-inner{max-width:none;display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,380px);
column-gap:var(--space-5);align-items:start}
.hero-inner>h1.hero,.hero-inner>.lede,.hero-inner>.hero-fresh{grid-column:1}
.hero-inner>.lede{max-width:var(--measure)}
/* span 3 = trzy elementy lewej kolumny (h1 + lede + linia świeżości).
Dopisanie czwartego wymaga podniesienia tej liczby, inaczej KPI wyląduje
w wierszu pod nim i wysokość wróci. */
.hero-inner>#herostats{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center}
.hero-inner>#herostats .ph-kpibar{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-inner>#herostats .ph-kpibar__cell:nth-child(3){border-left:0}
.hero-inner>#herostats .ph-kpibar__cell:nth-child(n+3){border-top:1px solid var(--border)}
}
.db-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:var(--space-4) 0;font-size:var(--fs-sm);color:var(--ink-soft)}
.db-strip .pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;box-shadow:var(--shadow-sm)}
.db-strip .pill b{font-weight:600;color:var(--ink)}
.db-strip .pill.aut b{color:var(--green-deep)} .db-strip .pill.hold b{color:var(--amber)} .db-strip .pill.rej b{color:var(--red-deep)}
.db-strip a{font-weight:500;color:var(--brand-deep);white-space:nowrap;text-decoration:none}
.db-strip a:hover{text-decoration:underline}
.hero-search{display:flex;gap:var(--space-2);margin-top:var(--space-2);max-width:640px}
.hero-search .ac-wrap{flex:1;position:relative}
.hero-search input{width:100%;height:64px;font-size:var(--fs-md);font-family:inherit;color:var(--ink);padding:0 var(--space-4);border:1.5px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-md)}
.hero-search input::placeholder{color:var(--ink-faint)}
.hero-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(107,78,61,.16)}
/* po KLASIE, nie po id — pole-bohater stoi w dwóch modułach (#qbtn i #gbtn) */
.hero-search .btn{height:64px;padding:0 var(--space-5);font-size:var(--fs-base);border-radius:var(--radius-lg);flex:none}
.hero-explainer{margin-top:var(--space-4);max-width:var(--measure)}
.hero-explainer summary{cursor:pointer;font-weight:500;color:var(--brand-deep);font-size:var(--fs-sm)}
.hero-explainer[open] summary{margin-bottom:var(--space-2)}
.hero-explainer p{font-size:var(--fs-base);line-height:1.6;color:var(--ink);margin:0}
.hero-explainer strong{color:var(--brand-950);font-weight:600}
@media(max-width:640px){ .hero-search{flex-direction:column} .hero-search input,.hero-search #qbtn{width:100%} }
.brandline{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.brandlogo{height:34px;width:auto;display:block}
.brandsep{width:1px;height:26px;background:var(--border-strong)}
.toolname{font-weight:500;font-size:var(--fs-base);color:var(--brand-950)}
.toolname span{color:var(--brand)}
.beta{font-size:var(--fs-xs);font-weight:500;letter-spacing:.08em;color:var(--brand);background:var(--brand-soft);padding:3px 9px;border-radius:var(--radius);text-transform:uppercase}
/* PATCH-06 P-04 — margin-top 0: odstęp nad H1 daje wyłącznie padding paska (40 px).
Kegl H1 BEZ ZMIAN — wysokości nie odzyskujemy na komunikacie głównym. */
h1.hero{font-weight:600;font-size:clamp(1.6rem,4vw,var(--fs-xl));line-height:1.14;margin:0 0 var(--space-3);color:var(--brand-950)}
h1.hero em, h1.hero .hero-line2{font-style:normal;color:var(--brand);}
h1.hero .hero-line2{display:block} /* wymuszony podział: dokładnie 2 linie (tytuł / — wyszukiwarka składników beta) */
h1.hero .hero-line2 .beta-badge{color:var(--brand-deep)}
.beta-badge{display:inline-block;vertical-align:middle;margin-left:var(--space-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep);background:rgba(107,78,61,.10);border:1px solid rgba(107,78,61,.30);border-radius:999px;padding:3px 11px;line-height:1.5;white-space:nowrap}
.lede{margin:0;color:var(--ink-secondary,var(--ink-soft));max-width:var(--measure);font-size:var(--fs-base)}
/* ——— SPEC nagłówków/copy (SEO/AEO/GEO) ——— */
.answer-block{max-width:var(--measure);margin:var(--space-3) 0 0;font-size:var(--fs-base);line-height:1.6;color:var(--ink);
background:var(--paper2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius-card);padding:var(--space-3) var(--space-4)}
.answer-block strong{color:var(--brand-950);font-weight:600}
.stat-note{font-size:var(--fs-sm);color:var(--ink-soft);margin:var(--space-2) 0 0}
.panel-h2{font-size:var(--fs-lg);font-weight:600;color:var(--brand-950);margin:0 0 var(--space-2);line-height:1.2}
.panel-lead{color:var(--ink-soft);max-width:var(--measure);margin:0 0 var(--space-4);line-height:1.55}
/* ⚠ Wyróżnienie WEWNĄTRZ akapitu wprowadzającego jest zneutralizowane celowo.
Cztery z sześciu modułów miały pierwsze zdanie w , a drugie bez — przez
co jeden akapit niósł dwie wagi wizualne i moduły wyglądały jak osobne produkty,
mimo że to jedno narzędzie. Wzorcem jest „Szukaj składnika": jeden akapit,
jeden głos. Reguła stoi tu jako zabezpieczenie — gdyby ktoś dopisał
w treści, akapit i tak zostanie jednolity. Wyróżnienia rób NIŻEJ, w treści
modułu (.answer-block, .disclaimer), nie w lidzie. */
.panel-lead strong{color:inherit;font-weight:inherit}
.chips-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:var(--space-5) 0 var(--space-2)}
.section-lead{color:var(--ink-soft);max-width:var(--measure);margin:var(--space-2) 0 var(--space-3);line-height:1.55}
/* ===== R2-1: bohater panelu — narzędzie modułu wyeksponowane na górze (moduły = główna nawigacja) ===== */
.panel-hero{margin:0 0 var(--space-5)}
.panel-hero .hero-search{margin-top:var(--space-4)}
.panel-hero .chips-label{margin-top:var(--space-4)}
.section-lead strong{color:var(--ink)}
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:700;margin:var(--space-4) 0 2px}
.details-h3{display:inline;font-size:var(--fs-base);font-weight:500;color:var(--brand-950);margin:0}
.result-head{font-size:var(--fs-md);font-weight:600;color:var(--brand-950);margin:var(--space-3) 0 2px}
.result-counts{margin:0 0 var(--space-3);color:var(--ink-soft);font-size:var(--fs-sm)}
.result-counts strong{color:var(--ink);font-weight:500}
.scan-legend{margin-top:var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-4)}
.scan-legend h3{font-size:var(--fs-md);color:var(--brand-950);margin:0 0 var(--space-2)}
.scan-legend ul{margin:0;padding-left:var(--space-4);color:var(--ink-soft);line-height:1.6}
.scan-legend li{margin:0 0 4px}.scan-legend strong{color:var(--ink)}
.status-note{font-size:var(--fs-sm);color:var(--ink-soft);background:var(--surface-inset);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin:var(--space-3) 0 0}
.tbl-scroll{overflow-x:auto;margin:var(--space-2) 0 var(--space-4)}
.compare{width:100%;border-collapse:collapse;font-size:var(--fs-sm);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);min-width:520px;overflow:hidden}
.compare th{text-align:left;padding:10px 14px;background:var(--surface-inset);font-weight:600;border-bottom:1px solid var(--line)}
.compare th:first-child{color:var(--red-deep,#7D2020)}.compare th:last-child{color:var(--green-deep,#1F4620)}
.compare td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;width:50%;color:var(--ink)}
.compare tr:last-child td{border-bottom:0}
.compare em{color:var(--green-deep,#1F4620);font-style:normal;font-size:var(--fs-xs)}
.faq-static{background:var(--paper2,#F4F3EF);border-top:1px solid var(--line);padding:var(--space-5) 0}
.faq-static h2{font-size:var(--fs-lg);color:var(--brand-950);margin:0 0 var(--space-4)}
.faq-static h3{font-size:var(--fs-md);color:var(--brand-950);margin:var(--space-4) 0 var(--space-2)}
.faq-static p{color:var(--ink-soft);max-width:var(--measure);line-height:1.6;margin:0}
/* FAQ jako akordeon — pytanie widoczne, odpowiedź rozwijana */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:'+';margin-left:auto;font-size:1.35em;line-height:1;color:var(--brand);font-weight:400;flex:0 0 auto}
.faq-item[open]>summary::after{content:'\2212'}
.faq-item .faq-q{margin:0;font-size:var(--fs-md);color:var(--brand-950);font-weight:500}
.faq-item>summary:hover .faq-q{color:var(--brand)}
.faq-item .faq-a{padding:0 0 var(--space-4)}
.datebar{display:inline-flex;gap:var(--space-2);align-items:center;margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--ink-soft);
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-3)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(59,109,17,.16)}
.datebar b,.datebar time{color:var(--ink);font-weight:500}
/* nawigacja zakładek — Etap 2: wyraźny biały „toolbar" odklejający się cieniem po przyklejeniu */
.tabwrap{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--border-strong);
transition:box-shadow .15s ease}
.tabwrap.is-stuck{box-shadow:var(--shadow-md)}
nav.tabs{display:flex;gap:var(--space-1);flex-wrap:wrap}
.tab{position:relative;border:none;background:transparent;font-family:inherit;font-weight:500;font-size:var(--fs-sm);color:var(--ink-soft);
padding:14px var(--space-3);min-height:48px;cursor:pointer;
border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:2px solid transparent;margin-bottom:-1px;
display:inline-flex;align-items:center;gap:var(--space-2);transition:color .15s,background .15s}
.tab:hover{color:var(--brand-deep);background:var(--brand-soft)}
.tab.active{color:var(--brand-950);font-weight:600;border-bottom-color:var(--brand);background:var(--brand-soft)}
.tab .ti{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6}
.tab.active .ti{stroke:var(--brand)}
.tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.tab .tlab-s{display:none} /* krótka etykieta modułu (używana w triggerze menu mobilnego) */
.tabs-trigger{display:none} /* R2-6 A — trigger rozwijanego menu tylko na ≤720px */
main.wrap{padding:var(--space-5) var(--space-4) var(--space-4);min-height:56vh}
section.panel{display:none}
section.panel.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* wyszukiwarka */
/* §3.1 — współdzielony autocomplete (wyszukiwarka składników + „po działaniu"); wzorzec z Kreatora, ale niezależny komponent */
.ac-wrap{position:relative;flex:1;min-width:240px}
.ac-wrap>input{width:100%}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--card);border:1px solid var(--border-strong);border-top:none;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-md);max-height:min(320px,60vh);overflow-y:auto}
.ac-item{padding:9px var(--space-3);cursor:pointer;font-size:var(--fs-sm);color:var(--ink);border-top:1px solid var(--line-soft)}
.ac-item:first-child{border-top:none}
.ac-item b{color:var(--brand-deep);font-weight:700}
.ac-item:hover,.ac-item.on{background:var(--brand-soft);color:var(--brand-deep)}
.ac-empty{padding:10px var(--space-3);font-size:var(--fs-sm);color:var(--ink-faint)}
@media(max-width:640px){ .ac-wrap{flex:0 0 100%;width:100%} }
.btn{font-family:inherit;font-weight:500;font-size:var(--fs-sm);border:none;cursor:pointer;border-radius:var(--radius);height:44px;
padding:0 var(--space-4);background:var(--brand);color:#fff;transition:background .16s;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
.btn:hover{background:var(--brand-deep)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand-200);height:44px;padding:0 var(--space-3)}
.btn.ghost:hover{background:var(--brand-soft)}
.hint{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:var(--space-3);max-width:var(--measure);display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.hint a{color:var(--ink-soft);text-decoration:underline}
.hint a:hover{color:var(--brand)}
details.howto{margin-top:var(--space-3);max-width:var(--measure)}
details.howto>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--brand);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px}
details.howto>summary::-webkit-details-marker{display:none}
details.howto>summary::before{content:'';width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .18s}
details.howto[open]>summary::before{transform:rotate(90deg)}
details.howto[open]>summary{margin-bottom:var(--space-2)}
details.howto .body{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);max-width:var(--results-max)}
/* ── zwijanie list pigułek (23.08.2026) ────────────────────────────────────
.chip ma 32 px wysokości, więc max-height:32px przycina DOKŁADNIE jeden wiersz
niezależnie od tego, ile pigułek się w nim zmieści. Przycinamy CSS-em, a nie
wycinaniem z HTML-a: wszystkie obszary zostają w drzewie dokumentu, więc
czytnik ekranu i robot widzą komplet, a użytkownik — jeden wiersz. */
.chips--fold{overflow:hidden;max-height:32px}
.chips--fold.is-open{max-height:none}
.chips-label--row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.chips-more{border:0;background:none;padding:0;font:inherit;font-size:var(--fs-xs);font-weight:600;
letter-spacing:.05em;text-transform:uppercase;color:var(--brand-deep);cursor:pointer;text-decoration:underline}
.chips-more:hover{color:var(--brand-950)}
.chips-fold{margin-top:var(--space-5)}
.chips-fold>summary{cursor:pointer;margin:0;list-style:none;display:flex;align-items:center;gap:.45rem}
.chips-fold>summary::-webkit-details-marker{display:none}
.chips-fold>summary::before{content:"";flex:none;width:0;height:0;border-left:5px solid currentColor;
border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.chips-fold[open]>summary::before{transform:rotate(90deg)}
.chips-fold .chips{margin-top:var(--space-2)}
.chip{height:32px;padding:0 var(--space-3);display:inline-flex;align-items:center;font-size:var(--fs-sm);font-weight:400;
white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:16px;
cursor:pointer;color:var(--ink-soft);transition:border .16s,color .16s,background .16s}
.chip:hover{background:var(--brand-soft);border-color:var(--brand-200);color:var(--brand-deep)}
.chip[aria-pressed="true"]{background:var(--brand-950);color:#fff;border-color:var(--brand-950)}
/* pasek podsumowania składnika (Novel Food / alergen / GIS) */
/* WYTYCZNE-03 §3 — karta składnika (Novel Food / alergen / dawka GIS): beżowy
box → BIAŁA karta z lewym paskiem akcentu, jak kafle KPI i karty oświadczeń.
Beż był trzecim tłem na ekranie i nie znaczył nic — teraz znaczenie niesie pasek. */
.statusbar{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);
border-radius:var(--radius-card);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0 var(--space-1);
max-width:var(--results-max);box-shadow:var(--shadow-sm)}
.statusbar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc-neutral)}
.statusbar .sb-name{font-weight:500;font-size:var(--fs-md);color:var(--brand-950);display:flex;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2)}
.statusbar .sb-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font-size:var(--fs-sm);align-items:baseline}
/* Klucze wiersza jako eyebrow — ten sam język etykiet co na karcie oświadczenia. */
.statusbar .sb-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-muted);white-space:nowrap}
.statusbar .sb-v{color:var(--ink)}
.statusbar .sb-v .ok{color:var(--ink-green);font-weight:600}
.statusbar .sb-v .warn{color:var(--ink-amber);font-weight:600}
.statusbar .sb-note{font-size:var(--fs-sm);color:var(--ink-faint);margin-top:var(--space-2);border-top:1px solid var(--line);padding-top:var(--space-2)}
.gis-pill{display:inline-block;background:var(--leaf-soft);color:var(--green-deep);border:1px solid var(--green-line);border-radius:var(--radius);padding:2px 8px;font-weight:500;font-size:var(--fs-sm)}
/* przełącznik języka usunięty — brzmienie wiążące zależy od statusu (autoryzowane=PL urzędowe, on hold=oryginał) */
.langbar{display:none}
.langbar-x{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) 0 var(--space-1);flex-wrap:wrap;font-size:var(--fs-sm)}
.langtoggle{display:inline-flex;background:var(--paper2);border:1px solid var(--line);border-radius:var(--radius);padding:2px;gap:2px}
.langtoggle button{border:none;background:transparent;font-family:inherit;font-weight:400;font-size:var(--fs-sm);color:var(--ink-soft);padding:var(--space-1) var(--space-3);border-radius:6px;cursor:pointer;transition:all .16s}
.langtoggle button.on{background:var(--card);color:var(--brand-950);box-shadow:var(--shadow-sm)}
.langnote{font-size:.78rem;color:var(--ink-faint)}
/* Z1.3 — link z wyników SPA do pełnej podstrony składnika (SEO/GEO wewnętrzne linkowanie) */
.subpage-link{display:block;background:var(--brand-soft);border:1px solid var(--brand-200);border-left:4px solid var(--brand);border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0 var(--space-4);color:var(--brand-deep);text-decoration:none;font-size:var(--fs-sm);max-width:var(--results-max);transition:background .15s}
.subpage-link:hover{background:var(--brand-200)}
.subpage-link b{color:var(--brand-950)}
/* licznik wyników (jedna linia, filtruje po kliknięciu) */
.sumrow{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-4) 0 var(--space-2);font-size:var(--fs-sm);color:var(--ink-soft)}
.sumcard{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-1) var(--space-3);cursor:pointer;transition:border .15s,opacity .15s;display:inline-flex;align-items:baseline;gap:var(--space-2);background:var(--card)}
.sumcard:hover{border-color:var(--brand)}
.sumcard.off{opacity:.45}
.sumcard .ico{display:none}
.sumcard .n{font-size:var(--fs-base);font-weight:500;line-height:1}
.sumcard .l{font-size:var(--fs-sm);font-weight:400}
.sc-g .n{color:var(--green-deep)} .sc-y .n{color:var(--amber)} .sc-r .n{color:var(--red)} .sc-rev .n{color:var(--rev-deep)}
/* karty oświadczeń */
.results{margin-top:var(--space-3);max-width:var(--results-max)}
.group-h{font-size:var(--fs-md);font-weight:500;margin:var(--space-5) 0 var(--space-2);display:flex;align-items:baseline;gap:var(--space-2);color:var(--brand-950)}
.group-h .cnt{font-size:var(--fs-sm);color:var(--ink-faint);font-weight:400}
.group-sub{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:var(--space-3);max-width:var(--results-max)}
/* podnagłówek rozdzielający w obrębie jednej grupy statusu oświadczenia DLA SAMEGO SKŁADNIKA od tych DLA PREPARATU ZŁOŻONEGO */
.sub-split{font-size:var(--fs-sm);font-weight:600;color:var(--brand-950);margin:var(--space-4) 0 var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--line);display:flex;align-items:baseline;gap:var(--space-2)}
.sub-split.sub-combo{color:var(--brand-deep)}
.sub-split .cnt{font-weight:400;color:var(--ink-faint)}
.card-meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-soft);margin-top:var(--space-1);line-height:1.5}
/* Karta — mechanika paska przeniesiona z Office (.ph-metric::before).
Było: border-left:5px + border-radius:0 12px 12px 0, czyli lewa krawędź
ścięta na płasko. Office maluje pasek PSEUDOELEMENTEM wewnątrz karty
zaokrąglonej ze wszystkich czterech stron — dzięki temu karta zachowuje
promień 18px, a pasek nie jest grubym obramowaniem, tylko akcentem.
Kolor idzie przez lokalną --acc z fallbackiem na neutral: karta bez
statusu to karta z paskiem SZARYM, nie karta bez paska (ustalenie v5). */
.card{position:relative;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius-card);overflow:hidden;
padding:var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 5px);
margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);transition:box-shadow .16s}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
background:var(--acc,var(--acc-neutral))}
.card:hover{box-shadow:var(--shadow-md)}
.card.g{--acc:var(--acc-green)} .card.y{--acc:var(--acc-amber)}
.card.r{--acc:var(--acc-red)} .card.rev{--acc:var(--acc-red)}
.card-top{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap}
.subst{margin:0;font-weight:500;font-size:var(--fs-md);color:var(--brand-950);line-height:1.3;display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.light-dot{display:none}
.badges{display:flex;gap:var(--space-1);flex-wrap:wrap}
.badge{font-size:var(--fs-xs);font-weight:500;letter-spacing:.01em;border-radius:var(--radius);padding:3px 8px;white-space:nowrap}
/* E5 — plakietki tracą wypełnienie: w karcie ma być DOKŁADNIE JEDEN element
z tłem i jest nim brzmienie do skopiowania. Znaczenie niesie obrys i kolor
tekstu, oba z tej samej rodziny co pigułka statusu. */
.badge{background:transparent;border:1px solid currentColor}
.b-g{color:var(--ok-fg)} .b-y{color:var(--hold-fg)}
.b-r{color:var(--bad-fg)} .b-rev{color:var(--bad-fg)}
/* PATCH-05 P-03 — alergen wraca do bursztynu. WYTYCZNE-03 §5 dały mu własny,
niebieski odcień, żeby nie mylił się z ostrzeżeniem o formule — ale wprowadziło
to CZWARTĄ barwę semantyczną do systemu, w którym niebieski nie znaczy nic.
Alergen jest ostrzeżeniem, więc nosi kolor ostrzeżenia; od „Składnika łączonego"
odróżnia go dziś linia składu, w której alergen jest wskazany z nazwy.
⚠ Tekst i obrys w --hold-fg, NIE --hold-accent: #B0883E na bieli daje 2,9:1,
poniżej progu WCAG 4.5:1 dla plakietki 11 px. --hold-fg to 6,9:1. */
.b-n{color:var(--ink-muted)} .b-al{color:var(--hold-fg)}
.b-part{color:var(--ink-muted)} .b-comb{color:var(--brand-text)}
/* PATCH-02 P-04 — „Oficjalne PL" przestaje być drugą zieloną etykietą obok
pigułki statusu. Dwa identyczne zielone obrysy w jednym rzędzie czytały się
jak para równorzędnych; kolor zostaje wyłącznie na pigułce.
⚠ Musi stać ZA .badge i .b-g — ta sama specyficzność, wygrywa kolejność. */
.badge--neutral{border:1px solid var(--border);color:var(--ink-muted);background:transparent}
/* ===== Etap 5 — pasek werdyktu (status = pierwsza, jednoznaczna informacja; ikona+tekst, nie sam kolor = WCAG 1.4.1) ===== */
.verdict{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
margin:calc(-1*var(--space-3)) calc(-1*var(--space-4)) var(--space-3); /* pas na pełną szerokość, wpięty w górną krawędź karty */
padding:var(--space-2) var(--space-4);border-radius:0 var(--radius-card) 0 0;
border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.verdict .v-ic{width:22px;height:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.verdict .v-ic svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.verdict .v-lab{font-weight:700;letter-spacing:.01em}
.verdict .v-act{color:var(--ink-soft)}
.v-g{background:var(--green-soft)} .v-g .v-lab{color:var(--green-deep)} .v-g .v-ic{background:var(--green);color:#fff}
.v-y{background:var(--amber-soft)} .v-y .v-lab{color:var(--amber-deep)} .v-y .v-ic{background:var(--amber);color:#fff}
.v-rev{background:var(--rev-soft)} .v-rev .v-lab{color:var(--rev-deep)} .v-rev .v-ic{background:var(--rev);color:#fff}
.v-r{background:var(--red-soft)} .v-r .v-lab{color:var(--red-deep)} .v-r .v-ic{background:var(--red);color:#fff}
@media(max-width:600px){ .verdict .v-act{flex-basis:100%} }
/* kolorowe znaczniki grup statusów — spójne z paskami werdyktu */
.group-h .gdot{width:11px;height:11px;border-radius:50%;flex-shrink:0;align-self:center}
.gdot-g{background:var(--green)} .gdot-y{background:var(--amber)} .gdot-rev{background:var(--rev)} .gdot-r{background:var(--red)}
.subst .lat{font-style:italic;font-weight:400;font-size:var(--fs-sm);color:var(--ink-soft)}
.subst .combo-tag{font-weight:500;font-size:var(--fs-xs);color:var(--brand-deep);background:var(--brand-soft);border-radius:var(--radius);padding:2px 7px;margin-left:4px}
/* podsumowanie na karcie — brzmienie wiążące zależne od statusu */
.summary{margin:var(--space-3) 0 var(--space-1)}
.s-lab{font-size:var(--fs-xs);font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:5px;margin-bottom:var(--space-1)}
.s-lab .lock{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.summary .s-txt{font-size:var(--fs-base);line-height:1.55;color:var(--ink)}
.summary.r .s-txt,.summary.rev .s-txt{color:var(--ink-soft)}
.summary .q{font-weight:400}
.s-sec{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.5}
.s-sec .mono{font-family:var(--mono);font-size:var(--fs-sm)}
.s-sec.warn{color:var(--amber-deep)}
.s-sec.plver{background:var(--surface-inset);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2) var(--space-3);color:var(--ink)}
.s-lab-pl{color:var(--ink-faint);margin-bottom:var(--space-1)}
.plver-txt{font-size:var(--fs-sm);color:var(--ink);line-height:1.5}
.plver-note{font-size:var(--fs-xs);color:var(--ink-faint);margin-top:var(--space-1)}
.plver-note b{color:var(--amber-deep);font-weight:500}
.summary .langtag{font-size:var(--fs-xs);color:var(--ink-faint);font-weight:400}
.s-note{font-size:var(--fs-sm);color:var(--ink-soft);background:var(--surface-inset);border-radius:var(--radius);padding:var(--space-2) var(--space-3);margin-top:var(--space-2);line-height:1.5}
.s-note b{color:var(--ink);font-weight:500}
.keychip{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--green-soft);color:var(--green-deep);
border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:500;margin-top:var(--space-2)}
/* ═══════════════════════════════════════════════════════════════════════════
KOMPONENTY PRZENIESIONE Z PANELU OFFICE (app.css) — brief §4.5
Nazwy klas .ph-* ZOSTAJĄ takie jak w Office: te bloki są kopiowane dosłownie,
a zmiana nazw zrywa możliwość porównania z panelem przy następnej rundzie.
Zmienione wyłącznie nazwy TOKENÓW (Office → ten projekt):
--surface→--card · --surface-soft→--surface-inset · --field→--paper2
--muted→--ink-faint · --brown→--brand · --brown-hover→--brand-deep
--brown-soft→--brand-ring · --line-strong→--border-strong
--shadow-card→--shadow-md · --radius-ctrl→--radius · --gold→--amber
⚠ Office rysuje ikony przez Lucide z CDN (). Tu Lucide NIE MA
i mieć nie będzie (CSP: script-src 'self' + googletagmanager). Wszystkie
ikony wstawiamy jako inline