/* ============================================================================
   CBJAP Insight — system projektowy
   Skala 4 px · typografia Inter + JetBrains Mono · motyw jasny/ciemny
   ========================================================================= */

/* ── kroje pisma (lokalne, bez CDN) ─────────────────────────────────── */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/inter-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/inter-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/inter-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/inter-latin-ext-700-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/inter-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}

/* ── tokeny: motyw jasny ────────────────────────────────────────────── */
:root{
  /* neutralne */
  --n-0:#ffffff; --n-25:#fcfcfd; --n-50:#f8fafc; --n-100:#f1f5f9; --n-150:#e9eef4;
  --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8; --n-500:#64748b;
  --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a; --n-950:#020617;

  /* akcent — jeden, powściągliwy */
  --a-50:#eef2ff; --a-100:#e0e7ff; --a-200:#c7d2fe; --a-300:#a5b4fc;
  --a-400:#818cf8; --a-500:#6366f1; --a-600:#4f46e5; --a-700:#4338ca; --a-800:#3730a3;

  /* semantyka */
  --ok-50:#ecfdf5;  --ok-100:#d1fae5; --ok-500:#10b981; --ok-600:#059669; --ok-700:#047857;
  --wn-50:#fffbeb;  --wn-100:#fef3c7; --wn-500:#f59e0b; --wn-600:#d97706; --wn-700:#b45309;
  --er-50:#fef2f2;  --er-100:#fee2e2; --er-500:#ef4444; --er-600:#dc2626; --er-700:#b91c1c;
  --in-50:#eff6ff;  --in-100:#dbeafe; --in-500:#3b82f6; --in-600:#2563eb;

  /* role */
  --bg:var(--n-50); --bg-elev:var(--n-0); --bg-sunken:var(--n-100); --bg-hover:var(--n-100);
  --bd:var(--n-200); --bd-strong:var(--n-300); --bd-subtle:var(--n-150);
  --tx:var(--n-900); --tx-2:var(--n-600); --tx-3:var(--n-500); --tx-4:var(--n-400);
  --tx-inv:var(--n-0);
  --accent:var(--a-600); --accent-soft:var(--a-50); --accent-bd:var(--a-200);
  --ring:color-mix(in srgb, var(--a-500) 35%, transparent);

  /* skala ocen A–F (stała w obu motywach — to język raportu) */
  --g-a:#059669; --g-b:#65a30d; --g-c:#ca8a04; --g-d:#ea580c; --g-e:#dc2626; --g-f:#9f1239;
  --g-a-bg:#ecfdf5; --g-b-bg:#f7fee7; --g-c-bg:#fefce8; --g-d-bg:#fff7ed; --g-e-bg:#fef2f2; --g-f-bg:#fff1f2;

  /* paleta serii wykresów — 8 barw rozróżnialnych także w skali szarości */
  --c1:#4f46e5; --c2:#0891b2; --c3:#059669; --c4:#ca8a04;
  --c5:#dc2626; --c6:#9333ea; --c7:#e11d48; --c8:#0f766e;

  /* geometria */
  --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 3px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
  --sh:0 4px 12px -2px rgba(15,23,42,.08),0 2px 4px -2px rgba(15,23,42,.04);
  --sh-lg:0 12px 32px -8px rgba(15,23,42,.14),0 4px 8px -4px rgba(15,23,42,.06);
  --sh-xl:0 24px 56px -16px rgba(15,23,42,.20);

  --sidebar-w:248px; --topbar-h:56px;
  --f-ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-fast:120ms cubic-bezier(.4,0,.2,1);
  --t:180ms cubic-bezier(.4,0,.2,1);
}

/* ── tokeny: motyw ciemny ───────────────────────────────────────────── */
[data-theme="dark"]{
  --bg:#0b1120; --bg-elev:#0f172a; --bg-sunken:#080d18; --bg-hover:#1a2436;
  --bd:#1e293b; --bd-strong:#334155; --bd-subtle:#16213a;
  --tx:#e8eef7; --tx-2:#94a3b8; --tx-3:#64748b; --tx-4:#475569; --tx-inv:#0f172a;
  --accent:#818cf8; --accent-soft:#1e1b4b; --accent-bd:#3730a3;
  --ring:color-mix(in srgb,#818cf8 40%,transparent);

  --g-a:#34d399; --g-b:#a3e635; --g-c:#fbbf24; --g-d:#fb923c; --g-e:#f87171; --g-f:#fb7185;
  --g-a-bg:#052e23; --g-b-bg:#1a2e05; --g-c-bg:#2e2306; --g-d-bg:#331509; --g-e-bg:#2f1113; --g-f-bg:#320d16;

  --c1:#818cf8; --c2:#22d3ee; --c3:#34d399; --c4:#fbbf24;
  --c5:#f87171; --c6:#c084fc; --c7:#fb7185; --c8:#2dd4bf;

  --ok-50:#052e23; --ok-100:#064e3b; --ok-500:#34d399; --ok-600:#10b981; --ok-700:#6ee7b7;
  --wn-50:#2e2306; --wn-100:#451a03; --wn-500:#fbbf24; --wn-600:#f59e0b; --wn-700:#fcd34d;
  --er-50:#2f1113; --er-100:#450a0a; --er-500:#f87171; --er-600:#ef4444; --er-700:#fca5a5;
  --in-50:#0c1e3d; --in-100:#1e3a8a; --in-500:#60a5fa; --in-600:#3b82f6;
  --a-50:#1e1b4b; --a-100:#312e81;

  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 1px 3px rgba(0,0,0,.5);
  --sh:0 4px 12px -2px rgba(0,0,0,.55);
  --sh-lg:0 12px 32px -8px rgba(0,0,0,.65);
  --sh-xl:0 24px 56px -16px rgba(0,0,0,.75);
}

/* ── reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-ui);font-size:14px;line-height:1.55;color:var(--tx);
  background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--a-200);color:var(--n-900)}
[data-theme="dark"] ::selection{background:var(--a-800);color:#fff}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd-strong);border-radius:var(--r-full);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--tx-4)}

/* ── typografia ─────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-weight:600;letter-spacing:-.011em;line-height:1.25;color:var(--tx)}
h1{font-size:26px;letter-spacing:-.021em}
h2{font-size:19px;letter-spacing:-.017em}
h3{font-size:15px}
h4{font-size:13px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)}
.muted{color:var(--tx-2)}
.dim{color:var(--tx-3)}
.faint{color:var(--tx-4)}
.small{font-size:12.5px}
.tiny{font-size:11.5px}
.strong{font-weight:600}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ── układ ──────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  background:var(--bg-elev);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;z-index:30;
}
.brand{
  display:flex;align-items:center;gap:10px;padding:16px 18px 14px;
  border-bottom:1px solid var(--bd-subtle);
}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--a-500),var(--a-700));
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
  box-shadow:0 2px 8px -2px var(--a-500);letter-spacing:-.03em;
}
.brand-txt{min-width:0}
.brand-name{font-size:14px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.brand-sub{font-size:10.5px;color:var(--tx-3);letter-spacing:.01em;margin-top:1px}

.nav{padding:10px 10px 16px;flex:1}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:2px}
.nav-title{
  font-size:10.5px;font-weight:650;letter-spacing:.075em;text-transform:uppercase;
  color:var(--tx-4);padding:6px 10px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);
  color:var(--tx-2);font-size:13.5px;font-weight:500;position:relative;
  transition:background var(--t-fast),color var(--t-fast);
}
.nav-item:hover{background:var(--bg-hover);color:var(--tx)}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-item.on::before{
  content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.85}
.nav-item.on svg{opacity:1}
.nav-badge{
  margin-left:auto;font-size:10.5px;font-weight:600;color:var(--tx-4);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.nav-item.on .nav-badge{color:var(--accent)}

.sidebar-foot{padding:12px 14px;border-top:1px solid var(--bd-subtle);font-size:11px;color:var(--tx-4)}

.main{min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:25;height:var(--topbar-h);
  display:flex;align-items:center;gap:14px;padding:0 24px;
  background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--bd);
}
.crumbs{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-3);min-width:0}
.crumbs a{color:var(--tx-2)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--tx-4);font-size:11px}
.crumbs .cur{color:var(--tx);font-weight:550}

/* wskaznik silnika analitycznego — na lewo od wyszukiwarki */
.engine{margin-left:auto;flex:0 0 auto}
.engine-pill{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
  border:1px solid var(--bd);border-radius:var(--r-full);background:var(--bg-elev);
  color:var(--tx-2);font-size:12px;font-weight:550;cursor:pointer;white-space:nowrap;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.engine-pill[disabled]{cursor:default}
.engine-pill.on{color:var(--ok-700);border-color:var(--ok-100);background:var(--ok-50)}
.engine-pill.off{color:var(--tx-3)}
.engine-pill.off:not([disabled]):hover{
  color:var(--accent);border-color:var(--accent-bd);background:var(--accent-soft);
}
.engine-pill.busy{color:var(--wn-700);border-color:var(--wn-100);background:var(--wn-50)}
.engine-dot{width:7px;height:7px;border-radius:50%;background:var(--tx-4);flex:0 0 auto}
.engine-pill.on .engine-dot{background:var(--ok-500)}
.engine-pill.busy .engine-dot{background:var(--wn-500);animation:enginePulse 1.4s ease-in-out infinite}
@keyframes enginePulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.engine-pill.busy .engine-dot{animation:none}}
.engine-jobs{
  font-variant-numeric:tabular-nums;font-size:11px;padding:1px 6px;border-radius:var(--r-full);
  background:var(--bg-sunken);color:var(--tx-2);
}
.engine-pill.on .engine-jobs{background:color-mix(in srgb,var(--ok-500) 18%,transparent)}
.engine-go{display:inline-flex;align-items:center;gap:3px;font-size:11px;opacity:.8}
.engine-go svg{width:12px;height:12px}
/* Waski ekran: zostaje sama kropka — stan nadal czytelny, pasek sie nie lamie. */
@media(max-width:760px){
  .engine-label,.engine-go{display:none}
  .engine-pill{padding:0 9px;gap:5px}
}
/* Wyszukiwarka traci `margin-left:auto` — odsuwa ja teraz wskaznik silnika. */
.searchbox{position:relative;margin-left:0;width:min(380px,38vw)}
.searchbox input{
  width:100%;height:34px;padding:0 34px 0 32px;border-radius:var(--r-sm);
  border:1px solid var(--bd);background:var(--bg-elev);color:var(--tx);font-size:13px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.searchbox input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.searchbox input::placeholder{color:var(--tx-4)}
.searchbox .ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--tx-4);pointer-events:none}
.searchbox .ico svg{width:15px;height:15px}
.searchbox kbd{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10px;color:var(--tx-4);
  border:1px solid var(--bd);border-radius:var(--r-xs);padding:1px 4px;background:var(--bg-sunken);
}
.suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r);
  box-shadow:var(--sh-lg);overflow:hidden;max-height:400px;overflow-y:auto;
}
.suggest-item{display:block;padding:8px 12px;border-bottom:1px solid var(--bd-subtle)}
.suggest-item:last-child{border-bottom:0}
.suggest-item:hover,.suggest-item.sel{background:var(--bg-hover)}
.suggest-item .t{font-size:13px;font-weight:550;line-height:1.3}
.suggest-item .s{font-size:11.5px;color:var(--tx-3);margin-top:1px}
.suggest-empty{padding:14px;text-align:center;color:var(--tx-3);font-size:12.5px}

