@oharness/server 0.7.1 → 0.8.0

package/dist/page/style.js

@@ -0,0 +1,2793 @@
+import { THEME_CSS } from "../theme.js";
+// The palette lives in theme.ts; everything below reads it through var().
+export const STYLE = String.raw `
+${THEME_CSS}
+*{box-sizing:border-box}
+/* The hidden attribute works through the browser's own display:none, which is
+   a bare element rule any class with a display beats — so .hidden = true left
+   the node on screen wherever one had been set. It was guarded per class for a
+   while, which meant every new flex box was one forgotten line away from the
+   same bug, and the sign-in dialog had already found it twice: the account
+   column and the website button both painted for the vendors they are not for.
+   Once, here, rather than as a rule to remember. */
+[hidden]{display:none!important}
+/* The native scrollbar draws a filled track with a hairline down its edge,
+   which reads as a frame boxing in whatever is scrolling. Ours is a thumb on
+   nothing: transparent track, and the inset comes from a transparent border
+   so the thumb keeps its full rounded shape. */
+::-webkit-scrollbar{width:11px;height:11px}
+::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
+::-webkit-scrollbar-thumb{
+  background:var(--track);background-clip:content-box;
+  border:3px solid transparent;border-radius:8px;
+}
+::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box}
+html,body{height:100%}
+body{
+  margin:0;background:var(--bg);color:var(--fg);display:flex;height:100dvh;overflow:hidden;
+  font:15px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
+  -webkit-font-smoothing:antialiased;
+}
+code,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
+
+/* sidebar */
+aside{
+  width:236px;flex:0 0 236px;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;
+}
+aside header{padding:15px 14px 8px;display:flex;gap:8px;align-items:center}
+/* The desktop shell hides the title bar, so on macOS the traffic lights float
+ * over this corner. The wordmark moves below them, and the strip they sit in
+ * becomes the window's drag handle — without it a title-bar-less window has
+ * nothing to grab. */
+body.inset-titlebar aside header{padding-top:38px;-webkit-app-region:drag}
+.mark{width:18px;height:18px;color:var(--fg);opacity:.85;flex:0 0 auto}
+.mark svg{width:18px;height:18px;display:block}
+/* Slightly tightened and a touch heavier than body text, which is what makes
+ * a wordmark read as a name rather than as a heading. */
+.wordmark{font-size:14px;font-weight:650;letter-spacing:-.02em}
+.project{
+  display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:0 8px 6px;
+  padding:6px 8px;border:0;border-radius:8px;background:transparent;color:var(--fg);
+  font:inherit;font-size:13px;cursor:pointer;text-align:left;
+}
+.project:hover{background:var(--hover)}
+.avatar{
+  width:18px;height:18px;border-radius:5px;background:var(--accent);color:var(--bg);
+  font-size:10px;font-weight:650;display:grid;place-items:center;flex:0 0 auto;
+}
+.project-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.project .chev{opacity:.45}
+/* Held apart from the nav above it: those five rows are the app's furniture
+   and everything below is the work, and with four pixels between them the
+   first project read as a sixth nav item. */
+#sessions{flex:1;overflow-y:auto;padding:4px 8px 8px;margin-top:10px}
+/*
+ * A project heads its sessions as a row like any other, not as a fold with a
+ * disclosure arrow: a folder is already the thing that opens, so the arrow was
+ * a second control saying what the icon and the rows underneath it say.
+ */
+.fold{
+  display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 8px;
+  border:0;border-radius:7px;background:transparent;color:var(--fg);
+  font:inherit;font-size:13px;cursor:pointer;text-align:left;
+}
+.fold:hover{background:var(--hover)}
+/* An open project keeps its folder lit — with the arrow gone, that and the
+ * rows underneath are what say it is open. */
+.fold .ico-sm{width:16px;height:16px;flex:0 0 auto;opacity:.5}
+.fold.open .ico-sm,.fold:hover .ico-sm{opacity:.9}
+.fold-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* The routine group's run count, where a project header keeps its actions. */
+.fold .count{flex:0 0 auto;font-size:11px;color:var(--dim);padding-right:4px}
+/* A gap between projects, but not above the first one. The selector names the
+   row rather than the button since the header grew a menu control beside it. */
+.fold-row + .fold-row,.session + .fold-row,.show-more + .fold-row{margin-top:6px}
+/* Nested rows line up with the project's name, not with its folder. */
+.session.nested{padding-left:32px}
+/* The pin, on the row it holds up. Beside the name rather than out at the
+   edge, where the count and the ⋯ already live and a third thing would crowd
+   them; dim, because it marks a row rather than asking for attention. */
+.pin-mark{
+  width:11px;height:11px;flex:0 0 auto;margin-left:5px;opacity:.5;
+  vertical-align:-1px;display:inline-block;
+}
+/* Dragging: the row being carried fades, and the one under the pointer grows
+   the edge it would be dropped against. A line on the row rather than a
+   floating element, because this list is rebuilt on every repaint and a
+   separate indicator would have to be hunted down and removed each time. */
+.session.dragging,.fold-row.dragging{opacity:.4}
+.session.drop-before,.fold-row.drop-before{box-shadow:inset 0 2px 0 -1px var(--accent)}
+.session.drop-after,.fold-row.drop-after{box-shadow:inset 0 -2px 0 -1px var(--accent)}
+/*
+ * The tail of a long project, one click away. A project the user is living in
+ * can hold dozens of sessions, and the sidebar is also how every *other*
+ * project is reached — so each one shows its recent handful and says so.
+ */
+.show-more{
+  height:26px;padding:0 8px;border:0;border-radius:7px;background:transparent;
+  color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+  display:flex;align-items:center;width:100%;
+}
+.show-more.nested{padding-left:32px}
+.show-more:hover{background:var(--hover);color:var(--fg)}
+/*
+ * One line, not two. The previous version reserved a second row for metadata
+ * and then hid it with opacity, so every entry stood twice as tall as the text
+ * it showed and the list read as broken spacing.
+ */
+.session{
+  height:30px;padding:0 8px;border-radius:7px;cursor:pointer;
+  display:flex;align-items:center;gap:8px;
+}
+.session:hover{background:var(--hover)}
+.session.active{background:var(--sel)}
+.session .title{
+  flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.session .sub{font-size:11px;color:var(--dim);flex:0 0 auto}
+/*
+ * The overflow button takes the metadata's place on hover rather than sitting
+ * beside it: the row is one line and already full. It stays visible while its
+ * menu is open, so the row does not appear to lose the control the menu
+ * belongs to when the pointer moves down onto it.
+ */
+.session:hover .sub,.session.menu-open .sub{display:none}
+.session .more{
+  display:none;width:20px;height:20px;border:0;border-radius:5px;background:transparent;
+  color:var(--dim);cursor:pointer;padding:0;place-items:center;flex:0 0 auto;
+}
+.session:hover .more,.session.menu-open .more{display:grid}
+.session .more:hover,.session.menu-open .more{background:var(--sel);color:var(--fg)}
+.session .more .ico-sm{width:14px;height:14px;opacity:1}
+/*
+ * Anchored in viewport coordinates, not inside the row: the list scrolls and
+ * clips, so a menu positioned within it would be cut off at the edges.
+ */
+.row-menu{
+  position:fixed;z-index:60;min-width:172px;max-width:228px;padding:5px;border-radius:10px;
+  background:var(--bg);box-shadow:0 1px 2px #0000000f,0 8px 28px #00000024;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+:root[data-theme="dark"] .row-menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
+/* The account menu is as wide as the account row it opens from, edge to edge.
+   Sized for a session row's three commands, it came out a third narrower than
+   the row under it, so the two read as unrelated boxes; the width is set on
+   open from the row itself, and this lifts the caps that would clamp it. */
+.row-menu.fit-anchor{min-width:0;max-width:none}
+.row-menu.account-menu{
+  padding:10px;max-height:calc(100vh - 24px);overflow-y:auto;
+}
+/*
+ * Destructive is carried by the label's colour, not by a filled red bar. A
+ * solid block reads as an alert that has already happened rather than as a
+ * choice, and it fights every other menu on the page for attention.
+ */
+.row-menu .danger{color:var(--err)}
+.row-menu .danger:hover,.row-menu .danger.armed{background:var(--hover)}
+/* What the next click actually does, above the button that does it. */
+.row-menu .menu-note{
+  padding:4px 8px 8px;font-size:11.5px;line-height:1.45;color:var(--dim);
+}
+/* The account's own two facts, on a surface of their own. A fill separates
+   them from the things to click without drawing a line to do it — the menu
+   already had two rules in it and a third would have made a list of five
+   entries look like three lists. */
+.row-menu .menu-head{
+  padding:9px 10px;margin-bottom:4px;border-radius:8px;background:var(--field);
+}
+/* A section label, not a surface: the fill belongs to the account's facts
+   above, and on a one-word caption it read as a second card pressed against
+   Dashboard. Space above it does the separating instead. */
+.row-menu .menu-head.menu-section{
+  margin:10px 0 2px;padding:4px 10px;background:transparent;
+}
+.menu-head-main{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
+.menu-head-sub{margin-top:2px;font-size:12px;color:var(--dim)}
+/* The billing card borrows .menu-head's surface but not its caption type: the
+   uppercase and tracking belong to section labels, and on a balance and a
+   plan name they turned two facts into one shouted line. */
+.row-menu .menu-head.account-card{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px}
+.menu-head-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.menu-head-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
+.plan-pill{
+  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;max-width:60%;
+  padding:2px 8px;border-radius:999px;background:var(--field);color:var(--dim);
+  font-size:11.5px;font-weight:500;white-space:nowrap;
+}
+.plan-pill-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:currentColor;opacity:.7}
+.plan-pill-name{overflow:hidden;text-overflow:ellipsis}
+.plan-pill-status{font-weight:400;opacity:.8}
+/* Live is the brand's lime, the colour the app gives to things that are on. */
+.plan-pill.ok{background:var(--brand-tint);color:var(--brand-ink)}
+.plan-pill.ok .plan-pill-dot{background:var(--brand);opacity:1}
+.plan-pill.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
+.plan-pill.warn .plan-pill-dot{opacity:1}
+.menu-head-amount{display:flex;align-items:baseline;gap:5px;margin-top:6px}
+.menu-head-num{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--fg);font-variant-numeric:tabular-nums}
+.menu-head-unit{font-size:12px;color:var(--dim)}
+.menu-billing-actions{display:flex;gap:7px;margin-top:10px}
+.menu-billing-action{
+  flex:1;min-height:30px;padding:6px 10px;border:0;border-radius:7px;
+  background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);
+  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
+}
+.menu-billing-action:hover{background:var(--hover)}
+.menu-billing-action.primary{background:var(--accent);color:var(--bg);box-shadow:none}
+.menu-billing-action.primary:hover{opacity:.88}
+.menu-billing-action:disabled{cursor:not-allowed;opacity:.45}
+/* One entry carrying the accent, for the one that is an offer rather than a
+   destination. var(--field) was too close to the menu's own surface to read as
+   anything in the light theme — a highlight nobody can see is worse than none,
+   because it costs the layout and returns nothing. */
+.menu-item.accent{background:var(--accent);color:var(--bg)}
+.menu-item.accent:hover{background:var(--accent);opacity:.88}
+/* The theme row: a label and three targets, laid out like a settings line
+   rather than a command. */
+.menu-theme{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;
+  padding:4px 8px;min-height:32px;
+}
+.theme-group{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--field)}
+.theme-btn{
+  display:grid;place-items:center;width:26px;height:22px;border:0;border-radius:6px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;
+}
+.theme-btn:hover{color:var(--fg)}
+.theme-btn[aria-pressed="true"]{background:var(--bg);color:var(--fg)}
+.theme-btn .ico-sm{width:14px;height:14px}
+/* The letter that does the same thing without the mouse. Dim, right-aligned,
+   and only ever one character — a menu whose right edge is a column of chords
+   is a keyboard reference, not a menu. */
+.row-menu .menu-key{
+  margin-left:auto;font:inherit;font-size:11px;color:var(--dim);opacity:.75;
+  flex:0 0 auto;padding-left:12px;
+}
+.row-menu .danger .menu-key{color:var(--dim)}
+/* A rule, not a gap: the group below it is the one that cannot be undone. */
+.row-menu .menu-sep{height:1px;margin:5px 8px;background:var(--line)}
+/* Sized from the title it stands in for, so the row does not jump when a
+   rename starts. */
+.session .title-edit{
+  width:100%;border:0;border-radius:5px;padding:0;margin:0;
+  background:var(--field-focus);color:var(--fg);font:inherit;font-size:inherit;
+}
+.session .title-edit:focus{outline:none}
+#nav{padding:2px 8px 4px;display:flex;flex-direction:column;gap:1px}
+.nav-item{
+  height:30px;padding:0 8px;border-radius:7px;border:0;background:transparent;color:var(--fg);
+  font:inherit;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:9px;text-align:left;
+}
+.nav-item:hover{background:var(--hover)}
+.nav-item.active{background:var(--sel)}
+/*
+ * Drawn, not typed. Unicode glyphs come from whatever font happens to have
+ * them, so ◇ ◷ ⚙ arrive at three different stroke weights and optical sizes —
+ * which is exactly what the row of them looked like.
+ */
+.nav-item .ico{width:16px;height:16px;flex:0 0 auto}
+.nav-item .count{margin-left:auto;font-size:11px;color:var(--dim)}
+
+/* main */
+main{flex:1;display:flex;flex-direction:column;min-width:0}
+/*
+ * The top bar takes no room until it has something to say.
+ *
+ * On a wide screen the burger is hidden, the changes button appears only once
+ * a file has been touched, and the context meter only once the window is worth
+ * watching — so this spent most of its life as forty pixels of nothing between
+ * the window edge and the conversation. The padding is what carried that
+ * height, so the padding is what goes.
+ */
+#top{padding:0 18px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+#top:has(#changes-btn:not([hidden])){padding:10px 18px}
+
+/*
+ * A built element, not a styled <select>.
+ *
+ * A native select renders its popup and its focus ring with the platform's
+ * own chrome — on macOS that is the blue rounded rectangle in the screenshot,
+ * and no amount of appearance:none reaches it. Owning the markup is the
+ * only way the control matches the rest of the page.
+ */
+.picker{position:relative}
+.picker-btn{
+  height:26px;max-width:220px;padding:0 5px 0 8px;border:0;border-radius:7px;
+  background:transparent;color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;
+  display:flex;align-items:center;gap:2px;
+}
+.picker-btn:hover{background:var(--hover)}
+.picker.open .picker-btn{background:var(--hover)}
+/*
+ * A drawn chevron, sized to the label. The Unicode ⌄ comes from whatever font
+ * has it, so it landed at a different weight from the SVG icons beside it and
+ * sat slightly off the text baseline.
+ */
+.caret{width:13px;height:13px;flex:0 0 auto}
+/* A discovered id like google/gemini-3.6-flash:batch would otherwise take the
+ * whole bar and push the send button off the end. */
+.picker-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.menu{
+  position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;
+  min-width:280px;max-width:min(440px,84vw);
+  background:var(--bg);border-radius:12px;padding:6px;
+  box-shadow:0 1px 2px #0000000f,0 8px 28px #00000024;
+  display:flex;flex-direction:column;
+}
+.menu-search{padding:3px 3px 5px}
+.menu-search input{
+  width:100%;height:30px;border:0;border-radius:8px;background:var(--field);color:var(--fg);
+  padding:0 10px;font:inherit;font-size:12.5px;
+}
+.menu-search input:focus{outline:none;background:var(--field-focus)}
+/* Eighty-one skills with no way to narrow them is a list nobody reads to the
+   end. Matches the name and the description both, because the name is terse
+   and chosen by whoever wrote the skill. */
+/* Quiet: it is a provenance note on a row whose subject is the name. */
+.mk-tag{
+  margin-left:7px;padding:1px 5px;border-radius:4px;vertical-align:1px;
+  background:var(--sel);color:var(--dim);font-size:10px;font-weight:500;
+  letter-spacing:.02em;text-transform:uppercase;
+}
+.mk-search{
+  width:100%;height:32px;margin:10px 0 2px;border:0;border-radius:8px;
+  background:var(--field);color:var(--fg);padding:0 11px;font:inherit;font-size:13px;
+}
+.mk-search:focus{outline:none;background:var(--field-focus)}
+.menu-body{overflow-y:auto;max-height:min(46vh,340px)}
+.menu-footer{padding:5px 3px 3px;box-shadow:0 -1px 0 var(--line)}
+.menu-item.cursor{background:var(--hover)}
+.menu-empty{padding:10px 8px;font-size:12.5px;color:var(--dim)}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}}
+:root[data-theme="dark"] .menu{box-shadow:0 1px 2px #0000004d,0 8px 28px #00000080}
+.menu-item{
+  display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:7px 8px;border:0;
+  border-radius:7px;background:transparent;color:var(--fg);font:inherit;font-size:13px;
+  cursor:pointer;text-align:left;
+}
+.menu-item:hover{background:var(--hover)}
+.menu-item .tick{width:12px;opacity:0;flex:0 0 auto}
+.menu-item.on .tick{opacity:1}
+.menu-item .menu-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.menu-item .sub{margin-left:auto;font-size:11px;color:var(--dim);flex:0 0 auto}
+/* The vendor's mark, on every row of the model menu and on the bar itself.
+ *
+ * A picker holding four hundred models across two dozen vendors is read by
+ * shape before it is read by name: half the ids in it are the vendor's name
+ * repeated, and the rest are strings like gemini-3.6-flash:batch that say
+ * nothing about who answers them. The mark is what makes the list scannable,
+ * and on the composer it is what tells someone, without reading, that the
+ * session is pointed at the official plan rather than at a key of their own.
+ *
+ * Same two shapes as the connector list: the vendor's own icon when the
+ * server has one, and a lettered tile when it does not. Sized to the row —
+ * the type is 13px, so the mark is 15px and not the 28px tile a card gets. */
+/* One block per vendor, whatever the vendor ships.
+ *
+ * A column of these is scanned by its left edge, and the edge has to be the
+ * same one every time. Left alone, it is not: a vendor shipping a tile fills
+ * its square, a vendor shipping bare ink covers half of it, and one shipping
+ * a thin outline covers less than that — the eye finds no common edge and
+ * reads the lighter rows as hanging off the line, even where the boxes are
+ * centred on the text to the pixel.
+ *
+ * So a mark that did not bring a background is given one: the same faint
+ * fill, the same radius, the same inset. A mark that did bring one keeps it
+ * and fills the box, because drawing a second shape around a shape is the
+ * thing this is trying to avoid. Either way the block is identical and the
+ * ink inside it is the vendor's business. */
+.vmark{width:15px;height:15px;flex:0 0 auto;border-radius:4px;object-fit:contain;
+  padding:1.5px;box-sizing:border-box;background:var(--sel)}
+.vmark.filled{padding:0;background:none}
+/* The fallback, and the reason a missing icon is not a broken row: a lettered
+   tile in a colour of its own still tells two vendors apart at a glance. */
+.vmono{
+  width:15px;height:15px;flex:0 0 auto;border-radius:4px;box-sizing:border-box;
+  display:grid;place-items:center;color:#fff;
+  font-size:9px;font-weight:600;letter-spacing:0;text-transform:uppercase;
+}
+/* Our own glyph is drawn rather than fetched: the official plan is the one
+   row that must have a mark on a machine that has never been online. */
+/* Typed as svg.vglyph so it outranks the .ico-sm every drawn icon carries:
+   .6 is right for a chrome glyph and too faint for a vendor's mark. Ours is
+   bare strokes, so it takes the same block as any other bare mark. */
+svg.vglyph{width:15px;height:15px;opacity:1;
+  padding:1.5px;box-sizing:border-box;border-radius:4px;background:var(--sel)}
+/* Black-on-transparent is what a good half of these vendors ship, and in the
+   dark theme that is a black square on a black row. Inverted only where the
+   bytes were measured to be exactly that. */
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vmark.invert-dark{filter:invert(1)}}
+:root[data-theme="dark"] .vmark.invert-dark{filter:invert(1)}
+/* Smaller in the group header, which is 10.5px uppercase, and given the gap
+   the composer bar's 2px does not provide. */
+.menu-group .vmark,.menu-group .vmono,.menu-group .vglyph{width:13px;height:13px;font-size:8px}
+.picker-btn .vmark,.picker-btn .vmono,.picker-btn .vglyph{width:14px;height:14px;margin-right:5px}
+/* The mode's glyph: a bare stroke, so it takes the row's icon weight and, on
+   the bar, the vendor mark's size and gap so the two pickers line up. */
+.menu-item .mode-mark{opacity:.7}
+.menu-item.on .mode-mark,.menu-item.cursor .mode-mark{opacity:1}
+.picker-btn .mode-mark{width:14px;height:14px;margin-right:5px;opacity:.85}
+/* On a card the row is a title over a line of description, so the mark is
+   sized against the block rather than against the type, and sits on the
+   title's line instead of floating in the middle of the two. */
+/* Centred on the naming block, not on the first line of it. A 20px tile
+ * beside a title over a description is read as the row's own mark, and a
+ * mark that sits on the title alone leaves the row bottom-heavy — the same
+ * complaint as the margin above, one level in. */
+details.provider>summary .vmark,details.provider>summary .vmono,details.provider>summary .vglyph,
+.pp-item .vmark,.pp-item .vmono,.pp-item .vglyph{
+  width:20px;height:20px;border-radius:5px;font-size:11px;
+}
+details.provider>summary .vmark,.pp-item .vmark,
+details.provider>summary .vglyph,.pp-item .vglyph{padding:2.5px}
+details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
+.menu-head{
+  padding:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;
+  text-transform:uppercase;color:var(--dim);
+}
+.menu-head:first-child{padding-top:4px}
+.menu-group{
+  display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;
+  font:inherit;font-size:10.5px;color:var(--dim);padding:7px 8px 5px;cursor:pointer;
+  letter-spacing:.04em;text-transform:uppercase;text-align:left;
+}
+.menu-group:hover{color:var(--fg)}
+.menu-group .chev{
+  width:0;height:0;flex:0 0 auto;
+  border-left:4px solid currentColor;border-top:3px solid transparent;
+  border-bottom:3px solid transparent;opacity:.6;transition:transform .15s;
+}
+.menu-group.open .chev{transform:rotate(90deg)}
+.menu-group .g-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
+.menu-group .g-count{opacity:.7;letter-spacing:0}
+/* Marks one vendor out of a list of two dozen, so it reads at a glance
+   without shouting: the accent is the page's own, not a colour of its own. */
+.menu-group .g-tag{
+  font-size:9.5px;letter-spacing:0;text-transform:none;padding:1px 5px;
+  border-radius:4px;background:var(--accent);color:var(--bg);opacity:.85;
+}
+/* The geometry .mk-tag established, which is what a badge looks like here.
+   Quieter than the accent a group header wears: a vendor is marked once at the
+   top of its list, while this can repeat down twenty rows, and twenty accent
+   pills is a column of noise. The two selected states have to move it off
+   var(--sel) — that is what the row under the cursor is painted with, and a
+   pill the same colour as the row it sits on is not a pill. */
+.menu-item .m-tag{
+  flex:0 0 auto;padding:1px 5px;border-radius:4px;background:var(--sel);
+  color:var(--dim);font-size:10px;font-weight:500;letter-spacing:.02em;
+  text-transform:uppercase;
+}
+.menu-item:hover .m-tag,.menu-item.cursor .m-tag{background:var(--field)}
+.menu-more{
+  width:100%;padding:8px;border:0;border-radius:7px;background:transparent;
+  color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+  display:flex;align-items:center;gap:8px;
+}
+.menu-more:hover{background:var(--sel)}
+.ico-sm{width:15px;height:15px;flex:0 0 auto;opacity:.6}
+.menu-more:hover .ico-sm{opacity:.9}
+/*
+ * The running total, on its own line under the composer.
+ *
+ * Right-aligned and 11.5px: it is read when someone looks for it and ignored
+ * the rest of the time, so it sits at the end of the line the send button
+ * ends, a step quieter than the model name above it. The row keeps its height
+ * whether or not there is anything in it — a session that costs its first
+ * cent should not push the composer up a line while someone is typing in it.
+ */
+#meta{
+  max-width:720px;margin:0 auto;padding:7px 6px 0;min-height:17px;
+  color:var(--dim);font-size:11.5px;display:flex;gap:6px 10px;align-items:center;
+  justify-content:flex-end;flex-wrap:wrap;
+}
+/*
+ * The context meter: how much of the model's window this session is using.
+ *
+ * Its own track colour rather than --line. Every other neutral token here is a
+ * hairline at 6-10% alpha, which at 64x4 pixels disappears into the background
+ * in both schemes — what was left read as a stray green dash rather than a bar
+ * with something still to fill. The fill itself is set from the value (green,
+ * then warn, then err) in applyState.
+ */
+#ctx{width:64px;height:4px;background:var(--track);border-radius:2px;overflow:hidden}
+#ctx i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
+#ctx,#ctxtext{display:none}
+#meta.has-ctx #ctx,#meta.has-ctx #ctxtext{display:block}
+
+/*
+ * Over the transcript, not over the whole window.
+ *
+ * Tabs are sessions; the drawer beside them shows one artifact whichever tab
+ * is in front. Spanning both left a band of empty chrome above the drawer that
+ * belonged to neither.
+ *
+ * The strip is the shelf the tabs stand on, in the sidebar's grey, and the
+ * front tab is cut from the page under it — the shape every browser uses.
+ * It used to be the other way round: a transparent strip on the white
+ * transcript with the front tab as a grey pill, so the row read as part of
+ * the conversation rather than as the chrome above it. No bottom padding,
+ * or a grey line would sit between the front tab and the page it is part of.
+ */
+#tabs{
+  display:flex;align-items:center;gap:2px;padding:6px 12px 0;overflow-x:auto;flex:0 0 auto;
+  background:var(--panel);
+}
+#tabs:empty{display:none}
+.tab{
+  display:flex;align-items:center;gap:7px;max-width:230px;height:30px;padding:0 6px 0 10px;
+  border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--dim);
+  font:inherit;font-size:12.5px;cursor:pointer;flex:0 0 auto;
+}
+.tab:hover{background:var(--hover);color:var(--fg)}
+.tab.on{background:var(--bg);color:var(--fg)}
+.tab .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Which project a tab is in, ahead of its title. Set quieter than the title,
+   which is still what identifies it. */
+.tab .where{
+  max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-size:11px;opacity:.6;flex:0 0 auto;
+}
+.tab .where::after{content:"/";padding-left:5px;opacity:.5}
+.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
+.tab .x{
+  width:18px;height:18px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;
+  display:grid;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
+}
+/* The tab's browser button's size. Much smaller and the 1.5px strokes thin
+   below a pixel and blur; the full 16px outweighs the tab's own text. */
+.tab .x svg{width:14px;height:14px}
+.tab:hover .x,.tab.on .x{opacity:.55}
+.tab .x:hover{opacity:1;background:var(--sel)}
+.tab-browser{
+  position:relative;width:22px;height:22px;padding:0;border:0;border-radius:6px;
+  display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer;
+  opacity:0;flex:0 0 auto;
+}
+.tab:hover .tab-browser,.tab.on .tab-browser,.tab-browser.running{opacity:.62}
+.tab-browser:hover,.tab-browser.on{opacity:1;background:var(--sel)}
+.tab-browser svg{width:14px;height:14px}
+.tab-browser i{display:none;position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 1.5px var(--panel)}
+.tab.on .tab-browser i{box-shadow:0 0 0 1.5px var(--bg)}
+.tab-browser.running i{display:block}
+#tab-add{
+  width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
+}
+#tab-add svg{width:14px;height:14px}
+#tab-add:hover{background:var(--hover);color:var(--fg)}
+#split{flex:1;display:flex;min-height:0}
+/*
+ * The transcript, the jump button and the composer, as one column.
+ *
+ * They used to be siblings of #split, which meant the drawers beside it
+ * stopped at the composer's top edge instead of running to the bottom of the
+ * window — a rendered artifact sat in a box with a dead strip under it.
+ * "position:relative" is what #jump anchors to; it belongs over this column
+ * rather than over the drawer.
+ */
+#main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
+#log{flex:1;overflow-y:auto;padding:20px 16px;scroll-behavior:smooth;min-width:0}
+/*
+ * Models, Routines and Settings are views, not messages. They used to be
+ * painted into the transcript, which wiped the conversation behind them and
+ * left the composer sitting under a settings page inviting a reply to nobody.
+ * They get their own pane, and the composer goes away while it is up.
+ */
+#panel-view{flex:1;overflow-y:auto;padding:28px 24px 24px;min-width:0}
+/*
+ * The browser pane.
+ *
+ * Shaped like #review, because it is the same thing: a column that slides in
+ * beside the transcript. Collapsing to zero width rather than display:none is
+ * what gives it the transition, and what keeps the image element alive so the
+ * stream is not torn down and restarted on every toggle.
+ *
+ * No outlines anywhere. The pane is a filled surface, and the takeover button
+ * says it is armed by filling with the accent — the same way the sidebar marks
+ * its active row. A ring would be the only ring in the app.
+ */
+#browser-pane{
+  width:0;flex:0 0 0;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;position:relative;transition:flex-basis .18s,width .18s;
+}
+#browser-pane.open{
+  width:var(--browser-pane-width,min(46vw,720px));
+  flex:0 0 var(--browser-pane-width,min(46vw,720px));
+  /* Clipped rather than hidden, with a margin, so the resize handle can reach
+     past the pane's edge into the transcript. */
+  overflow:clip;overflow-clip-margin:6px;
+}
+/* 15px to aim at, straddling the boundary: 6px over the transcript's edge and
+   the 9px gutter the native page leaves free. Only the gutter is visible, and
+   the pill sits in its middle. */
+#browser-resizer{
+  position:absolute;z-index:4;left:-6px;top:0;bottom:0;width:15px;cursor:col-resize;outline:0;
+}
+#browser-resizer::before{
+  content:"";position:absolute;left:9px;top:50%;width:3px;height:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateY(-50%) scaleY(.65);
+  transition:opacity .12s,transform .16s;
+}
+#browser-resizer:hover::before,#browser-resizer:focus-visible::before,body.browser-resizing #browser-resizer::before{
+  opacity:.55;transform:translateY(-50%) scaleY(1);
+}
+body.browser-resizing{user-select:none;cursor:col-resize}
+body.browser-resizing #browser-pane{transition:none}
+#browser-head{
+  min-height:78px;padding:9px 10px 9px 14px;display:grid;
+  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:32px 24px;
+  align-items:start;column-gap:10px;row-gap:4px;font-size:12px;flex:0 0 auto;
+}
+#browser-mark{
+  width:24px;height:32px;display:grid;place-items:center;flex:0 0 auto;
+  color:var(--dim);background:transparent;box-shadow:none;
+}
+#browser-mark svg{width:17px;height:17px}
+#browser-context{display:contents}
+#browser-name-line,#browser-meta{display:flex;align-items:center;min-width:0}
+#browser-name-line{grid-column:1;grid-row:1;gap:7px;height:32px;line-height:32px}
+#browser-title{font-weight:600;font-size:12.5px}
+#browser-status{
+  display:inline-flex;align-items:center;gap:4px;color:var(--dim);font-size:10.5px;
+  padding:1px 6px;border-radius:999px;background:var(--field);line-height:16px;
+}
+#browser-status[hidden]{display:none}
+#browser-status i{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 14%,transparent)}
+#browser-meta{grid-column:1/-1;grid-row:2;gap:5px;color:var(--dim);font-size:10.5px;line-height:20px}
+#browser-where{
+  flex:1;min-width:0;height:24px;padding:2px 8px;border:0;border-radius:6px;
+  outline:0;background:var(--field);color:var(--dim);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+  font-size:10.5px;text-overflow:ellipsis;
+}
+#browser-where:hover{background:var(--hover)}
+#browser-where:focus{background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
+#browser-hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#browser-hint:not([hidden])::before{content:"\00b7";margin-right:7px;color:var(--dim)}
+#browser-actions{grid-column:2;grid-row:1;height:32px;display:flex;align-items:center;gap:2px}
+#browser-reload{
+  width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;
+  color:var(--dim);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;
+}
+#browser-reload svg{width:14px;height:14px}
+#browser-reload:hover{background:var(--hover);color:var(--fg)}
+#browser-reload:disabled{opacity:.3;cursor:default;background:transparent}
+#browser-takeover{
+  height:32px;padding:0 10px;border:0;border-radius:9px;background:var(--bg);
+  color:var(--fg);cursor:pointer;font:inherit;font-size:11px;flex:0 0 auto;
+  display:inline-flex;align-items:center;gap:6px;
+}
+#browser-takeover svg{width:13px;height:13px;color:var(--dim)}
+#browser-takeover:hover{background:var(--hover)}
+#browser-takeover.on{background:var(--accent);color:var(--bg)}
+#browser-takeover.on svg{color:inherit}
+#browser-stop,#browser-hide,#browser-import,#browser-ext-get{
+  width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;
+  color:var(--dim);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;
+}
+#browser-stop svg,#browser-hide svg,#browser-import svg,#browser-ext-get svg{width:16px;height:16px}
+#browser-import[hidden],#browser-ext-get[hidden]{display:none}
+#browser-import:hover,#browser-ext-get:hover{background:var(--hover);color:var(--fg)}
+#browser-stop:hover{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
+#browser-stop:disabled{opacity:.3;cursor:default;background:transparent;color:var(--dim)}
+#browser-hide:hover{background:var(--hover);color:var(--fg)}
+#browser-tabs{
+  height:34px;flex:0 0 34px;display:flex;align-items:end;gap:3px;padding:4px 10px 0;
+  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;
+}
+#browser-tabs[hidden]{display:none}
+#browser-tabs::-webkit-scrollbar{display:none}
+/* The scrollbar is hidden, so a side with tabs past it fades out instead. */
+#browser-tabs.more-left{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px);mask-image:linear-gradient(to right,transparent,#000 28px)}
+#browser-tabs.more-right{-webkit-mask-image:linear-gradient(to left,transparent,#000 28px);mask-image:linear-gradient(to left,transparent,#000 28px)}
+#browser-tabs.more-left.more-right{
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
+  mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
+}
+/* Tabs shrink toward 84px before the strip scrolls, as a browser's do. */
+.browser-page-tab{
+  height:29px;min-width:84px;max-width:190px;border-radius:7px 7px 0 0;
+  background:transparent;color:var(--dim);font:inherit;font-size:10.5px;
+  display:flex;align-items:center;flex:0 1 190px;overflow:hidden;
+}
+.browser-page-tab:hover{background:var(--hover);color:var(--fg)}
+.browser-page-tab.active{background:var(--bg);color:var(--fg)}
+.browser-page-tab-select{
+  height:100%;min-width:0;flex:1;padding:0 4px 0 10px;border:0;background:transparent;color:inherit;
+  font:inherit;cursor:pointer;display:flex;align-items:center;gap:7px;
+}
+.browser-page-tab i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex:0 0 auto}
+.browser-page-tab.active i{background:var(--ok);opacity:1}
+.browser-page-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.browser-page-tab-close{
+  width:24px;height:24px;margin-right:3px;padding:0;border:0;border-radius:6px;background:transparent;
+  color:inherit;font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.45;flex:0 0 auto;
+}
+.browser-page-tab-close:hover{background:var(--sel);opacity:1}
+#browser-suggest{
+  display:flex;align-items:center;gap:8px;margin:6px 10px 0;padding:5px 5px 5px 12px;flex:0 0 auto;
+  border-radius:9px;background:color-mix(in srgb,var(--accent) 9%,var(--field));color:var(--fg);font-size:11.5px;
+}
+#browser-suggest[hidden]{display:none}
+/* Connecting the person's own browser: a quiet pill among the pane's own
+   controls, shown only while the extension is missing and closable for good. */
+#browser-ext{display:inline-flex;align-items:center;height:24px;border-radius:7px;background:var(--field);flex:0 0 auto}
+#browser-ext[hidden]{display:none}
+#browser-ext button{
+  height:24px;padding:0;border:0;background:transparent;color:var(--dim);font:inherit;font-size:11px;
+  cursor:pointer;display:inline-flex;align-items:center;border-radius:7px;
+}
+#browser-ext-open{gap:5px;padding:0 4px 0 8px!important}
+#browser-ext-open svg{width:13px;height:13px}
+#browser-ext-hide{width:22px;justify-content:center}
+#browser-ext-hide svg{width:11px;height:11px}
+#browser-ext button:hover{color:var(--fg);background:var(--hover)}
+/* Getting the extension: the link, the folder, and the steps between them. */
+.ext-help{margin-top:8px}
+.ext-help a.ext-get{display:inline-flex;align-items:center;gap:6px}
+.ext-help a.ext-get svg{width:15px;height:15px;flex:none}
+.ext-help ol{margin:8px 0 0;padding-left:18px;color:var(--dim);font-size:12px;line-height:1.55}
+.ext-help code{font-size:11.5px;padding:1px 5px;border-radius:5px;background:var(--field)}
+#browser-suggest-text{flex:1;min-width:0;line-height:1.35}
+#browser-suggest-import{
+  height:26px;padding:0 10px;border:0;border-radius:7px;background:var(--accent);color:var(--bg);
+  font:inherit;font-size:11px;cursor:pointer;flex:0 0 auto;
+}
+#browser-suggest-import:hover{opacity:.88}
+#browser-suggest-dismiss{
+  width:26px;height:26px;padding:0;border:0;border-radius:7px;background:transparent;
+  color:var(--dim);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;
+}
+#browser-suggest-dismiss svg{width:13px;height:13px}
+#browser-suggest-dismiss:hover{background:var(--hover);color:var(--fg)}
+#browser-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
+/* White where the native page will be, panel-coloured under the resize handle,
+   which the native view stops short of so the handle stays grabbable. */
+.browser-native-surface{flex:1;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(to right,var(--panel) 9px,#fff 9px)}
+#browser-frame{
+  width:100%;height:100%;display:block;object-fit:contain;
+  -webkit-user-select:none;user-select:none;
+}
+#browser-pane.live #browser-frame{cursor:crosshair}
+.browser-idle{margin:auto;text-align:center;max-width:32ch}
+/* One column at a time on a narrow window: two would leave neither readable. */
+#browser-hide .ico-x{display:none}
+#browser-scrim{display:none}
+/* On a narrow screen there is no room for a column, so the pane is a drawer:
+   it slides in over the conversation from the right, leaving a strip of it
+   showing under a scrim, and a tap on the scrim or the × closes it. */
+@media (max-width:900px){
+  #browser-pane{
+    position:fixed;z-index:60;top:0;right:0;bottom:0;flex:none;
+    width:min(calc(100vw - 44px),560px);transform:translateX(100%);visibility:hidden;
+    transition:transform .22s ease,visibility 0s linear .22s;
+  }
+  #browser-pane.open{
+    width:min(calc(100vw - 44px),560px);flex:none;transform:none;visibility:visible;
+    transition:transform .22s ease;box-shadow:-12px 0 40px #00000026;
+  }
+  #browser-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:59;background:#0000004d}
+  #browser-resizer{display:none}
+  #browser-hide .ico-dash{display:none}
+  #browser-hide .ico-x{display:block}
+  #browser-head{padding-top:max(10px,env(safe-area-inset-top))}}
+#panel-notes{max-width:720px;margin:0 auto}
+#panel-notes:empty{display:none}
+#panel-notes>*{margin:0 0 8px}
+body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:none}
+#review{
+  width:0;flex:0 0 0;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
+}
+#review.open{width:min(46vw,620px);flex:0 0 min(46vw,620px)}
+#review-head{
+  padding:12px 16px 8px;display:flex;
+  justify-content:space-between;align-items:center;font-size:12px;
+}
+#review-sum{color:var(--dim);font-size:11px}
+#files{max-height:34%;overflow-y:auto;padding:0 8px 8px}
+.file{
+  padding:7px 14px;cursor:pointer;display:flex;gap:8px;align-items:center;font-size:12.5px;
+  border-left:2px solid transparent;
+}
+.file:hover{background:var(--bg)}
+.file.active{background:var(--sel)}
+.file .p{font-family:ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
+.file .n{font-size:11px;font-family:ui-monospace,monospace}
+.file .plus{color:var(--ok)} .file .minus{color:var(--err)}
+.file .tag{font-size:10px;color:var(--dim);background:var(--field);border-radius:4px;padding:1px 5px}
+#diff{flex:1;overflow:auto;padding:0}
+#diff pre.diff{padding:8px 0}
+.d-add,.d-del,.d-same{padding:0 12px}
+.hunk{color:var(--dim);background:var(--field);padding:3px 12px;font-size:11px}
+#changes-btn{
+  border:0;background:var(--panel);color:var(--fg);border-radius:7px;
+  padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;
+}
+#changes-btn:hover{background:var(--sel)}
+#changes-btn b{font-weight:600}
+/**
+ * The artifact drawer, deliberately the same shape as #review.
+ *
+ * Both answer "what did this turn produce"; making one look like a different
+ * kind of surface than the other would suggest a difference that is not there.
+ */
+#shelf{
+  width:0;flex:0 0 0;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
+}
+#shelf.open{width:min(46vw,620px);flex:0 0 min(46vw,620px)}
+/*
+ * Full width, by hiding the column beside it rather than by growing past it:
+ * the drawer keeps its own scroll and its own children, so nothing inside has
+ * to know it is being shown large.
+ */
+/*
+ * Full screen is the whole window, not "the transcript stepped aside".
+ *
+ * Taken out of the flex row entirely: leaving it in meant the sidebar and the
+ * top bar stayed, so the artifact got wider without ever getting the screen.
+ */
+#shelf.full{
+  position:fixed;inset:0;z-index:60;width:100%;height:100%;
+  flex:1 1 auto;border-radius:0;
+}
+body.shelf-full #main,body.shelf-full aside,body.shelf-full #top{display:none}
+#shelf-body{flex:1;overflow:auto;display:flex;flex-direction:column;min-height:0}
+/* The panel's only chrome: what this is, on the left; what to do with it, on
+   the right. It replaced a title row above it that said the same thing. */
+#shelf-bar{
+  display:flex;gap:8px;align-items:center;padding:8px 10px 8px 14px;
+  font-size:11px;color:var(--dim);
+}
+#shelf-bar .ver-btn{
+  display:flex;align-items:center;gap:2px;height:22px;padding:0 4px 0 7px;
+  border:0;border-radius:6px;background:transparent;color:var(--dim);
+  font:inherit;font-size:11px;cursor:pointer;
+}
+#shelf-bar .ver-btn:hover{background:var(--hover);color:var(--fg)}
+#shelf-bar a{color:var(--dim);text-decoration:none;margin-left:auto}
+#shelf-bar a:hover{color:var(--fg);text-decoration:underline}
+/* A switch, for the settings that are a state rather than an action.
+   "Turn on" is a button: you press it and something happens. Whether sync is
+   on is not that — it is a thing that is currently true or false, and a
+   control shaped like a lever says so without being read. */
+.switch{
+  position:relative;flex:0 0 auto;width:34px;height:20px;padding:0;border:0;
+  border-radius:999px;background:var(--line);cursor:pointer;
+  transition:background .15s;
+}
+.switch::after{
+  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
+  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);
+  transition:transform .15s;
+}
+.switch[aria-checked="true"]{background:var(--brand)}
+.switch[aria-checked="true"]::after{transform:translateX(14px)}
+/* Disabled means "not yet", not "never": it stays legible, and the row says
+   why. Hiding it instead left people looking for a control that exists. */
+.switch:disabled{opacity:.45;cursor:default}
+.switch:focus-visible{outline:none;filter:brightness(.9)}
+.share-btn{
+  border:1px solid var(--line);background:var(--field);color:var(--fg);
+  border-radius:5px;padding:2px 8px;font:inherit;font-size:11px;cursor:pointer;
+}
+.share-btn:hover:not(:disabled){background:var(--sel)}
+.share-btn:disabled{opacity:.6;cursor:default}
+/* The frame is white in both themes: an artifact brings its own background,
+   and letting the panel's dark surface show through a transparent one made
+   black-on-transparent documents unreadable. */
+#shelf-frame{flex:1;width:100%;border:0;background:#fff;min-height:0}
+#shelf-source{
+  flex:1;margin:0;padding:12px;overflow:auto;white-space:pre-wrap;word-break:break-word;
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
+}
+#shelf-note{padding:10px 14px;color:var(--dim);font-size:12px}
+/*
+ * The artifact's card in the transcript.
+ *
+ * Deliberately quieter than a tool card: it is an offer to go and look at
+ * something, not a record of a command that ran.
+ */
+/*
+ * The card an artifact leaves in the conversation.
+ *
+ * Sized and spaced like the tool cards it sits between rather than like a
+ * banner: it is one line of the transcript that happens to be clickable, and
+ * the moment it starts shouting it competes with the artifact itself.
+ */
+.art-card{
+  display:flex;align-items:center;gap:11px;max-width:720px;margin:10px auto 0;
+  padding:9px 10px 9px 11px;border-radius:10px;background:var(--panel);cursor:pointer;
+  border:0;transition:background .12s;
+}
+/* Borderless: the surface is the boundary. A rule around it made a row of the
+   transcript look like a dialog, and next to the tool cards it sits between —
+   which have none — it was the only thing drawing a box around itself. */
+.art-card:hover{background:var(--sel)}
+.art-card:focus-visible{outline:none;background:var(--sel)}
+.art-card-mark{
+  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
+  width:28px;height:28px;border-radius:7px;background:var(--field);color:var(--fg);
+}
+.art-card-mark svg{width:15px;height:15px}
+.art-card-text{min-width:0;flex:1}
+.art-card-title{
+  font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.art-card-sub{font-size:11.5px;color:var(--dim);margin-top:1px}
+.art-card-open{
+  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
+  width:22px;height:22px;color:var(--fg);
+}
+.art-card-open svg{width:14px;height:14px}
+#shelf-bar .share-btn{
+  border:0;background:var(--field);color:var(--fg);border-radius:6px;
+  padding:2px 8px;font:inherit;font-size:11px;cursor:pointer;
+}
+#shelf-bar .share-btn:hover{background:var(--sel)}
+#shelf-bar .share-btn.primary-action{
+  display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;
+  font-size:12px;border-radius:7px;
+}
+#shelf-bar .share-btn.primary-action svg{width:14px;height:14px}
+#shelf-bar .share-btn:disabled{opacity:.55;cursor:default}
+/* Not decoration: it is the difference between the link showing what the
+   author thinks it shows and showing a revision behind. */
+#shelf-bar .stale{color:var(--warn);font-size:11px}
+#shelf-bar .shelf-title{
+  font-size:13px;font-weight:500;color:var(--fg);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%;
+}
+#shelf-bar .shelf-gap{flex:1}
+/* The panel's own controls: drawn, not spelled, and furthest from the actions
+   that act on the artifact rather than on the panel. */
+#shelf-bar .pane-btn{
+  display:flex;align-items:center;justify-content:center;width:28px;height:28px;
+  border:0;border-radius:7px;background:transparent;color:var(--fg);cursor:pointer;padding:0;
+}
+#shelf-bar .pane-btn:hover{background:var(--hover)}
+#shelf-bar .pane-btn svg{width:16px;height:16px}
+#shelf-bar .icon-link{
+  display:flex;align-items:center;justify-content:center;width:28px;height:28px;
+  border-radius:7px;color:var(--fg);margin-left:0;
+}
+#shelf-bar .icon-link:hover{background:var(--hover);text-decoration:none}
+#shelf-bar .icon-link svg{width:16px;height:16px}
+/* One cluster, so three glyphs read as a set of controls rather than as three
+   unrelated marks drifting between the type and the publish button. */
+#shelf-bar .shelf-icons{display:flex;align-items:center;gap:2px;margin-right:4px}
+
+/*
+ * The composer's .menu opens upward from a bottom-anchored picker. This one is
+ * placed against a button that can sit anywhere in a scrolling panel, so it is
+ * positioned from the viewport instead and reuses only the surface styling.
+ */
+.menu.pop{position:fixed;bottom:auto;left:auto;min-width:220px}
+#log{padding:28px 24px 8px}
+/*
+ * One column width, named once.
+ *
+ * A turn and a connection card are different things that must line up, and
+ * before this they lined up by both happening to be laid out inside the pane —
+ * which stopped being true the moment one of them got a max-width. On a wide
+ * window the card then ran the full 1600px while every message sat in a 720px
+ * column, so the one element asking for a decision was the one that did not
+ * look like it belonged to the conversation.
+ */
+.column{max-width:720px;margin-left:auto;margin-right:auto}
+.turn{position:relative;margin-bottom:26px}
+
+/*
+ * The connection card: an app's own mark, its name, what is being asked, and
+ * the two answers. It is the only place a third party's brand appears in the
+ * transcript, so it stays inside the column and keeps the site's own shapes —
+ * a fill and a radius, no outline.
+ */
+.connection-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
+.connection-head{display:flex;align-items:center;gap:10px}
+/*
+ * Fixed box, contained image: a vendor logo is whatever aspect ratio the vendor
+ * chose, and letting it set its own height made cards jump by ten pixels
+ * depending on which app was asking.
+ */
+.connection-logo{width:28px;height:28px;border-radius:7px;object-fit:contain;flex:none;background:var(--bg)}
+.connection-name{font-size:14px;font-weight:600}
+.connection-card p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
+/* The answers sit at the end of the row: this card is a question, and the two
+ * replies belong where a reader arrives last rather than under the sentence
+ * they are answering. */
+.connection-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:2px}
+.connection-card .err{color:var(--fg)}
+
+/* A question from the agent, in the transcript rather than a modal: answering
+ * may take a look back up the conversation, which a modal would cover. Options
+ * are filled rows; the chosen one takes the accent fill, never a ring. */
+.question-card{background:var(--panel);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px;outline:none}
+.q-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+.q-tag,.q-tab{font:inherit;font-size:11.5px;line-height:1.7;padding:0 9px;border:0;border-radius:999px;background:var(--field);color:var(--dim)}
+.q-tab{cursor:pointer}
+.q-tab:hover{background:var(--hover);color:var(--fg)}
+.q-tab.on{background:var(--sel);color:var(--fg)}
+.q-tab.done::after{content:" ✓"}
+.q-hint{font-size:11.5px;color:var(--dim);margin-left:auto}
+.q-text{font-size:14.5px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
+.q-layout{display:flex;flex-direction:column;gap:8px;min-width:0}
+.q-options{display:flex;flex-direction:column;gap:4px}
+.q-opt{
+  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:0;border-radius:9px;
+  padding:8px 10px;background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;
+}
+.q-opt:hover,.q-opt:focus-visible{outline:none;background:var(--sel)}
+.q-opt.on{background:var(--accent);color:var(--bg)}
+.q-opt.on:focus-visible{background:var(--accent);opacity:.9}
+.q-key{
+  flex:none;min-width:18px;height:18px;border-radius:5px;background:var(--field);color:var(--dim);
+  font-size:11px;display:grid;place-items:center;margin-top:1px;
+}
+.q-opt.on .q-key{background:#ffffff26;color:inherit}
+.q-words{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
+.q-label{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
+.q-desc{font-size:12px;line-height:1.45;color:var(--dim);overflow-wrap:anywhere}
+.q-opt.on .q-desc{color:inherit;opacity:.75}
+.q-check{flex:none;width:14px;font-size:12px;line-height:20px}
+/* The typed answer is a field, so it keeps the plain row fill whether empty,
+   focused or filled; a filled one is marked by its key alone, which takes the
+   accent the picked options wear across the whole row. */
+.q-other{cursor:text;align-items:center;padding-top:12px;padding-bottom:12px}
+.q-other:focus-within,.q-other.on,.q-other.on:focus-visible{background:var(--bg);color:var(--fg);opacity:1}
+.q-other.on .q-key{background:var(--accent);color:var(--bg)}
+.q-other-input::placeholder{color:var(--dim)}
+.q-other-input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:13.5px;padding:0}
+.q-preview{
+  margin:0;border-radius:9px;background:var(--bg);padding:10px 12px;font-size:12px;line-height:1.55;
+  white-space:pre-wrap;overflow:auto;max-height:280px;
+}
+.q-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.q-actions .q-keys{margin-right:auto}
+.q-actions button{padding:7px 13px;border:0;border-radius:9px;background:var(--field);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
+.q-actions button:hover{background:var(--sel)}
+.q-actions button.approve{background:var(--accent);color:var(--bg)}
+.q-actions button.approve:hover{opacity:.88}
+.q-actions button.quiet{background:transparent;color:var(--dim)}
+.q-actions button.quiet:hover{background:var(--hover);color:var(--fg)}
+.q-actions button:disabled{opacity:.45;cursor:default}
+.q-keys{font-size:11.5px;color:var(--dim)}
+.q-error{font-size:12px;color:var(--err)}
+.question-card.settled{gap:4px;padding:10px 14px}
+.q-settled-title{font-size:12px;color:var(--dim)}
+.q-settled-line{display:flex;gap:8px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
+.q-settled-head{color:var(--dim);flex:none}
+.who{
+  font-size:11.5px;color:var(--dim);margin-bottom:6px;font-weight:500;letter-spacing:.01em;
+}
+.user .bubble{
+  white-space:pre-wrap;word-break:break-word;font-size:15.5px;font-weight:500;
+  line-height:1.6;
+}
+/* Big enough to recognize a screenshot by, small enough that three of them do
+   not push the reply off the screen. The full size is one click away. */
+.user .shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
+.user .shots img{
+  max-width:220px;max-height:160px;border-radius:8px;cursor:zoom-in;
+  background:var(--bg);object-fit:cover;
+}
+.user{margin-bottom:18px}
+.panel{max-width:720px;margin:8px auto 0}
+.panel-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding-block:48px;font-size:13px}
+.panel h2{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
+/* Only the gap below. The horizontal margin belongs to whatever is placing the
+ * card: setting all four here quietly reset the auto margins that keep a card
+ * in the reading column, and the card sat flush left while every message beside
+ * it was centred. */
+.row-card{background:var(--panel);border-radius:10px;padding:12px 14px;margin-bottom:8px}
+.memory-field{margin:14px 0}
+.memory-label{display:block;font-size:12.5px;font-weight:500;margin-bottom:2px}
+.memory-field .muted{margin-bottom:6px}
+/* Filled, not outlined — the same shape .art-search uses. A box drawn with a
+ * line around it is the one thing this site does not do, and three of them
+ * stacked made the editor look like a form bolted onto the page rather than
+ * part of the note. Focus deepens the fill rather than drawing a ring: no
+ * border marks a focused thing anywhere here. */
+.memory-panel input,.memory-panel textarea{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit;line-height:1.5;box-sizing:border-box}
+.memory-panel input:focus,.memory-panel textarea:focus{outline:none;background:var(--field-focus)}
+.memory-panel textarea{resize:vertical;min-height:130px}
+.memory-panel summary{cursor:pointer;padding:6px 0;font-weight:500}
+.memory-panel .memory-path{overflow-wrap:anywhere;color:var(--dim)}
+.memory-panel .memory-search{width:100%}
+.memory-summary{padding:14px 16px;margin-bottom:10px}
+.memory-state{font-size:15px;font-weight:600}
+.memory-summary p{margin:4px 0}
+.memory-error{color:var(--warn);overflow-wrap:anywhere}
+.memory-summary .memory-actions{flex-wrap:wrap;align-items:center;margin-top:12px}
+.memory-summary .signin-site{width:auto;flex:0 0 auto;padding:0 16px}
+.memory-about{margin:6px 0 4px;color:var(--dim)}
+.memory-about summary{cursor:pointer;width:max-content}
+/* Prose, so it breaks between words; the shared .small breaks anywhere, which suits a path. */
+.memory-panel .section-title+.memory-notes-intro{margin:-4px 0 10px;word-break:normal;overflow-wrap:anywhere}
+.memory-empty{padding:14px 16px}
+.memory-empty-title{font-size:13.5px;font-weight:500;margin-bottom:4px}
+.memory-empty p{margin:0;word-break:normal;overflow-wrap:anywhere}
+/* Built like a settings row: one flex line, the marker drawn rather than left
+ * to the browser, so the summary text and everything below it share one left
+ * edge. */
+.memory-panel details.memory-note>summary{display:flex;align-items:center;gap:8px;list-style:none;padding:2px 0 6px}
+.memory-panel details.memory-note>summary::-webkit-details-marker{display:none}
+.memory-panel details.memory-note[open]>summary .chev{transform:rotate(90deg)}
+.memory-note-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.memory-id{flex:0 0 auto;font-size:11px;color:var(--dim);letter-spacing:.02em;user-select:all}
+/* No card of its own — the note row is already one — and indented to the
+ * summary's text rather than the card's edge, which is what .setting-body does
+ * for the same shape. The 15px is the marker column: a chevron and the gap
+ * after it, the same distance the summary text is pushed. Left at the form's
+ * own padding the fields sat nine pixels to the right of the title they
+ * belonged to, which is the sort of gap that reads as a mistake without
+ * anyone being able to say what is wrong. */
+.memory-editor{margin:0;padding:2px 0 4px 15px;background:transparent}
+/* The form's own background is the page's, which on a card reads as a second
+ * card inside the first one — the same doubling the padding was making. */
+.memory-actions{display:flex;gap:8px;margin-top:14px}
+.memory-recent{margin:6px 0}
+.memory-recent>summary{cursor:pointer;color:var(--dim)}
+.memory-recent>div{padding:2px 0 2px 15px}
+.memory-backup{display:flex;align-items:center;gap:12px;padding:8px 0 8px 15px}
+.memory-backup-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
+.memory-versions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0}
+.memory-version h4{margin:0 0 6px}
+.memory-version pre{margin:0;background:var(--field);border-radius:8px;padding:10px 12px;overflow-wrap:anywhere}
+.memory-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px 15px;color:var(--dim)}
+.memory-link{background:var(--field);color:var(--fg);border:0;border-radius:6px;padding:2px 8px;font:inherit;font-size:12px;cursor:pointer}
+.memory-link.missing{color:var(--dim);cursor:default;text-decoration:line-through}
+.memory-panel select{background:var(--field);color:var(--fg);border:0;border-radius:8px;padding:10px 12px;font:inherit}
+/*
+ * A settings row: name, value, and everything else behind the triangle.
+ *
+ * The value is held to one line and cut with an ellipsis rather than wrapped,
+ * so the column of rows stays a column of rows however long a path is; the
+ * whole of it is printed again inside, where there is room for it. Opened,
+ * the row keeps its background, so what belongs to it is obvious without a
+ * border drawn around every card on the page.
+ */
+details.setting{background:var(--panel);border-radius:10px;margin:0 0 8px}
+details.setting>summary{
+  display:flex;align-items:center;gap:10px;padding:12px 14px;
+  cursor:pointer;list-style:none;border-radius:10px;
+}
+details.setting>summary::-webkit-details-marker{display:none}
+details.setting>summary:hover{background:var(--hover)}
+details.setting[open]>summary{border-radius:10px 10px 0 0}
+details.setting[open]>summary .chev{transform:rotate(90deg)}
+details.setting>summary .ghost{flex:0 0 auto;height:26px;font-size:12px;margin-left:0}
+details.setting>summary .switch{flex:0 0 auto}
+details.setting>summary:focus-visible{outline:none;background:var(--hover)}
+/*
+ * The artifacts panel: a search field over the whole catalogue.
+ *
+ * Full width and at the top, because with every session's work in one list the
+ * first move is to narrow it — the field is the panel's subject, not a filter
+ * tucked beside a heading.
+ */
+.art-search{
+  width:100%;height:34px;border:0;border-radius:9px;background:var(--field);
+  color:var(--fg);font:inherit;font-size:13px;padding:0 12px;margin:0 0 4px;
+}
+.art-search:focus{outline:none;background:var(--field-focus)}
+.art-search::-webkit-search-cancel-button{cursor:pointer}
+.art-summary:not(:empty){margin:0 0 8px;padding:0 2px}
+/* Which session the rows under it came from. Quiet, because it is a divider
+   between groups of the thing being looked for, not one of them. */
+.art-group{
+  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
+  margin:16px 0 6px;padding:0 2px;
+}
+.art-group:first-child{margin-top:10px}
+/* A session title is a sentence someone typed, and some of them are long. */
+.art-group>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.art-when{margin-left:auto}
+.art-note{margin:14px 0 0}
+.setting-name{font-weight:500;font-size:13.5px;flex:0 0 auto}
+.setting-value{
+  flex:1;min-width:0;font-size:12px;color:var(--dim);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
+}
+/* Indented to the name, not to the card: the chevron and its gap put the
+   title 30px in, and a body that started at the card's edge read as a
+   paragraph the row had dropped rather than the inside of it. */
+.setting-body{padding:4px 14px 16px 30px}
+/* The shared .small breaks anywhere, which is right for a path and wrong for
+   a sentence: the hint here came back as "the trail is never s / ynced". The
+   prose breaks at spaces; the paths under it keep breaking anywhere. */
+.setting-body .small:not(.mono){word-break:normal;overflow-wrap:anywhere}
+.setting-body>*+*{margin-top:8px}
+.setting-list>*+*{margin-top:6px}
+.setting-list>.mono{margin-top:3px}
+/* Lists that could be forty lines long scroll where they are rather than
+   growing the page under them. */
+.scroll-box{
+  max-height:200px;overflow-y:auto;background:var(--field);
+  border-radius:6px;padding:7px 9px;
+}
+.trail-line{padding:2px 0}
+/* On its own page the trail is the page: it flows rather than scrolling in a
+   box, and the box's hairline goes with it — a list this long framed by a
+   rule reads as a field somebody is meant to type in. */
+.audit-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
+.panel.audit .audit-list{margin:4px 0 12px}
+.setting-body .audit-list{
+  max-height:220px;overflow-y:auto;border-radius:8px;padding:4px;background:var(--field);
+}
+/* One grid for the whole trail, so time, outcome and tool line up down the
+   page; each row is a subgrid of it so a row can still take a hover fill. */
+.audit-list{
+  display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content;
+  column-gap:12px;font-size:12.5px;
+}
+.audit-row{
+  display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;
+  padding:5px 8px;border-radius:7px;
+}
+.audit-row:hover{background:var(--hover)}
+.audit-row.denied{background:color-mix(in srgb,var(--err) 5%,transparent)}
+.audit-row.denied:hover{background:color-mix(in srgb,var(--err) 9%,transparent)}
+.audit-day{
+  grid-column:1/-1;font-size:11.5px;font-weight:600;color:var(--dim);
+  letter-spacing:.02em;padding:14px 8px 4px;
+}
+.audit-day:first-child{padding-top:2px}
+.audit-time{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
+.audit-pill{
+  display:inline-flex;align-items:center;gap:5px;justify-self:start;
+  font-size:11px;font-weight:600;line-height:1;padding:4px 8px 4px 7px;border-radius:999px;
+}
+.audit-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+.audit-pill.allowed{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
+.audit-pill.denied{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.audit-pill.unanswered{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
+.audit-what{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
+.audit-tool{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-weight:600;color:var(--fg);flex:none}
+.audit-arg{
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;color:var(--dim);
+  overflow:hidden;text-overflow:ellipsis;min-width:0;
+}
+.audit-notes{display:flex;gap:4px;justify-self:end}
+.audit-tag{
+  font-size:10.5px;color:var(--dim);background:var(--field);padding:2px 7px;border-radius:5px;white-space:nowrap;
+}
+.audit-tag.remembered{color:var(--brand-ink);background:var(--brand-tint)}
+.audit-tag.unanswered{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
+.seg-item .seg-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px}
+.seg-item .seg-count{margin-left:6px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
+@media (max-width:640px){
+  .audit-list{grid-template-columns:max-content minmax(0,1fr);row-gap:0}
+  .audit-row{grid-template-columns:max-content minmax(0,1fr);row-gap:3px}
+  .audit-time{grid-column:1}
+  .audit-pill{grid-column:2;justify-self:start}
+  .audit-what{grid-column:1/-1}
+  .audit-notes{grid-column:1/-1;justify-self:start}
+  .audit-notes:empty{display:none}
+}
+/* A row of things to do with what is above them. Links styled as the ghost
+   buttons beside them, because a download is a link and pretending otherwise
+   costs the browser's own save machinery. */
+.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
+.row-actions a.ghost{
+  text-decoration:none;height:26px;font-size:12px;
+  display:inline-flex;align-items:center;
+}
+.section-title{
+  font-size:13px;font-weight:600;color:var(--dim);margin:22px 0 8px;letter-spacing:.01em;
+}
+/*
+ * The window picker, and the chart under it.
+ *
+ * Six series colours, defined once and used by both the lines and their
+ * legend swatches so a colour never means two things. They are hues rather
+ * than shades of the accent: the chart's whole job is telling models apart,
+ * and five tints of one colour cannot do it.
+ */
+.seg{display:inline-flex;gap:2px;padding:2px;border-radius:9px;background:var(--field);margin:2px 0 12px}
+/* A segmented choice on a settings row sits in the row's line, like a switch. */
+.setting summary .setting-seg{margin:0 0 0 auto;flex:none}
+.setting summary .setting-seg .seg-item{padding:3px 10px;font-size:12px}
+/* Whether something a row depends on is there: a dot and a sentence. */
+.setting-status{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--dim)}
+.status-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dim);opacity:.6}
+.status-dot.ok{background:var(--ok);opacity:1}
+/* The presets and the calendar on one line, on the same baseline. */
+.usage-window{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.perms-card{display:flex;flex-direction:column;gap:10px}
+.perms-card .setting-list{margin:0}
+/* The mode, as the one fact the rest of the page qualifies. */
+.perm-mode{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
+.perm-mode-name{
+  display:inline-flex;align-items:center;gap:7px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:13px;font-weight:600;padding:6px 12px 6px 10px;border-radius:999px;
+}
+.perm-mode-name::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
+.perm-mode-name.read-only{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
+.perm-mode-name.workspace-write{color:var(--brand-ink);background:var(--brand-tint)}
+.perm-mode-name.full-access{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
+.perm-mode-steps{display:flex;gap:4px;flex-wrap:wrap}
+.perm-mode-step{font-size:11.5px;color:var(--dim);padding:3px 9px;border-radius:6px;background:var(--field)}
+.perm-mode-step.on{color:var(--fg);background:var(--bg);font-weight:600}
+/* Rules, one group per verdict, each rule a chip in that verdict's colour. */
+.perm-group{display:flex;flex-direction:column;gap:6px}
+.perm-group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
+.perm-group-head .n{font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
+.perm-group-head.allow{color:var(--ok)} .perm-group-head.ask{color:var(--warn)}
+.perm-group-head.deny{color:var(--err)} .perm-group-head.session{color:var(--brand-ink)}
+.perm-chips{display:flex;flex-wrap:wrap;gap:5px}
+.perm-chip{
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12px;
+  padding:3px 9px;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.perm-chip.allow{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
+.perm-chip.ask{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
+.perm-chip.deny{color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
+.perm-chip.session{color:var(--brand-ink);background:var(--brand-tint)}
+.perm-empty{
+  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);
+  padding:10px 12px;border-radius:8px;background:var(--field);
+}
+.perm-roots{
+  display:flex;flex-direction:column;max-height:280px;overflow-y:auto;
+  background:var(--field);border-radius:8px;padding:4px;
+}
+.perm-root{
+  display:flex;align-items:baseline;gap:0;min-width:0;padding:4px 8px;border-radius:6px;
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12px;white-space:nowrap;
+}
+.perm-root:hover{background:var(--hover)}
+.perm-root .dir{color:var(--dim);overflow:hidden;text-overflow:ellipsis;min-width:0;direction:rtl;text-align:left}
+.perm-root .dir bdi{direction:ltr}
+.perm-root .base{color:var(--fg);font-weight:600;flex:none}
+.perm-count{
+  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--dim);
+  background:var(--field);padding:1px 7px;border-radius:999px;vertical-align:1px;
+}
+/* ---- date range picker ----------------------------------------------------
+   The site's own component, class for class. Borderless like everything else
+   here: fills for the chosen days, a shadow to lift the panel, and no ring on
+   any state. */
+.drp{position:relative;display:inline-flex;margin:2px 0 12px}
+.drp-trigger{
+  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;
+  border:0;border-radius:9px;background:var(--field);color:var(--dim);
+  font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;
+}
+.drp-trigger:hover{color:var(--fg)}
+.drp-trigger.on{background:var(--sel);color:var(--fg)}
+.drp-trigger svg{flex:none;width:14px;height:14px;opacity:.75}
+.drp-pop{
+  position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:max-content;
+  max-width:calc(100vw - 32px);padding:16px;border-radius:14px;background:var(--bg);
+  box-shadow:0 12px 40px #00000029,0 2px 6px #0000000f;
+}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .drp-pop{background:var(--panel)}}
+:root[data-theme="dark"] .drp-pop{background:var(--panel)}
+.drp-nav{
+  position:absolute;top:12px;right:12px;left:12px;display:flex;
+  justify-content:space-between;pointer-events:none;
+}
+.drp-arrow{
+  display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;
+  border-radius:999px;background:transparent;color:var(--dim);
+  cursor:pointer;pointer-events:auto;
+}
+.drp-arrow svg{width:16px;height:16px}
+.drp-arrow:hover:not(:disabled){background:var(--hover);color:var(--fg)}
+.drp-arrow:disabled{opacity:.3;cursor:default}
+.drp-months{display:flex;justify-content:center;gap:28px}
+.drp-month-name{
+  height:30px;margin-top:-4px;font-size:14px;font-weight:600;line-height:30px;
+  text-align:center;color:var(--fg);
+}
+.drp-grid{display:grid;grid-template-columns:repeat(7,34px);grid-auto-rows:34px;row-gap:2px;margin-top:6px}
+.drp-weekday{display:grid;place-items:center;font-size:11.5px;font-weight:500;color:var(--dim)}
+/* A day is a full-width cell, so the range fill runs unbroken across a week;
+   the number sits in a circle inside it. */
+.drp-day{
+  position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;
+  border:0;border-radius:0;background:transparent;color:var(--fg);
+  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;
+}
+.drp-day>span{
+  position:relative;display:grid;place-items:center;width:30px;height:30px;
+  border-radius:999px;transition:background .12s ease;
+}
+.drp-day:hover:not(:disabled)>span{background:var(--hover)}
+.drp-day:disabled{color:var(--dim);opacity:.45;cursor:default}
+.drp-day.is-inside{background:var(--field)}
+.drp-day.is-start{background:linear-gradient(to right,transparent 50%,var(--field) 50%)}
+.drp-day.is-end{background:linear-gradient(to left,transparent 50%,var(--field) 50%)}
+.drp-day.is-edge>span,.drp-day.is-edge:hover>span{background:var(--fg);color:var(--bg);font-weight:600}
+/* Today: a small dot under the number, so it reads without a ring. */
+.drp-day.is-today>span::after{
+  content:"";position:absolute;bottom:3px;left:50%;translate:-50% 0;
+  width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.55;
+}
+.drp-day:focus-visible{outline:none}
+.drp-day:focus-visible>span{background:var(--sel)}
+.drp-foot{
+  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
+  gap:10px 16px;margin-top:14px;padding-top:12px;font-size:13px;color:var(--dim);
+  box-shadow:0 -1px 0 var(--line);
+}
+.drp-summary strong{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
+.drp-actions{display:inline-flex;gap:6px;margin-left:auto}
+.drp-cancel,.drp-apply{
+  padding:7px 14px;border:0;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;
+}
+.drp-cancel{background:transparent;color:var(--dim)}
+.drp-cancel:hover{background:var(--hover);color:var(--fg)}
+.drp-apply{background:var(--fg);color:var(--bg)}
+.drp-apply:hover:not(:disabled){opacity:.88}
+.drp-apply:disabled{opacity:.35;cursor:default}
+/* One month on a narrow screen — the later one, which holds today — and the
+   panel floats over the middle of it rather than hanging off a trigger the
+   width of the screen cannot accommodate. */
+@media (max-width:640px){
+  .drp-month.is-first{display:none}
+  .drp-pop{
+    position:fixed;top:18vh;left:50%;width:min(100vw - 32px,300px);translate:-50% 0;
+  }
+}
+.seg-item{
+  border:0;background:transparent;color:var(--dim);font:inherit;font-size:12.5px;
+  padding:5px 11px;border-radius:7px;cursor:pointer;
+}
+.seg-item:hover{color:var(--fg)}
+.seg-item.on{background:var(--bg);color:var(--fg)}
+.chart-card{display:flex;flex-direction:column;gap:6px}
+.chart{width:100%;height:150px;overflow:visible}
+.chart-rule{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
+/* The selected tint, not the hover one: this band sits behind coloured bars
+   and has to read against them, where a 4% wash disappears. */
+.chart-hover{fill:var(--sel);pointer-events:none}
+.chart-scale span:first-child{font-variant-numeric:tabular-nums}
+.chart-bar{shape-rendering:crispEdges}
+.chart-scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--fg)}
+.chart-span{display:flex;justify-content:space-between}
+.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
+.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim)}
+.swatch{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
+.s0{fill:#5b8def;background:#5b8def}
+.s1{fill:#e0803c;background:#e0803c}
+.s2{fill:#3fa87a;background:#3fa87a}
+.s3{fill:#b06ad4;background:#b06ad4}
+.s4{fill:#d15b7a;background:#d15b7a}
+.s5{fill:#8a8f98;background:#8a8f98}
+/* Three totals across the top of the usage page. They wrap rather than shrink:
+   a figure that has been squeezed to fit is a figure nobody can read at a
+   glance, which is the only thing a figure is for. */
+.figures{display:flex;flex-wrap:wrap;gap:12px 34px}
+/* The shared .small breaks anywhere, which is right for a path and wrong for a
+   sentence: on a narrow window "83% cached" came back as "83% ca / ched". Here
+   the line is prose with one long model id in it, so it breaks at spaces and
+   splits a word only when the word alone will not fit. */
+.panel.usage .small{word-break:normal;overflow-wrap:anywhere}
+.figure-label{font-size:11.5px;color:var(--dim);letter-spacing:.01em}
+.figure-value{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:2px 0 1px}
+.panel>.section-title:first-of-type{margin-top:4px}
+/* One card per section, rows divided by spacing rather than borders. */
+.section{background:var(--panel);border-radius:12px;overflow:hidden}
+.section details.provider + details.provider{box-shadow:0 -1px 0 var(--line)}
+details.provider{padding:0}
+/* Padding on all four sides and no margin, because the row is measured
+ * between the dividers and not around the box that draws the hover.
+ *
+ * The .panel .row-head rule carries a 14px bottom margin for the single
+ * heading row it was written for, and a provider card's summary is a
+ * .row-head too. It
+ * landed outside the summary and inside the divider, so every card had 12px
+ * of air above its content and 26px below — the whole row reading as pinned
+ * to its top edge, which is what it was. */
+.panel details.provider>summary,details.provider>summary{
+  padding:14px;cursor:pointer;list-style:none;margin:0;gap:10px;
+}
+details.provider>summary::-webkit-details-marker{display:none}
+.naming{flex:1;min-width:0}
+.name-line{display:flex;align-items:center;gap:8px}
+.row-desc{font-size:12px;color:var(--dim);margin-top:1px}
+.chev{
+  width:0;height:0;flex:0 0 auto;margin-right:2px;
+  border-left:4.5px solid currentColor;border-top:3.5px solid transparent;
+  border-bottom:3.5px solid transparent;opacity:.4;transition:transform .15s;
+}
+details.provider[open]>summary .chev{transform:rotate(90deg)}
+details.provider>summary:hover{background:var(--hover)}
+.provider-body{padding:2px 14px 14px}
+.row-head .count{font-size:11px;margin-left:2px}
+.row-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
+.row-title{font-weight:500;font-size:13.5px}
+.row-cron{font-size:12px;color:var(--dim)}
+.tag{font-size:10.5px;color:var(--dim);background:var(--field);border-radius:4px;padding:1px 5px}
+.tag.rec{color:var(--bg);background:var(--accent);opacity:.85}
+.row-head .ghost{margin-left:auto;height:26px;font-size:12px}
+/* A second action sits beside the first rather than splitting the free space
+ * with it. */
+.row-head .ghost+.ghost,.row-head .ghost+.switch,.row-head .switch+.ghost{margin-left:0}
+.routine-where{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.routine-history{margin-top:6px}
+.routine-history>summary{cursor:pointer;width:max-content}
+.routine-runs{display:flex;flex-direction:column;gap:2px;margin-top:6px}
+.routine-run{display:flex;gap:10px;align-items:baseline;text-align:left;border:0;background:transparent;color:var(--fg);font:inherit;padding:4px 6px;border-radius:6px}
+button.routine-run{cursor:pointer}
+button.routine-run:hover{background:var(--hover)}
+.routine-run.failed{color:var(--err)}
+.small{font-size:12px;white-space:pre-wrap;word-break:break-all}
+.keyrow{display:flex;gap:6px;margin:8px 0 6px}
+.keyrow input{
+  flex:1;height:30px;border:0;border-radius:8px;background:var(--field);color:var(--fg);
+  padding:0 10px;font:inherit;font-size:12.5px;
+}
+.keyrow input:focus{outline:none;background:var(--field-focus)}
+/* The way in on an account-backed plan, and the only control on the card that
+ * is filled: everything below it is an alternative for someone who cannot use
+ * a browser here. Its own class rather than .primary, which is the composer's
+ * 30x30 icon button and would collapse this into a circle. */
+/* No rule above it. The padding and the button's own hover surface already
+   separate the account from the list — a hairline as well is a second answer
+   to a question the whitespace had settled, and it is the only line left in a
+   sidebar that has none. */
+/* A column, not a row. Signed in this used to hold the account button and
+   nothing else, and now a subscriber gets a Top up row above it — the thing
+   a subscriber does most often here, which had been the fourth entry of a
+   menu behind the name. */
+/* The desktop update hint, above the account. A filled row, never an
+   outline: a quiet fill for an ordinary release, the accent for one marked
+   important. The window's menu and the dialogs are the loud path; this is the
+   one that waits to be clicked. */
+#update-hint{flex:0 0 auto;padding:4px 8px 0}
+#update-hint button{
+  width:100%;height:32px;display:flex;align-items:center;gap:8px;
+  padding:0 10px;border:0;border-radius:8px;background:var(--field);color:var(--fg);
+  font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+}
+#update-hint button:hover{background:var(--field-focus)}
+#update-hint button:disabled{cursor:default}
+#update-hint .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}
+#update-hint .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#update-hint .pct{font-size:11px;color:var(--dim)}
+#update-hint.important button{background:var(--accent);color:var(--bg)}
+#update-hint.important button:hover{opacity:.9}
+#update-hint.important .dot{background:var(--bg)}
+#update-hint.important .pct{color:inherit;opacity:.8}
+#account{
+  display:flex;flex-direction:column;align-items:stretch;gap:2px;
+  flex:0 0 auto;padding:8px;
+}
+/* 10px across rather than the nav rows' 8: the account row under it starts
+   with a 24px avatar inset 6px, and at 10px this row's 16px icon lands on
+   the avatar's centre line rather than 4px to the left of it. The balance
+   sits in the aside slot the nav rows keep for a count, because it is what
+   decides whether to click. */
+#account .topup{width:100%;padding:0 10px}
+/* Signed out this holds one nav row and nothing else, so the padding that
+   frames an account goes away and the row sits flush with the ones above it.
+   8px across, matching the nav list above, so the icon lands on the same
+   vertical as every other row rather than 4px inside it. */
+/* Not 4px, which is the gap between two rows in a list. This row is the last
+   thing in the window, so the space under it is the window edge rather than
+   another row, and at 4px the text sat on the frame. 10px below, and a row
+   taller than the nav rows above: a footer is allowed to be the roomiest row
+   in the sidebar, and this one has to hold a click aimed at from the corner. */
+#account.out{padding:4px 8px 10px}
+#account .nav-item{width:100%}
+#account.out .nav-item{height:34px}
+/* The whole row is the control. It used to be a label with a Sign out button
+   parked beside it, which gave the rarest action in the sidebar the most
+   reliable target in it, and left the name — the thing worth clicking, because
+   everything about the account is behind it — inert. */
+.account-btn{
+  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
+  padding:5px 6px;border:0;border-radius:8px;background:transparent;color:var(--fg);
+  font:inherit;cursor:pointer;text-align:left;
+}
+.account-btn:hover,#account .account-btn.menu-open{background:var(--hover)}
+#account .who-name{
+  flex:1;min-width:0;
+  font-size:12px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+#account .acct-caret{width:12px;height:12px;flex:0 0 auto;opacity:.45}
+.account-btn:hover .acct-caret,#account .account-btn.menu-open .acct-caret{opacity:.8}
+#account .avatar{
+  width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
+  overflow:hidden;background:var(--accent);color:var(--bg);font-size:11px;font-weight:600;
+}
+/* Over the initial rather than instead of it: the letter is what shows while a
+   picture loads, and what is left if it never does. */
+#account .avatar img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
+#account .avatar.out{background:var(--line);color:var(--dim)}
+button.signin-site{
+  flex:1;height:32px;border:0;border-radius:8px;background:var(--accent);color:var(--bg);
+  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;
+}
+button.signin-site:hover{opacity:.88}
+button.signin-site:disabled{opacity:.4;cursor:default}
+.pw-balance{display:flex;align-items:baseline;gap:6px;margin:0}
+.pw-balance strong{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
+/* The paywall's own width, and its own padding. Everything here is scoped to
+   #paywall: the same .cn-body and .dlg-actions serve the connect dialog, and
+   the last time a rule meant for one of them was written without a scope it
+   resized three screens nobody had complained about. */
+#paywall{width:min(620px,94vw);max-width:min(620px,94vw)}
+#paywall .cn-body{padding:16px 22px 4px;gap:14px}
+#paywall .dlg-actions{padding:18px 22px 20px}
+#paywall .cn-head{padding:20px 22px 2px}
+/* Importing a sign-in. Scoped for the same reason as #paywall above; the site
+   rows are filled, and a chosen one takes the selection fill, never a ring. */
+#browser-import-dialog{width:min(560px,94vw);max-width:min(560px,94vw)}
+#browser-import-dialog .cn-head{padding:20px 22px 2px}
+#browser-import-dialog .cn-body{padding:14px 22px 4px;gap:10px}
+#browser-import-dialog .dlg-actions{padding:16px 22px 20px}
+#browser-import-dialog .dlg-actions button:disabled{opacity:.4;cursor:default}
+#browser-import-dialog input[type=text]{height:38px;padding:0 13px;font-size:13px}
+.bi-label{font-size:12px;color:var(--dim)}
+.bi-sites{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
+.bi-site{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;background:var(--field);cursor:pointer}
+.bi-site:hover,.bi-site:has(input:focus-visible){background:var(--hover)}
+.bi-site.on{background:var(--sel)}
+#browser-import-dialog .bi-site input{width:auto;height:auto;margin:0;padding:0;flex:0 0 auto;accent-color:var(--accent);outline:none}
+.bi-site-text{display:flex;flex-direction:column;min-width:0;flex:1}
+.bi-site-name{font-size:13px;font-weight:550}
+.bi-site-title{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.bi-site-tabs{font-size:11px;color:var(--dim);flex:0 0 auto}
+.bi-note{margin:0;font-size:12px;color:var(--dim);line-height:1.5}
+.bi-warn{color:var(--fg)}
+.bi-prompt{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
+.bi-prompt span{flex:1;min-width:0}
+.bi-prompt select{
+  height:30px;padding:0 8px;border:0;border-radius:8px;outline:none;
+  background:var(--field);color:var(--fg);font:inherit;font-size:12px;cursor:pointer;
+}
+.bi-prompt select:hover,.bi-prompt select:focus-visible{background:var(--hover)}
+/* Two across on a screen with room, one on a phone. Four tiers in a single
+   column made a dialog taller than the window it interrupts, which is the one
+   shape a modal should not have. */
+.pw-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
+@media (max-width:560px){.pw-plans{grid-template-columns:1fr}}
+/* Every row carries the colour. This dialog interrupts a turn that could not
+ * be paid for, so each row is the way out of it rather than one recommendation
+ * and a set of alternatives — and an outlined row beside a filled one reads as
+ * the option that is switched off. The advice this dialog gives is still
+ * there: it is the order, which puts a top-up first for a subscriber and a
+ * subscription first for everyone else. */
+/* Its own class rather than .primary, for the reason written above #account:
+ * .primary is the composer's 30x30 icon button, and inheriting its width,
+ * height and display:grid collapsed this row into a square with the label
+ * clipped inside it. */
+/* Quiet cards, one mark.
+ *
+ * These used to be filled with the accent, every one of them, on the reasoning
+ * that each row is the way out of a turn that could not be paid for. That held
+ * when they were a short flat list. At four tiers plus a ladder of top-ups it
+ * is eight blocks of inverted colour in a small dialog, and the eye has
+ * nowhere to rest — the reader is choosing between shades rather than reading
+ * prices.
+ *
+ * The site's pricing page settled this and says why in its own stylesheet: the
+ * offers should read as columns of type rather than as a row of frames, and on
+ * a screen that is mostly numbers the frames are the loudest thing on it. So
+ * the fill goes quiet and the recommended rung takes a deeper fill. No outline
+ * marks anything here, the recommended rung included.
+ */
+button.pw-plan{
+  display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
+  min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:10px;
+  background:var(--field);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
+}
+button.pw-plan.featured{background:var(--sel)}
+.pw-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
+button.pw-plan:hover{background:var(--sel)}
+button.pw-plan.featured:hover{background:var(--hover)}
+button.pw-plan:disabled{opacity:.4;cursor:default}
+.pw-plan-name{display:flex;align-items:center;gap:6px;min-width:0;font-weight:500}
+.pw-plan-under{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.pw-plan-credits{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11.5px}
+.pw-plan-under>span:first-child{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11.5px}
+/* Sits under the price rather than beside the name: the badge up there says
+   which rung to take, this one says what taking it for a year costs. */
+.pw-save{font-size:11px;font-weight:500;color:var(--fg);flex:0 0 auto;font-variant-numeric:tabular-nums}
+/* The money, hard against the right edge and in the same tabular figures as
+   the credits, so four rows read as a column of prices rather than four
+   sentences that happen to end in numbers. */
+.pw-plan-price{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
+/* The one inverted thing left, and the same shape the site uses for it. */
+.pw-tag{
+  font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:999px;
+  background:var(--fg);color:var(--bg);flex:0 0 auto;
+}
+/* One choice about the four rows beneath, so it is a control rather than four
+   more buttons. */
+.pw-toggle{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--field);margin-bottom:2px}
+.pw-tab{
+  flex:1;height:28px;border:0;border-radius:8px;background:transparent;color:var(--dim);
+  font:inherit;font-size:12.5px;cursor:pointer;
+}
+.pw-tab:hover{color:var(--fg)}
+.pw-tab.on{background:var(--bg);color:var(--fg);font-weight:500}
+/* A labelled break, not a rule: what follows is a different kind of purchase,
+   and a bare line would read as the list simply continuing. */
+.pw-sep{
+  display:flex;align-items:center;gap:8px;margin:4px 0 2px;
+  font-size:11.5px;color:var(--dim);
+}
+.pw-sep::after{content:"";flex:1;height:1px;background:var(--line)}
+.provider-advanced{margin-top:8px}
+.provider-advanced>summary{
+  font-size:12px;color:var(--dim);cursor:pointer;list-style:none;padding:2px 0;
+}
+.provider-advanced>summary::-webkit-details-marker{display:none}
+.provider-advanced>summary:hover{color:var(--fg)}
+.row-head .act{margin-left:0}
+.more-row{
+  width:100%;display:flex;align-items:center;gap:8px;border:0;border-radius:12px;
+  background:var(--panel);color:var(--dim);font:inherit;font-size:13px;cursor:pointer;
+  padding:12px 14px;margin-top:10px;
+}
+.more-row:hover{color:var(--fg)}
+/*
+ * The display only applies when open. A dialog is hidden by the browser's own
+ * display:none, which any unconditional author display overrides — the same
+ * mistake that left both picker menus permanently on screen.
+ */
+/* Browsing what is on offer is a list with a sentence under every name and a
+   verb beside it, which is a page rather than a popup — the menu could show
+   the names or the sentences, never both. */
+/* Wider than the other dialogs, and the max-width has to be raised with it:
+   the base rule caps every dialog at 560px, which is right for a question and
+   wrong for a list that wants two columns. */
+#market{width:min(860px,94vw);max-width:min(860px,94vw);max-height:76vh}
+#market[open]{display:flex;flex-direction:column}
+.mk-head{padding:18px 20px 10px;position:relative}
+#mk-list{overflow-y:auto;padding:2px 12px 14px;flex:1}
+/* Where every other window puts it. A "Done" under the list meant scrolling
+   past eighty rows to leave, for a dialog that changes nothing on the way out. */
+.mk-close{
+  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;
+  border:0;background:transparent;color:var(--dim);display:grid;place-items:center;cursor:pointer;
+}
+.mk-close:hover{background:var(--hover);color:var(--fg)}
+.mk-close .ico-sm{width:14px;height:14px;opacity:1}
+.mk-group{
+  font-size:10.5px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase;
+  padding:12px 8px 6px;
+}
+/* Two columns where there is room for two, one where there is not. Twenty
+   rows in a single file is a scroll; the same twenty in pairs is a glance. */
+.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:0 10px}
+.mk-item{display:flex;align-items:flex-start;gap:11px;padding:10px 8px;border-radius:9px}
+.mk-item:hover{background:var(--hover)}
+.mk-item .ico-sm{
+  width:28px;height:28px;margin-top:1px;padding:6px;box-sizing:border-box;
+  border-radius:7px;background:var(--sel);opacity:.75;
+}
+/* A light tile behind every mark. Plenty of brands ship a black-on-transparent
+   logo, which in the dark theme is a black square on a black row — and there
+   is no way to tell from the bytes which ones those are. */
+/* Sized against the row, not against the other glyphs on the page. A row here
+   is a title over two lines of description, and a 18px mark beside 34px of
+   text reads as a bullet point rather than as the thing the row is about. */
+.mk-logo,.mk-mono{
+  width:28px;height:28px;margin-top:1px;flex:0 0 auto;
+  border-radius:7px;box-sizing:border-box;
+}
+/* No tile behind it: a mark that already has its own shape does not want a
+   second one drawn around it. What the tile was solving is solved instead by
+   invert-dark, which is only put on the marks that actually need it. */
+.mk-logo{object-fit:contain}
+/* Plenty of brands ship a black glyph on transparency, which in the dark theme
+   is a black shape on a black row. Inverting turns it white, which is what
+   those same brands ship as their own dark-mode mark. Applied only to marks
+   measured to be dark, flat and mostly transparent — a logo with colour in it,
+   or one carrying its own background, is left exactly as its owner drew it. */
+@media (prefers-color-scheme:dark){
+  :root:not([data-theme="light"]) .mk-logo.invert-dark{filter:invert(1)}
+}
+:root[data-theme="dark"] .mk-logo.invert-dark{filter:invert(1)}
+/* The fallback, and the reason the icon is allowed to fail: a lettered tile
+   still tells two adjacent rows apart, which is the whole job. */
+.mk-mono{display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff}
+.mk-naming{flex:1;min-width:0}
+.mk-name{font-size:13.5px;font-weight:500}
+.mk-desc{font-size:12px;color:var(--dim);margin-top:2px;line-height:1.45}
+.mk-desc.warn{color:var(--warn)}
+.mk-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-top:1px}
+.mk-state{font-size:11.5px;color:var(--dim)}
+.mk-btn{
+  height:26px;padding:0 10px;border:0;border-radius:7px;background:var(--sel);color:var(--fg);
+  font:inherit;font-size:12px;cursor:pointer;
+}
+.mk-btn:hover{background:var(--hover)}
+.mk-btn.go{background:var(--accent);color:var(--bg)}
+.mk-btn:disabled{opacity:.5;cursor:default}
+.mk-icon-btn{
+  width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  font:inherit;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
+}
+.mk-icon-btn:hover{background:var(--sel);color:var(--fg)}
+.mk-icon-btn.drop:hover{color:var(--err)}
+#provider-picker{width:min(420px,92vw);max-height:70vh}
+#project-picker{width:min(380px,92vw);max-height:60vh}
+#browse{width:min(460px,92vw);max-height:70vh}
+#browse[open]{display:flex;flex-direction:column}
+#browse-list{overflow-y:auto;padding:4px 8px;flex:1}
+#browse-here{display:block;padding:2px 4px;color:var(--dim);word-break:break-all}
+#project-picker[open]{display:flex;flex-direction:column}
+#proj-list{overflow-y:auto;padding:4px 8px}
+.proj-foot{padding:4px 8px 10px;box-shadow:0 -1px 0 var(--line)}
+.proj-item{
+  width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;
+  background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
+  padding:8px;text-align:left;
+}
+.proj-item:hover{background:var(--hover)}
+.proj-item .path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Two controls, one row: opening a project and forgetting it are different
+   acts, and a button inside a button is not a thing. The forget stays hidden
+   until the row is under the pointer — it is the rarer of the two by a wide
+   margin, and a column of them reads as a list of things to delete. */
+/* The project header, plus the controls that act on the whole project: a new
+   session there, and the menu. Always shown, in place of a count — they are
+   what the header is for. */
+.fold-row{display:flex;align-items:center}
+.fold-row .fold{flex:1;min-width:0}
+.fold-row .more{
+  display:grid;width:20px;height:20px;border:0;border-radius:5px;background:transparent;
+  color:var(--dim);cursor:pointer;padding:0;place-items:center;flex:0 0 auto;margin-right:6px;
+}
+.fold-row .fold-new{margin-right:2px}
+.fold-row .more:hover,.fold-row .fold.menu-open ~ .more:last-child{background:var(--sel);color:var(--fg)}
+.fold-row .more .ico-sm{width:14px;height:14px;opacity:1}
+.proj-row{display:flex;align-items:center;border-radius:8px}
+.proj-row:hover{background:var(--hover)}
+.proj-row .proj-item:hover{background:transparent}
+.proj-forget{
+  border:0;background:transparent;color:var(--dim);font:inherit;font-size:13px;
+  cursor:pointer;padding:6px 9px;border-radius:8px;opacity:0;flex:none;
+}
+.proj-row:hover .proj-forget,.proj-forget:focus-visible{opacity:1}
+.proj-forget:hover{background:var(--sel);color:var(--fg)}
+/* The command palette.
+ *
+ * The sidebar shows five sessions per project and folds the rest away, which
+ * is right for browsing and wrong for "the one about the parser, two days
+ * ago". So this is a search field over every session in every tree opened
+ * here, the projects themselves, and the few actions worth a shortcut. */
+#palette{width:min(560px,92vw);max-height:min(60vh,520px)}
+#palette[open]{display:flex;flex-direction:column}
+/* One left edge for everything: the field's magnifier, each row's icon, the
+   group labels and the key hints all start 22px in, and the field's text
+   starts where the row labels do. Rows sit 8px in so their highlight has room;
+   their own 14px padding brings the content back to the shared edge. */
+.cmdk-head{position:relative;padding:12px 12px 8px}
+.cmdk-head .ico-sm{position:absolute;left:22px;top:calc(50% - 5.5px);pointer-events:none}
+#palette .cmdk-head input{height:40px;padding:0 10px 0 35px;font-size:14px}
+#cmdk-list{overflow-y:auto;padding:0 8px 8px;flex:1;scroll-padding-block:4px}
+.cmdk-group{
+  padding:12px 14px 5px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
+  color:var(--dim);
+}
+.cmdk-group:first-child{padding-top:6px}
+.cmdk-item{
+  width:100%;display:flex;align-items:center;gap:10px;border:0;border-radius:8px;
+  background:transparent;color:var(--fg);font:inherit;font-size:13px;cursor:pointer;
+  padding:8px 14px;text-align:left;
+}
+/* Hover and the keyboard cursor are the same highlight: a list driven by both
+   at once needs one answer to "which row does Enter take". */
+.cmdk-item.cursor{background:var(--sel)}
+.cmdk-item .ico-sm{opacity:.6}
+.cmdk-item .cmdk-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.cmdk-item .cmdk-sub{
+  font-size:11px;color:var(--dim);flex:0 0 auto;max-width:45%;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.cmdk-empty{padding:12px 14px;font-size:12.5px;color:var(--dim)}
+.cmdk-foot{
+  display:flex;gap:16px;padding:9px 22px 11px;font-size:11px;color:var(--dim);
+  box-shadow:0 -1px 0 var(--line);
+}
+.cmdk-foot kbd{
+  font:inherit;font-size:10.5px;border:1px solid currentColor;border-radius:4px;
+  padding:0 4px;margin-right:5px;opacity:.7;
+}
+#provider-picker[open]{display:flex;flex-direction:column}
+/* Connecting one vendor. Small on purpose: it asks for a single value, and a
+ * panel-sized surface for one field reads as more work than it is. */
+/* Two columns when there is an account behind the dialog, one when there is
+ * not — the width follows, because a 640px shell around a single key field is
+ * a lot of empty room. */
+#connect{width:min(460px,92vw);max-width:min(760px,94vw)}
+/* 640 was sized for a key field with a paragraph beside it. On an account
+ * plan this is a window that asks somebody to sign in, opened over a full
+ * screen, and at that width the lede and supporting points wrapped every two
+ * or three words — a column of ragged fragments reads as fine print. */
+#connect:has(#cn-aside:not([hidden])){width:min(760px,94vw)}
+.cn-grid{display:grid;grid-template-columns:1fr}
+#connect:has(#cn-aside:not([hidden])) .cn-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
+.cn-aside{
+  display:flex;flex-direction:column;gap:20px;padding:30px 28px;
+  background:var(--hover);border-right:1px solid var(--line);
+  border-radius:16px 0 0 16px;
+}
+.cn-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px}
+.cn-brand svg{width:22px;height:22px;flex:0 0 auto}
+.cn-aside-lede{font-size:13px;color:var(--dim);line-height:1.55}
+.cn-points{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
+.cn-points li{
+  font-size:12.5px;color:var(--dim);line-height:1.5;padding-left:16px;position:relative;
+}
+/* A dash rather than a bullet: list markers down the side of a 200px
+ * column read as a form to fill in, which is the thing on the other side. */
+.cn-points li::before{content:"—";position:absolute;left:0;opacity:.55}
+.cn-main{display:flex;flex-direction:column;min-width:0;position:relative}
+/* What the ? explains, as a bubble under it rather than a paragraph in the
+ * body: peeking at a detail must not push the field and the buttons down, or
+ * the button being aimed at moves out from under the pointer. The row menu's
+ * fill and shadow, and no outline, like every other thing that floats here. */
+.cn-tip{
+  position:absolute;top:50px;right:16px;z-index:5;width:min(300px,calc(100% - 32px));
+  padding:10px 12px;border-radius:10px;background:var(--bg);
+  box-shadow:0 1px 2px #0000000f,0 8px 28px #00000024;
+}
+.cn-tip>div+div{margin-top:4px}
+/* Below this the two columns would leave the form narrower than its own
+ * labels, which is the width the fields actually need. */
+@media (max-width:700px){
+  #connect:has(#cn-aside:not([hidden])) .cn-grid{grid-template-columns:1fr}
+  .cn-aside{display:none}
+}
+.cn-head{padding:24px 24px 2px;display:flex;align-items:flex-start;gap:10px}
+.cn-naming{flex:1;min-width:0}
+.cn-title{font-weight:600;font-size:17px;letter-spacing:-.01em}
+.cn-head .row-desc{margin-top:2px}
+/* Where the key is written, and which variable replaces it, is worth being
+   able to find and not worth reading twice. Folded behind a mark that says
+   there is more, rather than printed under a field whose answer most people
+   already have in the clipboard. */
+.cn-why{
+  flex:none;width:20px;height:20px;border:0;border-radius:50%;
+  background:var(--field);color:var(--dim);font:inherit;font-size:11.5px;
+  line-height:1;cursor:pointer;
+}
+.cn-why:hover{background:var(--sel);color:var(--fg)}
+.cn-why[aria-expanded="true"]{background:var(--accent);color:var(--bg)}
+/* The way out, drawn rather than written. The actions row already carries a
+   worded cancel, but this dialog is the first thing a new account sees and it
+   opens over whatever the user was doing — a mark in the corner is where a
+   window that appeared uninvited is looked for first, and it stays put while
+   the row below it changes wording between sending a code and verifying one. */
+.cn-x{
+  flex:none;width:22px;height:22px;border:0;border-radius:50%;padding:0;
+  background:transparent;color:var(--dim);cursor:pointer;
+  display:flex;align-items:center;justify-content:center;
+}
+.cn-x svg{width:13px;height:13px}
+.cn-x:hover{background:var(--hover);color:var(--fg)}
+.cn-body{padding:16px 24px 0;display:flex;flex-direction:column;gap:12px}
+.cn-body input{
+  width:100%;height:42px;border:0;border-radius:10px;background:var(--field);color:var(--fg);
+  /* Room on the right for the reveal control and for whatever a password
+     manager injects into a type=password field — both sit over the text
+     otherwise, on top of the one value being typed. */
+  padding:0 40px 0 13px;font:inherit;font-size:14px;
+}
+.cn-body input:focus{outline:none;background:var(--field-focus)}
+/* Each note on its own line. Run together, the sentence wrapped inside the
+   env var name — ANTHROPIC_API_KE / Y — and put the link in the middle of
+   a paragraph, where it reads as part of the sentence rather than a thing to
+   click. */
+.cn-note{font-size:12.5px;color:var(--dim);line-height:1.5}
+/* The way in, at the size of the thing it is. The shared rule sizes this
+ * button for an account row, where it sits in a line of controls; here it is
+ * the one thing the window exists for and stands over a 42px field. */
+.cn-body button.signin-site{height:44px;border-radius:10px;font-size:14px;font-weight:550}
+.cn-note .mono{white-space:nowrap}
+.cn-local{display:flex;gap:6px;align-items:flex-start}
+.cn-local .ico-sm{width:13px;height:13px;flex:0 0 auto;margin-top:1.5px;color:var(--fg)}
+.cn-local strong{color:var(--fg);font-weight:600}
+/* The dialog ends on its buttons, so it needs the padding the shared rule
+   leaves to whatever follows. */
+#connect .dlg-actions{padding:18px 24px 22px}
+/* Two buttons and a link, not two groups: the pair stays together on the left
+   and only the link floats, so the shared rule's gap is turned off here. */
+#connect .dlg-actions button.quiet{margin-right:0}
+/* An anchor, not a button, so the shared button.quiet rule does not reach it —
+   and it is the one thing here that leaves the app, so it sits apart from the
+   two that do not. */
+#connect .dlg-actions a.quiet{margin-left:auto;text-decoration:none}
+/* Cancel and Get a key are buttons, and look it: the grey fill the other
+ * dialog buttons have, where Connect carries the colour. Bare text beside a
+ * filled button read as a caption, not as something to press. */
+#connect .dlg-actions button.quiet,#connect .dlg-actions a.quiet{
+  padding:10px 16px;border-radius:10px;background:var(--field);color:var(--fg);
+  font-size:14px;line-height:normal;
+}
+#connect .dlg-actions button.quiet:hover,#connect .dlg-actions a.quiet:hover{background:var(--sel)}
+.pp-head{padding:12px 12px 6px}
+.pp-head input{
+  width:100%;height:34px;border:0;border-radius:9px;background:var(--field);color:var(--fg);
+  padding:0 11px;font:inherit;font-size:13px;
+}
+.pp-head input:focus{outline:none;background:var(--field-focus)}
+#pp-list{overflow-y:auto;padding:4px 8px 12px}
+.pp-provider{border-radius:9px}
+.pp-provider[open]{background:var(--panel)}
+.pp-item{
+  width:100%;display:flex;align-items:center;gap:9px;border-radius:9px;list-style:none;
+  color:var(--fg);font:inherit;font-size:13px;cursor:pointer;padding:9px 9px;text-align:left;
+}
+.pp-item::-webkit-details-marker{display:none}
+.pp-item:hover{background:var(--hover)}
+.pp-provider[open] .chev{transform:rotate(90deg)}
+.pp-body{padding:0 9px 10px}
+.pp-body .ghost{margin-top:8px;height:28px;font-size:12px}
+.pp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pp-item .muted{font-size:11px;flex:0 0 auto}
+.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
+.chip{
+  border:0;background:var(--field);color:var(--fg);border-radius:8px;padding:5px 10px;
+  font:inherit;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:7px;
+}
+.chip:hover{background:var(--sel)}
+.chip.on{background:var(--accent);color:var(--bg)}
+.chip .sub{font-size:11px;opacity:.6}
+/* A pill, not a word: .sub beside it is a quieter copy of the name, and this
+   is a different kind of claim about the model rather than more of its name.
+   Same geometry as .mk-tag and the picker's own. Both other chip states repaint
+   the background this sits on — hover takes var(--sel), selected takes the
+   accent — so the pill is moved each time rather than dissolving into it. */
+.chip .free{
+  flex:0 0 auto;padding:1px 5px;border-radius:4px;background:var(--sel);
+  color:var(--dim);font-size:10px;font-weight:500;letter-spacing:.02em;
+  text-transform:uppercase;
+}
+.chip:hover .free{background:var(--field)}
+.chip.on .free{background:var(--bg);color:var(--accent)}
+.panel .row-head h2{margin:0}
+.panel .row-head{margin-bottom:14px}
+.muted{color:var(--dim)}
+#empty{max-width:720px;margin:7vh auto 0;text-align:left}
+/* The sidebar lockup is 18px and often off-screen at narrow widths, so the
+   empty state carries its own full-size one: same geometry, scaled up, and it
+   is the largest thing on the screen — the prompt below it drops to 20px so
+   the two do not compete. */
+.empty-brand{display:flex;align-items:center;gap:18px;margin:0 0 30px}
+.brand-mark{width:68px;height:68px;color:var(--fg);flex:0 0 auto}
+.brand-mark svg{width:68px;height:68px;display:block}
+.brand-name{font-size:42px;font-weight:650;letter-spacing:-.035em;line-height:1.1}
+#empty h1{font-size:21px;font-weight:550;letter-spacing:-.01em;margin:0 0 8px}
+#empty p{color:var(--dim);margin:0 0 22px;font-size:13.5px}
+/* Stacked, not a row of pills: each one is a sentence rather than a word, and
+   three sentences side by side either wrap mid-phrase or shrink the type. Down
+   the page they read as a short list of offers, which is what they are. */
+#starters{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
+#starters button{
+  border:0;background:var(--panel);color:var(--fg);border-radius:999px;
+  padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;text-align:left;
+  max-width:100%;
+}
+#starters button:hover{background:var(--hover)}
+/* Parked in the turn's own bottom margin: laid out in flow it reserved ~30px
+   under every reply whether or not it was visible, which read as a stray gap
+   after a reload — and collapsing it on hover would shove the transcript. */
+.actions{
+  position:absolute;left:0;top:100%;margin-top:1px;
+  display:flex;gap:4px;opacity:0;transition:opacity .12s;
+}
+.turn:hover .actions,.actions:focus-within{opacity:1}
+.act{
+  border:0;background:transparent;color:var(--dim);border-radius:6px;
+  padding:3px 8px;font:inherit;font-size:12px;cursor:pointer;
+  display:inline-flex;align-items:center;gap:5px;
+}
+.act:hover{background:var(--hover);color:var(--fg)}
+/* Sized to the label it sits beside, not to the 16px grid the sidebar uses. */
+.act .ico-sm{width:13px;height:13px;opacity:.9}
+.md{word-break:break-word}
+.md-p{margin:0 0 10px;white-space:pre-wrap}
+.md-h{margin:16px 0 8px;font-size:14px}
+.md-h1{font-size:18px} .md-h2{font-size:16px} .md-h3{font-size:15px}
+.md>.md-h:first-child{margin-top:0}
+.md-list{margin:0 0 10px;padding-left:22px}
+.md-list .md-list{margin:2px 0 0}
+.md-list>li{margin:2px 0}
+.md-loose>li>.md-p{margin:0 0 6px}
+.md-list>li.md-task{list-style:none}
+.md-check{margin:0 7px 0 -20px;vertical-align:-1px}
+.md-quote{margin:0 0 10px;padding-left:12px;border-left:3px solid var(--line);color:var(--dim)}
+.md-code{background:var(--field);border-radius:5px;padding:1.5px 5px;font-size:13px}
+.md-link{color:var(--accent)}
+.md-dead{text-decoration:underline dotted;text-underline-offset:3px}
+.md-hr{border:0;height:1px;background:var(--line);margin:14px 0}
+.md-table-wrap{overflow-x:auto;margin:0 0 12px}
+.md-table{border-collapse:collapse;font-size:13px}
+.md-table th,.md-table td{padding:6px 12px;text-align:left;vertical-align:top}
+.md-table th{font-weight:600;background:var(--field)}
+.md-table tbody tr:nth-child(even){background:var(--hover)}
+.code-wrap{border-radius:10px;overflow:hidden;margin:0 0 12px;background:var(--panel)}
+.code-bar{
+  display:flex;justify-content:space-between;align-items:center;padding:4px 10px;
+  font-size:11px;color:var(--dim);
+}
+.code-copy{background:none;border:0;color:var(--dim);cursor:pointer;font:inherit;font-size:11px}
+.code-copy:hover{color:var(--fg)}
+pre.code{margin:0;padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.55}
+.t-kw{color:var(--kw)} .t-str{color:var(--str)} .t-com{color:var(--com)} .t-num{color:var(--num)}
+
+/* tool cards */
+details.tool{border-radius:9px;margin:0 0 6px;background:var(--panel);overflow:hidden}
+details.tool>summary{
+  padding:7px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;
+  font-size:13px;list-style:none;
+}
+details.tool>summary::-webkit-details-marker{display:none}
+/* The native disclosure marker is hidden so it does not vary by browser; put
+ * an explicit one after the duration so a closed card still looks clickable. */
+details.tool>summary::after{
+  content:"";width:6px;height:6px;flex:0 0 auto;margin:0 2px 0 3px;
+  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
+  color:var(--dim);opacity:.7;transform:rotate(-45deg);transition:transform .15s,opacity .12s;
+}
+details.tool[open]>summary::after{transform:rotate(45deg)}
+details.tool>summary:hover::after{opacity:1}
+.tool .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}
+.tool.done .dot{background:var(--ok)}
+.tool.failed .dot{background:var(--err)}
+.tool .name{font-family:ui-monospace,monospace}
+.tool .ms{color:var(--dim);font-size:11px;margin-left:auto}
+.tool-body{padding:2px 12px 10px}
+.tool-body pre{margin:0;overflow-x:auto;font-size:12px;max-height:340px}
+.tool-body .label{font-size:11px;color:var(--dim);margin:0 0 4px}
+.tool-body .kv{margin:0 0 8px}
+.tool-summary{font-size:12.5px;line-height:1.5;margin:0 0 6px}
+details.tool-raw>summary{font-size:11px;color:var(--dim);cursor:pointer;margin:0 0 4px}
+pre.diff{margin:0;font-size:12px;line-height:1.5;overflow-x:auto}
+.d-add{background:var(--add-bg);color:var(--add)}
+.d-del{background:var(--del-bg);color:var(--del)}
+.d-same{color:var(--dim)}
+
+/* A line of text, not a box: it reads as part of the reply — what was done
+ * between two paragraphs — and the box is kept for what opens under it. The
+ * chevron trails the words, where it points at what a click will show. */
+details.work{margin:0 0 12px}
+details.work>summary{
+  padding:3px 0;cursor:pointer;font-size:13.5px;color:var(--dim);list-style:none;
+  display:flex;gap:6px;align-items:center;width:max-content;max-width:100%;
+}
+details.work>summary:hover{color:var(--fg)}
+details.work>summary::-webkit-details-marker{display:none}
+details.work>summary::after{
+  content:"";width:6px;height:6px;flex:0 0 auto;margin-left:2px;
+  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
+  transform:rotate(-45deg);transition:transform .15s;
+}
+details.work[open]>summary::after{transform:rotate(45deg)}
+.work-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+details.work.failed>summary{color:var(--err)}
+.work-body{padding:8px;margin-top:4px;border-radius:10px;background:var(--panel)}
+.work-body details.tool{margin-bottom:6px}
+/* Spacing separates neighbouring calls; keeping it after the final one makes
+ * a single card's summary sit visibly above the centre of the filled panel. */
+.work-body details.tool:last-child{margin-bottom:0}
+/* the working indicator */
+.working{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:13.5px;margin:0 0 10px}
+.working-time{font-size:12px;opacity:.7}
+.spinner{
+  width:12px;height:12px;flex:0 0 auto;border-radius:50%;
+  border:1.5px solid var(--line);border-top-color:var(--brand);
+  animation:spin .7s linear infinite;
+}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* A silver band sweeps the brand-coloured label while the model is still
+   thinking; the reasoning block stops, and falls back to --dim, once
+   sealThinking drops its spinner. */
+.working-label,
+details.thinking>summary:has(.spinner) .t-label{
+  background:linear-gradient(90deg,var(--brand-ink) 0%,var(--brand-ink) 42%,var(--brand-shine) 50%,var(--brand-ink) 58%,var(--brand-ink) 100%);
+  background-size:250% 100%;
+  -webkit-background-clip:text;background-clip:text;
+  -webkit-text-fill-color:transparent;color:transparent;
+  animation:shimmer 1.8s linear infinite;
+}
+@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
+@media (prefers-reduced-motion:reduce){
+  /* A spinner is decoration; the elapsed seconds carry the same information. */
+  .spinner{animation:none;border-top-color:var(--line)}
+  .working-label,
+  details.thinking>summary:has(.spinner) .t-label{
+    animation:none;background:none;-webkit-text-fill-color:currentColor;color:var(--brand-ink);
+  }
+}
+
+/* reasoning */
+details.thinking{margin:0 0 10px}
+details.thinking>summary{
+  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
+  color:var(--dim);font-size:13px;
+}
+details.thinking>summary::-webkit-details-marker{display:none}
+details.thinking>summary:hover{color:var(--fg)}
+/* A chevron after the label says the block opens; it turns down when open. */
+details.thinking>summary::after{
+  content:"";width:5px;height:5px;flex:0 0 auto;margin-left:2px;
+  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
+  transform:rotate(-45deg);transition:transform .15s;
+}
+details.thinking[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
+.thinking-body{
+  white-space:pre-wrap;color:var(--dim);font-size:13.5px;line-height:1.6;
+  margin-top:8px;padding-left:12px;border-left:2px solid var(--line);
+}
+/* the tool card dot pulses while its call is in flight */
+.tool:not(.done):not(.failed) .dot{animation:pulse 1.1s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
+@media (prefers-reduced-motion:reduce){.tool .dot{animation:none}}
+.notice{color:var(--dim);font-size:12.5px;margin:0 0 8px}
+.err{color:var(--err);white-space:pre-wrap;margin:0 0 8px}
+
+/* composer */
+form{padding:6px 24px 18px;background:var(--bg)}
+.composer{
+  position:relative;
+  max-width:720px;margin:0 auto;border-radius:16px;
+  background:var(--field);padding:16px 16px 10px;transition:background .15s,box-shadow .15s;
+}
+/* The top edge, as a grab handle. It spans the box rather than sitting in a
+   corner, because the edge is what a person aims at; the bar only appears
+   under the cursor, so an idle composer keeps its clean top line. */
+#grip{
+  position:absolute;top:0;left:0;right:0;height:12px;cursor:ns-resize;
+  display:grid;place-items:center;touch-action:none;
+}
+/* Faint rather than hidden: a handle nobody can see is a handle nobody
+   finds. A pill, not a rule across the top — this is a thing to grab, and the
+   design carries no borders. */
+#grip::before{
+  content:"";width:32px;height:3px;border-radius:999px;
+  background:var(--dim);opacity:.2;transition:opacity .12s,width .12s;
+}
+#grip:hover::before,#grip.dragging::before{opacity:.5;width:40px}
+/* While dragging, the pointer owns the screen: without this a fast drag
+   selects the transcript behind it. */
+body.resizing{user-select:none;cursor:ns-resize}
+.composer:focus-within{background:var(--field-focus)}
+textarea{
+  width:100%;resize:none;min-height:56px;max-height:32vh;padding:0;border:0;
+  background:transparent;color:var(--fg);font:inherit;line-height:1.6;
+}
+textarea:focus{outline:none}
+textarea::placeholder{color:var(--dim)}
+.input-wrap{position:relative}
+/* Block, not the inline-block a textarea is by default: inline leaves room
+   under the baseline for a descender, so the wrapper ends up a few pixels
+   taller than the field inside it and the two scroll by different amounts. */
+/* Above the backdrop, and that needs saying: the mirror is absolutely
+   positioned, which puts it in front of a static sibling however the two are
+   ordered in the markup. Without this the chip paints over the words it is
+   drawn for. */
+.input-wrap textarea{display:block;position:relative;z-index:1}
+/* The field draws the caret and the selection; the mirror draws the words.
+   With the glyphs in the mirror a mention can carry something a textarea
+   never could — an icon in the slot the @ sign would have taken — because
+   the field only has to agree on where each glyph lands, not on what is
+   drawn there. The selection is translucent so the words under it stay
+   readable; an opaque highlight would sit on top of the mirror. */
+/* The native caret is hidden and one is drawn instead. A textarea offers
+   caret-color and nothing else — no width — and at one device pixel the bar
+   is hard to find on a pale field. See placeCaret(). */
+.input-wrap textarea{color:transparent;caret-color:transparent}
+#caret{
+  position:absolute;width:2px;border-radius:1px;background:var(--brand);
+  pointer-events:none;z-index:2;opacity:0;
+}
+#caret.on{animation:caret-blink 1.06s steps(1,end) infinite}
+@keyframes caret-blink{0%,55%{opacity:1}56%,100%{opacity:0}}
+/* Solid while the caret is moving: a bar that blinks out mid-keystroke reads
+   as a dropped character. The class is taken off and put back to restart the
+   animation, which is what makes the phase reset. */
+#caret.on.moving{animation:none;opacity:1}
+@media (prefers-reduced-motion:reduce){#caret.on{animation:none;opacity:1}}
+/* Measures where the caret goes: the mirror's metrics, none of its ink. */
+#caret-probe{visibility:hidden}
+.input-wrap textarea::selection{background:var(--brand-tint)}
+/* Every metric that decides where a glyph lands has to match the field: font,
+   line-height, wrapping, and the padding, which is zero on this textarea.
+   Six pixels wider on each side with the text pushed back in by six: the
+   glyphs land where the textarea puts them, and the chip's background — drawn
+   outside its own advance width — has somewhere to go instead of being cut off
+   at the start of a line. */
+#input-mirror,#caret-probe{
+  position:absolute;top:0;bottom:0;left:-6px;right:-6px;padding:0 6px;border:0;
+  font:inherit;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;
+  color:var(--fg);pointer-events:none;overflow:hidden;
+}
+/**
+ * The floating chip's surface, inline. No remove button — Backspace takes the
+ * whole mention instead — and the icon lives in the slot the @ sign vacated.
+ *
+ * White on the field, dark on the dark field — the same two tokens the chip
+ * above the box uses. Vertical padding does not enter the inline advance and
+ * the line-height leaves room for it. Horizontal padding is given back as
+ * negative margin so no glyph moves: the wash reaches into the whitespace on
+ * either side of the mention. A space is four pixels wide, and the menu
+ * inserts two of them on each side (see roomBefore), which is what allows
+ * four of padding and still four of clearance to the next word.
+ *
+ * The shadow is a lift, not an outline. A hard ring made each mention read as
+ * a small input field dropped into the middle of a sentence.
+ */
+#input-mirror mark{
+  background:var(--bg);color:var(--fg);border-radius:6px;
+  padding:3px 4px;margin:0 -4px;
+  box-shadow:var(--mention-lift);
+  box-decoration-break:clone;-webkit-box-decoration-break:clone;
+}
+/* The @ sign's own advance width, measured on every paint, with the icon of
+   what was mentioned drawn in it instead. The width is the field's, so the
+   name after it lands exactly where the field puts it. */
+#input-mirror mark .at{
+  display:inline-block;width:var(--at-w,13.5px);vertical-align:-1.5px;
+  color:var(--dim);
+}
+#input-mirror mark .at svg{width:11px;height:11px;display:block;margin-left:.5px}
+/* The mirror sits exactly under the textarea, so every metric that decides
+   where a glyph lands has to match: font, line-height, wrapping, and the
+   padding, which is zero on the composer's textarea and must be zero here. */
+textarea.boxed{
+  border:0;background:var(--field);border-radius:6px;
+  padding:7px 9px;resize:vertical;min-height:0;font:inherit;font-size:12px;
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+}
+textarea.boxed:focus{outline:none;background:var(--field-focus)}
+.composer-bar{display:flex;align-items:center;gap:6px;margin-top:10px}
+.composer.drag{background:var(--field-focus);outline:2px dashed var(--line);outline-offset:-6px}
+.icon-btn{
+  width:26px;height:26px;border:0;border-radius:7px;background:transparent;color:var(--fg);
+  font:inherit;cursor:pointer;display:grid;place-items:center;
+}
+.icon-btn svg{width:14px;height:14px}
+.icon-btn:hover{background:var(--hover)}
+/* The folder it runs in, set at the same weight as the model beside it: three
+   settings on one bar, none of them shouting over the others. */
+#workspace-picker .picker-btn{gap:6px}
+#workspace-picker .ico-sm{width:13px;height:13px;opacity:1;flex:0 0 auto}
+/*
+ * Reasoning effort. A setting of its own beside the model rather than rows in
+ * the model list: the two are picked independently, and folding tiers into
+ * the list would multiply every model by six.
+ *
+ * The panel is a rail of stops read left to right, faster to smarter, because
+ * the tiers are one quantity and a list would present them as unrelated
+ * options. Stops come from the model: a tier it lacks is not drawn at all.
+ */
+#effort-picker .picker-btn{gap:5px}
+#effort-picker .picker-btn .ico-sm{width:13px;height:13px;opacity:1}
+#effort-picker .menu{min-width:272px;width:272px;padding:14px 14px 12px;left:auto;right:0}
+.effort-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
+.effort-title{font-size:13px;color:var(--dim)}
+.effort-current{font-size:13px;font-weight:600;color:var(--fg)}
+.effort-desc{margin-top:3px;font-size:12px;line-height:1.4;color:var(--dim);min-height:34px}
+.effort-ends{display:flex;justify-content:space-between;margin:10px 0 6px;font-size:11.5px;color:var(--dim)}
+.effort-rail{
+  --stop:26px;position:relative;display:flex;align-items:center;justify-content:space-between;
+  height:26px;border-radius:13px;background:var(--hover);
+}
+/* Filled up to the centre of the chosen stop, so the amount reads at a glance. */
+.effort-fill{position:absolute;left:0;top:0;bottom:0;border-radius:13px;background:var(--line);transition:width .15s}
+.effort-stop{
+  position:relative;z-index:1;width:26px;height:26px;padding:0;border:0;outline:0;border-radius:50%;
+  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
+}
+.effort-stop:focus{outline:0}
+.effort-stop:focus-visible .effort-dot{background:var(--fg)}
+.effort-stop:hover .effort-dot{background:var(--fg);opacity:.7}
+.effort-dot{width:6px;height:6px;border-radius:50%;background:var(--dim);opacity:.6}
+.effort-knob{width:18px;height:18px;border-radius:50%;background:var(--fg)}
+.effort-names{display:flex;justify-content:space-between;margin-top:6px}
+.effort-name{width:26px;display:flex;justify-content:center;font-size:11px;color:var(--dim);white-space:nowrap}
+.effort-name.on{color:var(--fg);font-weight:600}
+#attachments{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
+#attachments:empty{display:none}
+/* Outside the composer, tracking its width so the rows line up with the box
+   they are waiting on. min-width:0 twice over — here and on the line inside
+   each row — because a flex item defaults to refusing to shrink below its
+   content, and one long queued line would push the page sideways at phone
+   width instead of being cut. */
+#queued{
+  display:flex;flex-direction:column;gap:4px;min-width:0;
+  max-width:720px;margin:0 auto 6px;
+}
+#queued:empty{display:none}
+/* Full width, one per row, because these are sentences rather than file
+   names: a chip that fits three words of a queued message says nothing about
+   which message it is. --panel, not --field: out here the backdrop is the
+   page, and the field's 2% wash is invisible against it. */
+.q{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:10px;padding:7px 10px 7px 12px;font-size:12px;min-width:0}
+/* min-width:0 or the ellipsis never engages: a flex item refuses to shrink
+   below its content by default, so at phone width the row pushed the page
+   sideways instead of cutting the line. */
+.q .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
+/* Not ".mark": that is the connector glyph, and it is a fixed 18px box. */
+.q .tag{flex:0 0 auto;color:var(--dim);font-size:11px}
+/* Joining the turn already running, rather than waiting behind it. The brand
+   colour is what this app uses for the harness being alive, which is exactly
+   what the difference is. */
+.q.soon .tag{color:var(--brand-ink)}
+:root[data-theme="dark"] .q.soon .tag{color:var(--brand)}
+.q .go{
+  flex:0 0 auto;height:22px;padding:0 9px;border:0;border-radius:7px;
+  background:var(--hover);color:var(--fg);cursor:pointer;
+  font:inherit;font-size:11px;white-space:nowrap;
+}
+.q .go:hover{background:var(--brand-tint);color:var(--brand-ink)}
+:root[data-theme="dark"] .q .go:hover{color:var(--brand)}
+.q .x{border:0;background:transparent;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
+.q .x:hover{color:var(--err)}
+.att{
+  display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:8px;
+  padding:5px 8px;font-size:12px;max-width:260px;
+}
+.att img{width:26px;height:26px;object-fit:cover;border-radius:5px;flex:0 0 auto}
+.att .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.att .sz{color:var(--dim);font-size:11px;flex:0 0 auto}
+.att .x{border:0;background:transparent;color:var(--dim);cursor:pointer;font:inherit;padding:0 2px}
+.att .x:hover{color:var(--err)}
+/* A referenced path is not an uploaded file: nothing was copied anywhere, so
+   the chip carries a mark for what it points at instead of a size. */
+.att .ico-sm{width:13px;height:13px;opacity:.65}
+.att .where{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Wider than the model picker's: these rows carry a name and the folder it
+   sits in, and truncating the folder away leaves three files called index.ts. */
+#attach-picker .menu{min-width:min(380px,86vw)}
+#attach-picker .menu-item{cursor:pointer;gap:9px;padding-left:9px;padding-right:9px}
+#attach-picker .menu-item .tick{width:auto;opacity:.55;margin-left:auto;padding-left:8px}
+#attach-picker .menu-item.on .tick{opacity:.85}
+/* A step up from hover, not a slab of ink. The keyboard cursor and the pointer
+   should not look identical — one of them means Enter takes this row — but the
+   menu is a quiet surface and the difference is worth one tone, not two. */
+#attach-picker .menu-item.cursor{background:var(--sel)}
+#attach-picker .menu-item.cursor .ico-sm{opacity:.8}
+#attach-picker .menu-item .ico-sm{opacity:.55}
+/* The stacked rows carry a name over a sentence, so they are already two lines
+   tall; the mark beside them is a label for the kind, not an illustration, and
+   at 16px it was the widest thing in a row whose job is the words. */
+/* Centred on the name, not on the row. A stacked row is a name over a
+   sentence, so its box centre sits somewhere in the gap between the two lines
+   and a mark aligned to it reads as sagging. The name's line box is 22px at
+   this size and the mark is 13px, so half the difference puts one centre on
+   the other. The rule above this one sets the 1px the flush-left tick needed
+   when every row was a single line; on these it is the same 1px of sag. */
+#attach-picker .menu-item.stacked .ico-sm{width:13px;height:13px;margin-top:4.5px}
+/* The vendor mark at the row's glyph size, the mono tile lettered to match. */
+#attach-picker .menu-item .mk-logo,#attach-picker .menu-item .mk-mono{
+  width:16px;height:16px;border-radius:4px;margin-top:3px;font-size:9px;
+}
+#attach-picker .menu-item.stacked .tick{margin-top:0}
+#attach-picker .menu-item.stacked{padding-top:5px;padding-bottom:5px}
+#attach-picker .menu-item.stacked .stack{gap:1px}
+#attach-picker .menu-item.on .ico-sm{opacity:.9}
+.menu-hint{padding:6px 8px 8px;font-size:11.5px;color:var(--dim)}
+/* A row that has something to say about itself: the name on one line and a
+   sentence under it. Beside the name, that sentence took the whole row and
+   left the name ellipsed to nothing. */
+.menu-item.stacked{align-items:flex-start;padding-top:7px;padding-bottom:7px}
+.menu-item.stacked .ico-sm,.menu-item.stacked .tick{margin-top:1px}
+.menu-item .stack{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
+.menu-item .note{
+  font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+/* Removing what a row describes, from the row itself. Faint until the row is
+   under the pointer or the keyboard: it is the rarer of the two things anyone
+   comes to this list to do. */
+.row-drop{
+  margin-left:auto;flex:0 0 auto;width:20px;height:20px;border:0;border-radius:6px;
+  background:transparent;color:var(--dim);font:inherit;font-size:14px;line-height:1;
+  cursor:pointer;display:grid;place-items:center;padding:0;opacity:.5;
+}
+.menu-item:hover .row-drop,.menu-item.cursor .row-drop{opacity:1}
+.row-drop:hover{background:var(--sel);color:var(--err)}
+/* The + menu has no search box of its own, so the menu itself takes focus for
+   the arrow keys. A ring around a popup that was just clicked open says
+   nothing the row highlight is not already saying. */
+.menu:focus{outline:none}
+/* No ring and no border marks a focused or selected thing anywhere in the app.
+   That includes the browser's own focus outline, which drew a blue ring round
+   the account button while its menu was open. Keyboard focus is carried by a
+   fill instead; the zero-specificity selector leaves every control that
+   already paints its own background alone. */
+:focus,:focus-visible{outline:none}
+:where(button,a,summary,[role="button"],[tabindex]):focus-visible{background-color:var(--hover)}
+/* The triangle the group headers use, turned on a row that leads somewhere:
+   the + opens onto four offers, and three of them go one screen deeper. */
+.menu-item .chev{
+  width:0;height:0;flex:0 0 auto;margin-left:auto;
+  border-left:4px solid currentColor;border-top:3px solid transparent;
+  border-bottom:3px solid transparent;opacity:.45;
+}
+.menu-item .sub + .chev{margin-left:6px}
+.menu-item:hover .chev,.menu-item.cursor .chev{opacity:.8}
+.composer-spacer{flex:1}
+button.primary{
+  width:30px;height:30px;border:0;border-radius:8px;background:var(--accent);color:var(--bg);
+  font:inherit;cursor:pointer;display:grid;place-items:center;padding:0;
+}
+button.primary svg{width:16px;height:16px}
+button.primary:disabled{opacity:.3;cursor:default}
+/* Idle with messages still waiting: send releases them, and the button says
+   so by quietly breathing rather than by growing an outline. */
+#send.has-queue{animation:queue-wait 2.4s ease-in-out infinite}
+@keyframes queue-wait{0%,100%{opacity:1}50%{opacity:.55}}
+@media (prefers-reduced-motion:reduce){#send.has-queue{animation:none;opacity:.8}}
+button.ghost,a.ghost{
+  height:30px;padding:0 12px;border:0;border-radius:8px;
+  background:var(--sel);color:var(--fg);font:inherit;font-size:12.5px;cursor:pointer;
+}
+button.ghost:hover,a.ghost:hover{background:var(--hover)}
+#jump{
+  position:absolute;right:24px;bottom:118px;border-radius:999px;padding:7px 15px;border:0;
+  background:var(--bg);color:var(--fg);cursor:pointer;font:inherit;font-size:12px;
+  box-shadow:0 1px 2px #0000000f,0 6px 20px #0000001f;
+}
+
+dialog{
+  border:0;border-radius:16px;background:var(--bg);color:var(--fg);
+  padding:0;max-width:min(560px,92vw);font:inherit;
+  box-shadow:0 2px 6px #00000014,0 20px 60px #00000033;
+}
+dialog::backdrop{background:rgba(0,0,0,.55)}
+/* The approval dialog.
+ *
+ * Everything here is arranged around one question: what exactly is about to
+ * happen to which file. The parameters used to be dumped as JSON, which put
+ * escaped newlines and the tool's own field names in front of the one thing
+ * worth reading — so the body renders the payload instead, and the plumbing
+ * moved behind a toggle.
+ *
+ * Three parts and no rules between them: what (head), the payload (one filled
+ * block, aligned with the head), and the answer. Hairlines between four
+ * sections made the middle read as leftovers from different components. */
+#ask{width:min(620px,94vw);max-width:min(620px,94vw);padding-bottom:10px}
+.ask-head{padding:18px 20px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
+.ask-tag{
+  align-self:flex-start;font-size:11.5px;line-height:1.7;padding:0 9px;border-radius:999px;
+  background:var(--field);color:var(--dim);
+}
+.ask-title{display:flex;align-items:center;gap:10px;min-width:0}
+.ask-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;flex:none}
+.ask-target{font-size:15px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;min-width:0}
+.ask-target.mono{
+  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:13.5px;font-weight:500;white-space:pre-wrap;
+}
+.ask-target .dir{color:var(--dim);font-weight:400}
+.ask-meta{font-size:12px;line-height:1.5;color:var(--dim);overflow-wrap:anywhere}
+.ask-body{margin:0 20px;border-radius:10px;background:var(--field);max-height:280px;overflow:auto;padding:8px 0}
+.ask-body.clamped{max-height:none;overflow:hidden}
+.ask-line{
+  display:flex;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;
+}
+.ask-line .n{
+  flex:0 0 36px;text-align:right;padding-right:12px;color:var(--dim);
+  opacity:.65;user-select:none;
+}
+.ask-body.diff .ask-line .n{flex-basis:28px;text-align:center;padding-right:4px}
+.ask-line .s{flex:1;padding-right:14px}
+.ask-line.add{background:var(--add-bg)}
+.ask-line.add .s{color:var(--add)}
+.ask-line.del{background:var(--del-bg)}
+.ask-line.del .s{color:var(--del)}
+.ask-body .ask-code{
+  margin:0;padding:2px 14px;font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;
+}
+.ask-body .kv{padding:4px 14px}
+.ask-more{display:flex;gap:4px;padding:6px 14px 0}
+.ask-more button{
+  border:0;border-radius:7px;background:transparent;color:var(--dim);
+  font:inherit;font-size:12px;padding:4px 8px;cursor:pointer;
+}
+.ask-more button:hover{background:var(--hover);color:var(--fg)}
+/* The three allow options are one decision at three scopes, not three
+ * decisions, so they sit on one row as peers. Splitting them across two rows
+ * under a "remember the answer" heading asked the same question twice. */
+.dlg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 20px 4px}
+/* Holds the way out apart from the answers without a spacer element: a growing
+ * spacer claims width of its own, which forced the row to wrap one button early
+ * on a narrow window. The quiet button leads its row, so the gap goes after it. */
+.dlg-actions button.quiet{margin-right:auto}
+.dlg-actions button{
+  padding:8px 14px;border:0;border-radius:9px;
+  background:var(--field);color:var(--fg);font:inherit;font-size:13.5px;cursor:pointer;
+  display:inline-flex;align-items:center;gap:7px;
+}
+.dlg-actions button:hover{background:var(--sel)}
+/* Once is the default answer and the one Enter picks, so it carries the fill.
+ * The other two are the same answer held longer — same size, same row, less
+ * weight. Denying is the safe answer and gets no colour at all: the red used
+ * to sit on "No", which argued against the harmless choice. */
+/* Not "primary": that class is already the 30x30 icon button in the composer,
+ * and reusing it here collapsed this one into a circle. */
+.dlg-actions button.approve{background:var(--accent);color:var(--bg)}
+.dlg-actions button.approve:hover{opacity:.88}
+/* The default focus ring draws a hard blue rectangle around whichever button
+ * opens focused, which reads as a border on the dialog's one filled control.
+ * Keyboard users still get a visible state — it just comes from the fill. */
+.dlg-actions button:focus-visible{outline:none;background:var(--sel)}
+.dlg-actions button.approve:focus-visible{background:var(--accent);opacity:.88}
+.dlg-actions button.quiet{background:transparent;color:var(--dim)}
+.dlg-actions button.quiet:hover{background:var(--hover);color:var(--fg)}
+.dlg-actions kbd{
+  font:inherit;font-size:11px;opacity:.7;background:var(--field);border-radius:4px;
+  padding:0 5px;line-height:1.6;
+}
+.dlg-actions button.approve kbd{background:#ffffff26}
+/* Only while a "remember" answer is focused, and taking no room otherwise: a
+ * reserved empty line under the buttons read as the dialog being unfinished. */
+.ask-scope{display:grid;padding:6px 20px 2px;font-size:11.5px;line-height:1.6;color:var(--dim)}
+.ask-scope>span{
+  grid-area:1/1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  opacity:0;pointer-events:none;transition:opacity .12s ease;
+}
+.ask-scope[data-show="once"]>[data-scope="once"],.ask-scope[data-show="session"]>[data-scope="session"],
+.ask-scope[data-show="project"]>[data-scope="project"]{opacity:1;pointer-events:auto}
+
+/* Parameters as a reader wants them: names on the left, values as values —
+ * text with its line breaks, lists as chips — instead of JSON with line numbers. */
+.kv{display:grid;grid-template-columns:minmax(64px,max-content) minmax(0,1fr);column-gap:14px;row-gap:6px;font-size:12.5px;line-height:1.55}
+.kv-k{color:var(--dim);font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;overflow-wrap:anywhere}
+.kv-v{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
+.kv-v.empty{color:var(--dim)}
+.kv-chip{display:inline-block;margin:0 4px 2px 0;padding:0 8px;border-radius:999px;background:var(--sel);font-size:12px;white-space:nowrap}
+.kv-v pre{margin:0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
+
+/*
+ * Phone-only chrome, declared before the breakpoint that shows it: a base
+ * rule written after the media query wins the cascade, which is how the
+ * burger spent a release at display:none on every width.
+ */
+#burger{
+  display:none;width:36px;height:36px;margin-left:-8px;border:0;border-radius:8px;
+  background:none;color:var(--fg);font:inherit;font-size:18px;cursor:pointer;place-items:center;
+}
+#burger:hover{background:var(--hover)}
+#nav-close{
+  display:none;width:32px;height:32px;margin-left:auto;border:0;border-radius:8px;
+  background:transparent;color:var(--dim);cursor:pointer;padding:0;place-items:center;
+}
+#nav-close svg{width:14px;height:14px}
+#nav-close:hover{background:var(--hover);color:var(--fg)}
+#scrim{display:none;position:fixed;inset:0;z-index:19;background:#00000059}
+#review-close{
+  display:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
+  color:var(--fg);cursor:pointer;padding:0;place-items:center;margin-left:8px;
+}
+#review-close svg{width:16px;height:16px}
+
+/*
+ * A phone.
+ *
+ * The desktop layout is three columns that share one window; a phone has room
+ * for one of them at a time. The sidebar becomes a drawer over the transcript,
+ * the review and artifact panes take the whole screen while they are open,
+ * and the composer's bar is split in two: where the session runs and what it
+ * may do sit above the text, the model and the send button below it.
+ */
+@media (max-width:760px){
+  body>aside{
+    position:fixed;inset:0 auto 0 0;z-index:20;width:min(280px,84vw);flex-basis:auto;
+    transform:translateX(-100%);transition:transform .2s;
+    padding-bottom:env(safe-area-inset-bottom);
+  }
+  body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
+  body.nav-open #scrim{display:block}
+  #nav-close{display:grid}
+  #burger{display:grid}
+  #top{padding:6px 10px}
+  #top:has(#changes-btn:not([hidden])){padding:6px 10px}
+
+  /* Both panes are the screen while open, and each gets a way out of its own:
+     the top bar with the changes button is underneath them. */
+  #review.open,#shelf.open{
+    position:fixed;inset:0;z-index:50;width:100%;height:100%;flex:none;transition:none;
+  }
+  #review-head{padding:10px 10px 8px 16px}
+  #review-close{display:grid}
+  #files{max-height:40%}
+  #shelf-bar{flex-wrap:wrap;row-gap:4px}
+
+  #log{padding:16px 14px 8px}
+  #panel-view{padding:20px 14px 24px}
+  .empty-brand{gap:12px;margin-bottom:22px}
+  .brand-mark,.brand-mark svg{width:48px;height:48px}
+  .brand-name{font-size:30px}
+  #empty{margin-top:4vh}
+
+  /* The composer. The bar's children become items of the box itself so they
+     can be dealt into two rows around the field; the bar element stays in the
+     markup for the desktop layout and the scripts that hang menus off it. */
+  form{padding:6px 12px calc(12px + env(safe-area-inset-bottom))}
+  .composer{
+    position:relative;display:flex;flex-wrap:wrap;align-items:center;
+    column-gap:6px;row-gap:8px;padding:10px 12px 10px;
+  }
+  .composer-bar{display:contents}
+  #attachments{order:-3;flex:0 0 100%;margin-bottom:0}
+  #workspace-picker,#mode-picker{order:-2}
+  .input-wrap{order:-1;flex:0 0 100%}
+  .composer .picker{position:static;min-width:0}
+  .composer .picker-btn{max-width:100%;height:32px}
+  #send,#stop{flex:0 0 auto}
+  /* No hover on a touch screen, so the bar is always drawn, and the strip is
+     taller because a thumb is not a cursor. */
+  #grip{height:18px}
+  #grip::before{opacity:.3;width:40px}
+  textarea{max-height:32dvh}
+  /* Menus span the box rather than hang off one picker: from a picker on the
+     right they otherwise open past the edge, where overflow:hidden loses them. */
+  .composer .menu,#attach-picker .menu{
+    left:0;right:0;width:auto;min-width:0;max-width:none;bottom:calc(100% + 8px);
+  }
+  .menu-body{max-height:min(50dvh,340px)}
+  #effort-picker .menu{left:0;width:auto;padding:16px 16px 14px}
+  .effort-rail{--stop:40px;height:40px;border-radius:20px}
+  .effort-fill{border-radius:20px}
+  .effort-stop,.effort-name{width:40px}
+  .effort-stop{height:40px}
+  .effort-knob{width:28px;height:28px}
+  #jump{right:14px;bottom:160px}
+
+  /* Dialogs, with the keyboard up: vh is the height without it. */
+  #market{max-height:82dvh}
+  #provider-picker,#browse{max-height:76dvh}
+  #project-picker{max-height:70dvh}
+  .mk-grid{grid-template-columns:minmax(0,1fr)}
+  .mk-search{padding-right:44px}
+  .ask-body{max-height:min(260px,40dvh)}
+  .ask-line .n{flex:0 0 28px;padding-right:6px}
+  .ask-head{padding:16px 16px 10px}
+  .ask-body{margin:0 16px}
+  .kv{grid-template-columns:minmax(0,1fr);row-gap:2px}
+  .kv-v{margin-bottom:6px}
+}
+
+/*
+ * A finger, not a pointer.
+ *
+ * Hover reveals nothing on a touch screen, so what the desktop shows on hover
+ * is shown outright; and a field under 16px makes iOS zoom the page when it
+ * is focused, so every field is 16px here whatever it is elsewhere.
+ */
+@media (hover:none) and (pointer:coarse){
+  .session .more,.fold-row .more{display:grid;width:28px;height:28px}
+  .proj-forget{opacity:1}
+  .actions{position:static;opacity:1;margin-top:4px}
+  .turn{margin-bottom:14px}
+  .act{padding:6px 10px}
+  .tab .x{opacity:.55;width:24px;height:24px}
+  #tab-add{width:32px;height:32px}
+  .tab{height:34px}
+  .nav-item,.session,.fold,.project{height:38px}
+  .show-more{height:32px}
+  .icon-btn{width:34px;height:34px}
+  button.primary{width:36px;height:36px}
+  button.ghost,a.ghost{height:36px}
+  .att .x{padding:4px 6px}
+  .cn-x,.mk-close,.theme-btn{width:36px;height:36px}
+  .cn-why{width:28px;height:28px}
+  .switch{width:40px;height:24px}
+  .dlg-actions button{padding:10px 14px}
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea,
+  .menu-search input,.mk-search,.art-search,.keyrow input,.cn-body input,.pp-head input,
+  textarea.boxed{font-size:16px}
+  /* The chip layer under the field has to keep the field's metrics. */
+  #input-mirror{font-size:16px}
+}
+/* Inside the browser extension's side panel: the phone layout, which the
+   panel's width already selects, without the built-in browser. The person's
+   own browser is the rest of the window. */
+.embed #browser-pane,.embed #browser-scrim,.embed .tab-browser{display:none!important}
+`;
+//# sourceMappingURL=style.js.map