/* ==========================================================
   Trzy systemy na tych samych pytaniach
   ========================================================== */

.card--worse { border-color: rgba(255, 107, 107, .28); }
.card--worse h4 { color: var(--bad); }

/* ---------- Układ pytań ---------- */
.qgrid { display: grid; grid-template-columns: minmax(240px, 310px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 980px) { .qgrid { grid-template-columns: 1fr; } }

.qgrid__list { position: sticky; top: 78px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; }
@media (max-width: 980px) { .qgrid__list { position: static; } }
.pytlist { display: grid; gap: 5px; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; margin-bottom: 14px; padding-right: 4px; }
@media (max-width: 980px) { .pytlist { max-height: none; } }
.pyt {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; text-align: left;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--muted); font-size: 14px; line-height: 1.35; transition: background .2s, color .2s, border-color .2s;
}
.pyt span { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); opacity: .7; }
.pyt:hover { background: var(--bg); color: var(--text); }
.pyt.is-active { border-color: var(--fire); background: rgba(255, 179, 71, .08); color: var(--text); }
.pyt.is-active span { color: var(--fire); opacity: 1; }
.pyt.is-done span::after { content: " ✓"; }
.pyt.is-done[data-pick="inf"] span::after { color: var(--gold); }
.pyt.is-done[data-pick="kap"] span::after { color: var(--blue); }
.pyt.is-done[data-pick="kom"] span::after { color: var(--good); }
.pytcount { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.qgrid__list .small { margin-top: 10px; }

.qgrid__main { min-width: 0; }
.qgrid__q { font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 3.2vw, 32px); line-height: 1.15; margin: 0 0 8px; }
.qgrid__main > .small { margin: 0 0 20px; max-width: 70ch; }
.qgrid__nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; }

/* ---------- Trzy kolumny ---------- */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.col {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 19px;
  transition: border-color .2s, background .2s;
}
.col__head b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; }
.col__head span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.col__a { margin: 0; font-size: 15px; line-height: 1.55; }
.col__facts { margin: 0; display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.col__facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.col__facts dd { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.col__facts div:last-child dt { color: var(--bad); }
.col__pick {
  margin-top: auto; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; font-size: 13px; font-weight: 600; color: var(--muted); transition: border-color .2s, color .2s, background .2s;
}
.col__pick:hover { border-color: var(--fire); color: var(--text); }
.col.is-picked { border-color: var(--fire); background: rgba(255, 179, 71, .07); }
.col.is-picked .col__pick { background: var(--fire); color: #1a0f00; border-color: transparent; }

/* ---------- Podsumowanie ---------- */
.sumbars { display: grid; gap: 9px; margin: 4px 0 18px; }
.sumbar { display: grid; grid-template-columns: minmax(96px, 130px) 1fr 32px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); }
.sumbar b { font-family: var(--font-mono); color: var(--text); text-align: right; }
#sumBox .report__list li { grid-template-columns: 110px 1fr; }

/* ---------- Twój przypadek ---------- */
.przlead { margin: 18px 0 18px; color: var(--text); }
.przcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .przcols { grid-template-columns: 1fr; } }
.przcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.przcol b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; margin-bottom: 8px; }
.przcol p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.przcol--inf { border-color: rgba(255, 179, 71, .35); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 179, 71, .1), rgba(255, 179, 71, 0) 60%), var(--surface); }
.przcol--inf b { color: var(--fire); }