/* Community posting prototype v10
   Physical note composer. Test mode posts immediately in this browser.
*/

.post-pad{
  position:absolute;
  z-index:66;
  left:118px;
  top:17px;
  border:0;
  padding:7px 13px 8px;
  color:#46321f;
  background:#e6d4ae;
  cursor:pointer;
  font:16px "Bradley Hand","Segoe Print",cursive;
  transform:rotate(1.5deg);
  clip-path:polygon(2% 3%,98% 0,100% 94%,95% 100%,3% 97%,0 91%);
  box-shadow:0 3px 5px rgba(54,34,16,.22);
}
.post-pad::before{
  content:"✎";
  margin-right:6px;
  font:18px Georgia,serif;
}
.post-pad:hover,.post-pad:focus-visible{
  outline:1px dashed rgba(64,42,25,.48);
  outline-offset:3px;
  transform:rotate(0deg) translateY(-1px);
}

.post-composer-shade{
  position:absolute;
  z-index:110;
  inset:0;
  display:none;
  background:rgba(44,29,16,.20);
  backdrop-filter:blur(.4px);
}
.post-composer-shade.open{display:block}

.post-composer{
  position:absolute;
  z-index:115;
  left:50%;
  top:105px;
  transform:translateX(-50%) rotate(-.5deg);
  width:min(680px,88%);
  min-height:610px;
  padding:50px 48px 36px;
  color:#34291f;
  background:
    radial-gradient(circle at 14% 23%,rgba(83,61,37,.07) 0 1px,transparent 1.8px),
    radial-gradient(circle at 78% 70%,rgba(83,61,37,.055) 0 1px,transparent 1.8px),
    repeating-linear-gradient(12deg,rgba(77,52,30,.024) 0 1px,transparent 1px 6px),
    var(--paper,#efe3c5);
  clip-path:polygon(1% 1%,98.5% 0,100% 94%,97% 100%,3% 98%,0 93%);
  filter:drop-shadow(10px 17px 11px rgba(38,23,10,.35));
}
.post-composer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 24px rgba(83,55,28,.08);
}
.post-composer h2{
  margin:0 0 10px;
  text-align:center;
  color:#4b3523;
  font:29px "Bradley Hand","Segoe Print",cursive;
  font-weight:normal;
}
.post-composer-close{
  position:absolute;
  top:17px;
  right:25px;
  border:0;
  background:transparent;
  color:#60452f;
  cursor:pointer;
  padding:3px;
  font:14px "Bradley Hand","Segoe Print",cursive;
}
.post-composer-close:hover,.post-composer-close:focus-visible{outline:1px dashed rgba(75,49,28,.45);outline-offset:3px}

.post-message{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:180px;
  resize:none;
  border:0;
  border-bottom:1px solid rgba(82,57,34,.18);
  outline:0;
  padding:12px 14px;
  color:#332b23;
  background:rgba(255,255,255,.045);
  font-size:25px;
  line-height:1.28;
}
.post-message::placeholder{color:rgba(68,50,35,.42)}
.post-count{
  margin:4px 5px 12px 0;
  text-align:right;
  color:rgba(71,50,32,.60);
  font:12px "Bradley Hand","Segoe Print",cursive;
}
.post-error{
  min-height:18px;
  margin:0 0 5px;
  text-align:center;
  color:#7a3028;
  font:14px "Bradley Hand","Segoe Print",cursive;
}

.post-control-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0;
}
.post-control-label{
  flex:0 0 115px;
  color:#59412d;
  font:15px "Bradley Hand","Segoe Print",cursive;
}
.post-category{
  flex:1;
  max-width:300px;
  border:0;
  border-bottom:1px solid rgba(78,52,30,.34);
  padding:5px 23px 5px 6px;
  color:#3d3025;
  background:rgba(255,255,255,.10);
  font:16px "Bradley Hand","Segoe Print",cursive;
  cursor:pointer;
}

.post-fonts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.post-font-choice{
  border:0;
  border-bottom:1px solid transparent;
  padding:4px 7px 5px;
  color:#4f3a27;
  background:transparent;
  cursor:pointer;
  opacity:.68;
  font-size:15px;
}
.post-font-choice.selected{
  opacity:1;
  border-bottom-color:rgba(72,47,28,.62);
  transform:translateY(-1px);
}
.post-font-choice[data-font="pencil"]{font-family:"Bradley Hand","Segoe Print",cursive}
.post-font-choice[data-font="ink"]{font-family:"Noteworthy","Bradley Hand","Segoe Print",cursive}
.post-font-choice[data-font="sketch"]{font-family:"Chalkboard SE","Comic Sans MS",cursive}
.post-font-choice[data-font="marker"]{font-family:"Marker Felt","Chalkboard SE",cursive;font-weight:600}
.post-font-choice[data-font="print"]{font-family:"Chalkboard SE","Bradley Hand","Segoe Print",cursive;letter-spacing:.04em}

.post-colors{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.post-color-choice{
  width:28px;
  height:25px;
  border:0;
  cursor:pointer;
  background:var(--swatch,#efe3c5);
  clip-path:polygon(3% 2%,98% 0,100% 94%,94% 100%,4% 97%,0 90%);
  box-shadow:0 2px 3px rgba(59,39,19,.18);
}
.post-color-choice.selected{
  outline:2px solid rgba(68,44,25,.68);
  outline-offset:3px;
}
.post-color-choice[data-paper="cream"]{--swatch:#efe3c5}
.post-color-choice[data-paper="parchment"]{--swatch:#dfc99e}
.post-color-choice[data-paper="kraft"]{--swatch:#cbb184}
.post-color-choice[data-paper="sage"]{--swatch:#c9cfaa}
.post-color-choice[data-paper="blue"]{--swatch:#bbcbd0}
.post-color-choice[data-paper="rose"]{--swatch:#d8b8b0}
.post-color-choice[data-paper="lavender"]{--swatch:#cbbfd3}
.post-color-choice[data-paper="ochre"]{--swatch:#d7be80}

.post-season-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 5px 127px;
  color:#58402b;
  font:14px "Bradley Hand","Segoe Print",cursive;
}
.post-season-line input{accent-color:#795a35}
.post-season-line.hidden{display:none}

.post-test-note{
  margin:12px 0 3px;
  text-align:center;
  color:rgba(67,46,29,.64);
  font:13px "Bradley Hand","Segoe Print",cursive;
}
.post-submit{
  display:block;
  margin:8px auto 0;
  border:0;
  padding:8px 17px 9px;
  color:#3f2e21;
  background:#ddc69d;
  cursor:pointer;
  font:18px "Bradley Hand","Segoe Print",cursive;
  transform:rotate(-1deg);
  clip-path:polygon(2% 2%,98% 0,100% 94%,95% 100%,3% 97%,0 91%);
  box-shadow:0 3px 4px rgba(51,31,13,.18);
}
.post-submit:hover,.post-submit:focus-visible{transform:rotate(0deg) translateY(-1px);outline:1px dashed rgba(71,47,28,.48);outline-offset:3px}

.post-composer.font-pencil .post-message{font-family:"Bradley Hand","Segoe Print",cursive;color:#49423b}
.post-composer.font-ink .post-message{font-family:"Noteworthy","Bradley Hand","Segoe Print",cursive;color:#242a31}
.post-composer.font-sketch .post-message{font-family:"Chalkboard SE","Comic Sans MS",cursive;letter-spacing:.015em;color:#3a332b}
.post-composer.font-marker .post-message{font-family:"Marker Felt","Chalkboard SE",cursive;font-weight:600;color:#292620}
.post-composer.font-print .post-message{font-family:"Chalkboard SE","Bradley Hand","Segoe Print",cursive;letter-spacing:.045em;color:#312c26}

.post-flash{
  position:absolute;
  z-index:130;
  left:50%;
  top:88px;
  transform:translateX(-50%) rotate(-1deg);
  display:none;
  padding:8px 14px;
  color:#3f3023;
  background:#ead9b7;
  font:15px "Bradley Hand","Segoe Print",cursive;
  box-shadow:0 3px 5px rgba(45,28,13,.20);
}
.post-flash.show{display:block;animation:postFlash 1.9s ease forwards}
@keyframes postFlash{0%{opacity:0;transform:translateX(-50%) translateY(-7px) rotate(-1deg)}15%,75%{opacity:1;transform:translateX(-50%) translateY(0) rotate(-1deg)}100%{opacity:0}}

@media(max-width:850px){
  .post-pad{left:90px;top:15px;font-size:13px;padding:6px 9px}
  .post-composer{top:80px;width:92%;min-height:585px;padding:46px 34px 30px}
  .post-message{height:170px;font-size:21px}
}
@media(max-width:560px){
  .post-pad{left:73px;top:13px;font-size:11px;padding:5px 7px}
  .post-pad::before{font-size:14px;margin-right:3px}
  .post-composer{top:65px;width:96%;min-height:610px;padding:44px 20px 26px}
  .post-composer h2{font-size:24px}
  .post-message{height:165px;font-size:18px;padding:10px}
  .post-control-row{display:block;margin:9px 0}
  .post-control-label{display:block;margin-bottom:4px}
  .post-category{width:100%;max-width:none}
  .post-season-line{margin-left:0}
  .post-font-choice{font-size:13px;padding:3px 5px}
  .post-color-choice{width:25px;height:23px}
}