@parity/product-lab 0.0.1-placeholder → 0.1.0

package/entrypoints/panel/src/client/frame.css

@@ -0,0 +1,515 @@
+/* The lab frame: the app workspace, the dock, the side panel that makes room for itself, menus, pickers and the
+   command palette. Tokens only (tokens.css); views style their own content in their own files. */
+html, body { height: 100%; }
+/* The window's background is the design's 18 px dotted grid: it shows in every gap, around the lab, the tiles and the
+   bottom bar, in every dock mode and in the lab's own window; the cards stay solid on top. No glow (the user's call). */
+body { margin: 0; overflow: hidden; background: radial-gradient(var(--dot) 1.4px, transparent 1.5px) 0 0 / 18px 18px, var(--canvas); color: var(--ink); font: var(--text-md) / var(--leading) var(--font-ui); -webkit-font-smoothing: antialiased; }
+button, input, select, textarea { font: inherit; color: inherit; }
+:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
+
+/* Plain buttons (older views not yet on ui-button) share the secondary button look. */
+:where(button) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
+:where(button):hover:not(:disabled) { background: var(--control); filter: none; }
+:where(button):disabled { opacity: 0.45; cursor: not-allowed; }
+:where(button) svg { width: 15px; height: 15px; flex-shrink: 0; }
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
+button.quiet { background: transparent; border-color: transparent; color: var(--secondary); }
+button.quiet:hover:not(:disabled) { background: var(--control); color: var(--ink); }
+:where(select, input:not([type="checkbox"]):not([type="radio"]), textarea) { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--text-sm); }
+:where(textarea) { padding: 8px 10px; }
+:where(select, input, textarea):focus { outline: 0; border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); width: 15px; height: 15px; }
+
+/* The app: the whole window, minus the dock and, while it is open, the side panel. */
+.workspace { position: fixed; inset: var(--frame-gap) var(--frame-gap) calc(var(--dock-height) + var(--frame-gap) * 2) var(--frame-gap); padding: 0; display: block; transition: right var(--duration-slow) var(--ease); }
+body[data-panel="open"] .workspace { right: calc(var(--panel-width) + var(--frame-gap) * 2); }
+#application { width: 100%; height: 100%; border-radius: var(--radius-lg); background: transparent; }
+
+/* Dock */
+.toolbar.dock { position: fixed; z-index: 30; left: var(--frame-gap); right: var(--frame-gap); bottom: var(--frame-gap); height: var(--dock-height); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
+.dock .spacer { flex: 1; }
+.dock .divider { width: 1px; height: 22px; margin: 0 4px; background: var(--line); flex-shrink: 0; }
+.dock #toggle, .panel-lab #toggle-top { gap: 8px; height: 38px; padding: 0 10px 0 6px; border: 0; background: transparent; font-weight: var(--weight-strong); font-size: var(--text-md); letter-spacing: -0.01em; }
+.dock #toggle:hover, .dock #toggle[aria-expanded="true"], .panel-lab #toggle-top:hover, .panel-lab #toggle-top[aria-expanded="true"] { background: var(--control); }
+.dock #toggle .ui-icon, .panel-lab #toggle-top .ui-icon { color: var(--tertiary); }
+.dock .context-button { gap: 7px; height: 38px; max-width: 340px; padding: 0 10px 0 6px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font-weight: var(--weight-medium); white-space: nowrap; }
+.dock .context-button:hover, .dock .context-button[aria-expanded="true"] { background: var(--control); }
+.dock .context-button > span:not(.ui-avatar):not(.ui-status) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.dock .context-button > .ui-icon:last-child { color: var(--tertiary); }
+.dock .context-button small { color: var(--secondary); font-weight: var(--weight-regular); }
+.dock #scenario-picker { max-width: 300px; color: var(--secondary); }
+.dock-status { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 320px; padding: 0 8px; }
+.dock #compact-progress { display: block; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; color: var(--secondary); font-size: var(--text-md); font-weight: var(--weight-medium); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.dock #compact-progress:hover { color: var(--ink); background: transparent; }
+.dock #runner-status { display: none !important; }
+.dock-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.dock #dock-run { height: 38px; padding: 0 16px; font-size: var(--text-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
+.dock #dock-stop { height: 38px; }
+/* Each state's controls (workspace-shell.ts): outlined beside the pink one; an icon alone is a square. */
+.dock .dock-outline { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--ink); font-size: var(--text-md); font-weight: var(--weight-medium); }
+.dock .dock-outline:hover:not(:disabled) { background: transparent; border-color: var(--line-strong); }
+.dock .dock-icon { width: 38px; padding: 0; gap: 0; }
+.dock .dock-icon > span:empty { display: none; }
+.dock .dock-actions > button.primary:not(#dock-run), .dock-replay > button.primary { height: 38px; padding: 0 16px; font-size: var(--text-md); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
+.dock-replay { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.dock-replay[hidden] { display: none; }
+/* The line's first word is the state, in the ink and bold ("Paused before step 5 · your turn"). */
+.dock #compact-progress strong { color: var(--ink); font-weight: var(--weight-strong); }
+/* Watch | Background (run-mode.ts): the design's pill segment, the choice in the accent. Recordings beside it, on its own:
+   it opens recorded runs to replay, it is not a way to run (0e's first-time-user audit of 6 October 2026, item 11). */
+.run-mode { display: inline-flex; align-items: center; gap: 8px; }
+.run-mode-choice { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; }
+.run-mode .run-mode-recordings { min-height: 36px; border: 1px solid var(--line); }
+.run-mode[hidden] { display: none; }
+.run-mode button { min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
+.run-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
+/* The segment stays whole while the choice is locked (a run is on): the design draws it unfaded. */
+.run-mode button:disabled { opacity: 1; cursor: default; }
+#message { display: none; }
+
+/* Side panel: docked beside the app, never over it (except the builder, and Panel size "Full": the whole frame). */
+#command-center { position: fixed; z-index: 25; top: var(--frame-gap); right: var(--frame-gap); bottom: calc(var(--dock-height) + var(--frame-gap) * 2); left: auto; width: var(--panel-width); max-width: calc(100vw - var(--frame-gap) * 2); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); transition: width var(--duration-slow) var(--ease); }
+#command-center[data-section="builder"] { left: var(--frame-gap); width: auto; box-shadow: var(--shadow-lg); }
+#command-center:not([hidden]) { display: flex; flex-direction: column; animation: ui-slide-in var(--duration-slow) var(--ease); }
+#command-center[hidden] { display: none; }
+/* Text wraps everywhere in the panel (backlog 158): a word too long for its line (a content id, hash, address) breaks
+   rather than running past the edge. `break-word`, not `anywhere`: an ordinary word never splits to let a flex item
+   shrink ("S t e p s" at 280 px); a block whose ids sit in a shrinking flex item sets `anywhere` itself. */
+#command-center { overflow-wrap: break-word; }
+.panel-heading { display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 56px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
+.panel-heading > div { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
+.panel-heading .ui-tabs { flex: 1; min-width: 0; border: 0; margin-left: 4px; }
+.panel-heading .ui-tabs button { height: 32px; font-size: var(--text-sm); }
+.panel-heading .ui-tabs button[aria-selected="true"]::after { bottom: -12px; }
+.panel-heading #close { width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--secondary); }
+.panel-heading #close:hover { background: var(--control); color: var(--ink); }
+.drawer-status { flex-shrink: 0; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--text-xs); }
+.drawer-status[hidden] { display: none; }
+/* It holds a failed run's error, ids and addresses included: they break anywhere, in a block or its uncertain row. */
+.drawer-status #status { margin: 0; overflow-wrap: anywhere; }
+.drawer-status[data-status="false"] #status, .drawer-status[data-busy="false"] #busy-notice { display: none; }
+.drawer-status #status[data-error="true"] { color: var(--danger); }
+.drawer-status #busy-notice { margin: 4px 0 0; padding: 0; background: none; color: var(--secondary); }
+.drawer-pane { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 16px 20px 28px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; animation: ui-fade-in var(--duration) var(--ease); }
+.drawer-pane[hidden] { display: none; }
+#command-center[data-section="builder"] > .drawer-pane { padding: 0; overflow: hidden; }
+.drawer-footer { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
+.drawer-footer[hidden] { display: none; }
+.drawer-footer > .muted { margin-left: auto; color: var(--tertiary); font-size: var(--text-2xs); }
+
+/* Lab menu */
+.menu { position: fixed; z-index: 42; left: var(--frame-gap); bottom: calc(var(--dock-height) + var(--frame-gap) + 8px); width: 280px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+.menu[hidden] { display: none; }
+.menu-heading { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
+.menu-heading strong { display: block; font-size: var(--text-md); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
+.menu-heading small { display: block; color: var(--secondary); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.menu-heading > div { min-width: 0; }
+.menu > button { width: 100%; justify-content: flex-start; gap: 10px; height: 36px; padding: 0 8px; border: 0; background: transparent; font-weight: var(--weight-medium); }
+.menu > button:hover { background: var(--control); }
+.menu > button > svg:first-child, .menu > button > .ui-icon:first-child { color: var(--secondary); }
+.menu > button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); }
+.menu > button[aria-current="true"] > svg:first-child { color: var(--accent); }
+.menu > button .ui-kbd, .menu > button kbd { margin-left: auto; }
+.menu > button small { margin-left: auto; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-regular); }
+.menu-separator { height: 1px; margin: 6px 4px; background: var(--line); }
+
+/* Quick pickers above the dock */
+.quick-picker { position: fixed; z-index: 40; display: flex; flex-direction: column; width: min(400px, calc(100vw - 20px)); max-height: min(560px, calc(100dvh - var(--dock-height) - 60px)); overflow: hidden; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: ui-rise var(--duration) var(--ease); }
+.quick-picker[hidden] { display: none; }
+.picker-heading { margin: 0; padding: 8px 10px; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
+.picker-body { min-height: 0; overflow-x: hidden; overflow-y: auto; }
+.picker-search { margin: 0 4px 6px; flex-shrink: 0; }
+.picker-group { padding: 8px 10px 4px; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: 0.04em; }
+.picker-option { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; height: auto; padding: 7px 10px; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; white-space: normal; font-weight: var(--weight-regular); }
+/* A kind of chain the lab does not configure: greyed, with what it is and the config that adds it (never hidden). */
+.environment-option.is-unconfigured { cursor: help; opacity: 0.62; }
+.environment-option.is-unconfigured:hover { opacity: 0.85; }
+/* Its whole line and config, wrapped: what is not configured is read, not guessed from a cut line. */
+.environment-option.is-unconfigured small { display: block; -webkit-line-clamp: unset; overflow: visible; }
+/* Backlog 184: an environment's options under its row, indented; one this machine does not meet is greyed, still choosable. */
+.picker-option.environment-way { padding-left: 28px; min-height: 36px; }
+.picker-option.environment-way small { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
+.picker-option.environment-way.is-short { opacity: 0.62; }
+.picker-option.environment-way.is-short:hover { opacity: 0.85; }
+.environment-way-error { margin: 2px 12px 6px 28px; color: var(--danger); font-size: var(--text-xs); overflow-wrap: anywhere; }
+.environment-option .environment-turn-on code { white-space: normal; overflow-wrap: anywhere; }
+.picker-subheading { margin: 10px 10px 4px; color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; }
+.picker-option:hover:not(:disabled), .picker-option:focus-visible { background: var(--soft); outline: 0; }
+.picker-option.selected { background: var(--accent-soft); }
+.picker-option > span:nth-child(2) { flex: 1; min-width: 0; }
+.picker-option strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
+.picker-option small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; color: var(--secondary); font-size: var(--text-xs); line-height: 1.4; }
+.picker-option > .ui-icon:last-child, .picker-option > svg:last-child { color: var(--accent); }
+.scenario-symbol { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--soft); color: var(--secondary); }
+.scenario-symbol svg { width: 15px; height: 15px; }
+.picker-view { display: flex; gap: 4px; padding: 8px 4px 4px; border-top: 1px solid var(--line); flex-shrink: 0; }
+/* Backlog 183: "Keep chain and people between starts" in the environment menu (keep-switch.ts); every line wraps. */
+.keep-between-starts { display: flex; flex-direction: column; gap: 6px; margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: var(--text-md); color: var(--ink); }
+.keep-between-starts p, .keep-between-starts ul { margin: 0; overflow-wrap: anywhere; }
+.keep-head { position: relative; display: flex; align-items: center; gap: 6px; }
+.keep-title { flex: 1; font-weight: var(--weight-strong); }
+.keep-about { position: static; }
+.keep-about .ui-infotip-pop { left: 0; right: 0; width: auto; max-width: none; white-space: normal; overflow-wrap: anywhere; }
+.keep-why, .keep-later { color: var(--secondary); }
+.keep-later { color: var(--ink); }
+.keep-parts { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; }
+.keep-part { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
+.keep-part > svg { flex: none; margin-top: 3px; }
+.keep-part.is-unavailable { color: var(--tertiary); }
+.settings-switch:disabled { opacity: 0.5; cursor: not-allowed; }
+.picker-view .ui-segmented { width: 100%; }
+.picker-view .ui-segmented button { flex: 1; justify-content: center; }
+.picker-footer { justify-content: flex-start; width: 100%; height: 36px; margin-top: 4px; padding: 0 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--accent); font-size: var(--text-sm); flex-shrink: 0; }
+.picker-footer:hover { background: var(--soft) !important; }
+
+/* Command palette */
+#command-palette { width: min(600px, calc(100vw - 32px)); max-height: min(560px, 70vh); margin: 14vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
+#command-palette[open] { display: flex; flex-direction: column; animation: ui-rise var(--duration) var(--ease); }
+#command-palette::backdrop { background: color-mix(in srgb, var(--ink) 22%, transparent); backdrop-filter: blur(2px); }
+#command-palette .palette-search { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--tertiary); flex-shrink: 0; }
+#command-palette .palette-search input { flex: 1; height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: var(--text-lg); }
+#command-palette .palette-results { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
+#command-palette .palette-empty { padding: 28px; text-align: center; color: var(--secondary); }
+#command-palette .picker-option[aria-selected="true"] { background: var(--accent-soft); }
+#command-palette footer { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--tertiary); font-size: var(--text-2xs); flex-shrink: 0; }
+#command-palette footer span { display: inline-flex; align-items: center; gap: 5px; }
+
+/* Dialogs */
+dialog:not(#command-palette) { max-width: min(460px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
+dialog:not(#command-palette)[open] { animation: ui-rise var(--duration) var(--ease); }
+dialog::backdrop { background: color-mix(in srgb, var(--ink) 30%, transparent); backdrop-filter: blur(2px); }
+dialog h1 { margin: 0 0 8px; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
+dialog p { margin: 0 0 10px; color: var(--secondary); font-size: var(--text-sm); line-height: 1.55; }
+dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+#delete-identity-confirm, #reset-confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
+#delete-identity-confirm:hover:not(:disabled), #reset-confirm:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, black); }
+#delete-identity-name { color: var(--ink) !important; font-weight: var(--weight-medium); }
+
+/* Dock modes (the redesign, dock.ts): the lab panel docks left (the default), bottom or right of the stage; the stage
+   takes the rest. Only the panel moves: the app frames stay where they are in the document. */
+/* The panel's size: the person's (resize.ts, per dock mode: the handle or Panel size), else the default. No section
+   sets its own but the builder (the whole frame): the width the person chose stays as they move between sections, and
+   comes back when the builder is left (0e's audit of 6 October, item 10). */
+body { --panel-width: var(--panel-user-width, 420px); --panel-height: var(--panel-user-height, 320px); }
+body[data-dock="left"] #command-center { left: var(--frame-gap); right: auto; }
+body[data-dock="left"][data-panel="open"] .workspace { left: calc(var(--panel-width) + var(--frame-gap) * 2); right: var(--frame-gap); }
+body[data-dock="bottom"] #command-center { top: auto; left: var(--frame-gap); right: var(--frame-gap); width: auto; height: var(--panel-height); }
+body[data-dock="bottom"][data-panel="open"] .workspace { right: var(--frame-gap); bottom: calc(var(--dock-height) + var(--panel-height) + var(--frame-gap) * 3); }
+body[data-dock] #command-center[data-section="builder"], body[data-panel-preset="full"] #command-center { top: var(--frame-gap); left: var(--frame-gap); right: var(--frame-gap); width: auto; height: auto; }
+
+/* Run, Scenarios, Recordings (panel-tabs.ts): one pill bar under the head, the current tab in the accent (the design). */
+.panel-tabs { display: flex; flex-shrink: 0; gap: 4px; margin: 10px 14px 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-control); }
+.panel-tab { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 30px; min-height: 0; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--secondary); font-size: var(--text-sm); font-weight: var(--weight-strong); }
+.panel-tab:hover { color: var(--ink); background: transparent; }
+.panel-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
+.panel-tab:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
+body[data-dock="bottom"] .panel-tabs { margin-top: 6px; }
+/* The Lab button on top of the tabs (backlog D1): the bottom bar's Lab button (the .dock #toggle rules name it too). */
+.panel-lab { display: flex; flex-shrink: 0; margin: 8px 14px 0; }
+.panel-lab + .panel-tabs { margin-top: 6px; }
+/* It names the open section (workspace-shell.ts nameTopToggle): one line, its icon in the ink of the label. */
+.panel-lab #toggle-top { max-width: 100%; white-space: nowrap; }
+.panel-lab #toggle-top > .ui-icon:first-child { color: var(--secondary); }
+/* The narrowest panel (280 px): the tabs keep their words and drop their icons, so "Recordings" fits (backlog 158). */
+@container lab-panel (max-width: 340px) { .panel-tab { gap: 0; padding: 0 6px; } .panel-tab > .ui-icon { display: none; } }
+/* A tab's section needs no heading row (the tab names it); other sections keep theirs, with its section switcher. */
+/* No heading row in any section: the button on top of the tabs names it (workspace-shell.ts). */
+#command-center > .panel-heading { display: none; }
+/* A narrow panel keeps the dot mark and drops the wordmark, so the head's buttons always fit. */
+#command-center { container: lab-panel / inline-size; }
+@container lab-panel (max-width: 360px) { .lab-wordmark { display: none; } }
+
+/* The resize handle on the panel's edge toward the people: a line shows on hover and focus. */
+.lab-resize { position: absolute; z-index: 8; touch-action: none; outline: none; }
+.lab-resize::after { content: ""; position: absolute; border-radius: var(--radius-control); background: var(--accent); opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
+.lab-resize:hover::after, .lab-resize:focus-visible::after, body[data-resizing] .lab-resize::after { opacity: 1; }
+body[data-dock="left"] .lab-resize { top: 0; bottom: 0; right: 0; width: 8px; cursor: col-resize; }
+body[data-dock="right"] .lab-resize { top: 0; bottom: 0; left: 0; width: 8px; cursor: col-resize; }
+body[data-dock="left"] .lab-resize::after { top: 24px; bottom: 24px; right: 2px; width: 3px; }
+body[data-dock="right"] .lab-resize::after { top: 24px; bottom: 24px; left: 2px; width: 3px; }
+body[data-dock="bottom"] .lab-resize { left: 0; right: 0; top: 0; height: 8px; cursor: row-resize; }
+body[data-dock="bottom"] .lab-resize::after { left: 24px; right: 24px; top: 2px; height: 3px; }
+#command-center[data-section="builder"] .lab-resize, body[data-panel-preset="full"] .lab-resize { display: none; }
+/* While dragging: no transitions (the tiles follow the hand), and the frames do not take the pointer. */
+body[data-resizing] { user-select: none; }
+body[data-resizing="width"] { cursor: col-resize; }
+body[data-resizing="height"] { cursor: row-resize; }
+body[data-resizing] .workspace { transition: none; }
+body[data-resizing] #application iframe { pointer-events: none; }
+
+/* The size presets beside the dock buttons. */
+.panel-size-wrap { position: relative; }
+.panel-size { width: 28px; min-height: 0; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--tertiary); }
+.panel-size:hover:not(:disabled) { background: transparent; color: var(--ink); }
+.panel-size-menu { position: absolute; z-index: 9; top: 34px; right: 0; display: grid; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-lg); }
+.panel-size-menu[hidden] { display: none; }
+.panel-size-menu button { justify-content: flex-start; height: 34px; border: 0; border-radius: var(--radius-row); background: transparent; }
+.panel-size-menu button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); }
+.workspace { transition: left var(--duration-slow) var(--ease), right var(--duration-slow) var(--ease), bottom var(--duration-slow) var(--ease); }
+
+/* The panel's head: the brand and the dock buttons. */
+.lab-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 14px 14px 6px 16px; }
+.lab-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.lab-wordmark { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
+.lab-wordmark b { color: var(--accent); font-weight: inherit; }
+.dock-modes { display: flex; gap: 2px; margin-left: auto; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-control); }
+.dock-modes .dock-mode { width: 28px; min-height: 0; height: 24px; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--tertiary); }
+.dock-modes .dock-mode:hover:not(:disabled) { background: transparent; color: var(--ink); }
+.dock-modes .dock-mode[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
+
+/* The stage: the people on the window's dotted grid (body), a header saying who is here and what is happening. */
+.workspace { border-radius: var(--radius-tile); background: transparent; }
+.stage-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 36px; padding: 0 4px 0 6px; }
+.stage-head .stage-words { min-width: 0; overflow: hidden; color: var(--secondary); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
+.stage-head .spacer { flex: 1; }
+/* The stage's chip (workspace-shell.ts): Watch, Hands on, the failed step in the danger colour, Read only. */
+.stage-head .stage-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
+.stage-head .stage-chip[hidden] { display: none; }
+.stage-head .stage-chip[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
+.stage-head .stage-button { width: 32px; min-height: 0; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: transparent; color: var(--secondary); }
+.stage-head .stage-button:hover:not(:disabled) { background: transparent; color: var(--ink); border-color: var(--line-strong); }
+.stage-head .stage-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
+
+/* Titles in the design's display face; key chips in one face (the system's, which has the ⌘ glyph). */
+.menu-heading strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
+kbd, .ui-kbd { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
+
+@media (max-width: 760px) {
+  :root { --frame-gap: 8px; }
+  body[data-panel="open"] .workspace { right: var(--frame-gap); }
+  .toolbar.dock { height: auto; min-height: var(--dock-height); flex-wrap: wrap; padding: 6px; gap: 4px; }
+  /* The spacer becomes the line break: context on the first row, the run control and Run on the second. */
+  .dock .spacer { flex: 0 0 100%; height: 0; }
+  .dock .divider { display: none; }
+  .dock .context-button { max-width: 150px; }
+  .dock-status { order: 5; flex: 1; max-width: none; }
+  .dock-actions { order: 6; margin-left: auto; }
+  .workspace { bottom: calc(var(--dock-height) * 2 + var(--frame-gap) * 2); }
+  #command-center { left: var(--frame-gap); width: auto; bottom: calc(var(--dock-height) * 2 + var(--frame-gap) * 2); }
+  /* A phone has no room beside the people: in every dock mode the panel covers the stage, as before. */
+  body[data-dock][data-panel="open"] .workspace { left: var(--frame-gap); right: var(--frame-gap); bottom: calc(var(--dock-height) * 2 + var(--frame-gap) * 2); }
+  body[data-dock] #command-center { top: var(--frame-gap); left: var(--frame-gap); right: var(--frame-gap); width: auto; height: auto; }
+  .lab-resize, .panel-size-wrap { display: none; }
+}
+
+/* The lab's own window (own-window.ts), after the phone rules because that window is narrow: there the panel fills the
+   window; here the people take the whole frame. Sizes, the close button and the whole-stage button do not apply. */
+body[data-dock="window"] .workspace, body[data-dock="window"][data-panel="open"] .workspace { left: var(--frame-gap); right: var(--frame-gap); }
+body[data-dock="window"] #command-center, body[data-dock="window"] #command-center[data-section] { inset: 0; width: auto; height: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
+body[data-dock="window"] :is(.lab-resize, .panel-size-wrap, #close, #stage-whole) { display: none; }
+/* The bottom bar goes with the lab (5 October 2026): here the stage reaches the window's bottom; in the lab's window the
+   bar sits at its bottom in two rows (the window is narrow), the Lab, the environment and the whole run line above, the
+   run's mode and its controls below, and the panel ends above it. The phone rules (same widths) do not apply to it. */
+body[data-dock="window"] { --dock-height-detached: 100px; }
+body[data-dock="window"] .workspace, body[data-dock="window"][data-panel="open"] .workspace { bottom: var(--frame-gap); }
+body[data-dock="window"] #command-center, body[data-dock="window"] #command-center[data-section] { bottom: calc(var(--dock-height-detached) + var(--frame-gap) * 2); }
+body[data-dock="window"] .toolbar.dock { height: var(--dock-height-detached); flex-wrap: wrap; align-content: center; row-gap: 6px; padding: 6px 8px; }
+body[data-dock="window"] .toolbar.dock > .spacer { display: none; }
+body[data-dock="window"] .toolbar.dock .dock-run { order: 0; flex: 1 1 0; min-width: 0; overflow: hidden; }
+body[data-dock="window"] .toolbar.dock .dock-status { max-width: none; }
+body[data-dock="window"] .toolbar.dock .dock-actions { flex-basis: 100%; justify-content: flex-end; }
+body[data-dock="window"] .toolbar.dock .dock-actions > #run-mode { margin-right: auto; }
+body[data-dock="window"] .dock #compact-progress { font-size: var(--text-md); max-width: none; }
+body[data-dock="window"] .dock #compact-progress::after { content: none; }
+body[data-dock="window"] .menu { bottom: calc(var(--dock-height-detached) + var(--frame-gap) + 8px); }
+
+/* Menu groups, panel tabs, the live marker */
+.menu-group { padding: 10px 8px 4px; color: var(--tertiary); font-size: var(--text-2xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; }
+.menu-heading + .menu-group { padding-top: 4px; }
+.drawer-tabs { display: flex; flex: 0 0 auto; min-width: 0; padding: 0 12px; border-bottom: 1px solid var(--line); }
+.drawer-tabs:empty { display: none; }
+.drawer-tabs .ui-tabs { flex: 1; flex-wrap: wrap; border: 0; }
+.drawer-tabs .ui-tabs button { flex: 1 0 auto; min-height: 40px; padding-inline: 8px; }
+.drawer-tabs .ui-tabs button[aria-selected="true"]::after { bottom: -12px; }
+.live-state { display: inline-flex; align-items: center; gap: 5px; color: var(--secondary); font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: 0.02em; white-space: nowrap; }
+.live-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
+.live-state[hidden] { display: none; }
+
+/* App tiles: one per identity shown. The selected one has a solid 2 px accent border and nothing outside it (no glow,
+   the user's call); nothing else asks for attention. */
+#application { display: flex; flex-direction: column; }
+#application .tile { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; overflow: hidden; container-type: inline-size; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface); transition: box-shadow var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease), opacity var(--duration) var(--ease); }
+#application .tile[hidden] { display: none; }
+#application .tile iframe { flex: 1; min-height: 0; height: 0; border: 0; }
+/* Caption: avatar and name, the address bar, the session dot. One line; nothing wraps. */
+#application[data-view] .tile figcaption { position: relative; z-index: 3; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: 46px; min-height: 46px; padding: 0 12px 0 10px; overflow: visible; background: var(--surface); color: var(--secondary); font-size: var(--text-xs); white-space: nowrap; }
+#application .tile figcaption::before { display: none; }
+#application .tile figcaption > .ui-avatar { flex-shrink: 0; width: 24px; height: 24px; font-size: var(--text-sm); }
+#application .tile figcaption > strong { flex: 0 1 auto; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: var(--weight-strong) var(--text-lg) / 1.2 var(--font-display); letter-spacing: -0.01em; }
+/* "· as Ada": the scenario actor an identity plays under another name; quieter than the name, and it gives way first. */
+#application .tile figcaption > .tile-role { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tertiary); font-size: var(--text-sm); margin-left: calc(var(--space-2) * -0.5); }
+#application .tile figcaption > .tile-role::before { content: "· "; }
+#application .tile figcaption > .tile-role[hidden] { display: none; }
+#application .tile figcaption > .tile-app { flex-shrink: 0; color: var(--tertiary); white-space: nowrap; }
+#application .tile figcaption > .tile-app[hidden] { display: none; }
+#application .tile figcaption .spacer { flex: 1; }
+#application .tile figcaption > .ui-status { flex-shrink: 0; margin-left: 2px; }
+/* One state in the header: the session dot. "Acting" and what the person is doing are words in the condition strip
+   (island.ts); the selected tile's pink outline says it is selected. Both stay in the DOM for what reads them. */
+#application .tile figcaption > small { display: none; }
+#application .tile .tile-empty { flex: 1; display: grid; place-items: center; background: var(--surface-sunken); }
+/* Compare: the tiles fill the frame on the window's dotted grid; the selected one has the accent border. The columns
+   are app-tiles.ts's (tile-grid.ts, backlog 125): the count that shows each app at the largest scale; below 30% the
+   rows keep that scale's height and the stage scrolls. */
+#application[data-view="grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: calc(var(--frame-gap) + 4px); box-sizing: border-box; height: 100%; padding: 6px; overflow: visible; background: transparent; }
+#application[data-view="grid"][data-scroll] { align-content: start; overflow: hidden auto; }
+#application[data-view="grid"] .tile { min-height: 0; height: 100%; }
+/* A fill tile's app at the tile's size divided by its scale, drawn scaled from the top left (tile-grid.ts fitStage). */
+#application .tile .tile-fit { position: relative; flex: 1; min-height: 0; overflow: hidden; }
+#application .tile .tile-fit iframe { position: absolute; inset: 0 auto auto 0; flex: none; transform-origin: 0 0; }
+#application .tile figcaption > .tile-scale-chip { flex-shrink: 0; color: var(--tertiary); font: var(--text-2xs) / 1 var(--font-mono); white-space: nowrap; }
+#application .tile figcaption > .tile-scale-chip[hidden] { display: none; }
+#application[data-view="grid"] .tile:not(.focused) { cursor: pointer; }
+#application[data-view="grid"] .tile:not(.focused):hover { border-color: var(--line-strong); }
+#application[data-view="grid"] .tile.focused { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
+#application .tile figcaption > .tile-selected { display: none; }
+@container (max-width: 560px) { #application .tile figcaption > .tile-app, #application .tile figcaption > small { display: none; } }
+@container (max-width: 380px) {
+  #application .tile figcaption { gap: 6px; padding: 0 9px; }
+  /* The name keeps the room left (backlog 125): the scale chip gives way first (app-tiles.ts chipRoom), then the name's ellipsis. */
+  /* The accent border alone marks the selected tile here. */
+  #application[data-view="grid"] .tile.focused figcaption > .tile-selected { display: none; }
+}
+.avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tone-0); color: var(--tone-0-ink); font-size: var(--text-2xs); font-weight: var(--weight-strong); }
+
+/* The run control: scenario and live state in one piece beside Run. */
+.dock-run { display: flex; align-items: center; min-width: 0; height: 40px; padding: 0 6px; }
+.dock-run .context-button { height: 34px; color: var(--ink) !important; }
+.dock-run .context-button > .ui-icon:first-child, .dock-run .context-button > svg:first-child { color: var(--accent); }
+.dock-run .dock-status { padding: 0 10px; }
+.dock-run .live-state { font-size: 0; gap: 0; }
+.dock-run .live-state::before { width: 7px; height: 7px; }
+.dock-run #compact-progress { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-variant-numeric: tabular-nums; }
+/* A running run's spinner beside its line ("Running step 4 of 7 · 0:21"); still under reduced motion. */
+.dock-run #compact-progress[data-compact="Running"]::before { content: ""; flex: none; width: 11px; height: 11px; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: dock-spin 0.9s linear infinite; }
+@keyframes dock-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .dock-run #compact-progress[data-compact="Running"]::before { animation: none; } }
+body[data-environment-state="stopped"] .dock-run .live-state::before, body[data-environment-state="starting"] .dock-run .live-state::before { background: var(--tertiary); }
+/* One line on a desktop: the scenario name gives way (ellipsis), never Run, Stop or the live state. */
+.toolbar.dock { flex-wrap: nowrap; }
+.dock > .context-button, .dock #toggle { flex-shrink: 0; }
+.dock-run { flex: 0 1 auto; }
+.dock-run #scenario-picker { flex: 0 1 auto; min-width: 72px; }
+.dock-run .dock-status { flex: 0 1 auto; min-width: 64px; }
+@media (max-width: 760px) {
+  .toolbar.dock { flex-wrap: wrap; }
+  .dock > .context-button { flex-shrink: 1; min-width: 0; }
+  .dock-run { order: 5; flex: 1 1 0; }
+  .dock-run .dock-status { flex-shrink: 0; min-width: 0; padding: 0 8px; }
+  .dock #dock-stop { padding: 0 10px; }
+  .dock-run { overflow: hidden; }
+}
+@media (max-width: 480px) {
+  /* Run keeps its name for assistive technology; the icon alone makes room for Watch | Background. */
+  .dock #dock-run { width: 40px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
+  .run-mode button { padding: 0 8px; }
+}
+.address-bar input.address-input, .address-bar input.address-input:focus { min-height: 0; padding: 0 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
+@media (max-width: 760px) {
+  .dock #compact-progress { font-size: 0; max-width: 72px; }
+  .dock #compact-progress::after { content: attr(data-compact); font-size: var(--text-xs); }
+}
+
+/* Section tabs span the header's height so the active underline sits exactly on its bottom border. */
+.panel-heading { padding-block: 0; align-items: stretch; }
+.panel-heading > div { align-items: stretch; }
+.panel-heading #close { align-self: center; }
+.drawer-tabs .ui-tabs { height: 100%; align-items: stretch; }
+.drawer-tabs .ui-tabs button { height: 40px; }
+.drawer-tabs .ui-tabs button[aria-selected="true"]::after { bottom: -1px; }
+/* Backlog 31b: a detached identity's tile mirrors its window (object-fit keeps the device's shape); the ring marks
+   each gesture's target on the mirror, never inside the app. A mirror without frames while its identity acts says so. */
+#application .tile .tile-mirror { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-sunken); }
+#application .tile .tile-mirror img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
+#application .tile .tile-mirror .mirror-ring { position: absolute; border: 2px solid var(--accent); border-radius: 6px; pointer-events: none; }
+#application .tile .tile-mirror .mirror-state { margin: 0; padding: 4px 8px; color: var(--secondary); font-size: var(--text-2xs); }
+#application .tile .tile-mirror[data-mirror-state="stopped"] .mirror-state, #application .tile .tile-mirror[data-stale="true"] .mirror-state { color: var(--danger); }
+#application .tile .tile-mirror[data-stale="true"] .mirror-state::after { content: " · no frame for 5 s"; }
+#application .tile .tile-mirror .mirror-notice { margin: 0; padding: 0 8px 6px; color: var(--warning); font-size: var(--text-2xs); }
+/* A detached identity's controls stay in its header (Detached · device, Reattach); in a narrow tile only their icons. */
+@container (max-width: 560px) {
+  #application .tile figcaption > .detach-open { padding-inline: 6px; }
+  #application .tile figcaption > .detach-open > span { display: none; }
+}
+
+/* Device-sized tiles (backlog 31a, tile-device.ts): the app's frame keeps a device's CSS viewport and is scaled to fit. */
+#application .tile-device { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-muted, var(--surface)); }
+#application .tile-device-frame { position: relative; flex: none; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
+#application .tile-device-frame iframe { position: absolute; inset: 0 auto auto 0; flex: none; transform-origin: 0 0; border: 0; background: #fff; }
+/* A phone (a mobile device profile) in its bezel with a notch, centred in the tile (tile-device.ts PHONE_BEZEL). */
+#application .tile-device[data-phone] .tile-device-frame { box-sizing: content-box; border: 10px solid var(--phone-bezel); border-radius: 40px; box-shadow: var(--shadow-md); }
+#application .tile-device[data-phone] .tile-device-frame::after { content: ""; position: absolute; z-index: 1; top: 6px; left: 50%; width: 26%; height: 16px; border-radius: 999px; background: var(--phone-bezel); transform: translateX(-50%); pointer-events: none; }
+#application .tile-device-chip { color: var(--tertiary); font: var(--text-2xs) / 1 var(--font-mono); white-space: nowrap; }
+#application .tile-device-note { font-size: var(--text-xs); color: var(--accent); white-space: nowrap; }
+
+/* The header's pills (the redesign's S-tile): the host the identity runs in and the device the tile shows. Outlined,
+   no fill; the device menu lies over its pill, so a click opens the same list. */
+#application .tile .tile-pill { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--secondary); font: var(--weight-medium) var(--text-xs) / 1 var(--font-ui); white-space: nowrap; }
+#application .tile .tile-pill > .ui-icon { flex-shrink: 0; color: var(--tertiary); }
+/* C6 on the tile: what the host cannot do yet, a warning mark at the end of its pill (the row says it in words). */
+#application .tile .tile-pill > .tile-host-limit { display: inline-flex; margin-left: 1px; }
+#application .tile .tile-pill > .tile-host-limit .ui-icon { color: var(--warning); }
+#application .tile .tile-device-pill { cursor: pointer; }
+#application .tile .tile-device-pill:hover { border-color: var(--line-strong); color: var(--ink); }
+#application .tile .tile-device-pill:focus-within { border-color: var(--accent-line); box-shadow: var(--focus-ring); }
+#application .tile .tile-device-pill > .tile-device-menu { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; appearance: none; cursor: pointer; font-size: var(--text-xs); }
+#application .tile .tile-device-pill > .tile-device-menu option { color: var(--ink); }
+/* A narrower tile drops the scale chip and the reload note first; a narrow one (under 320 px, or any tile on a phone) keeps only the pills'
+   icons, and the device menu still opens from its pill. */
+@container (max-width: 560px) {
+  #application .tile figcaption > .tile-device-chip, #application .tile figcaption > .tile-device-note { display: none; }
+}
+@container (max-width: 320px) {
+  #application .tile .tile-pill { width: 28px; padding: 0; justify-content: center; }
+  #application .tile .tile-pill > .tile-pill-label { display: none; }
+}
+@media (max-width: 760px) {
+  #application .tile .tile-pill { width: 28px; padding: 0; justify-content: center; }
+  #application .tile .tile-pill > .tile-pill-label { display: none; }
+}
+
+/* The condition strip under the header (tile-strip.ts): the network condition the lab applies to this tile, tinted
+   by it (online, offline, slow), its numbers in the mono face, then the address and the pop-out. */
+#application .tile .tile-strip { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2); height: 32px; padding: 0 8px 0 12px; background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
+#application .tile .tile-strip:has(> .tile-condition[data-condition="offline"]) { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
+#application .tile .tile-strip:has(> .tile-condition[data-condition="throttled"]) { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
+#application .tile .tile-condition { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; color: var(--success); font-size: var(--text-xs); font-weight: var(--weight-strong); white-space: nowrap; }
+#application .tile .tile-condition[data-condition="offline"] { color: var(--danger); }
+#application .tile .tile-condition[data-condition="throttled"] { color: var(--warning); }
+#application .tile .tile-condition-detail { font: var(--weight-regular) var(--text-2xs) / 1 var(--font-mono); }
+/* The pop-out: an outlined icon button (its name stays its label and tooltip). */
+/* Backlog 108: a hosted tile's host applies no network policy here (the reason in its tooltip). */
+#application .tile .tile-strip > .tile-network-note { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); border-radius: var(--radius-pill); color: var(--warning); font-size: var(--text-2xs); font-weight: var(--weight-medium); white-space: nowrap; cursor: help; }
+#application .tile .tile-strip > .tile-network-note > .ui-icon { width: 12px; height: 12px; }
+#application .tile .tile-strip > .detach-open { flex-shrink: 0; width: 24px; min-height: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--secondary); }
+#application .tile .tile-strip > .detach-open:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
+#application .tile .tile-strip > .detach-open > span { display: none; }
+#application .tile .tile-strip > .detach-open > .ui-icon { width: 13px; height: 13px; }
+@container (max-width: 380px) { #application .tile .tile-condition-detail { display: none; } }
+
+/* The stage header's "N people" (the identity picker), the bottom bar's environment detail (the design). */
+.stage-head .stage-people { display: inline-flex; align-items: center; gap: 6px; min-height: 0; height: 34px; padding: 0 8px 0 2px; border: 0; background: transparent; color: var(--ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
+.stage-head .stage-people:hover { background: transparent; color: var(--accent); }
+.stage-head .stage-people .ui-icon { color: var(--tertiary); }
+.dock-env-detail { color: var(--tertiary); font-size: var(--text-xs); font-weight: var(--weight-regular); white-space: nowrap; }
+@media (max-width: 1100px) { .dock-env-detail { display: none; } }
+/* The environment pill keeps its whole name: in the bar the run's line gives way first, in the pill its detail; the name
+   shortens only when the bar is full (its title names it whole). On a phone the pill has the first row to itself. */
+.dock #environment-picker { max-width: none; min-width: 0; }
+.dock #environment-picker .dock-env-detail { flex: 0 100000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+@media (min-width: 761px) {
+  .dock #environment-picker { flex: 0 1 auto; }
+  .dock-run { flex: 0 100000 auto; }
+}
+.dock-run #compact-progress .ui-icon { flex: none; }
+/* A replay's line (backlog 110): "Replay" first, the run's title cut at its end with an ellipsis. */
+.dock-run #compact-progress > .dock-replay-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dock-run #compact-progress[data-tone="success"] .ui-icon, .dock-run #compact-progress[data-compact="Ready"] .ui-icon { color: var(--success); }
+.dock-run #compact-progress[data-tone="danger"] .ui-icon { color: var(--danger); }
+.dock-run #compact-progress[data-tone="warning"] .ui-icon { color: var(--warning); }
+.dock-run #compact-progress .dock-line-detail { color: var(--secondary); font-weight: var(--weight-regular); }
+/* The Live indicator as the environment pill's dot (its word stays for assistive technology). */
+.context-button .live-state { font-size: 0; gap: 0; }
+.context-button .live-state::before { width: 8px; height: 8px; }

package/entrypoints/panel/src/client/gallery.css

@@ -0,0 +1,68 @@
+/* The design-system page only (gallery.html). */
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-md) / var(--leading) var(--font-ui); -webkit-font-smoothing: antialiased; }
+#gallery { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; }
+.gallery-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
+.gallery-brand { display: flex; align-items: center; gap: 16px; }
+.gallery-brand h1 { margin: 0; font-size: 28px; letter-spacing: -0.03em; font-weight: var(--weight-strong); }
+.gallery-brand p { margin: 2px 0 0; color: var(--secondary); }
+.gallery-section { padding: 28px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
+.gallery-section > header h2 { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; }
+.gallery-section > header p { margin: 4px 0 0; max-width: 680px; color: var(--secondary); }
+.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
+.gallery-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.gallery-row .ui-progress { width: 140px; }
+.gallery-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.gallery-swatch { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
+.gallery-swatch span { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); }
+.gallery-swatch strong { font-size: var(--text-sm); font-weight: var(--weight-medium); }
+.gallery-swatch code { font: var(--text-2xs) var(--font-mono); color: var(--tertiary); }
+.gallery-actor { display: inline-flex; align-items: center; gap: 8px; padding-right: 14px; }
+.gallery-type { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
+.gallery-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--soft); color: var(--secondary); }
+.gallery-symbol.is-control { background: var(--info-soft); color: var(--info); }
+.gallery-gherkin { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
+.gallery-gherkin .ui-card, .gallery-real .ui-card { display: flex; flex-direction: column; gap: 14px; }
+.gallery-gherkin .ui-section-header, .gallery-real .ui-section-header { flex-direction: column; align-items: flex-start; }
+.gallery-gherkin .ui-section-actions, .gallery-real .ui-section-actions { flex-wrap: wrap; align-items: center; }
+.gallery-real { display: flex; flex-direction: column; gap: 14px; }
+.gallery-real[data-width="narrow"] > div:last-child { max-width: 420px; }
+.gallery-real[data-width="wide"] > div:last-child { max-width: 760px; }
+.gallery-select { height: 34px; padding: 0 10px; max-width: 520px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: var(--text-sm) var(--font-ui); }
+.gallery-note { margin: 0; color: var(--secondary); }
+code { font-family: var(--font-mono); font-size: 0.92em; }
+/* The lab window's states (gallery.ts "Bottom bar, by state", "Stage header, by state", "Tiles"): the shapes the lab
+   window draws (frame.css), redrawn here from the tokens so this page stays a page. */
+.gallery-spacer { flex: 1; }
+.gallery-dock { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow-x: auto; }
+.gallery-dock .ui-button { height: 38px; border-radius: var(--radius-md); }
+.gallery-dock-lab, .gallery-dock-env { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 0 8px; font-weight: var(--weight-medium); white-space: nowrap; }
+.gallery-dock-lab { font-weight: var(--weight-strong); }
+.gallery-dock-env small { color: var(--tertiary); font-size: var(--text-xs); }
+.gallery-dock-env::after { content: ""; width: 1px; height: 22px; margin-left: 6px; background: var(--line); }
+.gallery-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--success); }
+.gallery-dot.is-acting { background: var(--accent); }
+.gallery-line { display: inline-flex; align-items: center; gap: 6px; color: var(--secondary); white-space: nowrap; }
+.gallery-line strong { color: var(--ink); }
+.gallery-spinner { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: gallery-spin 0.9s linear infinite; }
+@keyframes gallery-spin { to { transform: rotate(360deg); } }
+.gallery-run-mode { display: inline-flex; flex-shrink: 0; gap: 8px; }
+.gallery-segment { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-control); }
+.gallery-segment span { padding: 5px 12px; border-radius: var(--radius-control); color: var(--secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); }
+.gallery-segment span[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
+.gallery-stage-head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(var(--dot) 1.4px, transparent 1.5px) 0 0 / 18px 18px, var(--canvas); color: var(--secondary); font-size: var(--text-sm); }
+.gallery-stage-head > strong { color: var(--ink); font-family: var(--font-display); font-size: var(--text-lg); }
+.gallery-stage-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-weight: var(--weight-medium); }
+.gallery-stage-chip.is-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
+.gallery-tile { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
+.gallery-tile-head { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; }
+.gallery-tile-head > strong { font-family: var(--font-display); font-size: var(--text-lg); }
+.gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--secondary); font-size: var(--text-xs); white-space: nowrap; }
+.gallery-tile-strip { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; background: color-mix(in srgb, var(--success) 9%, var(--surface)); color: var(--success); font-size: var(--text-xs); white-space: nowrap; }
+.gallery-tile-strip[data-condition="offline"] { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
+.gallery-tile-strip[data-condition="throttled"] { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); color: var(--warning); }
+.gallery-tile-strip code { font: var(--text-2xs) / 1 var(--font-mono); }
+.gallery-tile-strip .gallery-acting { color: var(--accent); }
+.gallery-tile-strip .gallery-address { padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--secondary); }
+.gallery-tile-strip > .ui-icon { color: var(--secondary); }
+.gallery-tile-strip > .ui-icon:first-child { color: inherit; }

package/entrypoints/panel/src/client/gallery.d.ts

@@ -0,0 +1 @@
+export {};