@conduction/nextcloud-vue 2.124.0 → 2.125.0

package/dist/esm/nextcloud-vue.css

@@ -1669,6 +1669,25 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* A compact list (`density: "compact"`) draws its rows 10px above and below,
+   at least 56px tall, 6px between lines, the title at 500 (DqProcesanalyse
+   "Waar zaken blijven hangen").
+   @spec openspec/changes/record-list-density/specs/record-list/spec.md#requirement-a-record-list-can-draw-compact-rows */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__row {
+	box-sizing: border-box;
+	min-height: 56px;
+	padding: 10px 0;
+	gap: 6px 16px;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__title {
+	font-weight: 500;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__main {
+	gap: 2px;
+}
+
 /* 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 {
@@ -2038,6 +2057,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	background-color: color-mix(in srgb, var(--color-main-text) 45%, transparent);
 }
 
+/* Any modal of a board-look app (an app's own NcDialog or NcModal, not
+   opened through CnDialog) dims the page the same way. A page that takes the
+   Nextcloud look keeps Nextcloud's backdrop.
+   @spec openspec/changes/board-modal-backdrop/specs/board-modal-backdrop/spec.md#requirement-every-modal-in-a-board-app-dims-the-page-as-the-boards-do */
+body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
+	background-color: color-mix(in srgb, var(--color-main-text) 45%, transparent);
+}
+
 /* Width by role, capped at the viewport minus a 16px gutter each side. The
    shadow carries `!important`: the nldesign theme removes every
    `.modal-container`'s shadow with `!important` and offers no token for it. */
@@ -2078,6 +2105,21 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border: 0;
 }
 
