/* The product demo owns its layout; shared prototype styles do not own its state. */
.product .intro {padding:34px 0 28px}
.flow-demo {margin-top:12px;scroll-margin-top:20px}
.flow-heading {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.flow-heading h2 {font-size:17px;font-weight:500;letter-spacing:-.3px}
.flow-heading p {font-size:12px;color:var(--text-2);margin-top:6px}
.flow-demo button {font:12px var(--sans);border:1px solid var(--line);border-radius:3px;background:white;color:var(--text);padding:6px 10px}
.flow-demo button:hover:not(:disabled) {background:#edf1fa;border-color:#a7b7d5}
.flow-demo button:disabled {opacity:.45;cursor:default}
.flow-demo button:focus-visible,.flow-demo input:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.flow-controls {display:flex;gap:6px;flex-shrink:0}
.flow-window {position:relative;border:1px solid #bdc8db;border-radius:4px;background:white;box-shadow:0 12px 32px #24334b09;overflow:hidden}
.flow-toolbar {height:43px;display:flex;align-items:center;gap:20px;padding:0 14px;border-bottom:1px solid var(--line)}
.flow-toolbar strong {font-size:13px;font-weight:600}
.flow-toolbar>span {font:11px var(--mono);color:var(--text-2)}
.flow-toolbar #flow-run {margin-left:auto;background:var(--accent);border-color:var(--accent);color:white;min-width:70px}
.flow-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,31%)}
.flow-model {min-width:0}
.flow-tabs {display:flex;height:39px;padding:0 10px;border-bottom:1px solid var(--line);background:#f8f9fc;gap:2px}
.flow-tabs button {border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:8px;font-size:11px}
.flow-tabs button[aria-pressed=true] {border-bottom-color:var(--accent);color:var(--accent)}
#flow-library {margin-left:auto}
.flow-canvas {height:345px;position:relative;overflow:hidden;background:#fff}
.flow-circuit {width:100%;height:100%;display:block}
.flow-circuit .wire,.flow-circuit .symbol {fill:none;stroke:#25344b;stroke-width:1.7;stroke-linejoin:round}
.flow-circuit text {font:11px var(--mono);fill:var(--text-2)}
.flow-circuit .new-part {stroke:#33805a}
.flow-circuit .proposal-symbol {stroke:#33805a}
.flow-circuit .selectable {cursor:grab;outline:none;touch-action:none}
.flow-circuit .selection {fill:#3e60c50a;stroke:var(--accent);stroke-width:1;opacity:0}
.flow-circuit .terminals {fill:white;stroke:var(--accent);opacity:0}
.flow-circuit .selectable:hover .selection {opacity:.4}
.flow-circuit .selected .selection,.flow-circuit .selected .terminals,.flow-circuit .selectable:focus .selection {opacity:1}
.flow-chat {border-left:1px solid var(--line);padding:0 14px 12px;display:flex;min-width:0;height:384px}
.flow-chat {flex-direction:column}
.flow-chat h3 {font-size:12px;font-weight:500;min-height:39px;display:flex;align-items:center;border-bottom:1px solid var(--line);margin:0 -14px;padding:0 14px}
#flow-messages {flex:1;min-height:0;overflow:auto;padding:16px 0 12px;font-size:12px;line-height:1.65}
.flow-user {background:#f0f2f6;border-radius:12px 12px 3px 12px;padding:10px 12px;margin:0 0 16px 12px}
.flow-answer {white-space:pre-wrap}
.flow-answer small {display:block;color:var(--text-muted);font-size:10px;margin-bottom:6px}
#flow-composer {border:1px solid #d9dfe8;background:#f8f9fb;border-radius:13px;padding:10px 11px;flex-shrink:0}
#flow-composer textarea {display:block;width:100%;font:12px/1.5 var(--sans);resize:none;border:0;background:transparent;color:var(--text);padding:0;outline:none}
#flow-composer>div {display:flex;align-items:center;justify-content:space-between;margin-top:5px}
#flow-composer small {font-size:10px;color:var(--text-muted)}
#flow-send {border:0;border-radius:50%;background:var(--accent);color:white;width:26px;height:26px;padding:0;font-size:18px}
.flow-status {display:flex;justify-content:space-between;gap:12px;padding:7px 14px;background:#f8f9fc;border-top:1px solid var(--line);font:10px var(--mono);min-height:29px}
.flow-below {display:flex;align-items:center;gap:15px;margin-top:12px;min-height:40px}
#flow-caption {font-size:13px;color:var(--text-2);flex:1;line-height:1.5}
#flow-next {flex-shrink:0;background:transparent}
.flow-note {font-size:10px;color:var(--text-muted);margin:7px 0 0}
.flow-search {position:absolute;inset:12px 14px;background:white;border:1px solid #bdc8db;border-radius:4px;box-shadow:0 6px 20px #24334b12;padding:14px;overflow:auto}
.flow-search header {display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:10px}
.flow-search input {width:100%;font:13px var(--sans);padding:9px 10px;border:1px solid #bac6dc;border-radius:3px;color:var(--text);background:#fafbfe}
.flow-search .search-hit {display:block;width:100%;margin-top:10px;text-align:left;padding:12px;border-color:var(--line);font-size:13px}
.search-hit small {display:block;font:10px/1.6 var(--mono);color:var(--text-muted);overflow-wrap:anywhere;margin-top:3px}
.flow-component {margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:12px;line-height:1.7}
.flow-component dl {display:grid;grid-template-columns:100px 1fr;gap:5px;margin:8px 0}
.flow-component dt {font-family:var(--mono)}
.flow-component dd {margin:0;color:var(--text-2)}
.flow-proposal {position:absolute;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:6px;padding:8px 10px;background:#f1f7f2;border:1px solid #ccdece;font-size:11px}
.flow-proposal span {margin-right:auto}
.flow-proposal button:first-of-type {background:var(--accent);color:white;border-color:var(--accent)}
.flow-source {height:100%;overflow:auto;padding:20px;font:12px/1.75 var(--mono);white-space:pre;color:#334663}
.flow-source mark {display:inline;color:inherit;background:#eaf3ec}
.flow-inspector-backdrop {position:absolute;inset:0;background:#24334b16;display:flex;align-items:center;justify-content:center;padding:12px}
.flow-inspector {width:min(410px,100%);background:white;border:1px solid #b8c5da;border-radius:5px;box-shadow:0 8px 24px #24334b20;padding:14px;max-height:100%;overflow:auto}
.flow-inspector header {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.flow-inspector strong {display:block;font-size:15px}
.flow-inspector small {font:9px/1.5 var(--mono);color:var(--text-2);overflow-wrap:anywhere}
.flow-inspector h4 {font-size:11px;font-weight:500;margin:10px 0 5px;color:var(--text-2)}
.flow-param {display:grid;grid-template-columns:78px minmax(60px,1fr) 32px;align-items:center;gap:8px;font:11px var(--mono);margin:5px 0}
.flow-param input,.flow-param output {font:11px var(--mono);border:1px solid var(--line);padding:5px 7px;width:100%;min-width:0;border-radius:2px}
.flow-inspector p {font-size:10px;color:var(--text-2);margin-top:8px}
.flow-plot {padding:18px 16px 8px;height:100%;display:flex;flex-direction:column}
.flow-plot svg {width:100%;flex:1;min-height:0;overflow:visible;touch-action:pan-y}
.flow-plot text {font:10px var(--mono);fill:var(--text-muted)}
.flow-plot .grid {stroke:#e8edf4;stroke-width:1}
.flow-plot .trace {fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-plot .previous {stroke:#8b9ab4;stroke-width:1.5;stroke-dasharray:4 4}
.flow-plot-title {font:11px var(--mono);margin-bottom:4px}
.flow-legend {display:flex;gap:16px;font:10px var(--mono);padding:8px 0;flex-wrap:wrap}
.flow-legend span::before {content:'';display:inline-block;width:18px;border-top:2px solid var(--accent);margin-right:5px;vertical-align:middle}
.flow-legend span:first-child::before {border-color:#8b9ab4}
.flow-result-note {font-size:12px;line-height:1.5;min-height:36px;color:var(--text-2)}
.flow-progress {position:absolute;bottom:0;left:0;height:2px;background:var(--accent);width:0}
.flow-pointer {position:absolute;z-index:10;width:17px;height:22px;pointer-events:none;transition:none}
.flow-pointer[hidden] {display:none}
.flow-pointer svg {width:17px;height:22px;fill:#24334b;stroke:white;stroke-width:1.5}
.flow-pointer i {position:absolute;width:18px;height:18px;left:-7px;top:-7px;border:1.5px solid var(--accent);border-radius:50%;opacity:0}
.flow-pointer.click i {animation:flow-click .35s ease-out}
@keyframes flow-click {from{transform:scale(.3);opacity:.7}to{transform:scale(1.5);opacity:0}}
@media(max-width:720px){.flow-workspace{grid-template-columns:1fr}.flow-canvas{height:280px}.flow-chat{height:235px;border-left:0;border-top:1px solid var(--line);padding:0 12px 10px}.flow-chat h3{min-height:30px}.flow-chat #flow-messages{padding:8px 0;font-size:11px}.flow-user{padding:7px 10px;margin-bottom:8px}#flow-composer textarea{font-size:12px;height:36px}#flow-composer{padding:7px 10px}.flow-heading{align-items:flex-start}.flow-heading h2{font-size:16px}.flow-controls{gap:4px}.flow-controls button{padding:5px 7px}.product-details{grid-template-columns:1fr;gap:20px;margin-top:36px}.product-details pre,.detail-path{margin-top:12px}.flow-status{font-size:9px}.flow-below{align-items:flex-start}.flow-toolbar{gap:10px}.flow-toolbar>span{font-size:10px}.flow-proposal{flex-wrap:wrap}.flow-result-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow-pointer{display:none}}

.flow-pointer.double-click i {animation:flow-click .17s ease-out 2}

.flow-heading {margin-bottom:10px}.flow-model-name {font-size:12px;color:var(--text-2)}
.flow-below {min-height:28px;margin-top:8px}#flow-caption {font-size:11px}
.flow-search-tool {font:10px/1.65 var(--mono);color:var(--text-muted);padding:0 0 9px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.flow-search-tool[hidden]{display:none}.flow-search-tool span {color:var(--text-2)}
.flow-pointer.held svg {fill:#3e60c5}.flow-pointer.double-click i {animation:flow-click .18s ease-out 2}
.flow-param input.demo-field-active {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#what.col {margin-top:46px}.vig.rv {opacity:1;transform:none}.vig-visual {height:154px}

/* App tool-call styles; this page has no other chat surface. */
.ai-tool-group { align-self: stretch; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
/* SIM-132: summaries are flex rows with a CSS caret (the native ::marker dies under display:flex,
   and its position/size varies per browser anyway). Caret rotates on [open]. */
.ai-tool-gsummary, .ai-tool-call > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: 11px; color: var(--text-2);
  /* overflow-wrap INHERITS into the group summary's anonymous flex item (its label is a bare text
     node no selector reaches) — without it a long dotted class path is one unbreakable token wider
     than the panel, which clips under the group's overflow:hidden and shoves the ::after live-dot
     out of view (review finding). */
  overflow-wrap: anywhere; }
.ai-tool-gsummary::-webkit-details-marker, .ai-tool-call > summary::-webkit-details-marker { display: none; }
.ai-tool-gsummary::before, .ai-tool-call > summary::before { content: ""; flex-shrink: 0;
  width: 0; height: 0; border-left: 4px solid var(--text-muted);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .12s ease; }
details[open] > .ai-tool-gsummary::before, .ai-tool-call[open] > summary::before { transform: rotate(90deg); }
.ai-tool-gsummary { padding: 6px 9px; }
.ai-tool-gsummary:hover { color: var(--text); background: var(--surface-2); }
/* A group with live rows keeps a pulsing accent dot on its summary — so a COLLAPSED group that is
   still executing visibly breathes instead of looking finished. */
.ai-tool-group:has(.ai-tool-call.working) > .ai-tool-gsummary::after,
.ai-tool-group:has(.ai-tool-call.running) > .ai-tool-gsummary::after {
  content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-left: auto;
  background: var(--accent); animation: aiThinking 1.2s ease-in-out infinite;
}
.ai-tool-list { display: flex; flex-direction: column; gap: 2px; padding: 2px 8px 6px 20px; }
.ai-tool-call > summary { padding: 2px 4px; border-radius: 3px; }
.ai-tool-call > summary:hover { color: var(--text); background: var(--surface-2); }
/* Per-call status dot: muted until execution, accent pulse while live, settles ok/error. The
   pulse reuses aiThinking — the shimmer stays reserved for the two thinking surfaces. */
.ai-tool-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.ai-tool-call.working > summary .ai-tool-dot,
.ai-tool-call.running > summary .ai-tool-dot { background: var(--accent); animation: aiThinking 1.2s ease-in-out infinite; }
.ai-tool-call.done > summary .ai-tool-dot { background: #33805a; }
.ai-tool-call.failed > summary .ai-tool-dot { background: var(--error); }
.ai-tool-label { min-width: 0; overflow-wrap: anywhere; }
.ai-tool-out { margin: 3px 0 4px 17px; padding: 6px 8px; background: #f8f9fc; border: 1px solid var(--border); border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }

.flow-demo .ai-tool-group {margin-bottom:12px}.flow-demo .ai-tool-list .ai-tool-call {white-space:normal}
.flow-nav-overlay {position:absolute;inset:0;z-index:12;background:#24334b2e;display:flex;justify-content:center;align-items:flex-start;padding:36px 12px 12px}
.flow-nav-overlay .palette {width:min(640px,100%);max-height:100%;overflow:auto;background:#fff;border:1px solid #bcc7d9;border-radius:10px;box-shadow:0 12px 40px #24334b25}
.flow-palette-input {display:flex;border-bottom:1px solid var(--line);align-items:center;padding-right:10px}.flow-palette-input input {width:100%;min-width:0;padding:15px 18px;border:0;background:transparent;font:14px var(--sans);color:var(--text);outline:none}
.palette-scopes {display:flex;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line)}.flow-demo .palette-scope {border-radius:20px;padding:3px 10px;font-size:11px}.palette-scope.active {background:#edf1fa;border-color:#9eafd0}
.palette-results {padding:6px}.flow-demo .palette-row {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 8px;width:100%;text-align:left;border:0;padding:10px;background:transparent}.flow-demo .palette-row.sel {background:#edf1fa}.palette-name {font:11px var(--mono);overflow-wrap:anywhere}.palette-comment {grid-column:2;font-size:11px;color:var(--text-2)}.palette-action {grid-column:3;grid-row:1/3;align-self:center;font-size:10px;color:var(--text-2)}.src-badge {font:9px var(--mono);color:var(--text-muted)}
.palette-hint {padding:9px 14px;border-top:1px solid var(--line);font-size:10px;color:var(--text-muted);word-spacing:3px}.flow-search-empty {padding:15px;font-size:12px;color:var(--text-muted)}.flow-doc-head {display:flex;justify-content:space-between;align-items:center;padding:14px}.flow-doc-path {padding:0 14px;font:10px var(--mono);overflow-wrap:anywhere}.palette .flow-component {padding:14px;margin-top:12px}.flow-component h4 {margin:12px 0 6px;font-size:12px}
@keyframes aiThinking {50% {opacity:.4}}

.flow-source {padding-bottom:70px}.source-keyword {color:#8052a0;font-weight:500}.source-type {color:#256c85}.source-number {color:#a25329}.source-string {color:#3a7952}
#vg2 .vsearch {min-height:28px}#vg2-q {min-height:16px;display:inline-block}

.flow-heading {justify-content:flex-end}

.plot-readout { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px;
  padding: 7px 2px 8px; margin-top: 4px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; line-height: 1.5; }
/* SIM-19 polish (Fedor): the time stamp gets its OWN row — items always start below it,
   never inline with it (flex-basis 100% forces the wrap). */
.ro-time { color: var(--text-muted); min-width: 92px; flex-basis: 100%; }
.ro-item { display: inline-flex; align-items: baseline; gap: 6px; }
.ro-sw { width: 9px; height: 9px; border-radius: 2px; flex: none; align-self: center; }
/* Compare-mode dashed series: the swatch is a dashed LINE sample, not a filled square, so a
   same-hue solid/dashed pair stays distinguishable in the readout (SIM-19). */
/* 9px was too short for a visible dash pattern (rendered as one solid-looking segment) —
   16px shows 2-3 dash cycles, unmistakably dashed next to the 9px solid square. */
.ro-sw-dashed { width: 16px; height: 0; border-top: 2px dashed; border-radius: 0; background: none; }
.ro-name { color: var(--text-2); }
.ro-val { color: var(--text); min-width: 56px; font-variant-numeric: tabular-nums; }

.flow-plot .ro-sw {background:var(--accent)}.flow-plot .ro-sw-dashed {background:none;border-color:#8b9ab4}.flow-demo button.demo-pressed {box-shadow:inset 0 0 0 2px #fff8;filter:brightness(.8);transform:translateY(1px)}

/* Keep the search field's focus treatment inside its header. */
.flow-palette-input{padding:6px 12px;transition:box-shadow .15s}
.flow-palette-input:focus-within{box-shadow:inset 0 -2px #4260be}
.flow-demo .flow-palette-input input:focus-visible{outline:none}
.flow-palette-input input{padding:12px 4px;font-size:14px}
.flow-demo #flow-close-library{display:grid;place-items:center;flex:0 0 30px;height:30px;padding:0;border:0;border-radius:5px;background:transparent;color:#687181;font-size:22px;font-weight:400;line-height:1}
.flow-demo #flow-close-library:hover{background:#edf0f5;color:#141820}
.flow-demo .palette-scope{border:0;border-radius:4px;padding:6px 10px;background:transparent;color:#687181;font-size:12px}
.flow-demo .palette-scope.active{background:#edf1fa;color:#243f92}
.flow-demo .palette-scope:hover{background:#f1f3f7}
.flow-demo #flow-library[aria-selected=true]{background:#edf1fa;color:#243f92}