/**
 * Plan editor styling.
 *
 * MDXEditor's structural CSS is imported by the app; this retheme layer maps it
 * onto Ace's tokens so the editor reads as part of the product rather than as a
 * third-party widget.
 */

.plan {
	--plan-gutter: 2rem;
	container-type: inline-size;
	/*
	 * A comfortable measure. The panel is resizable and a plan is read far more
	 * often than it is written, so the text stops widening well before the pane
	 * does. At the body size below this is roughly 85 characters a line, near
	 * the top of the range a reader can track back from without losing the row.
	 */
	--plan-measure: 40rem;
	/*
	 * Document body text, one step down from the old 17px so prose sits
	 * closer to chrome and chat sizes. Resolved out here because MDXEditor
	 * declares `--text-base`, `--text-sm`
	 * and `--text-xs` on its own root, which sits between `:root` and the
	 * document — so reading the theme token inside the editor gets its 1rem
	 * rather than ours. `.plan` is outside that root, so this catches the
	 * theme's value on the way past.
	 */
	--plan-body: var(--text-base);
}

/* Document views -------------------------------------------------------- */

.plan-workspace {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.plan-document {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: var(--color-page);
	box-shadow: var(--shadow-raised);
}

/* Reader-local comment chrome must not move collaborative line boxes. */
.plan-comment-layer {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 2;
}

.plan-comment-button,
.plan-comment-orphan-button {
	pointer-events: auto;
	border: var(--edge-width) solid var(--color-control-edge);
	background: var(--color-page);
	color: var(--color-text-secondary);
	box-shadow: var(--shadow-resting);
}

.plan-comment-button {
	position: absolute;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border-radius: var(--radius-md);
	font-size: 0.75rem;
}

/* The host receives hits so prose keeps native selection. */
.plan-comment-hit {
	pointer-events: none;
	position: absolute;
}

.plan-comment-button:hover,
.plan-comment-button:focus-visible,
.plan-comment-orphan-button:hover,
.plan-comment-orphan-button:focus-visible {
	background: var(--color-brand-wash);
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.plan-comment-preview,
.plan-comment-card {
	pointer-events: auto;
	position: absolute;
	width: min(24rem, 80%);
}

.plan-comment-preview {
	/* A narrow preview can overlap prose, but never intercept it. */
	pointer-events: none;
	max-width: 18rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-md);
	background: var(--color-page);
	box-shadow: var(--shadow-overlay);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.plan-comment-preview p {
	margin: 0;
	font-style: italic;
}

.plan-comment-preview span {
	display: block;
	margin-top: 0.25rem;
	color: var(--color-text-tertiary);
}

.plan-comment-card {
	max-height: calc(100% - 1rem);
	overflow: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-overlay);
}

.plan-comment-orphans {
	pointer-events: auto;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}

.plan-comment-orphan-button {
	border-radius: var(--radius-md);
	padding: 0.375rem 0.5rem;
	font-size: var(--text-sm);
}

.plan-comment-orphan-card {
	top: 2.5rem;
	right: 0;
}

.plan-decisions {
	display: flex;
	height: 100%;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	overflow: hidden;
	/* The workspace ground shows through the rail. */
	background: transparent;
}

/* Decorator hosts are block-level plan content, not zero-size anchors. */
.plan .plan-content [data-plan-questionnaire],
.plan .plan-content [data-plan-decision] {
	margin-block: 1rem;
}

.plan .plan-content :is([data-plan-questionnaire], [data-plan-decision]) article {
	width: 100%;
}

/*
 * The prose a sidecar card refers to, while somebody is pointing at that card.
 *
 * Registered in `CSS.highlights`, so it paints over the text without putting
 * anything in the document. One mark for both halves of the sidecar: questions
 * used to outline a block while comments washed a range, so the same fact —
 * this is the prose that card refers to — read as two different things
 * depending on which card it came from. `::highlight()` cannot draw an outline,
 * so the wash is what they can both be.
 *
 * Nothing is painted at rest. Standing marks for live comments and for decided
 * prose were tried and taken out: a plan accumulates decisions, so anything
 * permanent ends up covering most of the document, and a page that is mostly
 * highlighted has told you nothing.
 *
 * `background-color`, not `background`: only a handful of longhands are
 * permitted here, and the shorthand works today solely because browsers expand
 * it before filtering. Not worth depending on.
 *
 * The colour is recorded beside the declaration because it is calibrated as
 * a rendered wash, not as an abstract percentage of a darker accent.
 */
::highlight(plan-related) {
	/* #dcf6fa */
	background-color: var(--color-brand-wash);
}

/*
 * The same pointer, for a browser with no Highlight API.
 *
 * A block outline rather than a wash, because without the API there is no way
 * to mark part of one — less precise, and honest about it. Standing marks are
 * dropped entirely on this path: outlining every decided passage would box up
 * half the plan.
 */
.plan .plan-content [data-plan-related] {
	border-radius: var(--radius-sm);
	outline: 1px solid color-mix(in oklch, var(--color-brand) 60%, transparent);
	outline-offset: 3px;
	background: var(--color-brand-wash);
}

/*
 * Retheme MDXEditor onto Ace's tokens.
 *
 * MDXEditor ships a light Radix palette on its own root and only switches off
 * it for a `.dark-theme` class it expects the host to add. Ace has its own
 * theme, so rather than opt into a second one we point its variables at ours —
 * the editor then follows Ace into light or dark with nothing to keep in sync.
 *
 * These have to land on the same element MDXEditor sets them on; an ancestor
 * would lose to its own declaration.
 */
.plan .mdxeditor {
	background: transparent;
	font-family: var(--font-sans);

	--basePageBg: transparent;
	--baseBase: var(--color-page);
	--baseBgSubtle: var(--color-inset);
	--baseBg: var(--color-hover);
	--baseBgHover: var(--color-hover);
	--baseBgActive: var(--color-selected);
	--baseLine: var(--color-edge);
	--baseBorder: var(--color-edge);
	--baseBorderHover: var(--color-brand);
	--baseSolid: var(--color-text-tertiary);
	--baseSolidHover: var(--color-text-primary);
	--baseText: var(--color-text-primary);
	--baseTextContrast: var(--color-text-primary);

	--accentBase: var(--color-page);
	--accentBgSubtle: var(--color-brand-wash);
	--accentBg: var(--color-brand-wash);
	--accentBgHover: var(--color-brand-wash);
	--accentBgActive: var(--color-brand-wash);
	--accentLine: var(--color-edge);
	--accentBorder: var(--color-edge);
	--accentBorderHover: var(--color-brand);
	--accentSolid: var(--color-brand);
	--accentSolidHover: var(--color-brand-hover);
	--accentText: var(--color-brand);
	--accentTextContrast: var(--color-text-primary);

	--admonitionTipBg: var(--color-success-wash);
	--admonitionTipBorder: var(--color-success);
	--admonitionInfoBg: var(--color-brand-wash);
	--admonitionInfoBorder: var(--color-brand);
	--admonitionCautionBg: var(--color-warning-wash);
	--admonitionCautionBorder: var(--color-warning);
	--admonitionDangerBg: var(--color-destructive-wash);
	--admonitionDangerBorder: var(--color-destructive);
	--admonitionNoteBg: var(--color-hover);
	--admonitionNoteBorder: var(--color-edge);

	--error-color: var(--color-destructive);
	--font-body: var(--font-sans);
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/*
 * Scoped to `.plan` on purpose. MDXEditor sets padding and colour directly
 * on its own content class, which is exactly as specific as ours, so a bare
 * `.plan-content` wins only by landing later in the bundle. That is a
 * property of how the CSS happens to be chunked, not of anything we control.
 */
.plan .plan-content {
	/*
	 * The trailing space is deliberate and large: the caret should never sit
	 * against the bottom of the pane, and a plan is usually appended to.
	 */
	padding: 1.5rem var(--plan-gutter) 60vh;
	margin-inline: auto;
	max-width: calc(var(--plan-measure) + var(--plan-gutter) * 2);
	font-size: var(--plan-body);
	/* Prose wants looser leading than the UI rhythm the token pairs with. */
	line-height: 1.6;
	color: var(--color-text-primary);
}

.plan .plan-content:focus {
	outline: none;
}

/*
 * Document typography.
 *
 * Tailwind's preflight resets headings to inherit their size and weight and
 * strips list markers, which is right for an app chrome and wrong for prose.
 * A plan is prose, so the document elements are given their meaning back here.
 */
.plan-content :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 600;
	line-height: 1.3;
	margin-block: 1.5em 0.5em;
	color: var(--color-text-primary);
	/* Short enough to weigh every break at once, and an 8/1 split reads as a mistake. */
	text-wrap: balance;
}

.plan-content :is(h1, h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

.plan-content h1 {
	font-size: var(--text-2xl);
	line-height: var(--text-2xl--line-height);
}
.plan-content h2 {
	font-size: var(--text-xl);
	line-height: var(--text-xl--line-height);
}
.plan-content h3 {
	font-size: var(--text-lg);
	line-height: var(--text-lg--line-height);
}
.plan-content :is(h4, h5, h6) {
	font-size: var(--plan-body);
}

.plan-content p {
	margin-block: 0.75em;
}

.plan-content :is(ul, ol) {
	margin-block: 0.75em;
	padding-inline-start: 1.5em;
}

.plan-content ul {
	list-style: disc;
}
.plan-content ol {
	list-style: decimal;
}

.plan-content li {
	margin-block: 0.25em;
}

/* Nested lists sit tighter than the block they interrupt. */
.plan-content li > :is(ul, ol) {
	margin-block: 0.25em;
}

.plan-content blockquote {
	margin-block: 1em;
	padding-inline-start: 1em;
	border-inline-start: 3px solid var(--color-edge);
	color: var(--color-text-secondary);
}

.plan-content a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.plan-content hr {
	margin-block: 1.5em;
	border: 0;
	border-block-start: var(--edge-width) solid var(--color-edge);
}

.plan-content :is(strong, b) {
	font-weight: 600;
	color: var(--color-text-primary);
}

/* Structural components ------------------------------------------------- */

.plan-content [data-plan-type] {
	--callout-accent: var(--color-gray-500);
	--callout-ink: var(--color-text-secondary);
	--callout-wash: var(--color-gray-100);
	border: var(--edge-width) solid color-mix(in oklab, var(--callout-accent) 18%, transparent);
	padding: 0.875rem 1rem;
	margin-block: 1rem;
	border-radius: var(--radius-lg);
	background: color-mix(in oklab, var(--callout-wash) 68%, var(--color-page));
	box-shadow: inset 0 1px rgb(255 255 255 / 55%), var(--shadow-resting);
	transition:
		border-color var(--duration-fast) var(--ease-out),
		background var(--duration-fast) var(--ease-out);
}

.plan-content [data-plan-type="tip"] {
	--callout-accent: var(--color-success);
	--callout-ink: var(--color-success-ink);
	--callout-wash: var(--color-success-wash);
}
.plan-content [data-plan-type="important"] {
	--callout-accent: var(--color-brand);
	--callout-ink: var(--color-brand-ink);
	--callout-wash: var(--color-brand-wash);
}
.plan-content [data-plan-type="warning"] {
	--callout-accent: var(--color-warning);
	--callout-ink: var(--color-warning-ink);
	--callout-wash: var(--color-warning-wash);
}
.plan-content [data-plan-type="danger"] {
	--callout-accent: var(--color-destructive);
	--callout-ink: var(--color-destructive-ink);
	--callout-wash: var(--color-destructive-wash);
}

.plan-content [data-plan-type]:focus-within {
	border-color: color-mix(in oklab, var(--callout-accent) 34%, transparent);
	background: color-mix(in oklab, var(--callout-wash) 82%, var(--color-page));
}

.plan-callout-heading {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 1.75rem;
	align-items: center;
	gap: 0.625rem;
}

.plan-callout-type {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	place-items: center;
	border: var(--edge-width) solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--callout-ink);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.plan-callout-type:hover:not(:disabled),
.plan-callout-type:focus-visible,
.plan-callout-type[aria-expanded="true"] {
	border-color: color-mix(in oklab, var(--callout-accent) 24%, transparent);
	background: color-mix(in oklab, var(--callout-accent) 16%, transparent);
}

.plan-callout-type:active:not(:disabled) {
	transform: scale(0.94);
}

.plan-callout-type:focus-visible,
.plan-callout-title:focus-visible,
.plan-callout-option:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.plan-callout-type:disabled {
	cursor: default;
}

.plan-callout-title {
	min-width: 2rem;
	max-width: 100%;
	border-radius: var(--radius-sm);
	padding: 0.125rem 0.25rem;
	margin-inline-start: -0.25rem;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--text-sm--line-height);
	color: var(--callout-ink);
	text-wrap: pretty;
	transition:
		background var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.plan-callout-title[contenteditable="true"] {
	cursor: text;
}

.plan-callout-title[contenteditable="true"]:hover {
	background: color-mix(in oklab, var(--callout-accent) 7%, transparent);
}

.plan-callout-title[contenteditable="true"]:focus {
	background: var(--color-page);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--callout-accent) 25%, transparent);
	color: var(--color-text-primary);
	outline: none;
}

