/* =====================================================================
   Moduł "polecenia" (Polecaj nas i zarabiaj). Klasy z prefiksem .pol-
   Wartości tylko ze zmiennych tokens.css. Responsywność od 360 px.
   ===================================================================== */
.pol { display: flex; flex-direction: column; gap: var(--o-5); min-width: 0; }
.pol > * { min-width: 0; }
.pol-naglowek { margin-bottom: 0; }
.pol-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3); }
.pol-link-admin { font-weight: 700; font-size: var(--t-s); }
.pol-h2 { margin: 0; font-size: var(--t-l); }
.pol-pomoc { color: var(--tekst-2); font-size: var(--t-s); }
.pol-uwaga { margin-top: var(--o-4); padding: var(--o-3) var(--o-4); background: var(--karta-2); border: 1px dashed var(--ramka-mocna); border-radius: var(--r-m); color: var(--tekst-2); font-size: var(--t-s); }

/* ---------- ekran informacyjny ---------- */
.pol-hero-karta { background: linear-gradient(135deg, var(--akcent-tlo), var(--karta) 70%); border-color: #ffd2a3; }
.pol-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--o-5); align-items: center; }
.pol-hero__etykieta { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akcent-tekst); }
.pol-hero__kwota { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1.1; margin: var(--o-1) 0 var(--o-2); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pol-hero__opis { color: var(--tekst-2); margin: 0; max-width: 46ch; }
.pol-fakty { display: grid; gap: var(--o-2); margin: 0; }
.pol-fakty > div { display: flex; justify-content: space-between; gap: var(--o-3); padding: var(--o-2) 0; border-bottom: 1px solid var(--ramka); }
.pol-fakty > div:last-child { border-bottom: 0; }
.pol-fakty dt { color: var(--tekst-2); font-size: var(--t-s); flex: none; }
.pol-fakty dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.pol-kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-4); }
.pol-kroki li { display: flex; gap: var(--o-3); align-items: flex-start; background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-l); padding: var(--o-4); box-shadow: var(--cien-1); }
.pol-kroki li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pol-kroki li span:not(.pol-kroki__numer) { color: var(--tekst-2); font-size: var(--t-s); }
.pol-kroki__numer { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--akcent); color: var(--na-akcencie); font-weight: 800; display: grid; place-items: center; }
.pol-dwie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--o-5); align-items: start; }

/* ---------- regulamin ---------- */
.pol-regulamin { max-height: 20rem; overflow: auto; padding: var(--o-4); background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); font-size: var(--t-s); line-height: 1.6; }
.pol-regulamin h3 { font-size: var(--t-m); margin: var(--o-3) 0 var(--o-2); }
.pol-regulamin h3:first-child { margin-top: 0; }
.pol-regulamin p { margin: 0 0 var(--o-2); }
.pol-regulamin__lista { margin: 0 0 var(--o-2); padding-left: 1.4em; }
.pol-regulamin__lista li { margin-bottom: 4px; }
.pol-regulamin:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.pol .k-akordeon__tresc { padding-top: var(--o-1); }

/* ---------- formularze ---------- */
.pol-formularz { display: block; }
.pol-grupa { border: 1px solid var(--ramka); border-radius: var(--r-m); margin: 0 0 var(--o-4); padding: var(--o-3) var(--o-4); min-width: 0; }
.pol-grupa legend { font-weight: 700; font-size: var(--t-s); padding: 0 var(--o-2); }
.pol-radio, .pol-zgoda { display: flex; align-items: flex-start; gap: var(--o-3); padding: 6px 0; min-height: 44px; }
.pol-radio input, .pol-zgoda input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--akcent); }
.pol-radio label, .pol-zgoda label { font-size: var(--t-s); line-height: 1.45; cursor: pointer; padding-top: 1px; }
.pol-zgoda { margin-bottom: var(--o-2); }
.pol .k-pole select { width: 100%; min-height: 44px; padding: 10px 14px; background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); }
.pol-pasek-narzedzi { display: flex; flex-wrap: wrap; gap: var(--o-3); align-items: flex-end; margin-bottom: var(--o-4); }
.pol-pasek-narzedzi .k-pole { flex: 1 1 260px; margin-bottom: 0; }
.pol-pasek-narzedzi .k-przycisk { flex: none; }
.pol-reg-edytor { width: 100%; min-height: 18rem; padding: var(--o-3) var(--o-4); background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); font: inherit; font-size: var(--t-s); line-height: 1.55; resize: vertical; margin-bottom: var(--o-4); }
.pol-reg-edytor:focus { outline: 3px solid var(--akcent); border-color: var(--akcent); }

