@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/dist/nextcloud-vue.css

@@ -503,9 +503,20 @@
 	align-items: start;
 }
 
-/* The card: a section of the shell, or a CnSettingsCard of the page. */
+/* An app component that wraps its sections in one element (decidiq's
+   Settings.vue) takes no box of its own: its sections are grid items and
+   cards, as if the shell held them directly. Only an element whose own
+   children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
+	display: contents;
+}
+
+/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
 	box-sizing: border-box;
 	display: flex;
@@ -532,7 +543,12 @@
 	display: none;
 }
 
+/* NcSettingsSection draws its name `display: inline-flex; justify-content:
+   center`; in the card's flex column the name spans the card, so the title
+   sat centred. The board's card titles start at the left edge. */
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name {
+	justify-content: flex-start;
+	text-align: start;
 	margin: 0;
 	font-size: 19px;
 	font-weight: 700;
@@ -667,6 +683,18 @@
 	font-weight: 600;
 }
 
+/* ---- Dashboard card titles --------------------------------------------- */
+/* A card's title on a dashboard (and on the widgets under a reports page) is
+   the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
+   the app dashboards; `--cn-board-heading-size`, as on a detail page's cards).
+   The wrapper's own 14px weight 600 stays for the Nextcloud look, and the
+   native-dashboard chrome keeps its 20px. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
+	font-size: var(--cn-board-heading-size, 17px);
+	font-weight: 700;
+	line-height: 1.3;
+}
+
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
 /* The dashboard's card body is flush, so the rows carry their own inset: the
    board's card pads 24px at the sides and each row 14px, a soft hairline
@@ -734,6 +762,21 @@
 	margin-inline-start: auto;
 }
 
+/* The title and meta take the room the pill and the date leave, and a long
+   title wraps inside it: the pill and the date stay on the title line, as the
+   board draws them. They drop under the text only when the card is too narrow
+   to hold 240px of text beside them (PqMijnWerk). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__main {
+	flex: 1 1 240px;
+}
+
+/* ---- Saved views on a dashboard card (PqMijnWerk) ------------------------ */
+/* The card body is flush, so the list and its empty line carry the card's
+   inset themselves, the same 24px at the sides as a record list. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-saved-views-widget {
+	padding: 4px 24px 20px;
+}
+
 /* The board draws no chevron after the pill and date. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
@@ -1126,6 +1169,20 @@
 .cn-look-board .cn-form-page__footer .cn-form-page__primary {
 	margin-inline-start: auto;
 }
+
+/* A Nextcloud text area or text field with its label inside the field hides
+   its placeholder until the field takes focus, so the label and the
+   placeholder are never drawn over each other. A theme that forces every
+   placeholder visible (thematiq's nldesign system sets
+   `::placeholder { opacity: 1 !important }`) drew both: the dossiq DqTaak
+   notes field read "Een notitie toevoegen" over "Wat heb je gevonden, wie heb
+   je gebeld?". Under the board look the placeholder stays hidden at rest, as
+   Nextcloud intends; a field with its label outside keeps its placeholder.
+   @spec openspec/changes/board-field-label-over-placeholder/specs/form-field-board-look/spec.md#requirement-a-field-label-and-its-placeholder-are-never-drawn-over-each-other */
+.cn-look-board .textarea__input:not(:focus, .textarea__input--label-outside)::placeholder,
+.cn-look-board .input-field:not(.input-field--label-outside) .input-field__input:not(:focus)::placeholder {
+	opacity: 0 !important;
+}
 /*
  * The board (screens-kanban-parity, canon section 8).
  *
@@ -4145,6 +4202,7 @@ a.cn-kpi-card--board * {
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -4166,6 +4224,16 @@ a.cn-kpi-card--board * {
 	color: var(--color-error);
 	margin: 0;
 }
+
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}
 /* ========================================
    @conduction/nextcloud-vue — Detail Grid & Layout Utility Styles
    ======================================== */
