/* Typografia według wytycznych Mitowell (wątek identyfikacja-wizualna, wytyczne-typograficzne-mitowell.md v1.0).
   Ładowany jako ostatni arkusz, nadpisuje wcześniejsze style. Identyfikatory reguł w komentarzach (B, N, R, E, U).
   Krój zostaje Montserrat/Inter: licencja Adobe Fonts na Mozaic GEO obejmuje stronę marki, nie tę aplikację (T1). */

/* Tekst do czytania w lekcji: 18 px, interlinia 1,6, kolumna ok. 66 znaków, bez dzielenia wyrazów (B1, B2, B3, B10) */
.reading-blocks{gap:1.25rem;hyphens:manual}
.reading-blocks p,.reading-paragraph,.reading-checklist li,.reading-numbered li,.reading-quote p,.reading-panel p{font-size:1.125rem;line-height:1.6}
.reading-blocks p,.reading-paragraph,.reading-checklist,.reading-numbered,.reading-quote,.reading-section-heading,.reading-subheading{max-width:33em}
.reading-paragraph p+p{margin-top:1.2em}
/* Listy: stopień i interlinia jak tekst, odstęp między pozycjami ok. 8 px (E1) */
.reading-checklist,.reading-numbered{gap:.5rem}

/* Nagłówki w treści: skala z N1 (H2 1,625×, H3 1,375× stopnia tekstu), więcej światła nad niż pod (N3), bez kreski i dekoracji (N8) */
.reading-section-heading{font-size:1.625rem;line-height:1.25;font-weight:650;letter-spacing:-.02em;margin:1rem 0 -.6rem}
.reading-section-heading:before{content:none;display:none}
.reading-subheading{font-size:1.375rem;line-height:1.3;font-weight:650;margin:.6rem 0 -.7rem}
.reading-panel h2,.reading-panel h3{font-size:1.25rem;line-height:1.3}

/* Wyróżnienie: półgruby 600 jako jedyny nacisk (R1, R2); bez fioletu w tekście (R3) */
.reading-blocks strong,.reading-blocks b{font-weight:600;color:inherit}
.reading-step-number{color:var(--muted)}
.reading-number{color:var(--muted)!important}

