/* --------------------------------------------------------------------------- Canvas Every mark carries a variable. No mark is decoration. That single rule is what makes this both minimal and dense — there is nothing to strip out because nothing was added for looks. --------------------------------------------------------------------------- */ :root { /* How far the floating chrome sits from the edges, and how far the top row sits from the top. Named because a menu's position is written against the control it hangs off, in a different rule from that control — so a build that moves the control has to remember to move the menu, and the Mac app moved the control and did not. Both are now one edit. */ --chrome-inset: 14px; --chrome-top: 14px; /* ---- the greys, and there are four ------------------------------------- Every surface, hairline, quiet mark and second-read word in this app is one of these four. Nothing else in it is grey. There were a dozen before, in two families: a warm set for the canvas and a cold set for the chrome, on the argument that what you write on should read like paper and what you handle it with should not. It is a nice line and it did not survive contact with the app. Two families meant every new surface had to answer a question — is this a thing you work ON or a thing you work WITH — that nobody could see the answer to once it was drawn, and a wrong answer did not look wrong, it looked slightly dirty beside its neighbour. Around the two families a dozen one-off hexes had collected, each written next to the rule that wanted it, which is how a palette stops being a palette. One family now, and it leans cold: r < g < b at every step, by the same margin the whole way up, so any two of these sit together with no temperature seam between them. The steps are roles, not shades. Almost nothing below says --grey-N; each rule says the role it means, and the roles are what hold the count at four. 1 fills every surface that sits on the page 2 lines every hairline, edge and key cap 3 faint a mark that is present and is not being read 4 dim a word that is read second The page and the ink are not on this scale. They are the two ends it runs between. */ --grey-1: #eef1f5; --grey-2: #dde2e9; --grey-3: #aab2bd; --grey-4: #6e7683; --bg: #fff; /* Cold as well, and it has to be. An ink that leans warm is the last warm thing on the page, and it does not stay on the page: --chrome-edge, the hover wash and the panel shadow below are all this colour at a low alpha, so a lean here is a lean carried into every hairline in the chrome. */ --ink: #1a1d21; --faint: var(--grey-3); --dim: var(--grey-4); /* The fill under a run of code, the chip a typed command wears, a table's heading — and every chip that floats over the canvas, which used to be a second grey named --cold-panel. There is one fill now because there is one family, and a chip on the plane and a chip in the chrome are the same object seen in two places. */ --panel: var(--grey-1); --line: var(--grey-2); --sel: #0d99ff; --accent: #d97757; /* A relationship, drawn as a stream between two blocks. See canvas/ties.js. Grey, because the graph is structure rather than a second annotation colour. It should clarify the canvas, not compete with selected blocks, agent identity, or the ink somebody drew by hand. --tie-on is the blue everything selected on this canvas wears, because a ribbon under the pointer is selected in precisely the same sense a block is: Delete removes it. */ --tie: rgb(110 118 131 / .2); --tie-on: rgb(13 153 255 / .28); --tie-edge: rgb(110 118 131 / .36); /* Overlaps deepen rather than average. Multiply on a light ground is two washes of ink laid over each other, which is what these are meant to look like; the dark theme screens instead, for the same reason and the opposite arithmetic. */ --tie-blend: multiply; --tok-c: var(--grey-4); --tok-s: #3f8f5f; --tok-tag: #3b6ea5; --tok-kw: #8452ad; /* floating chrome — the zoom pill, its menu, the presence stack. One surface token set, so every panel is the same object seen in different places. No shadow ever leaves the panel's own edge: --chrome-shadow is pure inset, cast DOWN from the top edge — the shading sits just inside the border at the top, like a surface recessed into the canvas, not a card lifted off it. */ --chrome: #fff; --chrome-edge: rgb(26 29 33 / .09); --chrome-hover: rgb(26 29 33 / .055); --chrome-sunk: rgb(26 29 33 / .05); --chrome-shadow: inset 0 2px 4px rgb(26 29 33 / .13), inset 0 0 0 1px rgb(26 29 33 / .07); --chrome-ink: var(--ink); /* What a provider's mark is drawn in. Its own token rather than --chrome-ink because it is not text: a logo at 15px reads heavier than a letterform at the same ink, so it sits at the dim step in light mode and goes all the way to white in dark, where a mark has to hold its own against the field. White is not on the scale above and does not need to be: it is the ground the light theme is drawn on, borrowed. */ --logo-ink: var(--grey-4); --chrome-dim: var(--dim); /* Whether a thing worked, for the two places in this app that have to say so without a sentence: a step in an agent's receipt, and the mark beside it. Cold rather than warm, like the rest of the chrome they are drawn in — a green that leans the way the ink does reads as a highlighter on the canvas rather than as a tick on a control. Both are borrowed off the code tokens above at the same lightness, so the panel and a run of code agree about what green is. */ --ok: #3f8f5f; --bad: #c4553d; /* the arrow itself is the agent's hue; the halo stays white in both themes so a saturated cursor keeps its edge over ink, text, and a live browser frame */ --ptr-edge: #fff; /* one typeface everywhere — block text, code, chrome. --mono and --ui stay two names (not one) so a future seam — code wanting an actual monospace again — is a one-line change, not a find-and-replace. */ --mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* and the seam, opened. An actual monospace, used only where somebody is reading a program rather than reading the canvas: the source view under a built app. Indentation has to line up there and a proportional font makes a nonsense of it, which is not true of the odd `word` inside a sentence. */ --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* one curve for every piece of chrome that opens, moves, or slides */ --ease: cubic-bezier(.16, 1, .3, 1); } :root[data-theme="dark"] { /* The same four steps, turned over. 1 is still the surface that sits on the page and 2 is still the line; they are simply the lighter of each pair here rather than the darker. Same lean, same spacing, so a panel that stood one step off the page in light stands one step off it here. */ --grey-1: #1c2025; --grey-2: #2d3239; --grey-3: #545c66; --grey-4: #969ea9; --bg: #121417; --ink: #dde1e7; --faint: var(--grey-3); --dim: var(--grey-4); --panel: var(--grey-1); --line: var(--grey-2); --tok-c: var(--grey-4); --tok-s: #5fbf82; --tok-tag: #6ea8e0; --tok-kw: #b48ce0; --chrome: var(--grey-1); --chrome-edge: rgb(255 255 255 / .09); --chrome-hover: rgb(255 255 255 / .07); --chrome-sunk: rgb(255 255 255 / .06); /* same top-cast inset, dark surface: the shading goes to true black rather than grey so it still reads against a dark fill */ --chrome-shadow: inset 0 2px 5px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(0 0 0 / .4); --chrome-ink: var(--ink); --logo-ink: #fff; --chrome-dim: var(--dim); /* Lifted the way every other token here is on a dark ground: same hue, more light, so a tick keeps its weight against the panel instead of sinking into it. --ok tracks --tok-s exactly, as it does in the light theme. */ --ok: #5fbf82; --bad: #e08b76; /* Brighter and screened, so a stream still reads as light laid over the page rather than as a stain on it. See the note in the light theme above. */ --tie: rgb(170 178 189 / .22); --tie-on: rgb(90 180 255 / .3); --tie-edge: rgb(170 178 189 / .42); --tie-blend: screen; } * { margin: 0; padding: 0; box-sizing: border-box; } /* The app has one typeface, and this is where it is actually said. Every rule below still sets its own size and weight — but without a base here, any element whose rule forgets the `font` shorthand falls all the way back to the browser default, which is a 16px serif and reads as another application pasted into the panel. Deliberately NOT extended to `button, input, select` as a bare element selector: Clerk mounts its own sign-in form and account menu into this page, and a rule that broad reaches inside them. Our own controls each state their font, which is where a control's font belongs anyway — the OS default only ever leaks through the ones that forget. */ html, body { background: var(--bg); font: 400 13px/1.4 var(--ui); color: var(--ink); /* There was an `overscroll-behavior: none` here, to stop the page bouncing when a two-finger scroll pushed past what the document could scroll. It is gone, and the reason is worth leaving behind so it is not tried again the next time somebody notices the bounce. On macOS the elastic behaviour of the DOCUMENT scroller is not a separate decoration on top of scrolling — it is the same mechanism that carries momentum after your fingers leave the trackpad. Turning it off here took the rubber band and the flick with it, so the canvas moved exactly as far as a hand pushed it and then stopped dead. On an infinite plane that is a far worse trade than the bounce: panning is how you get anywhere. The bounce is fixed, and not here. It is fixed by moving the edge instead of the behaviour: the document below is 2.4 million pixels square, the plane sits a million of them in from every side, and the scroller therefore never reaches an end anybody can scroll to — not with a bounce, and not with an afternoon of panning either, which is the other way people found the edge. See #plane, `body` below, and GUTTER in core/viewport.js — which is the one place that knows the offset, so nothing else in the app had to learn about it. Why it mattered enough to do: what macOS drags when it rubber-bands is the whole page, `position: fixed` and all. In the Mac app the fixed things are the window's own card and the glass ring around it, so two fingers at the top of the canvas pulled the entire frame down off the window and showed the desktop through the gap. */ } /* The document, which is bigger than the plane on purpose. 2400000 square holds the plane (100000, and up to 400000 of it once scaled to the 400% ceiling) with a million-pixel gutter in front of it and the same left over behind it at every zoom level. It is empty in every direction the plane does not reach and costs a scroll range and nothing else. Two things live on that emptiness. It is what keeps macOS from rubber-banding the frame off the window, which needs only that the edge not be at the plane; and it is what keeps a hand from ever panning into a wall, which needs that the edge be a very long way from the plane. The second sets the number: see GUTTER in core/viewport.js. ui/styles.test.mjs checks this is big enough for both the gutters and the plane at full zoom. */ body { min-width: 500000px; min-height: 500000px; } /* The plane is one fixed-size surface that is scaled, never re-laid out. core/viewport.js writes `transform: scale(z)` here and nothing else ever touches this element's transform. The origin has to be the corner, because the corner is canvas 0,0 and every coordinate in the app is measured from it: screen = canvas * zoom - scroll, both ways, everywhere. Scaling from the middle of a 100000px square would put the origin 50000px from where all of that arithmetic believes it is. core/viewport.js sets this again in JS for the same reason. One rule follows from the plane being scaled, and it binds everything drawn on it: nothing inside here may carry `will-change: transform`. A browser rasterises a composited layer at one scale and hands the bitmap to the compositor. Normally it notices when the scale it is being drawn at has changed and rasterises again — which is why text, borders and SVG on this plane stay sharp as you zoom, at any level, on any screen. The one thing that turns that off is a layer promising its transform is about to change: re-rastering something mid-animation every frame would cost more than the animation, so the browser keeps the bitmap it has and stretches it. The plane's zoom is an ancestor transform, so a hint meant to cover a 200ms slide ends up covering every zoom level the canvas will ever be at, and whatever carries it is a photograph of itself taken at one scale — pixelated at the others, and worst on exactly the small crisp things (a cursor, a hairline, a name) that the eye reads as resolution. Screen-space chrome is free to use the hint: the panels, the following bar, the task list. They are never scaled. Anything on the plane is, always. client/ui/styles.test.mjs holds the list and fails on a new one. */ #plane { position: relative; /* Canvas 0,0, held off the document's own corner. This is GUTTER in core/viewport.js and has to stay equal to it — that file turns a scroll offset into a canvas coordinate by subtracting exactly this, and ui/styles.test.mjs fails if the two numbers drift apart. A relative offset rather than a margin: a margin here collapses through body and html and moves the document instead of the plane, which leaves no blank in front of the origin at all — which is the entire point. It is laid out before the transform below, so the corner stays at 1000000,1000000 in document space at every zoom level, and the arithmetic above stays one multiplication and one subtraction. */ top: 0; left: 0; width: 100000px; height: 100000px; transform-origin: 0 0; } /* Ink is on top of what it is about. * * This layer used to sit where it is written — first child of #plane, z-index * auto — which put every stroke UNDER every block, because positioned siblings * with no z-index stack in document order and blocks are appended after it. On * most of the canvas nothing showed: a note has no background, so a line drawn * across one lands between the glyphs and reads as being on top. * * A running app is not transparent. `.block.render .frame` is a white iframe, * and an iframe is not a background colour that ink can sit behind — it is * another document painted over this one. So a ring drawn around a component * was captured, saved, sent to everyone else on the canvas, and drawn in a * place nobody could see it. The gesture the preview invites in its own words * ("anybody here can circle part of it and say what should change") was the one * gesture on this canvas with no mark to show for it. * * So the layer is lifted, generally rather than for apps. Ink over a sheet of * paper is ink on the paper, and ink over a component is a note about the * component: there is no case on a whiteboard where the pen goes under. It * stops below #marquee and #selbox at 5 and below #agents at 10, which is the * right order for the same reason — a selection box and a cursor are the canvas * talking about the ink, not more ink. */ #strokes { position: absolute; inset: 0; pointer-events: none; z-index: 4; /* One period for the boil below, so the phase canvas/strokes.js writes per stroke is a fraction of this and nothing has to agree about a number. */ --boil: .56s; } #strokes path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #strokes path.ink { fill: var(--ink); stroke: none; } #strokes path.sel { stroke: var(--sel); } /* Ink that has been put down keeps moving, very slightly. * * A drawing is a drawn thing, and a drawn thing holding perfectly still reads * as a photograph of one. Hand-drawn animation has the opposite problem and * solved it by accident: every frame is re-inked, so no line ever lands twice * in the same place, and the picture appears to breathe. This is that, on * purpose. Each stroke sits in one of four positions less than half a pixel * apart and moves between them about seven times a second, which is slow * enough to read as a redraw rather than as a vibration. * * Per stroke rather than per layer, and that is the entire effect. One * transform on #strokes is the whole drawing sliding around together, which * looks like something is wrong with the page. Marks that each wander on their * own look like marks. * * Three things keep it honest: * * - the phase is a negative delay written by canvas/strokes.js out of the * stroke's id, so no two jump in step and every browser with this canvas * open jumps the same stroke at the same moment * - .wet is the stroke under the pen right now, and it is held still. Ink * comes alive once it has been let go of; a line that squirms while you * are still drawing it feels broken rather than alive * - no will-change, ever. These paths are on the scaled plane, and a pinned * raster there is ink that is sharp at one zoom level and mush at the * rest. See the note above #plane, and ui/styles.test.mjs. */ @keyframes ink-boil { 0%, 100% { transform: translate(.38px, -.26px) rotate(.06deg); } 25% { transform: translate(-.34px, .2px) rotate(-.09deg); } 50% { transform: translate(.14px, .38px) rotate(.04deg); } 75% { transform: translate(-.2px, -.36px) rotate(-.03deg); } } #strokes path { transform-box: fill-box; /* turn about the stroke, not about the plane */ transform-origin: center; animation: ink-boil var(--boil) step-end infinite; } #strokes path.wet { animation: none; } @media (prefers-reduced-motion: reduce) { #strokes path { animation: none; } } /* ---- relationships: the graph drawn between blocks ------------------------ * * One layer, under the ink and over the blocks, and it is empty until somebody * turns the switch in the contexts tray on. Above the blocks for the reason * stated above #strokes: an app is an opaque frame, and a connection drawn * behind one is a connection nobody can see. Below the ink, because ink is what * somebody drew and this is what the canvas drew for them. * * Nothing here is a line. Each tie is a filled shape whose width varies along * it, with flat caps where it meets a block, because a stroke cannot change * width and because an arrow would be a second notation arguing with the arrows * people already draw in ink. See canvas/ties.js, which builds both banks of * every one of these. */ #ties { position: absolute; inset: 0; pointer-events: none; z-index: 3; /* Not painted at all until the layer is on. `visibility` rather than `display`, so nothing about this 100000px layer is laid out twice when it comes back. */ visibility: hidden; } body.linking #ties { visibility: visible; } .tie { fill: var(--tie); stroke: none; mix-blend-mode: var(--tie-blend); pointer-events: none; transition: fill .12s ease; } /* Only ever grabbable while the layer is up, and only the ribbon itself: the layer above it stays transparent to the pointer, so turning relationships on takes nothing away from the canvas underneath. */ body.linking .tie { pointer-events: fill; cursor: grab; } body.linking .tie:hover { fill: var(--tie-edge); } body.linking .tie.on { fill: var(--tie-on); } /* The one in the air is not a thing yet: it must not swallow the pointer that is looking for the block underneath it. */ .tie-ghost, body.linking .tie-ghost { pointer-events: none; fill: var(--tie-edge); } /* What the person called it, written along the middle where the ribbon is widest. Haloed in the page colour rather than sat on a chip: a chip is another rectangle on a canvas of rectangles, and paint-order lets the letters carry their own clearance through whatever they cross. */ .tie-name { fill: var(--dim); font: 500 12px var(--ui); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; user-select: none; } body.linking .tie-name { pointer-events: auto; cursor: text; } /* Naming one. The only field on this canvas that is not a block, because what is being typed is a property of the relationship rather than another thing on the plane. It lives on the plane all the same, so it is in canvas units and scales with the zoom like everything else drawn there. */ .tie-field { position: absolute; transform: translate(-50%, -50%); width: 190px; padding: 4px 8px; border: 1px solid var(--tie-edge); border-radius: 7px; background: var(--bg); color: var(--ink); font: 500 12px var(--ui); text-align: center; outline: none; z-index: 6; } .tie-field::placeholder { color: var(--faint); font-weight: 400; } /* While the layer is up, every block is a node. The frame is constant so the flat stream caps have a visible boundary to attach to, and hover only turns up the blue rather than inventing a second state. */ body.linking .block { cursor: crosshair; outline: 2px solid color-mix(in srgb, var(--sel) 58%, transparent); outline-offset: 0; border-radius: 8px; } body.linking .block:hover, body.linking .block.tie-lit { outline-color: var(--sel); } /* An app is a frame that eats every pointer event, so while relationships are being drawn it stops being a running app and becomes a node like the rest. It goes back to being an app the moment the switch is off. */ body.linking .block .frame { pointer-events: none; } #agents { position: absolute; inset: 0; pointer-events: none; z-index: 10; } /* ---- text blocks ---- */ .block { position: absolute; width: max-content; max-width: 38rem; min-width: 8rem; /* the only thing that ever fades a block is a section search stepping it back; going quiet is the whole signal, so it should be seen happening */ transition: opacity .15s ease; } .block pre, .block textarea { font: 400 16px/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; tab-size: 2; } .block pre { color: var(--ink); min-height: 1.75em; } /* Under a picture the empty caption line is dead space, but it cannot go to zero: the transparent textarea is inset:0 on the pre, so collapsing it would leave nowhere to click to write a caption. It is shortened instead — and the textarea's line-height moves with it, because the two agreeing is the whole reason the caret lands on the text. Typing removes .img-only, so a real caption gets the full line back. 17px, and not a ratio, because this strip is now doing two jobs: it is the place a caption is typed, and it is the air under the picture. With the 3px the reaction bar stands off by, it comes to the 20px the header leaves above the picture, so an image with nothing written under it is spaced the same on both sides. See .block.has-image.img-only below. */ .block.img-only pre, .block.img-only textarea { line-height: 17px; min-height: 0; } /* An agent writes in ink, the same as everybody else. The tint was how you knew who had written a block, back when a block carried no name and no face. A message carries both now, and the colour was doing a job that had already been done — at the cost of putting the words themselves in periwinkle, which reads as a link, or as writing that has been marked up, rather than as somebody talking. The identity stays where it belongs: the cursor, the avatar, the tag on a mention, the halo on a selection. */ .block.agent pre { color: var(--ink); } .block textarea { position: absolute; inset: 0; background: transparent; color: transparent; /* The ink it is about to lay down, not a colour of its own. A caret is the next character before you have typed it, so it belongs to the text rather than to the app, and a terracotta bar in front of black writing was the one thing on this canvas announcing itself for no reason. --ink rather than a literal black because the same rule has to hold on a dark canvas, where black is invisible and the text is pale. It also matches the caret in a table cell, which is contenteditable and has always used the text colour. */ caret-color: var(--ink); border: none; outline: none; resize: none; overflow: hidden; } /* Selecting text in a block is the browser's own act, so it wears the browser's own colour. The terracotta wash this used to paint was the accent doing a job the platform already does, and it read as a highlight somebody had applied to the words rather than as a selection the reader was making. */ /* What somebody else said, and anything an agent wrote, is readable, selectable and quotable, and is not yours to rewrite. A blinking caret in one would be the same lie a greyed-out field tells, only more convincing — so the caret goes and the pointer stops promising a place to type. Selecting still works, because copying what was said is exactly the thing you do with a record. */ .block textarea[readonly] { caret-color: transparent; cursor: default; } /* #selbox already draws one box around everything selected — outlining each block as well meant a single selected block wore two rectangles. The class still marks what is selected; it just no longer paints. */ /* ---- paper: the sheets, and the pages that came before them --------------- Nothing on the canvas makes a PAGE any more: the mode that did has come off the "/" menu. Those rules stay for the pages written while it was there, which are still in documents and still have to come back looking like what they were. A sheet of paper is the same stuff, put down on purpose — "/paper", or ⌥P — and it is the one anybody makes today. The look is shared rather than copied because it is genuinely the same object; what makes paper its own kind is what can be DONE to it, not how it is drawn. See canvas/paper.js. A page rather than a note. Every other one here is words lying directly on the canvas; this is the one that carries a ground of its own, because it is a document being kept rather than a line being said. So it is the least paper that can still be told apart from the canvas: an opaque fill, a hairline, and a corner barely off square. No shadow, and what is written inside it is ordinary markdown, rendered the way it is everywhere else here. 4px of radius, which is under a third of what a card in this app wears. At 0 a sheet read as a crop mark — a rectangle cut out of the canvas rather than an object placed on it — and at 10 it read as a card, which is a thing with controls in it. This is the amount that says "sheet": you notice it only by how much less sharp the corner is than the section frames around it. The padding goes on the pre and the textarea rather than on the block: the textarea is inset:0 over the block, and the caret only lands on the glyph it is in front of while both boxes are identical. Every rule is held off .cmd for the reason the chat chrome below is: typing "/" in a page is still typing a command, and a mode picker wearing a page would be a costume on the wrong thing. While the command is live the block is exactly the plain one it would have been, and the paper comes back with the words. */ .block.page:not(.cmd), .block.paper:not(.cmd) { width: 24rem; max-width: 24rem; background: var(--bg); border: 1px solid var(--line); } /* The column the body stands in. A sheet given a height by its edges has to fill it: laid out as ordinary blocks the words would end where they end and the paper under them would be empty space with nothing to click on, which is a page you cannot type at the bottom of. */ .block.paper:not(.cmd) { border-radius: 4px; display: flex; flex-direction: column; } .block.page:not(.cmd) pre, .block.page:not(.cmd) textarea, .block.paper:not(.cmd) pre, .block.paper:not(.cmd) textarea { padding: 14px 16px; } /* an empty page is still a page, and this is how much of one */ .block.page:not(.cmd) pre, .block.paper:not(.cmd) pre { min-height: 9rem; } /* A sheet dragged taller is taller everywhere: the block carries the height, so the body has to be willing to fill it or the paper would end where the words do and the corner would be pulling on nothing. */ .block.paper:not(.cmd) .block-body { flex: 1; display: flex; } .block.paper:not(.cmd) .block-body pre { flex: 1; } /* ---- the edges you pull -------------------------------------------------- A sheet is the only block here whose size is a decision. A message is as big as what was said; a table is as big as its columns; a sheet is as big as you want the sheet, because it is paper and the whole point of paper is that you choose how much of it there is. So it is resized the way a region is: eight invisible strips over its own edges, and the cursor is the entire affordance. No handle drawn in the corner, which could only ever pull down and to the right — a sheet grown upward has to keep the corner you are not touching where it was, and that is what an edge is for. Same offsets and same widths as .section-grip above, because it is the same gesture and a second set of numbers would drift from the first. z-index 3 puts them over the transparent textarea, which is inset:0 on the body and would otherwise take every press that landed within a few pixels of the edge. That costs the outermost 5px of the writing area as a place to put the caret; it is inside the padding, where there is no text to aim at. */ .paper-grip { position: absolute; z-index: 3; } .paper-grip-n, .paper-grip-s { left: 0; right: 0; height: 11px; cursor: ns-resize; } .paper-grip-w, .paper-grip-e { top: 0; bottom: 0; width: 11px; cursor: ew-resize; } .paper-grip-n { top: -6px; } .paper-grip-s { bottom: -6px; } .paper-grip-w { left: -6px; } .paper-grip-e { right: -6px; } /* corners sit over the edges they meet, so aiming at one gets both axes */ .paper-grip-nw, .paper-grip-ne, .paper-grip-sw, .paper-grip-se { width: 15px; height: 15px; z-index: 4; } .paper-grip-nw { top: -7px; left: -7px; cursor: nwse-resize; } .paper-grip-ne { top: -7px; right: -7px; cursor: nesw-resize; } .paper-grip-sw { bottom: -7px; left: -7px; cursor: nesw-resize; } .paper-grip-se { bottom: -7px; right: -7px; cursor: nwse-resize; } /* A pen has to be able to draw across a sheet, and an eraser to rub something off one, so the edges stop answering the pointer in the two modes where the pointer is not for pointing. Drag mode keeps them, unlike a region's: a region is ground you pan from, and a sheet is an object you are holding. */ body.draw .paper-grip, body.erase .paper-grip { pointer-events: none; } /* and nobody who may not change the document may change its shape */ body[data-role="viewer"] .paper-grip, body[data-role="commenter"] .paper-grip { display: none; } /* ---- chat blocks --------------------------------------------------------- Slack's shape, for exactly the conversation that already happens here: your own write-mode notes, and an idle agent's reply to one. .block-body is what .block itself used to be — pre and its transparent textarea, absolutely overlaid — just demoted one level so the header can sit above it without the textarea's inset:0 landing on top of the avatar instead of the text. */ /* One gutter down the left of a message, and everything said in it lives to the right of that gutter: the name, the words, the picture, the reactions. Only the face is in it. That is the whole of Slack's shape, and it is the reason a thread of messages reads as a column of what was said rather than as a stack of headers — the eye follows one left edge down the text, and the faces sit outside it. The face is out of flow rather than the first cell of a grid, so its height is its own business: it stands across the name and the first line under it without either of those rows growing to hold it, and a message whose first line is a picture or a table is spaced by the picture, not by the avatar. The gutter is chrome, not measure: the words in a message wrap at the same width as the words in a plain note, so a thread and a note beside it read at one text width instead of two. Both bounds are widened by exactly what the face takes, and box-sizing is border-box, so the text inside lands back on the 38rem/8rem every other block obeys. */ .block.chat:not(.cmd) { --chat-gutter: 52px; padding-left: var(--chat-gutter); max-width: calc(38rem + var(--chat-gutter)); min-width: calc(8rem + var(--chat-gutter)); } /* the menus a message opens belong to the words, so they hang off the text's left edge and not off the face's */ .block.chat:not(.cmd) .mention-box { left: var(--chat-gutter); } /* Chrome is not writing, and must not select like it. A drag across the canvas caught the task card's labels, a message's author and time, the reaction pills and the word "reply", and left them all in selection blue — none of which is text anybody meant to take a copy of. What IS text stays selectable: the message itself, the notes, and anything you can type into. */ .tasklist, .block-head, .block-reacts { user-select: none; } .tasklist input, .tasklist textarea, .tasklist [contenteditable], .tl-row, .tl-text { user-select: text; } .block-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } /* Big enough to stand beside the name AND the first line of the message, which is what makes the gutter read as one column rather than as a chip parked over a paragraph. 40px is that span here — 17px of name and the 28px line under it — the same proportion Slack's 36px keeps against its own smaller text. */ .block-avatar { position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; /* A squircle, the shape an app icon on a phone has, rather than a rounded square. A border-radius is a circular arc spliced into two straight sides, and the two joins are what make a rounded corner look drawn instead of shaped: the curvature jumps from nothing to everything at a point the eye can find. This is the superellipse |x|^5 + |y|^5 = 1 instead, where the corner is never entered and never left. It is written out as a path because the one-line way to say it — corner-shape: squircle — is in the newest Chromium and in no WebKit, and Safari is a browser this canvas is used in. Eight cubics, two per corner, fitted to the curve at 45° and 67.5°. The numbers are the 40px box above, so the two move together. There is no border-radius under it on purpose: the picture inside takes its corner from `border-radius: inherit`, and any radius here would intersect the clip and hand the corners back to the arc this is here to avoid. */ clip-path: path("M40 20C40 34.89 39.2 35.62 37.41 37.41C35.62 39.2 34.89 40 20 40C5.11 40 4.38 39.2 2.59 37.41C0.8 35.62 0 34.89 0 20C0 5.11 0.8 4.38 2.59 2.59C4.38 0.8 5.11 0 20 0C34.89 0 35.62 0.8 37.41 2.59C39.2 4.38 40 5.11 40 20Z"); background: var(--agent, hsl(var(--hue, 233) 58% 46%)); color: #fff; font: 600 16px/1 var(--ui); } .block-avatar[data-you] { background: var(--accent); } /* a real profile picture fills the chip entirely, so the letter-avatar's background never shows as a ring around it */ .avatar-img { width: 100%; height: 100%; /* the picture takes the chip's corner: a circle in the people list, and on a message nothing at all, because the chip clips it to a squircle instead */ border-radius: inherit; object-fit: cover; display: block; } .block-avatar:has(.avatar-img) { background: none; } /* Barely bold. At 600 the name outweighed the message under it in a column of messages that are mostly one line each; at 400 it sat level with the body and the header stopped reading as a header. 500 is the half step that names the speaker without competing with what they said. The case is whatever Clerk has on the account, because a person's name is theirs to capitalise. */ .block-name { font: 500 14px/1 var(--ui); color: var(--ink); } .block-time { font: 400 11px/1 var(--ui); color: var(--faint); } /* Quieter than the timestamp beside it: it is a footnote about the message, not a fact about the conversation. Emptied rather than hidden when the message has not been edited, and :empty is what keeps an empty one from spending the header's 8px gap on nothing. */ .block-edited { font: 400 11px/1 var(--ui); color: var(--faint); opacity: .75; cursor: default; } .block-edited:empty { display: none; } /* the message being replied to: a rule down the side and one line of it, the way a quoted reply reads in chat. Clicking jumps back to the original. */ .block-quote { display: flex; align-items: baseline; gap: 6px; max-width: 100%; margin-bottom: 4px; padding-left: 8px; border-left: 2px solid var(--line); font: 400 12px/1.5 var(--ui); color: var(--dim); cursor: pointer; } .block-quote:hover { border-left-color: var(--dim); } /* The quoted name goes with it. This one keeps a little weight rather than none: it is the only thing separating who from what on a single line that runs "Alex @soffo yo", where the header above has a gap and a timestamp to do it. */ .quote-name { font-weight: 500; color: var(--dim); flex: none; } .quote-img { flex: none; color: var(--faint); } .quote-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quote-gone { font-style: italic; color: var(--faint); } /* jumped-to messages flash once, so you can find what you landed on */ @keyframes blockflash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 20% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sel) 34%, transparent); } } .block.flash { animation: blockflash 1.1s ease-out; border-radius: 6px; } /* A page keeps its corners while it flashes. The radius above is there so the halo hugs a note; on a page it would round the one edge that says this is a page, for the second and a bit somebody is looking straight at it. Paper is not in this any more: it has 4px of its own, and the halo should follow the corner the sheet actually has. */ .block.page.flash { border-radius: 0; } .block-body { position: relative; } /* an image sits above whatever is written about it, capped so a big photo cannot stretch the block past the width text already obeys */ .block-image { display: block; max-width: 100%; max-height: 420px; width: auto; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 2px; user-select: none; -webkit-user-drag: none; } /* A picture is an object in a block exactly as a grid is, and it takes the same air: the name opens up above it by the same amount, and the same gap is left under it before the reactions. It used to take 3px on both sides, so two messages side by side — one holding a table, one holding a photo — sat at different heights under the same name. The caption is the one thing that belongs TO the picture rather than after it, so it goes on hugging the frame at 2px and the gap falls below the words instead. With nothing written under it there is no caption to hug, and the picture gives its 2px up to the same gap. Both land on the 20px a table's grid stands off by, and both then wear the 3px every block leaves above its reactions. */ .block.has-image .block-head { margin-bottom: 20px; } .block.has-image .block-body { padding-bottom: 20px; } /* With nothing written under it there is no caption to hug, and the picture gives its 2px up to the gap. The gap itself is then the empty caption line and nothing else: the body's own 20px would have stacked on top of that line rather than replaced it, which is how a picture on its own came to sit 20px under its name and 41px above its reactions. 17px of caret line plus the 3px every block leaves above its reactions is the same 20px, measured this time from the bottom of the picture instead of from the bottom of an empty line nobody can see. */ .block.has-image.img-only .block-image { margin-bottom: 0; } .block.has-image.img-only .block-body { padding-bottom: 0; } /* More than one, and they are a strip you push sideways rather than a column that grows down the canvas. A message is a thing somebody said; six photographs stacked vertically would be six times the height of the sentence they arrived with, and the block would stop reading as one message at all. Held to a common height so the row has a straight top and bottom whatever mixture of portraits and landscapes is in it, and snapped, so a flick lands on a picture rather than between two. No scrollbar, the same argument the integrations list makes: the picture cut off by the right edge is what says there is another one, and it says it without drawing a bar. */ .block-shots { display: block; } .block.has-shots .block-shots { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 2px; } .block.has-shots .block-shots::-webkit-scrollbar { width: 0; height: 0; } .block.has-shots .block-image { flex: none; height: 220px; max-height: 220px; max-width: none; width: auto; margin-bottom: 0; scroll-snap-align: start; } .block.has-shots.img-only .block-shots { margin-bottom: 0; } /* the command palette ("/write", "/ask", ...) is not a message — while a block is showing it, the chat chrome underneath is suppressed rather than dressing up a mode picker in an avatar and a reaction bar. It reappears on its own once the text stops looking like a command. */ .block.cmd .block-head, .block.cmd .block-reacts { display: none; } /* ---- what the agent is doing --------------------------------------------- The run's own steps, in the block the run is writing, above the words it will write. A header naming where the work has been so far, and under it one line per call in the order they happened. This was a card first — a bordered lid over every tool call, each row expandable to the raw result — and that was a run being audited when nobody was auditing. Then it was the /build mark: the line writing and unwriting itself with seven words rotating beside it, on the argument that a person waiting on an answer wants to know something is alive and nothing more. That argument was right about the raw output and wrong about the words. "Actualizing" is true of every run there has ever been, so it says nothing about this one, and a person watching a two-minute errand could not tell a mailbox being read from a model going in circles. So the steps are back, and the lid with them, shut. What is drawn is the account the run already keeps — the verb, the app it reached, the one argument worth reading — as one sentence per row in two weights. A row opens onto what came back only where what came back could not have been said on the line, which is where the card went wrong: it was open by default and it put eight rows of somebody else's JSON between a question and its answer. Nothing here rotates. A spinner is a thing somebody is made to watch while nothing is being said, and every row in this panel says what it is; the row in flight has a band sweeping through its sentence and the mark at its head writing itself. Both are phase-matched to --age so a repaint does not restart them — see age() in ui/activity.js. The mark is the /build line, and it comes back here as the shape and nothing else: no words rotating beside it, no ground, no frame. Those belong to the place it is still drawn whole, which is a 640px rectangle waiting on a document, where there is genuinely nothing to report until one lands. See .ac-mark below, and .loading-mark and .framewip further down. Quiet, not loud. This is chrome laid over the work rather than a piece of the writing — the same call the zoom pill and the source card make — so it takes --dim and its line, and the message under it is the only thing in the block set in ink. It disappears on the answer's first character, not on the run's last one. See waitingIn() in ui/activity.js for why those are seconds apart. */ .ac { /* 6 and 7 rather than one number, because the panel is not what the air above and below it is measured from. The quote over it carries 4px of its own and the reactions under it carry 3, so these are the two halves that make both gaps 10px. Change either neighbour and change these with it. */ padding: 6px 0 7px; user-select: none; /* The rows are a report and not a control, so a press on one lands on the block underneath exactly as it did when this was a single line — a message stays as clickable while it is being written as it is after. The header takes its own presses back below, because folding the list away IS a control and is the only one here. */ pointer-events: none; font: 500 12.5px/1.45 var(--ui, system-ui, -apple-system, "Segoe UI", Inter, sans-serif); color: var(--dim); max-width: 100%; } /* The one control. See the note on pointer-events above. */ .ac-head { pointer-events: auto; display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .ac-head.bare { pointer-events: none; cursor: default; } /* The apps the header names, as their own marks, ahead of the words naming them. Up to three: past that the header is a strip of thumbnails and the sentence beside it already says "and 2 more". A source with no company behind it — the web, this canvas, this Mac — brings no mark and needs none. */ .ac-marks { flex: none; display: flex; align-items: center; gap: 3px; } .ac-marks:empty { display: none; } .ac-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The band that sweeps through whatever is still being worked on. Borrowed from the mark's words and slowed: there the band is the only thing on a 640px frame and wants to be seen, here it rides through 12px type on a line somebody is reading, and at the mark's 3s it read as a flicker. Four and a half seconds, and the band widened from a 10% notch to a 26% swell so what passes over a word is a change of weight rather than a stripe crossing it. Cosine, not linear. A linear sweep on an infinite loop arrives back at its start at full speed, and what the eye catches is the seam. Eased at both ends with a pause between passes, the band comes in, crosses, and settles before it comes round again — which is the difference between a surface that is alive and one that is being animated at you. */ .ac .live { background: linear-gradient(100deg, var(--dim) 0%, var(--dim) 37%, var(--shine-ac) 50%, var(--dim) 63%, var(--dim) 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; /* Started from where the panel it replaced had got to. See age() in ui/activity.js: a rebuilt element restarts its animations at zero, and a negative delay on an infinite loop is the same loop already that far in. */ animation: ac-sweep 4500ms cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: calc(var(--age, 0) * -1ms); } /* The band is a contrast rather than a colour, so on white the word sits light and what rides through it is darker, and in the dark theme the two turn over. The same call --shine makes for the mark's words, made again here because the ground either side of it is --dim and not --ink-mark. Which makes the band the ink itself: it is already the one value that flips with the theme, so there is nothing to name here that the palette does not name. */ :root, :root[data-theme="dark"] { --shine-ac: var(--ink); } @keyframes ac-sweep { 0% { background-position: 118% 0; } 62% { background-position: -18% 0; } 100% { background-position: -18% 0; } } .ac-caret { flex: none; width: 12px; height: 12px; margin-left: 1px; opacity: 0; color: var(--dim); transition: transform .2s cubic-bezier(.3, .8, .4, 1), opacity .2s ease; } .ac-caret svg { width: 100%; height: 100%; display: block; } /* On the header always, on a row only when there is a pointer on it. A caret standing on every row of a list of nine is nine invitations where one thing is being read; on hover it is an offer made at the moment somebody looks. */ .ac-head .ac-caret { opacity: .5; } .ac-head:hover .ac-caret { opacity: .85; } .ac-row:hover .ac-caret { opacity: .6; } .ac.open > .ac-head .ac-caret, .ac-step.on .ac-caret { transform: rotate(180deg); } .ac-step.on .ac-caret { opacity: .75; } /* Folded away rather than removed, so the header does not jump as the run adds a step to a list nobody is looking at. */ .ac-steps { display: none; padding-top: 2px; } .ac.open .ac-steps { display: block; } .ac-step { min-width: 0; } /* The row itself: a button where there is something under it to open, a plain div where there is not. Both are drawn the same, because whether a result was kept is a fact about the verb and not something the eye should have to sort rows by; the caret on hover is the whole difference. */ .ac-row { pointer-events: auto; display: flex; align-items: center; gap: 7px; width: 100%; padding: 2.5px 0; border: 0; border-radius: 5px; background: none; font: inherit; color: inherit; text-align: left; min-width: 0; } button.ac-row { cursor: pointer; } div.ac-row { pointer-events: none; } /* The fill runs a little wider than the text so the row reads as an object under the pointer rather than as a highlight on a sentence. Negative margin rather than padding, so nothing in the column above it moves when it appears and the glyphs stay in the one line they were in. */ button.ac-row:hover { background: var(--panel); margin: 0 -7px; padding-left: 7px; padding-right: 7px; width: calc(100% + 14px); } /* Every row starts in the same column whatever is standing in it — an app's mark, the canvas's own, or the cross. The slot is what lines the sentences up; the thing inside it is not. Sixteen rather than fifteen because the mark is a wide shape and the logos are square, and the column is measured by the wider of the two. */ .ac-glyph { flex: none; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--dim); } .ac-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; } /* The mark, at the head of a row. The same line ui/loading-mark.js draws while an app is being built, at 16px instead of 640, and the shape only: no words rotating beside it, no ground, no frame. Those belong to a rectangle waiting on a document. Here the shape alone says the thing it has always said, which is that this canvas is making something, and it says it of a call that is over as readily as of one still running — still in the first case, writing itself in the second. The stroke is the one number not carried over. --stroke-w is 26 in a 550-unit viewBox, which is a hairline in a 640px frame and 0.75 of a pixel here, and a 0.75px line beside a 16px logo is a smudge. 38 puts it back on 1.1, which is the weight the logos read at. */ .ac-mark { width: 16px; height: auto; fill: none; stroke: currentColor; stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; } /* Drawn, and staying drawn. --len is written onto the document element by measure() in ui/loading-mark.js off the real path length; until it has been, an unset dasharray is a solid line, which is the same picture. */ .ac-mark path { stroke-dasharray: var(--len); stroke-dashoffset: 0; } /* And writing itself, on the row in flight. The animation is the build's, whole — same keyframes, same cycle, built once at runtime because the easing needs the path length in pixels — started from where the panel it replaced had got to. Without that a panel rebuilt on every tool call restarts a 4-second write every 3 seconds and never finishes drawing a single letter, which is the reason this was not used here the first time. See age() in ui/activity.js. */ .ac-step.running .ac-mark path, .ac-head.bare .ac-mark path { animation: write var(--cycle, 4140ms) infinite; animation-delay: calc(var(--age, 0) * -1ms); } /* The bare mark, drawn alone — the "@" menu's rule, and its fallback: an app with no transparent artwork wears its tile instead, scaled into the slot with the corner the tile has. See client/logos/README.md. */ .ac-logo { width: 15px; height: 15px; display: block; object-fit: contain; } .ac-logo.full { border-radius: 3.5px; object-fit: cover; } /* One sentence, in two weights. The verb is what happened; what follows is what it happened to, and it gives way first when the block is narrow — a row that has to lose something should lose the object of the sentence rather than the verb of it. */ .ac-line { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-detail { color: color-mix(in srgb, var(--dim) 66%, var(--bg)); } /* What came back, as it came back. The fill and the hairline the canvas already uses for a control laid over the work, and the type a diff is set in: this is somebody else's API response, and dressing it as prose would be claiming to have read it. Capped by runs.js at 900 characters, which is also as much of it as the model was shown. Three classes, and it is not tidiness. This is a 
 inside a block, and
   two rules at the top of this file are aimed at exactly that: `.block pre`
   sets the font for every one of them at 16px in the canvas's own face, and
   `.block.agent pre` sets the colour — one and two classes plus an element,
   against the one class this rule started with. Both won. The pane came out set
   in body copy: sixteen-pixel sans, line height 1.75, an API response dressed
   as somebody's writing. Anything given to a 
 in here has to out-specify
   those two or it will quietly not apply.

   Small on purpose. It is a reference rather than a reading: somebody opens it
   to find the one field they came for and shuts it again, and at 16px four
   lines of JSON are taller than the message they belong to. */
.ac .ac-step .ac-out {
  display: none;
  margin: 3px 0 5px 22px;
  padding: 7px 9px;
  max-height: 168px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--dim);
  /* --code and not --mono. This canvas sets code in Inter like everything else
     and opens the seam to a real monospace exactly where somebody is reading a
     program rather than reading the canvas — see the note by --code at the top.
     A JSON body is that: it is indented, and the indentation is how you find
     the field you came for. */
  font: 400 10px/1.5 var(--code);
  /* min-height comes off `.block pre` too, where it holds an empty line open
     for a caret. Nothing is typed in here. */
  min-height: 0;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 2;
  user-select: text;
  pointer-events: auto;
}
.ac .ac-step.on .ac-out { display: block; }

