/* ============================================================================
 * kit/frame.css — the chrome around any field.
 * Placement + styling lifted from the live Thoughtnado frame (its real class
 * names: .topbar / .qcount / .hint / .corner-mark / .footer-link / .pausebtn /
 * .pause-overlay / .ending), so a canvas on the floor looks like family from
 * frame one. The floor (engine.js) renders this chrome from config.
 * Pairs with tokens.css + tweaks.css.
 * ========================================================================== */

html,
body {
	margin: 0;
	height: 100%;
	width: 100%;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	overflow: hidden;
	cursor: crosshair;
}
body {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
/* iOS: keep the selection loupe OFF the canvas/board (it steals focus from the
   hidden typing input and freezes typing), but ON for real inputs so the email
   field + the typing input keep their caret, selection and paste. */
input,
textarea,
[contenteditable="true"] {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
}

/* ---- playfield: field + display pattern share this one movable layer, so the
   keyboard lift moves them together (no relative motion = no particle blast). The
   transition glides the lift instead of snapping. Chrome stays outside it. ---- */
#kit-playfield {
	position: fixed;
	inset: 0;
	z-index: 0;
	will-change: transform;
	/* ease-OUT (quick to move, gentle to settle) reads smoother than the default
	   ease for follow-the-keyboard motion; a touch longer so it glides, not darts. */
	transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---- the stage every field lives in; a field is a .wp root (canvas optional) ---- */
#kit-stage {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
#kit-stage .wp {
	position: absolute;
	inset: 0;
}
#kit-stage > .wp.active {
	z-index: 1;
}
#kit-stage canvas.wp-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---- progress ring (optional; shows the journey clock 0->1) ---- */
#kit-progress {
	position: fixed;
	pointer-events: none;
	z-index: 0;
	left: 50%;
	top: 8%;
	transform: translate(-50%, -50%);
	transition: opacity 480ms ease-out;
	opacity: 0;
}
#kit-progress.show {
	opacity: 1;
}
#kit-progress-arc {
	stroke-width: var(--timer-stroke, 1.5);
	transition: stroke-dashoffset 140ms linear;
}

/* ---- standing prompt (optional module) ---- */
#kit-prompt {
	position: fixed;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: min(80%, 900px);
	text-align: center;
	pointer-events: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(20px, 2.6vw, 30px);
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--fg);
	opacity: 0.92;
	font-variation-settings:
		"opsz" 30,
		"wdth" 95;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
#kit-prompt .mark {
	background: var(--marker);
	color: var(--marker-ink);
	padding: 0 0.2em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
#kit-prompt.editing {
	outline: none;
	box-shadow: 0 0 0 1px var(--cyan);
	background: rgba(63, 182, 200, 0.06);
	border-radius: 3px;
	cursor: text;
	white-space: pre-wrap;
}
body.is-author #kit-prompt {
	cursor: text;
}

/* ---- stepped sequence: the answer line under the prompt ---- */
/* The size here is the fallback for a canvas that declares no answerSize dial.
   A canvas that declares one is sized by the engine, which multiplies the dial
   by FW_TYPED_LINE_SCALE; both are the same move, so they are kept in step. */
#kit-answerline {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: min(80%, 760px);
	text-align: center;
	pointer-events: none;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 35px;
	font-variation-settings:
		"opsz" 24,
		"wdth" 100;
	/* Someone reading back a word they typed must be able to count its letters.
	   The display face joins ff, fi and fl into one glyph, so an attendee typing
	   "stuff" saw "stuf" and said so in the live session chat. The letters were
	   always in the data; only the drawing lost one. */
	font-variant-ligatures: none;
	line-height: 1.35;
	color: var(--fg);
	min-height: 1.4em;
	text-shadow:
		0 0 1px rgba(0, 0, 0, 0.95),
		0 0 3px rgba(0, 0, 0, 0.85),
		0 0 6px rgba(0, 0, 0, 0.55);
}
.kit-caret {
	display: inline-block;
	width: 3px;
	height: 1.1em;
	background: var(--cyan);
	margin-left: 2px;
	transform: translateY(0.16em);
	animation: kit-caret-blink 1s step-end infinite;
}
@keyframes kit-caret-blink {
	0%,
	60% {
		opacity: 1;
	}
	61%,
	100% {
		opacity: 0;
	}
}

/* ---- topbar (top-left): mAI canvas · canvas/field/title/build ---- */
.topbar {
	position: fixed;
	top: 18px;
	left: 18px;
	z-index: 5;
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.35;
	/* see "the status block fades while the reader is away from the top", below */
	transition:
		opacity var(--dur-panel) var(--ease),
		visibility 0s var(--ease) 0s;
}
.topbar .tb-title {
	color: var(--fg);
	font-size: 12px;
	letter-spacing: 0.04em;
	margin-bottom: 3px;
	white-space: nowrap;
}
.topbar .tb-title .brand {
	color: var(--marker);
	font-weight: 500;
}
.topbar .tb-status {
	margin-left: 9px;
	color: var(--cyan);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	vertical-align: middle;
	white-space: nowrap;
}
.topbar .wip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan);
	animation: wip-pulse 1.6s ease-in-out infinite;
}
@keyframes wip-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}
.topbar .tb-row {
	display: flex;
	gap: 8px;
	white-space: nowrap;
}
.topbar .k {
	color: var(--marker);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-weight: 500;
	min-width: 52px;
}
.topbar .v {
	color: var(--fg-soft);
	white-space: nowrap;
}
.topbar .inf {
	color: var(--muted);
}

/* ---- qcount (top-right, under the pause button) — stepped experiences ---- */
.qcount {
	position: fixed;
	top: 52px;
	right: 18px;
	z-index: 5;
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	text-align: right;
	white-space: nowrap;
	transition: opacity 400ms;
}
.qcount .num {
	color: var(--fg);
	font-size: 13px;
}
.qcount .stage {
	margin-top: 4px;
	color: var(--marker);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- chip keys (top-right, parked under the pause / skip / question counter)
   Author-only, written by the engine: the two keys that show and hide the two
   chips, so a chip hidden in an earlier session never leaves the author with no
   way back. Quiet by design, and it never takes a tap. ---- */
.chip-keys {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 86px);
	right: 18px;
	z-index: 5;
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--fg-soft);
	background: color-mix(in srgb, var(--bg) 72%, transparent);
	border-radius: 2px;
	padding: 5px 9px;
	text-align: right;
	white-space: nowrap;
}
.chip-keys[hidden] {
	display: none;
}
.chip-keys-label {
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.chip-keys-key {
	color: var(--fg);
	margin-right: 8px;
}

/* ---- hint (bottom-centre; .top parks it at the top) ---- */
.hint {
	position: fixed;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--fg-soft);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: opacity 400ms;
}
.hint.top {
	bottom: auto;
	top: 18px;
}
.hint kbd {
	font-family: var(--font-mono);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	padding: 1px 5px;
	border-radius: 2px;
	color: var(--fg-soft);
	font-size: 10px;
	letter-spacing: 0;
	text-transform: none;
}

