/**
 * Dobór krokowy v3 — style front-endu.
 * Trzyma się palety i zaokrągleń istniejącego motywu (--blue: #35adff).
 */

.p4u-dobor {
  --p4u-blue: #35adff;
  --p4u-blue-dark: #1a7fbf;
  --p4u-blue-soft: #eef6fd;
  --p4u-ink: #1d2a36;
  --p4u-muted: #6b7d8c;
  --p4u-line: #dfeaf3;
  --p4u-surface: #ffffff;
  --p4u-ground: #f5fbff;
  --p4u-risk: #9d3535;
  --p4u-risk-soft: #fdf0f0;

  max-width: 820px;
  margin: 60px auto;
  color: var(--p4u-ink);
}

.p4u-dobor[data-state="loading"] .p4u-dobor__shell { opacity: 0; }

/* Motyw nadaje .btn własne `display`, które wygrywa z atrybutem [hidden]. */
.p4u-dobor [hidden] { display: none !important; }

/* ── Rama ── */

.p4u-dobor__progress {
  height: 6px;
  background: var(--p4u-blue-soft);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}

.p4u-dobor__progress-bar {
  height: 100%;
  width: 0;
  background: var(--p4u-blue);
  transition: width .35s ease;
}

.p4u-dobor__shell {
  background: var(--p4u-ground);
  border: 1px solid var(--p4u-line);
  border-radius: 18px;
  overflow: hidden;
  transition: opacity .2s ease;
}

.p4u-dobor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: #eaf1f6;
  border-bottom: 1px solid var(--p4u-line);
  min-height: 52px;
}

