@passioncode-ai/fabric-agent-adapter 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## 0.9.0 - 2026-10-11
+
+The dashboard kit (`fabric-dashboard/0.1`, contract DEC-0036): a Fabric service's dashboard holds inside a
+host pane beside the agent console from 360 CSS px up, follows the host's colour scheme and theme, and says
+so in its well-known document. The contract pin moves to Fabric Agent Contract `main` `a83bec6` (the
+DEC-0036 merge, contract PR #27). Bundles issued under the DEC-0035, DEC-0033, DEC-0031, DEC-0024, DEC-0021,
+DEC-0020 and DEC-0019 revisions stay valid.
+
+### Added
+
+- **`building-fabric-services/assets/dashboard-kit/`** (FAA-17): `fabric-dashboard.css` (the workbench token
+  layer plus `--edge`; root `min-width: 360px`; fluid grids; navigation that wraps, or folds into a More menu
+  with the script; `.fd-scroll` boxes with edge shades, a visible scrollbar and keyboard focus; sticky chrome
+  kept within min(120 px, a quarter of the height) by letting the header scroll away), `fabric-dashboard.js`
+  (applies the `fabric_appearance` cookie, hides the page's own appearance controls while the host owns
+  them, re-applies on cookie change and visibility, folds navigation, names scroll boxes, measures the chrome
+  for anchors; CSP-clean), seven reference themes in `themes.json` (graphite, fabric, paper, forest, ocean,
+  ember, contrast; light and dark; every pair WCAG 2.2 AA, measured by `test/test_dashboard_kit.py`),
+  `kit.json` (version, theme ids, file digests and per-version history) and `demo.html`.
+- **`scripts/dashboard_kit.py`** `status | install | build | notice`: `install` never overwrites a copy the
+  service changed without `--force`; `build` regenerates the themes from `themes.json`.
+- **`scripts/check_dashboard_layout.mjs`**: renders a page in WebKit (or `--browser chromium|firefox`) at the
+  floor minus 40 and 360, 480, 768, 1280 px and reports ED-1…ED-5; `--service <id>` signs in with a login
+  code and reads the declared `minWidth`. Without Playwright every rule is `NOT_RUN`. It measures a settled
+  page: after the load it waits for the page's own requests to finish, and at each width for two frames,
+  250 ms and two more frames, so a header that grows when its data arrives is not measured between its new
+  size and the kit's reaction to it (seen once on the brand board at 360 px: a false ED-5).
+- **`check_service.py` rule `dashboard.declared`** (ED-9): PASS for a valid declaration (and names a newer
+  kit), FAIL for an invalid one, NOT_RUN for no dashboard or a legacy one.
+- **`dashboard_extension()` / `dashboardExtension()`** in both kits, and `extensions` in `build_well_known` /
+  `buildWellKnown` (a dashboard declaration in it is validated). The sample service's dashboard is built on
+  the kit and declares it.
+- **The plugin's first hook**: `SessionStart` runs `dashboard_kit.py notice`, which prints one line in a
+  repository whose dashboard has no kit or an older one and nothing elsewhere; it writes nothing and always
+  exits 0. `AGENTS.md` Lifecycle (LC-09) declares it.
+- **`references/dashboard-kit.md`**: the rules, the markup, the themes, the declaration, the probes and
+  "Upgrading an existing dashboard" (only with the operator's go-ahead). Scenario evals
+  `dashboard-in-a-narrow-host-pane`, `dashboard-kit-upgrade-notice`, `dashboard-follows-host-appearance`
+  and two trigger queries came first.
+
+### Changed
+
+- **Default contract pin `52da526` → `a83bec6b47776af688402c18efec507143061f68`.** `52da526` (DEC-0035) joins
+  `SUPPORTED_CONTRACT_COMMITS`. The revisions between add only the `fabric-dashboard/0.1` profile and
+  `service-dashboard-extension.schema.json`; the provider manifest and the MCP, A2A and local-runner
+  profiles do not change, and every descriptor and well-known document the kits wrote before stays valid.
+- `references/dashboard.md` point 8 sends the page to the kit; `references/protocol.md` names the
+  `extensions` dashboard declaration.
+
 ## 0.8.3 - 2026-10-10
 
 The contract pin moves to Fabric Agent Contract `main` `52da526` (DEC-0034 and DEC-0035, the operator

package/README.md

@@ -33,6 +33,17 @@ complete `scripts/sample_service.py`, and `scripts/check_service.py`, a live pro
 python3 plugins/fabric-agent-adapter/skills/building-fabric-services/scripts/check_service.py example-agent
 ```
 
+The dashboard itself is built from the **dashboard kit** (`assets/dashboard-kit/`, `fabric-dashboard/0.1`,
+contract DEC-0036): one stylesheet and one script that keep the page usable from 360 CSS px inside a host
+pane beside the agent console — navigation that folds into a More menu, wide tables in their own scroll
+box, sticky chrome at most 120 px — with seven WCAG AA themes (light and dark) that follow the host's
+`fabric_appearance` cookie. `scripts/dashboard_kit.py install|status` copies and checks it,
+`scripts/check_dashboard_layout.mjs` measures a rendered page in WebKit at 360, 480, 768 and 1280 px
+(Playwright; `NOT_RUN` without it), and the probe's `dashboard.declared` checks the declaration. The
+plugin's one hook (SessionStart) prints a single line in a repository whose dashboard has no kit or an
+older one, and nothing anywhere else; the [kit reference](plugins/fabric-agent-adapter/skills/building-fabric-services/references/dashboard-kit.md)
+has the upgrade steps, taken only with the operator's go-ahead.
+
 Dashboard handoffs use the host-generated `open_link` as the primary action. The
 three skills carry the same [consumer procedure](plugins/fabric-agent-adapter/skills/building-fabric-services/references/dashboard-links.md)
 and a portable `scripts/check_dashboard_link.py` gate for generated renderers.
@@ -191,7 +202,7 @@ Scaffolding is non-destructive by default. It writes only the paths declared in
 The default pin for new bundles is [`fabric-contract.lock.json`](fabric-contract.lock.json):
 
 - version: `0.1.0`
-- commit: `52da526d7cc1e063d74c5b520dbc03d0ace15246`
+- commit: `a83bec6b47776af688402c18efec507143061f68`
 
 Every other mention of the default contract revision — this section, the skills' metadata, the
 skill card, `adapt_project.py` — must equal it; `python3 test/validate.py` fails a tree
@@ -218,8 +229,8 @@ FABRIC_CONTRACT_OLD=/path/to/legacy-contract FABRIC_CONTRACT_NEW=/path/to/curren
 ```
 
 Without both environment variables, those tests explicitly skip as `NOT_RUN`.
-This source checkout is 0.8.3. 0.8.2 is the latest published GitHub/npm release (2026-10-10; 0.7.0 was never
-released); 0.8.3 is published by its `v0.8.3` tag. Source delivery does not update installed skills or live sessions.
+This source checkout is 0.9.0. 0.8.3 is the latest published GitHub/npm release (2026-10-10; 0.7.0 was never
+released); 0.9.0 is published by its `v0.9.0` tag. Source delivery does not update installed skills or live sessions.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@passioncode-ai/fabric-agent-adapter",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "Create Fabric-compatible agents, run them as always-alive local services with dashboards (fabric-service/0.1), and adapt existing projects to the Fabric Agent Contract. This package is the installer CLI.",
   "scripts": {
     "test": "python3 test/validate.py && python3 -m unittest discover -s test -q && node --test 'test/*.test.mjs'"

package/plugins/fabric-agent-adapter/.claude-plugin/plugin.json

@@ -3,7 +3,7 @@
   "name": "fabric-agent-adapter",
   "displayName": "Fabric Agent Adapter",
   "description": "Create new Fabric-compatible agents, build them as always-alive local services with dashboards (fabric-service/0.1), and adapt existing projects to the Fabric Agent Contract through evidence-backed MCP, A2A, or local-runner provider bundles.",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "author": {
     "name": "PassionCode.ai",
     "url": "https://passioncode.ai/"

package/plugins/fabric-agent-adapter/hooks/hooks.json

@@ -0,0 +1,17 @@
+{
+  "description": "One line at session start in a repository whose Fabric dashboard has no dashboard kit or an older one (fabric-dashboard/0.1, DEC-0036). Silent everywhere else; reads only, never writes, always exits 0.",
+  "hooks": {
+    "SessionStart": [
+      {
+        "matcher": "startup|resume",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "python3 -S \"${CLAUDE_PLUGIN_ROOT}/skills/building-fabric-services/scripts/dashboard_kit.py\" notice",
+            "timeout": 5
+          }
+        ]
+      }
+    ]
+  }
+}

package/plugins/fabric-agent-adapter/skills/adapting-projects-to-fabric/SKILL.md

@@ -5,9 +5,9 @@ license: AGPL-3.0-only OR LicenseRef-PassionCode-Commercial
 compatibility: Requires filesystem access and Python 3.9+. Exact schema checks additionally need git, Node.js, pnpm, and the pinned fabric-agent-contract checkout (a public repository). Works without those tools in an explicitly degraded structural-check mode.
 metadata:
   author: PassionCode.ai
-  version: "0.8.3"
+  version: "0.9.0"
   contract-version: "0.1.0"
-  contract-commit: "52da526d7cc1e063d74c5b520dbc03d0ace15246"
+  contract-commit: "a83bec6b47776af688402c18efec507143061f68"
 ---
 
 # Adapting projects to Fabric
@@ -70,7 +70,7 @@ Use exactly:
 
 - contract version `0.1.0`;
 - repository `https://github.com/passioncode-ai/fabric-agent-contract`;
-- commit `52da526d7cc1e063d74c5b520dbc03d0ace15246`.
+- commit `a83bec6b47776af688402c18efec507143061f68`.
 
 This is the default for new bundles. When checking an issued legacy bundle, preserve its
 explicit supported lock and use that exact clean checkout. Never silently upgrade or

package/plugins/fabric-agent-adapter/skills/adapting-projects-to-fabric/scripts/adapt_project.py

@@ -16,10 +16,10 @@ from urllib.parse import urlparse
 
 CONTRACT_VERSION = "0.1.0"
 CONTRACT_REPOSITORY = "https://github.com/passioncode-ai/fabric-agent-contract"
-CONTRACT_COMMIT = "52da526d7cc1e063d74c5b520dbc03d0ace15246"
+CONTRACT_COMMIT = "a83bec6b47776af688402c18efec507143061f68"
 # #region supported-contract-revisions — docs: README.md#contract-pin
 # Only this declaration may name a legacy revision in live files.
-SUPPORTED_CONTRACT_COMMITS = (CONTRACT_COMMIT, "78b2da018d2c4bd9ac1bde1dc3b7f1a110a175f5", "623bf61358c339cb10297807b3f024b5d9f1f327", "23f9fda4c05f8a3852246ee98d4f2adf74ed0875", "9091d3d6606b0c4b5591a38c3674356a01fd7f55", "df55c8c54a23251342a7ee57ba95642b7eb39e61", "2ce392291c6668598d12cd38327e24696b5ca15c")
+SUPPORTED_CONTRACT_COMMITS = (CONTRACT_COMMIT, "52da526d7cc1e063d74c5b520dbc03d0ace15246", "78b2da018d2c4bd9ac1bde1dc3b7f1a110a175f5", "623bf61358c339cb10297807b3f024b5d9f1f327", "23f9fda4c05f8a3852246ee98d4f2adf74ed0875", "9091d3d6606b0c4b5591a38c3674356a01fd7f55", "df55c8c54a23251342a7ee57ba95642b7eb39e61", "2ce392291c6668598d12cd38327e24696b5ca15c")
 # #endregion supported-contract-revisions
 INTEROP_KEY = "https://fabric.passioncode.ai/agent-contract/extensions/interop/0.1"
 MCP_REVISION = "2026-07-28"

package/plugins/fabric-agent-adapter/skills/building-fabric-services/SKILL.md

@@ -9,17 +9,17 @@ description: >-
   на модели». Covers
   fabric-service/0.1: surfaces, token and one-time login, state, one copy, launchd, descriptor,
   well-known document, events, the usage report (spend per model); online: the https guard, the token-gated well-known document, the
-  __Host- cookie, registering it on the operator's computer; ships Python and Node kits, a TLS
-  sample and a live probe. NOT for a one-off script or cron job, a hosted product with no agent
+  __Host- cookie, registering it on the operator's computer; Python, Node and dashboard
+  kits, a TLS sample, live and layout probes. NOT for a one-off script or cron job, a hosted product with no agent
   behind it, the provider manifest (adapting-projects-to-fabric), or building Fabric Dashboards.
 license: AGPL-3.0-only OR LicenseRef-PassionCode-Commercial
 compatibility: Python 3.9+ or Node.js 20+ for the kits; the probe needs Python 3.9+. launchd steps are macOS-only (Linux services use lifecycle manager none until a systemd adapter exists). Dashboard handoff optionally uses Fabric Dashboards MCP link/host_status/open; without it, report unresolved host capability. The contract checkout is optional.
 metadata:
   author: PassionCode.ai
-  version: "0.8.3"
+  version: "0.9.0"
   contract-version: "0.1.0"
   extension: "fabric-service/0.1"
-  extension-commit: "52da526d7cc1e063d74c5b520dbc03d0ace15246"
+  extension-commit: "a83bec6b47776af688402c18efec507143061f68"
 ---
 
 # Building Fabric services
@@ -198,6 +198,17 @@ while the operator types or a dialog is open, one panel's failure never blanks t
 others, and every error is a sentence with the next action. Read
 [the dashboard reference](references/dashboard.md) before building the page.
 
+The host shows the page in a pane beside the agent console that the operator can drag wide, so
+the page must hold from **360 CSS px** up: no sideways document scroll, navigation that wraps or
+folds into a More menu (never a tab strip that only scrolls sideways), wide tables and logs in
+their own focusable scroll box, sticky chrome at most 120 px, and the host's colour scheme and
+theme followed (`fabric-dashboard/0.1`, contract DEC-0036). **Build it from the dashboard kit**
+(`assets/dashboard-kit/`: `dashboard_kit.py install <static dir>`, seven AA themes, light and dark)
+and declare it with `extensions=fs.dashboard_extension()`. Read
+[the dashboard kit reference](references/dashboard-kit.md) for the markup, the themes, the
+declaration and how to upgrade a dashboard built before the kit — only with the operator's
+go-ahead, which the plugin's session-start notice reminds you of.
+
 The events feed is a **view over the log you already keep** — a jobs table, a JSONL
 journal — not a second store. Each event is one sentence a person reads; set
 `notify: true` only when the operator must decide, or something failed or degrades their
@@ -224,10 +235,12 @@ python3 <skill-dir>/scripts/check_service.py <id>[.<instance>]
 It reports `PASS`, `FAIL` or `NOT_RUN` per rule (descriptor, port claim, well-known
 shape, identity, latency, Host/Origin/cross-site guards, loopback bind, token file,
 events auth and shape, single-use login, state outside code, instance lock, plist,
-launchd pid equals answering pid, and the `interop.*` rules: manifest link, capability
-list, tools equal to the manifest, job tools, unknown job, trace propagation, event
-trace pairs) and exits 1 on any `FAIL`. A `NOT_RUN` is not a pass —
-name it in the report.
+launchd pid equals answering pid, `dashboard.declared` (ED-9), and the `interop.*` rules:
+manifest link, capability list, tools equal to the manifest, job tools, unknown job, trace
+propagation, event trace pairs) and exits 1 on any `FAIL`. A `NOT_RUN` is not a pass —
+name it in the report. A service with a dashboard also runs the layout probe,
+`node <skill-dir>/scripts/check_dashboard_layout.mjs --service <id>` (WebKit at 360, 480, 768
+and 1280 px; needs Playwright, else `NOT_RUN`).
 
 Then prove the lock: start a second copy by hand against the same data directory; it
 must exit 75 while the first keeps serving. Prove recovery: `kill -9` the launchd pid;

package/plugins/fabric-agent-adapter/skills/building-fabric-services/assets/dashboard-kit/demo.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en" data-fd-appearance="scheme theme">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self' data:">
+  <title>Example agent · dashboard kit demo</title>
+  <link rel="stylesheet" href="fabric-dashboard.css">
+  <script src="fabric-dashboard.js" defer></script>
+</head>
+<body>
+  <a class="fd-skip" href="#overview">Skip to content</a>
+  <div class="fd-chrome">
+    <header class="fd-header">
+      <div>
+        <p class="fd-title">Example agent</p>
+        <span class="fd-chip fd-s-ok"><span class="fd-dot"></span>Ready</span>
+      </div>
+      <div class="fd-actions">
+        <label class="fd-sr-only" for="theme">Theme</label>
+        <select id="theme" class="fd-select" data-fd-theme-picker></select>
+        <label class="fd-sr-only" for="scheme">Colour scheme</label>
+        <select id="scheme" class="fd-select" data-fd-scheme-picker></select>
+        <button class="fd-btn fd-btn--primary" type="button">Run now</button>
+      </div>
+    </header>
+    <nav class="fd-nav" aria-label="Sections">
+      <ul class="fd-nav-list">
+        <li><a href="#overview" aria-current="page">Overview</a></li>
+        <li><a href="#jobs">Jobs</a></li>
+        <li><a href="#approvals">Approvals</a></li>
+        <li><a href="#calendar">Calendar</a></li>
+        <li><a href="#channels">Channels</a></li>
+        <li><a href="#budget">Budget</a></li>
+        <li><a href="#journal">Journal</a></li>
+        <li><a href="#inbox">Inbox</a></li>
+        <li><a href="#cases">Cases</a></li>
+        <li><a href="#playbooks">Playbooks</a></li>
+        <li><a href="#reports">Reports</a></li>
+        <li><a href="#log">Log</a></li>
+        <li><a href="#settings">Settings</a></li>
+        <li><a href="#help">Help</a></li>
+      </ul>
+    </nav>
+  </div>
+
+  <main class="fd-page">
+    <section id="overview">
+      <h2>Overview</h2>
+      <div class="fd-grid fd-grid--tiles">
+        <div class="fd-tile"><div class="fd-label">Jobs today</div><div class="fd-value">128</div></div>
+        <div class="fd-tile"><div class="fd-label">Waiting for you</div><div class="fd-value">3</div></div>
+        <div class="fd-tile"><div class="fd-label">Spend, 7 days</div><div class="fd-value">$4.21</div></div>
+        <div class="fd-tile"><div class="fd-label">Last run</div><div class="fd-value"><time>17:02</time></div></div>
+      </div>
+    </section>
+
+    <section id="jobs">
+      <h2>Jobs</h2>
+      <div class="fd-scroll" data-fd-label="Jobs table">
+        <table class="fd-table">
+          <caption class="fd-sr-only">Recent jobs</caption>
+          <thead><tr><th>Job</th><th>Capability</th><th>State</th><th>Started</th><th class="fd-num">Tokens</th><th class="fd-num">Cost</th><th>Trace</th></tr></thead>
+          <tbody>
+            <tr><td class="fd-mono">job-7f3a91</td><td>example.summarize</td><td><span class="fd-chip fd-s-info"><span class="fd-dot"></span>Running</span></td><td><time>2026-10-11 17:02</time></td><td class="fd-num">12 480</td><td class="fd-num">$0.031</td><td class="fd-mono">4bf92f3577b34da6a3ce929d0e0e4736</td></tr>
+            <tr><td class="fd-mono">job-7f3a90</td><td>example.translate</td><td><span class="fd-chip fd-s-ok"><span class="fd-dot"></span>Done</span></td><td><time>2026-10-11 16:40</time></td><td class="fd-num">8 002</td><td class="fd-num">$0.019</td><td class="fd-mono">00f067aa0ba902b74bf92f3577b34da6</td></tr>
+            <tr><td class="fd-mono">job-7f3a8f</td><td>example.review</td><td><span class="fd-chip fd-s-warn"><span class="fd-dot"></span>Needs you</span></td><td><time>2026-10-11 15:12</time></td><td class="fd-num">2 210</td><td class="fd-num">—</td><td class="fd-mono">a3ce929d0e0e47364bf92f3577b34da6</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section id="approvals">
+      <h2>Approvals</h2>
+      <div class="fd-grid">
+        <article class="fd-card fd-stack">
+          <h3>Publish the weekly report <span class="fd-chip fd-s-warn"><span class="fd-dot"></span>Waiting</span></h3>
+          <p class="fd-hint">Before → after and the hash the service checks when it applies the change.</p>
+          <pre class="fd-scroll" data-fd-label="Change preview">- status: draft
++ status: published   sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</pre>
+          <div class="fd-row"><button class="fd-btn fd-btn--primary" type="button">Approve</button><button class="fd-btn" type="button">Reject</button></div>
+        </article>
+        <article class="fd-card">
+          <h3>Service</h3>
+          <dl class="fd-pairs">
+            <div><dt>Build</dt><dd class="fd-mono">3537587</dd></div>
+            <div><dt>Started</dt><dd><time>2026-10-11 09:00</time></dd></div>
+            <div><dt>Port</dt><dd class="fd-mono">8710</dd></div>
+            <div><dt>Instance</dt><dd class="fd-mono">default</dd></div>
+          </dl>
+        </article>
+      </div>
+    </section>
+
+    <section id="calendar"><h2>Calendar</h2><p class="fd-empty">Nothing is scheduled this week. <a href="#jobs">See the jobs</a></p></section>
+    <section id="channels"><h2>Channels</h2><div class="fd-banner fd-s-danger"><span class="fd-dot fd-s-danger"></span><span>Channel push failed: the provider rejected the key. Settings → Keys</span></div></section>
+    <section id="budget"><h2>Budget</h2><p>$4.21 of $100 this month.</p></section>
+    <section id="journal"><h2>Journal</h2><p>No decisions recorded today.</p></section>
+    <section id="inbox"><h2>Inbox</h2><p class="fd-empty">No comments waiting.</p></section>
+    <section id="cases"><h2>Cases</h2><p>Two candidates from yesterday's work log.</p></section>
+    <section id="playbooks"><h2>Playbooks</h2><p>All playbooks reviewed this month.</p></section>
+    <section id="reports"><h2>Reports</h2><p>The weekly report is due Monday.</p></section>
+    <section id="log"><h2>Log</h2><pre class="fd-scroll" data-fd-label="Service log">2026-10-11T17:02:11Z info  job.started   job-7f3a91 example.summarize trace=4bf92f3577b34da6a3ce929d0e0e4736 span=00f067aa0ba902b7
+2026-10-11T16:40:57Z info  job.finished  job-7f3a90 example.translate tokens=8002 cost=0.019</pre></section>
+    <section id="settings"><h2>Settings</h2><label for="name">Display name</label> <input id="name" class="fd-input" value="Example agent"></section>
+    <section id="help"><h2>Help</h2><p>Every error is a sentence and the next action.</p></section>
+  </main>
+  <footer class="fd-foot">fabric-dashboard-kit demo · fabric-dashboard/0.1</footer>
+</body>
+</html>

package/plugins/fabric-agent-adapter/skills/building-fabric-services/assets/dashboard-kit/fabric-dashboard.css

@@ -0,0 +1,198 @@
+/* fabric-dashboard-kit@1.0.0 · fabric-dashboard/0.1 (Fabric Agent Contract DEC-0036)
+   A Fabric service dashboard shown inside a host pane: usable from 360 CSS px up, navigation always
+   reachable, wide content in its own scroll box, one vertical scroller, appearance from the host.
+   Copy this file next to fabric-dashboard.js; do not edit it in place. Put the page's own rules in
+   its own stylesheet, consuming var(--…) only. Themes are generated from themes.json by
+   `dashboard_kit.py build`; the block between the markers is overwritten. */
+
+:root {
+  /* The floor (ED-1, ED-2) and the sticky chrome budget (ED-5). */
+  --fd-floor: 360px;
+  --fd-chrome-max: 120px;
+  --fd-chrome-h: 0px;
+  --fd-col: 320px;
+  --fd-page-max: 1440px;
+  --fd-gutter: clamp(12px, 3vw, 24px);
+
+  --r-control: 6px;
+  --r-card: 10px;
+  --r-pill: 999px;
+  --shadow-1: 0 4px 16px -8px rgba(26, 31, 43, 0.18);
+  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
+  --dur-state: 0.18s;
+  --dur-hover: 0.12s;
+  --font-ui: -apple-system, "SF Pro", "Segoe UI", system-ui, sans-serif;
+  --font-data: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --t-chip: 11px;
+  --t-label: 12px;
+  --t-body: 13px;
+  --t-card: 15px;
+  --t-section: 20px;
+  --t-page: 28px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+}
+
+/* fabric-dashboard-kit:themes:begin */
+:root, :root[data-theme="graphite"] { color-scheme: light; --bg: #f7f8fa; --panel: #ffffff; --panel-2: #f7f8fa; --ink: #1a1f2b; --muted: #5b6472; --border: #e6e9ef; --border-strong: #d7dce4; --edge: #828b98; --accent: #2f6feb; --accent-weak: #eaf0fe; --accent-ink: #ffffff; --ok: #1a7f37; --ok-weak: #e6f4ea; --warn: #9a6700; --warn-weak: #fff3d6; --danger: #d1242f; --danger-weak: #fde8e9; --info: #2f6feb; --info-weak: #eaf0fe; }
+:root[data-scheme="dark"], :root[data-theme="graphite"][data-scheme="dark"] { color-scheme: dark; --bg: #0f1218; --panel: #161b24; --panel-2: #1b212c; --ink: #e8ecf3; --muted: #8a93a6; --border: #232a36; --border-strong: #2c3441; --edge: #697383; --accent: #4b8bff; --accent-weak: #1b2740; --accent-ink: #0f1218; --ok: #3fb960; --ok-weak: #12281a; --warn: #d9a93f; --warn-weak: #2b2210; --danger: #e5534b; --danger-weak: #2d1517; --info: #4b8bff; --info-weak: #1b2740; }
+:root[data-theme="fabric"] { color-scheme: light; --bg: #f7f5f8; --panel: #ffffff; --panel-2: #f2eef4; --ink: #211725; --muted: #655769; --border: #e9e3ec; --border-strong: #d9d0de; --edge: #8f8296; --accent: #6b2185; --accent-weak: #f4e9f7; --accent-ink: #ffffff; --ok: #246b3b; --ok-weak: #e4f3e8; --warn: #8a4b0b; --warn-weak: #fff0dc; --danger: #a82f44; --danger-weak: #fde8ec; --info: #345da7; --info-weak: #e8efff; }
+:root[data-theme="fabric"][data-scheme="dark"] { color-scheme: dark; --bg: #110c15; --panel: #1b1420; --panel-2: #231a29; --ink: #fff9f0; --muted: #b6aabc; --border: #2e2334; --border-strong: #3a2e41; --edge: #7a6a80; --accent: #d4a3ea; --accent-weak: #2f1d38; --accent-ink: #110c15; --ok: #79d49a; --ok-weak: #12291c; --warn: #f6ba75; --warn-weak: #332314; --danger: #ff969f; --danger-weak: #35191f; --info: #a6bfff; --info-weak: #18243d; }
+:root[data-theme="paper"] { color-scheme: light; --bg: #faf6ee; --panel: #fffdf8; --panel-2: #f3ede1; --ink: #2b241a; --muted: #6b5f4d; --border: #ebe3d4; --border-strong: #ddd2bf; --edge: #8d806d; --accent: #8a4a12; --accent-weak: #f6eadb; --accent-ink: #ffffff; --ok: #2f6b2f; --ok-weak: #e7f1e2; --warn: #8a5a00; --warn-weak: #fbefd2; --danger: #b02a20; --danger-weak: #fbe5e1; --info: #2c5d8a; --info-weak: #e5eef6; }
+:root[data-theme="paper"][data-scheme="dark"] { color-scheme: dark; --bg: #17140f; --panel: #1f1b15; --panel-2: #27221a; --ink: #f3ece0; --muted: #b3a690; --border: #302a21; --border-strong: #3d362b; --edge: #7b7161; --accent: #e3a565; --accent-weak: #33261a; --accent-ink: #17140f; --ok: #86c48a; --ok-weak: #15261a; --warn: #e0b25a; --warn-weak: #2e2412; --danger: #f0877c; --danger-weak: #331a17; --info: #8fb8e0; --info-weak: #172433; }
+:root[data-theme="forest"] { color-scheme: light; --bg: #f4f8f4; --panel: #ffffff; --panel-2: #edf3ee; --ink: #16231a; --muted: #526356; --border: #dfe8e1; --border-strong: #cddbd0; --edge: #77897c; --accent: #1f7a45; --accent-weak: #e3f2e8; --accent-ink: #ffffff; --ok: #1f7a45; --ok-weak: #e3f2e8; --warn: #8a5d00; --warn-weak: #fbf0d4; --danger: #b8312a; --danger-weak: #fbe6e4; --info: #2a6496; --info-weak: #e4eef7; }
+:root[data-theme="forest"][data-scheme="dark"] { color-scheme: dark; --bg: #0d1410; --panel: #131c16; --panel-2: #18231c; --ink: #e4efe7; --muted: #8fa595; --border: #1f2c23; --border-strong: #29382e; --edge: #637568; --accent: #5cc98a; --accent-weak: #173322; --accent-ink: #0d1410; --ok: #5cc98a; --ok-weak: #173322; --warn: #d8ad4a; --warn-weak: #2b2311; --danger: #ec6a5e; --danger-weak: #2f1714; --info: #7fb2e5; --info-weak: #152435; }
+:root[data-theme="ocean"] { color-scheme: light; --bg: #f3f7f9; --panel: #ffffff; --panel-2: #ebf2f5; --ink: #132029; --muted: #4f6370; --border: #dde7ec; --border-strong: #ccdae1; --edge: #738892; --accent: #0b6e8a; --accent-weak: #e0f1f6; --accent-ink: #ffffff; --ok: #1b7a4a; --ok-weak: #e2f3ea; --warn: #8f5f00; --warn-weak: #fcf0d3; --danger: #c0352b; --danger-weak: #fce6e3; --info: #1f5fae; --info-weak: #e3edfa; }
+:root[data-theme="ocean"][data-scheme="dark"] { color-scheme: dark; --bg: #0b1217; --panel: #111a21; --panel-2: #16212a; --ink: #e2edf3; --muted: #8aa2b1; --border: #1c2a34; --border-strong: #263741; --edge: #607480; --accent: #3fc0d8; --accent-weak: #123039; --accent-ink: #0b1217; --ok: #4fc58a; --ok-weak: #11291d; --warn: #dcac45; --warn-weak: #2c2310; --danger: #ef6b60; --danger-weak: #311714; --info: #6fa8f0; --info-weak: #13233a; }
+:root[data-theme="ember"] { color-scheme: light; --bg: #fbf6f2; --panel: #ffffff; --panel-2: #f6ede6; --ink: #2a1b14; --muted: #6e5649; --border: #efe2d8; --border-strong: #e2d1c4; --edge: #958072; --accent: #b04a0c; --accent-weak: #fbebe0; --accent-ink: #ffffff; --ok: #2a7340; --ok-weak: #e4f2e7; --warn: #8a5800; --warn-weak: #fbefd3; --danger: #b42324; --danger-weak: #fbe4e3; --info: #2b5f9e; --info-weak: #e4edf8; }
+:root[data-theme="ember"][data-scheme="dark"] { color-scheme: dark; --bg: #16100c; --panel: #1e1611; --panel-2: #271d16; --ink: #f6ebe3; --muted: #b8a194; --border: #30241c; --border-strong: #3e2f25; --edge: #7e6a5e; --accent: #ff8f4d; --accent-weak: #3a2112; --accent-ink: #16100c; --ok: #78c88e; --ok-weak: #132719; --warn: #e3b04f; --warn-weak: #2e2410; --danger: #f4776f; --danger-weak: #351816; --info: #86b2ef; --info-weak: #162338; }
+:root[data-theme="contrast"] { color-scheme: light; --bg: #ffffff; --panel: #ffffff; --panel-2: #f2f2f2; --ink: #000000; --muted: #2b2b2b; --border: #000000; --border-strong: #000000; --edge: #000000; --accent: #0033cc; --accent-weak: #e6ecff; --accent-ink: #ffffff; --ok: #005c1f; --ok-weak: #e3f5e8; --warn: #6b4200; --warn-weak: #fff1d1; --danger: #b00010; --danger-weak: #ffe6e8; --info: #0033cc; --info-weak: #e6ecff; }
+:root[data-theme="contrast"][data-scheme="dark"] { color-scheme: dark; --bg: #000000; --panel: #000000; --panel-2: #141414; --ink: #ffffff; --muted: #e0e0e0; --border: #ffffff; --border-strong: #ffffff; --edge: #ffffff; --accent: #7fb2ff; --accent-weak: #0d1f3d; --accent-ink: #000000; --ok: #5ee08a; --ok-weak: #0a2614; --warn: #ffd166; --warn-weak: #2e2306; --danger: #ff8a8a; --danger-weak: #3a0d0d; --info: #7fb2ff; --info-weak: #0d1f3d; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-scheme="light"]) { color-scheme: dark; --bg: #0f1218; --panel: #161b24; --panel-2: #1b212c; --ink: #e8ecf3; --muted: #8a93a6; --border: #232a36; --border-strong: #2c3441; --edge: #697383; --accent: #4b8bff; --accent-weak: #1b2740; --accent-ink: #0f1218; --ok: #3fb960; --ok-weak: #12281a; --warn: #d9a93f; --warn-weak: #2b2210; --danger: #e5534b; --danger-weak: #2d1517; --info: #4b8bff; --info-weak: #1b2740; }
+  :root[data-theme="fabric"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #110c15; --panel: #1b1420; --panel-2: #231a29; --ink: #fff9f0; --muted: #b6aabc; --border: #2e2334; --border-strong: #3a2e41; --edge: #7a6a80; --accent: #d4a3ea; --accent-weak: #2f1d38; --accent-ink: #110c15; --ok: #79d49a; --ok-weak: #12291c; --warn: #f6ba75; --warn-weak: #332314; --danger: #ff969f; --danger-weak: #35191f; --info: #a6bfff; --info-weak: #18243d; }
+  :root[data-theme="paper"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #17140f; --panel: #1f1b15; --panel-2: #27221a; --ink: #f3ece0; --muted: #b3a690; --border: #302a21; --border-strong: #3d362b; --edge: #7b7161; --accent: #e3a565; --accent-weak: #33261a; --accent-ink: #17140f; --ok: #86c48a; --ok-weak: #15261a; --warn: #e0b25a; --warn-weak: #2e2412; --danger: #f0877c; --danger-weak: #331a17; --info: #8fb8e0; --info-weak: #172433; }
+  :root[data-theme="forest"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #0d1410; --panel: #131c16; --panel-2: #18231c; --ink: #e4efe7; --muted: #8fa595; --border: #1f2c23; --border-strong: #29382e; --edge: #637568; --accent: #5cc98a; --accent-weak: #173322; --accent-ink: #0d1410; --ok: #5cc98a; --ok-weak: #173322; --warn: #d8ad4a; --warn-weak: #2b2311; --danger: #ec6a5e; --danger-weak: #2f1714; --info: #7fb2e5; --info-weak: #152435; }
+  :root[data-theme="ocean"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #0b1217; --panel: #111a21; --panel-2: #16212a; --ink: #e2edf3; --muted: #8aa2b1; --border: #1c2a34; --border-strong: #263741; --edge: #607480; --accent: #3fc0d8; --accent-weak: #123039; --accent-ink: #0b1217; --ok: #4fc58a; --ok-weak: #11291d; --warn: #dcac45; --warn-weak: #2c2310; --danger: #ef6b60; --danger-weak: #311714; --info: #6fa8f0; --info-weak: #13233a; }
+  :root[data-theme="ember"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #16100c; --panel: #1e1611; --panel-2: #271d16; --ink: #f6ebe3; --muted: #b8a194; --border: #30241c; --border-strong: #3e2f25; --edge: #7e6a5e; --accent: #ff8f4d; --accent-weak: #3a2112; --accent-ink: #16100c; --ok: #78c88e; --ok-weak: #132719; --warn: #e3b04f; --warn-weak: #2e2410; --danger: #f4776f; --danger-weak: #351816; --info: #86b2ef; --info-weak: #162338; }
+  :root[data-theme="contrast"]:not([data-scheme="light"]) { color-scheme: dark; --bg: #000000; --panel: #000000; --panel-2: #141414; --ink: #ffffff; --muted: #e0e0e0; --border: #ffffff; --border-strong: #ffffff; --edge: #ffffff; --accent: #7fb2ff; --accent-weak: #0d1f3d; --accent-ink: #000000; --ok: #5ee08a; --ok-weak: #0a2614; --warn: #ffd166; --warn-weak: #2e2306; --danger: #ff8a8a; --danger-weak: #3a0d0d; --info: #7fb2ff; --info-weak: #0d1f3d; }
+}
+/* fabric-dashboard-kit:themes:end */
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --dur-state: 0s; --dur-hover: 0s; }
+}
+
+/* ---- base: the floor holds (ED-1, ED-2) ---- */
+*, *::before, *::after { box-sizing: border-box; }
+html { min-width: var(--fd-floor); background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--font-ui); overflow-wrap: break-word; }
+img, svg, video, canvas { max-width: 100%; height: auto; }
+h1, h2, h3 { margin: 0; text-wrap: balance; }
+h1 { font-size: var(--t-section); font-weight: 700; }
+h2 { font-size: var(--t-section); font-weight: 700; margin: var(--space-6) 0 var(--space-3); }
+h3 { font-size: var(--t-card); font-weight: 600; margin: 0 0 var(--space-3); }
+p { max-width: 65ch; }
+a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 2px; }
+a:hover { text-decoration-color: var(--ink); }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+/* A jump to an anchor lands below the sticky chrome (ED-5); the script measures --fd-chrome-h. */
+[id] { scroll-margin-top: calc(var(--fd-chrome-h) + var(--space-2)); }
+.fd-mono, .fd-num, time { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
+.fd-muted { color: var(--muted); }
+.fd-hint { color: var(--muted); font-size: var(--t-label); max-width: 65ch; margin: 0 0 var(--space-3); }
+.fd-break { overflow-wrap: anywhere; }
+.fd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-skip { position: absolute; top: var(--space-2); left: var(--space-4); z-index: 20; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.fd-skip:focus { width: auto; height: auto; clip: auto; overflow: visible; background: var(--panel); padding: var(--space-2); }
+
+/* ---- page frame ---- */
+.fd-page { max-width: var(--fd-page-max); margin: 0 auto; padding: var(--space-4) var(--fd-gutter) var(--space-6); }
+/* Sticky only once the script runs: without it the navigation wraps and a wrapped bar must not pin
+   half the screen. The script keeps the pinned part at or under min(--fd-chrome-max, 25vh) (ED-5):
+   when header and navigation together are taller, the header scrolls away (a negative top) and the
+   navigation stays pinned. */
+.fd-chrome { background: var(--panel); border-bottom: 1px solid var(--border); }
+html.fd-js .fd-chrome { position: sticky; top: var(--fd-chrome-top, 0px); z-index: 10; }
+.fd-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--fd-gutter); min-width: 0; }
+.fd-header > * { min-width: 0; }
+.fd-title { font-size: var(--t-card); font-weight: 700; margin: 0; }
+.fd-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.fd-foot { color: var(--muted); font-size: var(--t-label); padding: var(--space-4) var(--fd-gutter); border-top: 1px solid var(--border); }
+
+/* ---- navigation: always reachable (ED-3) ----
+   Without the script the list wraps. With it (.fd-nav--fold) the list stays one line and the
+   links that do not fit move into the More menu; nothing is left past a hidden scrollbar. */
+.fd-nav { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--fd-gutter); min-width: 0; }
+.fd-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; min-width: 0; }
+.fd-nav--fold .fd-nav-list { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; }
+.fd-nav a, .fd-more > summary { display: block; padding: var(--space-1) var(--space-3); border-radius: var(--r-control); color: var(--muted);
+  text-decoration: none; white-space: nowrap; cursor: pointer;
+  transition: background-color var(--dur-hover) var(--motion-ease), color var(--dur-hover) var(--motion-ease); }
+.fd-nav a:hover, .fd-more > summary:hover { background: var(--panel-2); color: var(--ink); }
+.fd-nav a[aria-current] { background: var(--accent-weak); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
+.fd-more { position: relative; flex: none; }
+.fd-more[hidden] { display: none; }
+.fd-more > summary { list-style: none; border: 1px solid var(--edge); }
+.fd-more > summary::-webkit-details-marker { display: none; }
+.fd-more > summary::after { content: " \25BE"; }
+.fd-more-list { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 30; list-style: none; margin: 0; padding: var(--space-1);
+  min-width: 12rem; max-width: min(20rem, calc(100vw - 2 * var(--fd-gutter))); max-height: 60vh; overflow-y: auto;
+  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
+.fd-more-list a { white-space: normal; }
+
+/* ---- layout: fluid, no fixed widths ---- */
+.fd-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fd-col)), 1fr)); }
+.fd-grid--tiles { --fd-col: 160px; }
+.fd-grid--wide { --fd-col: 480px; }
+.fd-stack > * + * { margin-top: var(--space-3); }
+.fd-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; min-width: 0; }
+.fd-row > * { min-width: 0; }
+/* A label-value list: two columns while they fit, one below that. */
+.fd-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-1) var(--space-4); margin: 0; }
+.fd-pairs > div { display: flex; justify-content: space-between; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: var(--space-1) 0; min-width: 0; }
+.fd-pairs dt { color: var(--muted); }
+.fd-pairs dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
+
+/* ---- wide content scrolls in its own box (ED-4) ----
+   Edge shades show which side has more (the local/scroll background pair), the WebKit scrollbar
+   stays visible instead of overlaying, and the script makes the box focusable with a name. */
+.fd-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-card);
+  background: var(--panel); /* a browser without color-mix() keeps a plain box */
+  background:
+    linear-gradient(90deg, var(--panel) 30%, transparent) left center / 40px 100% no-repeat local,
+    linear-gradient(270deg, var(--panel) 30%, transparent) right center / 40px 100% no-repeat local,
+    linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent), transparent) left center / 14px 100% no-repeat scroll,
+    linear-gradient(270deg, color-mix(in srgb, var(--ink) 18%, transparent), transparent) right center / 14px 100% no-repeat scroll,
+    var(--panel);
+  scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
+.fd-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
+.fd-scroll::-webkit-scrollbar-thumb { background: var(--edge); border-radius: var(--r-pill); border: 2px solid var(--panel); }
+.fd-scroll::-webkit-scrollbar-track { background: transparent; }
+.fd-scroll:focus-visible { outline-offset: -2px; }
+.fd-scroll[data-fd-overflow] { border-color: var(--edge); }
+pre.fd-scroll, .fd-scroll pre { margin: 0; padding: var(--space-3); font: var(--t-body)/1.5 var(--font-data); white-space: pre; }
+.fd-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
+/* Inside its own box a table keeps its natural width and the box scrolls; words are not broken. */
+.fd-scroll > .fd-table { width: max-content; min-width: 100%; }
+.fd-scroll .fd-table td, .fd-scroll .fd-table th { overflow-wrap: normal; }
+.fd-table th, .fd-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
+.fd-table th { background: var(--panel-2); color: var(--muted); font-size: var(--t-label); font-weight: 600; white-space: nowrap; }
+.fd-table tbody tr:hover { background: var(--panel-2); }
+.fd-table td.fd-num, .fd-table th.fd-num { text-align: right; }
+
+/* ---- atoms ---- */
+.fd-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-4); min-width: 0; }
+.fd-card > h3:first-child { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
+.fd-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--space-3); min-width: 0; }
+.fd-tile .fd-label { color: var(--muted); font-size: var(--t-label); }
+.fd-tile .fd-value { font: 600 var(--t-section)/1.2 var(--font-data); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+/* Status: the word in --ink, the colour in the dot and the fill; never colour alone. */
+.fd-chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; font: var(--t-chip)/1.6 var(--font-data);
+  padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--ink); background: var(--panel);
+  white-space: nowrap; }
+.fd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
+.fd-s-ok { background: var(--ok-weak); } .fd-s-ok .fd-dot, .fd-dot.fd-s-ok { background: var(--ok); }
+.fd-s-warn { background: var(--warn-weak); } .fd-s-warn .fd-dot, .fd-dot.fd-s-warn { background: var(--warn); }
+.fd-s-danger { background: var(--danger-weak); } .fd-s-danger .fd-dot, .fd-dot.fd-s-danger { background: var(--danger); }
+.fd-s-info { background: var(--info-weak); } .fd-s-info .fd-dot, .fd-dot.fd-s-info { background: var(--info); }
+.fd-banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--edge); border-radius: var(--r-card); }
+.fd-btn { font: 600 var(--t-body) var(--font-ui); padding: var(--space-2) var(--space-3); border-radius: var(--r-control); cursor: pointer;
+  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); max-width: 100%;
+  transition: background-color var(--dur-hover) var(--motion-ease), border-color var(--dur-hover) var(--motion-ease); }
+.fd-btn:hover { background: var(--panel-2); }
+.fd-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+.fd-btn--primary:hover { background: var(--accent); filter: brightness(1.06); }
+.fd-btn--danger { border-color: var(--danger); }
+.fd-btn:disabled { cursor: not-allowed; opacity: 0.55; }
+.fd-input, .fd-select, .fd-textarea { font: var(--t-body) var(--font-ui); color: var(--ink); background: var(--panel);
+  border: 1px solid var(--edge); border-radius: var(--r-control); padding: var(--space-2); max-width: 100%; min-width: 0; }
+.fd-empty { color: var(--muted); padding: var(--space-4); text-align: center; }
+
+/* ---- appearance owned by the host (ED-6) ---- */
+html[data-fd-host-appearance] [data-fd-appearance-control] { display: none !important; }