@atmem/architect 0.0.0-stage → 0.2.0

package/src/atflow.css

@@ -0,0 +1,1140 @@
+/* Light by default; the header toggle sets data-theme="dark". */
+:root { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
+
+/* AtFlow — Architecture Canvas shell. Tokens from atmem-tokens.css (generated from AtMem.ai packages/tokens). */
+@font-face { font-family: "DM Sans"; font-style: normal; font-display: swap; font-weight: 100 1000;
+  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }
+@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
+  src: url("/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/manrope-latin-wght-normal.woff2") format("woff2"); }
+:root {
+  /* Shared AtMem.ai tokens: pink actions, neutral surfaces, accessible light/dark contrast. */
+  --ink: var(--color-ink);
+  --ink-2: var(--color-muted);
+  --paper: var(--color-card);
+  --board: var(--color-bg);
+  --line: var(--color-line);
+  --edge: var(--color-muted);
+  --accent: var(--color-brand-text);
+  --accent-soft: var(--color-brand-soft);
+  --action: var(--color-brand);
+  --action-hover: light-dark(#EB8DA3, #F7B8C6);
+  --chrome: var(--color-card);
+  --chrome-2: var(--color-line);
+  --chrome-ink: var(--color-ink);
+  --good: var(--color-good);
+  --bad: var(--color-bad);
+  --warn: var(--color-warn);
+  --radius: var(--radius-lg);
+  --shadow: var(--elevation-card);
+  font-family: var(--type-family-sans);
+  color: var(--ink);
+  background: var(--board);
+}
+* { box-sizing: border-box; }
+html, body, #root { margin: 0; height: 100%; }
+body { background: var(--board); font-size: 14px; -webkit-font-smoothing: antialiased; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button { cursor: pointer; background: none; border: 0; padding: 0; }
+button:disabled { cursor: not-allowed; opacity: 0.4; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.muted { color: var(--ink-2); }
+.small { font-size: 12px; }
+.spin { animation: spin 0.9s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---------- Layout ---------- */
+.app {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  grid-template-rows: 52px 1fr;
+  height: 100vh;
+}
+.app.chat-closed { grid-template-columns: minmax(0, 1fr); }
+.bar { grid-column: 1 / -1; }
+
+/* ---------- Top bar ---------- */
+.bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 12px;
+  background: var(--paper);
+  border-bottom: 1px solid var(--line);
+  z-index: 20;
+}
+.brand { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; padding: 6px; border-radius: 8px; }
+.brand:hover { background: var(--board); }
+.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; color: var(--ink-2); }
+.crumbs button, .crumbs span { padding: 5px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
+.crumbs button:hover { background: var(--board); color: var(--ink); }
+.crumbs .here { color: var(--ink); font-weight: 600; }
+.crumbs .clear { padding: 4px; display: grid; place-items: center; }
+.project-name {
+  border: 1px solid transparent; background: none; border-radius: 6px;
+  padding: 5px 8px; font-weight: 600; color: var(--ink); width: 22ch; min-width: 6ch;
+  text-overflow: ellipsis;
+}
+.project-name:hover { border-color: var(--line); }
+.project-name:focus { border-color: var(--accent); outline: none; }
+
+.modes { display: flex; background: var(--board); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
+.modes button { padding: 5px 14px; border-radius: 6px; font-weight: 500; color: var(--ink-2); display: flex; gap: 5px; align-items: center; }
+.modes button.on { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
+.bar-actions { display: flex; align-items: center; gap: 6px; }
+.warn-text { color: var(--warn); font-size: 12px; }
+
+.icon {
+  display: inline-grid; place-items: center; width: 34px; height: 34px;
+  border-radius: 8px; color: var(--ink);
+}
+.icon:hover:not(:disabled) { background: var(--board); }
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 600;
+  border: 1.5px solid var(--ink); background: var(--paper);
+}
+.btn:hover:not(:disabled) { background: var(--board); }
+.btn.primary { background: var(--ink); color: var(--paper); }
+.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
+.btn.ghost { border-color: transparent; }
+.btn.danger { color: var(--bad); }
+.run-button.broken { background: var(--paper); color: var(--bad); border-color: var(--bad); }
+.issues-pill {
+  display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px;
+  border-radius: 99px; color: var(--bad); border: 1.5px solid var(--bad); font-weight: 600; font-size: 12px;
+}
+
+.menu {
+  position: absolute; top: 48px; right: 50px; min-width: 200px;
+  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
+  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column;
+}
+.menu button { text-align: left; padding: 8px 10px; border-radius: 6px; }
+.menu button:hover:not(:disabled) { background: var(--board); }
+.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
+.menu.issues { right: 140px; max-width: 360px; }
+.menu.issues button { color: var(--bad); }
+
+/* ---------- Canvas ---------- */
+.canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--board); }
+.canvas .react-flow { background: var(--board); --xy-background-pattern-dots-color-default: light-dark(#c9cdce, #2c3133); }
+.toolbar {
+  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
+  display: flex; flex-direction: column; gap: 2px; padding: 5px;
+  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 5;
+}
+.toolbar .icon { width: 40px; height: 40px; }
+.zoom {
+  position: absolute; right: 14px; bottom: 14px; display: flex; gap: 2px; padding: 4px;
+  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 5;
+}
+.hint {
+  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0;
+  font-size: 12px; color: var(--ink-2); background: var(--paper); padding: 4px 10px;
+  border-radius: 99px; border: 1px solid var(--line); pointer-events: none; z-index: 4; white-space: nowrap;
+}
+.empty-canvas { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; z-index: 3; }
+.empty-canvas p { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
+
+/* Blocks: one clear shape, icon for intent, label, provider. */
+.blk {
+  display: flex; align-items: center; gap: 10px; width: 210px; min-height: 58px; padding: 10px 12px;
+  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
+  transition: box-shadow var(--motion-fast), opacity var(--motion-fast);
+}
+.blk:hover { box-shadow: var(--shadow); }
+.blk.selected { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
+.blk.dim { opacity: 0.25; }
+.blk.kind-source { border-radius: 12px 12px 22px 22px; }
+.blk.kind-guard { border-style: double; border-width: 4px; }
+.blk.kind-output { border-radius: 99px; }
+.blk.kind-resource { border-style: dashed; }
+.blk-icon {
+  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
+  border-radius: 9px; background: var(--board); color: var(--ink);
+}
+.blk-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.blk-text strong { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blk-text small { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 12px; }
+.pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--provider); display: inline-block; }
+.blk-state { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; }
+.state-passed .blk-state { background: var(--good); color: #fff; }
+.state-failed .blk-state { background: var(--bad); color: #fff; }
+.state-running .blk-state { color: var(--accent); }
+.blk.state-passed { border-color: var(--good); }
+.blk.state-failed { border-color: var(--bad); box-shadow: 0 0 0 4px light-dark(#fde3e5, #3a1519); }
+.blk.state-running { border-color: var(--accent); }
+.blk.state-skipped { opacity: 0.45; border-style: dashed; }
+
+.react-flow__handle {
+  width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--ink);
+  opacity: 0; transition: opacity var(--motion-fast);
+}
+.react-flow__node:hover .react-flow__handle, .react-flow__node.selected .react-flow__handle,
+.react-flow__handle.connectingfrom, .react-flow__handle.connectingto { opacity: 1; }
+.react-flow__handle:hover { background: var(--accent); border-color: var(--accent); }
+.level-system .react-flow__handle { opacity: 0 !important; }
+
+/* Layers (System level) */
+.layer {
+  width: 230px; padding: 16px 18px; background: var(--paper);
+  border: 2px solid var(--ink); border-radius: 16px; display: flex; flex-direction: column; gap: 6px;
+  box-shadow: 6px 6px 0 light-dark(#e3e5e6, #22282a);
+}
+.layer:hover { box-shadow: 6px 6px 0 var(--accent-soft); border-color: var(--accent); }
+.layer-head { display: flex; justify-content: space-between; align-items: center; }
+.layer-head strong { font-size: 17px; }
+.layer small { color: var(--ink-2); }
+.layer-providers { display: flex; gap: 4px; }
+.layer-providers span { width: 10px; height: 10px; border-radius: 50%; }
+.layer.state-passed { border-color: var(--good); }
+.layer.state-failed { border-color: var(--bad); }
+
+/* Wires */
+.react-flow__edge-path { stroke: var(--edge); stroke-width: 2; }
+.react-flow__edge .react-flow__arrowhead polyline,
+.react-flow__arrowhead polyline { stroke: var(--edge); fill: var(--edge); }
+.react-flow__edge.selected .react-flow__edge-path, .react-flow__edge:hover .react-flow__edge-path { stroke: var(--accent); stroke-width: 3; }
+.wire-passed .react-flow__edge-path { stroke: var(--good); }
+.wire-failed .react-flow__edge-path { stroke: var(--bad); stroke-dasharray: 6 4; }
+.react-flow__edge.dim { opacity: 0.2; }
+.react-flow__edge-text { fill: var(--ink-2); font-size: 11px; }
+.react-flow__edge-textbg { fill: var(--board); }
+.react-flow__connectionline path, .react-flow__connection-path { stroke: var(--accent); stroke-width: 2; }
+
+/* Palette */
+.palette {
+  position: absolute; left: 72px; top: 50%; transform: translateY(-50%); width: 300px; max-height: min(520px, 80%);
+  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
+  border-radius: 12px; box-shadow: var(--shadow); z-index: 6; overflow: hidden;
+}
+.palette-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
+.palette-search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; }
+.palette-search select { border: 0; background: var(--board); border-radius: 6px; padding: 3px 4px; font-size: 12px; }
+.chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; }
+.chips button { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); font-size: 12px; }
+.chips button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+.palette-list { overflow: auto; padding: 4px 6px 8px; }
+.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 7px; text-align: left; }
+.palette-item:hover { background: var(--board); }
+.palette-item span:not(.dot) { flex: 1; }
+.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.pad { padding: 12px; margin: 0; }
+
+/* Block detail (level 3) */
+.detail {
+  position: absolute; inset: 0; z-index: 7; background: var(--board);
+  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 1fr); gap: 20px; padding: 16px 28px 28px 80px; overflow: auto; align-content: start;
+}
+.detail-navigation { position: sticky; top: 0; grid-column: 1 / -1; align-self: start; z-index: 10; background: var(--board); padding-bottom: 8px; }
+.detail .back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: 13px; z-index: 10; }
+.detail .back:hover { border-color: var(--accent); color: var(--accent); }
+.detail .back kbd { font: 11px var(--type-family-mono); color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
+.detail h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin: 0 0 10px; }
+.detail h4 { font-size: 12px; color: var(--ink-2); margin: 16px 0 6px; font-weight: 600; }
+.detail-col { min-width: 0; }
+.terminal {
+  display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; margin-bottom: 6px;
+  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px; text-align: left; font-weight: 500;
+}
+.terminal:hover { border-color: var(--accent); }
+.terminal small { color: var(--ink-2); }
+.detail pre {
+  margin: 0; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
+  font: 12px/1.5 var(--type-family-mono); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto;
+}
+.detail-col.probed pre { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.detail-core {
+  align-self: start; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
+  padding: 18px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 12px;
+}
+.detail-core p { margin: 0; }
+.detail-title { display: flex; align-items: center; gap: 10px; }
+.blk-provider { width: 12px; height: 12px; border-radius: 50%; background: var(--provider); flex: none; }
+.detail-title input { flex: 1; min-width: 0; width: 100%; font-size: 18px; font-weight: 700; border: 0; background: none; outline: none; padding: 2px 0; border-bottom: 1.5px solid transparent; }
+.detail-title input:focus { border-bottom-color: var(--accent); }
+.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.fields > label { min-width: 0; }
+.fields .field-wide { grid-column: 1 / -1; }
+.fields input:not([type="checkbox"]), .fields select { min-width: 0; width: 100%; max-width: 100%; }
+.detail .terminal > * { min-width: 0; overflow-wrap: anywhere; }
+@media (max-width: 520px) { .detail .fields { grid-template-columns: minmax(0, 1fr); } }
+.fields label, .dialog-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
+.fields input, .fields select, .dialog-field input, .dialog-field select, .runbar select, .code-input {
+  height: 34px; padding: 0 9px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 13px;
+}
+.fields input:focus, .fields select:focus { border-color: var(--accent); outline: none; }
+.trace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
+.trace.passed { color: var(--good); }
+.trace.failed { color: var(--bad); }
+.trace .error-box { flex-basis: 100%; }
+.error-box { margin: 0; padding: 10px 12px; border-radius: 8px; background: light-dark(#fde3e5, #3a1519); color: var(--bad); font-weight: 500; font-size: 13px; }
+
+/* Test run bar */
+.runbar {
+  position: absolute; left: 72px; right: 140px; bottom: 14px; z-index: 6;
+  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
+  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
+}
+.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; padding: 2px; flex: none; }
+.seg button { padding: 4px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
+.seg button.on { background: var(--ink); color: var(--paper); }
+.run-summary { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
+.run-summary.passed { color: var(--good); }
+.run-summary.failed { color: var(--bad); }
+.steps { display: flex; gap: 6px; overflow-x: auto; min-width: 0; flex: 1; }
+.step {
+  white-space: nowrap; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 500;
+  border: 1.5px solid var(--line);
+}
+.step.passed { border-color: var(--good); color: var(--good); }
+.step.failed { border-color: var(--bad); color: var(--bad); background: light-dark(#fde3e5, #3a1519); }
+.step.skipped { border-style: dashed; color: var(--ink-2); }
+.step.on { box-shadow: 0 0 0 3px var(--accent-soft); }
+
+/* Front panel (LabVIEW indicators) */
+.front-panel {
+  position: absolute; inset: 0 0 72px; z-index: 5; background: var(--board);
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-content: start; gap: 14px; padding: 28px 28px 28px 80px; overflow: auto;
+}
+.indicator {
+  position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
+  padding: 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; text-align: left;
+}
+.indicator strong { font-size: 28px; font-weight: 700; line-height: 1.1; }
+.indicator span:last-child { color: var(--ink-2); font-size: 13px; }
+.indicator-number { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--ink-2); }
+.indicator.passed { border-color: var(--good); }
+.indicator.passed strong { color: var(--good); }
+.indicator.failed { border-color: var(--bad); }
+.indicator.failed strong { color: var(--bad); }
+.indicator.skipped { border-style: dashed; opacity: 0.6; }
+
+/* Deploy card */
+.deploy {
+  position: absolute; right: 14px; top: 14px; width: 280px; z-index: 6;
+  display: flex; flex-direction: column; gap: 10px; padding: 16px;
+  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
+}
+.deploy h3 { margin: 0; font-size: 15px; }
+.deploy p { margin: 0; }
+.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.checks li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 13px; }
+.checks li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--ink-2); border-radius: 4px; flex: none; }
+.checks li.ok { color: var(--ink); }
+.checks li.ok::before { background: var(--good); border-color: var(--good); }
+
+/* ---------- Architect chat ---------- */
+.chat { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-left: 1px solid var(--line); }
+.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 8px; }
+.chat-head strong { font-size: 15px; }
+.model { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line); }
+.model:hover { color: var(--ink); border-color: var(--ink); }
+.led { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
+.led.on { background: var(--good); }
+.phases { display: flex; list-style: none; margin: 0; padding: 0 16px 10px; gap: 4px; border-bottom: 1px solid var(--line); }
+.phases li { flex: 1; }
+.phases button {
+  width: 100%; padding: 6px 0 4px; font-size: 12px; color: var(--ink-2); border-top: 3px solid var(--line); text-align: left;
+}
+.phases button.done { border-top-color: var(--ink); color: var(--ink); }
+.phases button.on { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }
+.messages { flex: 1; min-height: 0; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; padding: 16px; }
+.chat > :not(.messages) { flex-shrink: 0; }
+.message-list { display: flex; flex-direction: column; gap: 12px; }
+.msg { white-space: pre-wrap; line-height: 1.5; font-size: 14px; max-width: 95%; }
+.msg.user { align-self: flex-end; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 85%; }
+.msg.working { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
+.link { color: var(--accent); font-weight: 500; }
+.proposal { border: 2px solid var(--ink); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
+.proposal ul { list-style: none; margin: 0; padding: 0; font: 13px/1.6 var(--type-family-mono); }
+.proposal .add { color: var(--good); }
+.proposal .chg { color: var(--warn); }
+.proposal .del { color: var(--bad); }
+.row { display: flex; gap: 6px; }
+.prompts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
+.prompts button { padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; }
+.prompts button:hover:not(:disabled) { border-color: var(--ink); }
+.composer { position: relative; margin: 0 12px 12px; }
+.composer textarea {
+  width: 100%; resize: none; padding: 10px 46px 10px 12px; border: 1.5px solid var(--ink); border-radius: 12px;
+  background: var(--paper); line-height: 1.4; min-height: 60px;
+}
+.composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.send { position: absolute; right: 8px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
+
+/* ---------- Toast & modal ---------- */
+.toast {
+  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
+  background: var(--ink); color: var(--paper); padding: 9px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--shadow); max-width: calc(100vw - 32px);
+}
+.backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.35); display: grid; place-items: center; z-index: 40; padding: 16px; }
+.modal {
+  position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto;
+  background: var(--paper); border-radius: 16px; padding: 24px; box-shadow: var(--shadow);
+  display: flex; flex-direction: column; gap: 12px;
+}
+.modal h2 { margin: 0; font-size: 20px; padding-right: 32px; }
+.modal p { margin: 0; color: var(--ink-2); line-height: 1.5; }
+.modal .eyebrow { display: none; }
+.modal-close { position: absolute; top: 14px; right: 14px; }
+.modal-fine { font-size: 12px; }
+.modal a { color: var(--accent); }
+.template-list { display: flex; flex-direction: column; gap: 6px; }
+.template-list button {
+  display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px; text-align: left;
+}
+.template-list button:hover { border-color: var(--ink); }
+.template-list button span { flex: 1; display: flex; flex-direction: column; }
+.template-list small { color: var(--ink-2); }
+.section-label { font-size: 12px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }
+.code-input { height: 160px; padding: 10px; font-family: var(--type-family-mono); resize: vertical; }
+.run-button.full, .button.full { width: 100%; }
+.modal .button {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px;
+  border-radius: 8px; font-weight: 600; border: 1.5px solid var(--ink);
+}
+.modal .button.run-button { background: var(--ink); color: var(--paper); }
+.sidecar-state, .inspector-info, .login-instructions, .snapshot-result, .pulumi-path, .snapshot-upload {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px;
+}
+.login-instructions { flex-direction: column; align-items: flex-start; }
+.login-instructions code { font-family: var(--type-family-mono); background: var(--board); padding: 4px 8px; border-radius: 6px; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); display: inline-block; }
+.status-dot.passed { background: var(--good); }
+.licences { margin: 0; display: grid; gap: 4px; }
+.licences dt { font-weight: 600; margin-top: 8px; }
+.licences dd { margin: 0; color: var(--ink-2); font-size: 13px; }
+
+
+/* ---------- Engagement documents (Discover, Options, Decisions) ---------- */
+.doc {
+  position: absolute; inset: 0; z-index: 8; overflow: auto; background: var(--board);
+  padding: 72px max(24px, calc((100% - 980px) / 2)) 40px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.doc-head h2 { margin: 0 0 2px; font-size: 22px; }
+.doc-head p { margin: 0; }
+.row-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
+.doc-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: center; margin-top: 8px; }
+.doc-sub h3 { margin: 0; font-size: 15px; }
+.doc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
+.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
+.field textarea, .doc input, .doc select, .build textarea {
+  font-size: 14px; font-weight: 400; color: var(--ink); background: var(--paper);
+  border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; min-width: 0;
+}
+.doc select { padding: 6px 8px; }
+.field textarea:focus, .doc input:focus, .doc select:focus, .build textarea:focus { outline: none; border-color: var(--accent); }
+.field.known textarea { border-color: var(--ink); }
+.field.wide textarea { min-height: 64px; font-size: 15px; }
+.brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
+.cases { display: flex; flex-direction: column; gap: 6px; }
+.case { display: grid; grid-template-columns: 2fr 90px 90px 90px auto 2fr 34px; gap: 6px; align-items: center; }
+.case.head { font-size: 12px; font-weight: 600; color: var(--ink-2); }
+.verdicts button { font-size: 12px; padding: 4px 8px; white-space: nowrap; }
+.case.verdict-pursue .verdicts .on { background: var(--good); }
+.case.verdict-rule-out .verdicts .on { background: var(--bad); }
+.case.verdict-rule-out > input:first-child { text-decoration: line-through; color: var(--ink-2); }
+
+.subviews { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; background: var(--paper); box-shadow: var(--shadow); }
+.level-system .hint, .level-flow .hint { top: 56px; }
+
+.options-wrap { overflow-x: auto; }
+.options { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
+.options th, .options td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
+.options thead th { font-size: 14px; }
+.options thead th .link { display: block; font-weight: 500; margin-top: 2px; }
+.options tbody th { font-weight: 600; min-width: 170px; }
+.options tbody th small { display: block; font-weight: 400; font-size: 11px; }
+.options td textarea { width: 100%; min-width: 110px; font-size: 12px; }
+.options .total td, .options .total th { font-size: 16px; font-weight: 700; }
+.options .best { background: var(--accent-soft); }
+
+.adr { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
+.adr.status-proposed { border-style: dashed; }
+.adr.status-superseded { opacity: 0.55; }
+.adr-head { display: grid; grid-template-columns: auto 1fr 160px 130px 34px; gap: 8px; align-items: center; }
+.adr-head input:first-of-type { font-weight: 700; font-size: 15px; }
+.adr-head .missing { border-color: var(--warn); }
+.adr-id { font: 600 12px var(--type-family-mono); color: var(--ink-2); }
+.adr-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+.build { width: 300px; max-height: calc(100% - 100px); overflow: auto; }
+.build h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
+.build textarea { font-size: 13px; }
+.checks li.bad { color: var(--bad); }
+.checks li.bad::before { background: var(--bad); border-color: var(--bad); }
+.link-plain { text-align: left; }
+.blk.existing { background: light-dark(#eef0f1, #1b2022); border-style: solid; }
+
+.measures { display: flex; flex-direction: column; gap: 6px; }
+.measures h4 { margin: 0; font-size: 12px; color: var(--ink-2); }
+.measure { display: grid; grid-template-columns: 1.4fr 1.2fr 56px 70px 30px; gap: 4px; }
+.measure input, .measure select { min-width: 0; height: 30px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 12px; }
+.mono { font-family: var(--type-family-mono); }
+label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); grid-column: 1 / -1; }
+
+@media (max-width: 900px) {
+  .doc { padding: 64px 16px 24px; }
+  .case { grid-template-columns: 1fr 1fr; }
+  .line { grid-template-columns: 1fr 1fr; }
+  .discover .ask h2 { font-size: 20px; }
+  .case.head { display: none; }
+  .adr-head, .adr-body { grid-template-columns: 1fr; }
+  .build { width: auto; }
+}
+
+
+/* Requirements, assumptions, open questions */
+.records { display: flex; flex-direction: column; gap: 8px; }
+.record { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
+.record.answered { opacity: 0.7; }
+.record-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.record-row > input:first-child { flex: 1 1 260px; }
+.measure-row input { width: 110px; }
+.measure-row input:first-of-type { width: 170px; }
+.links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 99px; border: 1px solid var(--ink); font-size: 12px; }
+.chip.missing { border-color: var(--warn); color: var(--warn); }
+.chip button { width: 18px; height: 18px; border-radius: 50%; }
+.chip button:hover { background: var(--board); }
+.links select { font-size: 12px; padding: 2px 6px; border-radius: 99px; }
+.adr-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+label.inline { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
+label.inline input { width: 200px; font-size: 12px; }
+.revise { display: flex; gap: 6px; align-items: center; flex: 1; }
+.revise input { flex: 1; min-width: 160px; }
+.history summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
+.history ol { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
+.linked { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
+.linked p { margin: 0; font-size: 13px; }
+.linked strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); margin-right: 4px; }
+
+
+/* Discover: one open question at a time */
+.discover .ask { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
+.discover .ask h2 { margin: 0; font-size: 24px; line-height: 1.25; }
+.discover .ask p { margin: 0; }
+.discover .ask form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
+.discover .ask textarea { font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); resize: vertical; }
+.discover .ask textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.why { color: var(--accent); font-size: 13px; }
+.discover .intro { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 22px; }
+.discover .intro h2 { margin: 0 0 6px; font-size: 22px; }
+.discover .intro p { margin: 0; }
+.prompts .primary-chip { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
+.btn.sketch { margin-left: auto; background: var(--accent); border-color: var(--accent); color: #fff; }
+.facts { display: flex; flex-wrap: wrap; gap: 6px; }
+.field.assumed textarea { border-style: dashed; }
+.extra summary { cursor: pointer; color: var(--ink-2); font-size: 13px; margin-top: 10px; }
+.extra[open] summary { margin-bottom: 10px; }
+.badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; }
+
+/* Notes card and proposal preview on the board */
+.notes-card {
+  position: absolute; top: 14px; left: 72px; width: 340px; max-height: calc(100% - 90px); overflow: auto; z-index: 6;
+  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px;
+  display: flex; flex-direction: column; gap: 8px;
+}
+.notes-card .doc-sub { margin: 0; }
+.notes-card .brief-grid { grid-template-columns: 1fr; }
+.notes-card .field textarea, .notes-card input, .notes-card select { font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
+.notes-card .case { grid-template-columns: 1fr; }
+.connect { display: flex; flex-direction: column; gap: 12px; }
+.connect .signin { min-height: 34px; display: flex; align-items: center; }
+.connect code { font-family: var(--type-family-mono); }
+.skills { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
+.skills span { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); cursor: default; }
+.signals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.signals span { font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); }
+.msg.user .signals span { color: inherit; }
+.btn.fix { margin-top: 8px; height: 30px; }
+.live-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); margin-left: auto; margin-right: 8px; cursor: pointer; }
+.known { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.known-item dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
+.known-item dt em { text-transform: none; font-weight: 500; color: var(--warn); }
+.known-item dt .link { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0; }
+.known-item:hover dt .link, .known-item dt .link:focus { opacity: 1; }
+.known-item dd { margin: 2px 0 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
+.known-item dd textarea { width: 100%; }
+.chat-title { display: flex; align-items: center; gap: 6px; }
+.blk { width: 240px; align-items: flex-start; }
+.blk-why { font-size: 12px; line-height: 1.35; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 3px; }
+.blk-text strong { white-space: normal; }
+.note { width: 200px; min-height: 90px; background: light-dark(#fff7cc, #4a4318); border: 1px solid light-dark(#f2d96b, #7a6c22); border-radius: 4px; box-shadow: 2px 3px 8px rgb(0 0 0 / 0.12); padding: 8px; }
+.note.selected { outline: 2px solid var(--accent); }
+.note textarea { width: 100%; min-height: 72px; border: 0; background: transparent; resize: none; font-size: 13px; line-height: 1.4; color: var(--ink); }
+.note textarea:focus { outline: none; }
+.ctx-menu { position: fixed; z-index: 30; min-width: 190px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 5px; display: flex; flex-direction: column; }
+.ctx-menu button { text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
+.ctx-menu button:hover:not(:disabled) { background: var(--board); }
+.ctx-menu .danger { color: var(--bad); }
+.projects-btn { color: #d1d5db; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; }
+.projects-btn:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
+.projects { display: flex; flex-direction: column; gap: 12px; }
+.project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.project-list li { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; }
+.project-list li.current { border-color: var(--accent); }
+.project-list .open { flex: 1; display: flex; flex-direction: column; text-align: left; padding: 4px; min-width: 0; }
+.project-list .open strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.project-list .open small { color: var(--ink-2); font-size: 12px; }
+.project-list .open:disabled { opacity: 1; cursor: default; }
+.project-list .bin { font-size: 16px; }
+.bin-list summary { cursor: pointer; color: var(--ink-2); font-size: 13px; }
+.bin-list ul { margin-top: 8px; }
+.btn.danger { color: var(--bad); border-color: var(--bad); }
+.notes-tab { position: absolute; top: 14px; left: 72px; z-index: 6; padding: 6px 12px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; }
+.preview-bar {
+  position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; gap: 8px; align-items: center;
+  background: var(--paper); border: 2px solid var(--accent); border-radius: 12px; padding: 6px 8px 6px 14px; box-shadow: var(--shadow); white-space: nowrap;
+}
+.react-flow__node.preview .blk, .react-flow__node.preview .layer { border-style: dashed; border-color: var(--accent); }
+.react-flow__edge.preview .react-flow__edge-path { stroke: var(--accent); stroke-dasharray: 6 4; }
+
+/* Review */
+.finding-group h3 { margin: 10px 0 6px; font-size: 15px; }
+.finding { background: var(--paper); border: 1.5px solid var(--line); border-left: 5px solid var(--ink-2); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
+.finding p { margin: 0; font-size: 13px; }
+.finding.sev-blocker { border-left-color: var(--bad); }
+.finding.sev-major { border-left-color: var(--warn); }
+.finding.accepted { opacity: 0.65; }
+.finding-head { display: flex; gap: 8px; align-items: baseline; }
+.finding-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
+.finding-foot .chip { padding: 2px 9px; }
+.sev { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; color: var(--ink-2); white-space: nowrap; }
+.sev.blocker { color: var(--bad); }
+.sev.major { color: var(--warn); }
+
+/* Estimate */
+.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
+.totals > div { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
+.totals strong { font-size: 24px; }
+.ok-text { color: var(--good); font-weight: 600; }
+.bad-text { color: var(--bad); font-weight: 600; }
+.warn-text { font-weight: 600; }
+.usage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
+.usage small { font-weight: 400; }
+.lines { display: flex; flex-direction: column; gap: 6px; }
+.line { display: grid; grid-template-columns: 2fr 110px 60px 1.4fr 110px; gap: 6px; align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; }
+.line > span:first-child { display: flex; flex-direction: column; min-width: 0; }
+.line.priced { border-color: var(--good); }
+.line .cost { text-align: right; font-weight: 700; }
+.line .cur { text-transform: uppercase; }
+label.inline input { width: 60px; }
+
+.runbar.note { font-size: 13px; }
+
+/* Deploy */
+.ready { border-radius: 12px; padding: 12px 14px; border: 2px solid var(--good); background: var(--paper); }
+.ready.no { border-color: var(--bad); }
+.ready ul { margin: 6px 0 0; padding-left: 18px; }
+.steps-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
+
+
+/* ---------- Infrastructure console theme ---------- */
+.bar { background: var(--chrome); border-bottom: 1px solid var(--chrome-2); color: var(--chrome-ink); }
+.bar .brand { color: var(--chrome-ink); }
+.bar .brand:hover, .bar .icon:hover:not(:disabled), .crumbs button:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
+.bar .icon { color: #d1d5db; }
+.crumbs { color: #aab7b8; }
+.crumbs .here, .project-name { color: #fff; }
+.project-name:hover { border-color: rgb(255 255 255 / 0.25); }
+.modes { background: transparent; border: 0; padding: 0; gap: 2px; }
+.modes button { color: #d1d5db; border-radius: 0; padding: 14px 14px 12px; border-bottom: 3px solid transparent; display: flex; gap: 6px; align-items: center; }
+.modes button:hover { color: #fff; }
+.modes button.on { background: transparent; color: #fff; box-shadow: none; border-bottom-color: var(--action); }
+.btn.primary, .button.run-button, .modal .button.run-button { background: var(--action); border-color: var(--action); color: #fff; }
+.btn.primary:hover:not(:disabled), .button.run-button:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); }
+.btn { border-color: var(--line); border-width: 1.5px; border-radius: 20px; }
+.btn:hover:not(:disabled) { border-color: var(--ink); }
+.seg button.on, .chips button.on { background: var(--chrome); color: #fff; }
+
+/* Service tiles: coloured by role like architecture icons */
+.blk { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); gap: 12px; }
+.blk:hover { border-color: var(--role); }
+.blk.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
+.blk-icon { background: var(--role); color: #fff; border-radius: 8px; width: 38px; height: 38px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.15); }
+.blk.kind-guard, .blk.kind-source, .blk.kind-output { border-style: solid; border-width: 1px; border-radius: 10px; }
+.blk.kind-resource { border-style: dashed; }
+.blk.existing { background: light-dark(#f8f8f8, #142030); }
+.layer { border: 1px solid var(--line); border-left: 6px solid var(--role); border-radius: 12px; box-shadow: var(--shadow); }
+.layer:hover { border-color: var(--role); box-shadow: 0 0 0 3px light-dark(rgb(9 114 211 / 0.12), rgb(83 159 229 / 0.2)), var(--shadow); }
+.layer-head strong { font-size: 16px; }
+
+/* Wires: a calm flow so connections feel live */
+.react-flow__edge-path { stroke: var(--edge); stroke-width: 1.8; }
+.react-flow__edge.wire .react-flow__edge-path { stroke-dasharray: none; animation: none; }
+.react-flow__edge.wire-passed .react-flow__edge-path { stroke: var(--good); stroke-dasharray: none; animation: none; }
+.react-flow__edge.wire-failed .react-flow__edge-path { animation: none; }
+@keyframes flow { to { stroke-dashoffset: -20; } }
+
+.react-flow__edge-textbg { fill: var(--board); }
+.canvas .react-flow { --xy-background-pattern-dots-color-default: light-dark(#c6cbd1, #2a3a4d); }
+
+/* Chat */
+.chat { background: var(--paper); }
+.chat-title { font-size: 15px; }
+.msg.user { background: var(--chrome); color: #fff; }
+.msg.assistant { padding-left: 12px; border-left: 3px solid var(--accent-soft); }
+.skills span, .skills .skill { background: var(--accent-soft); color: var(--accent); display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
+.skills > span::before, .skills .skill::before { content: "✦"; font-size: 10px; }
+.skills .skill.on { background: var(--accent); color: #fff; }
+.chat .notes-card { position: static; width: auto; max-height: 45%; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 10px 16px; background: light-dark(#fafafa, #15202e); }
+.dots { display: flex; gap: 2px; flex-wrap: wrap; }
+.dot { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); padding: 2px 6px; border-radius: 99px; }
+.dot i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); display: inline-block; }
+.dot.known { color: var(--ink); }
+.dot.known i { background: var(--good); border-color: var(--good); }
+.dot.assumed i { background: linear-gradient(90deg, var(--warn) 50%, transparent 50%); border-color: var(--warn); }
+.dot.on, .dot:hover { background: var(--accent-soft); }
+.skills { align-items: center; }
+.known-bar { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-2); padding: 3px 8px; border-radius: 99px; }
+.known-bar:hover, .known-bar.on { background: var(--accent-soft); color: var(--accent); }
+.known-bar .segs { display: inline-flex; gap: 2px; }
+.known-bar .segs i { width: 10px; height: 4px; border-radius: 2px; background: var(--line); }
+.known-bar .segs i.known { background: var(--good); }
+.known-bar .segs i.assumed { background: var(--warn); }
+.known-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
+.known-list li { display: grid; grid-template-columns: 14px auto 1fr; gap: 6px; align-items: baseline; font-size: 12px; }
+.known-list li em { font-style: normal; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.known-list li.open { color: var(--ink-2); }
+.known-list li.known > span { color: var(--good); font-weight: 700; }
+.known-list li.assumed > span { color: var(--warn); font-weight: 700; }
+.peek { margin: 0 16px 8px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; }
+.peek p { margin: 4px 0 0; }
+.knows { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
+.knows span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); }
+.doc .notes-card { position: static; width: auto; max-height: none; box-shadow: none; }
+.cases.compact { display: flex; flex-direction: column; gap: 6px; }
+.cases.compact .case { grid-template-columns: 1fr auto 28px; }
+.cases.compact input { min-width: 0; }
+.chat-head { flex-wrap: wrap; row-gap: 6px; }
+.live-toggle { order: 3; flex-basis: 100%; margin: 0; }
+.signals span::before { content: "↳ "; color: var(--accent); }
+.composer textarea { border-color: var(--line); }
+.composer textarea:focus { border-color: var(--accent); }
+.send { background: var(--action); }
+.composer textarea { padding-right: 84px; }
+.mic { position: absolute; right: 46px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); border: 1.5px solid var(--line); background: var(--paper); }
+.mic:hover { color: var(--ink); border-color: var(--ink-2); }
+.mic.on { color: #fff; background: var(--bad); border-color: var(--bad); animation: pulse 1.4s ease-in-out infinite; }
+@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgb(217 21 21 / 0.18); } }
+@media (prefers-reduced-motion: reduce) { .mic.on { animation: none; } }
+.prompts button { border-radius: 20px; }
+
+/* Connection: provider tiles */
+.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
+.provider-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); text-align: left; }
+.provider-tile:hover { border-color: var(--ink-2); }
+.provider-tile.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
+.provider-tile .mono { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; flex: none; }
+.provider-tile small { display: block; color: var(--ink-2); font-size: 11px; }
+.provider-tile .signed { margin-left: auto; color: var(--good); font-weight: 700; }
+
+/* ---------- Small screens ---------- */
+@media (max-width: 900px) {
+  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 60vh auto; height: auto; min-height: 100vh; }
+  .bar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
+  .crumbs { order: 3; flex-basis: 100%; overflow-x: auto; }
+  .project-name { width: 14ch; }
+  .chat { border-left: 0; border-top: 1px solid var(--line); height: 85dvh; min-height: 0; }
+  .runbar { left: 10px; right: 10px; bottom: 60px; flex-wrap: wrap; }
+  .detail { grid-template-columns: minmax(0, 1fr); padding: 16px; }
+  .palette { width: min(300px, calc(100vw - 90px)); }
+  .deploy { left: 70px; right: 10px; width: auto; }
+  .menu { right: 12px; }
+  .menu.issues { right: 12px; left: 12px; }
+}
+@media (max-width: 520px) {
+  .modes button { padding: 5px 9px; }
+  .brand span { display: none; }
+}
+
+/* Progressive delivery details stay collapsed until requested. */
+.delivery-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
+.charge-editor { min-width: 0; margin: 16px 0; padding: 14px; border: 1px solid var(--border, #d5dbd8); border-radius: 8px; }
+.charge-editor legend { padding: 0 6px; font-weight: 600; }
+.delivery-basis { grid-column: 1 / -1; }
+.resource-schedule { display: grid; gap: 10px; margin: 16px 0; }
+.resource-schedule article { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--border, #d5dbd8); border-radius: 8px; overflow-wrap: anywhere; }
+.resource-schedule article span, .resource-schedule article small { color: var(--muted, #58645e); }
+@media (max-width: 600px) { .delivery-fields { grid-template-columns: minmax(0, 1fr); } }
+
+/* Keep existing document cards readable inside the page's scroll area. */
+.doc > * { flex-shrink: 0; }
+.doc .notes-card { overflow: visible; }
+.context-used { font-size: 11px; margin-top: 6px; overflow-wrap: anywhere; }
+.context-used p { font-size: 11px; }
+.memory-profile { display: grid; gap: 10px; margin: 14px 0; }
+
+.requirements-summary li { margin: 1rem 0; }
+.requirements-summary li > p { margin-bottom: .3rem; }
+.requirements-summary li > .link { margin-left: .75rem; }
+
+.consultation-summary { padding: 1rem 0; border-bottom: 1px solid var(--border, #334155); }
+
+/* Requirements read as a continuous document, while chat stays alongside it. */
+.requirements-document { background: var(--board); }
+.requirements-actions { width: min(100%, 850px); margin: 0 auto 20px; }
+.requirements-paper { box-sizing: border-box; width: min(100%, 850px); margin: 0 auto 32px; padding: 56px 64px; background: #fffefa; color: #172033; box-shadow: 0 4px 24px #0002; overflow-wrap: anywhere; }
+.requirements-paper p { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.8; margin: 0 0 16px; white-space: pre-line; }
+.requirements-cover { border-bottom: 2px solid #F3A2B4; padding-bottom: 24px; margin-bottom: 32px; }
+.requirements-paper h2 { color: #172033; font-size: 32px; line-height: 1.25; margin: 16px 0; }
+.requirements-paper .document-kicker, .requirements-paper .document-meta, .requirements-paper .document-subtitle { font-family: inherit; }
+.requirements-paper .document-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: #52616c; }
+.requirements-paper .document-subtitle { font-size: 19px; color: #52616c; }
+.requirements-paper .document-meta { font-size: 11px; line-height: 1.6; color: #63717b; }
+.requirements-chapter { margin: 30px 0; }
+.requirements-paper h3 { font-size: 19px; line-height: 1.4; color: #172033; margin: 0 0 16px; }
+.requirement-paragraph { margin-bottom: 24px; }
+.requirement-paragraph > p:first-child { margin-bottom: 8px; }
+.requirements-paper .acceptance-target { font-size: 14px; }
+.requirements-paper .document-discuss { color: #873B50; font-size: 12px; text-align: left; }
+.document-footer { border-top: 1px solid #d8dee1; padding-top: 16px; margin-top: 44px; font-size: 10px; color: #63717b; }
+@media (max-width: 700px) { .requirements-paper { padding: 28px 22px; } .requirements-paper h2 { font-size: 25px; } }
+
+.requirements-actions { display:flex; flex-wrap:wrap; gap:12px; }
+.requirement-comments { margin-top:10px; }
+.requirement-comment { background:#FCF5F7; border-left:3px solid #DCA2B1; padding:10px 14px; margin:8px 0; }
+.requirements-paper .requirement-comment p { font-family:inherit; font-size:13px; margin-bottom:4px; white-space:pre-wrap; }
+.requirement-comment small { color:#52616c; margin-right:16px; }
+.requirement-comments .link { color:#873B50; font-size:12px; }
+.comment-composer textarea { display:block; width:100%; min-height:80px; margin:10px 0; padding:10px; background:white; color:#172033; border:1px solid #DCA2B1; border-radius:4px; box-sizing:border-box; font:inherit; }
+.comment-composer .btn { background:#873B50; color:white; margin-right:12px; }
+
+.requirements-paper .requirement-number { color:#873B50; font-size:12px; letter-spacing:.06em; margin:0 0 8px; }
+
+.requirement-add-comment { display:inline-flex; align-items:center; padding:7px 12px; border:1px solid #DCA2B1; border-radius:5px; background:#FCECF0; color:#873B50; font-size:12px; font-weight:600; cursor:pointer; }
+.requirement-add-comment:hover { background:#F6D7E0; }
+.requirement-comments blockquote { border-left:3px solid #DCA2B1; margin:8px 0; padding:6px 12px; color:#52616c; font-size:13px; white-space:pre-wrap; }
+.requirement-text-menu { z-index:100; }
+.requirement-text::selection { background:#F6D7E0; color:#172033; }
+
+.requirements-paper .requirement-reason { margin:12px 0; padding-left:14px; border-left:2px solid #F6D7E0; }
+.requirements-paper .requirement-reason p { font-family:inherit; font-size:13px; line-height:1.7; }
+.requirements-paper .comment-status { font-family:inherit; font-size:12px; color:#52616c; }
+.requirement-comments .link { margin:8px 12px; }
+.requirement-revision { margin-top:16px; }
+.requirement-revision h5 { font-size:14px; margin:12px 0; }
+.requirements-paper .revision-label { font-weight:600; margin-bottom:4px; }
+.requirements-paper .revision-after { background:#e6f2e9; padding:12px; }
+.comment-history { margin:10px 0; font-size:12px; color:#52616c; }
+.comment-history summary, .requirements-chapter > summary { cursor:pointer; font-weight:600; }
+
+.journey-guide { padding:12px 16px; border-top:1px solid var(--line); background:var(--paper); flex-shrink:0; }
+.journey-guide small { color:var(--accent); font-weight:600; }
+.journey-guide p { font-size:12px; line-height:1.5; margin:6px 0 10px; }
+.journey-guide .btn { width:100%; font-size:12px; padding:7px 10px; }
+.journey-continue { display:block; margin-top:8px; font-size:12px; text-align:left; }
+
+/* Journey stays visible above the workspace, even with chat closed. */
+.app { grid-template-rows:52px auto minmax(0,1fr); }
+.journey-wizard { grid-column:1 / -1; padding:12px 22px; background:var(--paper); border-bottom:1px solid var(--line); min-width:0; }
+.journey-steps { display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:0 0 12px; }
+.journey-steps li { display:flex; align-items:center; gap:7px; color:var(--ink-2); font-size:12px; }
+.journey-steps li span { width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
+.journey-steps li[aria-current=step] { color:var(--ink); font-weight:700; }
+.journey-steps li[aria-current=step] span { background:var(--action); color:#fff; border-color:var(--action); }
+.journey-current { display:flex; align-items:center; justify-content:space-between; gap:24px; }
+.journey-current strong { font-size:14px; }
+.journey-current p { margin:4px 0 0; color:var(--ink-2); font-size:12px; line-height:1.5; }
+.journey-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
+.journey-actions .btn, .journey-actions .link { font-size:12px; }
+.consultation-summary > button { margin-right:14px; margin-top:8px; }
+@media(max-width:900px){.app { grid-template-rows:auto auto 60vh auto; }.journey-wizard{padding:12px;}.journey-current{align-items:flex-start;flex-direction:column;gap:12px;}.journey-actions{flex-wrap:wrap;}.journey-steps{gap:8px 14px;}}
+
+.journey-steps li button { display:flex; align-items:center; gap:7px; padding:3px 5px; border:0; background:none; color:inherit; font:inherit; border-radius:5px; cursor:pointer; }
+.journey-steps li button:disabled { cursor:default; }
+.journey-steps li button:not(:disabled):hover { background:var(--color-brand-soft); text-decoration:none; }
+.journey-steps li button:focus-visible { outline:2px solid var(--action); outline-offset:3px; }
+.cloud-selection { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; }
+
+.journey-actions { flex-wrap:wrap; justify-content:flex-end; flex-shrink:1; }
+@media(max-width:900px){.journey-actions{justify-content:flex-start;}}
+
+.terraform-code { white-space:pre-wrap; overflow-wrap:anywhere; max-height:55vh; overflow:auto; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:8px; font-size:12px; line-height:1.6; }
+.terraform-view .row, .terraform-view .seg { margin:16px 0; flex-wrap:wrap; }
+
+/* AtMem · AtForma lockup and shared theme; retain workspace layout. */
+.bar .icon, .crumbs, .modes button { color:var(--color-muted); }
+.crumbs .here, .project-name, .modes button.on, .modes button:hover { color:var(--color-ink); }
+.bar .brand:hover, .bar .icon:hover:not(:disabled), .crumbs button:hover { background:var(--color-brand-soft); color:var(--color-ink); }
+.btn.primary, .button.run-button, .modal .button.run-button, .send, .journey-steps li[aria-current=step] span { color:var(--color-brand-ink); }
+.seg button.on, .chips button.on { background:var(--color-brand-soft); color:var(--color-ink); }
+.brand { white-space:nowrap; }
+.brand-divider { color:var(--color-brand); padding:0 3px; }
+@media(max-width:900px){.brand span{display:inline;}}
+
+.outputs-view { overflow:auto; }
+.outputs-view aside { min-width:0; overflow-wrap:anywhere; }
+.outputs-browser { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start; margin-top:20px; }
+.outputs-directory { border:1px solid var(--line); border-radius:8px; padding:12px; min-width:0; }
+.outputs-directory details+details { margin-top:16px; }
+.outputs-directory summary { font-weight:600; cursor:pointer; margin-bottom:8px; }
+.outputs-directory button { display:block; width:100%; text-align:left; padding:7px 8px; overflow-wrap:anywhere; font-size:12px; border-radius:4px; }
+.outputs-directory button[aria-current=page] { background:var(--accent-soft); color:var(--accent); }
+.output-preview { min-width:0; }
+.output-preview > h3 { overflow-wrap:anywhere; margin-top:0; }
+.output-document { background:var(--paper); border:1px solid var(--line); padding:28px; border-radius:6px; overflow-wrap:anywhere; line-height:1.65; }
+.output-document h2,.output-document h3,.output-document h4 { margin:26px 0 12px; }
+.output-document h2:first-child { margin-top:0; }
+.output-document ul { padding-left:22px; }
+.output-document pre,.output-code { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:6px; }
+.output-table-row { font-family:var(--type-family-mono); font-size:12px; }
+.output-image { display:block; width:100%; height:auto; background:white; border:1px solid var(--line); }
+.output-pdf { width:100%; height:70vh; border:1px solid var(--line); background:white; }
+@media(max-width:900px){.outputs-browser{grid-template-columns:minmax(0,1fr);}.outputs-directory{max-height:250px;overflow:auto;}.output-document{padding:18px;}}
+
+.outputs-directory { position:sticky; top:12px; max-height:65vh; overflow:auto; }
+@media(max-width:900px){.outputs-directory{position:static;max-height:250px;}}
+
+/* ---------- Architecture Canvas type ---------- */
+h1, h2, h3, .brand, .doc-head h2, .modal h2, .detail-title input, .indicator strong { font-family: var(--type-family-display); letter-spacing: -0.01em; }
+
+/* ---------- Architecture Canvas: Miro-like, few edges ----------
+   Panels and controls separate by soft fills and shadow rather than outlines.
+   Text inputs keep a visible boundary so it stays obvious where to type. */
+.modes { border-color: transparent; background: var(--color-card-raised); border-radius: 12px; padding: 4px; }
+.modes button { border-radius: 9px; }
+.modes button.on { box-shadow: var(--elevation-card); }
+.seg { border-color: transparent; background: var(--color-card-raised); border-radius: 12px; padding: 3px; }
+.seg button { border-radius: 9px; }
+.seg button.on { background: var(--paper); color: var(--ink); box-shadow: var(--elevation-card); }
+.chat { border-left-color: transparent; box-shadow: -10px 0 30px rgba(23, 32, 51, 0.05); }
+.chips button, .prompts button, .skills, .linked, .notes-tab, .blk, .layer, .chat .notes-card, .cloud-selection, .outputs-directory, .output-document { border-color: transparent; background: var(--color-card-raised); border-radius: 12px; }
+.ctx-menu, .palette-search { border-color: transparent; border-radius: 14px; box-shadow: var(--elevation-raised); }
+.journey-guide, .journey-wizard { border-color: transparent; }
+.composer textarea { border-radius: 18px; }
+.terraform-code { border-radius: 12px; }
+
+/* AtMem.ai lockup shared with the website and the other AtMem.ai apps. */
+.atmem-mark { flex: none; color: var(--color-ink); }
+.atmem-dot { fill: #F3A2B4; }
+:root[data-theme="dark"] .atmem-dot { fill: #F3A2B4; }
+.bar .brand { color: var(--color-ink); font-weight: 800; }
+.brand-divider { color: var(--color-muted); font-weight: 500; padding: 0 6px; }
+
+.voice-status{font-size:12px;line-height:1.5;padding:0 16px 10px;color:var(--muted)}
+.voice-status:empty{display:none}
+.voice-status button{display:block;margin-top:6px;text-decoration:underline;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
+
+/* Two gentle pulses, then a steady outline until the change cue expires. */
+.react-flow__node.diagram-attention {
+  outline: 3px solid var(--accent);
+  outline-offset: 7px;
+  border-radius: 14px;
+  animation: diagram-change-pulse 1s ease-in-out 2;
+}
+.react-flow__edge.diagram-attention .react-flow__edge-path {
+  stroke: var(--accent);
+  stroke-width: 4;
+  animation: diagram-edge-pulse 1s ease-in-out 2;
+}
+@keyframes diagram-change-pulse {
+  50% { outline-offset: 13px; box-shadow: 0 0 0 12px var(--accent-soft); }
+}
+@keyframes diagram-edge-pulse { 50% { stroke-width: 7; } }
+@media (prefers-reduced-motion: reduce) {
+  .react-flow__node.diagram-attention,
+  .react-flow__edge.diagram-attention .react-flow__edge-path { animation: none; }
+}
+
+.emulation-panel { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
+.emulation-panel h3 { margin-top: 0; }
+.emulation-panel li { margin: 6px 0; }
+.emulation-panel details { margin-top: 12px; }
+/* Canvas-native emulation: a small live instrument, never a replacement page. */
+.emulation-dock{position:absolute;left:76px;bottom:24px;z-index:10;width:min(370px,calc(100% - 100px));pointer-events:auto}
+.emulation-panel{margin:0;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 40px #153c3c18;text-align:left}
+.emulation-heading{display:flex;align-items:center;gap:12px}.emulation-heading>div{flex:1;min-width:0}.emulation-heading h3{font-size:14px;line-height:1.4;margin:3px 0}.emulation-eyebrow{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
+.emulation-orb{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}.emulation-orb.working{animation:mentor-pulse 1.6s ease-in-out infinite}
+.emulation-controls{display:flex;gap:6px;align-items:center;margin:14px 0}.emulation-icon{width:36px;height:36px;border:1px solid var(--line);border-radius:11px;flex-shrink:0}.emulation-icon:hover,.emulation-icon:focus-visible{background:var(--accent-soft)}.emulation-icon.active{color:var(--color-brand-ink);background:var(--action);border-color:var(--action)}.emulation-controls .emulation-icon:last-child{margin-left:auto}
+.emulation-track{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.emulation-track i{height:1px;background:var(--line);flex:1}.emulation-track .current,.emulation-track .complete{color:var(--accent);font-weight:700}.emulation-caption{font-size:11px!important;line-height:1.6;margin-top:10px!important;color:var(--muted)}
+.emulation-evidence{max-height:260px;overflow:auto;border-top:1px solid var(--line);margin-top:12px;padding-top:10px;font-size:11px;line-height:1.6}.emulation-evidence p{margin:8px 0}.emulation-check{display:flex;align-items:flex-start;gap:8px;padding:8px 0}.emulation-check svg{flex-shrink:0;color:var(--accent)}.emulation-check small{display:block}
+.emulation-progress{height:3px;overflow:hidden;border-radius:6px;background:var(--accent-soft);margin-top:12px}.emulation-progress span{display:block;width:35%;height:100%;background:var(--accent);animation:emulation-sweep 1.5s ease-in-out infinite}
+@keyframes mentor-pulse{50%{box-shadow:0 0 0 7px var(--accent-soft);transform:scale(1.05)}}@keyframes emulation-sweep{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
+.workspace-label{font-size:9px;letter-spacing:1.4px;font-weight:700;color:var(--muted)}.crumbs{flex-wrap:wrap;gap:8px!important}.crumbs .project-name{width:clamp(220px,30vw,520px);max-width:none!important;font-size:15px;font-weight:650}.crumbs button.here{background:var(--accent-soft);border:1px solid var(--color-brand);border-radius:9px;padding:7px 10px;color:var(--accent)}.crumbs button:not(.projects-btn){gap:6px}.journey-actions>.btn{min-width:42px;min-height:42px}
+@media(prefers-reduced-motion:reduce){.emulation-orb.working,.emulation-progress span{animation:none}}
+@media(max-width:700px){.emulation-dock{left:12px;bottom:12px;width:min(340px,calc(100% - 24px))}.emulation-evidence{max-height:140px}.workspace-label{display:none}.crumbs .project-name{width:200px;max-width:55vw!important}.crumbs{font-size:11px}}
+.system-component,.system-interaction{margin:26px 0;padding-bottom:22px;border-bottom:1px solid var(--line)}.system-component h4,.system-interaction h4{font-size:19px;margin:0 0 14px}.system-component h5{font-size:13px;margin:20px 0 8px}.requirements-paper .system-component p,.requirements-paper .system-interaction p{font-family:inherit;font-size:14px;line-height:1.8}.system-component ul{font-size:14px;line-height:1.8;padding-left:20px}
+.app{grid-template-rows:auto auto minmax(0,1fr)}.bar{flex-wrap:wrap;padding:10px 16px;gap:10px}.crumbs{order:3;flex-basis:100%;flex-wrap:nowrap;overflow:visible}.crumbs .project-name{flex:1;min-width:0;width:auto;max-width:none!important}.workspace-label{flex-shrink:0}.component-navigator{position:relative;flex-shrink:0}.tree-trigger{border:1px solid var(--line);background:var(--board);padding:8px 12px!important;max-width:none!important}.current-view{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}.component-tree{position:absolute;right:0;top:calc(100% + 8px);width:340px;max-height:65vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;z-index:40}.component-tree strong{display:block;padding-bottom:12px;line-height:1.5}.component-tree summary{padding:10px 0;font-size:12px;font-weight:700}.component-tree button{width:100%;max-width:none!important;justify-content:flex-start;text-align:left;white-space:normal!important;padding:9px!important;border-radius:8px!important}.component-tree button span{padding:0;white-space:normal;max-width:none;font-size:12px}.component-tree small{display:block;color:var(--ink-2);font-size:10px}.component-tree details{border-top:1px solid var(--line)}.tree-views{padding-bottom:10px}.menu button{display:flex;align-items:center;justify-content:flex-start;gap:12px}.menu button svg{color:var(--ink-2);flex-shrink:0}.menu hr{border:0;border-top:1px solid var(--line);margin:7px 6px}.reset-actions{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.reset-actions .btn{padding:12px 16px;min-height:44px;white-space:nowrap;border-radius:10px;line-height:1.3}
+@media(max-width:900px){.app{grid-template-rows:auto auto 60vh auto}.current-view{display:none}.component-tree{position:fixed;top:110px;right:12px;width:min(340px,calc(100vw - 24px))}.tree-trigger{font-size:11px}.crumbs .project-name{max-width:none!important}.workspace-label{display:none}}
+
+/* Filled brand controls use dark ink against the soft pink. */
+.prompts .primary-chip, .btn.sketch, .skills .skill.on { background:var(--action); border-color:var(--action); color:var(--color-brand-ink); }
+
+/* Place workspace controls beside the surface they affect. */
+.bar-actions { margin-left:auto; gap:2px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
+.bar>.menu { top:56px; right:16px; }
+.chat-heading-row { display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
+.chat-reopen { position:fixed; right:16px; top:180px; z-index:21; width:40px; height:40px; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); }
+@media(max-width:900px){.chat-reopen{top:auto;bottom:16px;}}
+
+/* Visible card boundaries on both the light and dark canvas. */
+.blk, .layer { border-color:light-dark(#9AA2AD, #7B8B8D); }
+
+.menu button:hover:not(:disabled), .menu button:focus-visible { background:var(--color-brand-soft); color:var(--color-brand-text); }
+
+/* Shared interaction palette: hover and keyboard focus use the same rose family. */
+:is(.icon,.btn,.menu button,.ctx-menu button,.palette-item,.chip button,.seg button,.chips button,.modes button,.prompts button,.template-list button,.provider-tile,.model,.link,.outputs-directory button,.tree-views button,.component-tree button,.journey-steps button):not(:disabled):is(:hover,:focus-visible) {
+  background:var(--color-brand-soft); color:var(--color-brand-text);
+}
+:is(.btn.primary,.button.run-button,.prompts .primary-chip,.btn.sketch,.emulation-icon.active):not(:disabled):is(:hover,:focus-visible) {
+  background:var(--action-hover); border-color:var(--action-hover); color:var(--color-brand-ink);
+}
+.blk:hover, .layer:hover { border-color:var(--color-brand-text); box-shadow:0 0 0 3px var(--color-brand-soft),var(--shadow); }
+.project-name:hover, .model:hover, .provider-tile:hover, .prompts button:hover:not(:disabled), .template-list button:hover { border-color:var(--color-brand-text); }
+
+.brain-activity { display:inline-block; vertical-align:middle; flex-shrink:0; overflow:visible; }
+.brain-activity.is-active { animation:brain-breathe 1.6s ease-in-out infinite; }
+@keyframes brain-breathe { 0%,100% { transform:scale(.92); } 50% { transform:scale(1.07); filter:drop-shadow(0 0 3px #F3A2B466); } }
+@media(prefers-reduced-motion:reduce){.brain-activity.is-active{animation:none;}}
+
+/* Persistent workspace navigation, aligned to the content edge. */
+.subviews.seg { top:0; left:0; right:0; transform:none; display:flex; gap:8px; padding:10px 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:var(--paper); box-shadow:none; }
+.subviews.seg button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; min-height:42px; font-size:14px; font-weight:600; border-radius:8px; white-space:nowrap; }
+.subviews.seg button.on { background:var(--color-brand-soft); color:var(--color-brand-text); box-shadow:inset 0 -3px var(--color-brand); }
+.level-system .hint, .level-flow .hint { top:72px; }
+.canvas .doc { padding-top:88px; }
+@media(max-width:600px){.subviews.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px;}.subviews.seg button{font-size:12px;padding:8px;}.canvas .doc{padding-top:112px;}.level-system .hint,.level-flow .hint{top:108px;}}
+
+/* One journey, with workspace views and conversation context clearly secondary. */
+.journey-map { margin-bottom:12px; }
+.journey-map>summary { display:flex; align-items:center; gap:12px; width:fit-content; padding:6px 9px; border-radius:8px; color:var(--color-brand-text); font-size:12px; font-weight:600; cursor:pointer; list-style:none; }
+.journey-map>summary::-webkit-details-marker{display:none;}
+.journey-map>summary span { color:var(--ink-2); font-size:11px; font-weight:400; }
+.journey-map>summary::after{content:'⌄';}
+.journey-map[open]>summary::after{content:'⌃';}
+.journey-map>summary:is(:hover,:focus-visible){background:var(--color-brand-soft);}
+.journey-map .journey-steps{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:10px;}
+.journey-current .journey-next{margin-top:8px;color:var(--ink);font-weight:600;}
+.journey-next>span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-brand-text);margin-right:6px;}
+.workspace-views-label{align-self:center;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-right:8px;}
+.known-bar{gap:6px;}.known-bar[aria-expanded=true]>svg:last-child{transform:rotate(90deg);}
+.known-list .context-caption{display:block;font-size:10px;color:var(--ink-2);padding-bottom:8px;}
+@media(max-width:600px){.workspace-views-label{display:none;}}
+
+/* Canvas-first shell: one identity row and one compact working toolbar. */
+.bar { flex-wrap:nowrap; padding:5px 12px; gap:10px; min-height:52px; }
+.crumbs { order:0; flex-basis:auto; flex:1; gap:6px!important; }
+.crumbs .workspace-label,.crumbs .current-view { display:none; }
+.crumbs .project-name { font-size:13px; padding:5px 4px; }
+.crumbs .tree-trigger { padding:5px 8px!important; font-size:11px; }
+.bar .brand { font-size:13px; }
+.bar .modes button { padding:7px 9px; }
+.journey-wizard { display:flex; align-items:center; gap:12px; padding:6px 12px; min-height:48px; border-bottom:1px solid var(--line); }
+.journey-map { position:relative; margin:0; flex-shrink:0; }
+.journey-map>summary { font-size:11px; padding:7px; max-width:170px; }
+.journey-map .journey-steps { position:absolute; left:0; top:100%; z-index:30; width:270px; background:var(--paper); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:stretch; margin:8px 0; }
+.journey-current { margin-left:auto; display:block; }
+.journey-current>div:first-child { display:none; }
+.journey-actions { gap:5px; flex-wrap:nowrap; }
+.journey-actions>.btn { min-width:34px; min-height:34px; height:34px; padding:6px; border-radius:10px; }
+.workspace-tabs.seg { display:flex; gap:3px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
+.workspace-tabs.seg button { display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:12px; padding:7px 9px; min-height:34px; }
+.workspace-tabs.seg button.on { background:var(--color-brand-soft); color:var(--color-brand-text); box-shadow:inset 0 -2px var(--color-brand); }
+.canvas .doc { padding-top:24px; }
+.level-system .hint,.level-flow .hint { top:12px; }
+@media(max-width:1100px){.bar .brand>span{display:none;}.crumbs .tree-trigger>span{display:none;}.journey-wizard{gap:6px;}.workspace-tabs.seg button{font-size:11px;padding:7px;}.journey-map>summary{max-width:130px;}}
+@media(max-width:700px){.bar{flex-wrap:wrap;gap:4px;padding:4px 8px;}.crumbs{min-width:220px;}.bar .modes{order:2;}.journey-wizard{flex-wrap:wrap;padding:5px 8px;}.workspace-tabs.seg{order:3;width:100%;}.workspace-tabs.seg button{flex:1;justify-content:center;font-size:11px;}.journey-map>summary{max-width:none;}.journey-current{margin-left:auto;}.canvas .doc{padding-top:20px;}}
+
+.chat-markdown { white-space:normal; overflow-wrap:anywhere; }
+.chat-markdown p { margin:0 0 10px; }.chat-markdown p:last-child{margin-bottom:0;}
+.chat-markdown h4 { margin:14px 0 8px; font-size:14px; }.chat-markdown ul,.chat-markdown ol{margin:8px 0;padding-left:20px;}.chat-markdown li{margin:5px 0;}
+.chat-markdown pre{white-space:pre-wrap;overflow:auto;padding:12px;background:var(--board);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:12px;}
+.chat-markdown code{font-family:var(--type-family-mono);font-size:.9em;}.chat-markdown a{color:var(--color-brand-text);text-decoration:underline;}
+.attachment-tray{margin:6px 14px;font-size:11px;max-height:180px;overflow:auto;}.attachment-tray>p{color:var(--ink-2);margin:6px 0;}
+.attachment-chip{display:flex;align-items:center;gap:8px;padding:6px;margin:4px 0;background:var(--color-brand-soft);border-radius:9px;}.attachment-chip>img{width:36px;height:36px;object-fit:cover;border-radius:4px;}.attachment-chip>span{flex:1;min-width:0;overflow-wrap:anywhere;}.attachment-chip small{display:block;color:var(--ink-2);font-size:10px;}.attachment-chip .icon{width:28px;height:28px;flex-shrink:0;}
+.attachment-status{margin:6px 16px;font-size:12px;}.sent-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}.sent-attachments figure{margin:0;max-width:100%;}.sent-attachments img{max-width:100%;max-height:180px;border-radius:8px;}.sent-attachments figcaption{display:flex;gap:5px;font-size:10px;overflow-wrap:anywhere;}
+
+.modal-close { position:static; align-self:flex-end; flex-shrink:0; margin:-10px -10px -4px 0; border:1px solid var(--line); background:var(--paper); }
+
+.composer { display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:8px; }
+.composer:focus-within { border-color:var(--color-brand-text); box-shadow:0 0 0 2px var(--color-brand-soft); }
+.composer textarea { display:block; width:100%; min-height:58px; max-height:180px; padding:6px; border:0; border-radius:8px; resize:vertical; background:transparent; }
+.composer textarea:focus { border:0; box-shadow:none; }
+.composer-actions { display:flex; align-items:center; gap:8px; padding-top:6px; }
+.composer-actions .mic,.composer-actions .send { position:static; width:34px; height:34px; flex-shrink:0; }
+.composer-actions .mic { margin-left:auto; }
+
+/* Clearly distinguish the user's own turns from architect replies. */
+.msg.user { align-self:flex-end; max-width:92%; background:var(--color-brand-soft); color:var(--color-ink); border:1px solid var(--color-line); border-radius:14px 14px 4px 14px; padding:12px 14px; }
+.msg.user .chat-markdown,.msg.user figcaption { color:var(--color-ink); }
+.msg.assistant { align-self:stretch; }
+.sent-attachments figcaption {display:flex;flex-wrap:wrap;align-items:center;gap:4px;overflow-wrap:anywhere;}
+.sent-attachments figcaption small {flex-basis:100%;font-size:10px;line-height:1.4;color:var(--color-muted);}
+/* Paper styling is tilted independently so note handles and typing stay aligned. */
+.note.sticky-note {position:relative;isolation:isolate;width:220px;min-height:140px;padding:22px 18px 24px;background:transparent;border:0;border-radius:0;box-shadow:none;}
+.note.sticky-note::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(150deg,light-dark(#fff5ba,#51451f),light-dark(#fff0a0,#42391d));border:1px solid light-dark(#d9c46d,#938052);border-radius:2px 2px 18px 2px;box-shadow:3px 7px 12px rgb(0 0 0 / .16);transform:rotate(-1.5deg);}
+.note.sticky-note::after {content:"";position:absolute;right:-1px;bottom:2px;width:22px;height:22px;pointer-events:none;background:linear-gradient(135deg,light-dark(#ddc66e,#8c7840) 48%,light-dark(#fff9d9,#63562b) 50%);clip-path:polygon(0 0,100% 0,0 100%);transform:rotate(-1.5deg);filter:drop-shadow(-1px -1px 1px rgb(0 0 0 / .12));}
+.note.sticky-note.selected {outline:none;}
+.note.sticky-note.selected::before,.note.sticky-note:focus-within::before {outline:2px solid var(--accent);outline-offset:3px;}
+.note.sticky-note textarea {min-height:94px;font-size:14px;line-height:1.55;color:light-dark(#453918,#fff4cb);}
+.note.sticky-note textarea::placeholder {color:light-dark(#786b40,#cabc8e);}
+.ctx-menu {min-width:204px;padding:6px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgb(0 0 0 / .14);}
+.ctx-menu button {display:flex;align-items:center;gap:10px;min-height:36px;padding:8px 10px;font-size:13px;border-radius:7px;}
+.ctx-menu button svg {flex-shrink:0;color:var(--muted);}
+.ctx-menu .danger svg {color:inherit;}
+.ctx-divider {height:1px;margin:5px 8px;background:var(--line);}
+.empty-canvas {pointer-events:none;}
+.emulation-icon[aria-busy="true"]:disabled {opacity:1;cursor:wait;}
+.journey-actions [aria-busy="true"] {box-shadow:0 0 0 2px var(--color-brand-soft);}
+.emulation-icon.active[aria-busy="true"],.journey-actions .btn.primary[aria-busy="true"] {background:var(--paper);border:1px solid var(--color-brand);}
+
+/* Component design review stays distinct from execution evidence. */
+.block-review-badge { display:inline-flex; align-items:center; gap:5px; align-self:flex-start; max-width:100%; padding:4px 8px; border:1px solid var(--line); border-radius:99px; font-size:11px; font-weight:600; line-height:1.3; color:var(--ink-2); background:var(--board); }
+.blk .block-review-badge { margin-top:7px; }
+.block-review-badge svg { flex-shrink:0; }
+.block-review-badge.reviewed { color:var(--color-brand-text); background:var(--color-brand-soft); border-color:var(--color-brand); }
+.block-review-badge.questions { color:light-dark(#795215,#f2ce8e); background:light-dark(#fff6e5,#332a1c); border-color:light-dark(#e7ce9d,#746039); }
+.block-review-badge.changed { color:var(--color-brand-text); border-color:var(--color-brand); }
+.component-review { display:flex; flex-direction:column; gap:12px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--board); }
+.block-review-heading,.block-review-progress { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
+.block-review-heading strong { font-size:13px; }
+.block-review-progress progress { flex:1; min-width:40px; height:6px; accent-color:var(--color-brand); }
+.block-review-progress small,.block-review-boundary { color:var(--ink-2); font-size:11px; }
+.block-review-checks,.block-review-questions { list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:12px; }
+.block-review-checks li { display:flex; align-items:center; gap:6px; }
+.block-review-checks svg { flex-shrink:0; }
+.block-review-checks .complete { color:var(--ink-2); }
+.block-review-checks .incomplete { color:light-dark(#795215,#f2ce8e); }
+.block-review-questions li { display:grid; gap:6px; padding:10px; background:var(--paper); border-left:3px solid var(--color-brand); border-radius:4px; overflow-wrap:anywhere; }
+.block-review-questions small { color:var(--ink-2); }
+.block-review-actions { display:flex; flex-wrap:wrap; gap:6px; }
+.block-review-actions .btn,.block-review-navigation .btn { padding:7px 9px; font-size:12px; }
+.block-review-navigation { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:10px; }
+.block-question-form,.block-review-questions form { display:grid; gap:8px; }
+.block-question-form label,.block-review-questions label { display:grid; gap:5px; font-size:12px; }
+.block-question-form textarea,.block-review-questions textarea { width:100%; min-width:0; min-height:70px; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:8px; background:var(--paper); color:var(--ink); }
+.block-review-questions summary { color:var(--color-brand-text); cursor:pointer; font-size:12px; }
+.tree-review-state.reviewed { color:var(--color-brand-text); }
+.tree-review-state.questions { color:light-dark(#795215,#f2ce8e); }
+.block-architect-note { padding:10px; border-radius:8px; background:var(--paper); font-size:12px; line-height:1.5; }
+.block-architect-note strong { display:block; margin-bottom:5px; color:var(--color-brand-text); }
+.canvas-view-switch { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-left:auto; border:1px solid var(--line); border-radius:10px; padding:3px; }
+.canvas-view-switch button { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border-radius:7px; font-size:11px; color:var(--ink-2); }
+.canvas-view-switch button[aria-pressed="true"] { color:var(--color-brand-text); background:var(--color-brand-soft); }
+.canvas-view-switch .topology-organise { border-left:1px solid var(--line); border-radius:0; }
+.topology-review-summary { font-size:12px; color:var(--color-brand-text); }
+.layer .topology-drill-hint { font-size:10px; color:var(--ink-2); margin-top:6px; }
+.component-settings > summary { cursor:pointer; font-size:12px; color:var(--ink-2); font-weight:600; padding:5px 0; }
+.component-settings[open] > summary { margin-bottom:10px; }
+@media(max-width:600px){.canvas-view-switch{margin-left:0;}.canvas-view-switch .topology-organise{font-size:10px;}}
+.block-requirements { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--board); }
+.block-requirements > strong { font-size:13px; }
+.block-requirement { display:grid; gap:8px; border-top:1px solid var(--line); padding-top:10px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
+.block-requirement form,.block-requirement label { display:grid; gap:8px; }
+.block-requirement textarea { width:100%; min-height:110px; resize:vertical; padding:8px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); }
+.block-requirements small { font-size:11px; color:var(--ink-2); }
+.layer .topology-review-summary { justify-content:flex-start; padding:0; text-align:left; }
+.layer .topology-review-summary:hover { text-decoration:underline; }
+.layer .topology-drill-hint { display:inline-flex; align-items:center; justify-content:flex-start; gap:4px; padding:0; }
+.recorded-answer { display:block; margin-top:4px; color:var(--ink-2); }
+.emulation-next-step { display:grid; gap:10px; padding:10px 0; font-size:12px; line-height:1.5; }
+.emulation-next-step .btn { justify-self:start; }
+.emulation-next-step .link { justify-self:start; }
+.intake-status { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:12px; color:var(--color-brand-text); background:var(--color-brand-soft); }
+.message-work-state { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; font-size:11px; color:var(--ink-2); }