/* ---------- panel: statystyki, link, układ ---------- */
.pol-statystyki { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--o-3); }
.pol-stat { padding: var(--o-4); }
.pol-stat__etykieta { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); }
.pol-stat__wartosc { font-size: var(--t-2xl); font-weight: 800; line-height: 1.2; margin: var(--o-1) 0; overflow-wrap: anywhere; }
.pol-stat__opis { font-size: var(--t-xs); color: var(--tekst-2); }
.pol-kopiuj { display: flex; flex-wrap: wrap; gap: var(--o-2); align-items: center; margin-top: var(--o-3); }
.pol-link { flex: 1 1 240px; min-width: 0; min-height: 44px; padding: 10px 14px; background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); font: inherit; font-size: var(--t-s); color: var(--tekst); }
.pol-link--kod { flex: 0 1 160px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: 0.08em; }
.pol-link:focus { outline: 3px solid var(--akcent); border-color: var(--akcent); }
.pol-uklad { gap: var(--o-5); }
.pol-glowna, .pol-boczna { display: flex; flex-direction: column; gap: var(--o-5); min-width: 0; }
.pol-punkty { margin: var(--o-3) 0 0; padding-left: 1.2em; color: var(--tekst-2); font-size: var(--t-s); }
.pol-punkty li { margin-bottom: var(--o-2); }
.pol-baner { border-color: #f0dd9c; background: var(--ostrz-tlo); }
.pol-zagrozenie { border-color: #f1c0bc; }
.pol-filtry { margin-bottom: var(--o-4); }
.pol-wiecej { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3); margin-top: var(--o-3); }

/* ---------- tabela (karty na wąskich ekranach) ---------- */
.pol-tabela td, .pol-tabela th { vertical-align: top; }
.pol-tabela td small { display: block; color: var(--tekst-2); font-size: var(--t-xs); margin-top: 2px; overflow-wrap: anywhere; }
.pol-osoba strong { overflow-wrap: anywhere; }
.pol-powod { display: block; color: var(--tekst-2); font-size: var(--t-xs); margin-top: 2px; }
.pol-historia > td, .pol-szczegoly-wiersz > td { background: var(--karta-2); }
.pol-oslista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--o-2); }
.pol-oslista li { display: grid; grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr); gap: var(--o-3); padding-left: var(--o-3); border-left: 3px solid var(--akcent); font-size: var(--t-s); }
.pol-oslista time { color: var(--tekst-2); }
.pol-oslista .pol-powod { grid-column: 2; }

/* ---------- widok administratora ---------- */
.pol-szczegoly { display: grid; gap: var(--o-4); padding: var(--o-2) 0; }
.pol-fakty--szczegoly { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: var(--o-5); }
.pol-akcje-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--o-4); align-items: start; }
.pol-podkarta { padding: var(--o-4); box-shadow: none; }
.pol-podkarta h3 { font-size: var(--t-m); }
.pol-ustawienia { max-width: 560px; }

@media (max-width: 860px) {
  .pol-hero, .pol-dwie, .pol-kroki { grid-template-columns: minmax(0, 1fr); }
  .pol-uklad { grid-template-columns: minmax(0, 1fr); }
}

/* Tabela jako karty: telefon i wąskie okna */
@media (max-width: 720px) {
  .pol-tabela-opak { border: 0; background: transparent; overflow: visible; }
  .pol-tabela, .pol-tabela tbody, .pol-tabela tr, .pol-tabela td { display: block; width: 100%; }
  .pol-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pol-tabela tbody > tr { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-m); padding: var(--o-3) var(--o-4); margin-bottom: var(--o-3); }
  .pol-tabela td { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--o-3); padding: 6px 0; border: 0; text-align: right; }
  .pol-tabela td > * { min-width: 0; }
  .pol-tabela td::before { content: attr(data-etykieta); flex: none; font-weight: 700; font-size: var(--t-xs); color: var(--tekst-2); text-align: left; padding-top: 3px; }
  .pol-tabela td.pol-osoba { display: block; text-align: left; border-bottom: 1px solid var(--ramka); padding-bottom: var(--o-2); margin-bottom: var(--o-1); }
  .pol-tabela td.pol-osoba::before { content: none; }
  .pol-tabela td.pol-akcje { justify-content: flex-start; padding-top: var(--o-2); }
  .pol-tabela td.pol-akcje::before { content: none; }
  .pol-tabela tr.pol-historia, .pol-tabela tr.pol-szczegoly-wiersz { padding: var(--o-3); }
  .pol-tabela tr.pol-historia > td, .pol-tabela tr.pol-szczegoly-wiersz > td { display: block; text-align: left; padding: 0; background: transparent; }
  .pol-tabela tr.pol-historia > td::before, .pol-tabela tr.pol-szczegoly-wiersz > td::before { content: none; }
  .pol-tabela td small { text-align: inherit; }
  .pol-tabela td > div, .pol-tabela td > span { text-align: right; }
  .pol-oslista li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pol-oslista .pol-powod { grid-column: 1; }
}

@media (max-width: 560px) {
  .pol { gap: var(--o-4); }
  .pol-fakty > div { flex-direction: column; gap: 2px; }
  .pol-fakty dd { text-align: left; }
  .pol-link--kod { flex: 1 1 100%; }
  .pol-kopiuj .k-przycisk { flex: 1 1 100%; }
  .pol-stat__wartosc { font-size: var(--t-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .pol * { scroll-behavior: auto; }
}