/* Self-hosted via @fontsource-variable/inter and @fontsource-variable/vazirmatn
 * — no render-blocking Google Fonts request. Vazirmatn is an open-source (OFL)
 * Persian/Arabic face, scoped to RTL plan content below via
 * `[data-plan-direction="rtl"]`. */
@import "@fontsource-variable/inter";
@import "@fontsource-variable/vazirmatn";

@import "tailwindcss";
@import "@agent-native/core/styles/agent-native.css";
@import "@agent-native/toolkit/styles.css";

@font-face {
  font-family: "Excalifont";
  src: url("/fonts/Excalifont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@source "./**/*.{ts,tsx}";

.plan-chat-composer-area [data-agent-composer-slot="root"],
.plan-chat-composer-area [data-agent-composer-slot="root"]:focus-within {
  box-shadow: none;
}

.plan-chat-composer-area [data-agent-composer-slot="root"]:focus-within {
  outline: 1px solid hsl(var(--ring) / 0.35);
}

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 15%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
  --radius: 0.5rem;
  /* Callout tone accents — info/decision/risk/warning/success. */
  --plan-tone-info: 218 85% 57%;
  --plan-tone-decision: 262 83% 58%;
  --plan-tone-risk: 0 84% 60%;
  --plan-tone-warning: 25 95% 48%;
  --plan-tone-success: 142 71% 38%;
  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 45%;
  --sidebar-primary: 0 0% 15%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 15%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 40%;
  /* ── Plan document font sizes — edit here to resize globally ──────────────
     --plan-code-size  : general monospace code surfaces and editors
     --plan-doc-code-size: dense read-only code surfaces such as diffs,
                         annotated-code, API examples, JSON explorer, etc.
     --plan-body-size  : prose body text across all plan document blocks       */
  --plan-code-size: 0.7rem;
  --plan-doc-code-size: 0.7rem;
  --plan-body-size: 1rem;
}

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 90%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 90%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 90%;
  --primary: 0 0% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 60%;
  --radius: 0.5rem;
  /* Callout tone accents — brighter so they read on the dark surface. */
  --plan-tone-info: 218 85% 67%;
  --plan-tone-decision: 263 88% 74%;
  --plan-tone-risk: 0 84% 67%;
  --plan-tone-warning: 28 96% 60%;
  --plan-tone-success: 142 60% 52%;
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-primary: 0 0% 75%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 60%;
}

