/* Ankieta miejska - styl respondenta: spokojny, urzędowy język wizualny portalu miejskiego
   (jasne tło, niebieski akcent, prostokątne przyciski, rozbudowana stopka). To NIE jest strona urzędu:
   nie używamy herbu, logo ani znaków towarowych miasta.
   Zero zewnętrznych zasobów (CSP: default-src 'self'). Rozmiary w rem, więc skalują się z "Rozmiarem tekstu"
   (--scale ustawiane z JS przez CSSOM; 100/125/150/200%) i z powiększeniem przeglądarki.

   KONTRAST (WCAG 1.4.3 tekst >= 4.5:1; 1.4.11 elementy nietekstowe i fokus >= 3:1), policzone wzorem WCAG 2.x:
   JASNY (domyślny)  tło #ffffff, powierzchnia #f4f7fa
     tekst #1b2733: 15.2 na bieli, 14.1 na powierzchni   | tekst drugorzędny #4a5a6a: 7.1 / 6.6
     akcent tekstowy/interaktywny #00659a: 6.3 na bieli, 5.9 na powierzchni, 5.4 na zaznaczeniu #e3f0f8 (>= 4.5, więc może być tekstem)
     biały na #00659a (przyciski): 6.3 | błąd #a12622: 7.5 | sukces #1b6b3a: 6.5 | tekst na ostrzeżeniu #fff4d1: 13.8
     akcent graficzny #0089c9: 3.9 na bieli, 3.6 na powierzchni (>= 3:1) - WYŁĄCZNIE elementy nietekstowe (linie, wypełnienia, ikony)
     obramowanie dekoracyjne kart #c9d3dc: 1.5 (tylko ozdobna linia, nigdy jedyny wyróżnik kontrolki)
     obramowanie KONTROLEK --border-ui #6b7b8a: 4.4 na bieli, 4.1 na powierzchni (>= 3:1, WCAG 1.4.11)
     fokus: obrys 3px #1b2733 (15.2 na bieli) z 2px przerwą tła; na zaznaczonych/niebieskich polach przerwa daje kontrast >= 3:1
   CIEMNY (opcja, przełączana ręcznie; NIE wymuszany przez prefers-color-scheme)
     tło #0f1a24, powierzchnia #172431 | tekst #e8eef3: 15.0 / 13.5 | drugorzędny #b4c2ce: 9.7 / 8.7
     akcent tekstowy #6ec3f0: 9.0 / 8.1 (na zaznaczeniu #1d3a52 6.0) | ciemny tekst na akcencie: 9.0 | błąd #ff9b94: 7.8 | sukces #7fd9a0: 9.3
     graficzny #3aa9e0: 6.7 | obramowanie kontrolek #8aa0b3: 6.5 / 5.8 | fokus żółty #ffbf00: 10.6 / 9.5
   WYSOKI KONTRAST: żółty #ffff00 na czarnym 19.6; fokus #00ffff 16.7; błąd #ff9a9a 10.3
   Tryb systemowy forced-colors: kolory zostawiamy systemowi (blok na końcu). */

:root {
  --bg: #ffffff;
  --surface: #f4f7fa;
  --text: #1b2733;
  --muted: #4a5a6a;
  --primary: #00659a;
  --on-primary: #ffffff;
  --border: #c9d3dc;
  --border-ui: #6b7b8a;
  --focus: #1b2733;
  --err: #a12622;
  --ok: #1b6b3a;
  --sel: #e3f0f8;
  --note: #fff4d1;
  --brand: #0089c9;
  --accent: #2e6f62;
  --coin: #0089c9;
  --deco: #e6edf3;
  --scale: 1;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1a24; --surface: #172431; --text: #e8eef3; --muted: #b4c2ce; --primary: #6ec3f0;
  --on-primary: #0f1a24; --border: #3a4d5e; --border-ui: #8aa0b3; --focus: #ffbf00; --err: #ff9b94; --ok: #7fd9a0;
  --sel: #1d3a52; --note: #3a3015; --brand: #3aa9e0; --accent: #7fc9b8; --coin: #3aa9e0; --deco: #1d2e3d;
}
:root[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000; --surface: #000000; --text: #ffff00; --muted: #ffff00; --primary: #ffff00;
  --on-primary: #000000; --border: #ffff00; --border-ui: #ffff00; --focus: #00ffff; --err: #ff9a9a; --ok: #ffff00;
  --sel: #1a1a1a; --note: #000000; --brand: #ffff00; --accent: #00ffff; --coin: #ffff00; --deco: #000000;
}
/* prefers-contrast: mocniejsze ramki w motywach jasnym i ciemnym */
@media (prefers-contrast: more) {
  :root:not([data-theme="contrast"]) { --border: var(--border-ui); --muted: var(--text); }
}

