@conduction/nextcloud-vue 2.143.0 → 2.145.0

package/src/css/look-board-detail.css

@@ -627,6 +627,30 @@
 	font-size: 14px;
 }
 
+/* The reply box's buttons (Opslaan als concept, Versturen) are the board's
+   40px control, as DqBerichtVersturen draws Versturen; NcButton draws 34
+   (DqZaakContact r29 controlHeight 34).
+   @spec openspec/changes/board-conversation-reply-buttons-40/specs/board-conversation-reply-buttons-40/spec.md#requirement-the-reply-boxs-buttons-are-the-boards-40px-control */
+.cn-look-board .cn-conversation-thread__reply .button-vue:where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
+/* A lead widget in a card (the review summary over the files) stands 16px
+   above the card's own body, the boards' gap between a card's parts
+   (DqZaakDocumenten r29: the files toolbar sat flush under the summary).
+   @spec openspec/changes/board-lead-widget-gap-16/specs/board-lead-widget-gap-16/spec.md#requirement-a-lead-widget-stands-16px-above-the-cards-body */
+.cn-look-board .cn-detail-widget-host__lead:not(.cn-look-nextcloud *) {
+	margin-bottom: 16px;
+}
+
+/* The compact review summary runs on the normal line height, as the board
+   draws its heading and legend (DqZaakDocumenten r29: heading 22.5 vs 18,
+   the box 99.5 vs 91 high).
+   @spec openspec/changes/board-stacked-bar-compact-line-height/specs/board-stacked-bar-compact-line-height/spec.md#requirement-the-compact-summary-runs-on-the-normal-line-height */
+.cn-look-board .cn-stacked-bar--compact:not(.cn-look-nextcloud *) {
+	line-height: normal;
+}
+
 /* The case Status card as the board draws it: no grey box, the status's
    explanation as its bold line, the time in the status muted under it.
    @spec openspec/changes/status-explainer-board/specs/record-widgets/spec.md#requirement-the-status-card-says-where-the-record-stands-as-the-board-draws-it */
@@ -707,6 +731,14 @@
 	padding: calc(12px - var(--cn-board-first-line-leading)) var(--cn-board-card-inline-padding) 20px;
 }
 
+/* A history card with stacked rows (DqTaak "Historie") opens on the first
+   row's hairline 6px under the title, the row's own 12px padding above its
+   text, as drawn: 19px from the title to the first action.
+   @spec openspec/changes/board-history-card-ruled-start/specs/board-history-card-ruled-start/spec.md#requirement-a-board-history-card-with-stacked-rows-opens-on-its-first-rule */
+.cn-look-board .cn-detail-card .cn-detail-card__content:has(> .cn-audit-card__list > .cn-audit-card__row--stacked:first-child):not(.cn-look-nextcloud *) {
+	padding-top: 6px;
+}
+
 /* A data card (labels over values) starts 14px below its title (DqZaak
    "Zaakgegevens", DqContact "Contact"). A side card keeps its 10px.
    @spec openspec/changes/board-data-card-gap/specs/board-data-card-gap/spec.md#requirement-a-board-data-cards-body-starts-14px-below-its-title */
@@ -787,6 +819,47 @@
 	font-weight: 500;
 }
 
