@conduction/nextcloud-vue 2.97.0 → 2.99.0

package/dist/esm/nextcloud-vue.css

@@ -208,6 +208,50 @@
 	color: var(--color-primary-element-text);
 }
 
+/* ---- Header action buttons (CnActionButtons) ----------------------------- */
+/* The board draws a page's secondary actions as neutral 40px buttons: the
+   main background, a grey border, the main text at 600 (DqZaak "Bericht",
+   "Document", "Contact vastleggen", "Bewerken"). Nextcloud's secondary button
+   is a primary tint. The label hands its ink to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *),
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	height: var(--cn-board-control-height);
+	min-height: var(--cn-board-control-height);
+	padding: 0 14px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	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. */
+.cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
+	gap: 10px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) {
+	width: 16px;
+	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 {
+	width: 16px;
+	height: 16px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *):hover,
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
 /* ---- The buildiq square ------------------------------------------------ */
 .cn-look-board .cn-buildiq-edit .cn-buildiq-edit__actions .button-vue {
 	box-sizing: border-box;
@@ -220,6 +264,34 @@
 	border-radius: var(--cn-board-control-radius);
 }
 
+/* ---- The Actions menu trigger (CnActionsMenu) ---------------------------- */
+/* A menu asked for as `secondary` ("Meer" in a detail header, "Acties" at the
+   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). */
+.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-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
+/* A trailing chevron ("Meer ⌄") follows the label, 6px after it. */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle:has(.chevron-down-icon) .button-vue__wrapper:not(.cn-look-nextcloud *) {
+	flex-direction: row-reverse;
+	gap: 6px;
+}
+
 /* ---- The navigation ---------------------------------------------------- */
 .cn-look-board .app-navigation[data-testid="cn-nav"] {
 	--app-navigation-padding: 0px;
@@ -441,6 +513,71 @@
 	font-weight: 600;
 }
 
+/* ---- Breadcrumbs (CnBreadcrumbs) ----------------------------------------- */
+/* The board draws a trail as a line of 14px text, 8px apart: the crumbs that
+   lead somewhere as underlined links in the primary colour, the current one
+   as plain muted text (DqZaak "Alle zaken / 2026-0082"). NcBreadcrumbs draws
+   each crumb as a 34px tertiary button. The doubled classes outrank its
+   scoped rules; the ink goes through --nldesign-color-on-surface as well, for
+   a theme that forces the body ink onto every link and span (thematiq). */
+.cn-look-board .cn-breadcrumbs.cn-breadcrumbs:not(.cn-look-nextcloud *) {
+	min-height: 0;
+	height: auto;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-breadcrumbs .breadcrumb__crumbs:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb.vue-crumb:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element);
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: inherit;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) .button-vue__text {
+	padding: 0;
+	font-weight: inherit;
+	line-height: inherit;
+	text-decoration: underline;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) .button-vue__text {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb__separator:not(.cn-look-nextcloud *) {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
 /* ---- Settings: header, cards in a grid, version card ------------------- */
 .cn-look-board .cn-admin-settings-shell__header:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__header:not(.cn-look-nextcloud *) {
@@ -859,7 +996,26 @@
    ground ("Verzoek", "Nieuw"); the default look keeps the brighter
    primary-element text. The other tones already match the board. */
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
-	color: var(--color-primary-element-light-text);
+	--cn-status-badge-ink: var(--color-primary-element-light-text);
+	color: var(--cn-status-badge-ink);
+}
+
+/* Every board pill is 13px at 600 on a 3px 10px pad with a 12px corner
+   (DqZaak's header pills, DqZaken's status column). */
+.cn-look-board .cn-status-badge:not(.cn-status-badge--small):not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+/* 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);
 }
 
 /* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
@@ -869,6 +1025,68 @@
 	font-weight: 600;
 }
 
+/* ---- Label and value pairs (CnDetailGrid) -------------------------------- */
+/* The board draws pairs as plain text, not as grey cards with an accent bar:
+   the grid as a 13px muted label over a 15px value at weight 500 with a
+   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. */
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
+	gap: 12px 24px;
+	font-size: 15px;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal:not(.cn-look-nextcloud *) {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	font-size: 14px;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	gap: 3px;
+	padding: 0;
+	border-inline-start: none;
+	border-radius: 0;
+	background: none;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	display: contents;
+}
+
+.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;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	font-size: inherit;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	margin: 0;
+	font-size: inherit;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
 /* ---- Dashboard card titles --------------------------------------------- */
 /* A card's title on a dashboard (and on the widgets under a reports page) is
    the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
@@ -2063,10 +2281,15 @@
 	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. */
 .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);
@@ -2087,8 +2310,12 @@
 }
 
 .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. */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	background: var(--cn-board-text-soft);
+	--nldesign-color-on-surface: var(--color-primary-element-text);
+	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
 	color: var(--color-primary-element-text);
 }
 
@@ -2360,12 +2587,16 @@
 	border-radius: 0;
 }
 
-/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
+/* 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. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	padding: 12px 16px;
 	border-bottom: 0;
 	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	font-weight: 600;
 }
 
@@ -2376,6 +2607,20 @@
 	font-size: 14px;
 }
 
+/* The board sets its table at the normal line height: a row with a title and
+   a secondary line is 66px and the header row 50px (DqZaken). Nextcloud's 1.5
+   made them 71px and 67px, and the header's sort button kept the 34px
+   clickable area. */
+.cn-look-board .cn-table-container--board .cn-data-table {
+	line-height: normal;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-row {
 	border-bottom: 0;
 }
@@ -2431,7 +2676,9 @@
 	margin-inline-start: 4px;
 }
 
-/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+/* The selection column: 18px checkboxes, 28px of content between 16px of
+   padding either side, 60px in all (DqZaken and 130 other boards; the title
+   column starts 77px in).
    The box model is set with `!important` and the widths include the padding:
    Nextcloud's server.css sets `box-sizing: border-box` on everything under
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
@@ -2439,9 +2686,9 @@
    header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
-	width: 44px;
-	min-width: 44px;
-	padding-inline: 16px 0;
+	width: 60px;
+	min-width: 60px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
@@ -2449,6 +2696,16 @@
 	--icon-size: 18px;
 }
 
+/* The checkbox is the 18px box alone, as the board draws it: NcCheckboxRadioSwitch
+   wraps it in a 34px clickable area with 4px 7px of padding, a 42px block that
+   set every row's height (71px where DqZaken's rows are 66). The cell around it
+   stays the click target's room: 44px wide, a full row high. */
+.cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch .checkbox-radio-switch__content {
+	min-height: 0;
+	height: auto;
+	padding: 0;
+}
+
 /* The title column: a 15px weight 600 link, the secondary line under it. */
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title {
 	color: var(--color-main-text);
@@ -2459,6 +2716,7 @@
 }
 
 .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;
@@ -2500,10 +2758,14 @@
 	gap: 10px;
 }
 
+/* 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 {
-	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	--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;
+	font-weight: 700;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
@@ -4810,86 +5072,102 @@ a.cn-kpi-card--board * {
 
 /* Color variants */
 .cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--primary {
+	--cn-status-badge-ink: var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
+	color: var(--cn-status-badge-ink);
 }
 
 .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));
