@conduction/nextcloud-vue 2.121.0 → 2.123.0

package/dist/nextcloud-vue.css

@@ -254,8 +254,8 @@
 /* ---- Dashboard switch row --------------------------------------------- */
 /* The switch row under a board dashboard's header (DqMijnWerk, DqMijnTeam).
    The link pills take the deep primary ink of the boards' primary pills: the
-   light primary text mixed toward the main text, which only raises its
-   contrast on the light primary ground. A theme that forces the link ink onto
+   light primary text, the ink a theme pairs with the light primary ground
+   (DqMijnWerk #234a78 on #eaf0f7, 8:1). A theme that forces the link ink onto
    every `a` reads it from --nldesign-color-on-surface, so the pill hands it
    its own. The view switch is the board's segmented control: 14px labels, the
    others in the soft ink, the chosen one raised on white without an edge;
@@ -263,7 +263,7 @@
    @spec openspec/changes/board-dashboard-switch-row/specs/board-dashboard-switch-row/spec.md#requirement-the-link-pills-take-the-deep-primary-ink
    @spec openspec/changes/board-dashboard-switch-row/specs/board-dashboard-switch-row/spec.md#requirement-the-view-switch-is-the-boards-segmented-control */
 .cn-look-board .cn-dashboard-page__switch-row .cn-dashboard-page__view-link:not(.cn-look-nextcloud *) {
-	--cn-view-link-ink: color-mix(in srgb, var(--color-primary-element-light-text) 60%, var(--color-main-text));
+	--cn-view-link-ink: var(--color-primary-element-light-text);
 	--nldesign-color-on-surface: var(--cn-view-link-ink);
 	color: var(--cn-view-link-ink);
 }
@@ -288,6 +288,25 @@
 	}
 }
 
+/* ---- Period group ------------------------------------------------------- */
+/* The boards' compact segmented group (the period switch on DqDoorlooptijd
+   and DqTermijnen, Gemiddeld / Mediaan on DqProcesanalyse) pads a label 14px
+   on each side and draws the options not chosen in the soft ink; the chosen
+   one is raised on white in the main ink. An icon-only option stays square.
+   @spec openspec/changes/board-period-group-soft-ink/specs/board-period-group-soft-ink/spec.md#requirement-a-board-period-group-draws-the-options-not-chosen-in-the-soft-ink */
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option:not(.cn-look-nextcloud *) {
+	padding: 0 14px;
+	color: var(--cn-board-text-soft);
+}
+
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option--checked:not(.cn-look-nextcloud *) {
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option--icon-only:not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
 /* ---- Button weight ------------------------------------------------------ */
 /* The boards draw a labelled button at 600 (DqZaken "Downloaden", DqZaak's
    header, dialog footers, toolbar and row actions). An NcButton reads its
@@ -295,9 +314,15 @@
    look sets 600 on each button, so every NcButton on a board page draws the
    board's weight without a rule per surface. Breadcrumb buttons keep the
    crumb weight.
-   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600 */
+   The boards also draw a button's text at 14px, against Nextcloud's 15px.
+   NcButton reads its size from --default-font-size, so the look sets that
+   variable on the button: a surface that sets its own `font-size` (the next
+   step card's 15px) keeps it.
+   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600
+   @spec openspec/changes/board-control-text/specs/board-control-text/spec.md#requirement-a-board-button-draws-its-text-at-14px */
 .cn-look-board .button-vue:not(.cn-look-nextcloud *):not(.vue-crumb *) {
 	--font-weight-element: 600;
+	--default-font-size: 14px;
 }
 
 /* ---- A button with an icon and a label --------------------------------- */
@@ -460,6 +485,26 @@
 	background: var(--color-background-hover);
 }
 
+/* ---- A secondary button --------------------------------------------------- */
+/* The boards draw every secondary button neutral: the main background, a 1px
+   control border, the main text, the hover ground on hover (DqFlow "Testen
+   met een zaak", DqFunctionaliteiten "Documentatie", DqTaak "Afronden").
+   NcButton draws its secondary from the primary-light variables, on a 2px
+   bottom edge; the look points those variables at the neutral colours on the
+   button itself. The selector weighs (0,3,0): it outranks NcButton's border
+   (0,2,0), and a surface rule of the same weight later in the cascade (a
+   dialog's cancel) still decides for its surface.
+   @spec openspec/changes/board-secondary-neutral/specs/board-secondary-neutral/spec.md#requirement-a-board-secondary-button-is-neutral */
+.cn-look-board .button-vue.button-vue--secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)),
+.cn-look-board .button-vue.button-vue--vue-secondary:where(:not(.cn-look-nextcloud *):not(.vue-crumb *)) {
+	--color-primary-element-light: var(--color-main-background);
+	--color-primary-element-light-hover: var(--color-background-hover);
+	--color-primary-element-light-text: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--cn-board-control-border);
+	color: var(--color-main-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",
@@ -1678,6 +1723,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
 }
 