.plan-callout-title:empty::before {
	content: attr(data-placeholder);
	color: var(--callout-ink);
	opacity: 0.76;
	pointer-events: none;
}

.plan-content [data-plan-body] {
	padding-inline-start: 2.375rem;
	color: var(--color-text-secondary);
}

.plan-content [data-plan-body] > :first-child {
	margin-block-start: 0.25rem;
}

.plan-content [data-plan-body] > :last-child {
	margin-block-end: 0;
}

.plan-callout-menu {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 0;
	z-index: 20;
	width: 10rem;
	padding: 0.25rem;
	border: var(--edge-width) solid var(--color-edge);
	border-radius: var(--radius-lg);
	background: var(--color-page);
	box-shadow: var(--shadow-overlay);
	animation: plan-callout-menu-in var(--duration-fast) var(--ease-out);
}

.plan-callout-option {
	--option-color: var(--color-gray-500);
	display: grid;
	width: 100%;
	height: 2rem;
	grid-template-columns: 1.25rem 1fr 1rem;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	border-radius: var(--radius-sm);
	padding-inline: 0.5rem;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	text-align: left;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.plan-callout-option > svg:first-child {
	color: var(--option-color);
}

.plan-callout-option:hover,
.plan-callout-option:focus-visible,
.plan-callout-option[aria-checked="true"] {
	background: var(--color-hover);
	color: var(--color-text-primary);
}

.plan-callout-option[data-callout-type="tip"] {
	--option-color: var(--color-success);
}
.plan-callout-option[data-callout-type="important"] {
	--option-color: var(--color-brand);
}
.plan-callout-option[data-callout-type="warning"] {
	--option-color: var(--color-warning);
}
.plan-callout-option[data-callout-type="danger"] {
	--option-color: var(--color-destructive);
}

.plan-callout-option > svg:last-child {
	justify-self: end;
}

@keyframes plan-callout-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.25rem) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.plan-callout-menu {
		animation: none;
	}
}

