/* ============ Profile photo (zdjecie-profilowe) ============
   The small previews on a light and a dark strip, the two-colour custom
   gradient and a checkbox pill. The rest comes from the shared tool
   components in styles.css. */

/* ---- small previews: profile, post and comment sizes ---- */
.av__minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-top:12px;border-top:1px dashed var(--rule-d)}
.av__strip{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,2.4vw,26px);
  padding:18px 14px 12px;border-radius:var(--r-sm);
}
.av__strip--light{background:#ffffff}
.av__strip--dark{background:#0a0a0a;border:1px solid var(--rule-d)}
.av__mini{display:flex;flex-direction:column;align-items:center;gap:8px}
.av__mini canvas{display:block;border-radius:50%}
.av__mini figcaption{font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.av__strip--light figcaption{color:rgba(10,10,10,.66)}
.av__strip--dark figcaption{color:rgba(250,250,247,.66)}

/* ---- panel ---- */
.av__fx{margin-top:0}
.av__note{margin-top:10px;line-height:1.5}
.av__gradCustom{gap:6px}

/* A pill that is a checkbox: a small square fills when it is on. */
.av__toggle > span::before{
  content:"";flex:none;width:11px;height:11px;border-radius:3px;border:1.5px solid currentColor;
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.av__toggle input:checked + span::before{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--olive)}

/* Lit when the picker, not a swatch, holds the colour. The shared rule only
   knows the splitter's swatch name, so it is undone here first. */
.av .swatches:has(input[type="radio"]:checked) .swatch-custom{border-color:var(--rule-d)}
.av .swatches:not(:has(input[type="radio"]:checked)) .swatch-custom{border-color:var(--olive)}

@media (max-width:560px){
  .av__minis{grid-template-columns:1fr}
  .av .pair{grid-template-columns:1fr;gap:20px}
}