/* ============ Watermark (znak-wodny) ============
   Thumbnail strip under the preview, the 3 x 3 position grid, the logo
   field and checkbox pills. The rest comes from the shared tool components. */

/* The preview only shows the result; nothing to drag, so the page scrolls. */
.wm__canvas{cursor:default;touch-action:auto}

/* ---- thumbnails ---- */
.wm__batch{display:flex;align-items:flex-start;gap:10px;padding-top:12px;border-top:1px dashed var(--rule-d)}
.wm__strip{
  list-style:none;flex:0 1 auto;min-width:0;display:flex;gap:10px;padding:8px 8px 10px 4px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(204,211,118,.5) transparent;
}
.wm__strip::-webkit-scrollbar{height:6px}
.wm__strip::-webkit-scrollbar-thumb{background:rgba(204,211,118,.45);border-radius:3px}
.wm__item{position:relative;flex:none}
.wm__thumb{
  display:block;width:64px;height:64px;padding:0;overflow:hidden;border-radius:var(--r-xs);
  border:1px solid var(--rule-d);background:var(--ink-3);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform 160ms var(--ease-out);
}
.wm__thumb canvas{display:block;width:100%;height:100%}
.wm__thumb:active{transform:scale(.96)}
.wm__thumb[aria-current="true"]{border-color:var(--olive);box-shadow:0 0 0 2px var(--olive)}
.wm__del{
  position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--ink);border:1px solid rgba(250,250,247,.3);color:var(--bone);font-size:15px;line-height:1;
  text-align:center;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.wm__add{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:64px;height:64px;margin-top:8px;border-radius:var(--r-xs);cursor:pointer;
  border:1px dashed rgba(250,250,247,.34);color:var(--fg-2);font-size:20px;line-height:1;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.wm__add .mono{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.wm__add:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}

/* ---- panel ---- */
.wm__group{display:flex;flex-direction:column;gap:20px}
.wm .field .tool__hint{font-size:12px;line-height:1.45}
.wm__fx{margin-top:0}

/* A pill that is a checkbox: a small square fills when it is on. */
.wm__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);
}
.wm__toggle input:checked + span::before{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--olive)}

/* 3 x 3 grid of positions, drawn like a photo with a dot where the mark goes. */
.wm__place{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.wm__grid{
  display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,32px);gap:4px;padding:5px;
  border:1px solid var(--rule-d);border-radius:var(--r-sm);background:rgba(250,250,247,.03);
}
.wm__pos{position:relative;display:grid;place-items:center;border-radius:5px;cursor:pointer;transition:background .2s var(--ease)}
.wm__pos input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.wm__pos::before{
  content:"";width:8px;height:8px;border-radius:50%;background:rgba(250,250,247,.4);
  transition:background .2s var(--ease),transform .2s var(--ease-out);
}
.wm__pos:has(input:checked){background:rgba(204,211,118,.16)}
.wm__pos:has(input:checked)::before{background:var(--olive);transform:scale(1.5)}
.wm__pos:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:1px}

/* ---- logo ---- */
.wm__logo{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px}
.wm__logoPrev{
  display:grid;place-items:center;width:64px;height:64px;padding:6px;overflow:hidden;border-radius:var(--r-sm);
  border:1px solid var(--rule-d);
  background:repeating-conic-gradient(var(--ink-3) 0 25%,var(--ink-2) 0 50%) 0 0/12px 12px;
}
.wm__logoPrev:empty::before{content:"";width:22px;height:22px;border:1.5px dashed rgba(250,250,247,.34);border-radius:5px}
.wm__logoPrev img{max-width:100%;max-height:100%;object-fit:contain}
.wm__logoBody{display:flex;flex-direction:column;gap:10px;min-width:0}
.wm__logoName{font-size:13px;line-height:1.45;color:var(--fg-2);overflow-wrap:anywhere}
.wm__logoActs{display:flex;flex-wrap:wrap;gap:8px}
.wm__logoBtn{display:inline-flex;align-items:center;cursor:pointer}
.wm__logoBtn:has(input:focus-visible){outline:2px solid var(--olive);outline-offset:3px}

/* 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. */
.wm .swatches:has(input[type="radio"]:checked) .swatch-custom{border-color:var(--rule-d)}
.wm .swatches:not(:has(input[name="wmColor"]:checked)) .swatch-custom{border-color:var(--olive)}

/* Hover only where there is a real pointer: on phones a tap would leave it stuck. */
@media (hover:hover){
  .wm__thumb:not([aria-current="true"]):hover{border-color:var(--ghost)}
  .wm__del:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .wm__add:hover{border-color:var(--olive);color:var(--fg);background:rgba(204,211,118,.05)}
  .wm__pos:hover{background:rgba(250,250,247,.07)}
  .wm__pos:hover::before{background:var(--bone)}
}

/* iOS zooms into any field under 16px. The shared .field rule for phones
   comes before the base one in styles.css and loses, so it is set here. */
@media (max-width:640px){
  .wm .field input{font-size:16px}
}

@media (max-width:560px){
  .wm__strip{gap:8px}
  .wm__thumb,.wm__add{width:56px;height:56px}
  .wm__add{margin-top:8px}
}