.p4u-dobor__restart {
  background: transparent;
  border: 1px solid var(--p4u-blue);
  color: var(--p4u-blue-dark);
  border-radius: 32px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.p4u-dobor__restart:hover { background: #fff; }

.p4u-dobor__counter {
  font-size: 13px;
  color: var(--p4u-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Odstęp nad i pod treścią ma być taki sam — dlatego ostatni blok pytania
   nie dokłada własnego marginesu (patrz .p4u-q:last-child). */
.p4u-dobor__stage { padding: 32px 24px; }

@media (min-width: 768px) {
  .p4u-dobor__stage { padding: 44px 48px; }
}

.p4u-dobor__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: #eaf1f6;
  border-top: 1px solid var(--p4u-line);
}

.p4u-dobor__nav .btn { min-width: 150px; }

.p4u-dobor__back {
  background: transparent;
  border: 1px solid var(--p4u-blue);
  color: var(--p4u-blue-dark);
}

.p4u-dobor__next.is-disabled { opacity: .45; }

/* ── Pytanie ── */

.p4u-q { margin-bottom: 40px; }
.p4u-q:last-child { margin-bottom: 0; }

/* Brak odpowiedzi po kliknięciu „Dalej" */
.p4u-q.is-missing {
  padding: 16px;
  border: 1px solid #f3b4b6;
  border-radius: 16px;
  background: #fff6f6;
  scroll-margin-top: 100px;
}
.p4u-q__missing {
  margin: 12px 0 0;
  color: #d0353b;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.p4u-q__head { text-align: center; margin-bottom: 26px; }

/* padding: 0 celowo — motyw dokłada h2 `padding-top: 20px` na stronach
   z klasą `page-simple` / `page-article`, przez co tytuł pytania spadał w dół. */
.p4u-q__title {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
  padding: 0;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .p4u-q__title { font-size: 26px; }
}

.p4u-q__sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--p4u-blue-dark);
  font-weight: 500;
}

/* Znak zapytania: wypełnione jasnoniebieskie kółko, żeby odcinał się od szarej opcji. */
.p4u-q__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 50%;
  border: 0;
  background: #7ccbff;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  font-family: inherit;
  flex-shrink: 0;
}

.p4u-q__info:hover { background: var(--p4u-blue); color: #fff; }

/* ── Opcje ── */

.p4u-options {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p4u-options--dense { grid-template-columns: 1fr 1fr; }
}

.p4u-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #eaf1f6;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background .15s ease, border-color .15s ease;
}

.p4u-option:hover { background: #e0ebf3; }

.p4u-option.is-active {
  background: var(--p4u-blue);
  border-color: var(--p4u-blue);
  color: #fff;
}

.p4u-option.is-active .p4u-q__info {
  background: #fff;
  color: var(--p4u-blue-dark);
}

.p4u-option__label { flex: 1; }

/* „Chcę przejrzeć wszystkie profile" to wyjście z kreatora, nie odpowiedź —
   stoi osobno pod siatką i ma obrys zamiast wypełnienia. */
.p4u-option--browse {
  grid-column: 1 / -1;
  justify-content: center;
  text-align: center;
  margin-top: 6px;
  background: #fff;
  border-color: var(--p4u-blue);
  color: var(--p4u-blue-dark);
}

.p4u-option--browse .p4u-option__label { flex: 0 1 auto; }
.p4u-option--browse:hover { background: var(--p4u-blue-soft); }

/* „Elastycznie" wygląda jak przełącznik „Mogę również w weekendy". */
.p4u-option--pill {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  background: #fff;
  border: 1px dashed var(--p4u-blue);
  border-radius: 32px;
  padding: 10px 22px;
  color: var(--p4u-blue-dark);
  font-size: 14px;
  font-weight: 600;
}

.p4u-option--pill:hover { background: #fff; border-style: solid; }
.p4u-option--pill.is-active { background: var(--p4u-blue); border-style: solid; color: #fff; }

/* ── Skala ── */

/* Na telefonie opisy stoją pod skrajnymi punktami, zamiast nad i pod skalą. */
.p4u-scale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "points points" "min max";
  gap: 8px 12px;
  align-items: start;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.p4u-scale__label { font-size: 13px; line-height: 1.3; color: var(--p4u-muted); }
.p4u-scale__label--min { grid-area: min; text-align: left; }
.p4u-scale__label--max { grid-area: max; text-align: right; }

@media (min-width: 640px) {
  .p4u-scale {
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    grid-template-areas: "min points max";
    gap: 18px;
    align-items: center;
    width: auto;
    max-width: 560px;
  }

  .p4u-scale__label--min { text-align: right; }
  .p4u-scale__label--max { text-align: left; }
}

.p4u-scale__points { grid-area: points; display: flex; gap: 8px; justify-content: center; }

.p4u-scale__point {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--p4u-line);
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.p4u-scale__point:hover { border-color: var(--p4u-blue); }

.p4u-scale__point.is-active {
  background: var(--p4u-blue);
  border-color: var(--p4u-blue);
  color: #fff;
}

/* ── Pole tekstowe i przełącznik ── */

.p4u-textarea {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid var(--p4u-line);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
  background: #fff;
}

.p4u-textarea:focus { outline: 2px solid var(--p4u-blue); outline-offset: 1px; }

/* Przełącznik weekendów stoi pod listą odpowiedzi — wyrównany do jej lewej
   krawędzi (lista ma max 620px i jest wyśrodkowana) i z tym samym odstępem
   co między odpowiedziami. */
.p4u-q:has(+ .p4u-toggle) { margin-bottom: 10px; }

.p4u-toggle {
  display: block;
  width: fit-content;
  margin: 0 0 0 max(0px, calc((100% - 620px) / 2));
  background: #fff;
  border: 1px dashed var(--p4u-blue);
  color: var(--p4u-blue-dark);
  border-radius: 32px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.p4u-toggle.is-active {
  background: var(--p4u-blue);
  color: #fff;
  border-style: solid;
}

/* ── Ekrany treściowe ── */

.p4u-info { text-align: center; max-width: 640px; margin: 0 auto 24px; }

.p4u-info__title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 18px;
  padding: 0;
  text-wrap: balance;
}

.p4u-info__body { font-size: 16px; line-height: 1.6; color: #33475c; }
.p4u-info__body p { margin: 0 0 14px; }
.p4u-info__body p:last-child { margin-bottom: 0; }

/* Ekrany motywacyjne — „przerwa" między pytaniami: inne tło, karta i ikona. */
.p4u-dobor[data-screen="info"] .p4u-dobor__stage {
  background: linear-gradient(180deg, #dff1ff 0%, var(--p4u-ground) 100%);
}

.p4u-info--pause {
  background: #fff;
  border: 1px solid var(--p4u-line);
  border-radius: 18px;
  padding: 32px 22px;
  box-shadow: 0 10px 30px rgba(53, 173, 255, .12);
}

@media (min-width: 768px) {
  .p4u-info--pause { padding: 40px 44px; }
}

.p4u-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--p4u-blue-soft);
  color: var(--p4u-blue);
}

.p4u-deep__area {
  text-align: center;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p4u-blue-dark);
  font-weight: 600;
  margin: 0 0 28px;
}

/* ── Ekran bezpieczeństwa ── */

.p4u-safety {
  border: 1px solid #f0d4d4;
  background: var(--p4u-risk-soft);
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 620px;
  margin: 0 auto 24px;
}

.p4u-safety__title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--p4u-risk);
}

.p4u-safety__body { font-size: 15px; line-height: 1.6; }
.p4u-safety__body ul { margin: 12px 0; padding-left: 20px; }
.p4u-safety__body li { margin-bottom: 6px; }
.p4u-safety__cta { margin-top: 18px; }

/* ── Podsumowanie ── */

.p4u-summary {
  list-style: none;
  margin: 26px auto 0;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Motyw dokleja listom w modułach treści niebieską kropkę i wcięcie
   (`.module-textBlockDefault__content ul li`), a podsumowanie to też <ul>.
   Selektor z `.p4u-dobor` z przodu celowo — bez tego reguła motywu ma wyższą
   specyficzność (1 klasa + 2 elementy) i wygrywa. */
.p4u-dobor .p4u-summary li::before { content: none; }
.p4u-dobor .p4u-summary__row { padding: 12px 16px; }

.p4u-summary__row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--p4u-line);
  border-radius: 12px;
  padding: 12px 16px;
  animation: p4u-fade-in .4s ease both;
  animation-delay: calc(var(--i) * .12s);
}

