@conduction/nextcloud-vue 2.56.0-beta.46 → 2.56.0-beta.48

package/l10n/en.json

@@ -1494,7 +1494,30 @@
       "{on} of %n are in the menu"
     ],
     "Put it in the menu:": "Put it in the menu:",
-    "Admin settings": "Admin settings"
+    "Admin settings": "Admin settings",
+    "Support this app": "Support this app",
+    "No features with this status": "No features with this status",
+    "Learn more about {title}": "Learn more about {title}",
+    "Learn more": "Learn more",
+    "Next on the roadmap": "Next on the roadmap",
+    "Coming next": "Coming next",
+    "The most requested items from the issue tracker.": "The most requested items from the issue tracker.",
+    "Opened {date}": "Opened {date}",
+    "See the whole roadmap": "See the whole roadmap",
+    "Features and roadmap": "Features and roadmap",
+    "Beta": "Beta",
+    "Planned": "Planned",
+    "{status}, {expected}": "{status}, {expected}",
+    "Build on this app": "Build on this app",
+    "AI skills": "AI skills",
+    "%n feature": [
+      "%n feature",
+      "%n features"
+    ],
+    "Your account": "Your account",
+    "Only for you. Colleagues keep their own settings.": "Only for you. Colleagues keep their own settings.",
+    "Sections of the settings": "Sections of the settings",
+    "Changes are saved straight away": "Changes are saved straight away"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1680,7 +1680,30 @@
       "{on} van %n staat in het menu",
       "{on} van %n staan in het menu"
     ],
-    "Put it in the menu:": "In het menu zetten:"
+    "Put it in the menu:": "In het menu zetten:",
+    "Support this app": "Steun deze app",
+    "No features with this status": "Geen functies met deze status",
+    "Learn more about {title}": "Lees meer over {title}",
+    "Learn more": "Lees meer",
+    "Next on the roadmap": "Hierna op de roadmap",
+    "Coming next": "Hierna",
+    "The most requested items from the issue tracker.": "De meest gevraagde items uit de issuetracker.",
+    "Opened {date}": "Geopend {date}",
+    "See the whole roadmap": "Bekijk de hele roadmap",
+    "Features and roadmap": "Functies en roadmap",
+    "Beta": "Beta",
+    "Planned": "Gepland",
+    "{status}, {expected}": "{status}, {expected}",
+    "Build on this app": "Bouw verder op deze app",
+    "AI skills": "AI-vaardigheden",
+    "%n feature": [
+      "%n functie",
+      "%n functies"
+    ],
+    "Your account": "Uw account",
+    "Only for you. Colleagues keep their own settings.": "Alleen voor jou. Collega's houden hun eigen instellingen.",
+    "Sections of the settings": "Onderdelen van de instellingen",
+    "Changes are saved straight away": "Wijzigingen worden meteen bewaard"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.46",
+  "version": "2.56.0-beta.48",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsMenu/CnActionsMenu.vue

@@ -32,6 +32,8 @@
 			<template #icon>
 				<DotsHorizontal :size="20" />
 			</template>
+			<!-- @slot lead-items Items rendered at the very top of the menu, above Refresh: the tabs a board strip lists here instead of drawing them (CnTabsWidget). The caller owns any separator after them. -->
+			<slot name="lead-items" />
 			<!-- Stays open while refreshing; onRefreshClick closes the menu once the refresh settles. -->
 			<NcActionButton
 				v-if="showRefresh"