.plan-content pre {
	background: var(--color-inset);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: var(--text-sm);
}

/*
 * Inline code. Sized in `em` so it tracks whatever it sits in — a heading's
 * code should not shrink to body size — and left to `pre` when it is a block.
 */
.plan-content :not(pre) > code {
	background: var(--color-inset);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	padding: 0.125em 0.3em;
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 0.875em;
}

/* Tables scroll independently so a wide one never widens the document. */
/*
 * Tables scroll independently so a wide one never widens the document.
 *
 * `display: block` is what allows that, but it also stops the table sizing
 * itself from its contents — columns get squeezed until neighbouring values
 * touch and read as one word. `width: max-content` gives that back, and the
 * `max-width` keeps a narrow table from stretching to fill the measure.
 */
.plan-content table {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin-block: 1em;
}

.plan-content th,
.plan-content td {
	border: var(--edge-width) solid var(--color-edge);
	padding: 0.375rem 0.625rem;
	text-align: start;
	/* Without this a cell collapses onto its neighbour when a column is
	   narrow, and two values read as one word. */
	vertical-align: top;
	min-width: 4rem;
}

.plan-content th {
	font-weight: 600;
	background: var(--color-hover);
	color: var(--color-text-primary);
}

/* A cell's paragraph is the cell; it should not add document spacing. */
.plan-content :is(th, td) > p {
	margin-block: 0;
}