@layer base {
  html:not([data-embed="1"]),
  html:not([data-embed="1"]) body {
    height: 100%;
    overflow: hidden;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Inter Variable", "Inter", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

@supports (height: 100dvh) {
  html:not([data-embed="1"]) .agent-layout-shell {
    height: 100dvh;
  }
}

/* RTL plan content (Persian/Arabic) renders in Vazirmatn; LTR content keeps
 * Inter. Scoped to the document shell's `data-plan-direction="rtl"` attribute
 * (set by PlanContentRenderer) so only RTL plans pick it up. Code surfaces and
 * `font-mono` utilities declare their own monospace stack ("JetBrains Mono", …),
 * which is a direct font-family on the element and so always beats this inherited
 * face — code never renders in Vazirmatn (code-like blocks are also pinned to
 * dir="ltr"). */
[data-plan-direction="rtl"] {
  font-family:
    "Vazirmatn Variable", "Vazirmatn", "Inter Variable", "Inter", sans-serif;
}

@layer utilities {
  .plan-content-surface {
    --plan-document: hsl(var(--background));
    --plan-canvas: color-mix(in srgb, var(--plan-document) 72%, black);
    --plan-block: hsl(var(--secondary));
    --plan-chrome: hsl(var(--background) / 0.92);
    --plan-line: hsl(var(--border));
    --plan-grid-line: hsl(var(--foreground) / 0.018);
    --plan-text: hsl(var(--foreground));
    --plan-muted: hsl(var(--muted-foreground));
    --plan-wireframe: hsl(0 0% 6%);
    --plan-sketch-line: hsl(var(--foreground) / 0.86);
    --plan-muted-line: hsl(var(--border));
    --plan-placeholder-line: hsl(var(--muted-foreground) / 0.42);
    --plan-code: hsl(var(--muted));
    --plan-code-text: hsl(var(--foreground));
  }

  .plan-content-surface[data-recap-screenshot-theme="light"] {
    --plan-document: #ffffff;
    --plan-canvas: #ffffff;
  }

  .plan-content-surface[data-recap-screenshot-theme="dark"] {
    --plan-document: #0d1117;
    --plan-canvas: #0d1117;
  }

  .plan-content-surface[data-recap-screenshot-theme] .plan-document-shell {
    padding: 0;
  }

  .plan-content-surface[data-recap-screenshot-theme] .plan-document-body {
    margin-inline: 0;
    padding-inline: 0;
  }

  .bg-plan-document {
    background-color: var(--plan-document);
  }

  .bg-plan-canvas {
    background-color: var(--plan-canvas);
  }

  .bg-plan-block {
    background-color: var(--plan-block);
  }

  .bg-plan-chrome {
    background-color: var(--plan-chrome);
  }

  .bg-plan-code {
    background-color: var(--plan-code);
  }

  .bg-plan-wireframe {
    background-color: var(--plan-wireframe);
  }

  .bg-plan-muted-line {
    background-color: var(--plan-muted-line);
  }

  .text-plan-text {
    color: var(--plan-text);
  }

  .text-plan-muted {
    color: var(--plan-muted);
  }

  .text-plan-code-text {
    color: var(--plan-code-text);
  }

  .text-plan-canvas-text {
    color: var(--plan-text);
  }

  .text-plan-sketch-line {
    color: var(--plan-sketch-line);
  }

  .border-plan-line {
    border-color: var(--plan-line);
  }

  .border-plan-sketch-line {
    border-color: var(--plan-sketch-line);
  }

  .fill-plan-wireframe {
    fill: var(--plan-wireframe);
  }

  .fill-plan-sketch-line {
    fill: var(--plan-sketch-line);
  }

  .stroke-plan-sketch-line {
    stroke: var(--plan-sketch-line);
  }
}

.plan-canvas {
  background-color: var(--plan-canvas);
  touch-action: none;
}

.plan-canvas-viewport {
  background-color: var(--plan-canvas);
  isolation: isolate;
}

.plan-canvas-grid {
  pointer-events: none;
  background-image:
    linear-gradient(var(--plan-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-grid-line) 1px, transparent 1px);
}

.plan-canvas-world {
  isolation: isolate;
  transform-style: flat;
}

/* Fixed-size static artboard frame. No border / shadow / box around the
 * frame itself (canon: no boxes around frames) — the wireframe inside draws
 * its own window chrome. */
.plan-artboard-frame {
  position: relative;
  width: 100%;
}

.plan-artboard-empty {
  border: 1.5px dashed var(--plan-muted-line);
  border-radius: 16px;
}

/* Designer annotation text on the canvas: plain layers, no card chrome. */
.plan-canvas-annotation {
  font-family: var(--doc-font, inherit);
}

/* Top-level blocks are separated by WHITESPACE, not divider lines — a clean
 * vertical rhythm reads far better than fencing every block off with a
 * full-width rule (and avoids a line ever landing between a section's
 * heading/description and its body). The generous top margin is the only
 * separator; no border, no extra divider padding. The one structural divider
 * the document keeps is the header's bottom border (the title block). */
.plan-document-flow > .plan-block,
.plan-document-flow > .plan-callout,
.plan-document-flow > .plan-questions-block,
.plan-document-flow > .an-block-panel,
.plan-document-flow > .plan-block-node,
.plan-document-flow > .plan-document-flow-block {
  margin-top: 1.25rem;
}

.plan-document-flow > .plan-document-flow-block > .plan-block,
.plan-document-flow > .plan-document-flow-block > .plan-callout,
.plan-document-flow > .plan-document-flow-block > .plan-questions-block,
.plan-document-flow > .plan-document-flow-block > .an-block-panel,
.plan-document-flow > .plan-document-flow-block > .plan-block-node {
  margin-top: 0;
}

/* The header already owns a bottom divider + spacing; the first block sits a
 * touch closer to it (no need for the full inter-block gap). */
.plan-document-flow > :first-child {
  margin-top: 1rem;
}

.plan-document-flow--wide-zone > :first-child {
  margin-top: 1.75rem;
}

.plan-document-flow .plan-questions-block > .sticky {
  border-top-color: var(--plan-line);
  background-color: var(--plan-document);
}

/* A RUN of consecutive `api-endpoint` blocks reads as ONE tight, scannable list
 * (Swagger / Stripe house style) — not a stack of full-width cards each set off
 * by the generic inter-block gap. When an api-endpoint block directly follows
 * another (read-mode `.plan-block` or editable-mode `.plan-block-node`, both
 * tagged `data-block-type="api-endpoint"`), drop the inter-block margin so the
 * rows abut. The first endpoint of a run keeps the normal gap above it (it still
 * matches the generic rule), and a non-endpoint block after the run keeps normal
 * spacing too — only endpoint-after-endpoint collapses. (`padding-top` /
 * `border-top` are zeroed defensively; the generic rule no longer sets them.) */
.plan-document-flow
  > [data-block-type="api-endpoint"]
  + [data-block-type="api-endpoint"] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Flush card chrome: merge each endpoint's card with the one above it so a run
 * shares a single outline instead of stacking doubled borders + rounded corners.
 * Square the inner joins, pull each follower up 1px to overlap the shared edge,
 * and round only the run's outer corners (first card's top, last card's bottom).
 * `:has()` is supported in every browser the recap renders in. */
.plan-document-flow
  > [data-block-type="api-endpoint"]
  + [data-block-type="api-endpoint"]
  .an-api-endpoint-card {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.plan-document-flow
  > [data-block-type="api-endpoint"]:has(+ [data-block-type="api-endpoint"])
  .an-api-endpoint-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.plan-document-flow .an-rich-md-prose > h1,
.plan-document-flow .an-rich-md-prose > h2,
.plan-document-flow .an-rich-md-prose > h3,
.plan-document-flow [data-block-id] {
  scroll-margin-top: 2rem;
}

/* Container so the rails respond to the document's available width, not the
 * viewport. Wraps only the doc shell (not canvas) to avoid containing fixed UI. */
.plan-document-region {
  container: plan-doc / inline-size;
}

@container plan-doc (min-width: 44rem) {
  .plan-code-tabs-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .plan-code-tabs-nav {
    border-inline-end-width: 1px;
  }

  .plan-vertical-tabs-layout {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: start;
  }

  .plan-vertical-tabs-list {
    max-height: 62vh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0;
    padding-inline-end: 0.5rem;
  }
}

@container plan-doc (min-width: 56rem) {
  .plan-implementation-map-layout {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .plan-implementation-map-nav {
    border-inline-end-width: 1px;
  }
}

/* Header + flow + contents rail. Wide: a balanced 3-col grid via the container
 * queries below; narrow: a single column. */
.plan-document-body {
  position: relative;
  --toc-rail-width: 11rem;
  --doc-col-width: 60rem;
  --rail-gap: 2rem;
}

@container plan-doc (min-width: 64rem) {
  .plan-content-surface[data-plan-layout="wide"] .plan-document-shell {
    --plan-wide-component-width: min(1560px, calc(100cqw - 5rem));
  }

  .plan-content-surface[data-plan-layout="wide"] .plan-document-flow-stack {
    min-width: 0;
  }

  .plan-content-surface[data-plan-layout="wide"]
    .plan-document-flow-block--wide,
  .plan-content-surface[data-plan-layout="wide"]
    .plan-document-editor
    .ProseMirror:not(.plan-nested-document-editor-prose)
    > .react-renderer.node-planBlock:has(
      > .plan-block-node[data-block-type="diff"]
    ),
  .plan-content-surface[data-plan-layout="wide"]
    .plan-document-editor
    .ProseMirror:not(.plan-nested-document-editor-prose)
    > .react-renderer.node-planBlock:has(
      > .plan-block-node[data-block-type="annotated-code"]
    ),
  .plan-content-surface[data-plan-layout="wide"]
    .plan-document-editor
    .ProseMirror:not(.plan-nested-document-editor-prose)
    > .react-renderer.node-planBlock:has(
      > .plan-block-node[data-block-type="tabs"] [data-wide-layout-block]
    ) {
    position: relative;
    z-index: 4;
    width: var(--plan-wide-component-width);
    max-width: var(--plan-wide-component-width);
    margin-inline: calc((100% - var(--plan-wide-component-width)) / 2);
    background-color: var(--plan-document);
    box-shadow:
      -1.5rem 0 1.5rem var(--plan-document),
      1.5rem 0 1.5rem var(--plan-document);
  }

  .plan-content-surface[data-plan-layout="wide"]
    .plan-block-node[data-block-type="wireframe"]
    .plan-kit-wireframe,
  .plan-content-surface[data-plan-layout="wide"]
    .plan-block-node[data-block-type="wireframe"]
    .plan-html-frame {
    margin-inline: auto;
  }
}

/* Contents rail. Hidden until a query below reveals it as the `toc` column. */
.plan-document-toc {
  display: none;
  position: sticky;
  top: 1.25rem;
  z-index: 2;
  align-self: start;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
}

.plan-document-toc__nav {
  position: static;
  padding: 0.25rem 0 1.5rem;
}

.plan-document-toc__heading {
  margin: 0 0 0.75rem;
  color: var(--plan-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.plan-document-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-document-toc__link {
  display: block;
  padding: 0.25rem 0;
  color: var(--plan-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 120ms ease;
}

.plan-document-toc__link:hover {
  color: var(--plan-text);
  text-decoration: none;
}

.plan-document-toc__link.is-active {
  color: var(--plan-text);
}

.plan-document-toc__link.is-nested {
  padding-inline-start: 0.75rem;
}

/* Hidden below the rail breakpoint: the document should use the full reading
 * width instead of replacing the rail with an inline contents widget. */
.plan-document-toc-inline {
  display: none;
  margin-top: 1.25rem;
  border: 1px solid var(--plan-line);
  border-radius: 0.75rem;
  background-color: var(--plan-document);
}

.plan-document-toc-inline__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  list-style: none;
  color: var(--plan-muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}
/* Hide native marker (Tabler chevron replaces it). */
.plan-document-toc-inline__summary::-webkit-details-marker {
  display: none;
}
.plan-document-toc-inline__summary::marker {
  content: "";
}

.plan-document-toc-inline__chevron {
  flex: none;
  transition: transform 0.15s ease;
}
.plan-document-toc-inline[open] .plan-document-toc-inline__chevron {
  transform: rotate(90deg);
}

.plan-document-toc-inline__label {
  flex: 1 1 auto;
}

.plan-document-toc-inline__count {
  flex: none;
  min-width: 1.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background-color: hsl(var(--accent) / 0.18);
  color: var(--plan-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
}

.plan-document-toc-inline__list {
  margin: 0;
  padding: 0.5rem 0.875rem 0.625rem 2rem;
  border-top: 1px solid var(--plan-line);
  list-style: none;
}

/* Hide the accordion in screenshot capture too. */
.plan-content-surface[data-recap-screenshot-theme] .plan-document-toc-inline {
  display: none;
}

/* Wide layout: the contents rail is a real grid column. A matching empty left
 * column balances the rail so the document itself remains visually centered. */

/* Shared cell placement. Inert until the parent is a grid. */
@container plan-doc (min-width: 1200px) {
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body
    > header {
    grid-area: header;
  }
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body
    > .plan-document-flow {
    grid-area: flow;
  }
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body
    > .plan-document-flow-stack {
    grid-area: flow;
  }
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body
    > .plan-document-toc {
    grid-area: toc;
  }
}

/* Document + contents rail. The empty first column balances the right rail. */
@container plan-doc (min-width: 1200px) {
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body[data-has-toc] {
    display: grid;
    grid-template-columns:
      minmax(0, var(--toc-rail-width))
      minmax(0, var(--doc-col-width))
      minmax(0, var(--toc-rail-width));
    grid-template-areas:
      ". header ."
      ". flow   toc";
    justify-content: center;
    column-gap: var(--rail-gap);
  }
  .plan-content-surface:not([data-recap-screenshot-theme])
    .plan-document-body[data-has-toc]
    > .plan-document-toc {
    display: block;
  }
  .plan-content-surface:not([data-recap-screenshot-theme]):has(
      .plan-document-body[data-has-toc]
    )
    .plan-document-shell {
    max-width: calc(
      var(--doc-col-width) + (var(--toc-rail-width) * 2) + (var(--rail-gap) * 2)
    );
  }
}

/* Small, muted block label (not a document heading). Block titles used to render
 * as large <h2> headings that read like the block's type name; they now render
 * as this restrained eyebrow label instead. */
.plan-block-label {
  margin: 0 0 1rem;
  color: var(--plan-muted);
  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).
 * Renders as a small heading ABOVE each column so a comparison names its states
 * outside the content — the state label lives here, never baked into a child
 * wireframe's mockup. Sits a touch more present than the eyebrow block label so
 * it reads clearly above a full wireframe frame. */
.plan-columns-label {
  margin: 0 0 0.6rem;
  color: var(--plan-text);
  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-copy {
  max-width: 60rem;
  color: var(--plan-muted);
  font-size: 1.125rem;
  line-height: 1.8;
}

.plan-copy h3,
.plan-copy blockquote {
  color: var(--plan-text);
}

/* Canonical document body / lede text size. The header summary and block detail
 * copy (implementation-map notes, code-tabs captions, decision prompts) all use
 * this so body text reads at ONE size across the document — matching the
 * rich-text and callout prose (`.an-rich-md-prose`, 1.0625rem). Block headings
 * and labels keep their own larger sizes; this is only for body/lede paragraphs. */
.plan-doc-body {
  font-size: var(--plan-body-size);
  line-height: 1.75;
}

/* ── Notion-like rich-text prose ─────────────────────────────────────── */
.plan-rich-markdown-editor {
  max-width: 60rem;
  color: var(--plan-text);
}

.plan-rich-markdown-editor .an-rich-md-prose {
  color: var(--plan-text);
  font-size: var(--plan-body-size);
  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: var(--plan-muted);
}

.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
   instead of the 1.0625rem document body. Mirrors the table-cell reset above. */
.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: var(--plan-text);
  font-weight: 640;
  letter-spacing: 0;
  line-height: 1.2;
}

.plan-rich-markdown-editor .an-rich-md-prose h1 {
  margin: 3rem 0 0.85rem;
  font-size: 1.75rem;
}

.plan-rich-markdown-editor .an-rich-md-prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.45rem;
}

.plan-rich-markdown-editor .an-rich-md-prose h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
}

.plan-rich-markdown-editor .an-rich-md-prose h4 {
  margin: 1.5rem 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: var(--plan-muted);
}

.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: var(--plan-muted-line);
}

.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: var(--plan-text);
}

.plan-rich-markdown-editor .an-rich-md-prose blockquote {
  margin: 1.1rem 0;
  border-inline-start-color: var(--plan-line);
  color: var(--plan-muted);
}

.plan-rich-markdown-editor .an-rich-md-prose hr {
  border-top-color: var(--plan-line);
}

/* Inline code only — never the block code inside <pre>, whose tokens would
   otherwise each get a stray inline-code background over the code surface. */
.plan-rich-markdown-editor .an-rich-md-prose :not(pre) > code {
  background: var(--plan-block);
  color: var(--plan-text);
  direction: ltr;
  unicode-bidi: isolate;
}

.plan-rich-markdown-editor .an-rich-md-prose :is(h1, h2, h3, h4) code {
  background: transparent;
}

/* Block code is rendered by the shared `.an-code-block` node view (editor) and
   `.plan-code-surface` (read view); both follow the plan's light/dark palette
   below. Any stray bare <pre> falls back to the same surface. */
.plan-rich-markdown-editor .an-rich-md-prose pre {
  border: 1px solid var(--plan-line);
  background: var(--plan-code);
  color: var(--plan-code-text);
}

.plan-rich-markdown-editor .an-rich-md-table th,
.plan-rich-markdown-editor .an-rich-md-table td {
  border-color: var(--plan-line);
}

.plan-rich-markdown-editor .an-rich-md-table th {
  background: var(--plan-block);
  color: var(--plan-text);
}

.plan-rich-markdown-editor .an-rich-md-table td {
  color: var(--plan-muted);
}

.plan-rich-markdown-editor .an-rich-md-task-list li input[type="checkbox"] {
  accent-color: hsl(var(--ring));
}

.plan-prose {
  max-width: 60rem;
  color: var(--plan-text);
  font-size: var(--plan-body-size);
  line-height: 1.75;
}

.plan-prose > :first-child {
  margin-top: 0;
}

.plan-prose > :last-child {
  margin-bottom: 0;
}

.plan-prose p {
  margin: 0.9rem 0;
  color: var(--plan-muted);
}

.plan-prose h1,
.plan-prose h2,
.plan-prose h3,
.plan-prose h4 {
  color: var(--plan-text);
  font-weight: 640;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.plan-prose h1 {
  margin: 2.2rem 0 0.85rem;
  font-size: 1.75rem;
}

.plan-prose h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.45rem;
}

.plan-prose h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1.2rem;
}

.plan-prose h4 {
  margin: 1.3rem 0 0.5rem;
  font-size: 1.05rem;
}

.plan-prose ul,
.plan-prose ol {
  margin: 0.85rem 0;
  padding-inline-start: 1.5rem;
  color: var(--plan-muted);
}

.plan-prose ul {
  list-style: disc;
}

.plan-prose ol {
  list-style: decimal;
}

.plan-prose li {
  margin: 0.35rem 0;
}

.plan-prose li > ul,
.plan-prose li > ol {
  margin: 0.35rem 0;
}

.plan-prose li::marker {
  color: var(--plan-muted-line);
}

.plan-prose a {
  color: hsl(var(--ring));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plan-prose strong {
  color: var(--plan-text);
  font-weight: 640;
}

.plan-prose blockquote {
  margin: 1.1rem 0;
  border-inline-start: 3px solid var(--plan-line);
  padding-inline-start: 1rem;
  color: var(--plan-muted);
}

.plan-prose hr {
  margin: 1.75rem 0;
  border: 0;
  border-top: 1px solid var(--plan-line);
}

/* Inline code — no highlighter-like full-width background. */
.plan-prose :not(pre) > code {
  border-radius: 5px;
  background: var(--plan-block);
  padding: 0.12em 0.38em;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  color: var(--plan-text);
  direction: ltr;
  unicode-bidi: isolate;
}

.plan-prose :is(h1, h2, h3, h4) code {
  background: transparent;
}

.plan-prose table {
  margin: 1.1rem 0;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.plan-prose th,
.plan-prose td {
  border: 1px solid var(--plan-line);
  padding: 0.5rem 0.75rem;
  text-align: start;
}

.plan-prose th {
  background: var(--plan-block);
  color: var(--plan-text);
  font-weight: 600;
}

.plan-prose td {
  color: var(--plan-muted);
}

/* ── Code block — shared light/dark surface ──────────────────────────────
   Two render paths share this palette: the read-only `.plan-code-surface`
   (code tabs, API specs, the markdown read view) and the editor's
   `.an-code-block` node view. Both follow the plan's `--plan-code` surface,
   use a compact JetBrains Mono size, and collapse long snippets instead of
   scrolling a fixed-height box. */

/* Read-only surface (Shiki-highlighted, collapses past `--plan-code-max-lines`). */
.plan-code-surface {
  max-width: 100%;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--plan-line);
  background: var(--plan-code);
}

.plan-code-surface-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid var(--plan-line);
}

.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: var(--plan-muted);
}

.plan-code-surface-scroll {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  font-size: var(--plan-code-size);
  line-height: 1.55;
}

/* 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, var(--plan-code) 92%);
}

.plan-code-surface-toggle {
  display: block;
  width: 100%;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid var(--plan-line);
  background: transparent;
  color: var(--plan-muted);
  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: var(--plan-text);
  background: color-mix(in srgb, var(--plan-block) 60%, transparent);
}

.plan-code-surface .plan-shiki,
.plan-code-surface pre {
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: var(--plan-code) !important;
  color: var(--shiki-light, var(--plan-code-text));
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--plan-code-size);
  line-height: 1.55;
}

.plan-code-surface pre code {
  color: inherit;
  background: none;
  padding: 0;
}

.plan-code-surface .plan-shiki pre,
.plan-code-surface .plan-shiki code {
  background: transparent !important;
}

.plan-code-surface .plan-shiki pre span {
  background: transparent !important;
  color: var(--shiki-light);
}

.dark .plan-code-surface .plan-shiki,
.dark .plan-code-surface .plan-shiki pre {
  background: var(--plan-code) !important;
  color: var(--shiki-dark, var(--plan-code-text));
}

.dark .plan-code-surface .plan-shiki pre span {
  color: var(--shiki-dark);
}

/* File-tree snippets render inside file rows (and the cramped recap "Files
 * touched" rail), not as full-width document code. Shrink the whole code surface
 * — glyphs via the `--plan-code-size` var plus the lang label and padding — so it
 * reads compact and clearly smaller than the row/note text around it. */
.an-file-tree-snippet {
  --plan-code-size: 0.6875rem;
}

.an-file-tree-snippet :where(pre, code, .plan-code-surface-scroll) {
  font-size: 0.6875rem;
  line-height: 1.5;
}

.an-file-tree-snippet .plan-code-surface .plan-shiki,
.an-file-tree-snippet .plan-code-surface pre {
  padding: 0.55rem 0.7rem;
}

.an-file-tree-snippet .plan-code-surface-bar {
  padding: 0.3rem 0.7rem;
}

.an-file-tree-snippet .plan-code-surface-lang {
  font-size: 0.625rem;
}

/* `code` primitive block: read wraps the single-bordered .plan-code-surface with
   a borderless filename header + hover chrome (copy); edit is a single-bordered
   surface that auto-grows (no drag-to-resize) with a hover language switcher. */
.plan-code {
  position: relative;
  max-width: 100%;
  min-width: 0;
}

.plan-code-head {
  max-width: 100%;
  min-width: 0;
  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;
  overflow: hidden;
  min-width: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: max(0.75rem, calc(var(--plan-code-size) - 0.0625rem));
  font-weight: 600;
  color: var(--plan-text);
}

.plan-code-muted {
  color: var(--plan-muted);
  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;
  right: 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 var(--plan-line);
  background: var(--plan-code);
  color: var(--plan-muted);
  cursor: pointer;
  transition:
    color 0.12s,
    background-color 0.12s;
}

.plan-code-chip:hover {
  color: var(--plan-text);
  background: var(--plan-block);
}

.plan-code-lang-select {
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 7px;
  border: 1px solid var(--plan-line);
  background: var(--plan-code);
  color: var(--plan-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
}

.plan-code-lang-select:hover {
  color: var(--plan-text);
}

/* Editable surface: ONE border, auto-grows to content (no drag-to-resize). */
.plan-code-editing {
  overflow: visible;
  border: 1px solid var(--plan-line);
  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 var(--plan-line);
}

.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: drop the `--plan-code` fill AND the Shiki theme
   background so the snippet sits on the page like the diff block (no gray box).
   Other consumers of .plan-code-surface (code-tabs, API specs) keep their fill. */
.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;
  max-width: 100%;
  min-width: 0;
  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.55;
  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: var(--plan-code-text);
  /* This is a <pre>; a base `pre {}` style leaks in a gray bg + border (the
     "lighter gray box + inner border") AND a larger `font-size: 0.86em` via
     `.an-rich-md-prose pre`. Override so it's flat and matches the textarea +
     annotated-code (the single .plan-code-editing border is the only chrome,
     and the overlay font must line up exactly with .plan-code-editor-input). */
  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.55 !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: var(--plan-text);
  outline: none;
}

.plan-code-editor-input::placeholder {
  color: var(--plan-muted);
}

/* Collapsed long snippet: fade the clipped bottom into the page background
   (the surface is transparent), with the shared .plan-code-surface-toggle below. */
.plan-code-editor-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 3rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--plan-document) 92%);
}

