@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/dist/esm/nextcloud-vue.css

@@ -79,9 +79,14 @@
  * counterpart default to one.
  */
 .cn-look-board {
-	/* Page content area: padding, max width, gap between blocks. */
+	/* Page content area: padding, max width, gap between blocks. The content
+	   spans the whole content area (screens-one-scroller-parity): grids grow
+	   with the window and shrink only when the sidebar takes its share. A
+	   1240px cap left dead space right of the content, and on a dashboard,
+	   which scrolled itself, put the scrollbar beside the content instead of
+	   at the window edge. */
 	--cn-board-content-padding: 24px 28px;
-	--cn-board-content-max-width: 1240px;
+	--cn-board-content-max-width: none;
 	--cn-board-section-gap: 20px;
 	/* Buttons and inputs. */
 	--cn-board-control-height: 40px;
@@ -121,6 +126,15 @@
 	gap: var(--cn-board-section-gap);
 }
 
+/* One scroller: the content area. CnDashboardPage scrolls itself
+   (`height: 100%; overflow-y: auto`), which nested a second scrollbar inside
+   NcAppContent's; under the board look the page grows with its widgets and
+   NcAppContent, which already spans to the window edge, scrolls it. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) {
+	height: auto;
+	overflow-y: visible;
+}
+
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-settings-page:not(.cn-look-nextcloud *) .cn-page-header,
 .cn-look-board .cn-index-page:not(.cn-look-nextcloud *) .cn-index-page__below-header,
@@ -234,6 +248,27 @@
 	gap: 2px;
 }
 
+/* No scrollbars inside the navigation (screens-one-scroller-parity).
+   NcAppNavigation gives the region above the list `overflow-y: scroll`, an
+   always-on track (with arrow buttons on classic scrollbars) beside the
+   primary action that has nothing to scroll. It takes its content's height
+   instead. A menu taller than the window still scrolls (wheel, touch, focus),
+   without drawing a bar of its own; the one visible scrollbar is the page's. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body:not(.app-navigation__body--no-list) {
+	flex-shrink: 0;
+	overflow: visible;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list {
+	scrollbar-width: none;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list::-webkit-scrollbar,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__body--no-list::-webkit-scrollbar {
+	display: none;
+}
+
 /* The board's vertical rhythm (AppZijbalk): the primary action 20px from the
    top, the list 20px under it, entries 2px apart. An empty search slot is a
    flex child too and pushed everything 20px down, so it goes. */
@@ -587,6 +622,78 @@
 .cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
 	font-weight: 600;
 }