/*
 * A selected range of cells.
 *
 * `@lexical/table` marks one by adding the class the theme names under
 * `tableCellSelected` and does nothing else at all — no inline style, no
 * fallback. MDXEditor's theme names no table class of any kind, so before
 * `plan-editor.tsx` added these the selection was live and completely
 * invisible: dragging across cells appeared to do nothing while a
 * `TableSelection` was very much in effect, and the next keystroke replaced
 * everything it covered.
 */
.plan .plan-content .plan-cell-selected {
	background: var(--color-selected);
}

/* Set on the table while a cell range is being dragged out, so the browser's
   own text selection does not paint underneath ours. */
.plan .plan-content .plan-table-selecting,
.plan .plan-content .disable-selection {
	user-select: none;
}

/* Table rails ------------------------------------------------------------ */

/*
 * The grips a table is reshaped from.
 *
 * Positioned by script from measured cell rectangles, because a `<table>`
 * cannot contain a `<div>` and there is nowhere inside the node to put them.
 * So: `position: fixed`, and no Tailwind translate utility anywhere near them
 * — v4 emits the `translate` property, which composes with a transform rather
 * than replacing it.
 */
/*
 * The rail takes pointer events across the whole of itself, holes included.
 *
 * It is tempting to pass the gaps through so the prose behind stays clickable,
 * and that is what this did first. But `pointerleave` fires the instant the
 * pointer crosses anything untargetable, so every hole was somewhere the rails
 * blinked out from under a hand on its way across them. A rail exists only
 * while its table is being pointed at, and it is 28 pixels of a 32-pixel
 * gutter; the prose it covers for that moment is not worth the flicker.
 */
