/**
 * 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%;

  /* Standardized small code-body size for every monospace code surface in the
     core block library (diffs, annotated-code, JSON explorer, Mermaid source,
     etc.). The block components reference this via `[font-size:var(--plan-code-size)]`;
     without a definition the declaration is invalid and code falls back to the
     large prose size. The plan template overrides this var in its own
     `global.css`; this is the cross-app default. */
  --plan-code-size: 0.7rem;

  /* AUTHORITATIVE code-body size for DENSE in-document code surfaces (diff rows,
     annotated-code lines, API JSON examples, code-tabs, the `code` primitive
     read surface). The catch-all below forces every such surface to this size
     with `!important`, so dense document code is sized from ONE place no matter
     which component renders it or what inline/utility/template size it would
     otherwise pick up.

     This is deliberately DECOUPLED from `--plan-code-size`: the plan template
     raises `--plan-code-size` to 1rem for its free-standing prose-scale code,
     which made dense surfaces (annotated diffs, API JSON) read far too large —
     the user's recurring complaint. By pinning dense code to its own small,
     comfortable size here, those surfaces stay compact and scannable in every
     app while a free-standing snippet can still follow `--plan-code-size`.
     Resize ALL dense document code at once by overriding this var. */
  --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;
}

/* COMPREHENSIVE NET — the final backstop so "code is too big" can't reappear in
   a NEW place. Every code/data/JSON component opts into monospace via the
   `.font-mono` utility (12+ block components, incl. the JSON-explorer tree which
   renders as div/span — NOT pre/code — and so escaped every earlier rule). Force
   the dense doc-code size on any `.font-mono` inside plan content, and on the
   code-block component hooks wherever they render. Annotation marker pips are NOT
   font-mono, so they keep their tiny size; inline prose `code` is styled by the
   prose plugin (no `.font-mono` class), so body copy is unaffected. */
: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;
}

/* Small, muted eyebrow label above a block (block title). */
.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;
}

/* Callout: a self-contained tinted box with an inline-start accent bar and a tone. */
.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;
}

/* The body editor/reader may carry a leading margin; the box padding owns the
   top rhythm, so drop it (a label, when present, keeps its own margin-bottom). */
.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));
}

/* ════════════════════════════════════════════════════════════════════════
   Migrated plan block contract.

   The core block library (`client/blocks/library/*`) still emits the legacy
   `.plan-*` class names and the `text/bg/border-plan-*` color utilities. Those
   were originally defined ONLY in `templates/plan/app/global.css`, so the
   blocks rendered UNSTYLED in any other app (e.g. content). The structural
   geometry below is migrated verbatim from plan; the only change is that COLOR
   values now resolve against shadcn theme tokens (`--foreground`,
   `--muted-foreground`, `--border`, `--muted`) instead of plan's `--plan-*`
   surface vars — so each app renders the blocks in its own palette.

   PLAN STAYS PIXEL-IDENTICAL. This file loads (via `agent-native.css`) BEFORE a
   template's `global.css`, so plan's later-declared copies still win:
     • Color utilities live in `@layer utilities` (matching plan); within the
       layer, plan's later copy wins → plan unchanged, content gets these.
     • Structural classes are un-layered (matching plan); source order makes
       plan's later copy win.
   Plan's document-layout / canvas / wireframe / chrome rules are NOT migrated —
   they stay plan-only.

   Token mapping:
     --plan-text       → --foreground
     --plan-muted      → --muted-foreground
     --plan-line       → --border
     --plan-block      → --muted
     --plan-code       → --muted
     --plan-code-text  → --foreground
   ════════════════════════════════════════════════════════════════════════ */

/* ── Color utilities (layered so plan's later copy wins) ─────────────────── */
@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));
  }
}

/* ── Block label + per-column header (structural) ────────────────────────── */

/* Small, muted eyebrow label above a block (block title). */
.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;
}