/* Cytat: ten sam stopień co tekst, cienka kreska z lewej; kolor kreski czeka na Artura, do tego czasu neutralny (E3) */
.reading-quote{background:none;border-left:2px solid #c3c9d3;border-radius:0;padding:.25rem 0 .25rem 1.25rem}

/* Ramka: neutralne jasne tło albo cienka ramka, bez koloru marki (E4) */
.reading-direction{background:#f4f6f9;border-color:var(--line)}

/* Tabele: cyfry tabelaryczne, minimum linii, nagłówki kolumn bez wersalików (E9, R4) */
.reading-table table{font-variant-numeric:tabular-nums;font-size:1rem}
.reading-table th,.reading-table td[data-label]:before{text-transform:none!important;letter-spacing:0!important;font-size:.875rem}

/* Etykiety nad tytułami (eyebrow): zdaniowo, bez rozspacjowania i bez fioletu (R3, R4, U6: 13-14 px) */
.eyebrow{text-transform:none!important;letter-spacing:0!important;font-size:.8125rem!important;font-weight:600!important;color:var(--muted)!important}
.next-card .eyebrow,.mission-panel .eyebrow,.lesson-heading .eyebrow{color:#c5ccda!important}
.product-name{letter-spacing:0}

/* Wartości: dłuższy tekst, więc ciemny na jasnym (ustalenie 24.10, kolor tekstu). Misja zostaje ciemna z poświatą.
   Biała karta z cienką ramką, jedynym akcentem gradientu jest znacznik przy etykiecie „Wartości”; wartości w neutralnych jasnych polach (E4), numer szary (R3), nazwy zdaniowo (R4) */
.values-section{position:relative;overflow:hidden;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:40px}
.values-section .eyebrow{color:var(--muted)!important}
.values-section .reading-heading h2{color:var(--ink)}
.values-section .values-subtitle{color:var(--muted);font-size:1.125rem}
.values-grid{gap:16px}
.value-panel{background:#f4f6f9;border:0;border-radius:12px;padding:24px 28px}
.value-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.value-panel h3{color:var(--ink);text-transform:none!important;letter-spacing:0!important;font-size:1.25rem;font-weight:600}
.values-section .reading-number,.value-panel .reading-number{color:var(--muted)!important;font-variant-numeric:tabular-nums;letter-spacing:0;font-weight:600}
.value-panel p{color:var(--ink);font-size:1.125rem;line-height:1.6;max-width:none}
@media(max-width:540px){.values-section{padding:28px 20px}.value-panel{padding:20px}}

/* Układ lekcji: treść ok. 660 px przy 19 px (ok. 70 znaków w wierszu, B1, B3) i kolumna boczna „W tym temacie”; na węższym ekranie kolumna schodzi pod treść */
.learner-lesson{max-width:1000px}
.learner-lesson .lesson-layout{display:grid;grid-template-columns:minmax(0,660px) 280px;gap:56px;justify-content:center;align-items:start;margin:0}
.learner-lesson .lesson-toolbar{max-width:996px;margin-inline:auto}
.learner-lesson :is(.reading-blocks p,.reading-paragraph,.reading-checklist li,.reading-numbered li,.reading-quote p,.reading-panel p,.value-panel p){font-size:1.1875rem}
@media(max-width:1000px){.learner-lesson .lesson-layout{grid-template-columns:minmax(0,1fr);gap:40px}.learner-lesson{max-width:680px}}
.learner-lesson :is(.reading-blocks p,.reading-paragraph,.reading-checklist,.reading-numbered,.reading-quote,.reading-section-heading,.reading-subheading),.reading-panel p{max-width:none}
.learner-lesson .values-grid{grid-template-columns:1fr}
.learner-lesson .value-panel:last-child:nth-child(odd){grid-column:auto}

/* Pomoc „Jak przejść ten materiał”: zwinięta podpowiedź w jednym wierszu, bez karty, żeby nie udawała treści lekcji */
.step-explanation{border:0;background:none;padding:0;margin:0 0 28px;border-radius:0}
.step-explanation>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;color:var(--muted);font-size:.9375rem;font-weight:600;line-height:1.5;min-height:44px}
.step-explanation>summary::-webkit-details-marker{display:none}
.step-explanation>summary:hover{color:var(--ink)}
.step-explanation .step-info-icon{position:static;color:currentColor;flex:none}
.step-explanation p{color:var(--muted);font-size:.9375rem;line-height:1.6;max-width:66ch;margin:4px 0 8px 30px}
/* Tabele: bez łamania słów w środku (overflow-wrap:anywhere z .reading-blocks zaniżał minimalną szerokość kolumn) */
.reading-table :is(th,td){overflow-wrap:break-word;word-break:normal}

/* Znak marki w treści lekcji (znacznik {znak}): sygnet i logo na neutralnym jasnym tle (E4, E7), podpis w stopniu podpisu (U6) */
.reading-brand{margin:8px 0;padding:28px 24px 20px;background:#f4f6f9;border-radius:12px;text-align:center}
.reading-brand-marks{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.reading-brand-marks img{display:block;height:auto}
.reading-brand-logo{width:200px;max-width:100%}
.reading-brand figcaption{margin-top:16px;color:var(--muted);font-size:.9375rem;line-height:1.5}
/* Tytuł lekcji: bez sztucznego wyrównania długości wierszy, tylko bez sierot */
.learner-lesson h1{text-wrap:pretty}

/* Kolumna boczna lekcji: kroki tematu, neutralnie, bez koloru marki w tekście (R3); bieżący krok wyróżniony wagą i kreską */
.lesson-topic{position:sticky;top:24px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.lesson-topic-label{margin:0 0 4px;font-size:.8125rem;font-weight:600;color:var(--muted)}
.lesson-topic-title{margin:0 0 12px;font-size:1.125rem;line-height:1.35;letter-spacing:-.01em}
.lesson-topic-progress{margin:0 0 8px;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lesson-topic-bar{display:block;width:100%;height:4px;margin:0 0 18px}
.lesson-topic-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lesson-topic-step{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;margin:0 -10px;border-radius:8px;color:var(--ink);min-height:44px}
a.lesson-topic-step:hover{background:#f4f6f9}
.lesson-topic-dot{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;border:1.5px solid #b9c2cf;display:grid;place-items:center;color:#fff}
.step-passed .lesson-topic-dot{background:#2f8f5b;border-color:#2f8f5b}
.step-submitted .lesson-topic-dot{border-style:dashed;border-color:var(--muted)}
.step-revise .lesson-topic-dot{border-color:#b54708;border-width:2px}
.is-current .lesson-topic-dot{border-color:var(--ink);border-width:2px;box-shadow:inset 0 0 0 3px #fff;background:var(--ink)}
.lesson-topic-text{display:grid;gap:2px;min-width:0}
.lesson-topic-name{font-size:.9375rem;line-height:1.4}
.is-current .lesson-topic-name{font-weight:600}
.lesson-topic-meta{font-size:.8125rem;color:var(--muted);line-height:1.4}
.step-revise .lesson-topic-meta{color:#b54708}
.is-current .lesson-topic-step{background:#f4f6f9}
@media(max-width:1000px){.lesson-topic{position:static}}

/* Etapy z blokadą: nagłówek etapu w planie, zamknięty temat z kłódką, ręczne otwarcie (neutralnie, ciemny tekst na jasnym tle) */
.stage-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:18px 24px 12px;background:#f4f6f9;border-bottom:1px solid var(--line)}
.stage-heading h3{margin:0;font-size:1rem;letter-spacing:-.01em;color:var(--ink)}
.stage-lock-note,.section-locked-note{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:#3d4757}
.lock-icon{flex:none;vertical-align:-2px}
.path-section-locked>summary{background:#fafbfc}
.path-section-locked .section-summary strong{color:#3d4757}
.material-row-locked{color:#3d4757}
.material-row-locked:hover strong{text-decoration:none}
.section-signal{font-size:.8125rem;color:#3d4757}
.section-signal.is-warning{color:#9a4325;font-weight:600}
.closing-label{color:#9a4325;font-weight:600}
.stage-unlock{flex-basis:100%;font-size:.875rem}
.stage-unlock summary{color:#3d4757;text-decoration:underline;text-underline-offset:3px}
.stage-unlock form{display:grid;gap:12px;margin:12px 0 6px;max-width:640px}
.stage-unlock .checkbox span{line-height:1.5}
.stage-unlock .button{justify-self:start}

/* Karta „Co teraz?”: dłuższy tekst, więc jasne neutralne tło zamiast ciemnej karty następnego kroku */
.what-now-card{background:#f4f6f9;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:32px}
.what-now-card .eyebrow{color:#3d4757}
.what-now-card h2{margin-bottom:12px}
.what-now-card h3{margin:24px 0 10px;font-size:1rem}
.what-now-list,.what-now-ideas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.what-now-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px}
.what-now-list li>span{display:grid;gap:4px;font-weight:600;line-height:1.45}
.what-now-list small{font-weight:400;font-size:.8125rem;color:#3d4757}
.what-now-list .button{flex:none;min-height:40px}
.what-now-ideas li{line-height:1.6}
@media(max-width:760px){.dashboard-grid .what-now-card{order:1}.what-now-card{padding:24px}.what-now-list li{flex-direction:column;align-items:flex-start}}

/* Karta „Jak szło w etapie” u opiekuna: zwinięta, otwarta przy ćwiczeniu zamykającym etap */
.stage-signals{margin:20px 0;padding:16px 20px;background:#f4f6f9;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.stage-signals summary{font-weight:600;line-height:1.5}
.stage-signals-body{margin-top:12px}
.stage-signals h3{margin:18px 0 8px;font-size:.9375rem}
.stage-signals-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.stage-signals-list li{display:grid;gap:2px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:.875rem;line-height:1.5}
.stage-signals-list span{color:#3d4757}
.stage-signals-guide{display:grid;gap:2px;margin:6px 0 0;padding:8px 12px;background:var(--navy-soft);border-left:3px solid var(--navy);border-radius:0 6px 6px 0;color:var(--ink)}
.stage-signals-guide b{font-size:.75rem;font-weight:600;color:var(--navy)}
.stage-signals-guide.critical{background:#fff1f3;border-left-color:var(--red)}
.stage-signals-guide.critical b{color:#941b31}
/* Strona opiekuna (lektura, ocena ćwiczenia): jedna kolumna 740 px (ok. 72 znaki w wierszu, górna granica B3), wspólna lewa krawędź kart i treści */
.mentor-reading{max-width:740px}
.mentor-content-preview>.lesson-content{max-width:none;margin:0;padding:28px}
.mentor-content-preview .mentor-preview-label{padding:16px 28px}
.mentor-content-preview .reading-paragraph{padding:0}
.mentor-reading-facts{display:flex;flex-wrap:wrap;gap:16px 48px}
.mentor-reading-facts:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
@media(max-width:760px){.mentor-content-preview>.lesson-content{padding:16px}.mentor-content-preview .mentor-preview-label{padding:16px}}
.mentor-content-preview :is(.reading-blocks p,.reading-paragraph,.reading-checklist,.reading-numbered,.reading-quote,.reading-section-heading,.reading-subheading),.mentor-content-preview .reading-panel p{max-width:none}
/* Punktory (E2a): w tekście neutralna kropka w kolorze tekstu pomocniczego; sygnet tylko przy liście oznaczonej w treści {lista-znak} (krótka lista wyróżniająca) */
.reading-checklist li:before,.reading-criteria .reading-checklist li:before{width:6px;height:6px;left:7px;top:calc(.8em - 3px);border-radius:50%;background:#5b6578}
.reading-checklist-brand li:before{width:16px;height:16px;left:0;top:.35em;border-radius:0;background:transparent url('/static/brand-mark.svg') center/contain no-repeat}
/* Numery tematów w ścieżce: zwykły kolor tekstu, bez fioletu (R3) */
.section-number{color:var(--ink)!important}
/* Numery w przewodniku opiekuna w kolorze tekstu, duży numer kroku na ciemnej karcie jasnoszary: bez fioletu w typografii (R3) */
.guide-number{color:var(--ink)!important}
.step-art span{color:#c5ccda!important}
/* Tabele od 5 kolumn (E9): w kolumnie tekstu zwarte (15 px, mniejsze odstępy, cyfry tabelaryczne), pełny widok przez „Powiększ tabelę” */
.reading-table-tools{display:flex;justify-content:flex-end;margin:0 0 -8px}
.table-zoom{min-height:36px;padding:6px 14px;font-size:13px}
.reading-table-wide table{font-size:.9375rem;line-height:1.45;font-variant-numeric:tabular-nums}
.reading-table-wide th{padding:10px 12px;font-size:.72rem}
.reading-table-wide td{padding:10px 12px}
.table-dialog{width:min(1200px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.table-dialog::backdrop{background:#15181e99}
.table-dialog-close{float:right;min-height:36px;padding:6px 14px;font-size:13px;margin-bottom:12px}
.table-dialog-body{clear:both;overflow:auto}
.table-dialog-body table{font-size:1rem;font-variant-numeric:tabular-nums}
.table-dialog-body td,.table-dialog-body th{white-space:nowrap;padding:12px 16px}
@media(max-width:540px){.reading-table-tools{display:none}}

/* Akcenty gradientowe według 11-typografia, sekcja 6a (G1-G6), E3 i N8 oraz księgi znaku (04, „Do potwierdzenia” nr 4: w poziomie błękit po lewej, czerwień po prawej; w pionie błękit na dole).
   Grubość akcentu = 0,1 em nagłówka bloku, na ekranie min. 3 px (G2, G3); nagłówki ok. 40 px (lekcja, misja) dają 4 px. */
:root{--accent-h:3px}
.lesson-heading,.mission-panel{--accent-h:4px}

/* G3: kreska przed nadtytułem, jedna reguła dla wszystkich etykiet (karty, panele, misja, wartości, logowanie): 2,5 em nadtytułu, odstęp 0,6 em, środek optyczny tekstu */
.eyebrow{display:block!important;gap:0!important}
.eyebrow:before{content:''!important;display:inline-block!important;vertical-align:middle;position:relative;top:calc(.25ex - .25cap);width:2.5em!important;height:var(--accent-h)!important;margin:0 .6em 0 0!important;border-radius:0!important;background:var(--gradient)!important;flex:none}

/* G1: jeden akcent na blok. Logowanie ma kreskę przy nadtytule, więc bez drugiej linii pod wstępem */
.brand-rule{display:none}

/* G5: krawędzie kart ról i scenariuszy bez gradientu i bez fioletu (R3); zostaje neutralna ramka karty */
.reading-role:before,.reading-scenario:before{content:none!important;display:none!important}
.reading-role,.reading-scenario{border:1px solid var(--line)!important}

/* N8: nagłówek próby w ocenie bez kreski przed tytułem */
.mentor-attempt-heading h3::before{content:none!important;display:none!important}

/* E3, G4: cytat na 2-3 wiersze z krawędzią gradientową na całą wysokość (błękit na dole, czerwień u góry); krótszy i dłuższy z neutralną kreską 2 px (reguła wyżej) */
.reading-quote-accent{position:relative;border-left:0!important;padding-left:calc(1.25rem + var(--accent-h))}
.reading-quote-accent:before{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--accent-h);background:linear-gradient(0deg,var(--blue),var(--purple),var(--red))}

/* Wskaźniki stanu interfejsu (aktywna pozycja menu, zakładka filtra, pozycja spisu treści): podkreślenie etykiety na jej szerokość, nie akcent typograficzny. Zostają z gradientem, z jednym zestawem kolorów i kierunkiem błękit → czerwień */
.section-menu-items a[aria-current=location]::after{background:var(--gradient)}

/* Paski postępu to dane, nie akcent: przy pełnym postępie byłyby długim poziomym gradientem, którego księga nie dopuszcza (04, G5). Wypełnienie jednym kolorem marki */
progress::-webkit-progress-value{background:var(--blue)!important;background-image:none!important}
progress::-moz-progress-bar{background:var(--blue)!important;background-image:none!important}
/* Box z poświatą (G7-G9): granat z gradientem pionowym zamiast czerni, dwie okrągłe poświaty ze środkiem w rogach
   (błękit 40% w lewym dolnym, czerwień 30% w prawym górnym), promień 1,1 × krótszy bok (--glow-r liczy app.js).
   Karta następnego kroku ma jasny przycisk na dole, więc według G9 bez błękitu. */
.next-card,.reading-direction,.mission-panel{--glow-r:260px;background-color:#21234d!important;border-color:#313d78!important;background-image:radial-gradient(circle var(--glow-r) at 0% 100%,rgb(0 170 255 / .40),transparent),radial-gradient(circle var(--glow-r) at 100% 0%,rgb(255 0 37 / .30),transparent),linear-gradient(180deg,#27316c,#21234d)!important}
.next-card{background-image:radial-gradient(circle var(--glow-r) at 100% 0%,rgb(255 0 37 / .30),transparent),linear-gradient(180deg,#27316c,#21234d)!important}
.next-card:before,.reading-direction:before,.mission-panel .strategy-glow{display:none!important}
/* Zrzuty i filmy z bazy wiedzy w treści lekcji; link do dokumentu źródłowego pod treścią */
.reading-media{margin:24px 0}
.reading-media img,.reading-media video{display:block;height:auto;border:1px solid var(--line);border-radius:12px;background:#f5f6f8}
.reading-media img{width:auto;max-width:100%}  /* zrzut nie większy niż oryginał, inaczej mały zrzut wychodzi nieostry */
.reading-media video{width:100%}
.reading-image-zoom{display:block;max-width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px}
.reading-image-zoom:focus-visible{outline:3px solid #00aaff;outline-offset:3px}
.reading-media figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.image-dialog-body img{display:block;max-width:100%;height:auto;margin:0 auto}
.lesson-source-link{margin:28px 0 0;font-size:15px}
.lesson-source-link a{font-weight:600}
/* Numeracja i małe ikony (księga znaku, R3): numery w kolorze tekstu, półgrubo; ikony jednokolorowe: kolor tekstu na jasnym tle, jasne na granacie */
.section-number,.reading-number,.reading-step-number,.guide-number,.assessment-step-number,.values-section .reading-number,.value-panel .reading-number{color:var(--ink)!important;font-weight:600}
.step-art span{font-weight:600}.reading-direction .reading-number,.mission-panel .reading-number{color:#c5ccda!important}
.completion-title>span,.material-icon.passed,.queue-done-icon,.program-guide>summary>svg,.feedback-toast>svg,.knowledge-card-link .card-arrow,.staff-card-action>span,.topbar .suggestion-launch svg{color:var(--ink)}
/* Odwołanie do tematu w treści ({temat:KOD}): podkreślona nazwa w kolorze tekstu */
.topic-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.topic-link:hover{color:var(--navy)}