.plan-code-caption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--plan-muted);
}

.plan-code-caption-input {
  width: 100%;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  font-size: 0.8rem;
  color: var(--plan-muted);
  outline: none;
}

/* Editor node view (Tiptap): language picker header + highlighted <pre>. */
.an-code-block {
  position: relative;
  margin: 1.1rem 0;
  border: 1px solid var(--plan-line);
  border-radius: 12px;
  background: var(--plan-code);
  overflow: hidden;
}

.an-code-block__header {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid var(--plan-line);
  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: var(--plan-muted);
  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, var(--plan-block) 70%, transparent);
  color: var(--plan-text);
}

.an-code-block__lang--readonly,
.an-code-block__lang--readonly:hover {
  cursor: default;
  background: transparent;
  color: var(--plan-muted);
}

/* The node-view wrapper owns the surface (border + `--plan-code` bg), so the
   inner <pre> is transparent. Scoped via `.an-rich-md-prose` (not a specific
   editor wrapper) so it applies in every plan editor surface. Token colors come
   from the shared `.an-rich-md-prose pre code .hljs-*` palette in core. */
.an-rich-md-prose .an-code-block pre {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--plan-code-text);
  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: left;
  cursor: pointer;
}

.an-code-block__option:hover {
  background: hsl(var(--accent));
}

.an-code-block__option.is-active {
  color: hsl(var(--primary));
}

.plan-callout {
  max-width: 60rem;
  border-inline-start: 3px solid hsl(var(--ring));
  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 carries a default `mt-4`; inside a callout the block's
 * own vertical padding owns the top rhythm, so drop that leading margin. A label,
 * when present, keeps its own `margin-bottom` for the label→body gap. */
.plan-callout > .plan-rich-markdown-editor {
  margin-top: 0;
}

/* Tone styling: `data-tone` is set by the callout reader/editor (it defaults to
 * "info"). Each tone picks an accent; the bar, a faint left-anchored wash, and
 * the block label all derive from it so warning reads orange, risk red, etc. */
.plan-callout[data-tone="info"] {
  --plan-callout-accent: var(--plan-tone-info);
}
.plan-callout[data-tone="decision"] {
  --plan-callout-accent: var(--plan-tone-decision);
}
.plan-callout[data-tone="risk"] {
  --plan-callout-accent: var(--plan-tone-risk);
}
.plan-callout[data-tone="warning"] {
  --plan-callout-accent: var(--plan-tone-warning);
}
.plan-callout[data-tone="success"] {
  --plan-callout-accent: var(--plan-tone-success);
}

.plan-callout[data-tone] {
  border-inline-start-color: hsl(var(--plan-callout-accent));
  background-image: linear-gradient(
    90deg,
    hsl(var(--plan-callout-accent) / 0.08),
    hsl(var(--plan-callout-accent) / 0.02) 38%,
    transparent 72%
  );
  transition:
    border-inline-start-color 0.12s ease,
    background-image 0.12s ease;
}

[dir="rtl"] .plan-callout[data-tone],
.plan-callout[dir="rtl"][data-tone] {
  background-image: linear-gradient(
    270deg,
    hsl(var(--plan-callout-accent) / 0.08),
    hsl(var(--plan-callout-accent) / 0.02) 38%,
    transparent 72%
  );
}

.plan-callout[data-tone] .plan-block-label {
  color: hsl(var(--plan-callout-accent));
}

.plan-sketch-region {
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  padding: clamp(7px, 6%, 14px);
}

.plan-sketch {
  font-family:
    "Excalifont", "Comic Sans MS", "Bradley Hand", "Marker Felt", cursive;
  letter-spacing: 0;
}

.plan-sketch-label {
  color: currentColor;
  background: var(--plan-wireframe);
  border-radius: 4px;
  flex: 0 0 auto;
  padding: 1px 4px;
  text-shadow: 0 1px 0 var(--plan-wireframe);
}

.plan-template-wireframe {
  padding: 18px;
  font-size: 14px;
}

.plan-template-layer {
  position: relative;
  z-index: 10;
  display: grid;
  height: 100%;
  min-height: 0;
  gap: 14px;
}

.plan-template-box {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  color: currentColor;
}

.plan-template-box-emphasis {
  color: hsl(var(--ring));
}

.plan-template-box-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
}

.plan-template-button .plan-template-box-content {
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  white-space: nowrap;
}

.plan-template-button.plan-template-box-emphasis {
  color: white;
  background: hsl(var(--ring));
  box-shadow: inset 0 -2px 0 hsl(var(--ring) / 0.35);
}

.plan-template-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 230px);
  pointer-events: none;
}

.plan-template-lines i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--plan-placeholder-line);
  opacity: 0.48;
}

.plan-template-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1.4px solid currentColor;
  border-radius: 999px;
  padding: 3px 10px 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.plan-template-pill.is-active {
  color: hsl(var(--ring));
  background: hsl(var(--ring) / 0.1);
}

.plan-template-progress {
  display: block;
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: var(--plan-placeholder-line);
  opacity: 0.68;
}

.plan-template-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: hsl(var(--ring));
}

.plan-template-row-heading,
.plan-template-group-title,
.plan-template-meter-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.plan-template-row-heading > span,
.plan-template-group-title > span:last-child,
.plan-template-meter-copy > span {
  color: var(--plan-muted);
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.plan-template-popover {
  grid-template-rows: auto auto auto minmax(92px, 1fr);
  gap: 16px;
  padding: 10px;
}

.plan-template-popover-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.plan-template-header-meta,
.plan-template-popover-header > span {
  color: var(--plan-muted);
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.plan-template-header-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  line-height: 1.15;
}

.plan-template-meter {
  display: grid;
  gap: 9px;
}

.plan-template-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
}

.plan-template-group > .plan-template-box-content {
  gap: 12px;
}

.plan-template-segment-row .plan-template-box-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
}

.plan-template-segment-row .plan-template-button {
  min-width: 52px;
  color: var(--plan-text);
}

.plan-template-expanded {
  grid-template-rows: auto minmax(78px, 1fr) minmax(78px, 1fr) 1fr;
}

.plan-template-message-row .plan-template-box-content {
  justify-content: center;
  padding: 15px 16px;
}

.plan-template-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-right: 10px;
}

.plan-template-map {
  grid-template-rows: auto minmax(150px, 1fr) auto;
}

.plan-template-map-area .plan-template-box-content {
  gap: 12px;
  padding: 16px;
}

.plan-template-treemap {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 1.4fr 0.9fr 0.7fr;
  grid-template-rows: 1fr 0.8fr;
  gap: 8px;
}

.plan-template-treemap i {
  min-height: 22px;
  border-radius: 8px;
  background: hsl(var(--ring) / 0.18);
  outline: 1px solid hsl(var(--ring) / 0.55);
}

.plan-template-treemap .is-large {
  grid-row: span 2;
  background: hsl(var(--ring) / 0.3);
}

.plan-template-treemap .is-muted {
  background: var(--plan-placeholder-line);
  outline-color: transparent;
  opacity: 0.7;
}

.plan-template-map-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.plan-template-chat-cleanup {
  grid-template-rows: minmax(150px, 1fr) auto auto;
  padding: 8px;
}

.plan-template-chat-thread .plan-template-box-content {
  justify-content: center;
  gap: 28px;
  padding: 18px 20px;
}

.plan-template-message-bubble {
  display: grid;
  width: 100%;
  gap: 8px;
}

.plan-template-message-bubble.is-reply {
  margin-left: auto;
  width: 84%;
}

.plan-template-status {
  width: 48%;
}

.plan-template-composer .plan-template-box-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.plan-template-app-context {
  padding: 2px;
}

.plan-template-app-shell > .plan-template-box-content {
  padding: 18px;
}

.plan-template-app-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.plan-template-app-grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(188px, 34%);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px 18px;
}

.plan-template-app-chat {
  grid-row: 1;
}

.plan-template-app-chat .plan-template-box-content {
  justify-content: center;
  gap: 24px;
  padding: 22px 26px;
}

