/* ============================================================================
   NARZĘDZIA INTERAKTYWNE - wspólne komponenty (materialy/kalkulator-roi-ai,
   materialy/mapa-roli-sdlc-ai i kolejne narzędzia)
   ----------------------------------------------------------------------------
   Ładowany po style.css i materialy.css, przed arkuszem konkretnego narzędzia.
   Strona narzędzia: <main class="tool …">. Klasy wspólne mają przedrostek tool-,
   klasy jednego narzędzia - własny (calc-, mapa-). Zmiana tutaj obejmuje wszystkie
   narzędzia, dlatego układ siatki i treść wyników zostają w arkuszach narzędzi.
   Zasada jak w style.css: zmieniaj regułę w jej sekcji, nie dopisuj nadpisań na końcu.
============================================================================ */
.tool-sec { padding:48px 0 88px; background:#EEF2F6; }
@media (max-width:640px) { .tool-sec { padding:28px 0 60px; } }
.tool-wrap { max-width:1200px; margin:0 auto; }
.btn-sm { padding:8px 14px; font-size:.84rem; border-radius:10px; }

/* ── Pasek narzędzi: ustawienia ogólne oraz zapis i odczyt pliku ── */
.tool-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-bottom:14px; padding:14px 18px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--white); box-shadow:var(--sh); }
.tool-toolbar-btns { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
@media (max-width:640px) { .tool-toolbar-btns { margin-left:0; width:100%; } .tool-toolbar-btns .btn { flex:1; } }

/* ── Jak korzystać (rozwijane, ponumerowane kroki) ── */
.tool-guide { margin-bottom:22px; border-radius:var(--r-lg); border:1px solid var(--brand-border); background:var(--brand-light); }
.tool-guide summary { display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 18px; list-style:none; cursor:pointer; font-size:.92rem; font-weight:700; color:var(--brand); }
.tool-guide summary::-webkit-details-marker { display:none; }
.tool-guide summary::after { content:'\f078'; margin-left:auto; font:900 .72rem/1 "Font Awesome 6 Free"; transition:transform .2s; }
.tool-guide[open] summary::after { transform:rotate(180deg); }
.tool-guide ol { list-style:none; counter-reset:g; display:grid; gap:10px; padding:0 18px 18px; }
@media (min-width:860px) { .tool-guide ol { grid-template-columns:repeat(5,1fr); } }
.tool-guide li { counter-increment:g; position:relative; padding:12px 14px 12px 46px; border-radius:var(--r); background:var(--white); border:1px solid var(--brand-border); font-size:.84rem; line-height:1.5; color:var(--text-body); }
.tool-guide li::before { content:counter(g); position:absolute; left:12px; top:12px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800; color:#fff; background:var(--brand-gradient); }
.tool-guide li b { display:block; color:var(--text); }
/* Atrybut hidden zawsze ukrywa element narzędzia, także gdy jego klasa ustala display */
.tool [hidden] { display:none !important; }
/* Każde rozwijane podsumowanie w narzędziu ma co najmniej 44 px wysokości (cel dotykowy) */
.tool summary { display:flex; align-items:center; min-height:44px; }

/* ── Karty kroków z numerem ── */
.tool-card { min-width:0; padding:22px 22px 20px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--white); box-shadow:var(--sh); }
@media (max-width:640px) { .tool-card { padding:18px 16px; } }
.tool-card > h2, .tool-card-head h2 { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:1.02rem; font-weight:800; letter-spacing:-.015em; color:var(--text); }
.tool-step { width:28px; height:28px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:var(--brand); background:var(--brand-light); border:1px solid var(--brand-border); }
/* Nagłówek karty z przyciskiem obok (przycisk poza <h2>). Odnośnik ma 44 px wysokości,
   więc ujemny margines wyrównuje tytuł z tytułami sąsiednich kart (28 px + 16 px odstępu). */
.tool-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-8px 0 8px; }
.tool-card-head h2 { margin:0; }

