/* styles.css — reguły komponentowe (Faza 2 redesign, ADR-0002).
   Tokeny (kolory/typografia/spacing/elevation/motion) → tokens.css (podmienialny P14).
   Dostępność: statusy nie samym kolorem (ikona+tekst), kontrast CI-gated (contrast.test.mjs),
   widoczny focus, reflow do 320 px (WCAG 1.4.10), reduced-motion.
   Separator kart używa --color-border-subtle (dekoracyjny); kontrolki używają --color-border (CI ≥3:1). */

/* @import musi być PIERWSZĄ regułą (spec CSS). Ścieżka WZGLĘDNA — GitHub Pages, ADR-0002.
   ?v=<wersja> NA KAŻDYM imporcie — wrapper bez wersji na importach nie wymusza re-fetchu
   zmienionych tokens/primitives (user dostałby nowy wrapper, starą paletę). Bump z #app-version. */
@import "tokens.css?v=1.6";
/* Prymitywy wizualne (STAGE A, issue #139, M18): eyebrow, stats-strip, section-head. */
@import "styles/primitives.css?v=1.6";
/* Quiz + test końcowy (STAGE B, issue #143, M18): quiz-chip--crit, test-title, test-meta, path-badge--eyebrow. */
@import "styles/quiz-test.css?v=1.6";
/* Blok chrome interakcji + next-step-link (STAGE B, issue #144, M18): block, block__eyebrow, next-step-link, tune-output__label. */
@import "styles/interactions.css?v=1.6";
/* Ekran wyniku + certyfikat (STAGE B, issue #145, M18): result-hero, result-status--fail, attempt-note. */
@import "styles/result-cert.css?v=1.6";
/* Mikro-motion, :active, spójność radius (STAGE D, issue #151, M18): polish.css */
@import "styles/polish.css?v=1.6";
/* Rebuild ścieżek + refresh wizualny (#171): selektor poziomu, bonus, wykresy wyniku, konfetti, feedback quizu. */
@import "styles/rebuild.css?v=1.6";

/* ============================================================
   RESET + BASE
   ============================================================ */