@keyframes p4u-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .p4u-summary__row { animation: none; }
  .p4u-dobor__progress-bar { transition: none; }
}

.p4u-summary__label { font-size: 13px; color: var(--p4u-muted); }
.p4u-summary__value { font-size: 15px; font-weight: 500; }

.p4u-summary__edit {
  background: none;
  border: 0;
  color: var(--p4u-blue-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.p4u-summary__message {
  max-width: 560px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border-left: 3px solid var(--p4u-blue);
  background: #fff;
  font-size: 14px;
}

.p4u-summary__message p { margin: 6px 0 0; white-space: pre-wrap; }

/* ── Ekran przejściowy ── */

.p4u-loading { text-align: center; padding: 30px 0; }

.p4u-loading__spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 22px;
  border: 3px solid var(--p4u-blue-soft);
  border-top-color: var(--p4u-blue);
  border-radius: 50%;
  animation: p4u-spin 1s linear infinite;
}

@keyframes p4u-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .p4u-loading__spinner { animation-duration: 3s; }
}

/* ── Wynik ── */

.p4u-notice {
  background: #fff8e8;
  border: 1px solid #f0e0bd;
  border-left: 3px solid #d3a038;
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.p4u-result { position: relative; margin-bottom: 28px; }

.p4u-result__badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--p4u-blue);
  color: #fff;
  border-radius: 32px;
  padding: 7px 18px;
  margin-bottom: -14px;
  position: relative;
  z-index: 2;
  left: 16px;
  box-shadow: 0 4px 14px rgba(53, 173, 255, .35);
}

.p4u-result__badge-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.p4u-result__badge-value { font-size: 17px; font-variant-numeric: tabular-nums; }

.p4u-result__card {
  background: #fff;
  border: 1px solid var(--p4u-line);
  border-radius: 18px;
  padding: 24px 20px 20px;
}

.p4u-alts { margin-top: 8px; }

