@conduction/nextcloud-vue 2.110.0 → 2.112.0

package/dist/esm/nextcloud-vue.css

@@ -91,14 +91,19 @@
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
 	--cn-board-control-radius: 8px;
+	/* A control's edge: 3:1 against every ground a control sits on (WCAG
+	   1.4.11). Nextcloud's border-dark is a hairline (#dbdbdb, 1.4:1); its
+	   max-contrast border is the control step, and a theme sets both. */
+	--cn-board-control-border: var(--color-border-maxcontrast);
 	/* Cards. */
 	--cn-board-card-radius: 12px;
 	--cn-board-card-padding: 20px 22px;
 	/* The side inset of a dashboard card: its title and its rows. */
 	--cn-board-dashboard-card-inset: 24px;
-	/* Hairline inside a card, and the soft secondary text. */
+	/* Hairline inside a card, and the soft secondary text: the boards' #3d4047,
+	   between the main text and the muted text, so it follows a theme's pair. */
 	--cn-board-hairline: var(--color-border);
-	--cn-board-text-soft: var(--color-main-text);
+	--cn-board-text-soft: color-mix(in srgb, var(--color-main-text) 45%, var(--color-text-maxcontrast));
 }
 
 /*
@@ -250,6 +255,47 @@
 	--font-weight-element: 600;
 }
 
+/* ---- A button with an icon and a label --------------------------------- */
+/* The boards draw it 14px in at both sides with 14px text and a 16px icon
+   8px from its label (DqZaakEmail "Notitie toevoegen", DqVthInstellingen
+   "Regel toevoegen"). NcButton pads its start 4px and its end 12px, and puts
+   a 20px icon in a 30px slot. The rules hold the condition in `:where()`, so
+   they weigh (0,3,0): enough to outrank NcButton's own (0,2,0), and less than
+   any surface rule (header, toolbar, follow pill, Meer chevron, tab strip),
+   which keeps its own value. The padding goes through NcButton's
+   `--button-padding`, so a surface that sets `padding` is never contested.
+   @spec openspec/changes/board-icon-label-button/specs/board-icon-label-button/spec.md#requirement-a-board-button-with-an-icon-and-a-label-is-padded-as-the-boards-draw-it */
+.cn-look-board .button-vue.button-vue:where(:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--button-padding: 14px;
+	font-size: 14px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__wrapper.button-vue__wrapper {
+	gap: 8px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon.button-vue__icon {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+}
+
+.cn-look-board :where(.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)):not(.cn-look-nextcloud *):not(.vue-crumb *)) .button-vue__icon svg {
+	width: 16px;
+	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 *),
@@ -279,7 +325,7 @@
 	--nldesign-component-button-primary-action-font-weight: 600;
 	--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(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -293,7 +339,7 @@
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
 	gap: 8px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -325,7 +371,7 @@
 	height: var(--cn-board-control-height);
 	min-height: var(--cn-board-control-height);
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -333,8 +379,9 @@
 	font-weight: 600;
 }
 
-/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
-   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+/* Buttons 10px apart, each icon 16px (DqZaak's header, DqZaken's
+   "Downloaden"); NcButton draws a 20px icon in a 30px slot. The 8px to the
+   label is the board's icon-and-label gap above. */
 .cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
 	gap: 10px;
 }
@@ -344,7 +391,6 @@
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
@@ -379,7 +425,7 @@
    body ink onto every span (thematiq). */
 .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(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -1176,6 +1222,15 @@
 	line-height: normal;
 }
 
+/* A neutral board tag ("Normaal", "Uit") is the soft text on the chip ground,
+   not the main text on the darker background a Nextcloud tag takes.
+   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-neutral-board-tag-is-soft-text-on-the-chip-ground */
+.cn-look-board .cn-status-badge--default:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	--cn-status-badge-ink: var(--cn-board-text-soft);
+	background-color: var(--color-background-hover);
+	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
@@ -1300,7 +1355,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,
@@ -1314,7 +1369,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) ---------------------- */
@@ -1509,6 +1564,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).
  *
@@ -1531,7 +1604,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;
 }
