/* ============================================================================
   BADANIE „AI W SDLC” (/materialy/badanie-ai-w-sdlc-2025)
   ----------------------------------------------------------------------------
   Ładowany po style.css i materialy.css. Wykresy to statyczny HTML
   z _tools/badanie_ai_sdlc.py (bez biblioteki wykresów), wartości wyłącznie
   w procentach. Zasady:
   - słupki zawsze w skali 0-100% (tor pokazuje całość), cienkie, zaokrąglony
     tylko koniec z wartością;
   - jedna seria = jeden kolor; ciemny fiolet wyróżnia odpowiedzi omawiane
     w tekście, jasny pozostałe, szary - „Nie wiem”, „Nie używamy” itp.;
   - pytania o stopień/przedział: porządkowa skala fioletu (zwalidowana:
     jednolity odcień, rosnąca jasność, jasny koniec 2,6:1 na bieli);
   - etykiety i wartości zawsze w kolorach tekstu, nigdy w kolorze serii.
============================================================================ */
.bd {
    --bd-ink:#351C75;          /* wyróżnienie */
    --bd-soft:#BDB0E4;         /* pozostałe odpowiedzi */
    --bd-muted:#CBC8D3;        /* „Nie wiem” i odpowiedzi negatywne */
    --bd-track:#F0EEF4;
    --a1:#A996DC; --a2:#8A72C9; --a3:#6D52B5; --a4:#53379C; --a5:#3B2180; --a6:#250F57;
    --bd-now:#A996DC; --bd-fut:#351C75;
}

/* ── Nagłówek: tekst + wykres kwadratowy (100 pól = 100% respondentów) ── */
.bd-head { display:grid; gap:40px; }
@media (min-width:1100px) {
    .bd-head { grid-template-columns:minmax(0,1fr) 340px; gap:80px; align-items:start; }
    .bd-hero { margin-top:6px; }
}
.bd-hero { --w-prod:#351C75; --w-poc:#8A72C9; --w-pre:#BCAEE5; --w-na:#D6D3DD;
    display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); grid-template-areas:"c c" "w k" "n n"; gap:16px 28px; align-items:center; max-width:560px; }