/* --- the change a call made --------------------------------------------------

   Under the row that reports it, in the block the agent is working in. It was
   a card on the Code tab for a release, at the far side of the window from the
   sentence saying the file had been written, and being in two places is the
   whole of what was wrong with it: watching an agent work meant reading its
   account here and its output there, in two rhythms, neither of them complete.

   So the row opens onto its own diff exactly as a call opens onto its own
   result — the same control, the same column, the same fold — and the only
   difference is what is inside. A result is somebody else's JSON and stays shut
   until asked for; a change is the work, and is open until somebody shuts it.

   Set in the panel's cold palette rather than a diff viewer's, because this is
   chrome laid over somebody's message and not an application window. What the
   green and the red are for is which lines, and they are the only two colours
   in it. */
.ac-change {
  display: none;
  margin: 3px 0 6px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: auto;
  user-select: text;
}
.ac .ac-step.on .ac-change { display: block; }
/* The count on the row, so a folded change still says how big it is. */
.ac-n {
  flex: none;
  display: flex;
  gap: 5px;
  font: 500 11px/1 var(--ui);
  font-variant-numeric: tabular-nums;
}
.ac-n b { color: var(--ed-add); font-weight: 500; }
.ac-n s { color: var(--ed-del); text-decoration: none; }

/* The diff itself. One renderer draws this wherever a change is shown — see
   ui/diffview.js — so the rules are about the shape and not about the panel it
   happens to be in.

   Its own scroller in both directions: a wrapped diff line is two lines that
   look like two changes, and a long one must not be allowed to widen whatever
   it is sitting in. The height is a screenful of a message and no more, because
   the thing under it is the answer somebody is waiting for. */
