@conduction/nextcloud-vue 2.106.0 → 2.107.0

package/dist/esm/nextcloud-vue.css

@@ -238,6 +238,18 @@
 	padding: 0;
 }
 
+/* ---- Button weight ------------------------------------------------------ */
+/* The boards draw a labelled button at 600 (DqZaken "Downloaden", DqZaak's
+   header, dialog footers, toolbar and row actions). An NcButton reads its
+   weight from --font-weight-element, which Nextcloud sets to 500; the board
+   look sets 600 on each button, so every NcButton on a board page draws the
+   board's weight without a rule per surface. Breadcrumb buttons keep the
+   crumb weight.
+   @spec openspec/changes/board-button-weight/specs/board-button-weight/spec.md#requirement-a-board-button-draws-at-600 */
+.cn-look-board .button-vue:not(.cn-look-nextcloud *):not(.vue-crumb *) {
+	--font-weight-element: 600;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -1151,9 +1163,12 @@
 	color: var(--cn-status-badge-ink);
 }
 
-/* Every board pill is 13px at 600 on a 3px 10px pad with a 12px corner
-   (DqZaak's header pills, DqZaken's status column). */
-.cn-look-board .cn-status-badge:not(.cn-status-badge--small):not(.cn-look-nextcloud *) {
+/* Every board tag is 13px at 600 on a 3px 10px pad with a 12px corner, 21px
+   tall (DqZaak's header pills, DqZaken's status column, DqZaaktype's version
+   tag). The boards draw one tag size, so a small badge takes it too: it was
+   a 17.8px full pill at 500.
+   @spec openspec/changes/board-tags-shape/specs/board-tags-shape/spec.md#requirement-a-board-tag-is-a-21px-rounded-rectangle */
+.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
 	padding: 3px 10px;
 	border-radius: 12px;
 	font-size: 13px;
@@ -3159,14 +3174,16 @@
 	line-height: 16px;
 }
 
-/* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
-   status colour map's. */
+/* A status pill: 3px 10px, radius 12, 13px weight 600, 21px tall on a
+   normal line (a 1.4 line made it 24.2). The colours stay the status colour
+   map's.
+   @spec openspec/changes/board-tags-shape/specs/board-tags-shape/spec.md#requirement-a-board-tag-is-a-21px-rounded-rectangle */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
 	padding: 3px 10px;
 	border-radius: 12px;
 	font-size: 13px;
 	font-weight: 600;
-	line-height: 1.4;
+	line-height: normal;
 }
 
 /* The row menu column holds one 34px button between 16px of padding, so 66px
@@ -6526,6 +6543,22 @@ a.cn-kpi-card--board * {
 	font-size: 14px;
 }
 
+/* The map's count line and the note when a map that plots every row hit its
+   limit. */
+.cn-index-page__map-count {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px 16px;
+	padding: 12px 16px;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-index-page__map-cap {
+	color: var(--color-warning-text, var(--color-main-text));
+}
+
 /* Table view owns both scroll axes. With the page column scrolling instead, the
    table's horizontal scrollbar sat at the bottom of the (taller-than-viewport)
    table, so it only appeared after scrolling down, and the pagination was
@@ -11953,24 +11986,24 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	line-height: 30px;
 	}
 
-.cn-map-widget[data-v-21c47690] {
+.cn-map-widget[data-v-3c7d18d6] {
 	position: relative;
 	width: 100%;
 	min-height: 200px;
 }
-.cn-map-widget__leaflet[data-v-21c47690] {
+.cn-map-widget__leaflet[data-v-3c7d18d6] {
 	width: 100%;
 	height: 100%;
 	/* Leaflet paints its container #ddd, which reads as a white flash before the
 	   tiles arrive — and a bright one in a dark theme. */
 	background: var(--color-background-dark);
 }