+/* A data card's label and value sit 3px apart on the normal line height, as
+   the boards draw their facts (194 of 212 dt/dd pairs: gap 3px, no line
+   height); live ran them at 1.5 with a 2px gap (DqZaakContact
+   Ontvangstbevestiging r29: the first label 33.8 under the title, board 29).
+   @spec openspec/changes/board-data-cell-rhythm/specs/board-data-cell-rhythm/spec.md#requirement-a-data-cards-label-and-value-sit-3px-apart-on-the-normal-line-height */
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__cell.cn-object-data-widget__cell {
+	gap: 3px;
+}
+
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__label.cn-object-data-widget__label,
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__value {
+	line-height: normal;
+}
+
+/* A note in a page card starts at the card's inset: no list-item padding
+   around it, its icon 12px before the text (DqZaakEmail Notities r29: icon
+   at 31 and text at 71 where the board draws 23 and 67).
+   @spec openspec/changes/board-notes-card-rows-flush/specs/board-notes-card-rows-flush/spec.md#requirement-a-note-in-a-page-card-starts-at-the-cards-inset */
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item__wrapper:not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item:not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item-content:not(.cn-look-nextcloud *) {
+	padding-inline-start: 12px;
+}
+
+/* The note's two lines on the normal line height and its icon at the top of
+   the row, as the board draws the author tile beside the name (probed on
+   :8080: the name 44.8 under the title as drawn, the icon 6.5px lower while
+   centred in the 45px item).
+   @spec openspec/changes/board-notes-card-rows-flush/specs/board-notes-card-rows-flush/spec.md#requirement-a-note-in-a-page-card-starts-at-the-cards-inset */
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item-content__name:not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item-content__subname:not(.cn-look-nextcloud *) {
+	line-height: normal;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread .list-item__anchor > :first-child:not(.list-item-content):not(.cn-look-nextcloud *) {
+	align-self: flex-start;
+}
+
 /* Side cards: the heading is a 15px muted label, not a title. The tone
    carries `!important` against a theme that colours every h3 that way
    (thematiq's heading colour). */
@@ -806,6 +879,14 @@
 	padding: calc(10px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
+/* A side card that opens on a list draws its first row's hairline 10px below
+   the title box; the row has no leading for the glyph gap above to subtract
+   (DqZaaktypeRegels, DqZaaktypeStatussen "Versies").
+   @spec openspec/changes/board-side-list-gap/specs/board-side-list-gap/spec.md#requirement-a-board-side-cards-list-starts-10px-below-its-title */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__content:has(> .cn-record-list--rows) {
+	padding-top: 10px;
+}
+
 /* A side card that opens on a lead (DqZaak "Aanvrager", DqOrganisatie "KvK en
    adres") draws the lead row 12px below the title, its two lines at their
    normal height so they centre on the 40px tile.
@@ -885,6 +966,13 @@
 	line-height: 1;
 }
 
+/* A list's Add in the title row is the card's 34px control, as the boards
+   draw a card's Add (DqZaaktype "Variant toevoegen"). */
+.cn-look-board .cn-detail-page__catalog-action--add:not(.cn-detail-page__side *):not(.cn-look-nextcloud *) {
+	height: 34px;
+	min-height: 34px;
+}
+
 .cn-look-board .cn-detail-page__catalog-action:not(.cn-detail-page__side *):not(.cn-look-nextcloud *):hover {
 	background: var(--color-background-hover);
 }
@@ -1235,6 +1323,13 @@
 
 .cn-look-board .cn-retention .cn-retention__head-text .cn-retention__muted {
 	font-size: 14px;
+	line-height: 1.2;
+}
+
+/* The board stacks the archiving card's parts 10px apart (r26a: the head
+   row 45.9 vs 41 and the facts 55.9 vs 30 under the title). */
+.cn-look-board .cn-retention.cn-retention {
+	gap: 10px;
 }
 
 .cn-look-board .cn-retention .cn-retention__fact {
@@ -1312,6 +1407,26 @@
 	line-height: 1.2;
 }
 
+/* The task name takes the spare width, so it wraps only when long; the
+   handler stays on one line. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table th:first-child,
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table .cn-tasks-widget__cell-task {
+	width: 100%;
+}
+
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table .cn-tasks-widget__cell-handler {
+	white-space: nowrap;
+}
+
+/* A head's filter is a 22px button, so a head is 42px high as drawn. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table .cn-tasks-widget__head-filter .button-vue {
+	--button-size: 22px;
+	min-width: 22px;
+	min-height: 22px;
+	width: 22px;
+	height: 22px;
+}
+
 /* A long task name wraps under itself, as the board draws it, rather than
    widening the table past the card. */
 .cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table :is(.cn-tasks-widget__name, .cn-tasks-widget__meta) {
@@ -1345,6 +1460,13 @@
 	padding-inline-end: var(--cn-board-card-inline-padding);
 }
 
+/* A row menu in the last column keeps its 34px button and 16px start
+   padding beside the card's end padding, so it is not cut off. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-object-list-widget--bleed .cn-table-container .cn-data-table .cn-table-col--actions:last-child {
+	width: calc(50px + var(--cn-board-card-inline-padding));
+	min-width: calc(50px + var(--cn-board-card-inline-padding));
+}
+
 /* ---- Grouped cards (CnGroupedCardsWidget, DqZaaktype "Fasen en taken") --- */
 /* Groups 14px apart, each padded 14px with a 10px radius and a bold title; a
    card in a group is padded 9px 12px with the 8px control radius, its title
@@ -1370,6 +1492,14 @@
 
 .cn-look-board .cn-grouped-cards__group-title.cn-grouped-cards__group-title {
 	font-weight: 700;
+	line-height: 1.2;
+}
+
+/* The buttons above the groups are the card's 34px controls ("Bekijken als
+   flow", "Taak toevoegen"), not the page's 40px ones. */
+.cn-look-board .cn-grouped-cards__actions:not(.cn-look-nextcloud *) .button-vue {
+	min-height: 34px;
+	height: 34px;
 }
 
 .cn-look-board .cn-grouped-cards__item.cn-grouped-cards__item {
@@ -1379,6 +1509,7 @@
 
 .cn-look-board .cn-grouped-cards__item-title.cn-grouped-cards__item-title {
 	font-size: 15px;
+	line-height: 1.2;
 }
 
 /* A card with actions holds them at its end, beside the title and meta (the
@@ -1400,6 +1531,15 @@
 	margin: 0;
 }
 
+/* ---- A sidebar tab standing in a page card --------------------------------- */
+/* The Files, Notes, Tasks... tabs pad themselves 12px for the sidebar. On a
+   detail page the card around them already pads, and the boards draw their
+   toolbar, table and rows flush with the card title (DqZaakDocumenten, DqZaakEmail).
+   @spec openspec/changes/board-sidebar-tab-flush-in-card/specs/board-sidebar-tab-flush-in-card/spec.md#requirement-a-sidebar-tab-in-a-page-card-adds-no-padding-of-its-own */
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab:not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
 /* ---- A file's side card (CnFilesBrowser) --------------------------------- */
 /* The board's side card: radius 12, 20px 22px of padding, the title a 15px
    muted heading at 600, the facts 8px 16px apart with the values at 500
@@ -1529,6 +1669,34 @@
 	gap: 14px 16px;
 }
 
+/* In a page card the mail tab is the card's body: no padding of its own, 12px
+   between its parts, the heading at the card title's 17px/700 and the
+   description at 14px (DqZaakEmail "E-mail").
+   @spec openspec/changes/board-mail-tab-in-card/specs/board-mail-tab-in-card/spec.md#requirement-a-mail-tab-in-a-page-card-reads-as-the-card */
+.cn-look-board .cn-detail-widget-host .cn-mail-tab:not(.cn-look-nextcloud *) {
+	gap: 12px;
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-mail-tab__title:not(.cn-look-nextcloud *) {
+	font-size: 17px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-mail-tab__subtitle:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+}
+
+/* The mail card's description runs on the normal line height: thematiq's
+   board paragraph token (1.5) gave
+   it 21px lines (probed on :8080 after REFRESH-4b: 14px/21 vs the board's
+   normal; DqZaakEmail r29 E-mail gapBelowTitle 44.4 vs 49).
+   @spec openspec/changes/board-mail-subtitle-line-height/specs/board-mail-subtitle-line-height/spec.md#requirement-the-mail-cards-description-runs-on-the-normal-line-height */
+.cn-look-board .cn-detail-widget-host .cn-mail-tab__subtitle.cn-mail-tab__subtitle:not(.cn-look-nextcloud *) {
+	line-height: normal;
+}
+
 /* ---- The attention flag's buttons --------------------------------------- */
 /* The case boards draw "Markeer voor aandacht" and the flag's other labelled
    buttons at the 40px control height (DqZaak and the case tab boards);
@@ -1549,6 +1717,31 @@
 	line-height: normal;
 }
 
+/* In a page card the notes tab's "Add note" stands at the end of the card's
+   title row, and each note thread opens with a hairline (DqZaakEmail
+   "Notities": the button beside the title, rows 12px 0 under a rule). The
+   card (CnWidgetWrapper) is the positioned box; the add form, when open,
+   stays in the body.
+   @spec openspec/changes/board-notes-card-add-in-title-row/specs/board-notes-card-add-in-title-row/spec.md#requirement-a-notes-card-carries-its-add-in-the-title-row */
+.cn-look-board .cn-detail-widget-host .cn-widget-wrapper .cn-sidebar-tab__composer-toggle:not(.cn-look-nextcloud *) {
+	position: absolute;
+	top: 20px;
+	inset-inline-end: var(--cn-board-card-inline-padding);
+}
+
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab__action:has(> .cn-sidebar-tab__composer-toggle):not(:has(.cn-sidebar-tab__composer)):not(.cn-look-nextcloud *) {
+	margin-bottom: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab__list:not(.cn-look-nextcloud *) {
+	gap: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread:not(.cn-look-nextcloud *) {
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
 /* The notes tab's "Add note" button, when the add form waits behind it, is
    the board's 40px control (DqZaakEmail "Notitie toevoegen").
    @spec openspec/changes/notes-tab-composer-button/specs/notes-tab-composer-button/spec.md#requirement-the-notes-tab-can-keep-its-composer-behind-a-button */
@@ -1668,9 +1861,14 @@
 }
 
 .cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab .cn-contacts-tab__header {
+	display: inline-flex;
 	justify-content: flex-start;
 }
 
+.cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab .cn-contacts-tab__header .button-vue {
+	--button-size: var(--cn-board-control-height);
+}
+
 /* A body card's subtitle as the Dq boards draw it: 14px muted at line
    height 1.2, 3px under the title, and the content 12px under it.
    @spec openspec/changes/board-card-subtitle-gaps/specs/board-card/spec.md */
@@ -1722,3 +1920,318 @@
 .cn-look-board .cn-checklist-widget__item .checkbox-content__text {
 	font-weight: 600;
 }
+
+/* The parties widget's "Dit zaaktype accepteert" strip as DqZaakBetrokkenen
+   draws it: a sunken strip rounded at 8px, the label 14px bold, the kinds
+   as outlined 13px chips.
+   @spec openspec/changes/board-parties-accepted-strip/specs/parties/spec.md */
+.cn-look-board .cn-object-parties .cn-object-parties__accepted {
+	gap: 6px 8px;
+	padding: 8px 12px;
+	border-radius: 8px;
+	background-color: var(--cn-board-sunken-ground);
+}
+
+.cn-look-board .cn-object-parties .cn-object-parties__accepted-label {
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-object-parties .cn-object-parties__accepted-kind {
+	padding: 2px 8px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+}
+
+/* A short side list (`density: "stacked"`, DqOrganisatie "Lopende zaken")
+   starts 10px under the title with no hairline and no row padding; a main
+   contact (DqOrganisatie "Hoofdcontact") starts 12px under it, its two lines
+   at their normal height so they centre on the 40px tile.
+   @spec openspec/changes/board-side-lead-gaps/specs/board-side-lead-gaps/spec.md#requirement-a-board-side-card-starts-a-stacked-list-or-main-contact-as-drawn */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__content:has(> .cn-record-list--stacked) {
+	padding-top: 10px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__content:has(> .cn-object-parties > .cn-object-parties__main-card) {
+	padding-top: 12px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--stacked.cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__item {
+	border-top: 0;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--stacked.cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__side .cn-object-parties__main-text {
+	line-height: normal;
+}
+
+/* Appointment and note rows (DqTaak Afspraken, Notities): a hairline above
+   every row including the first, 12px 0 padding, a 32px round tile (the day
+   an appointment starts, the author's initials) 12px before the text, the
+   title 15/600 and one 13px muted meta line joined with " · ". Every
+   selector carries :not(.cn-look-nextcloud *) to outrank the cards' scoped
+   rules, which tie with a two-class selector and load later.
+   @spec openspec/changes/board-task-cards-rows/specs/task-cards/spec.md#requirement-board-appointment-and-note-rows-carry-a-tile-and-a-meta-line */
+.cn-look-board .cn-events-card__list:not(.cn-look-nextcloud *) {
+	gap: 0;
+}
+
+.cn-look-board .cn-events-card__event:not(.cn-look-nextcloud *),
+.cn-look-board .cn-events-card__event:not(.cn-look-nextcloud *):last-child,
+.cn-look-board .cn-notes-card__note:not(.cn-look-nextcloud *),
+.cn-look-board .cn-notes-card__note:not(.cn-look-nextcloud *):last-child {
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-bottom: none;
+}
+
+.cn-look-board .cn-events-card__day:not(.cn-look-nextcloud *),
+.cn-look-board .cn-notes-card__initials:not(.cn-look-nextcloud *) {
+	display: inline-flex;
+	flex: 0 0 32px;
+	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);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-events-card__text:not(.cn-look-nextcloud *) {
+	flex-flow: row wrap;
+	row-gap: 2px;
+}
+
+.cn-look-board .cn-events-card__summary:not(.cn-look-nextcloud *),
+.cn-look-board .cn-notes-card__body:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.35;
+}
+
+.cn-look-board .cn-events-card__summary:not(.cn-look-nextcloud *) {
+	flex-basis: 100%;
+}
+
+.cn-look-board .cn-events-card__when:not(.cn-look-nextcloud *),
+.cn-look-board .cn-events-card__where:not(.cn-look-nextcloud *),
+.cn-look-board .cn-notes-card__author:not(.cn-look-nextcloud *),
+.cn-look-board .cn-notes-card__time:not(.cn-look-nextcloud *) {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+}
+
+.cn-look-board .cn-events-card__where:not(.cn-look-nextcloud *)::before,
+.cn-look-board .cn-notes-card__time:not(.cn-look-nextcloud *)::before {
+	content: ' · ';
+	white-space: pre;
+}
+
+.cn-look-board .cn-notes-card__note:not(.cn-look-nextcloud *) {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding-inline-start: 44px;
+}
+
+.cn-look-board .cn-notes-card__initials:not(.cn-look-nextcloud *) {
+	position: absolute;
+	top: 12px;
+	inset-inline-start: 0;
+}
+
+.cn-look-board .cn-notes-card__body:not(.cn-look-nextcloud *) {
+	order: -1;
+}
+
+.cn-look-board .cn-notes-card__note-header:not(.cn-look-nextcloud *) {
+	justify-content: flex-start;
+	margin-bottom: 0;
+}
+
+.cn-look-board .cn-notes-card__time:not(.cn-look-nextcloud *) {
+	margin-inline-start: 0;
+}
+
+/* The parties widget's rows as DqZaakBetrokkenen "Rollen" draws them: one
+   ruled row per party, a 32px initials tile, the name over a muted meta line
+   that names the role, the pills at the end. The role headings stay for
+   assistive tech only.
+   @spec openspec/changes/board-parties-rows/specs/parties/spec.md */
+.cn-look-board .cn-object-parties--board {
+	gap: 8px;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__role-label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__list {
+	gap: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__party {
+	flex-wrap: nowrap;
+	gap: 12px;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-radius: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__tile {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__text {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__name {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__meta {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The calendar and Deck cards' rows as DqZaakTaken "Afspraken" and "Kaarten"
+   draw them: ruled rows, the title over a muted meta line, the pill at the
+   end, and the link to the app under the rows.
+   @spec openspec/changes/board-deck-calendar-rows/specs/integrations/spec.md */
+.cn-look-board .cn-detail-page .cn-calendar-card__row,
+.cn-look-board .cn-detail-page .cn-deck-card__row {
+	display: flex;
+	gap: 16px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__row-main,
+.cn-look-board .cn-detail-page .cn-deck-card__row-main {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__title,
+.cn-look-board .cn-detail-page .cn-deck-card__row-title {
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__meta,
+.cn-look-board .cn-detail-page .cn-deck-card__row-meta {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__end {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+}
+
+.cn-look-board .cn-detail-page .cn-deck-card__row-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__open,
+.cn-look-board .cn-detail-page .cn-deck-card__open {
+	display: inline-block;
+	margin-top: 12px;
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: underline;
+}
+
+/* Two-column facts (`columns: 2`, DqContact "Contact", DqOrganisatie
+   "Organisatie"): the boards draw the label 2px above a regular-weight
+   value, with no hairline under the fact; the 14px row gap separates them.
+   @spec openspec/changes/board-facts-columns-plain/specs/board-facts-columns-plain/spec.md#requirement-board-two-column-facts-are-plain-label-over-value-pairs */
+.cn-look-board .cn-facts-widget__rows--columns:not(.cn-look-nextcloud *) .cn-facts-widget__row {
+	gap: 2px;
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.cn-look-board .cn-facts-widget__rows--columns:not(.cn-look-nextcloud *) .cn-facts-widget__value.cn-facts-widget__value {
+	font-weight: 400;
+	line-height: normal;
+}
+
+.cn-look-board .cn-facts-widget__rows--columns:not(.cn-look-nextcloud *) .cn-facts-widget__label.cn-facts-widget__label {
+	line-height: normal;
+}
+
+/* A ruled list in a page card (`ruleAbove`, DqContact and DqOrganisatie
+   "Zaken", "Tickets"): the rule sits 12px under the title and each row has
+   12px above and below its text, so the first row's text is 25px under the
+   title.
+   @spec openspec/changes/board-ruled-list-card-start/specs/board-ruled-list-card-start/spec.md#requirement-a-board-ruled-list-in-a-page-card-starts-12px-under-the-title */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content:has(> .cn-record-list--rows.cn-record-list--rule-above):not(.cn-detail-page__side *),
+.cn-look-board .cn-detail-card__content:has(> .cn-record-list--rows.cn-record-list--rule-above):not(.cn-detail-page__side *) {
+	padding-top: 12px;
+}
+
+.cn-look-board .cn-detail-page .cn-record-list--rows.cn-record-list--rule-above:not(.cn-detail-page__side *):not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 12px 0;
+}
+
+/* A side list row with initials stays one line: a 28px circle 8px before
+   the regular-weight text (DqSociaalDomein "Wie"). The library stacks side
+   rows into a column, which put the initials above the name.
+   @spec openspec/changes/board-side-person-rows/specs/board-side-person-rows/spec.md#requirement-a-board-side-row-with-initials-keeps-them-beside-the-text */
+.cn-look-board .cn-detail-page__side .cn-record-list__row:has(> .cn-record-list__avatar):not(.cn-look-nextcloud *) {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list__row:not(.cn-look-nextcloud *) > .cn-record-list__avatar {
+	width: 28px;
+	height: 28px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list__row:has(> .cn-record-list__avatar):not(.cn-look-nextcloud *) .cn-record-list__title {
+	font-weight: 400;
+}