@conduction/nextcloud-vue 2.92.0 → 2.93.0

package/dist/nextcloud-vue.css

@@ -658,6 +658,39 @@
 	max-width: none;
 }
 
+/* A Nextcloud text field or text area in a board settings card has its label
+   above the control (14px/600), as the boards draw it (PqBeheer Leadbeheer,
+   PqBeheerKassa Btw), instead of floating inside the border. The label stays
+   the field's own `<label for>`; it moves out of the control and the field
+   makes room for it. With the label outside, the placeholder shows at rest.
+   @spec openspec/changes/settings-section-board-fields/specs/settings-board-look/spec.md#requirement-a-settings-card-labels-its-text-fields-above-the-control */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label),
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field__input + .input-field__label,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input + .textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input:not(:focus):not(.textarea__input--label-outside)::placeholder {
+	opacity: 1 !important;
+}
+
 /* The section footer is the save row: the hairline replaces its own rule. */
 .cn-look-board .settings-section .cn-settings-section__footer {
 	margin: 0;
@@ -1123,6 +1156,53 @@
 .cn-dialog__confirm-pending {
 	opacity: 0.45;
 }
+
+/* On a phone the board dialog is a bottom sheet (board PqMobiel): full width,
+   anchored to the bottom, as tall as its content up to the screen less the
+   header, a 16px top radius and a grab bar. The footer buttons share the row. */
+@media (max-width: 600px) {
+	.modal-mask.cn-dialog-board .modal-wrapper .modal-container,
+	.modal-mask.cn-dialog-board .modal-wrapper--normal > .modal-container {
+		position: absolute;
+		inset: auto 0 0;
+		width: 100%;
+		max-width: 100%;
+		height: auto;
+		max-height: calc(100% - var(--header-height, 50px));
+		border-radius: 16px 16px 0 0;
+	}
+
+	.modal-mask.cn-dialog-board .modal-container::before {
+		content: '';
+		display: block;
+		flex: none;
+		width: 40px;
+		height: 4px;
+		margin: 8px auto 0;
+		border-radius: 2px;
+		background: var(--color-border-dark);
+	}
+
+	.modal-mask.cn-dialog-board .modal-container {
+		flex-direction: column;
+	}
+
+	.cn-dialog-board .dialog {
+		height: auto;
+		min-height: 0;
+	}
+
+	.cn-dialog-board .dialog__content {
+		flex: 0 1 auto;
+		overflow-y: auto;
+	}
+
+	.cn-dialog-board .dialog__actions > .button-vue,
+	.cn-dialog-board .dialog__actions > * {
+		flex: 1 1 0;
+		min-height: 44px;
+	}
+}
 /*
  * The board form field (screens-form-parity, canon sections 5 and 6).
  *
@@ -7312,6 +7392,14 @@ a.cn-kpi-card--board * {
 .cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
 	display: none;
 }
+
+/* Below 768px the header is a column (detail-page.css), where the 320px basis
+   above would be a 320px HEIGHT: the title sat in a band of white on a phone. */
+@media (max-width: 768px) {
+	.cn-look-board .cn-detail-page__header--board > :first-child {
+		flex: none;
+	}
+}
 /*
  * The reports page under the board look (screens-reports-page-board-look,
  * board DcRapportages): a 28px title over a muted lead, one section per
@@ -20692,7 +20780,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 
 /* A select option breaks between words only, never inside one. */
-.cn-form-dialog__option[data-v-b7ff10cc] {
+.cn-form-dialog__option[data-v-65a5754f] {
 	display: block;
 	min-width: 0;
 	white-space: normal;
@@ -20700,7 +20788,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	word-break: normal;
 	hyphens: manual;
 }
-.cn-form-dialog__draft-actions[data-v-b7ff10cc] {
+.cn-form-dialog__draft-actions[data-v-65a5754f] {
 	display: flex;
 	gap: 8px;
 	margin-top: 8px;
@@ -20708,22 +20796,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* The state is announced in WORDS, and the colour only repeats them. A
    reader who cannot see it still hears "Draft saved" (WCAG 2.2 SC 1.4.1). */
-.cn-form-dialog__draft-state[data-v-b7ff10cc] {
+.cn-form-dialog__draft-state[data-v-65a5754f] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 	margin-inline-end: auto;
 }
-.cn-form-dialog__switch-wrapper[data-v-b7ff10cc] {
+.cn-form-dialog__switch-wrapper[data-v-65a5754f] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-form-dialog__form[data-v-b7ff10cc] {
+.cn-form-dialog__form[data-v-65a5754f] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-form-dialog__field[data-v-b7ff10cc] {
+.cn-form-dialog__field[data-v-65a5754f] {
 	margin-bottom: 8px;
 }
 
@@ -20735,39 +20823,53 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    from pushing its column past its share: a grid item's default `auto`
    minimum is its content, so without it one long option label widens the
    whole column and the two stop being equal. */
-.cn-form-dialog__form--two-column[data-v-b7ff10cc] {
+.cn-form-dialog__section[data-v-65a5754f] {
+	margin: 12px 0 0;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+	font-size: 15px;
+	font-weight: 700;
+}
+
+/* The first heading opens the form: no rule above it. */
+.cn-form-dialog__form .cn-form-dialog__section[data-v-65a5754f]:first-of-type {
+	margin-top: 0;
+	padding-top: 0;
+	border-top: 0;
+}
+.cn-form-dialog__form--two-column[data-v-65a5754f] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	column-gap: 16px;
 	align-items: start;
 }
-.cn-form-dialog__form--two-column[data-v-b7ff10cc] > * {
+.cn-form-dialog__form--two-column[data-v-65a5754f] > * {
 	min-width: 0;
 }
 
 /* Anything that is not a field (the form-level error note, the slots above
    and below the fields) spans the full width, so a note card never sits in
    a half-width column beside an input. */
-.cn-form-dialog__form--two-column[data-v-b7ff10cc] > :not(.cn-form-dialog__field),
-.cn-form-dialog__form--two-column > .cn-form-dialog__field--wide[data-v-b7ff10cc] {
+.cn-form-dialog__form--two-column[data-v-65a5754f] > :not(.cn-form-dialog__field),
+.cn-form-dialog__form--two-column > .cn-form-dialog__field--wide[data-v-65a5754f] {
 	grid-column: 1 / -1;
 }
 
 /* A narrow viewport gets the single column back. Two columns of roughly
    150px each are worse than one readable one. */
 @media (max-width: 700px) {
-.cn-form-dialog__form--two-column[data-v-b7ff10cc] {
+.cn-form-dialog__form--two-column[data-v-65a5754f] {
 		display: block;
 }
 }
-.cn-form-dialog__textarea-wrapper[data-v-b7ff10cc],
-.cn-form-dialog__select-wrapper[data-v-b7ff10cc],
-.cn-form-dialog__json-wrapper[data-v-b7ff10cc] {
+.cn-form-dialog__textarea-wrapper[data-v-65a5754f],
+.cn-form-dialog__select-wrapper[data-v-65a5754f],
+.cn-form-dialog__json-wrapper[data-v-65a5754f] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-form-dialog__label[data-v-b7ff10cc] {
+.cn-form-dialog__label[data-v-65a5754f] {
 	font-weight: 600;
 	font-size: 0.9em;
 	color: var(--color-main-text);
@@ -20775,10 +20877,10 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* Cross-app semantic reference (ADR-048) whose provider isn't installed —
    rendered disabled; the wrapper carries the mouse-over tooltip. */
-.cn-form-dialog__semantic-unresolved[data-v-b7ff10cc] {
+.cn-form-dialog__semantic-unresolved[data-v-65a5754f] {
 	cursor: not-allowed;
 }
-.cn-form-dialog__textarea[data-v-b7ff10cc] {
+.cn-form-dialog__textarea[data-v-65a5754f] {
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -20790,22 +20892,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	font-size: inherit;
 	resize: vertical;
 }
-.cn-form-dialog__textarea[data-v-b7ff10cc]:focus {
+.cn-form-dialog__textarea[data-v-65a5754f]:focus {
 	border-color: var(--color-primary-element);
 	outline: none;
 }
-.cn-form-dialog__textarea[data-v-b7ff10cc]:disabled {
+.cn-form-dialog__textarea[data-v-65a5754f]:disabled {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
-.cn-form-dialog__helper[data-v-b7ff10cc] {
+.cn-form-dialog__helper[data-v-65a5754f] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
-.cn-form-dialog__helper--error[data-v-b7ff10cc] {
+.cn-form-dialog__helper--error[data-v-65a5754f] {
 	color: var(--color-error);
 }
-.cn-form-dialog__dynamic-loading[data-v-b7ff10cc] {
+.cn-form-dialog__dynamic-loading[data-v-65a5754f] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -21062,7 +21164,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 
-.cn-widget-wrapper[data-v-4f6c55f6] {
+.cn-widget-wrapper[data-v-8ce3140c] {
 	position: relative;
 	height: 100%;
 	display: flex;
@@ -21076,13 +21178,13 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 /* Headerless date chip — floated over the top-right of a flush card. */
-.cn-widget-wrapper__floating-meta[data-v-4f6c55f6] {
+.cn-widget-wrapper__floating-meta[data-v-8ce3140c] {
 	position: absolute;
 	top: 8px;
 	inset-inline-end: 10px;
 	z-index: 2;
 }
-.cn-widget-wrapper__content[data-v-4f6c55f6] {
+.cn-widget-wrapper__content[data-v-8ce3140c] {
 	flex: 1;
 	overflow: auto;
 	min-height: 0;
@@ -21098,24 +21200,24 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    So it is structural instead. `:has()` keys on the table component's own root
    class, which means a table is flush by construction and no caller can
    reintroduce the gap by forgetting a prop. */
-.cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-table-container),
-.cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-widget-object-table) {
+.cn-widget-wrapper__content[data-v-8ce3140c]:has(> .cn-table-container),
+.cn-widget-wrapper__content[data-v-8ce3140c]:has(> .cn-widget-object-table) {
 	padding: 0;
 }
 
 /* Keyboard focus ring for the now-focusable scrollable content region. */
-.cn-widget-wrapper__content[data-v-4f6c55f6]:focus-visible {
+.cn-widget-wrapper__content[data-v-8ce3140c]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: -2px;
 }
-.cn-widget-wrapper--borderless[data-v-4f6c55f6] {
+.cn-widget-wrapper--borderless[data-v-8ce3140c] {
 	border: none;
 	background: transparent;
 }
-.cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-4f6c55f6] {
+.cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-8ce3140c] {
 	padding: 0;
 }
-.cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-4f6c55f6] {
+.cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-8ce3140c] {
 	padding: 0;
 }
 
@@ -21123,8 +21225,8 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    above. A dashboard renders every widget `flush`, and without this their
    fields touch the card's edges. Borderless and chromeless cards, and the
    Nextcloud dashboard variant, keep their own padding. */
-.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-form-widget),
-.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-kb-search-widget) {
+.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-8ce3140c]:has(> .cn-form-widget),
+.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-8ce3140c]:has(> .cn-kb-search-widget) {
 	padding: 16px;
 }
 
@@ -21135,7 +21237,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    a square panel, which is the last visible piece of a card that is supposed
    to be absent. `CnDetailCard.cn-detail-card--chromeless` zeroes the same
    thing for the same reason. */
-.cn-widget-wrapper--chromeless[data-v-4f6c55f6] {
+.cn-widget-wrapper--chromeless[data-v-8ce3140c] {
 	border-radius: 0;
 }
 
@@ -21147,7 +21249,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
  * so users can override any token. Combined selector raises specificity above
  * the base `.cn-widget-wrapper` rules it supersedes.
  */
-.cn-widget-wrapper__header[data-v-4f6c55f6] {
+.cn-widget-wrapper__header[data-v-8ce3140c] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -21163,7 +21265,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 /* Actions with no title beside them. `header-left` is not rendered at all in
    this mode, and the header is `space-between`, so a single child would sit
    flush LEFT where every other surface puts its actions on the right. */
-.cn-widget-wrapper__header--actions-only[data-v-4f6c55f6] {
+.cn-widget-wrapper__header--actions-only[data-v-8ce3140c] {
 	justify-content: flex-end;
 }
 
@@ -21179,11 +21281,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    no-descending-specificity asks for. The cascade did not need it (this
    selector is more specific either way), a reader does: an override written
    above the thing it overrides has to be read twice. */
-.cn-widget-wrapper--chromeless .cn-widget-wrapper__header[data-v-4f6c55f6] {
+.cn-widget-wrapper--chromeless .cn-widget-wrapper__header[data-v-8ce3140c] {
 	border-bottom: none;
 	padding-inline: 0;
 }
-.cn-widget-wrapper__header-left[data-v-4f6c55f6] {
+.cn-widget-wrapper__header-left[data-v-8ce3140c] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -21192,19 +21294,19 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	   of centering between icon and actions (header is space-between). */
 	flex: 1 1 auto;
 }
-.cn-widget-wrapper__icon[data-v-4f6c55f6] {
+.cn-widget-wrapper__icon[data-v-8ce3140c] {
 	width: 24px;
 	height: 24px;
 	flex-shrink: 0;
 	color: var(--cn-widget-icon-color, var(--color-primary-element));
 }
-.cn-widget-wrapper__title-stack[data-v-4f6c55f6] {
+.cn-widget-wrapper__title-stack[data-v-8ce3140c] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-widget-wrapper__eyebrow[data-v-4f6c55f6] {
+.cn-widget-wrapper__eyebrow[data-v-8ce3140c] {
 	font-size: 13px;
 	line-height: 1.3;
 	color: var(--color-text-maxcontrast);
@@ -21212,7 +21314,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-widget-wrapper__title[data-v-4f6c55f6] {
+.cn-widget-wrapper__title[data-v-8ce3140c] {
 	font-weight: 600;
 	font-size: 14px;
 	margin: 0;
@@ -21220,34 +21322,34 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-widget-wrapper.cn-widget-wrapper--nc-dashboard[data-v-4f6c55f6] {
+.cn-widget-wrapper.cn-widget-wrapper--nc-dashboard[data-v-8ce3140c] {
 	background: var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
 	border: none;
 	border-radius: var(--border-radius-container-large, 16px);
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header[data-v-4f6c55f6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header[data-v-8ce3140c] {
 	padding: 16px;
 	border-bottom: none;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header-left[data-v-4f6c55f6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header-left[data-v-8ce3140c] {
 	gap: 16px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__icon[data-v-4f6c55f6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__icon[data-v-8ce3140c] {
 	width: 32px;
 	height: 32px;
 	background-size: 32px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__title[data-v-4f6c55f6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__title[data-v-8ce3140c] {
 	font-size: 20px;
 	font-weight: 700;
 	line-height: 24px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__content[data-v-4f6c55f6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__content[data-v-8ce3140c] {
 	padding: 0 16px 16px;
 }
-.cn-widget-wrapper__title-meta[data-v-4f6c55f6] {
+.cn-widget-wrapper__title-meta[data-v-8ce3140c] {
 	display: flex;
 	align-items: center;
 	gap: 4px;
@@ -21256,7 +21358,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	white-space: nowrap;
 	flex-shrink: 0;
 }
-.cn-widget-wrapper__actions[data-v-4f6c55f6] {
+.cn-widget-wrapper__actions[data-v-8ce3140c] {
 	display: flex;
 	gap: 4px;
 	flex-shrink: 0;
@@ -21264,7 +21366,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* The header's text link (`headerLink`). Theme hooks: --cn-widget-header-link-size
    and --cn-widget-header-link-weight. */
-.cn-widget-wrapper__header-link[data-v-4f6c55f6] {
+.cn-widget-wrapper__header-link[data-v-8ce3140c] {
 	align-self: center;
 	padding: 0 calc(1 * var(--default-grid-baseline));
 	color: var(--color-primary-element);
@@ -21273,11 +21375,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	text-decoration: none;
 	white-space: nowrap;
 }
-.cn-widget-wrapper__header-link[data-v-4f6c55f6]:hover,
-.cn-widget-wrapper__header-link[data-v-4f6c55f6]:focus-visible {
+.cn-widget-wrapper__header-link[data-v-8ce3140c]:hover,
+.cn-widget-wrapper__header-link[data-v-8ce3140c]:focus-visible {
 	text-decoration: underline;
 }
-.cn-widget-wrapper__header-link[data-v-4f6c55f6]:focus-visible {
+.cn-widget-wrapper__header-link[data-v-8ce3140c]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-small, 4px);
@@ -21288,7 +21390,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    wrapper is ever rendered without it. Material-design-icon components paint
    with `fill: currentColor`, so this reaches them; the :deep rule below makes
    it reach a raw <svg> in the slot too. */
-.cn-widget-wrapper__title-icon[data-v-4f6c55f6] {
+.cn-widget-wrapper__title-icon[data-v-8ce3140c] {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
@@ -21308,17 +21410,17 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* Right-positioned title icons sit AFTER the actions, so the margin belongs on
    the other side or it pushes the icon off the header's right edge. */
-.cn-widget-wrapper__title-icon[data-v-4f6c55f6]:last-child {
+.cn-widget-wrapper__title-icon[data-v-8ce3140c]:last-child {
 	margin-inline-end: 0;
 	margin-inline-start: 8px;
 }
 
 /* Material-design-icon components paint with `fill: currentColor`, so the
    colour above reaches them; this makes it reach a raw <svg> in the slot too. */
-.cn-widget-wrapper__title-icon[data-v-4f6c55f6] svg {
+.cn-widget-wrapper__title-icon[data-v-8ce3140c] svg {
 	fill: currentcolor;
 }
-.cn-widget-wrapper__footer[data-v-4f6c55f6] {
+.cn-widget-wrapper__footer[data-v-8ce3140c] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
@@ -21326,12 +21428,12 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	border-top: 1px solid var(--color-border);
 	flex-shrink: 0;
 }
-.cn-widget-wrapper__footer-link[data-v-4f6c55f6] {
+.cn-widget-wrapper__footer-link[data-v-8ce3140c] {
 	font-size: 13px;
 	color: var(--color-primary-element);
 	text-decoration: none;
 }
-.cn-widget-wrapper__footer-link[data-v-4f6c55f6]:hover {
+.cn-widget-wrapper__footer-link[data-v-8ce3140c]:hover {
 	text-decoration: underline;
 }
 
@@ -28648,7 +28750,7 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 }
 
 
-.cn-nc-widget-widget[data-v-04be70f3] {
+.cn-nc-widget-widget[data-v-f553a198] {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -28664,19 +28766,19 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
  * bottom, flush to the header on top). Same design tokens as core; overridable
  * via the host's CnWidgetWrapper styleConfig / nldesign.
  */
-.cn-nc-widget-widget__header[data-v-04be70f3] {
+.cn-nc-widget-widget__header[data-v-f553a198] {
 	display: flex;
 	align-items: center;
 	gap: 16px;
 	padding: 16px;
 	font-weight: 700;
 }
-.cn-nc-widget-widget__header-icon[data-v-04be70f3] {
+.cn-nc-widget-widget__header-icon[data-v-f553a198] {
 	width: 32px;
 	height: 32px;
 	flex: 0 0 auto;
 }
-.cn-nc-widget-widget__header-title[data-v-04be70f3] {
+.cn-nc-widget-widget__header-title[data-v-f553a198] {
 	flex: 1;
 	font-size: 20px;
 	font-weight: 700;
@@ -28685,18 +28787,18 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-nc-widget-widget__show-all[data-v-04be70f3] {
+.cn-nc-widget-widget__show-all[data-v-f553a198] {
 	align-self: flex-start;
 	padding: 8px 0 0;
 	color: var(--color-primary-element);
 	font-weight: 600;
 	text-decoration: none;
 }
-.cn-nc-widget-widget__show-all[data-v-04be70f3]:hover,
-.cn-nc-widget-widget__show-all[data-v-04be70f3]:focus-visible {
+.cn-nc-widget-widget__show-all[data-v-f553a198]:hover,
+.cn-nc-widget-widget__show-all[data-v-f553a198]:focus-visible {
 	text-decoration: underline;
 }
-.cn-nc-widget-widget__native[data-v-04be70f3] {
+.cn-nc-widget-widget__native[data-v-f553a198] {
 	flex: 1;
 	overflow: auto;
 	padding: 0 16px 16px;
@@ -28730,7 +28832,7 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
  * still claims that much room regardless of the grid track size, so the
  * track itself must not go below it.
  */
-.cn-nc-widget-widget--horizontal[data-v-04be70f3] .dashboard-widget > ul {
+.cn-nc-widget-widget--horizontal[data-v-f553a198] .dashboard-widget > ul {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 	gap: 8px;
@@ -28738,33 +28840,33 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	margin: 0;
 	padding: 0;
 }
-.cn-nc-widget-widget--horizontal[data-v-04be70f3] .dashboard-widget > ul > li {
+.cn-nc-widget-widget--horizontal[data-v-f553a198] .dashboard-widget > ul > li {
 	width: auto;
 	min-width: 0;
 }
-.cn-nc-widget-widget--horizontal[data-v-04be70f3] .item-list__entry {
+.cn-nc-widget-widget--horizontal[data-v-f553a198] .item-list__entry {
 	height: 100%;
 	margin: 0;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 }
-.cn-nc-widget-widget__body[data-v-04be70f3] {
+.cn-nc-widget-widget__body[data-v-f553a198] {
 	flex: 1;
 	overflow: auto;
 	padding: 0 16px 16px;
 }
-.cn-nc-widget-widget__body--vertical[data-v-04be70f3] {
+.cn-nc-widget-widget__body--vertical[data-v-f553a198] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 }
-.cn-nc-widget-widget__body--horizontal[data-v-04be70f3] {
+.cn-nc-widget-widget__body--horizontal[data-v-f553a198] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-nc-widget-widget__state[data-v-04be70f3] {
+.cn-nc-widget-widget__state[data-v-f553a198] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -28773,59 +28875,59 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
-.cn-nc-widget-widget__item[data-v-04be70f3] {
+.cn-nc-widget-widget__item[data-v-f553a198] {
 	display: flex;
 	text-decoration: none;
 	color: var(--color-main-text);
 	border-radius: var(--border-radius);
 	padding: 4px;
 }
-.cn-nc-widget-widget__item[data-v-04be70f3]:hover {
+.cn-nc-widget-widget__item[data-v-f553a198]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-nc-widget-widget__item--vertical[data-v-04be70f3] {
+.cn-nc-widget-widget__item--vertical[data-v-f553a198] {
 	flex-direction: row;
 	align-items: center;
 	gap: 8px;
 }
-.cn-nc-widget-widget__item--horizontal[data-v-04be70f3] {
+.cn-nc-widget-widget__item--horizontal[data-v-f553a198] {
 	flex-direction: column;
 	align-items: center;
 	width: 120px;
 	text-align: center;
 }
-.cn-nc-widget-widget__item-icon-wrap[data-v-04be70f3] {
+.cn-nc-widget-widget__item-icon-wrap[data-v-f553a198] {
 	width: 32px;
 	height: 32px;
 	flex: 0 0 32px;
 	position: relative;
 }
-.cn-nc-widget-widget__item-icon[data-v-04be70f3] {
+.cn-nc-widget-widget__item-icon[data-v-f553a198] {
 	width: 32px;
 	height: 32px;
 	object-fit: cover;
 	border-radius: 50%;
 }
-.cn-nc-widget-widget__item-overlay[data-v-04be70f3] {
+.cn-nc-widget-widget__item-overlay[data-v-f553a198] {
 	position: absolute;
 	right: -2px;
 	bottom: -2px;
 	width: 14px;
 	height: 14px;
 }
-.cn-nc-widget-widget__item-text[data-v-04be70f3] {
+.cn-nc-widget-widget__item-text[data-v-f553a198] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 	flex: 1;
 }
-.cn-nc-widget-widget__item-title[data-v-04be70f3] {
+.cn-nc-widget-widget__item-title[data-v-f553a198] {
 	font-weight: 600;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-nc-widget-widget__item-subtitle[data-v-04be70f3] {
+.cn-nc-widget-widget__item-subtitle[data-v-f553a198] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	overflow: hidden;
@@ -29522,13 +29624,13 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-facts-widget[data-v-8146cb58] {
+.cn-facts-widget[data-v-e1992d24] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
 	min-width: 0;
 }
-.cn-facts-widget__rows[data-v-8146cb58] {
+.cn-facts-widget__rows[data-v-e1992d24] {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 8px 16px;
@@ -29537,7 +29639,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 /* Each row is a grid of its own children: the wrapper takes no box. */
-.cn-facts-widget__row[data-v-8146cb58] {
+.cn-facts-widget__row[data-v-e1992d24] {
 	display: contents;
 }
 
@@ -29545,13 +29647,13 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
    pushed the label to the right of its column and added 12px around both. The
    class is doubled so these resets outrank that rule, and a dossiq-style
    `:deep()` override in an app is not needed. */
-.cn-facts-widget__label.cn-facts-widget__label[data-v-8146cb58] {
+.cn-facts-widget__label.cn-facts-widget__label[data-v-e1992d24] {
 	margin: 0;
 	padding: 0;
 	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__value.cn-facts-widget__value[data-v-8146cb58] {
+.cn-facts-widget__value.cn-facts-widget__value[data-v-e1992d24] {
 	margin: 0;
 	padding: 0;
 	text-align: start;
@@ -29559,20 +29661,20 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	min-width: 0;
 	overflow-wrap: anywhere;
 }
-.cn-facts-widget__title[data-v-8146cb58] {
+.cn-facts-widget__title[data-v-e1992d24] {
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-facts-widget__line[data-v-8146cb58] {
+.cn-facts-widget__line[data-v-e1992d24] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__muted[data-v-8146cb58] {
+.cn-facts-widget__muted[data-v-e1992d24] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__label .hidden-visually[data-v-8146cb58] {
+.cn-facts-widget__label .hidden-visually[data-v-e1992d24] {
 	clip-path: inset(50%);
 	height: 1px;
 	overflow: hidden;
@@ -29580,23 +29682,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	white-space: nowrap;
 	width: 1px;
 }
-.cn-facts-widget__label--icon[data-v-8146cb58] {
+.cn-facts-widget__label--icon[data-v-e1992d24] {
 	align-items: center;
 	display: flex;
 }
-.cn-facts-widget__value-link[data-v-8146cb58] {
+.cn-facts-widget__value-link[data-v-e1992d24] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-facts-widget__inline-button[data-v-8146cb58],
-.cn-facts-widget__icon-button[data-v-8146cb58],
-.cn-facts-widget__action[data-v-8146cb58] {
+.cn-facts-widget__inline-button[data-v-e1992d24],
+.cn-facts-widget__icon-button[data-v-e1992d24],
+.cn-facts-widget__action[data-v-e1992d24] {
 	align-items: center;
 	cursor: pointer;
 	display: inline-flex;
 	font: inherit;
 }
-.cn-facts-widget__inline-button[data-v-8146cb58] {
+.cn-facts-widget__inline-button[data-v-e1992d24] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border-dark);
 	border-radius: 16px;
@@ -29607,7 +29709,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	min-height: 28px;
 	padding: 0 10px;
 }
-.cn-facts-widget__icon-button[data-v-8146cb58] {
+.cn-facts-widget__icon-button[data-v-e1992d24] {
 	background: transparent;
 	border: 0;
 	border-radius: 6px;
@@ -29616,23 +29718,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 2px;
 	vertical-align: middle;
 }
-.cn-facts-widget__icon-button[data-v-8146cb58]:hover,
-.cn-facts-widget__icon-button[data-v-8146cb58]:focus-visible {
+.cn-facts-widget__icon-button[data-v-e1992d24]:hover,
+.cn-facts-widget__icon-button[data-v-e1992d24]:focus-visible {
 	background: var(--color-background-hover);
 	color: var(--color-main-text);
 }
-.cn-facts-widget__text[data-v-8146cb58] {
+.cn-facts-widget__text[data-v-e1992d24] {
 	color: var(--color-main-text);
 	font-size: 15px;
 }
 
 /* A lead: an icon tile or initials beside a bold title and a muted subtitle. */
-.cn-facts-widget__lead[data-v-8146cb58] {
+.cn-facts-widget__lead[data-v-e1992d24] {
 	align-items: center;
 	display: flex;
 	gap: 12px;
 }
-.cn-facts-widget__lead-tile[data-v-8146cb58] {
+.cn-facts-widget__lead-tile[data-v-e1992d24] {
 	align-items: center;
 	background: var(--color-background-dark);
 	border-radius: 8px;
@@ -29645,29 +29747,29 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	justify-content: center;
 	width: 40px;
 }
-.cn-facts-widget__lead-tile--success[data-v-8146cb58] {
+.cn-facts-widget__lead-tile--success[data-v-e1992d24] {
 	background: color-mix(in srgb, var(--color-success) 14%, var(--color-main-background));
 	border-radius: 50%;
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-facts-widget__lead-tile--info[data-v-8146cb58] {
+.cn-facts-widget__lead-tile--info[data-v-e1992d24] {
 	background: var(--color-primary-element-light);
 	border-radius: 50%;
 	color: var(--color-primary-element-light-text, var(--color-primary-element));
 }
-.cn-facts-widget__lead-text[data-v-8146cb58] {
+.cn-facts-widget__lead-text[data-v-e1992d24] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-facts-widget__lead-title[data-v-8146cb58] {
+.cn-facts-widget__lead-title[data-v-e1992d24] {
 	font-size: 15px;
 }
-.cn-facts-widget__lead-subtitle[data-v-8146cb58] {
+.cn-facts-widget__lead-subtitle[data-v-e1992d24] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-facts-widget__action[data-v-8146cb58] {
+.cn-facts-widget__action[data-v-e1992d24] {
 	align-self: flex-start;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -29679,11 +29781,11 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	min-height: 32px;
 	padding: 0 14px;
 }
-.cn-facts-widget__action[data-v-8146cb58]:hover,
-.cn-facts-widget__action[data-v-8146cb58]:focus-visible {
+.cn-facts-widget__action[data-v-e1992d24]:hover,
+.cn-facts-widget__action[data-v-e1992d24]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-facts-widget__link[data-v-8146cb58] {
+.cn-facts-widget__link[data-v-e1992d24] {
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-primary-element);
@@ -34640,26 +34742,26 @@ to {
   text-decoration: underline;
 }
 @charset "UTF-8";
-.cn-choice-cards[data-v-c551354c] {
+.cn-choice-cards[data-v-8d2b4ff4] {
   border: none;
   padding: 0;
   margin: 0;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__legend[data-v-c551354c] {
+.cn-choice-cards__legend[data-v-8d2b4ff4] {
   padding: 0;
   margin-block-end: 8px;
   font-weight: bold;
 }
 
-.cn-choice-cards__loading[data-v-c551354c] {
+.cn-choice-cards__loading[data-v-8d2b4ff4] {
   display: flex;
   justify-content: center;
   padding: 24px 0;
 }
 
-.cn-choice-cards__grid[data-v-c551354c] {
+.cn-choice-cards__grid[data-v-8d2b4ff4] {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 12px;
@@ -34671,26 +34773,26 @@ to {
   padding: 12px;
 }
 
-.cn-choice-cards__cell[data-v-c551354c] {
+.cn-choice-cards__cell[data-v-8d2b4ff4] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-inline-size: 0;
 }
 
-.cn-choice-cards__actions[data-v-c551354c] {
+.cn-choice-cards__actions[data-v-8d2b4ff4] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.cn-choice-cards__option[data-v-c551354c] {
+.cn-choice-cards__option[data-v-8d2b4ff4] {
   position: relative;
   display: block;
   cursor: pointer;
 }
 
-.cn-choice-cards__input[data-v-c551354c] {
+.cn-choice-cards__input[data-v-8d2b4ff4] {
   position: absolute;
   inset-block-start: 16px;
   inset-inline-end: 14px;
@@ -34700,7 +34802,7 @@ to {
 }
 
 /* Room for the input, so a long title never runs underneath it. */
-.cn-choice-cards__option[data-v-c551354c] .cn-card {
+.cn-choice-cards__option[data-v-8d2b4ff4] .cn-card {
   padding-inline-end: 44px;
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
@@ -34711,25 +34813,103 @@ to {
    touches a card, and the grid twitches. The border colour below already
    carries hover, so the scale is dropped: at (0,3,0) this beats the global
    `.cn-card:hover` at (0,2,0). */
-.cn-choice-cards__option[data-v-c551354c]:hover .cn-card {
+.cn-choice-cards__option[data-v-8d2b4ff4]:hover .cn-card {
   border-color: var(--color-primary-element);
   transform: none;
 }
 
 /* The focus ring belongs on the card, not on the small input inside it. */
-.cn-choice-cards__input[data-v-c551354c]:focus-visible + .cn-card {
+.cn-choice-cards__input[data-v-8d2b4ff4]:focus-visible + .cn-card {
   outline: 2px solid var(--color-primary-element);
   outline-offset: 2px;
 }
 
-.cn-choice-cards__input[data-v-c551354c]:disabled {
+.cn-choice-cards__input[data-v-8d2b4ff4]:disabled {
   cursor: default;
 }
 
-.cn-choice-cards__input[data-v-c551354c]:disabled + .cn-card {
+.cn-choice-cards__input[data-v-8d2b4ff4]:disabled + .cn-card {
+  opacity: 0.6;
+}
+
+.cn-choice-cards__rows[data-v-8d2b4ff4] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cn-choice-cards__row[data-v-8d2b4ff4] {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-large, 8px);
+  background: var(--color-main-background);
+  cursor: pointer;
+}
+
+.cn-choice-cards__row[data-v-8d2b4ff4]:hover {
+  border-color: var(--color-border-dark);
+}
+
+.cn-choice-cards__row--selected[data-v-8d2b4ff4],
+.cn-choice-cards__row--selected[data-v-8d2b4ff4]:hover {
+  border-color: var(--color-primary-element);
+  /* The second pixel of the 2px selected border, without moving the content. */
+  box-shadow: inset 0 0 0 1px var(--color-primary-element);
+  background: var(--color-primary-element-light);
+}
+
+.cn-choice-cards__row--disabled[data-v-8d2b4ff4] {
+  cursor: default;
   opacity: 0.6;
 }
 
+.cn-choice-cards__row[data-v-8d2b4ff4]:has(.cn-choice-cards__row-input:focus-visible) {
+  outline: 2px solid var(--color-primary-element);
+  outline-offset: 2px;
+}
+
+.cn-choice-cards__row-input[data-v-8d2b4ff4] {
+  flex: none;
+  margin: 2px 0 0;
+  accent-color: var(--color-primary-element);
+  cursor: inherit;
+}
+
+.cn-choice-cards__row-icon[data-v-8d2b4ff4] {
+  flex: none;
+}
+
+.cn-choice-cards__row-text[data-v-8d2b4ff4] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cn-choice-cards__row-title[data-v-8d2b4ff4] {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.cn-choice-cards__row-description[data-v-8d2b4ff4] {
+  font-size: 13px;
+  color: var(--color-text-maxcontrast);
+}
+
+.cn-choice-cards__reason[data-v-8d2b4ff4] {
+  font-size: 13px;
+  color: var(--color-text-maxcontrast);
+  font-style: italic;
+}
+
+.cn-choice-cards__reason--card[data-v-8d2b4ff4] {
+  display: block;
+  margin-block-start: 4px;
+}
+
 .cn-wizard-dialog__step-body[data-v-4a9bf6d1] {
 	min-height: 200px;
 }
@@ -38471,7 +38651,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-42bc14a4] {
+.cn-dashboard-page[data-v-582eaf2c] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -38485,7 +38665,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-42bc14a4] {
+.cn-dashboard-page__header[data-v-582eaf2c] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -38497,21 +38677,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-42bc14a4] {
+.cn-dashboard-page__header-left[data-v-582eaf2c] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-42bc14a4] {
+.cn-dashboard-page__title-row[data-v-582eaf2c] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-42bc14a4] {
+.cn-dashboard-page__title[data-v-582eaf2c] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-42bc14a4] {
+.cn-dashboard-page__description[data-v-582eaf2c] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -38519,19 +38699,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-42bc14a4] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-582eaf2c] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-42bc14a4] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-582eaf2c] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-42bc14a4] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-582eaf2c] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-42bc14a4] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-582eaf2c] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -38539,17 +38719,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-42bc14a4] {
+.cn-dashboard-page__switch-row[data-v-582eaf2c] {
 	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-42bc14a4] {
+.cn-dashboard-page__switch-row-spacer[data-v-582eaf2c] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-42bc14a4] {
+.cn-dashboard-page__view-link[data-v-582eaf2c] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -38563,36 +38743,45 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-42bc14a4]:hover {
+.cn-dashboard-page__view-link[data-v-582eaf2c]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-42bc14a4]:focus-visible {
+.cn-dashboard-page__view-link[data-v-582eaf2c]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-42bc14a4] {
+.cn-dashboard-page__view-link-icon[data-v-582eaf2c] {
 	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-42bc14a4] {
+.cn-dashboard-page__date-range--segmented[data-v-582eaf2c] {
 	margin-bottom: 16px;
 }
-.cn-dashboard-page__date-segmented[data-v-42bc14a4] {
+.cn-dashboard-page__date-segmented[data-v-582eaf2c] {
 	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-42bc14a4] {
+.cn-dashboard-page__kpi-row[data-v-582eaf2c] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
-.cn-dashboard-page__kpi-cell[data-v-42bc14a4] {
+
+/* Board look: GridStack insets every card by the grid margin on each side, so
+   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-582eaf2c] .cn-dashboard-grid {
+	width: auto;
+	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
+}
+.cn-dashboard-page__kpi-cell[data-v-582eaf2c] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-42bc14a4] > * {
+.cn-dashboard-page__kpi-cell[data-v-582eaf2c] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -38605,7 +38794,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-42bc14a4] {
+.cn-dashboard-page__header-actions[data-v-582eaf2c] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -38621,19 +38810,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-42bc14a4] {
+.cn-dashboard-page__date-range[data-v-582eaf2c] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-42bc14a4] {
+.cn-dashboard-page__date-range--pills[data-v-582eaf2c] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-42bc14a4] {
+.cn-dashboard-page__date-pills[data-v-582eaf2c] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-42bc14a4] {
+.cn-dashboard-page__date-pill[data-v-582eaf2c] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -38648,77 +38837,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-42bc14a4]:hover {
+.cn-dashboard-page__date-pill[data-v-582eaf2c]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-42bc14a4]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-582eaf2c]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-42bc14a4] {
+.cn-dashboard-page__date-pill--active[data-v-582eaf2c] {
 	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-42bc14a4]:hover {
+.cn-dashboard-page__date-pill--active[data-v-582eaf2c]: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-42bc14a4] {
+.cn-dashboard-page__date-pill--custom[data-v-582eaf2c] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-582eaf2c] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-582eaf2c] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-582eaf2c] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-582eaf2c] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-42bc14a4] {
+.cn-dashboard-page__empty[data-v-582eaf2c] {
 	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-42bc14a4] {
+.cn-dashboard-page__view-switch[data-v-582eaf2c] {
 	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-42bc14a4] {
+.cn-page-view-region--empty[data-v-582eaf2c] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-42bc14a4] {
+.cn-dashboard-page__page-filters[data-v-582eaf2c] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-42bc14a4] {
+.cn-dashboard-page__page-filter[data-v-582eaf2c] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-42bc14a4] {
+.cn-dashboard-page__page-filter-label[data-v-582eaf2c] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-42bc14a4] {
+.cn-dashboard-page__widget-edit[data-v-582eaf2c] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -38737,8 +38926,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-42bc14a4] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-42bc14a4] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-582eaf2c] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-582eaf2c] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -38754,7 +38943,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-42bc14a4] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-582eaf2c] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -38764,13 +38953,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-42bc14a4] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-582eaf2c] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-582eaf2c] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-582eaf2c] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-42bc14a4] {
+.cn-dashboard-page__unknown[data-v-582eaf2c] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -38781,29 +38970,43 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-42bc14a4] {
+.cn-dashboard-page__content[data-v-582eaf2c] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-42bc14a4] {
+.cn-dashboard-page__content-item[data-v-582eaf2c] {
 	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-42bc14a4] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-42bc14a4] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-582eaf2c] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-582eaf2c] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-42bc14a4] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-582eaf2c] {
 		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-582eaf2c] .cn-widget-wrapper__actions .action-item__menutoggle {
+		min-width: 44px;
+}
+.cn-dashboard-page--board[data-v-582eaf2c] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+}
 }
 
 /* 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-42bc14a4] {
+.cn-dashboard-page__widget-count[data-v-582eaf2c] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -38812,13 +39015,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-42bc14a4] {
+.cn-dashboard-page__widget-note[data-v-582eaf2c] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-42bc14a4] {
+.cn-dashboard-page__widget-action[data-v-582eaf2c] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -38834,7 +39037,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-42bc14a4]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-582eaf2c]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -43241,23 +43444,23 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-notif-prefs__intro[data-v-2a94b3e4] {
+.cn-notif-prefs__intro[data-v-c746b496] {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-notif-prefs__group[data-v-2a94b3e4] {
+.cn-notif-prefs__group[data-v-c746b496] {
 	margin-bottom: 20px;
 }
-.cn-notif-prefs__group-title[data-v-2a94b3e4] {
+.cn-notif-prefs__group-title[data-v-c746b496] {
 	margin: 8px 0 8px;
 	font-weight: bold;
 }
-.cn-notif-prefs__grid[data-v-2a94b3e4] {
+.cn-notif-prefs__grid[data-v-c746b496] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 	gap: 8px;
 }
-.cn-notif-prefs__card[data-v-2a94b3e4] {
+.cn-notif-prefs__card[data-v-c746b496] {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
@@ -43384,6 +43587,80 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
+.cn-user-settings-dialog__body[data-v-8ebfd3c8] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 24px;
+}
+.cn-user-settings-dialog__nav[data-v-8ebfd3c8] {
+	flex: 0 0 200px;
+	width: 200px;
+	padding-top: 18px;
+}
+.cn-user-settings-dialog__nav ul[data-v-8ebfd3c8] {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8] {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 40px;
+	padding: 0 12px;
+	border-radius: var(--border-radius-element, 8px);
+	font-size: 15px;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8]:hover {
+	background: var(--color-background-hover);
+}
+.cn-user-settings-dialog__nav-link[data-v-8ebfd3c8]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-user-settings-dialog__nav-link--active[data-v-8ebfd3c8],
+.cn-user-settings-dialog__nav-link--active[data-v-8ebfd3c8]:hover {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-weight: 600;
+}
+.cn-user-settings-dialog__nav-icon[data-v-8ebfd3c8] {
+	display: inline-flex;
+	flex: none;
+	width: 18px;
+	height: 18px;
+	align-items: center;
+	justify-content: center;
+}
+.cn-user-settings-dialog__sections[data-v-8ebfd3c8] {
+	display: flex;
+	flex: 1 1 380px;
+	flex-direction: column;
+	min-width: 0;
+}
+.cn-user-settings-dialog__sections[data-v-8ebfd3c8] .app-settings-section {
+	margin: 0;
+	padding: 18px 0;
+	border-top: 1px solid var(--color-border);
+}
+.cn-user-settings-dialog__sections[data-v-8ebfd3c8] .app-settings-section__name {
+	margin: 0 0 12px;
+	font-size: 17px;
+	font-weight: 700;
+}
+.cn-user-settings-dialog__note[data-v-8ebfd3c8] {
+	flex: 1 1 auto;
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+
 /* The environment banner runs along the top of the shell and cannot scroll away; the shell makes room for it. */
 .cn-app-root--with-environment {
 	position: relative;
@@ -43678,51 +43955,6 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-features-tab__grid[data-v-f4a6fe92] {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 16px;
-}
-.cn-features-tab__card[data-v-f4a6fe92] {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 16px;
-	background: var(--color-main-background);
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius-large, 12px);
-	transition: border-color 120ms ease, box-shadow 120ms ease;
-}
-.cn-features-tab__card[data-v-f4a6fe92]:hover {
-	border-color: var(--color-primary-element);
-	box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.08));
-}
-.cn-features-tab__title[data-v-f4a6fe92] {
-	margin: 0;
-	font-size: 1.05em;
-	color: var(--color-main-text);
-}
-.cn-features-tab__summary[data-v-f4a6fe92] {
-	margin: 0;
-	color: var(--color-text-light);
-	font-size: 0.95em;
-	line-height: 1.4;
-	flex: 1;
-}
-.cn-features-tab__link[data-v-f4a6fe92] {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--color-primary-element);
-	text-decoration: none;
-	font-size: 0.9em;
-	margin-top: auto;
-}
-.cn-features-tab__link[data-v-f4a6fe92]:hover {
-	text-decoration: underline;
-}
-
-
 .cn-roadmap-item[data-v-f352eb12] {
 	display: flex;
 	flex-direction: column;
@@ -43823,34 +44055,442 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-roadmap-tab__grid[data-v-67050643] {
+.cn-roadmap-tab__grid[data-v-732ef80f] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 	gap: 16px;
 }
-.cn-roadmap-tab__card[data-v-67050643] {
+.cn-roadmap-tab__card[data-v-732ef80f] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 12px);
 	transition: border-color 120ms ease, box-shadow 120ms ease;
 }
-.cn-roadmap-tab__card[data-v-67050643]:hover {
+.cn-roadmap-tab__card[data-v-732ef80f]:hover {
 	border-color: var(--color-primary-element);
 	box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.08));
 }
-.cn-roadmap-tab__loading[data-v-67050643] {
+.cn-roadmap-tab__loading[data-v-732ef80f] {
 	display: flex;
 	justify-content: center;
 	padding: 32px;
 }
 
 
-.cn-features-and-roadmap-view[data-v-191ea8ba] {
+.cn-features-board[data-v-f306c9ee] {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap, 20px);
+	padding: var(--cn-board-content-padding, 24px 28px);
+	max-width: 1240px;
+	width: 100%;
+}
+.cn-features-board__header[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 4px 0 8px;
+}
+.cn-features-board__title-row[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: 12px 24px;
+}
+.cn-features-board__title[data-v-f306c9ee] {
+	flex: 1 1 320px;
+	min-width: 0;
+	margin: 0;
+	font-size: 28px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+.cn-features-board__header-actions[data-v-f306c9ee] {
+	flex: none;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+.cn-features-board__subtitle[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 15px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__tab-row[data-v-f306c9ee] {
+	display: flex;
+	align-items: flex-end;
+	gap: 8px;
+	margin-bottom: calc(-1 * var(--cn-board-section-gap, 20px));
+}
+.cn-features-board__tabs[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-features-board__tab[data-v-f306c9ee] {
+	display: inline-flex;
+	align-items: center;
+	box-sizing: border-box;
+	min-height: 34px;
+	margin: 0 0 -1px;
+	padding: 8px 12px;
+	border: 1px solid var(--cn-board-hairline, var(--color-border));
+	border-bottom: none;
+	border-radius: 8px 8px 0 0;
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 400;
+	cursor: pointer;
+	white-space: nowrap;
+}
+.cn-features-board__tab--active[data-v-f306c9ee] {
+	position: relative;
+	background: var(--color-main-background);
+	border-bottom: 1px solid var(--color-main-background);
+	font-weight: 700;
+}
+.cn-features-board__tab-actions[data-v-f306c9ee] {
+	flex: none;
+	align-self: flex-start;
+	margin: 0 8px 8px 0;
+}
+.cn-features-board__panel[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 22px;
+}
+.cn-features-board__panel--tabbed[data-v-f306c9ee] {
+	padding: 22px;
+	border: 1px solid var(--color-border);
+	border-radius: 0 var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+.cn-features-board__filter[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-features-board__filter-option[data-v-f306c9ee] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+	cursor: pointer;
+}
+.cn-features-board__filter--chips .cn-features-board__filter-option[data-v-f306c9ee] {
+	height: 36px;
+	padding: 0 14px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 18px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+.cn-features-board__filter--chips .cn-features-board__filter-option--active[data-v-f306c9ee] {
+	border-color: var(--color-main-text);
+	background: var(--color-main-text);
+	color: var(--color-main-background);
+}
+.cn-features-board__filter-count[data-v-f306c9ee] {
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__filter--chips .cn-features-board__filter-option--active .cn-features-board__filter-count[data-v-f306c9ee] {
+	color: var(--color-border-dark);
+}
+.cn-features-board__filter--segmented[data-v-f306c9ee] {
+	display: inline-flex;
+	align-self: flex-start;
+	gap: 2px;
+	padding: 3px;
+	border-radius: 8px;
+	background: var(--color-background-dark);
+}
+.cn-features-board__filter--segmented .cn-features-board__filter-option[data-v-f306c9ee] {
+	height: 34px;
+	padding: 0 14px;
+	border: 0;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--color-main-text);
+}
+.cn-features-board__filter--segmented .cn-features-board__filter-option--active[data-v-f306c9ee] {
+	background: var(--color-main-background);
+	box-shadow: 0 1px 2px rgba(27, 28, 29, 0.12);
+}
+.cn-features-board__body[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 24px;
+}
+.cn-features-board__groups[data-v-f306c9ee] {
+	flex: 999 1 520px;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 26px;
+}
+.cn-features-board__groups--rows[data-v-f306c9ee] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+	gap: 20px;
+}
+.cn-features-board__group[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	max-width: none;
+	margin: 0;
+}
+.cn-features-board__groups--rows .cn-features-board__group[data-v-f306c9ee] {
+	padding: var(--cn-board-card-padding, 20px 22px);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+.cn-features-board__group-head[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 10px;
+}
+.cn-features-board__group-title[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+.cn-features-board__groups--rows .cn-features-board__group-title[data-v-f306c9ee] {
+	font-size: 17px;
+}
+.cn-features-board__group-caption[data-v-f306c9ee] {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__cards[data-v-f306c9ee] {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	gap: 16px;
+}
+.cn-features-board__card[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 18px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+.cn-features-board__card-head[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 4px;
+}
+.cn-features-board__card-title[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 17px;
+	font-weight: 700;
+	line-height: 1.3;
+}
+.cn-features-board__card-summary[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-main-text);
+}
+.cn-features-board__card-footer[data-v-f306c9ee] {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	min-height: 34px;
+	margin-top: auto;
+	padding-top: 10px;
+	border-top: 1px solid var(--color-background-dark);
+}
+.cn-features-board__read-more[data-v-f306c9ee] {
+	display: inline-flex;
+	align-items: center;
+	height: 34px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 8px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: none;
+}
+.cn-features-board__rows[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-features-board__row[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px 16px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-background-dark);
+}
+.cn-features-board__row-text[data-v-f306c9ee] {
+	flex: 1 1 240px;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.cn-features-board__row-title[data-v-f306c9ee] {
+	font-size: 15px;
+	font-weight: 500;
+}
+.cn-features-board__row-summary[data-v-f306c9ee] {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__next[data-v-f306c9ee] {
+	flex: 1 1 280px;
+	min-width: 0;
+	max-width: 340px;
+}
+.cn-features-board__next-card[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 18px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-background-hover);
+}
+.cn-features-board__next-head[data-v-f306c9ee] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.cn-features-board__next-title[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+.cn-features-board__next-lead[data-v-f306c9ee] {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__next-list[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-features-board__next-item[data-v-f306c9ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border);
+	border-radius: 10px;
+	background: var(--color-main-background);
+}
+.cn-features-board__next-link[data-v-f306c9ee] {
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.3;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+.cn-features-board__next-meta[data-v-f306c9ee] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__next-opened[data-v-f306c9ee] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+.cn-features-board__next-more[data-v-f306c9ee] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 14px;
+	font-weight: 600;
+}
+.cn-features-board__empty[data-v-f306c9ee] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-features-board__notice[data-v-f306c9ee] {
+	margin: 0;
+}
+
+
+.cn-features-tab__grid[data-v-f4a6fe92] {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 16px;
+}
+.cn-features-tab__card[data-v-f4a6fe92] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 16px;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 12px);
+	transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+.cn-features-tab__card[data-v-f4a6fe92]:hover {
+	border-color: var(--color-primary-element);
+	box-shadow: 0 2px 8px var(--color-box-shadow, rgba(0, 0, 0, 0.08));
+}
+.cn-features-tab__title[data-v-f4a6fe92] {
+	margin: 0;
+	font-size: 1.05em;
+	color: var(--color-main-text);
+}
+.cn-features-tab__summary[data-v-f4a6fe92] {
+	margin: 0;
+	color: var(--color-text-light);
+	font-size: 0.95em;
+	line-height: 1.4;
+	flex: 1;
+}
+.cn-features-tab__link[data-v-f4a6fe92] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--color-primary-element);
+	text-decoration: none;
+	font-size: 0.9em;
+	margin-top: auto;
+}
+.cn-features-tab__link[data-v-f4a6fe92]:hover {
+	text-decoration: underline;
+}
+
+
+.cn-features-and-roadmap-view[data-v-f19c0cb4] {
 	max-width: 1200px;
 	margin: 0 auto;
 	padding: 24px 16px;
 }
-.cn-features-and-roadmap-view__header[data-v-191ea8ba] {
+.cn-features-and-roadmap-view__header[data-v-f19c0cb4] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -43862,29 +44502,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-191ea8ba] {
+.cn-features-and-roadmap-view__title[data-v-f19c0cb4] {
 	font-size: 1.4em;
 	margin: 0;
 	color: var(--color-main-text);
 }
-.cn-features-and-roadmap-view__actions[data-v-191ea8ba] {
+.cn-features-and-roadmap-view__actions[data-v-f19c0cb4] {
 	display: flex;
 	gap: 8px;
 	align-items: center;
 	flex-wrap: wrap;
 }
-.cn-features-and-roadmap-view__panel[data-v-191ea8ba] {
+.cn-features-and-roadmap-view__panel[data-v-f19c0cb4] {
 	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-191ea8ba] a {
+.cn-features-and-roadmap-view__docs-note[data-v-f19c0cb4] a {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-features-and-roadmap-view__docs-note[data-v-191ea8ba] a:hover {
+.cn-features-and-roadmap-view__docs-note[data-v-f19c0cb4] a:hover {
 	text-decoration: underline;
 	opacity: 0.85;
 }