@conduction/nextcloud-vue 2.98.0 → 2.100.0

package/dist/esm/nextcloud-vue.css

@@ -208,6 +208,50 @@
 	color: var(--color-primary-element-text);
 }
 
+/* ---- Header action buttons (CnActionButtons) ----------------------------- */
+/* The board draws a page's secondary actions as neutral 40px buttons: the
+   main background, a grey border, the main text at 600 (DqZaak "Bericht",
+   "Document", "Contact vastleggen", "Bewerken"). Nextcloud's secondary button
+   is a primary tint. The label hands its ink to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *),
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	height: var(--cn-board-control-height);
+	min-height: var(--cn-board-control-height);
+	padding: 0 14px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
+   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+.cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
+	gap: 10px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+	margin-inline-end: 8px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
+	width: 16px;
+	height: 16px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *):hover,
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
 /* ---- The buildiq square ------------------------------------------------ */
 .cn-look-board .cn-buildiq-edit .cn-buildiq-edit__actions .button-vue {
 	box-sizing: border-box;
@@ -220,6 +264,34 @@
 	border-radius: var(--cn-board-control-radius);
 }
 
+/* ---- The Actions menu trigger (CnActionsMenu) ---------------------------- */
+/* A menu asked for as `secondary` ("Meer" in a detail header, "Acties" at the
+   end of a tab strip) is the board's neutral control: the main background, a
+   grey border, the main text at 600 (DqZaak), not Nextcloud's primary tint.
+   NcActions marks a secondary menu `action-item--secondary` on its root and
+   keeps a class given to it off, so the rule reads that marker. The label
+   hands its ink to --nldesign-color-on-surface for a theme that forces the
+   body ink onto every span (thematiq). */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
+/* A trailing chevron ("Meer ⌄") follows the label, 6px after it. */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle:has(.chevron-down-icon) .button-vue__wrapper:not(.cn-look-nextcloud *) {
+	flex-direction: row-reverse;
+	gap: 6px;
+}
+
 /* ---- The navigation ---------------------------------------------------- */
 .cn-look-board .app-navigation[data-testid="cn-nav"] {
 	--app-navigation-padding: 0px;
@@ -297,6 +369,40 @@
 	color: inherit;
 }
 
+/* A caption's edit pencil ("Mijn zaaktypen") sits on the caption's line at
+   its end, 4px in: a 28px round muted button with a 16px icon that adds no
+   height (DqZijbalk). It is placed absolutely because a theme may force the
+   caption to `display: block` at id strength (thematiq's Zuiddrecht sheet),
+   which put the pencil on a line of its own. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption:has(.app-navigation-caption__actions) {
+	position: relative;
+	padding-inline-end: 36px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions {
+	--default-clickable-area: 28px;
+	position: absolute;
+	inset-block-start: -6px;
+	inset-inline-end: 4px;
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	width: 28px;
+	min-width: 28px;
+	height: 28px;
+	min-height: 28px;
+	padding: 0;
+	border-radius: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__actions .button-vue svg {
+	width: 16px;
+	height: 16px;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry-link {
 	min-height: 42px;
@@ -311,7 +417,15 @@
 	color: var(--color-main-text);
 }
 
+/* The open entry sits on the tonal primary. NcAppNavigationItem paints an
+   active entry with a 16% (22% hovered) primary mix at `!important`, so the
+   board value needs `!important` too; the selector is the more specific one.
+   The link carries the same ground. */
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active:hover {
+	background-color: var(--color-primary-element-light) !important;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry.active .app-navigation-entry-link {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
@@ -357,9 +471,11 @@
 	font-weight: 700;
 }
 
+/* White on the error colour: --color-error-text is the error colour for text on
+   a light ground (#8A0000 under thematiq), not the text on an error pill. */
 .cn-look-board .cn-app-nav__count--attention {
 	background: var(--color-error);
-	color: var(--color-error-text, var(--color-primary-element-text));
+	color: var(--color-primary-element-text);
 }
 
 /* The footer: Help, then Advanced, whatever the declared order. */
@@ -441,6 +557,71 @@
 	font-weight: 600;
 }
 
+/* ---- Breadcrumbs (CnBreadcrumbs) ----------------------------------------- */
+/* The board draws a trail as a line of 14px text, 8px apart: the crumbs that
+   lead somewhere as underlined links in the primary colour, the current one
+   as plain muted text (DqZaak "Alle zaken / 2026-0082"). NcBreadcrumbs draws
+   each crumb as a 34px tertiary button. The doubled classes outrank its
+   scoped rules; the ink goes through --nldesign-color-on-surface as well, for
+   a theme that forces the body ink onto every link and span (thematiq). */
+.cn-look-board .cn-breadcrumbs.cn-breadcrumbs:not(.cn-look-nextcloud *) {
+	min-height: 0;
+	height: auto;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-breadcrumbs .breadcrumb__crumbs:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb.vue-crumb:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element);
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: inherit;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) .button-vue__text {
+	padding: 0;
+	font-weight: inherit;
+	line-height: inherit;
+	text-decoration: underline;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) .button-vue__text {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb__separator:not(.cn-look-nextcloud *) {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
 /* ---- Settings: header, cards in a grid, version card ------------------- */
 .cn-look-board .cn-admin-settings-shell__header:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__header:not(.cn-look-nextcloud *) {
@@ -859,6 +1040,63 @@
    ground ("Verzoek", "Nieuw"); the default look keeps the brighter
    primary-element text. The other tones already match the board. */
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	--cn-status-badge-ink: var(--color-primary-element-light-text);
+	color: var(--cn-status-badge-ink);
+}
+
+/* Every board pill is 13px at 600 on a 3px 10px pad with a 12px corner
+   (DqZaak's header pills, DqZaken's status column). */
+.cn-look-board .cn-status-badge:not(.cn-status-badge--small):not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+/* A pill paints its own pairing of ink and fill. A theme that forces the body
+   ink onto every span (thematiq's text rule, `!important` at id level) reads
+   that ink from --nldesign-color-on-surface when the surface sets it, so the
+   pill hands it its own ink: "In behandeling" stays purple on purple. */
+.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--cn-status-badge-ink);
+}
+
+/* ---- Info notes (NcNoteCard type="info") -------------------------------- */
+/* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
+   of padding, radius 8, an 18px icon 10px before the text, 14px text in the
+   deep primary ink at 1.5, and a bold heading line (DqBesluit and 13 other
+   boards). NcNoteCard paints its ground and ink with `!important`, and a
+   theme forces the body ink onto every p and span (thematiq), so the ground,
+   the ink and the paragraph colour carry `!important` here too, scoped to
+   the board look; the ink also goes to --nldesign-color-on-surface. */
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	--note-card-icon-size: 18px;
+	--note-theme: var(--color-primary-element-light-text);
+	gap: 10px;
+	padding: 12px 14px;
+	border-inline-start: 0;
+	border-radius: 8px;
+	background-color: var(--color-primary-element-light) !important;
+	color: var(--color-primary-element-light-text) !important;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) p {
+	color: var(--color-primary-element-light-text) !important;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__heading {
+	font-size: inherit;
+	font-weight: 700 !important;
+}
+
+.cn-look-board .notecard.notecard--info:not(.cn-look-nextcloud *) .notecard__icon {
+	padding-top: 1px;
 	color: var(--color-primary-element-light-text);
 }
 
@@ -869,6 +1107,68 @@
 	font-weight: 600;
 }
 
