mAi: #110 - t-paliad-278 — 3-column date-range picker (Past/NOW/Future, closeness-to-NOW sort)

Restructures atlas's #79 horizontal row into 3 vertical columns: Past
(left), NOW (middle), Future (right). Each column sorts by closeness
to NOW (closest at top, farthest at bottom) — the picker now reads as
a spatial map of time around the current moment instead of a flat
horizontal fan.

Layout

  Vergangenheit          ⌖              Zukunft
  Letzte 7 Tage          Heute          Nächste 7 Tage
  Letzte 30 Tage         Alles          Nächste 30 Tage
  Letzte 90 Tage                        Nächste 90 Tage
  Ganze Vergangenheit                   Ganze Zukunft

Changes

- date-range-picker.ts — renderPanel builds .date-range-grid with
  three vertical .date-range-col children. Past column iterates
  PAST_HORIZONS reversed (past_1d → past_all top-to-bottom). NOW
  column hosts next_1d ("Heute") + any ("Alles") plus a ⌖ glyph
  header. Future column iterates NEXT_HORIZONS minus next_1d (which
  moved to NOW). Legacy "all" horizon still lights up the Alles chip
  for saved-Custom-View back-compat.
- global.css — replace .date-range-row/.date-range-fan/.date-range-
  center{,-btn,-glyph,-label} with .date-range-grid + .date-range-col
  + .date-range-col-heading. Chips stretch to 100% column width for a
  clean vertical stack. Panel widened from 32rem to 34rem so "Ganze
  Vergangenheit" never wraps. Mobile (max-width 540px) collapses the
  grid to a single column, preserving in-column sort.
- i18n.ts — next_1d label fixed from "Morgen"/"Tomorrow" to "Heute"/
  "Today". next_1d's bounds are [today, tomorrow) = single-day today,
  so the prior label was semantically wrong; renaming aligns the
  label with the bounds and matches m's "Heute" spec for the NOW
  column.
- axes.ts — DEFAULT_TIME_PRESETS updated to match m's spec (4 past +
  Heute + Alles + 4 future + custom). projects-detail.ts continues
  to override via timePresets for its past-only Verlauf surface.

12 horizon values in the union remain unchanged — PAST_HORIZONS /
NEXT_HORIZONS registries and parseURL still accept past_1d / past_14d
/ next_14d for back-compat with saved URLs; the default picker UI
just no longer surfaces chips for them. Surfaces that want the
finer granularity can opt back in via timePresets.

Verification

- bun test src/client/date-range-picker-pure.test.ts — 38 pass
- bun run build — i18n + branding + bundle clean
- go build ./... — clean
- go test ./internal/... — pass

frontend/src/client/date-range-picker.ts