.ac, .ed-diff {
  --ed-add: #1a7f37;
  --ed-del: #cf222e;
  --ed-wash: 12%;
}
:root[data-theme="dark"] .ac,
:root[data-theme="dark"] .ed-diff {
  --ed-add: #4ac26b;
  --ed-del: #f0706d;
  /* The same tint reads heavier on a dark ground: it is a bright colour lifting
     off black rather than a pale one settling onto white. */
  --ed-wash: 9%;
}
.ed-diff {
  max-height: 240px;
  overflow: auto;
  padding-bottom: 4px;
  background: var(--panel);
  color: var(--dim);
  font: 400 10px/1.6 var(--code);
  tab-size: 2;
  overscroll-behavior: contain;
}
/* Where the hunk is, in the notation every diff already uses, and stuck to the
   top of the scroller: a file being written scrolls under it, and the numbers
   are what say where in the file you are looking. */
.ed-at {
  position: sticky;
  top: 0;
  padding: 4px 9px 3px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: color-mix(in srgb, var(--dim) 66%, var(--bg));
  font: 400 9.5px/1.4 var(--code);
  white-space: pre;
}
.ed-at:not(:first-child) { border-top: 1px solid var(--line); margin-top: 5px; }

.ed-line {
  display: flex;
  white-space: pre;
}
/* Both numbers, each in its own column: the before's and the after's, which is
   the pair that lets somebody say what a deleted line used to be — one column
   of after-numbers cannot. Tabular so they form an edge, dim enough to read
   past, and never selected, so dragging across a diff puts the code on the
   clipboard and not a column of numbers through it. */