-	color: var(--color-success-text, var(--color-success));
+	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));
-	color: var(--color-warning-text, var(--color-warning));
+	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));
-	color: var(--color-error-text, var(--color-error));
+	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));
-	color: var(--color-info-text, var(--color-info, #0082c9));
+	color: var(--cn-status-badge-ink);
 }
 
 /* Work in progress ("In behandeling"), a board tone. */
 .cn-status-badge--purple {
+	--cn-status-badge-ink: var(--cn-status-purple-text);
 	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Handed on ("Omgezet naar een zaak"), a board tone. */
 .cn-status-badge--teal {
+	--cn-status-badge-ink: var(--cn-status-teal-text);
 	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--primary {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-primary-element);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--success {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-success);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-primary-text);
 	background-color: var(--color-warning);
-	color: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--error {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-error);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--info {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-info, #0082c9);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--purple {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-purple-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--teal {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-teal-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 /* ========================================
    @conduction/nextcloud-vue — Layout & Filter Utility Styles
@@ -7088,6 +7366,32 @@ a.cn-kpi-card--board * {
 	margin-top: 16px;
 }
 
+/* ---- The stages bars (CnStagesWidget `variant: "bars"`) ---------------- */
+/* DqZaak's "Voortgang": the bars sit flush with the content edge (the
+   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. */
+.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);
+	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);
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-date:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
 /* ---- The body and the side column ------------------------------------- */
 
 .cn-look-board.cn-detail-page--with-side {
@@ -7121,6 +7425,7 @@ a.cn-kpi-card--board * {
    The open tab overlaps that top border by 1px (the nav's -1px margin) and
    paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
+	align-items: flex-end;
 	border-bottom: none;
 	gap: 4px;
 	position: relative;
@@ -7163,6 +7468,9 @@ a.cn-kpi-card--board * {
 	row-gap: 4px;
 }
 
+/* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` `margin: 3px 3px 3px 0`, which put the strip
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -7170,6 +7478,7 @@ a.cn-kpi-card--board * {
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
 	font-weight: 400;
+	margin: 0;
 	min-height: 34px;
 	padding: 8px 12px;
 }
@@ -7203,9 +7512,12 @@ a.cn-kpi-card--board * {
 	padding: 0 6px;
 }
 
-/* The Actions button at the end of the strip, level with the tabs. */
+/* 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"). */
 .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 {
@@ -7263,21 +7575,26 @@ a.cn-kpi-card--board * {
 
 /* ---- Body cards and side cards ----------------------------------------- */
 
+/* A CnDetailCard takes the board card wherever it sits, not only on a detail
+   page: a dashboard or a custom page that mounts one drew the Nextcloud card
+   (a 12px 16px header over a rule). The doubled class keeps the specificity
+   the page-scoped rule had. */
+
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
-.cn-look-board .cn-detail-page .cn-detail-card {
+.cn-look-board .cn-detail-card.cn-detail-card:not(.cn-detail-card--chromeless) {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius);
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__header,
-.cn-look-board .cn-detail-page .cn-detail-card__header {
+.cn-look-board .cn-detail-card .cn-detail-card__header {
 	border-bottom: none;
 	padding: 20px 22px 0;
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__title,
-.cn-look-board .cn-detail-page .cn-detail-card__title {
+.cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
 	line-height: 1.3;
@@ -7287,7 +7604,7 @@ a.cn-kpi-card--board * {
 	padding: 12px 22px 20px;
 }
 
-.cn-look-board .cn-detail-page .cn-detail-card__content {
+.cn-look-board .cn-detail-card .cn-detail-card__content {
 	padding: 12px 22px 20px;
 }
 
@@ -7334,10 +7651,12 @@ a.cn-kpi-card--board * {
 	font-weight: 500;
 }
 
-/* Side cards: the heading is a 15px muted label, not a title. */
+/* Side cards: the heading is a 15px muted label, not a title. The tone
+   carries `!important` against a theme that colours every h3 that way
+   (thematiq's heading colour). */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__title,
 .cn-look-board .cn-detail-page__side .cn-detail-card__title {
-	color: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast) !important;
 	font-size: var(--cn-board-side-heading-size);
 	font-weight: 600;
 }
@@ -7392,17 +7711,23 @@ a.cn-kpi-card--board * {
 
 /* ---- The next-step card ------------------------------------------------- */
 
+/* The board sets the card at the browser's normal line height: a step row is
+   the 20px marker, 28px apart (DqZaak "Wat nu?"). */
 .cn-look-board .cn-next-step-card--board {
 	border-radius: 12px;
 	gap: 16px 32px;
+	line-height: normal;
 	padding: 20px 24px 20px 28px;
 }
 
+/* The kicker keeps its tone under a theme that colours every h3 with
+   `!important` (thematiq's heading colour); only `!important` beats it. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__title.cn-next-step-card__title {
-	color: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light-text) !important;
 	font-size: 13px !important;
 	font-weight: 700;
 	letter-spacing: 0.06em;
+	line-height: normal;
 	text-transform: uppercase;
 }
 
@@ -7433,11 +7758,36 @@ a.cn-kpi-card--board * {
 	padding: 0 20px;
 }
 
+/* The label alone sets the width (DqZaak: 198px for "Verder met beoordelen"):
+   NcButton pads its text 4px a side inside the button's own padding, from a
+   rule that reaches it through `:has()`, hence the doubled class. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__side .button-vue .button-vue__text.button-vue__text {
+	margin-inline: 0;
+	padding-inline: 0;
+}
+
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
 	color: var(--color-text-maxcontrast);
 	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. */
+.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);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current {
+	--nldesign-color-on-surface: 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);
+}
+
 /* ---- History: the activity tab ------------------------------------------ */
 
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__board-head {
@@ -9297,7 +9647,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-chart-widget[data-v-b7813930] {
+.cn-chart-widget[data-v-0b737464] {
 	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
@@ -9319,13 +9669,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-b7813930] {
+.cn-chart-widget--fit[data-v-0b737464] {
 	height: 100%;
 	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-chart-widget__canvas[data-v-b7813930] {
+.cn-chart-widget__canvas[data-v-0b737464] {
 	min-width: 0;
 	max-width: 100%;
 	/* Never a scroll region (see the root). `overflow-x: hidden` alone made
@@ -9338,14 +9688,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-b7813930] .apexcharts-canvas,
-.cn-chart-widget[data-v-b7813930] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-0b737464] .apexcharts-canvas,
+.cn-chart-widget[data-v-0b737464] .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-b7813930] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-0b737464] .apexcharts-canvas svg {
 	display: block;
 }
 
@@ -9353,24 +9703,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-b7813930] {
+.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-0b737464] {
 	flex: 1 1 0;
 	min-height: 0;
 	overflow: hidden;
 }
-.cn-chart-widget__fallback[data-v-b7813930] {
+.cn-chart-widget__fallback[data-v-0b737464] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	min-height: 150px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-chart-widget__html[data-v-b7813930] {
+.cn-chart-widget__html[data-v-0b737464] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-chart-widget__bar-list[data-v-b7813930] {
+.cn-chart-widget__bar-list[data-v-0b737464] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -9378,7 +9728,7 @@ a.cn-kpi-card--board * {
 	margin: 0;
 	padding: 0;
 }
-.cn-chart-widget__bar-line[data-v-b7813930] {
+.cn-chart-widget__bar-line[data-v-0b737464] {
 	align-items: center;
 	background: none;
 	border: 0;
@@ -9393,93 +9743,93 @@ a.cn-kpi-card--board * {
 	text-align: start;
 	width: 100%;
 }
-.cn-chart-widget__bar-line--drill[data-v-b7813930] {
+.cn-chart-widget__bar-line--drill[data-v-0b737464] {
 	border-radius: var(--border-radius-small, 4px);
 	cursor: pointer;
 }
-.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-b7813930],
-.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-b7813930] {
+.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-0b737464],
+.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-0b737464] {
 	text-decoration: underline;
 }
-.cn-chart-widget__bar-label[data-v-b7813930] {
+.cn-chart-widget__bar-label[data-v-0b737464] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-chart-widget__bar-track[data-v-b7813930] {
+.cn-chart-widget__bar-track[data-v-0b737464] {
 	background: var(--color-background-dark);
 	border-radius: 4px;
 	display: block;
 	height: 14px;
 	overflow: hidden;
 }
-.cn-chart-widget__bar-fill[data-v-b7813930] {
+.cn-chart-widget__bar-fill[data-v-0b737464] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-chart-widget__bar-value[data-v-b7813930] {
+.cn-chart-widget__bar-value[data-v-0b737464] {
 	font-weight: 600;
 	text-align: end;
 	white-space: nowrap;
 }
-.cn-chart-widget__footnote[data-v-b7813930] {
+.cn-chart-widget__footnote[data-v-0b737464] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
-.cn-chart-widget__matrix[data-v-b7813930] {
+.cn-chart-widget__matrix[data-v-0b737464] {
 	display: grid;
 	gap: 4px;
 }
-.cn-chart-widget__matrix-row[data-v-b7813930] {
+.cn-chart-widget__matrix-row[data-v-0b737464] {
 	display: contents;
 }
-.cn-chart-widget__matrix-head[data-v-b7813930] {
+.cn-chart-widget__matrix-head[data-v-0b737464] {
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
-.cn-chart-widget__matrix-label[data-v-b7813930] {
+.cn-chart-widget__matrix-label[data-v-0b737464] {
 	padding: 10px 6px;
 }
-.cn-chart-widget__matrix-cell[data-v-b7813930] {
+.cn-chart-widget__matrix-cell[data-v-0b737464] {
 	border-radius: 6px;
 	padding: 10px;
 	text-align: center;
 }
-.cn-chart-widget__matrix-cell--success[data-v-b7813930] {
+.cn-chart-widget__matrix-cell--success[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__matrix-cell--warning[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__matrix-cell--error[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__matrix-cell--danger[data-v-0b737464] {
 	background: color-mix(in srgb, var(--color-error) 25%, var(--color-main-background));
 }
-.cn-chart-widget__matrix-cell--current[data-v-b7813930] {
+.cn-chart-widget__matrix-cell--current[data-v-0b737464] {
 	font-weight: 700;
 	outline: 3px solid var(--color-primary-element);
 	outline-offset: -3px;
 }
-.cn-chart-widget__matrix-cell--1[data-v-b7813930] {
+.cn-chart-widget__matrix-cell--1[data-v-0b737464] {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
-.cn-chart-widget__matrix-cell--2[data-v-b7813930] {
+.cn-chart-widget__matrix-cell--2[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__matrix-cell--3[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__matrix-cell--4[data-v-0b737464] {
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-chart-widget__empty[data-v-b7813930] {
+.cn-chart-widget__empty[data-v-0b737464] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -9494,25 +9844,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-b7813930],
-.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-b7813930] {
+.cn-chart-widget--fit .cn-chart-widget__empty[data-v-0b737464],
+.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-0b737464] {
 	flex: 1 1 0;
 	min-height: 0;
 }
-.cn-chart-widget__error[data-v-b7813930] {
+.cn-chart-widget__error[data-v-0b737464] {
 	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-b7813930] {
+.cn-chart-widget__views[data-v-0b737464] {
 	display: flex;
 	gap: 4px;
 	margin-bottom: 6px;
 	justify-content: flex-end;
 }
-.cn-chart-widget__view-pill[data-v-b7813930] {
+.cn-chart-widget__view-pill[data-v-0b737464] {
 	padding: 2px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 999px;
@@ -9521,7 +9871,7 @@ a.cn-kpi-card--board * {
 	font-size: 12px;
 	cursor: pointer;
 }
-.cn-chart-widget__view-pill--active[data-v-b7813930] {
+.cn-chart-widget__view-pill--active[data-v-0b737464] {
 	background: var(--color-primary-element-light, #aad2ed);
 	color: var(--color-main-text);
 	border-color: var(--color-primary-element, #0082c9);
@@ -9550,8 +9900,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-b7813930] .apexcharts-tooltip.apexcharts-theme-light,
-.cn-chart-widget[data-v-b7813930] .apexcharts-tooltip.apexcharts-theme-dark {
+.cn-chart-widget[data-v-0b737464] .apexcharts-tooltip.apexcharts-theme-light,
+.cn-chart-widget[data-v-0b737464] .apexcharts-tooltip.apexcharts-theme-dark {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -9560,8 +9910,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-b7813930] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
-.cn-chart-widget[data-v-b7813930] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+.cn-chart-widget[data-v-0b737464] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
+.cn-chart-widget[data-v-0b737464] .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);
@@ -9570,8 +9920,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-b7813930] .apexcharts-xaxistooltip,
-.cn-chart-widget[data-v-b7813930] .apexcharts-yaxistooltip {
+.cn-chart-widget[data-v-0b737464] .apexcharts-xaxistooltip,
+.cn-chart-widget[data-v-0b737464] .apexcharts-yaxistooltip {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -9580,55 +9930,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-b7813930] .apexcharts-xaxistooltip-bottom::after,
-.cn-chart-widget[data-v-b7813930] .apexcharts-xaxistooltip-top::after {
+.cn-chart-widget[data-v-0b737464] .apexcharts-xaxistooltip-bottom::after,
+.cn-chart-widget[data-v-0b737464] .apexcharts-xaxistooltip-top::after {
 	border-bottom-color: var(--color-main-background);
 	border-top-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-b7813930] .apexcharts-xaxistooltip-bottom::before,
-.cn-chart-widget[data-v-b7813930] .apexcharts-xaxistooltip-top::before {
+.cn-chart-widget[data-v-0b737464] .apexcharts-xaxistooltip-bottom::before,
+.cn-chart-widget[data-v-0b737464] .apexcharts-xaxistooltip-top::before {
 	border-bottom-color: var(--color-border);
 	border-top-color: var(--color-border);
 }
-.cn-chart-widget[data-v-b7813930] .apexcharts-yaxistooltip-left::after,
-.cn-chart-widget[data-v-b7813930] .apexcharts-yaxistooltip-right::after {
+.cn-chart-widget[data-v-0b737464] .apexcharts-yaxistooltip-left::after,
+.cn-chart-widget[data-v-0b737464] .apexcharts-yaxistooltip-right::after {
 	border-left-color: var(--color-main-background);
 	border-right-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-b7813930] .apexcharts-yaxistooltip-left::before,
-.cn-chart-widget[data-v-b7813930] .apexcharts-yaxistooltip-right::before {
+.cn-chart-widget[data-v-0b737464] .apexcharts-yaxistooltip-left::before,
+.cn-chart-widget[data-v-0b737464] .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-b7813930] .apexcharts-menu {
+.cn-chart-widget[data-v-0b737464] .apexcharts-menu {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
 }
-.cn-chart-widget[data-v-b7813930] .apexcharts-menu .apexcharts-menu-item:hover {
+.cn-chart-widget[data-v-0b737464] .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-b7813930] .apexcharts-toolbar .apexcharts-menu-icon svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-reset-icon svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-selection-icon svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoom-icon svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-menu-icon svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-reset-icon svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-selection-icon svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoom-icon svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
 	fill: var(--color-text-maxcontrast);
 }
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
-.cn-chart-widget[data-v-b7813930] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
+.cn-chart-widget[data-v-0b737464] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
 	fill: var(--color-main-text);
 }
 
@@ -23528,86 +23878,102 @@ a.cn-kpi-card--board * {
 
 /* Color variants */
 .cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--primary {
+	--cn-status-badge-ink: var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
+	color: var(--cn-status-badge-ink);
 }
 
 .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));
-	color: var(--color-success-text, var(--color-success));
+	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));
-	color: var(--color-warning-text, var(--color-warning));
+	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));
-	color: var(--color-error-text, var(--color-error));
+	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));
-	color: var(--color-info-text, var(--color-info, #0082c9));
+	color: var(--cn-status-badge-ink);
 }
 
 /* Work in progress ("In behandeling"), a board tone. */
 .cn-status-badge--purple {
+	--cn-status-badge-ink: var(--cn-status-purple-text);
 	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Handed on ("Omgezet naar een zaak"), a board tone. */
 .cn-status-badge--teal {
+	--cn-status-badge-ink: var(--cn-status-teal-text);
 	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--primary {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-primary-element);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--success {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-success);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-primary-text);
 	background-color: var(--color-warning);
-	color: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--error {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-error);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--info {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-info, #0082c9);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--purple {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-purple-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--teal {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-teal-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 
@@ -25512,10 +25878,10 @@ button.cn-stepper__step[data-v-776581d4] {
 /* `separator`: a text separator in place of the chevron. The chevron's own
    element stays (it carries NcBreadcrumbs' spacing and its "no separator after
    the last crumb" rule); only its icon gives way to the text. */
-.cn-breadcrumbs--text-separator[data-v-54c3381a] .vue-crumb__separator svg {
+.cn-breadcrumbs--text-separator[data-v-4bee2493] .vue-crumb__separator svg {
 	display: none;
 }
-.cn-breadcrumbs--text-separator[data-v-54c3381a] .vue-crumb__separator::before {
+.cn-breadcrumbs--text-separator[data-v-4bee2493] .vue-crumb__separator::before {
 	content: var(--cn-breadcrumbs-separator);
 	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
 	color: var(--color-text-maxcontrast);
@@ -30392,6 +30758,213 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
+.cn-checklist-run__form[data-v-56cee1aa] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-checklist-run__position[data-v-56cee1aa] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-checklist-run__progress[data-v-56cee1aa] {
+	background: var(--color-border);
+	border-radius: 3px;
+	display: block;
+	height: 6px;
+	overflow: hidden;
+}
+.cn-checklist-run__progress-fill[data-v-56cee1aa] {
+	background: var(--color-primary-element);
+	display: block;
+	height: 100%;
+}
+.cn-checklist-run__live[data-v-56cee1aa],
+.cn-checklist-run__sr[data-v-56cee1aa] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+.cn-checklist-run__question[data-v-56cee1aa],
+.cn-checklist-run__photos[data-v-56cee1aa] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 12px);
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	padding: 12px 14px;
+}
+.cn-checklist-run__legend[data-v-56cee1aa] {
+	font-weight: 600;
+	padding: 0 4px;
+}
+.cn-checklist-run__help[data-v-56cee1aa] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-checklist-run__choice[data-v-56cee1aa] {
+	align-items: center;
+	display: flex;
+	gap: 10px;
+	min-height: 34px;
+}
+.cn-checklist-run__choice input[data-v-56cee1aa] {
+	accent-color: var(--color-primary-element);
+	height: 20px;
+	margin: 0;
+	width: 20px;
+}
+.cn-checklist-run__text[data-v-56cee1aa],
+.cn-checklist-run__number[data-v-56cee1aa] {
+	box-sizing: border-box;
+	width: 100%;
+}
+.cn-checklist-run__group[data-v-56cee1aa] {
+	font-weight: 600;
+	margin: 0;
+}
+.cn-checklist-run__note-label[data-v-56cee1aa] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-checklist-run__photo-list[data-v-56cee1aa] {
+	margin: 0;
+	padding-inline-start: 18px;
+}
+.cn-checklist-run__photo-button[data-v-56cee1aa] {
+	align-items: center;
+	align-self: flex-start;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-element, 8px);
+	cursor: pointer;
+	display: inline-flex;
+	font-weight: 600;
+	min-height: 34px;
+	padding: 0 14px;
+}
+.cn-checklist-run__photo-button[data-v-56cee1aa]:focus-within {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-checklist-run__photo-input[data-v-56cee1aa] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	width: 1px;
+}
+.cn-checklist-run__nav[data-v-56cee1aa] {
+	display: flex;
+	justify-content: space-between;
+}
+.cn-checklist-run__error[data-v-56cee1aa] {
+	color: var(--color-error-text, var(--color-error));
+	margin: 0;
+}
+.cn-checklist-run__empty[data-v-56cee1aa] {
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-working-calendar[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-working-calendar__head[data-v-03ee459c] {
+	align-items: center;
+	display: flex;
+	gap: 4px;
+}
+.cn-working-calendar__title[data-v-03ee459c] {
+	font-size: 15px;
+	min-width: 9em;
+	text-align: center;
+}
+.cn-working-calendar__add[data-v-03ee459c] {
+	margin-inline-start: auto;
+}
+.cn-working-calendar__grid[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-working-calendar__row[data-v-03ee459c] {
+	display: grid;
+	gap: 4px;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.cn-working-calendar__weekday[data-v-03ee459c] {
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	text-align: center;
+}
+.cn-working-calendar__day[data-v-03ee459c] {
+	align-items: center;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: 6px;
+	cursor: default;
+	display: flex;
+	font-size: 13px;
+	height: 34px;
+	justify-content: center;
+}
+.cn-working-calendar__day[data-v-03ee459c]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+.cn-working-calendar__day--off[data-v-03ee459c] {
+	background: var(--color-background-dark);
+}
+.cn-working-calendar__day--closed[data-v-03ee459c] {
+	background: var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background)));
+	border-color: var(--color-error);
+	color: var(--color-error-text, var(--color-main-text));
+	font-weight: 600;
+}
+.cn-working-calendar__day--today[data-v-03ee459c] {
+	box-shadow: inset 0 0 0 2px var(--color-primary-element);
+}
+.cn-working-calendar__live[data-v-03ee459c] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+.cn-working-calendar__note[data-v-03ee459c] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-working-calendar__form[data-v-03ee459c] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 12px;
+}
+.cn-working-calendar__field[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-working-calendar__form-actions[data-v-03ee459c] {
+	align-items: flex-end;
+	display: flex;
+	gap: 8px;
+}
+.cn-working-calendar__error[data-v-03ee459c] {
+	color: var(--color-error-text, var(--color-error));
+	margin: 0;
+}
+
+
 .cn-run-node-dialog__form[data-v-2d7cb7f5] {
 	display: flex;
 	flex-direction: column;
@@ -32618,6 +33191,101 @@ a.cn-record-list__inline-title[data-v-b768fcd6] {
 }
 
 
+.cn-settings-field[data-v-d2218996] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-settings-field__hint[data-v-d2218996],
+.cn-settings-field__error[data-v-d2218996] {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.4;
+}
+.cn-settings-field__image[data-v-d2218996] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-settings-field__image-label[data-v-d2218996] {
+	font-weight: 600;
+}
+.cn-settings-field__image-row[data-v-d2218996] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+.cn-settings-field__image-tile[data-v-d2218996] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 64px;
+	height: 64px;
+	overflow: hidden;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background: var(--color-primary-element-light);
+}
+.cn-settings-field__image-tile img[data-v-d2218996] {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+}
+.cn-settings-field__image-initials[data-v-d2218996] {
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+.cn-settings-field__hint[data-v-d2218996] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-field__error[data-v-d2218996] {
+	color: var(--color-error-text, var(--color-error));
+}
+
+
+.cn-settings-fields[data-v-65c151a8] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	container-type: inline-size;
+}
+.cn-settings-fields__grid[data-v-65c151a8] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 16px 20px;
+}
+
+/* Two or three columns where the card is wide enough; stacked otherwise. */
+@container (min-width: 520px) {
+.cn-settings-fields__grid--2[data-v-65c151a8],
+	.cn-settings-fields__grid--3[data-v-65c151a8] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@container (min-width: 780px) {
+.cn-settings-fields__grid--3[data-v-65c151a8] {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+}
+.cn-settings-fields__field--wide[data-v-65c151a8] {
+	grid-column: 1 / -1;
+}
+.cn-settings-fields__save[data-v-65c151a8] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 12px;
+}
+.cn-settings-fields__dirty[data-v-65c151a8] {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+
 ._passwordDialog_joix2_2 {
 	display: flex;
 	flex-direction: column;
@@ -36947,6 +37615,109 @@ to {
 }
 
 
+.cn-ordered-list-field[data-v-3ab313d4] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+.cn-ordered-list-field__label[data-v-3ab313d4] {
+	margin: 0;
+	font-weight: 600;
+}
+.cn-ordered-list-field__rows[data-v-3ab313d4] {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-element, 8px);
+	list-style: none;
+}
+.cn-ordered-list-field__row[data-v-3ab313d4] {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 44px;
+	padding: 2px 6px 2px 12px;
+}
+.cn-ordered-list-field__row + .cn-ordered-list-field__row[data-v-3ab313d4] {
+	border-top: 1px solid var(--color-border);
+}
+.cn-ordered-list-field__position[data-v-3ab313d4] {
+	flex: none;
+	min-width: 18px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-variant-numeric: tabular-nums;
+}
+.cn-ordered-list-field__text[data-v-3ab313d4] {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.cn-ordered-list-field__actions[data-v-3ab313d4] {
+	display: flex;
+	flex: none;
+	gap: 2px;
+}
+.cn-ordered-list-field__button[data-v-3ab313d4] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 40px;
+	min-width: 40px;
+	height: 40px;
+	min-height: 40px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius-element, 8px);
+	background: transparent;
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+.cn-ordered-list-field__button[data-v-3ab313d4]:hover:not(:disabled) {
+	background: var(--color-background-hover);
+}
+.cn-ordered-list-field__button[data-v-3ab313d4]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+.cn-ordered-list-field__button[data-v-3ab313d4]:disabled {
+	opacity: 0.4;
+	cursor: default;
+}
+.cn-ordered-list-field__empty[data-v-3ab313d4] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-ordered-list-field__tile[data-v-3ab313d4] {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+.cn-ordered-list-field__name[data-v-3ab313d4] {
+	display: block;
+}
+.cn-ordered-list-field__description[data-v-3ab313d4] {
+	display: block;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-ordered-list-field__option[data-v-3ab313d4] {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
+
+
 .cn-object-kanban__loading[data-v-1ba5f05c],
 .cn-object-kanban__empty[data-v-1ba5f05c] {
 	display: flex;
@@ -39468,7 +40239,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-7557b574] {
+.cn-dashboard-page[data-v-40c6b068] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -39482,7 +40253,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-7557b574] {
+.cn-dashboard-page__header[data-v-40c6b068] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -39494,21 +40265,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-7557b574] {
+.cn-dashboard-page__header-left[data-v-40c6b068] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-7557b574] {
+.cn-dashboard-page__title-row[data-v-40c6b068] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-7557b574] {
+.cn-dashboard-page__title[data-v-40c6b068] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-7557b574] {
+.cn-dashboard-page__description[data-v-40c6b068] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -39516,19 +40287,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-7557b574] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-40c6b068] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-7557b574] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-40c6b068] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-7557b574] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-40c6b068] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-7557b574] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-40c6b068] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -39536,17 +40307,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-7557b574] {
+.cn-dashboard-page__switch-row[data-v-40c6b068] {
 	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-7557b574] {
+.cn-dashboard-page__switch-row-spacer[data-v-40c6b068] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-7557b574] {
+.cn-dashboard-page__view-link[data-v-40c6b068] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -39560,37 +40331,37 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-7557b574]:hover {
+.cn-dashboard-page__view-link[data-v-40c6b068]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-7557b574]:focus-visible {
+.cn-dashboard-page__view-link[data-v-40c6b068]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-7557b574] {
+.cn-dashboard-page__view-link-icon[data-v-40c6b068] {
 	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-7557b574] {
+.cn-dashboard-page__date-range--segmented[data-v-40c6b068] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-7557b574] {
+.cn-dashboard-page__description--with-period[data-v-40c6b068] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-dashboard-page__date-segmented[data-v-7557b574] {
+.cn-dashboard-page__date-segmented[data-v-40c6b068] {
 	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-7557b574] {
+.cn-dashboard-page__kpi-row[data-v-40c6b068] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -39598,15 +40369,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-7557b574] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-40c6b068] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-7557b574] {
+.cn-dashboard-page__kpi-cell[data-v-40c6b068] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-7557b574] > * {
+.cn-dashboard-page__kpi-cell[data-v-40c6b068] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -39619,7 +40390,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-7557b574] {
+.cn-dashboard-page__header-actions[data-v-40c6b068] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -39635,19 +40406,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-7557b574] {
+.cn-dashboard-page__date-range[data-v-40c6b068] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-7557b574] {
+.cn-dashboard-page__date-range--pills[data-v-40c6b068] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-7557b574] {
+.cn-dashboard-page__date-pills[data-v-40c6b068] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-7557b574] {
+.cn-dashboard-page__date-pill[data-v-40c6b068] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -39662,77 +40433,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-7557b574]:hover {
+.cn-dashboard-page__date-pill[data-v-40c6b068]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-7557b574]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-40c6b068]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-7557b574] {
+.cn-dashboard-page__date-pill--active[data-v-40c6b068] {
 	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-7557b574]:hover {
+.cn-dashboard-page__date-pill--active[data-v-40c6b068]: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-7557b574] {
+.cn-dashboard-page__date-pill--custom[data-v-40c6b068] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-7557b574] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-40c6b068] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-7557b574] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-7557b574] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-7557b574] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-40c6b068] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-40c6b068] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-40c6b068] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-7557b574] {
+.cn-dashboard-page__empty[data-v-40c6b068] {
 	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-7557b574] {
+.cn-dashboard-page__view-switch[data-v-40c6b068] {
 	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-7557b574] {
+.cn-page-view-region--empty[data-v-40c6b068] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-7557b574] {
+.cn-dashboard-page__page-filters[data-v-40c6b068] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-7557b574] {
+.cn-dashboard-page__page-filter[data-v-40c6b068] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-7557b574] {
+.cn-dashboard-page__page-filter-label[data-v-40c6b068] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-7557b574] {
+.cn-dashboard-page__widget-edit[data-v-40c6b068] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -39751,8 +40522,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-7557b574] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-7557b574] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-40c6b068] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-40c6b068] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -39768,7 +40539,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-7557b574] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-40c6b068] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -39778,13 +40549,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-7557b574] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-7557b574] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-7557b574] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-40c6b068] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-40c6b068] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-40c6b068] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-7557b574] {
+.cn-dashboard-page__unknown[data-v-40c6b068] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -39795,31 +40566,31 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-7557b574] {
+.cn-dashboard-page__content[data-v-40c6b068] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-7557b574] {
+.cn-dashboard-page__content-item[data-v-40c6b068] {
 	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-7557b574] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-7557b574] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-40c6b068] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-40c6b068] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-7557b574] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-40c6b068] {
 		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-7557b574] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-40c6b068] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-7557b574] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-40c6b068] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -39831,7 +40602,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-7557b574] {
+.cn-dashboard-page__widget-count[data-v-40c6b068] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -39840,13 +40611,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-7557b574] {
+.cn-dashboard-page__widget-note[data-v-40c6b068] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-7557b574] {
+.cn-dashboard-page__widget-action[data-v-40c6b068] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -39862,7 +40633,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-7557b574]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-40c6b068]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -41914,21 +42685,21 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 
 
 /* The section wrapper draws no box; the board look makes it the card grid. */