@@ -1597,6 +1670,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;
@@ -1612,13 +1686,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;
@@ -1658,6 +1743,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 {
@@ -1734,15 +1841,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;
@@ -2099,10 +2222,13 @@
 	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(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */
@@ -2474,7 +2600,7 @@
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -2598,7 +2724,7 @@
 	min-height: 38px;
 	margin: 0;
 	padding: 0 14px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 19px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -2633,9 +2759,12 @@
 	color: var(--color-main-background);
 }
 
-/* The count badge: grey on an idle chip, soft text colour on the selected one. */
+/* The count badge: grey on an idle chip, soft text colour on the selected one.
+   Its ink also goes to --nldesign-color-on-surface, which a theme that forces
+   the body ink onto every span (thematiq) reads. */
 .cn-look-board .cn-saved-views__chip .cn-saved-views__chip-count,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__count {
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	min-width: 0;
 	padding: 1px 7px;
 	border: 0;
@@ -2644,22 +2773,25 @@
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
 	font-weight: 600;
-	line-height: 1.4;
+	/* 16px tall on its 1px pad, as the boards draw it (DqTaken, DqWerkbord).
+	   @spec openspec/changes/board-pill-tones/specs/board-pill-tones/spec.md#requirement-a-board-count-is-16px-tall */
+	line-height: 14px;
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
-/* On the selected chip the count is a lighter bubble on the dark chip
-   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
-   text, the chip's own colour, which hid the bubble. */
+/* 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: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-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;
@@ -2700,9 +2832,10 @@
    @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(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 }
 
@@ -2729,6 +2862,8 @@
 	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;
@@ -2837,7 +2972,7 @@
 	height: 40px;
 	padding-block: 0;
 	padding-inline: 38px 12px !important;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 8px;
 	font-size: 14px;
 }
@@ -2847,7 +2982,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;
@@ -2991,9 +3129,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;
 }
 
@@ -3049,6 +3191,7 @@
 	min-width: 22px;
 	height: 22px;
 	min-height: 22px;
+	border-radius: 4px;
 	margin-inline-start: 4px;
 }
 
@@ -3214,7 +3357,7 @@
 	height: 34px !important;
 	min-height: 34px !important;
 	padding: 0 !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: 8px !important;
 	color: var(--cn-board-text-soft) !important;
 }
@@ -3257,6 +3400,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;
@@ -3269,6 +3414,7 @@
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: 14px;
+	font-weight: 400;
 	cursor: pointer;
 }
 
@@ -3689,6 +3835,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
    ======================================== */
@@ -6421,11 +6617,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;
@@ -6433,6 +6635,7 @@ a.cn-kpi-card--board * {
 
 .cn-index-page__map-item {
 	display: flex;
+	flex: none;
 	gap: 12px;
 	padding: 12px 14px;
 }
@@ -6471,11 +6674,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;
@@ -6485,6 +6699,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);
@@ -6500,6 +6720,7 @@ a.cn-kpi-card--board * {
 
 .cn-index-page__map-missing {
 	display: flex;
+	flex: none;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 8px;
@@ -7945,6 +8166,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 ------------------------------- */
@@ -8000,7 +8227,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -8013,13 +8240,13 @@ a.cn-kpi-card--board * {
 	background: var(--color-background-hover) !important;
 }
 
-/* Each header icon is 16px with 8px to its label; NcButton draws 20px in a 30px slot. */
+/* Each header icon is 16px; NcButton draws 20px in a 30px slot. The 8px to
+   the label is the board's icon-and-label gap (look-board.css). */
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon {
 	width: 16px;
 	min-width: 16px;
 	height: 16px;
 	min-height: 16px;
-	margin-inline-end: 8px;
 }
 
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary .button-vue__icon svg {
@@ -8027,6 +8254,17 @@ a.cn-kpi-card--board * {
 	height: 16px;
 }
 
+/* Row 3: the Follow control under the breadcrumb, on the full width.
+   @spec openspec/changes/board-follow-row/specs/board-follow-row/spec.md#requirement-the-board-follow-control-sits-under-the-breadcrumb */
+.cn-look-board .cn-detail-page__header-row3 {
+	align-items: center;
+	display: flex;
+	flex: 1 0 100%;
+	flex-wrap: wrap;
+	gap: 8px;
+	min-width: 0;
+}
+
 /* Row 2: pills, breadcrumb, dot, meta, chips. */
 .cn-look-board .cn-detail-page__header-row2 {
 	align-items: center;
@@ -8126,24 +8364,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;
 }
 
@@ -8184,14 +8425,14 @@ a.cn-kpi-card--board * {
 	--nldesign-component-button-border-radius: 14px;
 	--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(--color-border-dark);
+	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
 	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
 	box-sizing: border-box;
 	height: 28px;
 	min-height: 28px;
 	min-width: 0;
 	padding: 0 10px;
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 14px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
@@ -8281,13 +8522,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;
@@ -8302,7 +8545,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;
@@ -8329,13 +8572,14 @@ a.cn-kpi-card--board * {
 
 /* The Actions button at the end of the strip: at the top, 8px in from the
    end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
-   lower than the button (DqZaak "Acties"). */
+   lower than the button, 12px in at both sides (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
 	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
+	--button-padding: 12px;
 	min-height: 34px;
 	block-size: 34px;
 }
@@ -8412,15 +8656,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. */
@@ -8428,13 +8674,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;
@@ -8482,7 +8733,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
@@ -8599,21 +8850,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 ------------------------------------------ */
@@ -8659,7 +8913,7 @@ a.cn-kpi-card--board * {
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__kind {
 	align-items: center;
 	background: var(--color-main-background);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--cn-board-control-border);
 	border-radius: 18px;
 	color: var(--color-main-text);
 	cursor: pointer;
@@ -8934,7 +9188,7 @@ a.cn-kpi-card--board * {
 	height: var(--cn-board-control-height) !important;
 	min-height: var(--cn-board-control-height) !important;
 	padding: 0 14px !important;
-	border: 1px solid var(--color-border-dark) !important;
+	border: 1px solid var(--cn-board-control-border) !important;
 	border-radius: var(--cn-board-control-radius) !important;
 	background: var(--color-main-background) !important;
 	color: var(--color-main-text) !important;
@@ -10475,7 +10729,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
@@ -10497,13 +10751,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
@@ -10516,14 +10770,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;
 }
 
@@ -10531,24 +10785,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;
@@ -10556,7 +10810,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;
@@ -10571,100 +10825,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;
@@ -10679,25 +10940,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;
@@ -10706,7 +10967,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);
@@ -10735,8 +10996,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);
@@ -10745,8 +11006,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);
@@ -10755,8 +11016,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);
@@ -10765,55 +11026,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);
 }
 
@@ -12409,57 +12670,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;
@@ -12469,26 +12730,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;
@@ -12500,12 +12761,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;
@@ -12515,7 +12776,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);
@@ -12529,34 +12790,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;
@@ -12564,33 +12825,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;
@@ -12598,52 +12859,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;
@@ -13998,29 +14259,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;
@@ -14028,7 +14297,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;
@@ -14041,22 +14310,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);
 }
