/*
 * css/strona.css - dodatki strony case study „Konfigurator zamówień” (skóra portfolio, tylko tokeny).
 * Ramka „Tak to trafia do biura” i kalkulator „Policz sam” (worki na paletach).
 */

/* ramka o mailu do biura: wyróżnienie tłem, bez paska z boku */
.kk-biuro {
  display: grid;
  gap: var(--o-3);
  justify-items: start;
  padding: var(--o-4) var(--o-5);
  border-radius: var(--r-3);
  background: var(--akcent-tlo);
  border: 1px solid var(--akcent-linia);
}
.kk-biuro p { color: var(--tekst-2); }
.kk-biuro .kk-biuro__tytul {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akcent);
}

.kk-status { color: var(--tekst-2); margin-bottom: var(--o-5); max-width: 62ch; }

@media (max-width: 719px) {
  .kk-etapy { grid-template-columns: 1fr 1fr; gap: var(--o-2); }
  .kk-etapy .pf-schemat__lacznik { display: none; }
  .kk-etapy .pf-schemat__krok:last-child { grid-column: 1 / -1; }
}

/* ---------- kalkulator „Policz sam” ---------- */
.kk {
  margin-top: var(--o-6);
  padding: var(--o-5);
  border: 1px solid var(--linia-2);
  border-radius: var(--r-4);
  background: var(--powierzchnia);
  display: grid;
  gap: var(--o-5);
}
.kk__glowa h3 { font-size: var(--fs-h4); }
.kk__glowa p { margin-top: var(--o-1); color: var(--tekst-2); max-width: 62ch; }
.kk__uklad { display: grid; gap: var(--o-6); }
@media (min-width: 900px) {
  .kk__uklad { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--o-7); }
}
.kk__sterowanie { display: grid; gap: var(--o-5); align-content: start; }
.kk__suwak { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--o-1) var(--o-3); }
.kk__suwak input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--akcent); cursor: pointer; }
.kk__etykieta {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tekst-2);
}
.kk__wartosc { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; }
.kk__grupa { border: 0; margin: 0; padding: 0; min-width: 0; }
.kk__chipy { display: flex; flex-wrap: wrap; gap: var(--o-2); margin-top: var(--o-2); }
.kk__regula { font-size: var(--fs-mala); color: var(--tekst-2); }

.kk__wynik { display: grid; gap: var(--o-5); align-content: start; min-width: 0; }
.kk__palety { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--o-4) var(--o-5); min-height: 104px; }
.kk-paleta { display: grid; gap: var(--o-2); justify-items: start; }
.kk-paleta__worki {
  display: grid;
  grid-template-columns: repeat(10, 9px);
  gap: 3px;
  padding: 0 4px 6px;
  border-bottom: 5px solid var(--linia-3);
}
.kk-worek { width: 9px; height: 9px; border-radius: 2px; background: var(--tekst-2); }
@media (min-width: 900px) {
  .kk-paleta__worki { grid-template-columns: repeat(10, 12px); }
  .kk-worek { width: 12px; height: 12px; }
}
.kk-worek--doc { background: var(--akcent); }
.kk-worek--pusty { background: transparent; box-shadow: inset 0 0 0 1px var(--linia-3); }
.kk-paleta__opis { font-family: var(--font-mono); font-size: var(--fs-mini); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.kk-legenda { display: flex; flex-wrap: wrap; gap: var(--o-2) var(--o-4); font-size: var(--fs-mala); color: var(--tekst-2); }
.kk-legenda span { display: inline-flex; align-items: center; gap: var(--o-2); }
.kk-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

.kk__lista { display: grid; border-top: 1px solid var(--linia); }
.kk__lista > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--o-1) var(--o-4);
  padding: var(--o-3) 0;
  border-bottom: 1px solid var(--linia);
}
.kk__lista dt { color: var(--tekst-2); }
.kk__lista dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mala); color: var(--tekst); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kk__lista dd strong { color: var(--akcent); font-weight: 700; }
@media (max-width: 560px) {
  .kk { padding: var(--o-4); }
  .kk__lista > div { grid-template-columns: 1fr; }
}