/* ============================================================================
   MOJA NOWA ROLA W SDLC Z AI - mapa rozwoju roli (materialy/mapa-roli-sdlc-ai)
   ----------------------------------------------------------------------------
   Ładowany po style.css, materialy.css i narzedzia.css (wspólne komponenty tool-*).
   Prosta ścieżka: cztery kroki ustawień i mapa jako listy z cienkimi liniami.
   Treść zasadnicza co najmniej 16 px, opisy co najmniej 14 px.
   Kolory grup: nowe zadania - zielonomorski, zmiana sposobu - fiolet marki; kolor zawsze ma też podpis.
   Zasada jak w style.css: zmieniaj regułę w jej sekcji, nie dopisuj nadpisań na końcu.
============================================================================ */
.mapa { --m-new:#00756B; --m-line:var(--border-light); }
.mapa-help { margin-top:6px; font-size:.875rem; line-height:1.55; color:var(--text-muted); }

/* ── Nagłówek strony i początek narzędzia: bez leadu pod tytułem, więc odstępy krótsze niż na innych stronach ── */
.mapa .page-head { padding-bottom:32px; }
.mapa .art-head h1 { max-width:none; } /* krótki tytuł: jedna linia, gdy się mieści (wspólne 22ch łamało go bez potrzeby) */
.mapa .page-head .art-sub { margin-top:8px; }
.mapa .tool-sec { padding-top:24px; }
@media (max-width:640px) {
    .mapa .page-head { padding-bottom:22px; }
    .mapa .tool-sec { padding-top:16px; }
}

/* ── Bez JavaScriptu (albo gdy skrypt się nie wczytał): komunikat zamiast pustych kroków ── */
.mapa-nojs { padding:16px 18px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--white); font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa.is-ready .mapa-nojs, .mapa:not(.is-ready) .mapa-step { display:none; }

/* ── Układ: od 1100 px ustawienia (4/12) obok mapy (8/12), poniżej jedna kolumna ── */
.mapa-layout { display:grid; gap:16px; }
.mapa-side { display:grid; gap:12px; align-content:start; min-width:0; }
.mapa-main { min-width:0; }
@media (min-width:1100px) {
    .mapa-layout { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:28px; align-items:start; }
    .mapa .tool-peek, .mapa-to-map, .mapa-result-act #link-to-work { display:none !important; }
}
.mapa.is-shared .mapa-layout { grid-template-columns:minmax(0,1fr); }
.mapa-side .tool-card > h2, .mapa-side .tool-card-head h2 { margin-bottom:12px; }

/* ── Kroki ustawień ── */
/* Role w jednej linii: tyle kolumn, ile mieści się kafelków po 180 px (kolumna ustawień i telefon - jedna) */
.mapa-roles { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:0; padding:0; border:0; }
.mapa-roles .tool-opt { display:flex; align-items:center; gap:10px; min-height:52px; font-size:1rem; font-weight:650; line-height:1.3; color:var(--text); }
.mapa-role-now { font-size:clamp(1.4rem,3vw,1.75rem); font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--text); }

.mapa-profiles { margin:0; padding:0; border:0; min-width:0; }
.mapa-profiles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:340px) { .mapa-profiles-grid { grid-template-columns:1fr; } }
.mapa-profiles .tool-opt { display:flex; align-items:flex-start; gap:10px; min-height:52px; font-size:.95rem; font-weight:650; line-height:1.3; color:var(--text); }
.mapa-profiles .tool-opt input { margin-top:2px; flex:none; }
.mapa-profile-desc { margin-top:10px; font-size:.875rem; line-height:1.5; color:var(--text-muted); }
.mapa-profiles .tool-opt.is-off { border-style:dashed; background:transparent; color:var(--text-muted); cursor:not-allowed; }
.mapa-profiles .tool-opt.is-off:hover { border-color:var(--border); }
.mapa-profile-note { margin-top:10px; font-size:.875rem; font-weight:600; line-height:1.5; color:var(--brand); }