+/* ---- Label and value pairs (CnDetailGrid) -------------------------------- */
+/* The board draws pairs as plain text, not as grey cards with an accent bar:
+   the grid as a 13px muted label over a 15px value at weight 500 with a
+   hairline under each pair (DqZaak "Zaakgegevens"), the horizontal layout as
+   two columns of 14px text, the label column as wide as its longest label
+   (the side cards). Both at the board's line height, 1.2, not Nextcloud's 1.5:
+   a pair is 47px tall on the board. The muted label also hands its ink to
+   --nldesign-color-on-surface, which a theme that forces the body ink onto
+   every div (thematiq) reads. */
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
+	gap: 12px 24px;
+	font-size: 15px;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal:not(.cn-look-nextcloud *) {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	font-size: 14px;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	gap: 3px;
+	padding: 0;
+	border-inline-start: none;
+	border-radius: 0;
+	background: none;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	display: contents;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	min-width: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	font-size: inherit;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	margin: 0;
+	font-size: inherit;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
 /* ---- Dashboard card titles --------------------------------------------- */
 /* A card's title on a dashboard (and on the widgets under a reports page) is
    the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
@@ -1217,6 +1517,54 @@
 	color: var(--color-main-text);
 }
 
+/* A Nextcloud text field or text area in a board dialog is the board's field:
+   its label above the control at 14px/600, the control 40px with a 1px grey
+   border and radius 8 (PlanItemDialog, DqWerkvoorraad). NcInputField draws
+   its border as a 65%-transparent shadow, which on the white dialog read as
+   an empty band, and floats its label inside the border. A field with
+   `labelOutside` keeps the app's own label and takes the same control. */
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label),
+.cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+/* The doubled class outranks NcInputField's raised-label rule (focused or
+   filled), which would pin the label's top as well and squash it. */
+.cn-dialog-board .dialog__content .input-field__input + .input-field__label.input-field__label,
+.cn-dialog-board .dialog__content .textarea__input + .textarea__label.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: var(--cn-field-label-size, 14px);
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-dialog-board .dialog__content .input-field__main-wrapper {
+	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
+}
+
+.cn-dialog-board .dialog__content .input-field__input,
+.cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
+.cn-dialog-board .dialog__content .textarea__input,
+.cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border-radius: 8px;
+	box-shadow: 0 0 0 1px var(--color-border-dark);
+	font-size: var(--cn-field-text-size, 15px);
+}
+
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
+	opacity: 1 !important;
+}
+
 /* Type-to-confirm: a labelled 40px field with a monospace value and a hint. */
 .cn-dialog__confirm-field {
 	display: flex;
@@ -2063,10 +2411,15 @@
 	outline-offset: 2px;
 }
 
+/* The selected chip is light on dark, so it hands its ink to
+   --nldesign-color-on-surface: thematiq forces the body ink onto every span
+   with `!important` and reads it from that property, which left the label
+   dark on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
+	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
@@ -2087,8 +2440,12 @@
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
+/* On the selected chip the count is a lighter bubble on the dark chip
+   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
+   text, the chip's own colour, which hid the bubble. */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	background: var(--cn-board-text-soft);
+	--nldesign-color-on-surface: var(--color-primary-element-text);
+	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
 	color: var(--color-primary-element-text);
 }
 
@@ -2360,12 +2717,16 @@
 	border-radius: 0;
 }
 
-/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
+/* The header row is near-white on the boards (#fafbfc), not the hover grey,
+   its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	padding: 12px 16px;
 	border-bottom: 0;
 	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	font-weight: 600;
 }
 
@@ -2376,6 +2737,20 @@
 	font-size: 14px;
 }
 
+/* The board sets its table at the normal line height: a row with a title and
+   a secondary line is 66px and the header row 50px (DqZaken). Nextcloud's 1.5
+   made them 71px and 67px, and the header's sort button kept the 34px
+   clickable area. */
+.cn-look-board .cn-table-container--board .cn-data-table {
+	line-height: normal;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-row {
 	border-bottom: 0;
 }
@@ -2431,7 +2806,9 @@
 	margin-inline-start: 4px;
 }
 
-/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+/* The selection column: 18px checkboxes, 28px of content between 16px of
+   padding either side, 60px in all (DqZaken and 130 other boards; the title
+   column starts 77px in).
    The box model is set with `!important` and the widths include the padding:
    Nextcloud's server.css sets `box-sizing: border-box` on everything under
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
@@ -2439,9 +2816,9 @@
    header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
-	width: 44px;
-	min-width: 44px;
-	padding-inline: 16px 0;
+	width: 60px;
+	min-width: 60px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
@@ -2449,6 +2826,16 @@
 	--icon-size: 18px;
 }
 
+/* The checkbox is the 18px box alone, as the board draws it: NcCheckboxRadioSwitch
+   wraps it in a 34px clickable area with 4px 7px of padding, a 42px block that
+   set every row's height (71px where DqZaken's rows are 66). The cell around it
+   stays the click target's room: 44px wide, a full row high. */
+.cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch .checkbox-radio-switch__content {
+	min-height: 0;
+	height: auto;
+	padding: 0;
+}
+
 /* The title column: a 15px weight 600 link, the secondary line under it. */
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title {
 	color: var(--color-main-text);
@@ -2459,6 +2846,7 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -2500,10 +2888,14 @@
 	gap: 10px;
 }
 
+/* The initials sit on the light primary tint in the primary ink, the board's
+   person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
 	font-size: 12px;
+	font-weight: 700;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
@@ -4810,86 +5202,102 @@ a.cn-kpi-card--board * {
 
 /* Color variants */
 .cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--primary {
+	--cn-status-badge-ink: var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--success {
+	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
 	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success-text, var(--color-success));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
 	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
+	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
 	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error-text, var(--color-error));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
