@conduction/nextcloud-vue 2.122.0 → 2.123.0

package/dist/esm/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
@@ -1704,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;
@@ -1749,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
@@ -1766,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") -- */
@@ -3169,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;
@@ -4145,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 {
@@ -8558,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
@@ -9283,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;
@@ -9294,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;
@@ -9323,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 {
@@ -12398,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
@@ -12420,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
@@ -12439,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;
 }
 
@@ -12454,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;
@@ -12479,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;
@@ -12494,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;
@@ -12611,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;
@@ -12638,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);
@@ -12667,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);
@@ -12677,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);
@@ -12687,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);
@@ -12697,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);
 }
 
@@ -20074,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;
@@ -20082,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;
@@ -20115,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;
@@ -20125,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;
@@ -20139,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;
 }
@@ -20154,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;
@@ -20168,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;
@@ -20210,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;
@@ -20238,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;
@@ -20277,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;
@@ -20325,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;
@@ -20338,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;
@@ -20368,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;
@@ -20421,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);
@@ -20463,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;
@@ -20507,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);
@@ -20517,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;
@@ -20530,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;
 }
 
 
@@ -29996,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;
@@ -30015,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;
@@ -30036,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;
 }
 
@@ -34764,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);
@@ -34775,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;
 }
@@ -34812,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;
 }
@@ -37671,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;
@@ -37693,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__muted[data-v-7e3434fc] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-attention-flag__due[data-v-21e92a64] {
+.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));
 }
@@ -40640,7 +40832,7 @@ to {
 }
 
 
-.cn-flow-detail[data-v-05e8747a] {
+.cn-flow-detail[data-v-0226122e] {
 	position: relative;
 	block-size: 100%;
 	inline-size: 100%;
@@ -40653,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;
@@ -40674,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;
@@ -40706,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;
@@ -40760,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);
 }
 
@@ -40779,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;
@@ -40823,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;
@@ -40858,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);
@@ -40869,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;
@@ -40879,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);
 }
 
@@ -40905,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;
 }
@@ -40926,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;
 }
 }
@@ -49065,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;
@@ -49073,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;
@@ -49129,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;
@@ -49165,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;
@@ -49196,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;
@@ -49234,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;
@@ -49248,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);
 }
 }