/* ============================================================================
   Prawko — testy na prawo jazdy
   Kierunek: "noc za kierownicą". Materiałem są nagrania z wideorejestratora,
   więc chrome jest ciemny i cofa się, żeby obraz był bohaterem ekranu.
   Akcent: żółć polskich znaków ostrzegawczych (A-…), czerwień zakazu (B-…).
   ========================================================================= */

:root {
  /* Powierzchnie — asfalt nocą */
  --asphalt:     #16181d;
  --surface:     #1e222a;
  --surface-2:   #272c36;
  --line:        #333944;
  --line-soft:   #2a2f39;

  /* Treść — farba drogowa */
  --paint:       #f2f4f7;
  --dim:         #949dab;
  --faint:       #6b7482;

  /* Sygnały drogowe */
  --signal:      #ffd100;   /* znak ostrzegawczy */
  --signal-ink:  #1a1600;
  --go:          #17b26a;
  --stop:        #e5484d;
  --info:        #3b82f6;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --pad: 16px;
  --topbar-h: 56px;

  /* Pas oddechu pod notch i pasek gestów */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: dark;
}

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

/* Każda reguła z własnym `display` bije domyślne [hidden]{display:none}.
   Bez tego pusty komunikat i plakietki mediów nigdy się nie chowają. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--asphalt);
  color: var(--paint);
  font-family: var(--ui);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--pad) 0;
  background: color-mix(in srgb, var(--asphalt) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar[hidden] { display: none; }

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--paint);
}

/* Znacznik marki = pas na jezdni */
.brand__mark {
  width: 5px;
  height: 20px;
  border-radius: 2px;
  background: var(--signal);
}

.brand__word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.topbar__controls { display: flex; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 12px;
  min-height: 38px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--faint); }
.chip__key {
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.chip__val { font-size: 14px; font-weight: 700; letter-spacing: .01em; }

/* -------------------------------------------------------------------- view */

.view {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + var(--safe-b));
}
.view:focus { outline: none; }

.stack > * + * { margin-top: 14px; }

/* Nagłówek sekcji — mikroetykieta w duchu oznakowania */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--faint);
}

h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.lede {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------- wybór kategorii */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
@media (min-width: 520px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

/* Kafel kategorii = odznaka z blankietu prawa jazdy */
.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 12px 12px;
  min-height: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: transform .12s, border-color .15s, background .15s;
}
.cat:hover { background: var(--surface-2); border-color: var(--faint); }
.cat:active { transform: scale(.97); }

.cat__id {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cat__label {
  font-size: 11px;
  line-height: 1.25;
  color: var(--dim);
  margin-top: 4px;
}
.cat__count {
  margin-top: auto;
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.cat[aria-current="true"] {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 9%, var(--surface));
}
.cat[aria-current="true"] .cat__id { color: var(--signal); }

/* ------------------------------------------------------------ menu główne */

.modes { display: grid; gap: 10px; margin-top: 20px; }

.mode {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.mode:hover { background: var(--surface-2); border-color: var(--faint); }

.mode__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
}
.mode--exam .mode__icon { background: color-mix(in srgb, var(--signal) 18%, var(--surface-2)); }

.mode__title { display: block; font-size: 16px; font-weight: 700; }
.mode__desc { display: block; font-size: 13px; color: var(--dim); margin-top: 3px; line-height: 1.4; }

/* Etykiety w kaflach kategorii też muszą łamać się na osobne wiersze */
.cat__id, .cat__label, .cat__count { display: block; }

/* --------------------------------------------------------------- statystyki */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.stat {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.stat__n {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat__l {
  font-size: 11px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 3px;
}

/* ------------------------------------------------------------------ media */

.media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0d10;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.media video, .media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.media video[hidden], .media img[hidden] { display: none; }

.media__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0,0,0,.62);
  border-radius: 999px;
  color: var(--paint);
  backdrop-filter: blur(4px);
}

.media__empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--faint);
  font-size: 13px;
}

/* ---------------------------------------------------------------- pytanie */

.qmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.qmeta__pos {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.pts {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--dim);
}
.pts::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pts[data-p="3"] { color: var(--signal); }
.pts[data-p="2"] { color: var(--info); }

.question {
  margin: 10px 0 0;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.015em;
}

/* ------------------------------------------------------------ odpowiedzi */

.answers { display: grid; gap: 9px; margin-top: 18px; }

.answers--tf { grid-template-columns: 1fr 1fr; }

.ans {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
  transition: background .12s, border-color .12s, transform .1s;
}
.ans:hover:not(:disabled) { background: var(--surface-2); border-color: var(--faint); }
.ans:active:not(:disabled) { transform: scale(.985); }
.ans:disabled { cursor: default; }

.answers--tf .ans {
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  min-height: 62px;
}

.ans__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 800;
}
.answers--tf .ans__key { display: none; }

