bottleship 0.1.0-prototype.0 → 0.1.0-prototype.2

package/review-app/src/kit/kit.css

@@ -0,0 +1,696 @@
+/* The review's look: neutral surfaces, hairlines, color only for status. Light or dark per data-theme (theme.ts). */
+:root {
+  --bg: #f4f4f5; --panel: #fafafa; --card: #ffffff; --raised: #efeff1; --hover: rgba(0,0,0,.035); --press: rgba(0,0,0,.06);
+  --line: rgba(0,0,0,.075); --line-2: rgba(0,0,0,.12);
+  --text: #1b1b1f; --text-2: #67676f; --text-3: #a1a1a9;
+  --green: #2f9e64; --red: #d14343; --amber: #b7791f;
+  --green-bg: rgba(47,158,100,.085); --red-bg: rgba(209,67,67,.075); --amber-bg: rgba(183,121,31,.09);
+  --add: rgba(47,158,100,.09); --del: rgba(209,67,67,.08); --sel: rgba(0,0,0,.05);
+  --btn: #1b1b1f; --btn-text: #ffffff;
+  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
+  --shadow-float: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.12);
+  --kw: #8b5cf6; --str: #16803c; --num: #c2410c; --fn: #2563eb; --com: #a1a1a9; --ty: #0e7490;
+  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --r-sm: 6px; --r: 8px; --r-lg: 12px;
+  /* type: six sizes, two weights, three line heights; add one only when a page needs it */
+  --fs-xl: 24px; --fs-lg: 16px; --fs: 14px; --fs-sm: 13px; --fs-mono: 12px; --fs-xs: 10px;
+  --lh-tight: 1.25; --lh: 1.5; --lh-text: 1.6; --lh-code: 1.7;
+  --ls: -0.006em; --ls-lg: -0.012em; --ls-xl: -0.02em;
+  --ease: cubic-bezier(0.23, 1, 0.32, 1);
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  --bg: #0c0c0d; --panel: #101012; --card: #141416; --raised: #19191c; --hover: rgba(255,255,255,.035); --press: rgba(255,255,255,.06);
+  --line: rgba(255,255,255,.065); --line-2: rgba(255,255,255,.1);
+  --text: #e8e8eb; --text-2: #96969d; --text-3: #5f5f66;
+  --green: #4cb782; --red: #eb5d5d; --amber: #d9a441;
+  --green-bg: rgba(76,183,130,.1); --red-bg: rgba(235,93,93,.1); --amber-bg: rgba(217,164,65,.1);
+  --add: rgba(76,183,130,.085); --del: rgba(235,93,93,.085); --sel: rgba(255,255,255,.06);
+  --btn: #e8e8eb; --btn-text: #101012;
+  --shadow: 0 0 0 1px rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.4);
+  --shadow-float: 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.55);
+  --kw: #c4a7e7; --str: #a6d189; --num: #ef9f76; --fn: #8caaee; --com: #5f5f66; --ty: #81c8be;
+  color-scheme: dark;
+}
+
+/* base */
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; height: 100%; }
+body { background: var(--bg); color: var(--text); font: 400 var(--fs)/var(--lh) var(--sans); font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: var(--ls); -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: 248px minmax(0, 1fr); overflow: hidden; }
+#root { display: contents; }
+main { height: 100vh; min-width: 0; display: flex; flex-direction: column; }
+main > .main-row { flex: 1; min-height: 0; display: flex; }
+main .content { flex: 1; min-width: 0; overflow: auto; }
+/* the agent's panel, when docked */
+.dock { flex: none; display: flex; width: 380px; border-left: 1px solid var(--line); background: var(--card); }
+.dock:empty { display: none; }
+button { font: inherit; color: inherit; }
+a { color: inherit; }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
+@keyframes fade { from { opacity: 0; } }
+@keyframes pulse { from { opacity: .35; } }
+@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-2px); } }
+svg.i { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.view { animation: rise 260ms var(--ease); }
+.plus { color: var(--green); } .minus { color: var(--red); }
+.empty { color: var(--text-3); padding: 40px; }
+
+/* type */
+.title { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--ls-xl); margin: 0; text-wrap: balance; }
+.meta { display: flex; align-items: center; gap: 6px 20px; color: var(--text-2); font-size: var(--fs-sm); margin-top: 12px; flex-wrap: wrap; }
+.meta .who { display: inline-flex; align-items: center; gap: 7px; }
+.refs { display: inline-flex; align-items: center; gap: 7px; font: var(--fs-mono) var(--mono); letter-spacing: 0; color: var(--text-3); min-width: 0; }
+.refs > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.refs-arrow { width: 14px; height: 8px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
+.avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
+.lead { font-size: var(--fs-lg); line-height: var(--lh-text); color: var(--text); margin: 0; letter-spacing: var(--ls-lg); text-wrap: pretty; }
+.prose { font-size: var(--fs); line-height: var(--lh-text); color: var(--text-2); margin: 0; text-wrap: pretty; }
+.prose p { margin: 0 0 10px; } .prose p:last-child { margin: 0; }
+.prose code, .lead code, .row code, .ba code, .ot code, figcaption code, .fig-title code { font-family: var(--mono); font-size: .9em; letter-spacing: 0; padding: 1px 4px; border-radius: 4px; background: var(--raised); }
+.label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
+.label .c { color: var(--text-3); font-weight: 400; }
+.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+
+/* a key that does the same as the control next to it */
+kbd { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--raised); font: 500 var(--fs-xs) var(--mono); color: var(--text-3); }
+
+/* controls */
+.btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--card); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
+.btn:hover { background: var(--raised); }
+.btn:active { transform: scale(.98); }
+.btn.primary { background: var(--btn); border-color: transparent; color: var(--btn-text); }
+.btn.primary:hover { background: color-mix(in srgb, var(--btn) 86%, var(--bg)); }
+.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
+.btn.ghost:hover { color: var(--text); background: var(--hover); }
+.btn.sm { height: 28px; padding: 0 9px; }
+.btn:disabled { opacity: .5; cursor: default; transform: none; }
+.btn:focus-visible, .row:focus-visible, .media:focus-visible, .rail button:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+.modes { position: relative; display: inline-flex; gap: 2px; flex: none; padding: 3px; border-radius: var(--r); background: var(--raised); }
+.modes .pill { position: absolute; top: 3px; left: 0; height: calc(100% - 6px); border-radius: calc(var(--r) - 3px); background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08); pointer-events: none; }
+.modes .pill.moved { transition: transform 260ms var(--ease), width 260ms var(--ease); }
+.modes button { all: unset; position: relative; box-sizing: border-box; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: calc(var(--r) - 3px); font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); cursor: pointer; white-space: nowrap; transition: color 200ms ease-out; }
+.modes button:hover { color: var(--text-2); }
+.modes button[aria-pressed="true"] { color: var(--text); }
+.modes button:focus-visible { outline: 2px solid var(--text-3); outline-offset: 1px; }
+.lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; transition: background-color 240ms ease-out; }
+
+/* a quiet text link: where an item leads, e.g. its chapter */
+.link { all: unset; flex: none; cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 140ms ease-out; }
+.link:hover { color: var(--text); }
+.link:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 3px; }
+
+/* rows: files, findings, claims; all the same quiet card */
+.rows { display: flex; flex-direction: column; gap: 2px; }
+.row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 14px; border-radius: 3px; background: var(--card); text-align: left; width: 100%; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
+.row:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
+.row:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
+.row .grow { flex: 1; min-width: 0; }
+.row.tall { align-items: flex-start; padding: 12px 14px; }
+.row p { margin: 0; }
+.row .sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: 3px; }
+.fname { font-weight: 500; white-space: nowrap; }
+.fpath { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }
+.stat { font: var(--fs-mono) var(--mono); letter-spacing: 0; white-space: nowrap; display: inline-flex; gap: 6px; }
+.fmark { width: 14px; height: 14px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
+.fmark svg { width: 12px; height: 12px; stroke-width: 2; }
+.fmark.added { color: var(--green); } .fmark.deleted { color: var(--red); } .fmark.renamed { color: var(--text-2); }
+.sbar { display: inline-flex; gap: 2px; flex: none; }
+.sbar i { width: 4px; height: 8px; border-radius: 1px; background: var(--line-2); }
+.sbar i.a { background: var(--green); } .sbar i.d { background: var(--red); }
+/* lists of findings and claims: one card, hairline dividers, a small mark per item */
+.li { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 16px 14px; }
+.li.file-li { align-items: center; gap: 10px; padding: 11px 16px; }
+.file-list { display: flex; flex-direction: column; gap: 2px; }
+.file-list .li { background: var(--card); border-radius: 3px; }
+.file-list .li:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
+.file-list .li:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
+button.li.file-li { cursor: pointer; text-align: left; transition: background-color 120ms ease-out; }
+button.li.file-li:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
+@media (hover: hover) and (pointer: fine) { button.li.file-li:hover { background: var(--hover); } }
+.files-more { color: var(--text-2); font-size: var(--fs-sm); }
+.mark { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
+.mark svg { width: 11px; height: 11px; stroke-width: 2; }
+.mark.ok { background: var(--green-bg); color: var(--green); }
+.mark.fail { background: var(--red-bg); color: var(--red); }
+.mark.neutral { background: var(--amber-bg); color: var(--amber); }
+/* findings: titles only, one opens at a time */
+.acc-list { display: flex; flex-direction: column; gap: 2px; }
+.acc { border-radius: 3px; background: var(--card); overflow: hidden; }
+.acc:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
+.acc:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
+.acc-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; }
+button.acc-head { cursor: pointer; transition: background-color 120ms ease-out; }
+button.acc-head:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
+@media (hover: hover) and (pointer: fine) { button.acc-head:hover { background: var(--hover); } }
+.acc-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.acc[data-open] .acc-title { white-space: normal; }
+.acc-chev { display: inline-flex; width: 14px; flex: none; color: var(--text-3); transition: transform 150ms var(--ease); }
+.acc[data-open] .acc-chev { transform: rotate(90deg); }
+.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 160ms var(--ease); }
+.acc[data-open] .acc-body { grid-template-rows: 1fr; }
+.acc-body > div { overflow: hidden; }
+.acc-inner { padding: 0 16px 14px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-out, transform 160ms var(--ease); }
+.acc[data-open] .acc-inner { opacity: 1; transform: none; }
+/* claims: one that did not hold is a finding, tagged; the ones that held are a quiet line under the list */
+.claim-q { font-style: normal; }
+.claim-by { font-size: var(--fs-sm); color: var(--text-3); }
+.acc-title .claim-by { margin-left: 4px; }
+/* a chip: a short status, e.g. a claim's verdict or a step's state */
+.chip { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .01em; white-space: nowrap; background: var(--raised); color: var(--text-2); }
+.chip.fail { background: var(--red-bg); color: var(--red); } .chip.ok, .chip.done { background: var(--green-bg); color: var(--green); } .chip.merged { background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #8b5cf6; } .chip.neutral { background: var(--amber-bg); color: var(--amber); }
+.chip.run { animation: pulse 700ms ease-in-out infinite alternate; }
+.held { margin-top: 10px; }
+.held-none { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-3); }
+.held-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; margin-left: -6px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-3); cursor: pointer; transition: color 120ms ease-out, background-color 120ms ease-out; }
+.held-btn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+@media (hover: hover) and (pointer: fine) { .held-btn:hover { color: var(--text-2); background: var(--hover); } }
+.held[data-open] .acc-chev { transform: rotate(90deg); }
+.held[data-open] .acc-body { grid-template-rows: 1fr; }
+.held-ok { display: inline-flex; flex: none; color: var(--green); }
+.held-ok svg { width: 12px; height: 12px; stroke-width: 2; }
+.held-list { list-style: none; margin: 0; padding: 8px 0 0 22px; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-out, transform 160ms var(--ease); }
+.held[data-open] .held-list { opacity: 1; transform: none; }
+.held-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); line-height: var(--lh); }
+.held-list .held-ok { margin-top: 3px; }
+.held-text { flex: 1; min-width: 0; color: var(--text-2); }
+.iname { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
+.iname b { font-weight: 500; color: var(--text); }
+.iname span { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
+
+/* the rail: the PR, then every stop of the review */
+.rail { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px 12px; border-right: 1px solid var(--line); background: var(--panel); overflow: auto; min-height: 0; height: 100vh; }
+.rail .pr { padding: 6px 10px 18px; display: flex; flex-direction: column; gap: 6px; }
+.rail .pr .r { font-size: var(--fs-sm); color: var(--text-3); display: flex; align-items: center; gap: 6px; text-decoration: none; }
+.rail .pr a.r:hover { color: var(--text-2); }
+.rail .pr b { font-weight: 500; font-size: var(--fs-sm); text-wrap: balance; }
+.rail .sh { font-size: var(--fs-sm); color: var(--text-3); padding: 14px 10px 6px; }
+.rail button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; padding: 6px 10px; border-radius: 7px; font-size: var(--fs-sm); color: var(--text-2); transition: background-color 140ms ease-out, color 140ms ease-out; }
+.rail button:hover { background: var(--hover); color: var(--text); }
+.rail button[aria-current="true"] { background: var(--press); color: var(--text); }
+.rail .mk { width: 16px; height: 16px; flex: none; margin-top: 1px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; font: var(--fs-xs) var(--mono); letter-spacing: 0; color: var(--text-3); }
+.rail .seen .mk { background: var(--text-2); border-color: var(--text-2); color: var(--panel); }
+.rail .seen .mk svg { width: 10px; height: 10px; stroke-width: 2; }
+.rail .sub { padding-left: 36px; }
+.rail .sub .mk { width: 14px; height: 14px; border-color: var(--line); }
+.rail .sub.seen { color: var(--text-3); }
+.rail .sub.seen .mk { background: none; border-color: transparent; color: var(--green); }
+.rail .gap { flex: 1; }
+.rail-foot { display: flex; gap: 2px; padding: 0 2px; }
+/* as far from the bottom as from the left: 10px of rail and 2px of foot */
+.rail .rail-foot .icon-btn { width: 24px; height: 24px; padding: 0; align-items: center; justify-content: center; color: var(--text-3); }
+.rail .rail-foot .icon-btn:hover { color: var(--text); }
+/* folded: a strip of the marks; their titles show on hover */
+[data-rail-strip] body { grid-template-columns: 52px minmax(0, 1fr); }
+[data-rail-strip] .rail { align-items: center; padding-left: 8px; padding-right: 8px; }
+[data-rail-strip] .rail .pr, [data-rail-strip] .rail .sh, [data-rail-strip] .rail .sub, [data-rail-strip] .rail button > span:not(.mk) { display: none; }
+[data-rail-strip] .rail button:not(.icon-btn) { width: 36px; height: 32px; padding: 0; justify-content: center; align-items: center; }
+[data-rail-strip] .rail button .mk { margin-top: 0; }
+[data-rail-strip] .rail-foot { align-self: flex-start; padding: 0 0 0 4px; }
+[data-rail-strip] .rail-foot .theme { display: none; }
+
+/* overview */
+.orient { max-width: 720px; margin: 0 auto; padding: 64px 24px 96px; display: flex; flex-direction: column; gap: 44px; }
+.ba { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px 16px; margin: 0; }
+.ba dt { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); padding-top: 2px; }
+.ba dt.after { color: var(--text-2); }
+.ba dd { margin: 0; line-height: var(--lh-text); color: var(--text-2); text-wrap: pretty; }
+.ba dd.after { color: var(--text); }
+.ba code { white-space: nowrap; }
+.card { background: var(--card); border-radius: var(--r-lg); }
+.card.pad { padding: 24px; }
+.card .cap { color: var(--text-3); font-size: var(--fs-sm); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
+.card > .fig > .fig-head:only-child { display: none; }
+.cta { display: flex; align-items: center; gap: 8px; }
+
+/* flow */
+svg.flow { width: 100%; height: auto; display: block; overflow: visible; margin: 0 auto; }
+.fnode rect { fill: var(--card); stroke: var(--line-2); stroke-width: 1; transition: fill 240ms ease-out, stroke 240ms ease-out; }
+.fnode.changed rect { stroke: var(--text-2); stroke-dasharray: 4 3; }
+.fnode.here rect { stroke: var(--text); stroke-width: 1.25; }
+.fnode.ok rect { fill: var(--green-bg); stroke: var(--green); stroke-dasharray: none; }
+.fnode.fail rect { fill: var(--red-bg); stroke: var(--red); stroke-dasharray: none; }
+.fnode text { fill: var(--text); font: 500 var(--fs-sm) var(--sans); }
+.fnode text.sub { fill: var(--text-3); font: 400 var(--fs-mono) var(--mono); }
+.fnode text.lab { font: 500 var(--fs-mono) var(--sans); }
+.fnode.ok text.lab { fill: var(--green); } .fnode.fail text.lab { fill: var(--red); }
+/* a flow beside a chapter: its parts down a line, a column per instance with what happened there */
+.fcmp { display: grid; font-size: var(--fs-sm); line-height: var(--lh-tight); }
+.fcmp-row { display: contents; }
+.fcmp-row > * { display: flex; align-items: center; min-width: 0; min-height: 36px; padding: 6px 10px 6px 0; }
+.fcmp-head > * { min-height: 0; padding-top: 0; padding-bottom: 6px; color: var(--text-3); }
+.fcmp-row.here > * { background: var(--hover); }
+.fcmp-row.here > :first-child { border-radius: var(--r) 0 0 var(--r); }
+.fcmp-row.here > :last-child { border-radius: 0 var(--r) var(--r) 0; }
+.fcmp-node { position: relative; gap: 12px; padding-left: 8px; color: var(--text-2); }
+.fcmp-node i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); z-index: 1; }
+.fcmp-row.here .fcmp-node i { background: color-mix(in srgb, var(--bg), var(--text) 3.5%); }
+.fcmp-node.changed { color: var(--text); }
+.fcmp-node.changed i { box-shadow: inset 0 0 0 1.5px var(--text-2); }
+/* the line through the dots, each row drawing the half above and below its dot, so it joins at any row height */
+.fcmp-node::before, .fcmp-node::after { content: ""; position: absolute; left: 12px; border-left: 1px solid var(--line-2); }
+.fcmp-node::before { top: 0; bottom: 50%; }
+.fcmp-node::after { top: 50%; bottom: 0; }
+.fcmp-row.first .fcmp-node::before, .fcmp-row.last .fcmp-node::after { display: none; }
+.fcmp-node > span, .fcmp-cell > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
+.fcmp-cell { color: var(--text-2); }
+.fcmp-cell > span { font-weight: 500; animation: arrive 320ms var(--ease); }
+.fcmp-cell > b { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: arrive 320ms var(--ease); }
+.fcmp-cell.ok > span { color: var(--green); } .fcmp-cell.ok > b { background: var(--green); }
+.fcmp-cell.fail > span { color: var(--red); } .fcmp-cell.fail > b { background: var(--red); }
+@keyframes arrive { from { opacity: 0; transform: translateY(3px); } }
+.fedge { stroke: var(--line-2); stroke-width: 1.25; fill: none; transition: stroke 240ms ease-out; }
+.fedge.lit { stroke: var(--text-2); }
+.arrow { fill: var(--text-3); }
+.packet { fill: var(--text); }
+
+/* chapter: the guide on the left, the evidence on the right */
+.chapter { height: 100%; display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
+.guide { overflow: auto; padding: 24px 32px 24px; display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--line); background: var(--panel); }
+.guide .h { font-size: var(--fs-xl); font-weight: 500; letter-spacing: var(--ls-xl); line-height: var(--lh-tight); margin: 0 0 12px; text-wrap: balance; }
+.guide .clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
+.show-more { all: unset; align-self: flex-start; cursor: pointer; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-3); transition: color 120ms ease-out; }
+.show-more:hover { color: var(--text); }
+.show-more:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 3px; }
+/* each instance a column: before a run what should happen, after it what happened in color, then what should have */
+.cols { display: grid; gap: 0 24px; }
+.col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.col + .col { padding-left: 12px; margin-left: -12px; border-left: 1px solid var(--line); }
+.col b { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }
+.col p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh); color: var(--text); text-wrap: pretty; }
+.col .got { font-size: var(--fs); font-weight: 500; animation: rise 220ms var(--ease); }
+.col .got.ok { color: var(--green); } .col .got.fail { color: var(--red); }
+.col .should { font-size: var(--fs-sm); line-height: var(--lh); color: var(--text-3); text-wrap: pretty; }
+.col .show-more { margin-top: -4px; }
+.events { margin-top: 12px; background: var(--card); border-radius: var(--r-lg); overflow: hidden; }
+.events-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; font-size: var(--fs-sm); cursor: pointer; transition: background-color 120ms ease-out; }
+.events-head:disabled { cursor: default; }
+.events-head:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
+@media (hover: hover) and (pointer: fine) { .events-head:not(:disabled):hover { background: var(--raised); } }
+.events[data-open] .acc-chev { transform: rotate(90deg); }
+.events-title { flex: 1; font-weight: 500; }
+.events-title .c { margin-left: 6px; font-weight: 400; color: var(--text-3); }
+.events[data-open] .acc-body { grid-template-rows: 1fr; }
+.events-lines { padding: 0 14px 12px 38px; font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; color: var(--text-2); opacity: 0; transform: translateY(-4px); transition: opacity 120ms ease-out, transform 160ms var(--ease); }
+.events[data-open] .events-lines { opacity: 1; transform: none; }
+.events-lines div { white-space: pre-wrap; word-break: break-word; }
+.events-lines b { font-weight: 500; color: var(--text); margin-right: 8px; }
+.code-link { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-radius: var(--r-lg); background: var(--card); cursor: pointer; font-size: var(--fs-sm); transition: background-color 120ms ease-out; }
+.code-link .fpath { flex: 1; }
+.code-link:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+@media (hover: hover) and (pointer: fine) { .code-link:hover { background: var(--raised); } }
+pre.failed { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--red-bg); color: var(--red); font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; white-space: pre-wrap; max-height: 200px; overflow: auto; }
+/* previous and next, by chapter title, with the keys that do the same */
+.pager { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; }
+.pager button { all: unset; display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: calc(50% - 8px); font-size: var(--fs-sm); color: var(--text-3); cursor: pointer; transition: color 120ms ease-out; }
+.pager button span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pager button:last-child { color: var(--text-2); }
+.pager button:hover { color: var(--text); }
+.pager button:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 3px; }
+
+
+/* the evidence: the live apps alone, or a column of evidence that scrolls */
+.evidence { min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
+.evidence > .live:only-child { height: 100%; padding: 16px; }
+.evidence.code-view { padding: 16px; }
+.code-link[aria-pressed="true"] { background: var(--raised); }
+.evidence.scroll { padding: 24px 28px 64px; display: flex; flex-direction: column; gap: 36px; }
+.evidence.scroll > .live { flex: none; }
+.evidence.scroll .live .frame { max-height: 70vh; }
+.live { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
+.live-bar { flex: none; display: flex; align-items: center; gap: 12px; }
+.icon-btn { all: unset; flex: none; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
+.icon-btn:hover { background: var(--hover); color: var(--text); }
+.icon-btn:active { transform: scale(.94); }
+.icon-btn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+.icon-btn[aria-pressed="true"] { color: var(--text-2); }
+.live-right { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
+.live-labels { flex: none; display: grid; gap: 12px; min-height: 28px; }
+.live-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); }
+.live-label b { font-weight: 500; }
+.live-label .icon-btn:last-child { margin-left: auto; }
+.live-label .lamp { border-radius: 2px; }
+.live-label .lamp.ok { background: var(--green); } .live-label .lamp.fail { background: var(--red); }
+.live-bar .modes .lamp { margin-right: 6px; border-radius: 2px; }
+.live-bar .modes .lamp.ok { background: var(--green); } .live-bar .modes .lamp.fail { background: var(--red); }
+.live-body { flex: 1; min-height: 0; display: flex; align-items: flex-start; }
+.live-body.wide { display: grid; gap: 12px; align-items: start; }
+.live-body > .frame { flex: 1; }
+/* a desktop-shaped window, as wide as there is room for and no taller than the panel */
+.live .frame { aspect-ratio: 16 / 10; max-height: 100%; }
+/* the guide folded away */
+[data-guide-off] .chapter { grid-template-columns: minmax(0, 1fr); }
+[data-guide-off] .chapter > .guide { display: none; }
+.frame { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
+.fview { position: relative; flex: 1; min-height: 0; display: flex; }
+.fview iframe { border: 0; flex: 1; width: 100%; background: #fff; }
+.down { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px; text-align: center; background: var(--raised); color: var(--text-3); font-size: var(--fs-sm); }
+.down b { color: var(--text-2); font-weight: 500; font-size: var(--fs); }
+.down span { max-width: 300px; }
+
+/* results that are not visible in the app */
+.outcomes { background: var(--card); border-radius: var(--r-lg); }
+.outcomes > .oe { margin: 0; padding: 14px 16px; color: var(--text-3); font-size: var(--fs-sm); }
+.outcome { padding: 14px 16px; min-width: 0; animation: fade 200ms ease-out; }
+.outcome + .outcome { border-top: 1px solid var(--line); }
+.outcome .oh { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-sm); min-width: 0; }
+.outcome .oh .lamp { align-self: center; border-radius: 2px; }
+.outcome .on { flex: none; color: var(--text-2); }
+.outcome .ot { flex: 1; min-width: 0; font-weight: 500; color: var(--text); }
+.outcome.ok .lamp { background: var(--green); } .outcome.fail .lamp { background: var(--red); } .outcome.neutral .lamp { background: var(--text-2); }
+.outcome.wait .lamp { animation: pulse 700ms ease-in-out infinite alternate; }
+.outcome.wait .ot, .outcome.none .ot { color: var(--text-3); font-weight: 400; }
+.outcome .os { margin: 4px 0 0 17px; font-size: var(--fs-sm); color: var(--text-2); }
+.outcome .ob { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--bg); font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
+
+/* screenshots and comparisons */
+.fig { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.fig-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
+.fig-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
+.fig-actions { display: flex; align-items: center; gap: 4px; }
+.fig figcaption { color: var(--text-3); font-size: var(--fs-sm); }
+.media { all: unset; box-sizing: border-box; display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); overflow: hidden; cursor: zoom-in; transition: border-color 140ms ease-out; }
+.media:hover { border-color: var(--line-2); }
+.media.still { cursor: default; }
+video.media { height: auto; max-height: 560px; object-fit: contain; cursor: pointer; }
+.media img, .media canvas { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
+.tagged { position: relative; min-width: 0; }
+.tag { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .01em; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line-2); color: var(--text); pointer-events: none; }
+.tag.r { left: auto; right: 8px; }
+.cmp-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
+.cmp-slider { position: relative; cursor: ew-resize; user-select: none; touch-action: none; }
+.cmp-slider img { pointer-events: none; -webkit-user-drag: none; }
+.cmp-slider img.top { position: absolute; inset: 0; height: 100%; }
+.cmp-slider:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+/* a white line with a soft shadow, so it reads on light and dark screenshots, and a grip with arrows */
+.cmp-slider .handle { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
+.cmp-slider .handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 8px rgba(0,0,0,.18); }
+.cmp-slider .grip { position: absolute; top: 50%; left: 0; width: 34px; height: 24px; transform: translate(-50%, -50%); border-radius: 99px; background: #fff; color: #1b1b1f; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.2); transition: transform 150ms var(--ease); }
+.cmp-slider .grip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+.cmp-slider.dragging .grip { transform: translate(-50%, -50%) scale(.94); }
+.cmp-note { color: var(--text-3); font-size: var(--fs-sm); margin-top: 8px; }
+.zoom { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 40px; background: rgba(10,10,12,.78); backdrop-filter: blur(4px); cursor: zoom-out; animation: fade 160ms ease-out; }
+.zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
+
+/* changes */
+.changes { height: 100%; }
+.groups { height: 100%; overflow: auto; padding: 40px 48px 120px; display: flex; flex-direction: column; gap: 56px; }
+.group { max-width: 1040px; width: 100%; }
+.group .head { display: grid; gap: 2px; margin-bottom: 16px; max-width: 640px; }
+.group .head .h { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--ls-lg); margin: 0; }
+.file { border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
+.file + .file { margin-top: 12px; }
+.fh { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
+.fh .fpath { flex: 1; }
+.reviewed { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; user-select: none; padding: 0 4px; }
+.reviewed input { appearance: none; width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); margin: 0; display: grid; place-content: center; cursor: pointer; transition: background-color 140ms ease-out; }
+.reviewed input:checked { background: var(--green); border-color: var(--green); }
+.reviewed input:checked::after { content: ""; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); }
+.file.closed .fh { border-bottom-color: transparent; }
+.fh-toggle { all: unset; flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; align-self: stretch; cursor: pointer; }
+.group .h .count { margin-left: 6px; color: var(--text-3); font-weight: 400; }
+.file-stack .file.other { border-radius: 3px; }
+.file-stack .file.other + .file.other { margin-top: 2px; }
+.file-stack .file.other:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
+.file-stack .file.other:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
+.file.other .chev { display: inline-flex; color: var(--text-3); transition: transform 160ms var(--ease); }
+.file.other .fh-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
+.file.other.done .fname { color: var(--text-2); }
+.fh-threads { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); font-size: var(--fs-sm); }
+.fh-toggle:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; border-radius: 4px; }
+.diff { font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; }
+.dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
+.dl .ln { text-align: right; padding: 0 14px 0 0; color: var(--text-3); user-select: none; border-left: 2px solid transparent; }
+/* long lines wrap, the rest of the line indented under its start */
+.dl .code { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 16px 0 calc(4ch + 12px); text-indent: -4ch; }
+.dl .a { background: var(--add); } .dl .ln.a { border-left-color: var(--green); color: var(--green); }
+.dl .d { background: var(--del); } .dl .ln.d { border-left-color: var(--red); color: var(--red); }
+/* comments: a + in the gutter on hover, drag it for several lines; threads sit under their line */
+.dl .lr { display: contents; }
+.dl .ln { position: relative; }
+/* on the edge between the number and the code, level with a wrapped line's first row */
+.add-c { all: unset; position: absolute; z-index: 1; right: -8px; top: calc((1lh - 16px) / 2); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; background: var(--btn); color: var(--btn-text); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity 120ms ease-out, transform 120ms ease-out; }
+.add-c svg.i { width: 11px; height: 11px; stroke-width: 1.75; }
+.dl .lr:hover .add-c, .add-c:focus-visible { opacity: 1; transform: scale(1); }
+.diff.picking .add-c { opacity: 0; }
+.diff.picking { user-select: none; cursor: ns-resize; }
+.dl .lr.sel > div { background: var(--sel); }
+.dl .lr.sel > .ln { border-left-color: var(--text-3); color: var(--text-2); }
+.dl-span { grid-column: 1 / -1; padding: 10px 16px 10px 52px; border-block: 1px solid var(--line); background: var(--panel); font: var(--fs-sm)/var(--lh) var(--sans); letter-spacing: var(--ls); }
+.dl-span + .dl-span { border-top: 0; padding-top: 0; }
+.loose { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); font: var(--fs-sm)/var(--lh) var(--sans); letter-spacing: var(--ls); }
+.thread { max-width: 720px; border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; }
+.thread-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--text-3); }
+.thread-state { color: var(--text-3); }
+.thread-state.resolved { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
+.thread-state.resolved svg.i { color: var(--green); }
+.thread-hide { margin-left: auto; color: var(--text-3); }
+.thread.folded { all: unset; box-sizing: border-box; max-width: 720px; width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-lg); background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--text-2); cursor: pointer; transition: background-color 120ms ease-out; }
+.thread.folded svg.i { color: var(--green); }
+.thread.folded b { font-weight: 500; color: var(--text); flex: none; }
+.thread-gist { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
+.thread-count { flex: none; color: var(--text-3); }
+@media (hover: hover) and (pointer: fine) { .thread.folded:hover { background: var(--raised); } }
+.thread.folded:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+.note { padding: 12px 14px; }
+.note + .note { border-top: 1px solid var(--line); }
+.note-head { display: flex; align-items: center; gap: 8px; height: 22px; }
+.note-head b { font-weight: 500; }
+.note-when { color: var(--text-3); }
+.note-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--raised); color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; }
+.note-tag.pending { background: var(--amber-bg); color: var(--amber); }
+.note-tag.agent { gap: 5px; }
+.note-tag.agent .lamp { width: 5px; height: 5px; background: currentColor; animation: pulse 700ms ease-in-out infinite alternate; }
+.note-tag.agent.done { background: var(--green-bg); color: var(--green); }
+.note-tag.agent.stopped { background: var(--red-bg); color: var(--red); }
+.note-foot.stopped { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--fs-sm); }
+.note-tag.mono { font-family: var(--mono); letter-spacing: 0; }
+.note-foot { margin-top: 8px; padding-left: 26px; }
+.note .composer-error { padding-left: 26px; }
+.composer-field { position: relative; }
+.composer-field textarea { padding-right: 40px; }
+.composer-tool { all: unset; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--text-3); cursor: pointer; transition: color 120ms ease-out, background-color 120ms ease-out; }
+.composer-tool:hover { color: var(--text); background: var(--hover); }
+.composer-tool:focus-visible { outline: 2px solid var(--text-3); }
+.composer-bar .ask svg.i { width: 12px; height: 12px; }
+.composer-bar .ask:first-child { margin-left: -6px; }
+.composer-hint { color: var(--text-3); font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.composer-hint kbd { height: 17px; }
+.composer-label { display: flex; align-items: center; gap: 10px; }
+.to-agent { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--raised); color: var(--text); font-size: var(--fs-xs); font-weight: 500; animation: pop 140ms var(--ease); }
+.to-agent .dot { width: 6px; height: 6px; border-radius: 2px; background: var(--green); }
+.mention-offer { position: absolute; left: 10px; top: 36px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); font-size: var(--fs-sm); animation: pop 140ms var(--ease); }
+.mention-offer b { font: 500 var(--fs-mono) var(--mono); letter-spacing: 0; }
+.mention-offer span { color: var(--text-3); font-size: var(--fs-xs); }
+.listening { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
+.listening.on { color: var(--text-2); } .listening.on .lamp { background: var(--green); }
+/* the footer under every page: whether your agent listens on the left (local reviews), the agent on the right */
+.foot .listening { font-size: var(--fs-xs); }
+.foot { position: relative; flex: none; display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 6px 0 12px; border-top: 1px solid var(--line); background: var(--bg); font-size: var(--fs-sm); }
+.foot .grow { flex: 1; }
+.agent-btn { all: unset; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: var(--fs-xs); color: var(--text-2); font-weight: 500; cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
+.agent-btn:hover, .agent-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
+.agent-btn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+.agent-btn svg.i { width: 12px; height: 12px; }
+.agent-btn.busy svg.i { color: var(--text); animation: pulse 700ms ease-in-out infinite alternate; }
+.agent-btn.new svg.i { color: var(--text); fill: currentColor; }
+.agent-btn.stopped svg.i { color: var(--red); }
+/* the chat opens up from the agent button */
+.chat { position: absolute; z-index: 30; right: 8px; bottom: calc(100% + 8px); width: min(400px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); transform-origin: bottom right; animation: pop 180ms var(--ease); }
+.chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
+.chat-head b { font-weight: 500; }
+.chat-where { color: var(--text-3); font-size: var(--fs-xs); }
+.chat-head .grow { flex: 1; }
+.chat.docked { position: static; width: 100%; height: auto; border-radius: 0; box-shadow: none; animation: none; }
+.chat-list { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
+.chat-empty { margin: auto 0; color: var(--text-3); text-align: center; text-wrap: pretty; line-height: var(--lh-text); padding: 0 12px; }
+.msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; min-width: 0; animation: rise 200ms var(--ease); }
+.msg.reviewer { align-self: flex-end; align-items: flex-end; }
+.msg.reviewer .msg-body { padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: var(--raised); }
+.msg .note-body { margin: 0; padding: 0; }
+.msg-from { color: var(--text-3); font-size: var(--fs-xs); }
+.msg-from.mono { font-family: var(--mono); letter-spacing: 0; }
+.msg.typing, .msg.stopped { flex-direction: row; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-sm); }
+.sailing { flex: none; overflow: hidden; border-radius: 3px; --water: var(--text-3); }
+.sailing .sea { fill: var(--water); }
+.sailing .sea.back { fill: color-mix(in srgb, var(--water) 45%, var(--card)); }
+.sailing .boat { fill: var(--text-2); transform-origin: 15px 14px; animation: ride 2.4s ease-in-out infinite; }
+.sailing .wave { animation: roll 3.2s linear infinite; }
+.sailing .wave.slow { animation-duration: 5.6s; }
+@keyframes roll { to { transform: translateX(-16px); } }
+@keyframes ride { 0%, 100% { transform: translateY(-1px) rotate(-5deg); } 50% { transform: translateY(1px) rotate(5deg); } }
+.msg.stopped { color: var(--red); display: block; }
+.chat-error { padding: 0 16px; }
+/* the input: the context it sends with (the page, a selection), the message, and send, in one box */
+.chat-box { margin: 0 10px 10px; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px transparent; cursor: text; transition: box-shadow 120ms ease-out; }
+.chat-box:focus-within { box-shadow: inset 0 0 0 1px var(--line-2); }
+.chat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 8px 0; min-width: 0; }
+.ctx-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--text-2); font-size: var(--fs-xs); cursor: default; animation: pop 140ms var(--ease); }
+.ctx-chip > span { min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctx-chip svg.i { width: 12px; height: 12px; flex: none; color: var(--text-3); }
+.ctx-chip button { all: unset; display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border-radius: 4px; color: var(--text-3); cursor: pointer; }
+.ctx-chip button:hover { background: var(--hover); color: var(--text); }
+.ctx-chip button svg.i { width: 10px; height: 10px; }
+.chip-hint { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.chip-hint kbd { height: 16px; min-width: 16px; font-size: 10px; background: var(--card); }
+.chat-box textarea { display: block; width: 100%; min-height: 38px; max-height: 200px; resize: none; padding: 8px 12px 2px; border: 0; background: transparent; color: var(--text); font: var(--fs-sm)/var(--lh-text) var(--sans); letter-spacing: var(--ls); outline: none; }
+.chat-box textarea::placeholder { color: var(--text-3); }
+.chat-box-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 6px 12px; }
+.chat-box .send { all: unset; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--btn); color: var(--btn-text); cursor: pointer; transition: opacity 120ms ease-out, transform 120ms ease-out; }
+.chat-box .send:disabled { opacity: .25; cursor: default; }
+.chat-box .send:not(:disabled):active { transform: scale(.94); }
+.chat-box .send:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
+.chat-box .send svg.i { width: 14px; height: 14px; stroke-width: 1.75; }
+.msg-body { max-width: 100%; min-width: 0; }
+.msg-quote { margin: 2px 0 8px; border-radius: var(--r); background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; text-align: left; }
+.msg-quote-head { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--text-3); font: var(--fs-xs) var(--mono); letter-spacing: 0; }
+.msg-quote-head svg.i { width: 12px; height: 12px; flex: none; }
+.msg-quote.comment .msg-quote-head { font-family: var(--sans); letter-spacing: var(--ls); }
+.msg-quote-body { padding: 7px 10px 8px; max-height: 9em; overflow: hidden; font-size: var(--fs-sm); -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
+.msg-quote-body .note-body { margin: 0; padding: 0; line-height: 1.5; }
+.msg-quote-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.msg-quote pre { margin: 0; padding: 7px 10px 8px; max-height: calc(5 * 1.6em + 15px); overflow: hidden; font: var(--fs-mono)/1.6 var(--mono); letter-spacing: 0; color: var(--text); white-space: pre-wrap; word-break: break-word; }
+.msg-quote pre.code { white-space: pre; }
+.msg-quote pre.long { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
+.rail .pr .update { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-3); line-height: 1.4; }
+.note-actions { margin-left: auto; display: flex; gap: 2px; }
+.note-head .refer { margin-left: auto; width: 22px; height: 22px; }
+.note-head .refer + .note-actions { margin-left: 0; }
+.note-head .refer svg.i { width: 13px; height: 13px; }
+.note-body { margin-top: 6px; padding-left: 26px; color: var(--text); line-height: var(--lh-text); overflow-wrap: anywhere; }
+.note-body p, .note-body ul, .note-body ol, .note-body blockquote, .note-body table, .note-body h1, .note-body h2, .note-body h3, .note-body h4 { margin: 0 0 8px; }
+.note-body > :last-child { margin-bottom: 0; }
+.note-body ul, .note-body ol { padding-left: 20px; }
+.note-body li { margin: 2px 0; }
+.note-body li > p { margin: 0; }
+.note-body li::marker { color: var(--text-3); }
+.note-body ul.contains-task-list { list-style: none; padding-left: 4px; }
+.note-body .task-list-item input { margin: 0 6px 0 0; vertical-align: -1px; }
+.note-body h1, .note-body h2, .note-body h3, .note-body h4 { font-size: var(--fs); font-weight: 500; }
+.note-body blockquote { padding-left: 10px; border-left: 2px solid var(--line-2); color: var(--text-2); }
+.note-body em { font-style: italic; }
+.note-body hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
+.note-body table { border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
+.note-body th, .note-body td { padding: 4px 10px; border: 1px solid var(--line-2); text-align: left; }
+.note-body th { font-weight: 500; background: var(--raised); }
+.note-body code { font: .9em var(--mono); letter-spacing: 0; padding: 1px 4px; border-radius: 4px; background: var(--raised); }
+.note-body b, .note-body strong { font-weight: 500; }
+.code-block { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r); background: var(--raised); font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; overflow-x: auto; }
+.suggestion { margin: 0 0 8px; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; }
+.suggestion-head { padding: 6px 12px; border-bottom: 1px solid var(--line); font: 500 var(--fs-sm) var(--sans); letter-spacing: var(--ls); color: var(--text-2); }
+.suggestion .dl { grid-template-columns: 28px minmax(0, 1fr); }
+.suggestion .ln { padding-right: 10px; }
+.suggestion .code { padding-left: calc(4ch + 6px); }
+.reply { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 14px 10px 40px; border-top: 1px solid var(--line); color: var(--text-3); cursor: text; transition: color 120ms ease-out; }
+.reply:hover { color: var(--text-2); }
+.reply:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
+.composer { padding: 12px 14px; }
+.note + .composer, .thread-top + .composer { border-top: 1px solid var(--line); }
+.composer-label { margin-bottom: 8px; color: var(--text-2); font-weight: 500; }
+.composer textarea { display: block; width: 100%; min-height: 64px; max-height: 360px; resize: none; padding: 9px 11px; border: 0; border-radius: var(--r); background: var(--raised); color: var(--text); font: var(--fs-sm)/var(--lh-text) var(--sans); letter-spacing: var(--ls); outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 120ms ease-out; }
+.composer textarea:focus { box-shadow: inset 0 0 0 1px var(--line-2); }
+.composer textarea::placeholder { color: var(--text-3); }
+.composer-error { margin-top: 8px; color: var(--red); }
+.composer-bar { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
+.composer-bar .grow { flex: 1; }
+.btn:disabled { opacity: 1; color: var(--text-3); cursor: default; }
+.btn.primary:disabled { background: var(--raised); color: var(--text-3); }
+.more { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 20px; color: var(--text-2); font: var(--fs-sm) var(--sans); cursor: pointer; background: transparent; border: 0; border-block: 1px solid var(--line); text-align: left; transition: color 140ms ease-out, background-color 140ms ease-out; }
+.more:first-child { border-top: 0; }
+.more:last-child { border-bottom: 0; }
+.more:hover { color: var(--text); background: var(--hover); }
+.tok-kw { color: var(--kw); } .tok-str { color: var(--str); } .tok-num { color: var(--num); } .tok-fn { color: var(--fn); } .tok-com { color: var(--com); font-style: italic; } .tok-ty { color: var(--ty); }
+
+/* finishing: the drafts, a summary, a verdict, and where they go */
+.field { display: block; width: 100%; min-height: 96px; resize: vertical; padding: 12px 14px; border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--text); font: var(--fs)/var(--lh-text) var(--sans); letter-spacing: var(--ls); outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 120ms ease-out; }
+.field:focus { box-shadow: inset 0 0 0 1px var(--line-2); }
+.field::placeholder { color: var(--text-3); }
+/* the pull request page: the PR and its checks, and a panel with what a merge needs */
+.prp-gates { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; max-width: 1120px; margin: 0 auto; padding: 48px 32px 80px; }
+.prp-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
+.prp-desc { padding: 16px 18px; }
+.prp-desc .note-body { margin: 0; padding: 0; }
+.prp-clamp { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
+.prp-desc .show-more { margin-top: 6px; }
+.prp-label { align-items: center; }
+.prp-label .btn { margin-left: auto; }
+.prp-label .btn svg.i { width: 12px; height: 12px; }
+.prp-dim { color: var(--text-3); font-size: var(--fs-sm); }
+.prp-st { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: var(--text-3); }
+.prp-st svg.i { width: 11px; height: 11px; stroke-width: 2; }
+.prp-st.pass { background: var(--green); } .prp-st.fail { background: var(--red); } .prp-st.warn { background: var(--amber); } .prp-st.merged { background: #8b5cf6; }
+.prp-st.pending { background: transparent; border: 2px solid var(--amber); border-right-color: transparent; animation: spin 900ms linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.prp-wf { border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
+.prp-wf + .prp-wf { margin-top: 8px; }
+.prp-wf-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; font-size: var(--fs-sm); transition: background-color 120ms ease-out; }
+.prp-wf-h:hover { background: var(--hover); }
+.prp-wf-h:focus-visible { outline: 2px solid var(--text-3); outline-offset: -2px; }
+.prp-wf-h b { font-weight: 500; }
+.prp-wf-h .chev { display: flex; color: var(--text-3); transition: transform 180ms var(--ease); }
+.prp-wf-h[aria-expanded="true"] .chev { transform: rotate(90deg); }
+.prp-jobs { border-top: 1px solid var(--line); padding: 4px 0; animation: fade 160ms ease-out; }
+.prp-job .grow, .prp-wf-h .grow { flex: 1; min-width: 0; }
+.prp-job { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 44px; font-size: var(--fs-sm); }
+.prp-job .prp-st { width: 14px; height: 14px; } .prp-job .prp-st svg.i { width: 9px; height: 9px; }
+.prp-panel { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--card); }
+.prp-panel h2 { margin: 0; font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--ls-lg); }
+.prp-panel hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--line); }
+.prp-gate { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
+.prp-gate .prp-st { margin-top: 1px; }
+.prp-gate b { display: block; font-weight: 500; }
+.prp-gate span span { display: block; color: var(--text-3); font-size: var(--fs-xs); }
+.prp-acts { display: flex; flex-direction: column; gap: 10px; }
+.prp-acts .prp-methods { grid-template-columns: repeat(3, 1fr); }
+.prp-confirm { display: flex; gap: 8px; } .prp-confirm .btn { flex: 1; justify-content: center; }
+.prp-acts > .btn { justify-content: center; }
+.skel { display: block; border-radius: 5px; background: linear-gradient(90deg, var(--raised) 30%, color-mix(in srgb, var(--raised) 55%, var(--card)) 50%, var(--raised) 70%) 0 0 / 300% 100%; animation: sheen 1.4s ease-in-out infinite; }
+.skel-stack { display: flex; flex-direction: column; gap: 10px; }
+.skel-row { display: flex; align-items: center; gap: 12px; padding: 14px; }
+.skel-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; }
+@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
+/* Finish on a PR: the comments, then a panel that stays in view */
+.fin { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; max-width: 1120px; margin: 0 auto; padding: 48px 32px 80px; }
+.fin-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.fin-main > .title { margin-bottom: 12px; }
+.fin-file { border-radius: var(--r-lg); background: var(--card); overflow: hidden; }
+.fin-fh { display: flex; gap: 8px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
+.fin-fh b { font-weight: 500; } .fin-fh span { color: var(--text-3); }
+.fin-c { padding: 12px 14px; }
+.fin-c + .fin-c { border-top: 1px solid var(--line); }
+.fin-c.posted { opacity: .7; }
+.fin-c .note-body { margin: 0; padding: 0; }
+.fin-c .composer { padding: 0; }
+.fin-snip { margin-bottom: 10px; padding: 6px 0; border-radius: var(--r); background: var(--raised); font: var(--fs-mono)/var(--lh-code) var(--mono); letter-spacing: 0; overflow: hidden; }
+.fin-snip > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
+.fin-snip .n { text-align: right; padding-right: 10px; color: var(--text-3); user-select: none; }
+.fin-snip .s { white-space: pre; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
+.fin-snip .a { background: var(--add); } .fin-snip .d { background: var(--del); }
+.fin-bar { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
+.fin-tags { flex: 1; display: flex; gap: 6px; }
+.fin-panel { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: var(--r-lg); background: var(--card); }
+.fin-panel h2 { margin: 0; font-size: var(--fs-lg); font-weight: 500; letter-spacing: var(--ls-lg); }
+.fin-panel .field { min-height: 96px; resize: none; border-radius: var(--r); background: var(--raised); }
+.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.meter > div:first-child { color: var(--text-2); font-size: var(--fs-sm); }
+.meter .track { display: flex; gap: 3px; margin-top: 6px; }
+.meter .track i { flex: 1; height: 4px; border-radius: 2px; background: var(--raised); }
+.meter .track i.on { background: var(--green); }
+.vswitch { display: grid; grid-template-columns: auto auto 1fr; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--raised); }
+.vswitch button { all: unset; display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; border-radius: calc(var(--r) - 3px); font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: background-color 140ms ease-out, color 140ms ease-out; }
+.vswitch button:hover { color: var(--text); }
+.vswitch button[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+.vswitch button:focus-visible { outline: 2px solid var(--text-3); outline-offset: 1px; }
+.fin-actions { display: flex; gap: 8px; }
+.fin-ask .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.fin-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fin-a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: var(--fs-xs); }
+.fin-actions .btn { flex: 1; justify-content: center; }
+.btn .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--btn-text) 18%, transparent); font-size: var(--fs-xs); }
+.post { display: flex; flex-direction: column; gap: 16px; }
+.post b { font-weight: 500; color: var(--text); }
+.post-skip { color: var(--text-3); }
+.post-error { color: var(--red); }
+.changes .cta { margin-top: 8px; }