@@ -569,7 +571,7 @@ export default {
 			if (this.showRequestFeature) {
 				return true
 			}
-			if (this.hasPrimaryItems || this.$slots['primary-items']) {
+			if (this.hasPrimaryItems || this.$slots['primary-items'] || this.$slots['lead-items']) {
 				return true
 			}
 			return Boolean(this.$slots['action-items']) || Boolean(this.$slots && this.$slots['action-items'])

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -139,7 +139,7 @@
 			<template #footer>
 				<!-- @slot footer Replaces the default support/SLA footer inside the version card. -->
 				<slot name="footer">
-					<div v-if="showSupport" class="cn-support-info">
+					<div v-if="showSupport && !supportAtEnd" class="cn-support-info">
 						<h4>{{ supportTitle }}</h4>
 						<p>
 							{{ supportLine }}
@@ -185,6 +185,24 @@
 		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. With `tabs`, only while the first tab is open. -->
 		<slot v-if="!versionCardAtEnd && onFirstTab" />
 
+		<!-- `supportPosition: "end"`: the support lines as their own wide card,
+		     last on the page (board PqBeheer), not in the version card. -->
+		<CnSettingsSection
+			v-if="showSupport && supportAtEnd && onFirstTab"
+			class="cn-admin-settings-shell__support"
+			:name="supportTitle"
+			:wide="true"
+			data-testid="cn-admin-settings-support">
+			<p class="cn-admin-settings-shell__support-line">
+				{{ supportLine }}
+				<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a>
+			</p>
+			<p v-if="slaEmail" class="cn-admin-settings-shell__support-line">
+				{{ slaLine }}
+				<a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a>
+			</p>
+		</CnSettingsSection>
+
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
 			v-if="showSetup && setupWizardOpen"
@@ -216,6 +234,7 @@ import { normalizeLook, useLook } from '../../composables/useLook.js'
 import { ensureTranslations } from '../../l10n/index.js'
 import { buildFeatureRequestUrl } from '../../utils/forge.js'
 import { prefixUrl } from '../../utils/headers.js'
+import { CnSettingsSection } from '../CnSettingsSection/index.js'
 import { CnTab, CnTabs } from '../CnTabs/index.js'
 import { CnVersionInfoCard } from '../CnVersionInfoCard/index.js'
 
@@ -327,6 +346,7 @@ export default {
 		BookOpenVariant,
 		NcSettingsSection,
 		CnCredentials,
+		CnSettingsSection,
 		CnVersionInfoCard,
 		CnSetupWizard,
 		CnTab,
@@ -616,6 +636,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Where the support lines go: `card`, in the version card's footer (the
+		 * default), or `end`, as their own wide card after everything else on
+		 * the first tab (board PqBeheer).
+		 *
+		 * @spec openspec/changes/admin-shell-support-end/specs/settings-board-look/spec.md#requirement-support-can-be-its-own-card-at-the-end
+		 */
+		supportPosition: {
+			type: String,
+			default: 'card',
+			validator: (value) => ['card', 'end'].includes(value),
+		},
+
 		/** Support contact email. */
 		supportEmail: {
 			type: String,
@@ -723,6 +756,11 @@ export default {
 			return this.versionCardPosition === 'end'
 		},
 
+		/** @return {boolean} Whether the support lines are their own card at the end. */
+		supportAtEnd() {
+			return this.supportPosition === 'end'
+		},
+
 		/**
 		 * The crumbs that have a label.
 		 *

package/src/components/CnAppRoot/CnAppRoot.md

@@ -85,6 +85,8 @@ With loading state, custom components, translate, permissions, and custom page t
 | `permissions` | Array | No | `[]` | Permission strings for the current user; forwarded to `CnAppNav` for menu filtering |
 | `pageTypes` | Object | No | `null` | Page-type registry map (`type → component`). Falls back to the library's `defaultPageTypes`. Extend with `{ ...defaultPageTypes, report: MyReportPage }` |
 | `userSettingsTitle` | String | No | `''` | Title shown at the top of the hosted `NcAppSettingsDialog`. Empty (the default) resolves to "User settings" from the library catalogue ("Persoonlijke instellingen" in Dutch), then the app's `translate`. Override per app to brand the modal (e.g. `'Decidiq preferences'`). |
+| `userSettingsEyebrow` | String | No | `''` | Board look: the line above the user-settings title. Empty uses "Your account" ("Uw account"). Goes through the app's `translate`. |
+| `userSettingsSubtitle` | String | No | `''` | Board look: the sentence under the user-settings title. Empty uses "Only for you. Colleagues keep their own settings." Goes through the app's `translate`. |
 | `userSettingsSections` | Array | No | `null` | The user-settings sections to draw, in order: `app` (the app's slot content), `notifications`, `credentials`, `walkthrough`, `integrations`. A key left out is not drawn. `null` keeps the defaults: every section after `#user-settings-sections` content, or only the `#user-settings` content and the integrations section. |
 | `adminSettingsTitle` | String | No | `''` | Title shown at the top of the admin-settings `NcAppSettingsDialog`. Empty (the default) resolves to `translate('Administration')`. Override per app (e.g. `'Pipelinq administration'`). |
 | `requiresApps` | Array | No | `['openregister']` | App ids that MUST be installed for the host app to function. Checked against the OCS capabilities API on mount. When any required app is missing, CnAppRoot renders the empty state from the `or-missing` slot (default: `<NcEmptyContent>`) instead of the renderer. Pass `[]` to opt out (e.g. launchpad, the docs/styleguide app) — useful for any consumer that does not depend on OpenRegister. |

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -550,10 +550,9 @@
 			    integrations section are drawn, unless `userSettingsSections`
 			    names more.
 			-->
-			<NcAppSettingsDialog
-				:open="userSettingsOpen"
-				:showNavigation="true"
-				:name="resolvedUserSettingsTitle"
+			<component
+				:is="resolvedLook === 'board' ? 'CnUserSettingsDialog' : 'NcAppSettingsDialog'"
+				v-bind="userSettingsDialogProps"
 				@update:open="userSettingsOpen = $event">
 				<template v-for="section in userSettingsSectionOrder()" :key="section">
 					<template v-if="section === 'app'">
@@ -573,6 +572,9 @@
 					<NcAppSettingsSection v-else-if="section === 'credentials' && userSettingsOpen"
 						id="credentials"
 						:name="libraryCopy('Credentials')">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<KeyOutline :size="18" />
+						</template>
 						<CnCredentials
 							scope="personal"
 							:appId="appId"
@@ -587,6 +589,9 @@
 					<NcAppSettingsSection v-else-if="section === 'walkthrough' && walkthroughEnabled"
 						id="cn-walkthrough"
 						:name="restartWalkthroughSectionName">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<Play :size="18" />
+						</template>
 						<p class="cn-app-root__walkthrough-hint">
 							{{ restartWalkthroughHint }}
 						</p>
@@ -628,6 +633,9 @@
 					<NcAppSettingsSection v-else-if="section === 'integrations' && userSettingsOpen && integrationEntries.length"
 						id="cn-integrations"
 						:name="translate('Integrations')">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<OpenInNew :size="18" />
+						</template>
 						<p class="cn-app-root__integrations-hint">
 							{{ libraryCopy('These open in another app.') }}
 						</p>
@@ -653,7 +661,7 @@
 						</ul>
 					</NcAppSettingsSection>
 				</template>
-			</NcAppSettingsDialog>
+			</component>
 
 			<!--
 			  ADR-079 Step 2: the generic admin-settings modal has been REMOVED.
@@ -693,6 +701,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcAppContent, NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcContent, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import { computed, reactive, shallowRef, watch } from 'vue'
 import DatabaseSearchOutline from 'vue-material-design-icons/DatabaseSearchOutline.vue'
+import KeyOutline from 'vue-material-design-icons/KeyOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 import Restart from 'vue-material-design-icons/Restart.vue'
@@ -709,6 +718,7 @@ import CnObjectSidebar from '../CnObjectSidebar/CnObjectSidebar.vue'
 import CnSetupWizard from '../CnSetupWizard/CnSetupWizard.vue'
 import CnSupportDialog from '../CnSupportDialog/CnSupportDialog.vue'
 import CnTenantBadge from '../CnTenantBadge/CnTenantBadge.vue'
+import CnUserSettingsDialog from '../CnUserSettingsDialog/CnUserSettingsDialog.vue'
 import CnWalkthrough from '../CnWalkthrough/CnWalkthrough.vue'
 import { DEFAULT_CHAT_APP_ID } from '../../composables/aiChatConfig.js'
 import { useAppInstaller } from '../../composables/useAppInstaller.js'
@@ -818,6 +828,7 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		DatabaseSearchOutline,
+		KeyOutline,
 		OpenInNew,
 		Play,
 		Restart,
@@ -832,6 +843,7 @@ export default {
 		CnObjectSidebar,
 		CnSupportDialog,
 		CnNotificationPreferences,
+		CnUserSettingsDialog,
 		CnCredentials,
 		CnTenantBadge,
 	},
@@ -1648,6 +1660,29 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: the line above the user-settings title. Empty uses
+		 * the library's "Your account".
+		 *
+		 * @type {string}
+		 */
+		userSettingsEyebrow: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Board look: the sentence under the user-settings title. Empty
+		 * uses the library's "Only for you. Colleagues keep their own
+		 * settings."
+		 *
+		 * @type {string}
+		 */
+		userSettingsSubtitle: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * The sections of the user-settings modal, in the order they are
 		 * drawn. Keys: `app` (the content of the `#user-settings-sections`
@@ -3065,6 +3100,32 @@ export default {
 			return this.userSettingsTitle || this.libraryCopy('User settings')
 		},
 
+		/**
+		 * The props of the user-settings dialog: `NcAppSettingsDialog`'s, or
+		 * under the board look CnUserSettingsDialog's (eyebrow, subtitle and
+		 * the app's name for the footer note).
+		 *
+		 * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
+		 * @return {object}
+		 */
+		userSettingsDialogProps() {
+			if (this.resolvedLook !== 'board') {
+				return { open: this.userSettingsOpen, showNavigation: true, name: this.resolvedUserSettingsTitle }
+			}
+			const props = {
+				open: this.userSettingsOpen,
+				title: this.resolvedUserSettingsTitle,
+				appName: this.appDisplayName || (this.manifest && this.manifest.name) || this.appId || '',
+			}
+			if (this.userSettingsEyebrow) {
+				props.eyebrow = this.translate(this.userSettingsEyebrow)
+			}
+			if (this.userSettingsSubtitle) {
+				props.subtitle = this.translate(this.userSettingsSubtitle)
+			}
+			return props
+		},
+
 		/**
 		 * Title for the admin-settings modal. Prop override, else the
 		 * translated "Administration". Mirrors `resolvedUserSettingsTitle`.

package/src/components/CnChoiceCards/CnChoiceCards.md

@@ -61,3 +61,30 @@ four lines `description-lines` shows by default:
     ]" />
 </div>
 ```
+
+One option per row with `layout="rows"`, an option that cannot be picked yet
+(`disabled` with a `disabledReason`), and fields for the chosen option right
+under it through the `option-actions` slot (scope `{ option, selected }`):
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Next step"
+    layout="rows"
+    :model-value="'decide'"
+    :options="[
+      { value: 'decide', label: 'Take a decision',
+        description: 'Record the decision and inform the applicant.' },
+      { value: 'advice', label: 'Ask for advice',
+        description: 'Send the case to the advisory committee.' },
+      { value: 'close', label: 'Close the case', disabled: true,
+        disabledReason: 'A decision has to be taken first.' },
+    ]">
+    <template #option-actions="{ option, selected }">
+      <p v-if="selected && option.value === 'decide'" style="margin: 0 0 0 32px;">Decision fields go here.</p>
+    </template>
+  </CnChoiceCards>
+</div>
+```
+
+`columns` fixes the card grid's column count; `:columns="1"` stacks the cards in one column.

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -14,6 +14,45 @@
 			{{ emptyText }}
 		</NcNoteCard>
 
+		<!-- Rows: one full-width option per row, the input on the left and the
+		     title over a muted description, no card chrome. -->
+		<div v-else-if="layout === 'rows'" class="cn-choice-cards__rows" data-testid="cn-choice-cards-rows">
+			<div
+				v-for="option in normalizedOptions"
+				:key="String(option.value)"
+				class="cn-choice-cards__cell">
+				<label
+					class="cn-choice-cards__row"
+					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option) }">
+					<input
+						class="cn-choice-cards__row-input"
+						:type="multiple ? 'checkbox' : 'radio'"
+						:name="groupName"
+						:value="String(option.value)"
+						:checked="isSelected(option)"
+						:disabled="isDisabled(option)"
+						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
+						@change="onToggle(option)">
+					<CnIcon v-if="option.icon"
+						:name="option.icon"
+						:size="20"
+						class="cn-choice-cards__row-icon" />
+					<span class="cn-choice-cards__row-text">
+						<span class="cn-choice-cards__row-title">{{ option.label }}</span>
+						<span v-if="option.description" class="cn-choice-cards__row-description">{{ option.description }}</span>
+						<span
+							v-if="option.disabled && option.disabledReason"
+							:id="reasonId(option)"
+							class="cn-choice-cards__reason"
+							data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
+					</span>
+				</label>
+				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
+					<slot name="option-actions" :option="option" :selected="isSelected(option)" />
+				</div>
+			</div>
+		</div>
+
 		<div v-else class="cn-choice-cards__grid" :style="gridStyle">
 			<!-- One cell per option: the card's label, and below it whatever the
 			     `#option-actions` slot adds. The slot sits OUTSIDE the label on
@@ -37,7 +76,8 @@
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="disabled"
+						:disabled="isDisabled(option)"
+						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnCard
 						class="cn-choice-cards__card"
@@ -53,6 +93,11 @@
 							<CnIcon :name="option.icon" :size="20" />
 						</template>
 					</CnCard>
+					<span
+						v-if="option.disabled && option.disabledReason"
+						:id="reasonId(option)"
+						class="cn-choice-cards__reason cn-choice-cards__reason--card"
+						data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
 				</label>
 				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
 					<!-- @slot option-actions Content below one card, outside its label
@@ -109,7 +154,9 @@ export default {
 	props: {
 		/**
 		 * The options to offer. Each: `{ value, label, description?, stats?,
-		 * tags?, icon? }` — `icon` is a PascalCase MDI name resolved by CnIcon.
+		 * tags?, icon?, disabled?, disabledReason? }` — `icon` is a PascalCase
+		 * MDI name resolved by CnIcon; a `disabled` option is greyed out and
+		 * cannot be picked, with `disabledReason` shown under it.
 		 */
 		options: {
 			type: Array,
@@ -156,6 +203,23 @@ export default {
 			default: () => t('nextcloud-vue', 'Nothing to choose from here.'),
 		},
 
+		/**
+		 * `cards`: a grid of cards with stats and tags. `rows`: one option per
+		 * row, full width, the input on the left and the title over a muted
+		 * description; with `multiple` and one option it is a checkbox card.
+		 */
+		layout: {
+			type: String,
+			default: 'cards',
+			validator: (value) => ['cards', 'rows'].includes(value),
+		},
+
+		/** Columns of the card grid; 0 lets the grid fit as many as the width allows. */
+		columns: {
+			type: Number,
+			default: 0,
+		},
+
 		/** Lines of description shown before clamping. */
 		descriptionLines: {
 			type: Number,
@@ -226,6 +290,9 @@ export default {
 		 * @return {object} A `gridTemplateColumns` override, or `{}`.
 		 */
 		gridStyle() {
+			if (this.columns > 0) {
+				return { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }
+			}
 			const count = this.normalizedOptions.length
 			if (count > 0 && count <= 2) {
 				return { gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }
@@ -244,6 +311,26 @@ export default {
 		 * @param {object} option The normalised option.
 		 * @return {boolean} True when selected.
 		 */
+		/**
+		 * Whether an option cannot be picked: the whole group is disabled, or the option is.
+		 *
+		 * @param {object} option The normalised option.
+		 * @return {boolean} True when disabled.
+		 */
+		isDisabled(option) {
+			return this.disabled || option.disabled === true
+		},
+
+		/**
+		 * Id of an option's disabled reason, for `aria-describedby`.
+		 *
+		 * @param {object} option The normalised option.
+		 * @return {string} The id.
+		 */
+		reasonId(option) {
+			return `${this.groupName}-reason-${String(option.value).replace(/[^A-Za-z0-9_-]/g, '-')}`
+		},
+
 		isSelected(option) {
 			return this.selectedValues.some((v) => String(v) === String(option.value))
 		},
@@ -255,7 +342,7 @@ export default {
 		 * @return {void}
 		 */
 		onToggle(option) {
-			if (this.disabled) {
+			if (this.isDisabled(option)) {
 				return
 			}
 			if (!this.multiple) {
@@ -368,4 +455,82 @@ export default {
 .cn-choice-cards__input:disabled + :deep(.cn-card) {
 	opacity: 0.6;
 }
+
+.cn-choice-cards__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-choice-cards__row {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 14px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+
+.cn-choice-cards__row:hover {
+	border-color: var(--color-border-dark);
+}
+
+.cn-choice-cards__row--selected,
+.cn-choice-cards__row--selected:hover {
+	border-color: var(--color-primary-element);
+	/* The second pixel of the 2px selected border, without moving the content. */
+	box-shadow: inset 0 0 0 1px var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+
+.cn-choice-cards__row--disabled {
+	cursor: default;
+	opacity: 0.6;
+}
+
+.cn-choice-cards__row:has(.cn-choice-cards__row-input:focus-visible) {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-choice-cards__row-input {
+	flex: none;
+	margin: 2px 0 0;
+	accent-color: var(--color-primary-element);
+	cursor: inherit;
+}
+
+.cn-choice-cards__row-icon {
+	flex: none;
+}
+
+.cn-choice-cards__row-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-choice-cards__row-title {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-choice-cards__row-description {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-choice-cards__reason {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+
+.cn-choice-cards__reason--card {
+	display: block;
+	margin-block-start: 4px;
+}
 </style>