.content{padding:24px;flex:1;max-width:1680px;width:100%}
.content.wide{max-width:none}

.page-head{margin-bottom:20px}
.page-head-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.page-head h1{margin-bottom:3px}
.page-head .lede{color:var(--tx-2);font-size:13.5px;max-width:78ch}
.page-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── karty i sekcje ─────────────────────────────────────────────────── */
.card{background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.card-pad{padding:18px 20px}
.card-head{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--bd-subtle);
}
.card-head h2,.card-head h3{margin:0}
.card-head .sub{font-size:12px;color:var(--tx-3);margin-top:1px}
.card-head-actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-body{padding:18px 20px}
.card-body.tight{padding:12px 16px}
.card-foot{padding:11px 20px;border-top:1px solid var(--bd-subtle);background:var(--bg-sunken);
  border-radius:0 0 var(--r-lg) var(--r-lg);font-size:12px;color:var(--tx-3)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.g-3-2{grid-template-columns:3fr 2fr}
@media(max-width:1400px){.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){
  .g4,.g3,.g-2-1,.g-1-2,.g-3-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* minmax(0,1fr), nie 1fr: `1fr` = minmax(auto,1fr), a min-content długiej linii w `pre`
   rozpychał kolumnę do 1 200 px i cała strona przewijała się poziomo */
@media(max-width:760px){.grid[class*="g"]{grid-template-columns:minmax(0,1fr)}}

/* ── kafle KPI ──────────────────────────────────────────────────────── */
.kpi{
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:15px 17px;position:relative;overflow:hidden;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.kpi:hover{border-color:var(--bd-strong);box-shadow:var(--sh-sm)}
a.kpi:hover{transform:translateY(-1px)}
.kpi-label{font-size:11.5px;font-weight:600;color:var(--tx-3);letter-spacing:.02em;
  display:flex;align-items:center;gap:6px}
.kpi-label svg{width:14px;height:14px;opacity:.7}
.kpi-value{font-size:27px;font-weight:680;letter-spacing:-.028em;line-height:1.1;margin-top:7px;
  font-variant-numeric:tabular-nums}
.kpi-value .unit{font-size:15px;font-weight:550;color:var(--tx-3);letter-spacing:-.01em}
.kpi-sub{font-size:11.5px;color:var(--tx-3);margin-top:5px;display:flex;align-items:center;gap:6px}
.kpi-spark{margin-top:10px;height:34px}
.kpi-bar{margin-top:10px;height:4px;border-radius:var(--r-full);background:var(--bg-sunken);overflow:hidden}
.kpi-bar>i{display:block;height:100%;border-radius:var(--r-full);background:var(--accent);
  transition:width 600ms cubic-bezier(.4,0,.2,1)}
.kpi.accent{background:linear-gradient(160deg,var(--accent-soft),var(--bg-elev) 65%);border-color:var(--accent-bd)}
.kpi.accent .kpi-value{color:var(--accent)}

/* ── odznaki ────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;
  border-radius:var(--r-xs);font-size:11px;font-weight:600;letter-spacing:.005em;
  background:var(--bg-sunken);color:var(--tx-2);border:1px solid var(--bd-subtle);white-space:nowrap;
}
.badge svg{width:11px;height:11px}
.badge.ok{background:var(--ok-50);color:var(--ok-700);border-color:color-mix(in srgb,var(--ok-500) 25%,transparent)}
.badge.warn{background:var(--wn-50);color:var(--wn-700);border-color:color-mix(in srgb,var(--wn-500) 25%,transparent)}
.badge.err{background:var(--er-50);color:var(--er-700);border-color:color-mix(in srgb,var(--er-500) 25%,transparent)}
.badge.info{background:var(--in-50);color:var(--in-600);border-color:color-mix(in srgb,var(--in-500) 25%,transparent)}
.badge.accent{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-bd)}
.badge.lg{height:24px;padding:0 10px;font-size:12px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--r-full);font-size:12px;font-weight:500;
  background:var(--bg-sunken);border:1px solid var(--bd);color:var(--tx-2);
}
.chip.on{background:var(--accent-soft);border-color:var(--accent-bd);color:var(--accent);font-weight:600}
.chip .x{opacity:.55;font-size:14px;line-height:1;margin-left:1px}
.chip .x:hover{opacity:1}

/* ── ocena A–F ──────────────────────────────────────────────────────── */
.grade{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-sm);
  font-weight:700;font-size:13px;letter-spacing:-.02em;flex:none;
}
.grade.sm{width:20px;height:20px;font-size:11px;border-radius:var(--r-xs)}
.grade.lg{width:44px;height:44px;font-size:21px;border-radius:var(--r)}
.grade.xl{width:72px;height:72px;font-size:36px;border-radius:var(--r-lg)}
.grade-A{background:var(--g-a-bg);color:var(--g-a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-a) 28%,transparent)}
.grade-B{background:var(--g-b-bg);color:var(--g-b);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-b) 28%,transparent)}
.grade-C{background:var(--g-c-bg);color:var(--g-c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-c) 28%,transparent)}
.grade-D{background:var(--g-d-bg);color:var(--g-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-d) 28%,transparent)}
.grade-E{background:var(--g-e-bg);color:var(--g-e);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-e) 28%,transparent)}
.grade-F{background:var(--g-f-bg);color:var(--g-f);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--g-f) 28%,transparent)}
.grade-x{background:var(--bg-sunken);color:var(--tx-4);box-shadow:inset 0 0 0 1px var(--bd)}

/* pasek wyniku 0–100 */
.score{display:flex;align-items:center;gap:8px;min-width:110px}
.score-bar{flex:1;height:5px;border-radius:var(--r-full);background:var(--bg-sunken);overflow:hidden;min-width:44px}
.score-bar>i{display:block;height:100%;border-radius:var(--r-full);transition:width 500ms}
.score-val{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.s-a>i{background:var(--g-a)} .s-b>i{background:var(--g-b)} .s-c>i{background:var(--g-c)}
.s-d>i{background:var(--g-d)} .s-e>i{background:var(--g-e)} .s-f>i{background:var(--g-f)}

/* ── tabele ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--bg-elev)}
.tbl-wrap.flush{border:0;border-radius:0}
table.tbl{width:100%;font-size:13px}
table.tbl th{
  text-align:left;font-weight:600;font-size:11px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--tx-3);padding:9px 12px;border-bottom:1px solid var(--bd);
  background:var(--bg-elev);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.tbl.sticky-head th{top:var(--topbar-h)}
table.tbl th a{display:inline-flex;align-items:center;gap:4px;color:inherit}
table.tbl th a:hover{color:var(--accent)}
table.tbl th.sorted{color:var(--accent)}
table.tbl th .arrow{font-size:9px;opacity:.8}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--bd-subtle);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr{transition:background var(--t-fast)}
table.tbl tbody tr:hover{background:var(--bg-hover)}
table.tbl td.r,table.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td.c,table.tbl th.c{text-align:center}
table.tbl td.n{font-variant-numeric:tabular-nums}
table.tbl.zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg-sunken) 45%,transparent)}
table.tbl.zebra tbody tr:hover{background:var(--bg-hover)}
table.tbl.dense td{padding:6px 10px;font-size:12.5px}
table.tbl.dense th{padding:7px 10px}
.row-link{color:var(--tx);font-weight:550}
.row-link:hover{color:var(--accent)}
.cell-main{font-weight:550;line-height:1.35}
.cell-sub{font-size:11.5px;color:var(--tx-3);margin-top:1px}

.empty{padding:56px 24px;text-align:center;color:var(--tx-3)}
.empty svg{width:40px;height:40px;margin:0 auto 12px;opacity:.35}
.empty h3{color:var(--tx-2);margin-bottom:4px}
.empty p{font-size:13px;max-width:44ch;margin:0 auto}

/* ── formularze i filtry ────────────────────────────────────────────── */
.filters{
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:16px;
}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field-label{font-size:11px;font-weight:600;color:var(--tx-3);letter-spacing:.03em;text-transform:uppercase}
.input,.select{
  height:32px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--bg-elev);color:var(--tx);font-size:13px;min-width:120px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.select{padding-right:26px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}
.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.input::placeholder{color:var(--tx-4)}
.input.w-lg{min-width:260px}
.input.w-sm{min-width:80px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--bd);
  background:var(--bg-elev);color:var(--tx);font-size:13px;font-weight:550;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  white-space:nowrap;
}
.btn:hover{background:var(--bg-hover);border-color:var(--bd-strong)}
.btn:active{transform:translateY(.5px)}
.btn svg{width:14px;height:14px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--a-700);border-color:var(--a-700)}
[data-theme="dark"] .btn.primary{color:var(--n-950)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-2)}
.btn.ghost:hover{background:var(--bg-hover);color:var(--tx)}
.btn.sm{height:27px;padding:0 9px;font-size:12px}
.btn.icon{width:32px;padding:0}
.btn.icon.sm{width:27px}
.btn[disabled]{opacity:.45;pointer-events:none}