*  { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh);
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: var(--lh-tight); }
h1 { font-family: var(--font-reading); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h2 { font-family: var(--font-reading); font-size: clamp(1.25rem, 3vw, 1.6rem); }
p  { margin: 0 0 1rem; }
a  { color: var(--color-accent); }

/* fieldset/legend/select: reflow 320 px — min-width/max-width guards (CI-asserted: a11y-static.test.mjs). */
fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
legend   { max-width: 100%; padding: 0; }
select   { max-width: 100%; }

/* ============================================================
   FOCUS + SKIP-LINK
   ============================================================ */
:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 0.5rem; top: -3rem;
  background: var(--color-accent); color: var(--color-accent-fg);
  padding: 0.5rem 0.9rem; border-radius: var(--radius); z-index: 100;
  transition: top 0.15s ease; text-decoration: none; font-weight: var(--fw-medium);
}
.skip-link:focus { top: 0.5rem; }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-md);  /* B: głębsza elewacja dark-tech */
}
.app-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 0.65rem clamp(0.9rem, 3vw, 1.5rem); flex-wrap: wrap;
}
/* Brand lockup: logo slot + text group (name + sub-label). JS sets .brand__name via t("chrome.brand"). */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand__logo {
  display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--color-accent-quiet); color: var(--color-accent);
  border: 1px solid var(--color-border); flex: none;
}
.brand__logo svg { display: block; width: 1em; height: 1em; }
.brand__text  { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name  { font-weight: var(--fw-bold); font-size: 0.97rem; letter-spacing: -0.01em; }
.brand__sub   { font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.app-header__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Force [hidden] inside header to actually hide — author .btn{display:inline-flex} overrides UA [hidden]. */
.app-header [hidden] { display: none; }

/* Path badge */
.path-badge {
  font-size: var(--fs-300); padding: 0.22rem 0.65rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-fg); background: var(--color-surface-2); font-weight: var(--fw-medium);
}

/* Language switcher */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch__trigger { gap: 0.4rem; padding: 0.4rem 0.65rem; }
.lang-switch__flag-wrap, .lang-switch__option-flag {
  display: inline-flex; border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(90, 100, 120, 0.7);
}
.lang-switch__flag { display: block; flex: none; }
.lang-switch__label { font-weight: var(--fw-medium); font-size: var(--fs-400); }
.lang-switch__caret { font-size: 0.7em; opacity: 0.8; }
.lang-switch__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 11rem; max-width: 70vw; display: flex; flex-direction: column; padding: 0.3rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__option {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem;
  background: transparent; border: 0; border-radius: calc(var(--radius) - 2px); color: var(--color-fg);
  font: inherit; text-align: left; cursor: pointer; min-height: 44px;
}
.lang-switch__option:hover { background: var(--color-surface-2); }
.lang-switch__option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.lang-switch__option[aria-checked="true"] { font-weight: var(--fw-medium); }
.lang-switch__option-name { flex: 1; }
.lang-switch__option-check { display: inline-flex; width: 1em; color: var(--color-accent); }

/* Theme toggle */
.theme-toggle { gap: 0.4rem; padding: 0.4rem 0.65rem; }
.theme-toggle__icon { display: block; }
.theme-toggle__icon--light { display: none; }
:root[data-theme="light"] .theme-toggle__icon--dark  { display: none; }
:root[data-theme="light"] .theme-toggle__icon--light { display: block; }
.theme-toggle__label { font-size: var(--fs-400); font-weight: var(--fw-medium); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font: inherit; cursor: pointer; font-weight: var(--fw-bold);
  padding: 0.6rem 1.05rem; min-height: 44px;
  border-radius: var(--radius-md); border: 1px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-accent-fg);
  transition: filter var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  text-decoration: none; text-wrap: balance;
}
.btn:hover  { filter: brightness(1.08); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--ghost {
  background: transparent; color: var(--color-fg);
  border-color: var(--color-border);  /* interactive ghost uses strong border */
}
.btn--ghost:hover { background: var(--color-surface-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.btn-row--export { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border-subtle); }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout {
  /* DOMYŚLNIE 1 kolumna — bezpieczne dla KAŻDEJ przeglądarki/cache (path-select bez nav nie wypycha
     treści w prawo). Sidebar to progresywne ulepszenie dodawane TYLKO gdy nav jest widoczny ORAZ
     przeglądarka wspiera :has(). Brak :has() → nav stackuje nad treścią (graceful), bez pustej kolumny. */
  display: grid; grid-template-columns: 1fr;
  gap: var(--gap); max-width: 1200px; margin: 0 auto; padding: var(--gap);
}
.module-nav, .view { min-width: 0; }
/* Sidebar TYLKO desktop (>=721px) ORAZ gdy szyna widoczna. Scope do desktopu jest KONIECZNY:
   :has() ma wyzsza specyficznosc niz mobilne `.layout { 1fr }`, wiec bez tego @media wygralby
   ponizej 720px i sciskal tresc w pusty 220-270px track (na mobile nav jest tylko display:none). */
@media (min-width: 721px) {
  .layout:has(> .module-nav:not([hidden])) { grid-template-columns: minmax(220px, 270px) 1fr; }
}
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .module-nav { display: none; }
}

/* ============================================================
   MODULE NAV
   ============================================================ */
.module-nav {
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: 0.5rem; align-self: start;
  box-shadow: var(--shadow-md);  /* B: głębsza elewacja, separacja od bg */
}
.module-nav__heading {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-muted); padding: 0.5rem 0.65rem; margin: 0; font-weight: var(--fw-bold);
}
.nav-item { display: block; width: 100%; }
.nav-item__btn {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--color-fg); padding: 0.5rem 0.55rem; font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-item__btn:hover { background: var(--color-surface-2); }
.nav-item__btn[aria-current="page"] {
  background: var(--color-accent-quiet); border-color: var(--color-accent);
  box-shadow: inset 3px 0 0 var(--color-accent); font-weight: var(--fw-medium);
}
.nav-item__btn[disabled], .nav-item__btn[aria-disabled="true"] { color: var(--color-locked); cursor: not-allowed; }
.nav-item__icon { font-size: 0.95rem; line-height: 1; display: inline-flex; }
.nav-item__icon svg { width: 1em; height: 1em; vertical-align: -0.05em; }
.nav-item__label { flex: 1; display: flex; flex-direction: column; line-height: 1.2; font-size: var(--fs-400); }
.nav-item__variant { font-size: 0.7rem; color: var(--color-muted); }
.nav-item__status {
  font-size: 0.68rem; color: var(--color-muted); padding: 0.05rem 0.45rem;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); white-space: nowrap;
}
/* Statusy: ZAWSZE ikona + tekst, kolor = WZMOCNIENIE (WCAG 1.4.1) */
.status--completed  .nav-item__icon  { color: var(--color-ok); }
.status--completed  .nav-item__status { color: var(--color-ok); border-color: var(--color-ok); }
.status--in_progress .nav-item__icon { color: var(--color-accent); }
.status--in_progress .nav-item__status { color: var(--color-accent); border-color: var(--color-accent); }
.status--available  .nav-item__icon  { color: var(--color-muted); }
.status--locked .nav-item__icon     { color: var(--color-locked); }
.status--locked .nav-item__status   { color: var(--color-locked); }

