/* sticky note colours, picked per note */
.sticky-yellow { --sticky: #ffe27a; --sticky-dark: #e0b93f; }
.sticky-pink { --sticky: #ff9fcf; --sticky-dark: #e06aa6; }
.sticky-mint { --sticky: #93f5c8; --sticky-dark: #52c893; }
.sticky-peach { --sticky: #ffc49a; --sticky-dark: #e8925a; }
.sticky-lilac { --sticky: #cbb4ff; --sticky-dark: #9a7ce8; }
.sticky-sky { --sticky: #9fdcff; --sticky-dark: #5aaee0; }

/* a big sticky sheet used by editors */
.sticky-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px 18px;
  color: #1a2233;
  background: linear-gradient(170deg, var(--sticky) 80%, var(--sticky-dark));
  box-shadow: 4px 8px 0 #050b16aa, 0 0 30px #0006;
  transform: rotate(-1deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
  animation: pop-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* folded corner */
.sticky-sheet::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, var(--sticky-dark) 50%, transparent 50%); }
.sticky-sheet h2.marker { background: #ffffff88; color: #1a2233; }
.sticky-sheet input, .sticky-sheet textarea { color: #1a2233; background: #ffffff55; border-color: #0003; }
.sticky-sheet input::placeholder, .sticky-sheet textarea::placeholder { color: #1a223388; }
.sticky-sheet .pill { color: #1a2233; background: #ffffffaa; border-color: #0002; }
.sticky-sheet .scribble { color: #1a2233aa; }

/* sticky note grid */
.sticky-grid { list-style: none; margin: 4px 0 0; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.sticky-note {
  position: relative;
  aspect-ratio: 1;
  padding: 12px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  color: #1a2233;
  cursor: pointer;
  background: linear-gradient(170deg, var(--sticky) 75%, var(--sticky-dark));
  box-shadow: 3px 6px 0 #050b16aa;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: pop-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--index, 0) * 45ms);
}
.sticky-note:nth-child(3n+1) { transform: rotate(-2.5deg); }
.sticky-note:nth-child(3n+2) { transform: rotate(1.8deg); }
.sticky-note:nth-child(3n) { transform: rotate(-0.8deg); }
.sticky-note:hover { transform: rotate(0deg) scale(1.07); z-index: 2; }
.sticky-note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; background: linear-gradient(135deg, var(--sticky-dark) 50%, transparent 50%); }
.sticky-title { font: 600 15px var(--font-fun); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-preview { flex: 1; font-size: 14px; line-height: 1.25; white-space: pre-wrap; overflow: hidden; opacity: 0.85; }
.sticky-date { font-size: 12px; opacity: 0.6; }

/* scratchpad, a strip of yellow legal pad that never goes away */
.scratchpad { position: relative; padding: 18px 12px 10px; background: #ffe27a1f; border: 2px dashed #ffe27a88; border-radius: var(--wobbly-alt); transform: rotate(-0.4deg); }
.scratchpad-label { position: absolute; top: -12px; left: 16px; padding: 0 10px; font: 600 13px var(--font-fun); color: #1a2233; background: var(--yellow); border-radius: 999px; transform: rotate(-3deg); box-shadow: 1px 2px 0 #050b16; }
.scratchpad-body { width: 100%; min-height: 110px; resize: vertical; border: none; background: transparent linear-gradient(transparent 27px, #ffe27a33 27px) 0 2px / 100% 28px; line-height: 28px; font-size: 18px; }
.scratchpad-body:focus { box-shadow: none; }

/* the note editor becomes one big sticky */
#notes-editor .lined-paper { color: #1a2233; background: transparent linear-gradient(transparent 29px, #0000001f 29px) 0 4px / 100% 30px; border: none; box-shadow: none; }
#notes-editor .title-input { color: #1a2233; }

/* chix task buttons only show on chix cards */
.task-actions { display: none; gap: 6px; margin-top: 6px; }
.task-card.from-chix .task-actions { display: flex; }
#task-editor { justify-content: center; }