/* ---- corner crops ---- */
.corner-mark {
	position: fixed;
	z-index: 4;
	width: 14px;
	height: 14px;
	pointer-events: none;
	color: var(--whisper);
}
.corner-mark.tl {
	top: 8px;
	left: 8px;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
}
.corner-mark.tr {
	top: 8px;
	right: 8px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}
.corner-mark.bl {
	bottom: 8px;
	left: 8px;
	border-bottom: 1px solid currentColor;
	border-left: 1px solid currentColor;
}
.corner-mark.br {
	bottom: 8px;
	right: 8px;
	border-bottom: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

/* ---- footer links (corners) ---- */
.footer-link {
	position: fixed;
	bottom: 18px;
	z-index: 5;
	pointer-events: auto;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--muted);
	text-decoration: none;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transition: color 120ms;
}
.footer-link:hover {
	color: var(--cyan);
}
.footer-copy {
	left: 18px;
}
.footer-made {
	right: 18px;
}
.footer-made .heart {
	color: var(--clay);
}
.footer-how {
	right: 18px;
	bottom: 44px;
}
.footer-how .arr {
	transition: transform 120ms;
	display: inline-block;
}
.footer-how:hover .arr {
	transform: translateX(2px);
}

/* ---- the status block fades while the reader is away from the top ----
   The status block is fixed over the viewport, and on a canvas whose content
   scrolls the words pass straight underneath it. At a phone width the column is
   nearly the whole viewport, so the two overprint each other and neither can be
   read (seen live at 360px and 390px, 29 July 2026).

   The canvas layer that owns the scrolling element reports that the reader has
   moved away from the top (engine.js: window.maiCanvasSetScrolledAwayFromTop),
   the shell puts this class on <body>, and this rule plus the transition on
   .topbar are the whole of what "faded" means. A canvas that never reports never
   gets the class, so its chrome stands exactly as it always did.

   It fades at every width — it is the behaviour Mike asked for, not a phone
   patch, and it overprints on a wide screen too. The footer links are a different
   problem with a different answer: they sit at the bottom, where words are under
   them even before anybody scrolls, so a fade tied to scrolling could not have
   cleared them. They keep still at every width, and the Message column dissolves
   above them instead — see #msg-scroll in public/message/canvas.html.

   VISIBILITY, NOT OPACITY ALONE. The author module writes an inline
   pointer-events:auto onto every chrome word it makes Alt-click editable, and an
   inline style beats any stylesheet rule — so a faded-out word would still have
   taken the tap. visibility is set nowhere else, is not overridden by a child,
   and takes the element out of hit-testing entirely. It flips at the END of the
   fade out and at the START of the fade in (the 0s delay on the base rules
   above), so neither direction of the fade is ever cut short. */
body.is-scrolled-away-from-top .topbar {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--dur-panel) var(--ease),
		visibility 0s var(--ease) var(--dur-panel);
}

/* ---- author control cluster: panel toggles stacked under the top-left chrome ---- */
#kit-authbar {
	position: fixed;
	right: 18px;
	top: 16px;
	z-index: 61;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
/* The rule above is an author declaration, so it beats the browser's own
   [hidden] { display: none } — without this the chip stays on screen when the
   engine hides it (the selector chip's "hide controls" view state). Say it
   here so `hidden` means hidden on this element. */
#kit-authbar[hidden] {
	display: none;
}
#kit-authbar .tweaks-toggle {
	position: static;
	inset: auto;
	left: auto;
	right: auto;
	bottom: auto;
	top: auto;
}
/* Author step-nav buttons (previous/next/skip/end) — chip-styled but cyan-tinted
   so they read as actions, not panel toggles. */
#kit-authbar .tweaks-toggle.authbar-nav {
	color: var(--cyan);
	border-color: #3a4a52;
}
#kit-authbar .tweaks-toggle.authbar-nav:hover {
	color: var(--cyan-hover);
	border-color: var(--cyan);
}
/* Fold header (full-width, top of the grid): collapses the whole cluster. */
#kit-authbar .authbar-fold {
	grid-column: 1 / -1;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-soft);
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 2px;
	padding: 3px 8px;
	cursor: pointer;
	text-align: center;
}
#kit-authbar .authbar-fold:hover {
	color: var(--fg-soft);
}
#kit-authbar:not(.unified).folded > * {
	display: none !important;
}
#kit-authbar:not(.unified).folded > .authbar-fold {
	display: block !important;
}

/* ---- Unified chip (opt-in): button grid header + the active panel docked below,
   as one draggable chip. Collapsing (fold) hides the controls, keeps the buttons. ---- */
#kit-authbar.unified {
	align-items: stretch;
	width: 320px;
	max-width: calc(100vw - 36px);
}
#kit-authbar.unified .authbar-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}
#kit-authbar.unified .authbar-fold {
	display: block;
}
/* the docked panels: in-flow under the buttons, full width, only the open one shows.
   Capped + scrollable so a long control list never runs off-screen — the button grid
   above stays put, the controls scroll within. */
#kit-authbar.unified .tweaks-panel {
	position: static !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	display: none;
}
#kit-authbar.unified .tweaks-panel.open {
	display: block;
}
/* collapse = only the buttons: fold hides the controls, the grid + header stay */
#kit-authbar.unified.folded .tweaks-panel {
	display: none !important;
}
/* The issue reporter's button, relocated into the author grid (8th cell):
   match the panel chips instead of the cyan floating fab. Visibility is still
   governed by #ir-fab.on (the author "Issue reporter" toggle). */
#kit-authbar #ir-fab {
	position: static;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	width: 100%;
	min-width: 0;
	justify-content: center;
	gap: 4px;
	font-size: 10px;
	padding: 5px 10px;
	color: var(--fg-soft);
	background: var(--panel);
	border-color: var(--border);
}

#kit-authbar.chip-v2 {
	--authbar-chip-width: min(var(--controls-chip-v2-layout-width, 360px), calc(100vw - 52px));
	--authbar-catalogue-slot-actions-width: calc(var(--s-24) + var(--s-16) + var(--s-4));
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
	width: var(--authbar-chip-width);
	max-width: calc(100vw - 36px);
	padding: 0;
	background: color-mix(in oklab, var(--panel) 92%, var(--bg));
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
	color: var(--fg);
	overflow: hidden;
	transform: scale(var(--controls-chip-scale, 0.72));
	transform-origin: top left;
}
#kit-authbar.chip-v2 .authbar-chip-row {
	display: grid;
	grid-template-columns: 34px repeat(4, minmax(0, 1fr)) 34px 34px;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 7px;
	white-space: nowrap;
}
#kit-authbar.chip-v2 .authbar-grip {
	width: 34px;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background:
		radial-gradient(var(--muted) 1.5px, transparent 1.6px) 5px 5px / 8px 8px,
		color-mix(in oklab, var(--bg) 62%, transparent);
	cursor: move;
}
#kit-authbar.chip-v2 .authbar-canvas-btn,
#kit-authbar.chip-v2 .authbar-slot-btn,
#kit-authbar.chip-v2 .authbar-history-btn,
#kit-authbar.chip-v2 .authbar-screen-size-add,
#kit-authbar.chip-v2 .authbar-screen-size-remove {
	appearance: none;
	height: 32px;
	box-sizing: border-box;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: var(--muted);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
#kit-authbar.chip-v2 .authbar-canvas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-width: 0;
	padding: 0 8px;
}
/* The screen size badge is a live readout, not a panel button: it spans the
   whole chip row on its own line so the four canvas buttons keep their grid. */
#kit-authbar.chip-v2 .authbar-screen-size {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
#kit-authbar.chip-v2 .authbar-screen-size-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cyan);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
}
#kit-authbar.chip-v2 .authbar-screen-size-add {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 8px;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* A set is active AND another can be added below its boundary: the add button
   takes its own line under the active set's name, so neither string is squeezed
   into an ellipsis on the narrow chip this feature exists for. */
#kit-authbar.chip-v2 .authbar-screen-size-label ~ .authbar-screen-size-add {
	flex-basis: 100%;
}
#kit-authbar.chip-v2 .authbar-screen-size-remove {
	flex: 0 0 34px;
	width: 34px;
	padding: 0;
	font-size: 16px;
	letter-spacing: 0;
}
#kit-authbar.chip-v2 .authbar-screen-size-add:hover,
#kit-authbar.chip-v2 .authbar-screen-size-remove:hover {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
#kit-authbar.chip-v2 .authbar-slots-row {
	display: grid;
	grid-template-columns: 34px repeat(4, minmax(0, 1fr)) 34px 34px;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 7px 7px;
}
#kit-authbar.chip-v2 .authbar-slot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
	padding: 0 8px;
	overflow: hidden;
	text-overflow: ellipsis;
}
#kit-authbar.chip-v2 .authbar-slot-btn:first-child {
	grid-column: 2;
}
#kit-authbar.chip-v2 .authbar-history-btn {
	width: 34px;
	padding: 0;
	font-size: 18px;
	letter-spacing: 0;
	line-height: 30px;
}
#kit-authbar.chip-v2 .authbar-canvas-btn.open,
#kit-authbar.chip-v2 .authbar-canvas-btn:hover,
#kit-authbar.chip-v2 .authbar-slot-btn.open,
#kit-authbar.chip-v2 .authbar-slot-btn:hover {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
#kit-authbar.chip-v2 .authbar-history-btn:hover:not(:disabled) {
	border-color: var(--marker);
	color: var(--marker);
}
/* Step nav (stepped canvases only): previous / next / skip / end share the row
   undo and redo sit on, taking the columns they leave empty, so the chip does
   not grow a line for them. Cyan-tinted like the old cluster's nav, because
   these move the exercise rather than change a setting. */
#kit-authbar.chip-v2 .authbar-step-nav {
	grid-column: 3 / -1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 0;
}
#kit-authbar.chip-v2 .authbar-step-btn {
	appearance: none;
	flex: 0 1 auto;
	height: 32px;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 8px;
	overflow: hidden;
	border: 1px solid color-mix(in oklab, var(--cyan) 34%, var(--rule));
	border-radius: 6px;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: color-mix(in oklab, var(--cyan) 72%, var(--muted));
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	line-height: 1;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
#kit-authbar.chip-v2 .authbar-step-btn:hover {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
#kit-authbar.chip-v2 .authbar-history-btn:disabled {
	color: var(--fg-soft);
	border-color: var(--border);
	opacity: 0.62;
	cursor: default;
}
#kit-authbar.chip-v2 .tweaks-route-tool:disabled,
#kit-authbar.chip-v2 .tweaks-catalogue-action:disabled,
#kit-authbar.chip-v2 .tweaks-catalogue-slot-action:disabled,
#kit-authbar.chip-v2 .control-point-row:disabled {
	color: var(--fg-soft);
	border-color: var(--border);
	opacity: 0.62;
	cursor: default;
}
#kit-authbar.chip-v2 .tweaks-catalogue-row:has(> .tweaks-catalogue-slot-actions) {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--authbar-catalogue-slot-actions-width));
}
/* An OPEN explanation gets the whole row and the slot actions drop below it (Mike,
   2026-07-30). Sharing the row with the slot column left the paragraph ~85px wide at
   the smallest chip size, which read two words per line. Only rows whose explainer is
   open restack, so the closed catalogue keeps its compact side-by-side shape. This
   rule must sit in the chip-v2 layer: the row-above wins over tweaks.css on
   specificity, so an override there alone never lands. */
#kit-authbar.chip-v2 .tweaks-catalogue-row.shows-explainer:has(> .tweaks-catalogue-slot-actions) {
	grid-template-columns: minmax(0, 1fr);
}
#kit-authbar.chip-v2 .tweaks-catalogue-row.shows-explainer > .tweaks-catalogue-slot-actions {
	width: var(--authbar-catalogue-slot-actions-width);
	justify-self: start;
}
/* A wide head (long label + readout + route badge) must wrap inside its own
   column, never spill under the slot actions in the next column. */
#kit-authbar.chip-v2 .tweaks-catalogue-row .tweaks-row-head {
	flex-wrap: wrap;
}
#kit-authbar.chip-v2 .tweaks-catalogue-slot-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-1);
	width: 100%;
	min-width: 0;
}
#kit-authbar.chip-v2 .tweaks-catalogue-category-slot-actions {
	flex: 0 0 var(--authbar-catalogue-slot-actions-width);
	align-self: center;
	width: var(--authbar-catalogue-slot-actions-width);
	padding: var(--s-1);
}
#kit-authbar.chip-v2 .tweaks-catalogue-slot-action {
	appearance: none;
	min-width: 0;
	padding: var(--s-1) var(--s-2);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: var(--muted);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 9px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#kit-authbar.chip-v2 .tweaks-catalogue-slot-action.is-active,
#kit-authbar.chip-v2 .tweaks-catalogue-slot-action:hover {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	color: var(--cyan);
}
#kit-authbar.chip-v2 .is-orphaned-control {
	filter: grayscale(1);
	opacity: 0.48;
}
#kit-authbar.chip-v2 .authbar-canvas-btn .ir-n {
	color: var(--marker);
}
#kit-authbar.chip-v2 .tweaks-panel {
	position: static !important;
	inset: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	display: none;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	max-height: var(--controls-chip-v2-max-height, calc(100vh - 128px));
	margin: 0 !important;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}