@@ -191,25 +191,37 @@ export function mountDateRangePicker(opts: MountOpts): PickerHandle {
   function renderPanel(): void {
     panel.replaceChildren();
 
-    // Three groups in a single row: past fan / ALLES centre / next fan.
-    const row = document.createElement("div");
-    row.className = "date-range-row";
+    // Three vertical columns: Past (closest→farthest top→bottom),
+    // NOW (Heute + Alles), Future (closest→farthest). The grid
+    // visualises time as space around NOW — each column's top is
+    // closest to the current moment, bottom is furthest away.
+    const grid = document.createElement("div");
+    grid.className = "date-range-grid";
 
-    const pastGroup = renderFan(
-      PAST_HORIZONS.filter((h) => presets.includes(h)),
+    // Past column: PAST_HORIZONS registry is outermost→innermost
+    // (past_all → past_1d); reverse for closeness-to-NOW ordering
+    // (past_1d at top, past_all at bottom).
+    const pastCol = renderColumn(
       "past",
+      t("date_range.fan.past.label"),
+      [...PAST_HORIZONS].reverse().filter((h) => presets.includes(h)),
     );
-    const centerGroup = renderCenter();
-    const nextGroup = renderFan(
-      NEXT_HORIZONS.filter((h) => presets.includes(h)),
-      "next",
+    const nowCol = renderNowColumn();
+    // Future column: NEXT_HORIZONS registry is already in closeness
+    // order (next_1d → next_all). next_1d moves to the NOW column as
+    // "Heute" (semantically just-today, single-day window), so the
+    // future column skips it.
+    const futureCol = renderColumn(
+      "future",
+      t("date_range.fan.future.label"),
+      NEXT_HORIZONS.filter((h) => h !== "next_1d" && presets.includes(h)),
     );
 
-    if (pastGroup) row.appendChild(pastGroup);
-    if (centerGroup) row.appendChild(centerGroup);
-    if (nextGroup) row.appendChild(nextGroup);
+    if (pastCol) grid.appendChild(pastCol);
+    if (nowCol) grid.appendChild(nowCol);
+    if (futureCol) grid.appendChild(futureCol);
 
-    panel.appendChild(row);
+    panel.appendChild(grid);
 
     // Custom-range section ("Anpassen"). Toggle button + collapsible
     // date-pair editor below.
@@ -218,49 +230,57 @@ export function mountDateRangePicker(opts: MountOpts): PickerHandle {
     }
   }
 
-  function renderFan(horizons: readonly TimeHorizon[], side: "past" | "next"): HTMLElement | null {
+  function renderColumn(
+    side: "past" | "future",
+    heading: string,
+    horizons: readonly TimeHorizon[],
+  ): HTMLElement | null {
     if (horizons.length === 0) return null;
-    const group = document.createElement("div");
-    group.className = `date-range-fan date-range-fan--${side}`;
-    group.setAttribute("role", "group");
-    group.setAttribute("aria-label", side === "past"
-      ? t("date_range.fan.past.label")
-      : t("date_range.fan.future.label"));
+    const col = document.createElement("div");
+    col.className = `date-range-col date-range-col--${side}`;
+    col.setAttribute("role", "group");
+    col.setAttribute("aria-label", heading);
+
+    const head = document.createElement("div");
+    head.className = "date-range-col-heading";
+    head.textContent = heading;
+    col.appendChild(head);
+
     for (const h of horizons) {
-      group.appendChild(makeChip(h));
+      col.appendChild(makeChip(h));
     }
-    return group;
+    return col;
   }
 
-  function renderCenter(): HTMLElement | null {
-    if (!presets.includes("any")) return null;
-    const wrap = document.createElement("div");
-    wrap.className = "date-range-center";
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "date-range-center-btn";
-    if (value.horizon === "any" || value.horizon === "all") {
-      btn.classList.add("date-range-center-btn--active");
-    }
-    btn.setAttribute("aria-pressed", String(value.horizon === "any" || value.horizon === "all"));
-    btn.dataset.testid = `${opts.surface}.date-range-chip.any`;
+  function renderNowColumn(): HTMLElement | null {
+    const showHeute = presets.includes("next_1d");
+    const showAlles = presets.includes("any");
+    if (!showHeute && !showAlles) return null;
 
-    const glyph = document.createElement("span");
-    glyph.className = "date-range-center-glyph";
+    const col = document.createElement("div");
+    col.className = "date-range-col date-range-col--now";
+    col.setAttribute("role", "group");
+    col.setAttribute("aria-label", t("date_range.center.label"));
+
+    const glyph = document.createElement("div");
+    glyph.className = "date-range-col-heading date-range-col-heading--glyph";
     glyph.setAttribute("aria-hidden", "true");
     glyph.textContent = "⌖"; // ⌖ POSITION INDICATOR
-    const label = document.createElement("span");
-    label.className = "date-range-center-label";
-    label.textContent = t("date_range.center.label");
-    btn.appendChild(glyph);
-    btn.appendChild(label);
+    col.appendChild(glyph);
 
-    btn.addEventListener("click", () => {
-      commit({ horizon: "any" }, /*closeAfter*/ true);
-    });
-
-    wrap.appendChild(btn);
-    return wrap;
+    if (showHeute) col.appendChild(makeChip("next_1d"));
+    if (showAlles) {
+      const allesChip = makeChip("any");
+      // Legacy "all" horizon also lights up Alles for back-compat
+      // with saved Custom Views that store the bidirectional-unbounded
+      // value (Q26 — parser preserves it, picker surfaces it here).
+      if (value.horizon === "all") {
+        allesChip.classList.add("agenda-chip-active");
+        allesChip.setAttribute("aria-pressed", "true");
+      }
+      col.appendChild(allesChip);
+    }
+    return col;
   }
 
   function makeChip(h: TimeHorizon): HTMLButtonElement {

frontend/src/client/deadlines-detail.ts

@@ -465,7 +465,8 @@ function refreshRuleAutoDisplay(): void {
   panel.style.display = "";
   const r = currentAutoRule();
   if (r) {
-    text.textContent = formatRuleLabel(r);
+    // Canonical "Name · Citation" with muted citation (t-paliad-258 addendum).
+    text.innerHTML = formatRuleLabelHTML(r, esc);
     text.classList.remove("rule-auto-text--empty");
     return;
   }

frontend/src/client/deadlines-new.ts

@@ -8,7 +8,7 @@ import {
   type PickerHandle,
 } from "./event-types";
 import { projectIndent } from "./project-indent";
-import { formatRuleLabel } from "./rule-label";
+import { formatRuleLabel, formatRuleLabelHTML } from "./rule-label";
 
 let eventTypePicker: PickerHandle | null = null;
 let currentUserAdmin = false;
@@ -192,7 +192,8 @@ function refreshRuleAutoDisplay(): void {
   panel.style.display = "";
   const rule = currentAutoRule();
   if (rule) {
-    text.textContent = formatRuleLabel(rule);
+    // Canonical "Name · Citation" with muted citation (t-paliad-258 addendum).
+    text.innerHTML = formatRuleLabelHTML(rule, esc);
     text.classList.remove("rule-auto-text--empty");
     return;
   }

frontend/src/client/filter-bar/axes.ts

@@ -73,13 +73,16 @@ export function renderAxis(axis: AxisKey, ctx: AxisCtx, opts?: RenderAxisOpts):
 
 type TimeHorizonValue = NonNullable<BarState["time"]>["horizon"];
 
-// Default chip set when the surface doesn't override. Matches the
-// forward-leaning bias of the legacy filter-bar default (the universal
-// substrate is more often used for "what's coming up" than "what just
-// happened") but now covers the full symmetric fan plus past_30d for
-// quick recent-history lookups.
+// Default chip set when the surface doesn't override. Mirrors m's
+// 3-column picker spec (t-paliad-278): symmetric 7d/30d/90d/all fan
+// per side, plus Heute (next_1d) + Alles (any) in the centre column,
+// plus Anpassen. Surfaces with a tighter scope (project history is
+// past-only) keep overriding via `timePresets`.
 const DEFAULT_TIME_PRESETS: TimeHorizonValue[] = [
-  "past_30d", "past_7d", "any", "next_7d", "next_30d", "next_90d", "custom",
+  "past_7d", "past_30d", "past_90d", "past_all",
+  "next_1d", "any",
+  "next_7d", "next_30d", "next_90d", "next_all",
+  "custom",
 ];
 
 function renderTimeAxis(ctx: AxisCtx, presetOverride?: TimeHorizonValue[]): HTMLElement {

frontend/src/client/i18n.ts

@@ -1117,6 +1117,10 @@ const translations: Record<Lang, Record<string, string>> = {
     "event.title.appointment_updated": "Termin ge\u00e4ndert",
     "event.title.appointment_deleted": "Termin gel\u00f6scht",
     "event.title.appointment_project_changed": "Termin verschoben",
+    // Umbrella audit kind + admin churn surfaced by the FilterBar
+    // project_event_kind chip cluster (KnownProjectEventKinds).
+    "event.title.approval_decided": "Genehmigung entschieden",
+    "event.title.member_role_changed": "Teamrolle ge\u00e4ndert",
     // 4-eye approval lifecycle (t-paliad-138). Verlauf renders these as
     // a paired card with the original lifecycle event (e.g.
     // "Frist angelegt" + "Genehmigung erteilt von Bert").
@@ -2841,21 +2845,26 @@ const translations: Record<Lang, Record<string, string>> = {
     "views.bar.save.error.network": "Netzwerkfehler — bitte erneut versuchen.",
 
     // t-paliad-192 Slice 11b — Admin rule-editor UI.
-    "nav.admin.rules": "Regeln verwalten",
-    "nav.admin.rules_export": "Regel-Migrations",
-    "admin.card.rules.title": "Regeln verwalten",
-    "admin.card.rules.desc": "Fristen-Regeln anlegen, bearbeiten, publishen. Audit-Log, Preview, Migration-Export.",
+    // t-paliad-262 Slice A — "Regel" relabelled as "Verfahrensschritt".
+    // The admin URL `/admin/rules` and i18n key prefix `admin.rules.*` stay
+    // (URL change is Slice B.6); the visible labels rename. Canonical
+    // `admin.procedural_events.*` aliases live after the EN block — they
+    // pin the contract for when .tsx files rebind in Slice B (B.5).
+    "nav.admin.rules": "Verfahrensschritte verwalten",
+    "nav.admin.rules_export": "Verfahrensschritt-Migrations",
+    "admin.card.rules.title": "Verfahrensschritte verwalten",
+    "admin.card.rules.desc": "Verfahrensschritte anlegen, bearbeiten, publishen. Audit-Log, Preview, Migration-Export.",
 
-    "admin.rules.list.title": "Regeln verwalten — Paliad",
-    "admin.rules.list.heading": "Regeln verwalten",
-    "admin.rules.list.subtitle": "Fristen-Regeln anlegen, bearbeiten und freigeben. Lifecycle: draft → published → archived.",
-    "admin.rules.list.new": "+ Neue Regel",
+    "admin.rules.list.title": "Verfahrensschritte verwalten — Paliad",
+    "admin.rules.list.heading": "Verfahrensschritte verwalten",
+    "admin.rules.list.subtitle": "Verfahrensschritte (Schriftsätze, Anhörungen, Entscheidungen, …) anlegen, bearbeiten und freigeben. Lifecycle: draft → published → archived.",
+    "admin.rules.list.new": "+ Neuer Verfahrensschritt",
     "admin.rules.list.export": "Migrations exportieren",
     "admin.rules.tab.rules": "Regeln",
     "admin.rules.tab.orphans": "Orphans",
     "admin.rules.loading": "Lade…",
-    "admin.rules.empty": "Keine Regeln für die gewählten Filter.",
-    "admin.rules.error.load": "Konnte Regeln nicht laden.",
+    "admin.rules.empty": "Keine Verfahrensschritte für die gewählten Filter.",
+    "admin.rules.error.load": "Konnte Verfahrensschritte nicht laden.",
 
     "admin.rules.filter.proceeding": "Verfahrenstyp",
     "admin.rules.filter.proceeding.any": "Alle",
@@ -2866,7 +2875,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.filter.search": "Suche",
     "admin.rules.filter.search.placeholder": "Name, Submission Code, Rechtsgrundlage…",
 
-    "admin.rules.col.submission_code": "Submission Code / Einreichung-Kennung",
+    "admin.rules.col.submission_code": "Code (Verfahrensschritt)",
     "admin.rules.col.legal_citation": "Rechtsgrundlage",
     "admin.rules.col.name": "Name",
     "admin.rules.col.proceeding": "Verfahrenstyp",
@@ -2896,8 +2905,8 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.orphans.reason.manual_unbound": "Manuell entkoppelt",
     "admin.rules.orphans.resolved": "Orphan zugeordnet.",
 
-    "admin.rules.modal.new.title": "Neue Regel anlegen",
-    "admin.rules.modal.new.body": "Eine neue Regel wird als Draft angelegt. Bitte einen Grund (mind. 10 Zeichen) angeben — dieser wandert ins Audit-Log und beim Export in die Migration.",
+    "admin.rules.modal.new.title": "Neuen Verfahrensschritt anlegen",
+    "admin.rules.modal.new.body": "Ein neuer Verfahrensschritt wird als Draft angelegt. Bitte einen Grund (mind. 10 Zeichen) angeben — dieser wandert ins Audit-Log und beim Export in die Migration.",
     "admin.rules.modal.resolve.title": "Orphan zuordnen",
     "admin.rules.modal.resolve.body": "Bitte einen Grund (mind. 10 Zeichen) angeben. Die Regel-Verknüpfung wird sofort auf der Deadline gespeichert.",
     "admin.rules.modal.reason": "Grund",
@@ -2912,12 +2921,12 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.modal.error.create": "Anlegen fehlgeschlagen.",
     "admin.rules.modal.error.resolve": "Zuordnung fehlgeschlagen.",
 
-    "admin.rules.edit.title": "Regel bearbeiten — Paliad",
-    "admin.rules.edit.heading.loading": "Regel laden…",
-    "admin.rules.edit.breadcrumb": "← Regeln verwalten",
-    "admin.rules.edit.error.bad_id": "Ungültige Regel-ID in der URL.",
-    "admin.rules.edit.error.not_found": "Regel nicht gefunden.",
-    "admin.rules.edit.error.load": "Konnte Regel nicht laden.",
+    "admin.rules.edit.title": "Verfahrensschritt bearbeiten — Paliad",
+    "admin.rules.edit.heading.loading": "Verfahrensschritt laden…",
+    "admin.rules.edit.breadcrumb": "← Verfahrensschritte verwalten",
+    "admin.rules.edit.error.bad_id": "Ungültige Verfahrensschritt-ID in der URL.",
+    "admin.rules.edit.error.not_found": "Verfahrensschritt nicht gefunden.",
+    "admin.rules.edit.error.load": "Konnte Verfahrensschritt nicht laden.",
 
     "admin.rules.edit.section.identity": "Identität",
     "admin.rules.edit.section.proceeding": "Verfahren & Trigger",
@@ -2930,14 +2939,14 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.edit.field.name": "Name (DE)",
     "admin.rules.edit.field.name_en": "Name (EN)",
     "admin.rules.edit.field.description": "Beschreibung",
-    "admin.rules.edit.field.submission_code": "Submission Code / Einreichung-Kennung",
+    "admin.rules.edit.field.submission_code": "Code (Verfahrensschritt-Identifikator)",
     "admin.rules.edit.field.rule_code": "Rechtsgrundlage (Kurzform)",
     "admin.rules.edit.field.legal_source": "Rechtsgrundlage (Langform)",
     "admin.rules.edit.field.proceeding": "Verfahrenstyp",
     "admin.rules.edit.field.proceeding.none": "—",
     "admin.rules.edit.field.trigger": "Trigger-Ereignis",
     "admin.rules.edit.field.trigger.none": "—",
-    "admin.rules.edit.field.parent": "Parent-Regel (UUID)",
+    "admin.rules.edit.field.parent": "Übergeordneter Verfahrensschritt (UUID)",
     "admin.rules.edit.field.concept": "Konzept (UUID)",
     "admin.rules.edit.field.sequence_order": "Reihenfolge",
     "admin.rules.edit.field.duration_value": "Dauer",
@@ -2949,7 +2958,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.edit.field.alt_rule_code": "Alt-Rule-Code",
     "admin.rules.edit.field.anchor_alt": "Alt-Anchor",
     "admin.rules.edit.field.primary_party": "Primäre Partei",
-    "admin.rules.edit.field.event_type": "Event-Typ (frei)",
+    "admin.rules.edit.field.event_type": "Art des Verfahrensschritts (filing / hearing / decision / order)",
     "admin.rules.edit.field.deadline_notes": "Hinweise (DE)",
     "admin.rules.edit.field.deadline_notes_en": "Hinweise (EN)",
     "admin.rules.edit.field.priority": "Priorität",
@@ -3035,7 +3044,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // /admin/audit-log to the same component.
     "date_range.button.label": "Zeitraum",
     "date_range.button.label.custom_range": "Von {from} bis {to}",
-    "date_range.horizon.next_1d":  "Morgen",
+    "date_range.horizon.next_1d":  "Heute",
     "date_range.horizon.next_7d":  "Nächste 7 Tage",
     "date_range.horizon.next_14d": "Nächste 14 Tage",
     "date_range.horizon.next_30d": "Nächste 30 Tage",
@@ -3060,6 +3069,21 @@ const translations: Record<Lang, Record<string, string>> = {
     "date_range.custom.invalid":            "Bis-Datum muss nach Von-Datum liegen.",
     "date_range.custom.invalid_format":     "Datum nicht erkannt (Format JJJJ-MM-TT).",
     "date_range.custom.invalid_missing":    "Bitte beide Datumsfelder ausfüllen.",
+
+    // t-paliad-262 Slice A — canonical `procedural_event` i18n contract.
+    // The values are identical to the legacy `admin.rules.*` keys above —
+    // these aliases let .tsx files rebind in Slice B (B.5) without
+    // touching DE/EN strings then. Adding/changing values? Update BOTH
+    // sides.
+    "admin.procedural_events.list.title":     "Verfahrensschritte verwalten — Paliad",
+    "admin.procedural_events.list.heading":   "Verfahrensschritte verwalten",
+    "admin.procedural_events.list.new":       "+ Neuer Verfahrensschritt",
+    "admin.procedural_events.col.code":       "Code (Verfahrensschritt)",
+    "admin.procedural_events.edit.title":     "Verfahrensschritt bearbeiten — Paliad",
+    "admin.procedural_events.edit.breadcrumb":"← Verfahrensschritte verwalten",
+    "admin.procedural_events.edit.field.code":         "Code (Verfahrensschritt-Identifikator)",
+    "admin.procedural_events.edit.field.event_kind":   "Art des Verfahrensschritts (filing / hearing / decision / order)",
+    "admin.procedural_events.edit.field.parent":       "Übergeordneter Verfahrensschritt (UUID)",
   },
 
   en: {
@@ -4143,6 +4167,10 @@ const translations: Record<Lang, Record<string, string>> = {
     "event.title.appointment_updated": "Appointment updated",
     "event.title.appointment_deleted": "Appointment deleted",
     "event.title.appointment_project_changed": "Appointment moved",
+    // Umbrella audit kind + admin churn surfaced by the FilterBar
+    // project_event_kind chip cluster (KnownProjectEventKinds).
+    "event.title.approval_decided": "Approval decided",
+    "event.title.member_role_changed": "Team role changed",
     // 4-eye approval lifecycle (t-paliad-138).
     "event.title.deadline_approval_requested": "Approval requested",
     "event.title.deadline_approval_approved": "Approval granted",
@@ -5854,21 +5882,22 @@ const translations: Record<Lang, Record<string, string>> = {
     "views.bar.save.error.network": "Network error — please retry.",
 
     // t-paliad-192 Slice 11b — Admin rule-editor UI.
-    "nav.admin.rules": "Manage Rules",
-    "nav.admin.rules_export": "Rule Migrations",
-    "admin.card.rules.title": "Manage Rules",
-    "admin.card.rules.desc": "Author, edit and publish deadline rules. Audit log, preview, migration export.",
+    // t-paliad-262 Slice A — "Rule" relabelled as "Procedural event".
+    "nav.admin.rules": "Manage procedural events",
+    "nav.admin.rules_export": "Procedural-event migrations",
+    "admin.card.rules.title": "Manage procedural events",
+    "admin.card.rules.desc": "Author, edit and publish procedural-event templates. Audit log, preview, migration export.",
 
-    "admin.rules.list.title": "Manage Rules — Paliad",
-    "admin.rules.list.heading": "Manage Rules",
-    "admin.rules.list.subtitle": "Author, edit and publish deadline rules. Lifecycle: draft → published → archived.",
-    "admin.rules.list.new": "+ New Rule",
+    "admin.rules.list.title": "Manage procedural events — Paliad",
+    "admin.rules.list.heading": "Manage procedural events",
+    "admin.rules.list.subtitle": "Author, edit and publish procedural events (filings, hearings, decisions, …). Lifecycle: draft → published → archived.",
+    "admin.rules.list.new": "+ New procedural event",
     "admin.rules.list.export": "Export migrations",
     "admin.rules.tab.rules": "Rules",
     "admin.rules.tab.orphans": "Orphans",
     "admin.rules.loading": "Loading…",
-    "admin.rules.empty": "No rules for the chosen filters.",
-    "admin.rules.error.load": "Could not load rules.",
+    "admin.rules.empty": "No procedural events for the chosen filters.",
+    "admin.rules.error.load": "Could not load procedural events.",
 
     "admin.rules.filter.proceeding": "Proceeding type",
     "admin.rules.filter.proceeding.any": "Any",
@@ -5879,7 +5908,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.filter.search": "Search",
     "admin.rules.filter.search.placeholder": "Name, submission code, legal citation…",
 
-    "admin.rules.col.submission_code": "Submission code",
+    "admin.rules.col.submission_code": "Code (procedural event)",
     "admin.rules.col.legal_citation": "Legal citation",
     "admin.rules.col.name": "Name",
     "admin.rules.col.proceeding": "Proceeding type",
@@ -5909,8 +5938,8 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.orphans.reason.manual_unbound": "Manually unbound",
     "admin.rules.orphans.resolved": "Orphan resolved.",
 
-    "admin.rules.modal.new.title": "Create new rule",
-    "admin.rules.modal.new.body": "A new rule will be created as a draft. Please supply a reason (≥10 chars) — recorded in the audit log and exported into the migration file.",
+    "admin.rules.modal.new.title": "Create new procedural event",
+    "admin.rules.modal.new.body": "A new procedural event will be created as a draft. Please supply a reason (≥10 chars) — recorded in the audit log and exported into the migration file.",
     "admin.rules.modal.resolve.title": "Resolve orphan",
     "admin.rules.modal.resolve.body": "Please supply a reason (≥10 chars). The rule binding is persisted immediately on the deadline.",
     "admin.rules.modal.reason": "Reason",
@@ -5925,12 +5954,12 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.modal.error.create": "Creation failed.",
     "admin.rules.modal.error.resolve": "Resolution failed.",
 
-    "admin.rules.edit.title": "Edit Rule — Paliad",
-    "admin.rules.edit.heading.loading": "Loading rule…",
-    "admin.rules.edit.breadcrumb": "← Manage Rules",
-    "admin.rules.edit.error.bad_id": "Invalid rule id in URL.",
-    "admin.rules.edit.error.not_found": "Rule not found.",
-    "admin.rules.edit.error.load": "Could not load rule.",
+    "admin.rules.edit.title": "Edit procedural event — Paliad",
+    "admin.rules.edit.heading.loading": "Loading procedural event…",
+    "admin.rules.edit.breadcrumb": "← Manage procedural events",
+    "admin.rules.edit.error.bad_id": "Invalid procedural-event id in URL.",
+    "admin.rules.edit.error.not_found": "Procedural event not found.",
+    "admin.rules.edit.error.load": "Could not load procedural event.",
 
     "admin.rules.edit.section.identity": "Identity",
     "admin.rules.edit.section.proceeding": "Proceeding & Trigger",
@@ -5943,14 +5972,14 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.edit.field.name": "Name (DE)",
     "admin.rules.edit.field.name_en": "Name (EN)",
     "admin.rules.edit.field.description": "Description",
-    "admin.rules.edit.field.submission_code": "Submission code",
+    "admin.rules.edit.field.submission_code": "Code (procedural-event identifier)",
     "admin.rules.edit.field.rule_code": "Legal citation (short form)",
     "admin.rules.edit.field.legal_source": "Legal citation (long form)",
     "admin.rules.edit.field.proceeding": "Proceeding type",
     "admin.rules.edit.field.proceeding.none": "—",
     "admin.rules.edit.field.trigger": "Trigger event",
     "admin.rules.edit.field.trigger.none": "—",
-    "admin.rules.edit.field.parent": "Parent rule (UUID)",
+    "admin.rules.edit.field.parent": "Parent procedural event (UUID)",
     "admin.rules.edit.field.concept": "Concept (UUID)",
     "admin.rules.edit.field.sequence_order": "Order",
     "admin.rules.edit.field.duration_value": "Duration",
@@ -5962,7 +5991,7 @@ const translations: Record<Lang, Record<string, string>> = {
     "admin.rules.edit.field.alt_rule_code": "Alt rule code",
     "admin.rules.edit.field.anchor_alt": "Alt anchor",
     "admin.rules.edit.field.primary_party": "Primary party",
-    "admin.rules.edit.field.event_type": "Event type (free)",
+    "admin.rules.edit.field.event_type": "Procedural-event kind (filing / hearing / decision / order)",
     "admin.rules.edit.field.deadline_notes": "Notes (DE)",
     "admin.rules.edit.field.deadline_notes_en": "Notes (EN)",
     "admin.rules.edit.field.priority": "Priority",
@@ -6045,7 +6074,7 @@ const translations: Record<Lang, Record<string, string>> = {
     // Date-range picker (t-paliad-248). See DE block above for details.
     "date_range.button.label": "Time range",
     "date_range.button.label.custom_range": "From {from} to {to}",
-    "date_range.horizon.next_1d":  "Tomorrow",
+    "date_range.horizon.next_1d":  "Today",
     "date_range.horizon.next_7d":  "Next 7 days",
     "date_range.horizon.next_14d": "Next 14 days",
     "date_range.horizon.next_30d": "Next 30 days",
@@ -6070,6 +6099,19 @@ const translations: Record<Lang, Record<string, string>> = {
     "date_range.custom.invalid":            "End date must be strictly after start date.",
     "date_range.custom.invalid_format":     "Date not recognised (format YYYY-MM-DD).",
     "date_range.custom.invalid_missing":    "Please fill in both date fields.",
+
+    // t-paliad-262 Slice A — canonical `procedural_event` i18n contract.
+    // Mirrors the DE block; values identical to the legacy
+    // `admin.rules.*` keys. Adding/changing values? Update BOTH sides.
+    "admin.procedural_events.list.title":     "Manage procedural events — Paliad",
+    "admin.procedural_events.list.heading":   "Manage procedural events",
+    "admin.procedural_events.list.new":       "+ New procedural event",
+    "admin.procedural_events.col.code":       "Code (procedural event)",
+    "admin.procedural_events.edit.title":     "Edit procedural event — Paliad",
+    "admin.procedural_events.edit.breadcrumb":"← Manage procedural events",
+    "admin.procedural_events.edit.field.code":         "Code (procedural-event identifier)",
+    "admin.procedural_events.edit.field.event_kind":   "Procedural-event kind (filing / hearing / decision / order)",
+    "admin.procedural_events.edit.field.parent":       "Parent procedural event (UUID)",
   },
 };
 

frontend/src/client/submission-draft.ts

@@ -155,14 +155,29 @@ const VARIABLE_LABELS: Record<string, VariableLabel> = {
   "parties.defendant.representative":{ de: "Beklagten-Vertreter",         en: "Defendant representative" },
   "parties.other.name":              { de: "Weitere Partei",              en: "Other party" },
   "parties.other.representative":    { de: "Weitere-Partei-Vertreter",    en: "Other party representative" },
-  "rule.submission_code":            { de: "Schriftsatz-Code",            en: "Submission code" },
-  "rule.name":                       { de: "Schriftsatz",                 en: "Submission" },
-  "rule.name_de":                    { de: "Schriftsatz (DE)",            en: "Submission (DE)" },
-  "rule.name_en":                    { de: "Schriftsatz (EN)",            en: "Submission (EN)" },
-  "rule.legal_source":               { de: "Rechtsgrundlage (Code)",      en: "Legal source (code)" },
-  "rule.legal_source_pretty":        { de: "Rechtsgrundlage",             en: "Legal source" },
-  "rule.primary_party":              { de: "Partei (typisch)",            en: "Primary party" },
-  "rule.event_type":                 { de: "Schriftsatz-Typ",             en: "Event type" },
+  // Procedural-event namespace (t-paliad-262 Slice A, design doc
+  // docs/design-procedural-events-model-2026-05-25.md). The canonical
+  // placeholder names are below; the `rule.*` aliases that follow are
+  // @deprecated but kept forever per m's Q7 lock — existing Word
+  // templates and saved drafts authored with the old names keep
+  // merging identically.
+  "procedural_event.code":               { de: "Code (Verfahrensschritt)",    en: "Code (procedural event)" },
+  "procedural_event.name":               { de: "Verfahrensschritt",           en: "Procedural event" },
+  "procedural_event.name_de":            { de: "Verfahrensschritt (DE)",      en: "Procedural event (DE)" },
+  "procedural_event.name_en":            { de: "Verfahrensschritt (EN)",      en: "Procedural event (EN)" },
+  "procedural_event.legal_source":       { de: "Rechtsgrundlage (Code)",      en: "Legal source (code)" },
+  "procedural_event.legal_source_pretty":{ de: "Rechtsgrundlage",             en: "Legal source" },
+  "procedural_event.primary_party":      { de: "Partei (typisch)",            en: "Primary party" },
+  "procedural_event.event_kind":         { de: "Art des Verfahrensschritts",  en: "Procedural-event kind" },
+  // Legacy aliases — @deprecated, kept forever (m/paliad#93 Q7).
+  "rule.submission_code":            { de: "Schriftsatz-Code (legacy)",      en: "Submission code (legacy)" },
+  "rule.name":                       { de: "Schriftsatz (legacy)",           en: "Submission (legacy)" },
+  "rule.name_de":                    { de: "Schriftsatz (DE, legacy)",       en: "Submission (DE, legacy)" },
+  "rule.name_en":                    { de: "Schriftsatz (EN, legacy)",       en: "Submission (EN, legacy)" },
+  "rule.legal_source":               { de: "Rechtsgrundlage (Code, legacy)", en: "Legal source (code, legacy)" },
+  "rule.legal_source_pretty":        { de: "Rechtsgrundlage (legacy)",       en: "Legal source (legacy)" },
+  "rule.primary_party":              { de: "Partei (typisch, legacy)",       en: "Primary party (legacy)" },
+  "rule.event_type":                 { de: "Schriftsatz-Typ (legacy)",       en: "Event type (legacy)" },
   "deadline.due_date":               { de: "Frist (ISO)",                 en: "Deadline (ISO)" },
   "deadline.due_date_long_de":       { de: "Frist (DE lang)",             en: "Deadline (DE long)" },
   "deadline.due_date_long_en":       { de: "Frist (EN lang)",             en: "Deadline (EN long)" },
@@ -174,14 +189,14 @@ const VARIABLE_LABELS: Record<string, VariableLabel> = {
 
 const VARIABLE_GROUPS: VariableGroup[] = [
   {
-    id: "rule",
-    label: { de: "Schriftsatz", en: "Submission" },
+    id: "procedural_event",
+    label: { de: "Verfahrensschritt", en: "Procedural event" },
     keys: [
-      "rule.name",
-      "rule.legal_source_pretty",
-      "rule.primary_party",
-      "rule.event_type",
-      "rule.submission_code",
+      "procedural_event.name",
+      "procedural_event.legal_source_pretty",
+      "procedural_event.primary_party",
+      "procedural_event.event_kind",
+      "procedural_event.code",
     ],
   },
   {
@@ -595,10 +610,25 @@ function paintVariables(): void {
 
   host.querySelectorAll<HTMLInputElement>(".submission-draft-var-input").forEach((inp) => {
     inp.addEventListener("input", () => onVarChange(inp));
+    // t-paliad-274 (B) — focus into a sidebar field highlights every
+    // matching .draft-var span in the preview (sticky while focused,
+    // clears on blur). Survives autosave repaints because paintVariables
+    // is called by flushAutosave and we re-bind every render.
+    inp.addEventListener("focusin", () => onVarFocusEnter(inp.dataset.var ?? ""));
+    inp.addEventListener("focusout", () => onVarFocusLeave(inp.dataset.var ?? ""));
   });
   host.querySelectorAll<HTMLButtonElement>(".submission-draft-var-reset").forEach((btn) => {
     btn.addEventListener("click", () => onVarReset(btn.dataset.resetKey ?? ""));
   });
+  // After repaint, re-apply the active highlight if a field is still
+  // focused (paintVariables runs after autosave; the same input regains
+  // focus via restoreVarFocus and would otherwise emit focusin too
+  // late for our handler — re-apply explicitly).
+  const active = document.activeElement;
+  if (isVarField(active)) {
+    const key = active.dataset.var;
+    if (key) applyPreviewActiveHighlight(key);
+  }
 }
 
 function paintPreview(): void {
@@ -606,6 +636,16 @@ function paintPreview(): void {
   if (!host || !state.view) return;
   host.innerHTML = state.view.preview_html ?? "";
   wireDraftVars(host);
+  // t-paliad-274 (B) — preview HTML was just blown away by innerHTML,
+  // so any prior --active classes are gone. Re-apply for whichever
+  // sidebar field is currently focused (typing in a field triggers an
+  // autosave round-trip that ends in paintPreview, and the user should
+  // see the highlight stay put across that cycle).
+  const active = document.activeElement;
+  if (isVarField(active)) {
+    const key = active.dataset.var;
+    if (key) applyPreviewActiveHighlight(key);
+  }
 }
 
 // t-paliad-261 (B) — click a substituted variable in the preview to
@@ -680,6 +720,48 @@ function onDraftVarClick(key: string, ev: Event): void {
   flashVarRow(input);
 }
 
+// t-paliad-274 (B) — sidebar-field-focus → preview-occurrence highlight.
+// Reverse direction of the click-to-jump from #92: when the user focuses
+// any .submission-draft-var-input, every matching .draft-var span in the
+// preview gets the --active modifier; on blur (or focus shift to a
+// different field), the previous key's highlights clear and the new
+// key's apply. Sticky-while-focused, not a one-shot flash — the lawyer
+// can scan the preview for "where does this variable land in my prose?"
+// while the field stays focused.
+function onVarFocusEnter(key: string): void {
+  if (!key) return;
+  // Clear any leftover highlight before applying the new one — covers
+  // the focus-shift-without-blur case (Tab between fields).
+  clearPreviewActiveHighlight();
+  applyPreviewActiveHighlight(key);
+}
+
+function onVarFocusLeave(_key: string): void {
+  // We don't need the key here — if focus moves to a different sidebar
+  // input, that input's focusin will re-call apply with the new key
+  // (after our clearPreviewActiveHighlight). If focus leaves the sidebar
+  // entirely, this clears.
+  clearPreviewActiveHighlight();
+}
+
+function applyPreviewActiveHighlight(key: string): void {
+  const host = document.getElementById("submission-draft-preview");
+  if (!host) return;
+  host.querySelectorAll<HTMLElement>(
+    `.draft-var[data-var="${cssEscape(key)}"]`,
+  ).forEach((el) => {
+    el.classList.add("draft-var--active");
+  });
+}
+
+function clearPreviewActiveHighlight(): void {
+  const host = document.getElementById("submission-draft-preview");
+  if (!host) return;
+  host.querySelectorAll<HTMLElement>(".draft-var--active").forEach((el) => {
+    el.classList.remove("draft-var--active");
+  });
+}
+
 function flashVarRow(input: HTMLElement): void {
   const row = input.closest<HTMLElement>(".submission-draft-var-row");
   if (!row) return;

frontend/src/i18n-keys.ts

@@ -290,6 +290,15 @@ export type I18nKey =
   | "admin.partner_units.new.heading"
   | "admin.partner_units.subtitle"
   | "admin.partner_units.title"
+  | "admin.procedural_events.col.code"
+  | "admin.procedural_events.edit.breadcrumb"
+  | "admin.procedural_events.edit.field.code"
+  | "admin.procedural_events.edit.field.event_kind"
+  | "admin.procedural_events.edit.field.parent"
+  | "admin.procedural_events.edit.title"
+  | "admin.procedural_events.list.heading"
+  | "admin.procedural_events.list.new"
+  | "admin.procedural_events.list.title"
   | "admin.rules.col.legal_citation"
   | "admin.rules.col.lifecycle"
   | "admin.rules.col.modified"
@@ -1604,6 +1613,7 @@ export type I18nKey =
   | "event.title.appointment_deleted"
   | "event.title.appointment_project_changed"
   | "event.title.appointment_updated"
+  | "event.title.approval_decided"
   | "event.title.checklist_created"
   | "event.title.checklist_deleted"
   | "event.title.checklist_linked"
@@ -1622,6 +1632,7 @@ export type I18nKey =
   | "event.title.deadline_reopened"
   | "event.title.deadline_updated"
   | "event.title.deadlines_imported"
+  | "event.title.member_role_changed"
   | "event.title.note_created"
   | "event.title.our_side_changed"
   | "event.title.project_archived"

frontend/src/styles/global.css

@@ -5880,16 +5880,27 @@ dialog.modal::backdrop {
     font-style: italic;
 }
 
-/* t-paliad-261 (B) — substituted variables in the preview are wrapped
-   in <span class="draft-var" data-var="…"> by the Go HTML renderer.
-   .draft-var by itself shows a subtle dotted underline so the lawyer
-   can SEE which text was filled in from a variable. .draft-var--has-input
-   (added client-side when a matching sidebar input exists) layers on
-   the clickable affordance — pointer cursor + brighter hover background.
-   Non-matching draft-vars (derived variables not exposed in the
-   sidebar) stay visually distinct but non-interactive. */
+/* t-paliad-261 / t-paliad-274 — substituted variables in the preview
+   are wrapped in <span class="draft-var" data-var="…"> by the Go HTML
+   renderer for BOTH filled values and missing-marker text. The lawyer
+   can click any wrapped span and jump to the matching sidebar input;
+   conversely, focusing a sidebar input lights up every matching span in
+   the preview via .draft-var--active.
+
+   Visual contract:
+     .draft-var                — invisible by default (prose stays clean
+                                  per t-paliad-274 m's request).
+     .draft-var--has-input     — pointer cursor; dotted underline on
+                                  hover so the click affordance reveals
+                                  itself, plus a brighter lime tint.
+     .draft-var--active        — sticky lime highlight applied while the
+                                  matching sidebar input is focused
+                                  (t-paliad-274 reverse direction).
+     [KEIN WERT: …] / [NO VALUE: …] markers carry their own warning
+     style via .submission-draft-var-marker on the sidebar hint; in the
+     preview they read as obvious gap text, so .draft-var itself doesn't
+     need an always-on visual to flag them. */
 .draft-var {
-    background-color: rgba(198, 244, 28, 0.12);
     border-radius: 2px;
     padding: 0 2px;
     box-decoration-break: clone;
@@ -5904,9 +5915,21 @@ dialog.modal::backdrop {
 .draft-var--has-input:hover,
 .draft-var--has-input:focus-visible {
     background-color: rgba(198, 244, 28, 0.45);
+    text-decoration: underline dotted rgba(198, 244, 28, 0.85);
+    text-underline-offset: 2px;
     outline: none;
 }
 
+/* t-paliad-274 (B) — sticky highlight while the matching sidebar input
+   is focused. Brighter than the hover tint so the user's eye lands on
+   every occurrence at once when they click into a field. Applies to ALL
+   .draft-var spans for that data-var, not just one. */
+.draft-var--active,
+.draft-var--has-input.draft-var--active {
+    background-color: rgba(198, 244, 28, 0.55);
+    box-shadow: 0 0 0 1px rgba(198, 244, 28, 0.85);
+}
+
 /* t-paliad-261 (B) — brief lime flash on the sidebar row after a
    click-jump from the preview, so the user's eye lands on the right
    input even after the smooth-scroll motion. Animation restarts on
@@ -7690,11 +7713,16 @@ dialog.modal::backdrop {
 /* t-paliad-258 — Auto/Custom Rule editor (m/paliad#89).
    Replaces the t-paliad-251 catalog dropdown + sort selector with a
    binary toggle:
-     .rule-mode-auto   — read-only display, lime-tint pill + label.
+     .rule-mode-auto   — read-only display, lime-tint chip + label.
      .rule-mode-custom — free-text input, full-width.
-   Toggle button reuses .btn-link-action for the inline link styling. */
+   Toggle button reuses .btn-link-action for the inline link styling.
+   t-paliad-267 / m/paliad#98 — the auto display is now a block-level
+   row of its own so the resolved rule name sits on its own line
+   beneath the toggle, not crammed beside it. Width is content-sized
+   (align-self:flex-start within form-field's block flow keeps the
+   chip from spanning the whole form column gratuitously). */
 .rule-mode-auto {
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: 0.45rem;
     padding: 0.35rem 0.55rem;
@@ -7702,6 +7730,9 @@ dialog.modal::backdrop {
     border-left: 2px solid var(--color-accent);
     border-radius: var(--radius-sm, 4px);
     min-height: 2rem;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.35rem;
 }
 .rule-auto-text {
     color: var(--color-text);
@@ -15174,8 +15205,10 @@ dialog.quick-add-sheet::backdrop {
  * Floating trigger at bottom-right + slide-out drawer from the
  * right edge. Hidden by default; revealed by paliadin-widget.ts
  * after /api/me confirms the caller is the Paliadin owner.
- * Mobile (≤640px): drawer goes full-screen; trigger sits above
- * the bottom-nav slots.
+ * Mobile (≤640px): drawer goes full-screen.
+ * Phone breakpoint (≤767px, matches .bottom-nav): trigger lifts
+ * above the bottom-nav slots so it doesn't collide with the
+ * navbar on PWA standalone (t-paliad-269).
  */
 
 .paliadin-widget-trigger {
@@ -15262,8 +15295,20 @@ dialog.quick-add-sheet::backdrop {
     .paliadin-widget-drawer {
         width: 100vw;
     }
+}
+
+/* Lift the trigger above the BottomNav at the same breakpoint where
+   the nav appears (<768px in global.css ".bottom-nav"). The navbar is
+   --bottom-nav-height tall plus the iOS safe-area inset; 16px gap
+   keeps the bubble clear without crowding the nav slots. Bubble sits
+   at the right edge so the center FAB-circle (margin-top: -10px) is
+   not in its column.
+   t-paliad-269: previously this rule was scoped to <=640px, but the
+   .bottom-nav shows at <=767px, leaving phones in landscape and small
+   tablets with an overlapping bubble. */
+@media (max-width: 767px) {
     .paliadin-widget-trigger {
-        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+        bottom: calc(var(--bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px));
     }
 }
 
@@ -17588,9 +17633,10 @@ dialog.quick-add-sheet::backdrop {
 }
 
 .date-range-panel {
-  /* Inherits .multi-panel positioning + border + shadow. Widen it so
-     the symmetric fan + the custom editor have room to breathe. */
-  width: 32rem;
+  /* Inherits .multi-panel positioning + border + shadow. Sized so the
+     3-column grid holds the widest chip text ("Ganze Vergangenheit")
+     without wrapping while staying within the viewport on tablets. */
+  width: 34rem;
   max-width: calc(100vw - 1rem);
   top: 100%;
   left: 0;
@@ -17598,88 +17644,54 @@ dialog.quick-add-sheet::backdrop {
   gap: 0.75rem;
 }
 
-.date-range-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  align-items: stretch;
+.date-range-grid {
+  /* Past / NOW / Future as three equal vertical columns. Each column
+     is a top-aligned chip stack so closeness-to-NOW (closest at top,
+     farthest at bottom) reads spatially. */
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.75rem;
+  align-items: start;
 }
 
-.date-range-fan {
+.date-range-col {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  align-content: flex-start;
-  flex: 1 1 12rem;
+  flex-direction: column;
+  gap: 0.35rem;
   min-width: 0;
 }
 
-.date-range-fan--past {
-  /* Past fan: outermost chip (Ganze Vergangenheit) leftmost. */
-  justify-content: flex-end;
+.date-range-col--now {
+  align-items: stretch;
 }
 
-.date-range-fan--next {
-  /* Future fan: innermost chip (Morgen / next_1d) leftmost. */
-  justify-content: flex-start;
-}
-
-.date-range-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding: 0 0.25rem;
-}
-
-.date-range-center-btn {
-  appearance: none;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.1rem;
-  background: var(--color-surface-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 0.6rem;
-  min-width: 4.5rem;
-  padding: 0.55rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text);
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-}
-.date-range-center-btn:hover {
-  background: var(--color-overlay-subtle);
-  border-color: var(--color-accent-light);
-}
-.date-range-center-btn:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-.date-range-center-btn--active {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-accent-dark);
-}
-
-.date-range-center-glyph {
-  font-size: 1.4rem;
-  line-height: 1;
-}
-
-.date-range-center-label {
+.date-range-col-heading {
   font-size: 0.7rem;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
+  color: var(--color-text-muted, #71717a);
+  text-align: center;
+  padding-bottom: 0.15rem;
+}
+
+.date-range-col-heading--glyph {
+  font-size: 1.3rem;
+  line-height: 1;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-text-muted, #71717a);
 }
 
 .date-range-chip {
-  /* .agenda-chip provides bg/border/radius/typography; this modifier
-     only tightens horizontal padding so more chips fit per row. */
-  padding: 0.3rem 0.65rem;
+  /* .agenda-chip provides bg/border/radius/typography; in the
+     3-column stack each chip fills its column so the closeness-to-NOW
+     ordering reads as a single vertical column rather than a ragged
+     row. */
+  padding: 0.35rem 0.65rem;
   font-size: 0.8rem;
+  width: 100%;
+  text-align: center;
 }
 
 .date-range-chip--custom {
@@ -17766,17 +17778,14 @@ dialog.quick-add-sheet::backdrop {
   color: var(--status-red-fg, #b91c1c);
 }
 
-/* Mobile: stack past / centre / next vertically so each fan gets
-   the full popover width. */
+/* Mobile: stack the 3 columns vertically (one column per row),
+   preserving the closeness-to-NOW sort within each column. */
 @media (max-width: 540px) {
   .date-range-panel {
     width: calc(100vw - 1rem);
   }
-  .date-range-row {
-    flex-direction: column;
-  }
-  .date-range-fan--past,
-  .date-range-fan--next {
-    justify-content: flex-start;
+  .date-range-grid {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
   }
 }

internal/db/migrations/125_cross_cutting_filter_legal_source.up.sql

@@ -55,8 +55,6 @@ INSERT INTO paliad.deadline_rules (
     name_en,
     primary_party,
     event_type,
-    is_mandatory,
-    is_optional,
     is_court_set,
     is_spawn,
     duration_value,
@@ -70,7 +68,6 @@ INSERT INTO paliad.deadline_rules (
     deadline_notes_en,
     legal_source,
     condition_expr,
-    condition_flag,
     sequence_order,
     is_active,
     priority,
@@ -90,8 +87,6 @@ SELECT
     'Petition for re-establishment of rights (UPC R.320)',
     NULL::text,
     NULL::text,
-    true,
-    false,
     false,
     false,
     2,
@@ -105,7 +100,6 @@ SELECT
     'Period is 2 months from removal of the obstacle (UPC R.320 RoP). Latest 12 months after expiry of the missed deadline.',
     'UPC.RoP.320',
     NULL::jsonb,
-    NULL::text[],
     1207,
     true,
     'mandatory',

internal/services/submission_merge_test.go

@@ -327,6 +327,40 @@ func TestRenderHTML_WrapsMissingMarker(t *testing.T) {
 	}
 }
 
+// TestRenderHTML_WrapsOverriddenValueSameAsResolved is the t-paliad-274
+// regression: m's report on m/paliad#106 was that "When filled, the link
+// disappears". The preview HTML must wrap an override value with the
+// same <span class="draft-var"> as it would an unfilled placeholder, so
+// the click-jump from preview→sidebar persists after the user types a
+// value. There is no distinction at the renderer level between a value
+// that came from the resolved bag (project / parties / deadline lookups)
+// and a value the lawyer typed into the sidebar — both arrive in the
+// same PlaceholderMap and both must be wrapped.
+func TestRenderHTML_WrapsOverriddenValueSameAsResolved(t *testing.T) {
+	doc := `<w:document><w:body>` +
+		`<w:p><w:r><w:t>{{project.case_number}} / {{firm.name}}</w:t></w:r></w:p>` +
+		`</w:body></w:document>`
+	tmpl := minimalMergeDOCX(t, doc)
+	r := NewSubmissionRenderer()
+	// project.case_number is the typed-by-lawyer override.
+	// firm.name is the always-resolved value from the firm bag.
+	html, err := r.RenderHTML(tmpl, PlaceholderMap{
+		"project.case_number": "UPC_CFI_42/2026",
+		"firm.name":           "HLC",
+	}, nil)
+	if err != nil {
+		t.Fatalf("render html: %v", err)
+	}
+	wantOverride := `<span class="draft-var" data-var="project.case_number">UPC_CFI_42/2026</span>`
+	if !strings.Contains(html, wantOverride) {
+		t.Errorf("expected overridden value wrapped in draft-var span (click-jump must persist after fill, t-paliad-274), got %q", html)
+	}
+	wantResolved := `<span class="draft-var" data-var="firm.name">HLC</span>`
+	if !strings.Contains(html, wantResolved) {
+		t.Errorf("expected resolved value still wrapped, got %q", html)
+	}
+}
+
 // TestRender_DocxOutputUnchangedByPreviewWrap asserts the hard rule from
 // t-paliad-261: the .docx export path must NOT carry the preview-only
 // draft-var sentinels or any draft-var span markup. Renders the same

internal/services/submission_vars.go

@@ -6,17 +6,28 @@ package services
 //
 // Variables span six namespaces:
 //
-//	firm.*       process-wide (branding.Name)
-//	user.*       caller's user row
-//	today.*      server time in Europe/Berlin, locale-aware
-//	project.*    paliad.projects + joined proceeding type
-//	parties.*    paliad.parties grouped by role
-//	rule.*       paliad.deadline_rules row keyed by submission_code
-//	deadline.*   next open paliad.deadlines row for (project, rule), if any
+//	firm.*               process-wide (branding.Name)
+//	user.*               caller's user row
+//	today.*              server time in Europe/Berlin, locale-aware
+//	project.*            paliad.projects + joined proceeding type
+//	parties.*            paliad.parties grouped by role
+//	procedural_event.*   paliad.deadline_rules row keyed by submission_code
+//	                     — the "what kind of step in the proceeding"
+//	                     identity (Schriftsatz, Anhörung, Entscheidung,
+//	                     …). See docs/design-procedural-events-model-
+//	                     2026-05-25.md (t-paliad-262 Slice A).
+//	rule.*               legacy alias for procedural_event.*; emitted
+//	                     unconditionally for backward compatibility
+//	                     with Word templates and saved drafts authored
+//	                     before the rename. @deprecated — new templates
+//	                     should use the procedural_event.* form.
+//	deadline.*           next open paliad.deadlines row for
+//	                     (project, procedural_event), if any
 //
 // Locale handling: every long-form date string is computed in both DE
 // and EN; the renderer picks based on the user's lang preference. The
-// rule pretty-printer (legalSourcePretty) also has DE/EN variants.
+// procedural-event pretty-printer (legalSourcePretty) also has DE/EN
+// variants.
 //
 // Visibility: caller passes userID; ProjectService.GetByID enforces
 // paliad.can_see_project — unauthorised callers get the standard
@@ -173,9 +184,12 @@ func (s *SubmissionVarsService) Build(ctx context.Context, in SubmissionVarsCont
 	return out, nil
 }
 
-// loadPublishedRule fetches the deadline_rule that owns the given
-// submission_code. Restricts to lifecycle_state='published' so drafts
-// never end up shaping a real submission.
+// loadPublishedRule fetches the published procedural-event template
+// (paliad.deadline_rules row) keyed by submission_code. Restricts to
+// lifecycle_state='published' so drafts never end up shaping a real
+// submission. Function name retained for Slice A (prose-only); Slice
+// B renames it to loadPublishedProceduralEvent when the Go type is
+// renamed (t-paliad-262 §6).
 func (s *SubmissionVarsService) loadPublishedRule(ctx context.Context, submissionCode string) (*models.DeadlineRule, error) {
 	if submissionCode == "" {
 		return nil, ErrSubmissionRuleNotFound
@@ -346,21 +360,55 @@ func addPartyVars(bag PlaceholderMap, parties []models.Party) {
 	}
 }
 
-// addRuleVars populates rule.* — submission_code, name(_en),
-// legal_source (+ pretty form), primary_party, event_type.
+// addRuleVars populates the procedural-event variable namespace —
+// code, name(_en), legal_source (+ pretty form), primary_party, kind.
+//
+// Two key prefixes are emitted for every value:
+//
+//   - procedural_event.*  — canonical name (t-paliad-262 Slice A,
+//     design docs/design-procedural-events-model-2026-05-25.md).
+//   - rule.*              — legacy alias kept forever (m's call,
+//     issue m/paliad#93 Q7); existing Word templates and saved
+//     submission_drafts authored before the rename keep working.
+//
+// `procedural_event.event_kind` is the canonical key for the
+// procedural-event kind (filing|reply|hearing|decision|order). The
+// legacy `rule.event_type` alias holds the same string. The column
+// itself stays named `event_type` on `paliad.deadline_rules` — Slice
+// A is prose-only; the column-level rename to `event_kind` is Slice B.
+//
+// Function name stays `addRuleVars` to avoid coupling Slice A to the
+// Go-type rename which is Slice B (B.5 sub-slice).
 func addRuleVars(bag PlaceholderMap, r *models.DeadlineRule, lang string) {
-	bag["rule.submission_code"] = derefString(r.SubmissionCode)
+	code := derefString(r.SubmissionCode)
+	var localizedName string
 	if strings.EqualFold(lang, "en") {
-		bag["rule.name"] = r.NameEN
+		localizedName = r.NameEN
 	} else {
-		bag["rule.name"] = r.Name
+		localizedName = r.Name
 	}
+	legalSource := derefString(r.LegalSource)
+	legalSourcePrettyVal := legalSourcePretty(legalSource, lang)
+	primaryParty := derefString(r.PrimaryParty)
+	eventKind := derefString(r.EventType)
+
+	bag["procedural_event.code"] = code
+	bag["procedural_event.name"] = localizedName
+	bag["procedural_event.name_de"] = r.Name
+	bag["procedural_event.name_en"] = r.NameEN
+	bag["procedural_event.legal_source"] = legalSource
+	bag["procedural_event.legal_source_pretty"] = legalSourcePrettyVal
+	bag["procedural_event.primary_party"] = primaryParty
+	bag["procedural_event.event_kind"] = eventKind
+
+	bag["rule.submission_code"] = code
+	bag["rule.name"] = localizedName
 	bag["rule.name_de"] = r.Name
 	bag["rule.name_en"] = r.NameEN
-	bag["rule.legal_source"] = derefString(r.LegalSource)
-	bag["rule.legal_source_pretty"] = legalSourcePretty(derefString(r.LegalSource), lang)
-	bag["rule.primary_party"] = derefString(r.PrimaryParty)
-	bag["rule.event_type"] = derefString(r.EventType)
+	bag["rule.legal_source"] = legalSource
+	bag["rule.legal_source_pretty"] = legalSourcePrettyVal
+	bag["rule.primary_party"] = primaryParty
+	bag["rule.event_type"] = eventKind
 }
 
 // addDeadlineVars populates deadline.* from the next pending row. When

internal/services/submission_vars_aliases_test.go

@@ -0,0 +1,153 @@
+package services
+
+// Regression test for the procedural-event placeholder aliases
+// (t-paliad-262 Slice A, m/paliad#93 Q7).
+//
+// The variable bag emits TWO key prefixes for the procedural-event
+// namespace:
+//
+//   - procedural_event.*  (canonical, post-rename)
+//   - rule.*              (legacy, @deprecated)
+//
+// m's lock: keep the legacy aliases forever so lawyer-authored Word
+// templates and existing paliad.submission_drafts rows that already
+// contain `{{rule.X}}` keep merging correctly.
+//
+// This test pins the contract: every (canonical, legacy) pair must
+// resolve to the same string in the placeholder map, for every value
+// of (lang, present-vs-NULL columns). Removing the legacy aliases —
+// or letting them drift in value from the canonical — must light up
+// here BEFORE the change can land in main.
+
+import (
+	"strings"
+	"testing"
+
+	"github.com/google/uuid"
+
+	"mgit.msbls.de/m/paliad/internal/models"
+)
+
+func TestAddRuleVars_CanonicalAndLegacyAliasesMatch(t *testing.T) {
+	t.Parallel()
+
+	// Pairs are (canonical key, legacy key). Order matters only for
+	// the assertion message — the test checks string equality both
+	// ways round.
+	pairs := []struct {
+		canonical string
+		legacy    string
+	}{
+		{"procedural_event.code", "rule.submission_code"},
+		{"procedural_event.name", "rule.name"},
+		{"procedural_event.name_de", "rule.name_de"},
+		{"procedural_event.name_en", "rule.name_en"},
+		{"procedural_event.legal_source", "rule.legal_source"},
+		{"procedural_event.legal_source_pretty", "rule.legal_source_pretty"},
+		{"procedural_event.primary_party", "rule.primary_party"},
+		{"procedural_event.event_kind", "rule.event_type"},
+	}
+
+	// Build a fully-populated rule row. Every nullable column has a
+	// distinct non-empty value so missing-value bugs (e.g. the legacy
+	// key copying "" while the canonical key copies the real value)
+	// would surface.
+	code := "dpma.appeal.bgh.begruendung"
+	desc := "Rechtsbeschwerdebegründung — § 102 PatG"
+	party := "both"
+	kind := "filing"
+	legal := "DE.PatG.102"
+	ruleCode := "§ 102 PatG"
+
+	rule := &models.DeadlineRule{
+		ID:             uuid.New(),
+		SubmissionCode: &code,
+		Name:           "Rechtsbeschwerdebegründung",
+		NameEN:         "Appeal brief",
+		Description:    &desc,
+		PrimaryParty:   &party,
+		EventType:      &kind,
+		LegalSource:    &legal,
+		RuleCode:       &ruleCode,
+	}
+
+	for _, lang := range []string{"de", "en"} {
+		t.Run(lang, func(t *testing.T) {
+			t.Parallel()
+			bag := PlaceholderMap{}
+			addRuleVars(bag, rule, lang)
+
+			for _, p := range pairs {
+				canonicalVal, canonicalOK := bag[p.canonical]
+				legacyVal, legacyOK := bag[p.legacy]
+
+				if !canonicalOK {
+					t.Errorf("canonical key %q missing from bag (lang=%s); "+
+						"Slice A must emit both forms", p.canonical, lang)
+				}
+				if !legacyOK {
+					t.Errorf("legacy alias %q missing from bag (lang=%s); "+
+						"removing legacy aliases would break existing Word "+
+						"templates that paliad doesn't see — keep the "+
+						"emission per m/paliad#93 Q7", p.legacy, lang)
+				}
+				if canonicalVal != legacyVal {
+					t.Errorf("alias drift: %q=%q vs %q=%q (lang=%s)",
+						p.canonical, canonicalVal,
+						p.legacy, legacyVal, lang)
+				}
+			}
+
+			// Sanity: the localized name actually localizes (the
+			// canonical and legacy `name` keys depend on lang). If
+			// this fails the loop above wouldn't catch it (both keys
+			// would agree on the wrong language).
+			localized := bag["procedural_event.name"]
+			if strings.EqualFold(lang, "en") && localized != rule.NameEN {
+				t.Errorf("expected EN localized name=%q, got %q",
+					rule.NameEN, localized)
+			}
+			if strings.EqualFold(lang, "de") && localized != rule.Name {
+				t.Errorf("expected DE localized name=%q, got %q",
+					rule.Name, localized)
+			}
+		})
+	}
+}
+
+func TestAddRuleVars_NullableFieldsEmitEmptyOnBothPrefixes(t *testing.T) {
+	t.Parallel()
+
+	// A minimal rule with every optional column NULL. The bag must
+	// still emit every canonical + legacy key — with the empty
+	// string — so downstream merging produces the standard
+	// "[KEIN WERT: ...]" marker rather than a broken template.
+	rule := &models.DeadlineRule{
+		ID:     uuid.New(),
+		Name:   "Generic step",
+		NameEN: "Generic step",
+	}
+
+	bag := PlaceholderMap{}
+	addRuleVars(bag, rule, "de")
+
+	mustHave := []string{
+		"procedural_event.code", "rule.submission_code",
+		"procedural_event.legal_source", "rule.legal_source",
+		"procedural_event.legal_source_pretty", "rule.legal_source_pretty",
+		"procedural_event.primary_party", "rule.primary_party",
+		"procedural_event.event_kind", "rule.event_type",
+	}
+	for _, key := range mustHave {
+		val, ok := bag[key]
+		if !ok {
+			t.Errorf("key %q missing from bag even with NULL source column; "+
+				"derefString must materialize the empty string so the "+
+				"merger sees the variable and renders the missing-value "+
+				"marker", key)
+		}
+		if val != "" {
+			t.Errorf("key %q = %q, want \"\" (source column was NULL)", key, val)
+		}
+	}
+}