.btn-group{display:inline-flex;border:1px solid var(--bd);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-elev)}
.btn-group>*{border:0;border-radius:0;border-right:1px solid var(--bd);height:30px}
.btn-group>*:last-child{border-right:0}
.btn-group>.on{background:var(--accent-soft);color:var(--accent);font-weight:600}

.seg{display:inline-flex;background:var(--bg-sunken);border:1px solid var(--bd);
  border-radius:var(--r-sm);padding:2px;gap:2px}
.seg>a,.seg>button,.seg>label{
  padding:0 11px;height:26px;display:inline-flex;align-items:center;gap:5px;
  border-radius:var(--r-xs);font-size:12.5px;font-weight:550;color:var(--tx-2);
  border:0;background:transparent;cursor:pointer;transition:all var(--t-fast);
}
.seg>a:hover,.seg>button:hover,.seg>label:hover{color:var(--tx)}
.seg>.on{background:var(--bg-elev);color:var(--tx);box-shadow:var(--sh-xs);font-weight:600}
.seg>label{user-select:none;white-space:nowrap}
.seg .n{font-size:11px;color:var(--tx-4);font-variant-numeric:tabular-nums}
.seg>.on .n{color:var(--accent)}

.switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:var(--tx-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:30px;height:17px;border-radius:var(--r-full);background:var(--bd-strong);
  position:relative;transition:background var(--t-fast);flex:none}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:transform var(--t-fast);box-shadow:var(--sh-xs)}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(13px)}

/* ── paginacja ──────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 2px;font-size:12.5px;color:var(--tx-2)}
.pager-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.pager-nav a,.pager-nav span{
  min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--bg-elev);
  font-size:12.5px;font-variant-numeric:tabular-nums;transition:all var(--t-fast);
}
.pager-nav a:hover{background:var(--bg-hover);border-color:var(--bd-strong)}
.pager-nav .on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
[data-theme="dark"] .pager-nav .on{color:var(--n-950)}
.pager-nav .off{opacity:.4;pointer-events:none}
.pager-nav .gap{border:0;background:transparent;color:var(--tx-4)}

/* ── wykresy ────────────────────────────────────────────────────────── */
.chart{width:100%;height:280px}
.chart.sm{height:200px}
.chart.xs{height:140px}
.chart.lg{height:380px}
.chart.xl{height:460px}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--tx-2);margin-top:10px}
.chart-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ── zakładki ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--bd);margin-bottom:18px;overflow-x:auto;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:9px 13px;font-size:13.5px;font-weight:550;color:var(--tx-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast);
}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab .n{font-size:11px;color:var(--tx-4);font-variant-numeric:tabular-nums;
  background:var(--bg-sunken);padding:1px 5px;border-radius:var(--r-full)}
.tab.on .n{background:var(--accent-soft);color:var(--accent)}

/* ── lista definicyjna (karta szczegółów) ───────────────────────────── */
.dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0}
.dl>dt{
  padding:8px 14px 8px 0;font-size:12px;color:var(--tx-3);font-weight:500;
  border-bottom:1px solid var(--bd-subtle);
}
.dl>dd{padding:8px 0;font-size:13px;border-bottom:1px solid var(--bd-subtle);min-width:0;word-break:break-word}
.dl>dt:last-of-type,.dl>dd:last-of-type{border-bottom:0}
.dl.cols2{grid-template-columns:minmax(110px,auto) 1fr minmax(110px,auto) 1fr;column-gap:0}
@media(max-width:900px){.dl.cols2{grid-template-columns:minmax(110px,auto) 1fr}}

/* ── inne ───────────────────────────────────────────────────────────── */
.hr{height:1px;background:var(--bd-subtle);margin:18px 0;border:0}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.tight{gap:6px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.push{margin-left:auto}

.note{
  padding:11px 14px;border-radius:var(--r);font-size:12.5px;line-height:1.5;
  background:var(--in-50);border:1px solid color-mix(in srgb,var(--in-500) 22%,transparent);
  color:var(--tx-2);display:flex;gap:9px;align-items:flex-start;
}
.note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--in-600)}
.note.warn{background:var(--wn-50);border-color:color-mix(in srgb,var(--wn-500) 25%,transparent)}
.note.warn svg{color:var(--wn-600)}
.note.err{background:var(--er-50);border-color:color-mix(in srgb,var(--er-500) 25%,transparent)}
.note.err svg{color:var(--er-600)}
.note.ok{background:var(--ok-50);border-color:color-mix(in srgb,var(--ok-500) 25%,transparent)}
.note.ok svg{color:var(--ok-600)}
.note strong{color:var(--tx);font-weight:600}

.code{
  font-family:var(--f-mono);font-size:12px;background:var(--bg-sunken);
  border:1px solid var(--bd);border-radius:var(--r-sm);padding:10px 12px;
  overflow-x:auto;white-space:pre;color:var(--tx-2);line-height:1.5;
}
code:not(.code){font-family:var(--f-mono);font-size:.9em;background:var(--bg-sunken);
  padding:1px 5px;border-radius:var(--r-xs);border:1px solid var(--bd-subtle)}

.bar-mini{height:6px;border-radius:var(--r-full);background:var(--bg-sunken);overflow:hidden;min-width:52px}
.bar-mini>i{display:block;height:100%;background:var(--accent);border-radius:var(--r-full)}

.tip{position:relative;cursor:help;border-bottom:1px dotted var(--tx-4)}
.tip::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--n-900);color:#fff;padding:6px 9px;border-radius:var(--r-sm);font-size:11.5px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t-fast);z-index:70;
  font-weight:450;box-shadow:var(--sh);max-width:320px;white-space:normal;width:max-content;
}
.tip:hover::after{opacity:1}
[data-theme="dark"] .tip::after{background:var(--n-800);border:1px solid var(--bd)}

.skel{background:linear-gradient(90deg,var(--bg-sunken) 25%,var(--bg-hover) 50%,var(--bg-sunken) 75%);
  background-size:200% 100%;animation:shim 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shim{to{background-position:-200% 0}}

.shot{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--bg-sunken)}
.shot img{width:100%;height:auto;display:block}
.shot-cap{padding:7px 10px;font-size:11.5px;color:var(--tx-3);border-top:1px solid var(--bd-subtle)}

/* mapa kraju (SVG kartogram) */
.map-pl{width:100%;height:auto}
.map-pl path{stroke:var(--bg-elev);stroke-width:1.2;transition:opacity var(--t-fast),filter var(--t-fast);cursor:pointer}
.map-pl path:hover{opacity:.82;filter:brightness(1.06)}
.map-scale{display:flex;align-items:center;gap:2px;margin-top:10px;font-size:11px;color:var(--tx-3)}
.map-scale i{width:26px;height:9px;display:block}
.map-scale i:first-of-type{border-radius:2px 0 0 2px}
.map-scale i:last-of-type{border-radius:0 2px 2px 0}

/* ── karta badań ── */
/* Filtrowanie po stronie klienta chowa elementy atrybutem `hidden`. Domyślne
   `display:none` z arkusza przeglądarki przegrywa specyficznością z `.btn`
   i `.rule`, więc przycisk „wyczyść" zostawał widoczny mimo ukrycia. */
[hidden]{display:none!important}

/* Ikona w nagłówku karty stawała w osobnym wierszu — reset ustawia wszystkim
   `svg` `display:block`, a nagłówek nie był kontenerem elastycznym. */
.card-head h2,.card-head h3{display:flex;align-items:center;gap:8px;min-width:0}
.card-head h2>svg,.card-head h3>svg{flex:none;opacity:.7}

/* Zakładki „Pomiary" i „Naruszenia" na karcie podmiotu. Wszystko poniżej opiera
   się na tych samych tokenach co reszta aplikacji — te klasy dokładają wyłącznie
   układ, którego nie da się złożyć z .card/.tbl/.kpi (oś czasu, łańcuch
   przekierowań, karta reguły, fragment kodu z kolorowaniem). */

/* pasek filtrów naruszeń — zostaje w zasięgu wzroku przy długiej liście */
.aud-bar{
  position:sticky;top:var(--topbar-h);z-index:12;
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:11px 14px;margin-bottom:14px;box-shadow:var(--sh-xs);
}
.aud-bar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.aud-bar .field{gap:4px}
.aud-bar .field-label{font-size:10px}
.aud-bar .select,.aud-bar .input{height:29px;font-size:12.5px}
.aud-bar-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--bd-subtle);
  font-size:12px;color:var(--tx-3);
}
.aud-count strong{color:var(--tx);font-variant-numeric:tabular-nums}