+/* The user settings dialog (CnUserSettingsDialog, DqPersoonlijkeInstellingen
+   board): the frame takes the navigation's tint and the body fills it edge
+   to edge; the white pane and the navigation are drawn by the component.
+   @spec openspec/changes/user-settings-dialog-dq-board/specs/user-settings-dialog-dq-board/spec.md#requirement-the-user-settings-dialog-follows-the-dq-board */
+.modal-mask.cn-dialog-board.cn-user-settings-dialog .modal-wrapper .modal-container {
+	overflow: hidden;
+	background: var(--color-primary-element-light);
+}
+
+.modal-mask.cn-dialog-board.cn-user-settings-dialog .dialog__content {
+	gap: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
 /* Header: padding 22px 24px 0. */
 .cn-dialog-header {
 	display: flex;
@@ -3945,9 +3987,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	outline-offset: 2px;
 }
 
-/* Under the card grid the footer is a row of its own, not a card's edge. */
+/* Under the card grid the footer is a row of its own, not a card's edge: no
+   hairline, 4px 0 (DqAanMijToegewezen, BqAgents, BqStore).
+   @spec openspec/changes/board-pagination-under-card-grid/specs/board-pagination-under-card-grid/spec.md#requirement-the-page-footer-under-a-card-grid-is-a-plain-row */
 .cn-look-board .cn-index-page__main:not(.cn-index-page__main--table) > .cn-pagination--board {
 	margin-top: 8px;
+	padding: 4px 0;
+	border-top: 0;
 }
 
 /* ------------------------------------------------------------------- cards */
@@ -25286,7 +25332,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    Horizontal overflow is owned by `.cn-table-container` (overflow-x: auto); a
    second scroll container here would produce a nested scrollbar, so this host
    stays plain. */
-.cn-object-list-widget[data-v-ec0414c2] {
+.cn-object-list-widget[data-v-50a61b52] {
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -25298,10 +25344,10 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    relative` is set only in the dropping state so a widget without a drop zone
    keeps the containing block it had — an unconditional rule here would
    re-parent any absolutely-positioned descendant a host has placed. */
-.cn-object-list-widget--dropping[data-v-ec0414c2] {
+.cn-object-list-widget--dropping[data-v-50a61b52] {
 	position: relative;
 }
-.cn-object-list-widget__drop-overlay[data-v-ec0414c2] {
+.cn-object-list-widget__drop-overlay[data-v-50a61b52] {
 	position: absolute;
 	inset: 0;
 	z-index: 2;
@@ -25319,7 +25365,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	   and the drop would land on nothing. */
 	pointer-events: none;
 }
-.cn-object-list-widget__table[data-v-ec0414c2] {
+.cn-object-list-widget__table[data-v-50a61b52] {
 	flex: 1 1 auto;
 	min-height: 0;
 	overflow: hidden;
@@ -25328,16 +25374,16 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 /* The empty state is CnWidgetEmptyState now — it brings its own layout, so
    all this rule still owns is letting it claim the cell's leftover height
    (ADR-062: it fits the cell, it never forces one). */
-.cn-object-list-widget__empty[data-v-ec0414c2] {
+.cn-object-list-widget__empty[data-v-50a61b52] {
 	flex: 1 1 auto;
 	min-height: 0;
 }
 
 /* The pager sits flush at the bottom of the card, above "View all". */
-.cn-object-list-widget__pager[data-v-ec0414c2] {
+.cn-object-list-widget__pager[data-v-50a61b52] {
 	flex-shrink: 0;
 }
-.cn-object-list-widget__view-all[data-v-ec0414c2] {
+.cn-object-list-widget__view-all[data-v-50a61b52] {
 	align-self: flex-start;
 	background: none;
 	border: none;
@@ -25348,32 +25394,32 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	padding: 4px;
 	text-decoration: none;
 }
-.cn-object-list-widget__view-all[data-v-ec0414c2]:hover,
-.cn-object-list-widget__view-all[data-v-ec0414c2]:focus-visible {
+.cn-object-list-widget__view-all[data-v-50a61b52]:hover,
+.cn-object-list-widget__view-all[data-v-50a61b52]:focus-visible {
 	text-decoration: underline;
 }
-.cn-object-list-widget__more[data-v-ec0414c2] {
+.cn-object-list-widget__more[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 	margin: 4px 0 0;
 	padding: 4px;
 }
-.cn-object-list-widget__links[data-v-ec0414c2] {
+.cn-object-list-widget__links[data-v-50a61b52] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	margin: 12px 0 0;
 	font-size: 14px;
 }
-.cn-object-list-widget__link[data-v-ec0414c2] {
+.cn-object-list-widget__link[data-v-50a61b52] {
 	font-weight: 600;
 }
-.cn-object-list-widget__link-note[data-v-ec0414c2] {
+.cn-object-list-widget__link-note[data-v-50a61b52] {
 	margin-inline-start: 6px;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-object-list-widget__footnote[data-v-ec0414c2] {
+.cn-object-list-widget__footnote[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 	margin: 8px 0 0;
@@ -25382,7 +25428,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 /* Footer Add — same pattern as the integration leaves' footer action
    ("Open in Calendar"): full-width, centered, divider-topped, pinned to
    the card bottom. */
-.cn-object-list-widget__add[data-v-ec0414c2] {
+.cn-object-list-widget__add[data-v-50a61b52] {
 	align-self: stretch;
 	border-top: 1px solid var(--color-border);
 	/* Bleed through the host card's 16px content padding so the divider
@@ -25390,31 +25436,31 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	margin: auto -16px -16px;
 	padding: 4px;
 }
-.cn-object-list-widget__error[data-v-ec0414c2] {
+.cn-object-list-widget__error[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 	margin: 4px 0 0;
 }
-.cn-object-list-widget__prompt[data-v-ec0414c2] {
+.cn-object-list-widget__prompt[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 	padding: 16px 4px;
 	margin: 0;
 	text-align: center;
 }
-.cn-object-list-widget__facet[data-v-ec0414c2] {
+.cn-object-list-widget__facet[data-v-50a61b52] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 	padding: 0 4px 8px;
 }
-.cn-object-list-widget__facet-label[data-v-ec0414c2] {
+.cn-object-list-widget__facet-label[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 	font-weight: 600;
 }
-.cn-object-list-widget__facet-chip[data-v-ec0414c2] {
+.cn-object-list-widget__facet-chip[data-v-50a61b52] {
 	background-color: var(--color-background-hover);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-pill, 16px);
@@ -25424,13 +25470,13 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	font-size: 0.85em;
 	padding: 2px 10px;
 }
-.cn-object-list-widget__facet-chip--active[data-v-ec0414c2] {
+.cn-object-list-widget__facet-chip--active[data-v-50a61b52] {
 	background-color: var(--color-primary-element-light);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text, var(--color-main-text));
 }
-.cn-object-list-widget__facet-clear[data-v-ec0414c2],
-.cn-object-list-widget__bulk-clear[data-v-ec0414c2] {
+.cn-object-list-widget__facet-clear[data-v-50a61b52],
+.cn-object-list-widget__bulk-clear[data-v-50a61b52] {
 	background: none;
 	border: none;
 	color: var(--color-primary-element);
@@ -25439,11 +25485,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	font-size: 0.85em;
 	padding: 2px 4px;
 }
-.cn-object-list-widget__facet-clear[data-v-ec0414c2]:hover,
-.cn-object-list-widget__bulk-clear[data-v-ec0414c2]:hover {
+.cn-object-list-widget__facet-clear[data-v-50a61b52]:hover,
+.cn-object-list-widget__bulk-clear[data-v-50a61b52]:hover {
 	text-decoration: underline;
 }
-.cn-object-list-widget__bulk-bar[data-v-ec0414c2] {
+.cn-object-list-widget__bulk-bar[data-v-50a61b52] {
 	align-items: center;
 	background-color: var(--color-primary-element-light);
 	border-radius: var(--border-radius, 8px);
@@ -25453,10 +25499,10 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	margin: 0 0 8px;
 	padding: 6px 10px;
 }
-.cn-object-list-widget__bulk-count[data-v-ec0414c2] {
+.cn-object-list-widget__bulk-count[data-v-50a61b52] {
 	font-weight: 600;
 }
-.cn-object-list-widget__bulk-action[data-v-ec0414c2] {
+.cn-object-list-widget__bulk-action[data-v-50a61b52] {
 	background-color: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius, 8px);
@@ -25464,25 +25510,25 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	font: inherit;
 	padding: 4px 10px;
 }
-.cn-object-list-widget__bulk-action--destructive[data-v-ec0414c2] {
+.cn-object-list-widget__bulk-action--destructive[data-v-50a61b52] {
 	border-color: var(--color-error);
 	color: var(--color-error);
 }
-.cn-object-list-widget__groups[data-v-ec0414c2] {
+.cn-object-list-widget__groups[data-v-50a61b52] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 	min-height: 0;
 	overflow: auto;
 }
-.cn-object-list-widget__group-heading[data-v-ec0414c2] {
+.cn-object-list-widget__group-heading[data-v-50a61b52] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 	font-weight: 600;
 	margin: 0 0 4px;
 	text-transform: uppercase;
 }
-.cn-object-list-widget__upload[data-v-ec0414c2] {
+.cn-object-list-widget__upload[data-v-50a61b52] {
 	background-color: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius, 8px);
@@ -25491,7 +25537,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	margin: 8px 0 0;
 	padding: 6px 12px;
 }
-.cn-object-list-widget__upload-input[data-v-ec0414c2] {
+.cn-object-list-widget__upload-input[data-v-50a61b52] {
 	display: none;
 }
 
@@ -30236,16 +30282,16 @@ button.cn-stepper__step[data-v-3cab4d7d] {
 }
 
 
-.cn-widget-object-table[data-v-629f0a9a] {
+.cn-widget-object-table[data-v-f7b516a8] {
 	width: 100%;
 }
-.cn-widget-object-table__footer[data-v-629f0a9a] {
+.cn-widget-object-table__footer[data-v-f7b516a8] {
 	display: flex;
 	gap: 4px;
 	padding: 4px 8px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-widget-object-table__error[data-v-629f0a9a] {
+.cn-widget-object-table__error[data-v-f7b516a8] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-size: 0.85em;
 	margin: 4px 8px 0;
@@ -37282,34 +37328,34 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 }
 
 
-.cn-record-list__list[data-v-1484103e] {
+.cn-record-list__list[data-v-0cb81a45] {
 	list-style: none;
 	margin: 0;
 	padding: 0;
 }
-.cn-record-list__group-heading[data-v-1484103e] {
+.cn-record-list__group-heading[data-v-0cb81a45] {
 	margin: 6px 0 0;
 	font-size: 15px;
 	font-weight: 700;
 	line-height: 1.4;
 }
-.cn-record-list__footer[data-v-1484103e] {
+.cn-record-list__footer[data-v-0cb81a45] {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 6px;
 	margin-top: 10px;
 }
-.cn-record-list__footer-reason[data-v-1484103e] {
+.cn-record-list__footer-reason[data-v-0cb81a45] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-record-list__empty[data-v-1484103e],
-.cn-record-list__error[data-v-1484103e] {
+.cn-record-list__empty[data-v-0cb81a45],
+.cn-record-list__error[data-v-0cb81a45] {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
-.cn-record-list__notice[data-v-1484103e] {
+.cn-record-list__notice[data-v-0cb81a45] {
 	display: flex;
 	gap: 10px;
 	align-items: flex-start;
@@ -37318,33 +37364,33 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	background: var(--color-primary-element-light, var(--color-background-dark));
 	color: var(--color-main-text);
 }
-.cn-record-list__notice--warning[data-v-1484103e] {
+.cn-record-list__notice--warning[data-v-0cb81a45] {
 	background: var(--color-warning-light, rgba(255, 196, 0, 0.12));
 	color: var(--color-warning-text, var(--color-main-text));
 }
-.cn-record-list__notice--error[data-v-1484103e] {
+.cn-record-list__notice--error[data-v-0cb81a45] {
 	background: var(--color-error-light, rgba(219, 0, 0, 0.08));
 	color: var(--color-error-text, var(--color-main-text));
 }
-.cn-record-list__notice-icon[data-v-1484103e] {
+.cn-record-list__notice-icon[data-v-0cb81a45] {
 	flex: 0 0 auto;
 	margin-top: 1px;
 }
-.cn-record-list__notice-text[data-v-1484103e] {
+.cn-record-list__notice-text[data-v-0cb81a45] {
 	margin: 0;
 	line-height: 1.5;
 }
-.cn-record-list__loading[data-v-1484103e] {
+.cn-record-list__loading[data-v-0cb81a45] {
 	display: flex;
 	justify-content: center;
 	padding: 8px 0;
 }
 
 /* rows */
-.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-1484103e] {
+.cn-record-list--rows .cn-record-list__item + .cn-record-list__item[data-v-0cb81a45] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__bar[data-v-1484103e] {
+.cn-record-list__bar[data-v-0cb81a45] {
 	background: var(--color-border);
 	border-radius: 3px;
 	display: block;
@@ -37352,15 +37398,15 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	margin: -6px 0 12px;
 	overflow: hidden;
 }
-.cn-record-list__bar-fill[data-v-1484103e] {
+.cn-record-list__bar-fill[data-v-0cb81a45] {
 	background: var(--color-primary-element);
 	display: block;
 	height: 100%;
 }
-.cn-record-list__bar--over .cn-record-list__bar-fill[data-v-1484103e] {
+.cn-record-list__bar--over .cn-record-list__bar-fill[data-v-0cb81a45] {
 	background: var(--color-error);
 }
-.cn-record-list__row[data-v-1484103e] {
+.cn-record-list__row[data-v-0cb81a45] {
 	align-items: center;
 	color: var(--color-main-text);
 	display: flex;
@@ -37368,22 +37414,22 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	padding: 12px 0;
 	text-decoration: none;
 }
-.cn-record-list__row--link:hover .cn-record-list__title[data-v-1484103e],
-.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-1484103e] {
+.cn-record-list__row--link:hover .cn-record-list__title[data-v-0cb81a45],
+.cn-record-list__row--link:focus-visible .cn-record-list__title[data-v-0cb81a45] {
 	text-decoration: underline;
 }
-.cn-record-list__dot[data-v-1484103e] {
+.cn-record-list__dot[data-v-0cb81a45] {
 	flex: 0 0 14px;
 	width: 14px;
 	height: 14px;
 	border-radius: 50%;
 }
-.cn-record-list__flag[data-v-1484103e] {
+.cn-record-list__flag[data-v-0cb81a45] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__avatar[data-v-1484103e] {
+.cn-record-list__avatar[data-v-0cb81a45] {
 	align-items: center;
 	background: var(--color-background-hover);
 	border-radius: 50%;
@@ -37396,105 +37442,133 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__main[data-v-1484103e] {
+.cn-record-list__main[data-v-0cb81a45] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-record-list__title[data-v-1484103e] {
+.cn-record-list__title[data-v-0cb81a45] {
 	font-size: 15px;
 	font-weight: 700;
 }
-.cn-record-list__meta[data-v-1484103e] {
+.cn-record-list--compact .cn-record-list__row[data-v-0cb81a45] {
+	box-sizing: border-box;
+	min-height: 56px;
+	padding: 10px 0;
+}
+.cn-record-list--compact .cn-record-list__title[data-v-0cb81a45] {
+	font-weight: 500;
+}
+.cn-record-list__meta[data-v-0cb81a45] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-record-list__aside[data-v-1484103e] {
+.cn-record-list__aside[data-v-0cb81a45] {
 	align-items: center;
 	display: flex;
 	flex: none;
 	gap: 16px;
 }
-.cn-record-list__trailing[data-v-1484103e] {
+.cn-record-list__trailing[data-v-0cb81a45] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due[data-v-1484103e] {
+.cn-record-list__due[data-v-0cb81a45] {
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-record-list__due--danger[data-v-1484103e] {
+.cn-record-list__due--danger[data-v-0cb81a45] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-weight: 600;
 }
-.cn-record-list__table[data-v-1484103e] {
+.cn-record-list__table[data-v-0cb81a45] {
 	width: 100%;
 	border-collapse: collapse;
 	font-size: 14px;
 }
-.cn-record-list__table th[data-v-1484103e] {
+.cn-record-list__table th[data-v-0cb81a45] {
 	padding: 6px 0;
 	border-bottom: 1px solid var(--color-border);
 	color: var(--color-text-maxcontrast);
 	font-weight: 600;
 	text-align: start;
 }
-.cn-record-list__table td[data-v-1484103e] {
+.cn-record-list__table td[data-v-0cb81a45] {
 	padding: 8px 0;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-record-list__table .cn-record-list__cell--end[data-v-1484103e] {
+.cn-record-list__sort[data-v-0cb81a45] {
+	display: inline-flex;
+	gap: 4px;
+	align-items: center;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: none;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+}
+.cn-record-list__sort[data-v-0cb81a45]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-record-list__sort-mark[data-v-0cb81a45] {
+	font-size: 10px;
+}
+.cn-record-list__table .cn-record-list__cell--end[data-v-0cb81a45] {
 	padding-inline-start: 12px;
 	text-align: end;
 	font-variant-numeric: tabular-nums;
 }
-.cn-record-list__table .cn-record-list__cell--alert[data-v-1484103e] {
+.cn-record-list__table .cn-record-list__cell--alert[data-v-0cb81a45] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-weight: 700;
 }
-.cn-record-list__intro[data-v-1484103e] {
+.cn-record-list__intro[data-v-0cb81a45] {
 	margin: 0 0 8px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-record-list__footnote[data-v-1484103e] {
+.cn-record-list__footnote[data-v-0cb81a45] {
 	margin: 8px 0 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-record-list__due--soon[data-v-1484103e] {
+.cn-record-list__due--soon[data-v-0cb81a45] {
 	color: var(--color-text-warning, var(--color-warning-text));
 	font-weight: 600;
 }
-.cn-record-list__due--empty[data-v-1484103e] {
+.cn-record-list__due--empty[data-v-0cb81a45] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-record-list__row--action[data-v-1484103e] {
+.cn-record-list__row--action[data-v-0cb81a45] {
 	flex-wrap: wrap;
 	gap: 8px 16px;
 	padding: 14px 0;
 }
-.cn-record-list__row--action .cn-record-list__main[data-v-1484103e] {
+.cn-record-list__row--action .cn-record-list__main[data-v-0cb81a45] {
 	flex: 1 1 280px;
 	gap: 3px;
 }
-.cn-record-list__title--link[data-v-1484103e] {
+.cn-record-list__title--link[data-v-0cb81a45] {
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
-.cn-record-list__pills[data-v-1484103e] {
+.cn-record-list__pills[data-v-0cb81a45] {
 	display: flex;
 	flex: 0 0 120px;
 	gap: 6px;
 	justify-content: flex-end;
 }
-.cn-record-list__due--column[data-v-1484103e] {
+.cn-record-list__due--column[data-v-0cb81a45] {
 	flex: 0 0 96px;
 	font-size: 13px;
 	text-align: end;
 }
-.cn-record-list__action[data-v-1484103e] {
+.cn-record-list__action[data-v-0cb81a45] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -37511,23 +37585,23 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	padding: 0 14px;
 	text-decoration: none;
 }
-.cn-record-list__action[data-v-1484103e]:hover,
-.cn-record-list__action[data-v-1484103e]:focus-visible {
+.cn-record-list__action[data-v-0cb81a45]:hover,
+.cn-record-list__action[data-v-0cb81a45]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-record-list__chevron[data-v-1484103e] {
+.cn-record-list__chevron[data-v-0cb81a45] {
 	color: var(--color-text-maxcontrast);
 	flex: none;
 }
 
 /* cards (board ShBank): a grid of framed cards, 240px at the least. */
-.cn-record-list--cards .cn-record-list__list[data-v-1484103e] {
+.cn-record-list--cards .cn-record-list__list[data-v-0cb81a45] {
 	align-items: start;
 	display: grid;
 	gap: 16px;
 	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
-.cn-record-list__card[data-v-1484103e] {
+.cn-record-list__card[data-v-0cb81a45] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: 12px;
@@ -37539,51 +37613,51 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	padding: 16px 18px;
 	text-decoration: none;
 }
-.cn-record-list__card--link[data-v-1484103e]:hover,
-.cn-record-list__card--link[data-v-1484103e]:focus-visible {
+.cn-record-list__card--link[data-v-0cb81a45]:hover,
+.cn-record-list__card--link[data-v-0cb81a45]:focus-visible {
 	border-color: var(--color-border-dark, var(--color-border));
 }
-.cn-record-list__card--link:hover .cn-record-list__title[data-v-1484103e],
-.cn-record-list__card--link:focus-visible .cn-record-list__title[data-v-1484103e] {
+.cn-record-list__card--link:hover .cn-record-list__title[data-v-0cb81a45],
+.cn-record-list__card--link:focus-visible .cn-record-list__title[data-v-0cb81a45] {
 	text-decoration: underline;
 }
-.cn-record-list__card-head[data-v-1484103e] {
+.cn-record-list__card-head[data-v-0cb81a45] {
 	align-items: center;
 	display: flex;
 	gap: 8px;
 	justify-content: space-between;
 }
-.cn-record-list__card-title[data-v-1484103e] {
+.cn-record-list__card-title[data-v-0cb81a45] {
 	align-items: center;
 	display: flex;
 	gap: 8px;
 	min-width: 0;
 }
-.cn-record-list__card-icon[data-v-1484103e] {
+.cn-record-list__card-icon[data-v-0cb81a45] {
 	color: var(--color-primary-element);
 	flex: none;
 }
-.cn-record-list__card-pills[data-v-1484103e] {
+.cn-record-list__card-pills[data-v-0cb81a45] {
 	display: flex;
 	flex: none;
 	gap: 6px;
 }
-.cn-record-list__card-value[data-v-1484103e] {
+.cn-record-list__card-value[data-v-0cb81a45] {
 	font-size: 24px;
 	font-weight: 700;
 }
 
 /* feed */
-.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-1484103e] {
+.cn-record-list--feed .cn-record-list__item + .cn-record-list__item[data-v-0cb81a45] {
 	border-top: 1px solid var(--color-border);
 }
-.cn-record-list__feed-row[data-v-1484103e] {
+.cn-record-list__feed-row[data-v-0cb81a45] {
 	align-items: flex-start;
 	display: flex;
 	gap: 14px;
 	padding: 12px 0;
 }
-.cn-record-list__feed-icon[data-v-1484103e] {
+.cn-record-list__feed-icon[data-v-0cb81a45] {
 	align-items: center;
 	background: var(--color-primary-element-light);
 	border-radius: 50%;
@@ -37594,25 +37668,25 @@ button.cn-linked-widget__link[data-v-0fc31606] {
 	justify-content: center;
 	width: 36px;
 }
-.cn-record-list__text[data-v-1484103e] {
+.cn-record-list__text[data-v-0cb81a45] {
 	font-size: 15px;
 }
-.cn-record-list--feed .cn-record-list__main[data-v-1484103e] {
+.cn-record-list--feed .cn-record-list__main[data-v-0cb81a45] {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
 
 /* inline */
-.cn-record-list__inline-row[data-v-1484103e] {
+.cn-record-list__inline-row[data-v-0cb81a45] {
 	padding: 4px 0;
 }
-.cn-record-list__label[data-v-1484103e] {
+.cn-record-list__label[data-v-0cb81a45] {
 	margin-inline-end: 4px;
 }
-.cn-record-list__inline-title[data-v-1484103e] {
+.cn-record-list__inline-title[data-v-0cb81a45] {
 	color: var(--color-main-text);
 }
-a.cn-record-list__inline-title[data-v-1484103e] {
+a.cn-record-list__inline-title[data-v-0cb81a45] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
@@ -45829,12 +45903,12 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 }
 
 
-.cn-action-dialog[data-v-ececfa8c] {
+.cn-action-dialog[data-v-feabd086] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-action-dialog__summary[data-v-ececfa8c] {
+.cn-action-dialog__summary[data-v-feabd086] {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -45842,13 +45916,13 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-action-dialog__summary-text[data-v-ececfa8c] {
+.cn-action-dialog__summary-text[data-v-feabd086] {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-action-dialog__badge[data-v-ececfa8c] {
+.cn-action-dialog__badge[data-v-feabd086] {
 	padding: 3px 10px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -45856,7 +45930,7 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	font-weight: 600;
 	white-space: nowrap;
 }
-.cn-action-dialog__title[data-v-ececfa8c] {
+.cn-action-dialog__title[data-v-feabd086] {
 	margin: 0 0 8px;
 	font-size: 14px;
 	font-weight: 600;
@@ -45864,24 +45938,24 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* Facts in columns of at least 200px, each a label over its value above a
    hairline (DqArchiveren "Bewaring volgens het zaaktype"). */
-.cn-action-dialog__facts[data-v-ececfa8c] {
+.cn-action-dialog__facts[data-v-feabd086] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	gap: 12px 24px;
 	margin: 0;
 }
-.cn-action-dialog__fact[data-v-ececfa8c] {
+.cn-action-dialog__fact[data-v-feabd086] {
 	display: flex;
 	flex-direction: column;
 	gap: 3px;
 	padding-bottom: 10px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-action-dialog__facts dt[data-v-ececfa8c] {
+.cn-action-dialog__facts dt[data-v-feabd086] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-action-dialog__facts dd[data-v-ececfa8c] {
+.cn-action-dialog__facts dd[data-v-feabd086] {
 	margin: 0;
 	font-size: 15px;
 	font-weight: 500;
@@ -45889,14 +45963,14 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 
 /* Checklist rows divided by hairlines, the detail at the row's end
    (DqArchiveren "Klaar om te archiveren"). */
-.cn-action-dialog__checks[data-v-ececfa8c] {
+.cn-action-dialog__checks[data-v-feabd086] {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.cn-action-dialog__check[data-v-ececfa8c] {
+.cn-action-dialog__check[data-v-feabd086] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -45905,46 +45979,67 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	border-top: 1px solid var(--color-border);
 	font-size: 15px;
 }
-.cn-action-dialog__check-label[data-v-ececfa8c] {
+.cn-action-dialog__check-label[data-v-feabd086] {
 	flex: 1 1 auto;
 	font-weight: 600;
 }
-.cn-action-dialog__check-icon[data-v-ececfa8c] {
+.cn-action-dialog__check-icon[data-v-feabd086] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-action-dialog__check-icon--met[data-v-ececfa8c] {
+.cn-action-dialog__check-icon--met[data-v-feabd086] {
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-action-dialog__muted[data-v-ececfa8c] {
+.cn-action-dialog__muted[data-v-feabd086] {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-action-dialog__field[data-v-ececfa8c] {
+
+/* A checkbox field is a tinted box with a 2px edge, its label bold and its
+   hint under it (DqArchiveren). */
+.cn-action-dialog__checkbox[data-v-feabd086] {
+	padding: 12px 14px;
+	border: 2px solid var(--color-primary-element);
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-primary-element-light);
+}
+.cn-action-dialog__checkbox-text[data-v-feabd086] {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.cn-action-dialog__checkbox-label[data-v-feabd086] {
+	font-size: 15px;
+	font-weight: 600;
+}
+.cn-action-dialog__checkbox .cn-action-dialog__muted[data-v-feabd086] {
+	font-size: 13px;
+}
+.cn-action-dialog__field[data-v-feabd086] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-action-dialog__error[data-v-ececfa8c] {
+.cn-action-dialog__error[data-v-feabd086] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
 
 
-.cn-assign-dialog[data-v-45153be8] {
+.cn-assign-dialog[data-v-d3dfbd20] {
 	display: flex;
 	flex-direction: column;
 	gap: 18px;
 }
-.cn-assign-dialog__field[data-v-45153be8] {
+.cn-assign-dialog__field[data-v-d3dfbd20] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
 }
-.cn-assign-dialog__hint[data-v-45153be8] {
+.cn-assign-dialog__hint[data-v-d3dfbd20] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-assign-dialog__toggle[data-v-45153be8] {
+.cn-assign-dialog__toggle[data-v-d3dfbd20] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -45952,17 +46047,17 @@ textarea.cn-sm-field__input[data-v-3e23dab3] {
 	border: 1px solid var(--color-border-dark);
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-assign-dialog__toggle--on[data-v-45153be8] {
+.cn-assign-dialog__toggle--on[data-v-d3dfbd20] {
 	border: 2px solid var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
-.cn-assign-dialog__toggle-title[data-v-45153be8] {
+.cn-assign-dialog__toggle-title[data-v-d3dfbd20] {
 	font-weight: 600;
 }
-.cn-assign-dialog__toggle-note[data-v-45153be8] {
+.cn-assign-dialog__toggle-note[data-v-d3dfbd20] {
 	padding-inline-start: 44px;
 }
-.cn-assign-dialog__error[data-v-45153be8] {
+.cn-assign-dialog__error[data-v-d3dfbd20] {
 	margin: 0;
 	color: var(--color-error-text, var(--color-error));
 }
@@ -50908,17 +51003,35 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-user-settings-dialog__body[data-v-6d3e749e] {
+/* The DqPersoonlijkeInstellingen board: a tinted navigation column with the
+   title on top, the sections on a white pane beside it, and the close icon
+   in the corner. The dialog's frame (900px, its tint, no padding) is in
+   dialog.css, on the teleported container. */
+.cn-user-settings-dialog__body[data-v-7d896e3e] {
+	position: relative;
 	display: flex;
-	flex-wrap: wrap;
-	gap: 0 24px;
+	min-height: 440px;
+	max-height: min(760px, calc(100vh - 112px));
 }
-.cn-user-settings-dialog__nav[data-v-6d3e749e] {
+.cn-user-settings-dialog__nav[data-v-7d896e3e] {
+	display: flex;
 	flex: 0 0 200px;
+	flex-direction: column;
+	gap: 2px;
+	box-sizing: border-box;
 	width: 200px;
-	padding-top: 18px;
+	padding: 0 4px 12px;
+	overflow-y: auto;
 }
-.cn-user-settings-dialog__nav ul[data-v-6d3e749e] {
+.cn-user-settings-dialog__title[data-v-7d896e3e] {
+	margin: 0;
+	padding: 14px 10px 12px;
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.25;
+	color: var(--color-main-text);
+}
+.cn-user-settings-dialog__nav ul[data-v-7d896e3e] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -50930,87 +51043,105 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 /* A navigation entry, not a link in running text: no underline, also not
    on hover. `!important` because a theme's `a { text-decoration }` carries
    it (thematiq), and a bare `a` with `!important` beats any class. */
-.cn-user-settings-dialog__nav-link[data-v-6d3e749e],
-.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:visited {
+.cn-user-settings-dialog__nav-link[data-v-7d896e3e],
+.cn-user-settings-dialog__nav-link[data-v-7d896e3e]:visited {
+	position: relative;
 	display: flex;
 	align-items: center;
-	gap: 10px;
-	min-height: 40px;
-	padding: 0 12px;
+	min-height: 36px;
+	padding: 0 10px;
 	border-radius: var(--border-radius-element, 8px);
 	font-size: 15px;
+	font-weight: 500;
 	color: var(--color-main-text);
 	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:hover {
-	background: var(--color-background-hover);
+.cn-user-settings-dialog__nav-label[data-v-7d896e3e] {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-user-settings-dialog__nav-link[data-v-7d896e3e]:hover {
+	background: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
 	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:focus-visible {
+.cn-user-settings-dialog__nav-link[data-v-7d896e3e]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e],
-.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e]:hover {
-	background: var(--color-primary-element-light);
-	color: var(--color-primary-element-light-text);
+
+/* The open section: a stronger tint and a 3px bar at the left edge. */
+.cn-user-settings-dialog__nav-link--active[data-v-7d896e3e],
+.cn-user-settings-dialog__nav-link--active[data-v-7d896e3e]:hover {
+	background: color-mix(in srgb, var(--color-primary-element) 16%, var(--color-primary-element-light));
+}
+.cn-user-settings-dialog__nav-link--active[data-v-7d896e3e]::before {
+	content: '';
+	position: absolute;
+	top: 6px;
+	bottom: 6px;
+	inset-inline-start: 0;
+	width: 3px;
+	border-radius: 2px;
+	background: var(--color-primary-element);
+}
+.cn-user-settings-dialog__group[data-v-7d896e3e] {
+	margin: 10px 0 2px;
+	padding: 0 10px;
+	font-size: 15px;
 	font-weight: 600;
+	color: var(--color-main-text);
 }
-.cn-user-settings-dialog__nav-icon[data-v-6d3e749e] {
-	display: inline-flex;
-	flex: none;
-	width: 18px;
-	height: 18px;
-	align-items: center;
-	justify-content: center;
+.cn-user-settings-dialog__group-sections[data-v-7d896e3e] {
+	padding-inline-start: 10px;
 }
-.cn-user-settings-dialog__sections[data-v-6d3e749e] {
+.cn-user-settings-dialog__sections[data-v-7d896e3e] {
 	display: flex;
-	flex: 1 1 380px;
+	flex: 1 1 auto;
 	flex-direction: column;
+	gap: 32px;
+	box-sizing: border-box;
 	min-width: 0;
+	padding: 20px 64px 20px 24px;
+	overflow-y: auto;
+	border-inline-start: 1px solid var(--color-border);
+	border-radius: 8px 0 0 8px;
+	background: var(--color-main-background);
 }
-.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section {
+.cn-user-settings-dialog__sections[data-v-7d896e3e] .app-settings-section {
 	margin: 0;
-	padding: 18px 0;
-	border-top: 1px solid var(--color-border);
+	padding: 0;
+	border: 0;
 }
-.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section__name {
-	margin: 0 0 12px;
-	font-size: 17px;
+.cn-user-settings-dialog__sections[data-v-7d896e3e] .app-settings-section__name {
+	margin: 0 0 6px;
+	font-size: 20px;
 	font-weight: 700;
-	display: flex;
-	align-items: center;
-	gap: 10px;
+	line-height: 1.3;
 }
-.cn-user-settings-dialog__note[data-v-6d3e749e] {
-	flex: 1 1 auto;
+.cn-user-settings-dialog__note[data-v-7d896e3e] {
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-user-settings-dialog__nc-links[data-v-6d3e749e] {
-	margin-bottom: 2px;
+.cn-user-settings-dialog__close[data-v-7d896e3e] {
+	position: absolute;
+	top: 8px;
+	inset-inline-end: 8px;
 }
-.cn-user-settings-dialog__group[data-v-6d3e749e] {
-	margin: 10px 0 2px;
-	padding: 0 12px;
-	font-size: 15px;
-	font-weight: 600;
-	color: var(--color-main-text);
+@media (max-width: 600px) {
+.cn-user-settings-dialog__body[data-v-7d896e3e] {
+		flex-direction: column;
 }
-.cn-user-settings-dialog__group-sections[data-v-6d3e749e] {
-	padding-inline-start: 12px;
+.cn-user-settings-dialog__nav[data-v-7d896e3e] {
+		flex-basis: auto;
+		width: auto;
+		max-height: 40vh;
 }
-.cn-user-settings-dialog__heading-icon[data-v-6d3e749e] {
-	display: inline-flex;
-	order: -1;
-	color: var(--color-text-maxcontrast);
+.cn-user-settings-dialog__sections[data-v-7d896e3e] {
+		padding: 20px 16px;
+		border-inline-start: 0;
+		border-radius: 8px 8px 0 0;
 }
-
-/* One section at a time: the others are mounted but hidden. */
-.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section[hidden] {
-	display: none;
 }