@conduction/nextcloud-vue 2.103.0 → 2.105.0

package/dist/nextcloud-vue.css

@@ -94,6 +94,8 @@
 	/* Cards. */
 	--cn-board-card-radius: 12px;
 	--cn-board-card-padding: 20px 22px;
+	/* The side inset of a dashboard card: its title and its rows. */
+	--cn-board-dashboard-card-inset: 24px;
 	/* Hairline inside a card, and the soft secondary text. */
 	--cn-board-hairline: var(--color-border);
 	--cn-board-text-soft: var(--color-main-text);
@@ -123,6 +125,23 @@
 	margin-inline: 0;
 }
 
+/* The page shows the content area's ground (the theme's content surface,
+   light grey on the boards) and draws none of its own; only its cards are
+   white. A theme rule that paints every `[class*="panel"]` with the main
+   background (the nldesign theme's element overrides) caught an index page
+   with a side panel (`cn-index-page--with-side-panel`) and drew the whole
+   page white (DqTeamwachtrij). That rule carries an id through
+   `:not(#header *)`, so this one names an id in `:not()` to outrank it.
+   @spec openspec/changes/board-page-ground/specs/board-page-ground/spec.md#requirement-a-board-page-draws-no-ground-of-its-own */
+.cn-look-board .cn-index-page:not(#cn-board-page-ground):not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-page:not(#cn-board-page-ground):not(.cn-look-nextcloud *),
+.cn-look-board .cn-dashboard-page:not(#cn-board-page-ground):not(.cn-look-nextcloud *),
+.cn-look-board .cn-settings-page:not(#cn-board-page-ground):not(.cn-look-nextcloud *),
+.cn-look-board .cn-store-page:not(#cn-board-page-ground):not(.cn-look-nextcloud *),
+.cn-look-board .cn-admin-settings-shell:not(#cn-board-page-ground):not(.cn-look-nextcloud *) {
+	background-color: transparent;
+}
+
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page:not(.cn-look-nextcloud *) {
 	gap: var(--cn-board-section-gap);
@@ -222,6 +241,27 @@
 	gap: 10px;
 }
 
+/* The nldesign theme paints every primary and secondary button with
+   `!important` through its button tokens: weight 700, and a secondary in
+   the primary colour with a primary border on no ground. The board draws
+   header buttons at 600, the secondary on the main background with a grey
+   border (DqMijnWerk, DqZaak, DqZaken). The look hands the theme those values
+   through the same tokens, so the theme's own rules draw the board's button.
+   @spec openspec/changes/board-header-buttons-theme/specs/board-header-buttons-theme/spec.md#requirement-board-header-buttons-keep-the-boards-weight-and-ground-under-a-theme */
+.cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
+.cn-look-board .cn-dashboard-page__header-actions:not(.cn-look-nextcloud *),
+.cn-look-board .cn-settings-page__header-buttons:not(.cn-look-nextcloud *),
+.cn-look-board .cn-admin-settings-shell__header-buttons:not(.cn-look-nextcloud *),
+.cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
+	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-primary-action-font-weight: 600;
+	--nldesign-component-button-secondary-action-color: var(--color-main-text);
+	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
+	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
+}
+
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *) .button-vue,
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *) .button-vue,
 .cn-look-board .cn-dashboard-page__header-actions:not(.cn-look-nextcloud *) .button-vue,
@@ -1225,6 +1265,20 @@
 	line-height: 1.3;
 }
 