/* przełącznik widoku + sekcje pomocnicze */
.aud-views>[data-aud-view]{display:none}
.aud-views>[data-aud-view].on{display:block}
.aud-sec{
  border:1px solid var(--bd);border-radius:var(--r-lg);background:var(--bg-elev);
  margin-top:14px;overflow:hidden;
}
.aud-sec>summary{
  list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;color:var(--tx-2);user-select:none;
}
.aud-sec>summary::-webkit-details-marker{display:none}
.aud-sec>summary:hover{background:var(--bg-hover)}
.aud-sec>summary .chev{transition:transform var(--t-fast);color:var(--tx-4);flex:none}
.aud-sec[open]>summary{border-bottom:1px solid var(--bd-subtle)}
.aud-sec[open]>summary .chev{transform:rotate(90deg)}
.aud-sec>summary .n{
  margin-left:auto;font-size:11.5px;font-weight:600;color:var(--tx-3);
  background:var(--bg-sunken);padding:2px 8px;border-radius:var(--r-full);
  font-variant-numeric:tabular-nums;
}
.aud-sec-body{padding:14px 16px}
/* tabela w sekcji zwijanej ma własny suwak — `overflow:hidden` sekcji obcinałby
   kolumny na wąskim ekranie zamiast pozwolić je przewinąć */
.aud-sec-body.flush{padding:0;overflow-x:auto}

/* grupowanie po zasadach i wytycznych WCAG */
.pr-group{margin-top:18px}
.pr-group:first-child{margin-top:0}
.pr-head{
  display:flex;align-items:baseline;gap:9px;padding:0 0 8px;
  border-bottom:2px solid var(--accent-bd);margin-bottom:12px;
}
.pr-head .num{
  font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);
  border-radius:var(--r-xs);padding:2px 7px;font-variant-numeric:tabular-nums;
}
.pr-head h3{font-size:15px;letter-spacing:-.015em}
.pr-head .n{margin-left:auto;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}

.gl-group{margin:0 0 14px;padding-left:13px;border-left:2px solid var(--bd)}
.gl-head{font-size:11.5px;font-weight:600;color:var(--tx-3);letter-spacing:.03em;margin-bottom:8px}
.gl-head .mono{color:var(--tx-2)}

.crit{
  border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);
  margin-bottom:10px;overflow:hidden;
}
.crit-head{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 13px;background:var(--bg-sunken);border-bottom:1px solid var(--bd-subtle);
}
.crit-head .sc{
  font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--tx);
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-xs);padding:1px 6px;
}
.crit-head .t{font-size:13px;font-weight:600;min-width:0}
.crit-head .push-n{margin-left:auto;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.crit-body{padding:10px 13px;display:flex;flex-direction:column;gap:9px}

/* karta reguły */
.rule{border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);overflow:hidden}
.rule.consensus{border-color:color-mix(in srgb,var(--accent) 42%,var(--bd))}
.rule-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;border-bottom:1px solid var(--bd-subtle);background:var(--bg-sunken);
}
.rule-body{padding:11px 12px;display:flex;flex-direction:column;gap:8px}
.eng{
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 6px;border-radius:var(--r-xs);flex:none;
  border:1px solid transparent;
}
.eng-axe{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-bd)}
.eng-ibm{background:color-mix(in srgb,var(--c2) 14%,transparent);color:var(--c2);
  border-color:color-mix(in srgb,var(--c2) 32%,transparent)}
.eng-static{background:var(--bg-hover);color:var(--tx-3);border-color:var(--bd)}
.rule-id{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--tx);word-break:break-all}
.rule-nodes{margin-left:auto;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rule-desc{font-size:13px;line-height:1.5}
.rule-help{font-size:12px;color:var(--tx-3);line-height:1.45}
.rule-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rule-docs{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;padding-top:2px}
.rule-docs a{color:var(--tx-3);display:inline-flex;align-items:center;gap:4px}
.rule-docs a:hover{color:var(--accent)}
.rule-docs svg{width:11px;height:11px}

.chip.xs{height:19px;padding:0 7px;font-size:10.5px;letter-spacing:.01em}
.chip.lvl{background:var(--bg-sunken);color:var(--tx-2)}
.chip.crit-ref{background:var(--in-50);border-color:color-mix(in srgb,var(--in-500) 26%,transparent);color:var(--in-600)}

/* fragmenty kodu z selektorem */
.snips{border:1px solid var(--bd-subtle);border-radius:var(--r-sm);background:var(--bg-sunken)}
.snips>summary{
  list-style:none;cursor:pointer;padding:6px 10px;font-size:11.5px;font-weight:600;
  color:var(--tx-3);display:flex;align-items:center;gap:7px;user-select:none;
}
.snips>summary::-webkit-details-marker{display:none}
.snips>summary:hover{color:var(--tx-2)}
.snips>summary .chev{transition:transform var(--t-fast);flex:none}
.snips[open]>summary .chev{transform:rotate(90deg)}
.snips-body{padding:0 10px 10px;display:flex;flex-direction:column;gap:8px}
.snip{border:1px solid var(--bd);border-radius:var(--r-xs);background:var(--bg-elev);overflow:hidden}
.snip-head{
  display:flex;align-items:center;gap:8px;padding:5px 8px;
  border-bottom:1px solid var(--bd-subtle);background:var(--bg-elev);
}
.snip-sel{
  font-family:var(--f-mono);font-size:11px;color:var(--tx-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;
}
.snip-copy{
  flex:none;border:0;background:transparent;color:var(--tx-4);cursor:pointer;padding:2px;
  border-radius:var(--r-xs);display:inline-flex;line-height:0;
}
.snip-copy:hover{color:var(--accent);background:var(--bg-hover)}
.snip-copy.copied{color:var(--ok-600)}
.snip-code{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.55;padding:7px 9px;
  overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:var(--tx-2);
  max-height:180px;overflow-y:auto;
}
.tok-tag{color:var(--c6)}
.tok-attr{color:var(--c2)}
.tok-val{color:var(--c3)}
.tok-punc{color:var(--tx-4)}
.tok-com{color:var(--tx-4);font-style:italic}
[data-theme="dark"] .tok-val{color:var(--g-b)}

/* wskaźniki Web Vitals */
.vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.vital{border:1px solid var(--bd);border-radius:var(--r);padding:12px 13px;background:var(--bg-elev)}
.vital-top{display:flex;align-items:baseline;gap:7px}
.vital-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--tx-3)}
.vital-dot{width:7px;height:7px;border-radius:50%;flex:none}
.vital-val{font-size:25px;font-weight:680;letter-spacing:-.03em;margin:5px 0 2px;font-variant-numeric:tabular-nums}
.vital-val .u{font-size:13px;font-weight:550;color:var(--tx-3);margin-left:2px}
.vital-name{font-size:11px;color:var(--tx-4);line-height:1.35}
.vital-scale{display:flex;height:4px;border-radius:var(--r-full);overflow:hidden;margin-top:9px;gap:1px}
.vital-scale i{display:block;height:100%;opacity:.28}
.vital-scale i.on{opacity:1}
.v-good{background:var(--g-a)} .v-ni{background:var(--g-c)} .v-poor{background:var(--g-e)}
.vital.is-good{border-color:color-mix(in srgb,var(--g-a) 34%,var(--bd))}
.vital.is-ni{border-color:color-mix(in srgb,var(--g-c) 34%,var(--bd))}
.vital.is-poor{border-color:color-mix(in srgb,var(--g-e) 34%,var(--bd))}
.vital.is-good .vital-val{color:var(--g-a)}
.vital.is-ni .vital-val{color:var(--g-c)}
.vital.is-poor .vital-val{color:var(--g-e)}
.vital-thr{font-size:10.5px;color:var(--tx-4);margin-top:6px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.vitals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* oś czasu wczytywania */
.tl{margin-top:6px}
.tl-track{position:relative;height:34px;margin:16px 0 4px}
.tl-track::before{
  content:'';position:absolute;left:0;right:0;top:9px;height:5px;
  background:var(--bg-sunken);border-radius:var(--r-full);
}
.tl-fill{position:absolute;left:0;top:9px;height:5px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--c2),var(--accent))}
.tl-mark{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
/* skrajne znaczniki muszą zmieścić etykietę wewnątrz osi, a nie poza kartą */
.tl-mark.at-start{transform:none;text-align:left}
.tl-mark.at-start i{margin:0}
.tl-mark.at-end{transform:translateX(-100%);text-align:right}
.tl-mark.at-end i{margin:0 0 0 auto}
.tl-mark i{display:block;width:2px;height:23px;background:var(--tx-4);margin:0 auto;border-radius:1px}
.tl-mark b{display:block;font-size:10.5px;font-weight:600;color:var(--tx-2);font-variant-numeric:tabular-nums}
.tl-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--tx-3);margin-top:10px}
.tl-legend span{display:inline-flex;align-items:center;gap:5px}

/* łańcuch przekierowań */
.chain{display:flex;flex-direction:column;gap:0}
.chain-step{display:flex;gap:10px;align-items:flex-start;position:relative;padding-bottom:12px}
.chain-step:last-child{padding-bottom:0}
.chain-step::before{
  content:'';position:absolute;left:7px;top:17px;bottom:0;width:1px;background:var(--bd);
}
.chain-step:last-child::before{display:none}
.chain-dot{
  width:15px;height:15px;border-radius:50%;flex:none;margin-top:2px;
  border:2px solid var(--bd-strong);background:var(--bg-elev);z-index:1;
}
.chain-step:last-child .chain-dot{border-color:var(--g-a);background:var(--g-a-bg)}
.chain-step:first-child .chain-dot{border-color:var(--accent)}
.chain-url{font-family:var(--f-mono);font-size:11.5px;word-break:break-all;line-height:1.45}
.chain-tag{font-size:10.5px;color:var(--tx-4);margin-top:1px}