.plan-rail {
	position: fixed;
	z-index: 40;
	overflow: hidden;
}

.plan-rail > * {
	position: absolute;
	padding: 0;
	border: 0;
	background: transparent;
}

.plan-grip {
	border-radius: var(--radius-sm);
	background: var(--color-control);
	transition: background-color var(--duration-fast) var(--ease-out);
}

.plan-grip:hover,
.plan-grip:focus-visible {
	background: color-mix(in oklch, var(--color-brand) 45%, transparent);
}

.plan-grip:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

[data-plan-rail="column"] .plan-grip {
	cursor: grab;
}

[data-plan-rail="row"] .plan-grip {
	cursor: grab;
}

.plan-grip.is-held {
	cursor: grabbing;
	background: var(--color-brand);
}

/* The header row's bar. Drawn so the rail has no gap where the row plainly is,
   but not a control: the header cannot move and cannot be removed. */
.plan-grip.is-fixed {
	background: color-mix(in oklch, var(--color-edge) 60%, transparent);
	cursor: default;
}

/*
 * Remove and insert, in the lane beyond the grips.
 *
 * Nothing here overlaps a grip, so a drag can begin anywhere along one. Hiding
 * is `opacity` rather than `display`, so a button keeps its size and its place
 * in the tab order while it is out of sight — and `pointer-events` with it, so
 * an invisible cross cannot be clicked by accident.
 */
.plan-grip-remove,
.plan-insert,
.plan-align {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-out);
	border-radius: var(--radius-sm);
	background: var(--color-page);
	outline: var(--edge-width) solid var(--color-control-edge);
	outline-offset: calc(-1 * var(--edge-width));
	color: var(--color-text-quaternary);
}

.plan-grip-remove[data-plan-shown],
.plan-align[data-plan-shown],
.plan-grip-remove:focus-visible,
.plan-align:focus-visible,
.plan-rail:hover .plan-insert,
.plan-insert:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.plan-grip-remove:hover,
.plan-insert:hover,
.plan-align:hover {
	color: var(--color-text-primary);
	outline-color: var(--color-brand);
}

.plan-grip-remove:focus-visible,
.plan-insert:focus-visible,
.plan-align:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

/* Drawn rather than lettered: at fifteen pixels a glyph is a smudge, and these
   have to read at a glance in the margin of a paragraph. */
.plan-grip-remove::before,
.plan-grip-remove::after,
.plan-insert::before,
.plan-insert::after {
	content: "";
	position: absolute;
	inset: 50% 25%;
	border-top: 1.5px solid currentcolor;
	translate: 0 -50%;
}

.plan-grip-remove::before {
	rotate: 45deg;
}

.plan-grip-remove::after {
	rotate: -45deg;
}

.plan-insert::after {
	rotate: 90deg;
}

/*
 * The alignment button reads as what it does: two lines, the lower one short
 * and sitting where the text will. A column with no alignment of its own shows
 * the same figure at half strength rather than a fourth icon, because "no
 * alignment" and "left" render identically in the table and a control claiming
 * otherwise would be lying about the source.
 */
.plan-align::before,
.plan-align::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	border-top: 1.5px solid currentcolor;
}

.plan-align::before {
	top: 5px;
}

.plan-align::after {
	top: 9px;
}

.plan-align[data-plan-align="default"] {
	opacity: 0;
}

.plan-align[data-plan-align="default"][data-plan-shown],
.plan-align[data-plan-align="default"]:focus-visible {
	opacity: 0.55;
}

.plan-align[data-plan-align="default"]::after,
.plan-align[data-plan-align="left"]::after {
	right: 7px;
}

.plan-align[data-plan-align="center"]::after {
	left: 5px;
	right: 5px;
}

.plan-align[data-plan-align="right"]::after {
	left: 7px;
}