@@ -22784,7 +23053,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;
@@ -22793,10 +23062,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;
@@ -22804,22 +23073,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;
@@ -22827,7 +23096,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;
@@ -22835,22 +23104,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;
 }
 
@@ -22862,7 +23131,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);
@@ -22871,44 +23140,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);
@@ -22916,10 +23185,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;
@@ -22931,22 +23200,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;
@@ -27053,7 +27322,7 @@ to { background-position: -200% 0;
 }
 
 
-.cn-object-card[data-v-b7ffa14e] {
+.cn-object-card[data-v-56a9e471] {
 	display: flex;
 	gap: 12px;
 	padding: 16px;
@@ -27063,80 +27332,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;
@@ -27145,16 +27414,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;
@@ -27162,19 +27431,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;
 }
 
@@ -27550,7 +27819,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;
@@ -27566,19 +27835,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;
 }
 
@@ -39027,10 +39320,13 @@ 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(--color-main-text);
+	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;
-	font-weight: 400;
+	font-weight: 700;
+	/* 16px tall on its 1px pad (DqWerkbord's column counts). */
+	line-height: 14px;
 }
 
 /* A column at its limit: the count in the error colour; "full" is said in words too. */
@@ -39341,21 +39637,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;
@@ -39363,13 +39659,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);
@@ -39378,29 +39674,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;
 }
@@ -39409,7 +39705,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;
@@ -39418,12 +39714,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;
@@ -39432,21 +39728,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;
@@ -39458,15 +39754,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;
 }
@@ -41817,12 +42113,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;
@@ -41830,13 +42126,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);
@@ -41844,74 +42140,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-label[data-v-5293ec77] {
+	flex: 1 1 auto;
+	font-weight: 600;
 }
-.cn-action-dialog__check-icon[data-v-0bb28fd1] {
+.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;
@@ -41919,17 +42236,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));
 }
@@ -43898,6 +44215,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%;
 }
@@ -44434,7 +44761,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);