/* tabela nagłówków bezpieczeństwa */
.hdr-name{font-family:var(--f-mono);font-size:11.5px;font-weight:600}
.hdr-val{font-family:var(--f-mono);font-size:11px;color:var(--tx-3);word-break:break-all;
  display:block;max-width:38ch}
.pt{font-variant-numeric:tabular-nums;font-size:11.5px}
.pt b{font-weight:650}

/* siatka sprawdzeń pass/fail (deklaracja, zestaw własny) */
.checks{display:flex;flex-direction:column;gap:1px}
.check{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--bd-subtle)}
.check:last-child{border-bottom:0}
.check-ico{flex:none;margin-top:1px;line-height:0}
.check-ico.y{color:var(--g-a)} .check-ico.n{color:var(--g-e)} .check-ico.o{color:var(--tx-4)}
.check-t{font-size:12.5px;line-height:1.4;min-width:0}
.check-s{font-size:11px;color:var(--tx-4);margin-top:1px;word-break:break-word}

/* ── Core Web Vitals (dane terenowe CrUX) ──────────────────────────────
   Historia 40 tygodni to setki wąskich słupków barwionych progiem — wykres
   ECharts musiałby dostać kolor na punkt, czego wspólny `charts.js` nie umie,
   a osobna instancja na metrykę × urządzenie oznaczałaby dwadzieścia wykresów
   na jednej karcie. Zwykłe elementy dają ten sam obraz bez ani jednego JS-a. */
.crux-meta{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;
  font-size:11.5px;color:var(--tx-3);align-items:center;
}
.crux-meta span{display:inline-flex;align-items:center;gap:5px}
.crux-meta strong{color:var(--tx-2);font-variant-numeric:tabular-nums}
.crux-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.crux-hint{flex:1 1 240px;min-width:0;line-height:1.4}
.seg.sm>button{height:24px;padding:0 9px;font-size:11.5px}

/* ocena „zdaje / nie zdaje" */
.cwv-verdict{
  display:flex;gap:11px;align-items:flex-start;padding:11px 13px;margin-bottom:14px;
  border:1px solid var(--bd);border-left-width:3px;border-radius:var(--r);background:var(--bg-elev);
}
.cwv-verdict-ico{flex:none;line-height:0;margin-top:1px}
.cwv-verdict-t{font-size:14px;font-weight:650;letter-spacing:-.012em}
.cwv-verdict-s{font-size:11.5px;color:var(--tx-3);line-height:1.45;margin-top:2px}
.cwv-verdict.is-pass{border-left-color:var(--g-a);background:var(--g-a-bg)}
.cwv-verdict.is-pass .cwv-verdict-ico,.cwv-verdict.is-pass .cwv-verdict-t{color:var(--g-a)}
.cwv-verdict.is-fail{border-left-color:var(--g-e);background:var(--g-e-bg)}
.cwv-verdict.is-fail .cwv-verdict-ico,.cwv-verdict.is-fail .cwv-verdict-t{color:var(--g-e)}
.cwv-verdict.is-na{border-left-color:var(--bd-strong)}
.cwv-verdict.is-na .cwv-verdict-ico{color:var(--tx-4)}

/* karty metryk z paskiem historii */
.cwv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:6px}
.cwv-card{border:1px solid var(--bd);border-radius:var(--r);padding:12px 13px 10px;background:var(--bg-elev)}
.cwv-card.is-good{border-color:color-mix(in srgb,var(--g-a) 34%,var(--bd))}
.cwv-card.is-ni{border-color:color-mix(in srgb,var(--g-c) 34%,var(--bd))}
.cwv-card.is-poor{border-color:color-mix(in srgb,var(--g-e) 34%,var(--bd))}
.cwv-card-top{display:flex;align-items:center;gap:8px}
.cwv-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--tx-3)}
.cwv-badge{
  margin-left:auto;font-size:10px;font-weight:650;letter-spacing:.02em;padding:1px 7px;
  border-radius:var(--r-full);border:1px solid transparent;white-space:nowrap;
}
.cwv-badge.b-good{background:var(--g-a-bg);color:var(--g-a);border-color:color-mix(in srgb,var(--g-a) 30%,transparent)}
.cwv-badge.b-ni{background:var(--g-c-bg);color:var(--g-c);border-color:color-mix(in srgb,var(--g-c) 30%,transparent)}
.cwv-badge.b-poor{background:var(--g-e-bg);color:var(--g-e);border-color:color-mix(in srgb,var(--g-e) 30%,transparent)}
.cwv-val{font-size:25px;font-weight:680;letter-spacing:-.03em;margin:5px 0 1px;font-variant-numeric:tabular-nums}
.cwv-val .u{font-size:13px;font-weight:550;color:var(--tx-3);margin-left:2px}
.cwv-card.is-good .cwv-val{color:var(--g-a)}
.cwv-card.is-ni .cwv-val{color:var(--g-c)}
.cwv-card.is-poor .cwv-val{color:var(--g-e)}
.cwv-thr{font-size:10.5px;color:var(--tx-4);font-variant-numeric:tabular-nums}
.cwv-name{font-size:11px;color:var(--tx-4);line-height:1.35;margin-top:7px}
.cwv-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.cwv-dot.d-good{background:var(--g-a)} .cwv-dot.d-ni{background:var(--g-c)}
.cwv-dot.d-poor{background:var(--g-e)} .cwv-dot.d-na{background:var(--tx-4)}

/* pasek trzech pasm rozkładu (bieżący okres) i wspólne segmenty barwne */
.cwv-stack{display:flex;height:8px;border-radius:var(--r-full);overflow:hidden;gap:1px;margin:8px 0 6px}
.cwv-stack.tall{height:13px;margin-top:0}
.cwv-stack i{display:block;height:100%;min-width:2px}
.cwv-stack-lg{display:flex;gap:12px;font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.cwv-stack-lg.wrap{flex-wrap:wrap;gap:8px 14px}
.cwv-stack-lg span{display:inline-flex;align-items:center;gap:5px}
.cwv-stack-lg i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.h-good{background:var(--g-a)} .h-ni{background:var(--g-c)}
.h-poor{background:var(--g-e)} .h-na{background:var(--bd-strong)}
.cseg.c1{background:var(--c1)} .cseg.c2{background:var(--c2)} .cseg.c3{background:var(--c3)}
.cseg.c4{background:var(--c4)} .cseg.c5{background:var(--c5)} .cseg.c6{background:var(--c6)}
.cseg.c7{background:var(--c7)} .cseg.c8{background:var(--c8)}

/* 40 tygodni historii — jeden słupek na okres 28-dniowy */
.cwv-spark{display:flex;align-items:flex-end;gap:1px;height:38px;margin-top:9px}
.cwv-spark>i{flex:1 1 0;min-width:0;border-radius:1px 1px 0 0;opacity:.88}
.cwv-spark>i:hover{opacity:1}
.cwv-spark>b{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.cwv-spark>b>i{display:block;width:100%;border-radius:0}
.cwv-spark>b>i:first-child{border-radius:1px 1px 0 0}
.cwv-range{display:flex;justify-content:space-between;font-size:9.5px;color:var(--tx-4);margin-top:3px}
.cwv-axis-note{margin-top:12px;line-height:1.5}

/* przełącznik 75. percentyl / histogram — bez przeładowania strony */
[data-crux-panel] .cwv-hist{display:none}
[data-crux-panel].show-hist .cwv-p75{display:none}
[data-crux-panel].show-hist .cwv-hist{display:block}
[data-crux-panel].show-hist .cwv-spark.cwv-hist{display:flex}
/* w akapicie objaśniającym oba warianty są zdaniami, nie blokami */
[data-crux-panel] .cwv-axis-note .cwv-hist{display:none}
[data-crux-panel].show-hist .cwv-axis-note .cwv-p75{display:none}
[data-crux-panel].show-hist .cwv-axis-note .cwv-hist{display:inline}

@media(max-width:1100px){.cwv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cwv-grid{grid-template-columns:minmax(0,1fr)}}

/* ── Lighthouse (test laboratoryjny) ──────────────────────────────────── */
.lh-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center}
.lh-gauge svg{display:inline-block}
.lh-gauge-lbl{font-size:11.5px;color:var(--tx-2);margin-top:2px;font-weight:550}
.lh-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

.lh-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.lh-metrics.lg{grid-template-columns:repeat(3,minmax(0,1fr))}
.lh-metric{border:1px solid var(--bd);border-radius:var(--r);padding:10px 12px;background:var(--bg-elev)}
.lh-metric-top{display:flex;align-items:center;gap:7px}
.lh-metric-val{font-size:19px;font-weight:660;letter-spacing:-.025em;margin:4px 0 1px;font-variant-numeric:tabular-nums}
.lh-metrics.lg .lh-metric-val{font-size:25px}
.lh-metric.is-good .lh-metric-val{color:var(--g-a)}
.lh-metric.is-ni .lh-metric-val{color:var(--g-c)}
.lh-metric.is-poor .lh-metric-val{color:var(--g-e)}

/* oś renderowania: miniatury z raportu (base64) i znaczniki FCP/LCP.
   Rozmiarem klatki steruje WYSOKOŚĆ (`--film-h`), bo profil telefonu daje
   klatki pionowe — przy sterowaniu szerokością wiersz rósłby na telefonie
   dwa razy wyżej niż na komputerze. Szerokość wynika z proporcji obrazu. */
.film-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.film-head .switch{margin-left:auto;font-size:11.5px}
.film-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.film-zoom{display:inline-flex;align-items:center;gap:8px;font-size:11.5px}
.film-zoom input[type=range]{width:150px;max-width:38vw;accent-color:var(--accent);cursor:pointer}
.lh-film{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;--film-h:104px}
.lh-film figure{flex:0 0 auto;text-align:center;cursor:zoom-in;border-radius:var(--r-xs)}
.lh-film figure:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lh-film img{
  display:block;width:auto;max-width:none;height:var(--film-h);border:1px solid var(--bd);
  border-radius:var(--r-xs);background:var(--bg-sunken);
}
.lh-film figcaption{font-size:10px;color:var(--tx-4);margin-top:3px;font-variant-numeric:tabular-nums}

/* pływający podgląd „po najechaniu" — nigdy nie wychodzi poza okno */
.film-peek-box{
  position:fixed;z-index:60;pointer-events:none;background:var(--bg-elev);
  border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh-lg,0 18px 40px -12px rgba(15,23,42,.3));
  padding:6px;max-width:min(46vw,420px);
}
.film-peek-box img{display:block;max-width:100%;max-height:60vh;border-radius:var(--r-xs)}
.film-peek-box span{
  display:block;text-align:center;font-size:10.5px;color:var(--tx-3);margin-top:4px;
  font-variant-numeric:tabular-nums;
}

/* okno modalne z dużą klatką.
   `margin:auto` musi tu być jawnie: globalny reset `*{margin:0}` kasuje
   marginesy z arkusza przeglądarki, a to one wyśrodkowują `<dialog>`. */
.film-modal{
  position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;
  border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible;
  color:var(--tx);
}
.film-modal::backdrop{background:rgba(2,6,23,.72)}
.film-modal img{
  display:block;max-width:min(96vw,1100px);max-height:80vh;width:auto;height:auto;margin:0 auto;
  border-radius:var(--r);background:var(--bg-sunken);box-shadow:0 24px 60px -18px rgba(2,6,23,.6);
}
/* Podpis ma własne ciemne tło, a nie tylko kolor liter: gdyby przeglądarka
   nie narysowała `::backdrop` (albo gdyby zrzut ekranu go pominął), jasny
   tekst na jasnej stronie byłby nieczytelny. */
.film-cap{
  margin:10px auto 0;width:fit-content;max-width:96vw;padding:5px 14px;
  background:rgba(2,6,23,.78);border-radius:var(--r-full);
  text-align:center;font-size:12.5px;color:#e2e8f0;
  display:flex;gap:8px;justify-content:center;align-items:baseline;flex-wrap:wrap;
}
.film-cap strong{font-weight:600;font-variant-numeric:tabular-nums}
.film-cap span{color:#94a3b8}
.film-cap em{font-style:normal;color:#94a3b8;font-size:11.5px}
.film-x,.film-nav{
  position:absolute;border:1px solid rgba(255,255,255,.25);background:rgba(15,23,42,.66);
  color:#f8fafc;border-radius:var(--r-full);cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.film-x{top:-14px;right:-14px;width:32px;height:32px;font-size:20px}
.film-nav{top:calc(40% - 20px);width:40px;height:40px;font-size:26px}
.film-nav.prev{left:-18px}
.film-nav.next{right:-18px}
.film-x:hover,.film-nav:hover{background:rgba(15,23,42,.9)}
.film-x:focus-visible,.film-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:620px){
  .film-nav.prev{left:2px} .film-nav.next{right:2px}
  .film-x{top:-10px;right:0}
  .film-peek-box{max-width:76vw}
}
.lh-marks{margin-top:8px}
.lh-marks-track{position:relative;height:26px}
.lh-marks-track::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--bg-sunken);border-radius:var(--r-full);
}
.lh-mark{position:absolute;bottom:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.lh-mark b{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em}
.lh-mark i{display:block;width:2px;height:12px;margin:1px auto 0;border-radius:1px}
.lh-mark.c2 b{color:var(--c2)} .lh-mark.c2 i{background:var(--c2)}
.lh-mark.c5 b{color:var(--c5)} .lh-mark.c5 i{background:var(--c5)}
.lh-key{width:8px;height:8px;border-radius:2px;display:inline-block}
.lh-key.c2{background:var(--c2)} .lh-key.c5{background:var(--c5)}

/* oś długich zadań — jedna ścieżka na zadanie, filtr first/third-party */
.lh-tasks{display:flex;flex-direction:column;gap:3px}
.lh-lane{display:flex;align-items:center;gap:9px;font-size:11.5px}
.lh-lane-src{flex:0 0 170px;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.lh-lane-track{position:relative;flex:1;height:13px;background:var(--bg-sunken);border-radius:var(--r-xs)}
.lh-lane-track i{position:absolute;top:0;height:100%;border-radius:var(--r-xs);min-width:2px}
.lh-lane-track i.is-first{background:var(--c1)}
.lh-lane-track i.is-third{background:var(--c4)}
.lh-lane-ms{flex:0 0 72px;text-align:right;color:var(--tx-2)}
.lh-scale{display:flex;justify-content:space-between;margin:5px 0 0 179px;font-variant-numeric:tabular-nums}

/* listy audytów (możliwości, diagnostyka, nieudane) */
.lh-list{display:flex;flex-direction:column;gap:1px}
.lh-list.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 18px}
.lh-item{
  display:flex;align-items:center;gap:9px;padding:7px 0;
  border-bottom:1px solid var(--bd-subtle);min-width:0;
}
.lh-item:last-child{border-bottom:0}
.lh-item-b{min-width:0;flex:1}
.lh-item-t{font-size:12.5px;line-height:1.35}
.lh-item-s{color:var(--tx-4)}
.lh-item-v{flex:none;font-size:11.5px;color:var(--tx-2);white-space:nowrap}
.lh-item-doc{flex:none;color:var(--tx-4);line-height:0;padding:2px}
.lh-item-doc:hover{color:var(--accent)}

@media(max-width:900px){
  .lh-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lh-metrics,.lh-metrics.lg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lh-list.two{grid-template-columns:minmax(0,1fr)}
  .lh-lane-src{flex-basis:104px}
  .lh-scale{margin-left:113px}
}
@media(max-width:620px){
  .lh-metrics,.lh-metrics.lg{grid-template-columns:minmax(0,1fr)}
  .crux-tools .seg{max-width:100%;overflow-x:auto}
  .crux-tools .seg>button{white-space:nowrap}
  .lh-lane-src{display:none}
  .lh-scale{margin-left:0}
}

/* nota o źródle bloku, gdy pochodzi z innego badania niż reszta karty */
.src-tag{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--tx-4);
  background:var(--bg-sunken);border:1px solid var(--bd-subtle);border-radius:var(--r-full);
  padding:2px 8px;white-space:nowrap;
}
.src-tag svg{width:10px;height:10px}
.card-head .src-tag{margin-left:auto}

@media(max-width:980px){
  .aud-bar{position:static}
  .pr-head .n{margin-left:0}
  /* przełącznik widoku nie mieści się obok licznika — schodzi do własnego wiersza
     i dostaje własny suwak zamiast wypychać kartę poza ekran */
  .aud-bar-foot .seg{margin-left:0;max-width:100%;overflow-x:auto}
  .aud-bar-foot .seg>button{white-space:nowrap}
}
@media(max-width:760px){
  .aud-bar .field{flex:1 1 100%}
  .rule-nodes{margin-left:0;width:100%}
  .crit-head .push-n{margin-left:0;width:100%}
}