.ed-line > i {
  flex: none;
  width: 30px;
  padding-right: 7px;
  color: color-mix(in srgb, var(--dim) 60%, var(--bg));
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}
/* The verdict on the line, in the column a diff keeps it in. A middle dot for
   the lines that only came along to say where this is. */
.ed-line > em {
  flex: none;
  width: 14px;
  color: color-mix(in srgb, var(--dim) 55%, var(--bg));
  font-style: normal;
  text-align: center;
  user-select: none;
}
.ed-line > span { min-width: 0; padding: 0 10px 0 2px; }

.ed-line.add { background: color-mix(in srgb, var(--ed-add) var(--ed-wash), transparent); }
.ed-line.del { background: color-mix(in srgb, var(--ed-del) var(--ed-wash), transparent); }
/* The number and the sign of a changed line carry the colour at full strength,
   on a heavier tint, which is what makes the left edge of a diff scannable
   without reading a word of it. */
.ed-line.add > i, .ed-line.add > em {
  color: var(--ed-add);
  background: color-mix(in srgb, var(--ed-add) calc(var(--ed-wash) * 1.6), transparent);
}
.ed-line.del > i, .ed-line.del > em {
  color: var(--ed-del);
  background: color-mix(in srgb, var(--ed-del) calc(var(--ed-wash) * 1.6), transparent);
}
/* A file that is entirely new has nothing to contrast with, so it is left
   alone: every line green is a green panel, and the count on the row already
   said the file is new. See diffHtml in ui/diffview.js. */