.bd-hero figcaption { grid-area:c; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.bd-waffle { grid-area:w; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
.bd-waffle i { aspect-ratio:1; border-radius:3px; transition:opacity .2s; }
.w-prod { background:var(--w-prod); } .w-poc { background:var(--w-poc); }
.w-pre { background:var(--w-pre); } .w-na { background:var(--w-na); }
.bd-hero-key { grid-area:k; display:grid; gap:0; border-top:2px solid var(--text); }
.bd-hero-key li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--border); font-size:.9rem; line-height:1.3; color:var(--text-body); }
.bd-hero-key .bd-sw { align-self:center; }
.bd-hero-key b { font-size:1.15rem; font-weight:750; letter-spacing:-.02em; color:var(--text); }
.bd-hero-key li:first-child b { font-size:1.6rem; }
.bd-hero-note { grid-area:n; font-size:.82rem; color:var(--text-muted); }
.bd-hero-note a { font-weight:650; color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
/* wskazanie pozycji legendy wygasza pozostałe pola wykresu */
.bd-hero:has(.k-w-prod:hover) .bd-waffle i:not(.w-prod),
.bd-hero:has(.k-w-poc:hover) .bd-waffle i:not(.w-poc),
.bd-hero:has(.k-w-pre:hover) .bd-waffle i:not(.w-pre),
.bd-hero:has(.k-w-na:hover) .bd-waffle i:not(.w-na) { opacity:.18; }
@media (min-width:1100px) {
    .bd-hero { grid-template-columns:minmax(0,1fr); grid-template-areas:"c" "w" "k" "n"; gap:16px; max-width:none; }
    .bd-waffle { gap:5px; }
}
/* telefon: mały wykres obok legendy, żeby nagłówek nie odsuwał treści */
@media (max-width:519px) {
    .bd-hero { grid-template-columns:132px minmax(0,1fr); gap:12px 18px; }
    .bd-waffle { gap:2px; }
    .bd-waffle i { border-radius:2px; }
    .bd-hero-key li { gap:8px; padding:6px 0; font-size:.82rem; }
    .bd-hero-key b { font-size:1rem; }
    .bd-hero-key li:first-child b { font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce) { .bd-waffle i { transition:none; } }

/* ── Nagłówek: metryczka badania ── */
.bd-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; margin-top:32px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.bd-facts div { padding:12px 16px 12px 0; }
.bd-facts div + div { padding-left:16px; border-left:1px solid var(--border); }
.bd-facts dt { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.bd-facts dd { margin-top:2px; font-size:.95rem; font-weight:600; color:var(--text); }

/* ── Wyniki w skrócie: panel ośmiu obszarów na całą szerokość ── */
.bd-board-sec { padding:56px 0 64px; border-bottom:1px solid var(--border-light); }
.bd-board-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 32px; margin-bottom:24px; }
.bd-board-head h2 { font-size:clamp(1.5rem,2.6vw,1.9rem); font-weight:750; letter-spacing:-.025em; line-height:1.15; color:var(--text); }
.bd-board-head p { max-width:44ch; font-size:.95rem; color:var(--text-muted); }
/* linie siatki = 1 px przerwy między białymi polami na tle w kolorze linii */
.bd-board { display:grid; grid-template-columns:minmax(0,1fr); gap:1px; background:var(--border); border-top:2px solid var(--text); border-bottom:1px solid var(--border); }
@media (min-width:640px) { .bd-board { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px) { .bd-board { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.bd-cell { display:flex; flex-direction:column; min-width:0; padding:22px 24px 16px; background:var(--white); transition:background-color .2s; }
.bd-cell:hover { background:#FAF9FC; }
@media (min-width:640px) and (max-width:1099px) { .bd-cell:nth-child(2n+1) { padding-left:0; } }
@media (min-width:1100px) { .bd-cell:nth-child(4n+1) { padding-left:0; } }
.bd-cell-k { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-soft); }
.bd-cell-n { margin-top:10px; font-size:2.6rem; font-weight:750; line-height:1; letter-spacing:-.045em; color:var(--text); }
.bd-cell-t { margin:8px 0 18px; font-size:.93rem; line-height:1.5; color:var(--text-body); }
.bd-cell .bd-bars { margin-top:auto; }
.bd-cell-go { display:inline-flex; align-items:center; gap:6px; min-height:32px; margin-top:12px; font-size:.84rem; font-weight:650; color:var(--brand); }
.bd-cell-go i { font-size:.7rem; transition:transform .2s; }
.bd-cell:hover .bd-cell-go { text-decoration:underline; text-underline-offset:3px; }
.bd-cell:hover .bd-cell-go i { transform:translateY(2px); }
.bd-cell:focus-visible { outline-offset:-2px; }
/* telefon: dwie kolumny z samą liczbą i opisem; mini-wykresy są w szczegółach poniżej */
@media (max-width:639px) {
    .bd-board-sec { padding:40px 0 44px; }
    .bd-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .bd-cell { padding:16px 12px 16px 14px; }
    .bd-cell:nth-child(2n+1) { padding-left:0; }
    .bd-cell:hover { background:var(--white); }
    .bd-cell-k { font-size:.7rem; letter-spacing:.08em; }
    .bd-cell-n { margin-top:8px; font-size:2rem; }
    .bd-cell-t { margin:6px 0 0; font-size:.86rem; line-height:1.45; }
    .bd-cell .bd-bars, .bd-cell-go { display:none; }
}

/* ── Treść ── */
.bd-body { min-width:0; max-width:760px; }
.bd-sec + .bd-sec { margin-top:64px; padding-top:40px; border-top:1px solid var(--border); }
.bd-sec .kicker { margin-bottom:12px; }
.bd-sec h2 { max-width:26ch; margin-bottom:16px; font-size:clamp(1.5rem,2.6vw,1.95rem); font-weight:750; line-height:1.15; letter-spacing:-.025em; color:var(--text); }
.bd-sec > p:not(.kicker) { max-width:66ch; margin-bottom:14px; font-size:1.02rem; line-height:1.7; color:var(--text-body); }
@media (max-width:640px) { .bd-sec + .bd-sec { margin-top:48px; padding-top:32px; } }

/* ── Rysunek ── */
.bd-fig { margin:32px 0 0; }
.bd-fig + .bd-fig { margin-top:44px; }
.bd-cap { display:block; margin-bottom:18px; font-size:1rem; font-weight:650; line-height:1.4; color:var(--text); }
.bd-no { margin-right:4px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.bd-q { margin-top:16px; padding-top:10px; border-top:1px solid var(--border-light); font-size:.84rem; line-height:1.55; color:var(--text-muted); }
.bd-q span { font-weight:650; color:var(--text-body); }
.bd-sub { margin:22px 0 12px; font-size:.9rem; font-weight:650; color:var(--text); }

/* ── Słupki poziome ── */
.bd-bars { display:grid; gap:4px; }
.bd-row { display:grid; grid-template-columns:minmax(0,16.5rem) minmax(0,1fr) 2.75rem; gap:16px; align-items:center; min-height:34px; padding:2px 0; }
.bd-l { font-size:.92rem; line-height:1.35; color:var(--text); }
.bd-track { position:relative; height:10px; background:var(--bd-track); border-radius:0 3px 3px 0; }
.bd-bar { position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--bd-soft); border-radius:0 3px 3px 0; }
.bd-v { font-size:.95rem; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; color:var(--text-body); }
.bd-row.is-mark .bd-bar { background:var(--bd-ink); }
.bd-row.is-mark .bd-l { font-weight:600; }
.bd-row.is-mark .bd-v { font-weight:750; color:var(--text); }
.bd-row.is-muted .bd-bar { background:var(--bd-muted); }
.bd-row.is-muted .bd-l, .bd-row.is-muted .bd-v { color:var(--text-muted); }
.bd-row.is-sep { margin-top:8px; padding-top:8px; border-top:1px solid var(--border-light); }
@media (max-width:640px) {
    .bd-bars { gap:12px; }
    .bd-row { grid-template-columns:minmax(0,1fr) 2.75rem; grid-template-areas:"l l" "t v"; gap:4px 12px; min-height:0; }
    .bd-row .bd-l { grid-area:l; }
    .bd-row .bd-track { grid-area:t; }
    .bd-row .bd-v { grid-area:v; }
    .bd-row.is-sep { margin-top:4px; padding-top:12px; }
}

/* wersja mini (panel przeglądu): etykieta i wartość w wierszu, cienki słupek pod spodem */
.bd-bars.is-mini { gap:8px; }
.bd-bars.is-mini .bd-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"l v" "t t"; gap:3px 10px; min-height:0; }
.bd-bars.is-mini .bd-l { grid-area:l; font-size:.84rem; color:var(--text-body); }
.bd-bars.is-mini .bd-v { grid-area:v; font-size:.84rem; }
.bd-bars.is-mini .bd-track { grid-area:t; height:6px; }
.bd-bars.is-mini .is-mark .bd-l { color:var(--text); }

/* ── Słupek podzielony (pytania jednokrotnego wyboru) ── */
.bd-seg { display:flex; gap:2px; height:28px; }
.bd-part { display:flex; align-items:center; flex:0 0 calc(var(--v) - 2px); min-width:3px; padding-left:7px; border-radius:4px; }
.bd-part b { font-size:.8rem; font-weight:700; color:#fff; white-space:nowrap; }
.a1 { background:var(--a1); } .a2 { background:var(--a2); } .a3 { background:var(--a3); }
.a4 { background:var(--a4); } .a5 { background:var(--a5); } .a6 { background:var(--a6); }
.na { background:var(--bd-muted); }
.a1 b, .na b { color:var(--text); }
.bd-seg.is-two { height:32px; }
.bd-seg.is-two .bd-part { padding-left:10px; }
.bd-seg.is-two .bd-part b { font-size:.84rem; font-weight:650; }
@media (max-width:420px) { .bd-seg.is-two .bd-part b { font-size:.76rem; } }

/* stopień wdrożenia: klamry grup nad słupkiem */
.bd-brk { display:flex; gap:2px; margin-bottom:6px; }
.bd-brk span { flex:0 0 calc(var(--v) - 2px); min-width:0; padding:0 0 6px 2px; border-bottom:2px solid var(--text); font-size:.84rem; line-height:1.3; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-brk b { color:var(--text); font-weight:650; }
.bd-brk span.is-na { border-bottom-color:var(--bd-muted); color:transparent; }
.bd-brk span.is-na b { color:transparent; }
@media (max-width:759px) { .bd-brk { display:none; } }
/* legenda: na telefonie pogrupowana (klamry są ukryte), od 760 px jeden ciąg pozycji pod klamrami */
.bd-glegend { display:grid; gap:14px; margin-top:16px; }
.bd-glegend p { margin-bottom:6px; font-size:.88rem; color:var(--text-body); }
.bd-glegend p b { font-weight:650; color:var(--text); }
.bd-glegend ul { display:grid; gap:6px; }
.bd-glegend li, .bd-key li { display:flex; align-items:center; gap:8px; font-size:.85rem; line-height:1.35; color:var(--text-body); }
.bd-glegend li b { font-weight:650; font-variant-numeric:tabular-nums; color:var(--text); }
@media (min-width:760px) {
    .bd-glegend { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; }
    .bd-glegend p { display:none; }
    .bd-glegend > div, .bd-glegend ul { display:contents; }
}
@media (max-width:759px) { .bd-glegend .is-one ul { display:none; } }
@media (max-width:519px) { .bd-part.is-sm b { display:none; } }
.bd-sw { width:12px; height:12px; flex:none; border-radius:3px; }

/* ── Dziś a za 18-24 miesiące (wykres hantlowy) ── */
.bd-key { display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:16px; }
.bd-sw.is-now, .bd-sw.is-fut { border-radius:50%; }
.bd-sw.is-now { background:var(--bd-now); }
.bd-sw.is-fut { background:var(--bd-fut); }
.bd-dumb { display:grid; gap:2px; }
.bd-drow { display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr) 6rem; gap:16px; align-items:center; min-height:40px; }
.bd-drow .bd-track { height:2px; margin:0 7px; background:var(--bd-track); border-radius:0; }
.bd-gap { position:absolute; top:-1px; left:var(--a); width:calc(var(--b) - var(--a)); height:4px; background:#D9D1F0; border-radius:2px; }
.bd-dot { position:absolute; top:50%; left:var(--x); width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; box-shadow:0 0 0 2px #fff; }
.bd-dot.is-now { background:var(--bd-now); }
.bd-dot.is-fut { background:var(--bd-fut); }
.bd-drow .bd-v { display:flex; justify-content:flex-end; gap:10px; white-space:nowrap; }
.bd-v-now { font-weight:500; color:var(--text-muted); }
.bd-v-fut { font-weight:750; color:var(--text); }
@media (max-width:640px) {
    .bd-key { flex-direction:column; }
    .bd-dumb { gap:14px; }
    .bd-drow { grid-template-columns:minmax(0,1fr) 5.5rem; grid-template-areas:"l l" "t v"; gap:6px 12px; min-height:0; }
    .bd-drow .bd-l { grid-area:l; }
    .bd-drow .bd-track { grid-area:t; }
    .bd-drow .bd-v { grid-area:v; }
}

/* ── Metodologia ── */
.bd-meta { margin-top:8px; border-top:2px solid var(--text); }
.bd-meta div { display:grid; gap:4px; padding:14px 0; border-bottom:1px solid var(--border); }
.bd-meta dt { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.bd-meta dd { font-size:.95rem; line-height:1.65; color:var(--text-body); }
@media (min-width:640px) { .bd-meta div { grid-template-columns:11rem minmax(0,1fr); gap:24px; } }

@media (prefers-reduced-motion:reduce) { .bd-cell, .bd-cell-go i { transition:none; } .bd-cell:hover .bd-cell-go i { transform:none; } }
@media print {
    .bd-board-sec, .bd-fig, .bd-cell { break-inside:avoid; }
    .bd-cell-go { display:none; }
    .bd-bar, .bd-part, .bd-dot, .bd-sw, .bd-gap { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}