/* ============================================================================
 * 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);
}
/* ---- a step that holds the canvas: while a step whose own pattern declares
   `holdsTheCanvas` is on screen, the engine marks the mount it owns for step
   patterns, and the screens the running pattern has parked in the playfield
   stand back. The mark goes when the step is left, so they come back. Written
   once, here, for every pattern that declares it (stepped-sequence.js, holdTheCanvasFor). ---- */
#kit-playfield:has(> #kit-step-pattern.step-holds-the-canvas) > .orbit-con:not(.step-picture-stays),
#kit-playfield:has(> #kit-step-pattern.step-holds-the-canvas) > .orbit-anchor,
#kit-playfield:has(> #kit-step-pattern.step-holds-the-canvas) > #canvas-frame > .orbit-con:not(.step-picture-stays),
#kit-playfield:has(> #kit-step-pattern.step-holds-the-canvas) > #canvas-frame > .orbit-anchor {
	visibility: hidden;
}
/* ---- the canvas frame the words live in: on a canvas that declares
   `canvasFrame`, the running pattern is laid out on this one layer at the canvas
   frame's 1280 by 720 design size, and the engine places it with one translate
   and one scale (stepped-sequence.js, "the canvas frame the words live in"; the box is
   `frameBox` in utils.js). It sits on the playfield,
   so it lifts with the field. It takes no press of its own: the words that take
   one say so themselves, as they always have. ---- */
#canvas-frame {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: 0 0;
	pointer-events: none;
}

/* ---- 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);
}
/* ---- the long written answer, asked for by the screen, owned here ----
   A screen that takes a longer written block turns this on. The block only ever
   grows, so it is capped, the earliest lines are dissolved upward by the mask
   instead of being cut off, and the engine's own frame tick keeps it scrolled to
   the caret. Dream Write injected exactly this rule from inside its pattern under
   an html[data-reveries] attribute of its own; the typed line belongs to the
   engine, so the rule belongs here and a canvas declares that it wants it. */
#kit-answerline.kit-answerline-long {
	white-space: pre-wrap;
	max-height: 34vh;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.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 (bottom left, just above the copyright line)
   Author-only, written by the engine: the keys that show and hide the 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. Mike moved it here from the top
   right on 27 September 2026: "put them bottom left ABOVE the current chrome
   and only appear when I hover over there". The engine sets `bottom` from the
   copyright line it sits above (placeChipKeyLine); this is where it starts. ---- */
.chip-keys {
	position: fixed;
	left: calc(env(safe-area-inset-left, 0px) + 12px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms ease;
	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 6px;
	text-align: left;
	white-space: nowrap;
}
/* Touch-only devices have no hover state for this keyboard-shortcut legend. */
@media (hover: hover) and (pointer: fine) {
	.chip-keys.chip-keys-hover {
		opacity: 1;
	}
}
.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;
}

/* ---- chip buttons (top right, under the top-right buttons)
   Author-only, written by the engine: one button for each chip on the canvas,
   lit while that chip is open, and a press opens or closes it. Mike, 27
   September 2026, after closing the selector chip on his iPad and having no way
   back without a keyboard. The engine places it (placeChipButtons) below the
   top-right buttons and clear of any chip; these are where it starts. It sits
   above the controls chip (61) and selector chip (48): if a full-height PICK
   leaves no clear space at a narrow
   viewport, the placement's top-right fallback must still take a press.
   The type keeps the chips' 12px floor,
   and each button is tall enough for a finger. ---- */
.chip-buttons {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + 58px);
	right: 18px;
	z-index: 62;
	display: flex;
	width: max-content;
	max-width: calc(100vw - 36px);
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	pointer-events: auto;
}
.chip-buttons[hidden] {
	display: none;
}
.chip-buttons-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 11px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: color-mix(in oklab, var(--bg) 78%, transparent);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
@media (max-width: 600px) {
	.chip-buttons-btn {
		padding-inline: var(--s-1);
	}
}
/* The mark says open or closed before the words are read: filled while the
   chip is open, an empty ring while it is closed. */
.chip-buttons-btn::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid currentColor;
	box-sizing: border-box;
}
.chip-buttons-btn.on {
	color: var(--cyan);
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, var(--bg));
}
.chip-buttons-btn.on::before {
	background: currentColor;
}
@media (hover: hover) and (pointer: fine) {
	.chip-buttons-btn:hover {
		color: var(--cyan);
	}
}

/* ---- the chrome's words: typewriter capitals, one step larger and brighter ----
   Mike, 27 September 2026, after a morning of them in body text ("it just looks
   utterly shit. So could we change that back please? And if you want to make it
   more readable, just make the actual writing a brighter colour or slightly
   larger."). The instruction, the corner buttons, the buttons under a question,
   the pause overlay's and the ending board's buttons are back in the typewriter
   face, in capitals where they were, with their old spacing, and one step
   (about 12 percent) larger than they were. Where the writing was the surface's
   soft text colour it is now most of the way to the surface's full-strength
   text colour: both still come from the surface engine, so this is a mix of
   two computed colours, never a colour of its own. */

/* ---- 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: 13.5px;
	color: color-mix(in oklab, var(--fg) 70%, var(--fg-soft));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* A box set from the middle is given half the width to wrap in. The words
	   are one step larger, so the width they wrap at is one step wider too, and
	   every line breaks where it did at the old size. */
	width: max-content;
	max-width: 56.25vw;
	transition: opacity 400ms;
}
.hint.top {
	bottom: auto;
	top: 18px;
	text-align: center;
}
.page-watch-notice {
	position: fixed;
	bottom: 40px;
	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.04em;
	text-align: center;
}
.page-watch-notice.top {
	bottom: auto;
	top: 40px;
}
.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 #words-scroll in public/patterns/words.css.

   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;
}
#kit-authbar:not(.chip-v2) {
	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);
}

.chip-v2 {
	position: fixed;
	display: flex;
	flex-direction: column;
	top: var(--s-2);
	left: var(--s-2);
	z-index: 48;
	--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: max-content;
	min-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;
}
/* THE CHIP INK (Mike, 2 October 2026; tokens.css, CHIP TYPE). The chips stand
   on the console surface, whose words are cream and brown. Here the same four
   ink tokens are neutral and bright instead, so every rule that already names
   them follows without being touched. The shell links tokens.css before this
   file, so this wins over the console surface it pins. The Alt-click control
   point popover is the same author chrome, standing on the body. */
.chip-v2,
.control-point-popover {
	--fg: var(--chip-ink);
	--fg-soft: var(--chip-ink);
	--muted: var(--chip-ink-muted);
	--whisper: var(--chip-ink-faint);
}
/* A button's words are words, never muted, and every outline a button or a
   choice draws is the chip's outline grey. Its lit, hovered and armed colours
   are its own and still win. A step the engine is not playing keeps its step
   down on its buttons too. A segmented choice and a pin draw the frame round
   their buttons, so they take the same outline. */
.chip-v2 :is(button, select, .tweaks-segments, .tweaks-pin) {
	--muted: var(--chip-ink);
	--whisper: var(--chip-ink);
	--rule: var(--chip-outline);
	--border: var(--chip-outline);
}
.chip-v2 .is-unplayed :is(button, select) {
	--muted: var(--chip-ink-muted);
}
.chip-v2 input::placeholder {
	color: var(--chip-ink-desc);
	opacity: 1;
}
.chip-v2 .authbar-chip-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 7px 7px 4px 7px;
}
/* These existing row children retain their own lines below the buttons. */
.chip-v2 .authbar-chip-row:has(> .tweaks-size-control) {
	flex-wrap: wrap;
}
/* At the larger SIZE steps the fixed TALL rows can be wider than the chip.
   Keep the chip in the window and let a person wheel those rows sideways to
   every slot, SIZE and orientation control. WIDE gives this job to its whole
   strip scroller instead. */
