/* LENTA - nowa nazwa `ln-` (decyzja wlasciciela, patrz CLAUDE.md "Zwyczaje
   w kodzie"). Nowy kod lenty stoi tutaj; stare `.lentag-*` i `.lp-*`
   przenosimy przy okazji, a nie jednym ruchem.

   Podpiety w layoucie PO lenta-glowna.css i studio.css, bo dokłada do
   nich swoje czesci karty i okna publikacji. */

/* ------------------------------------------------ karta: "Szuka pracy"
   Zielona metka pod imieniem. Kolor z motywu (`--green`), bo lezy na
   karcie portalu, a nie na zdjeciu - i ma czytelnosc w obu wariantach. */
.ln-szuka{display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:2px 8px 2px 7px;
  border-radius:20px;border:1px solid color-mix(in srgb,var(--green) 45%,transparent);
  background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green);
  font-family:var(--f-display);font-weight:800;font-size:11.5px;line-height:1.5;white-space:nowrap}
.ln-szuka:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.lp-kto .ln-szuka{display:flex;width:max-content;max-width:100%}

/* ------------------------------------------------ okno publikacji
   Kolory WPISANE WPROST, jak w calym studiu: pod spodem lezy kadr
   czlowieka, a nie tlo portalu (patrz studio.css). */

/* Zdjecie albo film - dwa wejscia do jednego pola pliku. */
.ln-rodzaj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:300px}
.ln-rodzaj-w{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;min-height:44px;
  border-radius:14px;border:1px solid rgba(242,220,150,.35);background:rgba(242,220,150,.07);
  color:#F6EBD2;font-family:var(--f-display);font-weight:800;font-size:14px;cursor:pointer}
.ln-rodzaj-w:hover,.ln-rodzaj-w:focus-within{border-color:#F2DC96;background:rgba(242,220,150,.13)}
.ln-rodzaj-z{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#F3DDA8,#C9A24D)}
.ln-rodzaj-z svg{width:22px;height:22px;fill:none;stroke:#14130F;stroke-width:1.9;stroke-linejoin:round}

/* Zawod: chipy i lista "Inny zawod". */
.ln-zawod{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.ln-zawod legend{padding:0;margin-bottom:7px;color:#B9B2A2;font-family:var(--f-display);font-weight:800;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ln-chipy{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ln-chipy::-webkit-scrollbar{display:none}
.ln-chip{flex:none;cursor:pointer}
.ln-chip input{position:absolute;opacity:0;pointer-events:none}
.ln-chip span{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:20px;
  border:1px solid rgba(242,220,150,.3);background:rgba(15,14,11,.6);color:#EDE7DA;font-size:13.5px;white-space:nowrap}
.ln-chip input:checked + span{background:linear-gradient(135deg,#F3DDA8,#C9A24D);border-color:transparent;
  color:#14130F;font-weight:700}
.ln-chip input:focus-visible + span{outline:3px solid #F2DC96;outline-offset:2px}
.ln-inny,.ln-pole input{width:100%;min-height:44px;padding:10px 12px;border-radius:12px;background:#15130E;
  border:1px solid rgba(242,220,150,.42);color:#EDE7DA;font-family:var(--f-body);font-size:16px}
.ln-pole input::placeholder{color:#8E8877}

/* Obiekt, miasto, przelaczniki - zwiniete za jednym wierszem. */
.ln-wiecej{border:1px solid rgba(242,220,150,.18);border-radius:14px;background:rgba(15,14,11,.72)}
.ln-wiecej summary{list-style:none;cursor:pointer;padding:12px 14px;min-height:44px;display:flex;
  flex-wrap:wrap;align-items:center;gap:4px 8px;color:#F6EBD2;font-family:var(--f-display);font-weight:800;font-size:13px}
.ln-wiecej summary::-webkit-details-marker{display:none}
.ln-wiecej summary:after{content:"\203A";margin-left:auto;font-size:18px;color:#F2DC96;transition:transform .15s}
.ln-wiecej[open] summary:after{transform:rotate(90deg)}
.ln-wiecej summary i{font-style:normal;font-weight:400;font-family:var(--f-body);color:#B9B2A2;font-size:12px}
.ln-wiecej>*:not(summary){margin:0 14px 12px}
.ln-dwa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ln-pole{display:flex;flex-direction:column;gap:6px;min-width:0}
.ln-pole span{color:#B9B2A2;font-family:var(--f-display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ln-prz{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.ln-prz input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:44px;height:26px;
  border-radius:14px;background:#26221A;border:1px solid rgba(255,255,255,.14);position:relative;cursor:pointer}
.ln-prz input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#EDE7DA;transition:left .15s}
.ln-prz input[type=checkbox]:checked{background:linear-gradient(135deg,#F3DDA8,#C9A24D);border-color:transparent}
.ln-prz input[type=checkbox]:checked:after{left:20px;background:#14130F}
.ln-prz input[type=checkbox]:focus-visible{outline:3px solid #F2DC96;outline-offset:2px}
.ln-prz-t b{display:block;color:#F6EBD2;font-size:13.5px}
.ln-prz-t i{display:block;font-style:normal;color:#B9B2A2;font-size:12px;line-height:1.4;margin-top:2px}

/* Ostrzezenie - zawsze widoczne, bez pola "rozumiem". */
.ln-zanim{padding:11px 13px;border-radius:12px;border:1px solid rgba(242,220,150,.3);
  background:rgba(15,14,11,.82);color:#D9D2C0;font-size:12.5px;line-height:1.5}
.ln-zanim b{display:block;margin-bottom:3px;color:#F2DC96;font-family:var(--f-display);font-weight:800;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* Na pelnym ekranie studia dol okna rosnie o nowe pola - dostaje wlasne
   przewijanie i sufit, zeby nie zakryc calego podgladu. */
.stu-zywe .stu-dol{max-height:72dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.stu-zywe .stu-dol::-webkit-scrollbar{display:none}

/* Pole podpisu: pismo 16 px NA KAZDEJ szerokosci - ponizej iPhone
   powieksza cala strone przy stuknieciu w pole i zostawia ja przesunieta. */
.stu .stu-wpis textarea{font-size:16px}

/* STUDIO BEZ PLIKU: zwykla kolumna, ktora sie przewija - zaproszenie
   "Zdjecie / Film" u gory, pola pod nim. Warstwy na podgladzie maja sens
   dopiero wtedy, gdy JEST podglad; bez niego wyrosly dol okna przykrywal
   guziki wyboru, czyli jedyne wejscie do tego ekranu. Klase `stu-pusty`
   stawia i zdejmuje studio.js. */
.stu-zywe.stu-pusty{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding-top:calc(66px + env(safe-area-inset-top))}
.stu-zywe.stu-pusty:after{display:none}
.stu-zywe.stu-pusty .stu-kadr{position:relative;inset:auto;display:block;flex:none;overflow:visible;padding:8px 14px 0}
.stu-zywe.stu-pusty .stu-podglad{display:none}
.stu-zywe.stu-pusty .stu-pusto,
.stu-zywe.stu-ma-szkic.stu-pusty .stu-pusto{position:static;transform:none;width:auto;max-width:360px;margin:0 auto}
.stu-zywe.stu-pusty .stu-dol{position:static;max-height:none;overflow:visible;padding-top:16px}

/* ------------------------------------------------ film bez autostartu
   Na komorce (i wszedzie, gdzie przegladarka nie mowi "Wi-Fi") film
   w lencie sam nie gra - stoi okladka, a znaczek "graj" mowi SLOWEM, co
   zrobic. Klase `ln-bez-auto` stawia rolki.js. Selektor ma DWA atrybuty
   i klase na <body> (0-2-1), wiec wygrywa z wlasnym ksztaltem kazdego
   znaczka (`.lp-graj`, `.of-graj`, `.fs-graj`, `.gl-graj` - 0-1-0) bez
   `!important`. Wiersz z `[hidden]` musi stac obok: inaczej nasze
   `display` przebiloby chowanie znaczka, gdy film jednak gra. */
.ln-odtworz{display:none}
body.ln-bez-auto [data-rolka-graj]{display:inline-flex;align-items:center;gap:7px;width:auto;height:auto;
  padding:8px 14px 8px 12px;border-radius:22px;background:rgba(10,10,12,.72);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:13px;line-height:1;white-space:nowrap}
body.ln-bez-auto [data-rolka-graj] .ln-odtworz{display:inline}
body.ln-bez-auto [data-rolka-graj][hidden]{display:none}