/* ── Pola formularza ── */
.tool-field { margin-bottom:14px; }
.tool-field:last-child { margin-bottom:0; }
.tool-field > label, .tool-label { display:block; margin-bottom:6px; font-size:.84rem; font-weight:600; color:var(--text); }
.tool input[type=number], .tool select { width:100%; min-height:44px; padding:8px 12px; border-radius:10px; border:1.5px solid #7B8494; background:var(--white); font:inherit; font-size:.95rem; color:var(--text); transition:border-color .2s, box-shadow .2s; }
.tool select { padding-right:36px; -webkit-appearance:none; appearance:none; cursor:pointer;
    background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236B4FB3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.tool input[type=number]:hover, .tool select:hover { border-color:var(--brand-border); }
.tool input[type=number]:focus, .tool select:focus { outline:none; border-color:var(--brand-soft); box-shadow:0 0 0 4px rgba(107,79,179,.14); }
.tool input[type=range] { width:100%; height:44px; accent-color:#6B4FB3; cursor:pointer; }
/* iOS Safari powiększa stronę po dotknięciu pola z tekstem mniejszym niż 16 px */
@media (pointer:coarse), (max-width:1023px) {
    .tool input[type=number], .tool select { font-size:1rem; }
}
.tool-hint { margin-top:5px; font-size:.76rem; line-height:1.5; color:var(--text-muted); }
.tool-hint.is-after-row { margin:-6px 0 12px; }
.tool-hint.is-spaced { margin-top:10px; }
.tool-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; margin-bottom:14px; }
.tool-row2 > .tool-field { margin-bottom:0; }

/* Przełącznik (checkbox) z opcjonalnym blokiem szczegółów .tool-sub pod spodem */
.tool-switch { position:relative; display:flex; align-items:center; gap:10px; min-height:36px; font-size:.86rem; font-weight:600; color:var(--text); cursor:pointer; }
.tool-switch input { position:absolute; opacity:0; width:1px; height:1px; }
.tool-switch-ui { position:relative; width:38px; height:22px; flex:none; border-radius:var(--r-full); background:#7B8494; transition:background .2s; }
.tool-switch-ui::after { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:var(--sh); transition:transform .2s; }
.tool-switch input:checked + .tool-switch-ui { background:var(--brand); }
.tool-switch input:checked + .tool-switch-ui::after { transform:translateX(16px); }
.tool-switch input:focus-visible + .tool-switch-ui { outline:2px solid var(--brand-soft); outline-offset:2px; }
.tool-sub { margin:6px 0 4px 48px; }
.tool-hint.tool-sub { margin-top:0; }
.tool-sub[hidden] { display:none; }
.tool-sub output { font-weight:700; color:var(--brand); }

/* Przyciski drugorzędne w dwóch równych kolumnach */
.tool-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tool-btns .btn { justify-content:center; }

/* Kafelek wyboru (radio lub checkbox w etykiecie); układ wnętrza ustala arkusz narzędzia */
.tool-opt { position:relative; display:block; padding:12px 14px; border-radius:var(--r); border:1.5px solid var(--border); background:var(--white); cursor:pointer; transition:border-color .2s, background .2s; }
.tool-opt:hover { border-color:var(--brand-border); }
.tool-opt input[type=radio], .tool-opt input[type=checkbox] { accent-color:#6B4FB3; width:16px; height:16px; }
.tool-opt:has(input:checked) { border-color:var(--brand); background:var(--brand-light); }

/* Odnośnik-przycisk (działanie drugorzędne w nagłówku karty lub pod polem) */
.tool-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; font:inherit; font-size:.82rem; font-weight:700; color:var(--brand); cursor:pointer; white-space:nowrap; }
.tool-link:hover { text-decoration:underline; }

/* ── Sekcja wyników ── */
.tool-results { margin-top:40px; }
.tool-results > h2 { margin-bottom:6px; font-size:clamp(1.4rem,3vw,1.8rem); font-weight:800; letter-spacing:-.03em; color:var(--text); }
.tool-results > p { margin-bottom:20px; font-size:.95rem; color:var(--text-muted); }

/* ── Pasek bieżącego wyniku: widoczny podczas konfiguracji, gdy sekcja wyników jest poza ekranem ── */
.tool-peek { position:fixed; left:0; right:0; bottom:0; z-index:900; padding:8px 0 calc(8px + env(safe-area-inset-bottom)); background:var(--navy); color:#fff; box-shadow:0 -1px 0 rgba(255,255,255,.12); }
.tool-peek[hidden] { display:none; }
.tool-peek-in { display:flex; align-items:center; gap:10px 24px; }
.tool-peek-v { display:flex; flex-direction:column; min-width:0; }
.tool-peek-v small { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-on-dark); }
.tool-peek-v b { font-size:1.05rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tool-peek .btn { margin-left:auto; min-height:44px; }
@media (max-width:420px) { .tool-peek-in { gap:8px 14px; } .tool-peek-v.is-opt { display:none; } .tool-peek-v b { font-size:.98rem; } }
.menu-open .tool-peek { display:none; }
.tool.has-peek .tool-toast { bottom:84px; }

/* ── Okna dialogowe (<dialog>) ── */
.tool-dlg { position:fixed; width:min(760px, calc(100vw - 32px)); max-height:min(86vh, 900px); margin:auto; padding:0; border:0; border-radius:var(--r-xl); overflow:hidden; color:var(--text); background:var(--white); box-shadow:var(--sh-xl); }
.tool-dlg.wide { width:min(920px, calc(100vw - 32px)); }
.tool-dlg[open] { display:flex; flex-direction:column; }
.tool-dlg::backdrop { background:rgba(9,17,64,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.tool-dlg-head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 26px 16px; border-bottom:1px solid var(--border-light); }
.tool-dlg-head::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--brand-gradient); }
.tool-dlg.danger .tool-dlg-head::before { background:var(--red); }
.tool-dlg-head h2 { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.tool-dlg-head p { margin-top:4px; font-size:.84rem; color:var(--text-muted); }
.tool-x { width:40px; height:40px; flex:none; border-radius:50%; border:1px solid var(--border); background:var(--white); color:var(--text-body); cursor:pointer; font-size:1rem; transition:all .2s; }
.tool-x:hover { border-color:var(--brand-border); color:var(--brand); background:var(--brand-light); }
.tool-dlg-body { padding:18px 26px; overflow-y:auto; overscroll-behavior:contain; }
.tool-dlg-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:14px 26px 20px; border-top:1px solid var(--border-light); }
@media (max-width:640px) { .tool-dlg-head { padding:20px 18px 14px; } .tool-dlg-body { padding:14px 18px; } .tool-dlg-foot { padding:12px 18px 16px; } }
.tool-dlg h3 { margin:20px 0 10px; font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--brand); }

/* Wiersze w oknach: opis po lewej, pole lub wartość po prawej */
.tool-rows { display:grid; gap:8px; }
.tool-rowi { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 14px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); }
.tool-rowi b { display:block; font-size:.9rem; color:var(--text); }
.tool-rowi small { display:block; margin-top:2px; font-size:.76rem; line-height:1.45; color:var(--text-body); }
.tool-rowi input[type=number] { width:110px; text-align:right; }
.tool-rowi .fte { width:88px; }
.tool-rowi .val { text-align:right; font-size:.9rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.tool-rowi .val small { font-weight:500; }
.tool-callout { margin-bottom:14px; padding:12px 14px; border-radius:var(--r); font-size:.86rem; line-height:1.6; color:var(--text-body); background:var(--brand-light); border:1px solid var(--brand-border); }
.tool-callout.warn { background:#FFF7F7; border-color:#F1C4C4; }
.tool-callout b { color:var(--text); }

/* Komunikat po zapisie/odczycie */
.tool-toast { position:fixed; right:20px; bottom:20px; z-index:2000; max-width:min(380px, calc(100vw - 40px)); padding:12px 16px; border-radius:var(--r); background:var(--navy); color:#fff; font-size:.88rem; font-weight:600; box-shadow:var(--sh-xl); }
.tool-toast.error { background:var(--red); }
.tool-toast[hidden] { display:none; }

/* Informacja o prywatności obliczeń pod narzędziem */
.tool-about { margin-top:48px; }

/* Ograniczony ruch */
@media (prefers-reduced-motion:reduce) {
    .tool input, .tool select, .tool-switch-ui, .tool-switch-ui::after, .tool-opt, .tool-x, .tool-guide summary::after { transition:none; }
}

/* Wydruk / zapis do PDF: narzędzie bez nawigacji i działań, ciemny tekst na białym tle */
@media print {
    .header, .crumb, .tool-toolbar, .tool-guide, .art-cta, .footer, .tool-btns, .tool-link, .tool-dlg, .tool-toast, .tool-peek, #cc-banner { display:none !important; }
    .page-head { padding:0 0 16px !important; background:none !important; border:0; }
    .tool-sec { padding:0 !important; background:none !important; }
    .tool-card, .tool-results { break-inside:avoid; box-shadow:none; }
    .tool-switch-ui { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}