@conduction/nextcloud-vue 2.56.0-beta.65 → 2.56.0-beta.67

package/dist/nextcloud-vue.css

@@ -286,6 +286,16 @@
 	height: 16px;
 }
 
+/* ---- A single select -------------------------------------------------- */
+/* NcSelect draws a single select as its search field with the clear and
+   open buttons laid over its end. A legacy vue-select rule that Nextcloud
+   still loads caps the field at the width less one clickable area, which
+   left those buttons outside the field's border (DqNieuweZaak "Zaaktype",
+   "Intakekanaal"). */
+.cn-look-board .nc-select.v-select.select.vs--single .vs__selected-options {
+	max-width: none;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -410,11 +420,8 @@
    end of a tab strip) is the board's neutral control: the main background, a
    grey border, the main text at 600 (DqZaak), not Nextcloud's primary tint.
    NcActions marks a secondary menu `action-item--secondary` on its root and
-   keeps a class given to it off, so the rule reads that marker. The label
-   hands its ink to --nldesign-color-on-surface for a theme that forces the
-   body ink onto every span (thematiq). */
+   keeps a class given to it off, so the rule reads that marker. */
 .cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--color-main-text);
 	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
@@ -1221,14 +1228,6 @@
 	color: var(--cn-status-badge-ink);
 }
 
-/* A pill paints its own pairing of ink and fill. A theme that forces the body
-   ink onto every span (thematiq's text rule, `!important` at id level) reads
-   that ink from --nldesign-color-on-surface when the surface sets it, so the
-   pill hands it its own ink: "In behandeling" stays purple on purple. */
-.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--cn-status-badge-ink);
-}
-
 /* ---- Info notes (NcNoteCard type="info") -------------------------------- */
 /* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
    of padding, radius 8, an 18px icon 10px before the text, 14px text in the
@@ -1280,9 +1279,7 @@
    hairline under each pair (DqZaak "Zaakgegevens"), the horizontal layout as
    two columns of 14px text, the label column as wide as its longest label
    (the side cards). Both at the board's line height, 1.2, not Nextcloud's 1.5:
-   a pair is 47px tall on the board. The muted label also hands its ink to
-   --nldesign-color-on-surface, which a theme that forces the body ink onto
-   every div (thematiq) reads. */
+   a pair is 47px tall on the board. */
 .cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
 	gap: 12px 24px;
 	font-size: 15px;
@@ -1313,7 +1310,6 @@
 }
 
 .cn-look-board .cn-detail-grid .cn-detail-grid__label:not(.cn-look-nextcloud *) {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	min-width: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
@@ -1345,7 +1341,7 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
 	font-size: var(--cn-board-heading-size, 17px);
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 }
 
 /* The board draws no rule under a dashboard card's title (DqMijnWerk,
@@ -1359,7 +1355,7 @@
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless) .cn-widget-wrapper__header {
-	padding: 20px var(--cn-board-dashboard-card-inset) 12px;
+	padding: 20px var(--cn-board-dashboard-card-inset) calc(12px - var(--cn-board-first-line-leading, 0.15em));
 }
 
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
@@ -1554,6 +1550,24 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-stats-block-widget--tiles-box {
 	padding: 14px 22px 20px;
 }
+
+/* ---- Matrix chart (DqProcesanalyse "Dagen per fase") -------------------- */
+/* The board sets the matrix at 14px and the font's normal line height: the
+   column heads and the cell figures at 600, a cell 37px with its 10px
+   padding. Nextcloud's 15px at 1.5 made each row 42.5px.
+   @spec openspec/changes/board-matrix-cells/specs/board-matrix-cells/spec.md#requirement-a-board-matrix-takes-the-boards-type */
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-head {
+	font-weight: 600;
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell:not(.cn-chart-widget__matrix-cell--current) {
+	font-weight: 600;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -1576,7 +1590,7 @@
 	--nldesign-component-dialog-border-radius: var(--cn-board-card-radius, 12px);
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
-	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
+	--cn-dialog-eyebrow-color: var(--color-primary-element-light-text, var(--color-main-text));
 	--cn-dialog-eyebrow-transform: none;
 	--cn-dialog-eyebrow-tracking: 0;
 }
@@ -1642,6 +1656,7 @@
 }
 
 .cn-dialog-header__eyebrow {
+	--nldesign-color-on-surface: var(--cn-dialog-eyebrow-color, var(--color-main-text));
 	margin-bottom: 4px;
 	font-size: 13px;
 	font-weight: 700;
@@ -1657,13 +1672,24 @@
 	color: var(--color-main-text);
 }
 
+/* The subtitle is a <p>, which the nldesign theme sizes and inks with
+   `!important` through its paragraph tokens: the board's 14px muted line
+   goes to those tokens too (DqOverdragen, DqDocumentGenereren). */
 .cn-dialog-header__subtitle {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
 
-.cn-dialog-header__close {
+/* The close button is a 36px circle. NcButton sizes an icon-only button by
+   --button-size with `!important`, so the size goes through that; the radius
+   also goes to the nldesign theme's button radius token. */
+.cn-dialog-header .cn-dialog-header__close.button-vue {
+	--button-size: 36px;
+	--nldesign-component-button-border-radius: 50%;
 	flex: 0 0 auto;
 	width: 36px;
 	min-width: 36px;
@@ -1703,6 +1729,28 @@
 	border-radius: var(--cn-board-control-radius, 8px);
 }
 
+/* The footer buttons set 14px text, 16px in at both sides, and 18px when
+   they carry an icon (DqOverdragen "Annuleren" and "Overdragen"). The padding
+   goes through NcButton's --button-padding. The mask class and the doubled
+   class outrank NcButton's text-only rule, `.button-vue[data-v-…]:has(…:empty)`
+   (four classes, in a stylesheet a spawned dialog loads later), and the board
+   look's general icon-and-label rule.
+   @spec openspec/changes/board-dialog-controls/specs/board-dialog-controls/spec.md#requirement-a-board-dialog-draws-its-controls-as-the-boards-do */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue {
+	--button-padding: 16px;
+	font-size: 14px;
+}
+
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)) {
+	--button-padding: 18px;
+}
+
+/* NcButton pads a text-only label 4px a side inside the button's own padding;
+   the board's 16px is the whole inset. */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue .button-vue__text.button-vue__text {
+	padding-inline: 0;
+}
+
 /* Cancel is an outlined secondary, never a text link. */
 .cn-dialog-board .dialog__actions .button-vue--vue-secondary,
 .cn-dialog-board .dialog__actions .button-vue--secondary {
@@ -1779,15 +1827,31 @@
 	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
 }
 
+/* The board draws the control's edge as a 1px border (DqOverdragen "Waarom de
+   zaak verhuist", DqBesluit); NcInputField and NcTextArea draw it as a shadow.
+   The colour is the one that meets WCAG's 3:1 for a control's edge, as the
+   footer's secondary button. Focus keeps NcInputField's own ring, which
+   carries `!important`. */
 .cn-dialog-board .dialog__content .input-field__input,
 .cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
 .cn-dialog-board .dialog__content .textarea__input,
 .cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border: 1px solid var(--color-border-maxcontrast);
 	border-radius: 8px;
-	box-shadow: 0 0 0 1px var(--color-border-dark);
+	box-shadow: none;
 	font-size: var(--cn-field-text-size, 15px);
 }
 
+/* A plain input an app puts in a board dialog (a date, a number) is the same
+   40px control; Nextcloud's core stylesheet makes it 34px. */
+.cn-dialog-board .dialog__content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.input-field__input) {
+	box-sizing: border-box;
+	height: var(--cn-field-height, 40px);
+	min-height: var(--cn-field-height, 40px);
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+}
+
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
 .cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
 	opacity: 1 !important;
@@ -2144,7 +2208,6 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
@@ -2667,15 +2730,11 @@
 	outline-offset: 2px;
 }
 
-/* The selected chip is light on dark, so it hands its ink to
-   --nldesign-color-on-surface: thematiq forces the body ink onto every span
-   with `!important` and reads it from that property, which left the label
-   dark on dark. */
+/* The selected chip is light on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
-	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
@@ -2688,7 +2747,6 @@
 	padding: 1px 7px;
 	border: 0;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	background: var(--color-border);
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
@@ -2702,14 +2760,15 @@
 /* On the selected chip the count is the soft ink as a lighter bubble on the
    dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
 
 /* Save view: a ghost button, 34px, radius 17, no border, on the light primary
-   tint, a 14px icon 6px before the label, on one line. */
+   tint, a 14px icon 6px before the label, on one line. The label is a span,
+   so its ink also goes to --nldesign-color-on-surface. */
 .cn-look-board .cn-saved-views__save .button-vue {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	min-height: 34px;
 	height: 34px;
 	padding: 0 12px;
@@ -2750,6 +2809,7 @@
    @spec openspec/changes/board-toolbar-buttons-theme/specs/board-toolbar-buttons-theme/spec.md#requirement-board-toolbar-buttons-are-neutral-under-a-theme */
 .cn-look-board .cn-actions-bar:not(.cn-look-nextcloud *) {
 	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
 	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
@@ -2779,8 +2839,6 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
-	/* A theme that forces the body ink onto every span reads it from here. */
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -2899,7 +2957,10 @@
 	font-size: 14px;
 }
 
+/* An active filter: the light primary tint, its label (a span) in the tint's
+   ink through --nldesign-color-on-surface too. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__filter-chip {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -3007,15 +3068,13 @@
 }
 
 /* The header row is near-white on the boards (#fafbfc), not the hover grey,
-   its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
-   which a theme that forces the body ink onto every span (thematiq) reads.
+   its labels 14px muted.
    The nldesign theme paints every `th` with `!important` through its table
    header tokens, and the sort button in it through its button weight token
    (bold), so the cell hands the board's ground, ink and weight to those
    tokens too.
    @spec openspec/changes/board-table-head-theme/specs/board-table-head-theme/spec.md#requirement-a-board-table-header-keeps-the-boards-ground-ink-and-weight-under-a-theme */
 .cn-look-board .cn-table-container--board .cn-data-table th {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
 	--nldesign-component-table-header-font-weight: 600;
@@ -3043,9 +3102,13 @@
 	line-height: normal;
 }
 
+/* The sort button is the bare label, square (the boards draw no box round
+   it); the funnel after it is a 22px button with a 4px radius. Both outrank
+   the 8px element radius the table and Nextcloud's `button` rule give them. */
 .cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
 	min-height: 0;
 	height: auto;
+	border-radius: 0;
 	line-height: inherit;
 }
 
@@ -3101,6 +3164,7 @@
 	min-width: 22px;
 	height: 22px;
 	min-height: 22px;
+	border-radius: 4px;
 	margin-inline-start: 4px;
 }
 
@@ -3144,7 +3208,6 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -3189,7 +3252,6 @@
 /* The initials sit on the light primary tint in the primary ink, the board's
    person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 12px;
@@ -3309,6 +3371,8 @@
 	margin-inline-start: auto;
 }
 
+/* A page link is a <button>: Nextcloud's `button` rule sets it bold, the
+   boards set the links at the regular weight and only the current page at 600. */
 .cn-look-board .cn-pagination--board .cn-pagination__board-link {
 	box-sizing: border-box;
 	min-width: 34px;
@@ -3321,6 +3385,7 @@
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: 14px;
+	font-weight: 400;
 	cursor: pointer;
 }
 
@@ -3741,6 +3806,56 @@
 	font-size: 20px;
 	font-weight: 700;
 }
