@flowdular/sdk 0.1.0 → 0.2.0

package/packages/sandbox/src/styles.css

@@ -1,1573 +0,0 @@
-/* Sandbox shell. Layout only: every colour, size, and font comes from the
-   @flowdular/sdk/ui tokens so the preview matches the real application. */
-
-.sandbox {
-	display: flex;
-	/* Application bar, an optional notice, the session bar, then the work. The
-	   bars take what they need and the work takes the rest, whatever number of
-	   bars this view has, so a long transcript never pushes the composer off the
-	   screen. */
-	flex-direction: column;
-	height: 100vh;
-	min-width: 0;
-	overflow: hidden;
-	background: var(--surface);
-}
-
-.sandbox__body,
-.sandbox > .sandbox__scroll {
-	flex: 1 1 auto;
-	min-height: 0;
-}
-
-.sandbox__notice {
-	padding: 12px 18px 0;
-}
-
-.sandbox__notice:empty {
-	display: none;
-}
-
-.sandbox__bar {
-	display: flex;
-	flex: 0 0 auto;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 10px;
-	min-height: var(--topbar-h);
-	padding: 0 16px;
-	background: var(--surface);
-	border-bottom: 1px solid var(--line);
-}
-
-.sandbox__brand {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	padding: 0;
-	font-family: var(--font-sans);
-	font-size: 15px;
-	font-weight: 600;
-	color: var(--ink);
-	letter-spacing: -0.01em;
-	background: transparent;
-	border: 0;
-	cursor: pointer;
-}
-
-/* Workspace and connection, the only global controls beside the brand. */
-.workspace-menu {
-	position: relative;
-}
-
-.workspace-menu__button {
-	display: inline-flex;
-	align-items: center;
-	gap: 10px;
-	max-width: 320px;
-	padding: 8px 12px;
-	background: transparent;
-	border: 1px solid transparent;
-	border-radius: var(--r-lg);
-	cursor: pointer;
-	transition: background var(--t-fast) var(--ease);
-}
-
-.workspace-menu__button:hover,
-.workspace-menu__button[aria-expanded='true'] {
-	background: var(--surface-2);
-}
-
-.workspace-menu__label {
-	display: grid;
-	min-width: 0;
-	text-align: left;
-}
-
-.workspace-menu__label b {
-	font-size: var(--text-md);
-	font-weight: 600;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.workspace-menu__label small {
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.workspace-menu__panel {
-	position: absolute;
-	top: calc(100% + 6px);
-	right: 0;
-	z-index: 40;
-	width: 300px;
-}
-
-/* One session, its state, and the actions that belong to it. */
-.session-bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 10px;
-	padding: 10px 18px;
-	background: var(--surface);
-	border-bottom: 1px solid var(--line-2);
-}
-
-.session-bar__back {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 4px 8px 4px 4px;
-	font-family: var(--font-sans);
-	font-size: var(--text-sm);
-	font-weight: 500;
-	color: var(--ink-3);
-	background: transparent;
-	border: 0;
-	border-radius: var(--r);
-	cursor: pointer;
-}
-
-.session-bar__back:hover {
-	color: var(--ink);
-	background: var(--surface-2);
-}
-
-.session-bar__back svg {
-	transform: rotate(90deg);
-}
-
-.session-bar__title {
-	display: inline-flex;
-	align-items: baseline;
-	gap: 8px;
-	min-width: 0;
-}
-
-.session-bar__add {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 2px 6px;
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	font-weight: 600;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-	background: transparent;
-	border: 0;
-	border-radius: var(--r-sm);
-	cursor: pointer;
-	transition: color var(--t-fast) var(--ease);
-}
-
-.session-bar__add:hover:not(:disabled) {
-	color: var(--primary);
-}
-
-.session-bar__add:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
-
-.session-bar__title b {
-	font-size: var(--text-md);
-	font-weight: 600;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.session-bar__title small {
-	flex: none;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.sandbox__spacer {
-	flex: 1;
-}
-
-/* The conversation is the page. The work card floats over it on the right,
-   inside the same surface, instead of sitting in a separate panel. */
-.sandbox__body {
-	--sandbox-preview-width: clamp(
-		calc(var(--sidebar-w) * 1.5),
-		38vw,
-		calc(var(--sidebar-w) * 2.4)
-	);
-	position: relative;
-	display: grid;
-	grid-template-columns: minmax(0, 1fr);
-	min-width: 0;
-	min-height: 0;
-}
-
-.sandbox__chat {
-	display: grid;
-	grid-template-rows: minmax(0, 1fr) auto;
-	min-width: 0;
-	min-height: 0;
-}
-
-.sandbox__side {
-	position: absolute;
-	inset: 0 0 0 auto;
-	z-index: 1;
-	width: var(--sandbox-preview-width);
-	display: grid;
-	grid-template-rows: minmax(0, 1fr);
-	min-width: 0;
-	min-height: 0;
-	padding: 18px 18px 18px 0;
-}
-
-@media (min-width: 1101px) {
-	/* The card overlays the chat surface, but never its text or controls. */
-	.sandbox__chat > .sandbox__scroll,
-	.sandbox__chat > .chat__composer {
-		padding-right: calc(var(--sandbox-preview-width) + var(--content-pad));
-	}
-}
-
-@media (max-width: 1100px) {
-	.sandbox__body {
-		grid-template-columns: minmax(0, 1fr);
-	}
-
-	.sandbox__side {
-		display: none;
-	}
-}
-
-.sandbox__pane-head {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 18px;
-	background: var(--surface);
-	border-bottom: 1px solid var(--line-2);
-}
-
-.sandbox__pane-title {
-	font-size: var(--text-sm);
-	font-weight: 600;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-}
-
-/* Controls in a pane header stay compact so the header reads as a header. */
-.workbench__head .ui-select,
-.work-card__head .ui-select,
-.sandbox__pane-head .ui-select {
-	width: auto;
-	min-width: 150px;
-	max-width: 220px;
-}
-
-.sandbox__scroll {
-	min-height: 0;
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding: 18px;
-}
-
-.sandbox__column {
-	width: min(760px, 100%);
-	margin: 0 auto;
-}
-
-/* Chat */
-.chat {
-	display: grid;
-	align-content: start;
-	gap: 10px;
-}
-
-.chat__turn {
-	display: grid;
-	gap: 6px;
-	padding: 12px 14px;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-md);
-}
-
-.chat__turn--user {
-	background: var(--primary-tint);
-	border-color: var(--primary-soft);
-}
-
-.chat__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-xs);
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-}
-
-/* Which module an entry belongs to, quiet enough to ignore in a session that
-   only has one. */
-.chat__module {
-	font-size: var(--text-xs);
-	font-weight: 500;
-	letter-spacing: 0;
-	text-transform: none;
-	color: var(--ink-3);
-}
-
-.chat__text {
-	margin: 0;
-	font-size: var(--text-md);
-	line-height: 1.55;
-	white-space: pre-wrap;
-	overflow-wrap: anywhere;
-}
-
-.chat__events {
-	display: grid;
-	gap: 4px;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.chat__event {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.chat__event-text {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.chat__event--error {
-	color: var(--danger);
-}
-
-.chat__composer {
-	display: grid;
-	justify-items: center;
-	gap: 8px;
-	padding: 12px 14px;
-	background: var(--surface);
-	border-top: 1px solid var(--line);
-}
-
-.chat__composer > * {
-	width: min(760px, 100%);
-}
-
-.chat__composer-row {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 12px;
-}
-
-.chat__composer-status {
-	margin: 0;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-/* Role and agent sit with the send action, as quiet underlined pickers rather
-   than boxed controls that compete with the conversation. */
-.chat__picker {
-	height: 26px;
-	padding: 0 22px 0 2px;
-	font-family: var(--font-sans);
-	font-size: var(--text-sm);
-	font-weight: 500;
-	color: var(--ink-2);
-	appearance: none;
-	background-color: transparent;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364738F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-position: right 2px center;
-	background-size: 14px;
-	border: 0;
-	border-bottom: 1px solid var(--line);
-	border-radius: 0;
-	cursor: pointer;
-	transition: border-color var(--t-fast) var(--ease);
-}
-
-.chat__picker:hover {
-	border-bottom-color: var(--ink-3);
-}
-
-.chat__picker:focus-visible {
-	border-bottom-color: var(--primary);
-	outline: 0;
-}
-
-/* A handoff is the orchestrator speaking, not a specialist: it names who works
-   next and carries the action that starts them. */
-.chat__handoff {
-	display: grid;
-	gap: 8px;
-	padding: 12px 14px;
-	background: var(--surface);
-	border: 1px dashed var(--line);
-	border-left: 3px solid var(--primary);
-	border-radius: var(--r-md);
-}
-
-.chat__handoff--question,
-.chat__handoff--approval {
-	background: var(--warning-bg);
-	border-color: var(--warning-line);
-	border-left-color: var(--warning);
-}
-
-.chat__handoff--blocked {
-	border-left-color: var(--danger);
-}
-
-.chat__handoff--review {
-	border-left-color: var(--success);
-}
-
-.chat__handoff .ui-form__actions {
-	margin-left: 0;
-}
-
-/* The specification the operator approves, and what the session changed in it.
-   Long lists stay readable: they wrap, they never scroll sideways, and only an
-   identifier is monospaced. */
-.spec-review {
-	display: grid;
-	gap: 10px;
-	padding: 12px;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-md);
-	min-width: 0;
-}
-
-.spec-review__head {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-sm);
-}
-
-.spec-review__path {
-	font-size: var(--text-xs);
-	color: var(--ink-3);
-	overflow-wrap: anywhere;
-}
-
-.spec-review__block {
-	display: grid;
-	gap: 6px;
-	min-width: 0;
-}
-
-.spec-review__title {
-	margin: 0;
-	font-size: var(--text-xs);
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-}
-
-.spec-review__text,
-.spec-review__empty {
-	margin: 0;
-	font-size: var(--text-sm);
-	line-height: 1.5;
-	overflow-wrap: anywhere;
-}
-
-.spec-review__empty {
-	color: var(--ink-3);
-}
-
-.spec-review__facts {
-	display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
-	gap: 2px 10px;
-	margin: 0;
-	font-size: var(--text-sm);
-}
-
-.spec-review__facts dt {
-	color: var(--ink-3);
-}
-
-.spec-review__facts dd {
-	margin: 0;
-	overflow-wrap: anywhere;
-}
-
-.spec-review__changes,
-.spec-review__list {
-	display: grid;
-	gap: 4px;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	font-size: var(--text-sm);
-}
-
-.spec-review__change,
-.spec-review__item {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
-	gap: 6px;
-	padding: 3px 6px;
-	border-radius: var(--r-sm);
-	overflow-wrap: anywhere;
-}
-
-.spec-review__scenario {
-	display: grid;
-	gap: 2px;
-	padding: 6px;
-	border-radius: var(--r-sm);
-	overflow-wrap: anywhere;
-}
-
-.spec-review__change--added,
-.spec-review__item--added {
-	background: var(--success-bg);
-}
-
-.spec-review__change--removed,
-.spec-review__item--removed {
-	background: var(--danger-bg);
-}
-
-.spec-review__change--changed,
-.spec-review__item--changed {
-	background: var(--warning-bg);
-}
-
-.spec-review__sign {
-	font-family: var(--font-mono);
-	font-weight: 600;
-	color: var(--ink-3);
-}
-
-.spec-review__field {
-	font-size: var(--text-xs);
-	font-weight: 600;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-}
-
-.spec-review__value {
-	color: var(--ink-2);
-}
-
-.spec-review__ask {
-	display: grid;
-	gap: 8px;
-}
-
-/* The specification as text, for the operator who would rather fix it than
-   describe it. */
-.spec-editor {
-	display: grid;
-	grid-template-rows: auto auto minmax(0, 1fr);
-	gap: 8px;
-	height: 100%;
-	padding: 12px;
-}
-
-.spec-editor__bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-sm);
-}
-
-.spec-editor__error {
-	margin: 0;
-	font-size: var(--text-sm);
-	color: var(--danger);
-}
-
-.spec-editor__notice {
-	margin: 0;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.spec-editor__text {
-	min-height: 60vh;
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	line-height: 1.5;
-	white-space: pre;
-	resize: none;
-}
-
-/* A recovery action, kept quiet: it sits under a turn and only offers to roll
-   the workspace back to that point. */
-.chat__restore {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-}
-
-.chat__restore-toggle,
-.chat__restore-go,
-.chat__restore-cancel {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	padding: 2px 6px;
-	font-family: var(--font-sans);
-	font-size: var(--text-xs);
-	font-weight: 600;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-	color: var(--ink-3);
-	background: transparent;
-	border: 0;
-	border-radius: var(--r-sm);
-	cursor: pointer;
-	transition: color var(--t-fast) var(--ease);
-}
-
-.chat__restore-toggle:hover,
-.chat__restore-go:hover:not(:disabled),
-.chat__restore-cancel:hover:not(:disabled) {
-	color: var(--primary);
-}
-
-.chat__restore-go:disabled,
-.chat__restore-cancel:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
-
-.chat__restore-ask {
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.chat__restore-error {
-	width: 100%;
-	font-size: var(--text-sm);
-	color: var(--danger);
-}
-
-.chat__auto {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-	white-space: nowrap;
-}
-
-.chat__selection {
-	display: grid;
-	gap: 4px;
-	padding: 8px 10px;
-	font-size: var(--text-sm);
-	background: var(--primary-tint);
-	border: 1px solid var(--primary-soft);
-	border-radius: var(--r);
-}
-
-/* The attachment strip sits above the textarea: one chip per file, an image
-   thumbnail or a file icon, its name, its size, and a remove control. */
-.chat__attachments {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-
-.chat__attachment {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	max-width: 240px;
-	padding: 4px 6px 4px 4px;
-	background: var(--surface-2);
-	border: 1px solid var(--line);
-	border-radius: var(--r);
-}
-
-.chat__attachment--error {
-	border-color: var(--danger);
-	background: var(--danger-bg);
-}
-
-.chat__attachment-thumb {
-	flex: none;
-	width: 40px;
-	height: 40px;
-	object-fit: cover;
-	border-radius: var(--r-sm);
-	background: var(--surface);
-}
-
-.chat__attachment-thumb--file {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--ink-3);
-	border: 1px solid var(--line);
-}
-
-.chat__attachment-info {
-	display: grid;
-	gap: 2px;
-	min-width: 0;
-}
-
-.chat__attachment-name {
-	overflow: hidden;
-	font-size: var(--text-sm);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.chat__attachment-size {
-	font-size: var(--text-xs);
-	color: var(--ink-3);
-}
-
-.chat__attachment-remove {
-	display: flex;
-	flex: none;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	color: var(--ink-3);
-	background: transparent;
-	border: 0;
-	border-radius: var(--r-sm);
-	cursor: pointer;
-	transition: color var(--t-fast) var(--ease);
-}
-
-.chat__attachment-remove:hover {
-	color: var(--danger);
-}
-
-.chat__attachment-error {
-	width: 100%;
-	font-size: var(--text-sm);
-	color: var(--danger);
-}
-
-/* The attach button matches the quiet composer pickers, and the file input it
-   opens stays out of the layout. */
-.chat__attach {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 26px;
-	height: 26px;
-	color: var(--ink-2);
-	background: transparent;
-	border: 1px solid var(--line);
-	border-radius: var(--r-sm);
-	cursor: pointer;
-	transition:
-		color var(--t-fast) var(--ease),
-		border-color var(--t-fast) var(--ease);
-}
-
-.chat__attach:hover:not(:disabled) {
-	color: var(--primary);
-	border-color: var(--primary);
-}
-
-.chat__attach:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
-
-.chat__attach-input {
-	display: none;
-}
-
-/* The work card: preview or code, floating on the right of the conversation.
-   A click opens the same content full screen. */
-.work-card {
-	position: relative;
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr);
-	min-width: 0;
-	min-height: 0;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	box-shadow:
-		0 1px 2px rgb(16 24 40 / 6%),
-		0 18px 40px rgb(16 24 40 / 8%);
-	overflow: hidden;
-	transition:
-		box-shadow var(--t-base) var(--ease),
-		border-color var(--t-base) var(--ease);
-}
-
-.work-card:hover {
-	border-color: var(--primary-soft);
-	box-shadow:
-		0 1px 2px rgb(16 24 40 / 8%),
-		0 24px 52px rgb(16 24 40 / 12%);
-}
-
-.work-card__head {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 12px;
-	border-bottom: 1px solid var(--line-2);
-}
-
-.work-card__stage {
-	position: relative;
-	min-width: 0;
-	min-height: 0;
-	background: var(--surface-2);
-	overflow: hidden;
-}
-
-.work-card__stage--code {
-	overflow-y: auto;
-	background: var(--bg);
-}
-
-/* The preview renders at a real workspace width and is scaled to the card, so
-   the card shows the true desktop layout instead of a narrow rendering. */
-.work-card__viewport {
-	position: absolute;
-	inset: 0;
-	overflow: hidden;
-}
-
-.work-card__viewport .preview-frame {
-	width: 1440px;
-	height: 900px;
-	transform-origin: top left;
-}
-
-.work-card__open {
-	position: absolute;
-	inset: 0;
-	z-index: 2;
-	display: grid;
-	place-items: center;
-	padding: 0;
-	background: transparent;
-	border: 0;
-	cursor: zoom-in;
-}
-
-.work-card__hint {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	padding: 6px 10px;
-	font-size: var(--text-sm);
-	font-weight: 500;
-	color: var(--ink-0);
-	background: rgb(16 24 40 / 72%);
-	border-radius: var(--r);
-	opacity: 0;
-	transition: opacity var(--t-base) var(--ease);
-}
-
-.work-card__open:hover .work-card__hint,
-.work-card__open:focus-visible .work-card__hint {
-	opacity: 1;
-}
-
-.work-card__foot {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 6px;
-	padding: 8px 12px;
-	border-top: 1px solid var(--line-2);
-}
-
-/* Full-screen workbench: the same preview at working size, or the diff. */
-.workbench {
-	position: fixed;
-	inset: 0;
-	z-index: 80;
-	display: grid;
-	place-items: center;
-	padding: 24px;
-	background: rgb(12 18 34 / 55%);
-}
-
-.workbench__panel {
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr);
-	width: min(1600px, 100%);
-	height: min(960px, 100%);
-	min-width: 0;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
-	overflow: hidden;
-}
-
-.workbench__head {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	padding: 10px 14px;
-	border-bottom: 1px solid var(--line);
-}
-
-.workbench__body {
-	position: relative;
-	min-width: 0;
-	min-height: 0;
-	background: var(--surface-2);
-	overflow: hidden;
-}
-
-.workbench__body--scroll {
-	overflow-y: auto;
-	background: var(--bg);
-}
-
-.preview-frame {
-	width: 100%;
-	height: 100%;
-	border: 0;
-	background: var(--surface);
-}
-
-.preview-frame__wrap {
-	position: relative;
-	min-height: 0;
-	background: var(--surface-2);
-}
-
-.preview-frame__wrap--selecting::after {
-	position: absolute;
-	inset: 0;
-	content: '';
-	border: 2px dashed var(--primary);
-	pointer-events: none;
-}
-
-/* Eject: a delivery screen, not a banner. */
-.eject__panel {
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr) auto;
-	width: min(560px, 100%);
-	max-height: min(680px, 100%);
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
-	overflow: hidden;
-}
-
-.eject__head {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 14px 18px;
-	border-bottom: 1px solid var(--line-2);
-}
-
-.eject__title {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-lg);
-	font-weight: 600;
-}
-
-.eject__body {
-	display: grid;
-	align-content: start;
-	gap: 14px;
-	min-height: 0;
-	padding: 18px;
-	overflow-y: auto;
-}
-
-.eject__lead {
-	margin: 0;
-	font-size: var(--text-md);
-}
-
-.eject__steps {
-	display: grid;
-	gap: 8px;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.eject__step {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	font-size: var(--text-md);
-	color: var(--ink-3);
-}
-
-.eject__step--passed {
-	color: var(--ink);
-}
-
-.eject__step--failed {
-	color: var(--danger);
-}
-
-.eject__step--note {
-	color: var(--warning);
-}
-
-.eject__error {
-	display: block;
-	max-height: 40vh;
-	overflow: auto;
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	white-space: pre-wrap;
-	overflow-wrap: anywhere;
-}
-
-.eject__step--running {
-	color: var(--primary-hover);
-}
-
-.eject__step-dot {
-	width: 6px;
-	height: 6px;
-	background: var(--ink-4);
-	border-radius: 50%;
-}
-
-.eject__step-icon {
-	display: inline-grid;
-	place-items: center;
-	width: 22px;
-	height: 22px;
-	background: var(--surface-2);
-	border-radius: 50%;
-}
-
-.eject__step--passed .eject__step-icon {
-	color: var(--success);
-	background: var(--success-bg);
-}
-
-.eject__step--failed .eject__step-icon {
-	color: var(--danger);
-	background: var(--danger-bg);
-}
-
-.eject__step-icon--spin {
-	color: var(--primary);
-	background: var(--primary-tint);
-	animation: eject-spin 1.1s linear infinite;
-}
-
-@keyframes eject-spin {
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.eject__step-icon--spin {
-		animation: none;
-	}
-}
-
-.eject__step-label {
-	min-width: 0;
-	overflow-wrap: anywhere;
-}
-
-.eject__step-detail {
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-	overflow-wrap: anywhere;
-}
-
-.eject__done {
-	display: grid;
-	gap: 4px;
-	padding: 14px 16px;
-	background: var(--success-bg);
-	border: 1px solid var(--success-line);
-	border-radius: var(--r);
-}
-
-.eject__body .ui-checkbox {
-	margin-top: 4px;
-	padding-top: 10px;
-	border-top: 1px solid var(--line-2);
-}
-
-.eject__foot {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 8px;
-	padding: 12px 18px;
-	border-top: 1px solid var(--line-2);
-}
-
-/* GitHub delivery settings use the same calm, three-part modal anatomy as the
-   eject plan. Secrets stay write-only and the form remains scannable. */
-.github-settings__panel {
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr) auto;
-	width: min(720px, 100%);
-	max-height: min(760px, 100%);
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	box-shadow: 0 24px 64px rgb(16 24 40 / 24%);
-	overflow: hidden;
-}
-
-.github-settings__head,
-.github-settings__foot {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 14px 18px;
-}
-
-.github-settings__head {
-	border-bottom: 1px solid var(--line-2);
-}
-
-.github-settings__title {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-lg);
-	font-weight: 600;
-}
-
-.github-settings__body {
-	display: grid;
-	gap: 14px;
-	min-height: 0;
-	padding: 18px;
-	overflow-y: auto;
-}
-
-.github-settings__body > .ui-help {
-	margin: 0;
-}
-
-.github-settings__foot {
-	justify-content: flex-end;
-	border-top: 1px solid var(--line-2);
-}
-
-/* Session picker */
-.sessions {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr);
-	gap: 18px;
-	width: min(calc(var(--sidebar-w) * 5), 100%);
-	margin: 0 auto;
-	padding: 8px 0 24px;
-}
-
-.sessions > * {
-	min-width: 0;
-}
-
-.sessions__actions {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.5em;
-}
-
-.sessions__head {
-	display: grid;
-	gap: 6px;
-}
-
-.sessions__head h1 {
-	margin: 0;
-	font-size: var(--text-2xl);
-	letter-spacing: -0.01em;
-}
-
-.sessions__head p {
-	margin: 0;
-	font-size: var(--text-md);
-	color: var(--ink-3);
-}
-
-.sessions__start {
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
-}
-
-.sessions__brief {
-	min-height: 108px;
-	font-size: var(--text-base);
-	line-height: 1.55;
-	resize: vertical;
-}
-
-.sessions__composer {
-	display: grid;
-	gap: 10px;
-	padding: 16px;
-}
-
-.sessions__composer-row {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.sessions__blocked {
-	display: grid;
-	gap: 6px;
-	margin: 12px 0 0;
-	padding: 0;
-	list-style: none;
-}
-
-.sessions__blocked li {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.sessions__team {
-	margin: 10px 0 0;
-}
-
-.sessions__grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 12px;
-}
-
-.sessions__toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-/* The card opens the session; its actions sit in a corner of their own so a
-   click on the menu never opens the session by accident. */
-.session-card {
-	position: relative;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	transition:
-		border-color var(--t-base) var(--ease),
-		box-shadow var(--t-base) var(--ease),
-		transform var(--t-base) var(--ease);
-}
-
-.session-card:hover {
-	border-color: var(--primary-soft);
-	box-shadow: 0 8px 20px rgb(16 24 40 / 8%);
-	transform: translateY(-1px);
-}
-
-.session-card--archived {
-	opacity: 0.72;
-}
-
-.session-card__open {
-	display: grid;
-	align-content: start;
-	gap: 10px;
-	width: 100%;
-	padding: 16px 44px 16px 16px;
-	font: inherit;
-	color: inherit;
-	text-align: left;
-	background: transparent;
-	border: 0;
-	border-radius: var(--r-lg);
-	cursor: pointer;
-}
-
-.session-card__actions {
-	position: absolute;
-	top: 10px;
-	right: 10px;
-}
-
-.session-card__menu {
-	display: grid;
-	width: 28px;
-	height: 28px;
-	place-items: center;
-	color: var(--ink-3);
-	background: transparent;
-	border: 1px solid transparent;
-	border-radius: var(--r);
-	cursor: pointer;
-}
-
-.session-card__menu:hover,
-.session-card__menu[aria-expanded='true'] {
-	color: var(--ink);
-	background: var(--surface-2);
-	border-color: var(--line);
-}
-
-.session-card__panel {
-	position: absolute;
-	top: calc(100% + 4px);
-	right: 0;
-	z-index: 30;
-	width: 260px;
-}
-
-.session-card__confirm {
-	margin: 0;
-	padding: 6px 8px 10px;
-}
-
-.session-card__title {
-	display: grid;
-	gap: 2px;
-	min-width: 0;
-}
-
-.session-card__title b {
-	font-size: var(--text-base);
-	font-weight: 600;
-	overflow-wrap: anywhere;
-}
-
-.session-card__title small {
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-	overflow-wrap: anywhere;
-}
-
-.session-card__meta {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-}
-
-.session-card__meta small {
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-.session-card__foot {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	font-size: var(--text-sm);
-	color: var(--ink-3);
-}
-
-/* Diff */
-.diff {
-	display: grid;
-	gap: 12px;
-	min-width: 0;
-}
-
-.diff__group {
-	display: grid;
-	gap: 12px;
-	min-width: 0;
-}
-
-/* One header per module, so a session that spans modules reads as grouped
-   files instead of one long list. */
-.diff__module {
-	display: flex;
-	align-items: baseline;
-	gap: 8px;
-	padding: 0 2px;
-}
-
-.diff__file {
-	min-width: 0;
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-md);
-	overflow: hidden;
-}
-
-.diff__file-head {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-	background: var(--surface-2);
-	border-bottom: 1px solid var(--line);
-}
-
-.diff__path {
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	overflow-wrap: anywhere;
-}
-
-.diff__stat {
-	font-family: var(--font-mono);
-	font-size: var(--text-xs);
-}
-
-.diff__stat--add {
-	color: var(--success);
-}
-
-.diff__stat--del {
-	color: var(--danger);
-}
-
-.diff__hunk {
-	overflow-x: auto;
-	border-top: 1px solid var(--line-2);
-}
-
-.diff__hunk-header {
-	padding: 4px 12px;
-	font-family: var(--font-mono);
-	font-size: var(--text-xs);
-	color: var(--ink-3);
-	background: var(--surface-2);
-}
-
-.diff__line {
-	display: grid;
-	grid-template-columns: 48px 1fr;
-	font-family: var(--font-mono);
-	font-size: var(--text-sm);
-	line-height: 1.5;
-	white-space: pre;
-}
-
-.diff__line--add {
-	background: var(--success-bg);
-}
-
-.diff__line--del {
-	background: var(--danger-bg);
-}
-
-.diff__gutter {
-	padding: 0 8px;
-	color: var(--ink-4);
-	text-align: right;
-	user-select: none;
-}
-
-.diff__code {
-	padding: 0 12px;
-	overflow-wrap: normal;
-}
-
-/* Syntax tokens, tuned for both diff backgrounds. */
-.tok-keyword {
-	color: var(--primary-hover);
-	font-weight: 500;
-}
-
-.tok-string {
-	color: var(--success);
-}
-
-.tok-comment {
-	color: var(--ink-4);
-	font-style: italic;
-}
-
-.tok-number {
-	color: var(--warning);
-}
-
-.tok-type {
-	color: var(--brand-weft);
-}
-
-/* Connect screen */
-.connect {
-	display: grid;
-	place-items: center;
-	min-height: 100vh;
-	padding: 32px 16px;
-	background: var(--bg);
-}
-
-.connect__card {
-	width: min(560px, 100%);
-	background: var(--surface);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-}
-
-.connect__head {
-	display: grid;
-	gap: 6px;
-	padding: 22px 24px 0;
-}
-
-.connect__head h1 {
-	margin: 0;
-	font-size: var(--text-2xl);
-}
-
-.connect__head p {
-	margin: 0;
-	font-size: var(--text-md);
-	color: var(--ink-3);
-}