/* Where the drag will land. A hairline, because it is a position rather than a
   region: anything wider reads as the width of what is being moved. */
.plan-drop {
	background: var(--color-brand);
	border-radius: 1px;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.plan-grip,
	.plan-grip-remove,
	.plan-insert {
		transition: none;
	}
}

/* Remote cursors --------------------------------------------------------- */

/*
 * The frame remote cursors are measured against. It wraps the prose and grows
 * with it, so carets scroll with the text they belong to.
 */
.plan .plan-frame {
	position: relative;
}

/*
 * Lexical owns the caret's geometry — position, height and offsets are written
 * inline on every paint — and hands us the peer's colour as a custom property.
 * Only appearance belongs here. The shadow widens a 1px caret that would
 * otherwise be easy to miss, without fighting the inline width.
 */
.plan .plan-cursor {
	background-color: var(--lexical-cursor-color, currentColor);
	box-shadow: 0 0 0 0.5px var(--lexical-cursor-color, currentColor);
	border-radius: 1px;
}

.plan .plan-cursor-name {
	position: absolute;
	inset-block-end: 100%;
	inset-inline-start: -1px;
	margin-block-end: 2px;
	padding: 0 0.25rem;
	border-radius: 0.25rem;
	background: var(--lexical-cursor-color, currentColor);
	color: white;
	font-size: var(--text-sm);
	line-height: 1rem;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-out);
}

/* Raised while its peer is moving, then left to fade. */
.plan .plan-cursor[data-plan-active] .plan-cursor-name {
	opacity: 1;
}

/*
 * Where selections fall back to rect overlays, because the browser has no
 * Highlight API. The supported path is styled by Lexical from the same colour.
 */
.plan .plan-cursor-selection-bg {
	background-color: color-mix(in srgb, var(--lexical-cursor-color, currentColor) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.plan * {
		transition: none !important;
		animation: none !important;
	}

	/*
	 * Without the fade, a label would blink in and out on every keystroke a
	 * peer makes. Leaving it up is the quieter of the two.
	 */
	.plan .plan-cursor-name {
		opacity: 1;
	}
}

/* Rendered previews ------------------------------------------------------ */

.plan-content [data-plan-preview]:empty {
	display: none;
}

/*
 * On the message rather than on the slot: everything in the slot is React's
 * now, including this, so the attribute goes on the element that says so
 * rather than on the element that holds it.
 */
.plan-content [data-plan-preview] [data-plan-error] {
	color: var(--color-destructive);
	font-size: var(--text-sm);
	padding: 0.5rem 0;
}

/*
 * Coloured code, and diffs.
 *
 * The renderer paints inside a shadow root, so none of the rules above reach
 * it and none of its reach out. What crosses is inherited: the custom
 * properties it reads for type, which are set here so a fence and its source
 * are the same size in the same face, and nothing else.
 */
.plan-content .plan-code-view {
	--diffs-font-family: ui-monospace, SFMono-Regular, monospace;
	--diffs-font-size: var(--text-sm);
	--diffs-line-height: 1.5;
	--diffs-tab-size: 2;
	--diffs-header-font-family: var(--font-sans);

	/*
	 * A hairline rather than a fill. The renderer paints its own background from
	 * the syntax theme, and a second one behind it would show at the edges as
	 * a rim of the wrong grey — but with neither, a snippet on a white page
	 * has nothing to say where it starts.
	 */
	overflow: hidden;
	border-radius: var(--radius-md);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));
}

/* Each file in a patch is its own box, and they stack. */
.plan-content .plan-code-view diffs-container + diffs-container {
	display: block;
	margin-block-start: 0.5rem;
}

/* Source stays visible and editable beneath its preview. */
.plan-content [data-plan-source] {
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: var(--text-sm);
}

/*
 * A general sibling, not an adjacent one: the block's chrome sits between the
 * preview and the source, and a block has exactly one source anyway.
 */
.plan-content [data-plan-preview]:not(:empty) ~ [data-plan-source] {
	opacity: 0.6;
	font-size: var(--text-sm);
}

/*
 * A block formula is an editable region exactly like a code block, and has to
 * read as one: the rendered result on the page, its source in a box below.
 *
 * A code block gets that box from the generic `pre` rule, and a formula renders
 * the same structure into plain `div`s — so without this it is a bare line of
 * monospace with no background, no padding and nothing in it, and inserting one
 * looks like the command did nothing at all. The box belongs to the source
 * alone; wrapping the preview too would put the rendered formula in a grey
 * well, which is not what a diagram does.
 */