#kit-authbar.chip-v2 .tweaks-panel.open {
	display: flex;
}
#kit-authbar.chip-v2 .tweaks-head,
#kit-authbar.chip-v2 .tweaks-actions {
	background: var(--panel);
	z-index: 3;
}
#kit-authbar.chip-v2 .tweaks-head {
	align-items: center;
	flex-wrap: wrap;
	padding: 14px;
}
#kit-authbar.chip-v2 .tweaks-head-title {
	color: var(--cyan);
	font-weight: 400;
}
/* ---- preview-journey buttons (author): lit when auditioning an end ---- */
.preview-btn-start.active {
	color: var(--cyan);
	border-color: var(--cyan);
}
.preview-btn-end.active {
	color: var(--marker);
	border-color: var(--marker);
}

/* ---- pause button (top-right) = the save / sign-up control ---- */
.pausebtn {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 18px);
	right: 18px;
	z-index: 6;
	cursor: pointer;
	pointer-events: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-soft);
	background: rgba(12, 12, 13, 0.6);
	border: 1px solid var(--fg-soft);
	padding: 6px 13px;
	border-radius: 2px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 76px;
	transition:
		color 120ms,
		border-color 120ms,
		background 120ms;
}
.pausebtn:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}
/* Earned-loud: once there's an answer worth keeping, the keep-corner goes bold +
   bright (marker fill), per DESIGN-CHROME. Toggled via .has-work on first commit. */
.pausebtn.has-work {
	color: var(--marker-ink);
	background: var(--marker);
	border-color: var(--marker);
	font-weight: 700;
}
.pausebtn.has-work:hover {
	color: var(--marker-ink);
	border-color: var(--marker-ink);
}
.pausebtn[hidden] {
	display: none;
}

/* ---- skip button (instruction screens) ---- */
/* Skip = a quiet sibling of the pause: same size + look, parked directly under it
   (top-right). Skips the intro only. Shown on instruction screens via .show. */
.skipbtn {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 52px);
	right: 18px;
	z-index: 6;
	cursor: pointer;
	pointer-events: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-soft);
	background: rgba(12, 12, 13, 0.6);
	border: 1px solid var(--fg-soft);
	padding: 6px 13px;
	border-radius: 2px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 76px;
	transition:
		color 120ms,
		border-color 120ms,
		opacity 200ms;
}
.skipbtn:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}
.skipbtn.show {
	display: inline-flex;
}

body.is-author .tweaks-toggle {
	bottom: 50px;
}

/* ---- generic kit buttons (save bars etc.) ---- */
.kit-btn {
	appearance: none;
	cursor: pointer;
	pointer-events: auto;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: 3px;
	transition:
		filter 0.12s,
		border-color 0.12s,
		color 0.12s;
}
.kit-btn.solid {
	color: var(--marker-ink);
	background: var(--marker);
	border: 1px solid var(--marker);
}
.kit-btn.solid:hover {
	filter: brightness(1.08);
}
.kit-btn.ghost {
	color: var(--fg-soft);
	background: transparent;
	border: 1px solid var(--border);
}
.kit-btn.ghost:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}

/* ---- pause overlay (the save / create-account surface) ---- */
.pause-overlay {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(16, 16, 18, 0.74);
	-webkit-backdrop-filter: blur(7px) saturate(0.5);
	backdrop-filter: blur(7px) saturate(0.5);
	cursor: default;
	pointer-events: auto;
}
.pause-overlay.open {
	display: flex;
}
.pause-card {
	max-width: 440px;
	padding: 0 32px;
	text-align: center;
	color: var(--fg);
}
.pause-kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	white-space: nowrap;
}
.pause-kicker .dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--cyan);
}
.pause-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-variation-settings:
		"opsz" 34,
		"wdth" 95;
	margin: 0 0 16px;
}
.pause-title em {
	font-style: normal;
	color: var(--cyan);
}
.pause-title .mark,
.pause-body .mark {
	background: var(--marker);
	color: var(--marker-ink);
	padding: 0 5px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.pause-body {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-soft);
	margin: 0 auto 28px;
	max-width: 380px;
}
.pause-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.pause-cta {
	appearance: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--marker-ink);
	background: var(--marker);
	border: 1px solid var(--marker);
	padding: 11px 22px;
	border-radius: 3px;
	white-space: nowrap;
	transition:
		background 120ms,
		border-color 120ms,
		transform 120ms;
}
.pause-cta:hover {
	background: var(--marker-dark, var(--marker));
}
.pause-cta:active {
	transform: translateY(0.5px);
}
/* "Save my work" state: flip yellow → cyan so the button's change of job is
   unmistakable. Same button in both flows (email reveal, Google/signed-in
   re-render); engine.js toggles .is-save. The base transition animates it. */
.pause-cta.is-save {
	color: var(--cyan-ink);
	background: var(--cyan);
	border-color: var(--cyan);
}
.pause-cta.is-save:hover {
	background: var(--cyan-hover);
	border-color: var(--cyan-hover);
}
.pause-open {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: none;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--fg-soft);
	padding: 2px 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--border);
	white-space: nowrap;
	transition: color 120ms;
}
.pause-open:hover {
	color: var(--cyan);
}
/* The load button standing as the save button's peer, which it only does on a canvas
   that gave it a word of its own. The plain "or open a saved file" link keeps the
   footnote look it has always had. */
.pause-open.is-load {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cyan);
	border: 1px solid var(--cyan);
	border-radius: 3px;
	padding: 11px 22px;
	text-decoration: none;
}
.pause-open.is-load:hover {
	color: var(--cyan-ink);
	background: var(--cyan);
}
.pause-resume {
	appearance: none;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--fg-soft);
	padding: 8px 16px;
	border-radius: 3px;
	transition:
		color 120ms,
		border-color 120ms;
}
.pause-resume:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}
/* ---- Sign in with Google (primary option above the email flow) ---- */
.pause-google {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg-soft);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	padding: 10px 20px;
	border-radius: 3px;
	white-space: nowrap;
	transition:
		color 120ms,
		border-color 120ms,
		background 120ms;
}
.pause-google:hover {
	border-color: var(--fg-soft);
	background: rgba(255, 255, 255, 0.09);
}
.pause-google .g-icon {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0;
	/* the Google blue G — recognisable without shipping the full 4-colour logo */
	color: #4285f4;
}
.pause-or {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 180px;
	opacity: 0.55;
	color: var(--fg-soft);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.pause-or::before,
.pause-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

/* ---- shared email capture (pause + ending) ---- */
.email-cap {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
	pointer-events: auto;
}
.email-cap input[type="email"] {
	font-family: var(--font-mono);
	font-size: 13px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border);
	color: var(--fg);
	padding: 11px 14px;
	border-radius: 3px;
	min-width: 248px;
	outline: none;
	transition: border-color 120ms;
}
.email-cap input[type="email"]:focus {
	border-color: var(--cyan);
}
.email-cap input[type="email"]::placeholder {
	color: var(--muted);
}
.email-cap .email-err {
	width: 100%;
	text-align: center;
	color: var(--alert);
	font-family: var(--font-mono);
	font-size: 11px;
}

/* ---- ending board (optional module; results + credits-roll on phones) ---- */
.ending {
	position: fixed;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 64px 56px 56px;
	pointer-events: none;
	background: rgba(11, 11, 13, var(--kit-ending-veil, 0.62));
	-webkit-backdrop-filter: blur(2px) saturate(0.95);
	backdrop-filter: blur(2px) saturate(0.95);
	opacity: 0;
	transition: opacity 700ms;
}
.ending.open {
	opacity: 1;
}
.ending-head {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.18;
	letter-spacing: -0.02em;
	text-align: center;
	max-width: 900px;
	color: var(--fg);
	font-variation-settings:
		"opsz" 30,
		"wdth" 95;
	pointer-events: auto;
}
.ending-head .mark {
	background: var(--marker);
	color: var(--marker-ink);
	padding: 0 5px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.ending-cta {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.ending-btn {
	appearance: none;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--marker-ink);
	background: var(--marker);
	border: 1px solid var(--marker);
	padding: 12px 24px;
	border-radius: 3px;
	transition:
		filter 120ms,
		transform 120ms;
}
.ending-btn:hover {
	filter: brightness(1.08);
}
.ending-btn:active {
	transform: translateY(0.5px);
}
.ending-btn.secondary {
	color: var(--fg-soft);
	background: transparent;
	border-color: var(--border);
}
.ending-btn.secondary:hover {
	color: var(--cyan);
	border-color: var(--cyan);
}
.ending-subnote {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--fg-soft);
	text-align: center;
}
.ending-roll {
	display: contents;
}
.ending-encourage {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--fg-soft);
	text-align: center;
	max-width: 460px;
}
.ending-btnrow {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.ending-grid {
	display: grid;
	gap: 34px 48px;
	justify-content: center;
	max-width: 1640px;
	width: 100%;
	transform-origin: top center;
}
.ending-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ending-q {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rule);
	text-wrap: balance;
}
.ending-q .mark {
	background: var(--marker);
	color: var(--marker-ink);
	padding: 0 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.ending-answers {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ending-a {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--fg-soft);
	text-wrap: pretty;
}
.ending-a::before {
	content: "·";
	margin-right: 8px;
	color: var(--cyan);
}
[contenteditable].editing {
	outline: none;
	box-shadow: 0 0 0 1px var(--cyan);
	background: rgba(63, 182, 200, 0.06);
	border-radius: 3px;
	cursor: text;
}
body.is-author .ending-head,
body.is-author .ending-encourage,
body.is-author .ending-subnote {
	cursor: text;
}

/* mobile credits-roll: the head+grid scroll up the screen like film credits */
@media (max-width: 600px) {
	.ending {
		justify-content: flex-start;
		overflow: hidden;
	}
	.ending.rolling .ending-roll {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 26px;
		width: 100%;
		animation: ending-roll var(--ending-roll-dur, 34s) linear infinite;
	}
	.ending.rolling .ending-roll.roll-paused {
		animation-play-state: paused;
	}
	@keyframes ending-roll {
		from {
			transform: translateY(14vh);
		}
		to {
			transform: translateY(-100%);
		}
	}
	.ending-cta {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		gap: 12px;
		padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 16px;
		background: rgba(11, 11, 13, 0.94);
		-webkit-backdrop-filter: blur(8px) saturate(0.95);
		backdrop-filter: blur(8px) saturate(0.95);
		border-bottom: 1px solid var(--rule, rgba(255, 255, 255, 0.1));
	}
}

/* ---- phones: keep the chrome, clear the device bars, respect safe areas ---- */
@media (max-width: 600px) {
	.topbar {
		top: calc(env(safe-area-inset-top, 0px) + 10px);
		left: calc(env(safe-area-inset-left, 0px) + 12px);
		font-size: 10px;
		gap: 2px;
	}
	.topbar .tb-title {
		font-size: 11px;
	}
	.pausebtn {
		top: calc(env(safe-area-inset-top, 0px) + 10px);
		right: calc(env(safe-area-inset-right, 0px) + 12px);
	}
	.qcount {
		top: calc(env(safe-area-inset-top, 0px) + 44px);
		right: calc(env(safe-area-inset-right, 0px) + 12px);
	}
	.footer-how {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
		right: calc(env(safe-area-inset-right, 0px) + 12px);
	}
	.footer-copy {
		left: calc(env(safe-area-inset-left, 0px) + 12px);
		bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
	}
	.footer-made {
		display: none;
	}
	.hint {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
		width: auto;
		max-width: 92vw;
		font-size: 10px;
		text-align: center;
	}
	.hint.top {
		top: calc(env(safe-area-inset-top, 0px) + 96px);
		bottom: auto;
	}
	#kit-prompt {
		top: 6%;
		font-size: clamp(18px, 5vw, 24px);
		width: 88%;
	}
	.corner-mark {
		display: none;
	}
}

/* ========================================================================== *
 * Mobile guards (Tim's field test)
 * ========================================================================== */

/* Rotate gate: phones in landscape get a full-screen "turn upright" cover. The
   canvas is built for portrait; iPad (taller) and desktop (fine pointer) are
   excluded by the short-height + coarse-pointer query. */
.rotate-gate {
	display: none;
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
	.rotate-gate {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 9999;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 24px;
		background: var(--bg, #0c0c0d);
	}
	.rotate-gate-msg {
		font-family: var(--font-mono);
		font-size: 15px;
		letter-spacing: 0.02em;
		color: var(--fg-soft, #f1ebdb);
	}
}

/* Once questions start, drop the top-left build chrome on phones — it crowds the
   answer area and the keyboard shoves the layout into it (Tim #004). */
@media (max-width: 600px) {
	body.kit-in-questions .topbar {
		display: none;
	}
}

/* A pattern places objects on the main canvas. With no pattern selected, the
   same authored objects remain visible here as a computed reading. */
.pattern-side-tray {
	position: absolute;
	top: 96px;
	right: 18px;
	z-index: 18;
	display: grid;
	gap: var(--s-2);
	width: min(340px, calc(100vw - 36px));
	max-height: calc(100vh - 140px);
	overflow: auto;
	padding: var(--s-3);
	border: 1px solid var(--rule);
	background: var(--panel);
	color: var(--fg);
	box-shadow: var(--shadow-md);
	touch-action: auto;
}
.pattern-side-tray-title {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--muted);
}
.pattern-side-tray-object {
	padding: var(--s-3);
	border: 1px solid var(--rule);
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.45;
	background: var(--bg);
}

/* Shared real-agent session windows. A supported canvas opts into mounting these
   through CanvasKit; provider conversations remain owned by their native harness. */
.ai-session-shell-offer {
	position: fixed;
	top: 18px;
	right: 20px;
	z-index: 74;
	border: 1px solid var(--accent);
	border-radius: var(--r-sm);
	background: var(--accent);
	color: var(--accent-ink);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--tracking-caps);
	line-height: 1;
	padding: var(--s-3) var(--s-4);
	text-transform: uppercase;
}
.codex-chat-window,
.codex-chat-window *,
.claude-code-chat-window,
.claude-code-chat-window * {
	box-sizing: border-box;
}
	/* ============ real Codex task window (Mike-local only) ============ */
