/* logowanie-1g-doc.css — instrukcja wpięcia przycisku „Zaloguj przez 1g.pl".
   Utworzone 2026-08-04.

   DLACZEGO WŁASNY ARKUSZ, A NIE STYLE PORTALU:
     To strona czytana z otwartym edytorem obok. Liczy się długość wiersza kodu,
     czytelność bloków i możliwość doskoczenia do kroku — nie zgodność z resztą marki.
     Kolory bierzemy jednak stąd, gdzie stoi dokumentacja API (api-dokumentacja.css),
     żeby oba działy dla programistów wyglądały jak jedno miejsce, a nie dwa.

   KONTRAST:
     Szarość opisów to #4a5568 na białym (7,5:1). Portale przeszły audyt dostępności
     na zero naruszeń i ta strona tego nie cofa. */

.l1g {
  --l1g-linia: #e2e8f0;
  --l1g-tekst: #1a202c;
  --l1g-szary: #4a5568;
  --l1g-tlo-2: #f7f9fc;
  --l1g-kod-tlo: #1e2532;
  --l1g-kod-tekst: #e6edf3;
  --l1g-akcent: #0b5cad;
  --l1g-zielen: #2EA84F;

  max-width: 860px;
  margin: 0 auto;
  padding: 32px 16px 64px;
  color: var(--l1g-tekst);
  line-height: 1.62;
  font-size: 15.5px;
}

.l1g h1 { font-size: 1.9rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -.02em; }
.l1g h2 { font-size: 1.25rem; font-weight: 700; margin: 40px 0 10px; letter-spacing: -.01em; }
.l1g h3 { font-size: 1.02rem; font-weight: 700; margin: 24px 0 8px; }
.l1g p  { margin: 0 0 14px; }
.l1g p.l1g-lid { font-size: 1.05rem; color: var(--l1g-szary); margin-bottom: 24px; }
.l1g a  { color: var(--l1g-akcent); }

/* Kroki. Numer w kółku, żeby dało się powiedzieć „utknąłem na trójce". */
.l1g-krok { display: flex; gap: 14px; align-items: baseline; margin: 34px 0 10px; }
.l1g-krok span {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--l1g-zielen); color: #fff; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; font-size: .92rem;
}
.l1g-krok h2 { margin: 0; }

/* Kod. Przewija się we WŁASNYM pudełku — długi adres nie może rozpychać strony,
   bo na telefonie ucieka wtedy cała reszta instrukcji. */
.l1g-kod {
  background: var(--l1g-kod-tlo); color: var(--l1g-kod-tekst);
  border-radius: 10px; padding: 16px 18px; margin: 0 0 16px; overflow-x: auto;
}
.l1g-kod pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; line-height: 1.65; white-space: pre; }
.l1g-kod code { color: inherit; background: none; padding: 0; }
.l1g-kod-belka { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 6px; }
.l1g-kod-belka b { font-size: .84rem; font-weight: 700; color: var(--l1g-szary);
  text-transform: uppercase; letter-spacing: .05em; }
.l1g-kopiuj { border: 1px solid var(--l1g-linia); background: #fff; color: var(--l1g-akcent);
  border-radius: 7px; padding: 5px 12px; font: inherit; font-size: .82rem; cursor: pointer; }
.l1g-kopiuj:hover { background: var(--l1g-tlo-2); }

.l1g code.l1g-wtekscie { background: var(--l1g-tlo-2); border: 1px solid var(--l1g-linia);
  border-radius: 5px; padding: 1px 6px; font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.l1g-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 18px;
  display: block; overflow-x: auto; }
.l1g-tabela th, .l1g-tabela td { padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--l1g-linia); vertical-align: top; }
.l1g-tabela th { font-weight: 700; font-size: .8rem; color: var(--l1g-szary);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.l1g-tabela code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

.l1g-uwaga { border-left: 4px solid var(--l1g-zielen); background: var(--l1g-tlo-2);
  border-radius: 0 9px 9px 0; padding: 14px 16px; margin: 0 0 18px; font-size: .93rem; }
.l1g-uwaga strong { display: block; margin-bottom: 4px; }
.l1g-uwaga--groz { border-left-color: #b42318; }

.l1g-przycisk-podglad { display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; min-height: 44px; border: 1px solid #d0d5dd; border-radius: 9px;
  background: #fff; color: #1a202c; font-weight: 600; font-size: .95rem;
  text-decoration: none; }
.l1g-przycisk-podglad:hover { background: #f7f9fc; color: #1a202c; }
.l1g-przycisk-podglad img { width: 20px; height: 20px; }

.l1g-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 12px 22px; border-radius: 9px; background: var(--l1g-zielen); color: #fff;
  font-weight: 700; text-decoration: none; }
.l1g-cta:hover { filter: brightness(1.07); color: #fff; }

.l1g-spis { background: var(--l1g-tlo-2); border: 1px solid var(--l1g-linia);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 30px; }
.l1g-spis ol { margin: 6px 0 0; padding-left: 20px; }
.l1g-spis li { margin: 3px 0; }

@media (prefers-color-scheme: dark) {
  .l1g { --l1g-linia:#2c3038; --l1g-tekst:#e6e9ef; --l1g-szary:#a8b1c0; --l1g-tlo-2:#171a1f;
         --l1g-akcent:#6cb0ff; }
  .l1g-kopiuj, .l1g-przycisk-podglad { background:#17191d; border-color:#2c3038; color:#e6e9ef; }
  .l1g-przycisk-podglad:hover { background:#1f232a; color:#e6e9ef; }
  .l1g-kopiuj { color: var(--l1g-akcent); }
}
@media (max-width: 640px) {
  .l1g { font-size: 15px; padding: 22px 14px 48px; }
  .l1g h1 { font-size: 1.55rem; }
}