agentgui 1.0.952 → 1.0.954

package/.claude/workflows/gui-audit.js

@@ -1,7 +1,7 @@
 export const meta = {
   name: 'gui-audit',
   description: 'Sweep every agentgui GUI surface for jank, verify findings adversarially, and emit kit-update tasks',
-  whenToUse: 'Run a maximum-effort GUI audit of agentgui: review chat, history, settings, a11y, security, performance, and glyph hygiene across the client (site/app) and the design kit (c:\\dev\\anentrypoint-design). Fans out one reviewer per surface, verifies each finding with an independent skeptic, then synthesizes a prioritized punch-list. GUI fixes land in the design kit.',
+  whenToUse: 'Run a maximum-effort GUI audit of agentgui: review chat, history, settings, a11y, security, performance, glyph hygiene, responsive, consistency, and CSS-override-elimination across the client (site/app) and the design kit (c:\\dev\\anentrypoint-design). Fans out one reviewer per surface, adversarially verifies each finding (with a kept-typography guard so the middot/ellipsis/dash are never wrongly flagged), then synthesizes a prioritized kit-vs-app punch-list. GUI fixes land in the design kit; index.html !important overrides are converted to kit defaults.',
   phases: [
     { title: 'Review', detail: 'one reviewer agent per GUI surface/aspect' },
     { title: 'Verify', detail: 'independent skeptic confirms each finding is real' },
@@ -18,7 +18,8 @@ const SURFACES = [
   { key: 'a11y', prompt: 'Audit agentgui ACCESSIBILITY across site/app and the kit. Check: skip-link target reachability/focus, tab order on each tab, agent/model select labels, EventList row role=button keyboard activation + expand announcement, aria-live over/under-announcing, color contrast on the dark theme (WCAG AA 4.5:1 text / 3:1 UI), focus-visible rings, reduced-motion. Report each issue with file:line.' },
   { key: 'security', prompt: 'Audit agentgui GUI-reachable SECURITY. Read lib/http-handler.js. Check: Access-Control-Allow-Origin:* with Authorization + ?token= cross-origin/leak risk; /api/image arbitrary-file-read (the .. check runs after path.normalize); markdown XSS (kit marked+dompurify) — does DOMPurify actually neutralize script/javascript: URLs in agent output. Report each issue with file:line, severity, and the concrete exploit path.' },
   { key: 'perf', prompt: 'Audit agentgui GUI PERFORMANCE. Check: per-token render+scroll thrash on the chat stream (should be rAF-coalesced via scheduleStreamRender), history EventList rebuild cost on burst SSE loads (last-300 map per rAF), webjsx keying stability, markdown/Prism cache warmup, resize/relTime tick cost. Report each hotspot with file:line and a concrete fix.' },
-  { key: 'glyph', prompt: 'Sweep EVERY GUI source file (site/app/**, c:\\dev\\anentrypoint-design/src/**, *.css) for decorative tell-tale glyphs: arrows, box-drawing, bullets, status dots, checks, emoji, any non-ASCII decorative symbol. KEEP the typographic set (middot, ellipsis, em/en-dash in prose), SVG line-icons via Icon(), CSS-drawn discs, and intentional ascii-art (AICAT_FACE). Report every decorative glyph found with file:line and its ASCII replacement.' },
+  { key: 'glyph', prompt: 'Sweep EVERY GUI source file (site/app/**, c:\\dev\\anentrypoint-design/src/**, *.css) for decorative tell-tale glyphs: arrows, box-drawing, bullets, status dots, checks, emoji, any non-ASCII decorative symbol. CRITICAL KEPT-SET GUARD: the middot separator, the ellipsis, and em/en-dashes in prose are ESTABLISHED PRODUCT DESIGN per AGENTS.md - they are NOT decorative tells and you MUST NOT flag or convert them. Also keep SVG line-icons via Icon(), CSS-drawn discs (.status-dot-disc), and intentional ascii-art (AICAT_FACE). Report ONLY genuine decorative tells (arrows/box-drawing/bullets/checks/status-dot CHARS/emoji) with file:line and the ASCII replacement.' },
+  { key: 'overrides', prompt: 'Audit site/app/index.html\'s inline <style> for CSS rules that exist ONLY to fight a design-kit (anentrypoint-design) default - especially !important rules and fragile [class*=...] substring selectors. Each such override is a symptom: the kit ships a poor default. For each override report the rule, the kit default it fights, and the concrete KIT change (a component prop or a better default) that would let agentgui DROP the override entirely. These are the highest-value kit fixes. Read c:\\dev\\anentrypoint-design/src/components/{shell.js,content.js,chat.js} and app-shell.css to ground the proposed kit change. Report fixLocation=kit for the kit change and note the app override to remove.' },
   { key: 'responsive', prompt: 'Audit agentgui RESPONSIVE behavior from site/app/index.html media queries + the kit AppShell. Check: chat controls cluster wrap at 360/640/900px, cwd path overflow, history sidebar drawer (open/close/scrim/select-closes-it), touch-target sizes, settings two-column collapse. Report each issue with the breakpoint and file:line.' },
   { key: 'consistency', prompt: 'Audit agentgui PREDICTABILITY/CONSISTENCY. Check that the same state reads the same way everywhere: connection/activity status vocabulary across crumb dot, chat status, AgentControls status, settings health, agentsPanel; ellipsis convention (… vs ...); rail tone semantics (green=ok/selected, purple=subagent, flame=error); button labels. Report each divergence with file:line.' },
 ];
@@ -66,7 +67,7 @@ const reviewed = await pipeline(
   (review, surface) =>
     parallel((review.findings || []).map((f) => () =>
       agent(
-        'Adversarially verify this GUI audit finding. Default to isReal=false if you cannot confirm it from the actual source. Finding: "' + f.title + '" at ' + f.where + ' — ' + f.why,
+        'Adversarially verify this GUI audit finding. Default to isReal=false if you cannot confirm it from the actual source. KEPT-SET GUARD: if the finding proposes converting/removing the middot separator, the ellipsis, or an em/en-dash in prose, it is WRONG by policy (these are kept product typography) - return isReal=false with reason "kept typographic set, not a decorative tell". Finding: "' + f.title + '" at ' + f.where + ' — ' + f.why,
         { label: 'verify:' + surface.key, phase: 'Verify', schema: VERDICT_SCHEMA }
       ).then((v) => ({ ...f, surface: surface.key, verdict: v }))
     ))

package/AGENTS.md

@@ -1,5 +1,9 @@
 # AgentGUI — Agent Notes
 
+## GUI-predictability sweep closure (2026-06-05) — third maximum-effort run
+
+Fan-out reviewers (chat/history/settings/shell + perf/security/glyph/override) -> adversarial verify -> 19 PRD rows fixed+pushed: agentgui `fe94ade`, kit `anentrypoint-design` `236d6ef` (publish.yml -> npm/unpkg). The headline theme was **override-elimination**: index.html's `!important` overrides were converted to kit defaults (Topbar active-tab = tinted+underline; `PageHeader` `compact` prop -> `.ds-section-compact` margin-top:0; `Row` `cursor:pointer` for `role=button`/`a.row`; kit `Chat` dropped the decorative head `.dot`). Also: kit `ToolCallNode` `(no output)` placeholder for done+empty tools; kit `safeUrl()` rejects `javascript:`/`data:`/`file:` in `renderInline`/image/link parts (inline renderer bypasses DOMPurify); streaming chat text uses the `.chat-md` container to avoid settle reflow. App reconciliation/state fixes (distinct backend-status keys, per-sid running-dot key, stale-selectedSid clear, per-session live counter, toolLabel scalar fallback, expand/collapse-**shown** relabel, projectFilter cleared on search). `.claude/workflows/gui-audit.js` gained an `overrides` surface + a **KEPT-SET glyph guard** in both the reviewer and the adversarial verifier (the middot/ellipsis/em-dash are kept product typography — never flag them). Detail + the kit dist `git add -f` / rebase-rebuild caveat in rs-learn (recall "agentgui GUI-predictability sweep"). **index.html loads the kit from LOCAL `./vendor/anentrypoint-design/247420.{js,css}`** — the vendored copy IS what ships; update flow is edit kit -> `node scripts/build.mjs` -> copy dist into vendor -> browser-witness -> push kit.
+
 ## GUI-audit closure (2026-06-04 fan-out) — second maximum-effort sweep
 
 `.claude/workflows/gui-audit.js` ran a 64-agent fan-out (9 per-surface reviewers -> adversarial verify -> synthesize) -> 44 confirmed findings (`AUDIT-PUNCHLIST.md`, 38 deduped), all fixed across server/app/kit and pushed (agentgui `eb1eab3`/`951404e`, kit `anentrypoint-design` `bb776aa` -> CI publishes npm/unpkg). Per-finding detail + key learnings (ccsniff SSE `{sid,payload}` unwrap, CSP must allow Google Fonts, DS `Select` promotes `title`->`aria-label`, index.html now loads the kit from local `./vendor/`, kit publish flow) in rs-learn (recall "agentgui GUI-audit closure").
@@ -173,6 +177,6 @@ GUI source keeps typographic product characters — the middot separator `·`, t
 
 **`anentrypoint-design`'s `SearchInput` (internal `De`) sets `aria-label = label || placeholder`; it ignores any `aria-label` prop you pass.** To give the search box a real accessible name, pass `label:` (and a matching `placeholder:` for the visible hint). Passing only `aria-label` leaves AT announcing the placeholder. A post-render `setAttribute` race-loses against the DS re-render, so the prop is the only durable fix.
 
-## DS load moved to unpkg @latest — offline regression, re-vendor follow-up (2026-06-04)
+## DS load = LOCAL vendor (resolved — the earlier unpkg note is stale)
 
-**`index.html` currently loads the DS kit (`247420.css` + `247420.js`) from `https://unpkg.com/anentrypoint-design@latest` at runtime, NOT the local `vendor/` copy.** Commit `947086e` made this deliberate trade ("always-latest" over offline) because the GUI's chat surface now renders via the kit's **load-bearing `AgentChat` component**, which exists in `@latest` (0.0.186) but NOT in the older locally-vendored bundle (`vendor/anentrypoint-design/247420.js`). Consequences: the GUI requires network, the shipped UI shifts when the upstream package publishes, and the local vendoring (gzip-Ha CSS blob, font/CDN-const localization) is bypassed. The separate jsdelivr imports inside the vendored bundle (`si`=marked@15, `ri`=dompurify@3, `_s`=prismjs@1.30.0/components) are therefore moot while on unpkg. **Follow-up to restore offline + predictability:** re-vendor 0.0.186+ locally (it has AgentChat), re-apply the offline localization (recall "DS bundle gzip Ha vendoring") AND rewire its `si`/`ri`/`_s` markdown-stack consts to the local `vendor/cdn/{marked.js,dompurify.js,prismjs/components/}` copies, then point `index.html` back at `./vendor/`. Witnessed live (browser `page.on('request')`): on `@latest` the page fetches `unpkg.com/anentrypoint-design@latest/dist/247420.{css,js}` at load.
+**`index.html` loads the DS kit from the local `./vendor/anentrypoint-design/247420.{js,css}`, NOT unpkg.** The prior "moved to unpkg @latest" note described a transient state that was reverted: the kit was re-vendored (with `AgentChat`) in `eb1eab3` and witnessed loading from `./vendor/` again (2026-06-04 and 2026-06-05 runs). The vendored copy IS the shipped UI — predictable, no upstream-publish drift. Update flow: edit the kit at `c:\dev\anentrypoint-design`, `node scripts/build.mjs`, copy `dist/247420.{js,css}` into `site/app/vendor/anentrypoint-design/`, browser-witness, then push the kit so unpkg stays in sync for other consumers. (The markdown stack marked/dompurify/prismjs still fetches from jsdelivr on first chat render.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.952",
+  "version": "1.0.954",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/site/app/index.html

@@ -175,30 +175,9 @@
       outline: 2px solid var(--accent, var(--agentgui-accent)); outline-offset: 2px;
     }
 
-    /* Topbar nav: the DS renders the active tab as a large filled green pill that
-       sits taller than the inactive text links and reads as misaligned. Make all
-       tabs consistent - equal padding, the active one a subtle tinted underline-pill
-       rather than an oversized oval. */
-    /* Prefix with .ds-247420 (the <html> class) to match the DS selector's
-       specificity; source order then lets these win. */
-    .ds-247420 .app-topbar nav { display: flex; align-items: center; gap: .15em; }
-    .ds-247420 .app-topbar nav a {
-      padding: .35em .75em; border-radius: 8px; line-height: 1.4;
-      color: var(--fg-2, color-mix(in srgb, var(--fg, var(--agentgui-fg)) 75%, transparent));
-      text-decoration: none; background: transparent;
-      transition: background-color .15s ease, color .15s ease;
-    }
-    .ds-247420 .app-topbar nav a:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 8%, transparent); color: var(--fg, var(--agentgui-fg)); }
-    /* installStyles() injects the DS CSS into a runtime <style> appended after
-       this block, so equal-specificity rules lose on source order; !important is
-       the targeted override for the few props we reshape on the active tab. */
-    .ds-247420 .app-topbar nav a.active {
-      background: color-mix(in srgb, var(--accent, var(--agentgui-accent)) 16%, transparent) !important;
-      color: var(--accent, var(--agentgui-accent)) !important;
-      box-shadow: inset 0 -2px 0 0 var(--accent, var(--agentgui-accent)) !important;
-      border-radius: 8px !important;
-      font-weight: 600;
-    }
+    /* (Topbar active-tab styling - the subtle tinted underline-pill instead of an
+       oversized filled oval - now ships as the kit default in app-shell.css, so
+       agentgui no longer overrides it here.) */
 
     /* Compact working-directory bar (replaces the full-width tall banner box). */
     .cwd-bar {
@@ -237,23 +216,19 @@
     @media (min-width: 900px) {
       .settings-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
     }
-    /* The DS PageHeader carries large vertical margins that leave a big empty
-       band above the heading and between the lede and the panels. Neutralize
-       them so settings/history read as normal top-aligned scrolling pages. */
-    .agentgui-main [class*="page-header"],
-    .agentgui-main .ds-page-header { margin-top: 0 !important; margin-bottom: var(--space-4, 16px) !important; }
-    .agentgui-main > :first-child { margin-top: 0 !important; }
+    /* (PageHeader top/bottom margin is now handled by the kit's `compact` prop -
+       agentgui passes compact:true on its leading PageHeaders, so the fragile
+       [class*=page-header] !important overrides are gone.) */
     .agentgui-main-settings .settings-grid { margin-top: 0; }
 
     /* The DS Chat head computes its own zero-padded count ("00 msgs") and ignores
        our sub prop; it reads as a bug. Hide the DS sub - streaming state shows via
-       the title and the busy banner. Also hide the DS's empty decorative head dot. */
+       the title and the busy banner. (The decorative head dot was removed from the
+       kit's Chat component, so it no longer needs hiding here.) */
     .chat-head .sub { display: none; }
-    .chat-head .dot { display: none; }
 
-    /* EventList rows are role=button (click to expand) but the DS doesn't give
-       them a pointer cursor, so the affordance is invisible. */
-    .ds-event-list .row[role="button"] { cursor: pointer; }
+    /* (Row role=button cursor:pointer now ships as a kit default in app-shell.css.)
+       A slightly stronger hover tint for event rows specifically remains local. */
     .ds-event-list .row[role="button"]:hover { background: color-mix(in srgb, var(--fg, var(--agentgui-fg)) 5%, transparent); }
     /* Flash the row a search result landed on, so the match is obvious. */
     .ds-event-list .row.event-flash { animation: agentgui-event-flash 2s ease-out; }

package/site/app/js/app.js

@@ -437,6 +437,13 @@ function toolLabel(inp) {
   if (inp && typeof inp === 'object') {
     const a = inp.command || inp.file_path || inp.path || inp.pattern || inp.query || inp.url || '';
     if (a) return String(a).slice(0, 160);
+    // No salient arg: surface the first scalar property so the card still carries
+    // a hint of what it does, rather than an empty, affordance-less label.
+    for (const [k, v] of Object.entries(inp)) {
+      if (v != null && (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean')) {
+        return (k + ': ' + String(v)).slice(0, 160);
+      }
+    }
   }
   return '';
 }
@@ -748,6 +755,7 @@ function historyMain() {
     return [
       reconnectAlert(),
       PageHeader({
+        compact: true,
         title: 'history',
         lede: 'pick a session from the sidebar - events stream live from ccsniff /v1/history.',
       }),
@@ -767,6 +775,7 @@ function historyMain() {
     : state.selectedSid;
 
   const head = PageHeader({
+    compact: true,
     title: truncate(projectLabel(sess?.title) || projectLabel(sess?.project) || state.selectedSid, 40, 80),
     lede,
   });
@@ -803,7 +812,7 @@ function historyMain() {
         if (allExpanded) { shownKeys.forEach(k => state.expandedEvents.delete(k)); }
         else { shownKeys.forEach(k => state.expandedEvents.add(k)); }
         render();
-      }, children: allExpanded ? 'collapse all' : 'expand all' }),
+      }, children: allExpanded ? 'collapse shown' : 'expand shown' }),
     hiddenCount > 0
       ? Btn({ key: 'older', onClick: () => { state.eventsLimit += 300; render(); }, children: 'load ' + Math.min(300, hiddenCount) + ' older (' + hiddenCount + ' hidden)' })
       : null,
@@ -936,7 +945,7 @@ function runningPanel() {
       const agentName = agentById(r.agentId)?.name || r.agentId || 'agent';
       const elapsed = r.startedAt ? Math.round((Date.now() - r.startedAt) / 1000) : 0;
       return h('div', { key: 'run' + r.sessionId, class: 'resume-banner', role: 'group' },
-        h('span', { key: 'rd', class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
+        h('span', { key: 'rd-' + r.sessionId, class: 'status-dot-disc status-dot-live', 'aria-hidden': 'true' }),
         h('span', { class: 'lede' }, agentName + (r.model ? ' · ' + r.model : '') + ' · ' + elapsed + 's' + (r.cwd ? ' · ' + r.cwd.split(/[/\\]/).filter(Boolean).slice(-1)[0] : '')),
         Btn({ key: 'stop' + r.sessionId, onClick: () => stopActiveChat(r.sessionId), children: 'stop' }));
     }),
@@ -1107,6 +1116,7 @@ function settingsMain() {
   const isValid = isValidUrl(state.backendDraft);
   return [
     PageHeader({
+      compact: true,
       title: 'settings',
       lede: 'point agentgui at any backend. blank = same-origin (ccsniff in-process). ?backend=... or the field below persists via localStorage.',
     }),
@@ -1128,9 +1138,9 @@ function settingsMain() {
           onInput: (v) => { state.backendDraft = v; render(); },
         }),
         !isValid ? h('p', { key: 'err', id: 'backend-url-error', class: 'lede field-error', role: 'alert' }, 'Invalid URL format') : null,
-        state.backendStatus === 'connecting' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connecting…') : null,
-        state.backendStatus === 'ok' ? h('p', { key: 'bst', class: 'lede', role: 'status' }, 'connected') : null,
-        state.backendStatus === 'failed' ? h('p', { key: 'bst', class: 'lede field-error', role: 'alert' }, 'connection failed - check the URL') : null,
+        state.backendStatus === 'connecting' ? h('p', { key: 'bst-connecting', class: 'lede', role: 'status' }, 'connecting…') : null,
+        state.backendStatus === 'ok' ? h('p', { key: 'bst-ok', class: 'lede', role: 'status' }, 'connected') : null,
+        state.backendStatus === 'failed' ? h('p', { key: 'bst-failed', class: 'lede field-error', role: 'alert' }, 'connection failed - check the URL') : null,
         state.confirmingBackend ? h('p', { key: 'bcw', class: 'lede field-error', role: 'alert' }, 'changing backend discards this browser\'s chat transcript - press save again to confirm') : null,
         healthSummary(),
         Btn({
@@ -1239,6 +1249,15 @@ async function refreshHistory() {
     // Index by sid so each live SSE event is an O(1) lookup, not an O(sessions)
     // linear scan per event during a burst load.
     state.sessionsBySid = new Map((state.sessions || []).map(s => [s.sid, s]));
+    // If the selected session vanished from the list (deleted/aged out server-side),
+    // drop the selection so the main pane doesn't sit on stale events that can no
+    // longer be reloaded; fall back to the no-selection empty state.
+    if (state.selectedSid && !state.sessionsBySid.has(state.selectedSid)) {
+      state.selectedSid = null;
+      state.events = [];
+      state.eventsLoaded = false;
+      writeHash(null);
+    }
     state.historyError = null;
     render();
   } catch (e) {
@@ -1253,6 +1272,10 @@ async function runSearch() {
   const q = state.searchQ.trim();
   if (!q) { state.searchHits = null; state.searchBusy = false; render(); return; }
   if (q.length < 2) { state.searchHits = null; state.searchBusy = false; render(); return; }
+  // The project-filter pills are hidden while searching; clear the filter so it
+  // doesn't silently re-apply (and surprise the user) when they later clear the
+  // search and the now-visible session list is unexpectedly narrowed.
+  state.projectFilter = '';
   state.searchBusy = true;
   render();
   try {
@@ -1274,6 +1297,9 @@ async function loadSession(sid, { focusEventI = null, focusEventTs = null } = {}
   state.eventsLoaded = false;
   state.eventsLimit = 300;            // reset the render window per session
   state.expandedEvents = new Set();   // don't carry expansion to the new session
+  // The live "live · N" crumb counter reads as the selected session's activity,
+  // so reset it per selection rather than letting it accrue across all sessions.
+  state.live.eventCount = 0;
   writeHash(sid, { push: true });
   // Close the mobile sidebar drawer on selection. The DS only auto-closes when
   // the clicked element is an <a>; agentgui's session rows are onClick divs, so

package/site/app/vendor/anentrypoint-design/247420.css

@@ -579,6 +579,14 @@
 .ds-247420 .fd-root .app { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; }
 .ds-247420 .fd-root .app-body { min-width: 0; }
 
+/* Full-bleed canvas host (e.g. a game/3D viewport that fills the page behind the
+   shell): the shell's opaque var(--bg) would paint OVER the canvas and hide it.
+   Mark the host with `canvas-host` to make the shell surfaces transparent so the
+   live canvas shows through. The canvas itself is the backdrop. */
+.ds-247420 .canvas-host,
+.ds-247420 .canvas-host .app,
+.ds-247420 body.canvas-host { background: transparent !important; }
+
 .ds-247420 {
   --app-status-h: var(--size-base);
   --app-topbar-h: var(--size-lg);
@@ -638,9 +646,14 @@
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+/* Active tab reads as a subtle tinted pill with an accent underline rather than
+   an oversized filled oval that sits taller than its inactive siblings and reads
+   as misaligned. Same height as the inactive links — only the tint + underline
+   change. */
 .ds-247420 .app-topbar nav a.active {
-  color: var(--accent-fg);
-  background: var(--accent);
+  color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 16%, transparent);
+  box-shadow: inset 0 -2px 0 0 var(--accent);
   font-weight: 600;
 }
 
@@ -933,6 +946,9 @@
   background: transparent; border-radius: 3px;
   transition: background var(--dur-snap) var(--ease);
 }
+/* A clickable row (onClick -> role=button, or a link row) is interactive, so it
+   carries a pointer cursor; without this the click affordance is invisible. */
+.ds-247420 .row[role="button"], .ds-247420 a.row { cursor: pointer; }
 .ds-247420 .row:hover { background: var(--bg-2); }
 .ds-247420 .row:hover::before { background: var(--rule-strong); }
 .ds-247420 .row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
@@ -981,6 +997,9 @@
    Section grouping
    ============================================================ */
 .ds-247420 .ds-section { margin: var(--space-8) 0; }
+/* Compact section (e.g. a PageHeader used as a page's first element): no large
+   leading margin, modest trailing margin — top-aligns without consumer overrides. */
+.ds-247420 .ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); }
 .ds-247420 .ds-section > h3 {
   font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3);
   margin: 0 0 var(--space-5);