.p4u-alts__title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--p4u-muted);
}

.p4u-alts__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .p4u-alts__grid { grid-template-columns: repeat(3, 1fr); }
}

.p4u-alt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--p4u-line);
  border-radius: 14px;
  padding: 18px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}

.p4u-alt:hover { border-color: var(--p4u-blue); transform: translateY(-2px); }

.p4u-alt__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.p4u-alt__name { font-size: 15px; font-weight: 600; }
.p4u-alt__position { font-size: 12.5px; color: var(--p4u-muted); }

.p4u-alt__score {
  font-size: 12px;
  font-weight: 600;
  color: var(--p4u-blue-dark);
  background: var(--p4u-blue-soft);
  border-radius: 32px;
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}

.p4u-alt--all { justify-content: center; border-style: dashed; }

/* ── Formularz leada ── */

.p4u-lead {
  margin-top: 28px;
  background: #fff;
  border: 1px solid var(--p4u-line);
  border-radius: 14px;
  padding: 24px 20px;
}

.p4u-lead--solo { margin-top: 0; }

.p4u-lead__title { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.p4u-lead__body { font-size: 14.5px; color: #33475c; }

.p4u-lead__form { display: grid; gap: 12px; margin-top: 16px; }

@media (min-width: 640px) {
  .p4u-lead__form { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .p4u-lead__consent, .p4u-lead__status, .p4u-lead__form > button { grid-column: 1 / -1; }
}

.p4u-lead__field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--p4u-muted); }

.p4u-lead__field input {
  border: 1px solid var(--p4u-line);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--p4u-ink);
}

.p4u-lead__field input:focus { outline: 2px solid var(--p4u-blue); outline-offset: 1px; }

.p4u-lead__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: #33475c;
}

.p4u-lead__consent input { margin-top: 3px; flex-shrink: 0; }

.p4u-lead__status { font-size: 13.5px; margin: 0; color: var(--p4u-muted); }
.p4u-lead__status.is-error { color: var(--p4u-risk); font-weight: 500; }
.p4u-lead__thanks { font-size: 15px; font-weight: 500; margin: 0; }

/* ── Dymek ── */

.p4u-dobor__tooltip {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 43, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}

.p4u-dobor__tooltip[hidden] { display: none; }

.p4u-dobor__tooltip-inner {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}

.p4u-dobor__tooltip-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--p4u-muted);
}

