/* App-only layer on top of tokens.css + components.css (copies of docs/design/*).
   Rules: no raw colours or sizes from outside tokens.css (a test checks for hex/rgb), logical properties only.
   Anything reusable belongs in docs/design/components.css first, then gets copied here. */

.main { inline-size: 100%; margin-inline: auto; }
.main > h2 { margin-block-start: var(--space-2); }
.narrow-col { max-inline-size: 720px; }

/* Letter placement editor (Task 4.5): the PDF page is drawn on a canvas, boxes are dragged on top. */
.letter-preview { position: relative; inline-size: 100%; background: var(--color-paper); color: var(--color-paper-text); border-radius: var(--radius-xs); overflow: hidden; box-shadow: var(--shadow-overlay); touch-action: none; }
.letter-preview canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.letter-preview .box { position: absolute; cursor: move; user-select: none; }
.letter-preview .box.qr { border: 2px dashed var(--color-focus); background: var(--color-focus-tint); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); color: var(--color-focus); }
.letter-preview .box.field { border: var(--border-width) dashed var(--color-focus); background: var(--color-focus-tint); padding-inline: 2px; line-height: 1.2; white-space: nowrap; color: var(--color-paper-text); }
.letter-preview .box.transparency { cursor: default; color: var(--color-text-muted); line-height: 1.25; }
/* The letter is laid out in PDF coordinates: keep it left-to-right in Arabic too. */
.letter-preview { direction: ltr; }