.codex-chat-window {
		position: fixed; top: 92px; right: 20px; z-index: 76;
		width: min(460px, calc(100vw - 24px)); height: min(680px, calc(100vh - 116px));
		display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "head" "toolbar" "history" "pending" "form";
		overflow: hidden; border: 1px solid var(--fg); border-radius: var(--r-sm);
		background: var(--panel); color: var(--fg); box-shadow: var(--shadow-lg);
		font-family: var(--font-sans);
	}
.codex-chat-window[hidden] { display: none; }
.codex-chat-head {
		grid-area: head;
		display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2);
		padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule);
		background: var(--fg); color: var(--bg); user-select: none;
	}
.codex-chat-identity { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.codex-chat-kicker,
.codex-chat-task-label,
.codex-chat-message-role {
		font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
	}
.codex-chat-kicker { color: var(--accent); }
.codex-chat-heading {
		overflow: hidden; font-family: var(--font-display); font-size: 20px; font-weight: 400;
		line-height: 1.05; text-overflow: ellipsis; white-space: nowrap;
	}
.codex-chat-close {
		flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
		font-family: var(--font-mono); font-size: 22px; line-height: 1; padding: var(--s-1);
	}
.codex-chat-status,
.codex-chat-thread-meta {
		margin: 0; padding: var(--s-2) var(--s-4); font-size: 11px; line-height: 1.4;
	}
.codex-chat-task-row {
		grid-area: task;
		display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center;
		padding: var(--s-3) var(--s-4) var(--s-1);
	}
.codex-chat-select,
.codex-chat-input {
		width: 100%; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-sm);
		background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 13px;
	}
.codex-chat-select { padding: var(--s-2); }
.codex-chat-refresh,
.codex-chat-send {
		border: 1px solid var(--fg); border-radius: var(--r-sm); cursor: pointer;
		font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
		padding: var(--s-2) var(--s-3);
	}
.codex-chat-refresh { background: transparent; color: var(--fg); }
.codex-chat-send { justify-self: end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.codex-chat-refresh:disabled,
.codex-chat-send:disabled { cursor: default; opacity: 0.45; }
.codex-chat-thread-meta {
		grid-area: meta;
		overflow: hidden; padding-top: 0; color: var(--whisper); font-family: var(--font-mono);
		text-overflow: ellipsis; white-space: nowrap;
	}
.codex-chat-status { grid-area: status; color: var(--muted); }
.codex-chat-status[data-kind="error"] { color: var(--status-alert); }
.codex-chat-status[data-kind="ready"] { color: var(--status-ok); }
.codex-chat-handoff {
		grid-area: handoff;
		margin: 0 var(--s-4) var(--s-2); padding: var(--s-3); border: 1px solid var(--status-alert);
		background: color-mix(in srgb, var(--status-alert) 10%, var(--panel));
	}
.codex-chat-handoff[hidden] { display: none; }
.codex-chat-handoff strong { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.codex-chat-handoff p { margin: var(--s-1) 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.codex-chat-messages {
		grid-area: messages;
		overflow: auto; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-3) var(--s-4);
		border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	}
.codex-chat-message { display: grid; gap: var(--s-1); max-width: 92%; }
.codex-chat-message.is-user { justify-self: end; }
.codex-chat-message.is-assistant { justify-self: start; }
.codex-chat-message-role { color: var(--muted); }
.codex-chat-message.is-user .codex-chat-message-role { text-align: right; }
.codex-chat-message-text {
		margin: 0; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-sm);
		background: var(--bg); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
	}
.codex-chat-message.is-assistant .codex-chat-message-text { border-left: 3px solid var(--accent); }
.codex-chat-empty { margin: auto; color: var(--muted); font-size: 12px; }
.codex-chat-form {
	grid-area: form;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: end;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
}
.codex-chat-input { resize: none; padding: var(--s-3); line-height: 1.45; }

	/* ============ real Claude Code session window (Mike-local only) ============ */
.claude-code-chat-window {
		position: fixed; top: 116px; left: 20px; z-index: 75;
		width: min(460px, calc(100vw - 24px)); height: min(640px, calc(100vh - 188px));
		display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto;
		grid-template-areas: "head" "toolbar" "history" "pending" "form";
		overflow: hidden; border: 1px solid var(--fg); border-radius: var(--r-sm);
		background: var(--panel); color: var(--fg); box-shadow: var(--shadow-lg);
		font-family: var(--font-sans);
	}
.claude-code-chat-window[hidden] { display: none; }
.claude-code-chat-head {
		grid-area: head;
		display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2);
		padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--fg);
		background: var(--accent); color: var(--accent-ink); user-select: none;
	}
.claude-code-chat-identity { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.claude-code-chat-kicker,
.claude-code-chat-session-label,
.claude-code-chat-message-role {
		font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
	}
.claude-code-chat-kicker { color: var(--accent-ink); }
.claude-code-chat-heading {
		overflow: hidden; font-family: var(--font-display); font-size: 20px; font-weight: 400;
		line-height: 1.05; text-overflow: ellipsis; white-space: nowrap;
	}
.claude-code-chat-close {
		flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
		font-family: var(--font-mono); font-size: 22px; line-height: 1; padding: var(--s-1);
	}
.claude-code-chat-status,
.claude-code-chat-session-meta {
		margin: 0; padding: var(--s-2) var(--s-4); font-size: 11px; line-height: 1.4;
	}
.claude-code-chat-session-row {
		grid-area: session;
		display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center;
		padding: var(--s-3) var(--s-4) var(--s-1);
	}
.claude-code-chat-select,
.claude-code-chat-input {
		width: 100%; min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-sm);
		background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 13px;
	}
.claude-code-chat-select { padding: var(--s-2); }
.claude-code-chat-refresh,
.claude-code-chat-send {
		border: 1px solid var(--fg); border-radius: var(--r-sm); cursor: pointer;
		font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-caps); text-transform: uppercase;
		padding: var(--s-2) var(--s-3);
	}
.claude-code-chat-refresh { background: transparent; color: var(--fg); }
.claude-code-chat-send {
		justify-self: end; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); white-space: nowrap;
	}