[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { font-size: calc(100% * var(--scale)); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

button, input, textarea { font: inherit; letter-spacing: inherit; word-spacing: inherit; color: inherit; }

/* Układ przyjazny dysleksji (WCAG 1.4.12 jako wartości docelowe) */
html.dyslexia body {
  font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  line-height: 1.8;
  text-align: left;
  font-style: normal;
}
html.dyslexia p { margin-block: 0 2em; }
html.dyslexia em, html.dyslexia i { font-style: normal; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; max-width: 70ch; }
a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1:focus, h2:focus { outline: none; }
h1:focus-visible, h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: 0.5rem; top: -4rem; z-index: 100;
  background: var(--primary); color: var(--on-primary); padding: 0.75rem 1rem; border-radius: 4px;
  min-height: 44px; font-weight: 700;
}
.skip-link:focus { top: 0.5rem; }

/* Układ strony */
.site-header, .site-footer { border-color: var(--border); border-style: solid; border-width: 0; }
.site-footer { margin-top: auto; font-size: 0.95rem; }
.bar { max-width: 64rem; margin: 0 auto; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.brand { font-weight: 700; margin: 0; }
.bar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
main { max-width: 64rem; width: 100%; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }
/* Czytelna szerokość treści; tylko ekran wyboru (kafelki) korzysta z pełnej szerokości */
main > * { max-width: 50rem; }
main[data-view="groups"] > * { max-width: none; }
.site-footer p { margin: 0; }

/* Przyciski: cel dotykowy >= 44 px (WCAG 2.5.8; stosujemy też 2.5.5) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
  min-height: max(44px, 2.75rem); min-width: max(44px, 2.75rem); padding: 0.5rem 1.25rem;
  border: 2px solid var(--primary); border-radius: 4px; background: var(--primary); color: var(--on-primary);
  font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.3;
}
.btn.secondary { background: var(--bg); color: var(--primary); border-color: var(--primary); }
.btn.quiet { background: transparent; color: var(--primary); border-color: transparent; text-decoration: underline; padding-inline: 0.6rem; }
.btn.danger { background: transparent; color: var(--err); border-color: var(--err); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 1; background: transparent; color: var(--muted); border-color: var(--muted); border-style: dashed; cursor: not-allowed; }
.btn.small { padding: 0.25rem 0.6rem; font-weight: 600; }

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-block: 0.75rem; }

/* Karty i listy */
.card { background: var(--bg); border: 1px solid var(--border); border-block-start: 4px solid var(--brand); border-radius: 4px; padding: 1rem; margin-block: 1rem; }
.card-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.75rem; }
.card-link { display: block; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; min-height: 44px; }
.card-link:hover { border-color: var(--primary); }
.card-link .t { display: block; font-weight: 700; font-size: 1.15rem; text-decoration: underline; color: var(--primary); }
.card-link .d { display: block; color: var(--muted); }

.notice { border: 1px solid var(--border); border-inline-start-width: 0.5rem; background: var(--note); padding: 0.75rem 1rem; border-radius: 4px; margin-block: 1rem; }
.notice p:last-child { margin-bottom: 0; }
.privacy { border: 1px solid var(--border); border-radius: 4px; padding: 1rem; background: var(--surface); }

/* Formularze */
fieldset { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem 1rem; margin: 1rem 0; min-inline-size: 0; }
legend { font-weight: 700; padding-inline: 0.4rem; max-width: 100%; }
legend.row-text { font-size: 1.1rem; }
.legend-hint { font-weight: 600; color: var(--muted); }
.field-help { color: var(--muted); margin: 0.25rem 0 0.75rem; }
.q-hint, .q-note { margin: 0 0 0.75rem; }
.q-note { font-weight: 600; }

.check, .opt {
  display: flex; align-items: center; gap: 0.75rem; min-height: max(44px, 2.75rem);
  padding: 0.5rem 0.75rem; border: 2px solid var(--border-ui); border-radius: 4px; cursor: pointer; background: var(--bg);
}
.check { border-color: transparent; background: transparent; padding-inline: 0.25rem; }
input[type="radio"], input[type="checkbox"] {
  inline-size: 1.5rem; block-size: 1.5rem; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer;
}
/* Zaznaczenie widać nie tylko kolorem: grubsza ramka + wypełnione tło + systemowa kropka/ptaszek */
.opt:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); background: var(--sel); font-weight: 600; }
.opt:has(input:focus-visible), .check:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt-num { flex: none; min-inline-size: 1.75rem; text-align: center; font-weight: 700; border: 2px solid var(--border-ui); border-radius: 3px; padding-inline: 0.2rem; }
.opt-text { flex: 1; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; margin-block: 0.5rem; }
.opt-row .opt { flex: 1 1 13rem; }
.opt-row .btn { flex: 0 0 auto; }
.other-box { margin: 0 0 0.5rem 1rem; }
.other-box[hidden] { display: none; }
.scale .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0 0.5rem; }

