/* writing on the firefly's back, in typewriter ink */
/* box, reassurance and buttons sit together in one stack, so they travel as one when a phone keyboard opens */
.write { position: fixed; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.write.show { opacity: 1; pointer-events: auto; }
.write .stack { width: min(440px, 88vw); display: flex; flex-direction: column; align-items: center; perspective: 700px; transform: translateY(8vh); }
.write .back { width: 100%; margin-bottom: 12px; }
@media (max-width: 720px) { .write .stack { transform: none; } }
.write textarea {
  display: block; width: 100%; box-sizing: border-box; height: auto; min-height: calc(3 * 1.45em + 32px); max-height: 40vh; resize: none; border: 0; outline: 0;
  /* a sheet of brown paper: this is what rolls up into a scroll once you let it go (see paperTexture in js/paper.js) */
  background: linear-gradient(180deg, #d2aa74, #bd915b); border-radius: 3px; padding: 16px 20px; overflow-y: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 14px 0 14px -12px rgba(70,40,12,.4);
  font: clamp(19px, 2.2vw, 24px)/1.45 var(--f-type); color: #3b2410; text-align: center; letter-spacing: .01em; caret-color: #3b2410;
}
.write textarea::placeholder { color: rgba(59,36,16,.5); }
.write .hint {
  width: 100%; box-sizing: border-box; margin-top: 18px; padding: 14px 16px 16px; display: flex; gap: 12px 14px; align-items: center; flex-wrap: wrap; justify-content: center; text-align: center;
  /* the same soft dark backing as the writing box, so the reassurance and both buttons stay readable over the pale wings */
  background: rgba(8, 10, 22, .55); border-radius: 14px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.write .privacy {
  flex-basis: 100%; margin: 0 0 6px; font: 15px/1.5 var(--f-type); letter-spacing: .03em; color: #c9d6e0; text-wrap: balance;
  text-shadow: 0 0 10px rgba(4,6,16,.9), 0 1px 2px rgba(4,6,16,.8);
}
.write button, .letter button, .read button {
  font: 15px var(--f-type); letter-spacing: .05em; color: #0d1420; background: var(--type-ink); border: 0; border-radius: 999px; padding: 0 24px; min-height: 44px; cursor: pointer;
}
.write button.ghost, .letter button.ghost, .read button.ghost { background: transparent; color: var(--ink-soft); border: 1px solid rgba(159,179,194,.4); }
.write button:focus-visible, .letter button:focus-visible, .read button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.write button:disabled { opacity: .4; cursor: default; }