/* Per-column header for `columns` comparison blocks (e.g. Before / After). */
.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;
}

/* Nested block spacing (a block inside another block). */
.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;
}

/* Canonical document body / lede text size. */
.plan-doc-body {
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* ── Notion-like rich-text block prose ───────────────────────────────────── */
.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;
}

/* Annotated-code side notes: compact prose so a note matches its small card. */
.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));
}

/* Inline code only — never the block code inside <pre>. */
.plan-rich-markdown-editor .an-rich-md-prose :not(pre) > code {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  direction: ltr;
  unicode-bidi: isolate;
}

/* Block code surface fallback for any stray bare <pre>. */
.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));
}

/* ── Code block — shared read/edit surface (structural) ──────────────────── */

/* Read-only surface (Shiki-highlighted, collapses past `--plan-code-max-lines`). */
.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;
}

/* Collapsed: clamp to N lines (+ the pre's top padding) and hide the rest. */
.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);
}

/* `code` primitive block: read wraps the surface with a borderless filename
   header + hover chrome; edit is a single-bordered auto-growing surface. */
.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));
}

/* Editable surface: ONE border, auto-grows to content (no drag-to-resize). */
.plan-code-editing {
  overflow: visible;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  /* Sit on the page background like the diff block — no distinct surface fill. */
  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;
}

/* Read view of the `code` block reuses the shared CodeSurface — flatten it for
   the `code` primitive only so the snippet sits on the page (no gray box). */
.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));
  /* This is a <pre>; a base `pre {}` style would leak in a bg + border + larger
     font-size. Override so it's flat and lines up exactly with the textarea. */
  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));
}

/* Collapsed long snippet: fade the clipped bottom into the page background. */
.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;
}

/* ── Editor node view (Tiptap): language picker header + highlighted <pre> ─── */
.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));
}

/* The node-view wrapper owns the surface (border + bg), so the inner <pre> is
   transparent. Scoped via `.an-rich-md-prose` so it applies in every editor. */
.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;
}

/* Language picker popover (rendered in a portal by the shared Popover). */
.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));
}

/* ════════════════════════════════════════════════════════════════════════
   Wireframe kit + inline diagram + HTML-artboard styling.

   Copied verbatim from the plan template's wireframe CSS
   (wireframe/html-artboard.css + wireframe/kit/plan-wireframe-tokens.css).
   These already reference plan palette vars with shadcn theme-token
   FALLBACKS — e.g. var(--plan-text, hsl(var(--foreground))) — so in plan
   they resolve to plan's palette (unchanged) and in any other app they
   resolve to that app's theme tokens. Loaded globally here so the shared
   wireframe + diagram blocks render in any app, not just plan.
   ════════════════════════════════════════════════════════════════════════ */

/* Question form / visual questions: respondent-facing intake block. */
.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)));
  /* Hand-drawn sketch stroke. Separate from --wf-ink (text) so the rough.js
     overlay can run a touch softer than the body text — most important in dark
     mode, where near-white text ink as a stroke makes harsh, eye-straining
     borders. In light mode it matches the ink. */
  /* Sketch stroke = a soft gray a step more pronounced than the hairline
     --wf-line, so rough (broken) strokes still read clearly. Gentle, not hard
     ink; text stays the dark --wf-ink above. */
  --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` (not a fixed `height: 100%`) so an HTML mockup fills the
     auto-height artboard's floor yet grows with its content instead of clipping.
     The frame shell (ArtboardFrame) owns the height policy; the prototype-live
     scroll mode below pins to 100% for an internally-scrolling canvas. */
  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;
}

/* Bare semantic elements get the wireframe look from tokens. */
.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);
  /* Opaque paper fill (not transparent) so a floating / overlapping button —
     a FAB, a sticky toolbar action like "+ Add habit" — never shows the
     content behind it through its body. */
  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);
}

/* Once rough has drawn, hide crisp borders on the standard wireframe primitives
   that rough.js redraws. Fills and text stay in CSS; only outlines switch to
   the hand-drawn overlay. */
.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;
}

/* Skeleton register: neutral textless geometry. */
.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;
}

/*
 * Inline architecture/code diagrams.
 *
 * These are document-local HTML/SVG fragments, not top-canvas wireframes. They
 * share the wireframe sketch preference so the same viewer toggle can switch
 * authored diagrams between crisp and hand-drawn presentation.
 */

.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[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;
}

/* Base padding so primitive text never touches the box edge, even when an author
 * diagram omits its own padding. The wildcard selectors mirror the theme-color
 * rules above so every box/card/panel variant authors use is covered. Author CSS
 * (higher specificity, scoped to the diagram instance) still overrides this when
 * it sets padding explicitly. */
.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;
  /* A pill hugs its label. `fit-content` is a definite cross size, so a flex
   * column with the default `align-items: stretch` no longer blows the pill out
   * to full width (the number chips and short status labels stay pill-shaped).
   * The wildcard selectors match the theme-color rules so every pill/badge/chip
   * variant used across the docs diagrams stays pill-shaped, not a full bar. */
  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 {
  /* ---- Theme palette ----------------------------------------------------- */
  --ink: var(--plan-text, hsl(var(--foreground)));
  --ink-soft: var(--plan-muted, hsl(var(--muted-foreground)));
  --line: var(--plan-line, hsl(var(--border)));
  /* Sketch stroke = a soft gray a step more pronounced than --line so rough
     strokes read clearly; matches the HTML artboard. Text stays the dark --ink. */
  --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);

  /* Page backdrop behind artboards (board surface, not the screen paper). */
  --plan-wf-page-bg: var(--plan-canvas, hsl(var(--background)));

  /* ---- Fonts ------------------------------------------------------------- */
  --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;

  /* ---- Density (regular default) ----------------------------------------- */
  /* Density is selected via [data-density]; individual tokens below. */
  --gap: 11px;
  --pad: 12px;
  --fs: 14px;
  --radius: 7px;
  --stroke: 1.4px;

  /* ---- Sketch wobble ----------------------------------------------------- */
  /* Default crisp (low sketch). setSketch() helper overrides these inline. */
  --wobble: none;
}

/* Density variants. Match the reference DENSITY map exactly. */
.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;
}

/* ---- Clean style: drop the hand-drawn font for a normal sans ------------- */
/* In clean mode the rough overlay is off and frames get crisp CSS borders, so
   the handwriting font reads as out of place — switch to the sans stack. */
.plan-wf[data-style="clean"] {
  --font-hand: var(--font-clean);
  --font-script: var(--font-clean);
}

/* ---- Rough sketch layer -------------------------------------------------- */
/* The hand-drawn outlines are drawn by the rough.js overlay (kit/rough.tsx).
   Once it has measured + drawn, hide the crisp CSS borders so there is never a
   doubled border — fills and text stay, only the outline is replaced. */
.plan-wf[data-rough-ready] [data-rough] {
  border-color: transparent !important;
}

/* ---- Skeleton / neutral loading register --------------------------------- */
/* One block flips the WHOLE kit to a textless skeleton: no ink, no rough, no
   color — every primitive already reads these vars, so nothing else changes.
   A skeleton is boxes + bars only; real labels collapse to transparent so the
   silhouette is preserved without readable copy. */
.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)));
}
/* Textless: hide real labels but keep their layout footprint. */
.plan-wf[data-skeleton="true"] * {
  color: transparent !important;
  border-color: transparent !important;
}
/* Soft rounded placeholder bars in skeleton mode. */
.plan-wf[data-skeleton="true"] {
  --radius: 7px;
}

@media (prefers-reduced-motion: no-preference) {
  .plan-wf[data-skeleton="true"] {
    animation: plan-skeleton-pulse 1.6s ease-in-out infinite;
  }
}
@keyframes plan-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}