+
+/* ---- 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
+   between rows, the title 15px weight 600 and the meta 13px muted. A row is a
+   link, but only the hover says so: no underline on any text run, however the
+   host styles its links (`!important`, because a host rule such as
+   `#content a` outranks any class). The pill and the date sit at the right. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list {
+	padding: 0 24px 10px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--rows .cn-record-list__item + .cn-record-list__item {
+	border-top: 1px solid var(--color-border-dark, var(--color-border));
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 14px 0;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row:focus-visible,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row * {
+	color: inherit;
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__title {
+	color: var(--color-main-text);
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__meta {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__trailing {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 600;
+}
+
+/* Hover: the whole row takes the hover ground, 8px beyond the text so the
+   text does not move. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	border-radius: 8px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--link:hover .cn-record-list__title {
+	text-decoration: none !important;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__aside {
+	margin-inline-start: auto;
+}
+
+/* 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;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -874,6 +981,20 @@
 	min-height: var(--cn-field-height);
 }
 
+/* NcTextField draws its input inside `.input-field__main-wrapper`, which has a
+   FIXED height (`--default-clickable-area`, 34px on Nextcloud 34) and a 2px
+   padding ring for the focus outline. The min-height above makes the input
+   40px, so without this the input overflowed its wrapper by 6px and the help
+   line under it, which starts at the wrapper's bottom edge, sat behind the
+   input's lower border. NcSelect grows with its content, which is why only
+   plain inputs showed it. The wrapper now takes the field height plus its
+   padding ring, so the input fits and the help line starts below it.
+   @spec openspec/changes/form-draft-on-change-and-help-text-spacing/specs/form-draft-on-change-and-help-text-spacing/spec.md#requirement-help-text-starts-below-every-input */
+.cn-look-board .cn-form-dialog__field .input-field__main-wrapper,
+.cn-look-board .cn-form-page__field .input-field__main-wrapper {
+	height: calc(var(--cn-field-height) + 2 * var(--border-width-input-focused, 2px));
+}
+
 .cn-look-board .cn-form-dialog__field textarea,
 .cn-look-board .cn-form-page__field textarea {
 	padding: 10px 12px;
@@ -1481,7 +1602,8 @@
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
-.cn-look-board .cn-actions-bar__filter-button.button-vue {
+.cn-look-board .cn-actions-bar__filter-button.button-vue,
+.cn-look-board .cn-actions-bar__filter-menu .button-vue {
 	min-height: 36px;
 	height: 36px;
 	border-radius: 8px;
@@ -1533,6 +1655,15 @@
 	color: var(--color-main-text);
 }
 
+/* A segment the page cannot open: drawn, as the boards do, but faded and inert. */
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled,
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-toggle .cn-actions-bar__view-toggle-btn--disabled:hover {
+	background: transparent !important;
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+
 /* The search field: 40px, radius 8, not a pill. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__search {
 	flex: 1 1 260px;
@@ -1680,11 +1811,58 @@
 	border-bottom: 0;
 }
 
-/* The selection column: 28px, 18px checkboxes. */
+/* The table fits its card (screens-index-table-fit-parity). Under the auto
+   layout every one-line cell asked for its whole text up to the 22rem cap, so
+   seven text columns made a 1500px table in a 1118px card at a 1440px
+   viewport: the last columns and the row menus sat past the card's edge. The
+   fixed layout shares the card's width: the selection and menu columns keep
+   their own width, the first data column takes 18%, the others split the
+   rest, and a value that does not fit is cut with an ellipsis (its full text
+   stays in the cell's tooltip). A column's own `width` still wins. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title {
+	width: 18%;
+}
+
+/* The board's data cells sit 12px apart (PqTickets), the first one 18px from
+   the selection column; the selection and menu columns keep 16px. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon),
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td:not(.cn-table-col--checkbox):not(.cn-table-col--actions):not(.cn-table-col--icon) {
+	padding-inline: 12px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th.cn-table-head--title,
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td.cn-table-col--title {
+	padding-inline-start: 18px;
+}
+
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table td > .cn-cell-renderer {
+	display: block;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A narrow header cuts its label, not its filter funnel. */
+.cn-look-board .cn-index-page__main--table .cn-table-container--board .cn-data-table th .cn-table-header__sort:has(~ .cn-table-header__filter) {
+	max-width: calc(100% - 26px);
+}
+
+/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+   The box model is set with `!important` and the widths include the padding:
+   Nextcloud's server.css sets `box-sizing: border-box` on everything under
+   `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
+   `content-box` here was ignored and the cell left 12px for the checkbox (the
+   header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
-	box-sizing: content-box;
-	width: 28px;
-	min-width: 28px;
+	box-sizing: border-box !important;
+	width: 44px;
+	min-width: 44px;
 	padding-inline: 16px 0;
 	text-align: start;
 }
@@ -1732,6 +1910,29 @@
 	font-size: 13px;
 }
 
+/* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
+   the name, the e-mail under the name beside it. The name keeps the title's
+   weight and size, and its underline: an inline-flex box is atomic, so the
+   cell's own underline does not reach it. */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar {
+	gap: 10px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: none;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
@@ -1742,10 +1943,12 @@
 	line-height: 1.4;
 }
 
-/* The row menu column holds one 34px button. */
+/* The row menu column holds one 34px button between 16px of padding, so 66px
+   border to border (see the selection column for why the box model is forced). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--actions {
-	width: 34px;
-	min-width: 0;
+	box-sizing: border-box !important;
+	width: 66px;
+	min-width: 66px;
 	padding-inline: 16px;
 	text-align: end;
 }
@@ -2371,6 +2574,25 @@
 	white-space: nowrap;
 }
 
+/* The secondary line of the growing column ("2026-0004" under a case title)
+   is a line of its own with its own ellipsis. The cell does not wrap, so in
+   the board look, where the secondary line is an inline block (the title
+   underline cannot reach an atomic inline box), it stayed on the title's line
+   and ran out of the tile. A full-width float is a block (computed `display:
+   block`) that always starts under the line before it, and, being out of the
+   flow, the cell's underline does not reach it either. The cell is a table
+   cell, which contains its floats, so the row grows to hold the line.
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-the-secondary-line-of-a-narrow-tables-growing-column-sits-under-the-value */
+.cn-data-table.cn-data-table--fit td.cn-table-col--grow .cn-table-cell__secondary {
+	float: inline-start;
+	clear: both;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -3569,6 +3791,38 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-weight: 400;
 }
 
+/* A caption on a line of its own wraps, up to two lines (DqDashboard: "haalden
+   hun termijn, naar doorlooptijd" runs over two lines in a narrow tile). The
+   one-line rule of `.cn-kpi-card__label` is for a caption BESIDE the number,
+   where a second line would push the tile taller; this line has the width of
+   the tile to itself. The clamp is safe here because the element is a plain
+   span, not a flex row (compare the title note above).
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-a-kpi-tiles-caption-and-board-label-wrap-to-two-lines */
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Board look: the label wraps too, up to two lines, beside its icon badge
+   ("Afgehandeld deze maand"). The clamp sits on the label's own span
+   (`cn-kpi-card__title-text`), not on the title row, which stays the flex row
+   that carries the badge or the range select. */
+.cn-kpi-card--board .cn-kpi-card__title-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 /* The 18px glyph before the label, drawn only on a link tile. */
 .cn-kpi-card--board .cn-kpi-card__title {
 	display: flex;
@@ -4861,6 +5115,77 @@ a.cn-kpi-card--board * {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
+
+/* An index page with cards beside its list (`sidePanel`,
+   screens-index-stat-row): the header rows span the page, the toolbar and the
+   list take the first column and the side panel the second (300px, 20px
+   apart), spanning both. Every other child (dialogs, the inline sidebar) sits
+   in a zero-height area after them. The list row is the flexible one, so a
+   side panel taller than the toolbar never opens a gap under the toolbar.
+   Below 1024px the panel moves above the toolbar. */
+.cn-index-page--with-side-panel {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) var(--cn-index-side-panel-width, 300px);
+	grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+	grid-template-areas:
+		"head head"
+		"below below"
+		"stats stats"
+		"bar side"
+		"body side"
+		"extra extra";
+	column-gap: 20px;
+	align-content: start;
+}
+
+.cn-index-page--with-side-panel > * {
+	grid-area: extra;
+	min-width: 0;
+}
+
+.cn-index-page--with-side-panel > :first-child {
+	grid-area: head;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__below-header {
+	grid-area: below;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__stat-row {
+	grid-area: stats;
+}
+
+.cn-index-page--with-side-panel > .cn-actions-bar {
+	grid-area: bar;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__body {
+	grid-area: body;
+}
+
+.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+	grid-area: side;
+	align-self: start;
+}
+
+@media (max-width: 1024px) {
+	.cn-index-page--with-side-panel {
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-areas:
+			"head"
+			"below"
+			"stats"
+			"side"
+			"bar"
+			"body"
+			"extra";
+		grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
+	}
+
+	.cn-index-page--with-side-panel > .cn-index-page__side-panel {
+		margin-bottom: 20px;
+	}
+}
 /* CnIndexSidebar — NcAppSidebar wrapper styles */
 
 /* Tab content: limit height to container so overflow shows a scrollbar */
@@ -5859,6 +6184,61 @@ a.cn-kpi-card--board * {
 	margin-bottom: 0;
 }
 
+/* The breadcrumb is a line of 14px text between the pills and the meta, as
+   the boards draw it (screens-detail-header-row-parity). NcBreadcrumbs grows to
+   the full row and draws each crumb as a 34px tertiary button, which pushed the
+   pills above it and the meta under it. The doubled class outranks its scoped
+   rules. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs.cn-detail-page__breadcrumbs {
+	flex: 0 1 auto;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	width: auto;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .breadcrumb__crumbs {
+	gap: 8px;
+	margin: 0;
+	min-height: 0;
+	padding: 0;
+	vertical-align: middle;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb.vue-crumb {
+	gap: 8px;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
+	background: transparent;
+	border: 0;
+	font-size: 14px;
+	font-weight: 400;
+	height: auto;
+	min-height: 0;
+	min-width: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue__text {
+	font-weight: inherit;
+	line-height: 20px;
+	padding: 0;
+}
+
+/* The list is the link; the record's own crumb is plain muted text. */
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue[aria-current='page'] {
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb__separator {
+	margin: 0;
+}
+
 .cn-look-board .cn-detail-page__header-dot,
 .cn-look-board .cn-detail-page__header-meta {
 	color: var(--color-text-maxcontrast);
@@ -5919,6 +6299,15 @@ a.cn-kpi-card--board * {
 	gap: 4px;
 }
 
+/* No inner scroller: tabs that do not fit the width wrap onto a second row
+   instead of scrolling sideways (the library's default strip), so the strip
+   has no scrollbar, no clipped tab and no fade or chevron to find the rest. */
+.cn-look-board .cn-tabs--board .cn-tabs__nav {
+	flex-wrap: wrap;
+	overflow: visible;
+	row-gap: 4px;
+}
+
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -6001,6 +6390,22 @@ a.cn-kpi-card--board * {
 	border-radius: 0;
 }
 
+/* A tab that holds a stack (`widgetIds`, screens-relation-pages): the panel
+   draws no frame and no padding; each widget is its own card. The first card
+   joins the open tab (the first-card rule above), the next ones stand 20px
+   apart, as the Overzicht of DqContact and PqOrganisatie draws them. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content:has(> .cn-tab:not([hidden]) > .cn-tabs-widget__stack) {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	padding: 0;
+}
+
+/* The stack's next cards are whole cards, not joined to the strip. */
+.cn-look-board .cn-tabs--board .cn-tabs__content .cn-tab .cn-tabs-widget__stack-item .cn-widget-wrapper {
+	border-radius: var(--cn-board-card-radius);
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
@@ -6048,12 +6453,28 @@ a.cn-kpi-card--board * {
 	padding: 0 0 10px;
 }
 
-.cn-look-board .cn-object-data-widget__label {
-	color: var(--color-text-maxcontrast);
+/* Outranks the component's own `.cn-object-data-widget__label[data-v-...]`
+   (weight 500, 0.85em, which has the same specificity as the look's rule and
+   wins on source order wherever a bundle, such as a companion app's, loads
+   after this stylesheet), through the grid the labels sit in. Measured live:
+   the labels read bold and dark where the boards (DqContact, PqKlant, ShKlant)
+   draw them 13px, regular weight and light grey.
+
+   The colour carries `!important`: a theme (nldesign's element overrides) sets
+   the ink of every `div` outside the header with a selector that has an id in
+   its `:not()`, which no class rule outranks. */
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__label {
+	color: var(--color-text-maxcontrast) !important;
 	font-size: 13px;
 	font-weight: 400;
 }
 
+/* The facts card's labels: the same light grey, regular weight. */
+.cn-look-board .cn-facts-widget .cn-facts-widget__label {
+	color: var(--color-text-maxcontrast);
+	font-weight: 400;
+}
+
 .cn-look-board .cn-object-data-widget__value {
 	font-weight: 500;
 }
@@ -6080,6 +6501,12 @@ a.cn-kpi-card--board * {
 	display: none;
 }
 
+/* A side card whose widget reports a header action (screens-relation-pages:
+   the "+ Toevoegen" of Contactkanalen and Relaties) keeps that one button. */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__actions:has(.cn-detail-page__catalog-action) {
+	display: flex;
+}
+
 /* The notice at the top of the side column: radius 12, padding 14px 16px. */
 .cn-look-board .cn-detail-page__side-item--notice .cn-widget-wrapper,
 .cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
@@ -6305,6 +6732,15 @@ a.cn-kpi-card--board * {
 	font-size: 13px;
 	margin: 2px 0 0;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) is positioned over the content's top-right
+   corner, which in this look is the header's last button: a stray square icon
+   on "More". The board draws none, so it is hidden on a detail page and the
+   header menu offers "Open sidebar" instead. */
+.cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
+	display: none;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -9427,11 +9863,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-weight: 700;
 	line-height: 1;
 }
+.cn-cell-renderer__avatar-text[data-v-37d7b88f] {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
 .cn-cell-renderer__avatar-name[data-v-37d7b88f] {
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	/* The name is the cell's text: it keeps the weight, size and colour the
+	   cell sets, as a plain value does. */
+	font: inherit;
+	color: inherit;
+}
+.cn-cell-renderer__avatar-secondary[data-v-37d7b88f] {
+	min-width: 0;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.35;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	white-space: nowrap;
 }
 
 /* A date that matched a rule is also set in a heavier weight, so the signal
@@ -9447,6 +9903,77 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .cn-cell-renderer__age[data-v-37d7b88f] {
 	white-space: nowrap;
 }
+
+/* The progress cell (abstract-progress-cell): a 56 x 8 bar, the percentage
+   8px beside it in the bar's tone, and an optional age badge after them, as
+   PqLeads' Winkans column. The value is bold, so the tone is not the only signal. */
+.cn-cell-renderer__progress[data-v-37d7b88f] {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px 8px;
+}
+.cn-cell-renderer__progress-line[data-v-37d7b88f] {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	white-space: nowrap;
+}
+.cn-cell-renderer__progress-bar[data-v-37d7b88f] {
+	display: inline-block;
+	width: 56px;
+	height: 8px;
+	border-radius: 4px;
+	background: var(--color-background-dark);
+	overflow: hidden;
+}
+.cn-cell-renderer__progress-fill[data-v-37d7b88f] {
+	display: block;
+	height: 100%;
+}
+.cn-cell-renderer__progress-fill--success[data-v-37d7b88f] {
+	background: var(--color-element-success, var(--color-success));
+}
+.cn-cell-renderer__progress-fill--warning[data-v-37d7b88f] {
+	background: var(--color-element-warning, var(--color-warning));
+}
+.cn-cell-renderer__progress-fill--error[data-v-37d7b88f] {
+	background: var(--color-element-error, var(--color-error));
+}
+.cn-cell-renderer__progress-value[data-v-37d7b88f] {
+	font-size: 14px;
+	font-weight: 700;
+}
+.cn-cell-renderer__progress-value--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-cell-renderer__progress-value--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-cell-renderer__progress-value--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+}
+.cn-cell-renderer__progress-badge[data-v-37d7b88f] {
+	display: inline-block;
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+.cn-cell-renderer__progress-badge--error[data-v-37d7b88f] {
+	color: var(--color-text-error, var(--color-error-text));
+	background: var(--color-error-hover, var(--color-background-dark));
+	background: color-mix(in srgb, var(--color-error) 12%, transparent);
+}
+.cn-cell-renderer__progress-badge--warning[data-v-37d7b88f] {
+	color: var(--color-text-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+}
+.cn-cell-renderer__progress-badge--success[data-v-37d7b88f] {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-success) 12%, transparent);
+}
 .cn-cell-renderer__age--success[data-v-37d7b88f] {
 	color: var(--color-text-success, var(--color-success-text));
 }
@@ -9779,6 +10306,25 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	white-space: nowrap;
 }
 
+/* The secondary line of the growing column ("2026-0004" under a case title)
+   is a line of its own with its own ellipsis. The cell does not wrap, so in
+   the board look, where the secondary line is an inline block (the title
+   underline cannot reach an atomic inline box), it stayed on the title's line
+   and ran out of the tile. A full-width float is a block (computed `display:
+   block`) that always starts under the line before it, and, being out of the
+   flow, the cell's underline does not reach it either. The cell is a table
+   cell, which contains its floats, so the row grows to hold the line.
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-the-secondary-line-of-a-narrow-tables-growing-column-sits-under-the-value */
+.cn-data-table.cn-data-table--fit td.cn-table-col--grow .cn-table-cell__secondary {
+	float: inline-start;
+	clear: both;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .cn-data-table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -14884,6 +15430,70 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	white-space: nowrap;
 	color: var(--color-text-maxcontrast);
 }
+.cn-files-browser__col-select[data-v-f5bdd9e2] {
+	width: 36px;
+	text-align: center;
+}
+.cn-files-browser__select[data-v-f5bdd9e2] {
+	width: 18px;
+	height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+.cn-files-browser__bulk-bar[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	border-radius: var(--border-radius-large);
+	background: var(--color-primary-element-light);
+}
+.cn-files-browser__bulk-count[data-v-f5bdd9e2] {
+	font-weight: 600;
+	margin-inline-end: 8px;
+}
+.cn-files-browser__facets[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 16px;
+}
+.cn-files-browser__facet[data-v-f5bdd9e2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.cn-files-browser__facet-chip[data-v-f5bdd9e2] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+.cn-files-browser__facet-chip--active[data-v-f5bdd9e2] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+.cn-files-browser__group-heading[data-v-f5bdd9e2] {
+	padding: 12px 8px 4px;
+	text-align: start;
+	font-weight: 700;
+}
+.cn-files-browser__group-count[data-v-f5bdd9e2] {
+	margin-inline-start: 6px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+.cn-files-browser__no-match[data-v-f5bdd9e2] {
+	padding: 16px 8px;
+	color: var(--color-text-maxcontrast);
+}
 .cn-files-browser__col-actions[data-v-f5bdd9e2] {
 	width: 48px;
 }
@@ -21210,6 +21820,38 @@ a.cn-kpi-card--stacked:focus-visible {
 	font-weight: 400;
 }
 
+/* A caption on a line of its own wraps, up to two lines (DqDashboard: "haalden
+   hun termijn, naar doorlooptijd" runs over two lines in a narrow tile). The
+   one-line rule of `.cn-kpi-card__label` is for a caption BESIDE the number,
+   where a second line would push the tile taller; this line has the width of
+   the tile to itself. The clamp is safe here because the element is a plain
+   span, not a flex row (compare the title note above).
+   @spec openspec/changes/dashboard-tile-text-fits/specs/dashboard-tile-text-fits/spec.md#requirement-a-kpi-tiles-caption-and-board-label-wrap-to-two-lines */
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
+/* Board look: the label wraps too, up to two lines, beside its icon badge
+   ("Afgehandeld deze maand"). The clamp sits on the label's own span
+   (`cn-kpi-card__title-text`), not on the title row, which stays the flex row
+   that carries the badge or the range select. */
+.cn-kpi-card--board .cn-kpi-card__title-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	white-space: normal;
+	overflow-wrap: break-word;
+}
+
 /* The 18px glyph before the label, drawn only on a link tile. */
 .cn-kpi-card--board .cn-kpi-card__title {
 	display: flex;
@@ -21507,6 +22149,59 @@ a.cn-kpi-card--board * {
 	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-4f8583ef] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	box-sizing: border-box;
+	padding: 20px 22px;
+}
+.cn-stats-block-widget__rows-title[data-v-4f8583ef] {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+}
+.cn-stats-block-widget__rows[data-v-4f8583ef] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	font-size: 14px;
+}
+.cn-stats-block-widget__row[data-v-4f8583ef] {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 16px;
+}
+.cn-stats-block-widget__row-label[data-v-4f8583ef] {
+	min-width: 0;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-stats-block-widget__row-value[data-v-4f8583ef] {
+	flex: none;
+	margin: 0;
+	font-size: 17px;
+	font-weight: 700;
+	text-align: right;
+}
+.cn-stats-block-widget__row-value--success[data-v-4f8583ef] {
+	color: var(--color-text-success, var(--color-success-text));
+}
+.cn-stats-block-widget__row-value--warning[data-v-4f8583ef] {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+.cn-stats-block-widget__row-value--error[data-v-4f8583ef] {
+	color: var(--color-text-error, var(--color-error-text));
+}
+.cn-stats-block-widget__row-value--primary[data-v-4f8583ef] {
+	color: var(--color-primary-element);
+}
+
 
 .cn-stats-block-form[data-v-20f3b26f] {
 	display: flex;
@@ -22025,6 +22720,20 @@ to { background-position: -200% 0;
 .cn-banner-widget__card[data-v-3531692f] {
 	margin: 0;
 }
+.cn-banner-widget__line[data-v-3531692f] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: 4px 20px;
+}
+.cn-banner-widget__lead[data-v-3531692f] {
+	font-weight: 700;
+}
+.cn-banner-widget__link[data-v-3531692f] {
+	margin-inline-start: auto;
+	font-size: 14px;
+	font-weight: 600;
+}
 .cn-banner-widget__text--clickable[data-v-3531692f] {
 	cursor: pointer;
 	text-decoration: underline;
@@ -22108,6 +22817,28 @@ to { background-position: -200% 0;
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
+
+/* Stacked (PqMijnWerk "Begin hier"): the text, then the action under it. */
+.cn-banner-widget--stacked[data-v-3531692f] {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 10px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__body[data-v-3531692f] {
+	flex: 0 0 auto;
+	gap: 10px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__title[data-v-3531692f] {
+	font-size: 16px;
+	line-height: 1.4;
+}
+.cn-banner-widget--stacked .cn-banner-widget__reason[data-v-3531692f] {
+	font-size: 14px;
+}
+.cn-banner-widget--stacked .cn-banner-widget__action[data-v-3531692f] {
+	min-height: var(--cn-board-control-height, 40px);
+	font-size: 14px;
+}
 .cn-banner-widget__actions[data-v-3531692f] {
 	display: flex;
 	flex-wrap: wrap;
@@ -22279,6 +23010,18 @@ to { background-position: -200% 0;
 	box-shadow: 0 1px 2px var(--color-box-shadow);
 }
 
+/* On a phone (screens-dashboard-phone) the compact group's segments are 44px
+   high touch targets, and the group wraps onto a second row instead of
+   running off the screen. */
+@media (max-width: 640px) {
+.cn-segmented-control.cn-segmented-control--compact[data-v-7b344b4f] {
+		flex-wrap: wrap;
+}
+.cn-segmented-control.cn-segmented-control--compact .cn-segmented-control__option[data-v-7b344b4f] {
+		min-height: 44px;
+}
+}
+
 
 .cn-header-widget[data-v-1b97430f] {
 	width: 100%;
@@ -23103,6 +23846,13 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+.cn-form-page__honeypot {
+	position: absolute;
+	left: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
 .cn-form-page {
 	display: flex;
 	flex-direction: column;
@@ -23239,6 +23989,27 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+.cn-detail-page__catalog-action[data-v-76c1b60f] {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+	white-space: nowrap;
+}
+.cn-detail-page__catalog-note[data-v-76c1b60f] {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
 .cn-detail-widget-host[data-v-76c1b60f],
 .cn-detail-widget-host[data-v-76c1b60f] > * {
 	height: 100%;
@@ -23528,6 +24299,33 @@ button.cn-stepper__step[data-v-19697746] {
 }
 
 
+/* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
+.cn-tabs-widget__stack[data-v-1dbd6122] {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+/* 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-1dbd6122] {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	align-items: stretch;
+}
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] > * {
+	min-width: 0;
+}
+@media (max-width: 700px) {
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] {
+		grid-template-columns: minmax(0, 1fr);
+}
+.cn-tabs-widget__stack--grid[data-v-1dbd6122] > * {
+		grid-column: auto !important;
+}
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -23644,6 +24442,14 @@ button.cn-stepper__step[data-v-19697746] {
 .cn-tabs-widget__tabs[data-v-1dbd6122] .cn-tab {
 	height: 100%;
 }
+
+/* A list widget's footer Add bleeds through its card's 16px content padding
+   (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-1dbd6122] .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-1dbd6122] {
 	align-items: center;
 	display: inline-flex;
@@ -27599,6 +28405,50 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	font-variant-numeric: tabular-nums;
 }
 
+/* List variant, after the dashboard board's My tasks card: a checkbox, the
+   title, the subject on a muted second line and the due date at its right. */
+.cn-tasks-widget--list .cn-tasks-widget__row[data-v-ff399342] {
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px 0;
+}
+.cn-tasks-widget--list .cn-tasks-widget__name[data-v-ff399342] {
+	font-weight: 400;
+	font-size: 15px;
+	line-height: 1.35;
+	color: var(--color-main-text);
+}
+.cn-tasks-widget__check[data-v-ff399342],
+.cn-tasks-widget__check-spacer[data-v-ff399342] {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin: 1px 0 0;
+}
+.cn-tasks-widget__check[data-v-ff399342] {
+	accent-color: var(--color-primary-element);
+	cursor: pointer;
+}
+.cn-tasks-widget__meta--split[data-v-ff399342] {
+	display: flex;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 13px;
+	overflow: visible;
+}
+.cn-tasks-widget__subject[data-v-ff399342] {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-tasks-widget--list .cn-tasks-widget__due[data-v-ff399342] {
+	font-size: 13px;
+	font-weight: 500;
+}
+.cn-tasks-widget--list .cn-tasks-widget__due--overdue[data-v-ff399342] {
+	font-weight: 600;
+}
+
 /* Overdue: weight AND colour on top of the wording, which already says
    "Overdue by N days" — the signal survives monochrome. */
 .cn-tasks-widget__due--overdue[data-v-ff399342] {
@@ -27610,219 +28460,1214 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 }
 
 
-.cn-notepad-widget-form[data-v-c752df66] {
+.cn-sections-widget[data-v-ea4f8722] {
+	min-width: 0;
+}
+.cn-sections-widget__column[data-v-ea4f8722] {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: calc(var(--default-grid-baseline, 4px) * 4);
+	min-width: 0;
 }
 
+/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */
+.cn-sections-widget--two-column[data-v-ea4f8722] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(280px, 418px);
+	gap: 20px;
+	align-items: start;
+}
+@media (max-width: 1024px) {
+.cn-sections-widget--two-column[data-v-ea4f8722] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
 
-.cn-notepad-widget {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	height: 100%;
-	min-height: var(--cn-notepad-min-height, 120px);
+/* A host page may space every <section>; these sections are spaced by the column gap only. */
+.cn-sections-widget__section[data-v-ea4f8722] {
+	margin: 0;
+	min-width: 0;
 }
-.cn-notepad-widget__textarea {
-	flex: 1 1 auto;
-	width: 100%;
-	min-height: 80px;
-	resize: none;
-	border: none;
-	background: transparent;
-	color: var(--color-main-text);
-	font: inherit;
+
+/* A rule above a section that follows a shown one. */
+.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section[data-v-ea4f8722] {
+	padding-top: calc(var(--default-grid-baseline, 4px) * 4);
+	border-top: 1px solid var(--color-border);
 }
-.cn-notepad-widget__rendered {
-	flex: 1 1 auto;
-	overflow: auto;
-	cursor: text;
+
+/*
+ * An empty section keeps its host mounted (display: none still mounts it, so
+ * the widget fetches and can fill later) but takes no space, gap or rule.
+ */
+.cn-sections-widget__section--empty[data-v-ea4f8722] {
+	display: none;
+}
+.cn-sections-widget__heading[data-v-ea4f8722] {
+	margin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);
+	font-size: 16px;
+	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-notepad-widget__status {
-	margin: 0;
-	min-height: 1.2em;
+.cn-sections-widget__description[data-v-ea4f8722] {
+	margin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);
 	color: var(--color-text-maxcontrast);
-	font-size: 0.85em;
 }
-.cn-notepad-widget__status--failed {
-	color: var(--color-error-text, var(--color-error));
+
+/* One card per section. */
+.cn-sections-widget--cards .cn-sections-widget__column[data-v-ea4f8722] {
+	gap: 20px;
+}
+.cn-sections-widget--cards .cn-sections-widget__section[data-v-ea4f8722] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));
+	padding: var(--cn-board-card-padding, 16px 20px);
+}
+.cn-sections-widget--cards .cn-sections-widget__heading[data-v-ea4f8722] {
+	font-size: 18px;
+	margin-bottom: 12px;
 }
 
 
-.cn-data-form[data-v-10b5a40f] {
+.cn-facts-widget[data-v-2ca63011] {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	gap: 10px;
+	min-width: 0;
 }
-.cn-data-form__section[data-v-10b5a40f] {
-	margin: 8px 0 0;
-	font-size: 0.8em;
-	text-transform: uppercase;
-	letter-spacing: 0.03em;
-	color: var(--color-text-maxcontrast);
+.cn-facts-widget__rows[data-v-2ca63011] {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	margin: 0;
+	font-size: 14px;
 }
-.cn-data-form__hint[data-v-10b5a40f] {
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9em;
+
+/* Each row is a grid of its own children: the wrapper takes no box. */
+.cn-facts-widget__row[data-v-2ca63011] {
+	display: contents;
 }
-.cn-data-form__row2[data-v-10b5a40f] {
-	display: flex;
-	gap: 12px;
-	align-items: flex-end;
+
+/* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding), which
+   pushed the label to the right of its column and added 12px around both. The
+   class is doubled so these resets outrank that rule, and a dossiq-style
+   `:deep()` override in an app is not needed. */
+.cn-facts-widget__label.cn-facts-widget__label[data-v-2ca63011] {
+	margin: 0;
+	padding: 0;
+	text-align: start;
+	color: var(--color-text-maxcontrast);
 }
-.cn-data-form__row2[data-v-10b5a40f] > * {
-	flex: 1;
+.cn-facts-widget__value.cn-facts-widget__value[data-v-2ca63011] {
+	margin: 0;
+	padding: 0;
+	text-align: start;
+	font-weight: 500;
 	min-width: 0;
+	overflow-wrap: anywhere;
 }
-.cn-data-form__layout[data-v-10b5a40f] {
-	display: flex;
-	align-items: flex-end;
-	gap: 12px;
-	flex-wrap: wrap;
-}
-.cn-data-form__layout-label[data-v-10b5a40f] {
-	align-self: center;
+.cn-facts-widget__title[data-v-2ca63011] {
+	font-size: 15px;
 	font-weight: 600;
-}
-.cn-data-form__presets[data-v-10b5a40f] {
-	display: inline-flex;
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius-large, 8px);
-	overflow: hidden;
-}
-.cn-data-form__preset[data-v-10b5a40f] {
-	border: none;
-	background: var(--color-main-background);
 	color: var(--color-main-text);
-	padding: 6px 12px;
-	cursor: pointer;
-	border-inline-start: 1px solid var(--color-border);
-}
-.cn-data-form__preset[data-v-10b5a40f]:first-child {
-	border-inline-start: none;
 }
-.cn-data-form__preset--active[data-v-10b5a40f] {
-	background: var(--color-primary-element);
-	color: var(--color-primary-element-text);
-	font-weight: 600;
+.cn-facts-widget__line[data-v-2ca63011] {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
 }
-.cn-data-form__columns[data-v-10b5a40f] {
-	width: 90px;
-	flex: 0 0 auto;
+.cn-facts-widget__muted[data-v-2ca63011] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
 }
-.cn-data-form__prop[data-v-10b5a40f] {
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius-large, 8px);
-	padding: 8px 10px;
+.cn-facts-widget__label .hidden-visually[data-v-2ca63011] {
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
 }
-.cn-data-form__prop--hidden[data-v-10b5a40f] {
-	opacity: 0.6;
+.cn-facts-widget__label--icon[data-v-2ca63011] {
+	align-items: center;
+	display: flex;
 }
-.cn-data-form__prop--dragging[data-v-10b5a40f] {
-	opacity: 0.4;
-	border-style: dashed;
+.cn-facts-widget__value-link[data-v-2ca63011] {
+	color: var(--color-primary-element);
+	text-decoration: underline;
 }
-.cn-data-form__prop-head[data-v-10b5a40f] {
-	display: flex;
+.cn-facts-widget__inline-button[data-v-2ca63011],
+.cn-facts-widget__icon-button[data-v-2ca63011],
+.cn-facts-widget__action[data-v-2ca63011] {
 	align-items: center;
-	gap: 6px;
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
 }
-.cn-data-form__grip[data-v-10b5a40f] {
-	cursor: grab;
+.cn-facts-widget__inline-button[data-v-2ca63011] {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: 16px;
+	font-size: 13px;
+	font-weight: 600;
+	gap: 4px;
+	margin-inline-start: 8px;
+	min-height: 28px;
+	padding: 0 10px;
+}
+.cn-facts-widget__icon-button[data-v-2ca63011] {
+	background: transparent;
+	border: 0;
+	border-radius: 6px;
 	color: var(--color-text-maxcontrast);
-	letter-spacing: -2px;
-	user-select: none;
+	margin-inline-start: 4px;
+	padding: 2px;
+	vertical-align: middle;
 }
-.cn-data-form__prop-name[data-v-10b5a40f] {
-	font-weight: 600;
+.cn-facts-widget__icon-button[data-v-2ca63011]:hover,
+.cn-facts-widget__icon-button[data-v-2ca63011]:focus-visible {
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
 }
-.cn-data-form__prop-body[data-v-10b5a40f] {
-	display: grid;
-	grid-template-columns: 2fr 1fr 1fr 1.5fr;
-	gap: 10px;
-	align-items: center;
-	margin-top: 8px;
+.cn-facts-widget__text[data-v-2ca63011] {
+	color: var(--color-main-text);
+	font-size: 15px;
 }
 
-
-.cn-object-geo-form[data-v-42affc2f] {
+/* A lead: an icon tile or initials beside a bold title and a muted subtitle. */
+.cn-facts-widget__lead[data-v-2ca63011] {
+	align-items: center;
 	display: flex;
-	flex-direction: column;
 	gap: 12px;
 }
-.cn-object-geo-form__section[data-v-42affc2f] {
-	margin: 8px 0 0;
-	font-size: 0.8em;
-	text-transform: uppercase;
-	letter-spacing: 0.03em;
-	color: var(--color-text-maxcontrast);
+.cn-facts-widget__lead-tile[data-v-2ca63011] {
+	align-items: center;
+	background: var(--color-background-dark);
+	border-radius: 8px;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 14px;
+	font-weight: 700;
+	height: 40px;
+	justify-content: center;
+	width: 40px;
 }
-.cn-object-geo-form__hint[data-v-42affc2f] {
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9em;
-	margin: 0;
+.cn-facts-widget__lead-tile--success[data-v-2ca63011] {
+	background: color-mix(in srgb, var(--color-success) 14%, var(--color-main-background));
+	border-radius: 50%;
+	color: var(--color-success-text, var(--color-success));
 }
-
-
-.cn-audit-trail-form[data-v-41073462] {
+.cn-facts-widget__lead-tile--info[data-v-2ca63011] {
+	background: var(--color-primary-element-light);
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+.cn-facts-widget__lead-text[data-v-2ca63011] {
 	display: flex;
 	flex-direction: column;
-	gap: 12px;
+	min-width: 0;
 }
-.cn-audit-trail-form__hint[data-v-41073462] {
-	margin: 0;
-	font-size: 0.85em;
+.cn-facts-widget__lead-title[data-v-2ca63011] {
+	font-size: 15px;
+}
+.cn-facts-widget__lead-subtitle[data-v-2ca63011] {
 	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-facts-widget__action[data-v-2ca63011] {
+	align-self: flex-start;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+}
+.cn-facts-widget__action[data-v-2ca63011]:hover,
+.cn-facts-widget__action[data-v-2ca63011]:focus-visible {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+.cn-facts-widget__link[data-v-2ca63011] {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
 }
 
 
-.cn-kb-search-widget[data-v-e34f66e2] {
+.cn-field-list-widget[data-v-0f29a833] {
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
-	width: 100%;
-}
-.cn-kb-search-widget__bound[data-v-e34f66e2],
-.cn-kb-search-widget__status[data-v-e34f66e2],
-.cn-kb-search-widget__empty[data-v-e34f66e2],
-.cn-kb-search-widget__hint[data-v-e34f66e2] {
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9em;
-	margin: 0;
-}
-.cn-kb-search-widget__bound[data-v-e34f66e2] {
-	font-style: italic;
+	gap: 12px;
+	min-width: 0;
 }
-.cn-kb-search-widget__results[data-v-e34f66e2] {
+.cn-field-list-widget__rows[data-v-0f29a833] {
 	list-style: none;
-	padding: 0;
 	margin: 0;
+	padding: 0;
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
-}
-.cn-kb-search-widget__result[data-v-e34f66e2] {
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius);
-	padding: 8px 10px;
-	background: var(--color-main-background);
 }
-.cn-kb-search-widget__result-title[data-v-e34f66e2] {
-	font-weight: 600;
-	color: var(--color-main-text);
-	text-decoration: none;
+.cn-field-list-widget__row[data-v-0f29a833] {
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
 }
-.cn-kb-search-widget__result-title[data-v-e34f66e2]:hover {
-	color: var(--color-primary-element);
+.cn-field-list-widget__row[data-v-0f29a833]:first-child {
+	border-top: none;
+	padding-top: 0;
 }
-.cn-kb-search-widget__result-snippet[data-v-e34f66e2] {
-	font-size: 0.9em;
-	color: var(--color-text-maxcontrast);
-	margin-top: 4px;
+.cn-field-list-widget__line[data-v-0f29a833] {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	min-width: 0;
 }
-
+.cn-field-list-widget__avatar[data-v-0f29a833] {
+	flex: 0 0 auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	font-size: 12px;
+	font-weight: 700;
+}
+.cn-field-list-widget__main[data-v-0f29a833] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-field-list-widget__title[data-v-0f29a833] {
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__meta[data-v-0f29a833],
+.cn-field-list-widget__aside[data-v-0f29a833],
+.cn-field-list-widget__detail[data-v-0f29a833],
+.cn-field-list-widget__hint[data-v-0f29a833],
+.cn-field-list-widget__empty[data-v-0f29a833] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-field-list-widget__meta[data-v-0f29a833],
+.cn-field-list-widget__aside[data-v-0f29a833],
+.cn-field-list-widget__detail[data-v-0f29a833] {
+	font-size: 13px;
+}
+.cn-field-list-widget__aside[data-v-0f29a833] {
+	white-space: nowrap;
+}
+.cn-field-list-widget__detail[data-v-0f29a833],
+.cn-field-list-widget__hint[data-v-0f29a833],
+.cn-field-list-widget__empty[data-v-0f29a833] {
+	margin: 4px 0 0;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__add[data-v-0f29a833] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	gap: 8px 12px;
+}
+.cn-field-list-widget__add[data-v-0f29a833] > * {
+	flex: 1 1 180px;
+}
+.cn-field-list-widget__add > button[data-v-0f29a833] {
+	flex: 0 0 auto;
+}
+.cn-field-list-widget__toolbar[data-v-0f29a833] {
+	display: flex;
+	justify-content: flex-end;
+}
+.cn-field-list-widget__table-wrap[data-v-0f29a833] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	overflow-x: auto;
+}
+.cn-field-list-widget__table[data-v-0f29a833] {
+	width: 100%;
+	border-collapse: collapse;
+}
+.cn-field-list-widget__th[data-v-0f29a833] {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+.cn-field-list-widget__th--menu[data-v-0f29a833],
+.cn-field-list-widget__td--menu[data-v-0f29a833] {
+	width: 1%;
+	text-align: end;
+}
+.cn-field-list-widget__tr[data-v-0f29a833] {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-field-list-widget__td[data-v-0f29a833] {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+.cn-field-list-widget__sr[data-v-0f29a833] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+.cn-field-list-widget__band[data-v-0f29a833] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 12px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-warning);
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--color-warning) 14%, var(--color-main-background));
+	font-size: 14px;
+}
+
+
+.cn-settings-form[data-v-731c450f] {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	min-width: 0;
+}
+.cn-settings-form__grid[data-v-731c450f] {
+	display: grid;
+	gap: 14px 16px;
+	grid-template-columns: minmax(0, 1fr);
+}
+.cn-settings-form__grid--2[data-v-731c450f] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-settings-form__field[data-v-731c450f] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-settings-form__field--wide[data-v-731c450f] {
+	grid-column: 1 / -1;
+}
+.cn-settings-form__label[data-v-731c450f] {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+.cn-settings-form__control[data-v-731c450f] {
+	width: 100%;
+	box-sizing: border-box;
+	height: var(--cn-board-control-height, 40px);
+	padding: 0 12px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+}
+.cn-settings-form__file[data-v-731c450f] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-settings-form__control--file[data-v-731c450f] {
+	display: inline-flex;
+	align-items: center;
+	width: auto;
+	min-width: 120px;
+	flex: 0 1 auto;
+	overflow-wrap: anywhere;
+}
+.cn-settings-form__control--placeholder[data-v-731c450f] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__control--area[data-v-731c450f] {
+	height: auto;
+	padding: 10px 12px;
+	resize: vertical;
+}
+.cn-settings-form__control[data-v-731c450f]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 1px;
+}
+.cn-settings-form__hint[data-v-731c450f],
+.cn-settings-form__error[data-v-731c450f] {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-settings-form__error[data-v-731c450f] {
+	color: var(--color-error-text);
+}
+.cn-settings-form__actions[data-v-731c450f] {
+	display: flex;
+	justify-content: flex-start;
+}
+@media (max-width: 640px) {
+.cn-settings-form__grid--2[data-v-731c450f] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-switch-rows[data-v-9dd5b4e2] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+.cn-switch-rows__list[data-v-9dd5b4e2] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+.cn-switch-rows__row[data-v-9dd5b4e2] {
+	padding: 10px 0;
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-switch-rows__row[data-v-9dd5b4e2]:first-child {
+	border-top: none;
+	padding-top: 0;
+}
+.cn-switch-rows__label[data-v-9dd5b4e2] {
+	display: block;
+	font-weight: 600;
+}
+.cn-switch-rows__hint[data-v-9dd5b4e2] {
+	display: block;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-radio-cards[data-v-8aefa4a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.cn-radio-cards__legend[data-v-8aefa4a2] {
+	padding: 0;
+	margin-bottom: 6px;
+	font-weight: 600;
+}
+.cn-radio-cards__grid[data-v-8aefa4a2] {
+	display: grid;
+	gap: 10px;
+	grid-template-columns: minmax(0, 1fr);
+}
+.cn-radio-cards__grid--2[data-v-8aefa4a2] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-radio-cards__grid--3[data-v-8aefa4a2] {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.cn-radio-cards__card[data-v-8aefa4a2] {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+.cn-radio-cards__card--selected[data-v-8aefa4a2] {
+	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-8aefa4a2]: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-8aefa4a2] {
+	position: absolute;
+	opacity: 0;
+	inset: 0;
+	margin: 0;
+	cursor: pointer;
+}
+.cn-radio-cards__dot[data-v-8aefa4a2] {
+	flex: 0 0 auto;
+	width: 14px;
+	height: 14px;
+	margin-top: 3px;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 50%;
+	background: var(--color-main-background);
+}
+.cn-radio-cards__card--selected .cn-radio-cards__dot[data-v-8aefa4a2] {
+	border: 4px solid var(--color-primary-element);
+}
+.cn-radio-cards__text[data-v-8aefa4a2] {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-radio-cards__title[data-v-8aefa4a2] {
+	font-weight: 600;
+}
+.cn-radio-cards__description[data-v-8aefa4a2] {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+@media (max-width: 640px) {
+.cn-radio-cards__grid--2[data-v-8aefa4a2],
+	.cn-radio-cards__grid--3[data-v-8aefa4a2] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-chips-field[data-v-43e5bfcf] {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+}
+.cn-chips-field__label[data-v-43e5bfcf] {
+	margin: 0;
+	font-size: 13px;
+	font-weight: 600;
+}
+.cn-chips-field__chips[data-v-43e5bfcf] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-chips-field__chip[data-v-43e5bfcf] {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 6px 4px 12px;
+	border-radius: 999px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	font-weight: 600;
+	overflow-wrap: anywhere;
+}
+.cn-chips-field__remove[data-v-43e5bfcf] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: inherit;
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+}
+.cn-chips-field__remove[data-v-43e5bfcf]:hover:not(:disabled),
+.cn-chips-field__remove[data-v-43e5bfcf]:focus-visible {
+	background: var(--color-primary-element-light-hover, var(--color-background-hover));
+}
+.cn-chips-field__add[data-v-43e5bfcf] {
+	padding: 4px 12px;
+	border: 1px dashed var(--color-border-maxcontrast);
+	border-radius: 999px;
+	background: transparent;
+	color: var(--color-main-text);
+	font-weight: 600;
+	cursor: pointer;
+}
+.cn-chips-field__add[data-v-43e5bfcf]:hover:not(:disabled) {
+	background: var(--color-background-hover);
+}
+.cn-chips-field__form[data-v-43e5bfcf] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.cn-chips-field__input[data-v-43e5bfcf] {
+	height: var(--cn-board-control-height, 40px);
+	box-sizing: border-box;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: var(--cn-board-control-radius, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+}
+.cn-chips-field__hint[data-v-43e5bfcf],
+.cn-chips-field__error[data-v-43e5bfcf] {
+	margin: 0;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-chips-field__error[data-v-43e5bfcf] {
+	color: var(--color-error-text);
+}
+
+
+.cn-toggle-table[data-v-53a57112] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+.cn-toggle-table__table[data-v-53a57112] {
+	width: 100%;
+	border-collapse: collapse;
+}
+.cn-toggle-table__head[data-v-53a57112] {
+	padding: 8px 12px;
+	text-align: start;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+}
+.cn-toggle-table__head--toggle[data-v-53a57112],
+.cn-toggle-table__cell--toggle[data-v-53a57112] {
+	width: 1%;
+	white-space: nowrap;
+	text-align: end;
+}
+.cn-toggle-table__row[data-v-53a57112] {
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+.cn-toggle-table__cell[data-v-53a57112] {
+	padding: 10px 12px;
+	vertical-align: middle;
+	overflow-wrap: anywhere;
+}
+.cn-toggle-table__title[data-v-53a57112] {
+	display: block;
+	font-weight: 600;
+}
+.cn-toggle-table__hint[data-v-53a57112] {
+	display: block;
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-toggle-table__empty[data-v-53a57112] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-choice-picker[data-v-7075cbe2] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	min-width: 0;
+}
+.cn-choice-picker__cards[data-v-7075cbe2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+.cn-choice-picker__legend[data-v-7075cbe2] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+.cn-choice-picker__card[data-v-7075cbe2] {
+	position: relative;
+	display: flex;
+	flex: 1 1 220px;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 12px;
+	border: 1px solid var(--cn-board-hairline, var(--color-border));
+	border-radius: 10px;
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+.cn-choice-picker__card--selected[data-v-7075cbe2] {
+	padding: 9px 11px;
+	border: 2px solid var(--color-primary-element);
+}
+.cn-choice-picker__card--refused[data-v-7075cbe2] {
+	cursor: not-allowed;
+	opacity: 0.7;
+}
+.cn-choice-picker__card[data-v-7075cbe2]:focus-within {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-choice-picker__input[data-v-7075cbe2] {
+	flex: 0 0 auto;
+	width: 18px;
+	height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+.cn-choice-picker__swatches[data-v-7075cbe2] {
+	display: flex;
+	gap: 4px;
+}
+.cn-choice-picker__swatch[data-v-7075cbe2] {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+	border: 1px solid var(--color-border);
+	border-radius: 4px;
+}
+.cn-choice-picker__text[data-v-7075cbe2] {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-choice-picker__title[data-v-7075cbe2] {
+	font-size: 15px;
+}
+.cn-choice-picker__refusal[data-v-7075cbe2],
+.cn-choice-picker__hint[data-v-7075cbe2],
+.cn-choice-picker__note[data-v-7075cbe2] {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-choice-picker__warning-intro[data-v-7075cbe2] {
+	margin: 0 0 4px;
+}
+.cn-choice-picker__warning-list[data-v-7075cbe2] {
+	margin: 0;
+	padding-inline-start: 18px;
+}
+.cn-choice-picker__actions[data-v-7075cbe2] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
+
+.cn-record-list__list[data-v-7073b362] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-record-list__empty[data-v-7073b362],
+.cn-record-list__error[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-record-list__loading[data-v-7073b362] {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+/* rows */
+.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-7073b362] {
+	border-top: 1px solid var(--color-border);
+}
+.cn-record-list__row[data-v-7073b362] {
+	align-items: center;
+	color: var(--color-main-text);
+	display: flex;
+	gap: 16px;
+	padding: 12px 0;
+	text-decoration: none;
+}
+.cn-record-list__row--link:hover .cn-record-list__title[data-v-7073b362],
+.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-7073b362] {
+	text-decoration: underline;
+}
+.cn-record-list__avatar[data-v-7073b362] {
+	align-items: center;
+	background: var(--color-background-hover);
+	border-radius: 50%;
+	color: var(--color-main-text);
+	display: flex;
+	flex: none;
+	font-size: 12px;
+	font-weight: 700;
+	height: 36px;
+	justify-content: center;
+	width: 36px;
+}
+.cn-record-list__main[data-v-7073b362] {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+.cn-record-list__title[data-v-7073b362] {
+	font-size: 15px;
+	font-weight: 700;
+}
+.cn-record-list__meta[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-record-list__aside[data-v-7073b362] {
+	align-items: center;
+	display: flex;
+	flex: none;
+	gap: 16px;
+}
+.cn-record-list__trailing[data-v-7073b362] {
+	font-size: 14px;
+	white-space: nowrap;
+}
+.cn-record-list__chevron[data-v-7073b362] {
+	color: var(--color-text-maxcontrast);
+	flex: none;
+}
+
+/* feed */
+.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-7073b362] {
+	border-top: 1px solid var(--color-border);
+}
+.cn-record-list__feed-row[data-v-7073b362] {
+	align-items: flex-start;
+	display: flex;
+	gap: 14px;
+	padding: 12px 0;
+}
+.cn-record-list__feed-icon[data-v-7073b362] {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	display: flex;
+	flex: none;
+	height: 36px;
+	justify-content: center;
+	width: 36px;
+}
+.cn-record-list__text[data-v-7073b362] {
+	font-size: 15px;
+}
+.cn-record-list--feed .cn-record-list__main[data-v-7073b362] {
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+/* inline */
+.cn-record-list__inline-row[data-v-7073b362] {
+	padding: 4px 0;
+}
+.cn-record-list__label[data-v-7073b362] {
+	margin-inline-end: 4px;
+}
+.cn-record-list__inline-title[data-v-7073b362] {
+	color: var(--color-main-text);
+}
+a.cn-record-list__inline-title[data-v-7073b362] {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+
+
+/* In a narrow side column a row stacks: title, meta, then pill and date. */
+.cn-detail-page__side .cn-record-list__row {
+	align-items: flex-start;
+	flex-direction: column;
+	gap: 6px;
+}
+.cn-detail-page__side .cn-record-list__row .cn-record-list__title {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+.cn-detail-page__side .cn-record-list__chevron {
+	display: none;
+}
+
+/* A row is a touch target of at least 44px on a phone. */
+@media (max-width: 640px) {
+.cn-record-list__row {
+		min-height: 44px;
+}
+}
+
+
+.cn-saved-views-widget__list[data-v-8ca66162] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-saved-views-widget__link[data-v-8ca66162] {
+	color: var(--color-primary-element);
+	display: inline-block;
+	font-size: 14px;
+	font-weight: 600;
+	min-height: 24px;
+	text-decoration: none;
+}
+.cn-saved-views-widget__link[data-v-8ca66162]:hover,
+.cn-saved-views-widget__link[data-v-8ca66162]:focus-visible {
+	text-decoration: underline;
+}
+.cn-saved-views-widget__note[data-v-8ca66162] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+}
+.cn-saved-views-widget__loading[data-v-8ca66162] {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+}
+
+/* A phone: each link is a 44px touch target. */
+@media (max-width: 640px) {
+.cn-saved-views-widget__link[data-v-8ca66162] {
+		align-items: center;
+		display: inline-flex;
+		min-height: 44px;
+}
+}
+
+
+.cn-notepad-widget-form[data-v-c752df66] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+
+.cn-notepad-widget {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	height: 100%;
+	min-height: var(--cn-notepad-min-height, 120px);
+}
+.cn-notepad-widget__textarea {
+	flex: 1 1 auto;
+	width: 100%;
+	min-height: 80px;
+	resize: none;
+	border: none;
+	background: transparent;
+	color: var(--color-main-text);
+	font: inherit;
+}
+.cn-notepad-widget__rendered {
+	flex: 1 1 auto;
+	overflow: auto;
+	cursor: text;
+	color: var(--color-main-text);
+}
+.cn-notepad-widget__status {
+	margin: 0;
+	min-height: 1.2em;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+}
+.cn-notepad-widget__status--failed {
+	color: var(--color-error-text, var(--color-error));
+}
+
+
+.cn-data-form[data-v-10b5a40f] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-data-form__section[data-v-10b5a40f] {
+	margin: 8px 0 0;
+	font-size: 0.8em;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+	color: var(--color-text-maxcontrast);
+}
+.cn-data-form__hint[data-v-10b5a40f] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+.cn-data-form__row2[data-v-10b5a40f] {
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
+}
+.cn-data-form__row2[data-v-10b5a40f] > * {
+	flex: 1;
+	min-width: 0;
+}
+.cn-data-form__layout[data-v-10b5a40f] {
+	display: flex;
+	align-items: flex-end;
+	gap: 12px;
+	flex-wrap: wrap;
+}
+.cn-data-form__layout-label[data-v-10b5a40f] {
+	align-self: center;
+	font-weight: 600;
+}
+.cn-data-form__presets[data-v-10b5a40f] {
+	display: inline-flex;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	overflow: hidden;
+}
+.cn-data-form__preset[data-v-10b5a40f] {
+	border: none;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	padding: 6px 12px;
+	cursor: pointer;
+	border-inline-start: 1px solid var(--color-border);
+}
+.cn-data-form__preset[data-v-10b5a40f]:first-child {
+	border-inline-start: none;
+}
+.cn-data-form__preset--active[data-v-10b5a40f] {
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	font-weight: 600;
+}
+.cn-data-form__columns[data-v-10b5a40f] {
+	width: 90px;
+	flex: 0 0 auto;
+}
+.cn-data-form__prop[data-v-10b5a40f] {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	padding: 8px 10px;
+}
+.cn-data-form__prop--hidden[data-v-10b5a40f] {
+	opacity: 0.6;
+}
+.cn-data-form__prop--dragging[data-v-10b5a40f] {
+	opacity: 0.4;
+	border-style: dashed;
+}
+.cn-data-form__prop-head[data-v-10b5a40f] {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+.cn-data-form__grip[data-v-10b5a40f] {
+	cursor: grab;
+	color: var(--color-text-maxcontrast);
+	letter-spacing: -2px;
+	user-select: none;
+}
+.cn-data-form__prop-name[data-v-10b5a40f] {
+	font-weight: 600;
+}
+.cn-data-form__prop-body[data-v-10b5a40f] {
+	display: grid;
+	grid-template-columns: 2fr 1fr 1fr 1.5fr;
+	gap: 10px;
+	align-items: center;
+	margin-top: 8px;
+}
+
+
+.cn-object-geo-form[data-v-42affc2f] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-object-geo-form__section[data-v-42affc2f] {
+	margin: 8px 0 0;
+	font-size: 0.8em;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+	color: var(--color-text-maxcontrast);
+}
+.cn-object-geo-form__hint[data-v-42affc2f] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	margin: 0;
+}
+
+
+.cn-audit-trail-form[data-v-41073462] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+.cn-audit-trail-form__hint[data-v-41073462] {
+	margin: 0;
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
+
+.cn-kb-search-widget[data-v-e34f66e2] {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 100%;
+}
+.cn-kb-search-widget__bound[data-v-e34f66e2],
+.cn-kb-search-widget__status[data-v-e34f66e2],
+.cn-kb-search-widget__empty[data-v-e34f66e2],
+.cn-kb-search-widget__hint[data-v-e34f66e2] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	margin: 0;
+}
+.cn-kb-search-widget__bound[data-v-e34f66e2] {
+	font-style: italic;
+}
+.cn-kb-search-widget__results[data-v-e34f66e2] {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.cn-kb-search-widget__result[data-v-e34f66e2] {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 8px 10px;
+	background: var(--color-main-background);
+}
+.cn-kb-search-widget__result-title[data-v-e34f66e2] {
+	font-weight: 600;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+.cn-kb-search-widget__result-title[data-v-e34f66e2]:hover {
+	color: var(--color-primary-element);
+}
+.cn-kb-search-widget__result-snippet[data-v-e34f66e2] {
+	font-size: 0.9em;
+	color: var(--color-text-maxcontrast);
+	margin-top: 4px;
+}
+
 /* ========================================
    @conduction/nextcloud-vue — Form widgets
    ======================================== */
@@ -27920,6 +29765,76 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	flex-direction: column;
 	gap: 2px;
 }
+
+/* The chips: the compact segmented group, left, in the card the grid draws. */
+.cn-workspace-filter-widget--chips[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+/* A bar: its controls in one row, an `align: "end"` control pushed right. */
+.cn-workspace-filter-widget--bar[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px 16px;
+}
+
+/* An inline control sits in a bar: label left of the control, width to its content. */
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__label[data-v-f0d5c1c6] {
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+.cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+	margin-inline-start: auto;
+}
+.cn-workspace-filter-widget--end ~ .cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+	margin-inline-start: 0;
+}
+.cn-workspace-filter-widget__toggle[data-v-f0d5c1c6] {
+	font-weight: 600;
+}
+
+/* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
+.cn-workspace-filter-widget--start[data-v-f0d5c1c6] {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px 24px;
+}
+.cn-workspace-filter-widget__text[data-v-f0d5c1c6] {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+.cn-workspace-filter-widget__title[data-v-f0d5c1c6] {
+	margin: 0 0 4px;
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--color-main-text);
+}
+.cn-workspace-filter-widget__description[data-v-f0d5c1c6] {
+	margin: 0;
+	max-width: 420px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-workspace-filter-widget--start .cn-workspace-filter-widget__control[data-v-f0d5c1c6],
+.cn-workspace-filter-widget--start > .v-select[data-v-f0d5c1c6] {
+	flex: 0 1 480px;
+	min-width: 240px;
+}
+.cn-workspace-filter-widget__link[data-v-f0d5c1c6] {
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
+	white-space: nowrap;
+}
 .cn-workspace-filter-widget__count[data-v-f0d5c1c6] {
 	margin-inline-start: 6px;
 	padding: 0 6px;
@@ -27929,6 +29844,27 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	font-size: 0.85em;
 }
 
+/* On a phone the bar's controls take a row each (the chips already wrap), and
+   a switch and a select are 44px touch targets. */
+@media (max-width: 640px) {
+.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--inline[data-v-f0d5c1c6] {
+		flex: 1 1 100%;
+}
+.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--end[data-v-f0d5c1c6] {
+		margin-inline-start: 0;
+}
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__toggle[data-v-f0d5c1c6] {
+		min-height: 44px;
+}
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] .v-select {
+		flex: 1 1 auto;
+		min-width: 0;
+}
+.cn-workspace-filter-widget--inline[data-v-f0d5c1c6] .vs__dropdown-toggle {
+		min-height: 44px;
+}
+}
+
 
 .cn-data-matrix[data-v-6e3e1a0f] {
 	display: flex;
@@ -32815,6 +34751,86 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
+/*
+ * Layout only — this component draws no KPI of its own; the tiles inside it do
+ * (src/css/kpi-card.css). What it DOES owe the canonical look is the rhythm
+ * around those tiles, so the gutter is the card's own `--cn-kpi-grid-gap`
+ * rather than a number picked here. A grid whose gutter disagrees with the
+ * card's padding reads as a different design even when every tile is
+ * identical.
+ */
+.cn-kpi-grid[data-v-e31696e2] {
+	display: grid;
+	gap: var(--cn-kpi-grid-gap, 16px);
+	margin-bottom: 24px;
+}
+
+/*
+ * `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is `auto`, which
+ * refuses to shrink below its content — and the canonical KPI value is
+ * deliberately `white-space: nowrap`, so a long number (a formatted currency
+ * amount, a six-figure count) pushes its track wider than its share and the
+ * whole row overflows the page. With a 0 minimum the track holds its share and
+ * the card's own `overflow: hidden` clips instead.
+ */
+.cn-kpi-grid--cols-2[data-v-e31696e2] {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.cn-kpi-grid--cols-3[data-v-e31696e2] {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.cn-kpi-grid--cols-4[data-v-e31696e2] {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* Auto: as many 200px columns as fit (screens-dashboard-parity). */
+.cn-kpi-grid--cols-auto[data-v-e31696e2] {
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* Responsive breakpoints */
+@media (max-width: 1200px) {
+.cn-kpi-grid--cols-4[data-v-e31696e2] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@media (max-width: 900px) {
+.cn-kpi-grid--cols-3[data-v-e31696e2] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+}
+@media (max-width: 600px) {
+.cn-kpi-grid--cols-2[data-v-e31696e2],
+	.cn-kpi-grid--cols-3[data-v-e31696e2],
+	.cn-kpi-grid--cols-4[data-v-e31696e2] {
+		grid-template-columns: minmax(0, 1fr);
+}
+}
+
+
+.cn-index-page-widgets--stat-row[data-v-5ec0c5bc] {
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+.cn-index-page-widgets__cell[data-v-5ec0c5bc] {
+	display: flex;
+	min-width: 0;
+}
+.cn-index-page-widgets__cell[data-v-5ec0c5bc] > * {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/* The side panel column (DqTeamwachtrij: 300px, 16px between cards). Its
+   place beside the toolbar and the list is set by CnIndexPage
+   (`cn-index-page--with-side-panel`, index-page.css). */
+.cn-index-page-widgets--side-panel[data-v-5ec0c5bc] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	min-width: 0;
+}
+
+
 .cn-advanced-form-dialog__json-editor[data-v-733de04c] {
 	display: flex;
 	flex-direction: column;
@@ -34090,63 +36106,6 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-/*
- * Layout only — this component draws no KPI of its own; the tiles inside it do
- * (src/css/kpi-card.css). What it DOES owe the canonical look is the rhythm
- * around those tiles, so the gutter is the card's own `--cn-kpi-grid-gap`
- * rather than a number picked here. A grid whose gutter disagrees with the
- * card's padding reads as a different design even when every tile is
- * identical.
- */
-.cn-kpi-grid[data-v-e31696e2] {
-	display: grid;
-	gap: var(--cn-kpi-grid-gap, 16px);
-	margin-bottom: 24px;
-}
-
-/*
- * `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is `auto`, which
- * refuses to shrink below its content — and the canonical KPI value is
- * deliberately `white-space: nowrap`, so a long number (a formatted currency
- * amount, a six-figure count) pushes its track wider than its share and the
- * whole row overflows the page. With a 0 minimum the track holds its share and
- * the card's own `overflow: hidden` clips instead.
- */
-.cn-kpi-grid--cols-2[data-v-e31696e2] {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.cn-kpi-grid--cols-3[data-v-e31696e2] {
-	grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.cn-kpi-grid--cols-4[data-v-e31696e2] {
-	grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-/* Auto: as many 200px columns as fit (screens-dashboard-parity). */
-.cn-kpi-grid--cols-auto[data-v-e31696e2] {
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-/* Responsive breakpoints */
-@media (max-width: 1200px) {
-.cn-kpi-grid--cols-4[data-v-e31696e2] {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-}
-@media (max-width: 900px) {
-.cn-kpi-grid--cols-3[data-v-e31696e2] {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-}
-@media (max-width: 600px) {
-.cn-kpi-grid--cols-2[data-v-e31696e2],
-	.cn-kpi-grid--cols-3[data-v-e31696e2],
-	.cn-kpi-grid--cols-4[data-v-e31696e2] {
-		grid-template-columns: minmax(0, 1fr);
-}
-}
-
-
 .cn-export-wizard__description[data-v-59983562] {
 	color: var(--color-text-maxcontrast);
 	margin-bottom: 12px;
@@ -35535,6 +37494,17 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 .cn-dashboard-page__content-item[data-v-824052fe] {
 	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-824052fe] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-824052fe] .cn-widget-wrapper__actions .button-vue {
+		min-height: 44px;
+}
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-824052fe] {
+		min-height: 44px;
+}
+}
 
 
 /* Trigger: strip NcActions' default button chrome down to just the chip span. */