+	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
 	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info-text, var(--color-info, #0082c9));
+	color: var(--cn-status-badge-ink);
 }
 
 /* Work in progress ("In behandeling"), a board tone. */
 .cn-status-badge--purple {
+	--cn-status-badge-ink: var(--cn-status-purple-text);
 	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Handed on ("Omgezet naar een zaak"), a board tone. */
 .cn-status-badge--teal {
+	--cn-status-badge-ink: var(--cn-status-teal-text);
 	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--primary {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-primary-element);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--success {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-success);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-primary-text);
 	background-color: var(--color-warning);
-	color: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--error {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-error);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--info {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-info, #0082c9);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--purple {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-purple-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--teal {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-teal-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 /* ========================================
    @conduction/nextcloud-vue — Layout & Filter Utility Styles
@@ -6934,6 +7342,21 @@ a.cn-kpi-card--board * {
 	align-items: center;
 	gap: 4px;
 }
+
+/* The tag after an admin-only entry in a board detail page's Actions menu
+   ("beheerder", DqZaakMeer): 12px muted text at the end of the row. The menu
+   opens outside the page, so the rule keys on the attribute CnDetailPage sets
+   only in the board look. */
+.action-button[data-cn-admin-tag]::after,
+.action-link[data-cn-admin-tag]::after {
+	content: attr(data-cn-admin-tag);
+	margin-inline-start: auto;
+	padding-inline: 12px 4px;
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 400;
+	white-space: nowrap;
+}
 /*
  * The detail page in the board look (screens-detail-page-parity).
  *
@@ -7088,6 +7511,32 @@ a.cn-kpi-card--board * {
 	margin-top: 16px;
 }
 
+/* ---- The stages bars (CnStagesWidget `variant: "bars"`) ---------------- */
+/* DqZaak's "Voortgang": the bars sit flush with the content edge (the
+   widget's 4px pad is room for the 32px circles, which the bars variant does
+   not draw), the label 8px under its bar and the date 8px under the label at
+   the normal line height, open steps muted and the done and current ones in
+   the main text. Each hands its ink to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads instead. */
+.cn-look-board .cn-stages-widget:has(> .cn-stages-widget__bars):not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--done .cn-stages-widget__bar-label:not(.cn-look-nextcloud *),
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--current .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-date:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
 /* ---- The body and the side column ------------------------------------- */
 
 .cn-look-board.cn-detail-page--with-side {
@@ -7121,6 +7570,7 @@ a.cn-kpi-card--board * {
    The open tab overlaps that top border by 1px (the nav's -1px margin) and
    paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
+	align-items: flex-end;
 	border-bottom: none;
 	gap: 4px;
 	position: relative;
@@ -7163,6 +7613,9 @@ a.cn-kpi-card--board * {
 	row-gap: 4px;
 }
 
+/* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` `margin: 3px 3px 3px 0`, which put the strip
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -7170,6 +7623,7 @@ a.cn-kpi-card--board * {
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
 	font-weight: 400;
+	margin: 0;
 	min-height: 34px;
 	padding: 8px 12px;
 }
@@ -7203,9 +7657,12 @@ a.cn-kpi-card--board * {
 	padding: 0 6px;
 }
 
-/* The Actions button at the end of the strip, level with the tabs. */
+/* The Actions button at the end of the strip: at the top, 8px in from the
+   end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
+   lower than the button (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
+	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
@@ -7263,21 +7720,26 @@ a.cn-kpi-card--board * {
 
 /* ---- Body cards and side cards ----------------------------------------- */
 
+/* A CnDetailCard takes the board card wherever it sits, not only on a detail
+   page: a dashboard or a custom page that mounts one drew the Nextcloud card
+   (a 12px 16px header over a rule). The doubled class keeps the specificity
+   the page-scoped rule had. */
+
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
-.cn-look-board .cn-detail-page .cn-detail-card {
+.cn-look-board .cn-detail-card.cn-detail-card:not(.cn-detail-card--chromeless) {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius);
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__header,
-.cn-look-board .cn-detail-page .cn-detail-card__header {
+.cn-look-board .cn-detail-card .cn-detail-card__header {
 	border-bottom: none;
 	padding: 20px 22px 0;
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__title,
-.cn-look-board .cn-detail-page .cn-detail-card__title {
+.cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
 	line-height: 1.3;
@@ -7287,7 +7749,7 @@ a.cn-kpi-card--board * {
 	padding: 12px 22px 20px;
 }
 
-.cn-look-board .cn-detail-page .cn-detail-card__content {
+.cn-look-board .cn-detail-card .cn-detail-card__content {
 	padding: 12px 22px 20px;
 }
 
@@ -7334,10 +7796,12 @@ a.cn-kpi-card--board * {
 	font-weight: 500;
 }
 
-/* Side cards: the heading is a 15px muted label, not a title. */
+/* Side cards: the heading is a 15px muted label, not a title. The tone
+   carries `!important` against a theme that colours every h3 that way
+   (thematiq's heading colour). */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__title,
 .cn-look-board .cn-detail-page__side .cn-detail-card__title {
-	color: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast) !important;
 	font-size: var(--cn-board-side-heading-size);
 	font-weight: 600;
 }
@@ -7392,17 +7856,23 @@ a.cn-kpi-card--board * {
 
 /* ---- The next-step card ------------------------------------------------- */
 
+/* The board sets the card at the browser's normal line height: a step row is
+   the 20px marker, 28px apart (DqZaak "Wat nu?"). */
 .cn-look-board .cn-next-step-card--board {
 	border-radius: 12px;
 	gap: 16px 32px;
+	line-height: normal;
 	padding: 20px 24px 20px 28px;
 }
 
+/* The kicker keeps its tone under a theme that colours every h3 with
+   `!important` (thematiq's heading colour); only `!important` beats it. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__title.cn-next-step-card__title {
-	color: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light-text) !important;
 	font-size: 13px !important;
 	font-weight: 700;
 	letter-spacing: 0.06em;
+	line-height: normal;
 	text-transform: uppercase;
 }
 
@@ -7433,11 +7903,36 @@ a.cn-kpi-card--board * {
 	padding: 0 20px;
 }
 
+/* The label alone sets the width (DqZaak: 198px for "Verder met beoordelen"):
+   NcButton pads its text 4px a side inside the button's own padding, from a
+   rule that reaches it through `:has()`, hence the doubled class. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__side .button-vue .button-vue__text.button-vue__text {
+	margin-inline: 0;
+	padding-inline: 0;
+}
+
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
 
+/* Done and open steps are muted, the current one in the main text. Each hands
+   its ink to --nldesign-color-on-surface, which a theme that forces the body
+   ink onto every li and span (thematiq) reads instead. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__hint,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current .cn-next-step-card__hint {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
 /* ---- History: the activity tab ------------------------------------------ */
 
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__board-head {
@@ -23528,86 +24023,102 @@ a.cn-kpi-card--board * {
 
 /* Color variants */
 .cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--primary {
+	--cn-status-badge-ink: var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--success {
+	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
 	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success-text, var(--color-success));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
 	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
+	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
 	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error-text, var(--color-error));
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
+	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
 	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info-text, var(--color-info, #0082c9));
+	color: var(--cn-status-badge-ink);
 }
 
 /* Work in progress ("In behandeling"), a board tone. */
 .cn-status-badge--purple {
+	--cn-status-badge-ink: var(--cn-status-purple-text);
 	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Handed on ("Omgezet naar een zaak"), a board tone. */
 .cn-status-badge--teal {
+	--cn-status-badge-ink: var(--cn-status-teal-text);
 	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
+	color: var(--cn-status-badge-ink);
 }
 
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
+	--cn-status-badge-ink: var(--color-main-text);
 	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--primary {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-primary-element);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--success {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-success);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--warning {
+	--cn-status-badge-ink: var(--color-primary-text);
 	background-color: var(--color-warning);
-	color: var(--color-primary-text);
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--error {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-error);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--info {
+	--cn-status-badge-ink: white;
 	background-color: var(--color-info, #0082c9);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--purple {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-purple-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--solid.cn-status-badge--teal {
+	--cn-status-badge-ink: white;
 	background-color: var(--cn-status-teal-text);
-	color: white;
+	color: var(--cn-status-badge-ink);
 }
 
 
@@ -25512,10 +26023,10 @@ button.cn-stepper__step[data-v-776581d4] {
 /* `separator`: a text separator in place of the chevron. The chevron's own
    element stays (it carries NcBreadcrumbs' spacing and its "no separator after
    the last crumb" rule); only its icon gives way to the text. */
-.cn-breadcrumbs--text-separator[data-v-54c3381a] .vue-crumb__separator svg {
+.cn-breadcrumbs--text-separator[data-v-4bee2493] .vue-crumb__separator svg {
 	display: none;
 }
-.cn-breadcrumbs--text-separator[data-v-54c3381a] .vue-crumb__separator::before {
+.cn-breadcrumbs--text-separator[data-v-4bee2493] .vue-crumb__separator::before {
 	content: var(--cn-breadcrumbs-separator);
 	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
 	color: var(--color-text-maxcontrast);
@@ -25665,7 +26176,7 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-detail-page__catalog-action[data-v-4cfef9d1] {
+.cn-detail-page__catalog-action[data-v-7d004b4e] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -25681,19 +26192,19 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0 14px;
 	white-space: nowrap;
 }
-.cn-detail-page__catalog-note[data-v-4cfef9d1] {
+.cn-detail-page__catalog-note[data-v-7d004b4e] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-detail-widget-host[data-v-4cfef9d1],
-.cn-detail-widget-host[data-v-4cfef9d1] > * {
+.cn-detail-widget-host[data-v-7d004b4e],
+.cn-detail-widget-host[data-v-7d004b4e] > * {
 	height: 100%;
 }
 
 /* A bare host is a tab panel's body: it fills the panel and lets the panel
    scroll, rather than growing a second scroll region of its own. */
-.cn-detail-widget-host--bare[data-v-4cfef9d1] {
+.cn-detail-widget-host--bare[data-v-7d004b4e] {
 	min-height: 0;
 }
 
@@ -30097,13 +30608,13 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-facts-widget[data-v-34d72512] {
+.cn-facts-widget[data-v-7f141540] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
 	min-width: 0;
 }
-.cn-facts-widget__rows[data-v-34d72512] {
+.cn-facts-widget__rows[data-v-7f141540] {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 8px 16px;
@@ -30112,7 +30623,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-34d72512] {
+.cn-facts-widget__row[data-v-7f141540] {
 	display: contents;
 }
 
@@ -30120,13 +30631,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-34d72512] {
+.cn-facts-widget__label.cn-facts-widget__label[data-v-7f141540] {
 	margin: 0;
 	padding: 0;
 	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__value.cn-facts-widget__value[data-v-34d72512] {
+.cn-facts-widget__value.cn-facts-widget__value[data-v-7f141540] {
 	margin: 0;
 	padding: 0;
 	text-align: start;
@@ -30134,56 +30645,56 @@ 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-34d72512] {
+.cn-facts-widget__title[data-v-7f141540] {
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-facts-widget__line[data-v-34d72512] {
+.cn-facts-widget__line[data-v-7f141540] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__meter[data-v-34d72512] {
+.cn-facts-widget__meter[data-v-7f141540] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	font-size: 14px;
 }
-.cn-facts-widget__meter-head[data-v-34d72512] {
+.cn-facts-widget__meter-head[data-v-7f141540] {
 	display: flex;
 	justify-content: space-between;
 	gap: 16px;
 }
-.cn-facts-widget__meter-label[data-v-34d72512] {
+.cn-facts-widget__meter-label[data-v-7f141540] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__meter-value[data-v-34d72512] {
+.cn-facts-widget__meter-value[data-v-7f141540] {
 	font-weight: 500;
 	text-align: end;
 }
-.cn-facts-widget__meter-track[data-v-34d72512] {
+.cn-facts-widget__meter-track[data-v-7f141540] {
 	height: 6px;
 	border-radius: 3px;
 	background: var(--color-background-darker);
 	overflow: hidden;
 }
-.cn-facts-widget__meter-bar[data-v-34d72512] {
+.cn-facts-widget__meter-bar[data-v-7f141540] {
 	display: block;
 	height: 100%;
 	border-radius: inherit;
 	background: var(--color-primary-element);
 }
-.cn-facts-widget__meter--over .cn-facts-widget__meter-value[data-v-34d72512] {
+.cn-facts-widget__meter--over .cn-facts-widget__meter-value[data-v-7f141540] {
 	color: var(--color-error-text);
 }
-.cn-facts-widget__meter--over .cn-facts-widget__meter-bar[data-v-34d72512] {
+.cn-facts-widget__meter--over .cn-facts-widget__meter-bar[data-v-7f141540] {
 	background: var(--color-error);
 }
-.cn-facts-widget__muted[data-v-34d72512] {
+.cn-facts-widget__muted[data-v-7f141540] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__label .hidden-visually[data-v-34d72512] {
+.cn-facts-widget__label .hidden-visually[data-v-7f141540] {
 	clip-path: inset(50%);
 	height: 1px;
 	overflow: hidden;
@@ -30191,23 +30702,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-34d72512] {
+.cn-facts-widget__label--icon[data-v-7f141540] {
 	align-items: center;
 	display: flex;
 }
-.cn-facts-widget__value-link[data-v-34d72512] {
+.cn-facts-widget__value-link[data-v-7f141540] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-facts-widget__inline-button[data-v-34d72512],
-.cn-facts-widget__icon-button[data-v-34d72512],
-.cn-facts-widget__action[data-v-34d72512] {
+.cn-facts-widget__inline-button[data-v-7f141540],
+.cn-facts-widget__icon-button[data-v-7f141540],
+.cn-facts-widget__action[data-v-7f141540] {
 	align-items: center;
 	cursor: pointer;
 	display: inline-flex;
 	font: inherit;
 }
-.cn-facts-widget__inline-button[data-v-34d72512] {
+.cn-facts-widget__inline-button[data-v-7f141540] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border-dark);
 	border-radius: 16px;
@@ -30218,7 +30729,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-34d72512] {
+.cn-facts-widget__icon-button[data-v-7f141540] {
 	background: transparent;
 	border: 0;
 	border-radius: 6px;
@@ -30227,23 +30738,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-34d72512]:hover,
-.cn-facts-widget__icon-button[data-v-34d72512]:focus-visible {
+.cn-facts-widget__icon-button[data-v-7f141540]:hover,
+.cn-facts-widget__icon-button[data-v-7f141540]:focus-visible {
 	background: var(--color-background-hover);
 	color: var(--color-main-text);
 }
-.cn-facts-widget__text[data-v-34d72512] {
+.cn-facts-widget__text[data-v-7f141540] {
 	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-34d72512] {
+.cn-facts-widget__lead[data-v-7f141540] {
 	align-items: center;
 	display: flex;
 	gap: 12px;
 }
-.cn-facts-widget__lead-tile[data-v-34d72512] {
+.cn-facts-widget__lead-tile[data-v-7f141540] {
 	align-items: center;
 	background: var(--color-background-dark);
 	border-radius: 8px;
@@ -30256,29 +30767,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-34d72512] {
+.cn-facts-widget__lead-tile--success[data-v-7f141540] {
 	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-34d72512] {
+.cn-facts-widget__lead-tile--info[data-v-7f141540] {
 	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-34d72512] {
+.cn-facts-widget__lead-text[data-v-7f141540] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-facts-widget__lead-title[data-v-34d72512] {
+.cn-facts-widget__lead-title[data-v-7f141540] {
 	font-size: 15px;
 }
-.cn-facts-widget__lead-subtitle[data-v-34d72512] {
+.cn-facts-widget__lead-subtitle[data-v-7f141540] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-facts-widget__action[data-v-34d72512] {
+.cn-facts-widget__action[data-v-7f141540] {
 	align-self: flex-start;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -30290,11 +30801,14 @@ 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-34d72512]:hover,
-.cn-facts-widget__action[data-v-34d72512]:focus-visible {
+.cn-facts-widget__action[data-v-7f141540]:hover,
+.cn-facts-widget__action[data-v-7f141540]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-facts-widget__link[data-v-34d72512] {
+.cn-facts-widget__notice[data-v-7f141540] {
+	margin: 4px 0 0;
+}
+.cn-facts-widget__link[data-v-7f141540] {
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-primary-element);
@@ -30303,12 +30817,12 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 
 /* `columns: 2` (board DqContact): two columns, the label above the value, a
    hairline under each fact; one column on a phone. */
-.cn-facts-widget__rows--columns[data-v-34d72512] {
+.cn-facts-widget__rows--columns[data-v-7f141540] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: 14px 24px;
 	font-size: 15px;
 }
-.cn-facts-widget__rows--columns .cn-facts-widget__row[data-v-34d72512] {
+.cn-facts-widget__rows--columns .cn-facts-widget__row[data-v-7f141540] {
 	display: flex;
 	flex-direction: column;
 	gap: 3px;
@@ -30316,11 +30830,11 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding-bottom: 10px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-facts-widget__rows--columns .cn-facts-widget__label.cn-facts-widget__label[data-v-34d72512] {
+.cn-facts-widget__rows--columns .cn-facts-widget__label.cn-facts-widget__label[data-v-7f141540] {
 	font-size: 13px;
 }
 @media (max-width: 640px) {
-.cn-facts-widget__rows--columns[data-v-34d72512] {
+.cn-facts-widget__rows--columns[data-v-7f141540] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
@@ -30506,6 +31020,99 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
+.cn-working-calendar[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-working-calendar__head[data-v-03ee459c] {
+	align-items: center;
+	display: flex;
+	gap: 4px;
+}
+.cn-working-calendar__title[data-v-03ee459c] {
+	font-size: 15px;
+	min-width: 9em;
+	text-align: center;
+}
+.cn-working-calendar__add[data-v-03ee459c] {
+	margin-inline-start: auto;
+}
+.cn-working-calendar__grid[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-working-calendar__row[data-v-03ee459c] {
+	display: grid;
+	gap: 4px;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+.cn-working-calendar__weekday[data-v-03ee459c] {
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	text-align: center;
+}
+.cn-working-calendar__day[data-v-03ee459c] {
+	align-items: center;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: 6px;
+	cursor: default;
+	display: flex;
+	font-size: 13px;
+	height: 34px;
+	justify-content: center;
+}
+.cn-working-calendar__day[data-v-03ee459c]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+.cn-working-calendar__day--off[data-v-03ee459c] {
+	background: var(--color-background-dark);
+}
+.cn-working-calendar__day--closed[data-v-03ee459c] {
+	background: var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background)));
+	border-color: var(--color-error);
+	color: var(--color-error-text, var(--color-main-text));
+	font-weight: 600;
+}
+.cn-working-calendar__day--today[data-v-03ee459c] {
+	box-shadow: inset 0 0 0 2px var(--color-primary-element);
+}
+.cn-working-calendar__live[data-v-03ee459c] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+.cn-working-calendar__note[data-v-03ee459c] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-working-calendar__form[data-v-03ee459c] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 12px;
+}
+.cn-working-calendar__field[data-v-03ee459c] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-working-calendar__form-actions[data-v-03ee459c] {
+	align-items: flex-end;
+	display: flex;
+	gap: 8px;
+}
+.cn-working-calendar__error[data-v-03ee459c] {
+	color: var(--color-error-text, var(--color-error));
+	margin: 0;
+}
+
+
 .cn-run-node-dialog__form[data-v-2d7cb7f5] {
 	display: flex;
 	flex-direction: column;
@@ -31817,27 +32424,52 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-record-list__list[data-v-b768fcd6] {
+.cn-record-list__list[data-v-03e67618] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
-.cn-record-list__empty[data-v-b768fcd6],
-.cn-record-list__error[data-v-b768fcd6] {
+.cn-record-list__empty[data-v-03e67618],
+.cn-record-list__error[data-v-03e67618] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
-.cn-record-list__loading[data-v-b768fcd6] {
+.cn-record-list__notice[data-v-03e67618] {
+	display: flex;
+	gap: 10px;
+	align-items: flex-start;
+	padding: 12px 14px;
+	border-radius: var(--border-radius-large, 10px);
+	background: var(--color-primary-element-light, var(--color-background-dark));
+	color: var(--color-main-text);
+}
+.cn-record-list__notice--warning[data-v-03e67618] {
+	background: var(--color-warning-light, rgba(255, 196, 0, 0.12));
+	color: var(--color-warning-text, var(--color-main-text));
+}
+.cn-record-list__notice--error[data-v-03e67618] {
+	background: var(--color-error-light, rgba(219, 0, 0, 0.08));
+	color: var(--color-error-text, var(--color-main-text));
+}
+.cn-record-list__notice-icon[data-v-03e67618] {
+	flex: 0 0 auto;
+	margin-top: 1px;
+}
+.cn-record-list__notice-text[data-v-03e67618] {
+	margin: 0;
+	line-height: 1.5;
+}
+.cn-record-list__loading[data-v-03e67618] {
 	display: flex;
 	justify-content: center;
 	padding: 8px 0;
 }
 
 /* rows */
-.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-b768fcd6] {
+.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-03e67618] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__bar[data-v-b768fcd6] {
+.cn-record-list__bar[data-v-03e67618] {
 	background: var(--color-border);
 	border-radius: 3px;
 	display: block;
@@ -31845,15 +32477,15 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	margin: -6px 0 12px;
 	overflow: hidden;
 }
-.cn-record-list__bar-fill[data-v-b768fcd6] {
+.cn-record-list__bar-fill[data-v-03e67618] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-record-list__bar--over .cn-record-list__bar-fill[data-v-b768fcd6] {
+.cn-record-list__bar--over .cn-record-list__bar-fill[data-v-03e67618] {
 	background: var(--color-error);
 }
-.cn-record-list__row[data-v-b768fcd6] {
+.cn-record-list__row[data-v-03e67618] {
 	align-items: center;
 	color: var(--color-main-text);
 	display: flex;
@@ -31861,11 +32493,11 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 12px 0;
 	text-decoration: none;
 }
-.cn-record-list__row--link:hover .cn-record-list__title[data-v-b768fcd6],
-.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-b768fcd6] {
+.cn-record-list__row--link:hover .cn-record-list__title[data-v-03e67618],
+.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-03e67618] {
 	text-decoration: underline;
 }
-.cn-record-list__avatar[data-v-b768fcd6] {
+.cn-record-list__avatar[data-v-03e67618] {
 	align-items: center;
 	background: var(--color-background-hover);
 	border-radius: 50%;
@@ -31878,67 +32510,67 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__main[data-v-b768fcd6] {
+.cn-record-list__main[data-v-03e67618] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-record-list__title[data-v-b768fcd6] {
+.cn-record-list__title[data-v-03e67618] {
 	font-size: 15px;
 	font-weight: 700;
 }
-.cn-record-list__meta[data-v-b768fcd6] {
+.cn-record-list__meta[data-v-03e67618] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-record-list__aside[data-v-b768fcd6] {
+.cn-record-list__aside[data-v-03e67618] {
 	align-items: center;
 	display: flex;
 	flex: none;
 	gap: 16px;
 }
-.cn-record-list__trailing[data-v-b768fcd6] {
+.cn-record-list__trailing[data-v-03e67618] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due[data-v-b768fcd6] {
+.cn-record-list__due[data-v-03e67618] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due--danger[data-v-b768fcd6] {
+.cn-record-list__due--danger[data-v-03e67618] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-weight: 600;
 }
-.cn-record-list__due--empty[data-v-b768fcd6] {
+.cn-record-list__due--empty[data-v-03e67618] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-record-list__row--action[data-v-b768fcd6] {
+.cn-record-list__row--action[data-v-03e67618] {
 	flex-wrap: wrap;
 	gap: 8px 16px;
 	padding: 14px 0;
 }
-.cn-record-list__row--action .cn-record-list__main[data-v-b768fcd6] {
+.cn-record-list__row--action .cn-record-list__main[data-v-03e67618] {
 	flex: 1 1 280px;
 	gap: 3px;
 }
-.cn-record-list__title--link[data-v-b768fcd6] {
+.cn-record-list__title--link[data-v-03e67618] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-record-list__pills[data-v-b768fcd6] {
+.cn-record-list__pills[data-v-03e67618] {
 	display: flex;
 	flex: 0 0 120px;
 	gap: 6px;
 	justify-content: flex-end;
 }
-.cn-record-list__due--column[data-v-b768fcd6] {
+.cn-record-list__due--column[data-v-03e67618] {
 	flex: 0 0 96px;
 	font-size: 13px;
 	text-align: end;
 }
-.cn-record-list__action[data-v-b768fcd6] {
+.cn-record-list__action[data-v-03e67618] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -31955,23 +32587,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 0 14px;
 	text-decoration: none;
 }
-.cn-record-list__action[data-v-b768fcd6]:hover,
-.cn-record-list__action[data-v-b768fcd6]:focus-visible {
+.cn-record-list__action[data-v-03e67618]:hover,
+.cn-record-list__action[data-v-03e67618]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-record-list__chevron[data-v-b768fcd6] {
+.cn-record-list__chevron[data-v-03e67618] {
 	color: var(--color-text-maxcontrast);
 	flex: none;
 }
 
 /* cards (board ShBank): a grid of framed cards, 240px at the least. */
-.cn-record-list--cards .cn-record-list__list[data-v-b768fcd6] {
+.cn-record-list--cards .cn-record-list__list[data-v-03e67618] {
 	align-items: start;
 	display: grid;
 	gap: 16px;
 	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
-.cn-record-list__card[data-v-b768fcd6] {
+.cn-record-list__card[data-v-03e67618] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: 12px;
@@ -31983,51 +32615,51 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 16px 18px;
 	text-decoration: none;
 }
-.cn-record-list__card--link[data-v-b768fcd6]:hover,
-.cn-record-list__card--link[data-v-b768fcd6]:focus-visible {
+.cn-record-list__card--link[data-v-03e67618]:hover,
+.cn-record-list__card--link[data-v-03e67618]:focus-visible {
 	border-color: var(--color-border-dark, var(--color-border));
 }
-.cn-record-list__card--link:hover .cn-record-list__title[data-v-b768fcd6],
-.cn-record-list__card--link:focus-visible .cn-record-list__title[data-v-b768fcd6] {
+.cn-record-list__card--link:hover .cn-record-list__title[data-v-03e67618],
+.cn-record-list__card--link:focus-visible .cn-record-list__title[data-v-03e67618] {
 	text-decoration: underline;
 }
-.cn-record-list__card-head[data-v-b768fcd6] {
+.cn-record-list__card-head[data-v-03e67618] {
 	align-items: center;
 	display: flex;
 	gap: 8px;
 	justify-content: space-between;
 }
-.cn-record-list__card-title[data-v-b768fcd6] {
+.cn-record-list__card-title[data-v-03e67618] {
 	align-items: center;
 	display: flex;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-record-list__card-icon[data-v-b768fcd6] {
+.cn-record-list__card-icon[data-v-03e67618] {
 	color: var(--color-primary-element);
 	flex: none;
 }
-.cn-record-list__card-pills[data-v-b768fcd6] {
+.cn-record-list__card-pills[data-v-03e67618] {
 	display: flex;
 	flex: none;
 	gap: 6px;
 }
-.cn-record-list__card-value[data-v-b768fcd6] {
+.cn-record-list__card-value[data-v-03e67618] {
 	font-size: 24px;
 	font-weight: 700;
 }
 
 /* feed */
-.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-b768fcd6] {
+.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-03e67618] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__feed-row[data-v-b768fcd6] {
+.cn-record-list__feed-row[data-v-03e67618] {
 	align-items: flex-start;
 	display: flex;
 	gap: 14px;
 	padding: 12px 0;
 }
-.cn-record-list__feed-icon[data-v-b768fcd6] {
+.cn-record-list__feed-icon[data-v-03e67618] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border-radius: 50%;
@@ -32038,25 +32670,25 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__text[data-v-b768fcd6] {
+.cn-record-list__text[data-v-03e67618] {
 	font-size: 15px;
 }
-.cn-record-list--feed .cn-record-list__main[data-v-b768fcd6] {
+.cn-record-list--feed .cn-record-list__main[data-v-03e67618] {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
 
 /* inline */
-.cn-record-list__inline-row[data-v-b768fcd6] {
+.cn-record-list__inline-row[data-v-03e67618] {
 	padding: 4px 0;
 }
-.cn-record-list__label[data-v-b768fcd6] {
+.cn-record-list__label[data-v-03e67618] {
 	margin-inline-end: 4px;
 }
-.cn-record-list__inline-title[data-v-b768fcd6] {
+.cn-record-list__inline-title[data-v-03e67618] {
 	color: var(--color-main-text);
 }
-a.cn-record-list__inline-title[data-v-b768fcd6] {
+a.cn-record-list__inline-title[data-v-03e67618] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
@@ -32732,6 +33364,101 @@ a.cn-record-list__inline-title[data-v-b768fcd6] {
 }
 
 
+.cn-settings-field[data-v-d2218996] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-settings-field__hint[data-v-d2218996],
+.cn-settings-field__error[data-v-d2218996] {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.4;
+}
+.cn-settings-field__image[data-v-d2218996] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-settings-field__image-label[data-v-d2218996] {
+	font-weight: 600;
+}
+.cn-settings-field__image-row[data-v-d2218996] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+.cn-settings-field__image-tile[data-v-d2218996] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 64px;
+	height: 64px;
+	overflow: hidden;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background: var(--color-primary-element-light);
+}
+.cn-settings-field__image-tile img[data-v-d2218996] {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+}
+.cn-settings-field__image-initials[data-v-d2218996] {
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+.cn-settings-field__hint[data-v-d2218996] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-field__error[data-v-d2218996] {
+	color: var(--color-error-text, var(--color-error));
+}
+
+
+.cn-settings-fields[data-v-090828e4] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	container-type: inline-size;
+}
+.cn-settings-fields__grid[data-v-090828e4] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 16px 20px;
+}
+
+/* Two or three columns where the card is wide enough; stacked otherwise. */
+@container (min-width: 520px) {
+.cn-settings-fields__grid--2[data-v-090828e4],
+	.cn-settings-fields__grid--3[data-v-090828e4] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@container (min-width: 780px) {
+.cn-settings-fields__grid--3[data-v-090828e4] {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+}
+.cn-settings-fields__field--wide[data-v-090828e4] {
+	grid-column: 1 / -1;
+}
+.cn-settings-fields__save[data-v-090828e4] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 12px;
+}
+.cn-settings-fields__dirty[data-v-090828e4] {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+
 ._passwordDialog_joix2_2 {
 	display: flex;
 	flex-direction: column;
@@ -36332,28 +37059,38 @@ to {
   margin-block-start: 4px;
 }
 
-.cn-wizard-dialog__step-body[data-v-4a9bf6d1] {
+.cn-wizard-dialog__step-body[data-v-547e7819] {
 	min-height: 200px;
 }
-.cn-wizard-dialog__result[data-v-4a9bf6d1] {
+.cn-wizard-dialog__result[data-v-547e7819] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
 
 
-.cn-setup-step[data-v-5670b06f] {
+.cn-setup-step[data-v-32874a44] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-setup-step__nav[data-v-5670b06f] {
+.cn-setup-step__intro[data-v-32874a44] {
+	margin: 0;
+	font-size: 15px;
+	line-height: 1.5;
+}
+.cn-setup-step__note[data-v-32874a44] {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-setup-step__nav[data-v-32874a44] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
 	margin-top: 8px;
 }
-.cn-setup-step__running[data-v-5670b06f] {
+.cn-setup-step__running[data-v-32874a44] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -36361,43 +37098,43 @@ to {
 	padding: 24px 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-setup-load-result[data-v-5670b06f] {
+.cn-setup-load-result[data-v-32874a44] {
 	margin: 0;
 	font-size: var(--font-size-small, 13px);
 }
-.cn-setup-load-result--success[data-v-5670b06f] {
+.cn-setup-load-result--success[data-v-32874a44] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-setup-load-result--error[data-v-5670b06f] {
+.cn-setup-load-result--error[data-v-32874a44] {
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-setup-field[data-v-5670b06f] {
+.cn-setup-field[data-v-32874a44] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-setup-summary[data-v-5670b06f] {
+.cn-setup-summary[data-v-32874a44] {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 }
-.cn-setup-summary__item[data-v-5670b06f] {
+.cn-setup-summary__item[data-v-32874a44] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 4px 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-setup-summary__item--done[data-v-5670b06f] {
+.cn-setup-summary__item--done[data-v-32874a44] {
 	color: var(--color-main-text);
 }
-.cn-setup-summary__mark[data-v-5670b06f] {
+.cn-setup-summary__mark[data-v-32874a44] {
 	font-weight: bold;
 	color: var(--color-success);
 }
-.cn-setup-summary__label[data-v-5670b06f] {
+.cn-setup-summary__label[data-v-32874a44] {
 	flex: 0 0 auto;
 }
-.cn-setup-summary__value[data-v-5670b06f] {
+.cn-setup-summary__value[data-v-32874a44] {
 	margin-inline-start: auto;
 	font-weight: 600;
 	color: var(--color-main-text);
@@ -36405,34 +37142,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-5670b06f] {
+.cn-setup-summary__item--not-run .cn-setup-summary__value[data-v-32874a44] {
 	font-weight: normal;
 	color: var(--color-text-maxcontrast);
 }
 
 
-.cn-admin-settings-shell[data-v-73ed7e9c] {
+.cn-admin-settings-shell[data-v-b8d7f6c6] {
 	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-73ed7e9c] {
+.cn-support-info[data-v-b8d7f6c6] {
 	margin-top: 16px;
 	padding-top: 16px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-support-info h4[data-v-73ed7e9c] {
+.cn-support-info h4[data-v-b8d7f6c6] {
 	margin: 0 0 8px 0;
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-support-info p[data-v-73ed7e9c] {
+.cn-support-info p[data-v-b8d7f6c6] {
 	margin: 4px 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-support-info a[data-v-73ed7e9c] {
+.cn-support-info a[data-v-b8d7f6c6] {
 	color: var(--color-primary-element);
 }
 
@@ -37061,16 +37798,16 @@ to {
 }
 
 
-.cn-ordered-list-field[data-v-81cf425a] {
+.cn-ordered-list-field[data-v-3ab313d4] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
 }
-.cn-ordered-list-field__label[data-v-81cf425a] {
+.cn-ordered-list-field__label[data-v-3ab313d4] {
 	margin: 0;
 	font-weight: 600;
 }
-.cn-ordered-list-field__rows[data-v-81cf425a] {
+.cn-ordered-list-field__rows[data-v-3ab313d4] {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
@@ -37079,34 +37816,34 @@ to {
 	border-radius: var(--border-radius-element, 8px);
 	list-style: none;
 }
-.cn-ordered-list-field__row[data-v-81cf425a] {
+.cn-ordered-list-field__row[data-v-3ab313d4] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	min-height: 44px;
 	padding: 2px 6px 2px 12px;
 }
-.cn-ordered-list-field__row + .cn-ordered-list-field__row[data-v-81cf425a] {
+.cn-ordered-list-field__row + .cn-ordered-list-field__row[data-v-3ab313d4] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-ordered-list-field__position[data-v-81cf425a] {
+.cn-ordered-list-field__position[data-v-3ab313d4] {
 	flex: none;
 	min-width: 18px;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 	font-variant-numeric: tabular-nums;
 }
-.cn-ordered-list-field__text[data-v-81cf425a] {
+.cn-ordered-list-field__text[data-v-3ab313d4] {
 	flex: 1 1 auto;
 	min-width: 0;
 	overflow-wrap: anywhere;
 }
-.cn-ordered-list-field__actions[data-v-81cf425a] {
+.cn-ordered-list-field__actions[data-v-3ab313d4] {
 	display: flex;
 	flex: none;
 	gap: 2px;
 }
-.cn-ordered-list-field__button[data-v-81cf425a] {
+.cn-ordered-list-field__button[data-v-3ab313d4] {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -37122,21 +37859,46 @@ to {
 	color: var(--color-main-text);
 	cursor: pointer;
 }
-.cn-ordered-list-field__button[data-v-81cf425a]:hover:not(:disabled) {
+.cn-ordered-list-field__button[data-v-3ab313d4]:hover:not(:disabled) {
 	background: var(--color-background-hover);
 }
-.cn-ordered-list-field__button[data-v-81cf425a]:focus-visible {
+.cn-ordered-list-field__button[data-v-3ab313d4]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 1px;
 }
-.cn-ordered-list-field__button[data-v-81cf425a]:disabled {
+.cn-ordered-list-field__button[data-v-3ab313d4]:disabled {
 	opacity: 0.4;
 	cursor: default;
 }
-.cn-ordered-list-field__empty[data-v-81cf425a] {
+.cn-ordered-list-field__empty[data-v-3ab313d4] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
+.cn-ordered-list-field__tile[data-v-3ab313d4] {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+.cn-ordered-list-field__name[data-v-3ab313d4] {
+	display: block;
+}
+.cn-ordered-list-field__description[data-v-3ab313d4] {
+	display: block;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-ordered-list-field__option[data-v-3ab313d4] {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
 
 
 .cn-object-kanban__loading[data-v-1ba5f05c],
@@ -42106,21 +42868,21 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 
 
 /* The section wrapper draws no box; the board look makes it the card grid. */
-.cn-settings-page__sections[data-v-50865bde] {
+.cn-settings-page__sections[data-v-0b4a7625] {
 	display: contents;
 }
-.cn-settings-page__header-buttons[data-v-50865bde] {
+.cn-settings-page__header-buttons[data-v-0b4a7625] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	margin-inline-start: auto;
 }
-.cn-settings-page[data-v-50865bde] {
+.cn-settings-page[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-settings-page__actions[data-v-50865bde] {
+.cn-settings-page__actions[data-v-0b4a7625] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
@@ -42131,7 +42893,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
  * orchestration REQ-MSO-5). Uses Nextcloud CSS variables only — no
  * hex literals, no rgba overrides on the elements themselves.
  */
-.cn-settings-page__tabs[data-v-50865bde] {
+.cn-settings-page__tabs[data-v-0b4a7625] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
@@ -42139,7 +42901,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding-bottom: 0;
 	margin-bottom: 8px;
 }
-.cn-settings-page__tab[data-v-50865bde] {
+.cn-settings-page__tab[data-v-0b4a7625] {
 	background: transparent;
 	border: 0;
 	border-bottom: 3px solid transparent;
@@ -42151,52 +42913,52 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border-color 0.1s ease-in-out;
 }
-.cn-settings-page__tab[data-v-50865bde]:hover,
-.cn-settings-page__tab[data-v-50865bde]:focus-visible {
+.cn-settings-page__tab[data-v-0b4a7625]:hover,
+.cn-settings-page__tab[data-v-0b4a7625]:focus-visible {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 	outline: none;
 }
-.cn-settings-page__tab--active[data-v-50865bde] {
+.cn-settings-page__tab--active[data-v-0b4a7625] {
 	color: var(--color-primary-element);
 	border-bottom-color: var(--color-primary-element);
 	font-weight: bold;
 }
 @media (max-width: 768px) {
-.cn-settings-page__tabs[data-v-50865bde] {
+.cn-settings-page__tabs[data-v-0b4a7625] {
 		flex-direction: column;
 		gap: 0;
 		border-bottom: 0;
 }
-.cn-settings-page__tab[data-v-50865bde] {
+.cn-settings-page__tab[data-v-0b4a7625] {
 		border-bottom: 1px solid var(--color-border);
 		border-radius: 0;
 		text-align: left;
 }
-.cn-settings-page__tab--active[data-v-50865bde] {
+.cn-settings-page__tab--active[data-v-0b4a7625] {
 		border-bottom-width: 1px;
 		background-color: var(--color-background-hover);
 }
 }
-.cn-settings-page__fields[data-v-50865bde] {
+.cn-settings-page__fields[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-settings-page__field[data-v-50865bde] {
+.cn-settings-page__field[data-v-0b4a7625] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-settings-page__field-help[data-v-50865bde] {
+.cn-settings-page__field-help[data-v-0b4a7625] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-page__save-bar[data-v-50865bde] {
+.cn-settings-page__save-bar[data-v-0b4a7625] {
 	display: flex;
 	gap: 8px;
 	margin-top: 16px;
 }
-.cn-settings-page__error[data-v-50865bde] {
+.cn-settings-page__error[data-v-0b4a7625] {
 	color: var(--color-error);
 	background: var(--color-error-light, var(--color-background-hover));
 	padding: 8px 12px;
@@ -42457,7 +43219,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-flow-board[data-v-b3c586ae] {
+.cn-flow-board[data-v-5c5d3119] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -42465,49 +43227,53 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	min-height: 100%;
 	box-sizing: border-box;
 }
-.cn-flow-board__header[data-v-b3c586ae] {
+.cn-flow-board__header[data-v-5c5d3119] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
 }
-.cn-flow-board__heading[data-v-b3c586ae] {
+.cn-flow-board__heading[data-v-5c5d3119] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	min-width: 0;
 }
-.cn-flow-board__title[data-v-b3c586ae] {
+.cn-flow-board__title[data-v-5c5d3119] {
 	margin: 0;
 	font-size: 24px;
 	font-weight: 600;
 }
-.cn-flow-board__actions[data-v-b3c586ae] {
+.cn-flow-board__actions[data-v-5c5d3119] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-flow-board__path[data-v-b3c586ae] {
+.cn-flow-board__test-intro[data-v-5c5d3119] {
+	margin: 0 0 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-flow-board__path[data-v-5c5d3119] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__crumb[data-v-b3c586ae] {
+.cn-flow-board__crumb[data-v-5c5d3119] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-flow-board__body[data-v-b3c586ae] {
+.cn-flow-board__body[data-v-5c5d3119] {
 	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-b3c586ae] {
+.cn-flow-board--with-palette .cn-flow-board__body[data-v-5c5d3119] {
 	grid-template-columns: 240px minmax(0, 1fr) 340px;
 }
-.cn-flow-board__card[data-v-b3c586ae] {
+.cn-flow-board__card[data-v-5c5d3119] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -42517,34 +43283,34 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: 12px;
 	background: var(--color-main-background);
 }
-.cn-flow-board__canvas[data-v-b3c586ae] {
+.cn-flow-board__canvas[data-v-5c5d3119] {
 	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-b3c586ae] > :first-child {
+.cn-flow-board__canvas[data-v-5c5d3119] > :first-child {
 	flex: 1 1 auto;
 	min-height: 0;
 }
-.cn-flow-board__card-title[data-v-b3c586ae] {
+.cn-flow-board__card-title[data-v-5c5d3119] {
 	margin: 0;
 	font-size: 16px;
 	font-weight: 600;
 }
-.cn-flow-board__subtitle[data-v-b3c586ae] {
+.cn-flow-board__subtitle[data-v-5c5d3119] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	font-weight: 600;
 }
-.cn-flow-board__eyebrow[data-v-b3c586ae] {
+.cn-flow-board__eyebrow[data-v-5c5d3119] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-flow-board__validity[data-v-b3c586ae],
-.cn-flow-board__legend[data-v-b3c586ae] {
+.cn-flow-board__validity[data-v-5c5d3119],
+.cn-flow-board__legend[data-v-5c5d3119] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -42553,27 +43319,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-b3c586ae] {
+.cn-flow-board__validity--success[data-v-5c5d3119] {
 	color: var(--color-success-text);
 }
-.cn-flow-board__validity--warning[data-v-b3c586ae] {
+.cn-flow-board__validity--warning[data-v-5c5d3119] {
 	color: var(--color-warning-text);
 }
-.cn-flow-board__validity--error[data-v-b3c586ae] {
+.cn-flow-board__validity--error[data-v-5c5d3119] {
 	color: var(--color-error-text);
 }
-.cn-flow-board__palette-group[data-v-b3c586ae] {
+.cn-flow-board__palette-group[data-v-5c5d3119] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-flow-board__palette-app[data-v-b3c586ae] {
+.cn-flow-board__palette-app[data-v-5c5d3119] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-flow-board__palette-list[data-v-b3c586ae] {
+.cn-flow-board__palette-list[data-v-5c5d3119] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -42581,7 +43347,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-flow-board__palette-step[data-v-b3c586ae] {
+.cn-flow-board__palette-step[data-v-5c5d3119] {
 	width: 100%;
 	min-height: 34px;
 	padding: 6px 10px;
@@ -42592,20 +43358,20 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	text-align: start;
 	cursor: pointer;
 }
-.cn-flow-board__palette-step[data-v-b3c586ae]:hover {
+.cn-flow-board__palette-step[data-v-5c5d3119]:hover {
 	background: var(--color-background-hover);
 }
-.cn-flow-board__palette-note[data-v-b3c586ae] {
+.cn-flow-board__palette-note[data-v-5c5d3119] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-flow-board__tabs[data-v-b3c586ae] {
+.cn-flow-board__tabs[data-v-5c5d3119] {
 	display: flex;
 	gap: 4px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-flow-board__tab[data-v-b3c586ae] {
+.cn-flow-board__tab[data-v-5c5d3119] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -42617,12 +43383,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: var(--color-main-text);
 	cursor: pointer;
 }
-.cn-flow-board__tab--active[data-v-b3c586ae] {
+.cn-flow-board__tab--active[data-v-5c5d3119] {
 	border-color: var(--color-border);
 	border-bottom-color: var(--color-main-background);
 	font-weight: 600;
 }
-.cn-flow-board__tab-count[data-v-b3c586ae] {
+.cn-flow-board__tab-count[data-v-5c5d3119] {
 	min-width: 18px;
 	padding: 0 5px;
 	border-radius: 9px;
@@ -42631,19 +43397,19 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	line-height: 18px;
 	text-align: center;
 }
-.cn-flow-board__step-actions[data-v-b3c586ae],
-.cn-flow-board__step-footer[data-v-b3c586ae] {
+.cn-flow-board__step-actions[data-v-5c5d3119],
+.cn-flow-board__step-footer[data-v-5c5d3119] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-flow-board__step-footer[data-v-b3c586ae] {
+.cn-flow-board__step-footer[data-v-5c5d3119] {
 	justify-content: space-between;
 	margin-top: auto;
 }
 @media (max-width: 1024px) {
-.cn-flow-board__body[data-v-b3c586ae],
-	.cn-flow-board--with-palette .cn-flow-board__body[data-v-b3c586ae] {
+.cn-flow-board__body[data-v-5c5d3119],
+	.cn-flow-board--with-palette .cn-flow-board__body[data-v-5c5d3119] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }