feat(fp): WP-24 — letter canvas (edit on the letter)

One letter surface for every role: LetterCanvasComponent renders the
org template's letterhead/signature/footer around the case-type
sections, with editableRegions content|template|none. public/letter.css
is the FE⇄BE rendering contract (WP-25 inlines it verbatim).
letter-preview deleted — its read-only rendering absorbed into 'none'
mode. brief.machine.ts byte-identical; orgTemplate parses at the
adapter boundary and lives beside the machine in BriefStore.

Also fixes passage-picker multi-select (checkboxes all shared
id="undefined", so labels only toggled the first box) and keeps the
±page-break marks from drawing through canvas content.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/letter.css

@@ -0,0 +1,197 @@
+/* letter.css — the FE⇄BE letter-rendering CONTRACT (WP-24/WP-25).
+ *
+ * One stylesheet, two consumers: the FE letter canvas loads it via <link>
+ * (index.html + Storybook preview-head), the backend HTML renderer (WP-25)
+ * inlines this same file. Its class-parity test is the fence against drift.
+ *
+ * Class vocabulary: .letter, .letter__letterhead, .letter__body,
+ * .letter__signature, .letter__footer, .letter__page-break.
+ * Margins arrive as --letter-margin-* custom props (mm, from the OrgTemplate);
+ * the defaults below match the seed template.
+ *
+ * Deliberately self-contained: no --rhc- or --bs- tokens — the backend renderer
+ * has no token bridge. Geometry follows the sample voorbeeldbrief-inschrijving
+ * (A4, return address above the envelope window, reference block, footer rule).
+ */
+
+.letter {
+  --letter-margin-top: 25mm;
+  --letter-margin-right: 25mm;
+  --letter-margin-bottom: 25mm;
+  --letter-margin-left: 25mm;
+
+  position: relative;
+  box-sizing: border-box;
+  width: 210mm; /* A4 */
+  max-width: 100%;
+  min-height: 297mm;
+  margin-inline: auto;
+  padding: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom)
+    var(--letter-margin-left);
+  background: #fff;
+  color: #1a1a1a;
+  /* Letter typography is the letter's, not the portal UI's. Licensed RO/Rijks
+     fonts are not shipped; system stack mirrors the app-wide decision (ADR-0003). */
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  font-size: 10.5pt;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+.letter p {
+  margin: 0 0 0.75em;
+}
+
+.letter ul,
+.letter ol {
+  margin: 0 0 0.75em;
+  padding-inline-start: 1.4em;
+}
+
+/* --- Letterhead: wordmark, return address above the envelope window, reference block --- */
+
+.letter__letterhead {
+  margin-block-end: 12mm;
+}
+
+.letter__letterhead .org-wordmark {
+  font-size: 13pt;
+  font-weight: 700;
+  margin: 0 0 10mm;
+}
+
+.letter__letterhead .return-address {
+  font-style: normal;
+  font-size: 7.5pt;
+  white-space: pre-line;
+  color: #555;
+  margin-block-end: 2mm;
+}
+
+/* Envelope-window position (~C5 venstercouvert): recipient block. */
+.letter__letterhead .address-window {
+  min-height: 22mm;
+  font-style: normal;
+  white-space: pre-line;
+  margin-block-end: 8mm;
+}
+
+.letter__letterhead .reference {
+  display: flex;
+  gap: 10mm;
+  font-size: 8.5pt;
+  color: #333;
+}
+
+.letter__letterhead .reference dt {
+  font-weight: 700;
+  margin: 0;
+}
+
+.letter__letterhead .reference dd {
+  margin: 0;
+}
+
+/* --- Body: the case-type template's sections --- */
+
+.letter__body {
+  flex: 1;
+  /* Above the absolutely-positioned page-break marks: the dashed line stays visible
+     in the gaps but never draws THROUGH opaque content (editors, pickers). */
+  position: relative;
+  z-index: 1;
+}
+
+.letter__body h3 {
+  font-size: inherit;
+  font-weight: 700;
+  margin: 0 0 0.25em;
+}
+
+.letter__body section {
+  margin-block-end: 1.5em;
+}
+
+/* --- Signature --- */
+
+.letter__signature {
+  margin-block-start: 10mm;
+}
+
+.letter__signature p {
+  margin: 0;
+}
+
+.letter__signature .signature-name {
+  margin-block-start: 3em; /* room for the (not-shipped) handwritten signature */
+  font-weight: 700;
+}
+
+/* --- Footer: contact + legal, above a rule --- */
+
+.letter__footer {
+  margin-block-start: 10mm;
+  padding-block-start: 3mm;
+  border-block-start: 0.5pt solid #999;
+  font-size: 7.5pt;
+  color: #555;
+  display: flex;
+  justify-content: space-between;
+  gap: 10mm;
+}
+
+.letter__footer .footer-contact {
+  white-space: pre-line;
+}
+
+.letter__footer .footer-legal {
+  text-align: end;
+}
+
+/* --- Approximate page-break indicator (screen only; PRD §2b honesty rule) ---
+   Positioned per A4-interval by the canvas; the print preview is authoritative. */
+
+.letter__page-break {
+  position: absolute;
+  inset-inline: 0;
+  border-block-start: 1px dashed #b36200;
+  pointer-events: none;
+}
+
+.letter__page-break > span {
+  position: absolute;
+  inset-inline-end: 2mm;
+  inset-block-start: 0;
+  transform: translateY(-50%);
+  /* Above .letter__body: the honesty caption stays legible even over content. */
+  z-index: 2;
+  font-size: 7pt;
+  color: #b36200;
+  background: #fff;
+  padding-inline: 1mm;
+  white-space: nowrap;
+}
+
+/* --- Print: real pages, no indicator chrome --- */
+
+@page {
+  size: A4;
+  margin: 0;
+}
+
+@media print {
+  .letter {
+    width: auto;
+    min-height: 0;
+  }
+
+  .letter__page-break {
+    display: none;
+  }
+}