@media print{
  .sidebar,.topbar,.page-actions,.filters,.pager,.aud-bar{display:none!important}
  .shell{display:block}
  .content{padding:0;max-width:none}
  .card{border-color:#ddd;box-shadow:none;break-inside:avoid}
  .aud-sec,.rule,.crit{break-inside:avoid}
  .aud-views>[data-aud-view]{display:none}
  .aud-views>[data-aud-view].on{display:block}
}
.lh-item-why{font-size:11.5px;color:var(--tx-3);margin-top:2px;line-height:1.35}

/* ── układ na wąskich ekranach ──────────────────────────────────────────
   Do tej pory siatka .shell miała na stałe 248 px paska bocznego, więc na
   telefonie treść dostawała 170 px i strona przewijała się poziomo. Poniżej
   760 px pasek staje się poziomym, przewijanym paskiem nad treścią — nawigacja
   zostaje dostępna bez JavaScriptu, a treść dostaje całą szerokość. */
@media (max-width:760px){
  /* minmax(0,…) i min-width:0 są konieczne: element siatki ma domyślnie
     min-width:auto, więc poziomy pasek nawigacji rozpychał całą kolumnę
     do szerokości wszystkich pozycji (2 358 px) zamiast się przewijać. */
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;height:auto;overflow:hidden;border-right:0;
    border-bottom:1px solid var(--bd);min-width:0;max-width:100vw}
  .sidebar .brand{padding:10px 14px}
  .sidebar-foot{display:none}
  .nav{padding:0 10px 8px;display:flex;gap:2px;overflow-x:auto;min-width:0;max-width:100vw;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .nav-group{margin-top:0;display:flex;gap:2px;flex:none}
  .nav-title{display:none}
  .nav-item{white-space:nowrap;padding:6px 10px}
  .nav-item.on::before{display:none}
  .nav-badge{display:none}
  .topbar{padding-left:12px;padding-right:12px}
  .content{padding:12px}
  .page-head-row{flex-direction:column;align-items:flex-start;gap:10px}
  .page-actions{flex-wrap:wrap}
}

/* ── Pomiary: porady (advice) ── */
/* Zakładka „Pomiary" czyta się gorzej niż reszta aplikacji: to gęste tabele
   liczb i nazw technicznych, oglądane przez osobę, która szuka konkretnego
   wiersza. Dlatego w obrębie `.meas` (i tylko tam) typografia idzie o ok. 1 px
   w górę, a komórki dostają 2 px oddechu. Reguły są celowo zawężone do `.meas`,
   żeby nie ruszyć zakładki Naruszenia, Lighthouse ani list w innych widokach. */
.meas{font-size:13px}
.meas .small{font-size:13px}
.meas .tiny{font-size:12px}
.meas .eyebrow{font-size:11.5px}
.meas .cell-sub{font-size:12.5px}
.meas .card-head h3{font-size:15.5px}
.meas .note{font-size:13.5px;line-height:1.55}
.meas .chip{font-size:12.5px;height:27px}
.meas .chip.xs{height:20px;padding:0 8px;font-size:11.5px}

.meas table.tbl{font-size:14px}
.meas table.tbl th{font-size:11.5px;padding:11px 12px}
.meas table.tbl.dense th{font-size:11.5px;padding:9px 12px}
.meas table.tbl.dense td{font-size:13.5px;padding:8px 12px}
.meas .hdr-name{font-size:12.5px}
.meas .hdr-val{font-size:12px;max-width:42ch}
.meas .pt{font-size:12.5px}

.meas .dl>dt{font-size:13px;padding:10px 16px 10px 0}
.meas .dl>dd{font-size:14px;padding:10px 0}

.meas .check-t{font-size:13.5px}
.meas .check-s{font-size:12px}
.meas .checks{gap:2px}
.meas .vital-name{font-size:11.5px}
.meas .tl-legend{font-size:12px}

/* ── akordeon porad ─────────────────────────────────────────────────────
   Kolejny `details` w karcie, ale wizualnie odróżniony od `.snips`
   z zakładki Naruszenia: tam blok pokazuje dowód (fragment kodu ze strony),
   tu — instrukcję. Stąd akcentowana ramka i pasek nagłówka. */
.meas .advice,
.meas .advice-none{margin-top:16px}
.advice{
  border:1px solid var(--accent-bd,var(--bd));border-radius:var(--r);
  background:var(--bg-sunken);overflow:hidden;
}
.advice>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  font-size:13px;font-weight:600;color:var(--accent);
  background:var(--accent-soft);
}
.advice>summary::-webkit-details-marker{display:none}
.advice>summary:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.advice>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.advice>summary .chev{flex:none;transition:transform var(--t-fast)}
.advice[open]>summary .chev{transform:rotate(90deg)}
.advice>summary>svg{flex:none}
/* etykieta zwęża się i łamie w sobie, zamiast spychać ikony do osobnego wiersza */
.advice-lbl{flex:1 1 auto;min-width:0}
.advice>summary .n{
  margin-left:auto;font-size:11.5px;font-weight:600;
  background:var(--bg-elev);color:var(--tx-3);border:1px solid var(--bd);
  padding:2px 9px;border-radius:var(--r-full);white-space:nowrap;
}
.advice-body{padding:4px 14px 14px;display:flex;flex-direction:column;gap:4px}

.advice-none{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--tx-4);
}
.advice-none svg{flex:none;color:var(--ok-600)}

.adv{padding:14px 0;border-top:1px solid var(--bd-subtle)}
.adv:first-child{border-top:0}
.adv-t{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--tx);margin-bottom:5px}
.adv-why{font-size:13px;line-height:1.6;color:var(--tx-2);margin-bottom:10px}
.adv-h{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-4);margin:12px 0 6px;
}
.adv-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.adv-steps>li{font-size:13px;line-height:1.55;color:var(--tx-2)}
.adv-steps>li::marker{color:var(--tx-4);font-variant-numeric:tabular-nums}
.adv code,.advice code{
  font-family:var(--f-mono);font-size:.88em;background:var(--bg-elev);
  border:1px solid var(--bd-subtle);border-radius:var(--r-xs);padding:1px 5px;
  color:var(--tx);word-break:break-word;
}

.adv-snips{display:flex;flex-direction:column;gap:9px}
.adv-snip{border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--bg-elev);overflow:hidden}
.adv-snip-head{
  display:flex;align-items:center;gap:9px;padding:6px 9px;
  border-bottom:1px solid var(--bd-subtle);background:var(--bg-sunken);
}
.adv-lang{
  flex:none;font-family:var(--f-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-xs);padding:1px 6px;
}
.adv-snip-lbl{
  font-size:11.5px;color:var(--tx-2);font-weight:500;
  min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* `pre` przewija się we własnej ramce — inaczej długa linia CSP rozpychałaby
   kartę i całą stronę w poziomie (widoczne dopiero przy 375 px). */
.adv-snip>pre.code{
  border:0;border-radius:0;margin:0;background:transparent;
  font-size:11.5px;line-height:1.6;max-height:340px;overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.adv-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.adv-links a{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--tx-3);
}
.adv-links a:hover{color:var(--accent)}
.adv-links svg{flex:none;width:11px;height:11px}

[data-theme="dark"] .advice{border-color:color-mix(in srgb,var(--accent) 34%,var(--bd))}
[data-theme="dark"] .adv code,[data-theme="dark"] .advice code{background:var(--bg-sunken)}

@media(max-width:760px){
  .meas table.tbl{font-size:13.5px}
  .meas .dl{grid-template-columns:minmax(0,1fr)}
  .meas .dl>dt{padding-bottom:2px;border-bottom:0}
  .meas .dl>dd{padding-top:0}
  .advice>summary{padding:9px 11px;font-size:12.5px;gap:7px}
  .advice>summary .n{padding:2px 7px}
  .advice-body{padding:2px 11px 12px}
  /* etykieta snippetu łamie się w wierszu, zamiast wypychać przycisk kopiowania */
  .adv-snip-lbl{white-space:normal}
  .adv-t{font-size:13.5px}
}

@media print{
  .advice{break-inside:avoid}
  .advice>summary{background:transparent;color:#000}
  .advice-body{display:block}
}

/* ── ustawienia i konta (2026-09-09) ───────────────────────────────────
   Trzy ekrany dopisane razem, bo dzielą ten sam element: wiersz z polem
   wyboru, tytułem, opisem i akcją po prawej. Prefiksy: `.set-` ustawienia
   raportów, `.perm-` formularz konta, `.users-` lista kont, `.auth-`
   ekran logowania, `.gen-` krok „sekcje" w generatorze. */

/* ---- ustawienia raportów: pasek narzędzi ---- */
.set-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:14px;
  background:var(--bg-elev);border:1px solid var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-xs);
}
.set-bar-label{font-size:13px;font-weight:600}
.set-count{font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums}

.set-groups{align-items:start}

/* ---- ustawienia raportów: wiersz sekcji ---- */
.set-row{
  display:flex;gap:11px;align-items:flex-start;
  padding:10px 6px;border-bottom:1px solid var(--bd-subtle);
}
.set-row:last-child{border-bottom:0}
.set-row:hover{background:var(--bg-hover);border-radius:var(--r-sm)}
.set-check{display:flex;align-items:center;padding-top:2px;cursor:pointer}
.set-row.locked .set-check{cursor:default}
.set-row-txt{flex:1;min-width:0}
.set-row-t{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.set-row-d{font-size:11.5px;color:var(--tx-3);line-height:1.5;margin-top:2px}
.set-row-n{
  font-size:11px;color:var(--tx-4);margin-top:4px;
  display:inline-flex;align-items:center;gap:4px;
}
.set-row-n svg{width:11px;height:11px;flex:none;opacity:.8}
.set-peek{flex:none;align-self:center}

/* ---- ustawienia raportów: motywy i silniki ---- */
.set-theme{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  padding:10px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);
  transition:border-color var(--t-fast),background var(--t-fast);text-align:center;
}
.set-theme:hover{border-color:var(--bd-strong)}
.set-theme.on{border-color:var(--accent);background:var(--accent-soft)}
.set-theme input{position:absolute;opacity:0;width:0;height:0}
.set-theme-swatch{display:flex;gap:2px}
.set-theme-swatch i{width:13px;height:30px;border-radius:3px;display:block}

