@agent-native/toolkit 0.23.1 → 0.198.2

package/src/app/styles/blocks.css

@@ -0,0 +1,1668 @@
+/**
+ * Shared styling for the core block library (`client/blocks/library/*`).
+ *
+ * The block components emit app-neutral `an-block*` / `an-callout` classes that
+ * resolve against shadcn/ui theme tokens (`--foreground`, `--muted-foreground`,
+ * `--border`, `--card`, `--ring`) which EVERY template already defines — so the
+ * blocks render correctly in any app (plan, content, future templates) using
+ * that app's own palette. Templates may still add their own block classes for a
+ * bespoke look; because this file is imported via `agent-native.css` BEFORE a
+ * template's `global.css`, any template rule of equal specificity wins (this is
+ * how the plan template keeps its existing `.plan-callout` treatment while
+ * content gets the theme-token version here).
+ *
+ * Callout tone accents are fixed semantic hues (info=blue, decision=violet,
+ * risk=red, warning=amber, success=green) rather than theme tokens, since their
+ * meaning is universal; the dark variants are brightened to read on dark
+ * surfaces.
+ */
+
+:root {
+  --an-callout-info: 218 85% 57%;
+  --an-callout-decision: 262 83% 58%;
+  --an-callout-risk: 0 84% 60%;
+  --an-callout-warning: 25 95% 48%;
+  --an-callout-success: 142 71% 38%;
+
+  --plan-code-size: 0.7rem;
+
+  --plan-doc-code-size: 0.7rem;
+}
+
+.dark {
+  --an-callout-info: 218 85% 67%;
+  --an-callout-decision: 263 88% 74%;
+  --an-callout-risk: 0 84% 67%;
+  --an-callout-warning: 28 96% 60%;
+  --an-callout-success: 142 60% 52%;
+}
+
+/* ════════════════════════════════════════════════════════════════════════
+   AUTHORITATIVE code-surface font-size catch-all.
+
+   THE single source of truth for how big monospace code renders inside plan
+   document content. Historically the size was set per-surface — a Tailwind
+   arbitrary `[font-size:var(--plan-code-size)]` on diff/annotated-code rows
+   (specificity 0,1,0), the plan template's `.plan-code-surface pre` rule
+   (0,2,0), the editor node-view `.an-rich-md-prose .an-code-block pre` rule
+   (0,3,0), etc. Because those live in different files at different specificities
+   (and the plan template raises `--plan-code-size` to 1rem), one surface could
+   render large while another stayed small: the recurring "code is too big in
+   the annotated diff / API JSON" whack-a-mole.
+
+   This rule ends it. It scopes to plan document content via a ZERO-specificity
+   `:where()` wrapper, then targets EVERY code surface — shiki/lowlight `<pre>`
+   and `<code>`, the `.plan-shiki` wrapper, the shared `.plan-code-surface`
+   scroll body, the editor `.an-code-block`, and an explicit
+   `[data-code-surface]` hook the dense block components stamp on their code
+   containers — and forces `font-size: var(--plan-doc-code-size)` with
+   `!important`. The `!important` + the `[data-code-surface]` attribute leaf
+   (specificity contribution 0,1,0 inside `:is()`, but `!important` is what
+   decides the cascade) guarantees it WINS over every per-surface size above,
+   including the plan template's later-loaded `.plan-code-surface pre` and the
+   inline Tailwind arbitrary class — no surface can escape it. Free-standing
+   prose code (inline `code` in body copy) is intentionally NOT in scope: it is
+   matched only when it sits inside one of the code-surface containers.
+
+   Tune `--plan-doc-code-size` (here or per-app) to resize ALL dense document
+   code at once. ════════════════════════════════════════════════════════════ */
+:where(.plan-document-flow, .plan-block, .plan-block-node)
+  :is(
+    [data-code-surface],
+    [data-code-surface] pre,
+    [data-code-surface] code,
+    [data-code-surface] .plan-shiki,
+    .plan-code-surface,
+    .plan-code-surface pre,
+    .plan-code-surface code,
+    .plan-code-surface .plan-shiki,
+    .plan-code-surface .plan-code-surface-scroll,
+    .an-code-block,
+    .an-code-block pre,
+    .an-code-block code
+  ) {
+  font-size: var(--plan-doc-code-size) !important;
+}
+
+/* Syntax-token spans nested INSIDE a highlighted `<pre>`/`<code>` (shiki +
+   lowlight wrap every token in a `<span>`) inherit the forced size, so a stray
+   per-token size can never reintroduce a large glyph. Scoped to spans under
+   pre/code only — NOT every span in the surface — so the in-code annotation
+   marker pips (their own tiny `text-[9px]`) and other chrome keep their size. */
+:where(.plan-document-flow, .plan-block, .plan-block-node)
+  :is([data-code-surface], .plan-code-surface, .an-code-block)
+  :is(pre, code)
+  span {
+  font-size: inherit !important;
+}
+
+/* Universal guarantee (NOT gated on a plan-document ancestor): the dense code
+   block components — annotated-code, diff, api-endpoint — stamp
+   `data-code-surface` / `.an-code-block` on their code containers. Force the
+   dense size on those WHEREVER they render, so the standard annotated/diff
+   component can never show oversized code on any surface (embedded panels,
+   non-plan-document hosts, etc.), not just inside `.plan-document-flow`. The
+   `var(--plan-doc-code-size, 0.7rem)` fallback covers hosts that don't define
+   the token. */
+:is(
+  [data-code-surface],
+  [data-code-surface] pre,
+  [data-code-surface] code,
+  [data-code-surface] .plan-shiki,
+  .an-code-block,
+  .an-code-block pre,
+  .an-code-block code
+) {
+  font-size: var(--plan-doc-code-size, 0.7rem) !important;
+}
+:is([data-code-surface], .an-code-block) :is(pre, code) span {
+  font-size: inherit !important;
+}
+
+:where(.plan-document-flow, .plan-block, .plan-block-node) .font-mono,
+:is([data-code-surface], .an-code-block) .font-mono {
+  font-size: var(--plan-doc-code-size, 0.7rem) !important;
+}
+
+.an-block-label {
+  margin: 0 0 1rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+}
+
+.an-callout {
+  max-width: 860px;
+  border-inline-start: 3px solid hsl(var(--border));
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 8px;
+  border-end-end-radius: 8px;
+  padding-block: 0.9rem;
+  padding-inline-start: 1.25rem;
+}
+
+.an-callout > .an-rich-md-wrapper {
+  margin-top: 0;
+}
+
+.an-callout[data-tone="info"] {
+  --an-callout-accent: var(--an-callout-info);
+}
+.an-callout[data-tone="decision"] {
+  --an-callout-accent: var(--an-callout-decision);
+}
+.an-callout[data-tone="risk"] {
+  --an-callout-accent: var(--an-callout-risk);
+}
+.an-callout[data-tone="warning"] {
+  --an-callout-accent: var(--an-callout-warning);
+}
+.an-callout[data-tone="success"] {
+  --an-callout-accent: var(--an-callout-success);
+}
+
+.an-callout[data-tone] {
+  border-inline-start-color: hsl(var(--an-callout-accent));
+  background-image: linear-gradient(
+    90deg,
+    hsl(var(--an-callout-accent) / 0.08),
+    hsl(var(--an-callout-accent) / 0.02) 38%,
+    transparent 72%
+  );
+}
+
+[dir="rtl"] .an-callout[data-tone],
+.an-callout[dir="rtl"][data-tone] {
+  background-image: linear-gradient(
+    270deg,
+    hsl(var(--an-callout-accent) / 0.08),
+    hsl(var(--an-callout-accent) / 0.02) 38%,
+    transparent 72%
+  );
+}
+
+.an-callout[data-tone] .an-block-label {
+  color: hsl(var(--an-callout-accent));
+}
+
+@layer utilities {
+  .bg-plan-block {
+    background-color: hsl(var(--muted));
+  }
+
+  .bg-plan-code {
+    background-color: hsl(var(--muted));
+  }
+
+  .text-plan-text {
+    color: hsl(var(--foreground));
+  }
+
+  .text-plan-muted {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .text-plan-code-text {
+    color: hsl(var(--foreground));
+  }
+
+  .border-plan-line {
+    border-color: hsl(var(--border));
+  }
+}
+
+.plan-block-label {
+  margin: 0 0 1rem;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+}
+
+.plan-columns-label {
+  margin: 0 0 0.6rem;
+  color: hsl(var(--foreground));
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  line-height: 1.3;
+}
+
+.plan-block .plan-block {
+  margin-top: 1.75rem;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.plan-block .plan-block .plan-block-label {
+  margin-bottom: 0.75rem;
+}
+
+.plan-doc-body {
+  font-size: 1.0625rem;
+  line-height: 1.75;
+}
+
+.plan-rich-markdown-editor {
+  max-width: 820px;
+  color: hsl(var(--foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose {
+  color: hsl(var(--foreground));
+  font-size: 1.0625rem;
+  line-height: 1.75;
+  text-align: start;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose > :first-child {
+  margin-top: 0;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose > :last-child {
+  margin-bottom: 0;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose p {
+  margin: 0.9rem 0;
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-rich-markdown-editor.an-table-cell-markdown {
+  max-width: none;
+  min-height: 1.5rem;
+  color: inherit;
+}
+
+.plan-rich-markdown-editor.an-table-cell-markdown .an-rich-md-prose {
+  min-height: 1.5rem;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.plan-rich-markdown-editor.an-table-cell-markdown .an-rich-md-prose p {
+  min-height: 1.5rem;
+  margin: 0;
+  color: inherit;
+}
+
+.plan-rich-markdown-editor.an-table-cell-markdown
+  .an-rich-md-prose
+  > :first-child {
+  margin-top: 0;
+}
+
+.plan-rich-markdown-editor.an-table-cell-markdown
+  .an-rich-md-prose
+  > :last-child {
+  margin-bottom: 0;
+}
+
+.plan-annotation-note > .plan-rich-markdown-editor {
+  margin-top: 0;
+}
+.plan-annotation-note .plan-rich-markdown-editor .an-rich-md-prose {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: inherit;
+}
+.plan-annotation-note .plan-rich-markdown-editor .an-rich-md-prose p {
+  margin: 0;
+  color: inherit;
+}
+.plan-annotation-note .plan-rich-markdown-editor .an-rich-md-prose p + p {
+  margin-top: 0.45rem;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose h1,
+.plan-rich-markdown-editor .an-rich-md-prose h2,
+.plan-rich-markdown-editor .an-rich-md-prose h3,
+.plan-rich-markdown-editor .an-rich-md-prose h4 {
+  color: hsl(var(--foreground));
+  font-weight: 640;
+  letter-spacing: 0;
+  line-height: 1.2;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose h1 {
+  margin: 2.2rem 0 0.85rem;
+  font-size: 1.75rem;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose h2 {
+  margin: 2rem 0 0.75rem;
+  font-size: 1.45rem;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose h3 {
+  margin: 1.6rem 0 0.6rem;
+  font-size: 1.2rem;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose h4 {
+  margin: 1.3rem 0 0.5rem;
+  font-size: 1.05rem;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose ul:not(.an-rich-md-task-list),
+.plan-rich-markdown-editor .an-rich-md-prose ol,
+.plan-rich-markdown-editor .an-rich-md-task-list {
+  margin: 0.85rem 0;
+  padding-inline-start: 1.45em;
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-task-list {
+  padding-inline-start: 0;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose li {
+  margin: 0.35rem 0;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose li::marker {
+  color: hsl(var(--border));
+}
+
+.plan-rich-markdown-editor .an-rich-md-link {
+  color: hsl(var(--ring));
+  text-decoration-color: hsl(var(--ring) / 0.55);
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose strong {
+  color: hsl(var(--foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose blockquote {
+  margin: 1.1rem 0;
+  border-inline-start-color: hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose hr {
+  border-top-color: hsl(var(--border));
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose :not(pre) > code {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+.plan-rich-markdown-editor .an-rich-md-prose pre {
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-table th,
+.plan-rich-markdown-editor .an-rich-md-table td {
+  border-color: hsl(var(--border));
+}
+
+.plan-rich-markdown-editor .an-rich-md-table th {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-table td {
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-rich-markdown-editor .an-rich-md-task-list li input[type="checkbox"] {
+  accent-color: hsl(var(--ring));
+}
+
+.plan-code-surface {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+}
+
+.plan-code-surface-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.4rem 0.85rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.plan-code-surface-lang {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-code-surface-scroll {
+  position: relative;
+  overflow: auto;
+  font-size: var(--plan-code-size);
+  line-height: 1.6;
+}
+
+.plan-code-surface[data-collapsed="true"] .plan-code-surface-scroll {
+  max-height: calc(var(--plan-code-max-lines, 30) * 1lh + 0.85rem);
+  overflow: hidden;
+}
+
+.plan-code-surface-fade {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 3.5rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, hsl(var(--muted)) 92%);
+}
+
+.plan-code-surface-toggle {
+  display: block;
+  width: 100%;
+  padding: 0.45rem 0.85rem;
+  border-top: 1px solid hsl(var(--border));
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: start;
+  cursor: pointer;
+  transition:
+    color 0.15s,
+    background-color 0.15s;
+}
+
+.plan-code-surface-toggle:hover {
+  color: hsl(var(--foreground));
+  background: color-mix(in srgb, hsl(var(--muted)) 60%, transparent);
+}
+
+.plan-code-surface .plan-shiki,
+.plan-code-surface pre {
+  margin: 0;
+  padding: 0.85rem 1.1rem;
+  background: var(--shiki-light-bg, hsl(var(--muted))) !important;
+  color: var(--shiki-light, hsl(var(--foreground)));
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--plan-code-size);
+  line-height: 1.6;
+}
+
+.plan-code-surface pre code {
+  color: inherit;
+  background: none;
+  padding: 0;
+}
+
+.plan-code-surface .plan-shiki pre,
+.plan-code-surface .plan-shiki code {
+  background: var(--shiki-light-bg, transparent) !important;
+}
+
+.plan-code-surface .plan-shiki pre span {
+  color: var(--shiki-light);
+}
+
+.dark .plan-code-surface .plan-shiki,
+.dark .plan-code-surface .plan-shiki pre {
+  background: var(--shiki-dark-bg, hsl(var(--muted))) !important;
+  color: var(--shiki-dark, hsl(var(--foreground)));
+}
+
+.dark .plan-code-surface .plan-shiki pre span {
+  color: var(--shiki-dark);
+}
+
+.plan-code {
+  position: relative;
+}
+
+.plan-code-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0 0.15rem 0.4rem;
+}
+
+.plan-code-filename {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.plan-code-muted {
+  color: hsl(var(--muted-foreground));
+  font-weight: 500;
+}
+
+.plan-code-chrome {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.plan-code:hover .plan-code-chrome,
+.plan-code:focus-within .plan-code-chrome {
+  opacity: 1;
+}
+
+.plan-code-chrome-float {
+  position: absolute;
+  top: 0.5rem;
+  inset-inline-end: 0.5rem;
+  z-index: 2;
+}
+
+.plan-code-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  width: 1.75rem;
+  border-radius: 7px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition:
+    color 0.12s,
+    background-color 0.12s;
+}
+
+.plan-code-chip:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+
+.plan-code-lang-select {
+  height: 1.75rem;
+  padding: 0 0.4rem;
+  border-radius: 7px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  font-size: 0.72rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.plan-code-lang-select:hover {
+  color: hsl(var(--foreground));
+}
+
+.plan-code-editing {
+  overflow: visible;
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  background: transparent;
+}
+
+.plan-code-editing .plan-code-head {
+  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.plan-code-editing:hover .plan-code-chrome,
+.plan-code-editing:focus-within .plan-code-chrome {
+  opacity: 1;
+}
+
+.plan-code .plan-code-surface {
+  background: transparent;
+}
+.plan-code .plan-code-surface .plan-shiki,
+.plan-code .plan-code-surface pre,
+.dark .plan-code .plan-code-surface .plan-shiki,
+.dark .plan-code .plan-code-surface pre {
+  background: transparent !important;
+}
+
+.plan-code-editor-body {
+  position: relative;
+  overflow: auto;
+}
+
+.plan-code-editor-layer,
+.plan-code-editor-input {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0.85rem 1.1rem;
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--plan-code-size);
+  line-height: 1.6;
+  font-weight: 400;
+  letter-spacing: 0;
+  font-kerning: none;
+  font-variant-ligatures: none;
+  font-feature-settings:
+    "liga" 0,
+    "calt" 0;
+  white-space: pre;
+  tab-size: 2;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.plan-code-editor-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  color: hsl(var(--foreground));
+  margin: 0 !important;
+  padding: 0.85rem 1.1rem !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0;
+  font-family:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
+  font-size: var(--plan-code-size) !important;
+  line-height: 1.6 !important;
+}
+
+.plan-code-editor-layer :where(code, span) {
+  font: inherit !important;
+  letter-spacing: 0 !important;
+  font-kerning: none !important;
+  font-variant-ligatures: none !important;
+  font-feature-settings:
+    "liga" 0,
+    "calt" 0 !important;
+  overflow-wrap: normal !important;
+  word-break: normal !important;
+}
+
+.plan-code-editor-input {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-height: 2.5rem;
+  resize: none;
+  overflow: auto;
+  border: 0;
+  background: transparent;
+  color: transparent;
+  caret-color: hsl(var(--foreground));
+  outline: none;
+}
+
+.plan-code-editor-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-code-editor-fade {
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 3rem;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    hsl(var(--background)) 92%
+  );
+}
+
+.plan-code-caption {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.plan-code-caption-input {
+  width: 100%;
+  padding: 0 0.15rem;
+  border: 0;
+  background: transparent;
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+  outline: none;
+}
+
+.an-code-block {
+  position: relative;
+  margin: 1.1rem 0;
+  border: 1px solid hsl(var(--border));
+  border-radius: 12px;
+  background: hsl(var(--muted));
+  overflow: hidden;
+}
+
+.an-code-block__header {
+  display: flex;
+  align-items: center;
+  padding: 0.3rem 0.55rem;
+  border-bottom: 1px solid hsl(var(--border));
+  min-height: 2rem;
+}
+
+.an-code-block__lang {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.7rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+.an-code-block__lang:hover {
+  background: color-mix(in srgb, hsl(var(--muted)) 70%, transparent);
+  color: hsl(var(--foreground));
+}
+
+.an-code-block__lang--readonly,
+.an-code-block__lang--readonly:hover {
+  cursor: default;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-rich-md-prose .an-code-block pre {
+  margin: 0;
+  padding: 0.85rem 1.1rem;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--plan-code-size);
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+.an-code-block pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+.an-code-block__search {
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid hsl(var(--border));
+  color: hsl(var(--foreground));
+  font-size: 0.8rem;
+  outline: none;
+}
+
+.an-code-block__list {
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+.an-code-block__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: hsl(var(--foreground));
+  font-size: 0.8rem;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-code-block__option:hover {
+  background: hsl(var(--accent));
+}
+
+.an-code-block__option.is-active {
+  color: hsl(var(--primary));
+}
+
+.an-questions-block {
+  max-width: 860px;
+}
+
+/*
+ * HTML artboard styling.
+ *
+ * The model writes a plain, semantic HTML mockup of a screen. This stylesheet
+ * gives that HTML the wireframe look WITHOUT the model having to specify colors,
+ * fonts, or borders: it themes bare elements via tokens that flip on
+ * [data-theme], swaps the font on [data-style] (sketchy handwriting vs clean
+ * sans), and exposes --wf-* tokens + a few helper classes the model can lean on.
+ * The rough.js overlay then redraws the bordered boxes as hand-drawn strokes.
+ *
+ * Scope: `.plan-html-frame`. Everything is contained so model HTML can't leak
+ * into the app chrome.
+ */
+
+.plan-html-frame {
+  --wf-ink: var(--plan-text, hsl(var(--foreground)));
+  --wf-muted: var(--plan-muted, hsl(var(--muted-foreground)));
+  --wf-line: var(--plan-line, hsl(var(--border)));
+  --wf-sketch: var(--plan-muted-line, hsl(var(--border)));
+  --wf-paper: var(--plan-document, hsl(var(--background)));
+  --wf-card: var(--plan-block, hsl(var(--card)));
+  --wf-accent: hsl(var(--ring));
+  --wf-accent-fg: hsl(var(--primary-foreground));
+  --wf-accent-soft: color-mix(in srgb, var(--wf-accent) 11%, transparent);
+  --wf-warn: hsl(var(--destructive));
+  --wf-ok: var(--wf-accent);
+  --wf-radius: 9px;
+
+  --wf-font-hand: "Excalifont", "Comic Sans MS", "Bradley Hand", cursive;
+  --wf-font-clean:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
+  --wf-font: var(--wf-font-hand);
+
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  background: transparent;
+  color: var(--wf-ink);
+  font-family: var(--wf-font);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.plan-html-frame-content {
+  width: 100%;
+  min-height: 100%;
+}
+
+.plan-html-frame[data-frame="hide"]:not([data-render-mode="design"])
+  > .plan-html-frame-content
+  > :first-child {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.plan-html-frame[data-prototype-live="true"] {
+  overflow: auto;
+}
+.plan-html-frame[data-prototype-live="true"] > .plan-html-frame-content {
+  height: 100%;
+  min-height: 0;
+  overflow: auto !important;
+  overscroll-behavior: contain;
+}
+
+.plan-html-frame[data-style="clean"] {
+  --wf-font: var(--wf-font-clean);
+}
+
+.plan-html-frame[data-render-mode="design"] {
+  --wf-font: var(--wf-font-clean);
+  background: transparent;
+  color: inherit;
+  font-family: var(--wf-font-clean);
+  font-size: 16px;
+  line-height: normal;
+}
+
+:where(.plan-html-frame[data-render-mode="design"] .plan-html-frame-content)
+  :where(h1, h2, h3, p, small, a, button, input, textarea, select, hr) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+.plan-html-frame[data-render-mode="design"] button,
+.plan-html-frame[data-render-mode="design"] [role="button"],
+.plan-html-frame[data-render-mode="design"] [data-goto] {
+  cursor: pointer;
+}
+
+.plan-html-frame[data-render-mode="design"] [data-plan-design-selected] {
+  outline: 2px solid hsl(var(--ring)) !important;
+  outline-offset: 2px;
+}
+
+.plan-html-frame * {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.plan-html-frame:not([data-render-mode="design"]) h1 {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.15;
+  margin: 0 0 8px;
+}
+.plan-html-frame:not([data-render-mode="design"]) h2 {
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 6px;
+}
+.plan-html-frame:not([data-render-mode="design"]) h3 {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 4px;
+}
+.plan-html-frame:not([data-render-mode="design"]) p {
+  margin: 0 0 8px;
+}
+.plan-html-frame:not([data-render-mode="design"]) small,
+.plan-html-frame:not([data-render-mode="design"]) .wf-muted {
+  color: var(--wf-muted);
+  font-size: 12.5px;
+}
+.plan-html-frame:not([data-render-mode="design"]) a {
+  color: var(--wf-accent);
+  text-decoration: none;
+}
+.plan-html-frame:not([data-render-mode="design"]) hr {
+  border: 0;
+  border-top: 1.4px solid var(--wf-line);
+  margin: 10px 0;
+}
+
+.plan-html-frame:not([data-render-mode="design"]) .wf-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  color: currentColor;
+  vertical-align: -0.16em;
+}
+
+.plan-html-frame:not([data-render-mode="design"]) .wf-icon-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.2px solid currentColor;
+  border-radius: 999px;
+  font-size: 0.72em;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.plan-html-frame:not([data-render-mode="design"]) button,
+.plan-html-frame:not([data-render-mode="design"]) .wf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--wf-ink);
+  background: var(--wf-paper);
+  border: 1.4px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: 7px 14px;
+  cursor: default;
+}
+.plan-html-frame[data-prototype-live="true"]
+  :is(button, .wf-btn, [role="button"], [data-goto]) {
+  cursor: pointer;
+}
+.plan-html-frame[data-prototype-live="true"] :is(button, .wf-btn):active {
+  transform: translateY(1px);
+}
+.plan-html-frame[data-prototype-live="true"] [hidden] {
+  display: none !important;
+}
+.plan-html-frame[data-prototype-live="true"] .is-done,
+.plan-html-frame[data-prototype-live="true"] [data-done="true"] {
+  color: var(--wf-muted);
+  text-decoration: line-through;
+  text-decoration-thickness: 1.5px;
+}
+.plan-html-frame:not([data-render-mode="design"]) button.primary,
+.plan-html-frame:not([data-render-mode="design"]) .wf-btn.primary,
+.plan-html-frame:not([data-render-mode="design"]) [data-primary] {
+  background: var(--wf-accent);
+  border-color: var(--wf-accent);
+  color: var(--wf-accent-fg);
+}
+
+.plan-html-frame:not([data-render-mode="design"]) input,
+.plan-html-frame:not([data-render-mode="design"]) textarea,
+.plan-html-frame:not([data-render-mode="design"]) select {
+  font: inherit;
+  color: var(--wf-ink);
+  background: var(--wf-card);
+  border: 1.4px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: 8px 10px;
+  width: 100%;
+}
+.plan-html-frame:not([data-render-mode="design"]) input[type="checkbox"],
+.plan-html-frame:not([data-render-mode="design"]) input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  accent-color: var(--wf-accent);
+  flex: 0 0 auto;
+}
+
+.plan-html-frame:not([data-render-mode="design"]) .wf-card,
+.plan-html-frame:not([data-render-mode="design"]) .wf-box {
+  background: var(--wf-card);
+  border: 1.4px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: 12px;
+}
+.plan-html-frame:not([data-render-mode="design"]) .wf-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.plan-html-frame:not([data-render-mode="design"]) .wf-row > :last-child {
+  margin-inline-start: auto;
+  text-align: end;
+}
+.plan-html-frame[data-style="sketchy"]:not([data-render-mode="design"])
+  :is(.wf-card, .wf-box) {
+  border-color: color-mix(in srgb, var(--wf-line) 72%, transparent);
+}
+.plan-html-frame:not([data-render-mode="design"]) .wf-pill,
+.plan-html-frame:not([data-render-mode="design"]) .wf-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 1.4px solid var(--wf-line);
+  border-radius: 999px;
+  padding: 2px 10px;
+  font-size: 12.5px;
+}
+.plan-html-frame:not([data-render-mode="design"]) .wf-pill.accent {
+  border-color: var(--wf-accent);
+  color: var(--wf-accent);
+  background: var(--wf-accent-soft);
+}
+
+.plan-html-frame[data-rough-ready]
+  :is(
+    button,
+    input,
+    textarea,
+    select,
+    hr,
+    .wf-btn,
+    .wf-card,
+    .wf-box,
+    .wf-pill,
+    .wf-chip,
+    .wf-icon-fallback,
+    [style*="border:"],
+    [style*="border-top:"],
+    [style*="border-right:"],
+    [style*="border-bottom:"],
+    [style*="border-left:"],
+    [data-rough]
+  ):not([data-rough="none"]) {
+  border-color: transparent !important;
+}
+
+.plan-html-frame[data-skeleton="true"] {
+  --wf-ink: var(--plan-muted-line, hsl(var(--border)));
+  --wf-muted: var(--plan-muted-line, hsl(var(--border)));
+  --wf-line: var(--plan-placeholder-line, hsl(var(--border)));
+  --wf-card: var(--plan-block, hsl(var(--card)));
+  --wf-accent: var(--plan-muted-line, hsl(var(--border)));
+  --wf-accent-soft: var(--plan-block, hsl(var(--card)));
+}
+.plan-html-frame[data-skeleton="true"] * {
+  color: transparent !important;
+}
+
+.plan-diagram-shell {
+  position: relative;
+  width: 100%;
+}
+
+.plan-diagram-frame {
+  --wf-ink: var(--plan-text, hsl(var(--foreground)));
+  --wf-muted: var(--plan-muted, hsl(var(--muted-foreground)));
+  --wf-line: var(--plan-line, hsl(var(--border)));
+  --wf-sketch: var(--plan-muted-line, hsl(var(--border)));
+  --wf-diagram-line: var(--wf-line);
+  --wf-paper: var(--plan-document, hsl(var(--background)));
+  --wf-card: var(--plan-block, hsl(var(--card)));
+  --wf-accent: hsl(var(--ring));
+  --wf-accent-fg: hsl(var(--primary-foreground));
+  --wf-accent-soft: color-mix(in srgb, var(--wf-accent) 11%, transparent);
+  --wf-warn: hsl(var(--destructive));
+  --wf-ok: var(--wf-accent);
+  --wf-radius: 8px;
+  --wf-font-hand: "Excalifont", "Comic Sans MS", "Bradley Hand", cursive;
+  --wf-font-clean:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
+  --wf-font: var(--wf-font-clean);
+
+  position: relative;
+  overflow: auto;
+  width: 100%;
+  border: 0;
+  border-radius: 10px;
+  background: var(--wf-paper);
+  color: var(--wf-ink);
+  font-family: var(--wf-font);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.plan-diagram-frame[data-frame="show"] {
+  border: 1px solid var(--wf-diagram-line);
+  padding: 10px;
+}
+
+.plan-diagram-frame[data-frame="show"][data-rough-ready] {
+  border-color: transparent;
+}
+
+.plan-diagram-frame[data-frame="hide"] {
+  border: 0;
+  background: transparent;
+}
+
+.plan-diagram-frame[data-theme="dark"] {
+  --wf-diagram-line: color-mix(in srgb, var(--wf-sketch) 72%, var(--wf-line));
+}
+
+.plan-diagram-frame[data-style="sketchy"] {
+  --wf-font: var(--wf-font-hand);
+  line-height: 1.32;
+}
+
+.plan-diagram-frame * {
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+.plan-diagram-frame-content {
+  width: 100%;
+  padding: 8px 0;
+  direction: inherit;
+}
+
+.plan-diagram-frame :is(.diagram-arrow[data-arrow]) {
+  position: relative;
+  display: inline-block;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 24px;
+  min-width: 28px;
+  font-size: 0 !important;
+  line-height: 1;
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow]::before,
+.plan-diagram-frame .diagram-arrow[data-arrow]::after {
+  position: absolute;
+  display: block;
+  content: "";
+  pointer-events: none;
+}
+
+.plan-diagram-frame
+  :is(
+    .diagram-arrow[data-arrow="right"],
+    .diagram-arrow[data-arrow="left"]
+  )::before {
+  top: calc(50% - 0.75px);
+  left: 3px;
+  width: 22px;
+  height: 1.5px;
+  background: currentColor;
+}
+
+.plan-diagram-frame
+  :is(
+    .diagram-arrow[data-arrow="up"],
+    .diagram-arrow[data-arrow="down"]
+  )::before {
+  top: 2px;
+  left: calc(50% - 0.75px);
+  width: 1.5px;
+  height: 20px;
+  background: currentColor;
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="right"]::after,
+.plan-diagram-frame .diagram-arrow[data-arrow="left"]::after,
+.plan-diagram-frame .diagram-arrow[data-arrow="up"]::after,
+.plan-diagram-frame .diagram-arrow[data-arrow="down"]::after {
+  width: 7px;
+  height: 7px;
+  border-top: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="right"]::after {
+  top: calc(50% - 4px);
+  right: 2px;
+  transform: rotate(45deg);
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="left"]::after {
+  top: calc(50% - 4px);
+  left: 2px;
+  transform: rotate(225deg);
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="up"]::after {
+  top: 0;
+  left: calc(50% - 4px);
+  transform: rotate(-45deg);
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="down"]::after {
+  bottom: 0;
+  left: calc(50% - 4px);
+  transform: rotate(135deg);
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="both"]::before {
+  top: calc(50% - 0.75px);
+  left: 3px;
+  width: 22px;
+  height: 1.5px;
+  background: currentColor;
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="both"]::after {
+  inset: 3px;
+  background: currentColor;
+  clip-path: polygon(
+    0 50%,
+    22% 0,
+    22% 38%,
+    78% 38%,
+    78% 0,
+    100% 50%,
+    78% 100%,
+    78% 62%,
+    22% 62%,
+    22% 100%
+  );
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="refresh"]::before {
+  top: 3px;
+  left: 5px;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid currentColor;
+  border-left-color: transparent;
+  border-radius: 50%;
+}
+
+.plan-diagram-frame .diagram-arrow[data-arrow="refresh"]::after {
+  top: 1px;
+  right: 2px;
+  width: 0;
+  height: 0;
+  border-right: 4px solid transparent;
+  border-bottom: 7px solid currentColor;
+  border-left: 4px solid transparent;
+  transform: rotate(35deg);
+}
+
+.plan-diagram-frame[data-style="sketchy"][data-rough-ready]
+  .diagram-arrow[data-arrow]::before,
+.plan-diagram-frame[data-style="sketchy"][data-rough-ready]
+  .diagram-arrow[data-arrow]::after {
+  opacity: 0;
+}
+
+.plan-diagram-frame[data-frame="show"] .plan-diagram-frame-content {
+  padding: 0;
+}
+
+.plan-diagram-frame-content
+  > .diagram-panel:not([data-rough]):not([data-diagram-frame]) {
+  --rough-skip: 1;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.plan-diagram-frame svg {
+  display: block;
+  max-width: 100%;
+}
+
+.plan-diagram-frame :is(h1, h2, h3, p, small, strong) {
+  margin: 0;
+}
+
+.plan-diagram-frame :is(h1, h2, h3, strong) {
+  color: var(--wf-ink);
+}
+
+.plan-diagram-frame h1 {
+  font-size: 20px;
+  line-height: 1.15;
+}
+
+.plan-diagram-frame h2 {
+  font-size: 16px;
+  line-height: 1.2;
+}
+
+.plan-diagram-frame h3 {
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.plan-diagram-frame :is(p, small, .diagram-muted) {
+  color: var(--wf-muted);
+}
+
+.plan-diagram-frame
+  :is(.diagram-panel, .diagram-card, .diagram-node, .diagram-box) {
+  --rough-stroke: var(--wf-diagram-line);
+  border: 1.25px solid var(--wf-diagram-line);
+  border-radius: var(--wf-radius);
+  background: var(--wf-card);
+}
+
+.plan-diagram-frame
+  :is(
+    .diagram-panel,
+    .diagram-card,
+    .diagram-node,
+    .diagram-box,
+    [class*="card"],
+    [class*="panel"],
+    [class*="box"]
+  ) {
+  --rough-stroke: var(--wf-diagram-line);
+  border-color: var(--wf-diagram-line) !important;
+  background: var(--wf-card) !important;
+  color: var(--wf-ink) !important;
+}
+
+.plan-diagram-frame
+  :is(
+    .diagram-panel,
+    .diagram-card,
+    .diagram-node,
+    .diagram-box,
+    [class*="card"],
+    [class*="panel"],
+    [class*="box"]
+  ) {
+  max-width: 100%;
+  overflow-wrap: anywhere !important;
+  word-break: break-word;
+  white-space: normal !important;
+}
+
+.plan-diagram-frame
+  :is(
+    .diagram-panel,
+    .diagram-card,
+    .diagram-node,
+    .diagram-box,
+    [class*="card"],
+    [class*="panel"],
+    [class*="box"]
+  )
+  :is(h1, h2, h3, p, small, strong, span, li) {
+  max-width: 100%;
+  overflow-wrap: anywhere !important;
+  word-break: break-word;
+  white-space: normal !important;
+}
+
+.plan-diagram-frame :is(.diagram-node, .diagram-box, [class*="box"]) {
+  padding: 8px 12px;
+}
+.plan-diagram-frame
+  :is(.diagram-card, .diagram-panel, [class*="card"], [class*="panel"]) {
+  padding: 14px 16px;
+}
+
+.plan-diagram-frame :is(.diagram-node, .diagram-box, .diagram-card) small {
+  display: block;
+  max-width: 100%;
+}
+
+.plan-diagram-frame :is(.diagram-muted, [class*="muted"], small) {
+  color: var(--wf-muted) !important;
+}
+
+.plan-diagram-frame
+  :is(.diagram-pill, [class*="pill"], [class*="badge"], [class*="chip"]) {
+  --rough-stroke: var(--wf-diagram-line);
+  border-color: var(--wf-diagram-line) !important;
+  background: var(--wf-paper) !important;
+  color: var(--wf-ink) !important;
+}
+
+.plan-diagram-frame :is(.diagram-accent, [class*="accent"], [class*="active"]) {
+  border-color: var(--wf-accent) !important;
+  color: var(--wf-accent) !important;
+  background: var(--wf-accent-soft) !important;
+}
+
+.plan-diagram-frame :is(svg, line, path, polyline, polygon, rect, circle) {
+  stroke: var(--wf-line) !important;
+}
+
+.plan-diagram-frame
+  :is(rect, circle, ellipse, polygon)[fill]:not([fill="none"]) {
+  fill: var(--wf-card) !important;
+}
+
+.plan-diagram-frame svg text {
+  fill: var(--wf-ink) !important;
+}
+
+.plan-diagram-frame[data-style="sketchy"]
+  :is(.diagram-node, .diagram-box, .diagram-card) {
+  line-height: 1.16;
+}
+
+.plan-diagram-frame[data-style="sketchy"] :is(.diagram-node, .diagram-box) {
+  padding-inline: 12px;
+}
+
+.plan-diagram-frame
+  :is(.diagram-pill, [class*="pill"], [class*="badge"], [class*="chip"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: fit-content;
+  max-width: 100%;
+  border: 1px solid var(--wf-diagram-line);
+  border-radius: 999px;
+  padding: 3px 11px;
+  color: var(--wf-ink);
+  background: var(--wf-paper);
+  overflow-wrap: anywhere !important;
+  text-align: center;
+  white-space: normal !important;
+  word-break: break-word;
+}
+
+.plan-diagram-frame
+  :is(.diagram-pill, [class*="pill"], [class*="badge"], [class*="chip"])
+  > * {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere !important;
+  white-space: normal !important;
+}
+
+.plan-diagram-frame :is(.diagram-accent, .diagram-pill.accent) {
+  --rough-stroke: var(--wf-accent);
+  border-color: var(--wf-accent) !important;
+  color: var(--wf-accent) !important;
+  background: var(--wf-accent-soft) !important;
+}
+
+.plan-diagram-frame :is(.diagram-ok, .diagram-pill.ok) {
+  --rough-stroke: var(--wf-ok);
+  border-color: var(--wf-ok) !important;
+  color: var(--wf-ok) !important;
+  background: color-mix(in srgb, var(--wf-ok) 10%, transparent) !important;
+}
+
+.plan-diagram-frame :is(.diagram-warn, .diagram-pill.warn) {
+  --rough-stroke: var(--wf-warn);
+  border-color: var(--wf-warn) !important;
+  color: var(--wf-warn) !important;
+  background: color-mix(in srgb, var(--wf-warn) 10%, transparent) !important;
+}
+
+.plan-diagram-frame[data-rough-ready]
+  :is(
+    .diagram-panel,
+    .diagram-card,
+    .diagram-node,
+    .diagram-box,
+    .diagram-pill,
+    [class*="card"],
+    [class*="box"],
+    [class*="panel"],
+    [class*="pill"],
+    [data-rough],
+    hr
+  ) {
+  border-color: color-mix(
+    in srgb,
+    var(--wf-diagram-line) 54%,
+    transparent
+  ) !important;
+}
+
+.plan-diagram-frame[data-rough-ready]
+  .plan-diagram-frame-content
+  > .diagram-panel:not([data-rough]):not([data-diagram-frame]) {
+  border-color: transparent !important;
+}
+
+/*
+ * Plan wireframe design tokens.
+ *
+ * The MODEL emits a lean kit tree (no geometry, no CSS). This stylesheet owns
+ * ALL visual quality for the wireframe primitives: ink/paper/accent palette,
+ * density-driven spacing/type, and the hand-drawn fonts. Every kit component in
+ * ./* reads these CSS vars, so density / accent / theme are switchable by
+ * toggling a single attribute on a `.plan-wf` scope — never by changing nodes.
+ *
+ * Scope: `.plan-wf` (set on the Screen wrapper). Tokens are scoped, not global,
+ * so wireframes can sit alongside the normal app chrome without leaking fonts
+ * or colors.
+ */
+
+/* Hand-drawn fonts. Excalifont is served by the app; no remote font dependency. */
+
+.plan-wf {
+  --ink: var(--plan-text, hsl(var(--foreground)));
+  --ink-soft: var(--plan-muted, hsl(var(--muted-foreground)));
+  --line: var(--plan-line, hsl(var(--border)));
+  --wf-sketch: var(--plan-muted-line, hsl(var(--border)));
+  --paper: var(--plan-document, hsl(var(--background)));
+  --card: var(--plan-block, hsl(var(--card)));
+  --accent: hsl(var(--ring));
+  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
+  --warn: hsl(var(--destructive));
+  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
+  --ok: var(--accent);
+  --ok-soft: color-mix(in srgb, var(--ok) 15%, transparent);
+
+  --plan-wf-page-bg: var(--plan-canvas, hsl(var(--background)));
+
+  --font-hand:
+    "Excalifont", "Comic Sans MS", "Bradley Hand", "Marker Felt", cursive;
+  --font-script:
+    "Excalifont", "Comic Sans MS", "Bradley Hand", "Marker Felt", cursive;
+  --font-clean:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
+
+  --gap: 11px;
+  --pad: 12px;
+  --fs: 14px;
+  --radius: 7px;
+  --stroke: 1.4px;
+
+  --wobble: none;
+}
+
+.plan-wf[data-density="compact"] {
+  --gap: 7px;
+  --pad: 9px;
+  --fs: 13px;
+  --radius: 6px;
+  --stroke: 1.3px;
+}
+
+.plan-wf[data-density="regular"] {
+  --gap: 11px;
+  --pad: 12px;
+  --fs: 14px;
+  --radius: 7px;
+  --stroke: 1.4px;
+}
+
+.plan-wf[data-density="roomy"] {
+  --gap: 15px;
+  --pad: 17px;
+  --fs: 15px;
+  --radius: 9px;
+  --stroke: 1.6px;
+}
+
+.plan-wf[data-style="clean"] {
+  --font-hand: var(--font-clean);
+  --font-script: var(--font-clean);
+}
+
+.plan-wf[data-rough-ready] [data-rough] {
+  border-color: transparent !important;
+}
+
+.plan-wf[data-skeleton="true"] {
+  --ink: var(--skeleton-fill);
+  --ink-soft: var(--skeleton-fill);
+  --line: var(--skeleton-fill);
+  --card: var(--skeleton-block);
+  --accent: var(--skeleton-fill);
+  --accent-soft: var(--skeleton-block);
+  --warn: var(--skeleton-fill);
+  --warn-soft: var(--skeleton-block);
+  --ok: var(--skeleton-fill);
+  --ok-soft: var(--skeleton-block);
+  --stroke: 0px;
+  --skeleton-fill: var(--plan-muted-line, hsl(var(--border)));
+  --skeleton-block: var(--plan-block, hsl(var(--card)));
+}
+.plan-wf[data-skeleton="true"] * {
+  color: transparent !important;
+  border-color: transparent !important;
+}
+.plan-wf[data-skeleton="true"] {
+  --radius: 7px;
+}