/* ============================================================
   VIEW
   ============================================================ */
.view {
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem); min-height: 60vh;
  box-shadow: var(--shadow-md);  /* B: głębsza elewacja, separacja od głębokiego bg */
}
.view:focus { outline: none; }
.view__content { max-width: var(--maxw-content); }
/* Pełna szerokość treści (M19 #159): path-select i inne ekrany „dashboardowe", gdzie hero + siatki kart
   mają wypełnić widok zamiast wciskać się w słup 70ch (makieta 01 robi to przez max-width:none). */
.view__content--full { max-width: none; }
.loading { color: var(--color-muted); font-style: italic; }
.muted   { color: var(--color-muted); }

/* ============================================================
   HUB MODUŁÓW
   ============================================================ */
.hub-view { max-width: none; }
.hub-section-heading {
  font-size: var(--fs-700); margin: var(--sp-5) 0 var(--sp-3);
  font-family: var(--font-reading); letter-spacing: -0.01em;
}
.hub-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.hub-card {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.hub-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}
.hub-card__top     { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hub-card__id      { font-weight: var(--fw-bold); font-size: var(--fs-300); color: var(--color-muted); letter-spacing: 0.05em; }
.hub-card__name    { font-size: var(--fs-600); line-height: 1.25; margin: 0; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.hub-card__meta    { font-size: var(--fs-300); color: var(--color-muted); margin: 0; }
.hub-card__quiz    { font-size: var(--fs-300); color: var(--color-ok); margin: 0; font-weight: var(--fw-medium); }
.hub-card__status  {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-300);
  color: var(--color-muted); white-space: nowrap;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-pill); padding: 0.1rem 0.5rem;
  font-weight: var(--fw-medium);
}
.hub-card__status-icon { display: inline-flex; line-height: 1; }
.hub-card__status-icon svg { width: 1em; height: 1em; }
.hub-card__cta { margin-top: auto; justify-content: center; }
/* Statusy hub — kolor = WZMOCNIENIE (WCAG 1.4.1) */
.hub-card.status--completed { border-color: color-mix(in srgb, var(--color-ok) 40%, var(--color-border-subtle)); }
.hub-card.status--completed  .hub-card__status { color: var(--color-ok); border-color: var(--color-ok); }
.hub-card.status--in_progress { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.hub-card.status--in_progress .hub-card__status { color: var(--color-accent); border-color: var(--color-accent); }
.hub-card.status--locked .hub-card__status { color: var(--color-locked); }
.hub-card--final { border-style: dashed; background: var(--color-surface-2); }
.next-step {
  margin-top: 1.2rem; padding: 0.8rem 1rem;
  background: var(--color-accent-quiet); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm); display: flex; gap: 0.5rem; align-items: baseline;
}
.next-step__icon svg { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.1em; }
.next-step__icon { color: var(--color-accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  margin: 0 0 var(--sp-5); padding: var(--sp-2) 0 var(--sp-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.hero__title {
  font-family: var(--font-reading); font-size: var(--fs-900); line-height: 1.05;
  margin: 0 0 var(--sp-3); letter-spacing: -0.02em;
}
/* Akcent: SOLIDNY kolor — domyślnie (M18 flat-accent, DESIGN-PROPOSAL p.3 + a11y: gradient nie jest nośnikiem informacji,
   background-clip:text niewidoczne w forced-colors). Gradient (--grad-accent) dostępny jako klasa dekoracyjna
   .hero__accent--grad dla kontekstów czysto ozdobnych (nie stosowany tu domyślnie). */
.hero__accent { color: var(--color-accent); }
/* Klasa dekoracyjna (opcjonalna): gradient na słowie akcentu. Nie stosuj tam, gdzie kolor niesie znaczenie. */
.hero__accent--grad {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__lead { font-size: var(--fs-600); color: var(--color-muted); max-width: var(--maxw-reading); margin: 0; }
.path-select__heading { margin-top: var(--sp-3); }

/* ============================================================
   PATH SELECT
   ============================================================ */
.privacy-note {
  font-size: var(--fs-400); color: var(--color-muted); max-width: var(--maxw-reading);
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.path-cards {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--sp-4);
}
.path-card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.path-card:hover, .path-card:focus-within {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}
/* Sigil: ID ścieżki jako wizualna kotwica (S1/S2/S3/S4). Nowy element; CSS obrysuje go obramowaniem. */
.path-card__head   { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.2rem; }
.path-card__sigil  {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--color-surface-2); border: 1px solid var(--color-border);
  font-weight: var(--fw-bold); font-size: 0.95rem; letter-spacing: -0.02em; flex: none; color: var(--color-fg);
}
.path-card__name   { margin: 0; font-size: var(--fs-600); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.path-card__role   { font-size: var(--fs-300); color: var(--color-muted); margin: 0; }
.path-card__meta   { font-size: var(--fs-400); color: var(--color-muted); margin: 0; }
.path-card__details summary { cursor: pointer; color: var(--color-accent); font-size: var(--fs-400); padding: 0.2rem 0; }
.path-card__list   { margin: 0.3rem 0; padding-left: 1.1rem; font-size: var(--fs-400); color: var(--color-muted); }
.path-card__cta    { margin-top: auto; }
/* Rekomendowana: akcent-rule u góry + lekki akcent border */
.path-card--recommended { border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border-subtle)); box-shadow: var(--shadow-md); }
.path-card--recommended::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-accent);
}
.path-card__badge {
  align-self: flex-start; margin: 0 0 var(--sp-1); padding: 0.2rem 0.65rem;
  font-size: var(--fs-300); font-weight: var(--fw-bold); letter-spacing: 0.02em;
  color: var(--color-accent-fg); background: var(--color-accent); border-radius: var(--radius-pill);
}
/* Formatywna S4: dashed border, subtelne wyróżnienie */
.path-card--formative { border-style: dashed; border-color: var(--color-border); background: var(--color-surface-2); }
.path-card--formative .path-card__sigil { background: var(--color-accent-quiet); color: var(--color-accent); border-color: transparent; }