-.cn-map-widget__note[data-v-21c47690] {
+.cn-map-widget__note[data-v-3c7d18d6] {
 	margin: 4px 0 0;
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-map-widget__fallback[data-v-21c47690] {
+.cn-map-widget__fallback[data-v-3c7d18d6] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -11978,11 +12011,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-height: 150px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-map-widget__error[data-v-21c47690] {
+.cn-map-widget__error[data-v-3c7d18d6] {
 	font-size: 14px;
 	margin: 0;
 }
-.cn-map-widget__legend[data-v-21c47690] {
+.cn-map-widget__legend[data-v-3c7d18d6] {
 	position: absolute;
 	top: 12px;
 	right: 12px;
@@ -11995,7 +12028,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 /* Fullscreen overlay. A CSS-fixed box rather than the Fullscreen API, so it needs
    no permission prompt; the z-index clears the Nextcloud header. */
-.cn-map-widget--fullscreen[data-v-21c47690] {
+.cn-map-widget--fullscreen[data-v-3c7d18d6] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -12008,7 +12041,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
    Leaflet's default white-on-grey buttons.
    ::v-deep is required — Leaflet builds the control DOM via L.DomUtil.create, so
    those nodes never receive this SFC's scoped data-v attribute. */
-.cn-map-widget[data-v-21c47690] .cn-map-widget__control {
+.cn-map-widget[data-v-3c7d18d6] .cn-map-widget__control {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -12017,8 +12050,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	color: var(--color-main-text);
 	background: var(--color-main-background);
 }
-.cn-map-widget[data-v-21c47690] .cn-map-widget__control:hover,
-.cn-map-widget[data-v-21c47690] .cn-map-widget__control:focus-visible {
+.cn-map-widget[data-v-3c7d18d6] .cn-map-widget__control:hover,
+.cn-map-widget[data-v-3c7d18d6] .cn-map-widget__control:focus-visible {
 	background: var(--color-background-hover);
 }
 
@@ -12038,6 +12071,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-weight: 700;
 	box-sizing: border-box;
 }
+.cn-map-widget__pin-fill {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+}
 .cn-map-widget__pin--active {
 	background: var(--color-primary-element-light-text);
 }
@@ -40045,6 +40086,91 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
+.cn-saved-views-panel[data-v-4fb62f2c] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.cn-saved-views-panel__head[data-v-4fb62f2c] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-saved-views-panel__section[data-v-4fb62f2c] {
+	margin: 8px 0 0;
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-saved-views-panel__note[data-v-4fb62f2c] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-saved-views-panel__labels[data-v-4fb62f2c] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+.cn-saved-views-panel__label[data-v-4fb62f2c] {
+	min-height: var(--default-clickable-area);
+	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);
+}
+.cn-saved-views-panel__label[aria-pressed='true'][data-v-4fb62f2c] {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+.cn-saved-views-panel__list[data-v-4fb62f2c] {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-saved-views-panel__row[data-v-4fb62f2c] {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	border-radius: var(--border-radius-element, var(--border-radius-large));
+}
+.cn-saved-views-panel__row--selected[data-v-4fb62f2c] {
+	background: var(--color-primary-element-light);
+}
+.cn-saved-views-panel__name[data-v-4fb62f2c] {
+	flex: 1 1 auto;
+	min-width: 0;
+	min-height: var(--default-clickable-area);
+	padding: 0 8px;
+	border: 0;
+	background: transparent;
+	color: var(--color-main-text);
+	text-align: start;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.cn-saved-views-panel__name[data-v-4fb62f2c] {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+}
+.cn-saved-views-panel__name-text[data-v-4fb62f2c],
+.cn-saved-views-panel__subline[data-v-4fb62f2c] {
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.cn-saved-views-panel__subline[data-v-4fb62f2c] {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-saved-views-panel__name[data-v-4fb62f2c]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: -2px;
+}
+
+
 .cn-date-range-picker[data-v-57616240] {
 	display: flex;
 	align-items: center;
@@ -40282,6 +40408,33 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
+.cn-edit-view__intro[data-v-60baacaa],
+.cn-edit-view__note[data-v-60baacaa] {
+	margin: 0;
+}
+.cn-edit-view__note[data-v-60baacaa] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-edit-view__criteria[data-v-60baacaa] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+.cn-edit-view__criteria legend[data-v-60baacaa] {
+	font-weight: bold;
+	margin-bottom: 4px;
+}
+.cn-edit-view[data-v-60baacaa] {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding-block: 8px;
+}
+
+
 .cn-view-presentation[data-v-36149399] {
 	display: flex;
 	flex-direction: column;
@@ -40328,46 +40481,45 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-/* NcActionButtonGroup gives every child `flex: 1 1` (equal width) by
-   default; override so the name button grows and the delete icon stays
-   compact. :deep() is required — these li's belong to NcActionButtonGroup's
-   own scope, not this component's. */
-.cn-saved-view-row[data-v-55facfc2] .nc-button-group-content {
-	gap: 0;
-}
-
-/* Anchored on the FIRST child, not the last: a row carries one or two buttons
-   depending on ownership, so "the last one" is the name button on a row that
-   has only that. */
-.cn-saved-view-row[data-v-55facfc2] .nc-button-group-content > li {
-	flex: 0 0 auto;
-}
-.cn-saved-view-row[data-v-55facfc2] .nc-button-group-content > li:first-child {
-	flex: 1 1 auto;
-}
-
-/* NcActionButtonGroup also centers .action-button content (fine for an
-   icon-only toolbar button, wrong for a row with a name) — restore the
-   normal left-aligned NcActionButton look for the name button. */
-.cn-saved-view-row[data-v-55facfc2] .nc-button-group-content > li:first-child .action-button {
-	justify-content: flex-start;
-}
-
-
-.cn-saved-view-share__modes[data-v-50093771] {
+.cn-saved-view-share__modes[data-v-1ffd06b8] {
 	list-style: none;
 	margin: 8px 0 0;
 	padding: 0;
 }
-.cn-saved-view-share__mode[data-v-50093771] {
+.cn-saved-view-share__mode[data-v-1ffd06b8] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 12px;
+	flex-wrap: wrap;
+	gap: 8px 12px;
+}
+.cn-saved-view-share__who[data-v-1ffd06b8] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 160px;
+	min-width: 0;
+}
+.cn-saved-view-share__kind[data-v-1ffd06b8],
+.cn-saved-view-share__hint[data-v-1ffd06b8] {
+	margin: 0;
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-saved-view-share__rights[data-v-1ffd06b8] {
+	display: flex;
+	gap: 8px;
+}
+.cn-saved-view-share__caption[data-v-1ffd06b8] {
+	margin: 8px 0 0;
+	font-size: var(--default-font-size);
+	font-weight: bold;
 }
 
 
-.cn-share-view[data-v-f44dbce0] {
+.cn-share-view__intro[data-v-346505e6] {
+	margin: 0;
+}
+.cn-share-view[data-v-346505e6] {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -41312,6 +41464,86 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
+.cn-action-dialog[data-v-53fea6f0] {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+.cn-action-dialog__summary[data-v-53fea6f0] {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 14px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+}
+.cn-action-dialog__summary-text[data-v-53fea6f0] {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	min-width: 0;
+}
+.cn-action-dialog__badge[data-v-53fea6f0] {
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: var(--color-background-dark);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+.cn-action-dialog__title[data-v-53fea6f0] {
+	margin: 0 0 8px;
+	font-size: 15px;
+	font-weight: 700;
+}
+.cn-action-dialog__facts[data-v-53fea6f0] {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	gap: 8px 16px;
+	margin: 0;
+}
+.cn-action-dialog__facts dt[data-v-53fea6f0] {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+.cn-action-dialog__facts dd[data-v-53fea6f0] {
+	margin: 0;
+}
+.cn-action-dialog__checks[data-v-53fea6f0] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-action-dialog__check[data-v-53fea6f0] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 8px;
+}
+.cn-action-dialog__check-icon[data-v-53fea6f0] {
+	color: var(--color-text-maxcontrast);
+}
+.cn-action-dialog__check-icon--met[data-v-53fea6f0] {
+	color: var(--color-success-text, var(--color-success));
+}
+.cn-action-dialog__muted[data-v-53fea6f0] {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+.cn-action-dialog__field[data-v-53fea6f0] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.cn-action-dialog__error[data-v-53fea6f0] {
+	margin: 0;
+	color: var(--color-error-text, var(--color-error));
+}
+
+
 .cn-relation-link[data-v-6559b00a] {
 	padding: 20px;
 	display: flex;
@@ -41745,7 +41977,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-61decc06] {
+.cn-dashboard-page[data-v-6991cea0] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -41759,7 +41991,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-61decc06] {
+.cn-dashboard-page__header[data-v-6991cea0] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -41771,21 +42003,21 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-61decc06] {
+.cn-dashboard-page__header-left[data-v-6991cea0] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-61decc06] {
+.cn-dashboard-page__title-row[data-v-6991cea0] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-61decc06] {
+.cn-dashboard-page__title[data-v-6991cea0] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-61decc06] {
+.cn-dashboard-page__description[data-v-6991cea0] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -41793,19 +42025,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Board look (screens-dashboard-parity): h1 28/700, a 15px grey subtitle 6px
    under it, and 40px buttons with a 10px gap. */
-.cn-dashboard-page--board .cn-dashboard-page__title[data-v-61decc06] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-6991cea0] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-61decc06] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-6991cea0] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61decc06] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-6991cea0] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-61decc06] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-6991cea0] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -41813,17 +42045,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* The switch row under the header (screens-dashboard-greeting-header): the
    view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
    radius 17, 13px/600, a 14px icon, primary light on primary deep). */
-.cn-dashboard-page__switch-row[data-v-61decc06] {
+.cn-dashboard-page__switch-row[data-v-6991cea0] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 	margin-bottom: var(--cn-board-section-gap, 20px);
 }
-.cn-dashboard-page__switch-row-spacer[data-v-61decc06] {
+.cn-dashboard-page__switch-row-spacer[data-v-6991cea0] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-61decc06] {
+.cn-dashboard-page__view-link[data-v-6991cea0] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -41837,37 +42069,37 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-61decc06]:hover {
+.cn-dashboard-page__view-link[data-v-6991cea0]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-61decc06]:focus-visible {
+.cn-dashboard-page__view-link[data-v-6991cea0]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-61decc06] {
+.cn-dashboard-page__view-link-icon[data-v-6991cea0] {
 	display: inline-flex;
 }
 
 /* The period group, in a row of its own between the header and the KPI row. */
-.cn-dashboard-page__date-range--segmented[data-v-61decc06] {
+.cn-dashboard-page__date-range--segmented[data-v-6991cea0] {
 	margin-bottom: 16px;
 }
 
 /* The period group at the end of the description line. */
-.cn-dashboard-page__description--with-period[data-v-61decc06] {
+.cn-dashboard-page__description--with-period[data-v-6991cea0] {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
 }
-.cn-dashboard-page__date-segmented[data-v-61decc06] {
+.cn-dashboard-page__date-segmented[data-v-6991cea0] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
 /* The KPI row above the grid: tiles are cells of the auto-fit grid. */
-.cn-dashboard-page__kpi-row[data-v-61decc06] {
+.cn-dashboard-page__kpi-row[data-v-6991cea0] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
@@ -41875,15 +42107,15 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    the cards started a margin to the right of the KPI row and the header. The
    grid reaches out by that margin, so the card edges line up with the page's
    (dashboard-grid-flush). */
-.cn-dashboard-page--board[data-v-61decc06] .cn-dashboard-grid {
+.cn-dashboard-page--board[data-v-6991cea0] .cn-dashboard-grid {
 	width: auto;
 	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
 }
-.cn-dashboard-page__kpi-cell[data-v-61decc06] {
+.cn-dashboard-page__kpi-cell[data-v-6991cea0] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-61decc06] > * {
+.cn-dashboard-page__kpi-cell[data-v-6991cea0] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -41896,7 +42128,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    scoped chip rules then silently don't match and the chip collapses into
    NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
    data-testid is stable across chunks, so those rules match regardless. */
-.cn-dashboard-page__header-actions[data-v-61decc06] {
+.cn-dashboard-page__header-actions[data-v-6991cea0] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -41912,19 +42144,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Date-range header band. Kept compact so it doesn't open a tall gap
    above the grid; the pills variant is a single tidy toggle row. */
-.cn-dashboard-page__date-range[data-v-61decc06] {
+.cn-dashboard-page__date-range[data-v-6991cea0] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-61decc06] {
+.cn-dashboard-page__date-range--pills[data-v-6991cea0] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-61decc06] {
+.cn-dashboard-page__date-pills[data-v-6991cea0] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-61decc06] {
+.cn-dashboard-page__date-pill[data-v-6991cea0] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -41939,77 +42171,77 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-61decc06]:hover {
+.cn-dashboard-page__date-pill[data-v-6991cea0]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-61decc06]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-6991cea0]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-61decc06] {
+.cn-dashboard-page__date-pill--active[data-v-6991cea0] {
 	background: var(--color-primary-element);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-dashboard-page__date-pill--active[data-v-61decc06]:hover {
+.cn-dashboard-page__date-pill--active[data-v-6991cea0]:hover {
 	background: var(--color-primary-element-hover, var(--color-primary-element));
 }
 
 /* The custom-range pill is de-emphasised — dashed outline, muted text —
    so it reads as an escape hatch rather than a primary option. */
-.cn-dashboard-page__date-pill--custom[data-v-61decc06] {
+.cn-dashboard-page__date-pill--custom[data-v-6991cea0] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-61decc06] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-6991cea0] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-61decc06] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-6991cea0] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-6991cea0] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-6991cea0] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-61decc06] {
+.cn-dashboard-page__empty[data-v-6991cea0] {
 	padding: 60px 20px;
 }
 
 /* The page's view switch on a page without a header row: at the end of its
    own row, above the grids, where the header would have put it. */
-.cn-dashboard-page__view-switch[data-v-61decc06] {
+.cn-dashboard-page__view-switch[data-v-6991cea0] {
 	display: flex;
 	justify-content: flex-end;
 	margin-bottom: 12px;
 }
 
 /* A view the switch shows with nothing to draw. */
-.cn-page-view-region--empty[data-v-61decc06] {
+.cn-page-view-region--empty[data-v-6991cea0] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-61decc06] {
+.cn-dashboard-page__page-filters[data-v-6991cea0] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-61decc06] {
+.cn-dashboard-page__page-filter[data-v-6991cea0] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-61decc06] {
+.cn-dashboard-page__page-filter-label[data-v-6991cea0] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-61decc06] {
+.cn-dashboard-page__widget-edit[data-v-6991cea0] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -42028,8 +42260,8 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    and centre the card. */
 /* `safe` centre so an overflowing tile does not spill out of the top, where
    flex overflow cannot be scrolled back to. Same as detail-page.css. */
-.cn-dashboard-page__card-fit[data-v-61decc06] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-61decc06] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-6991cea0] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-6991cea0] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42045,7 +42277,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    shows up as a scrollbar the user has to drag to see the whole graph. Same
    shape as the card-fit rule above, minus the padding: chart tiles render
    `flush`, and apexcharts already draws its own margins. */
-.cn-dashboard-page__chart-fit[data-v-61decc06] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-6991cea0] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -42055,13 +42287,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* Card content (stat / gauge / delta) must fit the tile width: let the
    widget shrink and its value/label truncate instead of pushing past the
    tile edge (the horizontal clip on long currency values). */
-.cn-dashboard-page__card-fit[data-v-61decc06] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-61decc06] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-61decc06] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-6991cea0] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-6991cea0] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-6991cea0] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-61decc06] {
+.cn-dashboard-page__unknown[data-v-6991cea0] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -42072,31 +42304,31 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-61decc06] {
+.cn-dashboard-page__content[data-v-6991cea0] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-61decc06] {
+.cn-dashboard-page__content-item[data-v-6991cea0] {
 	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-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-6991cea0] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-6991cea0] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-61decc06] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-6991cea0] {
 		min-height: 44px;
 }
 
 	/* The widget Actions menu shows its icon only, so the card title keeps
 	   the room; the name stays for assistive tech. */
-.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle {
+.cn-dashboard-page--board[data-v-6991cea0] .cn-widget-wrapper__actions .action-item__menutoggle {
 		min-width: 44px;
 }
-.cn-dashboard-page--board[data-v-61decc06] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
+.cn-dashboard-page--board[data-v-6991cea0] .cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -42108,7 +42340,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* What a registry widget reports for its card header (`header` event): the
    note beside the link ("3 in total") and one action, as on a detail page. */
-.cn-dashboard-page__widget-count[data-v-61decc06] {
+.cn-dashboard-page__widget-count[data-v-6991cea0] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -42117,13 +42349,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-61decc06] {
+.cn-dashboard-page__widget-note[data-v-6991cea0] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-61decc06] {
+.cn-dashboard-page__widget-action[data-v-6991cea0] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -42139,7 +42371,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-61decc06]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-6991cea0]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -45524,6 +45756,14 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
+.cn-app-nav__hint {
+	list-style: none;
+	padding: 4px 12px 8px 16px;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The emblem beside the app name (`nav.brand.emblem`). A theme sets
    --nldesign-emblem-url for `emblem: true`, and --cn-nav-emblem-size for both. */
 .cn-app-nav__brand-emblem {