domma-cms 0.102.1 → 0.103.0

package/plugins/booking/plugin.json

@@ -0,0 +1,80 @@
+{
+  "name": "booking",
+  "displayName": "Booking",
+  "version": "1.3.1",
+  "tier": "free",
+  "description": "Let people book appointments with you or your team, and rooms or equipment, from a booking page on your site. Opening hours, days off and buffers; confirmation and reminder emails with a link to change or cancel; a diary in the admin. Book straight from a contact or an email.",
+  "author": "Domma CMS",
+  "date": "2026-09-30",
+  "icon": "clipboard-check",
+  "uses": {
+    "contacts": "Customers become contacts; Book… on a contact and a Bookings panel on the contact card",
+    "calendar": "Bookings show in the Calendar, and a person's Calendar events block their booking times"
+  },
+  "permissions": [
+    {
+      "key": "booking",
+      "label": "Booking",
+      "group": "Plugins",
+      "icon": "clipboard-check",
+      "description": "See the diary and bookings (read) or run Booking: make, move and cancel bookings, services, people and rooms, and settings (manage).",
+      "actions": [
+        {
+          "key": "read",
+          "label": "See",
+          "description": "Open Booking and see the diary and its bookings"
+        },
+        {
+          "key": "manage",
+          "label": "Manage",
+          "description": "Make, move and cancel bookings; edit services, people and rooms, and Booking's settings"
+        }
+      ],
+      "grant": [
+        "admin"
+      ]
+    }
+  ],
+  "inject": {
+    "bodyEnd": "inject/body.html"
+  },
+  "admin": {
+    "css": [
+      "admin/css/index.css"
+    ],
+    "sidebar": [
+      {
+        "id": "booking",
+        "text": "Booking",
+        "icon": "clipboard-check",
+        "url": "#/plugins/booking",
+        "section": "#/plugins/booking",
+        "permission": "booking",
+        "countUrl": "/api/plugins/booking/count"
+      }
+    ],
+    "routes": [
+      {
+        "path": "/plugins/booking",
+        "view": "plugin-booking",
+        "title": "Booking - Domma CMS"
+      },
+      {
+        "path": "/plugins/booking/:tab",
+        "view": "plugin-booking",
+        "title": "Booking - Domma CMS"
+      },
+      {
+        "path": "/plugins/booking/:tab/:id",
+        "view": "plugin-booking",
+        "title": "Booking - Domma CMS"
+      }
+    ],
+    "views": {
+      "plugin-booking": {
+        "entry": "booking/admin/views/booking.js?v=1.1.0",
+        "exportName": "bookingView"
+      }
+    }
+  }
+}

package/plugins/booking/plugin.public.js