.set-engines{display:grid;gap:10px}
.set-engine{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:12px 14px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.set-engine:hover{border-color:var(--bd-strong)}
.set-engine.on{border-color:var(--accent);background:var(--accent-soft)}
.set-engine>input{margin-top:3px;flex:none}
.set-engine-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.set-engine-t{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-engine-d{font-size:11.5px;color:var(--tx-3);line-height:1.55}

/* ---- podgląd sekcji: okno na całą szerokość ----
   `margin:auto` jawnie, bo globalny reset `*{margin:0}` kasuje marginesy,
   którymi przeglądarka centruje `<dialog>`. */
.set-dlg{
  position:fixed;inset:0;margin:auto;width:min(1500px,96vw);max-width:96vw;
  height:min(94vh,1200px);max-height:94vh;
  border:1px solid var(--bd);border-radius:var(--r-lg);padding:0;background:var(--bg-elev);
  color:var(--tx);box-shadow:var(--sh-xl);overflow:hidden;
}
.set-dlg::backdrop{background:rgba(2,6,23,.62)}
.set-dlg[open]{display:flex;flex-direction:column}
.set-dlg-head{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--bg-elev);flex:none;
}
.set-dlg-title{min-width:0;margin-right:auto}
.set-dlg-title h3{margin:2px 0 0;font-size:15px}
.set-dlg-tools{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.set-dlg-body{flex:1;min-height:0;background:var(--bg-sunken)}
.set-dlg iframe{display:block;width:100%;height:100%;min-height:80vh;border:0;background:#fff}
.set-dlg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 16px;border-top:1px solid var(--bd);background:var(--bg-sunken);flex:none;
}

/* ---- generator: krok „sekcje raportu" ---- */
.gen-secs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px 18px;
  border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;background:var(--bg-elev);
}
.gen-sec-h{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-4);margin-bottom:5px;
}
.gen-sec{display:flex;align-items:center;gap:8px;padding:1px 0}
.gen-sec-l{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;min-width:0;flex:1}
.gen-sec-l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gen-sec-p{
  flex:none;font-size:0;color:var(--tx-4);opacity:.45;transition:opacity var(--t-fast),color var(--t-fast);
  display:inline-flex;align-items:center;
}
.gen-sec:hover .gen-sec-p,.gen-sec-p:focus-visible{opacity:1}
.gen-sec-p:hover{color:var(--accent)}
.gen-sec-p svg{width:12px;height:12px}
.gen-toc{padding-left:18px;line-height:1.9;color:var(--tx-2);margin:0}

/* ---- formularz konta: role, uprawnienia ---- */
.perm-toggle{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:7px 0}
.perm-toggle>input{margin-top:2px;flex:none}
.perm-toggle-txt{display:flex;flex-direction:column;gap:2px}
.perm-toggle-t{font-size:13px;font-weight:550}
.perm-toggle-d{font-size:11.5px;color:var(--tx-3);line-height:1.5}

.perm-roles{display:grid;gap:9px}
.perm-role{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:11px 13px;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg-elev);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.perm-role:hover{border-color:var(--bd-strong)}
.perm-role.on{border-color:var(--accent);background:var(--accent-soft)}
.perm-role.off{opacity:.65;cursor:default}
.perm-role>input{margin-top:3px;flex:none}
.perm-role-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.perm-role-t{font-size:13px;font-weight:600}
.perm-role-d{font-size:11.5px;color:var(--tx-3);line-height:1.55}

.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px 22px}
.perm-col-h{margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--bd-subtle)}
.perm-item{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:12.5px}
.perm-item>input{flex:none}
.perm-item-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perm-item.fixed{cursor:default;color:var(--tx-3)}
/* zdolności mają pełne, opisowe nazwy — tam wiersz łamie się zamiast urywać */
.perm-col-caps .perm-item{align-items:flex-start}
.perm-col-caps .perm-item>input{margin-top:2px}
.perm-col-caps .perm-item-t{white-space:normal;overflow:visible;line-height:1.45}
.perm-item-n{font-size:10.5px;color:var(--tx-4);white-space:nowrap}
.perm-form .card-head-actions{gap:8px}

/* ---- lista kont ---- */
.users-tbl td{vertical-align:middle}
.users-acts{display:flex;gap:4px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.users-acts form{margin:0}
.users-danger{color:var(--er-600)}
.users-danger:hover{background:var(--er-50);color:var(--er-700)}
.users-log td{vertical-align:top}

/* ---- ekran logowania ---- */
.auth-body{background:var(--bg)}
.auth-split{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.auth-aside{
  display:flex;flex-direction:column;justify-content:center;gap:22px;padding:48px 56px;
  background:linear-gradient(155deg,var(--a-700),var(--n-900) 62%);color:#e2e8f0;
}
.auth-aside .auth-mark{background:rgba(255,255,255,.16);color:#fff}
.auth-aside .auth-brand-n{color:#fff}
.auth-aside .auth-brand-s{color:rgba(226,232,240,.72)}
.auth-lede{font-size:14.5px;line-height:1.65;color:rgba(226,232,240,.86);max-width:44ch}
.auth-points{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.auth-points li{
  display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:rgba(226,232,240,.82);line-height:1.5;
}
.auth-points svg{flex:none;margin-top:1px;opacity:.85}
.auth-aside-foot{color:rgba(226,232,240,.55);margin-top:6px}

.auth-main{position:relative;display:grid;place-items:center;padding:32px 24px}
.auth-theme{position:absolute;top:18px;right:18px}
.auth-card{
  width:100%;max-width:392px;background:var(--bg-elev);border:1px solid var(--bd);
  border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:30px 30px 24px;
}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand-sm{display:none;margin-bottom:20px}
.auth-mark{
  width:40px;height:40px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;letter-spacing:.02em;
}
.auth-brand-n{display:block;font-size:14px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.auth-brand-s{display:block;font-size:11px;color:var(--tx-3);margin-top:2px}
.auth-h{font-size:21px;margin:0 0 4px}
.auth-sub{font-size:12.5px;color:var(--tx-3);margin-bottom:20px}
.auth-err{margin-bottom:16px}
.auth-form .field{margin-bottom:14px}
.auth-form .input{width:100%;height:36px}
.auth-submit{width:100%;justify-content:center;height:38px;margin-top:4px}
.auth-foot{margin-top:18px;line-height:1.55}

@media(max-width:900px){
  .auth-split{grid-template-columns:minmax(0,1fr)}
  .auth-aside{display:none}
  .auth-brand-sm{display:flex}
  .set-dlg-tools .field{flex:1 1 160px}
}
@media(max-width:760px){
  .set-bar{gap:8px}
  .set-count{width:100%}
  .set-row{flex-wrap:wrap}
  .set-peek{margin-left:auto}
  .perm-grid,.gen-secs{grid-template-columns:minmax(0,1fr)}
  .users-acts{justify-content:flex-start}
}

/* ── deklaracja v2 ─────────────────────────────────────────────────────
   Karta deklaracji dostępności po rozszerzeniu o badanie uzupełniające:
   zadeklarowany stan, podstawa sporządzenia, daty przeglądu, znacznik meta
   i dowody pobrane na dysk. Trzy nowe rzeczy, których nie było czym złożyć
   z istniejących klas: rząd odznak, cytat z treści deklaracji i lista plików.
   Reszta (`.badge .chip .dl .checks .note`) zostaje bez zmian.            */

/* rząd odznak i chipów pod nagłówkiem sekcji — zawija się na wąskim ekranie,
   bo etykiety bywają długie („zawyżona — błędy krytyczne") */
.decl2-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* dosłowny cytat z deklaracji: to nie nasz tekst, więc ma wyglądać jak przytoczenie
   — pionowa listwa, kursywa i lekko przygaszony kolor odróżniają go od opisu */
.decl2-quote{
  margin:6px 0 0;padding:6px 0 6px 11px;border-left:2px solid var(--bd);
  font-size:12.5px;font-style:italic;color:var(--tx-2);line-height:1.5;
  word-break:break-word;
}

/* dowody: odnośnik do oryginału u podmiotu i kopia na naszym dysku obok siebie */
.decl2-files{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.decl2-file{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding:6px 0;border-bottom:1px solid var(--bd-subtle);font-size:12.5px;min-width:0;
}
.decl2-file:last-child{border-bottom:0}
.decl2-file .chip{flex:none}
.decl2-file svg{width:12px;height:12px;vertical-align:-1px}

/* ikonka znacznika meta w kolumnie „Dekl." na liście podmiotów */
.decl2-meta{line-height:0;vertical-align:middle}

/* ── zlecanie badań i ręczne poprawki na karcie podmiotu ──────────────────
   Przyciski badań układają się w siatkę, a nie w rząd: rodzajów jest do
   trzynastu, a etykiety bywają długie („Lighthouse (raport pełny)"), więc
   w jednej linii łamały się w środku słowa. */
.qt-grid{display:flex;flex-wrap:wrap;gap:7px}
.qt-grid .btn{white-space:nowrap}
.qt-opt{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--bd-subtle);font-size:12.5px;cursor:pointer;
}
.qt-opt input{margin:0}

/* „Edytuj dane" jest w rzędzie akcji jedynym przyciskiem zmieniającym dane,
   więc ma odstawać od odnośników do raportów stojących obok. */
.btn-edit{font-weight:600}
.btn-edit svg{width:16px;height:16px}

/* wartość poprawiona ręcznie — na karcie musi być widać, że nie pochodzi
   z rejestru, inaczej raport podałby złe źródło */
.ovr-mark{color:var(--wn-600);line-height:0;vertical-align:-2px;margin-left:4px}
.ovr-was{font-size:11px;color:var(--tx-4);margin-left:5px}

/* ── wybór trybu w ustawieniach (duże pola wyboru z opisem skutku) ────────
   Zwykły radio z etykietą nie udźwignął tego ekranu: różnica między trybami
   to nie nazwa, tylko cztery zdania o tym, co się stanie z rejestrem. */
.opt{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:13px 14px;margin-bottom:9px;border:1px solid var(--bd);
  border-radius:var(--r);background:var(--bg-elev);transition:border-color var(--t-fast),background var(--t-fast);
}
.opt:hover{border-color:var(--bd-strong)}
.opt.on{border-color:var(--accent);background:var(--accent-soft)}
.opt input{margin:2px 0 0}
.opt strong{font-size:13.5px}
.opt-d{display:block;margin-top:5px;font-size:12.5px;line-height:1.55;color:var(--tx-2)}
.opt .badge{margin-left:6px;vertical-align:1px}

/* rząd akcji pod tabelą historii — „przywróć" ma być dostępne, ale nie krzyczeć */
.hist-act{white-space:nowrap;text-align:right}
.hist-act .btn{height:24px;padding:0 8px;font-size:11.5px}