/* Logo AquaForm: kropla (kropla.svg, wektor z oryginału) i napis wersalikami jak w nagłówku „Kompromisy”.
   Jedno małe logo w lewym górnym rogu każdego ekranu. Kolor bierze z `color` (na ciemnym tle: .af-logo--jasne). */
.af-logo{display:inline-flex;align-items:center;gap:8px;flex:none;color:#192b24;font:650 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.af-logo::before{content:"";flex:none;width:15px;height:22px;background:currentColor;-webkit-mask:url(kropla.svg) center/contain no-repeat;mask:url(kropla.svg) center/contain no-repeat}
.af-logo--jasne{color:#fff}
/* Pasek nagłówka okna na cały ekran: logo oddzielone kreską od tytułu, tytuł zajmuje resztę wiersza.
   Na telefonie logo stoi w osobnym wierszu nad tytułem, żeby tytuł i nazwa projektu miały całą szerokość. */
.af-logo--pasek{align-self:stretch;padding-right:18px;border-right:1px solid #dfe4d9}
:where(.af-logo--pasek+div){flex:1 1 auto;min-width:0}
@media(max-width:640px){
  :has(>.af-logo--pasek){flex-wrap:wrap}
  .af-logo--pasek{flex:1 0 100%;align-self:auto;padding:0;border:0}
}
/* Osobna strona (pomoc, reguły, katalog, karta PDF, kopia szkiców, logowanie): pasek u góry jak nagłówek programu,
   więc logo stoi w tym samym miejscu co w edytorze. */
.af-gora{box-sizing:border-box;display:flex;align-items:center;height:80px;padding:0 32px;background:#fcfdf9;border-bottom:1px solid #dfe4d9}
@media(max-width:820px){.af-gora{height:68px;padding:0 18px}}