/* Community board interaction cleanup v9 */

/* Use the quiet upper corners and keep category marks readable. */
.category-mark{
  z-index:9;
  width:132px;
  color:rgba(54,35,20,.94);
  font-size:17px;
}
.category-mark svg{width:48px;height:33px}

/* Natural peelable stacks. Each visible sheet is a real note. */
.pile.pile-peelable{
  width:154px;
  height:122px;
  overflow:visible;
  cursor:grab;
}
.pile.pile-peelable:active{cursor:grabbing}
.pile-stack-note.note{
  width:146px;
  min-height:104px;
  padding:27px 13px 12px;
  left:4px;
  top:10px;
  transition:left .18s ease,top .18s ease,transform .18s ease,filter .18s ease;
}
.pile-stack-note.note .message{
  font-size:14px;
  line-height:1.18;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pile-stack-note .note-pin{display:none}
.pile-stack-note.stack-top{cursor:grab}
.pile-stack-note.stack-top:hover{filter:drop-shadow(5px 8px 4px rgba(44,27,13,.30))}
.pile-stack-note.stack-under{pointer-events:none}
.pile-stack-note.peeled-note{
  cursor:grab;
  z-index:28;
}
.pile-stack-note.peeled-note .note-pin{display:block}
.pile-stack-note.peeled-note .message{
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
}
.pile-peelable .pile-pin{
  z-index:40;
}
.pile-peelable.gallery-origin{
  visibility:hidden;
}

/* Gallery behaves like the pile has been lifted off the board. */
.carousel{
  opacity:0;
  scale:.96;
  transition:opacity .16s ease,scale .16s ease;
}
.carousel.open{
  opacity:1;
  scale:1;
}
.carousel-close{display:none}
.carousel-note{cursor:default}

/* Reset control is a small handwritten board action, not a toolbar button. */
.board-reset{
  position:absolute;
  z-index:62;
  left:22px;
  top:22px;
  border:0;
  background:transparent;
  padding:4px 6px;
  color:rgba(56,37,22,.86);
  font:15px "Bradley Hand","Segoe Print",cursive;
  cursor:pointer;
  transform:rotate(-2deg);
}
.board-reset::before{
  content:"↻";
  display:inline-block;
  margin-right:5px;
  font:19px Georgia,serif;
  vertical-align:-1px;
}
.board-reset:hover,.board-reset:focus-visible{
  color:#2d2118;
  outline:1px dashed rgba(64,42,25,.45);
  outline-offset:3px;
}

/* Seasonal heading gets a touch more room beneath the board title. */
#seasonal-layer{top:72px}
.seasonal-heading{top:2px}

@media(max-width:850px){
  .category-mark{width:105px;font-size:14px}
  .pile-stack-note.note{width:136px;min-height:98px}
  .board-reset{left:10px;top:18px;font-size:13px}
}
@media(max-width:560px){
  .category-mark{width:86px;font-size:12px}
  .pile-stack-note.note{width:118px;min-height:92px;padding:24px 10px 10px}
  .pile-stack-note.note .message{font-size:11.5px}
  .board-reset{top:15px;font-size:11.5px}
}