.ed-diff.whole .ed-line.add { background: none; }
.ed-diff.whole .ed-line.add > i, .ed-diff.whole .ed-line.add > em {
  background: none;
  color: color-mix(in srgb, var(--dim) 60%, var(--bg));
}

.ed-none, .ed-cut {
  padding: 6px 9px;
  color: color-mix(in srgb, var(--dim) 66%, var(--bg));
  font: 400 10.5px/1.5 var(--ui);
}

/* A step that did not work is not drawn differently, and the absence of a rule
   here is the design rather than an omission.

   It had two, and they went one at a time. First the colour: --accent for the
   glyph and seven parts of it mixed into the grey for the sentence, which is
   the canvas's warm orange standing in a panel that is cold everywhere else and
   reads as a severity this panel has no scale for. Then the weight that
   replaced it, and then the cross in ui/activity.js, because both were the same
   move — a second and a third way of saying "this failed" stacked on top of the
   sentence that says it in words.

   What is left is one design for every row: the house mark, --dim, 12.5px,
   writing itself while a call is in flight and still when it is over. A run of
   fourteen rows now reads as one list, and what happened in any of them is read
   rather than spotted. */

/* The calls that have scrolled off the top of the list, as a count. Sits in the
   label column rather than the glyph one, so it reads as a note about the list
   and not as another step in it. */