.plan-content .planMath[data-plan-inline="false"] [data-plan-source] {
	--ace-formula-inset-block: 0.75rem;
	--ace-formula-inset-inline: 1rem;

	/*
	 * No `display` here. A `div` is already block, so declaring it again buys
	 * nothing — and this selector outranks the rule that hides the source when
	 * the block is collapsed, which would keep a formula on screen forever.
	 */
	position: relative;
	background: var(--color-inset);
	border-radius: var(--radius-md);
	padding: var(--ace-formula-inset-block) var(--ace-formula-inset-inline);
	overflow-x: auto;
}

/*
 * Say what belongs in an empty one. Lexical fills an empty block with a managed
 * line break, so `:empty` never matches and the placeholder keys off that
 * instead. It sits out of flow so it cannot displace the caret in front of it,
 * which means it has to repeat the padding the caret is already inside.
 */
.plan-content
	.planMath[data-plan-inline="false"]
	[data-plan-source]:has(> br[data-lexical-managed-linebreak]:only-child)::before {
	content: "LaTeX, e.g. E = mc^2";
	position: absolute;
	inset-block-start: var(--ace-formula-inset-block);
	inset-inline-start: var(--ace-formula-inset-inline);
	color: var(--color-text-quaternary);
	pointer-events: none;
}

/*
 * Showing a result without its source.
 *
 * Not the `hidden` attribute: a formula's source sets `display: block`, which
 * outranks the user agent's rule for `hidden` and would leave it on screen.
 */
.plan-content [data-plan-collapsed] [data-plan-source] {
	display: none;
}

.plan-content [data-plan-preview] svg {
	max-width: 100%;
	height: auto;
}

/* Tabs ------------------------------------------------------------------- */

.plan-content [data-plan-chrome="tabs"] {
	margin-block-end: 0.5rem;
}

.plan-content [data-plan-panels] > [hidden] {
	display: none;
}

/* Status ----------------------------------------------------------------- */

/*
 * Floats over the end of the prose rather than taking a row from it. Never
 * interactive, so it stays out of the way of selecting the text underneath.
 */
.plan-status {
	position: absolute;
	z-index: 2;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	max-width: min(22rem, 60%);
	pointer-events: none;
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}

/*
 * A hidden state is not `display: none`: the label stays in the accessibility
 * tree so the live region keeps reporting durability. With every child
 * screen-reader-only the box collapses to nothing on screen.
 */
.plan-status[data-level="notice"] {
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: var(--color-page);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));
	box-shadow: var(--shadow-resting);
}

.plan-status-dot {
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: currentColor;
}

/* What the agent changed ------------------------------------------------- */

/*
 * Marks that take no space and add no element.
 *
 * An agent editing below the fold must not shift the sentence somebody is in
 * the middle of typing, and a mark that expires a few seconds later must not
 * shift it back. So a block is washed, and a hole is drawn in `box-shadow` on
 * the edge of the block still beside it. A `::before` rule was the obvious way
 * to draw a hole and is the wrong one: it needs the block to become a
 * containing block, which re-anchors any absolutely positioned widget chrome
 * inside it for as long as the mark is up.
 *
 * Two colours, and they mean different things. `ring` is prose that was
 * written; `muted-foreground` is structure that moved or went, where no words
 * are new. Where the agent is working *now* is not said here at all — that is
 * its cursor, which comes and goes with the turn rather than waiting to be
 * read.
 */
.plan .plan-content [data-plan-change] {
	transition: background var(--duration-linger) var(--ease-out);
}

/* Written just now. */
.plan .plan-content [data-plan-change="added"] {
	background: var(--color-brand-wash);
}

/*
 * Moved, not written. In the structural colour rather than a fainter version
 * of the one above: the words are ones the reader may already have read, and
 * saying "new, but less so" about them would not be true.
 */
.plan .plan-content [data-plan-change="moved"] {
	background: color-mix(in oklch, var(--color-text-quaternary) 9%, transparent);
}

/*
 * A hole where something was.
 *
 * One block can hold a hole above it and another below — delete the second and
 * fourth of four blocks and the third carries both — so the two sides cannot
 * each set `box-shadow`, or the cascade would keep only whichever rule came
 * last and one hairline would silently never draw. Custom properties do
 * cascade independently, so each side sets one and they compose here.
 */