+/* The board draws no rule under a dashboard card's title (DqMijnWerk,
+   DqDashboard, PqMijnWerk): the title sits 20px from the card's top and on
+   the card's 24px side inset, the line its rows start on, 12px above the
+   content. A borderless card has no edge to inset from and keeps the
+   wrapper's padding.
+   @spec openspec/changes/board-dashboard-card-header/specs/board-dashboard-card-header/spec.md#requirement-a-board-dashboard-card-draws-no-header-rule */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__header {
+	border-bottom: none;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless) .cn-widget-wrapper__header {
+	padding: 20px var(--cn-board-dashboard-card-inset) 12px;
+}
+
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
 /* The dashboard's card body is flush, so the rows carry their own inset: the
    board's card pads 24px at the sides and each row 14px, a soft hairline
@@ -1341,6 +1395,47 @@
 	display: none;
 }
 
+/* ---- Widgets that drew their rows on the card's edge -------------------- */
+/* The card body is flush, so a widget carries the card's side inset itself,
+   as the record list and saved views do. Without it the task list's
+   checkboxes, the step bar and its legend, the week strip's days, the bar
+   list and the activity items started on the card's edge, and a table's
+   first column 16px in (DqMijnWerk "Mijn taken", "Mijn 14 zaken per stap",
+   "Termijnen deze week", "Recente activiteit"; DqDashboard "Zaken per
+   status", "Vastgelopen zaken"). The top inset is 4px: with the header's
+   12px it is the board's 16px from title to bar. This also replaces the
+   step bar's and week strip's opt-in `content.inset` on a board dashboard.
+   A borderless card stands on the page ground and keeps its rows flush.
+   @spec openspec/changes/board-dashboard-widget-inset/specs/board-dashboard-widget-inset/spec.md#requirement-a-board-dashboard-widget-keeps-the-cards-side-inset */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-tasks-widget {
+	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-stacked-bar,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-week-strip {
+	box-sizing: border-box;
+	padding: 4px var(--cn-board-dashboard-card-inset) 22px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-chart-widget__html {
+	padding: 4px var(--cn-board-dashboard-card-inset) 20px;
+}
+
+/* An activity item pads itself 4px, so the body takes 4px less. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-nc-widget-widget__body {
+	padding: 0 calc(var(--cn-board-dashboard-card-inset) - 4px) 16px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-widget-object-table .cn-data-table th:first-child,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-widget-object-table .cn-data-table td:first-child {
+	padding-inline-start: var(--cn-board-dashboard-card-inset);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-widget-object-table .cn-data-table th:last-child,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-widget-object-table .cn-data-table td:last-child {
+	padding-inline-end: var(--cn-board-dashboard-card-inset);
+}
+
 /* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
 /* The days wrap inside the card instead of scrolling sideways: a row holds
    as many days of at least 120px as the card fits, and the rest go to the
@@ -1360,23 +1455,13 @@
 	flex-wrap: wrap;
 }
 
-/* ---- Bar-list and matrix cards (DqDashboard) ----------------------------- */
-/* The board draws no rule under the title of a card holding a bar list or a
-   matrix. Other cards, plain stat tiles among them, keep theirs.
-   @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-board-bar-list-and-matrix-cards-draw-no-header-rule */
-.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:has(.cn-chart-widget__html) .cn-widget-wrapper__header {
-	border-bottom: none;
-}
-
 /* ---- A card of boxed stat tiles (DcRapportages "Vergaderingen en efficiëntie") -- */
 /* The board draws this card 22px from its edge on every side but the bottom
-   (20px), the header 14px above the tiles, and no rule under the header. The
-   card-fit cell padding (8px 14px) plus the grid's own 24px came to 38px at
-   the sides, with the wrapper's divider under the title.
+   (20px) and the header 14px above the tiles. The card-fit cell padding
+   (8px 14px) plus the grid's own 24px came to 38px at the sides.
    @spec openspec/changes/stats-box-card-inset/specs/stats-box-card-inset/spec.md#requirement-a-card-of-boxed-stat-tiles-keeps-the-boards-inset */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:has(.cn-stats-block-widget--tiles-box) .cn-widget-wrapper__header {
 	padding: 20px 22px 0;
-	border-bottom: none;
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:has(.cn-stats-block-widget--tiles-box) .cn-widget-wrapper__content {
@@ -1401,7 +1486,11 @@
  *   --cn-dialog-eyebrow-tracking     letter spacing; 0 by default, 0.06em suits capitals
  */
 
+/* The nldesign theme sets a dialog's radius with `!important` through its
+   dialog radius token, so the board's 12px goes to that token.
+   @spec openspec/changes/board-dialog-theme/specs/board-dialog-theme/spec.md#requirement-a-board-dialog-keeps-its-frame-and-inset-under-a-theme */
 .cn-dialog-board {
+	--nldesign-component-dialog-border-radius: var(--cn-board-card-radius, 12px);
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
 	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
@@ -1414,16 +1503,26 @@
 	background-color: color-mix(in srgb, var(--color-main-text) 45%, transparent);
 }
 
-/* Width by role, capped at the viewport minus a 16px gutter each side. */
+/* Width by role, capped at the viewport minus a 16px gutter each side. The
+   shadow carries `!important`: the nldesign theme removes every
+   `.modal-container`'s shadow with `!important` and offers no token for it. */
 .modal-mask.cn-dialog-board .modal-wrapper--normal > .modal-container,
 .modal-mask.cn-dialog-board .modal-wrapper .modal-container {
 	width: var(--cn-dialog-width);
 	max-width: min(var(--cn-dialog-width), calc(100% - 32px));
 	border-radius: var(--cn-board-card-radius, 12px);
-	box-shadow: 0 12px 40px color-mix(in srgb, var(--color-main-text) 28%, transparent);
+	box-shadow: 0 12px 40px color-mix(in srgb, var(--color-main-text) 28%, transparent) !important;
 	overflow: hidden;
 }
 
+/* The board's header and body carry their own 24px inset. NcDialog pads its
+   container 4px at the top and 12px at the start, which put the title and
+   the fields 36px in; its rule outranked the one above through the scoped
+   `.dialog__modal[data-v-…]`, so this one names the class too. */
+.modal-mask.cn-dialog-board.dialog__modal .modal-wrapper .modal-container {
+	padding: 0;
+}
+
 /* The header is ours: NcModal's own close button and NcDialog's heading give
    way (the heading stays as the accessible name, visually hidden). The mask
    class raises the rule above NcButton's `.button-vue[data-v-…]`, whose
@@ -1657,6 +1756,10 @@
 		border-radius: 16px 16px 0 0;
 	}
 
+	.cn-dialog-board {
+		--nldesign-component-dialog-border-radius: 16px 16px 0 0;
+	}
+
 	.modal-mask.cn-dialog-board .modal-container::before {
 		content: '';
 		display: block;
@@ -2436,8 +2539,15 @@
 	gap: 8px;
 }
 
+/* A chip is a <button>: the nldesign theme sets every button's radius and
+   weight with `!important` through its button tokens, which drew the chips
+   as 8px boxes at 700 (DqTeamwachtrij), so the chip hands its pill radius and
+   600 to those tokens.
+   @spec openspec/changes/board-chips-theme/specs/board-chips-theme/spec.md#requirement-board-chips-stay-pills-under-a-theme */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab {
+	--nldesign-component-button-border-radius: 19px;
+	--nldesign-component-button-font-weight: 600;
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -2540,12 +2650,30 @@
 	padding: 0;
 }
 
-/* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
+/* The toolbar's buttons are the board's neutral control (DqTeamwachtrij
+   "Filter"): the main text at 600 on the main background with a grey border.
+   The nldesign theme paints a secondary button in the primary colour with
+   `!important` through its button tokens, so the bar hands the board's values
+   to those tokens.
+   @spec openspec/changes/board-toolbar-buttons-theme/specs/board-toolbar-buttons-theme/spec.md#requirement-board-toolbar-buttons-are-neutral-under-a-theme */
+.cn-look-board .cn-actions-bar:not(.cn-look-nextcloud *) {
+	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-secondary-action-color: var(--color-main-text);
+	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
+	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
+}
+
+/* Filter: a labelled secondary button, 36px, radius 8, 12px at both sides
+   and 14px text, with the active count. NcButton with an icon pads its start
+   4px and sets 15px. */
 .cn-look-board .cn-actions-bar__filter-button.button-vue,
 .cn-look-board .cn-actions-bar__filter-menu .button-vue {
 	min-height: 36px;
 	height: 36px;
+	padding: 0 12px;
 	border-radius: 8px;
+	font-size: 14px;
 	font-weight: 600;
 }
 
@@ -2645,6 +2773,17 @@
 	cursor: not-allowed;
 }
 
+/* `searchPlacement: "toolbar"`: the search field on row 1 takes the room
+   before Filter and the view switch, which keep the end of the row. */
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-actions-bar__search--toolbar {
+	flex: 1 1 220px;
+	min-width: 180px;
+}
+
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-actions-bar__search--toolbar ~ .cn-actions-bar__view-controls {
+	margin-inline-start: 0;
+}
+
 /* The search field: 40px, radius 8, not a pill. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__search {
 	flex: 1 1 260px;
@@ -2775,9 +2914,18 @@
 
 /* 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. */
+   which a theme that forces the body ink onto every span (thematiq) reads.
+   The nldesign theme paints every `th` with `!important` through its table
+   header tokens, and the sort button in it through its button weight token
+   (bold), so the cell hands the board's ground, ink and weight to those
+   tokens too.
+   @spec openspec/changes/board-table-head-theme/specs/board-table-head-theme/spec.md#requirement-a-board-table-header-keeps-the-boards-ground-ink-and-weight-under-a-theme */
 .cn-look-board .cn-table-container--board .cn-data-table th {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-font-weight: 600;
+	--nldesign-component-button-font-weight: 600;
 	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)));
@@ -3381,6 +3529,43 @@
 .cn-look-board:has(.cn-index-page) > .app-sidebar__toggle {
 	display: none;
 }
+
+/* The folder pane as a card (DqAfdelingen): 280px, a hairline border, 12px
+   corners, with each folder's count in a grey pill. */
+.cn-look-board .cn-index-page__folder-pane {
+	flex: 0 0 280px;
+	align-self: flex-start;
+	margin-inline-end: 20px;
+	padding: 14px;
+	border: 1px solid var(--cn-board-hairline);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__count {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	box-sizing: border-box;
+	border-radius: 10px;
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+	font-weight: 600;
+}
+
+/* The selected folder's heading above the list: a 20px title over a soft line. */
+.cn-look-board .cn-index-page__scope-heading {
+	margin-bottom: 16px;
+}
+
+.cn-look-board .cn-index-page__scope-title {
+	font-size: 20px;
+	font-weight: 700;
+}
 /* ========================================
    @conduction/nextcloud-vue — Table Styles
    ======================================== */
@@ -6193,6 +6378,25 @@ a.cn-kpi-card--board * {
 	font-size: 14px;
 }
 
+/* The selected folder's heading above the list. */
+.cn-index-page__scope-heading {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 12px;
+}
+
+.cn-index-page__scope-title {
+	margin: 0;
+	font-size: 1.25em;
+	font-weight: 700;
+}
+
+.cn-index-page__scope-subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Opt-in folder navigation pane (left of the list). */
 .cn-index-page__folder-pane {
 	flex: 0 0 240px;
@@ -7735,6 +7939,58 @@ a.cn-kpi-card--board * {
 	width: auto;
 }
 
+/* ---- The follow pill (DqZaak "Volgen") ---------------------------------- */
+/* The board draws the follow control under the title as a 28px pill: 13px
+   text at 600 on the main background, a grey border, a 14px icon 6px from its
+   label. Live it was Nextcloud's 34px tertiary button, 15px bold in the
+   primary colour. The theme tokens carry the weight and radius past the
+   nldesign theme's `!important`; the follower count takes the same pill.
+   @spec openspec/changes/board-follow-pill/specs/board-follow-pill/spec.md#requirement-the-board-follow-control-is-a-pill */
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue {
+	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-border-radius: 14px;
+	--nldesign-component-button-secondary-action-color: var(--color-main-text);
+	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
+	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
+	box-sizing: border-box;
+	height: 28px;
+	min-height: 28px;
+	min-width: 0;
+	padding: 0 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 14px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__wrapper {
+	gap: 6px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__icon {
+	width: 14px;
+	min-width: 14px;
+	height: 14px;
+	min-height: 14px;
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__text {
+	margin: 0;
+	padding: 0;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it
@@ -7754,7 +8010,7 @@ a.cn-kpi-card--board * {
 }
 
 /* Tabs sit on the card's top edge; only the open tab reaches 1px further
-   down (min-height 35px below), over the card's top border. Top-aligned so
+   down (min-height 38px below), over the card's top border. Top-aligned so
    the inactive tabs do not stretch to the open tab's height. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav {
 	align-items: flex-start;
@@ -7788,8 +8044,15 @@ a.cn-kpi-card--board * {
 
 /* `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"). */
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen").
+   The nldesign theme sets every button's weight and radius with `!important`
+   through its button tokens, which drew every tab bold with four rounded
+   corners; the tab hands the board's values to those tokens. A tab is 37px
+   with or without a count (DqZaak), not 34px without one.
+   @spec openspec/changes/board-tabs-theme/specs/board-tabs-theme/spec.md#requirement-board-folder-tabs-keep-the-boards-weight-shape-and-height-under-a-theme */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
+	--nldesign-component-button-font-weight: 400;
+	--nldesign-component-button-border-radius: 8px 8px 0 0;
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
 	border-bottom: none;
@@ -7797,17 +8060,18 @@ a.cn-kpi-card--board * {
 	font-size: 14px;
 	font-weight: 400;
 	margin: 0;
-	min-height: 34px;
+	min-height: 37px;
 	padding: 8px 12px;
 }
 
 /* The open tab: the panel's colour, bold, and no coloured top edge. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item.cn-tabs__nav-item--active {
+	--nldesign-component-button-font-weight: 700;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
-	min-height: 35px;
+	min-height: 38px;
 	padding-bottom: 9px;
 	padding-top: 8px;
 	position: relative;
@@ -7988,6 +8252,19 @@ a.cn-kpi-card--board * {
 	padding: 10px 22px 20px;
 }
 
+/* A stat tile in a side card (DqZaak "Termijn") sits on the card's inset as
+   the board draws it. The card-fit wrapper is flush, and the wrapper's own
+   flush rule loads after this sheet and outranked the side card's padding,
+   so the value sat 11px from the card's edge instead of 23px.
+   @spec openspec/changes/board-dashboard-widget-inset/specs/board-dashboard-widget-inset/spec.md#requirement-a-stat-tile-in-a-detail-side-card-keeps-the-cards-inset */
+.cn-look-board .cn-detail-page__side .cn-detail-page__card-fit > .cn-widget-wrapper__content:has(> .cn-kpi-card--board) {
+	padding: 10px 22px 20px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-detail-page__card-fit > .cn-widget-wrapper__content > .cn-kpi-card--board {
+	padding: 0;
+}
+
 /* No Actions menu on a side card. */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__actions {
 	display: none;
@@ -9965,7 +10242,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-chart-widget[data-v-7d7200f4] {
+.cn-chart-widget[data-v-1c17a450] {
 	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
@@ -9987,13 +10264,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-7d7200f4] {
+.cn-chart-widget--fit[data-v-1c17a450] {
 	height: 100%;
 	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-chart-widget__canvas[data-v-7d7200f4] {
+.cn-chart-widget__canvas[data-v-1c17a450] {
 	min-width: 0;
 	max-width: 100%;
 	/* Never a scroll region (see the root). `overflow-x: hidden` alone made
@@ -10006,14 +10283,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-7d7200f4] .apexcharts-canvas,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-canvas,
+.cn-chart-widget[data-v-1c17a450] .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-7d7200f4] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-canvas svg {
 	display: block;
 }
 
@@ -10021,24 +10298,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-7d7200f4] {
+.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-1c17a450] {
 	flex: 1 1 0;
 	min-height: 0;
 	overflow: hidden;
 }
-.cn-chart-widget__fallback[data-v-7d7200f4] {
+.cn-chart-widget__fallback[data-v-1c17a450] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	min-height: 150px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-chart-widget__html[data-v-7d7200f4] {
+.cn-chart-widget__html[data-v-1c17a450] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-chart-widget__bar-list[data-v-7d7200f4] {
+.cn-chart-widget__bar-list[data-v-1c17a450] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -10046,7 +10323,7 @@ a.cn-kpi-card--board * {
 	margin: 0;
 	padding: 0;
 }
-.cn-chart-widget__bar-line[data-v-7d7200f4] {
+.cn-chart-widget__bar-line[data-v-1c17a450] {
 	align-items: center;
 	background: none;
 	border: 0;
@@ -10061,100 +10338,100 @@ a.cn-kpi-card--board * {
 	text-align: start;
 	width: 100%;
 }
-.cn-chart-widget__bar-line--drill[data-v-7d7200f4] {
+.cn-chart-widget__bar-line--drill[data-v-1c17a450] {
 	border-radius: var(--border-radius-small, 4px);
 	cursor: pointer;
 }
-.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-7d7200f4],
-.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-7d7200f4] {
+.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-1c17a450],
+.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-1c17a450] {
 	text-decoration: underline;
 }
-.cn-chart-widget__bar-label[data-v-7d7200f4] {
+.cn-chart-widget__bar-label[data-v-1c17a450] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-chart-widget__bar-track[data-v-7d7200f4] {
+.cn-chart-widget__bar-track[data-v-1c17a450] {
 	background: var(--color-background-dark);
 	border-radius: 4px;
 	display: block;
 	height: 14px;
 	overflow: hidden;
 }
-.cn-chart-widget__bar-fill[data-v-7d7200f4] {
+.cn-chart-widget__bar-fill[data-v-1c17a450] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-chart-widget__bar-value[data-v-7d7200f4] {
+.cn-chart-widget__bar-value[data-v-1c17a450] {
 	font-weight: 600;
 	text-align: end;
 	white-space: nowrap;
 }
-.cn-chart-widget__footnote[data-v-7d7200f4] {
+.cn-chart-widget__footnote[data-v-1c17a450] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
 /* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
    its own line height while the canvas takes the rest of a fitted column. */
-.cn-chart-widget > .cn-chart-widget__footnote[data-v-7d7200f4] {
+.cn-chart-widget > .cn-chart-widget__footnote[data-v-1c17a450] {
 	flex: 0 0 auto;
 	margin-top: 8px;
 }
-.cn-chart-widget__matrix[data-v-7d7200f4] {
+.cn-chart-widget__matrix[data-v-1c17a450] {
 	display: grid;
 	gap: 4px;
 }
-.cn-chart-widget__matrix-row[data-v-7d7200f4] {
+.cn-chart-widget__matrix-row[data-v-1c17a450] {
 	display: contents;
 }
-.cn-chart-widget__matrix-head[data-v-7d7200f4] {
+.cn-chart-widget__matrix-head[data-v-1c17a450] {
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
-.cn-chart-widget__matrix-label[data-v-7d7200f4] {
+.cn-chart-widget__matrix-label[data-v-1c17a450] {
 	padding: 10px 6px;
 }
-.cn-chart-widget__matrix-cell[data-v-7d7200f4] {
+.cn-chart-widget__matrix-cell[data-v-1c17a450] {
 	border-radius: 6px;
 	padding: 10px;
 	text-align: center;
 }
-.cn-chart-widget__matrix-cell--success[data-v-7d7200f4] {
+.cn-chart-widget__matrix-cell--success[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__matrix-cell--warning[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__matrix-cell--error[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__matrix-cell--danger[data-v-1c17a450] {
 	background: color-mix(in srgb, var(--color-error) 25%, var(--color-main-background));
 }
-.cn-chart-widget__matrix-cell--current[data-v-7d7200f4] {
+.cn-chart-widget__matrix-cell--current[data-v-1c17a450] {
 	font-weight: 700;
 	outline: 3px solid var(--color-primary-element);
 	outline-offset: -3px;
 }
-.cn-chart-widget__matrix-cell--1[data-v-7d7200f4] {
+.cn-chart-widget__matrix-cell--1[data-v-1c17a450] {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
-.cn-chart-widget__matrix-cell--2[data-v-7d7200f4] {
+.cn-chart-widget__matrix-cell--2[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__matrix-cell--3[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__matrix-cell--4[data-v-1c17a450] {
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-chart-widget__empty[data-v-7d7200f4] {
+.cn-chart-widget__empty[data-v-1c17a450] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -10169,25 +10446,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-7d7200f4],
-.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-7d7200f4] {
+.cn-chart-widget--fit .cn-chart-widget__empty[data-v-1c17a450],
+.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-1c17a450] {
 	flex: 1 1 0;
 	min-height: 0;
 }
-.cn-chart-widget__error[data-v-7d7200f4] {
+.cn-chart-widget__error[data-v-1c17a450] {
 	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-7d7200f4] {
+.cn-chart-widget__views[data-v-1c17a450] {
 	display: flex;
 	gap: 4px;
 	margin-bottom: 6px;
 	justify-content: flex-end;
 }
-.cn-chart-widget__view-pill[data-v-7d7200f4] {
+.cn-chart-widget__view-pill[data-v-1c17a450] {
 	padding: 2px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 999px;
@@ -10196,7 +10473,7 @@ a.cn-kpi-card--board * {
 	font-size: 12px;
 	cursor: pointer;
 }
-.cn-chart-widget__view-pill--active[data-v-7d7200f4] {
+.cn-chart-widget__view-pill--active[data-v-1c17a450] {
 	background: var(--color-primary-element-light, #aad2ed);
 	color: var(--color-main-text);
 	border-color: var(--color-primary-element, #0082c9);
@@ -10225,8 +10502,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-7d7200f4] .apexcharts-tooltip.apexcharts-theme-light,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-tooltip.apexcharts-theme-dark {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-light,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-dark {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10235,8 +10512,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-7d7200f4] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
 	background: var(--color-background-hover);
 	border-bottom: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10245,8 +10522,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-7d7200f4] .apexcharts-xaxistooltip,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-yaxistooltip {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -10255,55 +10532,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-7d7200f4] .apexcharts-xaxistooltip-bottom::after,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-xaxistooltip-top::after {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-bottom::after,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-top::after {
 	border-bottom-color: var(--color-main-background);
 	border-top-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-xaxistooltip-bottom::before,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-xaxistooltip-top::before {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-bottom::before,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-xaxistooltip-top::before {
 	border-bottom-color: var(--color-border);
 	border-top-color: var(--color-border);
 }
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-yaxistooltip-left::after,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-yaxistooltip-right::after {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-left::after,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-right::after {
 	border-left-color: var(--color-main-background);
 	border-right-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-yaxistooltip-left::before,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-yaxistooltip-right::before {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-yaxistooltip-left::before,
+.cn-chart-widget[data-v-1c17a450] .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-7d7200f4] .apexcharts-menu {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-menu {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
 }
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-menu .apexcharts-menu-item:hover {
+.cn-chart-widget[data-v-1c17a450] .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-7d7200f4] .apexcharts-toolbar .apexcharts-menu-icon svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-reset-icon svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-selection-icon svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoom-icon svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-menu-icon svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-reset-icon svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-selection-icon svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoom-icon svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
 	fill: var(--color-text-maxcontrast);
 }
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
-.cn-chart-widget[data-v-7d7200f4] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
+.cn-chart-widget[data-v-1c17a450] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
 	fill: var(--color-main-text);
 }
 
@@ -26026,6 +26303,42 @@ to { background-position: -200% 0;
 }
 
 
+.cn-notice-widget[data-v-74287902] {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 14px 16px;
+	border-radius: var(--cn-board-card-radius, 12px);
+	font-size: 14px;
+	line-height: 1.5;
+	background: color-mix(in srgb, var(--color-info, #0071ad) 10%, var(--color-main-background));
+	color: var(--color-main-text);
+}
+.cn-notice-widget--warning[data-v-74287902] {
+	background: var(--color-warning-light, #fff4de);
+	color: var(--color-warning-text, #7a4f00);
+}
+.cn-notice-widget--error[data-v-74287902] {
+	background: color-mix(in srgb, var(--color-error, #db0606) 10%, var(--color-main-background));
+	color: var(--color-error-text, var(--color-main-text));
+}
+.cn-notice-widget--success[data-v-74287902] {
+	background: color-mix(in srgb, var(--color-success, #2d7b41) 10%, var(--color-main-background));
+	color: var(--color-success-text, var(--color-main-text));
+}
+.cn-notice-widget__icon[data-v-74287902] {
+	flex: 0 0 auto;
+	margin-top: 2px;
+}
+.cn-notice-widget__text[data-v-74287902] {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+.cn-notice-widget__title[data-v-74287902] {
+	font-weight: 700;
+}
+
+
 .cn-saved-view-alert[data-v-4439a3f3] {
 	display: flex;
 	flex-direction: column;
@@ -26771,16 +27084,16 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-widget-object-table[data-v-dfdcad2a] {
+.cn-widget-object-table[data-v-d628ab02] {
 	width: 100%;
 }
-.cn-widget-object-table__footer[data-v-dfdcad2a] {
+.cn-widget-object-table__footer[data-v-d628ab02] {
 	display: flex;
 	gap: 4px;
 	padding: 4px 8px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-widget-object-table__error[data-v-dfdcad2a] {
+.cn-widget-object-table__error[data-v-d628ab02] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-size: 0.85em;
 	margin: 4px 8px 0;
@@ -34065,33 +34378,33 @@ a.cn-record-list__inline-title[data-v-7d1cc1e6] {
 }
 
 
-.cn-settings-field[data-v-d2218996] {
+.cn-settings-field[data-v-7acf5300] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
 }
-.cn-settings-field__hint[data-v-d2218996],
-.cn-settings-field__error[data-v-d2218996] {
+.cn-settings-field__hint[data-v-7acf5300],
+.cn-settings-field__error[data-v-7acf5300] {
 	margin: 0;
 	font-size: 13px;
 	line-height: 1.4;
 }
-.cn-settings-field__image[data-v-d2218996] {
+.cn-settings-field__image[data-v-7acf5300] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 }
-.cn-settings-field__image-label[data-v-d2218996] {
+.cn-settings-field__image-label[data-v-7acf5300] {
 	font-weight: 600;
 }
-.cn-settings-field__image-row[data-v-d2218996] {
+.cn-settings-field__image-row[data-v-7acf5300] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 12px;
 }
-.cn-settings-field__image-tile[data-v-d2218996] {
+.cn-settings-field__image-tile[data-v-7acf5300] {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -34102,20 +34415,20 @@ a.cn-record-list__inline-title[data-v-7d1cc1e6] {
 	border-radius: var(--border-radius-large);
 	background: var(--color-primary-element-light);
 }
-.cn-settings-field__image-tile img[data-v-d2218996] {
+.cn-settings-field__image-tile img[data-v-7acf5300] {
 	max-width: 100%;
 	max-height: 100%;
 	object-fit: contain;
 }
-.cn-settings-field__image-initials[data-v-d2218996] {
+.cn-settings-field__image-initials[data-v-7acf5300] {
 	font-size: 20px;
 	font-weight: 700;
 	color: var(--color-primary-element-light-text, var(--color-primary-element));
 }
-.cn-settings-field__hint[data-v-d2218996] {
+.cn-settings-field__hint[data-v-7acf5300] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-field__error[data-v-d2218996] {
+.cn-settings-field__error[data-v-7acf5300] {
 	color: var(--color-error-text, var(--color-error));
 }
 
@@ -34431,40 +34744,40 @@ a.cn-record-list__inline-title[data-v-7d1cc1e6] {
 }
 
 
-.cn-version-info__card[data-v-f0527aa2] {
+.cn-version-info__card[data-v-61e98520] {
 	background: var(--color-background-hover);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	padding: 20px;
 	margin-bottom: 20px;
 }
-.cn-version-info__card h4[data-v-f0527aa2] {
+.cn-version-info__card h4[data-v-61e98520] {
 	margin: 0 0 16px 0;
 	font-size: 16px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-version-info__details[data-v-f0527aa2] {
+.cn-version-info__details[data-v-61e98520] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-version-info__item[data-v-f0527aa2] {
+.cn-version-info__item[data-v-61e98520] {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 8px 0;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-version-info__item[data-v-f0527aa2]:last-child {
+.cn-version-info__item[data-v-61e98520]:last-child {
 	border-bottom: none;
 }
-.cn-version-info__label[data-v-f0527aa2] {
+.cn-version-info__label[data-v-61e98520] {
 	font-weight: 500;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-version-info__value[data-v-f0527aa2] {
+.cn-version-info__value[data-v-61e98520] {
 	font-family: 'Courier New', Courier, monospace;
 	font-weight: 600;
 	color: var(--color-main-text);
@@ -34472,28 +34785,28 @@ a.cn-record-list__inline-title[data-v-7d1cc1e6] {
 }
 
 /* Status classes for values */
-.cn-version-info__status--ok[data-v-f0527aa2] {
+.cn-version-info__status--ok[data-v-61e98520] {
 	color: var(--color-success);
 	font-weight: 600;
 }
-.cn-version-info__status--warning[data-v-f0527aa2] {
+.cn-version-info__status--warning[data-v-61e98520] {
 	color: var(--color-warning);
 	font-weight: 600;
 }
-.cn-version-info__status--error[data-v-f0527aa2] {
+.cn-version-info__status--error[data-v-61e98520] {
 	color: var(--color-error);
 	font-weight: 600;
 }
 @media (max-width: 768px) {
-.cn-version-info__item[data-v-f0527aa2] {
+.cn-version-info__item[data-v-61e98520] {
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 4px;
 }
-.cn-version-info__label[data-v-f0527aa2] {
+.cn-version-info__label[data-v-61e98520] {
 		font-weight: 600;
 }
-.cn-version-info__value[data-v-f0527aa2] {
+.cn-version-info__value[data-v-61e98520] {
 		word-break: break-all;
 }
 }
@@ -37815,28 +38128,28 @@ to {
 }
 
 
-.cn-setup-step[data-v-130330d9] {
+.cn-setup-step[data-v-dd2d6164] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-setup-step__intro[data-v-130330d9] {
+.cn-setup-step__intro[data-v-dd2d6164] {
 	margin: 0;
 	font-size: 15px;
 	line-height: 1.5;
 }
-.cn-setup-step__note[data-v-130330d9] {
+.cn-setup-step__note[data-v-dd2d6164] {
 	margin: 0;
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-setup-step__nav[data-v-130330d9] {
+.cn-setup-step__nav[data-v-dd2d6164] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
 	margin-top: 8px;
 }
-.cn-setup-step__running[data-v-130330d9] {
+.cn-setup-step__running[data-v-dd2d6164] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -37844,43 +38157,43 @@ to {
 	padding: 24px 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-setup-load-result[data-v-130330d9] {
+.cn-setup-load-result[data-v-dd2d6164] {
 	margin: 0;
 	font-size: var(--font-size-small, 13px);
 }
-.cn-setup-load-result--success[data-v-130330d9] {
+.cn-setup-load-result--success[data-v-dd2d6164] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-setup-load-result--error[data-v-130330d9] {
+.cn-setup-load-result--error[data-v-dd2d6164] {
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-setup-field[data-v-130330d9] {
+.cn-setup-field[data-v-dd2d6164] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-setup-summary[data-v-130330d9] {
+.cn-setup-summary[data-v-dd2d6164] {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }
-.cn-setup-summary__item[data-v-130330d9] {
+.cn-setup-summary__item[data-v-dd2d6164] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 4px 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-setup-summary__item--done[data-v-130330d9] {
+.cn-setup-summary__item--done[data-v-dd2d6164] {
 	color: var(--color-main-text);
 }
-.cn-setup-summary__mark[data-v-130330d9] {
+.cn-setup-summary__mark[data-v-dd2d6164] {
 	font-weight: bold;
 	color: var(--color-success);
 }
-.cn-setup-summary__label[data-v-130330d9] {
+.cn-setup-summary__label[data-v-dd2d6164] {
 	flex: 0 0 auto;
 }
-.cn-setup-summary__value[data-v-130330d9] {
+.cn-setup-summary__value[data-v-dd2d6164] {
 	margin-inline-start: auto;
 	font-weight: 600;
 	color: var(--color-main-text);
@@ -37888,34 +38201,34 @@ to {
 
 /* An on-demand step that did not run says so quietly: it is a choice the
    user did not make, not a failure. */
-.cn-setup-summary__item--not-run .cn-setup-summary__value[data-v-130330d9] {
+.cn-setup-summary__item--not-run .cn-setup-summary__value[data-v-dd2d6164] {
 	font-weight: normal;
 	color: var(--color-text-maxcontrast);
 }
 
 
-.cn-admin-settings-shell[data-v-b8d7f6c6] {
+.cn-admin-settings-shell[data-v-3b6d7cbb] {
 	max-width: 900px;
 }
 
 /* The board look lifts the width and lays the header and cards on a grid (look-board.css). */
-.cn-support-info[data-v-b8d7f6c6] {
+.cn-support-info[data-v-3b6d7cbb] {
 	margin-top: 16px;
 	padding-top: 16px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-support-info h4[data-v-b8d7f6c6] {
+.cn-support-info h4[data-v-3b6d7cbb] {
 	margin: 0 0 8px 0;
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-support-info p[data-v-b8d7f6c6] {
+.cn-support-info p[data-v-3b6d7cbb] {
 	margin: 4px 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-support-info a[data-v-b8d7f6c6] {
+.cn-support-info a[data-v-3b6d7cbb] {
 	color: var(--color-primary-element);
 }
 
@@ -38455,7 +38768,7 @@ to {
   color: var(--color-text-maxcontrast);
 }
 
-.cn-object-row[data-v-a4a78a68] {
+.cn-object-row[data-v-6e2b35c2] {
 	display: flex;
 	align-items: center;
 	gap: 12px;
@@ -38463,18 +38776,26 @@ to {
 	border-bottom: 1px solid var(--color-border);
 	cursor: pointer;
 }
-.cn-object-row[data-v-a4a78a68]:hover {
+.cn-object-row[data-v-6e2b35c2]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-object-row--selected[data-v-a4a78a68] {
+.cn-object-row--selected[data-v-6e2b35c2] {
 	/* Inset accent — never border-left (would shift cell content). */
 	box-shadow: inset 3px 0 0 0 var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
 }
-.cn-object-row__checkbox[data-v-a4a78a68] {
+.cn-object-row__lead[data-v-6e2b35c2],
+.cn-object-row__trail[data-v-6e2b35c2] {
+	flex: 0 0 auto;
+	min-width: 0;
+}
+.cn-object-row__lead[data-v-6e2b35c2] {
+	font-weight: 600;
+}
+.cn-object-row__checkbox[data-v-6e2b35c2] {
 	flex-shrink: 0;
 }
-.cn-object-row__icon[data-v-a4a78a68] {
+.cn-object-row__icon[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -38483,38 +38804,38 @@ to {
 	height: 24px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-object-row__image[data-v-a4a78a68] {
+.cn-object-row__image[data-v-6e2b35c2] {
 	width: 24px;
 	height: 24px;
 	object-fit: contain;
 	border-radius: var(--border-radius);
 }
-.cn-object-row__main[data-v-a4a78a68] {
+.cn-object-row__main[data-v-6e2b35c2] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 	flex: 1;
 }
-.cn-object-row__title[data-v-a4a78a68] {
+.cn-object-row__title[data-v-6e2b35c2] {
 	font-weight: 600;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-object-row__subtitle[data-v-a4a78a68] {
+.cn-object-row__subtitle[data-v-6e2b35c2] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-object-row__badges[data-v-a4a78a68] {
+.cn-object-row__badges[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	gap: 6px;
 }
-.cn-object-row__actions[data-v-a4a78a68] {
+.cn-object-row__actions[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -41074,7 +41395,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-5b9ebdc3] {
+.cn-dashboard-page[data-v-61decc06] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -41088,7 +41409,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-5b9ebdc3] {
+.cn-dashboard-page__header[data-v-61decc06] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -41100,21 +41421,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-5b9ebdc3] {
+.cn-dashboard-page__header-left[data-v-61decc06] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-5b9ebdc3] {
+.cn-dashboard-page__title-row[data-v-61decc06] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-5b9ebdc3] {
+.cn-dashboard-page__title[data-v-61decc06] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-5b9ebdc3] {
+.cn-dashboard-page__description[data-v-61decc06] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -41122,19 +41443,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-5b9ebdc3] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-61decc06] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-5b9ebdc3] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-61decc06] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-5b9ebdc3] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61decc06] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-5b9ebdc3] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61decc06] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -41142,17 +41463,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-5b9ebdc3] {
+.cn-dashboard-page__switch-row[data-v-61decc06] {
 	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-5b9ebdc3] {
+.cn-dashboard-page__switch-row-spacer[data-v-61decc06] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-5b9ebdc3] {
+.cn-dashboard-page__view-link[data-v-61decc06] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -41166,37 +41487,37 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-5b9ebdc3]:hover {
+.cn-dashboard-page__view-link[data-v-61decc06]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-5b9ebdc3]:focus-visible {
+.cn-dashboard-page__view-link[data-v-61decc06]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-5b9ebdc3] {
+.cn-dashboard-page__view-link-icon[data-v-61decc06] {
 	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-5b9ebdc3] {
+.cn-dashboard-page__date-range--segmented[data-v-61decc06] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-5b9ebdc3] {
+.cn-dashboard-page__description--with-period[data-v-61decc06] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-dashboard-page__date-segmented[data-v-5b9ebdc3] {
+.cn-dashboard-page__date-segmented[data-v-61decc06] {
 	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-5b9ebdc3] {
+.cn-dashboard-page__kpi-row[data-v-61decc06] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -41204,15 +41525,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-5b9ebdc3] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-61decc06] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-5b9ebdc3] {
+.cn-dashboard-page__kpi-cell[data-v-61decc06] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-5b9ebdc3] > * {
+.cn-dashboard-page__kpi-cell[data-v-61decc06] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -41225,7 +41546,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-5b9ebdc3] {
+.cn-dashboard-page__header-actions[data-v-61decc06] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -41241,19 +41562,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-5b9ebdc3] {
+.cn-dashboard-page__date-range[data-v-61decc06] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-5b9ebdc3] {
+.cn-dashboard-page__date-range--pills[data-v-61decc06] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-5b9ebdc3] {
+.cn-dashboard-page__date-pills[data-v-61decc06] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-5b9ebdc3] {
+.cn-dashboard-page__date-pill[data-v-61decc06] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -41268,77 +41589,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-5b9ebdc3]:hover {
+.cn-dashboard-page__date-pill[data-v-61decc06]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-5b9ebdc3]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-61decc06]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-5b9ebdc3] {
+.cn-dashboard-page__date-pill--active[data-v-61decc06] {
 	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-5b9ebdc3]:hover {
+.cn-dashboard-page__date-pill--active[data-v-61decc06]: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-5b9ebdc3] {
+.cn-dashboard-page__date-pill--custom[data-v-61decc06] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-5b9ebdc3] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-61decc06] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-5b9ebdc3] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-5b9ebdc3] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-5b9ebdc3] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-5b9ebdc3] {
+.cn-dashboard-page__empty[data-v-61decc06] {
 	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-5b9ebdc3] {
+.cn-dashboard-page__view-switch[data-v-61decc06] {
 	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-5b9ebdc3] {
+.cn-page-view-region--empty[data-v-61decc06] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-5b9ebdc3] {
+.cn-dashboard-page__page-filters[data-v-61decc06] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-5b9ebdc3] {
+.cn-dashboard-page__page-filter[data-v-61decc06] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-5b9ebdc3] {
+.cn-dashboard-page__page-filter-label[data-v-61decc06] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-5b9ebdc3] {
+.cn-dashboard-page__widget-edit[data-v-61decc06] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -41357,8 +41678,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-5b9ebdc3] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-5b9ebdc3] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-61decc06] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-61decc06] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -41374,7 +41695,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-5b9ebdc3] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-61decc06] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -41384,13 +41705,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-5b9ebdc3] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-5b9ebdc3] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-5b9ebdc3] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-61decc06] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-61decc06] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-61decc06] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-5b9ebdc3] {
+.cn-dashboard-page__unknown[data-v-61decc06] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -41401,31 +41722,31 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-5b9ebdc3] {
+.cn-dashboard-page__content[data-v-61decc06] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-5b9ebdc3] {
+.cn-dashboard-page__content-item[data-v-61decc06] {
 	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-5b9ebdc3] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-5b9ebdc3] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-5b9ebdc3] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-61decc06] {
 		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-5b9ebdc3] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-5b9ebdc3] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -41437,7 +41758,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-5b9ebdc3] {
+.cn-dashboard-page__widget-count[data-v-61decc06] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -41446,13 +41767,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-5b9ebdc3] {
+.cn-dashboard-page__widget-note[data-v-61decc06] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-5b9ebdc3] {
+.cn-dashboard-page__widget-action[data-v-61decc06] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -41468,7 +41789,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-5b9ebdc3]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-61decc06]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -43871,7 +44192,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-flow-board[data-v-5c5d3119] {
+.cn-flow-board[data-v-72119172] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -43879,53 +44200,53 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	min-height: 100%;
 	box-sizing: border-box;
 }
-.cn-flow-board__header[data-v-5c5d3119] {
+.cn-flow-board__header[data-v-72119172] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
 }
-.cn-flow-board__heading[data-v-5c5d3119] {
+.cn-flow-board__heading[data-v-72119172] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	min-width: 0;
 }
-.cn-flow-board__title[data-v-5c5d3119] {
+.cn-flow-board__title[data-v-72119172] {
 	margin: 0;
 	font-size: 24px;
 	font-weight: 600;
 }
-.cn-flow-board__actions[data-v-5c5d3119] {
+.cn-flow-board__actions[data-v-72119172] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-flow-board__test-intro[data-v-5c5d3119] {
+.cn-flow-board__test-intro[data-v-72119172] {
 	margin: 0 0 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__path[data-v-5c5d3119] {
+.cn-flow-board__path[data-v-72119172] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__crumb[data-v-5c5d3119] {
+.cn-flow-board__crumb[data-v-72119172] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-flow-board__body[data-v-5c5d3119] {
+.cn-flow-board__body[data-v-72119172] {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) 340px;
 	gap: 16px;
 	flex: 1 1 auto;
 	min-height: 520px;
 }
-.cn-flow-board--with-palette .cn-flow-board__body[data-v-5c5d3119] {
+.cn-flow-board--with-palette .cn-flow-board__body[data-v-72119172] {
 	grid-template-columns: 240px minmax(0, 1fr) 340px;
 }
-.cn-flow-board__card[data-v-5c5d3119] {
+.cn-flow-board__card[data-v-72119172] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -43935,34 +44256,34 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: 12px;
 	background: var(--color-main-background);
 }
-.cn-flow-board__canvas[data-v-5c5d3119] {
+.cn-flow-board__canvas[data-v-72119172] {
 	padding: 0;
 	overflow: hidden;
 	background-color: var(--color-background-hover);
 	background-image: radial-gradient(var(--color-border-dark) 1px, transparent 1px);
 	background-size: 16px 16px;
 }
-.cn-flow-board__canvas[data-v-5c5d3119] > :first-child {
+.cn-flow-board__canvas[data-v-72119172] > :first-child {
 	flex: 1 1 auto;
 	min-height: 0;
 }
-.cn-flow-board__card-title[data-v-5c5d3119] {
+.cn-flow-board__card-title[data-v-72119172] {
 	margin: 0;
 	font-size: 16px;
 	font-weight: 600;
 }
-.cn-flow-board__subtitle[data-v-5c5d3119] {
+.cn-flow-board__subtitle[data-v-72119172] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	font-weight: 600;
 }
-.cn-flow-board__eyebrow[data-v-5c5d3119] {
+.cn-flow-board__eyebrow[data-v-72119172] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-flow-board__validity[data-v-5c5d3119],
-.cn-flow-board__legend[data-v-5c5d3119] {
+.cn-flow-board__validity[data-v-72119172],
+.cn-flow-board__legend[data-v-72119172] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -43971,27 +44292,27 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-top: 1px solid var(--color-border);
 	background: var(--color-main-background);
 }
-.cn-flow-board__validity--success[data-v-5c5d3119] {
+.cn-flow-board__validity--success[data-v-72119172] {
 	color: var(--color-success-text);
 }
-.cn-flow-board__validity--warning[data-v-5c5d3119] {
+.cn-flow-board__validity--warning[data-v-72119172] {
 	color: var(--color-warning-text);
 }
-.cn-flow-board__validity--error[data-v-5c5d3119] {
+.cn-flow-board__validity--error[data-v-72119172] {
 	color: var(--color-error-text);
 }
-.cn-flow-board__palette-group[data-v-5c5d3119] {
+.cn-flow-board__palette-group[data-v-72119172] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-flow-board__palette-app[data-v-5c5d3119] {
+.cn-flow-board__palette-app[data-v-72119172] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-flow-board__palette-list[data-v-5c5d3119] {
+.cn-flow-board__palette-list[data-v-72119172] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -43999,7 +44320,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-flow-board__palette-step[data-v-5c5d3119] {
+.cn-flow-board__palette-step[data-v-72119172] {
 	width: 100%;
 	min-height: 34px;
 	padding: 6px 10px;
@@ -44010,20 +44331,20 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	text-align: start;
 	cursor: pointer;
 }
-.cn-flow-board__palette-step[data-v-5c5d3119]:hover {
+.cn-flow-board__palette-step[data-v-72119172]:hover {
 	background: var(--color-background-hover);
 }
-.cn-flow-board__palette-note[data-v-5c5d3119] {
+.cn-flow-board__palette-note[data-v-72119172] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-flow-board__tabs[data-v-5c5d3119] {
+.cn-flow-board__tabs[data-v-72119172] {
 	display: flex;
 	gap: 4px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-flow-board__tab[data-v-5c5d3119] {
+.cn-flow-board__tab[data-v-72119172] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -44035,12 +44356,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: var(--color-main-text);
 	cursor: pointer;
 }
-.cn-flow-board__tab--active[data-v-5c5d3119] {
+.cn-flow-board__tab--active[data-v-72119172] {
 	border-color: var(--color-border);
 	border-bottom-color: var(--color-main-background);
 	font-weight: 600;
 }
-.cn-flow-board__tab-count[data-v-5c5d3119] {
+.cn-flow-board__tab-count[data-v-72119172] {
 	min-width: 18px;
 	padding: 0 5px;
 	border-radius: 9px;
@@ -44049,19 +44370,44 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	line-height: 18px;
 	text-align: center;
 }
-.cn-flow-board__step-actions[data-v-5c5d3119],
-.cn-flow-board__step-footer[data-v-5c5d3119] {
+.cn-flow-board__settings[data-v-72119172] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin: 0;
+}
+.cn-flow-board__setting dt[data-v-72119172] {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-flow-board__setting dd[data-v-72119172] {
+	margin: 2px 0 0;
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-flow-board__inspector-empty[data-v-72119172] {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-flow-board__inspector-empty p[data-v-72119172] {
+	margin: 0;
+}
+.cn-flow-board__step-actions[data-v-72119172],
+.cn-flow-board__step-footer[data-v-72119172] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-flow-board__step-footer[data-v-5c5d3119] {
+.cn-flow-board__step-footer[data-v-72119172] {
 	justify-content: space-between;
 	margin-top: auto;
 }
 @media (max-width: 1024px) {
-.cn-flow-board__body[data-v-5c5d3119],
-	.cn-flow-board--with-palette .cn-flow-board__body[data-v-5c5d3119] {
+.cn-flow-board__body[data-v-72119172],
+	.cn-flow-board--with-palette .cn-flow-board__body[data-v-72119172] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
@@ -46285,17 +46631,17 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-user-settings-dialog__body[data-v-e537e50a] {
+.cn-user-settings-dialog__body[data-v-6d3e749e] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0 24px;
 }
-.cn-user-settings-dialog__nav[data-v-e537e50a] {
+.cn-user-settings-dialog__nav[data-v-6d3e749e] {
 	flex: 0 0 200px;
 	width: 200px;
 	padding-top: 18px;
 }
-.cn-user-settings-dialog__nav ul[data-v-e537e50a] {
+.cn-user-settings-dialog__nav ul[data-v-6d3e749e] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -46303,7 +46649,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a] {
+
+/* A navigation entry, not a link in running text: no underline, also not
+   on hover. `!important` because a theme's `a { text-decoration }` carries
+   it (thematiq), and a bare `a` with `!important` beats any class. */
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e],
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:visited {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -46312,22 +46663,23 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--border-radius-element, 8px);
 	font-size: 15px;
 	color: var(--color-main-text);
-	text-decoration: none;
+	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a]:hover {
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:hover {
 	background: var(--color-background-hover);
+	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a]:focus-visible {
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-user-settings-dialog__nav-link--active[data-v-e537e50a],
-.cn-user-settings-dialog__nav-link--active[data-v-e537e50a]:hover {
+.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e],
+.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e]: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-e537e50a] {
+.cn-user-settings-dialog__nav-icon[data-v-6d3e749e] {
 	display: inline-flex;
 	flex: none;
 	width: 18px;
@@ -46335,18 +46687,18 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	align-items: center;
 	justify-content: center;
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] {
 	display: flex;
 	flex: 1 1 380px;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section {
 	margin: 0;
 	padding: 18px 0;
 	border-top: 1px solid var(--color-border);
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section__name {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section__name {
 	margin: 0 0 12px;
 	font-size: 17px;
 	font-weight: 700;
@@ -46354,33 +46706,33 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	align-items: center;
 	gap: 10px;
 }
-.cn-user-settings-dialog__note[data-v-e537e50a] {
+.cn-user-settings-dialog__note[data-v-6d3e749e] {
 	flex: 1 1 auto;
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-user-settings-dialog__nc-links[data-v-e537e50a] {
+.cn-user-settings-dialog__nc-links[data-v-6d3e749e] {
 	margin-bottom: 2px;
 }
-.cn-user-settings-dialog__group[data-v-e537e50a] {
+.cn-user-settings-dialog__group[data-v-6d3e749e] {
 	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] {
+.cn-user-settings-dialog__group-sections[data-v-6d3e749e] {
 	padding-inline-start: 12px;
 }
-.cn-user-settings-dialog__heading-icon[data-v-e537e50a] {
+.cn-user-settings-dialog__heading-icon[data-v-6d3e749e] {
 	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] {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section[hidden] {
 	display: none;
 }
 
@@ -46801,7 +47153,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-features-board[data-v-ed367d64] {
+.cn-features-board[data-v-022166a7] {
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
@@ -46810,20 +47162,20 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	max-width: 1240px;
 	width: 100%;
 }
-.cn-features-board__header[data-v-ed367d64] {
+.cn-features-board__header[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 	padding: 4px 0 8px;
 }
-.cn-features-board__title-row[data-v-ed367d64] {
+.cn-features-board__title-row[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	align-items: flex-start;
 	gap: 12px 24px;
 }
-.cn-features-board__title[data-v-ed367d64] {
+.cn-features-board__title[data-v-022166a7] {
 	flex: 1 1 320px;
 	min-width: 0;
 	margin: 0;
@@ -46831,32 +47183,32 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-features-board__header-actions[data-v-ed367d64] {
+.cn-features-board__header-actions[data-v-022166a7] {
 	flex: none;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 }
-.cn-features-board__subtitle[data-v-ed367d64] {
+.cn-features-board__subtitle[data-v-022166a7] {
 	margin: 0;
 	font-size: 15px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__tab-row[data-v-ed367d64] {
+.cn-features-board__tab-row[data-v-022166a7] {
 	display: flex;
 	align-items: flex-end;
 	gap: 8px;
 	margin-bottom: calc(-1 * var(--cn-board-section-gap, 20px));
 }
-.cn-features-board__tabs[data-v-ed367d64] {
+.cn-features-board__tabs[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 	flex: 1 1 auto;
 	min-width: 0;
 }
-.cn-features-board__tab[data-v-ed367d64] {
+.cn-features-board__tab[data-v-022166a7] {
 	display: inline-flex;
 	align-items: center;
 	box-sizing: border-box;
@@ -46873,35 +47225,35 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	cursor: pointer;
 	white-space: nowrap;
 }
-.cn-features-board__tab--active[data-v-ed367d64] {
+.cn-features-board__tab--active[data-v-022166a7] {
 	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-ed367d64] {
+.cn-features-board__tab-actions[data-v-022166a7] {
 	flex: none;
 	align-self: flex-start;
 	margin: 0 8px 8px 0;
 }
-.cn-features-board__panel[data-v-ed367d64] {
+.cn-features-board__panel[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 22px;
 }
-.cn-features-board__panel--tabbed[data-v-ed367d64] {
+.cn-features-board__panel--tabbed[data-v-022166a7] {
 	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-ed367d64] {
+.cn-features-board__filter[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-features-board__filter-option[data-v-ed367d64] {
+.cn-features-board__filter-option[data-v-022166a7] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -46910,7 +47262,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-ed367d64] {
+.cn-features-board__filter--chips .cn-features-board__filter-option[data-v-022166a7] {
 	height: 36px;
 	padding: 0 14px;
 	border: 1px solid var(--color-border-dark);
@@ -46918,19 +47270,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-ed367d64] {
+.cn-features-board__filter--chips .cn-features-board__filter-option--active[data-v-022166a7] {
 	border-color: var(--color-main-text);
 	background: var(--color-main-text);
 	color: var(--color-main-background);
 }
-.cn-features-board__filter-count[data-v-ed367d64] {
+.cn-features-board__filter-count[data-v-022166a7] {
 	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-ed367d64] {
+.cn-features-board__filter--chips .cn-features-board__filter-option--active .cn-features-board__filter-count[data-v-022166a7] {
 	color: var(--color-border-dark);
 }
-.cn-features-board__filter--segmented[data-v-ed367d64] {
+.cn-features-board__filter--segmented[data-v-022166a7] {
 	display: inline-flex;
 	align-self: flex-start;
 	gap: 2px;
@@ -46938,7 +47290,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-ed367d64] {
+.cn-features-board__filter--segmented .cn-features-board__filter-option[data-v-022166a7] {
 	height: 34px;
 	padding: 0 14px;
 	border: 0;
@@ -46946,65 +47298,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-ed367d64] {
+.cn-features-board__filter--segmented .cn-features-board__filter-option--active[data-v-022166a7] {
 	background: var(--color-main-background);
 	box-shadow: 0 1px 2px rgba(27, 28, 29, 0.12);
 }
-.cn-features-board__body[data-v-ed367d64] {
+.cn-features-board__body[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
 	gap: 24px;
 }
-.cn-features-board__groups[data-v-ed367d64] {
+.cn-features-board__groups[data-v-022166a7] {
 	flex: 999 1 520px;
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 26px;
 }
-.cn-features-board__groups--rows[data-v-ed367d64] {
+.cn-features-board__groups--rows[data-v-022166a7] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 	gap: 20px;
 }
-.cn-features-board__group[data-v-ed367d64] {
+.cn-features-board__group[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	max-width: none;
 	margin: 0;
 }
-.cn-features-board__groups--rows .cn-features-board__group[data-v-ed367d64] {
+.cn-features-board__groups--rows .cn-features-board__group[data-v-022166a7] {
 	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-ed367d64] {
+.cn-features-board__group-head[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
 	gap: 10px;
 }
-.cn-features-board__group-title[data-v-ed367d64] {
+.cn-features-board__group-title[data-v-022166a7] {
 	margin: 0;
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-features-board__groups--rows .cn-features-board__group-title[data-v-ed367d64] {
+.cn-features-board__groups--rows .cn-features-board__group-title[data-v-022166a7] {
 	font-size: 17px;
 }
-.cn-features-board__group-caption[data-v-ed367d64] {
+.cn-features-board__group-caption[data-v-022166a7] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__cards[data-v-ed367d64] {
+.cn-features-board__cards[data-v-022166a7] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 	gap: 16px;
 }
-.cn-features-board__card[data-v-ed367d64] {
+.cn-features-board__card[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -47013,24 +47365,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-ed367d64] {
+.cn-features-board__card-head[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 4px;
 }
-.cn-features-board__card-title[data-v-ed367d64] {
+.cn-features-board__card-title[data-v-022166a7] {
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
 	line-height: 1.3;
 }
-.cn-features-board__card-summary[data-v-ed367d64] {
+.cn-features-board__card-summary[data-v-022166a7] {
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-main-text);
 }
-.cn-features-board__card-footer[data-v-ed367d64] {
+.cn-features-board__card-footer[data-v-022166a7] {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
@@ -47039,7 +47391,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-ed367d64] {
+.cn-features-board__read-more[data-v-022166a7] {
 	display: inline-flex;
 	align-items: center;
 	height: 34px;
@@ -47052,14 +47404,14 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	font-weight: 600;
 	text-decoration: none;
 }
-.cn-features-board__rows[data-v-ed367d64] {
+.cn-features-board__rows[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-features-board__row[data-v-ed367d64] {
+.cn-features-board__row[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -47067,27 +47419,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-ed367d64] {
+.cn-features-board__row-text[data-v-022166a7] {
 	flex: 1 1 240px;
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
-.cn-features-board__row-title[data-v-ed367d64] {
+.cn-features-board__row-title[data-v-022166a7] {
 	font-size: 15px;
 	font-weight: 500;
 }
-.cn-features-board__row-summary[data-v-ed367d64] {
+.cn-features-board__row-summary[data-v-022166a7] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__next[data-v-ed367d64] {
+.cn-features-board__next[data-v-022166a7] {
 	flex: 1 1 280px;
 	min-width: 0;
 	max-width: 340px;
 }
-.cn-features-board__next-card[data-v-ed367d64] {
+.cn-features-board__next-card[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -47096,22 +47448,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-ed367d64] {
+.cn-features-board__next-head[data-v-022166a7] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
-.cn-features-board__next-title[data-v-ed367d64] {
+.cn-features-board__next-title[data-v-022166a7] {
 	margin: 0;
 	font-size: 18px;
 	font-weight: 700;
 }
-.cn-features-board__next-lead[data-v-ed367d64] {
+.cn-features-board__next-lead[data-v-022166a7] {
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__next-list[data-v-ed367d64] {
+.cn-features-board__next-list[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -47119,7 +47471,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-features-board__next-item[data-v-ed367d64] {
+.cn-features-board__next-item[data-v-022166a7] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -47128,14 +47480,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-ed367d64] {
+.cn-features-board__next-link[data-v-022166a7] {
 	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-ed367d64] {
+.cn-features-board__next-meta[data-v-022166a7] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -47143,23 +47495,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-ed367d64] {
+.cn-features-board__next-opened[data-v-022166a7] {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 }
-.cn-features-board__next-more[data-v-ed367d64] {
+.cn-features-board__next-more[data-v-022166a7] {
 	display: inline-flex;
 	align-items: center;
 	gap: 4px;
 	font-size: 14px;
 	font-weight: 600;
 }
-.cn-features-board__empty[data-v-ed367d64] {
+.cn-features-board__empty[data-v-022166a7] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-features-board__notice[data-v-ed367d64] {
+.cn-features-board__notice[data-v-022166a7] {
 	margin: 0;
 }
 
@@ -47209,12 +47561,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-features-and-roadmap-view[data-v-3db485a4] {
+.cn-features-and-roadmap-view[data-v-2dd578ca] {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 24px 16px;
 }
-.cn-features-and-roadmap-view__header[data-v-3db485a4] {
+.cn-features-and-roadmap-view__header[data-v-2dd578ca] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -47226,29 +47578,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-3db485a4] {
+.cn-features-and-roadmap-view__title[data-v-2dd578ca] {
 	font-size: 1.4em;
 	margin: 0;
 	color: var(--color-main-text);
 }
-.cn-features-and-roadmap-view__actions[data-v-3db485a4] {
+.cn-features-and-roadmap-view__actions[data-v-2dd578ca] {
 	display: flex;
 	gap: 8px;
 	align-items: center;
 	flex-wrap: wrap;
 }
-.cn-features-and-roadmap-view__panel[data-v-3db485a4] {
+.cn-features-and-roadmap-view__panel[data-v-2dd578ca] {
 	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-3db485a4] a {
+.cn-features-and-roadmap-view__docs-note[data-v-2dd578ca] a {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-features-and-roadmap-view__docs-note[data-v-3db485a4] a:hover {
+.cn-features-and-roadmap-view__docs-note[data-v-2dd578ca] a:hover {
 	text-decoration: underline;
 	opacity: 0.85;
 }