.ac-more {
  padding: 2.5px 0 2.5px 22px;
  color: color-mix(in srgb, var(--dim) 66%, var(--bg));
}

@media (prefers-reduced-motion: reduce) {
  .ac .live { animation: none; background: none; color: var(--dim); }
  .ac-step.running .ac-mark path, .ac-head.bare .ac-mark path { animation: none; }
  .ac-caret { transition: none; }
}

/* ---- an agent asking you something ---------------------------------------
   In the block it is working in, under whatever it has done so far. See the
   note at the top of ui/ask.js for what this replaced and why: a question used
   to be a second block on the plane, placed before anybody knew how tall it
   would be, answered by finding it, pressing reply, typing, and pressing Enter.

   It is the one thing in this panel that is not cold. Everything else here is
   chrome laid over the work and steps back from the canvas's own colour; a
   question is the agent talking, in words somebody wrote, and it is read rather
   than operated. So the question takes --ink like any other writing in the
   block, and only the line above it — who is asking, and what kind of asking —
   stays in the grey the steps are in.

   Nothing is modal and nothing is a dialog, which is the rule this whole
   mechanism is built on: three agents working means three of these, in three
   blocks, all answerable in any order while everything else keeps running. */
.ak {
  pointer-events: auto;
  padding: 8px 0 4px;
  max-width: 100%;
}