.chip-v2:not(.wide) > .authbar-rows {
	flex: none;
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
/* Only the size control takes another line. Named buttons keep their
   natural widths until the viewport cap requires text to break inside them. */
.chip-v2 .authbar-chip-row > .authbar-canvas-btn,
.chip-v2 .authbar-chip-row > .authbar-slot-btn {
	flex: 1 1 min-content;
	max-width: max-content;
}
.chip-v2 .authbar-chip-row > .authbar-grip,
.chip-v2 .authbar-chip-row > .authbar-history-btn {
	flex: 0 0 34px;
}
.chip-v2 .authbar-chip-row > .authbar-history-btn {
	margin-left: auto;
}
.chip-v2 .authbar-chip-row > .authbar-history-btn ~ .authbar-history-btn {
	margin-left: 0;
}
/* Sheets and later rows stretch to the first row, without widening the chip. */
.chip-v2 > .chip-frame-body,
.chip-v2 .authbar-slots-row,
.chip-v2 .authbar-screen-size,
.chip-v2 .authbar-step-nav,
.chip-v2 .authbar-chip-row > .tweaks-size-control {
	contain: inline-size;
}
/* The selector bar is the frame body itself. Make its two shapes explicit:
   TALL is a column, while WIDE may measure its declared groups side by side. */
.chip-v2 > .chip-frame-body {
	flex-direction: column;
}
.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;
}
.chip-v2 .authbar-canvas-btn,
.chip-v2 .authbar-slot-btn,
.chip-v2 .authbar-history-btn,
.chip-v2 .authbar-screen-size-add,
.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;
}
.chip-v2 .authbar-canvas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: max-content;
	flex: 0 0 auto;
	min-width: 0;
	padding: 0 8px;
}
/* The screen size badge keeps its own full-width line below the named buttons. */
.chip-v2 .authbar-screen-size {
	flex-basis: 100%;
	order: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.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;
}
.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. */
.chip-v2 .authbar-screen-size-label ~ .authbar-screen-size-add {
	flex-basis: 100%;
}
.chip-v2 .authbar-screen-size-remove {
	flex: 0 0 34px;
	width: 34px;
	padding: 0;
	font-size: 16px;
	letter-spacing: 0;
}
@media (hover: hover) {
	.chip-v2 .authbar-screen-size-add:hover,
	.chip-v2 .authbar-screen-size-remove:hover {
		border-color: color-mix(in oklab, var(--cyan) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
}
.chip-v2 .authbar-slots-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 7px 7px 45px;
}
.chip-v2 .authbar-search-row {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 0 7px 7px 45px;
}
.chip-v2 .authbar-chip-search {
	width: 100%;
	min-width: 0;
	appearance: none;
	border: var(--b-hair) solid var(--border);
	border-radius: var(--r-sm);
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: var(--fg);
	font-family: var(--font-mono);
	font-variant-ligatures: no-contextual;
	font-size: var(--t-xs);
	line-height: 1.4;
	padding: var(--s-2);
}
.chip-v2 .authbar-chip-search:focus {
	outline: none;
	border-color: var(--marker);
}
.chip-v2 .authbar-size-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	padding: 0 7px 7px 7px;
	contain: inline-size;
	min-width: 0;
}
.chip-v2:not(.wide) .authbar-size-row {
	/* The main TALL chip has a 404px content band at the current size step.
	   TALL/WIDE live inside that band so adding the words cannot shrink the
	   slider or move the history buttons. WIDE has no size row: its SIZE sits
	   at the strip's right end. */
	min-width: 404px;
}
.chip-v2 .authbar-slot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: max-content;
	flex: 0 0 auto;
	padding: 0 8px;
}
/* A name longer than a whole row stays readable on additional text lines. */
.chip-v2 .authbar-canvas-btn,
.chip-v2 .authbar-slot-btn {
	max-width: 100%;
	min-height: 32px;
	height: auto;
	white-space: normal;
	overflow-wrap: anywhere;
}
.chip-v2 .authbar-history-btn {
	width: 34px;
	padding: 0;
	font-size: 18px;
	letter-spacing: 0;
	line-height: 30px;
}
.chip-v2 .authbar-canvas-btn.open,
.chip-v2 .authbar-slot-btn.open {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
@media (hover: hover) {
	.chip-v2 .authbar-canvas-btn.open:hover,
	.chip-v2 .authbar-slot-btn.open:hover {
		border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
		background: color-mix(in oklab, var(--cyan) 16%, transparent);
		color: var(--cyan);
	}
	.chip-v2 .authbar-canvas-btn:not(.open):hover,
	.chip-v2 .authbar-slot-btn:not(.open):hover {
		border-color: color-mix(in oklab, var(--cyan) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
	.chip-v2 .authbar-history-btn:hover:not(:disabled) {
		border-color: var(--marker);
		color: var(--marker);
	}
}
/* THE PADLOCK ON A SLOT'S TAB (Mike, 3 October 2026, Event 1920665). The tab
   is the slot's name and, joined to it on the right, a small padlock button of
   the same height: an open padlock while the slot can be changed, a closed one
   lit in the marker colour while it is locked. chip-frame.js draws both. */
.chip-v2 .authbar-slot-tab {
	display: inline-flex;
	align-items: stretch;
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
}
.chip-v2 .authbar-chip-row > .authbar-slot-tab {
	flex: 1 1 min-content;
	max-width: max-content;
}
.chip-v2 .authbar-slot-tab > .authbar-slot-btn {
	flex: 1 1 auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.chip-v2 .authbar-slot-lock {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	width: 26px;
	min-height: 32px;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid var(--rule);
	border-left: 0;
	border-radius: 0 6px 6px 0;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: var(--muted);
	cursor: pointer;
}
.chip-v2 .authbar-slot-lock svg {
	display: block;
}
.chip-v2 .authbar-slot-tab > .authbar-slot-btn.open + .authbar-slot-lock {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
}
.chip-v2 .authbar-slot-lock[aria-pressed="true"] {
	border-color: color-mix(in oklab, var(--marker) 70%, var(--border));
	background: color-mix(in oklab, var(--marker) 22%, transparent);
	color: var(--marker);
}
@media (hover: hover) {
	.chip-v2 .authbar-slot-lock:hover {
		color: var(--fg);
		background: color-mix(in oklab, var(--fg) 6%, transparent);
	}
	.chip-v2 .authbar-slot-lock[aria-pressed="true"]:hover {
		color: var(--marker);
		background: color-mix(in oklab, var(--marker) 30%, transparent);
	}
}
.chip-v2.wide .authbar-wide-grid > .authbar-slot-tab {
	width: 100%;
	height: 32px;
}
.chip-v2.wide .authbar-wide-grid > .authbar-slot-tab > .authbar-slot-btn {
	max-width: none;
	height: 32px;
	min-height: 0;
	white-space: nowrap;
}
/* A LOCKED SLOT'S CONTENTS, and a control a locked slot holds wherever it is
   drawn (PICK, a search): still there to read, its controls plainly dimmed.
   What still works (Play, Next, Previous, End, a step's row, a name or "?"
   opening its explainer, a fold) keeps its full colour. */
.chip-v2 [data-slot-locked] :is(button, input, select, textarea, [contenteditable="true"], .tweaks-fader-part, .tweaks-range-knob, .tweaks-route-track, .tweaks-route-handle, .tweaks-switch):not([data-slot-lock-passes]):not(.tweaks-row-label):not(.tweaks-q),
.chip-v2 .tweaks-row.is-slot-locked :is(button, input, select, textarea, [contenteditable="true"], .tweaks-fader-part, .tweaks-range-knob, .tweaks-route-track, .tweaks-route-handle, .tweaks-switch):not([data-slot-lock-passes]):not(.tweaks-row-label):not(.tweaks-q) {
	opacity: 0.42;
	filter: grayscale(1);
	cursor: not-allowed;
}
.chip-v2 [data-slot-locked] .cd-sb-step[data-slot-lock-passes] {
	cursor: pointer;
}
/* Chip size stays on its own row below every slot, independent of which sheet is open. */
.chip-v2 .authbar-size-row > .tweaks-size-control {
	flex-basis: 100%;
	order: 2;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) auto max-content;
	font-size: var(--t-xs);
}
.chip-v2 .authbar-size-row > .tweaks-size-control .tweaks-size-range {
	width: 100%;
}
.chip-v2 .authbar-chip-orientation {
	grid-row: 1;
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-width: max-content;
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.09em;
	line-height: 1;
}
.chip-v2 .authbar-chip-orientation-btn {
	appearance: none;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}
.chip-v2 .authbar-chip-orientation-btn.on {
	color: var(--cyan);
}
@media (hover: hover) {
	.chip-v2 .authbar-chip-orientation-btn:not(.on):hover {
		color: var(--fg);
		background: color-mix(in oklab, var(--chip-ink) 14%, transparent);
	}
}

/* WIDE IS A DOCKED STRIP (Mike, 26 September 2026; the approved drawings are
   4-world/build-machine/files/26-09-26-wide-chips-drawn). chip-frame.js docks it
   to the top or bottom edge, sets its width to the window's less the margin at
   each side and its height to the slot's wide arrangement (120 unless the slot
   declares another), and never lets what is inside grow it. These rules draw
   the inside: the grip and the chip's buttons two rows deep at the left, what
   the open slot holds across the middle, scrolling sideways when it does not
   fit, and TALL, WIDE, the close button and SIZE at the right. TALL is
   untouched by any of it: its bar keeps the wrapping row it has always had,
   so controls a group sizes to share a line (INK's widths and kind buttons)
   sit side by side. A column there stacked them, 819 to 26 September 2026. */
.chip-v2.wide {
	flex-direction: row;
	align-items: stretch;
	gap: 14px;
	padding: 10px 12px;
	overflow: visible;
	border-radius: 6px;
}
.chip-v2.wide > .authbar-rows {
	display: contents;
}
.chip-v2.wide .authbar-wide-scroll {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.chip-v2.wide .authbar-wide-start {
	order: 0;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-height: 0;
}
.chip-v2.wide .authbar-wide-search {
	width: 220px;
	align-self: center;
}
.chip-v2.wide .authbar-search-row {
	padding: 0;
}
.chip-v2.wide .authbar-wide-lead {
	display: flex;
	align-items: center;
	gap: 4px;
}
.chip-v2.wide .authbar-wide-lead > .authbar-grip {
	flex: none;
	width: 34px;
	height: 22px;
	background-position: 5px 3px, 0 0;
}
.chip-v2.wide .authbar-wide-lead > .authbar-history-btn {
	width: 28px;
	height: 22px;
	font-size: 14px;
	line-height: 20px;
}
.chip-v2.wide .authbar-wide-grids {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.chip-v2.wide .authbar-wide-grid {
	display: grid;
	grid-template-columns: repeat(var(--wide-grid-columns, 2), max-content);
	grid-auto-rows: 32px;
	gap: 4px;
}
.chip-v2.wide .authbar-wide-grid > :is(.authbar-canvas-btn, .authbar-slot-btn) {
	width: 100%;
	max-width: none;
	height: 32px;
	min-height: 0;
	white-space: nowrap;
}
.chip-v2.wide .authbar-wide-end {
	order: 2;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	min-height: 0;
}
.chip-v2.wide .authbar-wide-top {
	display: flex;
	align-items: center;
	gap: 4px;
}
.chip-v2.wide .authbar-wide-top > .authbar-history-btn {
	width: 26px;
	height: 26px;
	font-size: 14px;
	line-height: 24px;
}
.chip-v2.wide .authbar-chip-orientation {
	gap: 4px;
}
.chip-v2.wide .authbar-chip-orientation-btn {
	padding: 6px 7px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
}
.chip-v2.wide .authbar-chip-orientation-btn.on {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
}
.chip-v2.wide .authbar-wide-size > .tweaks-size-control {
	grid-template-columns: minmax(90px, 1fr) auto;
	margin-left: 0;
	font-size: var(--t-xs);
}
.chip-v2.wide .authbar-wide-size .tweaks-size-range {
	width: 100%;
}
.chip-v2.wide .authbar-wide-parts {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.chip-v2.wide .authbar-wide-parts:empty,
.chip-v2.wide .authbar-wide-panels:empty {
	display: none;
}
/* The raised groups' buttons: one under TALL, WIDE and close (STEPS' RUN
   SETTINGS); two or more stand in their own column beside them, one above
   another (SESSIONS' sends, other workshops and archived sessions), so the
   strip never grows for them. */
.chip-v2.wide .authbar-wide-panels {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}
.chip-v2.wide .authbar-wide-end:has(> .authbar-wide-panels > :nth-child(2)) {
	display: grid;
	grid-template-columns: auto auto;
	grid-auto-rows: auto;
	align-content: center;
	align-items: center;
	justify-items: end;
	column-gap: 8px;
	row-gap: 8px;
}
.chip-v2.wide .authbar-wide-end:has(> .authbar-wide-panels > :nth-child(2)) > .authbar-wide-panels {
	grid-column: 1;
	grid-row: 1 / span 3;
}
.chip-v2.wide .authbar-wide-end:has(> .authbar-wide-panels > :nth-child(2)) > :not(.authbar-wide-panels) {
	grid-column: 2;
}
.chip-v2.wide .authbar-wide-parts > .chip-frame-strip-part {
	display: flex;
	align-items: center;
	gap: 6px;
}
.chip-v2.wide .authbar-wide-parts > .chip-frame-strip-part > .cd-sb-wide-group {
	display: flex;
	align-items: center;
	gap: 6px;
}
.chip-v2.wide .authbar-wide-panel-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 7px;
	border: 1px solid var(--rule);
	border-radius: 3px;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	color: var(--muted);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	line-height: 1;
	white-space: nowrap;
}
.chip-v2.wide .authbar-wide-panel-btn.open {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
@media (hover: hover) {
	.chip-v2.wide .authbar-wide-panel-btn:not(.open):hover {
		border-color: color-mix(in oklab, var(--cyan) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
}

/* The middle of the strip: one line of the slot's content, as tall as the
   strip, scrolling sideways. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body {
	order: 1;
	/* The strip's centre must keep enough room for one reachable control. If
	   its fixed ends need more, the whole strip scrolls sideways rather than
	   collapsing the controls in the middle to nothing. */
	flex: 1 0 200px;
	min-width: 200px;
	height: 100%;
	max-height: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 0 0 14px;
	border-left: 1px solid var(--rule);
	overflow-x: auto;
	overflow-y: hidden;
	/* This middle is inside the whole-strip scroller. At its horizontal end,
	   allow the wheel to continue through the strip to SIZE and shape. */
	overscroll-behavior-x: auto;
	overscroll-behavior-y: contain;
	contain: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body > .tweaks-body,
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	width: max-content;
	height: 100%;
	padding: 0;
	flex: none;
}
/* A slot's own rows run two to a column, and the columns run sideways. A
   slider is a fader as tall as both (below), and an object that draws its own
   controls spans both. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, max-content);
	grid-auto-columns: max-content;
	align-content: center;
	gap: 6px 14px;
	height: 100%;
	flex: none;
}
/* A layout display rule must not reopen a section the owner has hidden. This
   also wins over the flex layout used by sections with growing object groups. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section[hidden],
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls[hidden],
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section.collapsed > .tweaks-section-controls {
	display: none !important;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls > .tweaks-row {
	width: 240px;
	margin: 0;
	align-self: center;
}
/* A row's standing hint is TALL's; in a strip its ? still explains it. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls > .tweaks-row > .tweaks-hint {
	display: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls > .tweaks-row-object {
	grid-row: 1 / -1;
	width: max-content;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
}
/* The slot button already names what it holds. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row-object > .tweaks-row-head {
	display: none;
}
/* Objects placed separately in one strip (Mike, 18 October 2026, build
   20261018-1531: the Toolbar tools and EDIT together in a Wide chip). Every
   object starts on the same top line, rather than a short one sitting in the
   middle beside a tall one. An object whose control carries its own words (an
   editor tool) has no row head, so its drag grip stood before it as a mark
   between every tool; in a strip it steps aside, as every other object's does
   inside its hidden head. Separately placed objects stand side by side with a
   rule between each, the way EDIT's own groups do, and the editor's tools,
   placed one by one, close up into one toolbar with no rule between them. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .tweaks-row-object) {
	align-content: start;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls > .tweaks-row-object {
	align-self: start;
	align-items: flex-start;
	padding-top: var(--s-2);
	box-sizing: border-box;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row-object > .tweaks-row-grip {
	display: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-owned-control-view:has(.tweaks-row-object) + .tweaks-owned-control-view > .tweaks-section:has(> .tweaks-section-controls > .tweaks-row-object) {
	padding-left: 14px;
	border-left: 1px solid var(--rule);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-owned-control-view:has(.cd-tool-placed) + .tweaks-owned-control-view > .tweaks-section:has(> .tweaks-section-controls > .tweaks-row-object > .cd-tool-placed) {
	margin-left: -8px;
	padding-left: 0;
	border-left: 0;
}
/* Separately placed objects run left to right and wrap onto another line when
   the next one does not fit, the way EDIT's own groups do, rather than running
   off the strip's end to be scrolled to. The strip is as tall as the lines
   (engine.js, wrappedSlotHeight). A strip holding a group that takes the
   remaining width and scrolls inside itself (STEPS' cards, SESSIONS'
   sessions) keeps its one line. TALL is not touched. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body:has(> .tweaks-body .tweaks-row-object):not(:has(.cd-sb-wide-group[data-wide-grow])) {
	overflow-x: hidden;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body:not(:has(.cd-sb-wide-group[data-wide-grow])) > .tweaks-body:has(.tweaks-row-object) {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	align-self: stretch;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	row-gap: var(--s-2);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body:not(:has(.cd-sb-wide-group[data-wide-grow])) > .tweaks-body:has(.tweaks-row-object) :is(.tweaks-section, .tweaks-section-controls) {
	height: auto;
	max-width: 100%;
}
/* Whole EDIT, which wraps its own groups, takes a line of its own across the
   strip, so it stands in one place whatever is selected: beside the editor's
   tools it would sit there with one stage selected and drop below them with
   another whose groups need more room. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body:not(:has(.cd-sb-wide-group[data-wide-grow])) > .tweaks-body:has(.tweaks-row-object) .tweaks-section:has(.tweaks-row[data-tweak-key="edit"]) {
	flex: 1 1 100%;
	padding-left: 0;
	border-left: 0;
}
/* A SLIDER IS A VERTICAL FADER in a strip (Mike, 26 September 2026: the
   approved Camera.dc.html). Each slider row is one column, like a mixing
   desk: its value above, the fader, its name below and a dot that lights while
   it is routed. tweaks.js builds the column with every slider row; here the
   rest of TALL's row steps aside for it, and a press on the name raises the
   whole TALL row. A slider set to knob shows its own knob where the fader
   would be. The faders of a section stand side by side; anything else the
   section holds (Camera's Home) comes after them. Sections stand side by side,
   a rule between each. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-body > .tweaks-section + .tweaks-section {
	padding-left: 14px;
	border-left: 1px solid var(--rule);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) {
	grid-template-rows: repeat(2, minmax(0, 1fr));
	column-gap: 4px;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) > .tweaks-row:not(.has-wide-fader) {
	order: 1;
	margin-left: 10px;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls > .tweaks-row.has-wide-fader {
	/* The column and dial share one width; padding and borders stay inside it. */
	--wide-fader-width: 76px;
	grid-row: 1 / -1;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	box-sizing: border-box;
	width: var(--wide-fader-width);
	height: 100%;
	max-height: 144px;
	min-height: 0;
	margin: 0;
	padding: 4px 2px;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: color-mix(in oklab, var(--bg) 68%, transparent);
	box-shadow: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > :not(.tweaks-fader-part) {
	display: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-part {
	display: block;
	flex: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-value {
	order: 1;
	max-width: 100%;
	overflow: hidden;
	color: var(--muted);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-track {
	--fader-t: 0;
	order: 2;
	position: relative;
	flex: 1 1 0;
	width: 40px;
	min-height: 30px;
	cursor: ns-resize;
	outline: none;
	touch-action: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-track::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 2px;
	bottom: 2px;
	width: 4px;
	border-radius: 2px;
	background: var(--rule);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-track:focus-visible::before {
	box-shadow: 0 0 0 1px var(--cyan);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-fader-fill {
	position: absolute;
	left: 18px;
	bottom: 2px;
	width: 4px;
	height: calc(var(--fader-t) * (100% - 10px) + 3px);
	border-radius: 2px;
	background: color-mix(in oklab, var(--cyan) 46%, var(--bg));
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-fader-handle {
	position: absolute;
	left: 6px;
	bottom: calc(var(--fader-t) * (100% - 10px));
	width: 28px;
	height: 10px;
	border-radius: 2px;
	background: var(--cyan);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-name {
	order: 3;
	appearance: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	max-width: 100%;
	overflow: hidden;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg-soft);
	cursor: pointer;
	font-family: var(--font-mono);
	line-height: 1.25;
	text-align: center;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
/* Size alone needs the shared type rule's rank. Colour and hover/focus keep
   their existing selectors, and numbers keep the numeric weight below. */
:is(#kit-authbar.chip-v2, .chip-v2).wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > :is(.tweaks-fader-value, .tweaks-fader-name) {
	font-size: var(--chip-word-size);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-name:hover,
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-name:focus-visible {
	color: var(--cyan);
	outline: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-route {
	order: 4;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rule);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-route.on {
	background: var(--amber);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader.is-fader-routed {
	border-color: var(--amber);
	background: color-mix(in oklab, var(--amber) 10%, var(--bg));
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader.is-fader-routed > .tweaks-fader-value {
	color: var(--amber);
}
/* A button among faders (Camera's Home) is a square the height of the
   fader's middle, as drawn. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) > .tweaks-row-button {
	grid-row: 1 / -1;
	align-self: center;
	width: 64px;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) > .tweaks-row-button :is(.tweaks-hint, .tweaks-explainer, .tweaks-q, .tweaks-row-grip) {
	display: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) > .tweaks-row-button .tweaks-row-head {
	margin: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(> .has-wide-fader) > .tweaks-row-button .tweaks-row-button-action {
	flex: none;
	width: 64px;
	height: 64px;
	padding: 4px;
	white-space: normal;
	font-size: 11px;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	gap: 14px;
	width: max-content;
	height: 100%;
	padding: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-wide-group {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
/* An editor tool placed from PICK (spatial-editor.js) stands its icon or word
   in the middle of its button. */
.cd-sb-bar.cd-tool-placed .cd-sb {
	justify-content: center;
}
/* An editor tool placed from PICK (spatial-editor.js). In a WIDE strip its
   button is as wide as its word, so a stage kind reads whole rather than cut
   to "In..." (the cut Mike saw in EDIT on 18 October 2026). */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar.cd-tool-placed .cd-sb {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar.cd-tool-placed .cd-sb > span {
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}
/* A group declaring wide: { grow: true } (STEPS' cards, SESSIONS' sessions)
   takes the width the strip has left and scrolls sideways inside itself, so
   the groups before and after it stay where they are. Everything between the
   strip's middle and that group gives up its own content width for it. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body:has(.cd-sb-wide-group[data-wide-grow]) {
	/* STEPS keeps its Add, undo and redo column to the left of a real step
	   card. The middle therefore needs more than one card by itself. It is
	   never narrower than what it holds at its smallest (the growing group at
	   its least, and the groups beside it such as Previous, NEXT and End), so
	   nothing in it is cut off where no scroll can reach; the strip scrolls
	   instead. */
	flex: 1 0 360px;
	min-width: min-content;
	overflow-x: hidden;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body :is(.tweaks-body, .tweaks-section, .tweaks-row-object, .cd-sb-bar):has(.cd-sb-wide-group[data-wide-grow]) {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(.cd-sb-wide-group[data-wide-grow]) {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-section-controls:has(.cd-sb-wide-group[data-wide-grow]) > .tweaks-row:not(:has(.cd-sb-wide-group[data-wide-grow])) {
	flex: none;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-wide-group[data-wide-grow] {
	/* The outer strip is the fallback scroll path. Keep the Add/undo/redo
	   column and a card-sized centre, so a narrow window never reduces the
	   cards to an unpressable sliver. */
	flex: 1 0 360px;
	min-width: 360px;
	/* Its width comes from the strip, never from its cards: at its smallest it
	   counts as its 360px, so the middle above can hold it and what stands
	   beside it. */
	contain: inline-size;
	align-self: stretch;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	/* This is the inner of two horizontal scrollers. Once its cards reach an
	   end, the next wheel movement continues through the whole strip. */
	overscroll-behavior-x: auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-wide-group[data-wide-columns] {
	display: grid;
	grid-template-columns: repeat(var(--wide-columns), max-content);
	gap: 6px;
}
/* In a declared grid a row of swatches or a pair of buttons gives its
   controls to the grid, so four shapes and three tools make one block. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-wide-group[data-wide-columns] > :is(.cd-sb-swrow, .cd-sb-rowpair) {
	display: contents;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-wide-group > :is(.cd-sb, .cd-sb-rowpair, .cd-sb-val, .cd-sb-swrow, .cd-sb-list, .cd-sb-textfield, .cd-sb-group-title) {
	flex: none;
	width: auto;
	min-width: 0;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-wide-group > .cd-sb-textfield {
	width: 240px;
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar > .cd-sb-sep {
	flex: 0 0 1px;
	width: 1px;
	height: auto;
	margin: 0;
	align-self: stretch;
	background: var(--rule);
}
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-rowpair,
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-swrow {
	flex-wrap: nowrap;
}
/* A list in a strip runs sideways. */
.chip-v2.wide .authbar-wide-scroll > .chip-frame-body .cd-sb-bar .cd-sb-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
}

/* The raised panel (chip-frame.js, ensureRaised): attached to the strip, above
   it when the strip is docked at the bottom and below it when docked at the
   top, drawn as TALL draws the same content. */
.chip-v2 > .chip-frame-raised {
	display: none;
}
.chip-v2.wide > .chip-frame-raised.open {
	position: absolute;
	right: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* TALL's own band: its first row never lets the chip under 404px. */
	width: max(var(--authbar-chip-width), 420px);
	max-width: 100%;
	min-height: 0;
	background: color-mix(in oklab, var(--panel) 92%, var(--bg));
	border: 1px solid var(--border);
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
	overflow: hidden;
}
.chip-v2.wide[data-chip-edge="bottom"] > .chip-frame-raised.open {
	bottom: calc(100% + 8px);
}
.chip-v2.wide[data-chip-edge="top"] > .chip-frame-raised.open {
	top: calc(100% + 8px);
}
.chip-v2 .chip-frame-raised.is-sheet > .chip-frame-raised-head {
	display: none;
}
.chip-v2 .chip-frame-raised-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 7px;
	flex: none;
}
.chip-v2 .chip-frame-raised-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--cyan);
	font-family: var(--font-mono);
	font-size: var(--t-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.chip-v2 .chip-frame-raised-close {
	width: 26px;
	height: 26px;
	font-size: 14px;
	line-height: 24px;
}
.chip-v2 .chip-frame-raised-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.chip-v2 .chip-frame-raised-body > .chip-frame-strip-part {
	display: flex;
	flex-direction: column;
	gap: var(--b-rule);
	padding: calc(var(--s-1) + var(--b-hair));
}
/* The panel's head already names a raised group; its own title is not drawn twice. */
.chip-v2 .chip-frame-raised-body > .chip-frame-strip-part > .cd-sb-wide-group > .cd-sb-group-title:first-child {
	display: none;
}
.chip-v2 .chip-frame-raised-body > .tweaks-panel {
	max-height: none;
}
.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;
}
@media (hover: hover) {
	.chip-v2 .authbar-step-btn:not(.open):hover {
		border-color: color-mix(in oklab, var(--cyan) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
}
.chip-v2 .authbar-history-btn:disabled {
	color: var(--fg-soft);
	border-color: var(--border);
	opacity: 0.62;
	cursor: default;
}
.chip-v2 .tweaks-row-button-action:disabled,
.chip-v2 .tweaks-route-tool:disabled,
.chip-v2 .tweaks-catalogue-action:disabled,
.chip-v2 .tweaks-catalogue-slot-action:disabled,
.chip-v2 .control-point-row:disabled {
	color: var(--fg-soft);
	border-color: var(--border);
	opacity: 0.62;
	cursor: default;
}
.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. */
.chip-v2 .tweaks-catalogue-row.shows-explainer:has(> .tweaks-catalogue-slot-actions) {
	grid-template-columns: minmax(0, 1fr);
}
.chip-v2 .tweaks-catalogue-row.has-control:has(.has-wide-fader) {
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}
.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. */
.chip-v2 .tweaks-catalogue-row .tweaks-row-head {
	flex-wrap: wrap;
}
.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;
}
.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);
}
/* PICK keeps the section title on its own line. Beside the slot grid,
   the chip choice takes the upper half and Show info the lower half of
   the old full-height info area. SIZE scales this same arrangement. */
.chip-v2 .tweaks-catalogue-group-head-row.has-chip-choice {
	display: grid;
	grid-template-columns: minmax(0, var(--authbar-catalogue-slot-actions-width)) minmax(0, 1fr);
}
.chip-v2 .tweaks-catalogue-group-head-row.has-chip-choice > .tweaks-catalogue-group-head {
	grid-column: 1 / -1;
	white-space: nowrap;
}
.chip-v2 .tweaks-catalogue-group-head-row.has-chip-choice > .tweaks-catalogue-category-slot-actions {
	width: 100%;
	box-sizing: border-box;
}
.chip-v2 .tweaks-catalogue-section-tools {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	min-width: 0;
}
.chip-v2 .tweaks-catalogue-group-head-row.has-chip-choice > .tweaks-catalogue-section-tools {
	grid-column: 2;
}
.chip-v2 .tweaks-catalogue-section-chip {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	min-width: 0;
}
.chip-v2 .tweaks-catalogue-section-chip > .authbar-slot-btn {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: 100%;
	padding: 0 var(--s-1);
	font-size: var(--chip-word-size);
	line-height: 1;
	white-space: nowrap;
	overflow-wrap: normal;
}
.chip-v2 .tweaks-catalogue-section-tools > .tweaks-catalogue-explanations-toggle {
	grid-row: 2;
	min-width: 0;
	line-height: 1;
}
.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;
}
.chip-v2 .tweaks-catalogue-slot-action.is-active {
	border-color: color-mix(in oklab, var(--cyan) 64%, var(--border));
	background: color-mix(in oklab, var(--cyan) 16%, transparent);
	color: var(--cyan);
}
@media (hover: hover) {
	.chip-v2 .tweaks-catalogue-slot-action:not(.is-active):hover {
		border-color: color-mix(in oklab, var(--cyan) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
}
/* SHOWN TO USERS (Mike, 27 September 2026; working words, his to rename): the
   Author's mark on a PICK row, one button the width of the slot buttons, under
   them. Lit, it wears the marker, the colour a person's page never shows the
   Author's own tuning in. engine.js, the note above CONTROL_PALETTE. */
.chip-v2 .tweaks-catalogue-shown-to-users {
	grid-column: 1 / -1;
	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;
	letter-spacing: 0.06em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}
@media (hover: hover) {
	.chip-v2 .tweaks-catalogue-shown-to-users:not(.is-active):hover {
		border-color: color-mix(in oklab, var(--marker) 48%, var(--border));
		background: color-mix(in oklab, var(--fg) 6%, transparent);
		color: var(--fg);
	}
}
.chip-v2 .tweaks-catalogue-shown-to-users.is-active {
	border-color: color-mix(in oklab, var(--marker) 70%, var(--border));
	background: color-mix(in oklab, var(--marker) 14%, transparent);
	color: var(--marker);
}
.chip-v2 .tweaks-surface-shown-to-users-actions {
	order: 4;
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	margin-top: var(--s-2);
}
.chip-v2 .is-orphaned-control {
	filter: grayscale(1);
	opacity: 0.48;
}
.chip-v2 .authbar-canvas-btn .ir-n {
	color: var(--marker);
}
/* The author chip is read at arm's length while a canvas is moving. Keep every
   word at the readable type floor, without changing the separate issue reporter
   sheet mounted inside the chip. The floor is the chip type's smallest step,
   and a button or a field is the size of the chip's words. */
#kit-authbar.chip-v2 :not(.ir-card, .ir-card *) {
	font-size: var(--chip-num-size);
}
#kit-authbar.chip-v2 :is(button, input, select, textarea, .tweaks-catalogue-label, .tweaks-control-label, .tweaks-help, .tweaks-explainer):not(.ir-card, .ir-card *) {
	font-size: var(--chip-word-size);
}
#kit-authbar.chip-v2 .ir-card :is(input, select, textarea) {
	font-size: var(--t-sm);
}
#kit-authbar.chip-v2 :is(.authbar-history-btn, .authbar-screen-size-remove) {
	font-size: 18px;
}
/* THE CHIP TYPE, option a2 (Mike, 2 October 2026, Events 1895963 and 1897043;
   the sizes are tokens.css, CHIP TYPE). Four kinds of words, on both chips:
   a control's NAME, every other WORD in the case it is typed, a DESCRIPTION,
   and a NUMBER or short TAG, which keeps the mono. Glyph buttons (the arrows,
   ×, ▶ and ›) keep their own type. Each list names the classes that carry that
   kind of word. The id inside :is() lends both chips one rank above every rule
   that sized these words before, the floor above and the selector chip's own
   sheet included. The named row's own buttons are the one exception: they are
   styled by their shared class alone on both chips, and take their size from
   the floor's button step here and from the selector chip's sheet there. These
   rules set no colour except the description's: colour comes from the chip ink
   above, so lit and armed states keep theirs. */
:is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row-label, .tweaks-label, .tweaks-catalogue-label, .tweaks-catalogue-subhead, .tweaks-control-label, .tweaks-catalogue-group-head > span:first-child, .tweaks-section-title, .cd-sb-group-title, .cd-sb-listlabel, .cd-sb-textlabel, .chip-frame-raised-title, .tweaks-pins-side-label) {
	font-family: var(--font-sans);
	font-size: var(--chip-name-size);
	font-weight: var(--chip-name-weight);
	letter-spacing: 0;
	text-transform: none;
}
/* A field's label stands on one line over its field, so it is set solid: an
   open step stays as tall as it was, and its row stays in reach. */
:is(#kit-authbar.chip-v2, .chip-v2) .cd-sb-textlabel {
	line-height: var(--lh-tight);
}
.chip-v2 .authbar-canvas-btn,
.chip-v2 .authbar-slot-btn {
	font-family: var(--font-sans);
	font-weight: var(--chip-word-weight);
	letter-spacing: 0;
	text-transform: none;
}
:is(#kit-authbar.chip-v2, .chip-v2) :is(.authbar-step-btn, .authbar-wide-panel-btn, .authbar-screen-size-add, .authbar-chip-orientation-btn, .authbar-chip-search, .tweaks-size-label, .tweaks-live, .tweaks-catalogue-slot-action, .tweaks-catalogue-shown-to-users, .tweaks-catalogue-explanations-toggle, .tweaks-display-toggle, .tweaks-row-button-action, .tweaks-action, .tweaks-catalogue-action, .tweaks-seg, .tweaks-list-add, .tweaks-pins-add, .tweaks-pin-name, .cd-sb, .cd-sb > span, .cd-sb-select, .cd-sb-step-words) {
	font-family: var(--font-sans);
	font-size: var(--chip-word-size);
	font-weight: var(--chip-word-weight);
	letter-spacing: 0;
	text-transform: none;
}
:is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-hint, .tweaks-explainer, .tweaks-help, .tweaks-route-hint, .tweaks-button-desc, .tweaks-row-note, .tweaks-declared-values-note, .tweaks-selection-empty, .tweaks-route-matrix-empty, .tweaks-pins-empty, .tweaks-lfo-empty) {
	color: var(--chip-ink-desc);
	font-family: var(--font-sans);
	font-size: var(--chip-desc-size);
	letter-spacing: 0;
	text-transform: none;
}
:is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-size-output, .tweaks-fader-value, .tweaks-num, .tweaks-route-handle, .tweaks-route-tool, .tweaks-route-badge, .tweaks-route-key, .tweaks-head-title, .tweaks-declared-value, .tweaks-range-letter, .cd-sb-step-number, .cd-sb-listmark, .cd-sb-numinput, .cd-sb-numsuffix) {
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: var(--chip-num-weight);
}
/* With every word white, a hover that only brightened a word changes nothing,
   so these show it in their ground. Lit, armed and disabled keep their own. */
@media (hover: hover) {
	.chip-v2 .tweaks-seg:not(.on):not(:disabled):hover,
	.chip-v2 .tweaks-declared-value:not(.on):not(.is-undeclared):not(:disabled):hover {
		background: color-mix(in oklab, var(--chip-ink) 14%, transparent);
	}
}
/* The issue reporter's ghost button is the quieter of its two: muted words and
   a dashed outline, so it never reads as the ordinary button beside it. */
#kit-authbar.chip-v2 .ir-card .ir-btn.ghost {
	--muted: var(--chip-ink-muted);
	border-style: dashed;
}
.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: none;
	margin: 0 !important;
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}
.chip-v2 .tweaks-panel.open {
	display: flex;
}
/* A TALL sheet lives inside the framed body and takes that body's remaining
   height; otherwise a long PICK panel grows past the bottom while intercepting
   the wheel that would reach it. Only its body scrolls. Its head and actions
   stand above and below that scroller, never stuck over it, so nothing fixed
   can cover a row that has been scrolled to: a row in view is pressable. */
.chip-v2:not(.wide) > .chip-frame-body:has(> .tweaks-panel.open) {
	display: flex;
	flex-direction: column;
}
.chip-v2:not(.wide) > .chip-frame-body > .tweaks-panel.open {
	flex: 1 1 auto;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}
.chip-v2:not(.wide) > .chip-frame-body > .tweaks-panel.open > :not(.tweaks-body) {
	flex: none;
	position: relative;
}
.chip-v2:not(.wide) > .chip-frame-body > .tweaks-panel.open > .tweaks-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.chip-v2 .tweaks-head,
.chip-v2 .tweaks-actions {
	background: var(--panel);
	z-index: 3;
}
.chip-v2 .tweaks-head {
	align-items: center;
	flex-wrap: wrap;
	padding: 14px;
}
.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;
	/* typewriter capitals, one step larger and brighter (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: color-mix(in oklab, var(--fg) 70%, 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;
	/* the same as the pause button above it */
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: color-mix(in oklab, var(--fg) 70%, 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;
}

/* ---- send to Mike pill (public/workshop/send.js) ---- */
/* The pill wears .pausebtn for the whole of its look — Mike's decision, 2
   September 2026: it belongs to the DOWNLOAD PROGRESS family and should not
   carry a second, copied version of it. This class is only what is its OWN: its
   slot, one step further down the same stack (18 → 52 → 86, the stack's own
   34px pitch), and the stacking it already had, so a dragged chip frame
   (z-index 48) cannot bury the control that opens its panel. When that stack
   has no button above the pill, the shared shell moves it into the top slot.
   No earned-loud state: this button has never had one. */
.sendbtn {
	top: calc(env(safe-area-inset-top, 0px) + 86px);
	z-index: 60;
}
/* Read the rendered stack, rather than making send.js know another parent's
   controls: only the send pill means it takes the top slot. A download pill or
   a skip button leaves its established slot untouched. */
#kit-chrome:not(:has(.pausebtn:not(.sendbtn), .skipbtn)) .sendbtn {
	top: calc(env(safe-area-inset-top, 0px) + 18px);
}
/* Show an AI shares the Download progress / Send to Mike button. Its own class
   only selects a free stack slot when those controls coexist. */
#kit-chrome:has(.pausebtn:not(.ai-session-shell-offer, .sendbtn)) .ai-session-shell-offer {
	top: calc(env(safe-area-inset-top, 0px) + 52px);
}
#kit-chrome:has(.skipbtn) .ai-session-shell-offer {
	top: calc(env(safe-area-inset-top, 0px) + 86px);
}
#kit-chrome:has(.skipbtn):has(.sendbtn) .ai-session-shell-offer {
	top: calc(env(safe-area-inset-top, 0px) + 120px);
}
/* The ending board keeps clear the slot under the send pill (the pill's own
   slot plus the stack's 34px pitch: 120 under the third slot, 52 when the pill
   has the top slot to itself), which is written by send.js onto the document
   root as it turns the pill on and off. The author's key hints used to share
   this slot; they moved to the bottom left on 27 September 2026, and the strip
   stays where it was because it is the pill's. The pill is the one thing in this
   stack that paints ABOVE the board, so when the board scrolls, cards travelled
   under the pill on their way past and it sat over the save block as well: ten of
   fifteen on a 390x844 phone, one on a 1440x900 desktop (round two review,
   3 September 2026). A scroll container clips its content at the padding box, so
   a transparent top border is a strip no card can enter, and a background paints
   across the border box, so the veil still covers the window and the look does
   not change. The class is written and removed by send.js on the document root on
   every refresh, the live switch-off included, so the strip comes and goes with
   the pill; env() and calc() re-evaluate on rotation by themselves. The rest of
   this stack sits BELOW the board and is covered BY it, which is the other way
   round and not the board's business. */
html.has-sendbtn .ending.scrolls {
	border-top: calc(env(safe-area-inset-top, 0px) + 120px) solid transparent;
}
html.has-sendbtn:not(:has(#kit-chrome .pausebtn:not(.sendbtn), #kit-chrome .skipbtn)) .ending.scrolls {
	border-top: calc(env(safe-area-inset-top, 0px) + 52px) solid transparent;
}

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;
	/* typewriter capitals, one step larger (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 13.5px;
	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;
	/* typewriter, one step larger and brighter (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: color-mix(in oklab, var(--fg) 70%, 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: 13.5px;
	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);
	/* typewriter, one step larger and brighter (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 14.5px;
	letter-spacing: 0.08em;
	color: color-mix(in oklab, var(--fg) 70%, 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;
	/* typewriter capitals, one step larger and brighter (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 13.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--fg) 70%, 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;
	/* Every word on this board may break inside itself if it has to. An answer
	   holding one unbroken run of characters used to paint as a single line wider
	   than its card and off the side of the board, where nothing could reach it:
	   the board clips sideways and the page itself never scrolls (see html, body
	   at the top of this file). On a phone it was worse still, because the single
	   column takes the width of its widest line, so one such answer dragged the
	   whole column off both edges of the screen. This sits on the board rather
	   than on the card because the heading, the encourage line and the subnote are
	   author-typed free text too, outside any card, with the same trap under them.
	   It costs an ordinary board nothing: a break inside a word only ever happens
	   when the line would otherwise overflow. */
	overflow-wrap: anywhere;
	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;
}
/* A board with more answers than one screen holds at a readable size scrolls,
   rather than being squeezed until nobody can read it or run off the sides where
   nobody can reach it. The engine turns this on: on every phone, and on a desktop
   only when the fitted board is still taller than the space. A board that already
   fits keeps exactly the centred one-screen board it has now. pointer-events go
   back on because the overlay has to be the thing the wheel and the finger are
   touching before it can scroll at all. */
.ending.scrolls {
	justify-content: flex-start;
	/* auto, never hidden: if anything ever is wider than the board in spite of the
	   wrap above, it can be reached instead of being silently swallowed. This is
	   the same rule sideways that the line below is downwards, and it is what makes
	   the fit step's width fallback mean anything. */
	overflow-x: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	pointer-events: auto;
}
.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;
	/* typewriter capitals, one step larger (see the note above .hint) */
	font-family: var(--font-mono);
	font-size: 13.5px;
	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: the head + grid are one column the person scrolls themselves, with the
   save block riding at the top of it. The block used to be pinned over the column
   while the column rolled past underneath like film credits, so a card was covered
   on its way by and could not be held still to read. It now sits first in the
   column and scrolls away with everything else, which is the one arrangement in
   which it can never cover a card. */
@media (max-width: 600px) {
	.ending-cta {
		order: -1;
		align-self: stretch;
		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);
	}
	/* The pill IS a .pausebtn, so the phone rule above would otherwise move it
	   back on top of the download button. It needs a phone rule of its own —
	   but it has to clear the button actually above it, not the slot above it.
	   .skipbtn has NO phone override, so on a phone it keeps its desktop 52 and
	   runs to 81 (every button in this stack renders 29px high). The pill's
	   first phone offset was 78, three pixels inside the skip button. It keeps
	   the desktop's own slot instead, which already clears a skip button at 52,
	   and the legend keeps the slot under it. Nothing about the download or
	   skip rules is touched. */
	.sendbtn {
		top: calc(env(safe-area-inset-top, 0px) + 86px);
	}
	#kit-chrome:not(:has(.pausebtn:not(.sendbtn), .skipbtn)) .sendbtn {
		top: calc(env(safe-area-inset-top, 0px) + 10px);
	}
	#kit-chrome:has(.pausebtn:not(.ai-session-shell-offer, .sendbtn)) .ai-session-shell-offer {
		top: calc(env(safe-area-inset-top, 0px) + 44px);
	}
	#kit-chrome:has(.skipbtn) .ai-session-shell-offer {
		top: calc(env(safe-area-inset-top, 0px) + 86px);
	}
	#kit-chrome:has(.skipbtn):has(.sendbtn) .ai-session-shell-offer {
		top: calc(env(safe-area-inset-top, 0px) + 120px);
	}
	html.has-sendbtn .topbar {
		right: calc(env(safe-area-inset-right, 0px) + 136px);
	}
	/* Reserving the button lane constrains the topbar box, but its title and
	   rows used to insist on one line and painted straight through that box.
	   Let every text-bearing part break inside the remaining phone width. */
	html.has-sendbtn .topbar .tb-title,
	html.has-sendbtn .topbar .tb-row,
	html.has-sendbtn .topbar .tb-status,
	html.has-sendbtn .topbar .v {
		white-space: normal;
		overflow-wrap: anywhere;
	}
	html.has-sendbtn .topbar .tb-row,
	html.has-sendbtn .topbar .tb-status {
		flex-wrap: wrap;
	}
	html.has-sendbtn .hint.top {
		left: calc(env(safe-area-inset-left, 0px) + 12px);
		right: calc(env(safe-area-inset-right, 0px) + 136px);
		width: auto;
		max-width: none;
		transform: none;
		text-align: center;
	}
	html.has-sendbtn:not(:has(#kit-chrome .pausebtn:not(.sendbtn), #kit-chrome .skipbtn)) .ending.scrolls {
		border-top: calc(env(safe-area-inset-top, 0px) + 44px) solid transparent;
	}
	.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;
	}
	/* The instruction takes the phone's width between the side margins, rather
	   than the half-width column a centred box is given, in the typewriter
	   capitals one step up from their old 10px. The page-watch line under it
	   follows its foot (stepped-sequence.js, placePageWatchNotice). */
	.hint {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 40px);
		left: calc(env(safe-area-inset-left, 0px) + 12px);
		right: calc(env(safe-area-inset-right, 0px) + 12px);
		transform: none;
		width: auto;
		max-width: none;
		font-size: 11.25px;
		text-align: center;
	}
	.hint.top {
		top: calc(env(safe-area-inset-top, 0px) + 96px);
		bottom: auto;
	}
	.page-watch-notice {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
		width: auto;
		max-width: 92vw;
		font-size: 10px;
	}
	.page-watch-notice.top {
		top: calc(env(safe-area-inset-top, 0px) + 118px);
		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. */
.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));
	}
}