@@ -0,0 +1,157 @@
+/**
+ * Booking - the booking page, at the address in Settings ("/booking" by
+ * default):
+ *
+ *   /booking                      every service that can be booked, then the flow
+ *   /booking/<service-slug>       straight into one service
+ *   /booking/manage/<id>?t=       the customer's own booking: change or cancel it
+ *   /booking/call/<session>?b=&t= an online booking's video call (h= instead of t= for the host)
+ *
+ * Like the Shop, the pages are answered from ONE onRequest hook matching the
+ * address as it is saved NOW, so moving the page needs no restart. Every page
+ * is complete HTML without script (the services, the booking's details);
+ * public/booking.js makes it live, and so does the [booking] shortcode.
+ */
+import path from 'path';
+import {fileURLToPath} from 'url';
+import {renderBlogPage} from '../../server/services/renderer.js';
+import {allBookables, allServices, getBooking, liveSettings, publicBooking, tokenOk} from './lib/store.js';
+import {callWindow, whoIsCalling} from './lib/call.js';
+import {dayLabel, lengthLabel} from './public/lib/page-format.js';
+
+const TEMPLATE = path.join(fileURLToPath(new URL('.', import.meta.url)), 'templates', 'booking.html');
+export const ASSET_V = '1.3.1';
+
+/** Which page a path is, under the booking page's base. */
+export function matchBookingPath(pathname, base) {
+    if (pathname === base) return {name: 'index', params: {}};
+    if (!pathname.startsWith(`${base}/`)) return null;
+    let parts;
+    try { parts = pathname.slice(base.length + 1).split('/').map(decodeURIComponent); } catch { return null; }
+    if (parts.length === 1 && parts[0] === '') return {name: 'slash', params: {}};
+    if (parts.length === 2 && parts[0] === 'manage' && /^[\w-]{8,64}$/.test(parts[1])) return {name: 'manage', params: {id: parts[1]}};
+    if (parts.length === 2 && parts[0] === 'call' && /^[\w-]{10,40}$/.test(parts[1])) return {name: 'call', params: {room: parts[1]}};
+    if (parts.length === 1 && /^[a-z0-9-]{1,60}$/.test(parts[0]) && parts[0] !== 'manage' && parts[0] !== 'call') return {name: 'service', params: {slug: parts[0]}};
+    return null;
+}
+
+export const esc = (s) => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+
+/** Plain text with blank lines between paragraphs, as HTML. */
+const paras = (text, cls = '') => String(text || '').split(/\n\s*\n/).map(p => p.trim()).filter(Boolean)
+    .map(p => `<p${cls ? ` class="${cls}"` : ''}>${esc(p).replace(/\n/g, '<br>')}</p>`).join('');
+
+/** The mount point the browser script takes over; `inner` is what shows without script. */
+const app = (cfg, inner) => `<div class="bk-app" data-booking='${esc(JSON.stringify(cfg))}'>`
+    + `<noscript><p class="bk-note">Booking needs JavaScript switched on in your browser. You can also contact us to book.</p></noscript>${inner}</div>`;
+
+/** Services a customer may book, with at least one active person or room. */
+async function bookableServices() {
+    const [services, bookables] = await Promise.all([allServices(), allBookables()]);
+    const live = new Set(bookables.filter(b => b.active !== false).map(b => b.id));
+    return services.filter(s => s.active !== false && s.public !== false && (s.bookables || []).some(id => live.has(id)));
+}
+
+function serviceCards(services, base) {
+    if (!services.length) return '<p class="bk-note">Nothing can be booked online just now. Please contact us.</p>';
+    return `<ul class="bk-services">${services.map(s => `<li><a class="bk-service" href="${esc(`${base}/${s.slug}`)}">`
+        + `<span class="bk-service-name">${esc(s.name)}</span><span class="bk-service-meta">${esc(lengthLabel(s.duration))}</span>`
+        + (s.description ? `<span class="bk-service-desc">${esc(s.description)}</span>` : '') + '</a></li>').join('')}</ul>`;
+}
+
+export default async function bookingPublic(fastify) {
+    async function send(reply, request, s, {body, title, description = '', urlPath, noindex = false, page}) {
+        const html = await renderBlogPage(TEMPLATE, {body, page, assetV: ASSET_V}, {
+            title, description, urlPath, noindex,
+            baseUrl: `${request.protocol}://${request.host || request.headers.host || request.hostname}`
+        });
+        return reply.type('text/html; charset=utf-8').header('Cache-Control', 'no-store').send(html);
+    }
+
+    const pages = {
+        async index(request, reply, s) {
+            const services = await bookableServices();
+            return send(reply, request, s, {
+                page: 'index',
+                title: s.pageTitle || 'Book',
+                description: String(s.intro || '').slice(0, 200),
+                urlPath: s.bookingPath,
+                body: `<header class="bk-hero"><h1>${esc(s.pageTitle || 'Book')}</h1>${paras(s.intro, 'bk-intro')}</header>`
+                    + app({base: s.bookingPath, service: '', with: '', embedded: false}, serviceCards(services, s.bookingPath))
+            });
+        },
+
+        async slash(request, reply, s) {
+            return reply.redirect(s.bookingPath, 301);
+        },
+
+        async service(request, reply, s, {slug}) {
+            const svc = (await bookableServices()).find(x => x.slug === slug);
+            if (!svc) return null;   // the CMS's own 404, or a page at that address
+            return send(reply, request, s, {
+                page: 'service',
+                title: `${svc.name} - ${s.pageTitle || 'Book'}`,
+                description: String(svc.description || '').slice(0, 200),
+                urlPath: `${s.bookingPath}/${slug}`,
+                body: `<header class="bk-hero"><p class="bk-crumbs"><a href="${esc(s.bookingPath)}">${esc(s.pageTitle || 'Book')}</a></p>`
+                    + `<h1>${esc(svc.name)}</h1><p class="bk-intro">${esc(lengthLabel(svc.duration))}${svc.description ? ` · ${esc(svc.description)}` : ''}</p></header>`
+                    + app({base: s.bookingPath, service: svc.id, with: '', embedded: false}, '')
+            });
+        },
+
+        async manage(request, reply, s, {id}) {
+            const b = await getBooking(id);
+            const t = String(request.query?.t || '');
+            if (!b || !tokenOk(b, t)) return null;
+            const p = publicBooking(b, s);
+            const rows = [['What', p.serviceName], ['When', `${dayLabel(p.date)}, ${p.time}`], ['With', p.bookableName], ['Name', p.name], ['Email', p.email]]
+                .filter(([, v]) => v).map(([k, v]) => `<div><dt>${esc(k)}</dt><dd>${esc(v)}</dd></div>`).join('');
+            const state = p.status === 'cancelled' ? '<p class="bk-status is-cancelled">This booking has been cancelled.</p>' : '';
+            return send(reply, request, s, {
+                page: 'manage',
+                title: `Your booking - ${s.pageTitle || 'Book'}`,
+                urlPath: `${s.bookingPath}/manage/${id}`,
+                noindex: true,
+                body: `<header class="bk-hero"><p class="bk-crumbs"><a href="${esc(s.bookingPath)}">${esc(s.pageTitle || 'Book')}</a></p><h1>Your booking</h1></header>`
+                    + app({base: s.bookingPath, mode: 'manage', id: b.id, t, embedded: false}, `${state}<dl class="bk-details">${rows}</dl>`)
+            });
+        }
+    };
+
+    /**
+     * An online booking's call. The link is checked here only to decide
+     * between the call and a plain "not valid" page; the call's own join
+     * checks it again (and the time window) before anyone is let in.
+     */
+    pages.call = async function call(request, reply, s, {room}) {
+        const q = request.query || {};
+        const cred = {b: String(q.b || '').slice(0, 64), ...(q.h ? {h: String(q.h).slice(0, 128)} : {t: String(q.t || '').slice(0, 128)})};
+        const b = await getBooking(cred.b).catch(() => null);
+        const who = whoIsCalling(b, room, cred);
+        const head = `<header class="bk-hero"><p class="bk-crumbs"><a href="${esc(s.bookingPath)}">${esc(s.pageTitle || 'Book')}</a></p>`;
+        if (!who) {
+            return send(reply, request, s, {page: 'call', title: `Call - ${s.pageTitle || 'Book'}`, urlPath: `${s.bookingPath}/call/${room}`, noindex: true,
+                body: `${head}<h1>This call link is not valid</h1></header><p class="bk-note">The booking may have been cancelled or moved. Check the latest email we sent you.</p>`});
+        }
+        const {closesAt} = callWindow(b);
+        const cfg = {api: '/api/plugins/booking/call', room, cred, title: `${b.serviceName}${who.host ? `: ${b.name}` : b.bookableName ? ` with ${b.bookableName}` : ''}`,
+            askName: false, recordingAllowed: who.recordingAllowed, closesAt};
+        return send(reply, request, s, {page: 'call', title: `${b.serviceName} - online`, urlPath: `${s.bookingPath}/call/${room}`, noindex: true,
+            body: `<link rel="stylesheet" href="/plugins/_lib/public/call/call.css?v=${ASSET_V}">`
+                + `<div data-dm-call='${esc(JSON.stringify(cfg))}'><noscript><p class="bk-note">The call needs JavaScript switched on.</p></noscript></div>`
+                + `<script type="module" src="/plugins/_lib/public/call/call.js?v=${ASSET_V}"></script>`});
+    };
+
+    fastify.addHook('onRequest', async (request, reply) => {
+        if (request.method !== 'GET' && request.method !== 'HEAD') return;
+        const s = await liveSettings();
+        const hit = matchBookingPath(request.url.split('?')[0], s.bookingPath);
+        if (!hit) return;
+        const sent = await pages[hit.name](request, reply, s, hit.params);
+        if (sent === null) return;   // not ours after all
+        return sent;
+    });
+}
+
+// The onRequest hook must see every request, not only routes registered here (it registers none).
+bookingPublic[Symbol.for('skip-override')] = true;