/* A question you press gets a box; a question you type does not.
 *
 * The open question already carries one — .ak-write below, a hairline round the
 * field that says where the typing goes. The pressed one had nothing: lead,
 * question and the buttons loose on the block, which is fine while it is the
 * only thing there and stops being fine the moment there is a run of tool steps
 * above it, because then the question is just more grey text in a column of
 * grey text and the buttons are the only sign that this one is waiting on a
 * person.
 *
 * So it takes the same box the field takes — the same hairline, the same 9px,
 * the same width to stop at — and the two forms of being asked something look
 * like two forms of one thing. Boxing both would be a box inside a box, which
 * is why this is on the picks and not on .ak. */
.ak:has(.ak-picks) {
  /* The 8px and 4px the unboxed version padded with are now the box's own air,
     so the gap to the steps above and the reactions below is put back outside
     it. Both neighbours carry some of their own; these are the halves that make
     the two gaps even. See the note on .ac's padding. */
  margin: 3px 0 4px;
  padding: 9px 11px 10px;
  max-width: 460px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}

.ak-lead {
  font: 500 12.5px/1.45 var(--ui);
  color: var(--dim);
  margin-bottom: 3px;
}

.ak-q {
  font: 400 14px/1.5 var(--ui);
  color: var(--ink);
  margin-bottom: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The answers, where they are a known short list. A row of them rather than a
   column: two or three short labels read as a set of alternatives side by side
   and as a menu stacked, and this is a choice, not a menu.

   Two of them, for a permission. There was a third — "Always allow", which
   wrote a standing rule into somebody's own settings — and it is gone; see
   optionsFor in ../core/native.js for why. What it leaves behind is worth more
   than the button was: a pair, which can be drawn as a pair. */
.ak-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
/* The permission pair, which is not a list of alternatives and is not drawn as
   one. It is an action row: the two answers sit at the end of the line, refusal
   then affirmative, where a hand that has finished reading the question already
   is. Genuine alternatives keep the left margin, because those ARE a list and a
   list is read down the same edge as the words above it. */
.ak-picks.pair {
  justify-content: flex-end;
  margin-top: 10px;
}

/* Sized off the reply pill under the same message, not off the confirm dialog.
   The dialog's buttons are 34px because they are the only thing in a card of
   their own; these sit two rows above a 24px reply, and at 32px they stood over
   it like a different class of control had been dropped into the thread. Same
   height, same corner, same 12px type as its neighbours: it is still a button
   rather than a pill — solid fill, a real target either side of centre — but it
   belongs to the row of chrome it lives in.

   The label stays in --ink at the weight of a control. That was the fix for an
   earlier pass where it was grey 12.5px type behind a hairline, which made the
   refusal in particular read as a caption somebody had bordered by accident,
   and shrinking the box does not bring that back. */
.ak-pick {
  height: 24px;
  padding: 0 10px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--panel);
  font: 500 12px/1 var(--ui);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease,
    transform .08s ease;
}
.ak-pick:hover {
  background: color-mix(in srgb, var(--ink) 9%, var(--panel));
}
/* A press that moves. The whole of the feedback: it is a button on a plane that
   itself pans and zooms, so anything larger reads as the canvas moving. */
