/* 📜 THE WORLD'S PAPER — one surface for every handwritten thing (19 Sep 2026).
   Nib's drawer letter in chapter one and a player's post are the SAME sheet: cream,
   ruled, torn top and bottom, tilted, unfolding as it opens, written in Caveat.
   Lifted out of world-quest.js (where it was scoped `.bwq-dlg .bwq-paper` and could
   not be reused) the way dialogue was lifted into /css/dialogue.css.
   ⚠️ NEVER put .bw-paper on the element that holds a caret: iOS draws a caret a
   pixel or two out inside a rotated, clipped box, and the clip eats the last line
   as the box grows. Tilt and tear the WRAPPER, and let the textarea sit upright
   inside it (.bw-paper__in). docs/design-library.md §22. */
.bw-paper {
  background: #f6ecd0 repeating-linear-gradient(180deg, transparent 0 24px, rgba(122, 88, 40, 0.22) 24px 25px);
  color: #43301a;
  padding: 1.3rem 1rem 0.6rem;
  transform: rotate(-1.4deg);
  font-family: "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  /* the line-height IS the rule spacing (24px + a 1px line), so the writing sits ON the lines */
  font-weight: 600; font-size: 1.34rem; line-height: 25px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.4);
  /* ⚠️ a letter wraps whatever its host says: the homestead's cards set white-space:nowrap on
     buttons, and an unwrapped letter grows the card until the close button leaves the screen */
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box;
  clip-path: polygon(0 3%, 4% 0, 9% 2%, 15% 0, 22% 3%, 30% 1%, 38% 3%, 47% 0, 55% 2%,
    63% 0, 71% 3%, 79% 1%, 87% 3%, 94% 0, 100% 2%, 100% 97%, 95% 100%, 88% 98%,
    80% 100%, 71% 97%, 62% 100%, 53% 98%, 44% 100%, 35% 97%, 26% 100%, 17% 98%,
    9% 100%, 3% 97%, 0 100%);
  animation: bwPaperUnfold 0.4s ease-out;
}
@keyframes bwPaperUnfold { 0% { transform: rotate(-1.4deg) scaleY(0.12); opacity: 0; } 100% { transform: rotate(-1.4deg) scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bw-paper { animation: none; } }

/* who it is from, in the same hand but smaller and to the right */
.bw-paper__from { display: block; margin-top: 4px; text-align: right; opacity: 0.72; font-size: 1.1rem; }

/* the writing sheet: the tear and the tilt live HERE, the field sits upright inside */
.bw-sheet { position: relative; }
.bw-sheet .bw-paper__in {
  display: block; width: 100%; box-sizing: border-box; resize: none;
  background: transparent; border: 0; outline: none; color: #43301a;
  font-family: inherit; font-weight: 600; font-size: 1.34rem; line-height: 25px;
  /* ⚠️ 16px or larger in CSS pixels or iOS zooms the page on focus — 1.34rem is 21px */
}
.bw-sheet .bw-paper__in::placeholder { color: #43301a; opacity: 0.38; }