.mapa-horizon { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; padding:0; border:0; }
.mapa-horizon .tool-opt { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding-inline:10px; font-size:.95rem; font-weight:650; white-space:nowrap; color:var(--text); }
@media (max-width:360px) { .mapa-horizon { grid-template-columns:1fr; } }
.mapa-q { margin-top:12px; font-size:.9375rem; line-height:1.5; color:var(--text-body); }
.mapa-to-map { margin-top:8px; }

/* ── Miejsce na mapę, zanim padną wszystkie odpowiedzi ── */
.mapa-empty { padding:32px 24px; border-radius:var(--r-lg); border:1.5px dashed var(--brand-border); background:var(--white); text-align:center; }
@media (max-width:640px) { .mapa-empty { padding:24px 16px; } }
.mapa:not(.is-ready) .mapa-empty { display:none; }
.mapa-empty i { font-size:1.6rem; color:var(--brand-soft); }
.mapa-empty h3 { margin-top:10px; font-size:1.25rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--text); }
.mapa-empty p { max-width:46ch; margin:8px auto 0; font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-empty .mapa-empty-next { margin-top:14px; font-weight:700; color:var(--brand); }

/* ── Wynik: nagłówek mapy ── */
.mapa-result-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 24px; }
.mapa-result-head h2 { font-size:clamp(1.4rem,3vw,1.75rem); font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--text); }
.mapa-result-head h2:focus { outline:none; }
.mapa-result-head h2:focus-visible { outline:2px solid var(--brand-soft); outline-offset:4px; }
.mapa-result-sub { margin-top:4px; font-size:.9375rem; font-weight:600; line-height:1.45; color:var(--brand); }
.mapa-result-act { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
.mapa-legend { margin-top:22px; font-size:.875rem; color:var(--text-muted); }
.mapa-legend span { font-weight:600; color:var(--text-body); }
.mapa-shared-k { margin:-4px 0 8px; font-size:.875rem; font-weight:700; color:var(--brand-soft); }

/* ── Grupy: jedna lista na grupę, wiersze oddzielone cienką linią ── */
.mapa-group { margin-top:22px; }
.mapa-legend + #groups .mapa-group:first-child { margin-top:8px; }
.mapa-group-t { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--text); }
.mapa-group.is-new .mapa-group-t { color:var(--m-new); }
.mapa-group.is-change .mapa-group-t { color:var(--brand); }
.mapa-count { font-size:.95rem; font-weight:600; color:var(--text-muted); }
.mapa-rows { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--white); overflow:hidden; }
.mapa-group.is-new .mapa-rows { box-shadow:inset 3px 0 0 var(--m-new); }
.mapa-group.is-change .mapa-rows { box-shadow:inset 3px 0 0 var(--brand-soft); }
.mapa-row + .mapa-row { border-top:1px solid var(--m-line); }
.mapa-row-btn, .mapa-row-head { position:relative; display:grid; gap:2px; width:100%; min-height:44px; padding:13px 44px 13px 18px; border:0; background:none; font:inherit; text-align:left; color:inherit; }
.mapa-row-btn { cursor:pointer; }
.mapa-row-btn:hover { background:#FAFAFC; }
.mapa-row-btn::after { content:'\f078'; position:absolute; right:18px; top:17px; font:900 .7rem/1 "Font Awesome 6 Free"; color:var(--text-muted); transition:transform .2s; }
.mapa-row-btn[aria-expanded="true"]::after { transform:rotate(180deg); }
.mapa-row-head { padding-right:18px; }
.mapa-row-name { font-size:1rem; font-weight:650; line-height:1.35; color:var(--text); }
.mapa-row-tr { font-size:.9375rem; line-height:1.45; color:var(--text-body); }
.mapa-cat { text-decoration:underline dotted; text-decoration-color:#B5B1C4; text-underline-offset:3px; cursor:help; }
.mapa-row-note { color:var(--text-muted); }
.mapa-row-note::before { content:' · '; }
.mapa-group.is-outside > details > summary { gap:8px; font-size:1.05rem; font-weight:800; color:var(--text-body); cursor:pointer; list-style:none; }
.mapa-group.is-outside > details > summary::-webkit-details-marker { display:none; }
.mapa-group.is-outside > details > summary::after { content:'\f078'; margin-left:4px; font:900 .7rem/1 "Font Awesome 6 Free"; color:var(--brand); }
.mapa-group.is-outside > details[open] > summary::after { transform:rotate(180deg); }
.mapa-group.is-outside .mapa-rows { margin-top:8px; }

/* Szczegóły zadania (rozwinięcie w miejscu) */
.mapa-det { padding:0 18px 16px; }
.mapa-det dl { display:grid; gap:10px; padding-top:12px; border-top:1px dashed var(--m-line); }
.mapa-det dt { font-size:.875rem; font-weight:700; color:var(--text); }
.mapa-det dd { margin:2px 0 0; font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-det dd ul { display:grid; gap:4px; padding-left:18px; list-style:disc; }
.mapa-det-meta { margin-top:10px; font-size:.875rem; color:var(--text-muted); }

/* ── Odpowiedzialność człowieka, kierunki rozwoju ── */
.mapa-resp { margin-top:28px; padding:16px 20px; border-radius:var(--r-lg); background:#F3F0FA; }
.mapa-resp h3 { font-size:.95rem; font-weight:800; color:var(--brand); }
.mapa-resp p { margin-top:4px; font-size:1rem; line-height:1.6; color:var(--text); }
.mapa-dirs { margin-top:30px; }
.mapa-dirs h3 { font-size:1.1rem; font-weight:800; letter-spacing:-.015em; color:var(--text); }
.mapa-dirs-list { margin-top:12px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--white); }
.mapa-dir { padding:16px 18px 6px; }
.mapa-dir + .mapa-dir { border-top:1px solid var(--m-line); }
.mapa-dir h4 { font-size:1rem; font-weight:700; line-height:1.35; color:var(--text); }
.mapa-dir p { margin-top:4px; font-size:.9375rem; line-height:1.55; color:var(--text-body); }

/* ── „Jak powstał model” (rozwijane pod mapą) ── */
.mapa-method { margin-top:24px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--white); }
.mapa-method summary { gap:10px; padding:12px 18px; list-style:none; cursor:pointer; font-size:.95rem; font-weight:700; color:var(--brand); }
.mapa-method summary::-webkit-details-marker { display:none; }
.mapa-method summary::after { content:'\f078'; margin-left:auto; font:900 .7rem/1 "Font Awesome 6 Free"; }
.mapa-method[open] summary::after { transform:rotate(180deg); }
.mapa-method-body { padding:0 18px 18px; font-size:.9375rem; line-height:1.6; color:var(--text-body); }
.mapa-method-body p + p, .mapa-method-body p + ul { margin-top:8px; }
.mapa-method-body ul { display:grid; gap:4px; padding-left:20px; list-style:disc; }

/* ── Widok odbiorcy linku ── */
.mapa-shared { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:16px; padding:16px 20px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--white); }
.mapa-shared p { flex:1 1 320px; font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-shared-btns { display:flex; flex-wrap:wrap; gap:8px; }
.mapa.is-shared .mapa-side, .mapa.is-shared #btn-share, .mapa.is-shared #link-to-work, .mapa.is-shared .tool-guide { display:none; }

/* ── Okna: udostępnianie (działania nad podglądem karty), kierunek rozwoju ── */
.mapa-share { display:grid; gap:16px; }
@media (min-width:640px) { .mapa-share { grid-template-columns:minmax(0,1fr) 200px; align-items:start; } .mapa-share-card { grid-column:2; grid-row:1 / span 2; } }
.mapa-share-btns { display:grid; gap:8px; }
.mapa-share-btns .btn { justify-content:flex-start; }
.mapa-share-card { margin:0; max-width:200px; }
.mapa-share-card img { display:block; width:100%; height:auto; aspect-ratio:1080 / 1350; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); }
.mapa-share-card figcaption { margin-top:6px; font-size:.8125rem; color:var(--text-muted); }
.mapa-share-text { width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid #7B8494; font:inherit; font-size:.875rem; line-height:1.5; color:var(--text); background:var(--white); resize:vertical; }
@media (pointer:coarse), (max-width:1023px) { .mapa-share-text { font-size:1rem; } }
.mapa-dlg-list { display:grid; gap:10px; }
.mapa-dlg-list li { padding:12px 14px; border-radius:var(--r); border:1px solid var(--border); background:var(--surface); }
.mapa-dlg-list b { display:block; font-size:.95rem; color:var(--text); }
.mapa-dlg-list span { display:block; margin-top:3px; font-size:.875rem; line-height:1.5; color:var(--text-body); }

/* ── Katalog modelu (statyczny, pod narzędziem): listy z cienkimi liniami ── */
.mapa-cat-lead { max-width:760px; margin-bottom:28px; font-size:1rem; line-height:1.65; color:var(--text-body); }
.mapa-cat-intro { display:grid; gap:8px 48px; margin-bottom:32px; }
@media (min-width:960px) { .mapa-cat-intro { grid-template-columns:1fr 1fr; } .mapa-cat-intro h3:nth-of-type(2) { grid-column:2; grid-row:1; } .mapa-cat-intro ul:nth-of-type(2) { grid-column:2; grid-row:2; } }
.mapa-cat h3 { font-size:1.1rem; font-weight:800; letter-spacing:-.015em; color:var(--text); }
.mapa-cat-h { margin:28px 0 8px; }
.mapa-cat-list li { padding:8px 0; border-top:1px solid var(--border-light); font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-cat-list b { color:var(--text); }
.mapa-cat-role { border-top:1px solid var(--border); }
.mapa-cat-role:last-of-type { border-bottom:1px solid var(--border); }
.mapa-cat-role > summary { display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 0; list-style:none; cursor:pointer; font-size:1.05rem; font-weight:700; color:var(--text); }
.mapa-cat-role > summary::-webkit-details-marker { display:none; }
.mapa-cat-role > summary::after { content:'\f078'; margin-left:auto; font:900 .7rem/1 "Font Awesome 6 Free"; color:var(--brand); }
.mapa-cat-role[open] > summary::after { transform:rotate(180deg); }
.mapa-cat-resp { max-width:760px; margin-bottom:12px; font-size:.9375rem; line-height:1.6; color:var(--text-body); }
.mapa-cat-tasks { display:grid; margin-bottom:16px; counter-reset:t; }
.mapa-cat-tasks > li { padding:14px 0 14px 34px; border-top:1px solid var(--border-light); counter-increment:t; position:relative; }
.mapa-cat-tasks > li::before { content:counter(t,decimal-leading-zero); position:absolute; left:0; top:16px; font-size:.8rem; font-weight:700; color:var(--brand-soft); font-variant-numeric:tabular-nums; }
.mapa-cat-tasks h4 { font-size:1rem; font-weight:700; color:var(--text); }
.mapa-cat-tasks p { max-width:820px; margin-top:4px; font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-cat-tasks p.mapa-cat-states { font-size:.875rem; color:var(--text-muted); }
.mapa-cat-tasks b { color:var(--text); }
/* Sposób wykonania w czterech profilach: nazwa profilu nad kategorią (profil „Bez AI” i kategoria „Bez AI” mają tę samą nazwę) */
.mapa-cat-prof { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; max-width:820px; margin:8px 0 4px; }
@media (min-width:760px) { .mapa-cat-prof { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mapa-cat-prof dt { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.mapa-cat-prof dd { margin:1px 0 0; font-size:.9375rem; font-weight:600; color:var(--text); }
.mapa-cat-ctrl { max-width:820px; margin-top:2px; padding-left:20px; list-style:disc; font-size:.9375rem; line-height:1.55; color:var(--text-body); }
.mapa-tag-ai { margin-left:6px; font-size:.8125rem; font-weight:600; color:var(--m-new); white-space:nowrap; }

/* Ograniczony ruch */
@media (prefers-reduced-motion:reduce) {
    .mapa-row-btn::after { transition:none; }
}

/* Wydruk: wszystkie zadania widoczne, bez działań */
@media print {
    .mapa-result-act, .mapa-shared-btns, .mapa-cat, .mapa-row-btn::after, .mapa-nojs { display:none !important; }
    .mapa-layout { grid-template-columns:1fr !important; }
    .mapa-row, .mapa-dir { break-inside:avoid; }
    .mapa-group .mapa-rows { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}