/* Ekran Przegląd: decyzja w kilka sekund, szczegóły na żądanie */
.hero{padding:32px 0 8px}
.hero h1{margin:0 0 8px;max-width:28ch}
.hero .fakty{margin:0;color:var(--tekst-drugi);font:400 14px/1.5 var(--f-mono)}
.uklad{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;margin-top:24px}
@media (max-width:1000px){.uklad{grid-template-columns:minmax(0,1fr)}}
#grupy{display:grid;gap:24px}
.glowny,.boczny{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;min-width:0}
.rek,.karta,.odloz,.decyzja{min-width:0;overflow-wrap:anywhere}

/* rekomendacja */
.rek{position:relative;background:var(--tlo-panel);padding:20px 24px;border:1px solid var(--linia-dekoracyjna)}
.rek::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-left:3px solid var(--akcent-glowny);border-top:3px solid var(--akcent-glowny);pointer-events:none}
.rek .eti{margin:0 0 6px;color:var(--tekst-drugi)}
.rek h2{margin:0 0 8px;font:600 26px/1.2 var(--f-sans)}
.rek p{margin:0 0 8px;max-width:70ch}
.rek a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.rek .nota{color:var(--tekst-drugi);font-size:14px;margin:4px 0 0}

/* grupy i karty */
.grupa h2{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.grupa h2 .licz{font:500 16px/1 var(--f-mono);color:var(--tekst-drugi)}
.karty{display:grid;gap:16px}
.karta{position:relative;background:var(--tlo-panel);border:1px solid var(--linia-dekoracyjna);padding:20px 24px}
.karta::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-left:3px solid var(--kol,var(--linia-sterowanie));border-top:3px solid var(--kol,var(--linia-sterowanie));pointer-events:none}
.karta.g-ready{--kol:var(--stan-ok)}
.karta.g-conditional{--kol:var(--stan-warunek)}
.karta.g-blocked{--kol:var(--stan-blok)}
.karta.g-incomplete{--kol:var(--stan-nieznany)}
.k-gora{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:12px}
.k-gora h3{margin:0;font:600 20px/1.25 var(--f-sans)}
.k-gora .met{color:var(--tekst-drugi);font-size:14px}
.liczby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:0 0 12px}
.liczby div{min-width:0}
.liczby dt{color:var(--tekst-drugi);font-size:14px;margin:0 0 2px}
.liczby dd{margin:0;font:500 24px/1.2 var(--f-mono);font-variant-numeric:tabular-nums}
.liczby dd small{font:400 14px/1 var(--f-sans);color:var(--tekst-drugi);margin-left:4px}
.liczby dd.brak{color:var(--tekst-trzeci)}
@media (max-width:520px){.liczby{grid-template-columns:minmax(0,1fr)}}
.metryki{margin:0 0 12px;color:var(--tekst-drugi);font:400 14px/1.5 var(--f-mono)}
.bramki{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;padding:0;list-style:none}
.bramki li{display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:14px}
.bramki li .bn{color:var(--tekst-drugi)}
.bramki li .stan{font-size:14px}
.k-stopka{margin:0 0 4px;max-width:75ch}
.k-stopka.slabo{color:var(--tekst-drugi)}
.punkty{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 8px;color:var(--tekst-drugi);font-size:14px}
.punkty b{font:500 16px/1 var(--f-mono);color:var(--tekst-glowny)}
.karta details{margin-top:8px;border-top:1px solid var(--linia-dekoracyjna)}
.karta summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--akcent-glowny);font-weight:500;list-style:none}
.karta summary::-webkit-details-marker{display:none}
.karta summary::after{content:"+";font:500 18px/1 var(--f-mono)}
.karta details[open] summary::after{content:"−"}
.karta summary:hover{text-decoration:underline}
.szczegoly{display:grid;gap:16px;padding:4px 0 8px}
.szczegoly h4{margin:0 0 6px;font:600 15px/1.3 var(--f-sans);color:var(--tekst-drugi)}
.szczegoly p{margin:0 0 6px;max-width:75ch}
.szczegoly dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0;font-size:14px}
.szczegoly dt{color:var(--tekst-drugi)}
.szczegoly dd{margin:0;font-family:var(--f-mono)}
.uwaga{border:1px solid var(--stan-warunek);padding:12px 16px}
.uwaga h4{color:var(--stan-warunek)}
.uwaga ul{margin:0;padding-left:20px}
.uwaga li{margin:0 0 4px}
.bez{font:600 14px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-drugi)}

/* odłożenie */
.odloz{background:var(--tlo-panel);border:1px dashed var(--linia-sterowanie);padding:20px 24px}
.odloz h2{margin:0 0 6px;font:600 20px/1.25 var(--f-sans)}
.odloz p{margin:0 0 8px;max-width:75ch}
.odloz .st{color:var(--tekst-drugi);font-size:14px}

/* ramy */
.ramy summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none}
.ramy summary::-webkit-details-marker{display:none}
.ramy summary::after{content:"+";font:500 18px/1 var(--f-mono);color:var(--tekst-drugi)}
.ramy[open] summary::after{content:"−"}
.ramy summary h2{margin:0}
.ramy .tresc{padding-top:12px;display:grid;gap:20px}
.pole label{display:block;margin:0 0 6px;color:var(--tekst-drugi);font-size:14px}
.pole .rzad{display:flex;align-items:center;gap:12px}
.pole input[type=number]{width:110px;min-height:44px;padding:0 10px;background:var(--tlo-strona);color:var(--tekst-glowny);border:1px solid var(--linia-sterowanie);border-radius:4px;font:500 16px/1 var(--f-mono)}
.pole input[type=range]{display:block;width:100%;height:44px;margin:4px 0 0;accent-color:var(--akcent-glowny);background:transparent}
.szczegoly p a{display:inline-flex;align-items:center;min-height:44px}
.pole .jedn{color:var(--tekst-drugi);font-size:14px;white-space:nowrap}
.lista{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:14px}
.lista dt{color:var(--tekst-drugi)}
.lista dd{margin:0}
.uwagi{margin:0;color:var(--tekst-drugi);font-size:14px;max-width:60ch}
.zywe{min-height:20px;margin:0;font-size:14px;color:var(--tekst-drugi)}
.zywe.blad{color:var(--stan-warunek)}
.jakosc ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.jakosc li{font-size:14px}
.jakosc .znak{display:inline-block;margin-right:8px;font:600 13px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--linia-sterowanie);color:var(--tekst-drugi)}

/* stopka decyzji */
.decyzja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 24px;border:1px solid var(--linia-dekoracyjna);background:var(--tlo-panel)}
.decyzja p{margin:0;max-width:60ch}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px;padding:0 20px;border:1px solid var(--linia-sterowanie);border-radius:4px;background:transparent;color:var(--tekst-glowny);font:500 15px/1.2 var(--f-sans);cursor:pointer}
.btn:hover{border-color:var(--tekst-glowny)}
.btn.glowny{background:var(--akcent-glowny);border-color:var(--akcent-glowny);color:var(--akcent-tekst)}
.btn.glowny:hover{filter:brightness(1.08)}
.komunikat{margin:12px 0 0;padding:10px 14px;border:1px solid var(--linia-sterowanie);color:var(--tekst-drugi);font-size:14px}
.komunikat[hidden]{display:none}

@media (max-width:699px){
  .karta{padding:16px}
  .rek{padding:16px}
  .rek h2{font-size:22px}
  .decyzja{padding:16px}
}
.k-linki{margin:0 0 4px;color:var(--tekst-drugi);font-size:14px;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.k-linki a{display:inline-flex;align-items:center;min-height:44px}