.chip-v2.hidden { display: none; }
/* Sized frames retain the original absolute frame units; their own scale sizes text. */
.chip-v2.chip-frame-sized { transform: none; }
.chip-v2 .authbar-grip { touch-action: none; }
.chip-v2 > .chip-frame-body > .tweaks-body {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: var(--s-2);
}
.chip-v2 .chip-sheet-error {
	padding: var(--s-2);
	color: var(--alert);
	overflow-wrap: anywhere;
}
.chip-v2 .workshop-session-block,
.chip-v2 .workshop-current-choice-block,
.chip-v2 .workshop-current-field,
.chip-v2 .workshop-session-field {
	box-sizing: border-box;
	max-width: 100%;
}
.chip-v2 .workshop-session-block > *,
.chip-v2 .workshop-current-choice-block > * {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}


/* ==========================================================================
   CHIP STYLE C (Mike, 3 October 2026, Event 1923740: option C of the mockups
   in 4-world/build-machine/files/26-10-03-chip-hierarchy-options, chosen over
   colour alone and cards alone). Three parts, on both chips:
     1. COLOURS BY ROLE, from the fixed chip role tokens in tokens.css, never
        the shared --cyan, --marker and --amber a canvas surface re-tints.
     2. CARDS: each control or field group on its own card with a gap, so its
        help sentence plainly belongs to it.
     3. ONE ROW LAYOUT for every slider: the name with its value at the right;
        ROUTE, Slider, ?, + and - above the full-width track, then the
        help sentence.
   The id inside :is()
   lends both chips the rank the a2 type rules above already use, so these
   win without !important. Mike's a2 type stands: names and words in the case
   they are typed and at their a2 sizes, the readable floor kept, numbers,
   values, tags and headings in mono. Switched-on states (TALL, an open slot,
   a lit segment, Mike's step and the room's) keep their own colours.
   ========================================================================== */