/* ============================================================
   QUIZ / PYTANIA
   ============================================================ */
.quiz-item  { margin: var(--sp-5) 0; }
.quiz-item .quiz-question { margin: 0; }
.quiz-question {
  margin: var(--sp-5) 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-4); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.quiz-question__prompt { font-weight: var(--fw-medium); font-size: var(--fs-600); margin-bottom: var(--sp-3); display: block; }
.quiz-meta  { font-size: var(--fs-300); color: var(--color-muted); }
.quiz-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 var(--sp-3); }
.quiz-chip  {
  font-size: var(--fs-300); padding: 0.1rem 0.55rem; border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill); color: var(--color-muted); background: var(--color-surface-2);
}
.quiz-chip--difficulty { text-transform: uppercase; letter-spacing: 0.03em; }
/* Options — min-height 44 px (WCAG 2.5.5 touch target) */
.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.option {
  display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.65rem 0.8rem; min-height: 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.option label { min-width: 0; cursor: pointer; }
.option:hover { border-color: var(--color-accent); }
.option:focus-within { border-color: var(--color-accent); box-shadow: var(--ring-accent); }
.option:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-quiet);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.option input { margin-top: 0.2rem; accent-color: var(--color-accent); }
.option--inline { flex: 1 1 220px; min-width: 0; }
.match-row  { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0; }
.match-row label { flex: 1 1 12ch; min-width: 0; }
.match-row select {
  font: inherit; padding: 0.4rem; min-height: 44px; background: var(--color-surface); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); flex: 1 1 100%;
}
.seq-row     { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0; }
.seq-row__pos { width: 2rem; color: var(--color-muted); }

/* ============================================================
   FEEDBACK
   ============================================================ */