package/plugins/booking/public/booking.css

@@ -0,0 +1,159 @@
+/*
+ * Booking - the booking page and the [booking] shortcode.
+ *
+ * Built on the site's theme tokens (--dm-*), each with a neutral fallback, so
+ * the page wears whatever theme the site wears - light, dark or custom. Only
+ * .bk-* classes are styled; nothing here touches a bare element outside them.
+ *
+ * The tokens are resolved on body, not :root: a theme sets its --dm-* on the
+ * body's dm-theme-* class, and a property defined on :root would freeze the
+ * root's (light) values for every descendant.
+ */
+
+body {
+    --bk-accent: var(--dm-primary, #4f46e5);
+    --bk-accent-ink: var(--dm-primary-text, #fff);
+    --bk-bg: var(--dm-surface, #fff);
+    --bk-text: var(--dm-text, #16181d);
+    --bk-muted: var(--dm-text-muted, #6b7280);
+    --bk-line: var(--dm-border, rgba(127, 127, 127, .28));
+    --bk-soft: color-mix(in srgb, var(--bk-text) 5%, transparent);
+    --bk-danger: var(--dm-danger, #dc2626);
+    --bk-good: var(--dm-success, #16a34a);
+    --bk-radius: var(--dm-radius-lg, 14px);
+    --bk-radius-sm: var(--dm-radius-md, 10px);
+    --bk-ease: cubic-bezier(.2, .8, .2, 1);
+}
+
+.bk-page { padding-top: 1.5rem; padding-bottom: 4rem; color: var(--bk-text); }
+.bk-page h1, .bk-app h2, .bk-app h3 { color: var(--bk-text); }
+.bk-page [hidden], .bk-app [hidden] { display: none !important; }
+
+.bk-hero { margin: .5rem 0 1.5rem; }
+.bk-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5rem; }
+.bk-intro { max-width: 62ch; font-size: 1.08rem; color: var(--bk-muted); margin: 0 0 .5rem; }
+.bk-crumbs { margin: 0 0 .4rem; font-size: .9rem; }
+.bk-crumbs a { color: var(--bk-muted); }
+
+.bk-app { max-width: 46rem; color: var(--bk-text); }
+.bk-app.is-embedded { margin: 1.5rem 0; }
+.bk-step-title { font-size: 1.35rem; margin: 0 0 1rem; outline: none; }
+/* Focused by script so a screen reader starts each step there; not a control, so no ring. */
+.bk-app .bk-step-title:focus, .bk-app .bk-step-title:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
+.bk-times-title { font-size: 1rem; margin: 1.25rem 0 .6rem; }
+.bk-note, .bk-zone, .bk-hint { color: var(--bk-muted); }
+.bk-zone { font-size: .9rem; margin: 1rem 0 0; }
+.bk-hint { font-size: .85rem; margin: 0 0 .3rem; }
+.bk-lead { font-size: 1.05rem; }
+.bk-summary { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: var(--bk-radius-sm); background: var(--bk-soft); font-size: .95rem; }
+
+.bk-live { min-height: 0; margin: 0; font-size: .95rem; }
+.bk-live:not(:empty) { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: var(--bk-radius-sm); background: var(--bk-soft); }
+.bk-live.is-error { color: var(--bk-danger); background: color-mix(in srgb, var(--bk-danger) 10%, transparent); }
+
+/* ---- Buttons ---- */
+
+.bk-app button { font: inherit; }
+.bk-primary, .bk-secondary, .bk-danger {
+    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem;
+    padding: .6rem 1.2rem; border-radius: var(--bk-radius-sm); border: 1px solid transparent; cursor: pointer;
+    font-weight: 600; text-decoration: none !important; transition: all .18s var(--bk-ease); }
+.bk-primary { background: var(--bk-accent); color: var(--bk-accent-ink) !important; }
+.bk-primary:hover { filter: brightness(1.08); }
+.bk-secondary { background: transparent; border-color: var(--bk-line); color: var(--bk-text) !important; }
+.bk-secondary:hover { border-color: var(--bk-accent); color: var(--bk-accent) !important; }
+.bk-danger { background: transparent; border-color: color-mix(in srgb, var(--bk-danger) 55%, transparent); color: var(--bk-danger) !important; }
+.bk-danger:hover { background: color-mix(in srgb, var(--bk-danger) 10%, transparent); }
+.bk-app button:disabled { opacity: .45; cursor: not-allowed; }
+.bk-link, .bk-back { background: none; border: 0; padding: .25rem 0; color: var(--bk-accent); cursor: pointer; text-decoration: underline; }
+.bk-back { display: inline-block; margin: -.4rem 0 .8rem; text-decoration: none; color: var(--bk-muted); font-size: .92rem; }
+.bk-back:hover { color: var(--bk-accent); }
+.bk-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; align-items: center; }
+.bk-app :focus-visible { outline: 3px solid color-mix(in srgb, var(--bk-accent) 55%, transparent); outline-offset: 2px; }
+
+/* ---- Services and who ---- */
+
+.bk-services, .bk-whos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
+.bk-page .bk-services, .bk-app .bk-services, .bk-app .bk-whos { padding-left: 0 !important; margin-left: 0 !important; }
+.bk-services > li, .bk-whos > li { margin: 0; padding: 0; }
+.bk-services > li::marker, .bk-whos > li::marker { content: none; }
+@media (min-width: 640px) { .bk-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.bk-service, .bk-who {
+    display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; height: 100%; text-align: left;
+    padding: 1rem 1.1rem; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); background: var(--bk-bg);
+    color: var(--bk-text) !important; cursor: pointer; text-decoration: none !important; transition: all .18s var(--bk-ease); }
+.bk-service:hover, .bk-who:hover { border-color: var(--bk-accent); box-shadow: 0 0 0 1px var(--bk-accent); }
+.bk-service-name, .bk-who-name { font-weight: 600; font-size: 1.05rem; }
+.bk-service-meta, .bk-who-meta { color: var(--bk-muted); font-size: .9rem; }
+.bk-service-desc { color: var(--bk-muted); font-size: .92rem; margin-top: .2rem; }
+
+/* ---- Week strip and times ---- */
+
+.bk-week { display: flex; align-items: stretch; gap: .35rem; }
+.bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; flex: 1; min-width: 0; }
+.bk-week-move { flex: none; width: 2.25rem; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-bg);
+    color: var(--bk-text); cursor: pointer; font-size: 1.3rem; line-height: 1; }
+.bk-week-move:not(:disabled):hover { border-color: var(--bk-accent); color: var(--bk-accent); }
+.bk-day { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .45rem 0; min-width: 0;
+    border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-bg); color: var(--bk-text); cursor: pointer; }
+.bk-day:not(:disabled):hover { border-color: var(--bk-accent); }
+.bk-day.is-on { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-ink); }
+.bk-app .bk-day:disabled { opacity: .38; }
+.bk-day-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
+.bk-day-num { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
+.bk-day-month { font-size: .7rem; opacity: .75; }
+.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .45rem; }
+.bk-time { min-height: 2.75rem; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-bg);
+    color: var(--bk-text); cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 600; }
+.bk-time:hover { border-color: var(--bk-accent); color: var(--bk-accent); }
+
+/* ---- Details form ---- */
+
+.bk-form { display: grid; gap: 1rem; margin-top: 1rem; }
+.bk-field label { display: block; font-weight: 600; margin-bottom: .3rem; }
+.bk-req { color: var(--bk-danger); }
+.bk-opt { color: var(--bk-muted); font-weight: 400; font-size: .88rem; }
+.bk-app .bk-input { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: .6rem .75rem; font: inherit;
+    border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-bg); color: var(--bk-text); }
+.bk-app .bk-input:focus { border-color: var(--bk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 20%, transparent); outline: none; }
+.bk-field.has-error .bk-input { border-color: var(--bk-danger); }
+.bk-error { color: var(--bk-danger); font-size: .9rem; margin: .3rem 0 0; }
+.bk-terms { font-size: .9rem; color: var(--bk-muted); margin: 0; }
+.bk-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+/* ---- Booking details ---- */
+
+.bk-details { display: grid; gap: .1rem; margin: 0 0 .5rem; padding: .75rem 1rem; border: 1px solid var(--bk-line); border-radius: var(--bk-radius); background: var(--bk-bg); }
+.bk-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; padding: .3rem 0; }
+.bk-details dt { color: var(--bk-muted); margin: 0; }
+.bk-details dd { margin: 0; overflow-wrap: anywhere; }
+.bk-status.is-cancelled { color: var(--bk-danger); font-weight: 600; }
+
+/* The site's own link and form styles reach in here. */
+.bk-app a.bk-secondary, .bk-app a.bk-primary, .bk-service, .bk-crumbs a { text-decoration: none !important; }
+.bk-app .bk-input { min-height: 0; margin: 0; }
+.bk-app textarea.bk-input { resize: vertical; }
+
+@media (max-width: 480px) {
+    .bk-week { gap: .15rem; }
+    .bk-days { gap: .15rem; }
+    .bk-week-move { width: 1.6rem; font-size: 1.1rem; }
+    .bk-day { padding: .4rem 0 .35rem; }
+    .bk-day-name { font-size: .6rem; letter-spacing: 0; }
+    .bk-day-num { font-size: 1rem; }
+    .bk-day-month { display: none; }
+    .bk-actions > * { flex: 1 1 100%; }
+}
+
+/* ---- 1.1: places, full classes, the extra questions ---- */
+
+.bk-time small { display: block; font-size: .72rem; font-weight: 400; color: var(--bk-muted); line-height: 1.2; }
+.bk-times:has(small) { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
+.bk-time.is-full { border-style: dashed; color: var(--bk-muted); background: transparent; }
+.bk-time.is-full small { color: inherit; }
+.bk-time.is-full:hover { border-color: var(--bk-accent); color: var(--bk-accent); }
+.bk-app .bk-questions { border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); padding: .9rem 1rem .2rem; margin: 0 0 1rem; min-width: 0; }
+.bk-app .bk-questions legend { font-weight: 600; padding: 0 .35rem; color: var(--bk-text); }
+.bk-app select.bk-input { appearance: auto; }
+.bk-check-field .bk-check { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; cursor: pointer; }
+.bk-check-field input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: none; accent-color: var(--bk-accent); }