label.field { display: block; font-weight: 700; margin-bottom: 0.35rem; }
input[type="text"], input[type="number"], textarea {
  inline-size: 100%; padding: 0.6rem 0.75rem; border: 2px solid var(--border-ui); border-radius: 4px;
  background: var(--bg); color: var(--text); min-height: max(44px, 2.75rem);
}
textarea { resize: vertical; min-block-size: 9rem; line-height: 1.5; }
.char-count { color: var(--muted); margin: 0.25rem 0 0.75rem; font-size: 0.95rem; }

.error { color: var(--err); font-weight: 700; margin: 0.5rem 0; }
.error:empty { margin: 0; }
.error:not(:empty)::before { content: "Błąd: "; }
.ok-text { color: var(--ok); font-weight: 600; }
.status { margin: 0.5rem 0; min-height: 1.5em; font-weight: 600; }
.status:empty { margin: 0; min-height: 0; }
[aria-invalid="true"] { border-color: var(--err); border-width: 3px; }

/* Głos */
.voice-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.75rem; }
.voice-box { margin-block: 0.75rem; }
.level-wrap { margin-block: 0.5rem; }
.level { block-size: 0.9rem; inline-size: 100%; max-inline-size: 22rem; border: 2px solid var(--border-ui); border-radius: 4px; overflow: hidden; background: var(--bg); }
.level-bar { block-size: 100%; inline-size: calc(var(--level, 0) * 100%); background: var(--primary); }
.rec-dot { display: inline-block; inline-size: 0.9rem; block-size: 0.9rem; border-radius: 50%; background: var(--err); border: 2px solid var(--text); }

/* Postęp */
.counter { font-weight: 700; margin-bottom: 0.25rem; }
progress { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 1rem; border: 2px solid var(--border-ui); border-radius: 4px; background: var(--bg); overflow: hidden; display: block; margin-bottom: 1rem; }
progress::-webkit-progress-bar { background: var(--bg); }
progress::-webkit-progress-value { background: var(--primary); }
progress::-moz-progress-bar { background: var(--primary); }
.section-intro { color: var(--muted); }

.nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.nav .btn { flex: 1 1 9rem; }

.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.menu-list .btn { inline-size: 100%; justify-content: space-between; text-align: start; }

