/* Ekran logowania: SSR, bez zależności od JS na ścieżce hasła, WCAG 2.2 AA (Docs/06, 6.6).
 *
 * **Paleta jest WSPÓLNA z konsolą i z prototypem** — `tokens.css` obok tego pliku jest
 * generowany z `prototypes/_shared.css` (`KK-24`, `KK-26`). Tutaj NIE MA ani jednej
 * wartości koloru.
 *
 * Do zadania `KK-26` ten arkusz miał WŁASNY blok `:root` z sześcioma tokenami
 * (`--bg`, `--fg`, `--muted`, `--border`, `--accent`, `--error`) o wartościach innych niż
 * prototyp. Skutek nie był estetyczny: ekran logowania i konsola tego samego produktu
 * miały dwa różne wyglądy, a poprawka koloru w zatwierdzonej palecie nie docierała do
 * strony, którą widzi KAŻDY użytkownik końcowy każdego klienta — czyli do najczęściej
 * oglądanego ekranu w całym produkcie. Objaw był przy tym niewidoczny w kodzie: oba
 * arkusze były poprawne, każdy osobno.
 *
 * Klasy zostają LOKALNE i to jest ta sama decyzja co w konsoli: wspólny jest słownik
 * wartości, nie framework klas. Ekran logowania ma inny układ niż konsola (jedna karta
 * na środku, bez szyny nawigacji), więc prymitywy konsoli nie miałyby tu czego opisywać.
 */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--ground);
    color: var(--ink);
    font: 16px/1.5 var(--f-ui);
}

.card {
    width: min(420px, 100% - 2rem);
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

/* Nazwa firmy klienta NAD nagłówkiem (`KK-33`). Mniejsza i stonowana: odpowiada na pytanie
   „czyje to logowanie", a nie „co mam zrobić" — i nie może przykryć nagłówka, który jest
   instrukcją. */
.marka {
    margin: 0 0 .5rem;
    color: var(--ink-2);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

h1 { margin: 0 0 .25rem; font-size: 1.4rem; letter-spacing: -0.011em; }
.tenant { margin: 0 0 1.5rem; color: var(--ink-2); font-size: .9rem; }

label { display: block; margin-top: 1rem; font-size: .85rem; color: var(--ink-2); }

input[type="email"], input[type="password"] {
    width: 100%;
    padding: .65rem .75rem;
    margin-top: .25rem;

    /* Granica pola na `--ink-3`, nie na kolorze przegrody: granica elementu, na którym
       się DZIAŁA, wymaga 3 : 1 (WCAG 1.4.11), a kolor przegrody daje 1.35 : 1. Krawędź
       pola bywa jedyną rzeczą pokazującą, gdzie się pisze. */
    border: 1px solid var(--ink-3);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font-size: 1rem;
}

/* Obrys ogniska ZOSTAJE WIDOCZNY — usunięcie go zabiera całą nawigację klawiaturą,
   a to jedyny sposób pracy części użytkowników (WCAG 2.2, kryterium 2.4.7). */
input:focus-visible, button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

button {
    margin-top: 1.25rem;
    width: 100%;
    padding: .7rem 1rem;
    border-radius: var(--r);
    border: 1px solid var(--ink-3);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
}

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Portfel EUDI ma WŁASNY token koloru w zatwierdzonej palecie (`--eudi`), a nie kolor
   akcentu klienta: znak zaufania ekosystemu ma być rozpoznawalny niezależnie od
   brandingu, którym klient obłożył ekran (ARF, TS1). */
button.eudi {
    border-color: var(--eudi);
    background: var(--eudi-soft);
    color: var(--eudi);
    font-weight: 600;
}

button.sandbox { border-style: dashed; font-size: .85rem; }

/* Oznaczenie piaskownicy (zadanie EU-09). Kontrast i obramowanie, nie sam kolor:
   informacja odróżniająca dane testowe od dowodu tożsamości nie może zależeć od
   tego, czy odbiorca widzi kolory. */
.sandbox-badge {
    margin: .5rem 0;
    padding: .5rem .75rem;
    border: 2px dashed currentColor;
    border-radius: var(--r);
    color: var(--warn);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.error {
    margin: 1rem 0 0;
    padding: .65rem .75rem;
    border-left: 4px solid var(--crit);
    background: var(--crit-soft);
    color: var(--crit);
    font-size: .9rem;
}

.separator {
    margin: 1.75rem 0 .5rem;
    text-align: center;
    color: var(--ink-3);
    font-size: .8rem;
}

.providers form { margin: 0; }

.eudi-pending { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.eudi-pending h2 { font-size: 1rem; }

/* ── KOD QR (`KK-27`) ───────────────────────────────────────────────────────────────
   Szerokość ZAMYKA rozmiar obrazka, a nie generator: kod ma być duży na telefonie
   i mniejszy na monitorze, i jest to decyzja układu, nie kodowania.

   `max-width` w centymetrach, nie w pikselach: czytelność kodu zależy od JEGO
   FIZYCZNEJ wielkości na szkle i od odległości oka, a nie od gęstości ekranu.
   Piksele dałyby kod trzy razy mniejszy na telefonie z gęstym ekranem — czyli
   dokładnie tam, gdzie się go skanuje.

   Kolory kodu są WPISANE W SVG, a nie brane z tokenów (`KK-16` pozwala klientowi
   ustawić kolor akcentu). Kontrast modułów jest warunkiem ODCZYTU, nie elementem
   wyglądu: kod w barwach firmowych bywa nieczytelny, a wygląda na działający. */
.kod-qr-ramka {
    display: flex;
    justify-content: center;
    margin: .75rem 0;
}

.kod-qr-ramka .kod-qr {
    width: 100%;
    max-width: 5cm;
    height: auto;

    /* Ramka oddziela biel kodu od białej karty w motywie jasnym. Bez niej margines
       kodu zlewa się z tłem i zostaje wzór bez marginesu, którego czytniki nie łapią. */
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.wallet-uri {
    overflow-wrap: anywhere;
    font-family: var(--f-mono);
    font-size: .7rem;
    color: var(--ink-2);
}

.hint { font-size: .85rem; color: var(--ink-2); }
/* Stopka: napis klienta i jego odnośniki w jednym wierszu, z odstępem (`KK-33`).
   `--ink-3` jest tu w porządku, bo to tekst POMOCNICZY (WCAG 1.4.3 wymaga 4.5:1 dla
   tekstu — `--ink-3` ma 4.60:1, patrz `tools/check-kontrast.py`). */
.footer {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    color: var(--ink-3);
    font-size: .75rem;
}

.footer a { color: var(--ink-3); }