+
+/* ---- Side panel cards --------------------------------------------------- */
+/* A card beside the list is the board's side card (DqTeamwachtrij "Team
+   vandaag", "Werkvoorraad per zaaktype"): no rule under the header, the
+   title a 15px muted label on the card's 20px 22px inset, 12px above the
+   body, 20px between cards. The wrapper drew the Nextcloud panel: a 14px
+   dark title on a 12px 16px header over a rule, 16px between cards. The
+   tone carries `!important` against a theme that colours every h3.
+   @spec openspec/changes/board-index-side-panel-cards/specs/board-index-side-panel-cards/spec.md#requirement-a-board-index-side-panel-card-is-the-boards-side-card */
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) {
+	gap: var(--cn-board-section-gap, 20px);
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__header {
+	border-bottom: none;
+	padding: 20px 22px 0;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__title {
+	color: var(--color-text-maxcontrast) !important;
+	font-size: var(--cn-board-side-heading-size, 15px);
+	font-weight: 600;
+	line-height: normal;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__content {
+	padding: calc(12px - var(--cn-board-first-line-leading, 0.15em)) 22px 20px;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-index-page-widgets__note {
+	font-size: 13px;
+}
+
+/* A record list drawn as a table (DqTeamwachtrij "Werkvoorraad per
+   zaaktype") is the board's compact grid: a 13px muted header at regular
+   weight, rows 8px apart, no rules between them. Line heights differ from
+   the board's normal ones, so the cell padding sets the board's row pitch.
+   One class more than the component's scoped rules, which load later.
+   @spec openspec/changes/board-index-side-panel-cards/specs/board-index-side-panel-cards/spec.md#requirement-a-board-record-list-table-is-the-boards-compact-grid */
+.cn-look-board .cn-record-list--table .cn-record-list__table th {
+	border-bottom: none;
+	font-size: 13px;
+	font-weight: 400;
+	padding-block: 0 2px;
+}
+
+.cn-look-board .cn-record-list--table .cn-record-list__table td {
+	border-bottom: none;
+	padding-block: 2px;
+}
 /* ========================================
    @conduction/nextcloud-vue — Table Styles
    ======================================== */
@@ -5598,12 +5713,14 @@ a.cn-kpi-card--board * {
    ======================================== */
 
 /* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -5638,26 +5755,26 @@ a.cn-kpi-card--board * {
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
@@ -6473,11 +6590,17 @@ a.cn-kpi-card--board * {
 	overflow-y: auto;
 }
 
+/* The list scrolls inside the side column and the card for the rows without
+   a place stays under it, as the board draws it (DqZakenKaart). Scrolling the
+   column as a whole pushed that card below a page's worth of rows. */
 .cn-index-page__map-list {
 	display: flex;
+	flex: 0 1 auto;
 	flex-direction: column;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
+	overflow-y: auto;
 	border: 1px solid var(--color-border);
 	border-radius: 10px;
 	list-style: none;
@@ -6485,6 +6608,7 @@ a.cn-kpi-card--board * {
 
 .cn-index-page__map-item {
 	display: flex;
+	flex: none;
 	gap: 12px;
 	padding: 12px 14px;
 }
@@ -6523,11 +6647,22 @@ a.cn-kpi-card--board * {
 	min-width: 0;
 }
 
-.cn-index-page__map-title {
+/* The title is a button for the keyboard but reads as the row's title text.
+   Nextcloud styles every `button:not(.button-vue, ...)` (specificity 0,2,1)
+   as a 34px tinted pill with a 3px margin, which outranked a single class and
+   turned each title into a blue block (DqZakenKaart rows 111px against 89).
+   Three classes outrank it, and the box properties it sets are reset.
+   @spec openspec/changes/map-list-title-button/specs/map-list-title-button/spec.md#requirement-a-map-list-title-reads-as-text-not-as-a-button */
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title {
+	width: auto;
+	height: auto;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
 	border: 0;
+	border-radius: 0;
 	background: none;
+	box-shadow: none;
 	color: var(--color-main-text);
 	font: inherit;
 	font-size: 15px;
@@ -6537,6 +6672,12 @@ a.cn-kpi-card--board * {
 	cursor: pointer;
 }
 
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:hover,
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:focus {
+	background: none;
+	color: var(--color-main-text);
+}
+
 .cn-index-page__map-sub,
 .cn-index-page__map-due {
 	color: var(--color-text-maxcontrast);
@@ -6552,6 +6693,7 @@ a.cn-kpi-card--board * {
 
 .cn-index-page__map-missing {
 	display: flex;
+	flex: none;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 8px;
@@ -7997,6 +8139,12 @@ a.cn-kpi-card--board * {
 	/* Card h2 and side heading. */
 	--cn-board-heading-size: 17px;
 	--cn-board-side-heading-size: 15px;
+	/* The boards set text at the font's normal line height (1.2 for Fira
+	   Sans), Nextcloud at 1.5: a card body's first line carries this much
+	   half-leading above its glyphs that a board does not draw. A gap the
+	   boards measure from a title to the text under it is the board's value
+	   minus this. Resolved in the element that uses it. */
+	--cn-board-first-line-leading: 0.15em;
 }
 
 /* ---- The header: two rows on the ground ------------------------------- */
@@ -8189,24 +8337,27 @@ a.cn-kpi-card--board * {
    widget's 4px pad is room for the 32px circles, which the bars variant does
    not draw), the label 8px under its bar and the date 8px under the label at
    the normal line height, open steps muted and the done and current ones in
-   the main text. Each hands its ink to --nldesign-color-on-surface, which a
-   theme that forces the body ink onto every span (thematiq) reads instead. */
+   the main text. Each sets its ink as `color`, and also hands it to
+   --nldesign-color-on-surface for a theme that still forces the body ink. */
 .cn-look-board .cn-stages-widget:has(> .cn-stages-widget__bars):not(.cn-look-nextcloud *) {
 	padding: 0;
 }
 
 .cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
 	line-height: normal;
 }
 
 .cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--done .cn-stages-widget__bar-label:not(.cn-look-nextcloud *),
 .cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--current .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-main-text);
+	color: var(--color-main-text);
 }
 
 .cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-date:not(.cn-look-nextcloud *) {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
 	line-height: normal;
 }
 
@@ -8344,13 +8495,15 @@ a.cn-kpi-card--board * {
    The nldesign theme sets every button's weight and radius with `!important`
    through its button tokens, which drew every tab bold with four rounded
    corners; the tab hands the board's values to those tokens. A tab is 37px
-   with or without a count (DqZaak), not 34px without one.
+   with or without a count (DqZaak), not 34px without one. Its outline is
+   the widget card's border, so tab and card meet in one line.
+   @spec openspec/changes/board-tabs-widget-border/specs/board-tabs-widget-border/spec.md#requirement-board-folder-tabs-draw-the-widget-card-border
    @spec openspec/changes/board-tabs-theme/specs/board-tabs-theme/spec.md#requirement-board-folder-tabs-keep-the-boards-weight-shape-and-height-under-a-theme */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	--nldesign-component-button-font-weight: 400;
 	--nldesign-component-button-border-radius: 8px 8px 0 0;
 	background-color: var(--color-background-dark);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--color-border);
 	border-bottom: none;
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
@@ -8365,7 +8518,7 @@ a.cn-kpi-card--board * {
 	--nldesign-component-button-font-weight: 700;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-main-background);
-	border-top: 1px solid var(--color-border-dark);
+	border-top: 1px solid var(--color-border);
 	font-weight: 700;
 	min-height: 38px;
 	padding-bottom: 9px;
@@ -8476,15 +8629,17 @@ a.cn-kpi-card--board * {
 .cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 }
 
+/* 12px from the title's glyphs to the first line's glyphs, as drawn.
+   @spec openspec/changes/board-card-title-gap/specs/board-card-title-gap/spec.md#requirement-a-board-cards-body-starts-the-boards-gap-below-its-title */
 .cn-look-board .cn-detail-page .cn-widget-wrapper__content {
-	padding: 12px 22px 20px;
+	padding: calc(12px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 .cn-look-board .cn-detail-card .cn-detail-card__content {
-	padding: 12px 22px 20px;
+	padding: calc(12px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 /* A header-less card keeps the full 20px 22px. */
@@ -8492,13 +8647,18 @@ a.cn-kpi-card--board * {
 	padding: var(--cn-board-card-padding);
 }
 
-/* The data card: 200px columns, a 12px 24px gap, label over value, hairline. */
-.cn-look-board .cn-object-data-widget__grid {
+/* The data card: 200px columns, a 12px 24px gap, label over value, hairline.
+   Each selector holds one class more than the component's scoped rule
+   (`.cn-object-data-widget__cell[data-v-...]`), which loads after this sheet:
+   at equal specificity the cell kept its 8px top padding and the grid its 8px
+   gap, so the first label sat 8px further below the card's title.
+   @spec openspec/changes/board-card-title-gap/specs/board-card-title-gap/spec.md#requirement-the-data-cards-grid-keeps-the-boards-gap-and-cell-padding */
+.cn-look-board .cn-object-data-widget__grid-wrap .cn-object-data-widget__grid {
 	font-size: 15px;
 	gap: 12px 24px;
 }
 
-.cn-look-board .cn-object-data-widget__cell {
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__cell {
 	border-bottom: 1px solid var(--cn-board-hairline);
 	gap: 2px;
 	padding: 0 0 10px;
@@ -8546,7 +8706,7 @@ a.cn-kpi-card--board * {
 }
 
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__content {
-	padding: 10px 22px 20px;
+	padding: calc(10px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 /* A stat tile in a side card (DqZaak "Termijn") sits on the card's inset as
@@ -8663,21 +8823,24 @@ a.cn-kpi-card--board * {
 	font-size: 13px;
 }
 
-/* Done and open steps are muted, the current one in the main text. Each hands
-   its ink to --nldesign-color-on-surface, which a theme that forces the body
-   ink onto every li and span (thematiq) reads instead. */
+/* Done and open steps are muted, the current one in the main text. Each sets
+   its ink as `color`, and also hands it to --nldesign-color-on-surface for a
+   theme that still forces the body ink. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__item,
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__hint,
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
 }
 
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current {
 	--nldesign-color-on-surface: var(--color-main-text);
+	color: var(--color-main-text);
 }
 
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current .cn-next-step-card__hint {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
 }
 
 /* ---- History: the activity tab ------------------------------------------ */
@@ -10539,7 +10702,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-chart-widget[data-v-1c17a450] {
+.cn-chart-widget[data-v-784af9ea] {
 	width: 100%;
 	/* A chart FITS its container — it is never a scroll region. apexcharts
 	   sizes its SVG from the element it is mounted in, but it also enforces
@@ -10561,13 +10724,13 @@ a.cn-kpi-card--board * {
    takes what is left, so the chart is sized by the box rather than sizing it.
    `min-height: 0` drops the 100px floor — on a fixed-height surface a floor is
    the thing that produces the overflow it was meant to prevent. */
-.cn-chart-widget--fit[data-v-1c17a450] {
+.cn-chart-widget--fit[data-v-784af9ea] {
 	height: 100%;
 	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-chart-widget__canvas[data-v-1c17a450] {
+.cn-chart-widget__canvas[data-v-784af9ea] {
 	min-width: 0;
 	max-width: 100%;
 	/* Never a scroll region (see the root). `overflow-x: hidden` alone made
@@ -10580,14 +10743,14 @@ a.cn-kpi-card--board * {
 /* apexcharts writes an inline `width` onto its own wrapper from its measured
    minimum, which beats the container when the container is narrower. Cap the
    painted box so the inline width cannot push past the widget's border. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-canvas,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-canvas,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-canvas svg {
 	max-width: 100%;
 }
 
 /* The SVG is a block: as an inline box it sits on a line and adds the line's
    descender space under the chart. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-canvas svg {
 	display: block;
 }
 
@@ -10595,24 +10758,24 @@ a.cn-kpi-card--board * {
    would grow to its content, i.e. to the chart, and the percentage height would
    resolve against a box the chart itself defined. `overflow: hidden` keeps a
    sub-pixel rounding difference from reintroducing a scrollbar. */
-.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-1c17a450] {
+.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-784af9ea] {
 	flex: 1 1 0;
 	min-height: 0;
 	overflow: hidden;
 }
-.cn-chart-widget__fallback[data-v-1c17a450] {
+.cn-chart-widget__fallback[data-v-784af9ea] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	min-height: 150px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-chart-widget__html[data-v-1c17a450] {
+.cn-chart-widget__html[data-v-784af9ea] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-chart-widget__bar-list[data-v-1c17a450] {
+.cn-chart-widget__bar-list[data-v-784af9ea] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -10620,7 +10783,7 @@ a.cn-kpi-card--board * {
 	margin: 0;
 	padding: 0;
 }
-.cn-chart-widget__bar-line[data-v-1c17a450] {
+.cn-chart-widget__bar-line[data-v-784af9ea] {
 	align-items: center;
 	background: none;
 	border: 0;
@@ -10635,100 +10798,107 @@ a.cn-kpi-card--board * {
 	text-align: start;
 	width: 100%;
 }
-.cn-chart-widget__bar-line--drill[data-v-1c17a450] {
+.cn-chart-widget__bar-line--drill[data-v-784af9ea] {
 	border-radius: var(--border-radius-small, 4px);
 	cursor: pointer;
 }
-.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-1c17a450],
-.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-1c17a450] {
+.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-784af9ea],
+.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-784af9ea] {
 	text-decoration: underline;
 }
-.cn-chart-widget__bar-label[data-v-1c17a450] {
+.cn-chart-widget__bar-label[data-v-784af9ea] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-chart-widget__bar-track[data-v-1c17a450] {
+.cn-chart-widget__bar-track[data-v-784af9ea] {
 	background: var(--color-background-dark);
 	border-radius: 4px;
 	display: block;
 	height: 14px;
 	overflow: hidden;
 }
-.cn-chart-widget__bar-fill[data-v-1c17a450] {
+.cn-chart-widget__bar-fill[data-v-784af9ea] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-chart-widget__bar-value[data-v-1c17a450] {
+.cn-chart-widget__bar-value[data-v-784af9ea] {
 	font-weight: 600;
 	text-align: end;
 	white-space: nowrap;
 }
-.cn-chart-widget__footnote[data-v-1c17a450] {
+.cn-chart-widget__footnote[data-v-784af9ea] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
 /* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
    its own line height while the canvas takes the rest of a fitted column. */
-.cn-chart-widget > .cn-chart-widget__footnote[data-v-1c17a450] {
+.cn-chart-widget > .cn-chart-widget__footnote[data-v-784af9ea] {
 	flex: 0 0 auto;
 	margin-top: 8px;
 }
-.cn-chart-widget__matrix[data-v-1c17a450] {
+.cn-chart-widget__matrix[data-v-784af9ea] {
 	display: grid;
 	gap: 4px;
 }
-.cn-chart-widget__matrix-row[data-v-1c17a450] {
+.cn-chart-widget__matrix-row[data-v-784af9ea] {
 	display: contents;
 }
-.cn-chart-widget__matrix-head[data-v-1c17a450] {
+.cn-chart-widget__matrix-head[data-v-784af9ea] {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
-.cn-chart-widget__matrix-label[data-v-1c17a450] {
+.cn-chart-widget__matrix-label[data-v-784af9ea] {
 	padding: 10px 6px;
 }
-.cn-chart-widget__matrix-cell[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell[data-v-784af9ea] {
 	border-radius: 6px;
 	padding: 10px;
 	text-align: center;
 }
-.cn-chart-widget__matrix-cell--success[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--success[data-v-784af9ea] {
 	background: var(--color-success-light, color-mix(in srgb, var(--color-success) 15%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--warning[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--warning[data-v-784af9ea] {
 	background: var(--color-warning-light, color-mix(in srgb, var(--color-warning) 15%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--error[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--error[data-v-784af9ea] {
 	background: var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--danger[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--danger[data-v-784af9ea] {
 	background: color-mix(in srgb, var(--color-error) 25%, var(--color-main-background));
 }
-.cn-chart-widget__matrix-cell--current[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--current[data-v-784af9ea] {
 	font-weight: 700;
 	outline: 3px solid var(--color-primary-element);
 	outline-offset: -3px;
 }
-.cn-chart-widget__matrix-cell--1[data-v-1c17a450] {
+
+/* A cell is a span: its ink also goes to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads. Level 3
+   leaves the theme's body ink in place: white on its tint is below 4.5:1. */
+.cn-chart-widget__matrix-cell--1[data-v-784af9ea] {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
-.cn-chart-widget__matrix-cell--2[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--2[data-v-784af9ea] {
 	background: color-mix(in srgb, var(--color-primary-element) 30%, var(--color-main-background));
 	color: var(--color-main-text);
 }
-.cn-chart-widget__matrix-cell--3[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--3[data-v-784af9ea] {
 	background: color-mix(in srgb, var(--color-primary-element) 65%, var(--color-main-background));
 	color: var(--color-primary-element-text);
 }
-.cn-chart-widget__matrix-cell--4[data-v-1c17a450] {
+.cn-chart-widget__matrix-cell--4[data-v-784af9ea] {
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-chart-widget__empty[data-v-1c17a450] {
+.cn-chart-widget__empty[data-v-784af9ea] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -10743,25 +10913,25 @@ a.cn-kpi-card--board * {
    content-sized case; in fit mode they take the leftover space and centre in it
    instead, since the floor would overflow a short tile. Declared after the base
    rules so the cascade order matches specificity (no-descending-specificity). */
-.cn-chart-widget--fit .cn-chart-widget__empty[data-v-1c17a450],
-.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-1c17a450] {
+.cn-chart-widget--fit .cn-chart-widget__empty[data-v-784af9ea],
+.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-784af9ea] {
 	flex: 1 1 0;
 	min-height: 0;
 }
-.cn-chart-widget__error[data-v-1c17a450] {
+.cn-chart-widget__error[data-v-784af9ea] {
 	font-size: 14px;
 	margin: 0;
 }
 
 /* In-widget view switcher pills (views[] prop) — compact segmented row,
    mirroring the dashboard date-range pill styling. */
-.cn-chart-widget__views[data-v-1c17a450] {
+.cn-chart-widget__views[data-v-784af9ea] {
 	display: flex;
 	gap: 4px;
 	margin-bottom: 6px;
 	justify-content: flex-end;
 }
-.cn-chart-widget__view-pill[data-v-1c17a450] {
+.cn-chart-widget__view-pill[data-v-784af9ea] {
 	padding: 2px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 999px;
@@ -10770,7 +10940,7 @@ a.cn-kpi-card--board * {
 	font-size: 12px;
 	cursor: pointer;
 }
-.cn-chart-widget__view-pill--active[data-v-1c17a450] {
+.cn-chart-widget__view-pill--active[data-v-784af9ea] {
 	background: var(--color-primary-element-light, #aad2ed);
 	color: var(--color-main-text);
 	border-color: var(--color-primary-element, #0082c9);
@@ -10799,8 +10969,8 @@ a.cn-kpi-card--board * {
    each override below therefore carries one more class than the apexcharts rule
    it replaces, and holds even without the scope attribute this block compiles
    with. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-light,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-dark {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-tooltip.apexcharts-theme-light,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-tooltip.apexcharts-theme-dark {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10809,8 +10979,8 @@ a.cn-kpi-card--board * {
 
 /* The title row is the date/category header ("Aug 26"). Its own background is
    what made it unreadable rather than merely off-theme. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
 	background: var(--color-background-hover);
 	border-bottom: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10819,8 +10989,8 @@ a.cn-kpi-card--board * {
 /* Crosshair axis tooltips. apexcharts puts light hex values on the BASE class
    here and only overrides them for its dark theme, so the base rule has to be
    replaced too — not just the theme variants. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-xaxistooltip,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-yaxistooltip {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10829,55 +10999,55 @@ a.cn-kpi-card--board * {
 /* Their pointer arrows are two stacked triangles: `::before` paints the border
    edge, `::after` the fill. Both need the tokens the box above uses, or the
    arrow keeps the old palette and reads as a stray light wedge. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-bottom::after,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-top::after {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-xaxistooltip-bottom::after,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-xaxistooltip-top::after {
 	border-bottom-color: var(--color-main-background);
 	border-top-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-bottom::before,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-top::before {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-xaxistooltip-bottom::before,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-xaxistooltip-top::before {
 	border-bottom-color: var(--color-border);
 	border-top-color: var(--color-border);
 }
-.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-left::after,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-right::after {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-yaxistooltip-left::after,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-yaxistooltip-right::after {
 	border-left-color: var(--color-main-background);
 	border-right-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-left::before,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-right::before {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-yaxistooltip-left::before,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-yaxistooltip-right::before {
 	border-left-color: var(--color-border);
 	border-right-color: var(--color-border);
 }
 
 /* Toolbar menu — only reachable with `toolbar: true`, but the same defect: a
    hardcoded `#fff` panel under inherited near-white text. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-menu {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-menu {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
 }
-.cn-chart-widget[data-v-1c17a450] .apexcharts-menu .apexcharts-menu-item:hover {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-menu .apexcharts-menu-item:hover {
 	background: var(--color-background-hover);
 }
 
 /* Toolbar icons: `#6e8192` at rest and `#333` on hover, i.e. the hover state
    vanishes against a dark background. One selector per icon class, matching
    apexcharts' own list, to clear its (0,3,1) hover rules. */
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-menu-icon svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-reset-icon svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-selection-icon svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoom-icon svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-menu-icon svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-reset-icon svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-selection-icon svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoom-icon svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
 	fill: var(--color-text-maxcontrast);
 }
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
-.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
+.cn-chart-widget[data-v-784af9ea] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
 	fill: var(--color-main-text);
 }
 
@@ -12473,57 +12643,57 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 
-.cn-cell-renderer__actions[data-v-2d766cc2] {
+.cn-cell-renderer__actions[data-v-c1ba202c] {
 	display: inline-flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-cell-renderer__icon-label[data-v-2d766cc2] {
+.cn-cell-renderer__icon-label[data-v-c1ba202c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
 	font-weight: 600;
 }
-.cn-cell-renderer__switch[data-v-2d766cc2] {
+.cn-cell-renderer__switch[data-v-c1ba202c] {
 	display: inline-flex;
 }
-.cn-cell-renderer__mono[data-v-2d766cc2] {
+.cn-cell-renderer__mono[data-v-c1ba202c] {
 	font-family: monospace;
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-cell-renderer--uuid[data-v-2d766cc2] {
+.cn-cell-renderer--uuid[data-v-c1ba202c] {
 	font-family: monospace;
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-cell-renderer--number[data-v-2d766cc2] {
+.cn-cell-renderer--number[data-v-c1ba202c] {
 	font-variant-numeric: tabular-nums;
 }
-.cn-cell-renderer--date[data-v-2d766cc2] {
+.cn-cell-renderer--date[data-v-c1ba202c] {
 	white-space: nowrap;
 }
-.cn-cell-renderer__dash[data-v-2d766cc2] {
+.cn-cell-renderer__dash[data-v-c1ba202c] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-cell-renderer__avatar[data-v-2d766cc2] {
+.cn-cell-renderer__avatar[data-v-c1ba202c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 	max-width: 100%;
 	vertical-align: middle;
 }
-.cn-cell-renderer__avatar-picture[data-v-2d766cc2] {
+.cn-cell-renderer__avatar-picture[data-v-c1ba202c] {
 	display: inline-flex;
 	flex: none;
 }
-.cn-cell-renderer__date-block[data-v-2d766cc2] {
+.cn-cell-renderer__date-block[data-v-c1ba202c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
 	white-space: nowrap;
 }
-.cn-cell-renderer__date-tile[data-v-2d766cc2] {
+.cn-cell-renderer__date-tile[data-v-c1ba202c] {
 	display: flex;
 	flex: 0 0 46px;
 	flex-direction: column;
@@ -12533,26 +12703,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	border-radius: 8px;
 	background-color: var(--color-background-dark);
 }
-.cn-cell-renderer__date-day[data-v-2d766cc2] {
+.cn-cell-renderer__date-day[data-v-c1ba202c] {
 	font-size: 17px;
 	line-height: 1;
 }
-.cn-cell-renderer__date-month[data-v-2d766cc2],
-.cn-cell-renderer__date-time[data-v-2d766cc2] {
+.cn-cell-renderer__date-month[data-v-c1ba202c],
+.cn-cell-renderer__date-time[data-v-c1ba202c] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-cell-renderer__date-month[data-v-2d766cc2] {
+.cn-cell-renderer__date-month[data-v-c1ba202c] {
 	font-size: 12px;
 }
-.cn-cell-renderer__date-lines[data-v-2d766cc2] {
+.cn-cell-renderer__date-lines[data-v-c1ba202c] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
-.cn-cell-renderer__date-weekday[data-v-2d766cc2] {
+.cn-cell-renderer__date-weekday[data-v-c1ba202c] {
 	font-weight: 600;
 }
-.cn-cell-renderer__avatar-initials[data-v-2d766cc2] {
+.cn-cell-renderer__avatar-initials[data-v-c1ba202c] {
 	display: inline-flex;
 	flex: none;
 	align-items: center;
@@ -12564,12 +12734,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-weight: 700;
 	line-height: 1;
 }
-.cn-cell-renderer__avatar-text[data-v-2d766cc2] {
+.cn-cell-renderer__avatar-text[data-v-c1ba202c] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-cell-renderer__avatar-name[data-v-2d766cc2] {
+.cn-cell-renderer__avatar-name[data-v-c1ba202c] {
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -12579,7 +12749,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font: inherit;
 	color: inherit;
 }
-.cn-cell-renderer__avatar-secondary[data-v-2d766cc2] {
+.cn-cell-renderer__avatar-secondary[data-v-c1ba202c] {
 	min-width: 0;
 	overflow: hidden;
 	color: var(--color-text-maxcontrast);
@@ -12593,34 +12763,34 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* A date that matched a rule is also set in a heavier weight, so the signal
    does not rest on colour alone. */
-.cn-cell-renderer__date--success[data-v-2d766cc2],
-.cn-cell-renderer__date--warning[data-v-2d766cc2],
-.cn-cell-renderer__date--error[data-v-2d766cc2],
-.cn-cell-renderer__age--success[data-v-2d766cc2],
-.cn-cell-renderer__age--warning[data-v-2d766cc2],
-.cn-cell-renderer__age--error[data-v-2d766cc2] {
+.cn-cell-renderer__date--success[data-v-c1ba202c],
+.cn-cell-renderer__date--warning[data-v-c1ba202c],
+.cn-cell-renderer__date--error[data-v-c1ba202c],
+.cn-cell-renderer__age--success[data-v-c1ba202c],
+.cn-cell-renderer__age--warning[data-v-c1ba202c],
+.cn-cell-renderer__age--error[data-v-c1ba202c] {
 	font-weight: 600;
 }
-.cn-cell-renderer__age[data-v-2d766cc2] {
+.cn-cell-renderer__age[data-v-c1ba202c] {
 	white-space: nowrap;
 }
 
 /* The progress cell (abstract-progress-cell): a 56 x 8 bar, the percentage
    8px beside it in the bar's tone, and an optional age badge after them, as
    PqLeads' Winkans column. The value is bold, so the tone is not the only signal. */
-.cn-cell-renderer__progress[data-v-2d766cc2] {
+.cn-cell-renderer__progress[data-v-c1ba202c] {
 	display: inline-flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 4px 8px;
 }
-.cn-cell-renderer__progress-line[data-v-2d766cc2] {
+.cn-cell-renderer__progress-line[data-v-c1ba202c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 	white-space: nowrap;
 }
-.cn-cell-renderer__progress-bar[data-v-2d766cc2] {
+.cn-cell-renderer__progress-bar[data-v-c1ba202c] {
 	display: inline-block;
 	width: 56px;
 	height: 8px;
@@ -12628,33 +12798,33 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background: var(--color-background-dark);
 	overflow: hidden;
 }
-.cn-cell-renderer__progress-fill[data-v-2d766cc2] {
+.cn-cell-renderer__progress-fill[data-v-c1ba202c] {
 	display: block;
 	height: 100%;
 }
-.cn-cell-renderer__progress-fill--success[data-v-2d766cc2] {
+.cn-cell-renderer__progress-fill--success[data-v-c1ba202c] {
 	background: var(--color-element-success, var(--color-success));
 }
-.cn-cell-renderer__progress-fill--warning[data-v-2d766cc2] {
+.cn-cell-renderer__progress-fill--warning[data-v-c1ba202c] {
 	background: var(--color-element-warning, var(--color-warning));
 }
-.cn-cell-renderer__progress-fill--error[data-v-2d766cc2] {
+.cn-cell-renderer__progress-fill--error[data-v-c1ba202c] {
 	background: var(--color-element-error, var(--color-error));
 }
-.cn-cell-renderer__progress-value[data-v-2d766cc2] {
+.cn-cell-renderer__progress-value[data-v-c1ba202c] {
 	font-size: 14px;
 	font-weight: 700;
 }
-.cn-cell-renderer__progress-value--success[data-v-2d766cc2] {
+.cn-cell-renderer__progress-value--success[data-v-c1ba202c] {
 	color: var(--color-text-success, var(--color-success-text));
 }
-.cn-cell-renderer__progress-value--warning[data-v-2d766cc2] {
+.cn-cell-renderer__progress-value--warning[data-v-c1ba202c] {
 	color: var(--color-text-warning, var(--color-warning-text));
 }
-.cn-cell-renderer__progress-value--error[data-v-2d766cc2] {
+.cn-cell-renderer__progress-value--error[data-v-c1ba202c] {
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-cell-renderer__progress-badge[data-v-2d766cc2] {
+.cn-cell-renderer__progress-badge[data-v-c1ba202c] {
 	display: inline-block;
 	padding: 3px 10px;
 	border-radius: 12px;
@@ -12662,52 +12832,52 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-weight: 600;
 	white-space: nowrap;
 }
-.cn-cell-renderer__progress-badge--error[data-v-2d766cc2] {
+.cn-cell-renderer__progress-badge--error[data-v-c1ba202c] {
 	color: var(--color-text-error, var(--color-error-text));
 	background: var(--color-error-hover, var(--color-background-dark));
 	background: color-mix(in srgb, var(--color-error) 12%, transparent);
 }
-.cn-cell-renderer__progress-badge--warning[data-v-2d766cc2] {
+.cn-cell-renderer__progress-badge--warning[data-v-c1ba202c] {
 	color: var(--color-text-warning, var(--color-warning-text));
 	background: color-mix(in srgb, var(--color-warning) 14%, transparent);
 }
-.cn-cell-renderer__progress-badge--success[data-v-2d766cc2] {
+.cn-cell-renderer__progress-badge--success[data-v-c1ba202c] {
 	color: var(--color-text-success, var(--color-success-text));
 	background: color-mix(in srgb, var(--color-success) 12%, transparent);
 }
-.cn-cell-renderer__age--success[data-v-2d766cc2] {
+.cn-cell-renderer__age--success[data-v-c1ba202c] {
 	color: var(--color-text-success, var(--color-success-text));
 }
-.cn-cell-renderer__age--warning[data-v-2d766cc2] {
+.cn-cell-renderer__age--warning[data-v-c1ba202c] {
 	color: var(--color-text-warning, var(--color-warning-text));
 }
-.cn-cell-renderer__age--error[data-v-2d766cc2] {
+.cn-cell-renderer__age--error[data-v-c1ba202c] {
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-cell-renderer__due--empty[data-v-2d766cc2] {
+.cn-cell-renderer__due--empty[data-v-c1ba202c] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-cell-renderer__date--success[data-v-2d766cc2] {
+.cn-cell-renderer__date--success[data-v-c1ba202c] {
 	color: var(--color-text-success, var(--color-success-text));
 }
-.cn-cell-renderer__date--warning[data-v-2d766cc2] {
+.cn-cell-renderer__date--warning[data-v-c1ba202c] {
 	color: var(--color-text-warning, var(--color-warning-text));
 }
-.cn-cell-renderer__date--error[data-v-2d766cc2] {
+.cn-cell-renderer__date--error[data-v-c1ba202c] {
 	color: var(--color-text-error, var(--color-error-text));
 }
 
 /* The text variant, not the fill: from Nextcloud 32 `--color-success` is a
    background colour and too pale for a 16px glyph on a light theme. */
-.cn-cell-renderer__icon--success[data-v-2d766cc2] {
+.cn-cell-renderer__icon--success[data-v-c1ba202c] {
 	color: var(--color-text-success, var(--color-success-text, var(--color-success)));
 }
-.cn-cell-renderer__swatch-wrap[data-v-2d766cc2] {
+.cn-cell-renderer__swatch-wrap[data-v-c1ba202c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 }
-.cn-cell-renderer__swatch-dot[data-v-2d766cc2] {
+.cn-cell-renderer__swatch-dot[data-v-c1ba202c] {
 	display: inline-block;
 	width: 12px;
 	height: 12px;
@@ -14062,29 +14232,37 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 
-.cn-search-select[data-v-6cd354af] {
+.cn-search-select[data-v-aaa45660] {
 	position: relative;
 }
 
+/* The field takes the row: NcSelect is an inline block of at least 260px,
+   which left the magnifier, placed at the row's end, outside the field
+   (DqOverdragen "Nieuw team"). */
+.cn-search-select[data-v-aaa45660] .v-select {
+	width: 100%;
+}
+
 /* The magnifier sits where the chevron was: in the field, at its end. */
-.cn-search-select__magnifier[data-v-6cd354af] {
+.cn-search-select__magnifier[data-v-aaa45660] {
 	position: absolute;
 	inset-inline-end: 12px;
 	bottom: 0;
 	height: var(--default-clickable-area, 34px);
 	display: flex;
 	align-items: center;
+	z-index: 1;
 	color: var(--color-text-maxcontrast);
 	pointer-events: none;
 }
-.cn-search-select[data-v-6cd354af] .vs__open-indicator,
-.cn-search-select[data-v-6cd354af] .vs__open-indicator-button {
+.cn-search-select[data-v-aaa45660] .vs__open-indicator,
+.cn-search-select[data-v-aaa45660] .vs__open-indicator-button {
 	display: none;
 }
-.cn-search-select[data-v-6cd354af] .vs__actions {
+.cn-search-select[data-v-aaa45660] .vs__actions {
 	padding-inline-end: 36px;
 }
-.cn-search-select__row[data-v-6cd354af] {
+.cn-search-select__row[data-v-aaa45660] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -14092,7 +14270,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 0;
 	padding: 4px 0;
 }
-.cn-search-select__lead[data-v-6cd354af] {
+.cn-search-select__lead[data-v-aaa45660] {
 	flex: 0 0 32px;
 	width: 32px;
 	height: 32px;
@@ -14105,22 +14283,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-search-select__text[data-v-6cd354af] {
+.cn-search-select__text[data-v-aaa45660] {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
 	min-width: 0;
 }
-.cn-search-select__name[data-v-6cd354af] {
+.cn-search-select__name[data-v-aaa45660] {
 	font-weight: 600;
 	overflow-wrap: anywhere;
 }
-.cn-search-select__secondary[data-v-6cd354af] {
+.cn-search-select__secondary[data-v-aaa45660] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 	overflow-wrap: anywhere;
 }
-.cn-search-select__check[data-v-6cd354af] {
+.cn-search-select__check[data-v-aaa45660] {
 	flex: 0 0 auto;
 	color: var(--color-primary-element);
 }
@@ -22848,7 +23026,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 
 /* A select option breaks between words only, never inside one. */
-.cn-form-dialog__option-swatch[data-v-699550cc] {
+.cn-form-dialog__option-swatch[data-v-5b0fdc60] {
 	display: inline-block;
 	width: 12px;
 	height: 12px;
@@ -22857,10 +23035,10 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	vertical-align: middle;
 	box-shadow: inset 0 0 0 1px var(--color-border);
 }
-.cn-form-dialog__option-group[data-v-699550cc] {
+.cn-form-dialog__option-group[data-v-5b0fdc60] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-form-dialog__warning[data-v-699550cc] {
+.cn-form-dialog__warning[data-v-5b0fdc60] {
 	grid-column: 1 / -1;
 	margin: 4px 0 0;
 	padding: 6px 10px;
@@ -22868,22 +23046,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	background: var(--color-background-hover);
 	color: var(--color-main-text);
 }
-.cn-form-dialog__section-toggle[data-v-699550cc] {
+.cn-form-dialog__section-toggle[data-v-5b0fdc60] {
 	all: unset;
 	cursor: pointer;
 	font: inherit;
 }
-.cn-form-dialog__section-toggle[data-v-699550cc]::after {
+.cn-form-dialog__section-toggle[data-v-5b0fdc60]::after {
 	content: ' ▾';
 }
-.cn-form-dialog__section-toggle[aria-expanded='false'][data-v-699550cc]::after {
+.cn-form-dialog__section-toggle[aria-expanded='false'][data-v-5b0fdc60]::after {
 	content: ' ▸';
 }
-.cn-form-dialog__section-toggle[data-v-699550cc]:focus-visible {
+.cn-form-dialog__section-toggle[data-v-5b0fdc60]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-form-dialog__option[data-v-699550cc] {
+.cn-form-dialog__option[data-v-5b0fdc60] {
 	display: block;
 	min-width: 0;
 	white-space: normal;
@@ -22891,7 +23069,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	word-break: normal;
 	hyphens: manual;
 }
-.cn-form-dialog__draft-actions[data-v-699550cc] {
+.cn-form-dialog__draft-actions[data-v-5b0fdc60] {
 	display: flex;
 	gap: 8px;
 	margin-top: 8px;
@@ -22899,22 +23077,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* The state is announced in WORDS, and the colour only repeats them. A
    reader who cannot see it still hears "Draft saved" (WCAG 2.2 SC 1.4.1). */
-.cn-form-dialog__draft-state[data-v-699550cc] {
+.cn-form-dialog__draft-state[data-v-5b0fdc60] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 	margin-inline-end: auto;
 }
-.cn-form-dialog__switch-wrapper[data-v-699550cc] {
+.cn-form-dialog__switch-wrapper[data-v-5b0fdc60] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-form-dialog__form[data-v-699550cc] {
+.cn-form-dialog__form[data-v-5b0fdc60] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-form-dialog__field[data-v-699550cc] {
+.cn-form-dialog__field[data-v-5b0fdc60] {
 	margin-bottom: 8px;
 }
 
@@ -22926,7 +23104,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    from pushing its column past its share: a grid item's default `auto`
    minimum is its content, so without it one long option label widens the
    whole column and the two stop being equal. */
-.cn-form-dialog__section[data-v-699550cc] {
+.cn-form-dialog__section[data-v-5b0fdc60] {
 	margin: 12px 0 0;
 	padding-top: 12px;
 	border-top: 1px solid var(--color-border);
@@ -22935,44 +23113,44 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 /* The first heading opens the form: no rule above it. */
-.cn-form-dialog__form .cn-form-dialog__section[data-v-699550cc]:first-of-type {
+.cn-form-dialog__form .cn-form-dialog__section[data-v-5b0fdc60]:first-of-type {
 	margin-top: 0;
 	padding-top: 0;
 	border-top: 0;
 }
-.cn-form-dialog__form--two-column[data-v-699550cc] {
+.cn-form-dialog__form--two-column[data-v-5b0fdc60] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	column-gap: 16px;
 	align-items: start;
 }
-.cn-form-dialog__form--two-column[data-v-699550cc] > * {
+.cn-form-dialog__form--two-column[data-v-5b0fdc60] > * {
 	min-width: 0;
 }
 
 /* Anything that is not a field (the form-level error note, the slots above
    and below the fields) spans the full width, so a note card never sits in
    a half-width column beside an input. */
-.cn-form-dialog__form--two-column[data-v-699550cc] > :not(.cn-form-dialog__field),
-.cn-form-dialog__form--two-column > .cn-form-dialog__field--wide[data-v-699550cc] {
+.cn-form-dialog__form--two-column[data-v-5b0fdc60] > :not(.cn-form-dialog__field),
+.cn-form-dialog__form--two-column > .cn-form-dialog__field--wide[data-v-5b0fdc60] {
 	grid-column: 1 / -1;
 }
 
 /* A narrow viewport gets the single column back. Two columns of roughly
    150px each are worse than one readable one. */
 @media (max-width: 700px) {
-.cn-form-dialog__form--two-column[data-v-699550cc] {
+.cn-form-dialog__form--two-column[data-v-5b0fdc60] {
 		display: block;
 }
 }
-.cn-form-dialog__textarea-wrapper[data-v-699550cc],
-.cn-form-dialog__select-wrapper[data-v-699550cc],
-.cn-form-dialog__json-wrapper[data-v-699550cc] {
+.cn-form-dialog__textarea-wrapper[data-v-5b0fdc60],
+.cn-form-dialog__select-wrapper[data-v-5b0fdc60],
+.cn-form-dialog__json-wrapper[data-v-5b0fdc60] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-form-dialog__label[data-v-699550cc] {
+.cn-form-dialog__label[data-v-5b0fdc60] {
 	font-weight: 600;
 	font-size: 0.9em;
 	color: var(--color-main-text);
@@ -22980,10 +23158,10 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* Cross-app semantic reference (ADR-048) whose provider isn't installed —
    rendered disabled; the wrapper carries the mouse-over tooltip. */
-.cn-form-dialog__semantic-unresolved[data-v-699550cc] {
+.cn-form-dialog__semantic-unresolved[data-v-5b0fdc60] {
 	cursor: not-allowed;
 }
-.cn-form-dialog__textarea[data-v-699550cc] {
+.cn-form-dialog__textarea[data-v-5b0fdc60] {
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -22995,22 +23173,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	font-size: inherit;
 	resize: vertical;
 }
-.cn-form-dialog__textarea[data-v-699550cc]:focus {
+.cn-form-dialog__textarea[data-v-5b0fdc60]:focus {
 	border-color: var(--color-primary-element);
 	outline: none;
 }
-.cn-form-dialog__textarea[data-v-699550cc]:disabled {
+.cn-form-dialog__textarea[data-v-5b0fdc60]:disabled {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.cn-form-dialog__helper[data-v-699550cc] {
+.cn-form-dialog__helper[data-v-5b0fdc60] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
-.cn-form-dialog__helper--error[data-v-699550cc] {
+.cn-form-dialog__helper--error[data-v-5b0fdc60] {
 	color: var(--color-error);
 }
-.cn-form-dialog__dynamic-loading[data-v-699550cc] {
+.cn-form-dialog__dynamic-loading[data-v-5b0fdc60] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -25268,12 +25446,14 @@ a.cn-kpi-card--board * {
    ======================================== */
 
 /* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -25308,26 +25488,26 @@ a.cn-kpi-card--board * {
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
@@ -27117,7 +27297,7 @@ to { background-position: -200% 0;
 }
 
 
-.cn-object-card[data-v-b7ffa14e] {
+.cn-object-card[data-v-56a9e471] {
 	display: flex;
 	gap: 12px;
 	padding: 16px;
@@ -27127,80 +27307,80 @@ to { background-position: -200% 0;
 	cursor: pointer;
 	transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
-.cn-object-card[data-v-b7ffa14e]:hover {
+.cn-object-card[data-v-56a9e471]:hover {
 	border-color: var(--color-primary-element);
 	box-shadow: 0 2px 8px var(--color-box-shadow);
 }
-.cn-object-card--selected[data-v-b7ffa14e] {
+.cn-object-card--selected[data-v-56a9e471] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
 
 /* The 4px start border takes 3px of padding, so the content stays put. */
-.cn-object-card.cn-object-card--accent[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent[data-v-56a9e471] {
 	border-inline-start-width: 4px;
 	padding-inline-start: 13px;
 }
-.cn-object-card.cn-object-card--accent-success[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent-success[data-v-56a9e471] {
 	border-inline-start-color: var(--color-element-success);
 }
-.cn-object-card.cn-object-card--accent-warning[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent-warning[data-v-56a9e471] {
 	border-inline-start-color: var(--color-element-warning);
 }
-.cn-object-card.cn-object-card--accent-error[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent-error[data-v-56a9e471] {
 	border-inline-start-color: var(--color-element-error);
 }
-.cn-object-card.cn-object-card--accent-info[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent-info[data-v-56a9e471] {
 	border-inline-start-color: var(--color-element-info);
 }
-.cn-object-card.cn-object-card--accent-primary[data-v-b7ffa14e] {
+.cn-object-card.cn-object-card--accent-primary[data-v-56a9e471] {
 	border-inline-start-color: var(--color-primary-element);
 }
-.cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card__accent-icon[data-v-56a9e471] {
 	display: inline-flex;
 	vertical-align: -2px;
 	margin-inline-end: 4px;
 }
-.cn-object-card--accent-success .cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card--accent-success .cn-object-card__accent-icon[data-v-56a9e471] {
 	color: var(--color-text-success);
 }
-.cn-object-card--accent-warning .cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card--accent-warning .cn-object-card__accent-icon[data-v-56a9e471] {
 	color: var(--color-text-warning);
 }
-.cn-object-card--accent-error .cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card--accent-error .cn-object-card__accent-icon[data-v-56a9e471] {
 	color: var(--color-text-error);
 }
-.cn-object-card--accent-info .cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card--accent-info .cn-object-card__accent-icon[data-v-56a9e471] {
 	color: var(--color-element-info);
 }
-.cn-object-card--accent-primary .cn-object-card__accent-icon[data-v-b7ffa14e] {
+.cn-object-card--accent-primary .cn-object-card__accent-icon[data-v-56a9e471] {
 	color: var(--color-primary-element);
 }
-.cn-object-card__checkbox[data-v-b7ffa14e] {
+.cn-object-card__checkbox[data-v-56a9e471] {
 	flex-shrink: 0;
 	padding-top: 2px;
 }
-.cn-object-card__content[data-v-b7ffa14e] {
+.cn-object-card__content[data-v-56a9e471] {
 	flex: 1;
 	min-width: 0;
 }
-.cn-object-card__header[data-v-b7ffa14e] {
+.cn-object-card__header[data-v-56a9e471] {
 	display: flex;
 	gap: 12px;
 	align-items: flex-start;
 }
-.cn-object-card__image[data-v-b7ffa14e] {
+.cn-object-card__image[data-v-56a9e471] {
 	width: 48px;
 	height: 48px;
 	border-radius: var(--border-radius);
 	object-fit: cover;
 	flex-shrink: 0;
 }
-.cn-object-card__title-area[data-v-b7ffa14e] {
+.cn-object-card__title-area[data-v-56a9e471] {
 	flex: 1;
 	min-width: 0;
 }
-.cn-object-card__title[data-v-b7ffa14e] {
+.cn-object-card__title[data-v-56a9e471] {
 	margin: 0;
 	font-size: 16px;
 	font-weight: 600;
@@ -27209,16 +27389,16 @@ to { background-position: -200% 0;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-object-card__description[data-v-b7ffa14e] {
+.cn-object-card__description[data-v-56a9e471] {
 	margin: 4px 0 0;
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 	line-height: 1.4;
 }
-.cn-object-card__badges[data-v-b7ffa14e] {
+.cn-object-card__badges[data-v-56a9e471] {
 	margin-top: 8px;
 }
-.cn-object-card__metadata[data-v-b7ffa14e] {
+.cn-object-card__metadata[data-v-56a9e471] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	gap: 8px;
@@ -27226,19 +27406,19 @@ to { background-position: -200% 0;
 	padding-top: 12px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-object-card__meta-item[data-v-b7ffa14e] {
+.cn-object-card__meta-item[data-v-56a9e471] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
-.cn-object-card__meta-label[data-v-b7ffa14e] {
+.cn-object-card__meta-label[data-v-56a9e471] {
 	font-size: 11px;
 	font-weight: 500;
 	color: var(--color-text-maxcontrast);
 	text-transform: uppercase;
 	letter-spacing: 0.3px;
 }
-.cn-object-card__actions[data-v-b7ffa14e] {
+.cn-object-card__actions[data-v-56a9e471] {
 	flex-shrink: 0;
 }
 
@@ -27614,7 +27794,7 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-detail-page__catalog-action[data-v-40e8f009] {
+.cn-detail-page__catalog-action[data-v-5b39e961] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -27630,19 +27810,43 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0 14px;
 	white-space: nowrap;
 }
-.cn-detail-page__catalog-note[data-v-40e8f009] {
+
+/* A leaf card in a narrow cell keeps its title and count: the title row
+   wraps and the actions move under it instead of squeezing the title out. */
+.cn-detail-page__leaf-card[data-v-5b39e961] .cn-widget-wrapper__header {
+	flex-wrap: wrap;
+}
+.cn-detail-page__leaf-card[data-v-5b39e961] .cn-widget-wrapper__header-left {
+	flex: 1 0 auto;
+}
+
+/* The count beside a card title: the grey 20px badge of the tab strip. */
+.cn-detail-page__catalog-count[data-v-5b39e961] {
+	background-color: var(--color-border);
+	border-radius: 10px;
+	box-sizing: border-box;
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 20px;
+	min-width: 20px;
+	padding: 0 6px;
+	text-align: center;
+}
+.cn-detail-page__catalog-note[data-v-5b39e961] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-detail-widget-host[data-v-40e8f009],
-.cn-detail-widget-host[data-v-40e8f009] > * {
+.cn-detail-widget-host[data-v-5b39e961],
+.cn-detail-widget-host[data-v-5b39e961] > * {
 	height: 100%;
 }
 
 /* A bare host is a tab panel's body: it fills the panel and lets the panel
    scroll, rather than growing a second scroll region of its own. */
-.cn-detail-widget-host--bare[data-v-40e8f009] {
+.cn-detail-widget-host--bare[data-v-5b39e961] {
 	min-height: 0;
 }
 
@@ -33479,7 +33683,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 
-.cn-action-buttons[data-v-49607313] {
+.cn-action-buttons[data-v-0f9733ca] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -33489,7 +33693,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 /* In menu mode the only children are dialogs, so the wrapper must not be a
    box: an empty inline-flex child still eats one of the header's flex gaps
    and pushes the Actions menu away from the Edit button beside it. */
-.cn-action-buttons--menu[data-v-49607313] {
+.cn-action-buttons--menu[data-v-0f9733ca] {
 	display: contents;
 }
 
@@ -38707,26 +38911,26 @@ to {
   text-decoration: underline;
 }
 @charset "UTF-8";
-.cn-choice-cards[data-v-22c5fe42] {
+.cn-choice-cards[data-v-59d71736] {
   border: none;
   padding: 0;
   margin: 0;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__legend[data-v-22c5fe42] {
+.cn-choice-cards__legend[data-v-59d71736] {
   padding: 0;
   margin-block-end: 8px;
   font-weight: bold;
 }
 
-.cn-choice-cards__loading[data-v-22c5fe42] {
+.cn-choice-cards__loading[data-v-59d71736] {
   display: flex;
   justify-content: center;
   padding: 24px 0;
 }
 
-.cn-choice-cards__grid[data-v-22c5fe42] {
+.cn-choice-cards__grid[data-v-59d71736] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 12px;
@@ -38738,26 +38942,26 @@ to {
   padding: 12px;
 }
 
-.cn-choice-cards__cell[data-v-22c5fe42] {
+.cn-choice-cards__cell[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__actions[data-v-22c5fe42] {
+.cn-choice-cards__actions[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.cn-choice-cards__option[data-v-22c5fe42] {
+.cn-choice-cards__option[data-v-59d71736] {
   position: relative;
   display: block;
   cursor: pointer;
 }
 
-.cn-choice-cards__input[data-v-22c5fe42] {
+.cn-choice-cards__input[data-v-59d71736] {
   position: absolute;
   inset-block-start: 16px;
   inset-inline-end: 14px;
@@ -38767,7 +38971,7 @@ to {
 }
 
 /* Room for the input, so a long title never runs underneath it. */
-.cn-choice-cards__option[data-v-22c5fe42] .cn-card {
+.cn-choice-cards__option[data-v-59d71736] .cn-card {
   padding-inline-end: 44px;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
@@ -38778,33 +38982,33 @@ to {
    touches a card, and the grid twitches. The border colour below already
    carries hover, so the scale is dropped: at (0,3,0) this beats the global
    `.cn-card:hover` at (0,2,0). */
-.cn-choice-cards__option[data-v-22c5fe42]:hover .cn-card {
+.cn-choice-cards__option[data-v-59d71736]:hover .cn-card {
   border-color: var(--color-primary-element);
   transform: none;
 }
 
 /* The focus ring belongs on the card, not on the small input inside it. */
-.cn-choice-cards__input[data-v-22c5fe42]:focus-visible + .cn-card {
+.cn-choice-cards__input[data-v-59d71736]:focus-visible + .cn-card {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-choice-cards__input[data-v-22c5fe42]:disabled {
+.cn-choice-cards__input[data-v-59d71736]:disabled {
   cursor: default;
 }
 
-.cn-choice-cards__option--disabled .cn-choice-cards__input[data-v-22c5fe42] + .cn-card {
+.cn-choice-cards__option--disabled .cn-choice-cards__input[data-v-59d71736] + .cn-card {
   opacity: 0.6;
 }
 
-.cn-choice-cards__rows[data-v-22c5fe42] {
+.cn-choice-cards__rows[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
 /* 12px 14px, as the boards draw an option row (DqVolgendeStap, DqBesluit). */
-.cn-choice-cards__row[data-v-22c5fe42] {
+.cn-choice-cards__row[data-v-59d71736] {
   display: flex;
   align-items: flex-start;
   gap: 12px;
@@ -38815,12 +39019,12 @@ to {
   cursor: pointer;
 }
 
-.cn-choice-cards__row[data-v-22c5fe42]:hover {
+.cn-choice-cards__row[data-v-59d71736]:hover {
   border-color: var(--color-border-dark);
 }
 
-.cn-choice-cards__row--selected[data-v-22c5fe42],
-.cn-choice-cards__row--selected[data-v-22c5fe42]:hover {
+.cn-choice-cards__row--selected[data-v-59d71736],
+.cn-choice-cards__row--selected[data-v-59d71736]:hover {
   border-color: var(--color-primary-element);
   /* The second pixel of the 2px selected border, without moving the content. */
   box-shadow: inset 0 0 0 1px var(--color-primary-element);
@@ -38829,9 +39033,8 @@ to {
 
 /* An option this record does not allow: the grey ground and the muted ink,
    still legible (DqVolgendeStap), not faded. */
-.cn-choice-cards__row--disabled[data-v-22c5fe42],
-.cn-choice-cards__row--disabled[data-v-22c5fe42]:hover {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row--disabled[data-v-59d71736],
+.cn-choice-cards__row--disabled[data-v-59d71736]:hover {
   border-color: var(--color-border);
   background: var(--color-background-hover);
   color: var(--color-text-maxcontrast);
@@ -38840,82 +39043,80 @@ to {
 
 /* The title takes the muted ink itself: a theme that colours every label
    with `!important` (thematiq) would otherwise hand it the label colour. */
-.cn-choice-cards__row--disabled .cn-choice-cards__row-title[data-v-22c5fe42] {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row--disabled .cn-choice-cards__row-title[data-v-59d71736] {
   color: var(--color-text-maxcontrast);
 }
 
 /* The chosen option's fields share the selected row's frame: the cell draws
    the 2px primary border and the ground, the row inside it draws none, and
    the fields sit under the text, indented to it (DqVolgendeStap). */
-.cn-choice-cards__cell--with-details[data-v-22c5fe42] {
+.cn-choice-cards__cell--with-details[data-v-59d71736] {
   border: 1px solid var(--color-primary-element);
   border-radius: var(--border-radius-large, 8px);
   box-shadow: inset 0 0 0 1px var(--color-primary-element);
   background: var(--color-primary-element-light);
 }
 
-.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-22c5fe42],
-.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-22c5fe42]:hover {
+.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-59d71736],
+.cn-choice-cards__cell--with-details .cn-choice-cards__row[data-v-59d71736]:hover {
   border-color: transparent;
   box-shadow: none;
   background: transparent;
 }
 
-.cn-choice-cards__details[data-v-22c5fe42] {
+.cn-choice-cards__details[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 0 14px 14px 44px;
 }
 
-.cn-choice-cards__row--readonly[data-v-22c5fe42] {
+.cn-choice-cards__row--readonly[data-v-59d71736] {
   cursor: default;
 }
 
-.cn-choice-cards__row--readonly[data-v-22c5fe42]:not(.cn-choice-cards__row--selected):hover {
+.cn-choice-cards__row--readonly[data-v-59d71736]:not(.cn-choice-cards__row--selected):hover {
   border-color: var(--color-border);
 }
 
-.cn-choice-cards__row[data-v-22c5fe42]:has(.cn-choice-cards__row-input:focus-visible) {
+.cn-choice-cards__row[data-v-59d71736]:has(.cn-choice-cards__row-input:focus-visible) {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-choice-cards__row-input[data-v-22c5fe42] {
+.cn-choice-cards__row-input[data-v-59d71736] {
   flex: none;
   margin: 2px 0 0;
   accent-color: var(--color-primary-element);
   cursor: inherit;
 }
 
-.cn-choice-cards__row-icon[data-v-22c5fe42] {
+.cn-choice-cards__row-icon[data-v-59d71736] {
   flex: none;
 }
 
-.cn-choice-cards__row-text[data-v-22c5fe42] {
+.cn-choice-cards__row-text[data-v-59d71736] {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
 
-.cn-choice-cards__row-title[data-v-22c5fe42] {
+.cn-choice-cards__row-title[data-v-59d71736] {
   font-size: 15px;
   font-weight: 600;
 }
 
 /* Regular weight on the span itself: a theme that sets every label bold
    with `!important` (thematiq) reaches a span that only inherits. */
-.cn-choice-cards__row-description[data-v-22c5fe42],
-.cn-choice-cards__reason[data-v-22c5fe42] {
-  --nldesign-color-on-surface: var(--color-text-maxcontrast);
+.cn-choice-cards__row-description[data-v-59d71736],
+.cn-choice-cards__reason[data-v-59d71736] {
   font-size: 13px;
   font-weight: 400;
   color: var(--color-text-maxcontrast);
 }
 
-.cn-choice-cards__reason--card[data-v-22c5fe42] {
+.cn-choice-cards__reason--card[data-v-59d71736] {
   display: block;
   margin-block-start: 4px;
 }
@@ -39091,7 +39292,6 @@ to {
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
@@ -39408,21 +39608,21 @@ to {
 	opacity: 0.45;
 }
 
-.cn-board-view__columns[data-v-4b0d3015] {
+.cn-board-view__columns[data-v-45db9bd1] {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   align-items: flex-start;
 }
 
-.cn-board-view__column[data-v-4b0d3015] {
+.cn-board-view__column[data-v-45db9bd1] {
   flex: 0 0 260px;
   background-color: var(--color-background-hover);
   border-radius: var(--border-radius-large);
   padding: 8px;
 }
 
-.cn-board-view__column-header[data-v-4b0d3015] {
+.cn-board-view__column-header[data-v-45db9bd1] {
   display: flex;
   justify-content: space-between;
   gap: 8px;
@@ -39430,13 +39630,13 @@ to {
   margin: 0 0 8px;
 }
 
-.cn-board-view__count[data-v-4b0d3015],
-.cn-board-view__empty[data-v-4b0d3015],
-.cn-board-view__unusable[data-v-4b0d3015] {
+.cn-board-view__count[data-v-45db9bd1],
+.cn-board-view__empty[data-v-45db9bd1],
+.cn-board-view__unusable[data-v-45db9bd1] {
   color: var(--color-text-maxcontrast);
 }
 
-.cn-board-view__card[data-v-4b0d3015] {
+.cn-board-view__card[data-v-45db9bd1] {
   display: block;
   background-color: var(--color-main-background);
   border: 1px solid var(--color-border);
@@ -39445,29 +39645,29 @@ to {
   margin-bottom: 8px;
 }
 
-.cn-board-view__card-field[data-v-4b0d3015] {
+.cn-board-view__card-field[data-v-45db9bd1] {
   display: block;
 }
 
 /* A late card: an edge in the error colour, drawn as an inset shadow so the
    card keeps its size and its rounded corners. The label below carries the
    meaning; the edge only helps a sighted reader find it. */
-.cn-board-view__card--overdue[data-v-4b0d3015] {
+.cn-board-view__card--overdue[data-v-45db9bd1] {
   border-color: var(--color-error);
   box-shadow: inset 3px 0 0 var(--color-error);
 }
 
-.cn-board-view__due[data-v-4b0d3015] {
+.cn-board-view__due[data-v-45db9bd1] {
   display: block;
   font-size: 0.85em;
   font-weight: 700;
 }
 
-.cn-board-view__due--overdue[data-v-4b0d3015] {
+.cn-board-view__due--overdue[data-v-45db9bd1] {
   color: var(--color-error-text, var(--color-error));
 }
 
-.cn-board-view__due--soon[data-v-4b0d3015] {
+.cn-board-view__due--soon[data-v-45db9bd1] {
   color: var(--color-warning-text, var(--color-main-text));
   font-weight: 600;
 }
@@ -39476,7 +39676,7 @@ to {
  * The card's opening control. The cursor and the focus ring live here now,
  * on the thing that actually does something, rather than on the box.
  */
-.cn-board-view__card-open[data-v-4b0d3015] {
+.cn-board-view__card-open[data-v-45db9bd1] {
   background: none;
   border: none;
   padding: 0;
@@ -39485,12 +39685,12 @@ to {
   font-size: 0.8rem;
 }
 
-.cn-board-view__card-open[data-v-4b0d3015]:focus-visible {
+.cn-board-view__card-open[data-v-45db9bd1]:focus-visible {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-board-view__lane-header[data-v-4b0d3015] {
+.cn-board-view__lane-header[data-v-45db9bd1] {
   background: none;
   border: none;
   font-weight: bold;
@@ -39499,21 +39699,21 @@ to {
   color: var(--color-main-text);
 }
 
-.cn-board-view__move-label[data-v-4b0d3015] {
+.cn-board-view__move-label[data-v-45db9bd1] {
   color: var(--color-text-maxcontrast);
   font-size: 0.8rem;
 }
 
-.cn-board-view__refusal[data-v-4b0d3015] {
+.cn-board-view__refusal[data-v-45db9bd1] {
   color: var(--color-error);
 }
 
-.cn-board-view__count--full[data-v-4b0d3015] {
+.cn-board-view__count--full[data-v-45db9bd1] {
   color: var(--color-error-text, var(--color-error));
   font-weight: 600;
 }
 
-.cn-card-grid__grid[data-v-1c5a3f43] {
+.cn-card-grid__grid[data-v-57518930] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 	gap: 16px;
@@ -39525,15 +39725,15 @@ to {
    down with a large blank gap above them. Collapse those empty cells so the
    remaining cards start at the top. A comment-only node (`v-if` false) still
    matches `:empty` per the CSS spec, so this catches the v-if-hidden case. */
-.cn-card-grid__item[data-v-1c5a3f43]:empty {
+.cn-card-grid__item[data-v-57518930]:empty {
 	display: none;
 }
-.cn-card-grid__loading[data-v-1c5a3f43] {
+.cn-card-grid__loading[data-v-57518930] {
 	display: flex;
 	justify-content: center;
 	padding: 40px;
 }
-.cn-card-grid__empty[data-v-1c5a3f43] {
+.cn-card-grid__empty[data-v-57518930] {
 	padding: 40px 20px;
 	text-align: center;
 }
@@ -41884,12 +42084,12 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-action-dialog[data-v-0bb28fd1] {
+.cn-action-dialog[data-v-5293ec77] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-action-dialog__summary[data-v-0bb28fd1] {
+.cn-action-dialog__summary[data-v-5293ec77] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -41897,13 +42097,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-action-dialog__summary-text[data-v-0bb28fd1] {
+.cn-action-dialog__summary-text[data-v-5293ec77] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-action-dialog__badge[data-v-0bb28fd1] {
+.cn-action-dialog__badge[data-v-5293ec77] {
 	padding: 3px 10px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -41911,74 +42111,95 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-weight: 600;
 	white-space: nowrap;
 }
-.cn-action-dialog__title[data-v-0bb28fd1] {
+.cn-action-dialog__title[data-v-5293ec77] {
 	margin: 0 0 8px;
-	font-size: 15px;
-	font-weight: 700;
+	font-size: 14px;
+	font-weight: 600;
 }
-.cn-action-dialog__facts[data-v-0bb28fd1] {
+
+/* Facts in columns of at least 200px, each a label over its value above a
+   hairline (DqArchiveren "Bewaring volgens het zaaktype"). */
+.cn-action-dialog__facts[data-v-5293ec77] {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-	gap: 8px 16px;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 12px 24px;
 	margin: 0;
 }
-.cn-action-dialog__facts dt[data-v-0bb28fd1] {
+.cn-action-dialog__fact[data-v-5293ec77] {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--color-border);
+}
+.cn-action-dialog__facts dt[data-v-5293ec77] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-action-dialog__facts dd[data-v-0bb28fd1] {
+.cn-action-dialog__facts dd[data-v-5293ec77] {
 	margin: 0;
+	font-size: 15px;
+	font-weight: 500;
 }
-.cn-action-dialog__checks[data-v-0bb28fd1] {
+
+/* Checklist rows divided by hairlines, the detail at the row's end
+   (DqArchiveren "Klaar om te archiveren"). */
+.cn-action-dialog__checks[data-v-5293ec77] {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-action-dialog__check[data-v-0bb28fd1] {
+.cn-action-dialog__check[data-v-5293ec77] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 8px;
+	gap: 2px 12px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+	font-size: 15px;
 }
-.cn-action-dialog__check-icon[data-v-0bb28fd1] {
+.cn-action-dialog__check-label[data-v-5293ec77] {
+	flex: 1 1 auto;
+	font-weight: 600;
+}
+.cn-action-dialog__check-icon[data-v-5293ec77] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-action-dialog__check-icon--met[data-v-0bb28fd1] {
+.cn-action-dialog__check-icon--met[data-v-5293ec77] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-action-dialog__muted[data-v-0bb28fd1] {
+.cn-action-dialog__muted[data-v-5293ec77] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-action-dialog__field[data-v-0bb28fd1] {
+.cn-action-dialog__field[data-v-5293ec77] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-action-dialog__error[data-v-0bb28fd1] {
+.cn-action-dialog__error[data-v-5293ec77] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
 
 
-.cn-assign-dialog[data-v-9921b726] {
+.cn-assign-dialog[data-v-45153be8] {
 	display: flex;
 	flex-direction: column;
 	gap: 18px;
 }
-.cn-assign-dialog__field[data-v-9921b726] {
+.cn-assign-dialog__field[data-v-45153be8] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 }
-.cn-assign-dialog__hint[data-v-9921b726] {
+.cn-assign-dialog__hint[data-v-45153be8] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-assign-dialog__toggle[data-v-9921b726] {
+.cn-assign-dialog__toggle[data-v-45153be8] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -41986,17 +42207,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	border: 1px solid var(--color-border-dark);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-assign-dialog__toggle--on[data-v-9921b726] {
+.cn-assign-dialog__toggle--on[data-v-45153be8] {
 	border: 2px solid var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
-.cn-assign-dialog__toggle-title[data-v-9921b726] {
+.cn-assign-dialog__toggle-title[data-v-45153be8] {
 	font-weight: 600;
 }
-.cn-assign-dialog__toggle-note[data-v-9921b726] {
+.cn-assign-dialog__toggle-note[data-v-45153be8] {
 	padding-inline-start: 44px;
 }
-.cn-assign-dialog__error[data-v-9921b726] {
+.cn-assign-dialog__error[data-v-45153be8] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
@@ -42435,7 +42656,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-347a8f78] {
+.cn-dashboard-page[data-v-0270abf8] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -42449,7 +42670,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-347a8f78] {
+.cn-dashboard-page__header[data-v-0270abf8] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -42461,21 +42682,21 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-347a8f78] {
+.cn-dashboard-page__header-left[data-v-0270abf8] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-347a8f78] {
+.cn-dashboard-page__title-row[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-347a8f78] {
+.cn-dashboard-page__title[data-v-0270abf8] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-347a8f78] {
+.cn-dashboard-page__description[data-v-0270abf8] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -42483,19 +42704,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Board look (screens-dashboard-parity): h1 28/700, a 15px grey subtitle 6px
    under it, and 40px buttons with a 10px gap. */
-.cn-dashboard-page--board .cn-dashboard-page__title[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-0270abf8] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-0270abf8] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-0270abf8] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-347a8f78] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-0270abf8] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -42503,17 +42724,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* The switch row under the header (screens-dashboard-greeting-header): the
    view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
    radius 17, 13px/600, a 14px icon, primary light on primary deep). */
-.cn-dashboard-page__switch-row[data-v-347a8f78] {
+.cn-dashboard-page__switch-row[data-v-0270abf8] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 	margin-bottom: var(--cn-board-section-gap, 20px);
 }
-.cn-dashboard-page__switch-row-spacer[data-v-347a8f78] {
+.cn-dashboard-page__switch-row-spacer[data-v-0270abf8] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-347a8f78] {
+.cn-dashboard-page__view-link[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -42527,37 +42748,37 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-347a8f78]:hover {
+.cn-dashboard-page__view-link[data-v-0270abf8]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__view-link[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-347a8f78] {
+.cn-dashboard-page__view-link-icon[data-v-0270abf8] {
 	display: inline-flex;
 }
 
 /* The period group, in a row of its own between the header and the KPI row. */
-.cn-dashboard-page__date-range--segmented[data-v-347a8f78] {
+.cn-dashboard-page__date-range--segmented[data-v-0270abf8] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-347a8f78] {
+.cn-dashboard-page__description--with-period[data-v-0270abf8] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-dashboard-page__date-segmented[data-v-347a8f78] {
+.cn-dashboard-page__date-segmented[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
 /* The KPI row above the grid: tiles are cells of the auto-fit grid. */
-.cn-dashboard-page__kpi-row[data-v-347a8f78] {
+.cn-dashboard-page__kpi-row[data-v-0270abf8] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -42565,15 +42786,15 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    the cards started a margin to the right of the KPI row and the header. The
    grid reaches out by that margin, so the card edges line up with the page's
    (dashboard-grid-flush). */
-.cn-dashboard-page--board[data-v-347a8f78] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-347a8f78] {
+.cn-dashboard-page__kpi-cell[data-v-0270abf8] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-347a8f78] > * {
+.cn-dashboard-page__kpi-cell[data-v-0270abf8] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -42586,7 +42807,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    scoped chip rules then silently don't match and the chip collapses into
    NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
    data-testid is stable across chunks, so those rules match regardless. */
-.cn-dashboard-page__header-actions[data-v-347a8f78] {
+.cn-dashboard-page__header-actions[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -42602,19 +42823,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Date-range header band. Kept compact so it doesn't open a tall gap
    above the grid; the pills variant is a single tidy toggle row. */
-.cn-dashboard-page__date-range[data-v-347a8f78] {
+.cn-dashboard-page__date-range[data-v-0270abf8] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-347a8f78] {
+.cn-dashboard-page__date-range--pills[data-v-0270abf8] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-347a8f78] {
+.cn-dashboard-page__date-pills[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78] {
+.cn-dashboard-page__date-pill[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -42629,77 +42850,77 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78]:hover {
+.cn-dashboard-page__date-pill[data-v-0270abf8]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-347a8f78] {
+.cn-dashboard-page__date-pill--active[data-v-0270abf8] {
 	background: var(--color-primary-element);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-dashboard-page__date-pill--active[data-v-347a8f78]:hover {
+.cn-dashboard-page__date-pill--active[data-v-0270abf8]:hover {
 	background: var(--color-primary-element-hover, var(--color-primary-element));
 }
 
 /* The custom-range pill is de-emphasised — dashed outline, muted text —
    so it reads as an escape hatch rather than a primary option. */
-.cn-dashboard-page__date-pill--custom[data-v-347a8f78] {
+.cn-dashboard-page__date-pill--custom[data-v-0270abf8] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-347a8f78] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-0270abf8] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-347a8f78] {
+.cn-dashboard-page__empty[data-v-0270abf8] {
 	padding: 60px 20px;
 }
 
 /* The page's view switch on a page without a header row: at the end of its
    own row, above the grids, where the header would have put it. */
-.cn-dashboard-page__view-switch[data-v-347a8f78] {
+.cn-dashboard-page__view-switch[data-v-0270abf8] {
 	display: flex;
 	justify-content: flex-end;
 	margin-bottom: 12px;
 }
 
 /* A view the switch shows with nothing to draw. */
-.cn-page-view-region--empty[data-v-347a8f78] {
+.cn-page-view-region--empty[data-v-0270abf8] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-347a8f78] {
+.cn-dashboard-page__page-filters[data-v-0270abf8] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-347a8f78] {
+.cn-dashboard-page__page-filter[data-v-0270abf8] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-347a8f78] {
+.cn-dashboard-page__page-filter-label[data-v-0270abf8] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-347a8f78] {
+.cn-dashboard-page__widget-edit[data-v-0270abf8] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -42718,8 +42939,8 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    and centre the card. */
 /* `safe` centre so an overflowing tile does not spill out of the top, where
    flex overflow cannot be scrolled back to. Same as detail-page.css. */
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-347a8f78] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-0270abf8] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42735,7 +42956,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    shows up as a scrollbar the user has to drag to see the whole graph. Same
    shape as the card-fit rule above, minus the padding: chart tiles render
    `flush`, and apexcharts already draws its own margins. */
-.cn-dashboard-page__chart-fit[data-v-347a8f78] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-0270abf8] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42745,13 +42966,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* Card content (stat / gauge / delta) must fit the tile width: let the
    widget shrink and its value/label truncate instead of pushing past the
    tile edge (the horizontal clip on long currency values). */
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-347a8f78] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-0270abf8] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-347a8f78] {
+.cn-dashboard-page__unknown[data-v-0270abf8] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -42762,31 +42983,31 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-347a8f78] {
+.cn-dashboard-page__content[data-v-0270abf8] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-347a8f78] {
+.cn-dashboard-page__content-item[data-v-0270abf8] {
 	width: 100%;
 }
 /* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
    are 44px: the widget Actions menu and the KPI tiles. */
 @media (max-width: 640px) {
-.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-347a8f78] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-0270abf8] {
 		min-height: 44px;
 }
 
 	/* The widget Actions menu shows its icon only, so the card title keeps
 	   the room; the name stays for assistive tech. */
-.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-347a8f78] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-0270abf8] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -42798,7 +43019,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* What a registry widget reports for its card header (`header` event): the
    note beside the link ("3 in total") and one action, as on a detail page. */
-.cn-dashboard-page__widget-count[data-v-347a8f78] {
+.cn-dashboard-page__widget-count[data-v-0270abf8] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -42807,13 +43028,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-347a8f78] {
+.cn-dashboard-page__widget-note[data-v-0270abf8] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-347a8f78] {
+.cn-dashboard-page__widget-action[data-v-0270abf8] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -42829,7 +43050,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-347a8f78]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-0270abf8]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -43965,6 +44186,16 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
+.cn-party-picker__refusal[data-v-7202e5ff] {
+	margin: 4px 0 0;
+	color: var(--color-error-text, var(--color-error));
+}
+.cn-party-picker__unavailable[data-v-7202e5ff] {
+	margin: 4px 0 0;
+	color: var(--color-text-maxcontrast);
+}
+
+
 .cn-address-search[data-v-5c8ae3f1] {
 	width: 100%;
 }
@@ -44501,7 +44732,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-nc-dashboard-list__error[data-v-3c7adfed] {
+.cn-nc-dashboard-list__error[data-v-0cba0c1a] {
 	margin: 0;
 	padding: 8px 0;
 	color: var(--color-text-maxcontrast);
@@ -45578,51 +45809,51 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-reports-page[data-v-327b60f8] {
+.cn-reports-page[data-v-6feca28f] {
 	padding: 16px;
 }
 
 /* Clear the Nextcloud navigation toggle button (44px wide, absolutely
    positioned at the left edge of .app-content) plus 12px breathing room, as
    CnPageHeader does. Only the header shifts; the body keeps the full width. */
-.cn-reports-page__header[data-v-327b60f8] {
+.cn-reports-page__header[data-v-6feca28f] {
 	padding-inline-start: 56px;
 }
-.cn-reports-page__title[data-v-327b60f8] {
+.cn-reports-page__title[data-v-6feca28f] {
 	margin: 0 0 4px;
 }
-.cn-reports-page__heading-row[data-v-327b60f8] {
+.cn-reports-page__heading-row[data-v-6feca28f] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: space-between;
 	gap: 12px 24px;
 }
-.cn-reports-page__heading-row .cn-reports-page__title[data-v-327b60f8] {
+.cn-reports-page__heading-row .cn-reports-page__title[data-v-6feca28f] {
 	flex: 1 1 320px;
 	min-width: 0;
 }
-.cn-reports-page__header-buttons[data-v-327b60f8] {
+.cn-reports-page__header-buttons[data-v-6feca28f] {
 	display: flex;
 	flex: none;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 }
-.cn-reports-page__description[data-v-327b60f8] {
+.cn-reports-page__description[data-v-6feca28f] {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__filter[data-v-327b60f8] {
+.cn-reports-page__filter[data-v-6feca28f] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	margin-bottom: 16px;
 }
-.cn-reports-page__filter-select[data-v-327b60f8] {
+.cn-reports-page__filter-select[data-v-6feca28f] {
 	min-width: 220px;
 }
-.cn-reports-page__grid[data-v-327b60f8] {
+.cn-reports-page__grid[data-v-6feca28f] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 	gap: 12px;
@@ -45630,7 +45861,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	margin: 0;
 	padding: 0;
 }
-.cn-reports-page__card[data-v-327b60f8] {
+.cn-reports-page__card[data-v-6feca28f] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -45641,22 +45872,22 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: inherit;
 	text-decoration: none;
 }
-.cn-reports-page__card[data-v-327b60f8]:hover,
-.cn-reports-page__card[data-v-327b60f8]:focus {
+.cn-reports-page__card[data-v-6feca28f]:hover,
+.cn-reports-page__card[data-v-6feca28f]:focus {
 	background-color: var(--color-background-hover);
 }
-.cn-reports-page__card-title[data-v-327b60f8] {
+.cn-reports-page__card-title[data-v-6feca28f] {
 	font-weight: bold;
 }
-.cn-reports-page__card-description[data-v-327b60f8],
-.cn-reports-page__card-category[data-v-327b60f8] {
+.cn-reports-page__card-description[data-v-6feca28f],
+.cn-reports-page__card-category[data-v-6feca28f] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-reports-page__empty[data-v-327b60f8] {
+.cn-reports-page__empty[data-v-6feca28f] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__widgets[data-v-327b60f8] {
+.cn-reports-page__widgets[data-v-6feca28f] {
 	margin-top: 20px;
 }