@@ -4992,6 +5060,17 @@ a.cn-kpi-card--board * {
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* A group heading in the header's Actions menu (`{ heading }` in items), as
+   the board's "Ga naar" and "Selectie": 12px bold capitals, muted. The menu
+   is a popover outside the page, so the class is not under the look class. */
+.cn-index-header-menu__heading {
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The board's header buttons (`headerButtons`) at the end of the title row,
    centred on the title and its count line. They wrap under the title on a
    narrow page. */
@@ -6927,6 +7006,181 @@ a.cn-kpi-card--board * {
 .cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
 	display: none;
 }
+/*
+ * The reports page under the board look (screens-reports-page-board-look,
+ * board DcRapportages): a 28px title over a muted lead, one section per
+ * category headed at 18px, and two-up cards with an icon tile. Scoped under
+ * `.cn-look-board` with the page guard, so an app without the look renders as
+ * before.
+ */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap);
+	padding: var(--cn-board-content-padding);
+	max-width: var(--cn-board-content-max-width);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 4px 0 8px;
+}
+
+/* The 56px inset clears the navigation toggle only while the navigation is
+   closed, as on the other board pages. */
+.cn-look-board:has(.app-navigation--closed) .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	padding-inline-start: 56px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__title {
+	margin: 0;
+	font-size: 28px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__description {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	/* A host's own `section` rule (a width cap, a margin) does not reach it. */
+	max-width: none;
+	margin: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section-title {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__grid {
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 14px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card {
+	box-sizing: border-box;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 14px;
+	padding: 18px 20px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:hover,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-icon {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 10px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-text {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-title {
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-description {
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The widgets under the cards sit in the page's own padding: the dashboard
+   inside draws no second frame. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	margin-top: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
+	padding: 0;
+}
+
+/* The widget area draws no panel of its own (board DcRapportages: the
+   highlighted report's card sits straight on the page ground). A theme's
+   catch-all for anything named like a widget (nldesign's element overrides:
+   `[class*="widget"]:not([class*="widget__"]):not(#header *)`, an id
+   specificity no class rule outranks) painted `__widgets` white, hence the
+   `!important`. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	background: transparent !important;
+}
+
+/* The grid insets every card by its 12px margin (CnDashboardPage's default
+   `gridMargin`); the page padding already places the area, so the card's
+   edges line up with the report cards above it. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets .cn-dashboard-grid {
+	width: calc(100% + 24px);
+	margin: -12px;
+}
+
+/* A report card is a link, but its title and description read as text, as on
+   the board: no underline, whatever a theme does to links. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card * {
+	text-decoration: none !important;
+}
+
+/* The header buttons beside the title (screens-reports-header-buttons, board
+   DcRapportages "Downloaden"): the board's 40px button with a grey border on
+   the main background, the primary one in the primary fill, as on the index
+   header. `!important` holds them under a theme that restyles every button
+   (nldesign). The buildiq square keeps its own rule. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -8847,10 +9101,10 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-countdown-widget__value[data-v-17598258] {
+.cn-countdown-widget__value[data-v-5546e71c] {
 	white-space: nowrap;
 }
-.cn-countdown-widget__sub[data-v-17598258] {
+.cn-countdown-widget__sub[data-v-5546e71c] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 }
@@ -12319,41 +12573,41 @@ a.cn-analytics-card__title[data-v-f3ca7b06]:hover {
 }
 
 
-.cn-audit-card__list[data-v-b6134724] {
+.cn-audit-card__list[data-v-280a5ace] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
-.cn-audit-card__row[data-v-b6134724] {
+.cn-audit-card__row[data-v-280a5ace] {
 	padding: 6px 0;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-audit-card__row[data-v-b6134724]:last-child {
+.cn-audit-card__row[data-v-280a5ace]:last-child {
 	border-bottom: none;
 }
-.cn-audit-card__row-head[data-v-b6134724] {
+.cn-audit-card__row-head[data-v-280a5ace] {
 	display: flex;
 	justify-content: space-between;
 	gap: 8px;
 }
-.cn-audit-card__action[data-v-b6134724] {
+.cn-audit-card__action[data-v-280a5ace] {
 	color: var(--color-main-text);
 }
-.cn-audit-card__when[data-v-b6134724] {
+.cn-audit-card__when[data-v-280a5ace] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 	white-space: nowrap;
 }
-.cn-audit-card__row-body[data-v-b6134724] {
+.cn-audit-card__row-body[data-v-280a5ace] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-audit-card__empty[data-v-b6134724] {
+.cn-audit-card__empty[data-v-280a5ace] {
 	color: var(--color-text-maxcontrast);
 	text-align: center;
 	padding: 12px 0;
 }
-.cn-audit-card__show-all[data-v-b6134724] {
+.cn-audit-card__show-all[data-v-280a5ace] {
 	background: none;
 	border: none;
 	color: var(--color-primary-element);
@@ -12361,7 +12615,7 @@ a.cn-analytics-card__title[data-v-f3ca7b06]:hover {
 	padding: 4px 0;
 	font: inherit;
 }
-.cn-audit-card__show-all[data-v-b6134724]:hover {
+.cn-audit-card__show-all[data-v-280a5ace]:hover {
 	text-decoration: underline;
 }
 
@@ -21062,22 +21316,22 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 
-.cn-transition-input[data-v-ac83f832] {
+.cn-transition-input[data-v-457532e4] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	padding: 4px 0;
 }
-.cn-transition-input__error[data-v-ac83f832] {
+.cn-transition-input__error[data-v-457532e4] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-transition-input__field-error[data-v-ac83f832] {
+.cn-transition-input__field-error[data-v-457532e4] {
 	margin: 4px 0 0;
 	font-size: 0.9em;
 	color: var(--color-error-text, var(--color-error));
 }
-.cn-transition-input__object[data-v-ac83f832] {
+.cn-transition-input__object[data-v-457532e4] {
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius);
 	padding: 8px 12px;
@@ -21085,11 +21339,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	flex-direction: column;
 	gap: 8px;
 }
-.cn-transition-input__label[data-v-ac83f832] {
+.cn-transition-input__label[data-v-457532e4] {
 	display: block;
 	margin-bottom: 4px;
 }
-.cn-transition-input__field--refused[data-v-ac83f832] {
+.cn-transition-input__field--refused[data-v-457532e4] {
 	border-inline-start: 2px solid var(--color-error);
 	padding-inline-start: 8px;
 }
@@ -21431,7 +21685,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 
-.cn-stages-widget[data-v-a394760a] {
+.cn-stages-widget[data-v-3946def5] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -21441,12 +21695,19 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	   tile rather than a strip of 32px circles. */
 	padding: 4px;
 }
-.cn-stages-widget__loading[data-v-a394760a] {
+.cn-stages-widget__loading[data-v-3946def5] {
 	display: flex;
 	justify-content: center;
 	padding: 8px 0;
 }
-.cn-stages-widget__notice[data-v-a394760a] {
+
+/* The stage a running move leads to: a small spinner before its label. */
+.cn-stages-widget__moving[data-v-3946def5] {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 4px;
+}
+.cn-stages-widget__notice[data-v-3946def5] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
@@ -21455,7 +21716,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    REFUSALS no longer come through here: they are a tooltip, a note card and a
    screen-reader node, which is why there is no colour variant of this rule.
    The rules for the two coloured states are NcNoteCard's own. */
-.cn-stages-widget__reason[data-v-a394760a] {
+.cn-stages-widget__reason[data-v-3946def5] {
 	display: block;
 	margin-top: 2px;
 	font-size: 0.8em;
@@ -21466,7 +21727,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 /* The bars variant: equal columns, a thin bar per step. Theme hooks:
    --cn-stages-bar-height, --cn-stages-bar-radius, --cn-stages-bar-done,
    --cn-stages-bar-current, --cn-stages-bar-todo. */
-.cn-stages-widget__bars[data-v-a394760a] {
+.cn-stages-widget__bars[data-v-3946def5] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 	grid-auto-flow: column;
@@ -21475,25 +21736,25 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-stages-widget__bar-step[data-v-a394760a] {
+.cn-stages-widget__bar-step[data-v-3946def5] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-stages-widget__bar[data-v-a394760a] {
+.cn-stages-widget__bar[data-v-3946def5] {
 	display: block;
 	height: var(--cn-stages-bar-height, 6px);
 	border-radius: var(--cn-stages-bar-radius, 3px);
 	background: var(--cn-stages-bar-todo, var(--color-border));
 }
-.cn-stages-widget__bar-step--done .cn-stages-widget__bar[data-v-a394760a] {
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar[data-v-3946def5] {
 	background: var(--cn-stages-bar-done, var(--color-primary-element));
 }
-.cn-stages-widget__bar-step--current .cn-stages-widget__bar[data-v-a394760a] {
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar[data-v-3946def5] {
 	background: var(--cn-stages-bar-current, var(--color-error));
 }
-.cn-stages-widget__bar-label[data-v-a394760a] {
+.cn-stages-widget__bar-label[data-v-3946def5] {
 	display: block;
 	margin: 0;
 	padding: 0;
@@ -21514,7 +21775,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    about 12px below the current one, which is a <span>. Zeroed here so all
    labels sit 8px under their bar, as the board draws them. The visually
    hidden "(current step)" is absolutely positioned and takes no space. */
-button.cn-stages-widget__bar-label[data-v-a394760a] {
+button.cn-stages-widget__bar-label[data-v-3946def5] {
 	min-height: 0;
 	height: auto;
 	line-height: inherit;
@@ -21530,7 +21791,7 @@ button.cn-stages-widget__bar-label[data-v-a394760a] {
    of ending in an ellipsis. Only !important beats !important; this selector is
    the more specific of the two. Without such a theme nothing changes: these
    are the values the base rule already sets. */
-button.cn-stages-widget__bar-label.cn-stages-widget__bar-label[data-v-a394760a] {
+button.cn-stages-widget__bar-label.cn-stages-widget__bar-label[data-v-3946def5] {
 	min-width: 0 !important;
 	margin: 0 !important;
 	padding: 0 !important;
@@ -21539,29 +21800,29 @@ button.cn-stages-widget__bar-label.cn-stages-widget__bar-label[data-v-a394760a]
 	text-overflow: ellipsis !important;
 	white-space: nowrap !important;
 }
-button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-a394760a] {
+button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-3946def5] {
 	cursor: not-allowed;
 }
-button.cn-stages-widget__bar-label[data-v-a394760a]:focus-visible {
+button.cn-stages-widget__bar-label[data-v-3946def5]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-small, 4px);
 }
-.cn-stages-widget__bar-step--done .cn-stages-widget__bar-label[data-v-a394760a] {
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar-label[data-v-3946def5] {
 	color: var(--color-main-text);
 	font-weight: 600;
 }
-.cn-stages-widget__bar-step--current .cn-stages-widget__bar-label[data-v-a394760a] {
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar-label[data-v-3946def5] {
 	color: var(--color-main-text);
 	font-weight: 700;
 }
-.cn-stages-widget__bar-date[data-v-a394760a] {
+.cn-stages-widget__bar-date[data-v-3946def5] {
 	font-size: 12px;
 	color: var(--color-text-maxcontrast);
 }
 
 /* Text for screen readers only. */
-.cn-stages-widget__sr-only[data-v-a394760a] {
+.cn-stages-widget__sr-only[data-v-3946def5] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -22339,6 +22600,214 @@ a.cn-kpi-card--board * {
 .cn-stats-block__breakdown-value--published[data-v-770aba44] { color: var(--color-element-success);
 }
 
+/* ========================================
+   @conduction/nextcloud-vue — Status Badge
+   ======================================== */
+
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
+.cn-status-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(0.5 * var(--default-grid-baseline));
+	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
+	border-radius: var(--border-radius-pill);
+	font-size: 0.85em;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+/* Size variants */
+.cn-status-badge--small {
+	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	font-size: 0.75em;
+}
+
+/* Color variants */
+.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--primary {
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element);
+}
+
+.cn-status-badge--success {
+	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	color: var(--color-success-text, var(--color-success));
+}
+
+.cn-status-badge--warning {
+	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	color: var(--color-warning-text, var(--color-warning));
+}
+
+.cn-status-badge--error {
+	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	color: var(--color-error-text, var(--color-error));
+}
+
+.cn-status-badge--info {
+	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	color: var(--color-info-text, var(--color-info, #0082c9));
+}
+
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
+/* Solid variants — solid background with white text for use on colored backgrounds */
+.cn-status-badge--solid.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--primary {
+	background-color: var(--color-primary-element);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--success {
+	background-color: var(--color-success);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--warning {
+	background-color: var(--color-warning);
+	color: var(--color-primary-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--error {
+	background-color: var(--color-error);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--info {
+	background-color: var(--color-info, #0082c9);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}
+
+
+/*
+ * The card itself — its box, body stack, icon circle, title and value
+ * typography — is the CANONICAL KPI card in src/css/kpi-card.css, shared with
+ * CnStatsBlock. What remains here is only what is specific to THIS widget: the
+ * range select, the "/ limit" denominator, the trend chip and the error glyph.
+ *
+ * Every size below is expressed against the shared `--cn-kpi-*` scale rather
+ * than as its own number, so the widget's extras re-scale with the card they
+ * sit in. Resist adding card styling back, and resist restating a value the
+ * scale already holds; that is what split the two KPI looks apart in the first
+ * place.
+ */
+
+/* The title row carries an optional range select beside the label, which the
+   canonical `__title` (a plain truncating heading) does not account for. */
+.cn-stat-widget__label[data-v-6f90b30c] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	width: 100%;
+}
+
+/* Stacked tile: the label and its range select centre over the number rather
+   than spreading to the card's edges. */
+.cn-kpi-card--vertical .cn-stat-widget__label[data-v-6f90b30c] {
+	justify-content: center;
+	width: auto;
+}
+
+/* Sized down to sit inside the label row without pushing the tile taller —
+   the tile's height is fixed by its grid cell (ADR-062). */
+.cn-stat-widget__range[data-v-6f90b30c] {
+	flex: 0 0 auto;
+	max-width: 50%;
+	padding: 0 4px;
+	border: none;
+	border-radius: var(--border-radius);
+	background: transparent;
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: normal;
+	cursor: pointer;
+}
+.cn-stat-widget__range[data-v-6f90b30c]:hover,
+.cn-stat-widget__range[data-v-6f90b30c]:focus-visible {
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+/* Badge mode: the pill takes the value's place in the row. Sized to the
+   card's label scale so it sits in the row without pushing the tile taller. */
+.cn-stat-widget__badge[data-v-6f90b30c] {
+	flex: 0 1 auto;
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: var(--cn-kpi-label-size, 13px);
+}
+
+/* The denominator of a "value / limit" pair. Deliberately quieter and smaller
+   than the value: the tile's subject is what the number IS, not what it is
+   allowed to reach. Shares the value's `nowrap` so the pair never breaks. */
+.cn-stat-widget__limit[data-v-6f90b30c] {
+	flex: 0 0 auto;
+	font-size: var(--cn-kpi-value-size-compact, 1.25rem);
+	font-weight: var(--cn-kpi-title-weight, 600);
+	line-height: var(--cn-kpi-value-line, 1.1);
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+	white-space: nowrap;
+}
+.cn-stat-widget__trend[data-v-6f90b30c] {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: var(--cn-kpi-title-weight, 600);
+}
+
+/* The dash shown when the number could not be fetched. It stands where the
+   value stands, so it takes the value's size and weight — CnStatsBlock's own
+   error dash is literally a `cn-kpi-card__value`, and two components showing
+   the same failure at two different sizes is the drift this consolidation
+   exists to remove. Only the colour differs: a failure is not a number. */
+.cn-stat-widget__error[data-v-6f90b30c] {
+	font-size: var(--cn-kpi-value-size, 2rem);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: var(--cn-kpi-value-line, 1.1);
+	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
+}
+
 
 /*
  * This widget draws no KPI of its own — every tile it shows is a CnStatsBlock,
@@ -22372,67 +22841,97 @@ a.cn-kpi-card--board * {
  * modes render this root, so both collapse. The bug was found on a
  * single-entry stats-block.
  */
-.cn-stats-block-widget[data-v-75d3ad28] {
+.cn-stats-block-widget[data-v-4341e971] {
 	flex: 1 1 auto;
 	min-width: 0;
 	width: 100%;
 }
-.cn-stats-block-widget--multi[data-v-75d3ad28] {
+.cn-stats-block-widget--multi[data-v-4341e971] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--cn-kpi-stack-gap, 12px);
 }
 
 /* Rows layout: the board's "label left, number right" card body. */
-.cn-stats-block-widget--rows[data-v-75d3ad28] {
+.cn-stats-block-widget--rows[data-v-4341e971] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	box-sizing: border-box;
 	padding: 20px 22px;
 }
-.cn-stats-block-widget__rows-title[data-v-75d3ad28] {
+.cn-stats-block-widget__rows-title[data-v-4341e971] {
 	margin: 0;
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-stats-block-widget__rows[data-v-75d3ad28] {
+
+/* `width: 100%` plus this padding overflowed the card by 48px: the last
+   column ran past the card's right edge (visible once the tiles have a box). */
+.cn-stats-block-widget--grid[data-v-4341e971] {
+	box-sizing: border-box;
+	padding: 4px 24px 20px;
+}
+.cn-stats-block-widget__grid[data-v-4341e971] {
+	display: grid;
+	grid-template-columns: repeat(var(--cn-stats-block-columns, 2), minmax(0, 1fr));
+	gap: 16px 20px;
+}
+
+/* A tile in the grid is a part of the card, not a card: no box, no inset. */
+.cn-stats-block-widget__grid-stat[data-v-4341e971] {
+	padding: 0;
+	min-width: 0;
+}
+
+/* `tiles: "box"`: each tile on a grey ground of its own (board DcRapportages,
+   "Vergaderingen en efficiëntie"), 12px apart. */
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid[data-v-4341e971] {
+	gap: 12px;
+}
+.cn-stats-block-widget--tiles-box .cn-stats-block-widget__grid-stat[data-v-4341e971] {
+	box-sizing: border-box;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--color-background-hover);
+}
+.cn-stats-block-widget__rows[data-v-4341e971] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	margin: 0;
 	font-size: 14px;
 }
-.cn-stats-block-widget__row[data-v-75d3ad28] {
+.cn-stats-block-widget__row[data-v-4341e971] {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
 	gap: 16px;
 }
-.cn-stats-block-widget__row-label[data-v-75d3ad28] {
+.cn-stats-block-widget__row-label[data-v-4341e971] {
 	min-width: 0;
 	margin: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-stats-block-widget__row-value[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value[data-v-4341e971] {
 	flex: none;
 	margin: 0;
 	font-size: 17px;
 	font-weight: 700;
 	text-align: right;
 }
-.cn-stats-block-widget__row-value--success[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--success[data-v-4341e971] {
 	color: var(--color-text-success, var(--color-success-text));
 }
-.cn-stats-block-widget__row-value--warning[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--warning[data-v-4341e971] {
 	color: var(--color-text-warning, var(--color-warning-text));
 }
-.cn-stats-block-widget__row-value--error[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--error[data-v-4341e971] {
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-stats-block-widget__row-value--primary[data-v-75d3ad28] {
+.cn-stats-block-widget__row-value--primary[data-v-4341e971] {
 	color: var(--color-primary-element);
 }
 
@@ -22637,7 +23136,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-object-data-widget__image[data-v-59ab12e6] {
+.cn-object-data-widget__image[data-v-76edf75d] {
 	max-width: 100%;
 	max-height: 160px;
 	border-radius: 8px;
@@ -22645,33 +23144,33 @@ a.cn-kpi-card--board * {
 }
 
 /* Shimmering placeholder while a relation's display name resolves. */
-.cn-object-data-widget__skeleton[data-v-59ab12e6] {
+.cn-object-data-widget__skeleton[data-v-76edf75d] {
 	display: inline-block;
 	width: 90px;
 	height: 1em;
 	border-radius: 4px;
 	background: linear-gradient(90deg, var(--color-background-dark) 25%, var(--color-background-hover) 50%, var(--color-background-dark) 75%);
 	background-size: 200% 100%;
-	animation: cn-odw-shimmer-59ab12e6 1.2s ease-in-out infinite;
+	animation: cn-odw-shimmer-76edf75d 1.2s ease-in-out infinite;
 }
-@keyframes cn-odw-shimmer-59ab12e6 {
+@keyframes cn-odw-shimmer-76edf75d {
 from { background-position: 200% 0;
 }
 to { background-position: -200% 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.cn-object-data-widget__skeleton[data-v-59ab12e6] { animation: none;
+.cn-object-data-widget__skeleton[data-v-76edf75d] { animation: none;
 }
 }
-.cn-object-data-widget__grid[data-v-59ab12e6] {
+.cn-object-data-widget__grid[data-v-76edf75d] {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline, 4px)) calc(4 * var(--default-grid-baseline, 4px));
 }
-.cn-object-data-widget__toggle[data-v-59ab12e6] {
+.cn-object-data-widget__toggle[data-v-76edf75d] {
 	margin-top: 4px;
 }
-.cn-object-data-widget__cell[data-v-59ab12e6] {
+.cn-object-data-widget__cell[data-v-76edf75d] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -22679,12 +23178,12 @@ to { background-position: -200% 0;
 	border-bottom: 1px solid var(--color-border-dark);
 	min-width: 0;
 }
-.cn-object-data-widget__label[data-v-59ab12e6] {
+.cn-object-data-widget__label[data-v-76edf75d] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__value[data-v-59ab12e6] {
+.cn-object-data-widget__value[data-v-76edf75d] {
 	font-size: 1em;
 	color: var(--color-main-text);
 	overflow-wrap: anywhere;
@@ -22698,24 +23197,24 @@ to { background-position: -200% 0;
    which drew a horizontal scrollbar under every data widget in a tab (dossiq's
    case page, Data tab). The end padding drops by the same 4px so the text and
    the edit icon sit where they sat. */
-.cn-object-data-widget__value--editable[data-v-59ab12e6] {
+.cn-object-data-widget__value--editable[data-v-76edf75d] {
 	cursor: pointer;
 	border-radius: var(--border-radius);
 	padding: 4px 20px 4px 4px;
 	margin: -4px 0 -4px -4px;
 }
-.cn-object-data-widget__value--editable[data-v-59ab12e6]:hover {
+.cn-object-data-widget__value--editable[data-v-76edf75d]:hover {
 	background: var(--color-background-dark);
 }
-.cn-object-data-widget__value--editable[data-v-59ab12e6]:focus-visible {
+.cn-object-data-widget__value--editable[data-v-76edf75d]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-object-data-widget__value--empty[data-v-59ab12e6] {
+.cn-object-data-widget__value--empty[data-v-76edf75d] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
-.cn-object-data-widget__edit-icon[data-v-59ab12e6] {
+.cn-object-data-widget__edit-icon[data-v-76edf75d] {
 	position: absolute;
 	right: 4px;
 	top: 50%;
@@ -22724,21 +23223,21 @@ to { background-position: -200% 0;
 	opacity: 0;
 	transition: opacity 0.15s ease;
 }
-.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-59ab12e6],
-.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-59ab12e6] {
+.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-76edf75d],
+.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-76edf75d] {
 	opacity: 1;
 }
-.cn-object-data-widget__editor[data-v-59ab12e6] {
+.cn-object-data-widget__editor[data-v-76edf75d] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-object-data-widget__editor-actions[data-v-59ab12e6] {
+.cn-object-data-widget__editor-actions[data-v-76edf75d] {
 	display: flex;
 	gap: 2px;
 	justify-content: flex-end;
 }
-.cn-object-data-widget__textarea[data-v-59ab12e6] {
+.cn-object-data-widget__textarea[data-v-76edf75d] {
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -22750,11 +23249,11 @@ to { background-position: -200% 0;
 	font-size: inherit;
 	resize: vertical;
 }
-.cn-object-data-widget__textarea[data-v-59ab12e6]:focus {
+.cn-object-data-widget__textarea[data-v-76edf75d]:focus {
 	border-color: var(--color-primary-element);
 	outline: none;
 }
-.cn-object-data-widget__empty[data-v-59ab12e6] {
+.cn-object-data-widget__empty[data-v-76edf75d] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 	padding: calc(2 * var(--default-grid-baseline, 4px));
@@ -22762,16 +23261,16 @@ to { background-position: -200% 0;
 
 /* Compact inline table for array-of-objects values. Dense + unstyled-simple;
    fits the card and participates in the whole-row overflow handling. */
-.cn-object-data-widget__mini-table-wrap[data-v-59ab12e6] {
+.cn-object-data-widget__mini-table-wrap[data-v-76edf75d] {
 	max-width: 100%;
 }
-.cn-object-data-widget__mini-table[data-v-59ab12e6] {
+.cn-object-data-widget__mini-table[data-v-76edf75d] {
 	width: 100%;
 	border-collapse: collapse;
 	font-size: 0.9em;
 }
-.cn-object-data-widget__mini-table th[data-v-59ab12e6],
-.cn-object-data-widget__mini-table td[data-v-59ab12e6] {
+.cn-object-data-widget__mini-table th[data-v-76edf75d],
+.cn-object-data-widget__mini-table td[data-v-76edf75d] {
 	text-align: start;
 	padding: 2px 8px 2px 0;
 	border-bottom: 1px solid var(--color-border);
@@ -22782,23 +23281,23 @@ to { background-position: -200% 0;
 	   cell, and the card 8px wider than its cell (pipelinq's ticket page). */
 	white-space: normal;
 }
-.cn-object-data-widget__mini-table th[data-v-59ab12e6] {
+.cn-object-data-widget__mini-table th[data-v-76edf75d] {
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__more[data-v-59ab12e6] {
+.cn-object-data-widget__more[data-v-76edf75d] {
 	margin-top: 2px;
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
 
 /* Comma-less chip row for array-of-scalars values. */
-.cn-object-data-widget__chips[data-v-59ab12e6] {
+.cn-object-data-widget__chips[data-v-76edf75d] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 }
-.cn-object-data-widget__chip[data-v-59ab12e6] {
+.cn-object-data-widget__chip[data-v-76edf75d] {
 	padding: 1px 8px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -22806,27 +23305,27 @@ to { background-position: -200% 0;
 }
 
 /* Key: value definition list for a single plain-object value. */
-.cn-object-data-widget__deflist[data-v-59ab12e6] {
+.cn-object-data-widget__deflist[data-v-76edf75d] {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	gap: 2px 8px;
 	margin: 0;
 }
-.cn-object-data-widget__deflist dt[data-v-59ab12e6] {
+.cn-object-data-widget__deflist dt[data-v-76edf75d] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-object-data-widget__deflist dd[data-v-59ab12e6] {
+.cn-object-data-widget__deflist dd[data-v-76edf75d] {
 	margin: 0;
 	overflow-wrap: anywhere;
 }
 
 /* Responsive: collapse to single column on narrow widths */
 @media (max-width: 600px) {
-.cn-object-data-widget__grid[data-v-59ab12e6] {
+.cn-object-data-widget__grid[data-v-76edf75d] {
 		grid-template-columns: 1fr !important;
 }
-.cn-object-data-widget__cell[data-v-59ab12e6] {
+.cn-object-data-widget__cell[data-v-76edf75d] {
 		grid-column: span 1 !important;
 		grid-row: span 1 !important;
 }
@@ -24538,7 +25037,7 @@ button.cn-stepper__step[data-v-776581d4] {
 
 
 /* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
-.cn-tabs-widget__stack[data-v-9ccd8dee] {
+.cn-tabs-widget__stack[data-v-0ad78042] {
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
@@ -24547,19 +25046,19 @@ button.cn-stepper__step[data-v-776581d4] {
 /* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
    onto the next row, a row's cards as tall as the tallest. Narrow, it is the
    plain stack again. */
-.cn-tabs-widget__stack--grid[data-v-9ccd8dee] {
+.cn-tabs-widget__stack--grid[data-v-0ad78042] {
 	display: grid;
 	grid-template-columns: repeat(12, minmax(0, 1fr));
 	align-items: stretch;
 }
-.cn-tabs-widget__stack--grid[data-v-9ccd8dee] > * {
+.cn-tabs-widget__stack--grid[data-v-0ad78042] > * {
 	min-width: 0;
 }
 @media (max-width: 700px) {
-.cn-tabs-widget__stack--grid[data-v-9ccd8dee] {
+.cn-tabs-widget__stack--grid[data-v-0ad78042] {
 		grid-template-columns: minmax(0, 1fr);
 }
-.cn-tabs-widget__stack--grid[data-v-9ccd8dee] > * {
+.cn-tabs-widget__stack--grid[data-v-0ad78042] > * {
 		grid-column: auto !important;
 }
 }
@@ -24593,7 +25092,7 @@ button.cn-stepper__step[data-v-776581d4] {
    `!important` or on load order this library does not control. The same
    technique, for the same reason, is used on `.cn-tabs__nav .cn-tabs__nav-item`
    in CnTabs to beat Nextcloud's own button margin. */
-.cn-tabs-widget.cn-tabs-widget[data-v-9ccd8dee] {
+.cn-tabs-widget.cn-tabs-widget[data-v-0ad78042] {
 	background-color: transparent;
 	border: 0;
 	border-radius: 0;
@@ -24617,12 +25116,12 @@ button.cn-stepper__step[data-v-776581d4] {
    below it: the rule ran straight on to the widget's edge and read as a
    border sticking out past a rounded corner (Ruben, 2026-09-13). Ending it
    where the curve begins makes the rule and the curve one continuous edge. */
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tabs__bar {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tabs__bar {
 	border-bottom: none;
 	padding: 0;
 	position: relative;
 }
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tabs__bar::after {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tabs__bar::after {
 	border-bottom: 1px solid var(--color-border);
 	content: '';
 	inset-block-end: 0;
@@ -24635,11 +25134,11 @@ button.cn-stepper__step[data-v-776581d4] {
    own background-coloured bottom edge, which only works if it paints ABOVE the
    pseudo-element: a positioned pseudo-element otherwise paints over every
    in-flow sibling, rule included. */
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tabs__nav-item--active {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tabs__nav-item--active {
 	position: relative;
 	z-index: 1;
 }
-.cn-tabs-widget__tabs[data-v-9ccd8dee] {
+.cn-tabs-widget__tabs[data-v-0ad78042] {
 	display: flex;
 	flex-direction: column;
 	/* Grow to the widget's height, so the panel fills the grid cell the
@@ -24657,7 +25156,7 @@ button.cn-stepper__step[data-v-776581d4] {
    the open tab, but padding sits inside the painted box — only a margin would
    have opened that gap, and a zero top put every panel's content against the
    strip. */
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tabs__content {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tabs__content {
 	background-color: var(--color-main-background);
 	/* Three sides only: the bar's rule (redrawn above, stopping at the corner)
 	   is this sheet's top edge, and the open tab erases the slice of it
@@ -24677,7 +25176,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	overflow: auto;
 	padding: 12px;
 }
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tab {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tab {
 	height: 100%;
 }
 
@@ -24685,15 +25184,15 @@ button.cn-stepper__step[data-v-776581d4] {
    (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
    holds the list directly the footer stuck out 4px on the right and at the
    bottom and made the panel scroll. It bleeds exactly the panel's padding. */
-.cn-tabs-widget__tabs[data-v-9ccd8dee] .cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add {
+.cn-tabs-widget__tabs[data-v-0ad78042] .cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add {
 	margin: auto -12px -12px;
 }
-.cn-tabs-widget__title[data-v-9ccd8dee] {
+.cn-tabs-widget__title[data-v-0ad78042] {
 	align-items: center;
 	display: inline-flex;
 	gap: 6px;
 }
-.cn-tabs-widget__title-icon[data-v-9ccd8dee] {
+.cn-tabs-widget__title-icon[data-v-0ad78042] {
 	flex: 0 0 auto;
 }
 
@@ -28066,214 +28565,6 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 	background: transparent;
 }
 
-/* ========================================
-   @conduction/nextcloud-vue — Status Badge
-   ======================================== */
-
-/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
-:root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
-}
-
-.cn-status-badge {
-	display: inline-flex;
-	align-items: center;
-	gap: calc(0.5 * var(--default-grid-baseline));
-	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
-	border-radius: var(--border-radius-pill);
-	font-size: 0.85em;
-	font-weight: 500;
-	line-height: 1.4;
-	white-space: nowrap;
-}
-
-/* Size variants */
-.cn-status-badge--small {
-	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
-	font-size: 0.75em;
-}
-
-/* Color variants */
-.cn-status-badge--default {
-	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
-}
-
-.cn-status-badge--primary {
-	background-color: var(--color-primary-element-light);
-	color: var(--color-primary-element);
-}
-
-.cn-status-badge--success {
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success-text, var(--color-success));
-}
-
-.cn-status-badge--warning {
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
-}
-
-.cn-status-badge--error {
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error-text, var(--color-error));
-}
-
-.cn-status-badge--info {
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info-text, var(--color-info, #0082c9));
-}
-
-/* Work in progress ("In behandeling"), a board tone. */
-.cn-status-badge--purple {
-	background-color: var(--cn-status-purple-bg);
-	color: var(--cn-status-purple-text);
-}
-
-/* Handed on ("Omgezet naar een zaak"), a board tone. */
-.cn-status-badge--teal {
-	background-color: var(--cn-status-teal-bg);
-	color: var(--cn-status-teal-text);
-}
-
-/* Solid variants — solid background with white text for use on colored backgrounds */
-.cn-status-badge--solid.cn-status-badge--default {
-	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
-}
-
-.cn-status-badge--solid.cn-status-badge--primary {
-	background-color: var(--color-primary-element);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--success {
-	background-color: var(--color-success);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--warning {
-	background-color: var(--color-warning);
-	color: var(--color-primary-text);
-}
-
-.cn-status-badge--solid.cn-status-badge--error {
-	background-color: var(--color-error);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--info {
-	background-color: var(--color-info, #0082c9);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--purple {
-	background-color: var(--cn-status-purple-text);
-	color: white;
-}
-
-.cn-status-badge--solid.cn-status-badge--teal {
-	background-color: var(--cn-status-teal-text);
-	color: white;
-}
-
-
-/*
- * The card itself — its box, body stack, icon circle, title and value
- * typography — is the CANONICAL KPI card in src/css/kpi-card.css, shared with
- * CnStatsBlock. What remains here is only what is specific to THIS widget: the
- * range select, the "/ limit" denominator, the trend chip and the error glyph.
- *
- * Every size below is expressed against the shared `--cn-kpi-*` scale rather
- * than as its own number, so the widget's extras re-scale with the card they
- * sit in. Resist adding card styling back, and resist restating a value the
- * scale already holds; that is what split the two KPI looks apart in the first
- * place.
- */
-
-/* The title row carries an optional range select beside the label, which the
-   canonical `__title` (a plain truncating heading) does not account for. */
-.cn-stat-widget__label[data-v-50eb91c3] {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	width: 100%;
-}
-
-/* Stacked tile: the label and its range select centre over the number rather
-   than spreading to the card's edges. */
-.cn-kpi-card--vertical .cn-stat-widget__label[data-v-50eb91c3] {
-	justify-content: center;
-	width: auto;
-}
-
-/* Sized down to sit inside the label row without pushing the tile taller —
-   the tile's height is fixed by its grid cell (ADR-062). */
-.cn-stat-widget__range[data-v-50eb91c3] {
-	flex: 0 0 auto;
-	max-width: 50%;
-	padding: 0 4px;
-	border: none;
-	border-radius: var(--border-radius);
-	background: transparent;
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-	font-size: var(--cn-kpi-label-size, 13px);
-	font-weight: normal;
-	cursor: pointer;
-}
-.cn-stat-widget__range[data-v-50eb91c3]:hover,
-.cn-stat-widget__range[data-v-50eb91c3]:focus-visible {
-	background: var(--color-background-hover);
-	color: var(--color-main-text);
-}
-
-/* Badge mode: the pill takes the value's place in the row. Sized to the
-   card's label scale so it sits in the row without pushing the tile taller. */
-.cn-stat-widget__badge[data-v-50eb91c3] {
-	flex: 0 1 auto;
-	min-width: 0;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--cn-kpi-label-size, 13px);
-}
-
-/* The denominator of a "value / limit" pair. Deliberately quieter and smaller
-   than the value: the tile's subject is what the number IS, not what it is
-   allowed to reach. Shares the value's `nowrap` so the pair never breaks. */
-.cn-stat-widget__limit[data-v-50eb91c3] {
-	flex: 0 0 auto;
-	font-size: var(--cn-kpi-value-size-compact, 1.25rem);
-	font-weight: var(--cn-kpi-title-weight, 600);
-	line-height: var(--cn-kpi-value-line, 1.1);
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-	white-space: nowrap;
-}
-.cn-stat-widget__trend[data-v-50eb91c3] {
-	display: inline-flex;
-	align-items: center;
-	gap: 2px;
-	font-size: var(--cn-kpi-label-size, 13px);
-	font-weight: var(--cn-kpi-title-weight, 600);
-}
-
-/* The dash shown when the number could not be fetched. It stands where the
-   value stands, so it takes the value's size and weight — CnStatsBlock's own
-   error dash is literally a `cn-kpi-card__value`, and two components showing
-   the same failure at two different sizes is the drift this consolidation
-   exists to remove. Only the colour differs: a failure is not a number. */
-.cn-stat-widget__error[data-v-50eb91c3] {
-	font-size: var(--cn-kpi-value-size, 2rem);
-	font-weight: var(--cn-kpi-value-weight, 700);
-	line-height: var(--cn-kpi-value-line, 1.1);
-	color: var(--cn-kpi-label-color, var(--color-text-maxcontrast));
-}
-
 
 .cn-delta-form[data-v-59878180] {
 	display: flex;
@@ -28310,7 +28601,7 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 
 /* The percentage-change chip beside the value. Tinted good/bad at runtime from
  * `goodDirection`, so the colour is an inline style, not a class. */
-.cn-delta-widget__delta[data-v-66680dc6] {
+.cn-delta-widget__delta[data-v-ee481872] {
 	display: inline-flex;
 	align-items: center;
 	gap: 2px;
@@ -28321,7 +28612,7 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 /* The dash shown when the number could not be fetched. It stands where the
  * value stands, so it takes the value's size and weight — only the colour
  * differs, because a failure is not a number. */
-.cn-delta-widget__error[data-v-66680dc6] {
+.cn-delta-widget__error[data-v-ee481872] {
 	font-size: var(--cn-kpi-value-size, 2rem);
 	font-weight: var(--cn-kpi-value-weight, 700);
 	line-height: var(--cn-kpi-value-line, 1.1);
@@ -28352,7 +28643,7 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 }
 
 
-.cn-gauge-widget[data-v-0ac8e0e8] {
+.cn-gauge-widget[data-v-006ab8f8] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -28360,58 +28651,58 @@ tr.file-picker__row td.row-name[data-v-1f96131b] {
 }
 
 /* Whole-tile click target when the widget declares a `route`/`link`. */
-.cn-gauge-widget--linked[data-v-0ac8e0e8] {
+.cn-gauge-widget--linked[data-v-006ab8f8] {
 	cursor: pointer;
 	text-decoration: none;
 	color: inherit;
 	border-radius: var(--border-radius-large, 8px);
 	transition: background-color 0.1s ease-in-out;
 }
-.cn-gauge-widget--linked[data-v-0ac8e0e8]:hover {
+.cn-gauge-widget--linked[data-v-006ab8f8]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-gauge-widget--linked[data-v-0ac8e0e8]:focus-visible {
+.cn-gauge-widget--linked[data-v-006ab8f8]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-gauge-widget__head[data-v-0ac8e0e8] {
+.cn-gauge-widget__head[data-v-006ab8f8] {
 	display: flex;
 	align-items: baseline;
 	justify-content: space-between;
 	gap: 8px;
 }
-.cn-gauge-widget__label[data-v-0ac8e0e8] {
+.cn-gauge-widget__label[data-v-006ab8f8] {
 	font-size: 0.95em;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-gauge-widget__pct[data-v-0ac8e0e8] {
+.cn-gauge-widget__pct[data-v-006ab8f8] {
 	font-size: 1.2em;
 	font-weight: 700;
 }
-.cn-gauge-widget__track[data-v-0ac8e0e8] {
+.cn-gauge-widget__track[data-v-006ab8f8] {
 	width: 100%;
 	height: 10px;
 	border-radius: 5px;
 	background: var(--color-background-dark);
 	overflow: hidden;
 }
-.cn-gauge-widget__fill[data-v-0ac8e0e8] {
+.cn-gauge-widget__fill[data-v-006ab8f8] {
 	height: 100%;
 	border-radius: 5px;
 	transition: width 0.3s ease;
 }
-.cn-gauge-widget__foot[data-v-0ac8e0e8] {
+.cn-gauge-widget__foot[data-v-006ab8f8] {
 	display: flex;
 	align-items: baseline;
 	gap: 6px;
 	font-size: 0.9em;
 }
-.cn-gauge-widget__value[data-v-0ac8e0e8] {
+.cn-gauge-widget__value[data-v-006ab8f8] {
 	font-weight: 700;
 	color: var(--color-main-text);
 }
-.cn-gauge-widget__target[data-v-0ac8e0e8] {
+.cn-gauge-widget__target[data-v-006ab8f8] {
 	color: var(--color-text-maxcontrast);
 }
 
@@ -28971,34 +29262,34 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-field-list-widget[data-v-7d90316d] {
+.cn-field-list-widget[data-v-643f1dd6] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	min-width: 0;
 }
-.cn-field-list-widget__rows[data-v-7d90316d] {
+.cn-field-list-widget__rows[data-v-643f1dd6] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-field-list-widget__row[data-v-7d90316d] {
+.cn-field-list-widget__row[data-v-643f1dd6] {
 	padding: 10px 0;
 	border-top: 1px solid var(--color-border);
 }
-.cn-field-list-widget__row[data-v-7d90316d]:first-child {
+.cn-field-list-widget__row[data-v-643f1dd6]:first-child {
 	border-top: none;
 	padding-top: 0;
 }
-.cn-field-list-widget__line[data-v-7d90316d] {
+.cn-field-list-widget__line[data-v-643f1dd6] {
 	display: flex;
 	align-items: center;
 	gap: 12px;
 	min-width: 0;
 }
-.cn-field-list-widget__avatar[data-v-7d90316d] {
+.cn-field-list-widget__avatar[data-v-643f1dd6] {
 	flex: 0 0 auto;
 	display: inline-flex;
 	align-items: center;
@@ -29011,64 +29302,69 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	font-size: 12px;
 	font-weight: 700;
 }
-.cn-field-list-widget__main[data-v-7d90316d] {
+.cn-field-list-widget__main[data-v-643f1dd6] {
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
 	min-width: 0;
 }
-.cn-field-list-widget__title[data-v-7d90316d] {
+.cn-field-list-widget__title[data-v-643f1dd6] {
 	font-weight: 600;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__meta[data-v-7d90316d],
-.cn-field-list-widget__aside[data-v-7d90316d],
-.cn-field-list-widget__detail[data-v-7d90316d],
-.cn-field-list-widget__hint[data-v-7d90316d],
-.cn-field-list-widget__empty[data-v-7d90316d] {
+.cn-field-list-widget__meta[data-v-643f1dd6],
+.cn-field-list-widget__aside[data-v-643f1dd6],
+.cn-field-list-widget__detail[data-v-643f1dd6],
+.cn-field-list-widget__hint[data-v-643f1dd6],
+.cn-field-list-widget__empty[data-v-643f1dd6] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-field-list-widget__meta[data-v-7d90316d],
-.cn-field-list-widget__aside[data-v-7d90316d],
-.cn-field-list-widget__detail[data-v-7d90316d] {
+.cn-field-list-widget__meta[data-v-643f1dd6],
+.cn-field-list-widget__aside[data-v-643f1dd6],
+.cn-field-list-widget__copies[data-v-643f1dd6] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+.cn-field-list-widget__detail[data-v-643f1dd6] {
 	font-size: 13px;
 }
-.cn-field-list-widget__aside[data-v-7d90316d] {
+.cn-field-list-widget__aside[data-v-643f1dd6] {
 	white-space: nowrap;
 }
-.cn-field-list-widget__detail[data-v-7d90316d],
-.cn-field-list-widget__hint[data-v-7d90316d],
-.cn-field-list-widget__empty[data-v-7d90316d] {
+.cn-field-list-widget__detail[data-v-643f1dd6],
+.cn-field-list-widget__hint[data-v-643f1dd6],
+.cn-field-list-widget__empty[data-v-643f1dd6] {
 	margin: 4px 0 0;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__add[data-v-7d90316d] {
+.cn-field-list-widget__add[data-v-643f1dd6] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-end;
 	gap: 8px 12px;
 }
-.cn-field-list-widget__add[data-v-7d90316d] > * {
+.cn-field-list-widget__add[data-v-643f1dd6] > * {
 	flex: 1 1 180px;
 }
-.cn-field-list-widget__add > button[data-v-7d90316d] {
+.cn-field-list-widget__add > button[data-v-643f1dd6] {
 	flex: 0 0 auto;
 }
-.cn-field-list-widget__toolbar[data-v-7d90316d] {
+.cn-field-list-widget__toolbar[data-v-643f1dd6] {
 	display: flex;
 	justify-content: flex-end;
 }
-.cn-field-list-widget__table-wrap[data-v-7d90316d] {
+.cn-field-list-widget__table-wrap[data-v-643f1dd6] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
 	overflow-x: auto;
 }
-.cn-field-list-widget__table[data-v-7d90316d] {
+.cn-field-list-widget__table[data-v-643f1dd6] {
 	width: 100%;
 	border-collapse: collapse;
 }
-.cn-field-list-widget__th[data-v-7d90316d] {
+.cn-field-list-widget__th[data-v-643f1dd6] {
 	padding: 8px 12px;
 	text-align: start;
 	font-size: 13px;
@@ -29077,27 +29373,27 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	color: var(--color-text-maxcontrast);
 	background: var(--color-background-hover);
 }
-.cn-field-list-widget__th--menu[data-v-7d90316d],
-.cn-field-list-widget__td--menu[data-v-7d90316d] {
+.cn-field-list-widget__th--menu[data-v-643f1dd6],
+.cn-field-list-widget__td--menu[data-v-643f1dd6] {
 	width: 1%;
 	text-align: end;
 }
-.cn-field-list-widget__tr[data-v-7d90316d] {
+.cn-field-list-widget__tr[data-v-643f1dd6] {
 	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
 }
-.cn-field-list-widget__td[data-v-7d90316d] {
+.cn-field-list-widget__td[data-v-643f1dd6] {
 	padding: 10px 12px;
 	vertical-align: middle;
 	overflow-wrap: anywhere;
 }
-.cn-field-list-widget__sr[data-v-7d90316d] {
+.cn-field-list-widget__sr[data-v-643f1dd6] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	overflow: hidden;
 	clip-path: inset(50%);
 }
-.cn-field-list-widget__band[data-v-7d90316d] {
+.cn-field-list-widget__band[data-v-643f1dd6] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -29199,35 +29495,44 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-settings-form[data-v-66086856] {
+.cn-settings-form[data-v-7325a0ee] {
 	display: flex;
 	flex-direction: column;
 	gap: 14px;
 	min-width: 0;
 }
-.cn-settings-form__grid[data-v-66086856] {
+.cn-settings-form__grid[data-v-7325a0ee] {
 	display: grid;
 	gap: 14px 16px;
 	grid-template-columns: minmax(0, 1fr);
 }
-.cn-settings-form__grid--2[data-v-66086856] {
+.cn-settings-form__grid--2[data-v-7325a0ee] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.cn-settings-form__field[data-v-66086856] {
+.cn-settings-form__field[data-v-7325a0ee] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 0;
 }
-.cn-settings-form__field--wide[data-v-66086856] {
+.cn-settings-form__field--wide[data-v-7325a0ee] {
 	grid-column: 1 / -1;
 }
-.cn-settings-form__label[data-v-66086856] {
+.cn-settings-form__label[data-v-7325a0ee] {
 	font-size: 13px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-settings-form__control[data-v-66086856] {
+.cn-settings-form__reference[data-v-7325a0ee] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-settings-form__sublabel[data-v-7325a0ee] {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__control[data-v-7325a0ee] {
 	width: 100%;
 	box-sizing: border-box;
 	height: var(--cn-board-control-height, 40px);
@@ -29238,13 +29543,13 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	color: var(--color-main-text);
 	font: inherit;
 }
-.cn-settings-form__file[data-v-66086856] {
+.cn-settings-form__file[data-v-7325a0ee] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 8px;
 }
-.cn-settings-form__control--file[data-v-66086856] {
+.cn-settings-form__control--file[data-v-7325a0ee] {
 	display: inline-flex;
 	align-items: center;
 	width: auto;
@@ -29252,64 +29557,64 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	flex: 0 1 auto;
 	overflow-wrap: anywhere;
 }
-.cn-settings-form__control--placeholder[data-v-66086856] {
+.cn-settings-form__control--placeholder[data-v-7325a0ee] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-form__control--area[data-v-66086856] {
+.cn-settings-form__control--area[data-v-7325a0ee] {
 	height: auto;
 	padding: 10px 12px;
 	resize: vertical;
 }
-.cn-settings-form__control[data-v-66086856]:focus-visible {
+.cn-settings-form__control[data-v-7325a0ee]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 1px;
 }
-.cn-settings-form__hint[data-v-66086856],
-.cn-settings-form__error[data-v-66086856] {
+.cn-settings-form__hint[data-v-7325a0ee],
+.cn-settings-form__error[data-v-7325a0ee] {
 	margin: 0;
 	font-size: 12px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-settings-form__error[data-v-66086856] {
+.cn-settings-form__error[data-v-7325a0ee] {
 	color: var(--color-error-text);
 }
-.cn-settings-form__actions[data-v-66086856] {
+.cn-settings-form__actions[data-v-7325a0ee] {
 	display: flex;
 	justify-content: flex-start;
 }
 @media (max-width: 640px) {
-.cn-settings-form__grid--2[data-v-66086856] {
+.cn-settings-form__grid--2[data-v-7325a0ee] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
 
 
-.cn-switch-rows[data-v-7a6ac51c] {
+.cn-switch-rows[data-v-21bccfa9] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-switch-rows__list[data-v-7a6ac51c] {
+.cn-switch-rows__list[data-v-21bccfa9] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 	display: flex;
 	flex-direction: column;
 }
-.cn-switch-rows__row[data-v-7a6ac51c] {
+.cn-switch-rows__row[data-v-21bccfa9] {
 	padding: 10px 0;
 	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
 }
-.cn-switch-rows__row[data-v-7a6ac51c]:first-child {
+.cn-switch-rows__row[data-v-21bccfa9]:first-child {
 	border-top: none;
 	padding-top: 0;
 }
-.cn-switch-rows__label[data-v-7a6ac51c] {
+.cn-switch-rows__label[data-v-21bccfa9] {
 	display: block;
 	font-weight: 600;
 }
-.cn-switch-rows__hint[data-v-7a6ac51c] {
+.cn-switch-rows__hint[data-v-21bccfa9] {
 	display: block;
 	font-size: 12px;
 	font-weight: 400;
@@ -29317,7 +29622,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-radio-cards[data-v-3b685691] {
+.cn-radio-cards[data-v-8ac292d6] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -29326,23 +29631,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 0;
 	border: 0;
 }
-.cn-radio-cards__legend[data-v-3b685691] {
+.cn-radio-cards__legend[data-v-8ac292d6] {
 	padding: 0;
 	margin-bottom: 6px;
 	font-weight: 600;
 }
-.cn-radio-cards__grid[data-v-3b685691] {
+.cn-radio-cards__grid[data-v-8ac292d6] {
 	display: grid;
 	gap: 10px;
 	grid-template-columns: minmax(0, 1fr);
 }
-.cn-radio-cards__grid--2[data-v-3b685691] {
+.cn-radio-cards__grid--2[data-v-8ac292d6] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.cn-radio-cards__grid--3[data-v-3b685691] {
+.cn-radio-cards__grid--3[data-v-8ac292d6] {
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.cn-radio-cards__card[data-v-3b685691] {
+.cn-radio-cards__card[data-v-8ac292d6] {
 	position: relative;
 	display: flex;
 	align-items: flex-start;
@@ -29353,25 +29658,25 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	background: var(--color-main-background);
 	cursor: pointer;
 }
-.cn-radio-cards__card--selected[data-v-3b685691] {
+.cn-radio-cards__card--selected[data-v-8ac292d6] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 	box-shadow: 0 0 0 1px var(--color-primary-element);
 }
-.cn-radio-cards__card[data-v-3b685691]:focus-within {
+.cn-radio-cards__card[data-v-8ac292d6]:focus-within {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
 
 /* The real input stays in the DOM and in the accessibility tree; the dot is its picture. */
-.cn-radio-cards__input[data-v-3b685691] {
+.cn-radio-cards__input[data-v-8ac292d6] {
 	position: absolute;
 	opacity: 0;
 	inset: 0;
 	margin: 0;
 	cursor: pointer;
 }
-.cn-radio-cards__dot[data-v-3b685691] {
+.cn-radio-cards__dot[data-v-8ac292d6] {
 	flex: 0 0 auto;
 	width: 14px;
 	height: 14px;
@@ -29381,25 +29686,54 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	border-radius: 50%;
 	background: var(--color-main-background);
 }
-.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-3b685691] {
+.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8ac292d6] {
 	border: 4px solid var(--color-primary-element);
 }
-.cn-radio-cards__text[data-v-3b685691] {
+.cn-radio-cards__text[data-v-8ac292d6] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-radio-cards__title[data-v-3b685691] {
+.cn-radio-cards__title[data-v-8ac292d6] {
 	font-weight: 600;
 }
-.cn-radio-cards__description[data-v-3b685691] {
+.cn-radio-cards__description[data-v-8ac292d6] {
 	font-size: 12px;
 	color: var(--color-text-maxcontrast);
 }
+
+/* `variant: "list"`: one radio button per line, the description under the
+   label, no card around each (board DcBeheer, "Soort organisatie"). */
+.cn-radio-cards--list .cn-radio-cards__grid[data-v-8ac292d6] {
+	gap: 8px;
+}
+.cn-radio-cards--list .cn-radio-cards__card[data-v-8ac292d6],
+.cn-radio-cards--list .cn-radio-cards__card--selected[data-v-8ac292d6] {
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	font-size: 15px;
+}
+.cn-radio-cards--list .cn-radio-cards__dot[data-v-8ac292d6] {
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+}
+.cn-radio-cards--list .cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8ac292d6] {
+	border-width: 5px;
+}
+.cn-radio-cards--list .cn-radio-cards__title[data-v-8ac292d6] {
+	font-weight: 400;
+}
+.cn-radio-cards--list .cn-radio-cards__description[data-v-8ac292d6] {
+	font-size: 13px;
+}
 @media (max-width: 640px) {
-.cn-radio-cards__grid--2[data-v-3b685691],
-	.cn-radio-cards__grid--3[data-v-3b685691] {
+.cn-radio-cards__grid--2[data-v-8ac292d6],
+	.cn-radio-cards__grid--3[data-v-8ac292d6] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
@@ -29546,27 +29880,27 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 }
 
 
-.cn-record-list__list[data-v-519e7f1c] {
+.cn-record-list__list[data-v-bc186ef8] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
-.cn-record-list__empty[data-v-519e7f1c],
-.cn-record-list__error[data-v-519e7f1c] {
+.cn-record-list__empty[data-v-bc186ef8],
+.cn-record-list__error[data-v-bc186ef8] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
-.cn-record-list__loading[data-v-519e7f1c] {
+.cn-record-list__loading[data-v-bc186ef8] {
 	display: flex;
 	justify-content: center;
 	padding: 8px 0;
 }
 
 /* rows */
-.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-519e7f1c] {
+.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-bc186ef8] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__row[data-v-519e7f1c] {
+.cn-record-list__row[data-v-bc186ef8] {
 	align-items: center;
 	color: var(--color-main-text);
 	display: flex;
@@ -29574,11 +29908,11 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 12px 0;
 	text-decoration: none;
 }
-.cn-record-list__row--link:hover .cn-record-list__title[data-v-519e7f1c],
-.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-519e7f1c] {
+.cn-record-list__row--link:hover .cn-record-list__title[data-v-bc186ef8],
+.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-bc186ef8] {
 	text-decoration: underline;
 }
-.cn-record-list__avatar[data-v-519e7f1c] {
+.cn-record-list__avatar[data-v-bc186ef8] {
 	align-items: center;
 	background: var(--color-background-hover);
 	border-radius: 50%;
@@ -29591,67 +29925,67 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__main[data-v-519e7f1c] {
+.cn-record-list__main[data-v-bc186ef8] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-record-list__title[data-v-519e7f1c] {
+.cn-record-list__title[data-v-bc186ef8] {
 	font-size: 15px;
 	font-weight: 700;
 }
-.cn-record-list__meta[data-v-519e7f1c] {
+.cn-record-list__meta[data-v-bc186ef8] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-record-list__aside[data-v-519e7f1c] {
+.cn-record-list__aside[data-v-bc186ef8] {
 	align-items: center;
 	display: flex;
 	flex: none;
 	gap: 16px;
 }
-.cn-record-list__trailing[data-v-519e7f1c] {
+.cn-record-list__trailing[data-v-bc186ef8] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due[data-v-519e7f1c] {
+.cn-record-list__due[data-v-bc186ef8] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due--danger[data-v-519e7f1c] {
+.cn-record-list__due--danger[data-v-bc186ef8] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-weight: 600;
 }
-.cn-record-list__due--empty[data-v-519e7f1c] {
+.cn-record-list__due--empty[data-v-bc186ef8] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-record-list__row--action[data-v-519e7f1c] {
+.cn-record-list__row--action[data-v-bc186ef8] {
 	flex-wrap: wrap;
 	gap: 8px 16px;
 	padding: 14px 0;
 }
-.cn-record-list__row--action .cn-record-list__main[data-v-519e7f1c] {
+.cn-record-list__row--action .cn-record-list__main[data-v-bc186ef8] {
 	flex: 1 1 280px;
 	gap: 3px;
 }
-.cn-record-list__title--link[data-v-519e7f1c] {
+.cn-record-list__title--link[data-v-bc186ef8] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-record-list__pills[data-v-519e7f1c] {
+.cn-record-list__pills[data-v-bc186ef8] {
 	display: flex;
 	flex: 0 0 120px;
 	gap: 6px;
 	justify-content: flex-end;
 }
-.cn-record-list__due--column[data-v-519e7f1c] {
+.cn-record-list__due--column[data-v-bc186ef8] {
 	flex: 0 0 96px;
 	font-size: 13px;
 	text-align: end;
 }
-.cn-record-list__action[data-v-519e7f1c] {
+.cn-record-list__action[data-v-bc186ef8] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -29668,26 +30002,26 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	padding: 0 14px;
 	text-decoration: none;
 }
-.cn-record-list__action[data-v-519e7f1c]:hover,
-.cn-record-list__action[data-v-519e7f1c]:focus-visible {
+.cn-record-list__action[data-v-bc186ef8]:hover,
+.cn-record-list__action[data-v-bc186ef8]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-record-list__chevron[data-v-519e7f1c] {
+.cn-record-list__chevron[data-v-bc186ef8] {
 	color: var(--color-text-maxcontrast);
 	flex: none;
 }
 
 /* feed */
-.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-519e7f1c] {
+.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-bc186ef8] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__feed-row[data-v-519e7f1c] {
+.cn-record-list__feed-row[data-v-bc186ef8] {
 	align-items: flex-start;
 	display: flex;
 	gap: 14px;
 	padding: 12px 0;
 }
-.cn-record-list__feed-icon[data-v-519e7f1c] {
+.cn-record-list__feed-icon[data-v-bc186ef8] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border-radius: 50%;
@@ -29698,25 +30032,25 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-33d38
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__text[data-v-519e7f1c] {
+.cn-record-list__text[data-v-bc186ef8] {
 	font-size: 15px;
 }
-.cn-record-list--feed .cn-record-list__main[data-v-519e7f1c] {
+.cn-record-list--feed .cn-record-list__main[data-v-bc186ef8] {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
 
 /* inline */
-.cn-record-list__inline-row[data-v-519e7f1c] {
+.cn-record-list__inline-row[data-v-bc186ef8] {
 	padding: 4px 0;
 }
-.cn-record-list__label[data-v-519e7f1c] {
+.cn-record-list__label[data-v-bc186ef8] {
 	margin-inline-end: 4px;
 }
-.cn-record-list__inline-title[data-v-519e7f1c] {
+.cn-record-list__inline-title[data-v-bc186ef8] {
 	color: var(--color-main-text);
 }
-a.cn-record-list__inline-title[data-v-519e7f1c] {
+a.cn-record-list__inline-title[data-v-bc186ef8] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
@@ -30036,6 +30370,7 @@ a.cn-record-list__inline-title[data-v-519e7f1c] {
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -30058,6 +30393,16 @@ a.cn-record-list__inline-title[data-v-519e7f1c] {
 	margin: 0;
 }
 
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}
+
 
 .cn-banner-form[data-v-0c839173] {
 	display: flex;
@@ -33982,28 +34327,28 @@ to {
 }
 
 
-.cn-admin-settings-shell[data-v-533044f8] {
+.cn-admin-settings-shell[data-v-2f22ff08] {
 	max-width: 900px;
 }
 
 /* The board look lifts the width and lays the header and cards on a grid (look-board.css). */
-.cn-support-info[data-v-533044f8] {
+.cn-support-info[data-v-2f22ff08] {
 	margin-top: 16px;
 	padding-top: 16px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-support-info h4[data-v-533044f8] {
+.cn-support-info h4[data-v-2f22ff08] {
 	margin: 0 0 8px 0;
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-support-info p[data-v-533044f8] {
+.cn-support-info p[data-v-2f22ff08] {
 	margin: 4px 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-support-info a[data-v-533044f8] {
+.cn-support-info a[data-v-2f22ff08] {
 	color: var(--color-primary-element);
 }
 
@@ -36473,24 +36818,24 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-walkthrough[data-v-165ee49b] {
+.cn-walkthrough[data-v-34991bbf] {
 	position: fixed;
 	inset: 0;
 	pointer-events: none;
 }
-.cn-walkthrough__live[data-v-165ee49b] {
+.cn-walkthrough__live[data-v-34991bbf] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	overflow: hidden;
 	clip-path: inset(50%);
 }
-.cn-walkthrough__dim[data-v-165ee49b] {
+.cn-walkthrough__dim[data-v-34991bbf] {
 	position: fixed;
 	background: var(--color-modal-background, rgba(0, 0, 0, 0.5));
 	pointer-events: auto;
 }
-.cn-walkthrough__dim--full[data-v-165ee49b] {
+.cn-walkthrough__dim--full[data-v-34991bbf] {
 	inset: 0;
 }
 
@@ -36499,16 +36844,16 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    underneath (see the template comment). */
 /* Lets the step's own task through — and therefore cannot be clicked to
    dismiss; ESC, the close button and Back/Finish remain (see the template). */
-.cn-walkthrough__dim--passthrough[data-v-165ee49b] {
+.cn-walkthrough__dim--passthrough[data-v-34991bbf] {
 	pointer-events: none;
 }
-.cn-walkthrough__ring[data-v-165ee49b] {
+.cn-walkthrough__ring[data-v-34991bbf] {
 	position: fixed;
 	border-radius: var(--border-radius-large, 8px);
 	box-shadow: 0 0 0 2px var(--color-primary-element, #0082c9);
 	pointer-events: none;
 }
-.cn-walkthrough__card[data-v-165ee49b] {
+.cn-walkthrough__card[data-v-34991bbf] {
 	position: fixed;
 	width: 320px;
 	max-width: calc(100vw - 24px);
@@ -36519,11 +36864,11 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	padding: 16px;
 	pointer-events: auto;
 }
-.cn-walkthrough__card--docked[data-v-165ee49b] {
+.cn-walkthrough__card--docked[data-v-34991bbf] {
 	inset-block-end: 16px;
 	inset-inline-start: 16px;
 }
-.cn-walkthrough__close[data-v-165ee49b] {
+.cn-walkthrough__close[data-v-34991bbf] {
 	/* !important beats NcButton's own `position: relative`, which would otherwise
 	   leave the close button in-flow at the card's top-left. */
 	position: absolute !important;
@@ -36532,37 +36877,37 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	inset-inline-start: auto;
 	z-index: 1;
 }
-.cn-walkthrough__counter[data-v-165ee49b] {
+.cn-walkthrough__counter[data-v-34991bbf] {
 	font-size: 0.8125rem;
 	color: var(--color-text-maxcontrast);
 	margin-bottom: 4px;
 	/* Keep the counter/title clear of the absolutely-positioned close button. */
 	padding-inline-end: 32px;
 }
-.cn-walkthrough__title[data-v-165ee49b] {
+.cn-walkthrough__title[data-v-34991bbf] {
 	margin: 0 0 6px;
 	font-size: 1.1rem;
 }
-.cn-walkthrough__body[data-v-165ee49b] {
+.cn-walkthrough__body[data-v-34991bbf] {
 	margin: 0 0 8px;
 }
-.cn-walkthrough__task[data-v-165ee49b] {
+.cn-walkthrough__task[data-v-34991bbf] {
 	margin: 0 0 8px;
 	padding: 8px;
 	background: var(--color-primary-element-light, var(--color-background-hover));
 	border-radius: var(--border-radius, 4px);
 	font-weight: 600;
 }
-.cn-walkthrough__task-icon[data-v-165ee49b] {
+.cn-walkthrough__task-icon[data-v-34991bbf] {
 	margin-inline-end: 4px;
 }
-.cn-walkthrough__actions[data-v-165ee49b] {
+.cn-walkthrough__actions[data-v-34991bbf] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	margin-top: 8px;
 }
-.cn-walkthrough__spacer[data-v-165ee49b] {
+.cn-walkthrough__spacer[data-v-34991bbf] {
 	flex: 1 1 auto;
 }
 
@@ -37144,41 +37489,41 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-body-sections[data-v-19a0caa4] {
+.cn-body-sections[data-v-44324dca] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	width: 100%;
 }
-.cn-body-sections--grid[data-v-19a0caa4] {
+.cn-body-sections--grid[data-v-44324dca] {
 	display: grid;
 	grid-template-columns: repeat(12, 1fr);
 	gap: 16px;
 }
-.cn-body-sections__section[data-v-19a0caa4] {
+.cn-body-sections__section[data-v-44324dca] {
 	min-width: 0;
 }
 
 /* Same card as the grid's widgets, so a section reads as one of them. */
-.cn-body-sections__section--card[data-v-19a0caa4] {
+.cn-body-sections__section--card[data-v-44324dca] {
 	padding: 12px 16px 16px;
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-body-sections__section--card > .cn-body-sections__title[data-v-19a0caa4] {
+.cn-body-sections__section--card > .cn-body-sections__title[data-v-44324dca] {
 	margin: 0 -16px 12px;
 	padding: 0 16px 12px;
 	font-size: 14px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-body-sections__title[data-v-19a0caa4] {
+.cn-body-sections__title[data-v-44324dca] {
 	margin: 0 0 8px;
 	font-size: 16px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-body-sections__error[data-v-19a0caa4] {
+.cn-body-sections__error[data-v-44324dca] {
 	padding: 12px 16px;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 12px);
@@ -37188,17 +37533,17 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-dashboard-grid[data-v-29653a76] {
+.cn-dashboard-grid[data-v-ca2ae49c] {
 	width: 100%;
 	min-height: 200px;
 }
-.grid-stack[data-v-29653a76] {
+.grid-stack[data-v-ca2ae49c] {
 	background: transparent;
 }
 
 /* Screen-reader-only text: the keyboard key map and the live region. Kept in
    the layout (not `display: none`) so assistive tech still reads it. */
-.cn-dashboard-grid__sr-only[data-v-29653a76] {
+.cn-dashboard-grid__sr-only[data-v-ca2ae49c] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -37213,7 +37558,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* Grid items become tab stops in edit mode — give them a visible focus ring
    that satisfies WCAG 2.1 SC 2.4.7 without relying on the widget's own
    styling. `outline-offset` keeps the ring outside the rounded card. */
-.grid-stack-item[data-v-29653a76]:focus-visible {
+.grid-stack-item[data-v-ca2ae49c]:focus-visible {
 	outline: 2px solid var(--color-primary-element, #0082c9);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
@@ -37225,19 +37570,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    cell never shrank: "Waiting for me" stayed a tall card around one row. In
    such a cell the child takes its own height. A cell without the key keeps
    the filling child. */
-.cn-dashboard-grid__item--fit[data-v-29653a76] >  .grid-stack-item-content > * {
+.cn-dashboard-grid__item--fit[data-v-ca2ae49c] >  .grid-stack-item-content > * {
 	height: auto;
 }
-[data-v-29653a76] .grid-stack-item-content {
+[data-v-ca2ae49c] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;
 	box-shadow: none;
 	overflow: hidden;
 }
-[data-v-29653a76] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
+[data-v-ca2ae49c] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
 	background: transparent;
 }
-[data-v-29653a76] .grid-stack-placeholder > .placeholder-content {
+[data-v-ca2ae49c] .grid-stack-placeholder > .placeholder-content {
 	background: var(--color-primary-element-light);
 	border: 2px dashed var(--color-primary-element);
 	border-radius: var(--border-radius-large);
@@ -37505,7 +37850,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-dashboard-page[data-v-b753474e] {
+.cn-dashboard-page[data-v-4abdd0ae] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -37519,7 +37864,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-b753474e] {
+.cn-dashboard-page__header[data-v-4abdd0ae] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -37531,21 +37876,21 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-b753474e] {
+.cn-dashboard-page__header-left[data-v-4abdd0ae] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-b753474e] {
+.cn-dashboard-page__title-row[data-v-4abdd0ae] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-b753474e] {
+.cn-dashboard-page__title[data-v-4abdd0ae] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-b753474e] {
+.cn-dashboard-page__description[data-v-4abdd0ae] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -37553,19 +37898,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 
 /* Board look (screens-dashboard-parity): h1 28/700, a 15px grey subtitle 6px
    under it, and 40px buttons with a 10px gap. */
-.cn-dashboard-page--board .cn-dashboard-page__title[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-4abdd0ae] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-4abdd0ae] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-4abdd0ae] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-b753474e] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-4abdd0ae] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -37573,17 +37918,17 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* The switch row under the header (screens-dashboard-greeting-header): the
    view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
    radius 17, 13px/600, a 14px icon, primary light on primary deep). */
-.cn-dashboard-page__switch-row[data-v-b753474e] {
+.cn-dashboard-page__switch-row[data-v-4abdd0ae] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 	margin-bottom: var(--cn-board-section-gap, 20px);
 }
-.cn-dashboard-page__switch-row-spacer[data-v-b753474e] {
+.cn-dashboard-page__switch-row-spacer[data-v-4abdd0ae] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-b753474e] {
+.cn-dashboard-page__view-link[data-v-4abdd0ae] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -37597,36 +37942,36 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-b753474e]:hover {
+.cn-dashboard-page__view-link[data-v-4abdd0ae]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__view-link[data-v-4abdd0ae]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-b753474e] {
+.cn-dashboard-page__view-link-icon[data-v-4abdd0ae] {
 	display: inline-flex;
 }
 
 /* The period group, in a row of its own between the header and the KPI row. */
-.cn-dashboard-page__date-range--segmented[data-v-b753474e] {
+.cn-dashboard-page__date-range--segmented[data-v-4abdd0ae] {
 	margin-bottom: 16px;
 }
-.cn-dashboard-page__date-segmented[data-v-b753474e] {
+.cn-dashboard-page__date-segmented[data-v-4abdd0ae] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
 /* The KPI row above the grid: tiles are cells of the auto-fit grid. */
-.cn-dashboard-page__kpi-row[data-v-b753474e] {
+.cn-dashboard-page__kpi-row[data-v-4abdd0ae] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
-.cn-dashboard-page__kpi-cell[data-v-b753474e] {
+.cn-dashboard-page__kpi-cell[data-v-4abdd0ae] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-b753474e] > * {
+.cn-dashboard-page__kpi-cell[data-v-4abdd0ae] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -37639,7 +37984,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    scoped chip rules then silently don't match and the chip collapses into
    NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
    data-testid is stable across chunks, so those rules match regardless. */
-.cn-dashboard-page__header-actions[data-v-b753474e] {
+.cn-dashboard-page__header-actions[data-v-4abdd0ae] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -37655,19 +38000,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 
 /* Date-range header band. Kept compact so it doesn't open a tall gap
    above the grid; the pills variant is a single tidy toggle row. */
-.cn-dashboard-page__date-range[data-v-b753474e] {
+.cn-dashboard-page__date-range[data-v-4abdd0ae] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-b753474e] {
+.cn-dashboard-page__date-range--pills[data-v-4abdd0ae] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-b753474e] {
+.cn-dashboard-page__date-pills[data-v-4abdd0ae] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-b753474e] {
+.cn-dashboard-page__date-pill[data-v-4abdd0ae] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -37682,77 +38027,77 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-b753474e]:hover {
+.cn-dashboard-page__date-pill[data-v-4abdd0ae]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-4abdd0ae]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-b753474e] {
+.cn-dashboard-page__date-pill--active[data-v-4abdd0ae] {
 	background: var(--color-primary-element);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-dashboard-page__date-pill--active[data-v-b753474e]:hover {
+.cn-dashboard-page__date-pill--active[data-v-4abdd0ae]:hover {
 	background: var(--color-primary-element-hover, var(--color-primary-element));
 }
 
 /* The custom-range pill is de-emphasised — dashed outline, muted text —
    so it reads as an escape hatch rather than a primary option. */
-.cn-dashboard-page__date-pill--custom[data-v-b753474e] {
+.cn-dashboard-page__date-pill--custom[data-v-4abdd0ae] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-4abdd0ae] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-b753474e] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-4abdd0ae] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-4abdd0ae] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-4abdd0ae] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-b753474e] {
+.cn-dashboard-page__empty[data-v-4abdd0ae] {
 	padding: 60px 20px;
 }
 
 /* The page's view switch on a page without a header row: at the end of its
    own row, above the grids, where the header would have put it. */
-.cn-dashboard-page__view-switch[data-v-b753474e] {
+.cn-dashboard-page__view-switch[data-v-4abdd0ae] {
 	display: flex;
 	justify-content: flex-end;
 	margin-bottom: 12px;
 }
 
 /* A view the switch shows with nothing to draw. */
-.cn-page-view-region--empty[data-v-b753474e] {
+.cn-page-view-region--empty[data-v-4abdd0ae] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-b753474e] {
+.cn-dashboard-page__page-filters[data-v-4abdd0ae] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-b753474e] {
+.cn-dashboard-page__page-filter[data-v-4abdd0ae] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-b753474e] {
+.cn-dashboard-page__page-filter-label[data-v-4abdd0ae] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-b753474e] {
+.cn-dashboard-page__widget-edit[data-v-4abdd0ae] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -37771,8 +38116,8 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    and centre the card. */
 /* `safe` centre so an overflowing tile does not spill out of the top, where
    flex overflow cannot be scrolled back to. Same as detail-page.css. */
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-b753474e] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-4abdd0ae] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-4abdd0ae] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -37788,7 +38133,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    shows up as a scrollbar the user has to drag to see the whole graph. Same
    shape as the card-fit rule above, minus the padding: chart tiles render
    `flush`, and apexcharts already draws its own margins. */
-.cn-dashboard-page__chart-fit[data-v-b753474e] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-4abdd0ae] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -37798,13 +38143,13 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* Card content (stat / gauge / delta) must fit the tile width: let the
    widget shrink and its value/label truncate instead of pushing past the
    tile edge (the horizontal clip on long currency values). */
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-b753474e] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-4abdd0ae] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-4abdd0ae] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-4abdd0ae] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-b753474e] {
+.cn-dashboard-page__unknown[data-v-4abdd0ae] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -37815,29 +38160,29 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-b753474e] {
+.cn-dashboard-page__content[data-v-4abdd0ae] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-b753474e] {
+.cn-dashboard-page__content-item[data-v-4abdd0ae] {
 	width: 100%;
 }
 /* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
    are 44px: the widget Actions menu and the KPI tiles. */
 @media (max-width: 640px) {
-.cn-dashboard-page--board[data-v-b753474e] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-b753474e] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-4abdd0ae] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-4abdd0ae] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-b753474e] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-4abdd0ae] {
 		min-height: 44px;
 }
 }
 
 /* What a registry widget reports for its card header (`header` event): the
    note beside the link ("3 in total") and one action, as on a detail page. */
-.cn-dashboard-page__widget-count[data-v-b753474e] {
+.cn-dashboard-page__widget-count[data-v-4abdd0ae] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -37846,13 +38191,13 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-b753474e] {
+.cn-dashboard-page__widget-note[data-v-4abdd0ae] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-b753474e] {
+.cn-dashboard-page__widget-action[data-v-4abdd0ae] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -37868,7 +38213,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-b753474e]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-4abdd0ae]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -40202,33 +40547,51 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-reports-page[data-v-7597ff10] {
+.cn-reports-page[data-v-327b60f8] {
 	padding: 16px;
 }
 
 /* Clear the Nextcloud navigation toggle button (44px wide, absolutely
    positioned at the left edge of .app-content) plus 12px breathing room, as
    CnPageHeader does. Only the header shifts; the body keeps the full width. */
-.cn-reports-page__header[data-v-7597ff10] {
+.cn-reports-page__header[data-v-327b60f8] {
 	padding-inline-start: 56px;
 }
-.cn-reports-page__title[data-v-7597ff10] {
+.cn-reports-page__title[data-v-327b60f8] {
 	margin: 0 0 4px;
 }
-.cn-reports-page__description[data-v-7597ff10] {
+.cn-reports-page__heading-row[data-v-327b60f8] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px 24px;
+}
+.cn-reports-page__heading-row .cn-reports-page__title[data-v-327b60f8] {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+.cn-reports-page__header-buttons[data-v-327b60f8] {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+.cn-reports-page__description[data-v-327b60f8] {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__filter[data-v-7597ff10] {
+.cn-reports-page__filter[data-v-327b60f8] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	margin-bottom: 16px;
 }
-.cn-reports-page__filter-select[data-v-7597ff10] {
+.cn-reports-page__filter-select[data-v-327b60f8] {
 	min-width: 220px;
 }
-.cn-reports-page__grid[data-v-7597ff10] {
+.cn-reports-page__grid[data-v-327b60f8] {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 	gap: 12px;
@@ -40236,7 +40599,7 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	margin: 0;
 	padding: 0;
 }
-.cn-reports-page__card[data-v-7597ff10] {
+.cn-reports-page__card[data-v-327b60f8] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -40247,22 +40610,22 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	color: inherit;
 	text-decoration: none;
 }
-.cn-reports-page__card[data-v-7597ff10]:hover,
-.cn-reports-page__card[data-v-7597ff10]:focus {
+.cn-reports-page__card[data-v-327b60f8]:hover,
+.cn-reports-page__card[data-v-327b60f8]:focus {
 	background-color: var(--color-background-hover);
 }
-.cn-reports-page__card-title[data-v-7597ff10] {
+.cn-reports-page__card-title[data-v-327b60f8] {
 	font-weight: bold;
 }
-.cn-reports-page__card-description[data-v-7597ff10],
-.cn-reports-page__card-category[data-v-7597ff10] {
+.cn-reports-page__card-description[data-v-327b60f8],
+.cn-reports-page__card-category[data-v-327b60f8] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-reports-page__empty[data-v-7597ff10] {
+.cn-reports-page__empty[data-v-327b60f8] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-reports-page__widgets[data-v-7597ff10] {
+.cn-reports-page__widgets[data-v-327b60f8] {
 	margin-top: 20px;
 }