/* Okna dialogowe */
dialog { border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 0; inline-size: min(36rem, calc(100vw - 1.5rem)); max-block-size: calc(100vh - 1.5rem); overflow: auto; }
dialog::backdrop { background: rgb(0 0 0 / 0.7); }
.dlg-in { padding: 1rem; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.dlg-actions .btn { flex: 1 1 9rem; }

/* Małe ekrany i reflow do 320 px: wszystko pionowo, bez poziomego przewijania */
@media (max-width: 30rem) {
  h1 { font-size: 1.5rem; }
  .bar-actions .btn, .row .btn { flex: 1 1 100%; }
  .other-box { margin-inline-start: 0; }
  .card { padding: 0.75rem; }
  fieldset { padding: 0.5rem 0.6rem 0.75rem; }
  .opt { gap: 0.5rem; padding-inline: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after,
html.simple *, html.simple *::before, html.simple *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media print { .site-header .bar-actions, .nav, .voice-bar { display: none; } }

/* Moduły ("mniejsze ankiety") i punkty. Status zawsze tekstem + znakiem (nie tylko kolorem). Punkty: tylko motywacja, bez rankingu. */
.points-panel { margin-block: 1rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: 4px; }
.points-line { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; font-size: 1.1rem; }
.level-badge { display: inline-block; padding: 0.1rem 0.6rem; border: 2px solid var(--primary); border-radius: 999px; color: var(--primary); font-weight: 700; font-size: 0.95rem; }
.points-panel progress { margin-bottom: 0.5rem; }
.points-note { margin: 0.25rem 0 0; font-weight: 600; }
.modules-progress { font-weight: 700; }
.path-shortcuts { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 4px; }
.path-shortcuts h2 { font-size: 1.15rem; }
.tile-reco { color: var(--primary); }
.module-meta { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.module-meta li { padding: 0.1rem 0.6rem; border: 1px solid var(--border-ui); border-radius: 999px; font-size: 0.9rem; font-weight: 600; }
.module-status { margin: 0 0 0.5rem; font-weight: 700; }
.module-status.st-done { color: var(--ok); }
.module-status.st-progress { color: var(--primary); }
.st-mark { display: inline-block; inline-size: 1.2em; text-align: center; }
.module-tile.st-done { border-block-start-color: var(--ok); }
.done-points, .next-module { margin-block: 1.25rem; }
main[data-view="modules"] > * { max-width: none; }
main[data-view="modules"] > p, main[data-view="modules"] > .points-panel, main[data-view="modules"] > .path-shortcuts, main[data-view="modules"] > .contact-box { max-width: 50rem; }
@media (forced-colors: active) { .points-panel, .path-shortcuts, .module-meta li, .level-badge { border-color: ButtonText; } }

/* Tryb wysokiego kontrastu systemu: kolory dobiera system, my tylko dbamy, by granice i zaznaczenie były widoczne */
@media (forced-colors: active) {
  .btn, .opt, .card-link, fieldset, input, textarea, progress, .level, dialog { border-color: ButtonText; }
  .btn { background: ButtonFace; color: ButtonText; }
  .btn[aria-disabled="true"], .btn:disabled { color: GrayText; border-color: GrayText; }
  .opt:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; }
  :focus-visible, .opt:has(input:focus-visible) { outline: 3px solid Highlight; }
  .level-bar { background: Highlight; forced-color-adjust: none; }
  .rec-dot { background: Highlight; forced-color-adjust: none; }
  progress::-webkit-progress-value, progress::-moz-progress-bar { background: Highlight; }
  .skip-link { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
}


/* ================= Wygląd portalu: pasek ułatwień, nagłówek, kafelki, zgoda, stopka ================= */
.hero { display: none; }
.journey-river { display: none; }

.a11y-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.a11y-in { justify-content: flex-start; gap: 0.4rem 1.5rem; padding-block: 0.5rem; }
.a11y-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.a11y-lab { font-weight: 700; font-size: 0.9rem; margin-inline-end: 0.15rem; }
.tb {
  min-block-size: max(44px, 2.75rem); min-inline-size: max(44px, 2.75rem); padding: 0.25rem 0.75rem;
  border: 2px solid var(--border-ui); border-radius: 4px; background: var(--bg); color: var(--text);
  font-weight: 600; font-size: 0.95rem; line-height: 1.2; cursor: pointer;
}
.tb:hover { border-color: var(--primary); }
/* Włączone: wypełnienie + ptaszek (nie tylko kolor) */
.tb[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.tb[aria-pressed="true"]::before { content: "\2713\00a0"; }

.brand a { color: var(--text); text-decoration: none; display: block; }
.brand a:hover { text-decoration: underline; }
.brand-sub { display: block; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.site-header { border-bottom: 1px solid var(--border); border-top: 4px solid var(--brand); background: var(--bg); }

.lead { font-size: 1.1rem; color: var(--muted); max-width: 60ch; }
h1 { letter-spacing: -0.01em; }
main h2.band { padding-block-start: 0.5rem; border-block-start: 1px solid var(--border); margin-block-start: 2rem; }

/* Kafelki jak na portalu miejskim: ikona, kategoria, tytuł, opis, przycisk */
.tiles { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  display: flex; flex-direction: column; gap: 0.5rem; block-size: 100%; padding: 1.25rem; background: var(--bg);
  border: 1px solid var(--border); border-block-start: 4px solid var(--brand); border-radius: 4px;
}
.tile-ico { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--sel); color: var(--primary); }
.tile-cat { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tile h3 { margin: 0; font-size: 1.2rem; }
.tile-d { margin: 0 0 0.5rem; color: var(--muted); flex: 1; }
.tile .btn { align-self: flex-start; }

/* Zgoda ("Zanim zaczniesz") */
.consent-box { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: 4px; padding: 1rem 1.25rem; margin-block: 1rem; }
.consent-list { margin: 0.5rem 0 0.75rem; padding-inline-start: 1.4rem; max-inline-size: 70ch; }
.consent-list li { margin-bottom: 0.4rem; }
.consent-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.consent-checks .check { align-items: flex-start; border: 1px solid var(--border); background: var(--bg); padding: 0.75rem; margin-block-end: 0.5rem; border-radius: 4px; }
.consent-checks .check input { margin-block-start: 0.15rem; }
.consent-why { font-weight: 600; }
.consent-why:empty { display: none; }
.consent-why::before { content: "Dlaczego przycisk jest nieaktywny: "; font-weight: 700; }

.open-note { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; background: var(--note); border-inline-start: 4px solid var(--border-ui); border-radius: 2px; color: var(--text); }
.help-line { margin-block: 0 1rem; padding: 0.5rem 0.75rem; background: var(--surface); border-inline-start: 4px solid var(--brand); border-radius: 2px; }
.pub-note { margin-block: 1.5rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: 4px; }
.pub-note h2 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.pub-note p:last-child { margin-bottom: 0; }

/* Stopka portalu */
.site-footer { background: var(--surface); border-top: 4px solid var(--brand); padding-block: 0.5rem 1rem; }
.foot { display: block; }
.foot-links { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.foot-links a { display: inline-flex; align-items: center; min-block-size: 44px; }
.foot-line { margin: 0 0 0.35rem; }
.foot-help { margin: 0.5rem 0 0; padding-block-start: 0.5rem; border-block-start: 1px solid var(--border); }
.foot-help a { display: inline-block; min-block-size: 24px; font-weight: 700; }

.hero-svg, .hero-city, .hero-tower, .hero-waves { display: none; }


/* ================= Miasto z odpowiedzi (nagłówek) ================= */
.city-wrap { max-inline-size: 64rem; margin: 0 auto; padding: 0 1rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; }
.city { flex: 0 0 13rem; max-inline-size: 100%; }
.city-svg { display: block; inline-size: 100%; block-size: 3.6rem; }
.contribution { flex: 1 1 12rem; margin: 0; font-weight: 600; }
.city-body { fill: none; stroke: var(--border); stroke-width: 0.9; }
.city-tower { stroke: var(--brand); stroke-width: 1.3; }
.city-slot.off { fill: none; stroke: var(--border); stroke-width: 0.7; stroke-dasharray: 1.4 1.4; }
.city-slot.on { stroke: var(--text); stroke-width: 0.7; }
rect.city-slot.on { fill: var(--coin); }
polygon.city-slot.on { fill: var(--accent); }
.city-river { stroke: var(--brand); }
.city-slot.fresh { animation: place 0.35s ease-out 1; transform-box: fill-box; transform-origin: center; }
@keyframes place { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
html.simple .city, html.no-game .city-wrap { display: none; }

/* ================= Mapa podróży ================= */
.journey { margin-block: 1rem; }
.journey-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.journey-river { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: visible; }
.journey-water { stroke: var(--brand); stroke-width: 18; stroke-linecap: round; opacity: 0.22; }
.journey-trail { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 8; }
.stop { position: relative; z-index: 1; max-inline-size: calc(100% - 2.5rem); inline-size: 17rem; }
.stop:nth-of-type(odd) { justify-self: start; }
.stop:nth-of-type(even) { justify-self: end; }
.stop-btn {
  display: flex; align-items: center; gap: 0.75rem; inline-size: 100%; min-block-size: max(44px, 3.75rem); padding: 0.5rem 0.75rem;
  border: 2px solid var(--border-ui); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
.stop-ico { flex: none; position: relative; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 2px solid var(--border-ui); border-radius: 50%; background: var(--surface); }
.stop-name { display: block; font-weight: 700; }
.stop-state { display: block; font-size: 0.9rem; color: var(--muted); }
.stop-mark { position: absolute; inset-inline-end: -0.35rem; inset-block-end: -0.35rem; padding: 0.15rem; border: 2px solid currentColor; border-radius: 50%; background: var(--bg); box-sizing: content-box; }
.stop-btn.state-done { border-color: var(--primary); }
.stop-btn.state-done .stop-ico { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.stop-btn.state-done .stop-mark { color: var(--ok); }
.stop-btn.state-current { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--primary); }
.stop-btn.state-current .stop-ico { border-width: 4px; border-color: var(--primary); background: var(--bg); color: var(--primary); }
.stop-btn.state-locked { border-style: dashed; color: var(--muted); }
.stop-btn.state-locked .stop-ico { border-style: dashed; }
.stop-btn[aria-disabled="true"] { cursor: not-allowed; }
.stop-btn:hover:not([aria-disabled="true"]) { border-color: var(--text); }
.stop-btn.pop .stop-ico { animation: unlock 0.45s ease-out 1; }
@keyframes unlock { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

.jmini { margin: 0.25rem 0 1rem; }
.jmini-text { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-weight: 600; }
.jmini-ico { flex: none; display: inline-flex; color: var(--primary); }
.jmini-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.dot { display: grid; place-items: center; inline-size: 1.3rem; block-size: 1.3rem; border: 2px solid var(--border-ui); border-radius: 50%; }
.dot.state-done { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dot.state-current { inline-size: 1.7rem; block-size: 1.7rem; border: 3px solid var(--primary); background: var(--primary); box-shadow: inset 0 0 0 3px var(--bg); }
.dot.state-locked { border-style: dashed; }

/* ================= Odznaki i komunikat ================= */
.toast { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.toast.show {
  position: fixed; inset-inline: 0.75rem; inset-block-end: 0.75rem; inline-size: auto; block-size: auto; max-inline-size: 30rem; margin-inline: auto; overflow: visible; clip-path: none;
  z-index: 60; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; padding: 0.75rem; background: var(--bg); color: var(--text);
  border: 3px solid var(--primary); border-radius: 6px;
}
.toast-text { flex: 1 1 100%; margin: 0; font-weight: 700; }
.badge-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.badge { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.badge-ico { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 2px solid var(--border-ui); border-radius: 50%; }
.badge.got { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.badge.got .badge-ico { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.badge.todo { border-style: dashed; color: var(--muted); }
.badge.todo .badge-ico { border-style: dashed; }
.badge-txt strong, .badge-txt span { display: block; }
.badge-state { font-weight: 700; }
.badge-desc { color: var(--muted); }
.badge.got .badge-desc { color: var(--text); }

/* ================= Jak to działa ================= */
.how { margin-block: 1rem; }
.how-steps { margin: 0 0 0.75rem; padding-inline-start: 1.4rem; max-inline-size: 70ch; }
.how-steps li { margin-bottom: 0.5rem; }
.how-time { font-weight: 700; }

/* ================= Żetony dla Opola ================= */
.alloc-pool { display: grid; gap: 0.4rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); margin-block: 0.5rem 1rem; }
.alloc-pool-title { margin: 0; font-weight: 600; color: var(--muted); }
.alloc-left { margin: 0; font-weight: 700; font-size: 1.2rem; }
.coins { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.coin { flex: none; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--coin); border: 2px solid var(--text); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.4); }
.coin.used { background: transparent; border-style: dashed; box-shadow: none; }
.alloc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.alloc-row { display: grid; gap: 0.4rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.alloc-row.has { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); background: var(--sel); }
.alloc-name { font-weight: 600; }
.alloc-ctrl { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn.step { flex: none; inline-size: 3rem; min-inline-size: 44px; padding: 0; font-size: 1.6rem; line-height: 1; }
input.alloc-input { inline-size: 4.5rem; flex: none; text-align: center; font-weight: 700; }
.alloc-row .stack { min-block-size: 1.2rem; }
.gate-msg { margin: 0.75rem 0 0; color: var(--muted); font-weight: 600; }
.gate-msg:empty { display: none; }

/* ================= Infografiki "na tle innych" ================= */
.others { margin-block: 1.5rem; }
.infogs { display: grid; gap: 1rem; }
.infog { margin: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.infog-cap { font-weight: 700; margin-bottom: 0.75rem; }
.infog-empty { margin: 0; font-weight: 600; }
.bars { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem; }
.bar-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "track track" "coins coins"; gap: 0.15rem 0.6rem; padding: 0.35rem 0.5rem; border: 2px solid transparent; border-radius: 4px; }
.bar-label { grid-area: label; }
.bar-val { grid-area: val; font-weight: 700; }
.bar-track { grid-area: track; display: block; block-size: 1rem; border: 2px solid var(--border-ui); border-radius: 4px; background: var(--bg); overflow: hidden; }
.bar-fill { display: block; inline-size: var(--w, 0%); block-size: 100%; background: var(--primary); }
.bar-row.mine { border-color: var(--text); background: var(--bg); }
.bar-row.mine .bar-fill { background: repeating-linear-gradient(45deg, var(--primary) 0 5px, var(--bg) 5px 8px); }
.bar-tag { display: inline-block; margin-inline-start: 0.5rem; padding: 0 0.4rem; border: 2px solid var(--text); border-radius: 3px; font-weight: 700; font-size: 0.85em; }
.bar-mine-coins { grid-area: coins; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.bar-mine-txt { font-weight: 600; margin-inline-end: 0.35rem; }
.infog-sum { font-weight: 600; }
.infog-details summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; font-weight: 600; }
.infog-table { inline-size: 100%; border-collapse: collapse; margin-block: 0.5rem; font-size: 0.95rem; }
.infog-table th, .infog-table td { border: 1px solid var(--border); padding: 0.35rem 0.5rem; text-align: start; }

/* ================= Profil ================= */
.profile { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); margin-block: 1rem; }
@media (min-width: 48rem) { .profile { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; } }
.profile-svg { display: block; inline-size: 100%; max-inline-size: 28rem; block-size: auto; border: 1px solid var(--border); border-radius: 6px; }
.f-text { fill: var(--text); } .f-muted { fill: var(--muted); } .f-brand { fill: var(--brand); } .f-primary { fill: var(--primary); }
.f-accent { fill: var(--accent); } .f-bg { fill: var(--bg); } .f-surface { fill: var(--surface); } .f-onprimary { fill: var(--on-primary); }
.s-text { stroke: var(--text); } .s-muted { stroke: var(--muted); } .s-line { stroke: var(--border); } .s-brand { stroke: var(--brand); }
.s-primary { stroke: var(--primary); } .s-accent { stroke: var(--accent); } .s-onprimary { stroke: var(--on-primary); }
.profile-desc p { margin-bottom: 0.75rem; }

@media (max-width: 30rem) {
  .stop { inline-size: calc(100% - 1.5rem); max-inline-size: none; }
  .alloc-row { padding-inline: 0.5rem; }
  .city { flex-basis: 100%; }
}

@media (forced-colors: active) {
  .stop-btn { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .stop-btn.state-done .stop-ico { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  .stop-btn.state-current { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; }
  .stop-btn.state-locked { color: GrayText; border-color: GrayText; }
  .dot { border-color: ButtonText; }
  .dot.state-done { background: Highlight; forced-color-adjust: none; color: HighlightText; }
  .dot.state-current { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  .coin { background: Highlight; border-color: ButtonText; forced-color-adjust: none; }
  .coin.used { background: transparent; }
  .bar-fill { background: Highlight; forced-color-adjust: none; }
  .bar-row.mine { border-color: Highlight; }
  .bar-row.mine .bar-fill { background: repeating-linear-gradient(45deg, Highlight 0 5px, Canvas 5px 8px); }
  .alloc-row.has, .badge.got { outline: 3px solid Highlight; outline-offset: -3px; box-shadow: none; }
  .toast.show { border-color: ButtonText; }
  .city-slot.on, .city-body, .city-river, .profile-svg * { forced-color-adjust: none; }
  .city-body { stroke: CanvasText; } .city-slot.off { stroke: CanvasText; } .city-slot.on { fill: Highlight; stroke: CanvasText; } .city-river { stroke: CanvasText; }
  .f-text, .f-muted, .f-brand, .f-primary, .f-accent { fill: CanvasText; } .f-bg, .f-surface { fill: Canvas; } .f-onprimary { fill: Canvas; }
  .s-text, .s-muted, .s-line, .s-brand, .s-primary, .s-accent { stroke: CanvasText; } .s-onprimary { stroke: Canvas; }
  .btn.step { border-color: ButtonText; }
}

@media (forced-colors: active) {
  .tb, .tile, .consent-box, .pub-note { border-color: ButtonText; }
  .tb { background: ButtonFace; color: ButtonText; }
  .tb[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  .tile-ico { border: 1px solid ButtonText; }
}
@media print { .a11y-bar, .site-footer .foot-links { display: none; } }
@media (max-width: 30rem) {
  .a11y-in { gap: 0.4rem 1rem; }
  .tile { padding: 1rem; }
  .tile .btn { align-self: stretch; }
}