/* Community posting corner v12
   The leave-a-note control is a compact stack of the available papers
   sitting at the right edge of the saved area.
*/

.post-pad{
  position:absolute;
  z-index:67;
  right:24px;
  bottom:118px;
  left:auto;
  top:auto;
  width:116px;
  height:82px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  color:#43301f;
  text-align:center;
  font:15px "Bradley Hand","Segoe Print",cursive;
  transform:none;
  box-shadow:none;
  clip-path:none;
}

/* Remove the old pencil glyph from the flat v10 button. */
.post-pad::before{content:none!important}

.post-pad .pad-sheet,
.post-pad .pad-top{
  position:absolute;
  inset:0;
  border:0;
  pointer-events:none;
  clip-path:polygon(3% 2%,98% 0,100% 94%,95% 100%,4% 97%,0 90%);
  box-shadow:0 3px 5px rgba(54,34,16,.20);
  transform-origin:50% 78%;
  transition:transform .15s ease,filter .15s ease;
}

/* Tight stack: enough offset to make every choice obvious without fanning it wide. */
.post-pad .pad-sheet-rose{
  z-index:1;
  background:#d8b8b0;
  transform:translate(-8px,7px) rotate(-6deg);
}
.post-pad .pad-sheet-green{
  z-index:2;
  background:#c9cfaa;
  transform:translate(7px,6px) rotate(5deg);
}
.post-pad .pad-sheet-lavender{
  z-index:3;
  background:#cbbfd3;
  transform:translate(-5px,4px) rotate(-3deg);
}
.post-pad .pad-sheet-blue{
  z-index:4;
  background:#bbcbd0;
  transform:translate(5px,3px) rotate(3deg);
}
.post-pad .pad-top{
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  background:
    radial-gradient(circle at 20% 30%,rgba(74,51,28,.06) 0 1px,transparent 1.8px),
    repeating-linear-gradient(13deg,rgba(73,49,28,.025) 0 1px,transparent 1px 6px),
    #efe3c5;
  transform:rotate(1deg);
  filter:drop-shadow(1px 2px 1px rgba(50,31,14,.08));
}
.post-pad .pad-label{
  position:relative;
  z-index:2;
  display:block;
  max-width:80px;
  line-height:1.02;
  color:#46321f;
  transform:rotate(-1deg);
}

.post-pad:hover .pad-top,
.post-pad:focus-visible .pad-top{
  transform:translateY(-5px) rotate(0deg);
  filter:drop-shadow(3px 6px 3px rgba(49,30,13,.22));
}
.post-pad:hover .pad-sheet-blue{transform:translate(6px,3px) rotate(4deg)}
.post-pad:hover .pad-sheet-lavender{transform:translate(-6px,4px) rotate(-4deg)}
.post-pad:hover .pad-sheet-green{transform:translate(8px,6px) rotate(6deg)}
.post-pad:hover .pad-sheet-rose{transform:translate(-9px,7px) rotate(-7deg)}
.post-pad:focus-visible{outline:1px dashed rgba(64,42,25,.48);outline-offset:6px}

@media(max-width:850px){
  .post-pad{
    right:15px;
    bottom:116px;
    width:102px;
    height:72px;
    font-size:13px;
  }
}

@media(max-width:560px){
  .post-pad{
    right:10px;
    bottom:112px;
    width:88px;
    height:64px;
    font-size:11.5px;
  }
  .post-pad .pad-label{max-width:66px}
  .post-pad .pad-sheet-rose{transform:translate(-6px,6px) rotate(-6deg)}
  .post-pad .pad-sheet-green{transform:translate(6px,5px) rotate(5deg)}
  .post-pad .pad-sheet-lavender{transform:translate(-4px,3px) rotate(-3deg)}
  .post-pad .pad-sheet-blue{transform:translate(4px,2px) rotate(3deg)}
}