/* Badanie oceny wykonawcy e-learningu -- style
   Paleta, typografia i tokeny wg materialy/indentyfikacja_wizualna/
   "E-learning - New Brand & Design System 2.1.pdf" (v2.0, WCAG 2.2 AA) -- patrz CLAUDE.md.
   Zastapilo Brand Guidelines v1.1: kolor marki (Blue 500) juz nie jest tlem CTA ani
   malego tekstu (kontrast ~3:1 na bieli, nie zdaje 4,5:1) -- role przejely Ink 900
   (glowne CTA, tresc) i Blue 600 (linki, akcenty funkcjonalne). Dekoracyjne gradienty
   sa wycofane poza symbolem logo. */

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;400;500;600;700&display=swap');

:root {
  /* --- brand scale --- */
  --blue-50: #EAF7FC;
  --blue-300: #60B7DD;
  --blue-500: #009EE3;
  --blue-600: #007EB6;
  --blue-700: #006F9F;
  --navy-900: #00235F;

  --ink-900: #101828;
  --ink-950: #0B1220;

  /* --- neutral scale --- */
  --neutral-0: #FFFFFF;
  --neutral-50: #F2F2F2;
  --neutral-200: #E0E0E0;
  --neutral-300: #BDBDBD;
  --neutral-500: #767676;
  --neutral-600: #4F4F4F;
  --neutral-900: #101828;

  /* --- status --- */
  --success-50: #ECFDF3; --success-600: #027A48;
  --warning-50: #FFFAEB; --warning-700: #B54708;
  --error-50: #FEF3F2;   --error-600: #B3261E;
  --info-50: #EFF8FF;    --info-600: #175CD3;

  /* --- semantic tokens --- */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-0);

  --link-default: var(--blue-600);
  --link-hover: var(--blue-700);
  --link-on-dark: var(--blue-300);

  --surface-canvas: var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-brand-subtle: var(--blue-50);
  --surface-primary: var(--ink-900);
  --surface-primary-hover: var(--ink-950);

  --action-primary-bg: var(--ink-900);
  --action-primary-bg-hover: var(--ink-950);
  --action-primary-text: var(--neutral-0);
  --action-secondary-bg: var(--neutral-0);
  --action-secondary-text: var(--neutral-900);

  --border-default: var(--neutral-300);
  --border-subtle: var(--neutral-200);
  --border-brand: var(--blue-600);
  --focus-ring: var(--blue-600);

  --icon-functional: var(--blue-600);

  /* poziomy ryzyka = tokeny statusu (high->error, elevated->warning, moderate->info, low->success) */
  --risk-high: var(--error-600);
  --risk-elevated: var(--warning-700);
  --risk-moderate: var(--info-600);
  --risk-low: var(--success-600);

  /* wylacznie symbol logo -- gradienty dekoracyjne w UI sa wycofane (Brand & Design System 2.1) */
  --gradient-logo: linear-gradient(135deg, #25E4FE, var(--blue-500));

  --font: 'Bai Jamjuree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 12px;
  --max-width: 720px;
}

* { box-sizing: border-box; }

/* Bez tego strony o roznej dlugosci tresci (np. badanie.html na krotkim pytaniu vs
   dlugi index.html) maja albo nie maja paska przewijania, co przesuwa wysrodkowana
   kolumne (--max-width) o jego szerokosc -- logo przestawaloby byc w tej samej
   pozycji x na obu stronach mimo identycznego CSS. */
html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--surface-canvas);
  font-size: 17px;
  line-height: 1.5;
}

h1, h2 { font-weight: 700; margin: 0 0 0.5em; line-height: 1.2; }
h3, h4 { font-weight: 600; margin: 0 0 0.5em; line-height: 1.25; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

/* Link w tresci wyroznij takze podkresleniem (WCAG -- kolor nie moze byc jedynym
   nosnikiem informacji o interaktywnosci); kontrolki/przyciski nadpisuja ponizej. */
a {
  color: var(--link-default);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--link-hover); }

button {
  font-family: var(--font);
  cursor: pointer;
}

/* --- layout --- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* .app-header i .app-main musza wyrownywac swoja tresc do tej samej lewej
   krawedzi na kazdej szerokosci ekranu -- oba maja wiec ten sam uklad: zewnetrzny
   padding jako "podloga" + wewnetrzny element o tym samym max-width wysrodkowany
   w dostepnej przestrzeni (analogicznie #app-root ponizej). Przed ta zmiana
   .app-header mial padding bezposrednio (bez wysrodkowanego wewnetrznego
   kontenera), wiec logo trzymalo sie lewej krawedzi viewportu, a karta z pytaniem
   (wysrodkowana wzgledem --max-width) na szerokich ekranach byla mocno przesunieta
   w prawo -- logo i tresc przestawaly byc w jednej linii. */
.app-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}
.app-header-inner {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header a { text-decoration: none; }
/* logo-color-flush.png = logo-color.png bez wewnetrznego marginesu ochronnego
   (przycieta wersja) -- z oryginalnym plikiem samo logo (bez marginesu) nigdy nie
   zaczynalo sie dokladnie na lewej krawedzi obrazka, wiec nawet przy poprawnym
   wyrownaniu kontenera logo optycznie "uciekalo" w prawo wzgledem tekstu. */
/* display:block usuwa "descender gap" pod obrazkiem inline (typowe kilka px odstepu
   pod img, gdy jest opakowany w <a> -- widoczne tylko na badanie.html, bo tam logo
   jest linkiem; index.html nie mial tego problemu, bo tam img nie jest w <a>). */
.app-header img { height: 26px; display: block; }

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 64px;
}

/* #app-root musi miec jawna szerokosc -- bez tego kurczy sie do tresci (shrink-to-fit
   pod align-items:center), przez co .card ponizej (width:100% wzgledem #app-root)
   zmienial szerokosc w zaleznosci od dlugosci tekstu na danym pytaniu. */
#app-root {
  width: 100%;
  max-width: var(--max-width);
}

.card {
  width: 100%;
}

/* --- progress bar --- */
.progress-wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-bottom: 32px;
}
.progress-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.progress-track {
  height: 6px;
  background: var(--surface-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--blue-500);
  transition: width 0.3s ease;
}

/* --- question screen --- */
.question-area {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--link-default);
  margin-bottom: 8px;
}
.question-text {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.question-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: -16px;
  margin-bottom: 20px;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid var(--border-default);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--surface-canvas);
  transition: border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.answer-option:hover { border-color: var(--blue-300); }
.answer-option:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.answer-option.selected {
  border-color: var(--border-brand);
  background: var(--surface-brand-subtle);
}
.answer-option .short-label {
  font-weight: 500;
  font-size: 1rem;
  display: block;
  color: var(--text-primary);
}
.answer-option .full-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 4px;
  display: block;
}

.answer-meta-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.answer-meta-row button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 4px 0;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}

/* Primary CTA: Ink 900, hover Ink 950 -- Blue zostaje linkiem i akcentem, nie tlem
   przycisku (patrz "Co sie zmienilo" w Brand & Design System 2.1). Ink900->Ink950
   to bardzo bliskie odcienie (oba niemal czarne) -- sama zmiana tla ledwo widac,
   wiec hover dostaje dodatkowo uniesienie (cien + przesuniecie), zeby stan po
   najechaniu byl jednoznacznie widoczny niezaleznie od tego, jak dobrze oko
   rozroznia dwa bardzo ciemne odcienie. Hex-y hover pozostaja dokladnie takie,
   jak nakazuje brand book -- to jest dodatkowy sygnal, nie zamiennik. */
.btn {
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* .btn-primary jest czesto <a> (linki-przyciski w index.html), a globalna regula
   "a:hover" ma specyficznosc CSS (0,1,1) -- wyzsza niz sam ".btn-primary" (0,1,0) --
   wiec bez jawnego "color" tutaj tekst na hover/focus/visited przebijalby sie na
   Blue 700 z tej globalnej reguly zamiast zostac bialy. Realny bug kontrastu
   (ciemny tekst na ciemnym tle przycisku), nie tylko kosmetyka -- stad kazdy stan
   ponizej jawnie przypina kolor tekstu. */
.btn-primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-text);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary:visited {
  color: var(--action-primary-text);
}
.btn-primary:hover {
  background: var(--action-primary-bg-hover);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.28);
  transform: translateY(-1px);
}
.btn-primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border: 2px solid var(--border-default);
}
.btn-secondary:hover { border-color: var(--ink-900); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}
.btn-text {
  background: none;
  color: var(--text-muted);
}

/* --- multi-select (checkboxy dla K2/K7) --- */
.answer-option.checkbox-style { display: flex; align-items: center; gap: 12px; }
.answer-option.checkbox-style input { width: 18px; height: 18px; accent-color: var(--blue-600); }

/* --- result screen --- */
.result-band {
  border-radius: var(--radius);
  padding: 32px 28px;
  color: var(--text-inverse);
  margin-bottom: 24px;
}
.result-band.high { background: var(--risk-high); }
.result-band.elevated { background: var(--risk-elevated); }
.result-band.moderate { background: var(--risk-moderate); }
.result-band.low { background: var(--risk-low); }
.result-band .band-eyebrow { font-size: 0.85rem; opacity: 0.85; margin-bottom: 4px; }
.result-band h2 { font-size: 1.6rem; margin-bottom: 8px; }

.flag-summary {
  display: flex;
  gap: 16px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.flag-chip {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--surface-subtle);
  color: var(--text-primary);
}
.flag-chip.critical { background: var(--error-50); color: var(--error-600); }

.gap-list { list-style: none; padding: 0; margin: 0; }
.gap-list li {
  border-left: 3px solid var(--neutral-300);
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--surface-subtle);
  border-radius: 0 8px 8px 0;
}
.gap-list li.critical { border-left-color: var(--risk-high); }

/* --- lead form --- */
.lead-form {
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 24px;
}
.lead-form label { display: block; font-weight: 500; margin-bottom: 6px; }
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border-default);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.lead-form input[type="email"]:focus-visible,
.lead-form input[type="tel"]:focus-visible,
.lead-form input[type="text"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.consent-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--blue-600); }
.consent-row.required { font-weight: 500; color: var(--text-primary); }

.hint { font-size: 0.85rem; color: var(--text-muted); }
.error-text { color: var(--risk-high); font-size: 0.85rem; margin-top: -10px; margin-bottom: 12px; }

.contact-cta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.contact-cta p { margin: 0 0 6px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .app-header { padding: 16px 16px; }
  .app-main { padding: 20px 16px 48px; }
  .question-text { font-size: 1.1rem; }
}