.feedback {
  margin-top: var(--sp-3); padding: 0.75rem 0.95rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle); border-left-width: 4px;
  animation: feedback-in var(--dur-base) var(--ease);
}
.feedback--correct  { border-color: var(--color-ok);  border-left-color: var(--color-ok);  background: color-mix(in srgb, var(--color-ok)  12%, transparent); }
.feedback--incorrect { border-color: var(--color-bad); border-left-color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 10%, transparent); }
.feedback--critical  { border-color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 10%, transparent); }
.feedback__head { font-weight: var(--fw-bold); display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.feedback__head svg { width: 1.15em; height: 1.15em; flex: none; }
.feedback--correct  .feedback__head { color: var(--color-ok); }
.feedback--incorrect .feedback__head { color: var(--color-bad); }
@keyframes feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.locked-note {
  display: flex; gap: 0.5rem; align-items: baseline; color: var(--color-muted);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: 0.7rem 0.9rem;
}

/* ============================================================
   TREŚĆ MODUŁU — READING SERIF
   ============================================================ */
/* Prose: paragrafy koncepcji w serif o zwiększonej mierze (adresy "mało czytelne"). */
.module-screen { margin: 1.4rem 0; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border-subtle); }
.module-screen p, .module-screen li {
  font-family: var(--font-reading); font-size: 1.1rem; line-height: var(--lh-reading);
  max-width: var(--maxw-reading);
}
.module-screen h2 { font-family: var(--font-reading); font-size: var(--fs-700); margin: 1.5rem 0 0.6rem; }
.module-screen--decision {
  border-left: 3px solid var(--color-accent); padding-left: 0.9rem;
  background: var(--color-surface-2); border-radius: var(--radius-sm); border-bottom: 0;
}
.module-summary { margin-top: 1.6rem; }
.definition {
  font-family: var(--font-reading); font-size: 1.05rem; line-height: 1.65;
  background: var(--color-surface-2); border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: 0.7rem 0.95rem; max-width: var(--maxw-reading);
}
.definition em { color: var(--color-muted); font-style: italic; }
.block-group { display: flex; flex-direction: column; gap: 0.5rem; max-width: var(--maxw-reading); }
.block-links { padding-left: 1.1rem; margin: 0.5rem 0; font-size: var(--fs-400); }

/* ============================================================
   CALLOUTY — ikona + słowo (nie sam kolor, WCAG 1.4.1)
   ============================================================ */
.callout {
  margin: 0.9rem 0; padding: 0.75rem 0.95rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle); background: var(--color-surface-2);
}
.callout__title {
  font-weight: var(--fw-bold); margin-bottom: 0.3rem;
  display: flex; gap: 0.45rem; align-items: center;
}
.callout--warn { border-color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 9%, transparent); }
.callout--safe { border-color: var(--color-ok);   background: color-mix(in srgb, var(--color-ok)  8%, transparent); }
.callout--info { border-color: var(--color-accent); }
.callout--warn .callout__icon { color: var(--color-warn); }
.callout--safe .callout__icon { color: var(--color-ok); }
.callout--info .callout__icon { color: var(--color-accent); }

/* ============================================================
   TABELA + DIAGRAM
   ============================================================ */
.content-table__wrap { overflow-x: auto; margin: 0.8rem 0; }
.content-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.content-table caption { text-align: left; color: var(--color-muted); padding-bottom: 0.4rem; }
.content-table th, .content-table td { border: 1px solid var(--color-border-subtle); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.content-table th { background: var(--color-surface-2); }
.diagram { margin: 0.9rem 0; }
.diagram__ascii {
  background: var(--color-surface-2); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 0.7rem; overflow-x: auto;
  font-family: var(--font-mono); font-size: 0.82rem;
}
.diagram__alt { color: var(--color-fg); font-size: 0.9rem; }

/* ============================================================
   INTERAKCJE MODUŁOWE
   ============================================================ */
.interaction { margin: 0.6rem 0 0.4rem; }
.classify-legend { margin-bottom: 0.8rem; }
.classify-legend ul { padding-left: 1.1rem; margin: 0.3rem 0; font-size: var(--fs-400); }
.classify-item {
  margin: 0.9rem 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem; min-width: 0;
}
.classify-item__text { font-weight: var(--fw-medium); }
.classify-item__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.classify-item__fb:empty { display: none; }
.rubric-crit {
  margin: 0.9rem 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem; min-width: 0;
}
.rubric-crit__name   { margin-bottom: 0.2rem; }
.rubric-crit__prompt { color: var(--color-muted); font-size: var(--fs-400); margin: 0.2rem 0 0.5rem; }
.rubric-crit__fb:empty { display: none; }
.tune-controls { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tune-control { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tune-control label { font-size: var(--fs-400); font-weight: var(--fw-medium); }
.tune-control select {
  font: inherit; padding: 0.5rem; min-height: 44px;
  background: var(--color-surface); color: var(--color-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.tune-output {
  margin: 0.9rem 0; padding: 0.8rem 1rem; border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius); background: var(--color-surface-2);
}
.tune-output__row   { margin: 0.4rem 0; }
.tune-output__row p { margin: 0.15rem 0 0; color: var(--color-muted); font-size: var(--fs-400); max-width: var(--maxw-reading); }
.tune-output__row b { font-family: var(--font-mono); font-size: 0.9rem; }
.tune-checkpoint    { margin: 1rem 0 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; min-width: 0; }
.tune-checkpoint__fb:empty { display: none; }
/* Skala Holaka (maturity-check) */
.maturity-scale       { margin: 1rem 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0.8rem 1rem; min-width: 0; }
.maturity-scale__label { font-weight: var(--fw-medium); }
.maturity-scale__items { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.maturity-scale__fb:empty { display: none; }

/* ============================================================
   EKRAN WYNIKU
   ============================================================ */
/* Score ring: CSS conic-gradient sterowany CSS custom property --pct (set via style attr w JS).
   ring-c = kolor łuku (--color-ok dla pass, --color-warn dla fail) — set per instancję. */
.result__score {
  --pct: 0; --ring-c: var(--color-ok);
  width: 148px; height: 148px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--ring-c) calc(var(--pct) * 1%), var(--color-surface-2) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
  margin: var(--sp-2) 0;
}
/* Dziura: tworzy pierścień (kolor = tło powierzchni wynikowej). */
.result__score::after {
  content: ""; width: 116px; height: 116px; border-radius: 50%;
  background: var(--color-surface); position: absolute;
}
.result__score-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
}
.result__score-value {
  font-family: var(--font-reading); font-size: 2.4rem; line-height: 1; font-weight: var(--fw-bold);
}
.result__score-label { color: var(--color-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
/* Badge zaliczenia: ikona + SŁOWO (nie sam kolor, WCAG 1.4.1). */
.result-status {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: var(--sp-2) 0 0;
  padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); font-weight: var(--fw-bold);
  border: 1px solid var(--color-border);
}
.result-status--pass { color: var(--color-ok);  border-color: var(--color-ok);  background: color-mix(in srgb, var(--color-ok)  10%, transparent); }
.result-status__icon svg { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.1em; }
.result-notice { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--color-border-subtle); border-left: 4px solid var(--color-warn); background: var(--color-surface-2); }
.result-notice--fail { }
.result-notice__score { font-family: var(--font-reading); font-size: var(--fs-700); color: var(--color-fg); }
/* Bramki: ikona + słowo (WCAG 1.4.1), niespełnione wyróżnione. */
.cert-gates { margin-top: var(--sp-4); }
.cert-gates__list { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.45rem; }
.cert-gate {
  padding: 0.45rem 0.75rem; border: 1px solid var(--color-border-subtle); border-left-width: 4px;
  border-radius: var(--radius-sm); background: var(--color-surface-2);
}
.cert-gate--ok   { border-left-color: var(--color-ok); }
.cert-gate--fail { border-left-color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 8%, transparent); }
.cert-gate__icon { font-weight: var(--fw-bold); }
.cert-gate--ok .cert-gate__icon   { color: var(--color-ok); }
.cert-gate--fail .cert-gate__icon { color: var(--color-bad); }
.weak-list { padding-left: 1.1rem; color: var(--color-muted); max-width: var(--maxw-reading); }

/* ============================================================
   HUB MODUŁÓW — EYEBROW + NAGŁÓWEK + PASEK POSTĘPU (#141, M18 STAGE B)
   ============================================================ */
/* Duży nagłówek h1 w hubie (hub-h1): większy niż domyślny h1 (2.2rem). */
.hub-h1 {
  font-family: var(--font-reading); font-size: var(--fs-800);
  margin: 0 0 0.4rem; letter-spacing: -0.01em;
}
/* Intro tekst hubu (hub-intro): subtelniejszy od domyślnego p. */
.hub-intro {
  color: var(--color-muted); max-width: var(--maxw-reading); margin: 0 0 var(--sp-3);
}
/* Pasek postępu wymaganych modułów (path-progress).
   Separator kart: --color-border-subtle (dekoracyjny). Track: --color-surface-2.
   Fill: --color-accent. aria-label na span.path-progress__bar (WCAG 1.1.1). */
.path-progress {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: var(--sp-3) 0 0; font-size: var(--fs-400); color: var(--color-muted);
}
.path-progress__bar {
  flex: 1; min-width: 160px; max-width: 300px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle); overflow: hidden;
}
.path-progress__fill {
  display: block; height: 100%;
  background: var(--color-accent); border-radius: var(--radius-pill);
  transition: width var(--dur-base) var(--ease);
}
.path-progress b { color: var(--color-fg); }

/* ============================================================
   PATH-CARD — ROLE (#140, M18 STAGE B)
   ============================================================ */
/* Role: podtytuł karty ścieżki pod nazwą (np. „Główna ścieżka praktyczna"). */
.path-card__role {
  font-size: var(--fs-300); color: var(--color-muted); display: block; margin-top: 0.1rem;
}

/* ============================================================
   MODULE VIEW — TYTUŁ, META, BLOKI INTERAKCJI, NASTĘPNY KROK (#142, M18 STAGE B)
   ============================================================ */
/* Tytuł modułu: serif, wyraźna hierarchia. */
.module-title {
  font-family: var(--font-reading); font-size: var(--fs-800);
  margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
/* Meta-pasek modułu: monospaced, tło surface-2 z dekoracyjnym obramowaniem. */
.module-meta {
  font-family: var(--font-mono); font-size: var(--fs-300);
  color: var(--color-muted); background: var(--color-surface-2);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; display: inline-flex; flex-wrap: wrap;
  gap: 0.2rem 0.9rem; margin: 0 0 1.4rem; max-width: 100%; /* reflow 320px */
}
/* Reset postępu MODUŁU (M20 #166): subtelna akcja destrukcyjna, oddzielona separatorem od „Ukończ"/„Moduły".
   Domyślnie wyciszona (muted), na hover sygnał ostrzegawczy (--color-bad). Zachowuje 44px touch target z .btn. */
.module-reset { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: flex-end; }
.module-reset__btn { color: var(--color-muted); border-color: var(--color-border-subtle); font-weight: var(--fw-medium); }
.module-reset__btn:hover { color: var(--color-bad); border-color: var(--color-bad); background: color-mix(in srgb, var(--color-bad) 8%, transparent); }
/* ============================================================
   IKONY inline SVG (UX-6 #75)
   ============================================================ */
.icon { flex: none; vertical-align: -0.125em; }
.brand__logo svg  { display: block; width: 1em; height: 1em; }
.callout__title   { align-items: center; }
.callout__icon svg, .locked-note__icon svg, .next-step__icon svg, .cert-gate__icon svg,
.result-status__icon svg { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.1em; }
.next-step__icon, .locked-note__icon { color: var(--color-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  color: var(--color-muted); font-size: var(--fs-400); text-align: center;
  padding: 1.4rem 1rem; border-top: 1px solid var(--color-border-subtle);
}
/* Wersja aplikacji — prawy dolny róg. Subtelna, tabularna numeracja; locale-neutralna. */
.app-version {
  display: block; text-align: right; margin: 0.6rem 0.2rem 0 0;
  color: var(--color-muted); font-size: var(--fs-300);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.privacy-note a { color: var(--color-accent); }

/* ============================================================
   DRUK (ekran Wynik jako czytelny statyczny obraz)
   ============================================================ */
@media print {
  .app-header, .app-footer, .module-nav, .btn-row { display: none !important; }
  .result__score { background: none !important; box-shadow: none !important; }
  .result__score::after { background: white !important; }
  .result__score-value { color: #1d4ed8 !important; }
  .result__score-label { color: #444444 !important; }
}

/* ============================================================
   REDUCED MOTION — gasi transition I animation (keyframe-safe)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}