.p4u-dobor__tooltip-title { font-size: 19px; font-weight: 600; margin: 0 0 12px; padding-right: 24px; }
.p4u-dobor__tooltip-body { font-size: 15px; line-height: 1.6; color: #33475c; }
.p4u-dobor__tooltip-body p { margin: 0 0 12px; }

/* ── Dostępność ── */

.p4u-dobor button:focus-visible,
.p4u-dobor a:focus-visible {
  outline: 2px solid var(--p4u-blue-dark);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Karta specjalisty
   Motyw trzyma style karty w bloku <style> szablonu `pages/step-filters.php`,
   więc na stronie kreatora ich nie ma. Przenosimy tu minimum potrzebne, żeby
   karta wyglądała tak samo jak na liście terapeutów.
   ────────────────────────────────────────────────────────────────────────── */

.p4u-result__card .team-single { font-size: 13px; margin-top: 0; width: 100%; }

.p4u-result__card .team-link { text-decoration: none; color: inherit; display: block; }

.p4u-result__card .team-single__content {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.p4u-result__card .team-single__header { display: flex; align-items: flex-start; }

.p4u-result__card .team-single .photo {
  position: relative;
  width: 110px;
  flex-shrink: 0;
  margin: 0 16px 0 0;
  padding: 0;
}

.p4u-result__card .team-single .photo img {
  border-radius: 50%;
  width: 110px;
  height: 110px;
  object-fit: cover;
  display: block;
}

.p4u-result__card .team-single .bio-flag {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  column-gap: 5px;
}

.p4u-result__card .team-single .bio-flag img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.p4u-result__card .team-single .title { font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; }
.p4u-result__card .team-single .position { display: block; color: #3b4453; font-size: 14px; font-weight: 500; margin-top: 3px; }
.p4u-result__card .psychological-approach { color: #8b949c; margin-top: 5px; display: block; font-size: 12.5px; font-weight: 400; }
.p4u-result__card .team-single .description { font-weight: 300; margin: 16px 0 20px; font-size: 14.5px; line-height: 1.55; }

.p4u-result__card .specialization { margin: 16px 0; font-weight: 300; }

.p4u-result__card .specialization .styled-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.p4u-result__card .specialization .styled-list li {
  background: #eef3ff;
  padding: 5px 10px;
  color: #1d2a36;
  font-size: 12px;
  font-weight: 500;
  border-radius: 32px;
}

.p4u-result__card .specialization .styled-list li.show-more { background: #fff; border: 1px solid var(--p4u-line); cursor: pointer; }
.p4u-result__card .specialization .styled-list li.extra { display: none; }
.p4u-result__card .specialization .styled-list.is-open li.extra { display: block; }

.p4u-result__card .team-single__content-actions { display: grid; gap: 10px; margin-top: 6px; }

.p4u-result__card .team-single__content-actions .availibility {
  border-radius: 32px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.3;
  font-size: 12.5px;
  background: #f6f9ff;
  border: 0;
  color: #54575a;
}

.p4u-result__card .team-single__content-actions .availibility i { margin-right: 8px; }

.p4u-result__card .team-single .btn,
.p4u-result__card .team-single .btn-blue {
  border-radius: 32px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 500;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   Panel diagnostyczny algorytmu — renderowany wyłącznie dla zalogowanego
   administratora. Celowo wygląda jak narzędzie, nie jak część strony:
   kompaktowo, monospace, z możliwością zwinięcia i ukrycia.
   ────────────────────────────────────────────────────────────────────────── */

.p4u-debug {
  --dbg-ink: #d8e3ef;
  --dbg-muted: #8ba0b5;
  --dbg-line: #2a3d52;
  --dbg-accent: #5eb7ea;

  max-width: 940px;
  margin: 28px auto 0;
  background: #101d2b;
  color: var(--dbg-ink);
  border: 1px solid var(--dbg-line);
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  overflow: hidden;
}

.p4u-debug[data-open="hidden"] { display: none; }

.p4u-debug__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  background: #16273a;
  border-bottom: 1px solid var(--dbg-line);
}

.p4u-debug[data-open="0"] .p4u-debug__head { border-bottom: 0; }

.p4u-debug__title {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--dbg-accent);
}

.p4u-debug__who { color: var(--dbg-muted); font-size: 10.5px; }

.p4u-debug__link,
.p4u-debug__toggle,
.p4u-debug__hide {
  background: transparent;
  border: 1px solid var(--dbg-line);
  color: var(--dbg-muted);
  border-radius: 3px;
  padding: 2px 9px;
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.6;
}

.p4u-debug__link { margin-left: auto; }

.p4u-debug__link:hover,
.p4u-debug__toggle:hover,
.p4u-debug__hide:hover { border-color: var(--dbg-accent); color: var(--dbg-accent); }

.p4u-debug__hide:hover { border-color: #e08a8a; color: #e08a8a; }

.p4u-debug__body { padding: 12px 14px 14px; display: grid; gap: 14px; }
.p4u-debug[data-open="0"] .p4u-debug__body { display: none; }

.p4u-debug__section h3 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dbg-muted);
  font-weight: 500;
}

.p4u-debug__section h4 {
  margin: 12px 0 5px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dbg-muted);
  font-weight: 500;
}

.p4u-debug__formula {
  margin: 0;
  padding: 9px 12px;
  background: #0a141f;
  border: 1px solid var(--dbg-line);
  border-radius: 4px;
  overflow-x: auto;
  font: inherit;
  color: #a8d8f5;
  white-space: pre;
}

.p4u-debug__grid {
  display: grid;
  gap: 1px 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) { .p4u-debug__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px) { .p4u-debug__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Odpowiedzi klienta bywają długimi zdaniami — układamy je pod etykietą,
   żeby nie rozpychały siatki. */
.p4u-debug__grid--stack .p4u-debug__row {
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.p4u-debug__grid--stack .p4u-debug__val {
  text-align: left;
  white-space: normal;
  align-self: stretch;
}

.p4u-debug__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px dotted var(--dbg-line);
  padding: 4px 0;
}

.p4u-debug__key { color: var(--dbg-muted); display: flex; flex-direction: column; min-width: 0; }
.p4u-debug__hint { color: #64798e; font-style: normal; font-size: 10px; line-height: 1.3; }
.p4u-debug__val { color: var(--dbg-ink); font-weight: 500; text-align: right; white-space: nowrap; align-self: center; }
.p4u-debug__empty { color: var(--dbg-muted); margin: 0; font-style: italic; }

.p4u-debug__plain {
  margin: 0 0 8px;
  color: var(--dbg-ink);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 80ch;
}

.p4u-debug__legend {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  font-size: 10.5px;
}

.p4u-debug__legend dt { color: var(--dbg-accent); }
.p4u-debug__legend dd { margin: 0; color: var(--dbg-muted); }

/* ── Poziom kaskady ── */

.p4u-debug__level { display: flex; align-items: center; gap: 9px; }

.p4u-debug__badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: .06em;
  background: #1d3b2c;
  color: #7cc3a1;
  border: 1px solid #2c5a43;
}

.p4u-debug__badge--f1,
.p4u-debug__badge--f2 { background: #3a3117; color: #dda85a; border-color: #5c4c22; }
.p4u-debug__badge--f3 { background: #3d2a17; color: #e0a06a; border-color: #5f4222; }
.p4u-debug__badge--f4 { background: #3b1e1e; color: #e08a8a; border-color: #5e2f2f; }

/* ── Lejek filtrów ── */

.p4u-debug__trace { display: grid; gap: 0; }

.p4u-debug__trace-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 44px;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dotted var(--dbg-line);
}

.p4u-debug__trace-label { color: var(--dbg-ink); }
.p4u-debug__trace-note { color: var(--dbg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p4u-debug__trace-count { text-align: right; font-weight: 600; color: var(--dbg-accent); font-variant-numeric: tabular-nums; }

/* ── Tabela punktacji ── */

.p4u-debug__scroll {
  overflow: auto;
  max-height: 230px;
  border: 1px solid var(--dbg-line);
  border-radius: 4px;
}

.p4u-debug__table { border-collapse: collapse; width: 100%; font-size: 11px; }

.p4u-debug__table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 5px 8px;
  background: #16273a;
  color: var(--dbg-muted);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--dbg-line);
}

.p4u-debug__table td {
  padding: 4px 8px;
  border-bottom: 1px solid #1b2c3e;
  vertical-align: top;
}

.p4u-debug__table tr:last-child td { border-bottom: 0; }
.p4u-debug__table a { color: var(--dbg-accent); text-decoration: none; }
.p4u-debug__table a:hover { text-decoration: underline; }

.p4u-debug__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p4u-debug__score { color: var(--dbg-accent); font-weight: 600; }

@media print { .p4u-debug { display: none; } }

/* Oznaczenie ekranu z tablicy Miro — widoczne wyłącznie dla administratora,
   ta sama bramka co panel diagnostyczny. */
.p4u-miro-ref {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -12px 0 20px;
  padding: 5px 10px;
  border: 1px dashed #b9cadb;
  border-radius: 5px;
  background: #f2f6fa;
  color: #5a6b7c;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .02em;
}

.p4u-miro-ref__tag {
  background: #1a7fbf;
  color: #fff;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Pasek podglądu archiwalnej treści testu A/B. Widoczny wyłącznie dla
   administratora wchodzącego z ?p4u_run= — sesja jest wtedy oznaczona jako
   wymuszona i nie liczy się do żadnego raportu. */
.p4u-archive-banner {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 4px solid #b26200;
    border-radius: 4px;
    background: #fff4e5;
    color: #3c2a12;
    font-size: 14px;
    line-height: 1.5;
}