/* ---- 1. COLOURS BY ROLE ---- */
/* Section headings: small cyan mono capitals, each with a rule. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-catalogue-group-head > span:first-child, .tweaks-section-title, .tweaks-head-title, .chip-frame-raised-title, .canvas-draft-shelf-chooser > span, .cd-sb-group-title:not(.workshop-current-label, .workshop-session-input-label)) {
	color: var(--chip-heading);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: 600;
	letter-spacing: var(--tracking-caps-wide);
	text-transform: uppercase;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-section-title, .cd-sb-group-title:not(.workshop-current-label, .workshop-session-input-label)) {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-section-title, .cd-sb-group-title:not(.workshop-current-label, .workshop-session-input-label))::after {
	content: "";
	order: 1;
	flex: 1 1 auto;
	height: 1px;
	background: color-mix(in oklab, var(--chip-heading) 60%, transparent);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-section-title > .tweaks-section-chev {
	order: 2;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-head, .tweaks-catalogue-group-head-row) {
	border-bottom: 1px solid color-mix(in oklab, var(--chip-heading) 60%, transparent);
}
/* Slot titles and a pattern's sub-headings (ORBITS, AXES): yellow. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-row-object > .tweaks-row-head .tweaks-label {
	color: var(--chip-title);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: 600;
	letter-spacing: var(--tracking-caps-wide);
	text-transform: uppercase;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-catalogue-subhead, .tweaks-catalogue-subhead-fold .tweaks-section-chev) {
	color: var(--chip-title);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-subhead-fold .tweaks-section-chev {
	font-size: var(--chip-num-size);
	font-weight: 600;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-subhead-row {
	border-bottom: 1px solid color-mix(in oklab, var(--chip-title) 55%, transparent);
}
/* Control names: bright white and semibold. A field's label is a name too. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row-label, .tweaks-catalogue-label, .tweaks-control-label) {
	color: var(--chip-ink);
	font-weight: var(--chip-name-weight);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.cd-sb-textlabel, .cd-sb-numlabel, .workshop-current-label, .workshop-session-input-label) {
	color: var(--chip-ink);
	font-family: var(--font-sans);
	font-size: var(--chip-word-size);
	font-weight: var(--chip-name-weight);
	letter-spacing: 0;
	text-transform: none;
}
/* Values: amber mono. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-live, .tweaks-num, .tweaks-size-output, .cd-sb-numinput, .cd-sb-choose, .cd-sb-numsuffix, .cd-sb-rowpair > .cd-sb-val, .workshop-current-input, .cd-sb-step-number) {
	color: var(--chip-value);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: var(--chip-num-weight);
}
/* Typed numbers and declared choices use the same fixed input ground. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.cd-sb-numinput, .cd-sb-choose) {
	border-color: var(--chip-outline);
	background: var(--chip-well);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.cd-sb-numinput, .cd-sb-choose):focus {
	border-color: var(--chip-heading);
}
/* A disabled selector's value and label rest with its controls. Rows
   acting on the view rather than a selected part remain live. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .cd-sb-idle :is(.cd-sb-numlabel, .cd-sb-numsuffix, .cd-sb-val) {
	opacity: 0.42;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .cd-sb-idle .cd-sb-live :is(.cd-sb-numlabel, .cd-sb-numsuffix, .cd-sb-val) {
	opacity: 1;
}
/* Help sentences: dim grey, one step smaller. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-hint, .tweaks-explainer, .tweaks-help, .tweaks-route-hint, .tweaks-button-desc, .tweaks-row-note, .tweaks-declared-values-note, .tweaks-selection-empty, .tweaks-route-matrix-empty, .tweaks-pins-empty, .tweaks-lfo-empty) {
	color: var(--chip-help);
	font-size: var(--chip-help-size);
	line-height: 1.35;
}
/* Status lines: grey mono. A session's own name and state are not status. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.cd-sb-val, .tweaks-head-sub, .tweaks-catalogue-empty, .canvas-draft-shelf-status) {
	color: var(--chip-help);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: 400;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.workshop-current-choice-name, .workshop-session-name) {
	color: var(--chip-ink);
	font-family: var(--font-sans);
	font-size: var(--chip-word-size);
	font-weight: var(--chip-name-weight);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.workshop-current-choice-state, .workshop-session-state) {
	color: var(--chip-value);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	letter-spacing: var(--tracking-caps);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-presets-row button:not(.on) {
	border-color: var(--chip-value);
	color: var(--chip-value);
}
/* An ordinary button: a cyan outline on a faint cyan ground, white words.
   Lit, armed and disabled buttons keep their own colours. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row-button-action, .tweaks-display-toggle, .tweaks-q, .tweaks-action, .tweaks-catalogue-action, .tweaks-catalogue-explanations-toggle, .authbar-screen-size-add, .canvas-draft-shelf-head > button, .cd-sb-bar > button.cd-sb, .cd-sb-rowpair > button.cd-sb, .cd-sb-wide-group > button.cd-sb, .cd-sb-wide-group button.cd-sb-listadd, .cd-sb-steps-add-main, .cd-sb-step-live):not(.chip-btn-primary, .chip-btn-danger, .on, .is-on, .is-knob, .is-armed, :disabled) {
	border: 1px solid var(--chip-heading);
	background: color-mix(in oklab, var(--chip-heading) 14%, transparent);
	color: var(--chip-ink);
}
@media (hover: hover) {
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row-button-action, .tweaks-display-toggle, .tweaks-q, .tweaks-action, .tweaks-catalogue-action, .tweaks-catalogue-explanations-toggle, .authbar-screen-size-add, .canvas-draft-shelf-head > button, .cd-sb-bar > button.cd-sb, .cd-sb-rowpair > button.cd-sb, .cd-sb-wide-group > button.cd-sb, .cd-sb-wide-group button.cd-sb-listadd, .cd-sb-steps-add-main, .cd-sb-step-live):not(.chip-btn-primary, .chip-btn-danger, .on, .is-on, .is-knob, .is-armed, :disabled):hover {
		background: color-mix(in oklab, var(--chip-heading) 30%, transparent);
	}
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row-button-action, .cd-sb-bar > button.cd-sb, .cd-sb-rowpair > button.cd-sb, .cd-sb-wide-group > button.cd-sb, .cd-sb-wide-group button.cd-sb-listadd, .cd-sb-steps-add-main, .cd-sb-step-live, .canvas-draft-shelf-head > button) {
	font-weight: var(--chip-name-weight);
}
/* A primary action (Publish new child, MINT CONTROL SET): solid yellow. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-btn-primary:not(:disabled) {
	border: 1px solid var(--chip-title);
	background: var(--chip-title);
	color: var(--chip-on-title);
	font-weight: 700;
}
@media (hover: hover) {
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-btn-primary:not(:disabled):hover {
		background: color-mix(in oklab, var(--chip-title) 82%, var(--chip-ink));
	}
}
/* A destructive action (Delete): red outline, red words. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-btn-danger:not(:disabled) {
	border: 1px solid var(--chip-danger);
	background: transparent;
	color: var(--chip-danger);
}
@media (hover: hover) {
	/* An opaque dark red ground, so the red words keep 4.5 to 1 on a card, an
	   open card or the chip (a see-through tint over a lighter card fell to
	   3.75 to 1). */
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-btn-danger:not(:disabled):hover {
		background: color-mix(in oklab, var(--chip-danger) 18%, var(--chip-well));
	}
}
/* A published status: a green mono line of its own, beside the button that
   published it (engine.js, sayPublished), never words on a button. Plain makes
   no line: the success reads on the button as it always did. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-status {
	margin: var(--s-1) 0 0;
	color: var(--chip-done);
	font-family: var(--font-mono);
	font-size: var(--chip-num-size);
	font-weight: var(--chip-num-weight);
	line-height: var(--lh-normal);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .chip-status:empty {
	display: none;
}
/* ROUTE: dim while off, solid yellow while a source drives the dial. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-route-badge[data-route="off"] {
	border-color: var(--chip-outline);
	background: var(--chip-well);
	color: var(--chip-ink-faint);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-route-badge:not([data-route="off"]) {
	border-color: var(--chip-title);
	background: var(--chip-title);
	color: var(--chip-on-title);
	font-weight: 600;
}
@media (hover: hover) {
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-route-badge[data-route="off"]:hover {
		border-color: var(--chip-ink);
		color: var(--chip-ink);
	}
}

/* In a WIDE strip a slider is a fader: its value is amber, and while it is
   routed its column, its edge and its dot are the same fixed amber. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-fader-value {
	color: var(--chip-value);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-row.has-wide-fader > .tweaks-fader-route.on {
	background: var(--chip-value);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-row.has-wide-fader.is-fader-routed {
	border-color: var(--chip-value);
	background: color-mix(in oklab, var(--chip-value) 10%, var(--chip-well));
}

/* ---- 2. CARDS ----
   TALL only: a WIDE strip keeps the layout drawn for it. Each control or
   field group stands on a card a step lighter than the chip, with a gap
   before the next, so a help sentence plainly belongs to the control above
   it. Whatever the page hides stays hidden: a display set here never applies
   to a [hidden] element or a folded section. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-section-controls > .tweaks-row:not(.tweaks-row-object, .tweaks-row-catalogue) {
	box-sizing: border-box;
	margin-bottom: var(--chip-control-row-gap, 6px);
	padding: var(--chip-control-row-padding, 6px) 10px;
	border-radius: 6px;
	background: var(--chip-card);
}
/* Shared selector rows: a declared row of buttons, numbers or colours is
   one card, just like a dial row. Keep each owner's compact arrangement
   inside it; session and step lists keep their existing card layout. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar:not(.workshop-presenter-chip, .has-tall-foot) > :is(.cd-sb-rowpair, .cd-sb-swrow, .cd-sb-number, .cd-sb-textfield) {
	box-sizing: border-box;
	padding: calc(var(--s-1) / 2) var(--s-1);
	border-radius: 6px;
	background: var(--chip-card);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar:not(.workshop-presenter-chip, .has-tall-foot) > :is(.cd-sb-rowpair, .cd-sb-swrow, .cd-sb-number, .cd-sb-textfield) {
	margin-bottom: calc(var(--s-1) / 2);
}
/* PICK: the groups lose their boxes, a heading's rule does that work, and
   every row is its own card. A lit row keeps its yellow edge. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-group {
	border: 0;
	background: transparent;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) :is(.tweaks-catalogue-group-head-row, .tweaks-catalogue-subhead-row) {
	background: transparent;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-group-body:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding-top: var(--s-2);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row {
	padding: var(--s-2) 10px;
	border-top: 0;
	border-radius: 6px;
	background: var(--chip-card);
}
/* SESSIONS (and every session object's sheet): one grid. A box and its
   button share one line, the status under them; each group is one card and
   a separator becomes the gap between cards. A button that is a whole line
   shows its words as a cyan-outlined button inside that line. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-auto-flow: row dense;
	align-content: start;
	align-items: stretch;
	gap: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > * {
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--s-1) 10px;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > :not(.on, .cd-sb-sep, .cd-sb-group-title) {
	background: var(--chip-card);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > .cd-sb-sep {
	height: var(--s-2);
	padding: 0;
	background: transparent;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > .cd-sb-group-title {
	padding: var(--s-1) 0;
	background: transparent;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > :is(.workshop-current-field, .workshop-session-field) {
	grid-column: 1;
	padding: var(--s-2) var(--s-2) var(--s-1) 10px;
	border-top-left-radius: 6px;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > :is(.workshop-current-set, .workshop-session-new) {
	grid-column: 2;
	display: flex;
	align-items: flex-end;
	padding: var(--s-2) 10px var(--s-1) 0;
	border: 0;
	border-top-right-radius: 6px;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > :is(.workshop-current-line, .workshop-session-line) {
	padding-bottom: var(--s-2);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > :not(.workshop-current-field, .workshop-session-field, .workshop-current-set, .workshop-session-new, .workshop-current-line, .workshop-session-line, .cd-sb-sep, .cd-sb-group-title) {
	padding-top: var(--s-2);
	padding-bottom: var(--s-2);
	border-radius: 6px;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > button.cd-sb:not(.on, .chip-btn-danger) {
	justify-content: flex-start;
	border: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > button.cd-sb:not(.on, .chip-btn-danger) > span {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 28px;
	padding: 0 var(--s-3);
	border: 1px solid var(--chip-heading);
	border-radius: var(--r-md);
	background: color-mix(in oklab, var(--chip-heading) 14%, transparent);
	white-space: nowrap;
}
@media (hover: hover) {
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) > button.cd-sb:not(.on, .chip-btn-danger):hover > span {
		background: color-mix(in oklab, var(--chip-heading) 30%, transparent);
	}
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-bar.workshop-presenter-chip:not(.has-tall-foot) input.cd-sb {
	box-sizing: border-box;
	min-height: 28px;
	border: 1px solid var(--chip-outline);
	background: var(--chip-well);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .workshop-session-block > button.cd-sb:not(.on, .chip-btn-danger) {
	border-color: var(--chip-heading);
	background: color-mix(in oklab, var(--chip-heading) 14%, transparent);
	color: var(--chip-ink);
}
/* STEPS: every step a card; the open one a lighter card with a yellow edge,
   its fields one to a line with the label at the left and the box at the
   right. Mike's step and the room's keep their own colours. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step {
	margin-bottom: 2px;
	border-top: 0;
	border-radius: 6px;
}
/* The gap between step cards is paid for out of each step's head, which
   stands one pixel closer round its 28px buttons, so a list of steps is no
   taller than before (Mike: no growth in chip size). */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-head {
	min-height: calc((var(--s-6) + var(--s-1) + 2px) * var(--chip-frame-scale, 1));
	padding-top: 1px;
	padding-bottom: 1px;
}
:is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-keeps-heading > .cd-sb-step-head {
	position: sticky;
	top: var(--steps-add-head-height, 0px);
	z-index: 1;
	background: var(--chip-card-open, var(--bg));
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step:not(.is-me, .is-room, .cd-sb-step-ending) {
	background: var(--chip-card);
}
@media (hover: hover) {
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step:not(.is-me, .is-room, .is-open, .cd-sb-step-ending):hover {
		background: color-mix(in oklab, var(--chip-card) 88%, var(--chip-ink));
	}
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step.is-open {
	padding-bottom: var(--s-1);
	box-shadow: inset 3px 0 0 var(--chip-title);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step.is-open:not(.is-me, .is-room) {
	background: var(--chip-card-open);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-ending:not(.is-me, .is-room) {
	background: transparent;
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chip-ink) 18%, transparent);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-field-row {
	display: contents;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-field {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	align-items: center;
	gap: var(--s-2);
	flex: none;
	min-width: 0;
}
/* A grouped list beside a text box keeps its full line, as in Plain, so
   Stage's used-step numbers remain visible in the closed list. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-field-row:has(input[type=text], textarea) > .cd-sb-step-field:has(select) {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--b-rule);
}
/* What an opened Diagram step brings in a piece at a time takes the whole
   line under its heading, so a part's words are not squeezed beside it. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-field.cd-sb-step-field-reveals {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--b-rule);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-field .cd-sb-step-toggle {
	justify-self: start;
	width: auto;
	min-width: calc((64px + var(--b-hair)) / var(--controls-chip-scale, 1));
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .cd-sb-step-body .cd-sb-step-live {
	align-self: flex-start;
	width: auto;
}
/* FILE: the fields stand on cards; a button with nothing beside it shares a
   line with the next one, two to a line, and a published status stands in
   its button's place, beside Publish new child. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .authbar-canvas-panel[data-authbar-canvas="keep"] .tweaks-section:not(.collapsed) > .tweaks-section-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row dense;
	align-items: start;
	gap: var(--s-2);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .authbar-canvas-panel[data-authbar-canvas="keep"] .tweaks-section-controls > .tweaks-row {
	grid-column: 1 / -1;
	margin: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .authbar-canvas-panel[data-authbar-canvas="keep"] .tweaks-section-controls > .tweaks-row-button:not(:has(.tweaks-hint, .tweaks-q, .tweaks-explainer)) {
	grid-column: auto;
	padding: 0;
	background: transparent;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .authbar-canvas-panel[data-authbar-canvas="keep"] .tweaks-section-controls > .tweaks-row-button .tweaks-row-button-action {
	width: 100%;
}

/* ---- 3. ALL HEADER CONTROLS ABOVE ONE FULL-WIDTH SLIDER ----
   TALL cards and raised cards share a wrapping header. WIDE strips retain
   their dials. The route gives up width before the other header controls. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--s-1);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-row-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
	min-width: 0;
	margin: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-row-head > .tweaks-row-title {
	display: contents;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) .tweaks-row-head :is(.tweaks-row-grip, .tweaks-row-label, .tweaks-live, .tweaks-num, .tweaks-route-key, .tweaks-display-toggle, .tweaks-q, .tweaks-route-tools, .tweaks-row-reset) {
	flex: none;
	margin: 0;
	white-space: nowrap;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) .tweaks-row-title > .tweaks-row-label {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-row-head > .tweaks-route-badge {
	flex: 1 1 38px;
	box-sizing: border-box;
	width: 0;
	min-width: 38px;
	field-sizing: content;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > :is(.tweaks-route-line, .tweaks-range-knob-wrap, input[type="range"]) {
	grid-column: 1;
	min-width: 0;
	width: 100%;
	margin: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > :is(.tweaks-hint, .tweaks-explainer, .tweaks-route-hint) {
	grid-column: 1;
	margin: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-hint {
	order: 1;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-explainer {
	order: 2;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-route-hint {
	order: 3;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-row:is(.tweaks-row-range, .tweaks-row-slider) > .tweaks-route-hint:empty {
	display: none;
}
/* PICK: a control's card is one column, the control at the top and its slot
   buttons on one short line at the foot (Slot 1 to 4, +, Shown to users),
   so the control has the card's whole width. When a narrow chip has no room
   for them all, Shown to users goes to a second line at the right. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row.has-control:not([hidden]) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s-2);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row.has-control > .tweaks-row {
	width: 100%;
	margin: 0;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row.has-control > .tweaks-catalogue-slot-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1);
	box-sizing: border-box;
	width: 100%;
	padding-top: var(--s-2);
	border-top: 1px solid color-mix(in oklab, var(--chip-ink) 14%, transparent);
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-surface-shown-to-users-actions > button,
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row.has-control > .tweaks-catalogue-slot-actions > button {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	padding: 2px var(--s-2);
	grid-column: auto;
}
:root[data-chip-contrast] :is(#kit-authbar.chip-v2:not(.wide), .chip-v2:not(.wide), .chip-v2.wide > .chip-frame-raised) .tweaks-catalogue-row.has-control > .tweaks-catalogue-slot-actions > .tweaks-catalogue-shown-to-users {
	margin-left: auto;
}
/* The track's rail shows on a card. */
:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-route-track::before {
	background: color-mix(in oklab, var(--chip-ink) 40%, transparent);
}

/* The six personal CHIPS choices.
   Hover controls retain their space and keyboard access, so showing them never
   moves the help button or dial beneath the pointer. */
:root[data-chip-descriptions="hidden"] .chip-v2 .tweaks-row > .tweaks-hint,
:root[data-chip-descriptions="hidden"] .chip-v2 .tweaks-button-desc {
	display: none;
}
.tweaks-hint-help {
	visibility: hidden;
}
.tweaks-hint-help-added {
	display: none;
}
:root[data-chip-descriptions="hidden"] .chip-v2 .tweaks-hint-help {
	visibility: visible;
}
:root[data-chip-descriptions="hidden"] .chip-v2 .tweaks-hint-help-added {
	display: inline-flex;
}
:root[data-chip-plus-minus="hidden"] .chip-v2 .tweaks-route-tools,
:root[data-chip-display-button="hidden"] .chip-v2 .tweaks-display-toggle {
	display: none;
}
:root[data-chip-plus-minus="useful"] .chip-v2 .tweaks-route-tool:disabled,
:root[data-chip-plus-minus="useful"] .chip-v2 .tweaks-route-tools:not(:has(.tweaks-route-tool:enabled)) {
	display: none;
}
:root[data-chip-route-button="hover"] .chip-v2 .tweaks-row:not(:hover, :focus-within) .tweaks-route-badge[data-route="off"],
:root[data-chip-display-button="hover"] .chip-v2 .tweaks-row:not(:hover, :focus-within) .tweaks-display-toggle {
	opacity: 0;
}
/* Dials in WIDE use the row's existing Slider/Knob dial. The saved display
   choice still governs TALL, PICK and raised rows; WIDE uses its own choice. */
:root[data-chip-wide-numbers="dials"] .chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-fader-track {
	display: none;
}
:root[data-chip-wide-numbers="dials"] .chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader > .tweaks-range-knob-wrap {
	order: 2;
	display: grid;
	flex: 1 1 var(--wide-fader-width);
	width: calc(var(--wide-fader-width) - 6px);
	min-height: 30px;
	max-height: calc(var(--wide-fader-width) - 6px);
	max-width: 100%;
	padding: 0;
}
:root[data-chip-wide-numbers="dials"] .chip-v2.wide .authbar-wide-scroll > .chip-frame-body .tweaks-row.has-wide-fader .tweaks-range-knob {
	/* Keep the dial's drawing scaled whole, including its pointer. */
	zoom: 0.85;
	width: calc((var(--wide-fader-width) - 6px) / 0.85);
	height: calc((var(--wide-fader-width) - 6px) / 0.85);
}

/* Keep main's phone chip geometry; the judged catalogue arrangement is for
   wider screens. Its minimum width and fixed columns do not fit a phone. */
@media (min-width: 601px) {
	/* PICK, 6 October 2026: one heading row, with the section name carrying the
	   emphasis. Columns are shared even where a section has no slot or info. */
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2):not(.wide) {
		min-width: max(var(--authbar-chip-width), calc(var(--s-24) * 4 + var(--s-10)));
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) :is(.authbar-chip-row, .authbar-slots-row, .authbar-search-row, .authbar-size-row) {
		padding-left: var(--s-2);
		padding-right: var(--s-2);
		padding-bottom: var(--s-1);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2):not(.wide) .authbar-size-row {
		min-width: 0;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .authbar-chip-search {
		padding: var(--s-1) var(--s-2);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .authbar-chip-orientation-btn {
		padding: var(--s-1) var(--s-2);
		border-radius: var(--r-sm);
		color: var(--chip-ink-muted);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .authbar-chip-orientation-btn.on {
		background: var(--chip-card-open);
		color: var(--chip-ink);
		box-shadow: inset 0 0 0 var(--b-hair) var(--chip-heading);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-head {
		padding: var(--s-2);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-section:has(.tweaks-catalogue) {
		padding: var(--s-2);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-groups {
		gap: 0;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group {
		border: 0;
		border-radius: 0;
		background: transparent;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row {
		display: grid;
		/* Keep the info track even when absent, and reserve the fifth mark for +. */
		grid-template-columns: minmax(0, 1fr) calc(var(--s-24) + var(--s-8)) var(--s-6) calc(var(--s-6) * 5);
		align-items: center;
		gap: var(--s-1);
		box-sizing: border-box;
		min-height: calc(var(--s-10) + var(--s-2));
		padding: var(--s-1) 0;
		border-bottom: var(--b-hair) solid var(--chip-outline);
		background: color-mix(in oklab, var(--chip-card) 50%, transparent);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row > .tweaks-catalogue-group-head {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
		gap: var(--s-1);
		padding: var(--s-1);
		white-space: normal;
		background: transparent;
		line-height: var(--lh-tight);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head > .tweaks-section-chev {
		order: -1;
		flex: none;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-tools {
		display: contents;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-chip {
		grid-column: 2;
		grid-row: 1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		border: var(--b-hair) solid var(--chip-outline);
		border-radius: var(--r-sm);
		overflow: hidden;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-chip > .authbar-slot-btn {
		border: 0;
		border-radius: 0;
		min-height: 0;
		height: auto;
		padding: var(--s-1);
		line-height: var(--lh-tight);
		white-space: normal;
		overflow-wrap: normal;
		background: transparent;
		color: var(--chip-ink-muted);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-chip > .authbar-slot-btn + .authbar-slot-btn {
		border-left: var(--b-hair) solid var(--chip-outline);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-chip > .authbar-slot-btn.open {
		background: var(--chip-card-open);
		color: var(--chip-ink);
		box-shadow: inset 0 calc(-1 * var(--b-rule)) var(--chip-heading);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-tools > .tweaks-catalogue-explanations-toggle {
		grid-column: 3;
		grid-row: 1;
		width: var(--s-6);
		min-height: 0;
		padding: var(--s-1) 0;
		border: 0;
		border-radius: var(--r-pill);
		background: transparent;
		color: var(--chip-ink-muted);
		line-height: var(--lh-tight);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-explanations-toggle:is(:hover, [aria-pressed="true"]) {
		background: var(--chip-card-open);
		color: var(--chip-heading);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row > .tweaks-catalogue-category-slot-actions {
		grid-column: 4;
		grid-row: 1;
		display: grid;
		grid-template-columns: repeat(5, var(--s-6));
		gap: 0;
		width: 100%;
		padding: 0;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row > .tweaks-catalogue-category-slot-actions > button {
		width: auto;
		min-height: 0;
		padding: var(--s-1) 0;
		border: 0;
		border-radius: var(--r-sm);
		background: transparent;
		color: var(--chip-ink-muted);
		line-height: var(--lh-tight);
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row > .tweaks-catalogue-category-slot-actions > button:not(.tweaks-catalogue-category-slot-action) {
		grid-column: 5;
		grid-row: 1;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row > .tweaks-catalogue-category-slot-actions > button:is(.is-active, :hover) {
		background: var(--chip-card-open);
		color: var(--chip-ink);
	}

	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head-row:not(.has-chip-choice) > .tweaks-catalogue-group-head {
		grid-column: 1 / span 2;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-group-head > span:first-child {
		font-size: var(--chip-name-size);
		font-weight: var(--chip-name-weight);
		letter-spacing: 0;
	}
	:root[data-chip-contrast] :is(#kit-authbar.chip-v2, .chip-v2) .tweaks-catalogue-section-chip > .authbar-slot-btn {
		font-size: var(--chip-num-size);
	}
}

/* Low contrast changes paint only. The token colours remain owned by the
   shared design system; mixes soften them without changing any geometry. */
:root[data-chip-contrast="low"] {
	--chip-low-ink: color-mix(in oklab, var(--chip-ink) 72%, var(--chip-well));
	--chip-low-description: color-mix(in oklab, var(--chip-ink-desc) 68%, var(--chip-well));
	--chip-low-help: color-mix(in oklab, var(--chip-help) 82%, var(--chip-well));
	--chip-low-muted: color-mix(in oklab, var(--chip-ink-muted) 82%, var(--chip-well));
	--chip-low-faint: color-mix(in oklab, var(--chip-ink-faint) 82%, var(--chip-well));
	--chip-low-heading: color-mix(in oklab, var(--chip-heading) 65%, var(--chip-well));
	--chip-low-title: color-mix(in oklab, var(--chip-title) 65%, var(--chip-well));
	--chip-low-value: color-mix(in oklab, color-mix(in oklab, var(--chip-value) 75%, var(--chip-ink-muted)) 85%, var(--chip-well));
	--chip-low-outline: color-mix(in oklab, var(--chip-outline) 40%, var(--chip-well));
}
:root[data-chip-contrast="low"] :is(#kit-authbar.chip-v2, .chip-v2) {
	--chip-ink: var(--chip-low-ink);
	--chip-ink-desc: var(--chip-low-description);
	--chip-help: var(--chip-low-help);
	--chip-ink-muted: var(--chip-low-muted);
	--chip-ink-faint: var(--chip-low-faint);
	--chip-heading: var(--chip-low-heading);
	--chip-title: var(--chip-low-title);
	--chip-value: var(--chip-low-value);
	--chip-outline: var(--chip-low-outline);
	--chip-card: var(--chip-well);
	--chip-card-open: var(--chip-well);
}
:root[data-chip-contrast="low"] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-row, .tweaks-catalogue-row, .cd-sb-rowpair, .cd-sb-swrow, .cd-sb-number, .cd-sb-textfield, .cd-sb-step) {
	border-color: transparent;
}
:root[data-chip-contrast="low"] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-head, .tweaks-catalogue-group-head-row, .tweaks-catalogue-subhead-row) {
	border-bottom-color: var(--chip-outline);
}
:root[data-chip-contrast="low"] :is(#kit-authbar.chip-v2, .chip-v2) :is(.tweaks-section-title, .cd-sb-group-title)::after {
	background: var(--chip-outline);
}

/* The author timer clears the chips beside or below the unchanged buttons. */
#workshop-timer-chrome {
	position: fixed;
	width: 25ch;
	height: 20px;
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	line-height: 20px;
	color: var(--fg-soft);
	text-align: right;
	white-space: nowrap;
	pointer-events: none;
	z-index: 62;
	visibility: hidden;
}
#workshop-timer-chrome[data-positioned] { visibility: visible; }

/* Workshop-wide member writing shares the footer's chrome family. */
.member-notes-button {
	position: fixed;
	right: calc(env(safe-area-inset-right, 0px) + 18px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 64px + var(--member-notes-kb, 0px));
	z-index: 61;
	min-width: 44px;
	min-height: 44px;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--muted);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	cursor: pointer;
	pointer-events: auto;
}
.member-notes-button:hover,
.member-notes-button:focus-visible {
	color: var(--fg);
	border-color: var(--fg);
}
.member-notes-overlay {
	position: fixed;
	inset: 0;
	bottom: var(--member-notes-kb, 0px);
	z-index: 60;
	pointer-events: auto;
}
.member-notes-overlay[hidden] {
	display: none;
}
.member-notes-text {
	position: absolute;
	right: calc(env(safe-area-inset-right, 0px) + 18px);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
	box-sizing: border-box;
	width: min(560px, calc(100vw - 36px));
	height: min(360px, calc(100dvh - var(--member-notes-kb, 0px) - 156px));
	padding: var(--s-4);
	border: 1px solid var(--muted);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	resize: none;
}

.cd-sb-step-moves { display: inline-flex; gap: var(--s-1); flex-shrink: 0; }

/* The spatial editor's connector dots are the Author's: a page without the
   author module (engine.js adds body.is-author only for the Author) draws no
   connector from them, so it shows none, and no crosshair over them (Mike,
   18 October 2026, Event 2468925: "Nobody gets these tools"). */
body:not(.is-author) .cd-port { display: none !important; }