/* theme: paper, the light cream cork-and-paper look from the very first
   wireframe mockup. same tokens, same fonts (Space Grotesk / Work Sans /
   Space Mono), same rotated-note-with-tape treatment, just re-skinned
   onto the current wall markup instead of the standalone mockup's.
   this is the one that was picked as the best look, so it's the default. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

.wall-theme-paper {
  background:
    radial-gradient(circle at 1px 1px, rgba(120,90,50,0.15) 1px, transparent 1px) 0 0/22px 22px,
    #f3ede0;
  color: #221a13;
  border-radius: 14px;
  padding: 20px 18px 24px;
}

.wall-theme-paper .wall-heading h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 2.2rem; color: #221a13; margin: 0; line-height: 1.05; }
.wall-theme-paper .wall-heading p { color: #5b4d3d; font-size: 0.9rem; font-family: "Work Sans", sans-serif; }

.wall-theme-paper .wall-controls { border-bottom: 1px solid rgba(34,26,19,0.14); padding-bottom: 10px; }
.wall-theme-paper .wall-count { font-family: "Space Mono", monospace; font-size: 0.75rem; color: #5b4d3d; }
.wall-theme-paper .wall-sort button { font-family: "Space Mono", monospace; font-size: 0.72rem; background: none; border: 1px solid rgba(34,26,19,0.2); color: #5b4d3d; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.wall-theme-paper .wall-sort button.active { color: #221a13; background: rgba(34,26,19,0.1); border-color: rgba(34,26,19,0.3); }

.wall-theme-paper .wall-authbar { color: #5b4d3d; font-family: "Work Sans", sans-serif; font-size: 0.82rem; }
.wall-theme-paper .wall-authbar .switch { color: #c2432f; }
.wall-theme-paper .wall-authform { justify-content: flex-start; margin-left: 0; }
.wall-theme-paper .wall-authform input { font-family: "Work Sans", sans-serif; font-size: 0.85rem; color: #221a13; background: #fff8ee; border: 1px solid rgba(34,26,19,0.2); border-radius: 4px; padding: 8px 10px; }
.wall-theme-paper .wall-authform button { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.8rem; background: #c2432f; color: #fff8ee; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.wall-theme-paper .wall-authform .err { color: #b23a2a; }

/* compose box: a pinned blank note, exactly like the original mockup */
.wall-theme-paper .wall-compose {
  position: relative;
  background: #fff3b0;
  padding: 20px 20px 16px;
  transform: rotate(-0.6deg);
  box-shadow: 2px 6px 14px rgba(0,0,0,0.18);
}
.wall-theme-paper .wall-compose::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9d97, #e0453f 60%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.35);
}
.wall-theme-paper .wall-compose label { display: block; font-family: "Space Mono", monospace; font-size: 11px; color: rgba(34,26,19,0.6); margin-bottom: 8px; }
.wall-theme-paper .wall-compose textarea { font-family: "Work Sans", sans-serif; font-size: 15px; color: #241c33; background: transparent; border: none; border-bottom: 1px dashed rgba(34,26,19,0.3); padding-bottom: 10px; }
.wall-theme-paper .wall-compose-file { color: rgba(34,26,19,0.65); font-family: "Space Mono", monospace; }
.wall-theme-paper .wall-filelabel { color: #c2432f; font-weight: 700; }
.wall-theme-paper .wall-compose-foot input[type=text] { font-family: "Space Mono", monospace; font-size: 12px; background: transparent; border: none; border-bottom: 1px solid rgba(34,26,19,0.25); color: #221a13; padding: 2px 0; }
.wall-theme-paper .wall-compose-foot button { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; background: #c2432f; color: #fff8ee; border: none; padding: 8px 16px; border-radius: 3px; cursor: pointer; }
.wall-theme-paper .wall-compose-foot button:hover { background: #d8543f; }

/* pinned, rotated, taped notes, one color per poster, same palette as
   the original mockup (mango / greenapple / banana / ananas) */
.wall-theme-paper .wall-post {
  position: relative; color: #241c33; box-shadow: 2px 5px 12px rgba(0,0,0,0.16);
}
.wall-theme-paper .wall-post::before {
  content: ""; position: absolute; top: -8px; left: 22px; width: 52px; height: 16px;
  background: rgba(255,255,255,0.55); transform: rotate(-3deg);
}
.wall-theme-paper .wall-post.author-0 { background: #ffcf5c; transform: rotate(-1.1deg); }
.wall-theme-paper .wall-post.author-1 { background: #b8e46c; transform: rotate(0.8deg); }
.wall-theme-paper .wall-post.author-2 { background: #fff3b0; transform: rotate(-0.4deg); }
.wall-theme-paper .wall-post.author-3 { background: #ff8a73; transform: rotate(0.5deg); }

.wall-theme-paper .wall-post-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 15px; color: #241c33; }
.wall-theme-paper .wall-post-time { font-family: "Space Mono", monospace; font-size: 10px; color: rgba(36,28,51,0.55); }
.wall-theme-paper .wall-post-body { font-family: "Work Sans", sans-serif; font-size: 14.5px; line-height: 1.45; }
.wall-theme-paper .wall-reacts button { font-family: "Space Mono", monospace; font-size: 12px; background: none; border: none; cursor: pointer; color: rgba(36,28,51,0.75); }
.wall-theme-paper .wall-reacts button:hover { color: #241c33; }
.wall-theme-paper .wall-replylink { font-family: "Space Mono", monospace; font-size: 12px; color: rgba(36,28,51,0.55); }
.wall-theme-paper .wall-replylink:hover { color: #241c33; }

.wall-theme-paper .wall-thread { border-left: 1px dashed rgba(36,28,51,0.35); }
.wall-theme-paper .wall-reply { background: rgba(255,255,255,0.35); border-radius: 2px; }
.wall-theme-paper .wall-reply-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px; color: #241c33; }
.wall-theme-paper .wall-reply-time { font-family: "Space Mono", monospace; font-size: 9.5px; color: rgba(36,28,51,0.5); }
.wall-theme-paper .wall-reply-body { font-family: "Work Sans", sans-serif; font-size: 13.5px; color: #241c33; }
.wall-theme-paper .wall-reply .wall-reacts button { font-size: 11px; }
.wall-theme-paper .wall-reply .wall-replylink { font-size: 11px; }
.wall-theme-paper .wall-reply .wall-thread { margin-top: 8px; }

.wall-theme-paper .wall-attachment-img { margin-bottom: 8px; }
.wall-theme-paper .wall-attachment-img img { border-radius: 4px; max-height: 200px; }
.wall-theme-paper .wall-attachment-file { font-family: "Space Mono", monospace; color: #241c33; font-weight: 700; font-size: 12px; background: rgba(255,255,255,0.4); padding: 5px 9px; border-radius: 3px; display: inline-block; margin-bottom: 8px; }
.wall-theme-paper .wall-attachment-file span { color: rgba(36,28,51,0.55); font-weight: 400; }

.wall-theme-paper .wall-replybox input[type=text] { font-family: "Work Sans", sans-serif; font-size: 13px; color: #241c33; background: rgba(255,255,255,0.5); border: none; border-radius: 2px; padding: 7px 9px; }
.wall-theme-paper .wall-replybox button { font-family: "Space Mono", monospace; font-size: 11px; background: #241c33; color: #fff8ee; border: none; padding: 0 12px; border-radius: 2px; cursor: pointer; }

.wall-theme-paper .wall-loadmore { font-family: "Space Mono", monospace; font-size: 0.72rem; background: none; border: 1px solid rgba(34,26,19,0.25); color: #5b4d3d; padding: 9px 18px; border-radius: 6px; cursor: pointer; }
.wall-theme-paper .wall-loadmore:hover { color: #221a13; border-color: rgba(34,26,19,0.45); }
.wall-theme-paper .wall-annot { font-family: "Space Mono", monospace; color: #8a7a63; }
.wall-theme-paper .wall-empty { color: #5b4d3d; font-family: "Work Sans", sans-serif; }