-.cn-settings-page__sections[data-v-50865bde] {
+.cn-settings-page__sections[data-v-0b4a7625] {
 	display: contents;
 }
-.cn-settings-page__header-buttons[data-v-50865bde] {
+.cn-settings-page__header-buttons[data-v-0b4a7625] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	margin-inline-start: auto;
 }
-.cn-settings-page[data-v-50865bde] {
+.cn-settings-page[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-settings-page__actions[data-v-50865bde] {
+.cn-settings-page__actions[data-v-0b4a7625] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
@@ -41939,7 +42710,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
  * orchestration REQ-MSO-5). Uses Nextcloud CSS variables only — no
  * hex literals, no rgba overrides on the elements themselves.
  */
-.cn-settings-page__tabs[data-v-50865bde] {
+.cn-settings-page__tabs[data-v-0b4a7625] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
@@ -41947,7 +42718,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding-bottom: 0;
 	margin-bottom: 8px;
 }
-.cn-settings-page__tab[data-v-50865bde] {
+.cn-settings-page__tab[data-v-0b4a7625] {
 	background: transparent;
 	border: 0;
 	border-bottom: 3px solid transparent;
@@ -41959,52 +42730,52 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out;
 }
-.cn-settings-page__tab[data-v-50865bde]:hover,
-.cn-settings-page__tab[data-v-50865bde]:focus-visible {
+.cn-settings-page__tab[data-v-0b4a7625]:hover,
+.cn-settings-page__tab[data-v-0b4a7625]:focus-visible {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 	outline: none;
 }
-.cn-settings-page__tab--active[data-v-50865bde] {
+.cn-settings-page__tab--active[data-v-0b4a7625] {
 	color: var(--color-primary-element);
 	border-bottom-color: var(--color-primary-element);
 	font-weight: bold;
 }
 @media (max-width: 768px) {
-.cn-settings-page__tabs[data-v-50865bde] {
+.cn-settings-page__tabs[data-v-0b4a7625] {
 		flex-direction: column;
 		gap: 0;
 		border-bottom: 0;
 }
-.cn-settings-page__tab[data-v-50865bde] {
+.cn-settings-page__tab[data-v-0b4a7625] {
 		border-bottom: 1px solid var(--color-border);
 		border-radius: 0;
 		text-align: left;
 }
-.cn-settings-page__tab--active[data-v-50865bde] {
+.cn-settings-page__tab--active[data-v-0b4a7625] {
 		border-bottom-width: 1px;
 		background-color: var(--color-background-hover);
 }
 }
-.cn-settings-page__fields[data-v-50865bde] {
+.cn-settings-page__fields[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-settings-page__field[data-v-50865bde] {
+.cn-settings-page__field[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-settings-page__field-help[data-v-50865bde] {
+.cn-settings-page__field-help[data-v-0b4a7625] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-page__save-bar[data-v-50865bde] {
+.cn-settings-page__save-bar[data-v-0b4a7625] {
 	display: flex;
 	gap: 8px;
 	margin-top: 16px;
 }
-.cn-settings-page__error[data-v-50865bde] {
+.cn-settings-page__error[data-v-0b4a7625] {
 	color: var(--color-error);
 	background: var(--color-error-light, var(--color-background-hover));
 	padding: 8px 12px;
@@ -44675,17 +45446,17 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-user-settings-dialog__body[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__body[data-v-e537e50a] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0 24px;
 }
-.cn-user-settings-dialog__nav[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__nav[data-v-e537e50a] {
 	flex: 0 0 200px;
 	width: 200px;
 	padding-top: 18px;
 }
-.cn-user-settings-dialog__nav ul[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__nav ul[data-v-e537e50a] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -44693,7 +45464,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__nav-link[data-v-e537e50a] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -44704,20 +45475,20 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
-.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8]:hover {
+.cn-user-settings-dialog__nav-link[data-v-e537e50a]:hover {
 	background: var(--color-background-hover);
 }
-.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8]:focus-visible {
+.cn-user-settings-dialog__nav-link[data-v-e537e50a]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-user-settings-dialog__nav-link--active[data-v-8ebfd3c8],
-.cn-user-settings-dialog__nav-link--active[data-v-8ebfd3c8]:hover {
+.cn-user-settings-dialog__nav-link--active[data-v-e537e50a],
+.cn-user-settings-dialog__nav-link--active[data-v-e537e50a]:hover {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-weight: 600;
 }
-.cn-user-settings-dialog__nav-icon[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__nav-icon[data-v-e537e50a] {
 	display: inline-flex;
 	flex: none;
 	width: 18px;
@@ -44725,28 +45496,54 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	align-items: center;
 	justify-content: center;
 }
-.cn-user-settings-dialog__sections[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__sections[data-v-e537e50a] {
 	display: flex;
 	flex: 1 1 380px;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-user-settings-dialog__sections[data-v-8ebfd3c8] .app-settings-section {
+.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section {
 	margin: 0;
 	padding: 18px 0;
 	border-top: 1px solid var(--color-border);
 }
-.cn-user-settings-dialog__sections[data-v-8ebfd3c8] .app-settings-section__name {
+.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section__name {
 	margin: 0 0 12px;
 	font-size: 17px;
 	font-weight: 700;
+	display: flex;
+	align-items: center;
+	gap: 10px;
 }
-.cn-user-settings-dialog__note[data-v-8ebfd3c8] {
+.cn-user-settings-dialog__note[data-v-e537e50a] {
 	flex: 1 1 auto;
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
+.cn-user-settings-dialog__nc-links[data-v-e537e50a] {
+	margin-bottom: 2px;
+}
+.cn-user-settings-dialog__group[data-v-e537e50a] {
+	margin: 10px 0 2px;
+	padding: 0 12px;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-user-settings-dialog__group-sections[data-v-e537e50a] {
+	padding-inline-start: 12px;
+}
+.cn-user-settings-dialog__heading-icon[data-v-e537e50a] {
+	display: inline-flex;
+	order: -1;
+	color: var(--color-text-maxcontrast);
+}
+
+/* One section at a time: the others are mounted but hidden. */
+.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section[hidden] {
+	display: none;
+}
 
 
 /* The environment banner runs along the top of the shell and cannot scroll away; the shell makes room for it. */
@@ -45165,7 +45962,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-features-board[data-v-f306c9ee] {
+.cn-features-board[data-v-ed367d64] {
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
@@ -45174,20 +45971,20 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	max-width: 1240px;
 	width: 100%;
 }
-.cn-features-board__header[data-v-f306c9ee] {
+.cn-features-board__header[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 	padding: 4px 0 8px;
 }
-.cn-features-board__title-row[data-v-f306c9ee] {
+.cn-features-board__title-row[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	align-items: flex-start;
 	gap: 12px 24px;
 }
-.cn-features-board__title[data-v-f306c9ee] {
+.cn-features-board__title[data-v-ed367d64] {
 	flex: 1 1 320px;
 	min-width: 0;
 	margin: 0;
@@ -45195,32 +45992,32 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-features-board__header-actions[data-v-f306c9ee] {
+.cn-features-board__header-actions[data-v-ed367d64] {
 	flex: none;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 }
-.cn-features-board__subtitle[data-v-f306c9ee] {
+.cn-features-board__subtitle[data-v-ed367d64] {
 	margin: 0;
 	font-size: 15px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__tab-row[data-v-f306c9ee] {
+.cn-features-board__tab-row[data-v-ed367d64] {
 	display: flex;
 	align-items: flex-end;
 	gap: 8px;
 	margin-bottom: calc(-1 * var(--cn-board-section-gap, 20px));
 }
-.cn-features-board__tabs[data-v-f306c9ee] {
+.cn-features-board__tabs[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 	flex: 1 1 auto;
 	min-width: 0;
 }
-.cn-features-board__tab[data-v-f306c9ee] {
+.cn-features-board__tab[data-v-ed367d64] {
 	display: inline-flex;
 	align-items: center;
 	box-sizing: border-box;
@@ -45237,35 +46034,35 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	cursor: pointer;
 	white-space: nowrap;
 }
-.cn-features-board__tab--active[data-v-f306c9ee] {
+.cn-features-board__tab--active[data-v-ed367d64] {
 	position: relative;
 	background: var(--color-main-background);
 	border-bottom: 1px solid var(--color-main-background);
 	font-weight: 700;
 }
-.cn-features-board__tab-actions[data-v-f306c9ee] {
+.cn-features-board__tab-actions[data-v-ed367d64] {
 	flex: none;
 	align-self: flex-start;
 	margin: 0 8px 8px 0;
 }
-.cn-features-board__panel[data-v-f306c9ee] {
+.cn-features-board__panel[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 22px;
 }
-.cn-features-board__panel--tabbed[data-v-f306c9ee] {
+.cn-features-board__panel--tabbed[data-v-ed367d64] {
 	padding: 22px;
 	border: 1px solid var(--color-border);
 	border-radius: 0 var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
 }
-.cn-features-board__filter[data-v-f306c9ee] {
+.cn-features-board__filter[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-features-board__filter-option[data-v-f306c9ee] {
+.cn-features-board__filter-option[data-v-ed367d64] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -45274,7 +46071,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-weight: 600;
 	cursor: pointer;
 }
-.cn-features-board__filter--chips .cn-features-board__filter-option[data-v-f306c9ee] {
+.cn-features-board__filter--chips .cn-features-board__filter-option[data-v-ed367d64] {
 	height: 36px;
 	padding: 0 14px;
 	border: 1px solid var(--color-border-dark);
@@ -45282,19 +46079,19 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 }
-.cn-features-board__filter--chips .cn-features-board__filter-option--active[data-v-f306c9ee] {
+.cn-features-board__filter--chips .cn-features-board__filter-option--active[data-v-ed367d64] {
 	border-color: var(--color-main-text);
 	background: var(--color-main-text);
 	color: var(--color-main-background);
 }
-.cn-features-board__filter-count[data-v-f306c9ee] {
+.cn-features-board__filter-count[data-v-ed367d64] {
 	font-weight: 400;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__filter--chips .cn-features-board__filter-option--active .cn-features-board__filter-count[data-v-f306c9ee] {
+.cn-features-board__filter--chips .cn-features-board__filter-option--active .cn-features-board__filter-count[data-v-ed367d64] {
 	color: var(--color-border-dark);
 }
-.cn-features-board__filter--segmented[data-v-f306c9ee] {
+.cn-features-board__filter--segmented[data-v-ed367d64] {
 	display: inline-flex;
 	align-self: flex-start;
 	gap: 2px;
@@ -45302,7 +46099,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: 8px;
 	background: var(--color-background-dark);
 }
-.cn-features-board__filter--segmented .cn-features-board__filter-option[data-v-f306c9ee] {
+.cn-features-board__filter--segmented .cn-features-board__filter-option[data-v-ed367d64] {
 	height: 34px;
 	padding: 0 14px;
 	border: 0;
@@ -45310,65 +46107,65 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	background: transparent;
 	color: var(--color-main-text);
 }
-.cn-features-board__filter--segmented .cn-features-board__filter-option--active[data-v-f306c9ee] {
+.cn-features-board__filter--segmented .cn-features-board__filter-option--active[data-v-ed367d64] {
 	background: var(--color-main-background);
 	box-shadow: 0 1px 2px rgba(27, 28, 29, 0.12);
 }
-.cn-features-board__body[data-v-f306c9ee] {
+.cn-features-board__body[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	gap: 24px;
 }
-.cn-features-board__groups[data-v-f306c9ee] {
+.cn-features-board__groups[data-v-ed367d64] {
 	flex: 999 1 520px;
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 26px;
 }
-.cn-features-board__groups--rows[data-v-f306c9ee] {
+.cn-features-board__groups--rows[data-v-ed367d64] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 	gap: 20px;
 }
-.cn-features-board__group[data-v-f306c9ee] {
+.cn-features-board__group[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	max-width: none;
 	margin: 0;
 }
-.cn-features-board__groups--rows .cn-features-board__group[data-v-f306c9ee] {
+.cn-features-board__groups--rows .cn-features-board__group[data-v-ed367d64] {
 	padding: var(--cn-board-card-padding, 20px 22px);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
 }
-.cn-features-board__group-head[data-v-f306c9ee] {
+.cn-features-board__group-head[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
 	gap: 10px;
 }
-.cn-features-board__group-title[data-v-f306c9ee] {
+.cn-features-board__group-title[data-v-ed367d64] {
 	margin: 0;
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-features-board__groups--rows .cn-features-board__group-title[data-v-f306c9ee] {
+.cn-features-board__groups--rows .cn-features-board__group-title[data-v-ed367d64] {
 	font-size: 17px;
 }
-.cn-features-board__group-caption[data-v-f306c9ee] {
+.cn-features-board__group-caption[data-v-ed367d64] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__cards[data-v-f306c9ee] {
+.cn-features-board__cards[data-v-ed367d64] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 	gap: 16px;
 }
-.cn-features-board__card[data-v-f306c9ee] {
+.cn-features-board__card[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -45377,24 +46174,24 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
 }
-.cn-features-board__card-head[data-v-f306c9ee] {
+.cn-features-board__card-head[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 4px;
 }
-.cn-features-board__card-title[data-v-f306c9ee] {
+.cn-features-board__card-title[data-v-ed367d64] {
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
 	line-height: 1.3;
 }
-.cn-features-board__card-summary[data-v-f306c9ee] {
+.cn-features-board__card-summary[data-v-ed367d64] {
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-main-text);
 }
-.cn-features-board__card-footer[data-v-f306c9ee] {
+.cn-features-board__card-footer[data-v-ed367d64] {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
@@ -45403,7 +46200,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding-top: 10px;
 	border-top: 1px solid var(--color-background-dark);
 }
-.cn-features-board__read-more[data-v-f306c9ee] {
+.cn-features-board__read-more[data-v-ed367d64] {
 	display: inline-flex;
 	align-items: center;
 	height: 34px;
@@ -45416,14 +46213,14 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-weight: 600;
 	text-decoration: none;
 }
-.cn-features-board__rows[data-v-f306c9ee] {
+.cn-features-board__rows[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-features-board__row[data-v-f306c9ee] {
+.cn-features-board__row[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -45431,27 +46228,27 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 10px 0;
 	border-top: 1px solid var(--color-background-dark);
 }
-.cn-features-board__row-text[data-v-f306c9ee] {
+.cn-features-board__row-text[data-v-ed367d64] {
 	flex: 1 1 240px;
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
-.cn-features-board__row-title[data-v-f306c9ee] {
+.cn-features-board__row-title[data-v-ed367d64] {
 	font-size: 15px;
 	font-weight: 500;
 }
-.cn-features-board__row-summary[data-v-f306c9ee] {
+.cn-features-board__row-summary[data-v-ed367d64] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__next[data-v-f306c9ee] {
+.cn-features-board__next[data-v-ed367d64] {
 	flex: 1 1 280px;
 	min-width: 0;
 	max-width: 340px;
 }
-.cn-features-board__next-card[data-v-f306c9ee] {
+.cn-features-board__next-card[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -45460,22 +46257,22 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-background-hover);
 }
-.cn-features-board__next-head[data-v-f306c9ee] {
+.cn-features-board__next-head[data-v-ed367d64] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
-.cn-features-board__next-title[data-v-f306c9ee] {
+.cn-features-board__next-title[data-v-ed367d64] {
 	margin: 0;
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-features-board__next-lead[data-v-f306c9ee] {
+.cn-features-board__next-lead[data-v-ed367d64] {
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__next-list[data-v-f306c9ee] {
+.cn-features-board__next-list[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -45483,7 +46280,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-features-board__next-item[data-v-f306c9ee] {
+.cn-features-board__next-item[data-v-ed367d64] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -45492,14 +46289,14 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: 10px;
 	background: var(--color-main-background);
 }
-.cn-features-board__next-link[data-v-f306c9ee] {
+.cn-features-board__next-link[data-v-ed367d64] {
 	font-size: 15px;
 	font-weight: 600;
 	line-height: 1.3;
 	color: var(--color-main-text);
 	text-decoration: none;
 }
-.cn-features-board__next-meta[data-v-f306c9ee] {
+.cn-features-board__next-meta[data-v-ed367d64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -45507,23 +46304,23 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__next-opened[data-v-f306c9ee] {
+.cn-features-board__next-opened[data-v-ed367d64] {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 }
-.cn-features-board__next-more[data-v-f306c9ee] {
+.cn-features-board__next-more[data-v-ed367d64] {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 	font-size: 14px;
 	font-weight: 600;
 }
-.cn-features-board__empty[data-v-f306c9ee] {
+.cn-features-board__empty[data-v-ed367d64] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__notice[data-v-f306c9ee] {
+.cn-features-board__notice[data-v-ed367d64] {
 	margin: 0;
 }
 
@@ -45573,12 +46370,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-features-and-roadmap-view[data-v-f19c0cb4] {
+.cn-features-and-roadmap-view[data-v-3db485a4] {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 24px 16px;
 }
-.cn-features-and-roadmap-view__header[data-v-f19c0cb4] {
+.cn-features-and-roadmap-view__header[data-v-3db485a4] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -45590,29 +46387,29 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	   room. Only the HEADER shifts right — the panel below keeps full width. */
 	padding-inline-start: 56px;
 }
-.cn-features-and-roadmap-view__title[data-v-f19c0cb4] {
+.cn-features-and-roadmap-view__title[data-v-3db485a4] {
 	font-size: 1.4em;
 	margin: 0;
 	color: var(--color-main-text);
 }
-.cn-features-and-roadmap-view__actions[data-v-f19c0cb4] {
+.cn-features-and-roadmap-view__actions[data-v-3db485a4] {
 	display: flex;
 	gap: 8px;
 	align-items: center;
 	flex-wrap: wrap;
 }
-.cn-features-and-roadmap-view__panel[data-v-f19c0cb4] {
+.cn-features-and-roadmap-view__panel[data-v-3db485a4] {
 	min-height: 320px;
 }
 
 /* Underline the inline docs URL so it reads as a link inside the note
    body — NcNoteCard's default link styling drops the underline by
    inheriting from the host theme. */
-.cn-features-and-roadmap-view__docs-note[data-v-f19c0cb4] a {
+.cn-features-and-roadmap-view__docs-note[data-v-3db485a4] a {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-features-and-roadmap-view__docs-note[data-v-f19c0cb4] a:hover {
+.cn-features-and-roadmap-view__docs-note[data-v-3db485a4] a:hover {
 	text-decoration: underline;
 	opacity: 0.85;
 }