/* Folha de caderno, campos, dobra 3D, bilhete voando e confete. */

.paper-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; margin: 0; }
.paper-holder { position: relative; width: min(100%, 470px); transform: rotate(1deg); }

.paper {
  position: relative;
  padding: 34px 22px 16px 68px;
  background: var(--paper); border-radius: 6px;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .06);
  transform-origin: 50% 50%;
}
/* furos e margem vermelha */
.paper::before, .paper::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.paper::before {
  left: 14px; width: 22px;
  background: radial-gradient(circle, var(--hole) 0 7px, var(--hole-rim) 7px 8.5px, transparent 9px) center / 22px 33.33% repeat-y;
}
.paper::after { left: 52px; border-left: 2px solid var(--margin); }
.paper:focus-within { outline: 3px dashed rgba(38, 32, 25, .5); outline-offset: 7px; }
.paper.is-hidden { visibility: hidden; }
.paper.is-sending { opacity: .55; }

.tape {
  position: absolute; z-index: 2; top: -15px; left: 50%;
  width: 124px; height: 32px; margin-left: -62px; transform: rotate(-3deg);
  background: rgba(255, 236, 170, .78); box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  pointer-events: none;
}

.paper-label {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 32px; color: var(--pen);
  background: linear-gradient(transparent 31px, var(--line) 31px 32px);
}
.paper textarea, .paper .ta-static {
  display: block; width: 100%; min-height: calc(32px * 7); margin: 0; padding: 0 0 0 2px;
  border: 0; outline: 0; resize: none; border-radius: 0;
  color: var(--pen); font-family: var(--text); font-weight: 600; font-size: 19px; line-height: 32px;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
  background-attachment: local;
}
.paper .ta-static { white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.paper textarea::placeholder { color: var(--pen-soft); }
.paper textarea[aria-invalid="true"] { background-color: rgba(214, 69, 69, .07); }

.sign-line { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; color: var(--pen); }
.sign-line label { font-family: var(--display); font-weight: 700; font-size: 19px; white-space: nowrap; }
.sign-line input, .sign-line .in-static {
  flex: 1; min-width: 0; padding: 2px 4px; outline: 0;
  border: 0; border-bottom: 2px dashed var(--pen-soft); border-radius: 0;
  background: transparent; color: var(--pen); font: 600 19px/1.4 var(--text);
}
.sign-line input:focus { border-bottom-style: solid; border-bottom-color: var(--pen); }
.sign-line input::placeholder, .sign-line .is-placeholder { color: var(--pen-soft); }
.sign-line input[aria-invalid="true"] { border-bottom-color: var(--danger); }

.paper-meta {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
  font-size: 13px; line-height: 1.3; color: #4a5a85;
}
.paper-meta .count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper-meta .count.is-near { color: var(--danger); font-weight: 800; }

/* honeypot: fora da tela, longe de leitores de tela e do teclado */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- dobra em três (ui/paper.js) ---------- */
.fold { position: fixed; z-index: 140; perspective: 1400px; transform-style: preserve-3d; pointer-events: none; }
.fold-panel { position: absolute; left: 0; width: 100%; transform-style: preserve-3d; }
.fold-panel.p0 { transform-origin: 50% 100%; }
.fold-panel.p2 { transform-origin: 50% 0%; }
.fold-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; }
.fold-front > .paper { position: absolute; left: 0; margin: 0; box-shadow: none; }
.fold-back {
  transform: rotateX(180deg);
  background-color: var(--paper-back);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(168, 198, 234, .35) 31px 32px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* ---------- bilhete voando ---------- */
.note-fly {
  position: fixed; left: 0; top: 0; z-index: 140; width: 96px; height: 62px; pointer-events: none;
  border: 3px solid var(--ink); border-radius: 6px;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .2) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(transparent 0 11px, var(--line) 11px 12px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .25);
  transform-origin: center; will-change: transform;
}
.note-fly::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 18px; height: 18px;
  background: linear-gradient(225deg, transparent 50%, rgba(0, 0, 0, .14) 50%); border-bottom-left-radius: 4px;
}

.confetti { position: fixed; z-index: 135; width: 9px; height: 13px; border-radius: 2px; pointer-events: none; }
.plus-one {
  position: fixed; z-index: 136; pointer-events: none;
  font-family: var(--display); font-weight: 800; font-size: 36px; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}