.plan-template-sidebar {
  display: grid;
  grid-row: 1 / span 3;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.plan-template-sidebar-title {
  width: 78%;
  justify-self: end;
}

.plan-template-sidebar-popover {
  background: var(--plan-block);
  color: var(--plan-text);
}

.plan-template-sidebar-popover .plan-template-box-content {
  gap: 10px;
  padding: 16px;
}

.plan-template-sidebar-popover .plan-template-meter span {
  display: none;
}

.plan-template-sidebar-popover .plan-template-toggle {
  grid-template-columns: repeat(2, minmax(44px, 1fr));
}

.plan-template-sidebar-popover
  .plan-template-segment-row
  .plan-template-box-content {
  grid-template-columns: minmax(0, 1fr);
}

.plan-template-sidebar-popover
  .plan-template-segment-row
  .plan-template-button {
  display: none;
}

.plan-template-sidebar > .plan-template-button {
  width: 84px;
  justify-self: end;
}

.plan-template-app-status {
  width: 34%;
}

.plan-template-app-composer {
  grid-column: 1;
}

.plan-template-app-composer .plan-template-box-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.plan-region-inner {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(4px, 7%, 9px);
  overflow: hidden;
}

.plan-region-inner-unlabeled {
  justify-content: center;
}

.plan-region-inner-toolbar {
  gap: clamp(3px, 5%, 7px);
}

.plan-region-inner-nav {
  gap: clamp(4px, 7%, 8px);
}

.plan-region-scaffold {
  position: static;
  width: min(78%, 220px);
  flex: 0 0 auto;
  pointer-events: none;
}

.plan-region-scaffold i {
  display: block;
  border-radius: 999px;
  background: var(--plan-placeholder-line);
  opacity: 0.72;
}

.plan-region-scaffold-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.plan-region-scaffold-lines i {
  height: 3px;
}

.plan-region-scaffold-lines i:nth-child(1) {
  width: 76%;
}

.plan-region-scaffold-lines i:nth-child(2) {
  width: 56%;
}

.plan-region-scaffold-lines i:nth-child(3) {
  width: 34%;
}

.plan-region-scaffold-lines.plan-region-scaffold-with-label {
  gap: 4px;
}

.plan-region-scaffold-lines.plan-region-scaffold-compact {
  gap: 4px;
}

.plan-region-scaffold-input {
  display: flex;
  align-items: center;
  width: 70%;
  height: 4px;
}

.plan-region-scaffold-input i {
  width: 100%;
  height: 3px;
}

.plan-region-scaffold-toolbar {
  display: flex;
  align-items: center;
  gap: 7%;
  width: 78%;
  height: 42%;
}

.plan-region-scaffold-toolbar i {
  height: 54%;
  flex: 1 1 0;
  border: 1px solid currentColor;
  background: transparent;
  opacity: 0.7;
}

.plan-region-scaffold-nav {
  display: flex;
  width: 72%;
  flex-direction: column;
  gap: 6px;
}

.plan-region-scaffold-nav i {
  height: 10px;
  opacity: 0.62;
}

.plan-region-scaffold-nav i:first-child {
  background: hsl(var(--ring) / 0.2);
  outline: 1px solid hsl(var(--ring) / 0.75);
}

.plan-region-popover {
  background: var(--plan-wireframe);
}

.plan-region-button {
  padding: 0;
  color: currentColor;
  background: transparent;
  box-shadow: 0 0 0 1px currentColor;
}

.plan-region-button-emphasis {
  color: white;
  background: hsl(var(--ring));
  box-shadow: 0 0 0 1px hsl(var(--ring) / 0.8);
}

.plan-region-button .plan-sketch-label {
  color: inherit;
  background: transparent;
  text-shadow: none;
}

.plan-region-button .plan-rough-svg {
  opacity: 0.58;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.plans-grid {
  height: 100%;
}

.plan-header-editable {
  border-radius: 6px;
  outline: none;
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}
.plan-header-editable:hover {
  background: hsl(var(--muted) / 0.35);
  box-shadow: 0 0 0 4px hsl(var(--muted) / 0.35);
}
.plan-header-editable:focus {
  background: transparent;
  box-shadow: none;
}
.plan-header-editable:empty::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground) / 0.72);
}

/* ── Single-document plan editor: drag handle (block grip + reorder), block
 * node spacing, and selected-node outline. Class names match the shared core
 * `DragHandle` extension; the wrapper must be position:relative. ───────────── */
.plan-document-editor {
  position: relative;
}

.plan-nested-document-editor {
  position: relative;
}

.plan-document-flow > .plan-document-editor {
  margin-top: 2.25rem;
}

.plan-document-editor > .an-rich-md-prose {
  min-height: 45vh;
}

.plan-nested-document-editor > .an-rich-md-prose {
  min-height: 4rem;
  padding: 0.125rem 0;
}

/* The top-level and nested editable document editors are NOT wrapped in
 * `.plan-rich-markdown-editor`, so their prose would otherwise fall back to the
 * core 0.95rem / em-scaled-heading defaults — smaller than the read view and the
 * inline callout/rich-text editors, which use the canonical 1.0625rem body.
 * Mirror the read-view body + heading sizing here so edit and read modes match
 * and inline callouts no longer read larger than the surrounding copy. */
.plan-document-editor .an-rich-md-prose,
.plan-nested-document-editor .an-rich-md-prose {
  font-size: var(--plan-body-size);
  line-height: 1.75;
}
.plan-document-editor .an-rich-md-prose h1,
.plan-nested-document-editor .an-rich-md-prose h1 {
  font-size: 1.75rem;
}
.plan-document-editor .an-rich-md-prose h2,
.plan-nested-document-editor .an-rich-md-prose h2 {
  font-size: 1.45rem;
}
.plan-document-editor .an-rich-md-prose h3,
.plan-nested-document-editor .an-rich-md-prose h3 {
  font-size: 1.2rem;
}
.plan-document-editor .an-rich-md-prose h4,
.plan-nested-document-editor .an-rich-md-prose h4 {
  font-size: 1.05rem;
}

/* Inline custom blocks inside the document flow get their own breathing room;
 * the inner `.plan-block` section shouldn't re-add the top divider/margins. */
.plan-document-editor .plan-block-node {
  position: relative;
  margin: 2rem 0;
}

/* Markdown images (inside prose) normally carry their vertical margin on the
 * <img> itself. That margin sits INSIDE the `.plan-image` wrapper, so the
 * absolutely-positioned hover actions (top-right) float into the gap above the
 * image instead of sitting flush on it. Move the spacing onto the wrapper so the
 * image fills it from the top edge and the controls sit flush — matching the
 * structured image block, whose image has no intrinsic margin. */
.an-rich-md-prose .plan-image > img {
  margin-top: 0;
  margin-bottom: 0;
}
.an-rich-md-prose .plan-image {
  margin-block: 0.75rem;
}

.plan-nested-document-editor .plan-block-node {
  position: relative;
  margin: 1rem 0;
}

.plan-nested-document-editor .an-rich-md-prose > :first-child {
  margin-top: 0;
}

.plan-nested-document-editor .an-rich-md-prose > :last-child {
  margin-bottom: 0;
}

.plan-nested-document-editor-region:empty {
  min-height: 3rem;
}

.plan-nested-document-editor-region .an-rich-md-wrapper {
  border-radius: 6px;
}
.plan-document-editor .plan-block-node > .plan-block,
.plan-document-editor .plan-block-node .plan-block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Callouts are self-contained tinted boxes, not divider-separated sections, so
 * they keep their own symmetric internal top padding in BOTH layouts. The
 * read-mode per-block layout otherwise gives plain blocks a divider + 2.25rem top
 * padding, and the editable NodeView layout zeroes inner-block padding — both
 * wrong for a boxed callout. Block-to-block spacing still comes from the block /
 * NodeView margins; only the internal padding + divider are reset here. (The
 * matching `padding-bottom` lives on the base `.plan-callout` rule and already
 * wins, since neither layout rule sets it.)
 *
 * `.plan-block .plan-callout` covers callouts nested inside another block (e.g. a
 * `tabs` panel or `columns`), where the generic `.plan-block .plan-block` rule
 * zeroes `padding-top` and would otherwise leave the box visibly tighter on top
 * than the bottom. */
.plan-document-flow > .plan-callout,
.plan-block .plan-callout,
.plan-document-editor .plan-block-node .plan-callout,
.plan-nested-document-editor .plan-block-node .plan-callout {
  padding-top: 0.9rem;
  border-top: 0;
}

/* "Won't sync to Notion" badge shown on incompatible blocks while the plan is
 * in Sync-to-Notion mode. Anchored to the block's top-right corner. */
.plan-block-notion-badge {
  position: absolute;
  top: -0.6rem;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid hsl(38 92% 50% / 0.35);
  background: hsl(38 92% 50% / 0.12);
  color: hsl(32 80% 36%);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}
.dark .plan-block-notion-badge {
  color: hsl(40 90% 70%);
}

.drag-handle {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: grab;
  color: var(--plan-muted);
  opacity: 0.55;
  z-index: 10;
  user-select: none;
  touch-action: none;
}
.drag-handle:hover {
  opacity: 1;
  background: var(--plan-block);
}
.drag-handle:active {
  cursor: grabbing;
}

.notion-editor-is-dragging,
.notion-editor-is-dragging * {
  cursor: grabbing !important;
}

.notion-block--dragging {
  opacity: 0.35;
  transition: opacity 0.12s ease;
}

.notion-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: min(720px, calc(100vw - 48px));
  overflow: hidden;
  background: transparent !important;
  box-shadow: none;
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
}
.notion-drag-preview > * {
  margin: 0 !important;
  max-height: 180px;
  overflow: hidden;
}

.notion-drop-indicator {
  position: absolute;
  z-index: 60;
  height: 3px;
  border-radius: 999px;
  background: hsl(var(--ring));
  box-shadow: 0 0 0 1px var(--plan-document);
  pointer-events: none;
  transform: translateY(-1px);
}

/*
 * Column (side) drop: a drag landing in a block's left/right region builds a
 * Notion-style columns layout instead of reordering. The bar is bolder and
 * glows so the column-build intent is unmistakable before release — distinct
 * from the thin horizontal reorder line. The core DragHandle sizes/positions it
 * inline (a vertical bar on the target's edge) and toggles this class.
 */
.notion-drop-indicator--column {
  transform: none;
  background: hsl(var(--ring));
  box-shadow:
    0 0 0 1px var(--plan-document),
    0 0 0 2px hsl(var(--ring) / 0.25),
    0 0 10px hsl(var(--ring) / 0.55);
}

.plan-document-editor .plan-block-node,
.plan-document-editor .plan-block-node:focus,
.plan-document-editor .plan-block-node:focus-visible,
.plan-document-editor .plan-block-node.ProseMirror-selectednode,
.plan-document-editor .plan-block-node__shell:focus,
.plan-document-editor .plan-block-node__shell:focus-visible,
.plan-document-editor .plan-block-node__shell:focus-within,
.plan-document-editor .ProseMirror-selectednode:has(.plan-block-node),
.plan-nested-document-editor .plan-block-node,
.plan-nested-document-editor .plan-block-node:focus,
.plan-nested-document-editor .plan-block-node:focus-visible,
.plan-nested-document-editor .plan-block-node.ProseMirror-selectednode,
.plan-nested-document-editor .plan-block-node__shell:focus,
.plan-nested-document-editor .plan-block-node__shell:focus-visible,
.plan-nested-document-editor .plan-block-node__shell:focus-within,
.plan-nested-document-editor .ProseMirror-selectednode:has(.plan-block-node) {
  outline: none !important;
  box-shadow: none !important;
}

.plan-document-editor
  .ProseMirror-selectednode:not(.plan-block-node):not(:has(.plan-block-node)),
.plan-nested-document-editor
  .ProseMirror-selectednode:not(.plan-block-node):not(:has(.plan-block-node)) {
  outline: 2px solid hsl(var(--ring) / 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Embed mode (set by entry.client.tsx on `?embedded=1`). The app shell is
 * fixed-viewport (`h-screen` + `overflow-hidden`), so inside the iframe
 * scrollHeight equals the iframe height and the embed can't size to content.
 * Flow the shell -> reader chain so frame.ts reports the real height. Scoped to
 * [data-embed]; covers the AgentSidebar wrapper too since the chain spans
 * several containers. */
html[data-embed="1"],
html[data-embed="1"] body,
html[data-embed="1"] #root {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html[data-embed="1"] .agent-layout-shell,
html[data-embed="1"] .agent-layout-main-surface,
html[data-embed="1"] .agent-sidebar-root,
html[data-embed="1"] .agent-sidebar-content,
html[data-embed="1"] .plans-workspace,
html[data-embed="1"] .plan-content-surface,
html[data-embed="1"] [data-agent-sidebar],
html[data-embed="1"] [data-agent-sidebar-content] {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}