.claude-code-chat-refresh:disabled,
.claude-code-chat-send:disabled { cursor: default; opacity: 0.45; }
.claude-code-chat-session-meta {
		grid-area: meta;
		overflow: hidden; padding-top: 0; color: var(--whisper); font-family: var(--font-mono);
		text-overflow: ellipsis; white-space: nowrap;
	}
.claude-code-chat-status { grid-area: status; color: var(--muted); }
.claude-code-chat-status[data-kind="error"] { color: var(--status-alert); }
.claude-code-chat-status[data-kind="ready"] { color: var(--status-ok); }
.claude-code-chat-handoff {
		grid-area: handoff;
		margin: 0 var(--s-4) var(--s-2); padding: var(--s-3); border: 1px solid var(--status-alert);
		background: color-mix(in srgb, var(--status-alert) 10%, var(--panel));
	}
.claude-code-chat-handoff[hidden] { display: none; }
.claude-code-chat-handoff strong {
		font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-caps);
	}
.claude-code-chat-handoff p {
		margin: var(--s-1) 0 0; color: var(--muted); font-size: 12px; line-height: 1.4;
	}
.claude-code-chat-messages {
		grid-area: messages;
		overflow: auto; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-3) var(--s-4);
		border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	}
.claude-code-chat-message { display: grid; gap: var(--s-1); max-width: 92%; }
.claude-code-chat-message.is-user { justify-self: end; }
.claude-code-chat-message.is-assistant { justify-self: start; }
.claude-code-chat-message-role { color: var(--muted); }
.claude-code-chat-message.is-user .claude-code-chat-message-role { text-align: right; }
.claude-code-chat-message-text {
		margin: 0; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-sm);
		background: var(--bg); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
	}
.claude-code-chat-message.is-assistant .claude-code-chat-message-text {
		border-left: 3px solid var(--accent);
	}
.claude-code-chat-empty { margin: auto; color: var(--muted); font-size: 12px; }
.claude-code-chat-form {
	grid-area: form;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: end;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
}
.claude-code-chat-input { resize: none; padding: var(--s-3); line-height: 1.45; }

/* CanvasKit owns the shared real-agent presentation. The saved choice remains
   STACK or SIDES; narrow viewports receive STACK as a computed layout only. */
[data-ai-session-window][data-ai-session-layout="stack"] {
	right: 20px;
	left: auto;
	width: min(520px, calc(100vw - 40px));
	height: min(420px, calc((100vh - 132px) / 2));
}
[data-ai-session-window][data-ai-session-layout="stack"][data-ai-session-provider="claude-code"] {
	top: 72px;
	bottom: auto;
}
[data-ai-session-window][data-ai-session-layout="stack"][data-ai-session-provider="codex"] {
	top: auto;
	bottom: 20px;
}
[data-ai-session-window][data-ai-session-layout="sides"] {
	top: 72px;
	bottom: 20px;
	width: calc((100vw - 60px) / 2);
	height: calc(100vh - 92px);
}
[data-ai-session-window][data-ai-session-layout="sides"][data-ai-session-provider="claude-code"] {
	left: 20px;
	right: auto;
}
[data-ai-session-window][data-ai-session-layout="sides"][data-ai-session-provider="codex"] {
	left: auto;
	right: 20px;
}
[data-ai-session-window][data-ai-session-folded="true"] {
	height: auto !important;
	grid-template-rows: auto;
	grid-template-areas: "head";
}
[data-ai-session-window][data-ai-session-folded="true"] > :not([data-ai-session-header]) {
	display: none;
}
.ai-session-head-tools {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--s-2);
	margin-left: 0;
}
.ai-session-tools-host {
	display: contents;
}
.ai-session-info {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}
.ai-session-info-button {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: help;
	font-family: var(--font-mono);
	font-size: 10px;
	font-style: normal;
	line-height: 1;
	list-style: none;
}
.ai-session-info-button::-webkit-details-marker {
	display: none;
}
.ai-session-info-copy {
	position: absolute;
	top: calc(100% + var(--s-2));
	right: 0;
	z-index: 3;
	display: none;
	width: min(320px, calc(100vw - 40px));
	margin: 0;
	padding: var(--s-3);
	border: 1px solid var(--fg);
	border-radius: var(--r-sm);
	background: var(--panel);
	color: var(--fg);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
	user-select: text;
}
.ai-session-info[open] > .ai-session-info-copy,
.ai-session-info:not([data-ai-session-info-dismissed]):hover > .ai-session-info-copy {
	display: block;
}
.ai-session-layout-control {
	display: inline-flex;
	align-items: center;
	border: 1px solid currentColor;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.ai-session-layout-choice,
.ai-session-fold,
.ai-session-another,
.ai-session-capture {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: var(--tracking-caps);
	line-height: 1;
	padding: var(--s-2);
}
.ai-session-layout-choice + .ai-session-layout-choice {
	border-left: 1px solid currentColor;
}
.ai-session-layout-choice[aria-pressed="true"] {
	background: currentColor;
	color: var(--bg);
}
.claude-code-chat-head .ai-session-layout-choice[aria-pressed="true"] {
	color: var(--accent);
}
.ai-session-toolbar {
	grid-area: toolbar;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	min-width: 0;
	padding: var(--s-2) var(--s-4);
	border-bottom: 1px solid var(--rule);
}
.ai-session-toolbar .codex-chat-task-row,
.ai-session-toolbar .claude-code-chat-session-row {
	grid-area: auto;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
	padding: 0;
}
.codex-chat-task-label,
.claude-code-chat-session-label {
	display: none;
}
.ai-session-connection {
	grid-area: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--s-2);
	min-width: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.ai-session-condition {
	color: var(--muted);
}
[data-ai-session-condition="connected"] .ai-session-condition {
	color: var(--status-ok);
}
[data-ai-session-condition="reconnect-needed"] .ai-session-condition,
[data-ai-session-condition="unreachable"] .ai-session-condition {
	color: var(--status-alert);
}
.ai-session-reconnect {
	border: 1px solid currentColor;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: var(--tracking-caps);
	padding: var(--s-2);
	text-transform: uppercase;
}
.ai-session-reconnect:disabled {
	display: none;
}
.ai-session-context {
	grid-column: 1 / -1;
	display: flex;
	gap: var(--s-2);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}
.ai-session-context[hidden] {
	display: none;
}
.ai-session-context > * {
	grid-area: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai-session-progress {
	grid-column: 1 / -1;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
[data-ai-session-drive-state="running"] .ai-session-progress {
	color: var(--accent);
}
[data-ai-session-drive-state="waiting"] .ai-session-progress {
	color: var(--status-warn);
}
[data-ai-session-drive-state="completed"] .ai-session-progress {
	color: var(--status-ok);
}
.ai-session-stop,
.ai-session-pending-choice {
	border: 1px solid currentColor;
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: var(--tracking-caps);
	padding: var(--s-2);
	text-transform: uppercase;
}
.ai-session-stop:disabled {
	cursor: default;
	opacity: 0.4;
}
.ai-session-pending-request {
	grid-area: pending;
	display: grid;
	gap: var(--s-2);
	max-height: min(300px, 42vh);
	overflow: auto;
	padding: var(--s-3) var(--s-4);
	border-top: 1px solid var(--status-warn);
	background: color-mix(in srgb, var(--status-warn) 8%, var(--panel));
}
.ai-session-pending-request[hidden] {
	display: none;
}
.ai-session-pending-kind,
.ai-session-pending-status,
.ai-session-pending-payload {
	margin: 0;
}
.ai-session-pending-kind,
.ai-session-pending-status {
	color: var(--muted);
	font-size: 11px;
}
.ai-session-pending-payload {
	max-height: 140px;
	overflow: auto;
	padding: var(--s-2);
	border: 1px solid var(--rule);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: 10px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.ai-session-pending-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.ai-session-capture-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: grid;
	place-items: center;
	padding: var(--s-4);
	background: color-mix(in srgb, var(--bg) 76%, transparent);
}
.ai-session-capture-card {
	display: grid;
	gap: var(--s-3);
	width: min(620px, 100%);
	max-height: calc(100vh - var(--s-8));
	overflow: auto;
	padding: var(--s-5);
	border: 1px solid var(--fg);
	border-radius: var(--r-sm);
	background: var(--panel);
	color: var(--fg);
	box-shadow: var(--shadow-lg);
}
.ai-session-capture-card > p,
.ai-session-capture-card legend {
	margin: 0;
	color: var(--muted);
}
.ai-session-capture-text {
	width: 100%;
	min-height: 150px;
	resize: vertical;
	padding: var(--s-3);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
}
.ai-session-capture-relations {
	display: grid;
	gap: var(--s-2);
	margin: 0;
	padding: var(--s-3);
	border: 1px solid var(--rule);
}
.ai-session-capture-relations label {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-mono);
	font-size: 11px;
}
.ai-session-capture-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--s-2);
}
.ai-session-capture-actions button {
	border: 1px solid var(--fg);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--fg);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 10px;
	padding: var(--s-2) var(--s-3);
}
.ai-session-context > :first-child {
	flex: 0 1 auto;
}
.ai-session-context > :last-child {
	flex: 1 1 auto;
}
.codex-chat-status[data-kind="ready"],
.claude-code-chat-status[data-kind="ready"] {
	display: none;
}
.ai-session-history {
	grid-area: history;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-bottom: 1px solid var(--rule);
}
.ai-session-history > .codex-chat-messages,
.ai-session-history > .claude-code-chat-messages {
	grid-area: auto;
	min-width: 0;
	min-height: 0;
	overflow: visible;
	border-top: 0;
	border-bottom: 0;
}
.codex-chat-form,
.claude-code-chat-form {
	position: relative;
	z-index: 1;
	min-width: 0;
	background: var(--panel);
}
.codex-chat-form > .codex-chat-send,
.claude-code-chat-form > .claude-code-chat-send {
	align-self: end;
	justify-self: end;
	white-space: nowrap;
	text-transform: none;
}
.codex-chat-input,
.claude-code-chat-input {
	max-height: min(180px, 30vh);
	overflow-y: auto;
}
.ai-session-resize-handle {
	position: absolute;
	z-index: 4;
	display: block;
	width: 12px;
	height: 12px;
	border: 1px solid var(--fg);
	background: var(--panel);
	touch-action: none;
}
.ai-session-resize-handle.is-nw {
	top: 2px;
	left: 2px;
	cursor: nwse-resize;
}
.ai-session-resize-handle.is-ne {
	top: 2px;
	right: 2px;
	cursor: nesw-resize;
}
.ai-session-resize-handle.is-sw {
	bottom: 2px;
	left: 2px;
	cursor: nesw-resize;
}
.ai-session-resize-handle.is-se {
	right: 2px;
	bottom: 2px;
	cursor: nwse-resize;
}
[data-ai-session-window][data-ai-session-folded="true"] > .ai-session-resize-handle {
	display: none !important;
}

/* ---- live connection between a canvas and the user's local canvas machine ---- */
.ai-machine-connection {
	position: fixed;
	top: 72px;
	right: 20px;
	z-index: 77;
	display: grid;
	gap: var(--s-2);
	width: min(420px, calc(100vw - 40px));
	padding: var(--s-3);
	border: 1px solid var(--fg);
	border-radius: var(--r-sm);
	background: var(--panel);
	color: var(--fg);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-mono);
	user-select: text;
}
.ai-machine-connection[hidden] {
	display: none;
}
.ai-machine-connection-header,
.ai-machine-status-row,
.ai-machine-pairing-form,
.ai-machine-actions {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
}
.ai-machine-pairing-form[hidden] {
	display: none;
}
.ai-machine-local-pairing {
	display: grid;
	gap: var(--s-1);
	padding: var(--s-3);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	background: var(--bg);
}
.ai-machine-local-pairing[hidden] {
	display: none;
}
.ai-machine-local-pairing-label,
.ai-machine-local-pairing-expiry {
	color: var(--muted);
	font-size: 10px;
}
.ai-machine-local-pairing-label {
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.ai-machine-local-pairing-code {
	color: var(--fg);
	font-size: clamp(18px, 5vw, 24px);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.ai-machine-connection-heading {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai-machine-info,
.ai-machine-close,
.ai-machine-pairing-button,
.ai-machine-reconnect,
.ai-machine-probe {
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 10px;
	padding: var(--s-2);
	white-space: nowrap;
}
.ai-machine-info,
.ai-machine-close {
	display: grid;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	place-items: center;
	padding: 0;
}
.ai-machine-close {
	font-size: 18px;
}
.ai-machine-status-row {
	justify-content: space-between;
	font-size: 10px;
}
.ai-machine-status {
	flex: 0 0 auto;
	color: var(--muted);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.ai-machine-connection[data-condition="connected"] .ai-machine-status {
	color: var(--status-ok);
}
.ai-machine-connection[data-condition="connecting"] .ai-machine-status,
.ai-machine-connection[data-condition="reconnecting"] .ai-machine-status,
.ai-machine-connection[data-condition="pairing"] .ai-machine-status {
	color: var(--status-warn);
}
.ai-machine-observed {
	min-width: 0;
	overflow: hidden;
	color: var(--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ai-machine-pairing-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--s-2);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	text-transform: uppercase;
}
.ai-machine-actions {
	justify-content: flex-end;
}
.ai-machine-probe-result {
	min-height: 1em;
	color: var(--muted);
	font-size: 10px;
	text-align: right;
}
.ai-machine-connection button:disabled {
	cursor: default;
	opacity: 0.45;
}
@media (max-width: 480px) {
	.ai-machine-connection {
		top: 60px;
		right: var(--s-3);
		width: calc(100vw - (var(--s-3) * 2));
	}
}