.ans[data-state="correct"] {
  border-color: var(--go);
  background: color-mix(in srgb, var(--go) 15%, var(--surface));
}
.ans[data-state="correct"] .ans__key { background: var(--go); color: #04150c; }

.ans[data-state="wrong"] {
  border-color: var(--stop);
  background: color-mix(in srgb, var(--stop) 15%, var(--surface));
}
.ans[data-state="wrong"] .ans__key { background: var(--stop); color: #fff; }

.ans[data-state="muted"] { opacity: .5; }

/* ------------------------------------------- licznik jako znak ograniczenia */

/* Element sygnaturowy: tarcza znaku B-33, której czerwony pierścień ubywa
   razem z czasem. Kursant zna ten kształt lepiej niż jakikolwiek pasek postępu. */
.limit {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
}
.limit svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.limit__bg { fill: #fbfbfb; }
.limit__track { fill: none; stroke: rgba(0,0,0,.10); stroke-width: 9; }
.limit__ring {
  fill: none;
  stroke: var(--stop);
  stroke-width: 9;
  stroke-linecap: butt;
  transition: stroke-dashoffset .18s linear, stroke .3s;
}
.limit__n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 800;
  color: #14161a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.limit[data-urgent="true"] .limit__ring { stroke: var(--stop); }
.limit[data-urgent="true"] { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.055); } }

.timerbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.timerbar__txt { min-width: 0; }
.timerbar__phase {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}
.timerbar__hint { font-size: 13px; color: var(--dim); margin-top: 3px; line-height: 1.4; }
.timerbar__total {
  margin-left: auto;
  text-align: right;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.timerbar__total b { display: block; font-size: 16px; color: var(--paint); font-weight: 700; }

/* --------------------------------------------------------------- postęp */

.progress {
  display: flex;
  gap: 3px;
  margin-top: 14px;
}
.progress__seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.progress__seg[data-on="1"] { background: var(--signal); }
.progress__seg[data-on="done"] { background: var(--faint); }

/* -------------------------------------------------------------- przyciski */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s, background .15s, border-color .15s;
}
.btn--primary { background: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--paint); }
.btn--ghost:hover { border-color: var(--faint); background: var(--surface); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }

.btnrow { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.btnrow .btn { flex: 1; min-width: 130px; }

/* ------------------------------------------------------------ tryb nauki */

.filters {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 12px 0 4px;
  margin: 0 calc(var(--pad) * -1);
  padding-left: var(--pad);
  padding-right: var(--pad);
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  flex: none;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.filter[aria-pressed="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

/* Wybór działu — lista zamiast rzędu pigułek, bo 14 pozycji zawsze
   wychodziło poza szerokość telefonu i część znikała za krawędzią. */
.picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 4px 6px 4px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.picker__label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}
.picker__select {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  color: var(--paint);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.picker__select:focus { outline: none; }
.picker:focus-within { border-color: var(--signal); }
.picker__select option { background: var(--surface); color: var(--paint); }
.picker__select option:disabled { color: var(--faint); }

.search {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--paint);
  font-size: 15px;
}
.search::placeholder { color: var(--faint); }

.learnbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--dim);
}

.reveal {
  margin-top: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--go) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--go) 35%, var(--line));
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
}
.reveal--wrong {
  background: color-mix(in srgb, var(--stop) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--stop) 35%, var(--line));
}
.reveal__head { font-weight: 700; margin-bottom: 3px; }

/* Wyjaśnienie „dlaczego" — wyraźnie oddzielone od werdyktu, bo pochodzi
   z generatora, a nie z oficjalnego katalogu pytań. */
.why {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.why__head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--signal);
}
.why__text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paint);
}
.why__note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
  font-style: italic;
}

/* ------------------------------------------------------------- wynik */

.verdict {
  padding: 22px 18px;
  border-radius: var(--r-lg);
  text-align: center;
  border: 1px solid var(--line);
  background: var(--surface);
}
.verdict[data-passed="true"] {
  border-color: var(--go);
  background: color-mix(in srgb, var(--go) 12%, var(--surface));
}
.verdict[data-passed="false"] {
  border-color: var(--stop);
  background: color-mix(in srgb, var(--stop) 12%, var(--surface));
}
.verdict__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.verdict__score {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.verdict__score small { font-size: 22px; color: var(--dim); font-weight: 700; }
.verdict__word { font-size: 17px; font-weight: 700; margin-top: 6px; }
.verdict[data-passed="true"] .verdict__word { color: var(--go); }
.verdict[data-passed="false"] .verdict__word { color: var(--stop); }

.review { margin-top: 18px; display: grid; gap: 8px; }

.rev {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--faint);
  border-radius: var(--r-sm);
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}
.rev[data-ok="true"] { border-left-color: var(--go); }
.rev[data-ok="false"] { border-left-color: var(--stop); }
.rev[data-ok="none"] { border-left-color: var(--faint); }
.rev__body { min-width: 0; }
.rev .why { border-top-color: var(--line-soft); }
.rev[aria-expanded="true"] { background: var(--surface-2); }

.rev__n {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
  min-width: 22px;
}

/* -------------------------------------------------------------- ekran ładowania */

.loading {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 48px 0;
  text-align: center;
}
.bar {
  width: min(280px, 80%);
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  background: var(--signal);
  border-radius: 3px;
  transition: width .25s ease-out;
}

/* ------------------------------------------------------------------ inne */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: end;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px);
}
.sheet__panel {
  background: var(--asphalt);
  border-top: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 18px var(--pad) calc(20px + var(--safe-b));
  max-height: 86dvh;
  overflow-y: auto;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@media (min-width: 560px) {
  .sheet { align-items: center; justify-items: center; }
  .sheet__panel { border-radius: var(--r-lg); border: 1px solid var(--line); width: min(480px, 92vw); }
}

.sheet__title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }

.langlist { display: grid; gap: 7px; }
.langopt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 15px;
  width: 100%;
  text-align: left;
}
.langopt[aria-current="true"] { border-color: var(--signal); color: var(--signal); font-weight: 700; }
.langopt small { color: var(--faint); font-size: 12px; font-weight: 400; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  transform: translate(-50%, 20px);
  padding: 11px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 80;
  max-width: 88vw;
  text-align: center;
}
.toast[data-on="true"] { opacity: 1; transform: translate(-50%, 0); }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.5;
}

.note {
  font-size: 12px;
  color: var(--faint);
  line-height: 1.5;
  margin-top: 10px;
}

hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0; }