+/* DqMijnWerk "Mijn archiefbeoordelingen": its rows and its empty line. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-decision-list {
+	padding: 0 var(--cn-board-dashboard-card-inset) 20px;
+}
+
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-stacked-bar,
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-week-strip {
 	box-sizing: border-box;
@@ -1723,6 +1773,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding-inline-end: var(--cn-board-dashboard-card-inset);
 }
 
+/* ---- A card of cards (DqDoorlooptijd "Naleving") ------------------------- */
+/* A sections widget laid out in columns on a dashboard card keeps the card's
+   side inset and 20px below. Each section is a small card: a hairline edge,
+   a 10px corner, 14px 16px of padding and its heading at 15px 700, 10px above
+   the content.
+   @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-board-card-of-cards-draws-the-boards-small-cards */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-sections-widget--grid {
+	padding: 0 var(--cn-board-dashboard-card-inset) 20px;
+}
+
+.cn-look-board .cn-sections-widget--grid.cn-sections-widget--cards .cn-sections-widget__section:not(.cn-look-nextcloud *) {
+	padding: 14px 16px;
+	border: 1px solid var(--cn-board-hairline);
+	border-radius: 10px;
+}
+
+.cn-look-board .cn-sections-widget--grid.cn-sections-widget--cards .cn-sections-widget__heading:not(.cn-look-nextcloud *) {
+	margin: 0 0 10px;
+	font-size: 15px;
+	font-weight: 700;
+	line-height: normal;
+}
+
 /* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
 /* The days wrap inside the card instead of scrolling sideways: a row holds
    as many days of at least 120px as the card fits, and the rest go to the
@@ -1740,6 +1813,45 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 
 .cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
 	flex-wrap: wrap;
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--cn-board-text-soft);
+}
+
+/* A board day is a tinted box without an edge, at least 132px high so a week
+   of empty days still reads as a week (DqMijnWerk "Termijnen deze week"): the
+   workspace grey, and today the light primary ground in its own ink. Forced
+   colours drop the grounds, so the box keeps an edge there. */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day {
+	min-height: 132px;
+	padding: 12px;
+	border-color: transparent;
+	border-radius: 10px;
+	background: var(--nldesign-component-content-surface-background-color, var(--color-background-hover));
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day--today {
+	background: var(--color-primary-element-light);
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day--today .cn-week-strip__head {
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__today {
+	border-radius: 10px;
+	font-size: 11px;
+	line-height: 13px;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__empty {
+	font-size: 13px;
+}
+
+@media (forced-colors: active) {
+	.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__day {
+		border-color: CanvasText;
+	}
 }
 
 /* ---- A card of boxed stat tiles (DcRapportages "Vergaderingen en efficiëntie") -- */
@@ -3143,6 +3255,29 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* With the sidebar open the Filter button is pressed: the board draws it on
+   the light primary ground with a primary edge and the main ink, not as a
+   filled primary button (DqFilterBeheren). Its count badge stays the filled
+   primary pill. NcButton redefines the main text inside the button, so the ink is taken
+   on the bar; the theme's forced primary ink and edge read the button's own
+   properties.
+   @spec openspec/changes/board-index-sidebar/specs/board-index-sidebar/spec.md#requirement-the-pressed-filter-button-is-the-boards-light-toggle */
+.cn-look-board .cn-actions-bar {
+	--cn-filter-pressed-ink: var(--color-main-text);
+}
+
+.cn-look-board .cn-actions-bar__filter-button.button-vue[aria-pressed='true'] {
+	--nldesign-component-button-primary-action-color: var(--cn-filter-pressed-ink);
+	--nldesign-component-button-primary-action-border-color: var(--color-primary-element);
+	border-color: var(--color-primary-element);
+	background-color: var(--color-primary-element-light);
+	color: var(--cn-filter-pressed-ink);
+}
+
+.cn-look-board .cn-actions-bar__filter-button.button-vue[aria-pressed='true']:hover {
+	background-color: var(--color-primary-element-light-hover);
+}
+
 .cn-look-board .cn-actions-bar__filter-badge {
 	display: inline-flex;
 	align-items: center;
@@ -3456,16 +3591,36 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	width: 18%;
 }
 
-/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
-   the selection column; the selection and menu columns keep 16px. */
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+/* An index table pads every cell 16px at the sides (DqZaken). The plain-title
+   table (`rowTitle: "plain"`: PqTickets, OcPublicaties) sets its data cells
+   12px apart and its title column 18px from the selection column; the
+   selection and menu columns keep 16px. The title column is left out of the
+   12px rule, which would otherwise outrank the 18px one.
+   @spec openspec/changes/board-table-density/specs/board-table-density/spec.md#requirement-a-board-table-pads-its-cells-as-the-boards-draw-them */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-head--title),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon):not(.cn-table-col--title) {
 	padding-inline: 12px;
 }
 
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
-.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
-	padding-inline-start: 18px;
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	padding-inline: 18px 12px;
+}
+
+/* A table that is not an index page's main list sits in a card and is the
+   compact one: 10px 12px in the header, 11px 12px in the cells
+   (DqInstellingen, DqVthInstellingen, DqZaaktype, DqTermijnen). The selection
+   column keeps its 16px, so it stays 60px wide. */
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table th {
+	padding: 10px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table td {
+	padding: 11px 12px;
+}
+
+.cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table .cn-table-col--checkbox {
+	padding-inline: 16px;
 }
 
 .cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
@@ -3695,12 +3850,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 }
 
 /* A page link is a <button>: Nextcloud's `button` rule sets it bold, the
-   boards set the links at the regular weight and only the current page at 600. */
+   boards set the links at the regular weight and only the current page at 600.
+   The boards size a link's content box at 34px, so a bordered link is 36px
+   and the borderless current page 34px (DqZaken "2", "Volgende", "1").
+   @spec openspec/changes/board-pagination-links/specs/board-pagination-links/spec.md#requirement-a-board-page-link-is-sized-as-the-boards-draw-it */
 .cn-look-board .cn-pagination--board .cn-pagination__board-link {
 	box-sizing: border-box;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
+	min-width: 36px;
+	height: 36px;
+	min-height: 36px;
 	margin: 0;
 	padding: 0 8px;
 	border: 1px solid var(--color-border);
@@ -3725,7 +3883,10 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 }
 
 .cn-look-board .cn-pagination--board .cn-pagination__board-link--current {
-	border-color: var(--color-primary-element);
+	min-width: 34px;
+	height: 34px;
+	min-height: 34px;
+	border: 0;
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-weight: 600;
@@ -4093,6 +4254,26 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	display: none;
 }
 
+/* The index sidebar as the board draws it (IndexZijpaneel, DqFilterBeheren):
+   360px wide, the line under the title 14px muted, and a round close button.
+   The title and the tab row are the `.cn-index-sidebar-panel` rules.
+   NcAppSidebar renders as the root's direct child, so the rules reach it
+   through the root, as the toggle rule above does.
+   @spec openspec/changes/board-index-sidebar/specs/board-index-sidebar/spec.md#requirement-the-board-index-sidebar-draws-the-boards-side-panel */
+.cn-look-board:has(.cn-index-page) > .app-sidebar {
+	--app-sidebar-width: 360px;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar-header__subname {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar__close {
+	border-radius: 50%;
+	color: var(--cn-board-text-soft);
+}
+
 /* The folder pane as a card (DqAfdelingen): 280px, a hairline border, 12px
    corners, with each folder's count in a grey pill. */
 .cn-look-board .cn-index-page__folder-pane {
@@ -4228,6 +4409,76 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border-bottom: none;
 	padding-block: 2px;
 }
+
+/* ---- The index side panel (CnIndexSidebar, board IndexZijpaneel) -------- */
+/* The panel's title is 20px bold without the schema icon, and its tabs are
+   one row of 40px labels, 14px weight 600 in the soft ink, the open one in
+   the deep primary ink and underlined 2px in the primary colour on the
+   strip's rule (DqFilterBeheren). NcAppSidebar stacks the icon over the
+   label in a 54px tile with a highlight bar; the board does neither. The
+   header rule repeats NcAppSidebar's own chain to outrank it.
+   @spec openspec/changes/board-index-sidebar-tabs/specs/board-index-sidebar-tabs/spec.md#requirement-the-board-index-side-panel-draws-the-boards-header-and-tab-row */
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__desc .app-sidebar-header__name-container .app-sidebar-header__mainname-container h2.app-sidebar-header__mainname {
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.2;
+	min-height: 0;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__figure:has(> .cn-index-sidebar__header-icon) {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__nav[role="tablist"] {
+	justify-content: flex-start;
+	gap: 4px;
+	margin: 0;
+	padding: 14px 12px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__highlight {
+	display: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] {
+	flex: 0 0 auto;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+	box-sizing: border-box;
+	height: 40px;
+	min-height: 40px;
+	margin: 0 0 -1px;
+	padding: 0 10px;
+	border: 0;
+	border-bottom: 2px solid transparent;
+	border-radius: 0;
+	background: transparent;
+	color: var(--cn-board-text-soft);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"] * {
+	font-weight: inherit;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]::after {
+	content: none;
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"]:hover {
+	background: transparent;
+	border-bottom-color: var(--color-border-dark);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__tab[role="tab"][aria-selected="true"] {
+	background: transparent;
+	border-bottom-color: var(--color-primary-element);
+	color: var(--color-primary-element-light-text);
+}
 /* ========================================
    @conduction/nextcloud-vue — Table Styles
    ======================================== */
@@ -8436,6 +8687,12 @@ a.cn-kpi-card--board * {
 	gap: calc(5 * var(--default-grid-baseline));
 }
 
+/* A body widget's own cards (`cnDetailSideColumn`) stand in the column's
+   flow, at its gap, and the slot takes no room while it is empty. */
+.cn-detail-page__side-takeover {
+	display: contents;
+}
+
 /* The record as a place (case-page-and-list-as-a-place) */
 
 /* A skip link that reaches the page's declared primary action. Off screen
@@ -9161,9 +9418,10 @@ li[data-cn-admin-tag] > .action-link::after {
 	display: flex;
 }
 
-/* The notice at the top of the side column: radius 12, padding 14px 16px. */
-.cn-look-board .cn-detail-page__side-item--notice .cn-widget-wrapper,
-.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
+/* The notice at the top of the side column: one tinted block, radius 12,
+   padding 14px 16px. Only the outer layer paints; the card wrapper, the
+   banner and its note card inside it stay flat, so the notice is not drawn
+   as a box in a box. */
 .cn-look-board .cn-detail-page__side-item--notice > * {
 	background: var(--cn-board-notice-bg);
 	border: none;
@@ -9172,6 +9430,23 @@ li[data-cn-admin-tag] > .action-link::after {
 	padding: 14px 16px;
 }
 
+.cn-look-board .cn-detail-page__side-item--notice > * .cn-widget-wrapper,
+.cn-look-board .cn-detail-page__side-item--notice > * .cn-widget-wrapper__content,
+.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
+.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget__card {
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	margin: 0;
+	padding: 0;
+}
+
+/* A notice whose condition does not hold renders no banner; its slot then
+   takes no room instead of standing as an empty tinted block. */
+.cn-look-board .cn-detail-page__side-item--notice:not(:has(.cn-banner-widget)) {
+	display: none;
+}
+
 /* The History card ends with the record's identifier. */
 .cn-look-board .cn-detail-page__side-item--with-identifier .cn-widget-wrapper {
 	border-bottom: none;
@@ -9201,14 +9476,16 @@ li[data-cn-admin-tag] > .action-link::after {
 }
 
 /* The kicker keeps its tone under a theme that colours every h3 with
-   `!important` (thematiq's heading colour); only `!important` beats it. */
+   `!important` (thematiq's heading colour); only `!important` beats it. The
+   boards set it in sentence case ("Wat nu? Stap 2: in behandeling", DqZaak,
+   DqSociaalDomein), not as the plain look's spaced capitals. */
 .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) !important;
 	font-size: 13px !important;
 	font-weight: 700;
-	letter-spacing: 0.06em;
+	letter-spacing: 0;
 	line-height: normal;
-	text-transform: uppercase;
+	text-transform: none;
 }
 
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__list {
@@ -9483,6 +9760,33 @@ li[data-cn-admin-tag] > .action-link::after {
 .cn-look-board .cn-tasks-widget .cn-tasks-widget__cell-actions .button-vue .button-vue__text.button-vue__text {
 	padding-inline: 0;
 }
+
+/* ---- Grouped cards (CnGroupedCardsWidget, DqZaaktype "Fasen en taken") --- */
+/* Groups 14px apart, each padded 14px with a 10px radius and a bold title; a
+   card in a group is padded 9px 12px with the 8px control radius, its title
+   15px. The doubled class outranks the widget's scoped rules.
+   @spec openspec/changes/board-grouped-cards/specs/board-grouped-cards/spec.md#requirement-board-grouped-cards-take-the-boards-group-and-card-shape */
+.cn-look-board .cn-grouped-cards__grid.cn-grouped-cards__grid {
+	gap: 14px;
+}
+
+.cn-look-board .cn-grouped-cards__group.cn-grouped-cards__group {
+	padding: 14px;
+	border-radius: 10px;
+}
+
+.cn-look-board .cn-grouped-cards__group-title.cn-grouped-cards__group-title {
+	font-weight: 700;
+}
+
+.cn-look-board .cn-grouped-cards__item.cn-grouped-cards__item {
+	padding: 9px 12px;
+	border-radius: var(--cn-board-control-radius, 8px);
+}
+
+.cn-look-board .cn-grouped-cards__item-title.cn-grouped-cards__item-title {
+	font-size: 15px;
+}
 /*
  * The reports page under the board look (screens-reports-page-board-look,
  * board DcRapportages): a 28px title over a muted lead, one section per
@@ -12249,7 +12553,7 @@ li[data-cn-admin-tag] > .action-link::after {
 }
 
 
-.cn-chart-widget[data-v-5335921f] {
+.cn-chart-widget[data-v-7636430b] {
 	width: 100%;
 	/* A chart FITS its container — it is never a scroll region. apexcharts
 	   sizes its SVG from the element it is mounted in, but it also enforces
@@ -12271,13 +12575,13 @@ li[data-cn-admin-tag] > .action-link::after {
    takes what is left, so the chart is sized by the box rather than sizing it.
    `min-height: 0` drops the 100px floor — on a fixed-height surface a floor is
    the thing that produces the overflow it was meant to prevent. */
-.cn-chart-widget--fit[data-v-5335921f] {
+.cn-chart-widget--fit[data-v-7636430b] {
 	height: 100%;
 	min-height: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-chart-widget__canvas[data-v-5335921f] {
+.cn-chart-widget__canvas[data-v-7636430b] {
 	min-width: 0;
 	max-width: 100%;
 	/* Never a scroll region (see the root). `overflow-x: hidden` alone made
@@ -12290,14 +12594,14 @@ li[data-cn-admin-tag] > .action-link::after {
 /* apexcharts writes an inline `width` onto its own wrapper from its measured
    minimum, which beats the container when the container is narrower. Cap the
    painted box so the inline width cannot push past the widget's border. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-canvas,
-.cn-chart-widget[data-v-5335921f] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-7636430b] .apexcharts-canvas,
+.cn-chart-widget[data-v-7636430b] .apexcharts-canvas svg {
 	max-width: 100%;
 }
 
 /* The SVG is a block: as an inline box it sits on a line and adds the line's
    descender space under the chart. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-canvas svg {
+.cn-chart-widget[data-v-7636430b] .apexcharts-canvas svg {
 	display: block;
 }
 
@@ -12305,24 +12609,24 @@ li[data-cn-admin-tag] > .action-link::after {
    would grow to its content, i.e. to the chart, and the percentage height would
    resolve against a box the chart itself defined. `overflow: hidden` keeps a
    sub-pixel rounding difference from reintroducing a scrollbar. */
-.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-5335921f] {
+.cn-chart-widget--fit .cn-chart-widget__canvas[data-v-7636430b] {
 	flex: 1 1 0;
 	min-height: 0;
 	overflow: hidden;
 }
-.cn-chart-widget__fallback[data-v-5335921f] {
+.cn-chart-widget__fallback[data-v-7636430b] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	min-height: 150px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-chart-widget__html[data-v-5335921f] {
+.cn-chart-widget__html[data-v-7636430b] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-chart-widget__bar-list[data-v-5335921f] {
+.cn-chart-widget__bar-list[data-v-7636430b] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -12330,7 +12634,7 @@ li[data-cn-admin-tag] > .action-link::after {
 	margin: 0;
 	padding: 0;
 }
-.cn-chart-widget__bar-line[data-v-5335921f] {
+.cn-chart-widget__bar-line[data-v-7636430b] {
 	align-items: center;
 	background: none;
 	border: 0;
@@ -12345,109 +12649,111 @@ li[data-cn-admin-tag] > .action-link::after {
 	text-align: start;
 	width: 100%;
 }
-.cn-chart-widget__bar-line--drill[data-v-5335921f] {
+.cn-chart-widget__bar-line--drill[data-v-7636430b] {
 	border-radius: var(--border-radius-small, 4px);
 	cursor: pointer;
 }
-.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-5335921f],
-.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-5335921f] {
+.cn-chart-widget__bar-line--drill:hover .cn-chart-widget__bar-label[data-v-7636430b],
+.cn-chart-widget__bar-line--drill:focus-visible .cn-chart-widget__bar-label[data-v-7636430b] {
 	text-decoration: underline;
 }
-.cn-chart-widget__bar-label[data-v-5335921f] {
+.cn-chart-widget__bar-label[data-v-7636430b] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-chart-widget__bar-track[data-v-5335921f] {
+.cn-chart-widget__bar-track[data-v-7636430b] {
 	background: var(--color-background-dark);
 	border-radius: 4px;
 	display: block;
 	height: 14px;
 	overflow: hidden;
 }
-.cn-chart-widget__bar-fill[data-v-5335921f] {
+.cn-chart-widget__bar-fill[data-v-7636430b] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-chart-widget__bar-value[data-v-5335921f] {
+.cn-chart-widget__bar-value[data-v-7636430b] {
 	font-weight: 600;
 	text-align: end;
 	white-space: nowrap;
 }
-.cn-chart-widget__footnote[data-v-5335921f] {
+.cn-chart-widget__footnote[data-v-7636430b] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
 /* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
    its own line height while the canvas takes the rest of a fitted column. */
-.cn-chart-widget > .cn-chart-widget__footnote[data-v-5335921f] {
+.cn-chart-widget > .cn-chart-widget__footnote[data-v-7636430b] {
 	flex: 0 0 auto;
 	margin-top: 8px;
 }
-.cn-chart-widget__matrix[data-v-5335921f] {
+.cn-chart-widget__matrix[data-v-7636430b] {
 	display: grid;
 	gap: 4px;
 }
-.cn-chart-widget__matrix-row[data-v-5335921f] {
+.cn-chart-widget__matrix-row[data-v-7636430b] {
 	display: contents;
 }
-.cn-chart-widget__matrix-head[data-v-5335921f] {
+.cn-chart-widget__matrix-head[data-v-7636430b] {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
-.cn-chart-widget__matrix-label[data-v-5335921f] {
+.cn-chart-widget__matrix-label[data-v-7636430b] {
 	padding: 10px 6px;
 }
-.cn-chart-widget__matrix-cell[data-v-5335921f] {
+.cn-chart-widget__matrix-cell[data-v-7636430b] {
 	border-radius: 6px;
 	padding: 10px;
 	text-align: center;
 }
-.cn-chart-widget__matrix-cell--success[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--success[data-v-7636430b] {
 	background: var(--color-success-light, color-mix(in srgb, var(--color-success) 15%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--warning[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--warning[data-v-7636430b] {
 	background: var(--color-warning-light, color-mix(in srgb, var(--color-warning) 15%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--error[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--error[data-v-7636430b] {
 	background: var(--color-error-light, color-mix(in srgb, var(--color-error) 12%, var(--color-main-background)));
 }
-.cn-chart-widget__matrix-cell--danger[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--danger[data-v-7636430b] {
 	background: color-mix(in srgb, var(--color-error) 25%, var(--color-main-background));
 }
-.cn-chart-widget__matrix-cell--current[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--current[data-v-7636430b] {
 	font-weight: 700;
 	outline: 3px solid var(--color-primary-element);
 	outline-offset: -3px;
 }
 
 /* A cell is a span: its ink also goes to --nldesign-color-on-surface, which a
-   theme that forces the body ink onto every span (thematiq) reads. The light
-   levels (1 to 3) take a dark ink; white only on level 4, the full primary,
-   where it reaches 4.5:1 (on level 3's 65% tint it is about 2.9:1). */
-.cn-chart-widget__matrix-cell--1[data-v-5335921f] {
+   theme that forces the body ink onto every span (thematiq) reads. The four
+   levels are the boards' tones (DqProcesanalyse): the light primary, the
+   primary at 35% and at 70%, and level 1 inverted. Levels 1 to 3 take a dark
+   ink; the board's white on level 3 is about 3.1:1, and 70% is as deep as the
+   dark ink stays at 4.5:1 in Nextcloud's dark theme. */
+.cn-chart-widget__matrix-cell--1[data-v-7636430b] {
 	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
-.cn-chart-widget__matrix-cell--2[data-v-5335921f] {
-	background: color-mix(in srgb, var(--color-primary-element) 30%, var(--color-main-background));
+.cn-chart-widget__matrix-cell--2[data-v-7636430b] {
+	background: color-mix(in srgb, var(--color-primary-element) 35%, var(--color-main-background));
 	color: var(--color-main-text);
 }
-.cn-chart-widget__matrix-cell--3[data-v-5335921f] {
+.cn-chart-widget__matrix-cell--3[data-v-7636430b] {
 	--nldesign-color-on-surface: var(--color-main-text);
-	background: color-mix(in srgb, var(--color-primary-element) 65%, var(--color-main-background));
+	background: color-mix(in srgb, var(--color-primary-element) 70%, var(--color-main-background));
 	color: var(--color-main-text);
 }
-.cn-chart-widget__matrix-cell--4[data-v-5335921f] {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
-	background: var(--color-primary-element);
-	color: var(--color-primary-element-text);
+.cn-chart-widget__matrix-cell--4[data-v-7636430b] {
+	--nldesign-color-on-surface: var(--color-primary-element-light);
+	background: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light);
 }
-.cn-chart-widget__empty[data-v-5335921f] {
+.cn-chart-widget__empty[data-v-7636430b] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -12462,25 +12768,25 @@ li[data-cn-admin-tag] > .action-link::after {
    content-sized case; in fit mode they take the leftover space and centre in it
    instead, since the floor would overflow a short tile. Declared after the base
    rules so the cascade order matches specificity (no-descending-specificity). */
-.cn-chart-widget--fit .cn-chart-widget__empty[data-v-5335921f],
-.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-5335921f] {
+.cn-chart-widget--fit .cn-chart-widget__empty[data-v-7636430b],
+.cn-chart-widget--fit .cn-chart-widget__fallback[data-v-7636430b] {
 	flex: 1 1 0;
 	min-height: 0;
 }
-.cn-chart-widget__error[data-v-5335921f] {
+.cn-chart-widget__error[data-v-7636430b] {
 	font-size: 14px;
 	margin: 0;
 }
 
 /* In-widget view switcher pills (views[] prop) — compact segmented row,
    mirroring the dashboard date-range pill styling. */
-.cn-chart-widget__views[data-v-5335921f] {
+.cn-chart-widget__views[data-v-7636430b] {
 	display: flex;
 	gap: 4px;
 	margin-bottom: 6px;
 	justify-content: flex-end;
 }
-.cn-chart-widget__view-pill[data-v-5335921f] {
+.cn-chart-widget__view-pill[data-v-7636430b] {
 	padding: 2px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 999px;
@@ -12489,7 +12795,7 @@ li[data-cn-admin-tag] > .action-link::after {
 	font-size: 12px;
 	cursor: pointer;
 }
-.cn-chart-widget__view-pill--active[data-v-5335921f] {
+.cn-chart-widget__view-pill--active[data-v-7636430b] {
 	background: var(--color-primary-element-light, #aad2ed);
 	color: var(--color-main-text);
 	border-color: var(--color-primary-element, #0082c9);
@@ -12518,8 +12824,8 @@ li[data-cn-admin-tag] > .action-link::after {
    each override below therefore carries one more class than the apexcharts rule
    it replaces, and holds even without the scope attribute this block compiles
    with. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-tooltip.apexcharts-theme-light,
-.cn-chart-widget[data-v-5335921f] .apexcharts-tooltip.apexcharts-theme-dark {
+.cn-chart-widget[data-v-7636430b] .apexcharts-tooltip.apexcharts-theme-light,
+.cn-chart-widget[data-v-7636430b] .apexcharts-tooltip.apexcharts-theme-dark {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -12528,8 +12834,8 @@ li[data-cn-admin-tag] > .action-link::after {
 
 /* The title row is the date/category header ("Aug 26"). Its own background is
    what made it unreadable rather than merely off-theme. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
-.cn-chart-widget[data-v-5335921f] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+.cn-chart-widget[data-v-7636430b] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
+.cn-chart-widget[data-v-7636430b] .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
 	background: var(--color-background-hover);
 	border-bottom: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -12538,8 +12844,8 @@ li[data-cn-admin-tag] > .action-link::after {
 /* Crosshair axis tooltips. apexcharts puts light hex values on the BASE class
    here and only overrides them for its dark theme, so the base rule has to be
    replaced too — not just the theme variants. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-xaxistooltip,
-.cn-chart-widget[data-v-5335921f] .apexcharts-yaxistooltip {
+.cn-chart-widget[data-v-7636430b] .apexcharts-xaxistooltip,
+.cn-chart-widget[data-v-7636430b] .apexcharts-yaxistooltip {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
@@ -12548,55 +12854,55 @@ li[data-cn-admin-tag] > .action-link::after {
 /* Their pointer arrows are two stacked triangles: `::before` paints the border
    edge, `::after` the fill. Both need the tokens the box above uses, or the
    arrow keeps the old palette and reads as a stray light wedge. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-xaxistooltip-bottom::after,
-.cn-chart-widget[data-v-5335921f] .apexcharts-xaxistooltip-top::after {
+.cn-chart-widget[data-v-7636430b] .apexcharts-xaxistooltip-bottom::after,
+.cn-chart-widget[data-v-7636430b] .apexcharts-xaxistooltip-top::after {
 	border-bottom-color: var(--color-main-background);
 	border-top-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-5335921f] .apexcharts-xaxistooltip-bottom::before,
-.cn-chart-widget[data-v-5335921f] .apexcharts-xaxistooltip-top::before {
+.cn-chart-widget[data-v-7636430b] .apexcharts-xaxistooltip-bottom::before,
+.cn-chart-widget[data-v-7636430b] .apexcharts-xaxistooltip-top::before {
 	border-bottom-color: var(--color-border);
 	border-top-color: var(--color-border);
 }
-.cn-chart-widget[data-v-5335921f] .apexcharts-yaxistooltip-left::after,
-.cn-chart-widget[data-v-5335921f] .apexcharts-yaxistooltip-right::after {
+.cn-chart-widget[data-v-7636430b] .apexcharts-yaxistooltip-left::after,
+.cn-chart-widget[data-v-7636430b] .apexcharts-yaxistooltip-right::after {
 	border-left-color: var(--color-main-background);
 	border-right-color: var(--color-main-background);
 }
-.cn-chart-widget[data-v-5335921f] .apexcharts-yaxistooltip-left::before,
-.cn-chart-widget[data-v-5335921f] .apexcharts-yaxistooltip-right::before {
+.cn-chart-widget[data-v-7636430b] .apexcharts-yaxistooltip-left::before,
+.cn-chart-widget[data-v-7636430b] .apexcharts-yaxistooltip-right::before {
 	border-left-color: var(--color-border);
 	border-right-color: var(--color-border);
 }
 
 /* Toolbar menu — only reachable with `toolbar: true`, but the same defect: a
    hardcoded `#fff` panel under inherited near-white text. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-menu {
+.cn-chart-widget[data-v-7636430b] .apexcharts-menu {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	color: var(--color-main-text);
 }
-.cn-chart-widget[data-v-5335921f] .apexcharts-menu .apexcharts-menu-item:hover {
+.cn-chart-widget[data-v-7636430b] .apexcharts-menu .apexcharts-menu-item:hover {
 	background: var(--color-background-hover);
 }
 
 /* Toolbar icons: `#6e8192` at rest and `#333` on hover, i.e. the hover state
    vanishes against a dark background. One selector per icon class, matching
    apexcharts' own list, to clear its (0,3,1) hover rules. */
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-menu-icon svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-reset-icon svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-selection-icon svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoom-icon svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-menu-icon svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-reset-icon svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-selection-icon svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoom-icon svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoomin-icon svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoomout-icon svg {
 	fill: var(--color-text-maxcontrast);
 }
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
-.cn-chart-widget[data-v-5335921f] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-menu-icon:hover svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-reset-icon:hover svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-selection-icon:hover svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoom-icon:hover svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoomin-icon:hover svg,
+.cn-chart-widget[data-v-7636430b] .apexcharts-toolbar .apexcharts-zoomout-icon:hover svg {
 	fill: var(--color-main-text);
 }
 
@@ -19925,7 +20231,7 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 }
 
 
-.cn-files-browser[data-v-534c5e47] {
+.cn-files-browser[data-v-61d912e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -19933,22 +20239,22 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-files-browser--dragging[data-v-534c5e47] {
+.cn-files-browser--dragging[data-v-61d912e6] {
 	outline: 2px dashed var(--color-primary-element);
 	outline-offset: 4px;
 }
 
 /* With a `dropDetail` the drop state fills the panel it sits in, as the
    board draws it (DqZaakDocumentenSlepen), not only the list's own height. */
-.cn-files-browser--dragging.cn-files-browser--drop-panel[data-v-534c5e47] {
+.cn-files-browser--dragging.cn-files-browser--drop-panel[data-v-61d912e6] {
 	min-height: max(320px, 100%);
 }
-.cn-files-browser__drop-detail[data-v-534c5e47] {
+.cn-files-browser__drop-detail[data-v-61d912e6] {
 	max-width: 520px;
 	font-size: 14px;
 	color: var(--color-main-text);
 }
-.cn-files-browser__drop-overlay[data-v-534c5e47] {
+.cn-files-browser__drop-overlay[data-v-61d912e6] {
 	position: absolute;
 	inset: 0;
 	z-index: 2;
@@ -19966,7 +20272,7 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	text-align: center;
 	pointer-events: none;
 }
-.cn-files-browser__drop-icon[data-v-534c5e47] {
+.cn-files-browser__drop-icon[data-v-61d912e6] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -19976,11 +20282,11 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	background: var(--color-main-background);
 	color: var(--color-primary-element);
 }
-.cn-files-browser__drop-label[data-v-534c5e47] {
+.cn-files-browser__drop-label[data-v-61d912e6] {
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-files-browser__drop-hint[data-v-534c5e47] {
+.cn-files-browser__drop-hint[data-v-61d912e6] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -19990,14 +20296,14 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__bar[data-v-534c5e47] {
+.cn-files-browser__bar[data-v-61d912e6] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-files-browser__crumbs[data-v-534c5e47] {
+.cn-files-browser__crumbs[data-v-61d912e6] {
 	min-width: 0;
 	flex: 1 1 auto;
 }
@@ -20005,13 +20311,13 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 /* The crumbs give way, the controls do not: a long crumb (a folder named
    after a uuid) shrank the upload button to "Bestanden..." while the crumbs
    kept their width. */
-.cn-files-browser__bar[data-v-534c5e47] > :not(.cn-files-browser__crumbs) {
+.cn-files-browser__bar[data-v-61d912e6] > :not(.cn-files-browser__crumbs) {
 	flex-shrink: 0;
 }
-.cn-files-browser__file-input[data-v-534c5e47] {
+.cn-files-browser__file-input[data-v-61d912e6] {
 	display: none;
 }
-.cn-files-browser__uploads[data-v-534c5e47] {
+.cn-files-browser__uploads[data-v-61d912e6] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
@@ -20019,40 +20325,50 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-files-browser__upload[data-v-534c5e47] {
+.cn-files-browser__upload[data-v-61d912e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 }
-.cn-files-browser__upload-name[data-v-534c5e47] {
+.cn-files-browser__upload-name[data-v-61d912e6] {
 	font-size: 13px;
 }
-.cn-files-browser__upload-error[data-v-534c5e47] {
+.cn-files-browser__upload-error[data-v-61d912e6] {
 	color: var(--color-error);
 	font-size: 13px;
 }
-.cn-files-browser__loading[data-v-534c5e47] {
+.cn-files-browser__loading[data-v-61d912e6] {
 	padding: 24px 0;
 }
 
 /* `sideCards`: the list and, while a file is selected, a column of cards. */
-.cn-files-browser__body--with-side[data-v-534c5e47] {
+.cn-files-browser__body--with-side[data-v-61d912e6] {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
 	align-items: start;
 	gap: 16px;
 }
 @media (max-width: 900px) {
-.cn-files-browser__body--with-side[data-v-534c5e47] {
+.cn-files-browser__body--with-side[data-v-61d912e6] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
-.cn-files-browser__side[data-v-534c5e47] {
+.cn-files-browser__side[data-v-61d912e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 }
-.cn-files-browser__side-card[data-v-534c5e47] {
+
+/* In the detail page's side column the cards take its gap and its card
+   anatomy, as the page's own side cards are drawn. */
+.cn-files-browser__side--in-page[data-v-61d912e6] {
+	gap: calc(5 * var(--default-grid-baseline));
+}
+.cn-files-browser__side--in-page .cn-files-browser__side-card[data-v-61d912e6] {
+	padding: var(--cn-board-card-padding, 16px 18px);
+	border-radius: var(--cn-board-card-radius, var(--border-radius-large));
+}
+.cn-files-browser__side-card[data-v-61d912e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -20061,27 +20377,27 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	border-radius: var(--border-radius-large);
 	background: var(--color-main-background);
 }
-.cn-files-browser__side-title[data-v-534c5e47] {
+.cn-files-browser__side-title[data-v-61d912e6] {
 	margin: 0;
 	font-size: 15px;
 	font-weight: 700;
 	overflow-wrap: anywhere;
 }
-.cn-files-browser__side-facts[data-v-534c5e47] {
+.cn-files-browser__side-facts[data-v-61d912e6] {
 	display: grid;
 	grid-template-columns: max-content minmax(0, 1fr);
 	gap: 6px 12px;
 	margin: 0;
 	font-size: 14px;
 }
-.cn-files-browser__side-facts dt[data-v-534c5e47] {
+.cn-files-browser__side-facts dt[data-v-61d912e6] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__side-facts dd[data-v-534c5e47] {
+.cn-files-browser__side-facts dd[data-v-61d912e6] {
 	margin: 0;
 	overflow-wrap: anywhere;
 }
-.cn-files-browser__side-actions[data-v-534c5e47] {
+.cn-files-browser__side-actions[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -20089,35 +20405,35 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 
 /* A value drawn in a tone (`colorMap` on a column that is not a badge): the
    text in the tone's colour, as the boards write a restricted level. */
-.cn-files-browser__tone[data-v-534c5e47] {
+.cn-files-browser__tone[data-v-61d912e6] {
 	font-weight: 600;
 }
-.cn-files-browser__tone--success[data-v-534c5e47] {
+.cn-files-browser__tone--success[data-v-61d912e6] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-files-browser__tone--warning[data-v-534c5e47] {
+.cn-files-browser__tone--warning[data-v-61d912e6] {
 	color: var(--color-warning-text, var(--color-warning));
 }
-.cn-files-browser__tone--error[data-v-534c5e47] {
+.cn-files-browser__tone--error[data-v-61d912e6] {
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-files-browser__tone--primary[data-v-534c5e47],
-.cn-files-browser__tone--info[data-v-534c5e47] {
+.cn-files-browser__tone--primary[data-v-61d912e6],
+.cn-files-browser__tone--info[data-v-61d912e6] {
 	color: var(--color-primary-element-light-text, var(--color-primary-element));
 }
-.cn-files-browser__table[data-v-534c5e47] {
+.cn-files-browser__table[data-v-61d912e6] {
 	width: 100%;
 	border-collapse: collapse;
 	table-layout: fixed;
 }
-.cn-files-browser__table th[data-v-534c5e47] {
+.cn-files-browser__table th[data-v-61d912e6] {
 	text-align: start;
 	font-weight: normal;
 	color: var(--color-text-maxcontrast);
 	padding: 4px 8px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-files-browser__sort[data-v-534c5e47] {
+.cn-files-browser__sort[data-v-61d912e6] {
 	background: none;
 	border: none;
 	padding: 0;
@@ -20128,46 +20444,46 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	align-items: center;
 	gap: 2px;
 }
-.cn-files-browser__sort[data-v-534c5e47]:hover,
-.cn-files-browser__sort[data-v-534c5e47]:focus-visible {
+.cn-files-browser__sort[data-v-61d912e6]:hover,
+.cn-files-browser__sort[data-v-61d912e6]:focus-visible {
 	color: var(--color-main-text);
 }
-.cn-files-browser__row[data-v-534c5e47] {
+.cn-files-browser__row[data-v-61d912e6] {
 	cursor: pointer;
 }
-.cn-files-browser__row[data-v-534c5e47]:hover,
-.cn-files-browser__row[data-v-534c5e47]:focus-within {
+.cn-files-browser__row[data-v-61d912e6]:hover,
+.cn-files-browser__row[data-v-61d912e6]:focus-within {
 	background-color: var(--color-background-hover);
 }
-.cn-files-browser__table td[data-v-534c5e47] {
+.cn-files-browser__table td[data-v-61d912e6] {
 	padding: 4px 8px;
 	border-bottom: 1px solid var(--color-border);
 	vertical-align: middle;
 }
-.cn-files-browser__col-icon[data-v-534c5e47] {
+.cn-files-browser__col-icon[data-v-61d912e6] {
 	width: 48px;
 }
-.cn-files-browser__col-size[data-v-534c5e47] {
+.cn-files-browser__col-size[data-v-61d912e6] {
 	width: 96px;
 	white-space: nowrap;
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__col-mtime[data-v-534c5e47] {
+.cn-files-browser__col-mtime[data-v-61d912e6] {
 	width: 140px;
 	white-space: nowrap;
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__col-select[data-v-534c5e47] {
+.cn-files-browser__col-select[data-v-61d912e6] {
 	width: 36px;
 	text-align: center;
 }
-.cn-files-browser__select[data-v-534c5e47] {
+.cn-files-browser__select[data-v-61d912e6] {
 	width: 18px;
 	height: 18px;
 	margin: 0;
 	accent-color: var(--color-primary-element);
 }
-.cn-files-browser__bulk-bar[data-v-534c5e47] {
+.cn-files-browser__bulk-bar[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -20176,11 +20492,11 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	border-radius: var(--border-radius-large);
 	background: var(--color-primary-element-light);
 }
-.cn-files-browser__bulk-count[data-v-534c5e47] {
+.cn-files-browser__bulk-count[data-v-61d912e6] {
 	font-weight: 600;
 	margin-inline-end: 8px;
 }
-.cn-files-browser__review[data-v-534c5e47] {
+.cn-files-browser__review[data-v-61d912e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -20189,28 +20505,28 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	border-radius: 10px;
 	background: var(--color-background-hover);
 }
-.cn-files-browser__review-head[data-v-534c5e47] {
+.cn-files-browser__review-head[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
 	justify-content: space-between;
 	gap: 8px;
 }
-.cn-files-browser__review-title[data-v-534c5e47] {
+.cn-files-browser__review-title[data-v-61d912e6] {
 	font-size: 15px;
 }
-.cn-files-browser__review-sub[data-v-534c5e47] {
+.cn-files-browser__review-sub[data-v-61d912e6] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-files-browser__review-bar[data-v-534c5e47] {
+.cn-files-browser__review-bar[data-v-61d912e6] {
 	display: flex;
 	height: 8px;
 	overflow: hidden;
 	border-radius: 4px;
 	background: var(--color-border);
 }
-.cn-files-browser__review-legend[data-v-534c5e47] {
+.cn-files-browser__review-legend[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px 18px;
@@ -20219,48 +20535,48 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	font-size: 14px;
 	list-style: none;
 }
-.cn-files-browser__review-legend li[data-v-534c5e47] {
+.cn-files-browser__review-legend li[data-v-61d912e6] {
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
 }
-.cn-files-browser__review-dot[data-v-534c5e47] {
+.cn-files-browser__review-dot[data-v-61d912e6] {
 	width: 10px;
 	height: 10px;
 	border-radius: 5px;
 }
-.cn-files-browser__review-part--success[data-v-534c5e47] {
+.cn-files-browser__review-part--success[data-v-61d912e6] {
 	background: var(--color-success-text, var(--color-success));
 }
-.cn-files-browser__review-part--warning[data-v-534c5e47] {
+.cn-files-browser__review-part--warning[data-v-61d912e6] {
 	background: var(--color-warning);
 }
-.cn-files-browser__review-part--error[data-v-534c5e47] {
+.cn-files-browser__review-part--error[data-v-61d912e6] {
 	background: var(--color-error-text, var(--color-error));
 }
-.cn-files-browser__review-part--info[data-v-534c5e47] {
+.cn-files-browser__review-part--info[data-v-61d912e6] {
 	background: var(--color-primary-element);
 }
-.cn-files-browser__review-part--default[data-v-534c5e47] {
+.cn-files-browser__review-part--default[data-v-61d912e6] {
 	background: var(--color-border-dark);
 }
-.cn-files-browser__row-button[data-v-534c5e47] {
+.cn-files-browser__row-button[data-v-61d912e6] {
 	display: inline-flex;
 	margin-inline-end: 8px;
 	vertical-align: middle;
 }
-.cn-files-browser__facets[data-v-534c5e47] {
+.cn-files-browser__facets[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px 16px;
 }
-.cn-files-browser__facet[data-v-534c5e47] {
+.cn-files-browser__facet[data-v-61d912e6] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-files-browser__facet-chip[data-v-534c5e47] {
+.cn-files-browser__facet-chip[data-v-61d912e6] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -20272,41 +20588,41 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	color: var(--color-main-text);
 	cursor: pointer;
 }
-.cn-files-browser__facet-chip--active[data-v-534c5e47] {
+.cn-files-browser__facet-chip--active[data-v-61d912e6] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
-.cn-files-browser__group-heading[data-v-534c5e47] {
+.cn-files-browser__group-heading[data-v-61d912e6] {
 	padding: 12px 8px 4px;
 	text-align: start;
 	font-weight: 700;
 }
-.cn-files-browser__group-count[data-v-534c5e47] {
+.cn-files-browser__group-count[data-v-61d912e6] {
 	margin-inline-start: 6px;
 	font-weight: 400;
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__no-match[data-v-534c5e47] {
+.cn-files-browser__no-match[data-v-61d912e6] {
 	padding: 16px 8px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__col-actions[data-v-534c5e47] {
+.cn-files-browser__col-actions[data-v-61d912e6] {
 	width: 48px;
 	white-space: nowrap;
 }
-.cn-files-browser__col-actions[data-v-534c5e47]:has(.cn-files-browser__row-button) {
+.cn-files-browser__col-actions[data-v-61d912e6]:has(.cn-files-browser__row-button) {
 	width: auto;
 }
-.cn-files-browser__col-name[data-v-534c5e47] {
+.cn-files-browser__col-name[data-v-61d912e6] {
 	min-width: 0;
 }
-.cn-files-browser__name[data-v-534c5e47] {
+.cn-files-browser__name[data-v-61d912e6] {
 	display: block;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-files-browser__name-secondary[data-v-534c5e47] {
+.cn-files-browser__name-secondary[data-v-61d912e6] {
 	display: block;
 	overflow: hidden;
 	color: var(--color-text-maxcontrast);
@@ -20314,41 +20630,41 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-files-browser__footnote[data-v-534c5e47] {
+.cn-files-browser__footnote[data-v-61d912e6] {
 	margin: 0;
 	padding-top: 12px;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-files-browser__row--linked[data-v-534c5e47] {
+.cn-files-browser__row--linked[data-v-61d912e6] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-files-browser__note[data-v-534c5e47] {
+.cn-files-browser__note[data-v-61d912e6] {
 	color: var(--color-text-maxcontrast);
 	display: block;
 	font-size: var(--font-size-small, 13px);
 }
-.cn-files-browser__note-link[data-v-534c5e47] {
+.cn-files-browser__note-link[data-v-61d912e6] {
 	color: inherit;
 	text-decoration: underline;
 }
-.cn-files-browser__row--folder .cn-files-browser__name[data-v-534c5e47] {
+.cn-files-browser__row--folder .cn-files-browser__name[data-v-61d912e6] {
 	font-weight: 600;
 }
-.cn-files-browser__mime[data-v-534c5e47],
-.cn-files-browser__thumb[data-v-534c5e47] {
+.cn-files-browser__mime[data-v-61d912e6],
+.cn-files-browser__thumb[data-v-61d912e6] {
 	width: 32px;
 	height: 32px;
 	display: block;
 }
-.cn-files-browser__thumb[data-v-534c5e47] {
+.cn-files-browser__thumb[data-v-61d912e6] {
 	object-fit: cover;
 	border-radius: var(--border-radius, 4px);
 }
-.cn-files-browser__new-folder[data-v-534c5e47] {
+.cn-files-browser__new-folder[data-v-61d912e6] {
 	padding: 8px 0;
 }
-.hidden-visually[data-v-534c5e47] {
+.hidden-visually[data-v-61d912e6] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -20358,9 +20674,9 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 }
 
 
-.cn-sidebar-tab[data-v-fe12141e] { padding: 12px;
+.cn-sidebar-tab[data-v-76386af6] { padding: 12px;
 }
-.cn-sidebar-tab__upload-error[data-v-fe12141e] {
+.cn-sidebar-tab__upload-error[data-v-76386af6] {
 	padding: 8px 12px;
 	margin-bottom: 8px;
 	border-radius: var(--border-radius, 4px);
@@ -20368,7 +20684,7 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	color: var(--color-error, #e53935);
 	font-size: 13px;
 }
-.cn-sidebar-tab__dropzone[data-v-fe12141e] {
+.cn-sidebar-tab__dropzone[data-v-76386af6] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -20381,46 +20697,46 @@ button.cn-files-card__open[data-v-4968f31c]:hover {
 	cursor: pointer;
 	transition: border-color 0.15s ease, background-color 0.15s ease;
 }
-.cn-sidebar-tab__dropzone[data-v-fe12141e]:hover {
+.cn-sidebar-tab__dropzone[data-v-76386af6]:hover {
 	border-color: var(--color-primary-element);
 	background-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.08));
 }
-.cn-sidebar-tab__dropzone--active[data-v-fe12141e] {
+.cn-sidebar-tab__dropzone--active[data-v-76386af6] {
 	border-color: var(--color-primary-element);
 	background-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.12));
 }
-.cn-sidebar-tab__share[data-v-fe12141e] { margin-bottom: 12px;
+.cn-sidebar-tab__share[data-v-76386af6] { margin-bottom: 12px;
 }
-.cn-sidebar-tab__dropzone-icon[data-v-fe12141e] { color: var(--color-text-maxcontrast);
+.cn-sidebar-tab__dropzone-icon[data-v-76386af6] { color: var(--color-text-maxcontrast);
 }
-.cn-sidebar-tab__dropzone--active .cn-sidebar-tab__dropzone-icon[data-v-fe12141e],
-.cn-sidebar-tab__dropzone:hover .cn-sidebar-tab__dropzone-icon[data-v-fe12141e] { color: var(--color-primary-element);
+.cn-sidebar-tab__dropzone--active .cn-sidebar-tab__dropzone-icon[data-v-76386af6],
+.cn-sidebar-tab__dropzone:hover .cn-sidebar-tab__dropzone-icon[data-v-76386af6] { color: var(--color-primary-element);
 }
-.cn-sidebar-tab__dropzone-text[data-v-fe12141e] { font-size: 13px; color: var(--color-text-maxcontrast);
+.cn-sidebar-tab__dropzone-text[data-v-76386af6] { font-size: 13px; color: var(--color-text-maxcontrast);
 }
-.cn-sidebar-tab__file-input[data-v-fe12141e] { display: none;
+.cn-sidebar-tab__file-input[data-v-76386af6] { display: none;
 }
-.cn-sidebar-tab__empty[data-v-fe12141e] {
+.cn-sidebar-tab__empty[data-v-76386af6] {
 	text-align: center;
 	padding: 24px 12px;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-sidebar-tab__list[data-v-fe12141e] { display: flex; flex-direction: column; gap: 2px;
+.cn-sidebar-tab__list[data-v-76386af6] { display: flex; flex-direction: column; gap: 2px;
 }
-.cn-sidebar-tab__mime[data-v-fe12141e],
-.cn-sidebar-tab__thumb[data-v-fe12141e] {
+.cn-sidebar-tab__mime[data-v-76386af6],
+.cn-sidebar-tab__thumb[data-v-76386af6] {
 	width: 32px;
 	height: 32px;
 	display: block;
 }
-.cn-sidebar-tab__thumb[data-v-fe12141e] {
+.cn-sidebar-tab__thumb[data-v-76386af6] {
 	object-fit: cover;
 	border-radius: var(--border-radius, 4px);
 }
-.cn-sidebar-tab__meta[data-v-fe12141e] { color: var(--color-text-maxcontrast);
+.cn-sidebar-tab__meta[data-v-76386af6] { color: var(--color-text-maxcontrast);
 }
-.cn-sidebar-tab__load-more[data-v-fe12141e] { margin-top: 8px;
+.cn-sidebar-tab__load-more[data-v-76386af6] { margin-top: 8px;
 }
 
 
@@ -29847,7 +30163,7 @@ button.cn-stepper__step[data-v-3cab4d7d] {
 }
 
 
-.cn-detail-page__catalog-action[data-v-7dc610c5] {
+.cn-detail-page__catalog-action[data-v-2993ba72] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -29866,15 +30182,15 @@ button.cn-stepper__step[data-v-3cab4d7d] {
 
 /* A leaf card in a narrow cell keeps its title and count: the title row
    wraps and the actions move under it instead of squeezing the title out. */
-.cn-detail-page__leaf-card[data-v-7dc610c5] .cn-widget-wrapper__header {
+.cn-detail-page__leaf-card[data-v-2993ba72] .cn-widget-wrapper__header {
 	flex-wrap: wrap;
 }
-.cn-detail-page__leaf-card[data-v-7dc610c5] .cn-widget-wrapper__header-left {
+.cn-detail-page__leaf-card[data-v-2993ba72] .cn-widget-wrapper__header-left {
 	flex: 1 0 auto;
 }
 
 /* The count beside a card title: the grey 20px badge of the tab strip. */
-.cn-detail-page__catalog-count[data-v-7dc610c5] {
+.cn-detail-page__catalog-count[data-v-2993ba72] {
 	background-color: var(--color-border);
 	border-radius: 10px;
 	box-sizing: border-box;
@@ -29887,19 +30203,19 @@ button.cn-stepper__step[data-v-3cab4d7d] {
 	padding: 0 6px;
 	text-align: center;
 }
-.cn-detail-page__catalog-note[data-v-7dc610c5] {
+.cn-detail-page__catalog-note[data-v-2993ba72] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-detail-widget-host[data-v-7dc610c5],
-.cn-detail-widget-host[data-v-7dc610c5] > * {
+.cn-detail-widget-host[data-v-2993ba72],
+.cn-detail-widget-host[data-v-2993ba72] > * {
 	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-7dc610c5] {
+.cn-detail-widget-host--bare[data-v-2993ba72] {
 	min-height: 0;
 }
 
@@ -34615,10 +34931,10 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 
-.cn-sections-widget[data-v-1bba4b0c] {
+.cn-sections-widget[data-v-28baf01e] {
 	min-width: 0;
 }
-.cn-sections-widget__column[data-v-1bba4b0c] {
+.cn-sections-widget__column[data-v-28baf01e] {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline, 4px) * 4);
@@ -34626,35 +34942,50 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 /* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */
-.cn-sections-widget--two-column[data-v-1bba4b0c] {
+.cn-sections-widget--two-column[data-v-28baf01e] {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) minmax(280px, 418px);
 	gap: 20px;
 	align-items: start;
 }
 @media (max-width: 1024px) {
-.cn-sections-widget--two-column[data-v-1bba4b0c] {
+.cn-sections-widget--two-column[data-v-28baf01e] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
 
+/* Sections side by side (`columns`): at most that many to a row, each at
+   least 240px wide, so a narrow cell wraps them onto more rows. */
+.cn-sections-widget.cn-sections-widget--grid .cn-sections-widget__column[data-v-28baf01e] {
+	--cn-sections-gap: 14px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - (var(--cn-sections-columns, 2) - 1) * var(--cn-sections-gap)) / var(--cn-sections-columns, 2)))), 1fr));
+	gap: var(--cn-sections-gap);
+	align-items: start;
+}
+.cn-sections-widget__footnote[data-v-28baf01e] {
+	margin: calc(var(--default-grid-baseline, 4px) * 3) 0 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 /* A host page may space every <section>; these sections are spaced by the column gap only. */
-.cn-sections-widget__section[data-v-1bba4b0c] {
+.cn-sections-widget__section[data-v-28baf01e] {
 	margin: 0;
 	min-width: 0;
 }
 
 /* A rule above a section that follows a shown one. */
-.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-1bba4b0c] {
+.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-28baf01e] {
 	padding-top: calc(var(--default-grid-baseline, 4px) * 4);
 	border-top: 1px solid var(--color-border);
 }
 
 /* No rule: strips that each say one thing, 8px apart. */
-.cn-sections-widget--plain .cn-sections-widget__column[data-v-1bba4b0c] {
+.cn-sections-widget--plain .cn-sections-widget__column[data-v-28baf01e] {
 	gap: calc(var(--default-grid-baseline, 4px) * 2);
 }
-.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-1bba4b0c] {
+.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-28baf01e] {
 	padding-top: 0;
 	border-top: 0;
 }
@@ -34663,31 +34994,31 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
  * An empty section keeps its host mounted (display: none still mounts it, so
  * the widget fetches and can fill later) but takes no space, gap or rule.
  */
-.cn-sections-widget__section--empty[data-v-1bba4b0c] {
+.cn-sections-widget__section--empty[data-v-28baf01e] {
 	display: none;
 }
-.cn-sections-widget__heading[data-v-1bba4b0c] {
+.cn-sections-widget__heading[data-v-28baf01e] {
 	margin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);
 	font-size: 16px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-sections-widget__description[data-v-1bba4b0c] {
+.cn-sections-widget__description[data-v-28baf01e] {
 	margin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);
 	color: var(--color-text-maxcontrast);
 }
 
 /* One card per section. */
-.cn-sections-widget--cards .cn-sections-widget__column[data-v-1bba4b0c] {
+.cn-sections-widget--cards .cn-sections-widget__column[data-v-28baf01e] {
 	gap: 20px;
 }
-.cn-sections-widget--cards .cn-sections-widget__section[data-v-1bba4b0c] {
+.cn-sections-widget--cards .cn-sections-widget__section[data-v-28baf01e] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));
 	padding: var(--cn-board-card-padding, 16px 20px);
 }
-.cn-sections-widget--cards .cn-sections-widget__heading[data-v-1bba4b0c] {
+.cn-sections-widget--cards .cn-sections-widget__heading[data-v-28baf01e] {
 	font-size: 18px;
 	margin-bottom: 12px;
 }
@@ -37522,21 +37853,21 @@ a.cn-record-list__inline-title[data-v-0dc228b6] {
 }
 
 
-.cn-attention-flag[data-v-21e92a64] {
+.cn-attention-flag[data-v-7e3434fc] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	padding: 4px 0;
 }
-.cn-attention-flag__line[data-v-21e92a64],
-.cn-attention-flag__act[data-v-21e92a64] {
+.cn-attention-flag__line[data-v-7e3434fc],
+.cn-attention-flag__act[data-v-7e3434fc] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 	margin: 0;
 }
-.cn-attention-flag__list[data-v-21e92a64] {
+.cn-attention-flag__list[data-v-7e3434fc] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -37544,21 +37875,31 @@ a.cn-record-list__inline-title[data-v-0dc228b6] {
 	padding: 0;
 	list-style: none;
 }
-.cn-attention-flag__list li[data-v-21e92a64] {
+.cn-attention-flag__list li[data-v-7e3434fc] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-attention-flag__lead[data-v-21e92a64] {
+.cn-attention-flag__lead[data-v-7e3434fc] {
 	font-weight: bold;
 }
-.cn-attention-flag__muted[data-v-21e92a64] {
+.cn-attention-flag__heading[data-v-7e3434fc] {
+	margin: 0;
+	font-size: 14px;
+	font-weight: bold;
+}
+.cn-attention-flag__hint[data-v-7e3434fc] {
+	margin: 0 0 8px;
 	color: var(--color-text-maxcontrast);
+	font-size: 13px;
 }
-.cn-attention-flag__due[data-v-21e92a64] {
+.cn-attention-flag__muted[data-v-7e3434fc] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-attention-flag__due[data-v-7e3434fc] {
 	color: var(--color-warning-text, var(--color-main-text));
 }
-.cn-attention-flag__refusal[data-v-21e92a64] {
+.cn-attention-flag__refusal[data-v-7e3434fc] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
@@ -40491,7 +40832,7 @@ to {
 }
 
 
-.cn-flow-detail[data-v-05e8747a] {
+.cn-flow-detail[data-v-0226122e] {
 	position: relative;
 	block-size: 100%;
 	inline-size: 100%;
@@ -40504,10 +40845,10 @@ to {
 /* The canvas paints an opaque main-background of its own, which sat exactly
    on top of the grid above. Cleared here, for flow editors only — other
    CnGraphCanvas consumers keep their solid ground. */
-.cn-flow-detail[data-v-05e8747a] .cn-graph-canvas {
+.cn-flow-detail[data-v-0226122e] .cn-graph-canvas {
 	background: transparent;
 }
-.cn-flow-detail__toolbar[data-v-05e8747a] {
+.cn-flow-detail__toolbar[data-v-0226122e] {
 	position: absolute;
 	inset-block-start: 12px;
 	inset-inline-end: 12px;
@@ -40525,14 +40866,14 @@ to {
 /* The toolbar while a run is being opened: the spinner and its sentence sit
    where the editor's buttons were, so the strip keeps its height and the zoom
    controls do not jump sideways when the run arrives. */
-.cn-flow-detail__toolbar-status[data-v-05e8747a] {
+.cn-flow-detail__toolbar-status[data-v-0226122e] {
 	display: flex;
 	gap: 6px;
 	align-items: center;
 	padding-inline: 8px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-detail__toolbar-group[data-v-05e8747a] {
+.cn-flow-detail__toolbar-group[data-v-0226122e] {
 	display: flex;
 	align-items: center;
 	margin-inline-start: 4px;
@@ -40557,7 +40898,7 @@ to {
    So the rule states the absence, and `.cn-flow-detail` in front of it raises
    the specificity above any same-name copy, which makes this independent of
    which bundle a page happens to inject last. */
-.cn-flow-detail .cn-flow-detail__node[data-v-05e8747a] {
+.cn-flow-detail .cn-flow-detail__node[data-v-0226122e] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -40611,7 +40952,7 @@ to {
    selector stops matching does not warn, it just silently stops painting. The
    class kept appearing in the shipped stylesheet and source maps, so it read
    as present while unknown nodes quietly lost their error border. */
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--unknown) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--unknown) {
 	border-color: var(--color-error);
 }
 
@@ -40630,33 +40971,33 @@ to {
    sideways, which is a layout change rather than a fix for one. `:has()` is how
    a rule on the body reaches the wrapper — the same mechanism the unknown-step
    border below already uses. */
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--role-trigger) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--role-trigger) {
 	box-shadow: inset 4px 0 0 0 var(--color-success);
 }
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--role-step) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--role-step) {
 	box-shadow: inset 4px 0 0 0 var(--color-primary-element);
 }
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--role-end) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--role-end) {
 	box-shadow: inset 4px 0 0 0 var(--color-error);
 }
-.cn-flow-detail__node-type[data-v-05e8747a] {
+.cn-flow-detail__node-type[data-v-0226122e] {
 	font-weight: 600;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-flow-detail__node-label[data-v-05e8747a],
-.cn-flow-detail__node-warning[data-v-05e8747a] {
+.cn-flow-detail__node-label[data-v-0226122e],
+.cn-flow-detail__node-warning[data-v-0226122e] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-flow-detail__node-warning[data-v-05e8747a] {
+.cn-flow-detail__node-warning[data-v-0226122e] {
 	color: var(--color-error-text);
 }
-.cn-flow-detail__empty[data-v-05e8747a] {
+.cn-flow-detail__empty[data-v-0226122e] {
 	position: absolute;
 	inset: 0;
 	pointer-events: none;
@@ -40674,31 +41015,31 @@ to {
    rule setting it would silently erase whichever loses the cascade. `outline`
    is a separate channel: run state and role accent paint together. It also
    costs no layout — an outline never moves the node's body. */
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-done) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-done) {
 	outline: 2px solid var(--color-success);
 	outline-offset: 1px;
 }
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-active) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-active) {
 	outline: 3px solid var(--color-success);
 	outline-offset: 1px;
-	animation: cn-flow-detail-run-halo-05e8747a 1.1s ease-in-out infinite;
+	animation: cn-flow-detail-run-halo-0226122e 1.1s ease-in-out infinite;
 }
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-failed) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-failed) {
 	outline: 3px solid var(--color-error);
 	outline-offset: 1px;
 }
 
 /* Visibly WAITING: dashed (a different shape from executing and from failed,
    so the states differ by more than hue) and pulsing slowly. */
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-hold) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-hold) {
 	outline: 3px dashed var(--color-warning);
 	outline-offset: 1px;
-	animation: cn-flow-detail-run-hold-05e8747a 2.4s ease-in-out infinite;
+	animation: cn-flow-detail-run-hold-0226122e 2.4s ease-in-out infinite;
 }
 
 /* The halo: the outline breathes outwards and fades — a pulse with no layout
    cost, on the wrapper the role accents already reach through `:has()`. */
-@keyframes cn-flow-detail-run-halo-05e8747a {
+@keyframes cn-flow-detail-run-halo-0226122e {
 0%,
 	100% {
 		outline-offset: 1px;
@@ -40709,7 +41050,7 @@ to {
 		outline-color: transparent;
 }
 }
-@keyframes cn-flow-detail-run-hold-05e8747a {
+@keyframes cn-flow-detail-run-hold-0226122e {
 0%,
 	100% {
 		outline-color: var(--color-warning);
@@ -40720,7 +41061,7 @@ to {
 }
 
 /* The state in words — never colour alone (WCAG 1.4.1). */
-.cn-flow-detail__node-run[data-v-05e8747a] {
+.cn-flow-detail__node-run[data-v-0226122e] {
 	font-size: 0.75em;
 	font-weight: 600;
 	text-transform: uppercase;
@@ -40730,18 +41071,18 @@ to {
 	text-overflow: ellipsis;
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-flow-detail__node-run--failed[data-v-05e8747a] {
+.cn-flow-detail__node-run--failed[data-v-0226122e] {
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-flow-detail__node-run--hold[data-v-05e8747a] {
+.cn-flow-detail__node-run--hold[data-v-0226122e] {
 	color: var(--color-warning-text, var(--color-warning));
 }
 
 /* ---- Run state on the edges ------------------------------------------- */
 
 /* Lines already walked keep a quiet success stroke for the rest of the run. */
-.cn-flow-detail[data-v-05e8747a] .vue-flow__edge.cn-flow-detail__edge--run-traced .vue-flow__edge-path,
-.cn-flow-detail[data-v-05e8747a] .vue-flow__edge.cn-flow-detail__edge--run-tracing .vue-flow__edge-path {
+.cn-flow-detail[data-v-0226122e] .vue-flow__edge.cn-flow-detail__edge--run-traced .vue-flow__edge-path,
+.cn-flow-detail[data-v-0226122e] .vue-flow__edge.cn-flow-detail__edge--run-tracing .vue-flow__edge-path {
 	stroke: var(--color-success);
 }
 
@@ -40756,13 +41097,13 @@ to {
    for the hop being animated: denser, thicker, faster, and in the success
    colour. When the hop ends the class leaves and the pulse returns to its
    quiet self. */
-.cn-flow-detail[data-v-05e8747a] .vue-flow__edge.cn-flow-detail__edge--run-tracing .cn-flow-edge__pulse {
+.cn-flow-detail[data-v-0226122e] .vue-flow__edge.cn-flow-detail__edge--run-tracing .cn-flow-edge__pulse {
 	stroke: var(--color-success);
 	stroke-width: 4;
 	stroke-dasharray: 10 22;
-	animation: cn-flow-detail-run-trace-05e8747a 0.4s linear infinite;
+	animation: cn-flow-detail-run-trace-0226122e 0.4s linear infinite;
 }
-@keyframes cn-flow-detail-run-trace-05e8747a {
+@keyframes cn-flow-detail-run-trace-0226122e {
 from {
 		stroke-dashoffset: 32;
 }
@@ -40777,8 +41118,8 @@ to {
    CnFlowEdge already hides its pulse path entirely under this query, which
    takes the trace's travel with it. */
 @media (prefers-reduced-motion: reduce) {
-.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-active),
-	.cn-flow-detail[data-v-05e8747a] .cn-flow-node:has(.cn-flow-detail__node--run-hold) {
+.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-active),
+	.cn-flow-detail[data-v-0226122e] .cn-flow-node:has(.cn-flow-detail__node--run-hold) {
 		animation: none;
 }
 }
@@ -48916,7 +49257,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 
 
 /* The board page's padding, so the title stands where every board page puts it (DqFlow). */
-.cn-flow-board[data-v-d3a5e726] {
+.cn-flow-board[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -48924,53 +49265,55 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	min-height: 100%;
 	box-sizing: border-box;
 }
-.cn-flow-board__header[data-v-d3a5e726] {
+.cn-flow-board__header[data-v-4510ff10] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
 }
-.cn-flow-board__heading[data-v-d3a5e726] {
+.cn-flow-board__heading[data-v-4510ff10] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	min-width: 0;
 }
-.cn-flow-board__title[data-v-d3a5e726] {
+.cn-flow-board__title[data-v-4510ff10] {
 	margin: 0;
 	font-size: 24px;
 	font-weight: 600;
 }
-.cn-flow-board__actions[data-v-d3a5e726] {
+.cn-flow-board__actions[data-v-4510ff10] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-flow-board__test-intro[data-v-d3a5e726] {
+.cn-flow-board__test-intro[data-v-4510ff10] {
 	margin: 0 0 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__path[data-v-d3a5e726] {
+.cn-flow-board__path[data-v-4510ff10] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__crumb[data-v-d3a5e726] {
+.cn-flow-board__crumb[data-v-4510ff10] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-flow-board__body[data-v-d3a5e726] {
+.cn-flow-board__body[data-v-4510ff10] {
 	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-d3a5e726] {
-	grid-template-columns: 240px minmax(0, 1fr) 340px;
+
+/* Palette, canvas and inspector at 220 / rest / 280 (DqFlow). */
+.cn-flow-board--with-palette .cn-flow-board__body[data-v-4510ff10] {
+	grid-template-columns: 220px minmax(0, 1fr) 280px;
 }
-.cn-flow-board__card[data-v-d3a5e726] {
+.cn-flow-board__card[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -48980,34 +49323,40 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: 12px;
 	background: var(--color-main-background);
 }
-.cn-flow-board__canvas[data-v-d3a5e726] {
+
+/* The canvas is the white card with the dot grid; the palette beside it sits
+   on the page ground (DqFlow). */
+.cn-flow-board__canvas[data-v-4510ff10] {
 	padding: 0;
 	overflow: hidden;
-	background-color: var(--color-background-hover);
-	background-image: radial-gradient(var(--color-border-dark) 1px, transparent 1px);
+	background-color: var(--color-main-background);
+	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
 	background-size: 16px 16px;
 }
-.cn-flow-board__canvas[data-v-d3a5e726] > :first-child {
+.cn-flow-board__palette[data-v-4510ff10] {
+	gap: 14px;
+	padding: 14px;
+	background: transparent;
+}
+.cn-flow-board__canvas[data-v-4510ff10] > :first-child {
 	flex: 1 1 auto;
 	min-height: 0;
 }
-.cn-flow-board__card-title[data-v-d3a5e726] {
+.cn-flow-board__card-title[data-v-4510ff10] {
 	margin: 0;
 	font-size: 16px;
 	font-weight: 600;
 }
-.cn-flow-board__subtitle[data-v-d3a5e726] {
+.cn-flow-board__subtitle[data-v-4510ff10] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	font-weight: 600;
 }
-.cn-flow-board__eyebrow[data-v-d3a5e726] {
-	margin: 0;
-	color: var(--color-text-maxcontrast);
-	font-size: 13px;
+.cn-flow-board__step-type[data-v-4510ff10] {
+	align-self: flex-start;
 }
-.cn-flow-board__validity[data-v-d3a5e726],
-.cn-flow-board__legend[data-v-d3a5e726] {
+.cn-flow-board__validity[data-v-4510ff10],
+.cn-flow-board__legend[data-v-4510ff10] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -49016,30 +49365,34 @@ 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-d3a5e726] {
+.cn-flow-board__validity--success[data-v-4510ff10] {
 	color: var(--color-success-text);
 }
-.cn-flow-board__validity--warning[data-v-d3a5e726] {
+.cn-flow-board__validity--warning[data-v-4510ff10] {
 	color: var(--color-warning-text);
 }
-.cn-flow-board__validity--error[data-v-d3a5e726] {
+.cn-flow-board__validity--error[data-v-4510ff10] {
 	color: var(--color-error-text);
 }
-.cn-flow-board__palette-group[data-v-d3a5e726] {
+.cn-flow-board__palette-group[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: 6px;
 }
-.cn-flow-board__palette-app[data-v-d3a5e726] {
+
+/* The providing app as a small caps label, no title row above the groups. */
+.cn-flow-board__palette-app[data-v-4510ff10] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
-	font-size: 13px;
+	font-size: 12px;
 	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
 }
-.cn-flow-board__palette-list[data-v-d3a5e726] {
+.cn-flow-board__palette-list[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: 6px;
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -49047,33 +49400,34 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 
 /* A step is a plain 400 label (DqFlow "Status zetten"); the nldesign theme
    sets every button's weight with `!important` through its token. */
-.cn-flow-board__palette-step[data-v-d3a5e726] {
+.cn-flow-board__palette-step[data-v-4510ff10] {
 	--nldesign-component-button-font-weight: 400;
 	width: 100%;
 	min-height: 34px;
-	padding: 6px 10px;
+	padding: 8px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 8px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
+	font-size: 14px;
 	font-weight: 400;
 	text-align: start;
 	cursor: pointer;
 }
-.cn-flow-board__palette-step[data-v-d3a5e726]:hover {
+.cn-flow-board__palette-step[data-v-4510ff10]:hover {
 	background: var(--color-background-hover);
 }
-.cn-flow-board__palette-note[data-v-d3a5e726] {
+.cn-flow-board__palette-note[data-v-4510ff10] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-flow-board__tabs[data-v-d3a5e726] {
+.cn-flow-board__tabs[data-v-4510ff10] {
 	display: flex;
 	gap: 4px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-flow-board__tab[data-v-d3a5e726] {
+.cn-flow-board__tab[data-v-4510ff10] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -49085,12 +49439,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: var(--color-main-text);
 	cursor: pointer;
 }
-.cn-flow-board__tab--active[data-v-d3a5e726] {
+.cn-flow-board__tab--active[data-v-4510ff10] {
 	border-color: var(--color-border);
 	border-bottom-color: var(--color-main-background);
 	font-weight: 600;
 }
-.cn-flow-board__tab-count[data-v-d3a5e726] {
+.cn-flow-board__tab-count[data-v-4510ff10] {
 	min-width: 18px;
 	padding: 0 5px;
 	border-radius: 9px;
@@ -49099,44 +49453,44 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	line-height: 18px;
 	text-align: center;
 }
-.cn-flow-board__settings[data-v-d3a5e726] {
+.cn-flow-board__settings[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
 	margin: 0;
 }
-.cn-flow-board__setting dt[data-v-d3a5e726] {
+.cn-flow-board__setting dt[data-v-4510ff10] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__setting dd[data-v-d3a5e726] {
+.cn-flow-board__setting dd[data-v-4510ff10] {
 	margin: 2px 0 0;
 	font-weight: 600;
 	overflow-wrap: anywhere;
 }
-.cn-flow-board__inspector-empty[data-v-d3a5e726] {
+.cn-flow-board__inspector-empty[data-v-4510ff10] {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-flow-board__inspector-empty p[data-v-d3a5e726] {
+.cn-flow-board__inspector-empty p[data-v-4510ff10] {
 	margin: 0;
 }
-.cn-flow-board__step-actions[data-v-d3a5e726],
-.cn-flow-board__step-footer[data-v-d3a5e726] {
+.cn-flow-board__step-actions[data-v-4510ff10],
+.cn-flow-board__step-footer[data-v-4510ff10] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-flow-board__step-footer[data-v-d3a5e726] {
+.cn-flow-board__step-footer[data-v-4510ff10] {
 	justify-content: space-between;
 	margin-top: auto;
 }
 @media (max-width: 1024px) {
-.cn-flow-board__body[data-v-d3a5e726],
-	.cn-flow-board--with-palette .cn-flow-board__body[data-v-d3a5e726] {
+.cn-flow-board__body[data-v-4510ff10],
+	.cn-flow-board--with-palette .cn-flow-board__body[data-v-4510ff10] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }