/* Community posting refinement v11
   - physical paper stack for colour choice
   - writing tool choices: Pencil, Pen, Marker, Quill
   - optional hand-drawn doodle in the note's bottom-right
*/

.post-colors{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:250px;
  min-height:78px;
  padding:11px 12px 4px 4px;
  gap:0;
}
.post-color-choice{
  position:relative;
  flex:0 0 52px;
  width:52px;
  height:66px;
  margin-left:-25px;
  border:0;
  cursor:pointer;
  background:
    radial-gradient(circle at 20% 30%,rgba(74,51,28,.065) 0 1px,transparent 1.8px),
    repeating-linear-gradient(13deg,rgba(73,49,28,.025) 0 1px,transparent 1px 6px),
    var(--swatch,#efe3c5);
  clip-path:polygon(3% 2%,98% 0,100% 94%,94% 100%,4% 97%,0 90%);
  box-shadow:1px 3px 4px rgba(57,37,18,.20);
  transform:translateY(var(--paper-y,0)) rotate(var(--paper-rot,0deg));
  transform-origin:50% 80%;
  transition:transform .14s ease,filter .14s ease;
}
.post-color-choice:first-child{margin-left:0}
.post-color-choice:nth-child(1){--paper-rot:-5deg;--paper-y:4px;z-index:1}
.post-color-choice:nth-child(2){--paper-rot:3deg;--paper-y:1px;z-index:2}
.post-color-choice:nth-child(3){--paper-rot:-2deg;--paper-y:5px;z-index:3}
.post-color-choice:nth-child(4){--paper-rot:4deg;--paper-y:0;z-index:4}
.post-color-choice:nth-child(5){--paper-rot:-4deg;--paper-y:4px;z-index:5}
.post-color-choice:nth-child(6){--paper-rot:2deg;--paper-y:2px;z-index:6}
.post-color-choice:nth-child(7){--paper-rot:-1deg;--paper-y:5px;z-index:7}
.post-color-choice:nth-child(8){--paper-rot:4deg;--paper-y:1px;z-index:8}
.post-color-choice:hover{transform:translateY(-8px) rotate(var(--paper-rot,0deg));filter:drop-shadow(2px 5px 3px rgba(49,30,13,.22))}
.post-color-choice.selected{z-index:20;outline:none;transform:translateY(-13px) rotate(0deg) scale(1.06);filter:drop-shadow(3px 6px 4px rgba(49,30,13,.27))}
.post-color-choice.selected::after{content:"";position:absolute;left:50%;bottom:5px;width:17px;height:1px;transform:translateX(-50%) rotate(-4deg);background:rgba(69,45,26,.48)}

/* Internal board classes keep their old names for compatibility:
   ink is shown as Pen, print is shown as Quill. */
.post-fonts{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px}
.post-font-choice{
  position:relative;
  min-width:64px;
  border:0;
  border-bottom:1px solid transparent;
  padding:18px 8px 5px;
  color:#4f3a27;
  background:transparent;
  cursor:pointer;
  opacity:.62;
  font-size:15px;
}
.post-font-choice::before{content:"";position:absolute;left:50%;top:5px;width:38px;height:5px;border-radius:3px;transform:translateX(-50%) rotate(-8deg);background:#5b4938;box-shadow:inset -7px 0 rgba(52,40,29,.26)}
.post-font-choice[data-font="pencil"]{font-family:"Bradley Hand","Segoe Print",cursive}
.post-font-choice[data-font="pencil"]::before{height:4px;background:linear-gradient(90deg,#6d5438 0 14%,#d3a95f 14% 82%,#6b5947 82% 100%)}
.post-font-choice[data-font="ink"]{font-family:"Noteworthy","Bradley Hand","Segoe Print",cursive}
.post-font-choice[data-font="ink"]::before{height:4px;background:linear-gradient(90deg,#272c32 0 82%,#a6a7a5 82% 94%,#353535 94% 100%)}
.post-font-choice[data-font="marker"]{font-family:"Marker Felt","Chalkboard SE",cursive;font-weight:600}
.post-font-choice[data-font="marker"]::before{height:7px;border-radius:2px;background:linear-gradient(90deg,#302c29 0 82%,#77716b 82% 100%)}
.post-font-choice[data-font="print"]{font-family:"Snell Roundhand","Apple Chancery","URW Chancery L",cursive;font-size:17px}
.post-font-choice[data-font="print"]::before{width:36px;height:10px;border-radius:70% 15% 70% 15%;transform:translateX(-50%) rotate(-24deg) skewX(-18deg);background:linear-gradient(155deg,transparent 0 12%,#65503a 13% 48%,#8a7254 49% 65%,transparent 66%);box-shadow:none}
.post-font-choice.selected{opacity:1;border-bottom-color:rgba(72,47,28,.62);transform:translateY(-1px)}

.post-writing-paper{position:relative}
.post-message{height:145px;padding-right:52px;padding-bottom:42px}
.post-composer.font-ink .post-message{font-family:"Noteworthy","Bradley Hand","Segoe Print",cursive;color:#252b32;font-size:24px;line-height:1.25}
.post-composer.font-print .post-message{font-family:"Snell Roundhand","Apple Chancery","URW Chancery L",cursive;color:#31271f;font-size:27px;line-height:1.25}
.font-ink .message{font-family:"Noteworthy","Bradley Hand","Segoe Print",cursive!important;color:#252b32!important}
.font-print .message{font-family:"Snell Roundhand","Apple Chancery","URW Chancery L",cursive!important;color:#31271f!important;font-size:1.05em;line-height:1.22}

/* Hand-drawn marks, not platform emoji. */
.post-doodles{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.post-doodle-choice{
  width:34px;
  height:32px;
  border:0;
  padding:3px;
  background:transparent;
  color:#594331;
  opacity:.58;
  cursor:pointer;
  transform:rotate(var(--doodle-rot,0deg));
}
.post-doodle-choice:nth-child(2n){--doodle-rot:-4deg}.post-doodle-choice:nth-child(3n){--doodle-rot:3deg}
.post-doodle-choice svg{width:25px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.post-doodle-choice.selected{opacity:1;transform:translateY(-2px) rotate(var(--doodle-rot,0deg));filter:drop-shadow(1px 2px 1px rgba(56,36,18,.16))}
.post-doodle-choice:first-child{width:auto;padding:3px 6px;font:12px "Bradley Hand","Segoe Print",cursive}

.post-preview-doodle,
.note-doodle{
  position:absolute;
  right:11px;
  bottom:9px;
  z-index:8;
  width:28px;
  height:28px;
  color:rgba(67,49,35,.72);
  pointer-events:none;
  transform:rotate(-4deg);
}
.post-preview-doodle{right:15px;bottom:13px;width:34px;height:34px;color:rgba(57,42,30,.78)}
.post-preview-doodle svg,.note-doodle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.note-doodle.doodle-star{transform:rotate(5deg)}
.note-doodle.doodle-leaf{transform:rotate(-12deg)}
.note-doodle.doodle-flame{transform:rotate(2deg)}
.note-doodle.doodle-smile{transform:rotate(4deg)}
.note-doodle.doodle-cross{transform:rotate(-2deg)}

/* Keep enough clear space so text never lands underneath the doodle. */
.note:has(.note-doodle) .message,
.carousel-note:has(.note-doodle) .message,
.season-browser-note:has(.note-doodle) .message{padding-right:23px;padding-bottom:22px}

@media(max-width:560px){
  .post-colors{width:222px;min-height:70px;padding-left:0}
  .post-color-choice{flex-basis:45px;width:45px;height:58px;margin-left:-22px}
  .post-font-choice{min-width:56px;padding-left:5px;padding-right:5px;font-size:13px}
  .post-font-choice[data-font="print"]{font-size:15px}
  .post-message{height:135px;padding-right:46px;padding-bottom:38px}
  .post-doodle-choice{width:31px;height:29px}
  .note-doodle{width:24px;height:24px;right:8px;bottom:7px}
}