.ak-pick:active { transform: translateY(1px); }

/* The affirmative — the one that lets it carry on — is the only solid thing
   here. Solid rather than coloured: a green Allow once and a red Deny is a pair
   of traffic lights telling somebody which answer is correct, and which answer
   is correct is the whole of what they are being asked. Weight says "this is
   the affirmative"; it does not say "press this one".

   Its refusal is a filled chip rather than an outline, which is the change that
   made the pair read as a pair. Two hairline boxes on a block that already has
   an edge is three rectangles inside each other; a soft fill beside a solid one
   is one control and its alternative, told apart by weight alone.

   The corner stays square-ish in both, against the reference this was drawn
   from, which rounds them to capsules. A capsule is a shape this canvas does not
   use anywhere else, and a permission is the last place to introduce one: it
   takes the 6px of the pills beside it. See the note above .ak-pick. */
.ak-pick.first {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.ak-pick.first:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  border-color: color-mix(in srgb, var(--ink) 88%, var(--bg));
  color: var(--bg);
}
/* Drawn on the outside in both cases, so the filled one keeps its own edge
   between the ring and the fill rather than wearing the ring as a border. */
.ak-pick:focus-visible {
  outline: 2px solid var(--sel);
  outline-offset: 2px;
}

/* And the open question: one line, taking Enter. The field is the control and
   the button beside it is a second way to press the same key, for somebody who
   reached for the mouse. */
.ak-write {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 460px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.ak-write:focus-within {
  border-color: color-mix(in srgb, var(--sel) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sel) 14%, transparent);
}

.ak-in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: 400 13.5px/1.5 var(--ui);
  color: var(--ink);
  outline: none;
}
.ak-in::placeholder { color: color-mix(in srgb, var(--dim) 66%, var(--bg)); }

.ak-send {
  flex: none;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: var(--panel);
  color: var(--dim);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ak-send svg { width: 14px; height: 14px; display: block; }
.ak-send:hover { background: var(--ink); color: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .ak-pick, .ak-write, .ak-send { transition: none; }
  .ak-pick:active { transform: none; }
}

/* The panel stands in FOR the answer, so it stands in its PLACE. Underneath it
   is an empty 
 that is a line tall whether or not there is anything in it,
   and while nothing has been written that line is not the answer's space, it is
   a hole between the waiting and the reactions — which is what put the reply
   button a clear inch below and made the row look bottom-heavy.
   It comes back with the first character, because the panel goes at the same
   moment: both are `:has(> .ac.instead)`, and wrote() takes the panel away.

   `.instead` and not `.ac`, and the difference is the whole rule. A panel is
   drawn in two kinds of block: the empty reply an errand opened for its answer,
   which is this, and the person's own message in a build — where the panel sits
   under a brief somebody wrote and there is nothing to stand in for. Keyed on
   `.ac` alone, the second one hid the message it was working on. See paint() in
   ui/activity.js, which is where the two are told apart. */
.block:has(> .ac.instead) > .block-body,
.block:has(> .ac.instead) > pre { display: none; }

/* ---- tables --------------------------------------------------------------
   A grid, drawn as one object rather than as characters. Everything else in a
   block is a 
 under a transparent