/* robotatut.pl - okno "objawienie w kanal" w moderacji (wariant "witryna")
   i zdjecia w karcie ogloszenia u czytelnika.

   Kolory WYLACZNIE ze zmiennych motywu: ten ekran ma dzialac w jasnym
   i w ciemnym tak samo. Wpisane wprost raz juz daly biala planke
   z ciemnym napisem na ciemnym tle (patrz CLAUDE.md, menu awatara). */

/* ------------------------------------------------------------ uklad */

.kn{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:24px;align-items:start;margin-top:14px;
}
.kn-pisz{display:flex;flex-direction:column;gap:16px;min-width:0}
.kn-podglad{display:flex;flex-direction:column;gap:10px;min-width:0;position:sticky;top:76px}
.kn-wyslij{grid-column:1 / -1}
.kn-wyslij .btn{width:100%;padding:15px;font-size:17px}

.kn-blok{display:block}
.kn-lab{
  display:block;margin-bottom:8px;font-family:var(--f-cond);
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;
  font-size:11.5px;color:var(--ink2);
}
.kn-hint{display:block;margin-top:9px;font-size:12.5px;color:var(--ink2);line-height:1.45}

.kn input[type=text],
.kn textarea{
  width:100%;box-sizing:border-box;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  font:inherit;font-size:16px;color:var(--ink);
}
.kn textarea{resize:vertical;min-height:120px;line-height:1.55}
.kn input[type=text]:focus,
.kn textarea:focus{outline:2px solid var(--yl);outline-offset:-1px;border-color:transparent}

/* ------------------------------------------------- dla kogo: dwie plytki */

.kn-komu{display:flex;gap:10px}
.kn-plytka{flex:1 1 0;min-width:0;position:relative;display:block;cursor:pointer}
/* Pole zostaje w ukladzie (klawiatura musi je znalezc), tylko go nie widac. */
.kn-plytka input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

/* WYBRANA PLYTKA - BRATNI SELEKTOR, NIGDY `:has()`.
   Starsze telefony `:has` nie znaja wcale, a wtedy nie bylo by widac,
   do kogo wlasnie idzie ogloszenie - czyli znikalaby jedyna rzecz,
   ktorej w tym formularzu nie wolno zgadywac. */
.kn-plytka-in{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;
}
.kn-plytka-t{flex:1 1 auto;min-width:0}
.kn-plytka-t b{display:block;font-family:var(--f-display);font-weight:700;font-size:16px}
.kn-plytka-t i{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--ink2)}
.kn-ptak{width:20px;height:20px;flex:0 0 auto;color:var(--yl);opacity:0}

.kn-plytka input:checked + .kn-plytka-in{border-color:var(--yl);box-shadow:inset 0 0 0 1px var(--yl)}
.kn-plytka input:checked + .kn-plytka-in .kn-ptak{opacity:1}
.kn-plytka input:focus-visible + .kn-plytka-in{outline:2px solid var(--yl);outline-offset:2px}

/* ------------------------------------------------------------ zdjecia */

.kn-fotki{display:flex;flex-wrap:wrap;gap:10px}
.kn-fotka{
  position:relative;width:104px;height:82px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);
}
.kn-fotka img{width:100%;height:100%;object-fit:cover;display:block}
.kn-fotka b{
  position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:7px;
  background:var(--yl);color:#1E2126;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.kn-dodaj{
  width:104px;height:82px;border:1px dashed var(--line);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--ink2);font-size:12.5px;cursor:pointer;
}
.kn-dodaj svg{width:21px;height:21px}
.kn-dodaj input{position:absolute;opacity:0;width:1px;height:1px}
/* `:focus-within` zamiast `:has` - z tego samego powodu, co wyzej. */
.kn-dodaj:focus-within{outline:2px solid var(--yl);outline-offset:2px}

/* --------------------------------------------------------- wlaczniki */

.kn-wlaczniki{display:flex;flex-wrap:wrap;gap:10px 26px}
.kn-wl{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px}
.kn-wl input{position:absolute;opacity:0;width:1px;height:1px}
.kn-suwak{
  position:relative;flex:0 0 auto;width:44px;height:26px;border-radius:13px;
  background:var(--line);transition:background .15s;
}
.kn-suwak:before{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:10px;background:#fff;transition:left .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.kn-wl input:checked + .kn-suwak{background:var(--yl)}
.kn-wl input:checked + .kn-suwak:before{left:21px}
.kn-wl input:focus-visible + .kn-suwak{outline:2px solid var(--yl);outline-offset:2px}

/* ----------------------------------------------------------- podglad */

.kn-karta{min-height:120px}
.kn-pusto{color:var(--ink2)}
.kn-dzwonek{
  display:flex;gap:9px;align-items:flex-start;margin:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px;line-height:1.45;color:var(--ink2);
}

/* ----------------------------------- zdjecia w karcie (obie strony) */

/* Zdjecie wychodzi poza `padding` karty (.ogl ma 13px 15px), zeby lezalo
   od krawedzi do krawedzi - inaczej okladka wyglada jak zalacznik. */
.ogl-foto{
  display:block;margin:-13px -15px 11px;border-radius:12px 12px 0 0;
  overflow:hidden;background:var(--line);
}
.ogl-foto img{width:100%;max-height:340px;object-fit:cover;display:block}
.ogl-male{display:flex;gap:7px;margin:0 0 10px}
.ogl-male a{
  display:block;width:64px;height:64px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);
}
.ogl-male img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------- na telefonie */

@media (max-width:980px){
  .kn{grid-template-columns:minmax(0,1fr)}
  .kn-podglad{position:static}

  /* Guzik przypiety u dolu: to jedyna rzecz, po ktora czlowiek tu
     przyszedl, a podglad spycha go daleko poza ekran. */
  .kn-wyslij{
    position:sticky;bottom:0;z-index:5;margin:0 -14px -14px;padding:12px 14px;
    background:var(--paper);border-top:1px solid var(--line);
  }
}

/* Dolny pasek portalu stoi nad trescia, wiec guzik musi sie o niego oprzec
   - inaczej laduje pod menu dokladnie w chwili, gdy sie w niego celuje. */
@media (max-width:760px){
  .kn-wyslij{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}
@media (display-mode:standalone){
  .kn-wyslij{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}