.plan .plan-content [data-plan-gap-before],
.plan .plan-content [data-plan-gap-after] {
	box-shadow:
		var(--plan-gap-above, 0 0 transparent),
		var(--plan-gap-below, 0 0 transparent);
	transition: box-shadow var(--duration-linger) var(--ease-out);
}

.plan .plan-content [data-plan-gap-before="removed"] {
	--plan-gap-above: 0 -0.375rem 0 -0.3125rem var(--color-text-quaternary);
}

.plan .plan-content [data-plan-gap-after="removed"] {
	--plan-gap-below: 0 0.375rem 0 -0.3125rem var(--color-text-quaternary);
}

/*
 * Where a block left from, as opposed to where one was deleted. Fainter, since
 * nothing was lost — the content is still in the plan, further up or down.
 */
.plan .plan-content [data-plan-gap-before="vacated"] {
	--plan-gap-above: 0 -0.375rem 0 -0.34375rem color-mix(
		in oklch,
		var(--color-text-quaternary) 55%,
		transparent
	);
}

.plan .plan-content [data-plan-gap-after="vacated"] {
	--plan-gap-below: 0 0.375rem 0 -0.34375rem color-mix(
		in oklch,
		var(--color-text-quaternary) 55%,
		transparent
	);
}

/*
 * The agent wrote this block and the reader is pointing at a card that refers
 * to it.
 *
 * Only reachable where there is no Highlight API, since that is the only path
 * on which a sidecar mark touches the element's own background. The two rules
 * have equal specificity, so without saying so the later one — this file's —
 * would simply replace the earlier and the pointer would lose its wash.
 * Pointing is something the reader just did and the agent's mark is ambient,
 * so the pointer wins; the gutter bar is in `box-shadow` and survives either
 * way.
 */
.plan .plan-content [data-plan-related][data-plan-change] {
	background: var(--color-brand-wash);
}

/* Reaching the ones off screen ------------------------------------------- */

/*
 * One chip per edge, over the prose rather than in it, and only while
 * something in that direction is still unread. Opposite the status chip at the
 * bottom, which is why the lower one sits inline-start of it.
 */
.plan-changes {
	position: absolute;
	z-index: 3;
	inset-inline-start: 50%;
	translate: -50% 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	max-width: min(24rem, 80%);
}

.plan-changes[data-side="above"] {
	inset-block-start: 0.75rem;
}

.plan-changes[data-side="below"] {
	inset-block-end: 0.75rem;
	flex-direction: column-reverse;
}

.plan-changes-bar {
	display: flex;
	align-self: center;
	align-items: stretch;
	border-radius: 9999px;
	background: var(--color-page);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));
	box-shadow: var(--shadow-resting);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
	overflow: hidden;
}

.plan-changes-go,
.plan-changes-more {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	color: var(--color-text-primary);
	cursor: pointer;
}

.plan-changes-more {
	padding-inline: 0.375rem;
	border-inline-start: var(--edge-width) solid var(--color-edge);
}

.plan-changes-go:hover,
.plan-changes-more:hover {
	background: var(--color-brand-wash);
}

.plan-changes-list,
.plan-changes-empty {
	margin: 0;
	padding: 0.375rem;
	max-height: 12rem;
	overflow-y: auto;
	list-style: none;
	border-radius: var(--radius-md);
	background: var(--color-page);
	outline: var(--edge-width) solid var(--color-edge);
	outline-offset: calc(-1 * var(--edge-width));
	box-shadow: var(--shadow-overlay);
	font-size: var(--text-sm);
	line-height: var(--text-sm--line-height);
}

.plan-changes-empty {
	padding: 0.5rem 0.625rem;
	color: var(--color-text-quaternary);
}

.plan-changes-item {
	display: flex;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-sm);
}

.plan-changes-kind {
	flex: none;
	font-weight: 600;
	color: var(--color-text-tertiary);
}

/* Still waiting to be reached, as opposed to already shown and counted down. */
.plan-changes-item[data-unread] {
	background: var(--color-brand-wash);
}

.plan-changes-item[data-unread]::before {
	content: "";
	flex: none;
	width: 0.375rem;
	height: 0.375rem;
	margin-block-start: 0.4375rem;
	border-radius: 9999px;
	background: var(--color-brand);
}

.plan-changes-item[data-unread] .plan-changes-kind {
	color: var(--color-text-primary);
}

.plan-changes-item[data-kind="removed"] .plan-changes-text {
	color: var(--color-text-secondary);
	text-decoration: line-through;
}

/* One line each: this is an index, not a diff. */
.plan-changes-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}