/*
  DRZWI - EKRANY DROGI WEJSCIA SESJI 3 (395): 1.5 poczta, 1.6 miasto i zawod,
  1.7 zmiana adresu, 1.8 i 1.9 haslo, 1.10 martwy link, 1.11 jezyk i motyw,
  1.12 plaszki, 1.15 adres w ustawieniach, 1.17 gotowe w przegladarce.

  Liczby slowo w slowo z etalonu `docs/dyzajn/robotatut-DYZAJN-PORTALU-2026-10-15.html`
  (telefon 390, planszet 1024 pionowo, laptop 1440). Wspolna podstawe drogi
  wejscia sklada sesja 2 - ten arkusz ustapi jej, gdy przyjdzie.

  Trzy rozkladki: telefon (do 767), planszet (768+ albo pionowy ekran 1024+),
  laptop (1024+ poziomo) - zdjecie po lewej, formularz po prawej.
*/
.dz {
  --dz-tlo: #09090B; --dz-h: #FFFFFF; --dz-lead: #A9A49A; --dz-mocny: #FFFFFF;
  --dz-tekst: #E7E3DB; --dz-karta: #101014; --dz-ramka: #2B2B34; --dz-ramka2: #22222A;
  --dz-szary: #8B867E; --dz-szary2: #7D786F; --dz-nad: #6E6A63;
  --dz-zl: #E8C96A; --dz-zl2: #D9B64A;
  --dz-pz-tlo: #15130D; --dz-pz-ramka: #D9B64A; --dz-pz-tekst: #E7E3DB;
  --dz-pc-tlo: #1A100E; --dz-pc-ramka: #C0574A; --dz-pc-tekst: #F0C9C0; --dz-pc-ikona: #E08A7A;
  --dz-pg-tlo: #0E1A0E; --dz-pg-ramka: #2E5A2A; --dz-pg-tekst: #8FBF86;
  --dz-pole: #101014; --dz-pole-tekst: #FFFFFF; --dz-ph: #55525A;
  --dz-pole-ramka: #2B2B34;
  --dz-staly: #0E0E12; --dz-staly-tekst: #7D786F; --dz-staly-ikona: #55525A;
  --dz-znak-1: #CFCABF; --dz-znak-2: #E6CC80; --dz-znak-pin: #D9B64A; --dz-znak-oko: #09090B;
  --dz-gz-tlo: rgba(9,9,11,0.6); --dz-gz-ramka: rgba(217,182,74,0.45); --dz-gz: #E8C96A;
  --dz-zaslona: linear-gradient(180deg, rgba(9,9,11,0.55) 0%, rgba(9,9,11,0.2) 32%, rgba(9,9,11,0.82) 74%, #09090B 100%);
  --dz-lead-foto: #BDB7AC; --dz-mocny-foto: #FFFFFF; --dz-h-foto: #FFFFFF;
  margin: 0; min-height: 100vh; background: var(--dz-tlo); color: var(--dz-tekst);
  font-family: Manrope, system-ui, sans-serif;
}
[data-theme="light"] .dz {
  --dz-tlo: #F7F5F1; --dz-h: #15120A; --dz-lead: #6B655C; --dz-mocny: #15120A;
  --dz-tekst: #2A2620; --dz-karta: #FFFFFF; --dz-ramka: #DED8CF; --dz-ramka2: #E6E1D9;
  --dz-szary: #7A746B; --dz-szary2: #857F75; --dz-nad: #8A8479;
  --dz-zl: #8A6A12; --dz-zl2: #8A6A12;
  --dz-pz-tlo: #FBF3DC; --dz-pz-ramka: #8A6A12; --dz-pz-tekst: #2A2620;
  /* 1.12 jasny - dokladnie jak etalon (regula 235): tlo #1A100E, ramka #C0574A, tekst #8E2F1F. */
  --dz-pc-tekst: #8E2F1F;
  --dz-pg-tlo: #EBF5E9; --dz-pg-ramka: #B9DBB4; --dz-pg-tekst: #2F7A2A;
  --dz-pole: #FFFFFF; --dz-pole-tekst: #15120A; --dz-ph: #9C968C;
  --dz-pole-ramka: #DED8CF;
  --dz-staly: #FFFFFF; --dz-staly-tekst: #857F75; --dz-staly-ikona: #9C968C;
  --dz-znak-1: #FFFFFF; --dz-znak-2: #F2D894; --dz-znak-pin: #8A6A12; --dz-znak-oko: #2A2620;
  --dz-gz-tlo: rgba(255,255,255,0.8); --dz-gz-ramka: rgba(138,106,18,0.4); --dz-gz: #8A6A12;
  --dz-zaslona: linear-gradient(180deg, rgba(18,15,10,0.5) 0%, rgba(18,15,10,0.08) 32%, rgba(247,245,241,0.14) 64%, rgba(247,245,241,0.72) 86%, #F7F5F1 100%);
  --dz-lead-foto: #E3DED4; --dz-h-foto: #FFFFFF; --dz-mocny-foto: #15120A;
}
html:has(.dz) { background: var(--bg, #09090B); }
.dz *, .dz *::before, .dz *::after { box-sizing: border-box; }
.dz :where(a) { color: inherit; }

/* ---------------------------------------------------------------- rama */
/* OD 18.10 RAME RYSUJE `wejscie.css` (`layouts.drzwi` rozszerza `layouts.wejscie`):
   okladka, znak ze swiatlem, guzik "Jezyk i motyw", kolumna. Tu tylko to,
   czego ekrany wejscia 1.1/1.2 nie maja: tytul ZE ZDANIEM na dole zdjecia
   (jeden blok, liczby z etalonu jak dotad), wielkosci tytulu 1.6-1.17
   i strzalka "wroc" zamiast znaku na telefonie. */
.dz .we-glowa { display: block; position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 10px; }
.dz .we-glowa .we-h1 { position: static; letter-spacing: -0.9px; overflow-wrap: anywhere; }
.dz .we-h1 .dz-zl-t { color: var(--dz-zl); }
.dz .we-lead { overflow-wrap: anywhere; }
.dz .we-lead b { color: var(--dz-mocny); font-weight: 700; }
/* zdanie na zdjeciu (od planszetu): pogrubienie w barwie zdjecia */
@media (min-width: 768px) { .dz .we-lead-szer b { color: var(--dz-mocny-foto); } }
/* Strzalka "wroc": na telefonie zamiast znaku portalu i jego swiatla (etalon). */
.dz-wstecz { position: absolute; z-index: 2; left: 20px; top: 50px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--dz-gz-tlo); border: 1px solid var(--dz-gz-ramka); border-radius: 13px; }
.dz-wstecz svg { width: 21px; height: 21px; stroke: var(--dz-gz); }
@media (max-width: 767px) { .dz-ma-wstecz .we-znak { display: none; } }
@media (min-width: 768px) { .dz-wstecz { display: none; } }
.dz-blok { flex: none; padding-top: 26px; }
.dz-blok-16 { padding-top: 16px; } .dz-blok-18 { padding-top: 18px; } .dz-blok-20 { padding-top: 20px; } .dz-blok-14 { padding-top: 14px; }
.dz-dol { flex: none; margin-top: auto; padding: 24px 0 30px; font-size: 14.5px; color: var(--dz-lead); font-weight: 600; }
.dz-dol a, .dz-dol button { background: none; border: 0; padding: 0; font: 800 14.5px Manrope, system-ui, sans-serif; color: var(--dz-zl); text-decoration: none; cursor: pointer; }
.dz-odstep { height: 20px; }

/* ---------------------------------------------------------- przyciski */
.dz-zloty { position: relative; display: block; width: 100%; border: none; border-radius: 14px; padding: 18px; min-height: 58px;
  background: linear-gradient(135deg, #FBEFC2 0%, #D9B64A 45%, #B08A24 100%); color: #15120A;
  font: 800 16px/1.375 Manrope, system-ui, sans-serif; cursor: pointer; text-align: center; text-decoration: none; }
.dz-zloty svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 9px; stroke: #15120A; }
/* 1.16 "Przycisk w trakcie": napis znika, kolko sie kreci, drugie dotkniecie nic nie robi. */
.dz-zloty.dz-spin { color: transparent; pointer-events: none; }
.dz-zloty.dz-spin svg { visibility: hidden; }
.dz-zloty.dz-spin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; border: 2.5px solid rgba(21,18,10,0.25); border-top-color: #15120A; animation: dz-krec .8s linear infinite; }
.dz-guzik { display: block; width: 100%; margin-top: 14px; background: var(--dz-karta); border: 1px solid var(--dz-ramka); border-radius: 13px; padding: 15px;
  text-align: center; font: 700 15px/1.4 Manrope, system-ui, sans-serif; color: var(--dz-tekst); text-decoration: none; cursor: pointer; }
.dz-guzik-10 { margin-top: 10px; }
.dz-cichy { display: block; width: 100%; margin-top: 9px; background: none; border: none; font: 700 14px/1.4 Manrope, system-ui, sans-serif;
  color: var(--dz-szary2); padding: 10px; cursor: pointer; text-align: center; }
.dz-cichy:disabled { cursor: default; }
.dz-pod { margin: 12px 2px 0; font-size: 13px; line-height: 1.5; color: var(--dz-szary); }
.dz-czekam { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 0 2px; font-size: 13px; color: var(--dz-szary); font-weight: 600; }
.dz-spin-krag { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--dz-ramka); border-top-color: var(--dz-zl2); animation: dz-krec 1s linear infinite; }
@keyframes dz-krec { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dz-spin-krag, .dz-zloty.dz-spin::after { animation-duration: 3s; } }

/* --------------------------------------------------------------- pola */
.dz-nad { display: block; margin-bottom: 9px; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 800; color: var(--dz-nad); }
.dz-nad-rz { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dz-nad-rz small { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--dz-szary2); }
.dz-nad-dalej { margin-top: 20px; }
.dz-pole { width: 100%; background: var(--dz-pole); border: 1px solid var(--dz-pole-ramka); border-radius: 13px; color: var(--dz-pole-tekst);
  font: 600 16px/1.3 Manrope, system-ui, sans-serif; padding: 17px 16px; outline: none; }
.dz-pole::placeholder { color: var(--dz-ph); font-weight: 500; }
.dz-pole:focus { border-color: var(--dz-zl2); }
.dz-pole[aria-invalid="true"] { border-color: var(--dz-pc-ramka); }
.dz-haslo { display: flex; align-items: center; background: var(--dz-pole); border: 1px solid var(--dz-pole-ramka); border-radius: 13px; padding-right: 6px; }
.dz-haslo:focus-within { border-color: var(--dz-zl2); }
.dz-haslo:has([aria-invalid="true"]) { border-color: var(--dz-pc-ramka); }
.dz-haslo .dz-pole { flex: 1; min-width: 0; border: 0; background: transparent; }
/* Oko obok pola, nie na nim (pomiar #5 - cele nie zachodza na siebie). */
.dz-oko { flex: none; width: 48px; min-height: 48px; align-self: stretch; margin-left: 8px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 0; }
.dz-oko svg { width: 20px; height: 20px; stroke: var(--dz-szary); }
/* Autouzupelnienie (17.10) - jak `.we-haslo` w wejscie.css: jasne tlo na
   cala ramke z okiem, zaokraglenie zostaje, oko ciemnieje na jasnym. */
.dz-pole:-webkit-autofill, .dz-pole:-webkit-autofill:hover, .dz-pole:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px #E8F0FE inset; -webkit-text-fill-color: #15120A; caret-color: #15120A; }
.dz-haslo .dz-pole:-webkit-autofill { border-radius: 12px 0 0 12px; }
.dz-haslo:has(.dz-pole:-webkit-autofill) { background: #E8F0FE; }
.dz-haslo:has(.dz-pole:-webkit-autofill) .dz-oko svg { stroke: #4E4A43; }
.dz-dobrze { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 13.5px; font-weight: 700; color: var(--dz-pg-tekst); }
.dz-dobrze svg { width: 15px; height: 15px; stroke: var(--dz-pg-tekst); flex: none; }
.dz-staly { display: flex; align-items: center; gap: 11px; background: var(--dz-staly); border: 1px solid var(--dz-ramka2); border-radius: 13px; padding: 15px 16px;
  font-size: 15px; font-weight: 700; color: var(--dz-staly-tekst); overflow-wrap: anywhere; }
.dz-staly svg { width: 17px; height: 17px; flex: none; stroke: var(--dz-staly-ikona); }

/* ------------------------------------------------------------- plaszki */
.dz-pl { display: flex; align-items: flex-start; gap: 12px; border-radius: 13px; padding: 15px; font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.dz-pl svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.dz-pl p { margin: 0; }
.dz-pl-zl { background: var(--dz-pz-tlo); border: 1px solid var(--dz-pz-ramka); color: var(--dz-pz-tekst); }
.dz-pl-zl svg { stroke: var(--dz-zl); }
.dz-pl-cz { background: var(--dz-pc-tlo); border: 1px solid var(--dz-pc-ramka); color: var(--dz-pc-tekst); }
.dz-pl-cz svg { stroke: var(--dz-pc-ikona); }
.dz-pl-sz { background: var(--dz-karta); border: 1px solid var(--dz-ramka2); color: var(--dz-szary); gap: 11px; padding: 14px 15px; font-size: 13px; line-height: 1.5; }
.dz-pl-sz svg { width: 18px; height: 18px; stroke: var(--dz-szary); }
.dz-pl-zi { align-items: center; gap: 11px; padding: 13px 15px; background: var(--dz-pg-tlo); border: 1px solid var(--dz-pg-ramka); color: var(--dz-pg-tekst); font-weight: 700; }
.dz-pl-zi svg { stroke: var(--dz-pg-tekst); }
.dz-pl-mocny { font-weight: 700; color: var(--dz-pz-tekst); }
.dz-pl + .dz-pl { margin-top: 12px; }
/* Blad pod polem (1.12, 1.16): ramka czerwienieje, plaszka staje pod polem. */
.dz-blad { margin-top: 9px; }
.dz-blad[hidden] { display: none; }
.dz-plaszki:empty { display: none; }
.dz-plaszki { padding-top: 16px; }

/* ------------------------------------------------- 1.6 pole zawodu */
.dz-zaw { position: relative; border: 1px solid var(--dz-pole-ramka); border-radius: 13px; background: var(--dz-pole); }
.dz-zaw:focus-within { border-color: var(--dz-zl2); }
.dz-zaw .dz-lupa { position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; stroke: var(--dz-zl2); fill: none; stroke-width: 2; }
.dz-zaw .dz-pole { border: 0; padding-left: 46px; background: transparent; }
.dz-zaw .szk-drop { position: static; border-top: 1px solid var(--dz-ramka); background: transparent; box-shadow: none; margin: 0; border-radius: 0 0 13px 13px; max-height: none; }
.dz-zaw .szk-drop[hidden] { display: none; }
.dz-zaw .szk-opt { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; border-top: 1px solid var(--dz-ramka2);
  text-align: left; color: var(--dz-h); font-family: inherit; cursor: pointer; min-height: 62px; }
.dz-zaw .szk-opt:first-child { border-top: 0; }
.dz-zaw .szk-znak { flex: none; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--dz-pz-tlo); border: 1px solid rgba(217,182,74,0.35); color: var(--dz-zl); font-size: 12.5px; font-weight: 800; }
.dz-zaw .szk-inny .szk-znak { background: var(--dz-karta); border-color: var(--dz-ramka); color: var(--dz-szary); }
.dz-zaw .szk-t { display: flex; flex-direction: column; min-width: 0; }
.dz-zaw .szk-t b { font-size: 15px; font-weight: 700; color: var(--dz-h); }
.dz-zaw .szk-t small { font-size: 12.5px; color: var(--dz-szary); font-weight: 500; }
.dz-pod-pola { margin: 10px 2px 0; font-size: 12.5px; color: var(--dz-szary); }
.dz-miasto .mp { position: relative; }
.dz-miasto input[data-miasto-pole] { width: 100%; background: var(--dz-pole); border: 1px solid var(--dz-pole-ramka); border-radius: 13px; color: var(--dz-pole-tekst);
  font: 700 16px/1.3 Manrope, system-ui, sans-serif; padding: 17px 16px; outline: none; }
.dz-miasto input[data-miasto-pole]:focus { border-color: var(--dz-zl2); }
.dz-miasto .fw-mark { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--dz-zl); }

/* 1.11 "Jezyk i motyw" - od 18.10 jeden arkusz na cale wejscie: `wejscie._jezyk-motyw` + `wejscie.css`. */

/* ------------------------------------------------------------ planszet */
@media (min-width: 768px) {
  .dz .we-glowa { left: 56px; right: 56px; bottom: 48px; }
  .dz-tylko-tel { display: none; }
}

/* -------------------------------------------- laptop: zdjecie | formularz */
@media (min-width: 1280px), (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  /* jasny laptop: zdanie stoi na CIEMNYM zdjeciu w karcie - pogrubiony adres musi byc jasny
     (w makiecie byl #15120A i znikal: "List poszedl na ___", "Dla konta ___"; poprawione 18.10) */
  [data-theme="light"] .dz { --dz-mocny-foto: #FFFFFF; }
  .dz .we-glowa { left: 56px; right: 110px; bottom: 64px; }
  [data-theme="light"] .dz .we-glowa { left: 48px; right: 70px; bottom: 54px; }
}
.dz-dol-c { text-align: center; }
.dz-dol-c a { color: var(--dz-szary); font-size: 15px; }
/* Podpowiedzi miasta (`miasto-pole.js`) - lista pod polem w barwach drzwi. */
.dz-miasto .fw-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; background: var(--dz-pole); border: 1px solid var(--dz-ramka); border-radius: 13px; overflow: hidden; }
.dz-miasto .fw-list[hidden] { display: none; }
.dz-miasto .fw-opt { display: block; width: 100%; padding: 13px 16px; min-height: 48px; background: none; border: 0; border-top: 1px solid var(--dz-ramka2); text-align: left;
  font: 600 15px Manrope, system-ui, sans-serif; color: var(--dz-h); cursor: pointer; }
.dz-miasto .fw-opt:first-child { border-top: 0; }
.dz-miasto .fw-opt small { color: var(--dz-szary); }
.dz [hidden] { display: none !important; }
/* Tytul na telefonie - rozmiar z etalonu dla kazdego ekranu (1.6/1.9/1.15: 29, 1.10: 30, 1.17: 28). */
@media (max-width: 767px) {
  .we-h1.dz-h-28 { font-size: 28px; }
  .we-h1.dz-h-29 { font-size: 29px; line-height: 1.15; }
  .we-h1.dz-h-30 { font-size: 30px; }
}
/* Adres e-mail w zdaniu (`Format::adresHtml`, prawka 384) - te same reguly,
   co w site.css (drzwi go nie laduja): lamie sie za "@", za dlugi skraca
   sie wielokropkiem i rozwija palcem. */
.dz .we-lead, .dz-pod { container-type: inline-size; }
.dz-pl p { flex: 1; min-width: 0; }
.dz .adres{font-size:clamp(14px,calc(100cqi / (var(--adr,20) * .64)),1em)}
.dz .adres-n{display:inline-flex;max-width:100%;white-space:nowrap}
.dz .adres-n>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dz .adres-n>span+span{flex:none}
.dz .adres-d{white-space:nowrap}
@supports not (width:1cqi){.dz .adres-n{display:inline}.dz .adres-n>span,.dz .adres-d{white-space:normal;overflow-wrap:anywhere}}
.dz .adres-pokaz{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.dz .adres-l{cursor:pointer;-webkit-tap-highlight-color:transparent}
.dz .adres-pokaz:focus-visible+.adres-l{outline:2px solid currentColor;outline-offset:2px}
.dz .adres-pelna{display:none}
.dz .adres-pokaz:checked+.adres-l .adres-n{display:inline}
.dz .adres-pokaz:checked+.adres-l .adres-n>span,.dz .adres-pokaz:checked+.adres-l .adres-d{white-space:normal;overflow-wrap:anywhere}
.dz .adres-pokaz:checked+.adres-l .adres-n>span:first-child{overflow:visible}
.dz .adres-pokaz:checked+.adres-l .adres-pelna{display:inline}
.dz .adres-pokaz:checked+.adres-l .adres-krotka{display:none}
.dz-zaw .szk-opt:hover { background: none; }