/* Claude Web Studio — dark, dense, terminal-adjacent. Zero external assets. */
:root{
--bg:#0e1014; --bg-2:#12141a; --bg-3:#171a21; --bg-4:#1d212a;
--line:#252a35; --line-2:#323847;
--tx:#e6e9ef; --tx-2:#a6adbb; --tx-3:#6b7383;
--acc:#d97757; /* Claude clay */
--acc-2:#e89b7d;
--blue:#4d8bf0; --blue-2:#6fa4ff; /* «send» — an action, not a warning */
--ok:#4ec9a0; --warn:#e0b352; --err:#f0796a; --think:#8b7fd4;
/* Derived: text on a fill, state backgrounds, code highlighting, shadows, veils. Not one
interface colour stays hard-wired into a rule — otherwise the theme paints half the
screen. */
--on-acc:#1a1207; --on-blue:#07162c; --on-err:#2a0f0c; --on-ok:#06231a;
--err-bg:#2a1614; --err-bd:#5a2b28; --warn-bg:#2a1a12;
--think-2:#a99fe0; --strong:#ffffff; --cold:#5f93b8;
--veil:#000000aa; --shadow:#00000099; --hair:#ffffff66;
--sx-s:#9ece8a; --sx-c:#5f6673; --sx-k:#c88fd6; --sx-n:#e0b352; --sx-key:#7fb8e6;
--add-bg:#12291f66; --add-tx:#8fd6b4; --del-bg:#2a161533; --del-tx:#e39b93;
--mono:'JetBrains Mono','Cascadia Code',Consolas,'SF Mono',monospace;
/* FIGURES READ WITH THE EYES ARE NOT CODE. A zero with no slash, distinguishable 6/8/9,
tabular width. On Win11 that is Segoe UI Variable Text (drawn for a small type size),
on the phone — the system grotesque. Monospace is the enemy here: in all three of ours
the zero is struck through. */
--figures:'Segoe UI Variable Text','Segoe UI',-apple-system,'SF Pro Text',Roboto,'Inter',system-ui,sans-serif;
--sans:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
--r:10px;
/* One multiplier for the whole interface: +/− in the settings move it, not the sizes
separately. Everything measured off the viewport is divided back by it — otherwise the
screen «grows» together with the content and an extra scroll appears. */
--ui-scale:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{zoom:var(--ui-scale)}
html,body{height:100%}
/* THE SCROLL DOES NOT GO PAST THE EDGES OF THE FEED.
You scrolled to the end and flicked again — the phone's browser picks the movement up as
the PAGE: it pulls the document, twitches its own address bar, and the bottom panel goes
with it. Hence «the bottom window judders while scrolling», even though nothing at all is
happening inside the panel itself. overscroll-behavior cuts that chain (and removes
pull-to-refresh along with it, which on the panel would mean losing your place in the
conversation). */
html,body{overscroll-behavior:none}
body{background:var(--bg);color:var(--tx);font:14px/1.55 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.spacer{flex:1}
.muted{color:var(--tx-3);font-weight:400}
kbd{font:11px var(--mono);background:var(--bg-4);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;color:var(--tx-2)}
/* The rail's width is a variable, not a number: it is dragged by the right edge with the
mouse and remembered (app.js → studioRail). 264px is only the default value. */
:root{--rail-w:264px}
/* ═══ HOW WIDE THE CONVERSATION IS ═══
The feed, the composer and every strip that lines up with them share ONE number, so they can
never drift out of line — eleven separate `max-width:900px` were the same measure copied
eleven times, and a change to one of them would have left the input field and the text it
answers on different axes.
900px was a reading measure (~90 characters a line). The owner asked for the opposite on
09.09 — «maximize content width on desktop» — with a screenshot of ~460px of dead gutter on
the left of a 1920px window and ~330px on the right. So it fills what there is: `100%`, held
off the edges by the 22px padding `.wrap` already carries.
⚠ THE VALUE LIVES HERE AND NOWHERE ELSE. To put a ceiling back — on an ultrawide screen a
line of prose really does become hard to follow — set this one line to `min(1500px, 100%)`
and every strip follows. Do not write a number into the rules below. */
:root{--read-w:100%}
/* THE SCREEN HEIGHT IS THE SMALL ONE (svh), NOT THE DYNAMIC ONE (dvh).
`dvh` changes while the phone's browser hides and shows its own address bar — that is,
exactly while you are scrolling. The composer is glued to the bottom edge of the grid and
travelled with it: «the bottom panel either swims away or gets dragged along». `svh` is
the height with the browser's panels SHOWN: it never changes, the layout stands rock
solid, and the extra strip under the application is painted with the same background
(body). The first line is the spare for engines that do not know about svh yet. */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;height:calc(100vh / var(--ui-scale));
height:calc(100svh / var(--ui-scale))}
/* ═══ sidebar ═══ */
.sidebar{background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative}
/* The width handle: a narrow strip along the rail's right edge. It is caught with slack
(the cursor is not obliged to hit a pixel) and is visible only under the cursor and while
dragging. */
.rail-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;z-index:30;cursor:col-resize;
background:transparent;border:0;padding:0}
.rail-grip::after{content:'';position:absolute;top:0;right:3px;width:1px;height:100%;background:var(--acc);opacity:0;transition:opacity .12s}
.rail-grip:hover::after,.rail-grip.on::after{opacity:.85;width:2px}
body.rail-dragging{cursor:col-resize;user-select:none}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.brand{font-weight:600;letter-spacing:.2px;color:var(--acc);display:flex;align-items:center;gap:0;flex:1;min-width:0}
.brand span{color:var(--tx)}
/* The assistant stands BY THE PANEL'S NAME (see placeTalk in app.js): pressed against the
right edge of the line, a little smaller than the header one — next to the connection
dot it is a pair of state signs, not an action button. The pulse and the green ring are
the same ones, they live on the node itself. */
.brand .talk-btn{margin-left:auto;width:28px;height:28px;flex:none}
.brand .talk-btn .talk-ico{width:16px;height:16px}
/* The server restart stands next to the connection dot — they are about one and the same thing:
is the one at the other end alive. Usually dimmed; it lights up by itself when the server's
code has been updated and is waiting for a restart. */
.restart-btn{margin-left:auto;width:23px;height:23px;flex:none;display:flex;align-items:center;
justify-content:center;border:1px solid transparent;border-radius:7px;background:none;
color:var(--tx-3);font-size:13.5px;line-height:1;cursor:pointer;opacity:.45;transition:.15s}
.restart-btn:hover{opacity:1;color:var(--acc);border-color:var(--line-2);background:var(--bg-3)}
.restart-btn.need{opacity:1;color:var(--warn);border-color:var(--warn);
background:color-mix(in srgb, var(--warn) 12%, transparent)}
.restart-btn.going{opacity:1;color:var(--acc);animation:restart-spin .9s linear infinite}
@keyframes restart-spin{to{transform:rotate(360deg)}}
.new-btn{margin:0 12px 12px;padding:9px;background:var(--bg-4);color:var(--tx);border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font:500 13px var(--sans);transition:.15s}
.new-btn:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.side-block{padding:0 12px 12px;display:flex;flex-direction:column;min-height:0}
.side-block.grow{flex:1}
.side-label{display:flex;align-items:center;gap:6px;font:700 11px var(--sans);letter-spacing:1.1px;text-transform:uppercase;color:var(--tx-2);margin-bottom:7px}
/* The counter next to the heading is a caption, not a heading: no caps, one line. */
#tree-total{font:10.5px var(--mono);letter-spacing:0;text-transform:none;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select,.chip-select{background:var(--bg-3);color:var(--tx);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:13px var(--sans);width:100%;cursor:pointer;outline:none}
.select:focus,.chip-select:focus{border-color:var(--acc)}
.mini-btn{margin-left:auto;background:none;border:none;color:var(--tx-3);cursor:pointer;font-size:13px}
.mini-btn:hover{color:var(--acc)}
.sessions{overflow-y:auto;display:flex;flex-direction:column;gap:3px;min-height:0}
.sess{padding:7px 9px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.sess:hover{background:var(--bg-3)}
.sess.active{background:var(--bg-4);border-color:var(--line-2)}
.sess-t{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sess-m{font-size:10.5px;color:var(--tx-3);margin-top:2px;display:flex;gap:6px}
/* The connection is the dot by the studio's name. Red = the socket fell, green = alive. The
caption «connected» and the «log out» button held a whole strip at the bottom for the sake
of something looked at once a day; logging out moved into the account (the round button at
the top right). */
.conn-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:15px;
vertical-align:middle;background:var(--err);box-shadow:0 0 7px var(--err);transition:.2s;
border:0;padding:0;flex:none}
.conn-dot.on{background:var(--ok);box-shadow:0 0 7px var(--ok)}
/* ── THE SAME DOT — THE RESTART ALARM ──
The ⟳ button held room in the header permanently for the sake of an event that happens once
an hour. Now the connection dot shouts about it itself: yellow, bigger and blinking — the
question is one and the same, «is the one at the other end alive, and is he on the right
code». A press asks and restarts. */
/* ⚠ BLINKING IS A REQUEST FOR AN ACTION, AND MOST OF THE TIME THERE IS NO ACTION (30.08).
The dot shouted the whole time the code on disk was newer than the running one — and that is
hours: the server honestly waits for a gap between turns and will leave by itself. «The
yellow button is still lit, it is strictly unclear what I am supposed to do in this case» —
exactly about this. So a steady yellow = «new code is waiting, I will take it myself», and
only `.soon` (the countdown has started) or being an orphan (the button is the only cure)
bring the blinking back. */
/* ⛔ AND IT IS THE TURNING ARROWS, NOT A DISC (the owner, 23.09: «мы же хотели, чтобы там
вращались стрелки, намекая на то, что нужно перезагрузить… а она не вращается»). A still amber
disc had to be HOVERED to learn that it meant «restart owed» — and a sign nobody hovers is a
sign that says nothing; that is exactly the hole the separate ⬇ «updates available» icon was
built to plug on 19.09, and two signs about one fact then carried two different tooltips. So
the dot wears the same pair of chasing arrows as the red one — the shape everybody reads as
«refresh» — in the warning ink, and the ⬇ is gone. THE SPEED IS THE SENTENCE: 3.4 s against the
red ring's 1.15 s. Amber turns slowly = «new code is waiting, I take it myself at the first
gap»; red spins fast = «this tab is stale, press me». Identical speeds would make one indicator
say two things. */
.conn-dot.need{width:16px;height:16px;border:0;border-radius:0;cursor:pointer;box-shadow:none;
background:var(--warn);
-webkit-mask:var(--spin-arrows) center/100% 100% no-repeat;
mask:var(--spin-arrows) center/100% 100% no-repeat;
animation:conn-spin 3.4s linear infinite}
/* The countdown HAS started — now there is something to press (postpone), so the arrows race and
breathe. ⚠ `conn-cry` cannot be reused here: it animates `transform`, and so does the rotation. */
.conn-dot.need.soon{animation:conn-spin 1.1s linear infinite,conn-blink 1.2s ease-in-out infinite}
.conn-dot.need:hover{background:color-mix(in srgb, var(--warn) 78%, var(--tx))}
@keyframes conn-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.conn-dot.need{animation:none}}
/* ── THE LENGTH OF THE WAIT, BESIDE THE SIGN THAT IS WAITING ──
«52 минуты – это хорошая штука… можно и оставить» (the owner, 23.09). It was the one thing the
⬇ icon added that the dot did not have, so it moved here rather than dying with it: an hour of
waiting read as «nothing is happening» until it was given a number. It is a caption on the
arrows — same ink, no box, and the same tooltip is glued to both. */
/* ⚠ `.brand .conn-age`, NOT `.conn-age`: the header already paints its own text with
`.brand span{color:var(--tx)}` (0,1,1), which outranks a bare class (0,1,0) — so the caption
came out in ordinary text ink beside amber arrows and read as part of the panel's NAME. The
narrow header also clips its spans (`.brand > span{overflow:hidden;text-overflow:ellipsis}`),
which would turn «1 h 06 min» into «1 h 0…» on his phone; `flex:none` + `overflow:visible`
keep the number whole. Both were caught by `npm run composer`, not by eye. */
.brand .conn-age{font:600 10px/1 var(--sans);color:var(--warn);white-space:nowrap;letter-spacing:0;
margin-left:6px;flex:none;overflow:visible;cursor:pointer}
/* ⚠ Hidden by the ATTRIBUTE, and never painted by id: a flat `display` outranks [hidden], and
that mine has gone off three times in this header. */
.conn-age[hidden]{display:none}
.conn-dot.going{animation:restart-spin .9s linear infinite}
/* ── THE SAME DOT SAYS «THE PAGE ITSELF IS STALE» ──
Two different staleness questions share one dot, and they must not look alike: the SERVER on
old code blinks amber (above), the BROWSER holding old front-end code turns into a softly red
spinning ring — a ring, because a spinning disc looks like a still disc. Click = hard reload. */
/* THE SIGN IS TWO ARROWS CHASING EACH OTHER, not a cut-off ring. A semicircle read as
«something broke and is hanging»; a recognisable pair of arrows reads as «refresh» at a
single glance. It is drawn with a mask: the shape lives in `--spin-arrows`, the colour is
an ordinary `background`, so the same glyph suits the dot on the left, the button on the
right, and any of the ten themes. */
:root{--spin-arrows:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath fill='none' d='M4.2 12A7.8 7.8 0 0 1 15.66 5.11'/%3E%3Cpath stroke='none' d='M19.55 7.18 14.30 7.67 17.02 2.55Z'/%3E%3Cpath fill='none' d='M19.8 12A7.8 7.8 0 0 1 8.34 18.89'/%3E%3Cpath stroke='none' d='M4.45 16.82 9.70 16.33 6.98 21.45Z'/%3E%3C/g%3E%3C/svg%3E")}
.conn-dot.stale{width:18px;height:18px;border:0;border-radius:0;cursor:pointer;box-shadow:none;
background:var(--err);
-webkit-mask:var(--spin-arrows) center/100% 100% no-repeat;
mask:var(--spin-arrows) center/100% 100% no-repeat;
animation:conn-spin 1.15s linear infinite}
.conn-dot.stale:hover{background:color-mix(in srgb, var(--err) 75%, var(--tx))}
/* ── THE LOGO SPINS WITH THE ARROWS BESIDE IT ──
«Roll favicon in that top panel the same as you do with red half circles. So both» (the owner,
03.09). The red spinning arrows say «this tab is on old code», and they are 18px in a header
that is scanned from the LEFT — the eye starts at the logo and often never travels the extra
two centimetres. Two things turning at once in one line cannot be missed, and it costs nothing:
the same keyframes, the same speed, the same phase. No JS at all — the state is already on the
dot, and `:has()` reads it from its neighbour, so there is no second place to keep in step. */
.brand:has(.conn-dot.stale) img{animation:conn-spin 1.15s linear infinite}
.brand img{display:inline-block;transform-origin:50% 50%}
@media (prefers-reduced-motion: reduce){.brand:has(.conn-dot.stale) img{animation:none}}
/* ── …AND IT TURNS WHILE THE HOUSE IS WORKING, WHICH IS A DIFFERENT SENTENCE ──
«Roll favicon and Icon on page near Claude Studio — all the time if any session is doing
something! Stop only if no active processes at all even background! If ONLY loops that are
waiting there — in that case 3 times slower» (the owner, 04.09). The verdict is computed in
web/app.js (`rollState`) and lands as ONE class on the document, so the header's logo turns
with no JS per frame and keeps its phase across every repaint; the tab's own icon is drawn
frame by frame there, because a browser renders an SVG favicon as a still picture.
2.4 s, not the 1.15 s of the red arrows: this sign lives for HOURS at a time, and at the
arrows' speed an hour of honest work reads as an alarm. The waiting loop is 3× that, literally
— 7.2 s — which is slow enough to be read as «not now, but it will».
⛔ STALENESS OUTRANKS WORK, and it does so by specificity, not by luck: `.brand:has(…)` above
scores (0,3,1) against this rule's (0,2,1). The red arrows ask for an ACTION; the turning logo
only reports. Two speeds at once would be one indicator saying two things. */
html.rolling .brand img{animation:conn-spin 2.4s linear infinite}
html.rolling.rolling-slow .brand img{animation-duration:7.2s}
@media (prefers-reduced-motion: reduce){html.rolling .brand img{animation:none}}
@keyframes conn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.conn-dot.stale{animation:none}}
@keyframes conn-cry{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.4}}
@media (prefers-reduced-motion: reduce){.conn-dot.need.soon{animation:none}}
/* ── HARD REFRESH — WITH A BIG BUTTON IN THE RAIL'S HEAD ──
The panel lives in an open tab for days on end, edits reach the disk by the dozen an hour —
this is THE most frequent button here, and on the phone it has to be hit with a finger, not
hunted for in the curtain. */
.hard-btn{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border:none!important;background:none!important;
border:1px solid var(--line-2);border-radius:9px;background:var(--bg-3);color:var(--tx);
font-size:16px;line-height:1;cursor:pointer;transition:.15s;margin-left:8px}
.hard-btn:hover{color:var(--acc)}
.hard-btn svg{width:20px;height:20px;display:block}
@media (max-width:860px){.hard-btn svg{width:25px;height:25px}}
/* BOTH ALARMS SAY ONE AND THE SAME THING — «this tab is on old code» — and that is why they
look like a pair: on the left a red one spins, on the right the same button SLOWER (2.6 s
against 1.15 s). The difference in speed is not decoration: identical speeds would read
as one indicator duplicated by oversight. At rest the button is white — it is the most
frequent button here and it must not look switched off. */
.hard-btn.need{color:var(--warn);border-color:var(--warn);
background:color-mix(in srgb, var(--warn) 14%, transparent)}
.hard-btn.need svg{animation:conn-spin 2.6s linear infinite}
@media (prefers-reduced-motion: reduce){.hard-btn.need svg{animation:none}}
.hard-btn.going{animation:restart-spin .9s linear infinite}
@media (max-width:860px){.hard-btn{width:40px;height:40px;font-size:20px;border-radius:11px}}
/* ═══ main ═══ */
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
/* ═══ ← → : THE TRAIL OF ROWS THIS WINDOW HAS STOOD IN (web/visits.js) ═══
A PAIR, drawn as one control: two arrows 2px apart read as «back and forward», two arrows
14px apart read as two unrelated buttons. The topbar's own gap is 14, so the pair carries its
own. */
.nav-pair{display:flex;align-items:center;gap:2px;flex:none;margin-right:-8px}
.nav-btn{flex:none;width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;
border:1px solid transparent;border-radius:8px;background:none;color:var(--tx-2);cursor:pointer;transition:.15s}
.nav-btn svg{width:17px;height:17px;display:block}
.nav-btn:hover:not(.off){background:var(--bg-4);border-color:var(--line-2);color:var(--tx)}
.nav-btn:active:not(.off){background:var(--bg-3)}
/* ⚠ DIM, NOT GONE, AND DIMMED BY A CLASS RATHER THAN BY `disabled`. A button that disappears
when there is nowhere to go takes the whole control off the screen on a fresh panel — a door
nobody has seen does not exist for a person — and it moves the task's name sideways every time
the trail runs out, which is the one thing the topbar may not do. The `disabled` ATTRIBUTE was
worse still: the browser swallows every mouse event on a disabled control, right button
included, so the list of everything this window has opened would be shut exactly where it is
most wanted — at the start of a trail. The press is refused in JS; the events still arrive. */
.nav-btn.off{opacity:.28;cursor:default}
@media(max-width:860px){
/* The topbar is the most expensive real estate on the phone, and ☰ already stands to the left
of these. The pair keeps a finger's height and gives up its padding, never its size. */
.nav-pair{gap:0;margin-right:-10px}
.nav-btn{width:30px;height:30px}
.nav-btn svg{width:18px;height:18px}
}
.title-wrap{min-width:0;flex:1}
.chat-title{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font:11px var(--mono);color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⛔ WHEN SOMETHING IN THE CAPTION IS RED, THE CAPTION MAY TAKE A SECOND LINE. `nowrap` + `hidden`
above is right for a footnote and wrong for a warning: at 390px the red build chip was drawn,
had a real bounding box, and sat past the clipped right edge where no eye would ever find it.
The class is set by `paintSub` only while a chip is red, so a healthy header never grows. */
.chat-sub.has-red{white-space:normal;text-overflow:clip;line-height:1.35}
/* The project is not a footnote but the answer to «where am I»: it is set in the accent, the
technical part beside it stays grey. */
.sub-proj{color:var(--acc-2);font-weight:600;letter-spacing:.1px}
.sub-rest{color:var(--tx-3)}
.sub-proj+.sub-rest::before{content:' · '}
/* ═══ THE TECHNICAL CHIPS: A NUMBER THAT ANSWERS A CLICK (27.08) ═══
A button, not text — and it is obliged to look like text: the line under the task's name is
a footnote, not a toolbar. Hence the transparent background and the border that appears
only under the cursor: «this can be pressed» is said at the moment it is already being
looked at. */
.sub-chip{font:inherit;color:var(--tx-3);background:none;border:0;padding:0 3px;margin:0;
border-radius:5px;cursor:default;font-variant-numeric:tabular-nums;line-height:1.2}
button.sub-chip{cursor:pointer}
button.sub-chip:hover{color:var(--tx-1);background:var(--bg-3)}
.sub-chip+.sub-chip::before{content:'· ';color:var(--tx-4, var(--tx-3));opacity:.6}
.sub-calls{color:var(--tx-2)}
/* A turn is running — the figure is alive: in the accent, and every new call makes it
wink. Without the animation «work is going on» is indistinguishable from «it is stuck»:
there may be no text on the screen at that moment at all (the model is thinking over its
tenth tool). */
.sub-calls.live{color:var(--acc)}
.sub-calls.bump{animation:sub-bump .6s ease-out}
/* THE TWO TOOL COUNTERS: 🔧 what worked, 🐞 what did not. Both are our own SVG (see svgBug /
svgWrench in app.js), so the colour here reaches the glyph through `currentColor` and the size
through `em` — an emoji would have taken neither. */
.sub-tool-ok,.sub-tool-bad{display:inline-flex;align-items:center;gap:3px}
.sub-tool-ok svg,.sub-tool-bad svg{width:1.15em;height:1.15em;flex:0 0 auto}
.sub-tool-ok{color:var(--ok)}
.sub-tool-bad{color:var(--err)}
button.sub-tool-ok:hover,button.sub-tool-bad:hover{color:var(--tx-1)}
.sub-tool-ok.bump,.sub-tool-bad.bump{animation:sub-bump .6s ease-out}
@keyframes sub-bump{
0%{transform:scale(1);text-shadow:none}
22%{transform:scale(1.35);color:var(--acc);text-shadow:0 0 10px color-mix(in srgb,var(--acc) 65%,transparent)}
100%{transform:scale(1);text-shadow:none}
}
/* Some of the servers did not come up — that is not decoration but the reason the tool
«does not work»: let it be visible before anyone reaches for it. */
.sub-mcp.part{color:var(--warn, var(--err))}
@media (prefers-reduced-motion:reduce){.sub-calls.bump,.sub-tool-ok.bump,.sub-tool-bad.bump{animation:none}}
/* ON THE PHONE THE LINE IS SHORT, AND IT IS CUT FROM THE END — so the order IS the priority.
The model and the version go first: they do not change for hours and are asked about once
a week, while the calls, the turns, MCP and the tools are what is happening right now.
Both doors are intact: the version and the model are named in the settings and in the
cards of those same chips at the desk. */
/* ⛔ THE WRENCH GOES, THE LADYBUG STAYS. Of the two tool counters only one asks for anything: a
success count is reassurance and can wait for the desk, a failure count is the reason to look.
Thirty pixels on a phone buys exactly one of them. */
/* ⛔ THE BUILD CHIP'S BASE `display` IS DECLARED BEFORE THE MOBILE RULE, NOT AFTER IT. Written
after, it has the same specificity and later wins — so a HEALTHY build id refused to stand down
at 390px and ate a line of the phone's most expensive row. The red override below is deliberate
and is the opposite bargain: reassurance may be cut from the line, a warning may not. */
.sub-build{display:inline-flex;align-items:center;gap:4px}
@media (max-width:860px){.sub-model,.sub-ver,.sub-build,.sub-tool-ok{display:none}}
/* ═══ «AM I ON THE NEWEST BUILD» — AND RED IS THE ONLY THING IT EVER SAYS LOUDLY ═══
Quiet by default, in the same grey as the rest of the footnote: being current is the normal
state and a permanently coloured sign teaches the eye to skip this corner — the very reason the
🐞 chip is hidden at zero. The dot and the colour appear only on a PROVEN gap (server/build.js
answers `ok:null`, not `false`, when it could not ask), and then they outrank the phone's own
width rule below: reassurance may be cut from a short line, a warning may not. Same bargain as
the ladybug above, and it was paid for the same way — on 16.10 a machine served code 18 days
old and nothing on the screen was allowed to say so. */
.sub-ver.stale,.sub-build.bad{color:var(--err)}
button.sub-ver.stale:hover,button.sub-build.bad:hover{color:var(--tx-1)}
.build-dot{width:.52em;height:.52em;border-radius:50%;background:var(--err);flex:0 0 auto;
display:inline-block;box-shadow:0 0 5px color-mix(in srgb,var(--err) 55%,transparent)}
.sub-ver.stale .build-dot{margin-right:3px}
/* ⛔ AND ON 19.10 THE PHONE'S HALF OF THAT BARGAIN WAS REVOKED BY THE OWNER HIMSELF — the red
override that stood here no longer reaches ≤860px: «version, the number of turns, MCP, tools and
the versions must not be printed; it does not fit anyway — up there only the three stripes, the
project's name and the task's name are left». He said it over a photograph of his own header, in
which this footnote had wrapped onto five lines. The warning keeps the DESK, where it has room to
be read, and a version is not actionable from a phone anyway — the gap is closed at the machine.
The whole footnote now stands down on a narrow screen: see § THE PHONE'S HEADER HOLDS FIVE THINGS
at the end of this file. Gate: `npm run buildchip` §8, `npm run voice`. */
/* THE GAP BETWEEN THE COUNTERS IS ROOM FOR A BUTTON, NOT AIR.
14px between four chips on the phone ate more than forty pixels of width — exactly
what the talk button costs, and it had nowhere to stand. The chips themselves were not
squeezed: the figures stayed the same type size, only the interval was squeezed. */
.meters{display:flex;align-items:center;gap:9px}
@media (max-width:860px){.meters{gap:5px}}
.meter{width:96px}
.meter-top{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--tx-2)}
.meter-unit{color:var(--tx-3)}
.bar{height:3px;background:var(--bg-4);border-radius:2px;margin-top:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);transition:width .4s}
.bar i.warm{background:var(--acc)}
.bar i.hot{background:var(--err)}
.cache{font:11.5px var(--mono);color:var(--tx-2);display:flex;gap:5px;align-items:center}
/* ── THE TALK BUTTON WITH THE ASSISTANT ─────────────────────────────────────
Three states, and the difference between them is visible at arm's length, because it is
read with peripheral vision: silent — an ordinary outline in the header's colour; a
conversation is going on — a green fill and a slow pulse of the ring around it; he himself
is speaking right now — the ring beats fast. The ring is a separate element, not a shadow
on the button: box-shadow in an animation repaints the whole header every frame, while a
transform on its own layer does not touch its neighbours. */
.talk-btn{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
position:relative;border:1px solid var(--line-2);border-radius:50%;background:var(--bg-3);
color:var(--tx-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.talk-btn:hover{background:var(--bg-4);color:var(--tx)}
.talk-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.talk-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--ok);
opacity:0;pointer-events:none}
/* A CONVERSATION IS GOING ON. Green — the same as the live connection and the running turn: «it works by itself». */
.talk-btn.on{background:var(--ok-bg,var(--bg-4));border-color:var(--ok);color:var(--ok)}
.talk-btn.on .talk-ring{animation:talk-ring 2s ease-out infinite}
/* HE IS SPEAKING. The same pulse, but twice as fast and with a fill: audible with no sound. */
.talk-btn.say{animation:talk-say 1s ease-in-out infinite}
.talk-btn.say .talk-ring{animation-duration:1s}
@keyframes talk-ring{0%{transform:scale(.86);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes talk-say{0%,100%{background:var(--ok-bg,var(--bg-4))}50%{background:var(--ok);color:var(--bg-2)}}
@media (prefers-reduced-motion:reduce){
.talk-btn.on .talk-ring{animation:none;opacity:.75}
.talk-btn.say{animation:none}
}
@media (max-width:860px){.talk-btn{width:36px;height:36px}.talk-ico{width:19px;height:19px}}
/* ═══ stream ═══ */
/* THE FEED HAS NO SMOOTH SCROLLING ANY MORE — AND THAT IS THE MAIN CURE FOR «IT FLOATS».
`scroll-behavior:smooth` turns EVERY assignment of scrollTop into an animation, and
there are dozens of them a second: autoscroll on every token that arrives, the
frame-by-frame compensation of the growing input field, the anchor correction during a
pinch. Every new target cut off the unfinished previous one — the feed travelled on
its own and past the mark. Smoothness, where it is really wanted, asks for itself
explicitly: scrollTo({behavior:'smooth'}).
overflow-anchor:none — for the same reason: the browser holds ITS OWN anchor when the
layout changes and argues with ours (text scale, reading mode, the composer growing).
There may be only one anchor, and it is ours. */
.stream{flex:1;overflow-y:auto;padding:20px 0 8px;overflow-anchor:none;overscroll-behavior:contain}
/* ═══ ONE SCROLLBAR FOR THE WHOLE PANEL, AND IT IS THIN ═══
The rule knew the feed and `.sessions`, but not the RAIL: `.tree` is a separate scrollable
box, and it got the 17px Windows system bar, grey-and-white, with buttons. «It has become
very fat and ugly» (the owner, 26.08) — next to a thin feed that really does look like a
breakage. `scrollbar-width/color` is for Firefox, `::-webkit-*` for Chromium; we keep both,
the panel lives in both. The track is transparent: the bar must be noticeable only when the
eyes are following it. */
.stream,.sessions,.tree,.sheet-body,.insp-body,.picker-list,.flow-body{
scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.stream::-webkit-scrollbar,.sessions::-webkit-scrollbar,.tree::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar,.insp-body::-webkit-scrollbar,.picker-list::-webkit-scrollbar,
.flow-body::-webkit-scrollbar{width:9px;height:9px}
.stream::-webkit-scrollbar-thumb,.sessions::-webkit-scrollbar-thumb,.tree::-webkit-scrollbar-thumb,
.sheet-body::-webkit-scrollbar-thumb,.insp-body::-webkit-scrollbar-thumb,
.picker-list::-webkit-scrollbar-thumb,.flow-body::-webkit-scrollbar-thumb{
background:var(--line-2);border-radius:5px;border:2px solid transparent;background-clip:content-box}
.stream::-webkit-scrollbar-thumb:hover,.tree::-webkit-scrollbar-thumb:hover{background:var(--tx-3);background-clip:content-box}
.stream::-webkit-scrollbar-track,.tree::-webkit-scrollbar-track,.sheet-body::-webkit-scrollbar-track{background:transparent}
.wrap{max-width:var(--read-w);margin:0 auto;padding:0 22px}
/* THE FLOATING BUTTONS NEED A LANE OF THEIR OWN, AND THE WIDE COLUMN TOOK IT (09.09).
🔊 and ▼ are `position:fixed; right:14px` and 46px across — they used to hang in the empty
gutter beside a 900px column, so nobody had to think about them. A column that fills the
window runs straight under them, and text under a button is text that cannot be read or
selected. 66px = 14 + 46 + a little air. The composer keeps its own 44px button column on
the same side, so the two texts still end at very nearly the same place. */
@media(min-width:861px){ .wrap{padding-right:66px} }
/* The live line is a direct child of the feed, not of .wrap: only that way is it GUARANTEED to
be the last one, whatever gets appended to the conversation. It is obliged to hold its width
itself. */
.stream>.live-line{width:calc(100% - 44px);max-width:var(--read-w);margin:0 auto}
/* The percentage next to the volume, the price with the agents, and the fold of small change. */
.cx-pct{margin-left:7px;font-size:.85em;opacity:.55;font-style:normal}
.cx-money{margin-left:7px;font-size:.85em;opacity:.8;font-style:normal}
.cx-fold{display:flex;align-items:center;gap:10px;width:100%;margin-top:3px;padding:7px 10px;
background:none;border:1px dashed var(--line-2);border-radius:10px;color:inherit;
font:inherit;font-size:12.5px;opacity:.72;cursor:pointer;text-align:left}
.cx-fold:hover{opacity:1}
.cx-fold-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-fold-v{font-variant-numeric:tabular-nums;opacity:.85}
.cx-fold-a{opacity:.6}
.cx-group.fixed{border-left:2px solid var(--line-2);padding-left:10px}
.cx-group.fixed .cx-row{opacity:.88}
.cx-group.off .cx-track{opacity:.45}
.empty{max-width:560px;margin:12vh auto;text-align:center;color:var(--tx-3)}
.empty-mark{font-size:38px;color:var(--acc);margin-bottom:10px}
.empty h1{font-size:20px;color:var(--tx);font-weight:600;margin-bottom:8px}
.empty p{font-size:13.5px;line-height:1.7}
.empty-tips{display:flex;gap:16px;justify-content:center;margin-top:22px;font-size:11.5px;flex-wrap:wrap}
/* `position:relative` is here for the pair of context buttons that hover brings up at the bottom
right of a bubble (see `.ctx-btns` below). Nothing else inside a message is absolutely
positioned against anything above it: the copy button, the attachment tiles and the picture
card each already have a positioned parent of their own. */
.msg{margin-bottom:14px;position:relative}
/* WHO IS SPEAKING IS SEEN WHILE SCROLLING, NOT WHILE READING.
Your own lines stand on the RIGHT, in their own fill and a little smaller; Claude's reply
goes on the left across the full width. Before, both were identical blocks the full width
of the column, and on a fast scroll the «mine / his» boundary simply did not read — the eye
hunted for it by the meaning of the text. */
.msg-user{margin-left:auto;width:fit-content;max-width:82%;
background:color-mix(in srgb, var(--acc) 13%, var(--bg-2));
border:1px solid color-mix(in srgb, var(--acc) 26%, var(--line));
border-right:2px solid var(--acc);
border-radius:var(--r) var(--r) 5px var(--r);
padding:10px 14px;white-space:pre-wrap;word-break:break-word;
font-size:13.3px;line-height:1.55;color:var(--tx);box-shadow:0 1px 5px var(--shadow)}
/* A caption at the bubble's edge: on a long feed you can see where your own line starts. */
.msg-user::before{content:attr(data-who);display:block;font:600 9.7px/1 var(--sans);letter-spacing:.35px;
text-transform:none;color:var(--acc);opacity:.82;margin-bottom:5px;text-align:right}
/* ═══ A SECOND PERSON WRITES IN THIS PANEL TOO ═══
Two people share one feed: the owner and a guest account with her own folders. The caption alone
is not enough — it is 9.7px at the top edge of a bubble, and «what did SHE ask for» is a question
asked while scrolling past. So a guest's line keeps the shape of a sent message and changes its
ink: the thinking violet instead of the clay accent, which is the one hue in every palette that
is already «not the owner's voice». The Telegram guest is the same colour with a dashed edge —
he writes from outside the panel entirely. */
.msg-user.guest{background:color-mix(in srgb, var(--think, #8b7fd4) 14%, var(--bg-2));
border:1px solid color-mix(in srgb, var(--think, #8b7fd4) 32%, var(--line));
border-right:2px solid var(--think, #8b7fd4)}
.msg-user.guest::before{color:var(--think, #8b7fd4);opacity:.95}
.msg-user.guest.via-tg{border-style:dashed;border-right-style:solid}
/* ═══ THE THIRD STATUS: THE LINE THE STUDIO SENT ITSELF ═══
A continuation prompt is neither his and nor the model's: when a turn lands at the window band
and hands over, the panel opens the next session and writes the errand itself. Drawn in his
accent under the caption «you», that was a plain untruth — so it keeps the shape of a sent
line (right-hand side, same corner) and loses everything that says «a person»: no accent, a
dashed edge, muted ink, and its own caption naming which link of the chain it is. Long ones
arrive folded behind a soft fade — a machine's note to itself is glanced at, not read. */
.msg-user.self{background:color-mix(in srgb, var(--tx-3) 9%, var(--bg-2));
border:1px dashed color-mix(in srgb, var(--tx-3) 36%, var(--line));
border-right:2px solid color-mix(in srgb, var(--tx-3) 58%, var(--line));
box-shadow:none;color:color-mix(in srgb, var(--tx) 82%, var(--bg-2))}
.msg-user.self::before{content:attr(data-who);color:var(--tx-3);opacity:.95;text-transform:none;
letter-spacing:.3px;font-size:9.5px}
.msg-user.self.fold{max-height:5.4em;overflow:hidden;cursor:pointer;
-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.msg-user.self.fold.open{max-height:none;-webkit-mask-image:none;mask-image:none}
/* ═══ TWO MARKS ABOVE A LINE: WHEN IT WAS SENT AND WHEN IT WAS TAKEN UP ═══
They stand ABOVE the bubble and along its right edge — that is, on the boundary where your
own line begins: while scrolling the feed, the time is read together with «who is speaking»,
without stopping. Monospaced and small: this is a support for the eye, not content. The
order is not accidental — first «I sent it», then «they took it up»: the wait lies between
them. */
.msg-when{display:flex;gap:9px;justify-content:flex-end;align-items:baseline;
font:10.5px var(--mono);color:var(--tx-3);margin:0 2px 4px 0;letter-spacing:-.1px}
.when-go{color:var(--tx-3);opacity:.85}
/* «How long ago that was» — the last thing on the line, and the faintest: it is the only mark here
that keeps moving, so it must not pull the eye every half-minute. Its own gap is tighter than the
9px between the two clocks, because it belongs to the clock in front of it rather than standing
beside it as a third mark. */
.when-ago{color:var(--tx-3);opacity:.6;margin-left:-4px}
/* ═══ AND WHEN THE MACHINE POSTED IT, NOT HIM ═══
«put bot (gray metal please) icon or loop icon there to see that this is auto-posted - not
mine!» (the owner, 04.09). A run of the task loop travels the USER's road, so it arrived
wearing all three of his marks at once — the 🧑, the «you» in the corner, his accent fill —
and the only thing that gave it away was reading the first line of the text. Two of the three
marks now tell the truth, and the fill is deliberately left alone: moving a familiar bubble to
a new colour makes the whole feed unfamiliar to fix one line of it.
THE BOT IS DRAWN, NOT TYPED. 🤖 is taken: it is the agent's card and another session's card,
both of which are VOICES that said something. This is not a voice, it is machinery, so it gets
grey metal instead of a colour emoji — a light-to-dark ramp down the face is what reads as
metal, and the mid-greys are chosen so it stands out on a dark theme and on a light one alike
(a theme token would follow the palette, which is the opposite of what «metal» means here).
The shape is a MASK, so the eyes and the mouth are holes and the bubble shows through them —
and no markup is written for it, which is why `npm run dom` counts no new point. */
.msg-user[data-tag]::before{content:attr(data-tag);color:var(--tx-3);opacity:.9}
/* ═══ WHY THIS MESSAGE SENT ITSELF ═══
A voice-triggered turn names the phrase that fired it, under its own text (20.09). It is a
FOOTNOTE, not a second message: smaller, dimmer, cut off from the task by a rule — the eye must
read it as «about the message» and never as part of what was asked. The phrase itself is the
only bright thing in the line, because it is the answer to the whole question.
`white-space:normal` undoes the bubble's `pre-wrap`: this line is prose we wrote, not dictation. */
.msg-hot{margin-top:9px;padding-top:7px;white-space:normal;
border-top:1px dashed color-mix(in srgb, var(--acc) 34%, transparent);
font:400 11px/1.45 var(--sans);color:var(--tx-3);text-align:left}
.msg-hot b{font-weight:700;color:var(--acc);white-space:pre-wrap}
.msg-hot-i{margin-right:5px}
/* ONE BOT, TWO PLACES. The agent's card asks for exactly the same mark (the owner, 11.09: «change
icon to that gray one»), and the shape is shared by SELECTOR rather than by a second copy of the
data URL: two drawings of one thing drift apart on the first correction. */
.when-sent[data-bot],.ac-ico[data-bot]{--bot-ico:url("data:image/svg+xml, was what bought the horizontal scroll on a phone, and it cost the thing it was
drawing: a block is not a table box, so the frame took the answer's whole width while the
rows inside shrank to their own content — a four-column table drew a box with 40% of it
empty, and that emptiness is what the owner's screenshot marked with three red arrows. The
scroll moved onto `.tbl-wrap` (built in `md()` right next to the ), and the table is
a table again: `width:100%`, so the free width goes to the widest text column instead of to
nothing, and the block lines up with the paragraphs and code above and below it. */
.md .tbl-wrap{display:block;overflow-x:auto;max-width:100%;margin:.75em 0;
border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.md table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.6px;
background:none;border:0}
.md th,.md td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
/* The first column is the row's NAME — that is the column the eye runs down looking for its
line, so it is inked like a heading rather than like the data beside it. */
.md tbody td:first-child{color:var(--strong)}
/* ON A PHONE A TABLE SCROLLS INSTEAD OF SQUEEZING. Pressed into 430px, the first column of a
four-column table became six lines of one word each — a shape that has stopped being a
table, and it was doing that long before the frame was fixed. A floor under the width hands
the row its line back and finally gives the wrapper something to scroll, which is what the
horizontal pan on it was built for.
⛔ THE FLOOR IS PUT UNDER THE CELL, NOT UNDER THE TABLE, and that is not a matter of taste:
`min-width:min(560px,max-content)` is INVALID — a CSS math function does not take an
intrinsic keyword — so the whole declaration is dropped in silence and the phone stays
squeezed while the rule reads as if it worked. A floor per cell also keeps itself honest
with no arithmetic: four columns pass 430px and the table scrolls, two columns do not reach
it and the table stays whole, no scroll and no silly gaps. */
@media(max-width:860px){ .md th,.md td{min-width:8.5em} }
.md thead th{position:sticky;top:0;z-index:1;background:var(--bg-3);color:var(--strong);
font-weight:600;white-space:nowrap;border-bottom:1px solid var(--line-2);
box-shadow:inset 0 -2px 0 var(--acc)}
.md tbody tr:nth-child(even){background:var(--bg-3)}
.md tbody tr:last-child td{border-bottom:0}
.md tbody tr:hover{background:var(--bg-4)}
/* A number in a cell is monospaced: a column of figures is obliged to line up by digits. */
.md td{font-variant-numeric:tabular-nums}
/* ── HTML straight in the feed: a card with a sandboxed frame ── */
.htmlcard{margin:.7em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
background:var(--bg-2);box-shadow:0 6px 22px var(--shadow)}
.hc-bar{display:flex;align-items:center;gap:6px;padding:5px 7px 5px 10px;
background:var(--bg-3);border-bottom:1px solid var(--line)}
.hc-tag{flex:1;font:10.5px/1 var(--mono);letter-spacing:.09em;color:var(--tx-3)}
.hc-btn{font-size:11px;padding:3px 9px;border-radius:8px;border:1px solid var(--line-2);
background:var(--bg-4);color:var(--tx-2);cursor:pointer}
.hc-btn:hover{color:var(--tx);border-color:var(--acc)}
.hc-frame{display:block;width:100%;height:180px;border:0;background:Canvas;color-scheme:light dark;transition:height .18s}
.hc-src{display:none;margin:0;border-top:1px solid var(--line);max-height:340px;overflow:auto}
.htmlcard.showsrc .hc-frame{display:none}
.htmlcard.showsrc .hc-src{display:block}
/* ── A path in an answer is a DOOR. A report opens as a frame over the feed, a picture with
the magnifier, a folder and a file with this machine's file explorer. All four look the
same: a chip with an icon that shows what it is; a report also has «↗» on the right —
open in a tab. ── */
/* INLINE-BLOCK, NOT INLINE-FLEX — the copy is why. A flex container BLOCKIFIES its children,
and the browser puts a line break around every block-level box when it serialises a selection:
the pill was copied as «your ⏎MEMORY.md⏎ is over its size limit», i.e. one sentence torn into
three lines. Inline-block draws the same pill (measured: same box, same ellipsis) and comes
out of the clipboard as one line. `gap` goes with flex, so the spacing is margins now. */
.htmlink,.pathlink{display:inline-block;max-width:100%;vertical-align:baseline;white-space:nowrap;
line-height:15px; /* the flex box was 15px of content tall; without this the pill takes the prose's */
padding:1px 3px 1px 7px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-3)}
.pathlink:not(.htmlink){padding-right:7px}
.pathlink[data-kind="dir"]{border-color:var(--line-2);border-style:dashed}
/* WHAT IS COPIED OUT OF A CHIP IS THE FILE NAME, AND ONLY THE FILE NAME.
The name used to be a ``, and every browser's own stylesheet marks a form control
`-webkit-user-select:none`: selecting a paragraph and copying it pasted «your is over its
size limit» — the file the sentence was about fell out of BOTH clipboard flavours, and out of
`getSelection()` with them (the owner, 05.09). It is a `` now, selectable
like the prose around it. The icon and the «↗» stay OUT of the copy on purpose: they are the
chip's furniture, and «📄report.html↗» pasted into a letter is not what was on the screen. */
.hl-ico{display:inline-block;vertical-align:middle;margin-right:5px;font-size:11px;line-height:1;
user-select:none;-webkit-user-select:none}
.hl-name{display:inline-block;vertical-align:middle;font-size:12.4px;color:var(--acc);
background:none;border:0;padding:0;cursor:pointer;user-select:text;-webkit-user-select:text;
max-width:min(46ch,calc(60vw / var(--ui-scale,1)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-name:hover{text-decoration:underline}
.hl-name:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:5px}
.hl-tab{display:inline-grid;vertical-align:middle;margin-left:5px;place-items:center;
width:20px;height:20px;border-radius:50%;
color:var(--tx-2);background:var(--bg-4);text-decoration:none;font-size:11px;
user-select:none;-webkit-user-select:none}
.hl-tab:hover{color:var(--tx);background:var(--acc);color:var(--on-acc)}
/* ── A CHIP THAT IS NOT A FILE ON THIS DISK ──────────────────────────────────────────────
Two of them, and both have to be legible as «this is git talking» BEFORE they are pressed,
because everything the ordinary chip promises — the explorer, the app, the download — is
exactly what these two cannot do. A DASHED border says it without a word and without a
colour: the panel already uses dashes for the chip whose target is not an ordinary file
(`[data-kind="dir"]`) and for the guessed option chips, so the reading is learned once.
⛔ NOT A COLOUR OF ITS OWN. Eleven palettes, and a hex here would be invisible in some of
them; the border is `--line-2` like every other chip, the ink stays `--acc`. */
.pathlink.gitlink,.pathlink.branchlink{border-style:dashed}
/* The branch name a file is read out of, riding ON the chip rather than in a tooltip: there is
no hover on a phone, and «which branch» is the fact that explains why the file is not where
the reader went to look. It is a second door (the branch card), so it answers the keyboard
and says so on hover. `user-select:none` for the same reason the icon has it — it is the
chip's furniture, and «unfinished.js unfinished-mark» is not what was on the screen. */
.gl-ref{display:inline-block;vertical-align:middle;margin-left:6px;padding:0 6px;
border-radius:999px;background:var(--bg-4);color:var(--tx-2);
font-size:10.5px;line-height:15px;max-width:18ch;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none}
.gl-ref:hover{background:var(--acc);color:var(--on-acc)}
.gl-ref:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* ── The preview window over the feed ── */
#htmlview{display:none;z-index:245}
#htmlview.open{display:grid}
/* ── THE WINDOW IS MEASURED FROM THE VEIL'S BOX, NOT FROM THE SCREEN ──
`96vw` is the width of the SCREEN, while the window lives INSIDE .modal-back with its
padding: on a 390px phone that is 374px of window against 370px of box, and it stuck out
to the right by exactly those 4px («it sticks out to the right a little» — the owner,
19.08). The height was worse: 96vh is counted from the LARGE viewport while the box is
counted from 100svh, and the top of the window with the cross went off the edge.
Percentages are taken from the parent, which is already divided by --ui-scale (see
.modal-back), so there is no division here at all any more: one measure instead of two that
disagree. A size picked by hand arrives inline from app.js and overrides these values. */
.hv-win{position:relative;width:min(1100px,100%);
height:min(900px,100%);min-width:0;min-height:min(200px,100%);
max-width:100%;max-height:100%;
display:flex;flex-direction:column;
background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
box-shadow:0 30px 80px var(--shadow)}
/* The size corner. It is taken with a finger too (touch-action:none), hence 20px and not 10. */
.hv-grip{position:absolute;right:0;bottom:0;width:20px;height:20px;cursor:nwse-resize;
touch-action:none;z-index:3;opacity:.5;
background:linear-gradient(135deg,transparent 0 46%,var(--tx-3) 46% 54%,transparent 54% 70%,
var(--tx-3) 70% 78%,transparent 78%)}
.hv-grip:hover{opacity:1}
.hv-win.sizing{user-select:none}
/* While the corner is dragged, the report frame must not catch the mouse: a foreign origin eats the gesture. */
.hv-win.sizing .hv-frame{pointer-events:none}
.hv-top{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;
background:var(--bg-3);border-bottom:1px solid var(--line)}
/* The file name large, the path under it small: from a phone there is nothing to read a path
with, and «is this the right report» has to be understood at a single glance. */
.hv-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.hv-name{font:600 13px var(--sans);color:var(--tx);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
/* WHEN THIS ONE WAS SAVED — the second half of «show its name and the date and time» (17.09). It
rides on the title line, not among the buttons: it is a fact about the file, and the button row
may not grow a member that appears only for some files. */
.hv-line1{display:flex;align-items:baseline;gap:8px;min-width:0}
.hv-when{font:10.5px var(--mono);color:var(--tx-2);font-style:normal;white-space:nowrap;flex:0 0 auto}
.hv-nav{display:inline-flex;gap:2px;margin-right:6px;flex:0 0 auto}
.hv-nav .hv-btn{min-width:30px;text-align:center}
.hv-path{font:10.5px var(--mono);color:var(--tx-3);font-style:normal;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.hv-btn{font-size:11.5px;padding:4px 10px;border-radius:8px;border:1px solid var(--line-2);
background:var(--bg-4);color:var(--tx-2);text-decoration:none}
.hv-btn:hover{color:var(--tx);border-color:var(--acc)}
/* GREY IS A SENTENCE, NOT A DECORATION: «this door exists, and this file is not the file for
it». It is a real `disabled`, so the press does nothing at all — a button that answers
nothing is read as a breakage and pressed again. */
/* An takes no `disabled`, so a dead LINK is one with no `href` — inert, unfocusable, and
invisible to the middle button and to Ctrl+click. `aria-disabled` is what makes it look the
part and what a screen reader reads; the two are set together by `hvDoor`. */
.hv-btn[disabled],.hv-btn[aria-disabled="true"]{opacity:.4;cursor:default}
.hv-btn[disabled]:hover,.hv-btn[aria-disabled="true"]:hover{color:var(--tx-2);border-color:var(--line-2)}
.hv-btn.hidden{display:none}
/* THE TWO PHONE CONTROLS DO NOT EXIST AT THE DESK (the owner, 24.09: «в стационарной десктопной
версии пусть пока все так останется»). They are drawn only inside the phone media query below,
and an #id there beats an #id here by source order — so this pair must stay ABOVE it. */
/* ⋯ IS THE ONE CONTROL THAT DOES NOT EXIST AT THE DESK (the owner, 24.09: «в стационарной
десктопной версии пусть пока все так останется») — everything it holds is a visible button here.
«📄 Copy file» used to hide with it, and since 25.09 it does not: it is a door of its own («их
две»), and its promise — the FILE, not the text — has no other button anywhere. */
#hv-more{display:none}
/* THE WORDLESS COPY. «Вот это просто Copy сделай просто обычной иконкой, как это все делают.
Стандартную иконку Copy, можно же без текста.» — the two-sheets glyph, drawn as an SVG so it
takes the button's own ink (`currentColor`) and greys with it, and squarer padding because there
is no label to balance. */
.hv-ico{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;vertical-align:middle}
.hv-ico svg{display:block}
#hv-grab{display:inline-flex;align-items:center;gap:4px}
#hv-grab .hv-grab-l{font-style:normal}
/* «✓ copied» — the clipboard is invisible, so the button answers with itself, exactly like the
copy button on a code block. */
.hv-grab.done{border-color:var(--ok,var(--acc));color:var(--tx)}
.hv-btn.done{border-color:var(--ok,var(--acc));color:var(--tx)}
/* THE ⋯ SHEET. It is not a second set of doors: every row clicks the button that is hidden above
it, and mirrors that button's own `disabled` and its own `title` — a greyed row says why, in
the same words the greyed button would have said. */
.hv-sheet{position:absolute;z-index:6;top:calc(100% + 4px);right:6px;min-width:216px;
max-width:min(320px,92vw);background:var(--bg-3);border:1px solid var(--line);border-radius:12px;
padding:6px;box-shadow:0 14px 38px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.hv-sheet.hidden{display:none}
.hv-mi{display:flex;align-items:center;gap:9px;width:100%;padding:10px;border:0;border-radius:8px;
background:transparent;color:var(--tx);font:13px var(--sans);text-align:left}
.hv-mi:hover{background:var(--bg-4)}
.hv-mi[disabled]{opacity:.38}
.hv-mi-i{flex:0 0 18px;text-align:center;font-size:14px}
.hv-mi-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A row that holds controls rather than being one: the pager, the reading scale. */
.hv-mi-row{display:flex;align-items:center;gap:6px;padding:6px 10px 2px}
.hv-mi-row .hv-mi-n{flex:1}
.hv-mi-row .hv-btn{display:inline-block;flex:0 0 auto;min-width:34px;text-align:center;padding:6px 8px}
.hv-sep{height:1px;background:var(--line);margin:4px 6px}
/* THE FILE NAME MATTERS MORE THAN THE LABELS ON THE BUTTONS. On the phone four labelled
buttons ate the whole line, and of «which file is this» only «gate-n…» was left. Narrow —
icons; wider — words. */
.hv-lbl{font-style:normal;margin-left:5px}
/* ON THE PHONE THE FILE NAME LIVES ON A LINE OF ITS OWN. There are nine buttons in the head
(plus three for the zoom), and in 390px they left the name not one pixel — and along with
it they pushed the ✕ off the edge too, that is, there was nothing to close the window with.
The heading takes the whole first line, the buttons wrap under it; the zoom buttons
themselves are squeezed — the percent figure is legible as it is. */
@media (max-width:760px){.hv-lbl{display:none}
.hv-btn{padding:4px 8px;font-size:13px}
.hv-top{flex-wrap:wrap;gap:4px;row-gap:6px;padding:6px 8px}
.hv-title{flex:1 0 100%}
/* The buttons are squeezed so that the ✕ stays on ONE line with them: a cross wrapped onto
a third line both looks lost and eats height away from the text itself.
⛔ MEASURED 11.09 AT 390px, AND IT HAD QUIETLY STOPPED BEING TRUE. Nine buttons and the zoom
trio filled the line to the pixel, so the ✕ dropped onto a third row and sat alone at its
LEFT edge — exactly what this rule exists to prevent, and it had been like that long enough
for nobody to notice, because the gate check that says so never ran (it stood below a crash).
Every number here is arithmetic against 390px: a new button in this header spends ~34px and
must be measured again — `npm run composer`, «and ✕ stayed in the button row». The `auto`
margin is the belt: whatever line the ✕ ends up on, it ends up at the right of it, where a
thumb looks for a close button, instead of at the left where it reads as a stray glyph. */
.hv-btn{padding:4px 4px}
.hv-zb{min-width:20px;padding:4px 3px;font-size:12px}
#hv-zp{min-width:34px;font-size:10px}
/* ⛔ THE ARITHMETIC ABOVE RAN OUT ON 12.09, AND THE ANSWER IS NOT A NARROWER BUTTON.
Nothing in this head hides any more (a door that moves is a door pressed by mistake), so
the row is ALWAYS the full twelve — two more than the line it had already filled to the
pixel. Squeezing further would make eleven identical grey stamps nobody can tell apart.
So the ✕ STOPS COMPETING FOR A LINE AT ALL: it is lifted out of the flex flow and pinned to
the top-right corner, with the padding that used to hold it left reserved for it. It cannot
wrap, cannot be pushed and cannot be reached by any future button added to this head; the
buttons wrap below the title over as many rows as they need.
⛔ TWO REORDERINGS WERE TRIED FIRST AND BOTH MADE IT WORSE, because `order` decides the
sequence of a line but not WHICH line, and whether this head wraps at all depends on
`--ui-scale`: the panel lives under CSS `zoom`, so 390 screen pixels can be a thousand
layout pixels and the whole row then fits on ONE line. With the title at `flex:1 0 100%`
the ✕ dropped to the second row at its LEFT edge (x=14 of 390); with `flex:1 1 0` the row
stopped wrapping and the ✕ landed in the MIDDLE, between the title and the buttons (x=118).
A corner does not have opinions about either. */
.hv-top{position:relative;padding-right:34px}
.hv-x{position:absolute;top:6px;right:8px}
/* ═══ ONE ROW ON THE PHONE (the owner, 24.09) ═══
«Вверху ничего из надписей не надо. Это бессмысленно с такой мелкотой, там все равно никто
ничего не прочитает. Оставь только какие кнопки.» — and of the buttons, one big copy, the
three dots, and the ✕. Everything else is a row in the sheet, which clicks these same
hidden buttons. The head stops wrapping, so the ✕ comes back INTO the row (it was pinned to
the corner precisely because the row used to wrap onto three lines) and closes it at the
right, where a thumb looks for it. */
.hv-top{flex-wrap:nowrap;padding:6px 8px;gap:6px}
.hv-x{position:static;flex:0 0 auto}
.hv-top .hv-title,.hv-top .hv-nav,.hv-top #hv-tab,.hv-top #hv-md,.hv-top #hv-read,
.hv-top #hv-diff,.hv-top #hv-app,.hv-top #hv-save,.hv-top #hv-copy,
.hv-top #hv-path-copy,.hv-top #hv-dir,.hv-top .hv-zoom{display:none}
#hv-grab{display:inline-flex;align-items:center;justify-content:center;gap:7px;
flex:1 1 auto;min-width:0;padding:10px;font-size:14px;font-weight:600;
color:var(--tx);border-color:var(--acc)}
#hv-grab .hv-grab-l{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hv-more{display:inline-block;flex:0 0 auto;padding:10px 13px;font-size:16px;line-height:1}}
/* The frame's box clips a magnified report; the frame inside is narrowed by the layout and
stretched back with a transform — that way the «zoom» comes out real (the report's lines
re-wrap), even though we cannot reach inside a foreign origin. */
.hv-fwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:Canvas;color-scheme:light dark}
.hv-fwrap.hidden{display:none}
.hv-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:Canvas;color-scheme:light dark;
transform-origin:0 0}
.hv-frame.hidden{display:none}
/* The reading zoom buttons: the same meaning as the picture's magnifier, the same order «− % +». */
.hv-zoom{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.hv-zb{min-width:26px;padding:4px 7px;text-align:center;font-variant-numeric:tabular-nums}
#hv-zp{min-width:44px}
/* A file's text: it is read with the eyes, hence monospaced, with long lines wrapped and
a scroll of its own — the preview window must not drag the feed along with it. */
.hv-text{flex:1;min-height:0;overflow:auto;padding:12px 14px;background:var(--bg-1);
font:12.5px/1.55 var(--mono);color:var(--tx);white-space:pre-wrap;word-break:break-word;tab-size:2;
/* The reading zoom grows the TYPE SIZE, not a picture of the text: the line wrapping stays,
and a magnified log does not run a kilometre off to the right. The multiplier is its own,
the feed's --read-scale will not do here — this is a different place with a different
accustomed value. */
font-size:calc(12.5px * var(--hv-zoom,1))}
/* These two say «the source view», and the source view is always a DIRECT child of the box:
a `>` here is what keeps them off the drawn markdown, whose type sizes are its own. */
.hv-text>pre,.hv-text>pre code{font-size:inherit}
.hv-text.hidden{display:none}
.hv-text .hv-none{display:flex;flex-direction:column;align-items:center;gap:10px;
padding:44px 16px;font:14px var(--sans);color:var(--tx-2);text-align:center;white-space:normal}
.hv-text .hv-none b{font-size:15px;color:var(--tx)}
/* The press that asks again after a dead end — see hvNone(). It is the only thing in this box
that can be aimed at, so it is drawn as a button and not as another grey line. */
.hv-text .hv-none .hv-again{margin-top:4px;padding:7px 16px;font:14px var(--sans);cursor:pointer;
color:var(--tx);background:var(--bg-2);border:1px solid var(--bd);border-radius:8px}
.hv-text .hv-none .hv-again:hover{border-color:var(--acc);color:var(--acc)}
/* A CSV is appended to the box as a table of its own; a table inside a drawn .md is the
feed's table and must keep the feed's look, hence `>` on every one of these. */
.hv-text>table{border-collapse:collapse;font:12px var(--mono);white-space:pre}
.hv-text>table th,.hv-text>table td{border:1px solid var(--line-2);padding:3px 8px;text-align:left}
.hv-text>table th{position:sticky;top:-12px;background:var(--bg-2);font-weight:600}
.hv-text>table tr:nth-child(even) td{background:var(--bg-2)}
/* ═══ THE SPEND LINE AT THE END OF AN ANSWER ═══
Two quantities are read in it: how many CALLS the turn cost and how much of the key it ate.
A background, not another shade of grey: a shade in monospaced small print is not found by
the eye, while a background is found at once. The colours are theme tokens, so the line
stays legible in any palette; the figures are monospaced and tabular so that neighbouring
turns compare in a column. */
/* The typesetting: --figures instead of monospace (the owner 26.08: «there is some sort of slash
inside the zero… everything is bold, nothing is legible»), contrast one step higher
(--tx-2), while the labels (till, R, W, O) and the separators are, on the contrary, muted —
in an instrument one hunts for FIGURES, the letters only say which is which. Weight 800 on
the plates ate the shape of a digit: 600 is enough, the background does the work. */
.md .statline{font:500 12.5px/1.85 var(--figures);color:var(--tx-2);letter-spacing:.012em;
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1,'zero' 0}
.md .statline .sv{font-weight:600;padding:1px 7px;border-radius:6px;white-space:nowrap}
.md .statline .sv-turns{color:var(--blue);background:color-mix(in srgb,var(--blue) 18%,transparent)}
.md .statline .sv-key{color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.md .statline .sv-cost{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.md .statline .lb{font-style:normal;font-weight:400;color:var(--tx-3)}
.md .statline .sp{font-style:normal;color:var(--tx-3);opacity:.45;padding:0 3px}
/* ═══ A LINK IN AN ANSWER IS THE SAME DOOR AS A PATH, AND IT LOOKS LIKE A DOOR ═══
It opens HERE (a window over the feed), which is why it has an underline and an arrow:
«this will take you off the page» is a promise the panel precisely does NOT make, and the
eye must see the difference between a link outward and a file chip. A long address has no
right to tear the layout apart: it wraps at any character. */
.md a.weblink{color:var(--acc-2);text-decoration:underline;text-decoration-color:var(--line-2);
text-underline-offset:2px;word-break:break-word}
.md a.weblink::after{content:'↗';font-size:.82em;margin-left:2px;color:var(--tx-3);vertical-align:super}
.md a.weblink:hover{text-decoration-color:var(--acc)}
/* ═══ A MARKDOWN FILE DRAWN AS A DOCUMENT ═══
The look is the feed's (.md — one set of rules for both places, or a table would come out
one way in an answer and another way in the file it quotes). Only two things are this
window's own: the box inherits `white-space:pre-wrap` from the source view and has to give
it back, or every blank line of the source would stay a blank line of the document; and the
sizes are `em`, so the reading zoom of THIS window (`--hv-zoom`) still moves all of them. */
.hv-text .hv-md{font:calc(13.5px * var(--hv-zoom,1))/1.62 var(--sans);color:var(--tx);
white-space:normal;word-break:normal;padding-bottom:12px}
.hv-text .hv-md h1{font-size:1.5em}
.hv-text .hv-md h2{font-size:1.28em}
.hv-text .hv-md h3{font-size:1.1em}
.hv-text .hv-md h4,.hv-text .hv-md h5,.hv-text .hv-md h6{font-size:1em}
.hv-text .hv-md code{font-size:.87em}
.hv-text .hv-md pre{white-space:pre}
.hv-text .hv-md pre code{font-size:.85em}
.hv-text .hv-md table{font-size:.92em}
/* The first heading of a file starts at the very top: a document does not begin with a gap. */
.hv-text .hv-md>:first-child{margin-top:0}
/* A foreign page shown as text: it is read with the eyes, so not monospaced. */
.hv-text .hv-plain{font:14px/1.62 var(--sans);white-space:pre-wrap;color:var(--tx)}
/* ═══ A FILE EDIT: THE COLOUR CARRIES THE MEANING, THE SIGN STAYS WHERE IT IS ═══
`+`/`−` are deliberately not removed: an edit is copied whole (into a letter, into another
chat), and without the signs it stops being a patch. The background is a tinted theme token,
not «green/red»: in a light palette a pure colour burns the eyes, while this one stays
legible in any. */
.hv-diffview{margin:0;font:12.5px/1.5 var(--mono);white-space:pre;overflow-x:auto}
.hv-diffview>div{padding:0 6px}
.hv-diffview .d-add{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--tx)}
.hv-diffview .d-del{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--tx-2)}
.hv-diffview .d-hunk{color:var(--think);font-weight:600;margin-top:6px}
.hv-diffview .d-file{color:var(--tx-3)}
#hv-diff.on{color:var(--tx);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.hv-cut{margin-top:10px;padding:6px 10px;border-radius:8px;background:var(--bg-2);
font:11.5px var(--sans);color:var(--tx-3);white-space:normal}
/* A READY COMMAND IS NOT SELECTED WITH THE MOUSE — IT IS TAKEN WITH ONE BUTTON.
The button lives in the corner of the block and appears on hover; on the phone there is no
hover, so there it is always visible (see the media query below) — otherwise there would be
nothing to copy with. */
.codeblk{position:relative}
/* The cost meter at the top of an answer — hidden by ⚙ → General → «hide the cost and cache meter».
A class on , so it applies to the whole history at once (web/app.js → METER_SHAPE). */
html.no-meter .codeblk.meter-blk{display:none}
.codeblk>.cp-btn{position:absolute;top:6px;right:6px;z-index:2;opacity:0;transition:opacity .12s;
padding:3px 8px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-2);
color:var(--tx-2);font:11px var(--sans);cursor:pointer}
.codeblk:hover>.cp-btn,.codeblk>.cp-btn:focus-visible{opacity:1}
.codeblk>.cp-btn:hover{color:var(--tx);border-color:var(--acc)}
.codeblk>.cp-btn.done{opacity:1;color:var(--ok,var(--acc));border-color:var(--ok,var(--acc))}
@media (hover:none){.codeblk>.cp-btn{opacity:.75}}
/* ▶ RUN — AND IT IS DRAWN LIKE A DOOR, NOT LIKE THE COPY BUTTON.
Copy costs nothing and hides until you hover; this one spends the machine, so it stands in the
open under the block, at full opacity, on a phone as well. It is the one place in this panel
that runs what a model wrote, and a button that has to be hunted for is a button whose meaning
gets guessed. */
/* THE BAR IS PART OF THE BLOCK, NOT A THING UNDER IT. `.md pre` carries its own border, radius
and bottom margin, so a strip simply appended would float half a line below a fully rounded
box and read as belonging to the next paragraph. The class is put on by `showRuns` rather than
taken from `[data-run]`: the mark is on every runnable block, the BAR only on the ones the
owner's window actually built one on. */
.codeblk.run-on{margin-bottom:.6em}
.codeblk.run-on>pre{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.codeblk>.run-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
padding:7px 10px;border:1px solid var(--line);border-top:0;background:var(--bg-2)}
.codeblk>.run-bar:last-child{border-radius:0 0 8px 8px}
.codeblk>.run-bar .run-btn{padding:4px 11px;border-radius:8px;border:1px solid var(--line-2);
background:var(--bg);color:var(--tx-2);font:11.5px var(--sans);cursor:pointer;
transition:color .12s,border-color .12s,background .12s}
.codeblk>.run-bar .run-btn:hover:not(:disabled){color:var(--tx);border-color:var(--acc);
background:color-mix(in srgb,var(--acc) 12%,transparent)}
.codeblk>.run-bar .run-btn:disabled{opacity:.45;cursor:default}
/* The three seconds before anything is spawned: the button says what it is about to do, and the
✕ beside it is the whole undo. It is tinted, not animated — a moving button invites a second
press, and a second press on this one is exactly what the pause exists to prevent. */
.codeblk>.run-bar .run-btn.arming{color:var(--tx);border-color:var(--acc);
background:color-mix(in srgb,var(--acc) 20%,transparent)}
.codeblk>.run-bar .run-cancel{padding:4px 10px;border-radius:8px;border:1px solid var(--line-2);
background:var(--bg);color:var(--tx-3);font:11.5px var(--sans);cursor:pointer}
.codeblk>.run-bar .run-cancel:hover{color:var(--tx);border-color:var(--tx-3)}
.codeblk>.run-bar .run-where{font:11px var(--sans);color:var(--tx-3);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* THE OUTPUT BOX — the terminal, such as it is, and it never grows past a screenful.
`max-height` plus its own scroll: a build that prints two thousand lines must not push the
rest of the answer off the screen, and the box follows its own tail while you are at the
bottom of it (see `write()` — it stops following the moment you scroll up to read). */
.codeblk>.run-out{border:1px solid var(--line);border-top:0;background:var(--bg-2);
border-radius:0 0 8px 8px}
.codeblk>.run-out .run-head{display:flex;align-items:center;gap:10px;padding:6px 10px;
font:11px var(--sans);color:var(--tx-3)}
.codeblk>.run-out .run-state{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codeblk>.run-out.live .run-state{color:var(--tx-2)}
.codeblk>.run-out.done .run-state{color:var(--ok,var(--acc))}
.codeblk>.run-out.bad .run-state{color:var(--err)}
.codeblk>.run-out .run-stop{padding:3px 9px;border-radius:7px;border:1px solid var(--line-2);
background:var(--bg);color:var(--tx-2);font:11px var(--sans);cursor:pointer}
.codeblk>.run-out .run-stop:hover{color:var(--tx);border-color:var(--err)}
.codeblk>.run-out .run-log{margin:0;padding:0 10px 9px;max-height:42vh;overflow:auto;
font:11.5px/1.5 var(--mono);color:var(--tx-2);white-space:pre-wrap;word-break:break-word}
.codeblk>.run-out .run-log:empty{padding-bottom:0}
/* result strip */
.result{display:flex;gap:14px;font:11px var(--mono);color:var(--tx-3);padding:7px 0 2px;border-top:1px dashed var(--line);margin-top:10px;flex-wrap:wrap}
/* ═══ permissions ═══ */
.perm-dock{padding:0 22px;max-width:var(--read-w);margin:0 auto;width:100%}
/* The «go back to the turn» strip is gone: with the session pool (server/pool.js) a turn
belongs to a rail row, runs by itself and is visible right there — there is nowhere and no
reason to go back. */
.perm{background:var(--bg-3);border:1px solid var(--warn);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.perm-t{font-weight:600;font-size:13px;margin-bottom:3px}
.perm-d{font-size:12px;color:var(--tx-2);margin-bottom:8px}
.perm pre{font:11.5px var(--mono);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;max-height:180px;overflow:auto;margin-bottom:9px;color:var(--tx-2)}
.perm-btns{display:flex;gap:8px}
.perm-btns button{padding:6px 13px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-4);color:var(--tx);cursor:pointer;font:500 12.5px var(--sans)}
.perm-btns .yes{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
.perm-btns .always{background:var(--bg-4);border-color:var(--ok);color:var(--ok)}
.perm-btns .no{border-color:var(--err);color:var(--err)}
/* ═══ WAITING FOR THE KEY ═══
The card lives next to the permissions and for the same reason: this is the only thing a
person is obliged to see immediately and without hunting. The tone is amber, not red —
nothing broke; the work is intact and will leave by itself (the owner, 01.09). */
.wait-dock{padding:0 22px;max-width:var(--read-w);margin:0 auto;width:100%}
/* NAME IT `.wait-card`, NEVER A BARE `.wait`. The rail has a waiting beacon of its own -
`.dot.wait` (web/tree.js -> svgWait) - and a single-word class matched that 8x8 dot as
well: this card's border (1px, 3px on the left) plus `padding:11px 14px 12px` blew the dot
up to exactly 32x25, so the hourglass hung outside its row. That is what «какая-то круглая
штука, больше строки» (owner, 03.09) actually was, and two rounds of flexbox fixes went
past it because the numbers looked like a min-width story. The card shares nothing with
the beacon but the word; every other part of it already carries the `wait-` prefix. */
.wait-card{background:var(--bg-3);border:1px solid var(--warn);border-left-width:3px;
border-radius:var(--r);padding:11px 14px 12px;margin-bottom:10px}
.wait-card.down{border-color:var(--err);border-left-color:var(--err)}
.wait-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wait-i{font-size:14px;line-height:1;animation:wait-breathe 2.6s ease-in-out infinite}
.wait-t{font:600 13px var(--sans);color:var(--tx)}
.wait-w{font-size:12px;color:var(--tx-2);margin-bottom:6px}
/* The main sentence is the most legible one in the card: it is what answers «what am I waiting for». */
.wait-p{font-size:12.5px;line-height:1.45;color:var(--tx);margin-bottom:10px}
.wait-btns{display:flex;gap:8px;flex-wrap:wrap}
.wait-btns button{padding:6px 13px;border-radius:7px;border:1px solid var(--line-2);
background:var(--bg-4);color:var(--tx);cursor:pointer;font:500 12.5px var(--sans)}
.wait-btns button:disabled{opacity:.5;cursor:default}
.wait-btns .go{border-color:var(--acc);color:var(--acc)}
.wait-btns .no{border-color:var(--line-2);color:var(--tx-3)}
.wait-f{font:11px var(--mono);color:var(--tx-3);margin-top:9px;word-break:break-word}
@media (prefers-reduced-motion: reduce){.wait-i{animation:none}}
/* ═══ composer ═══ */
.composer{border-top:1px solid var(--line);background:var(--bg-2);padding:11px 22px 12px}
.composer-row{position:relative;max-width:var(--read-w);margin:0 auto;display:flex;gap:9px;align-items:flex-end}
/* The height travels smoothly: dictation adds lines in batches, and an instant jump of the
field reads as a jerk of the whole page (autoGrow moves the feed by the same delta). */
/* LINE HEIGHT 1.3, NOT 1.5 (the owner, 01.09): «the distance between the lines a bit tighter,
so that more text fits in». The field has a CEILING (220px) — which means the line spacing
here is not taste but the number of visible lines: on the phone 16px/1.5 gave 9 lines before
the internal scroll, 16px/1.3 gives 10. The multiplier is unitless — both type-size
overrides below inherit it (14px at the desk, 16px on the phone: otherwise iOS zooms the
page). */
.input{flex:1;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;color:var(--tx);font:14px/1.3 var(--sans);resize:none;max-height:220px;outline:none}
/* The field's height is driven by autoGrow() frame by frame together with the feed's scroll —
a CSS transition here was a second animation on the same quantity, and the feed travelled
ahead of the field (a jerk). */
.input:focus{border-color:var(--acc)}
.input::placeholder{color:var(--tx-3)}
/* ── RECORDING IS VISIBLE INSIDE THE FIELD ──
The status line lives at the far right of the strip below; the eye is on the field. So the
same sentence is mirrored IN the input — placeholder-sized while it is empty, a chip in the
top right corner once there is text under it — and the field itself breathes red while the
mic is open. Absolute + pointer-events:none: the composer's height may not move by a pixel. */
.input-badge{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .15s;
font:11.5px/15px var(--mono);color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:min(70%,420px);padding:2px 7px;border-radius:8px;
background:color-mix(in srgb, var(--bg-3) 86%, transparent);
border:1px solid color-mix(in srgb, var(--warn) 40%, transparent)}
.input-badge.on{opacity:1}
.input-badge.big{font-size:13px;line-height:17px;padding:3px 9px;max-width:min(88%,560px)}
/* The real width ceiling is set by paintInputBadge inline — by the width of the FIELD itself;
what stays here is only the type size. On the phone it is a point and a half smaller: 38
characters of thirteen-point monospace fit into 312 pixels of field, and the recording
phrase is longer. */
@media (max-width:560px){
.input-badge{font:11px/14px var(--mono)}
.input-badge.big{font-size:12px;line-height:16px}
}
.input.badged::placeholder{color:transparent}
/* THE TEXT STARTS ONE LINE BELOW THE BADGE, NOT UNDERNEATH IT. The field gives the badge the
first line with a padding of its own: the badge is absolute and does not move the composer's
height, but it IS obliged to move the caret — otherwise what is dictated lands exactly on
top of «● recording 00:07». */
.input.badged{padding-top:34px}
/* THE BADGE'S SECOND LINE IS THE DICTATION'S ADDRESS («task · project»), and it takes one more
line away from the field. A line of its own, not the tail of the first: the gate measures the
width of the first one (it has no right to be truncated), and a task name together with a
project name does not fit into it on the phone. Inside the badge the line is cut with an
ellipsis — the badge's overall `scrollWidth` does not grow from it. */
.ib-row{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
color:var(--tx-2);opacity:.9;font-size:.88em;letter-spacing:0}
.input.badged2{padding-top:52px}
/* THE RECORDING FIGURES ARE THE ONLY THING READ FROM A DISTANCE (the owner, 02.09). «Make the
recording time — those very digits — a bit bigger and bolder, maybe red, so that from a
distance you can see how many seconds the recording has been running and that everything is
working.» The type size is up by a quarter, but line-height:1 leaves the height of the
badge's LINE as it was (the line box at 14/16px is taller than the digits themselves) —
otherwise the badge would have grown and climbed onto the text under it, while the field
hands it exactly 34/52 pixels of padding. The red is the same one the field's border
breathes with: one state — one colour. */
.ib-clock{font-size:1.25em;line-height:1;font-weight:700;color:var(--err);
font-variant-numeric:tabular-nums;letter-spacing:.3px}
.ib-dot{color:var(--err);animation:ib-blink 1.5s ease-in-out infinite}
@keyframes ib-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.ib-dot{animation:none}}
/* THE SECOND SET OF DIGITS: HOW LOUD IT IS RIGHT NOW (the owner, 21.09). The clock proves the
recording is running; it proved exactly that for twelve minutes over a microphone that captured
nothing. The level proves the other half — that sound is arriving — so it is drawn in the same
weight as the clock and in the accent colour, quietly, because in ordinary use it is simply a
number that dances while he talks. */
.ib-lvl{font-size:1.15em;line-height:1;font-weight:700;color:var(--acc);
font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* ═══ …AND THE DIGITS GAVE THE PLACE UP TO A STRIP THAT DANCES (the owner, 21.09) ═══
«You made that speaker, and now it jumps all the time… instead of those signs it would be far
better to show, under the recording, that strip — the way they visualise music, with the coloured
bars dancing. That is far prettier, clearer and more logical than these digits and the speaker.»
The complaint and the cure are one thing: a number stepping between one and three characters
moves the whole line it stands in, four times a second, in the badge over the field he is reading.
The strip is a box of a FIXED width, so the line cannot move again whatever the level does; the
digits are still in the DOM for every painter and gate that compares the line (`.ib-num`, drawn at
font-size 0 — kept as text, not as pixels), and the number itself is in the `title`. */
.ib-lvl .ib-num{font-size:0;letter-spacing:0}
.ib-bars{display:inline-flex;align-items:flex-end;gap:2px;height:1.05em;width:43px;
vertical-align:-.12em;margin-left:1px}
/* The heights are written by `barsTick` from the spectrum of the live microphone — no CSS animation
here on purpose: the movement IS the data, and a transition on top of a 60 fps write only smears
it. The colours run green → amber → red across the strip, the way an equaliser is read. */
.ib-b{width:3px;min-height:1px;border-radius:1.5px;height:8%;background:var(--acc)}
.ib-b:nth-child(1),.ib-b:nth-child(2){background:#3fb883}
.ib-b:nth-child(3),.ib-b:nth-child(4){background:#7cc45a}
.ib-b:nth-child(5),.ib-b:nth-child(6){background:#e0be4e}
.ib-b:nth-child(7),.ib-b:nth-child(8){background:#e59a4e}
.ib-b:nth-child(9){background:#e5714e}
/* Under the alarm the whole strip is one colour — the error one — and it blinks with the word
«SILENT» beside it (the `.deaf` rule below owns the blink). A flat red strip is the picture of
exactly what happened: the recording is running and nothing is arriving. */
.ib-lvl.deaf .ib-b{background:var(--err)}
/* …AND WHEN NOTHING IS ARRIVING, THE DIGITS BLINK — his own instruction, word for word: «let the
digits blink, for instance». Not a fade like the dot above (that reads as «working»): a hard
on/off twice a second, which the eye cannot hold still on and cannot mistake for the pulse of a
healthy recording. Both the clock and the level carry it, in the field and in the status line. */
.ib-clock.deaf,.ib-lvl.deaf{color:var(--err);animation:ib-alarm .5s steps(1,end) infinite}
@keyframes ib-alarm{0%,49%{opacity:1}50%,100%{opacity:.1}}
/* Nobody is left without the signal when animation is switched off at the OS level — the same
digits are underlined in the error colour instead of blinking. */
@media (prefers-reduced-motion: reduce){
.ib-clock.deaf,.ib-lvl.deaf{animation:none;text-decoration:underline wavy var(--err)}
}
.input.rec,.input.rec:focus{border-color:color-mix(in srgb, var(--err) 60%, var(--line));
animation:input-rec 1.7s ease-in-out infinite}
@keyframes input-rec{0%,100%{box-shadow:0 0 0 0 transparent}
50%{box-shadow:0 0 0 2px color-mix(in srgb, var(--err) 20%, transparent)}}
@media (prefers-reduced-motion: reduce){.input.rec{animation:none}}
.mic-btn,.send-btn,.stop-btn{width:40px;height:40px;flex:none;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-3);color:var(--tx-2);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:.15s}
.mic-btn:hover,.send-btn:hover{border-color:var(--acc);color:var(--acc)}
.send-btn{background:var(--blue);border-color:var(--blue);color:var(--on-blue);padding:0;box-shadow:0 2px 7px var(--shadow)}
.send-ico{width:18px;height:18px;display:block;fill:currentColor}
.send-btn:hover{background:var(--blue-2);border-color:var(--blue-2);color:var(--on-blue);
transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow)}
.send-btn:active{transform:translateY(1px);box-shadow:0 1px 3px var(--shadow)}
/* While the transcription is running, the send button stays a SEND BUTTON: a spinner running
over the paper plane read as «busy, do not touch», whereas pressing it is exactly what one
can and should do. Waiting is shown only AFTER the press — when the promise has been made. */
.send-btn.waiting{cursor:pointer}
/* ARMED: we are waiting for the tail of the dictation. The button does not blink as a whole
(blinking reads as «it broke») — the paper plane becomes a little smaller and waves spread
out from the button. The movement is visible with peripheral vision, and the size of the
button under the finger does not change. */
.send-btn.armed{border-style:dashed}
.send-btn.armed .send-ico{transform:scale(.8)}
.send-ico{transition:transform .18s ease}
.send-btn.armed::before,.send-btn.armed::after{content:'';position:absolute;inset:0;
border-radius:inherit;border:2px solid var(--blue);pointer-events:none;
animation:send-wave 1.5s cubic-bezier(.22,.6,.3,1) infinite}
.send-btn.armed::after{animation-delay:.75s}
@keyframes send-wave{0%{transform:scale(.94);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion: reduce){.send-btn.armed::before,.send-btn.armed::after{animation:none;opacity:.5}}
/* «Stop» is not a tiny black square but a full-blooded red button: a rounded white square in
the centre and a soft halo that spreads while the turn is running. */
.stop-btn{background:var(--err);border-color:var(--err);color:var(--on-err);
box-shadow:0 2px 8px color-mix(in srgb, var(--err) 45%, transparent)}
.stop-ico{width:13px;height:13px;border-radius:4px;background:currentColor;display:block}
.stop-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in srgb, var(--err) 55%, transparent)}
.stop-btn:active{transform:translateY(1px)}
.stop-btn::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
border:2px solid var(--err);animation:stop-halo 1.9s ease-out infinite}
@keyframes stop-halo{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion: reduce){.stop-btn::before{animation:none;opacity:0}}
.mic-ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
/* Recording is on — that must be visible from the other end of the room: instead of the
microphone a large red circle pulses, rather than a 6×6 dot blinking in the corner. */
.mic-btn.rec{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.mic-btn.rec .mic-ico{display:none}
.mic-btn.rec .rec-dot{width:17px;height:17px;border-radius:50%;background:var(--err);
animation:rec-pulse .85s ease-in-out infinite}
@keyframes rec-pulse{0%,100%{transform:scale(.7);opacity:.65}50%{transform:scale(1.1);opacity:1}}
/* The button is the one part of the recording that stays visible when the field has been scrolled
away or the phone is at arm's length — so the alarm reaches it too: the soft pulse of a healthy
recording becomes the same hard blink the digits carry, and the circle turns amber-on-red. */
.mic-btn.rec.deaf .rec-dot{animation:ib-alarm .5s steps(1,end) infinite}
@media (prefers-reduced-motion: reduce){.mic-btn.rec.deaf .rec-dot{animation:none;opacity:.5}}
.mic-btn.busy{opacity:.55;cursor:wait}
@keyframes blink{50%{opacity:.15}}
.composer-bar{max-width:var(--read-w);margin:7px auto 0;display:flex;gap:8px;align-items:center;font-size:12px}
/* The mirrors of the toggles under the field are for a wide screen only; on the phone .only-wide hides them. */
/* THIS STRIP HAS NO RIGHT TO BECOME TWO LINES.
It stands UNDER the input field, that is, it carries the height of the whole bottom: one flag
wrapping onto a second line and the composer grew, and the buttons slid up UNDER the finger.
The price of the mistake here is not cosmetic: «I missed the button, I pressed send instead
of finish the transcription». So there are no wraps at all; what does not fit goes into a
horizontal scroll (we hide the scrollbar: it would add those same pixels of height). */
.composer-flags{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;min-width:0;
overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.composer-flags::-webkit-scrollbar{display:none}
.composer-flags .flag{flex:0 0 auto;white-space:nowrap}
.composer-flags .flag span{display:inline-flex;align-items:center;gap:5px}
/* Half a pixel down: `align-items:center` centres the 13px BOX on the line box, and the line box
is taller than the ink — so a box-centred icon reads high beside 11.5px lowercase text. Measured:
box centre 36.9px, middle of the letters 36.5px, and the eye still looked lifted. */
.ic-lash{width:13px;height:13px;flex:0 0 auto;transform:translateY(.5px)}
/* Two eyes, one slot: an OPEN eye while thoughts and actions are shown, the closed lash once
they are hidden. Same viewBox, same stroke width, same 13px box — only the shape changes,
so the row does not move by a pixel when the box is ticked. */
.flag .ic-eye-shut{display:none}
.flag:has(input:checked) .ic-eye-open{display:none}
.flag:has(input:checked) .ic-eye-shut{display:inline-block}
.flag-select{flex:0 1 auto;min-width:0;text-overflow:ellipsis}
.composer-flags .flag{display:flex;align-items:center;gap:5px;color:var(--tx-3);font-size:11.5px;
cursor:pointer;padding:3px 7px;border-radius:7px;border:1px solid transparent;user-select:none;transition:.15s}
.composer-flags .flag:hover{color:var(--tx-2);background:var(--bg-3);border-color:var(--line)}
.composer-flags .flag:has(input:checked){color:var(--acc);background:var(--bg-3);border-color:var(--line-2)}
.composer-flags input{width:13px;height:13px;margin:0;accent-color:var(--acc);cursor:pointer}
/* ═══ 🔁 IN THE HEADER: THE SIGN THAT MONEY IS BEING SPENT WITH NOBODY WATCHING ═══
The composer's «🔁 Loop / ⏹ Stop loop» key is gone (the owner, 03.09 — it moved into the
«Send» long-press menu). What is left on screen is this: one small red badge beside the
figures, drawn ONLY while the open row is looping, and the popup behind it is where the
loop is stopped. Red, because it says the same thing the rail's badge says — this row is
still sending itself work — and that is the one state in the panel worth a colour of its
own. It does not blink: a light no press can switch off is what makes a working panel feel
broken (canon 30.08), and this one is switched off by pressing it.
The runs counter is a SECOND storey inside the same button, not a widening of it: the
header's width is measured by the gate, and a growing number here would push the figures
the header exists for over the edge. */
/* ⚠ TWO CLASSES IN EVERY SELECTOR, AND THAT IS THE WHOLE POINT OF THEM.
`.icon-btn{color:var(--tx-2)}` stands ~140 lines BELOW this block at the same weight, so a
lone `.loop-top{color:var(--acc)}` lost silently and the sign came out grey — measured by the
gate as rgb(174,181,193) where the accent was asked for. Fourth instance of one mine in this
file (☰ on the desk, the cog on the phone, the flame inside the ice cube): a property set on
a component may not be written at one class's weight while another one-class rule for that
same component lives lower down. */
.icon-btn.loop-top{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
color:var(--acc);background:color-mix(in srgb, var(--acc) 15%, transparent);
border:1px solid color-mix(in srgb, var(--acc) 40%, transparent);
border-radius:9px;padding:3px 7px;cursor:pointer;line-height:1;transition:.15s}
.icon-btn.loop-top.hidden{display:none}
.icon-btn.loop-top:hover{background:color-mix(in srgb, var(--acc) 27%, transparent);border-color:var(--acc)}
.icon-btn.loop-top .ico-loop{width:17px;height:17px;display:block;flex:0 0 auto}
.icon-btn.loop-top .lt-n{font:600 11px/1 var(--mono);letter-spacing:0}
.icon-btn.loop-top .lt-n:empty{display:none}
@media(max-width:860px){.icon-btn.loop-top{padding:2px 5px;gap:3px}
.icon-btn.loop-top .ico-loop{width:15px;height:15px}}
/* ═══ ONE LOOP GLYPH FOR THE WHOLE PANEL — the header badge, the rail pill, the «Send» menu ═══
«make loop icon better - thinner line so arrow will be distinguishable / and set this icon in
left panel as well and to send button menu» (the owner, 03.09).
Two things were wrong and they are one thing. ONE STATE WAS DRAWN THREE WAYS: an inline SVG in
the header and the 🔁 EMOJI in the rail and in the menu — and an emoji is the OS's own glyph,
so it takes neither the theme's colour nor the row's size and is a different picture on the
phone than on the desk (the canon that made the microphone and the machine meters our own SVG).
AND THE LINE WAS 2.9 OF 24: at the 12-17px this sign is ever drawn at, a stroke that fat
swallowed its own arrowhead and the whole thing read as a bare ∞ — «this row is repeating
itself» became «infinity», which is a different sentence.
So: **0.9 of 24 — half of the 1.8 this was first built at** («even twice thinner… line - too
wide», the owner, 03.09) — and the head is a triangle of its OWN, four times the stroke wide
(«arrows - slightly bigger»). That ratio is the whole trick: the arrow is told from the line by
the DIFFERENCE between them, so thinning the line and fattening the head are one move, not two.
A head drawn by the stroke itself would only be a thickening at this size.
⚠ THE PRICE OF A HALF-WIDTH LINE IS PAID IN THE SMALLEST HOME. At 12px a 0.9 stroke is under
half a device pixel and the loop goes pale, so the rail's badge draws it at 13 and the menu at
16 — a bigger CANVAS, never a second shape: two strokes for one sign is two signs to keep in
step. Measured at 12/15/17/24/72 before it was written: data/shots/loop-icon-sizes.png.
It is a MASK, the idiom `--spin-arrows` above already uses: the colour is then an ordinary
`background: currentColor`, so all ten themes paint it themselves, the size is set by whoever
draws it, and not one byte leaves the machine. */
:root{--loop-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round' d='M12 12C10.1 9.3 8.4 8.2 6.4 8.2a3.8 3.8 0 1 0 0 7.6c2 0 3.7-1.1 5.6-3.8 1.9-2.7 3.6-3.8 5.6-3.8a3.8 3.8 0 1 1 0 7.6c-.24 0-.47-.02-.7-.07'/%3E%3Cpath fill='%23000' d='M13.58 13.11 18.65 13.84 15.18 18Z'/%3E%3C/svg%3E")}
.ico-loop{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;
-webkit-mask:var(--loop-arrow) center/100% 100% no-repeat;
mask:var(--loop-arrow) center/100% 100% no-repeat}
/* The rail badge and the «Send» menu draw it from a `::before`, not from a node: both are built
out of a plain text label (`el()` in web/tree.js and the menu's own builder take a string), and
markup in this panel is written as NODES and never as innerHTML — a `::before` is how a
string-only builder gets a glyph without a new markup-writing point (`npm run dom`). */
.pill.loop::before,.ctx-menu button.i-loop::before{content:'';display:inline-block;flex:none;
background:currentColor;
-webkit-mask:var(--loop-arrow) center/100% 100% no-repeat;
mask:var(--loop-arrow) center/100% 100% no-repeat}
.pill.loop{display:inline-flex;align-items:center;gap:3px}
.pill.loop::before{width:13px;height:13px}
/* ⚠ THREE CLASSES IN THE `justify-content` SELECTOR ON PURPOSE. `.ctx-menu button.has-sub` sets
`space-between` at the same (0,2,1) weight and stands ~770 lines BELOW this block, so a
two-class rule here would lose silently and the icon, the text and the ▸ would be spread across
the item — the same mine that already cost ☰ on the desk and the cog on the phone. */
.ctx-menu button.i-loop{display:flex;align-items:center;gap:7px}
.ctx-menu button.has-sub.i-loop{justify-content:flex-start}
.ctx-menu button.has-sub.i-loop::after{margin-left:auto}
/* Green, like the rail's badge — one state, one colour across the panel, and it stays that colour
when the item is hovered: the sign answers «is this row repeating itself», not «am I pointing
at this line». */
.ctx-menu button.i-loop::before{width:16px;height:16px;color:var(--ok)}
/* On the phone the sign is bigger and a touch heavier — at 16 px it read as a speck (the owner,
31.10). A mask cannot be made bolder, so a hairline drop-shadow of its own colour thickens it. */
@media (max-width:860px){
html:not(.pane) .ctx-menu button.i-loop{gap:9px}
html:not(.pane) .ctx-menu button.i-loop::before{width:22px;height:22px;
filter:drop-shadow(0 0 .6px currentColor) drop-shadow(0 0 .6px currentColor)}
}
/* «Stop the loop» — a red square of the panel's own, the stop sign every player uses. */
.ctx-menu button.i-stopsq{display:flex;align-items:center;gap:7px}
.ctx-menu button.i-stopsq::before{content:'';display:inline-block;flex:none;width:11px;height:11px;
margin:0 2px 0 3px;border-radius:2px;background:var(--err,#e5484d)}
/* The model is the only drop-down among the tick boxes, so it looks like them and not like a
form: the same height, the same border, the same muted colour. */
.flag-select{background:var(--bg-3);border:1px solid var(--line);color:var(--tx-2);
border-radius:7px;padding:2px 6px;font:11.5px var(--sans);cursor:pointer;outline:none;max-width:190px}
.flag-select:hover,.flag-select:focus{border-color:var(--acc);color:var(--acc)}
/* ═══ THE LIVE LINE «WORK IS GOING ON RIGHT NOW» ═══
The last line of the feed, sticky to its bottom: you went up to read — it stayed in view.
It answers the question the little light in the rail does not answer: «is it thinking or has
it hung?» */
.live-line{position:sticky;bottom:2px;z-index:4;display:flex;align-items:center;gap:9px;
margin:6px 0 2px;padding:7px 12px;border-radius:11px;font:12.5px var(--sans);color:var(--tx-2);
background:var(--bg-3);border:1px solid var(--line-2);box-shadow:0 6px 18px var(--shadow);
width:fit-content;max-width:100%}
/* THE APPEARANCE IS SMOOTH, THE GEOMETRY IS MOTIONLESS.
The line is born and dies several times per turn, and every one of those times the feed
twitched: the height of the content changed in a jump. Only the opacity and the shift are
animated (the height may not be animated — for all 200 ms the feed would be growing under
the text), and `contain:layout` stops a change of the verb and the file name from
recomputing the layout of the whole feed. */
.live-line{animation:live-in .22s ease-out;contain:layout}
@keyframes live-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.live-line{animation:none}}
.live-what{font-weight:600;color:var(--acc);white-space:nowrap}
.live-detail{color:var(--tx-3);font:11.5px var(--mono);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;min-width:0}
.live-clock{color:var(--tx-3);font:11px var(--mono);flex:none;margin-left:auto;padding-left:6px}
/* Three dots running as a wave — the same sign of life the CLI has: the movement is visible
with peripheral vision, while a frozen spinner would honestly mean «it has hung». */
.live-dots{display:flex;gap:3px;flex:none}
.live-dots b{width:5px;height:5px;border-radius:50%;background:var(--acc);display:block;
animation:live-wave 1.05s ease-in-out infinite}
.live-dots b:nth-child(2){animation-delay:.14s}
.live-dots b:nth-child(3){animation-delay:.28s}
@keyframes live-wave{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.live-dots b{animation:none;opacity:.8}}
/* «Only the question and the answers» hides the thoughts and the actions — but not the sign of
life: without it the window in that mode looks dead exactly when work is going on. */
.qa-only .live-line{display:flex}
.chip-select{width:auto;padding:4px 8px;font-size:11.5px;border-radius:7px}
/* ═══ CHOOSING THE MODEL AND THE EFFORT ═══
A button instead of a ``: the native menu cannot do submenus, while «which model»
and «at what effort» are one question with two levels. It looks like a list (the same
background, the same border) so that the hand hunts for it where it used to hunt. */
.flag-pick{background:var(--bg-3);color:var(--tx);border:1px solid var(--line);border-radius:7px;
padding:4px 8px;font:11.5px var(--sans);cursor:pointer;outline:none;max-width:280px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag-pick:hover{border-color:var(--acc)}
.chip-toggle{display:flex;align-items:center;gap:5px;color:var(--tx-3);cursor:pointer;font-size:11.5px;user-select:none}
.chip-toggle input{accent-color:var(--acc)}
.voice-status{font:11.5px var(--mono);color:var(--warn)}
/* ═══ THE TIME BAR: MINUTES OF THIS SESSION, COLOURED BY HOW FULL ITS WINDOW IS ═══
Everything here is measured against ONE ceiling: nothing may stand taller than the letters of
the checkbox beside it («no taller than the height of the letters of the checkbox next to it»,
the owner). The track is 4px, the dashed mark and the head both 11px — the cap height of the
11.5px label next to them. The row's own height therefore does not change by a pixel, which is
the whole point: .composer-bar carries the height of the composer, and a taller bottom slides
the send button under the thumb. */
.ctx-gauge{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
background:none;border:0;padding:0;margin:0;font:inherit;color:var(--tx-3);cursor:pointer;
-webkit-tap-highlight-color:transparent}
.ctx-gauge.hidden{display:none}
/* A session the next turn will not continue: the picture stays, and it stops shouting. Nothing
moves on it any more, so it reads as the record of a life rather than as a live measurement. */
.ctx-gauge.over{opacity:.55}
.ctx-gauge:hover .cg-track{background-color:var(--line)}
.cg-zero,.cg-scale{flex:0 0 auto;font:9px var(--sans);color:var(--tx-3);line-height:1}
/* The ticks are drawn INTO the track's background at every fifth of it, so they hold their meaning
at any scale: five equal steps, whatever number stands at the right-hand end. */
.cg-track{position:relative;flex:1 1 auto;min-width:36px;height:4px;border-radius:2px;
background-color:var(--bg-4);transition:background-color .15s;
background-image:repeating-linear-gradient(90deg,
transparent 0 calc(20% - 1px), var(--bg) calc(20% - 1px) 20%)}
.cg-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
background:linear-gradient(90deg,var(--cg-cool,var(--ok)),var(--cg-hot,var(--ok)))}
/* «About here the window will be full» — a guess, so it is dashed and it moves. */
.cg-mark{position:absolute;top:-3.5px;bottom:-3.5px;width:0;border-left:1.5px dashed var(--err);
margin-left:-.75px;opacity:.9}
.cg-mark.soft{opacity:.45}
.cg-head{position:absolute;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
background:var(--strong);box-shadow:0 0 0 1px var(--bg-2)}
/* THE MINUTES RIDE ABOVE THE BAR — always, not only at the end.
They used to stand BESIDE the head, and flipped to its left side past three quarters of the
width. At the left of a long session's head there is only the fill, so the number ended up
printed on the red it was measuring and could not be read (owner, 03.09, 372m on a 360m
scale). Above the track there is no case where it lands on anything, so there is no case to
get wrong. It is absolutely positioned, so it costs the row NOT ONE PIXEL of height: the
9px of ink live in the 7px gap .composer-bar already keeps above itself. */
.cg-now{position:absolute;bottom:calc(100% + 3px);transform:translateX(-50%);
font:9px var(--sans);font-style:normal;
color:var(--tx-2);white-space:nowrap;pointer-events:none;line-height:1}
.cg-val{flex:0 0 auto;min-width:32px;text-align:right;font:600 11px var(--sans);line-height:1;
font-variant-numeric:tabular-nums;color:var(--cg-hot,var(--tx-2))}
/* ═══ THE TICKS: WHO SPOKE, AND WHEN ═══
A message is 2px wide and 8px tall; a session start is the same 11px as the dashed guess beside
it, which is the cap height of the label in this row and therefore the ceiling nothing here may
pass. The colours are the ones the bubbles already use — clay for his own line, the thinking
violet for anyone else's, grey metal for a line the panel put there itself — so the strip and
the feed under it are read in one vocabulary and never have to be learned twice. They are read
from the LIVE theme by CSS variables: ten palettes ship here and half of them are not dark.
The hairline outline is what keeps a tick legible where it crosses the coloured stretch. */
.cg-ticks{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.cg-tick{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;border-radius:1px;
background:var(--acc);box-shadow:0 0 0 .5px color-mix(in srgb,var(--bg-2) 65%,transparent);
pointer-events:auto;cursor:pointer}
.cg-tick.guest{background:var(--think,#8b7fd4)}
.cg-tick.bot{background:var(--tx-3);opacity:.8}
/* THE BOUNDARY BETWEEN TWO SESSIONS IS NOT A FOURTH VOICE, so it is not given a fourth colour:
it is the strongest ink the theme has, full height, and that is the only thing on this bar drawn
that way. Grey was tried first and was wrong — the panel's own lines are grey, so the structure
of the row and one of the voices in it read as the same mark at a glance. */
.cg-tick.cut{top:-3.5px;bottom:-3.5px;width:1px;margin-left:-.5px;border-radius:0;
background:var(--strong);opacity:.75;box-shadow:0 0 0 .5px color-mix(in srgb,var(--bg-2) 80%,transparent)}
/* Its own line on a phone — and nowhere at all on a wide screen, where the gauge lives in the
flags row. An empty row must not cost the composer a pixel, hence :empty. */
.gauge-row{display:none}
/* ⏱ THE COUNTDOWN BESIDE THE TIME BAR. Two classes for the same reason the header sign has
them — a one-class `display` here would be overruled by whatever is written lower down.
Tabular digits, or «10 m» → «9 m» shifts the whole strip sideways once a minute; a fixed
floor under the width keeps «33 s» and «10 m» in the same place. It may not grow the bottom
bar: that row carries the height of the whole composer, and one wrap there slides «Send»
under the thumb. */
/* It is a door as well as a readout since 19.09 (right button → the gap submenu and «stop»), so
it is owed the hand a door gets. Nothing about its SIZE changes on hover — the bottom bar
carries the height of the whole composer, and a chip that grows under the cursor slides «Send»
sideways while the hand is on its way to it. */
.loop-left.loop-left{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;
color:var(--acc);font:600 11px/1 var(--mono);letter-spacing:0;min-width:44px;
justify-content:flex-end;white-space:nowrap;cursor:pointer;
border-radius:5px;transition:background .12s,outline-color .12s}
/* ⛔ THE TINT IS GROWN WITH AN `outline`, NEVER WITH PADDING. Everything here is `border-box`, so
padding would eat into the 44px floor and a negative margin to pay it back would move the whole
strip by six pixels on every hover. An outline is drawn outside the box and costs no layout. */
.loop-left.loop-left:hover{background:color-mix(in srgb,var(--acc) 14%,transparent);
outline:3px solid color-mix(in srgb,var(--acc) 14%,transparent)}
.loop-left.loop-left.hidden{display:none}
/* ⛔ OFF: THE SAME CHIP, NOT A SECOND SIGN (28.09). The 44px floor exists to stop «10 m» → «9 m»
shifting the strip once a minute; with no number to draw there is nothing to hold still, so the
floor is dropped and the chip costs the bar one icon. Muted, because it is an invitation and
not a state — the accent colour on this row means «something is running». */
.loop-left.loop-left.off{min-width:0;color:var(--tx-2)}
.loop-left.loop-left.off:hover{color:var(--tx);
background:color-mix(in srgb,var(--tx) 10%,transparent);
outline:3px solid color-mix(in srgb,var(--tx) 10%,transparent)}
.loop-left .ll-ico{width:12px;height:12px;flex:0 0 auto;opacity:.85}
.gauge-row:empty{display:none!important}
/* ⚡ THE LOCK CHIP. Same bargain as .loop-left: it must not be taller than the letters of the
checkbox beside it, and the hover tint is grown with an `outline` and never with padding —
everything here is border-box, so padding would change the height of the whole bottom bar and
one wrap there slides «Send» under the thumb. */
.sub-pin{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
background:none;border:0;padding:0;margin:0 2px;border-radius:5px;
color:var(--acc);font:600 11px/1 var(--mono);white-space:nowrap;cursor:pointer;
max-width:170px;min-width:0;overflow:hidden;transition:background .12s,outline-color .12s}
.sub-pin:hover{background:color-mix(in srgb,var(--acc) 14%,transparent);
outline:3px solid color-mix(in srgb,var(--acc) 14%,transparent)}
/* NOT IN FORCE — the row is locked to a subscription that is switched off, so the next turn
goes somewhere else. The one state where silence would be a lie. */
.sub-pin.off{color:var(--warn)}
.sub-pin.off:hover{background:color-mix(in srgb,var(--warn) 16%,transparent);
outline:3px solid color-mix(in srgb,var(--warn) 16%,transparent)}
.sub-pin .sp-ico{width:11px;height:11px;flex:0 0 auto;opacity:.9}
/* NOT LOCKED YET, ON A NEW CHAT — the chip is the choice, not a fact (owner, 30.10). Muted text and
an OPEN padlock (the shackle lifted), so it cannot be mistaken for a lock already set. */
.sub-pin.free{color:var(--tx-2);font-weight:500}
.sub-pin.free:hover{color:var(--acc)}
.sub-pin .sp-shackle{transition:transform .12s}
.sub-pin.free .sp-shackle{transform:translate(3px,-2.5px)}
.sub-pin b{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* ON A PHONE THE STRIP IS CUT FROM THE END, SO THIS CHIP GIVES UP LETTERS BEFORE IT GIVES UP ITS
PLACE: the padlock is the fact, the name is the detail, and the detail is one tap away. It may
never push «Send» — that is the one thing the bottom bar is not allowed to do. */
@media (max-width:640px){.sub-pin{max-width:92px}.sub-pin .sp-pre{display:none}}
/* `[hidden]`-by-class must beat the flex above — the same trap the attention triangle fell into
twice: a class that sets `display` outranks the zero-specificity rule that hides it. */
.sub-pin.sub-pin.hidden{display:none}
/* ═══ THE QUESTION THAT WAS ASKED ═══
The red «?» in the rail says «you have been asked something», and that is not enough: the
question stands as the second-to-last paragraph of a long report, and a person honestly does
not find it. The strip shows the TEXT itself, leads to it in the feed, and lets the light be
taken down by hand when there is nothing left to answer. It lives inside .composer — which
means the same ResizeObserver measures its height, and the feed does not jump. */
.ask-bar{max-width:var(--read-w);margin:0 auto 6px;display:flex;align-items:center;gap:8px;
padding:7px 10px;border:1px solid var(--err);border-radius:10px;background:var(--err-bg)}
.ab-ico{font-size:13px;line-height:1}
.ab-q{flex:1;min-width:0;font:12.5px var(--sans);color:var(--tx);
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.ab-btn{flex:none;font:11.5px var(--sans);padding:4px 9px;border-radius:8px;cursor:pointer;
border:1px solid var(--line-2);background:var(--bg-3);color:var(--tx-2)}
.ab-btn:hover{color:var(--tx);border-color:var(--acc)}
.ab-btn.ab-off{color:var(--ok)}
/* Yes and No are the ANSWER, and the three buttons after them are ways of not answering yet. One
tap sends, so they are the only ones drawn at full strength — the rest stay the quiet grey they
have always been. */
.ab-btn.ab-yes,.ab-btn.ab-no{font-weight:600;color:var(--tx)}
/* FIVE BUTTONS DO NOT FIT BESIDE A QUESTION ON A PHONE. The strip is a single flex line and every
button in it is `flex:none`, so a new one does not push itself down — it squeezes the question,
and the question is the only thing on the strip that has to be read. On a narrow screen the
question takes the whole first line and the buttons drop under it. */
@media (max-width:860px){
.ask-bar{flex-wrap:wrap}
.ab-q{flex:1 1 calc(100% - 30px);-webkit-line-clamp:3}
.ab-x{margin-left:auto}
}
.ab-x{flex:none;background:none;border:0;color:var(--tx-3);font-size:13px;cursor:pointer;padding:2px 4px}
/* The same strip explains the «!»: the trouble has already happened, so it is calmer than the
question — the border is amber rather than alarm-red, and it does not pull the eye to itself
a second time. */
.ask-bar.bad{border-color:var(--warn,#c08a2e);background:var(--warn-bg,rgba(192,138,46,.10))}
.ab-x:hover{color:var(--tx)}
.ab-hit{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px;transition:outline-color .4s}
/* ═══ A CHOICE IN AN ANSWER IS A BUTTON ═══
The chip is `display:inline`, not `inline-block`: it lives INSIDE the sentence and a caption
that runs past the edge of a phone must wrap like the words around it. `box-decoration-break`
is what then draws the border on BOTH halves — without it the second line comes out bare and
the button looks broken in half. `font:inherit` keeps a `**bold**` caption bold: the whole
`` is moved into the button, so the button must not overrule it. */
/* SOLID, NOT A GHOST (owner, 10.09: «like bootstrap 5? So filled, not transparent»). A labelled
option is the panel's PRIMARY action, so it is drawn as one — the accent fill, the way
Bootstrap draws `.btn-primary`. The fill is `--acc` and the ink is `--on-acc`, which every
theme defines and `themes.js → ink()` computes when it does not, so the text stays legible on
all eleven palettes instead of only on the blue one this was asked for. Never hardcode a blue
here: «for my sky theme» is the theme picking the hue, not the stylesheet. */
/* ═══ THE MEASUREMENTS ARE BOOTSTRAP 5's, THE COLOURS ARE THE THEME'S (owner, 11.09) ═══
«make the style of the buttons like they are on Bootstrap 5 and for my particular Sky theme.»
The fill arrived on 10.09 and the SHAPE did not: 2px of vertical padding on a 15px line drew a
thin strip, which is a chip, not a button. `.btn` is `.375rem .75rem` on a 1.5 line — 6px / 12px
here — with a `.375rem` (6px) radius and a 400 caption, and that is what is copied. What is NOT
copied is one hex of Bootstrap's blue: `--acc` is the hue his theme picked (Sky: #4d9bff) and
`--on-acc` is the ink `themes.js → ink()` computes to stay legible on it, so the same rule draws
all eleven palettes instead of the one this was asked for.
⚠ `display:inline` is what is ASKED FOR here and `inline-block` is what Chromium answers — a
`` is blockified whatever the sheet says, so the declaration is a preference and not a
fact. It changes nothing that matters: the caption still wraps inside the box, so a 140-character
option breaks over two lines on a phone instead of leaving the screen, which is the only promise
this line was ever making. The gate measures THAT, at 430px, and not the computed word — an
earlier version of the check asserted `inline`, went red, and was wrong about a panel that was
drawing exactly what was wanted. The real price of an inline-level box is that vertical padding
does not push the neighbouring lines apart — paid by `.has-opt` below, on the host. */
/* ⛔ `line-height` IS PART OF THE `font` SHORTHAND, so `font:inherit` drags the host's leading in
with the family and the size — and the host's leading is the 2.8 that `.has-opt` sets to make
ROOM for these buttons. The button then grew to fill the very gap that was opened for it and the
three fills went back to touching, which is the defect `.has-opt` exists to prevent, arriving by
the back door. Bootstrap's `.btn` is 1.5, and saying it here is what makes the 6px of padding
mean 6px. Measured after: a 36px button on a 42px line. */
/* ═══ IT HAS TO LOOK PRESSABLE BEFORE IT IS READ (owner, 11.09) ═══
«Let's add a bit more embossing - inside text - it is not obvious that this is a button.»
A flat fill of the accent is also how a highlight, a tag and a code span are drawn, so the one
thing separating a control from decoration was its colour. The cure is to give the box a face
that catches light: a lit top edge, a shaded inside bottom lip, and a gloss down the fill.
⛔ EVERY ONE OF THOSE LAYERS IS `inset` — NOTHING IS DRAWN OUTSIDE THE RECT. The first version
of this (11.09, morning) also carried a solid side wall `0 3px 0 var(--opt-edge)` and the
shadow it cast `0 5px 9px var(--shadow)`, which is the textbook 3D-button trick. He looked at
it and answered «just remove that strange shadow», with an arrow drawn at the dark block under
the fill — a hard offset in the fill's own darker tone reads as a SECOND, misaligned button
rather than as thickness, and on a dark page the blur under it reads as dirt. So the body is
made of light on the face now, not of an object under it. Keep it that way: a new layer here
with a non-zero Y offset and no `inset` puts that block straight back, and the gate below
(«nothing is drawn under the button») is what says so out loud.
⛔ THE FILL IS A TOKEN, NOT A HEX. `--opt-bg`/`--opt-tx` default to `--acc`/`--on-acc` in
`themes.js → expand()`, so ten palettes are unchanged and a theme may name its own button
colour — «Sky» does, because he asked for it by eye. Never hardcode a blue here. */
.opt-btn{display:inline;font:inherit;line-height:1.5;
--opt-fill:var(--opt-bg,var(--acc));
--opt-ink:var(--opt-tx,var(--on-acc));
--opt-edge:color-mix(in srgb,var(--opt-fill) 52%,#000);
/* The gloss: lighter along the top of the face, darker along the bottom. It is a BACKGROUND
LAYER and `.opt-default` keeps it as its second layer — see there for why that matters. */
--opt-gloss:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.03) 46%,rgba(0,0,0,.16));
/* The mark of the recommended option, as a SHAPE rather than as a character — see
`.opt-default` below for why it may not be the emoji. It is declared here, on the button,
because a custom property is inherited and `::before` is where it is spent; declaring it
there would put the drawing inside the rule that uses it, and the next correction would
fork it.
⛔ THE OUTLINE IS TRACED FROM THE PICTURE HE SENT, NOT DRAWN BY EYE (owner, 11.09 night:
«but take this design. Existing one - too long»). The first drawing was a squat hand — a
palm 9.6 wide against 7.1 tall, ratio 1.35 — and «too long» is exactly what a hand that
wide reads as at 13px. His picture measures 1.12, so the proportions here are MEASURED
off it rather than guessed: the file was decoded, the blue mask walked row by row, and
the two components came back as cuff 0…3.97 × 5.85…15.92 and hand 4.05…16 × 0…15.92 in
this viewBox's own units. The thumb therefore reaches the top edge and the cuff runs the
full depth of the hand — that is the whole difference, and it is why the shape can be
checked against a number instead of a taste. Three knuckles on the right edge are his
picture's too; at 13px they are a soft wave rather than three lumps, which is the point
of tracing instead of stylising. */
--opt-thumb:url("data:image/svg+xml,`
does not exist in CSS).
⚠ `position:relative` stays, even though the status no longer has an `::after` of its own:
it is held by `.row-hold::after` (the «the row is held» strip), which needs a positioned
ancestor.
There is deliberately no icon: it would cost a column in the narrowest place of the panel,
while a colour takes up nothing. `work` has no rules at all — the rail without statuses has
not changed by a single pixel. */
/* ── «WORKED IN THE LAST 24 HOURS» — A STEP OF BRIGHTNESS, NEVER A COLOUR ──
«add highlight to "fresh" session within last 24h … or even better - task line background
emphasis. And this again - via additional checkbox» (the owner, 15.09). Off by default; the
tick is `fresh-24h` in Settings → General and `web/tree.js → freshRow` reads it at paint time.
⛔ THE WASH IS `--tx`, AND THAT IS THE WHOLE REASON IT IS ALLOWED TO EXIST. On his own rail
about half the rows are under a day old — and «an accent spent eleven times is not an accent»
(05.09, the revoked project band). `--acc` in this rail has exactly one job, «I am standing
here», and `--err` / `--warn` / `--ok` are the three statuses; a fourth colour drawn on eight
rows out of seventeen would take the answer away from the one row that needs it. A wash of the
TEXT colour is not a signal competing with those — it is the row standing one step nearer. It
also runs the right way on every palette by itself: it lifts a dark theme and deepens a light
one, because `--tx` is the colour that contrasts with the background in either.
⚠ `background-image`, like the status, and never the `background` shorthand: the shorthand
would wipe the status tint, and on a phone `.swipe .row` would wipe this one (28.08, 06.09).
⚠ IT STANDS ABOVE THE THREE STATUS RULES ON PURPOSE. Both are two classes, so the order in the
file decides, and a status is set BY HAND and outranks every clock in this rail.
Gate: `npm run fresh` — it asks THIS stylesheet, on a hand-built row, both bare and inside
`.swipe`, and it reads the computed paint rather than the class, because a class check is green
right through the two outages named above. */
.row-task.fresh{background-image:linear-gradient(color-mix(in srgb,var(--tx) 7%,transparent),color-mix(in srgb,var(--tx) 7%,transparent))}
.row-task.st-urgent,.row-task.st-almost,.row-task.st-done{position:relative}
/* The red one of the three is the only one obliged to CALL rather than merely answer a
question: it is denser than the others. The geometry of all three is one and the same: the
fill takes up not one pixel, so the list does not breathe when a status changes. */
.row-task.st-urgent{background-image:linear-gradient(color-mix(in srgb,var(--err) 25%,transparent),color-mix(in srgb,var(--err) 25%,transparent))}
.row-task.st-almost{background-image:linear-gradient(color-mix(in srgb,var(--warn) 21%,transparent),color-mix(in srgb,var(--warn) 21%,transparent))}
.row-task.st-done{background-image:linear-gradient(color-mix(in srgb,var(--ok) 19%,transparent),color-mix(in srgb,var(--ok) 19%,transparent))}
/* The colour of the TEXT of a row with a status lives not here but in the cluster of name
colours (`.row-task .row-name` lower down the file) — the same place where cooling paints
the name a dull `--tx-3`: the rules are of equal weight, and the order decides. */
/* Work that is done still does not shout: the name is a hair paler than the other statuses —
that is enough for the eye to run past it, and too little to make the row hard to read. */
.row-task.st-done .row-name{opacity:.9}
.row-task.st-done.current .row-name{opacity:1}
/* A task that has not been born yet: there is no session on disk, but the row already stands
and is highlighted — otherwise «new session» looks like a button that did nothing. */
.row-task.row-draft .row-name{color:var(--acc);font-style:italic}
.row-draft .row-heat{color:var(--tx-3);opacity:.8}
/* `overflow:hidden` cuts not only sideways but DOWNWARDS as well: with a fractional zoom the
row's height is rounded down, and only the top halves of the letters are left. An explicit
row height with slack (and `padding-block`) makes the clipping impossible at any scale. */
.row-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.5;padding:1px 0;min-height:1.5em}
/* The tail of a name («— what is happening to this thing») is paler than the head: the head is
caught by the eye while running down the rail, the tail is read to the end once you have
stopped. A colour rule of its own on a descendant beats any inherited one — both on the
current row and on a cooled one. */
.row-tail{color:var(--tx-3);font-weight:400;opacity:.92}
.row-meta{display:flex;align-items:center;gap:5px;flex:none}
.row-tok{font:10.5px var(--mono);color:var(--tx-3)}
.pill{font:10px var(--mono);background:var(--bg-4);border-radius:9px;padding:0 5px;color:var(--tx-3)}
.pill.warm{background:var(--warn-bg);color:var(--acc)}
/* The only figure on the right is time. While the cache is alive it is the minutes of «how
much longer it can be done cheaply», from green to red; once it has cooled — how much has
passed, in cold blue. */
.row-heat{font:10.5px/1 var(--mono);min-width:27px;text-align:right;letter-spacing:-.2px}
.row-heat.w4{color:var(--ok)}
.row-heat.w3{color:var(--warn)}
.row-heat.w2{color:var(--acc)}
.row-heat.w1{color:var(--err)}
.row-heat.cold{color:var(--cold);opacity:.8}
/* ⟳ THE SYNC MARK ON A PROJECT LINE (web/tree.js -> gitState). Quiet on purpose: colour only
when there is something to say, nothing at all for a folder that is not a repo with a remote. */
.gitmark{font:10px/1 var(--mono);letter-spacing:-.2px;opacity:.85}
/* A project held at the top by a hand: our own glyph, so it takes the theme's colour and the row's
size. No state colour of its own — a pin is a fact, not an alarm. */
.pinmark{width:11px;height:11px;flex:0 0 auto;color:var(--tx-2);opacity:.9}
.gitmark.ok{color:var(--ok)}
.gitmark.wait{color:var(--warn)}
.gitmark.off{color:var(--cold);opacity:.42}
/* ── the fold: long since cooled ───────────────────────────────────────────
One row instead of twenty. Deliberately muted: this is not the work but the door to it,
and it must fall into the field of view last. */
.row-fold{color:var(--tx-3);font-size:12px;opacity:.72}
.row-fold:hover{opacity:1;color:var(--tx-2)}
.row-fold .row-name{font-style:normal;letter-spacing:.1px}
.row-fold.open{color:var(--tx-3)}
/* Emerging from the fold: the rows swim out from where they came, stepped by 22 ms. Without
that, the unfolding reads as «the tree suddenly became a different one». */
@keyframes rail-unfold{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.row.unfold,.swipe-wrap.unfold{animation:rail-unfold .19s ease both}
@media (prefers-reduced-motion: reduce){.row.unfold,.swipe-wrap.unfold{animation:none}}
/* ── THE LIGHT ON THE LEFT: attention. (On the right — the price: the minutes of a warm cache.) ──
Pulsing — a turn is running right now, there is no point going there.
Steady — the turn has FINISHED and it has not been read yet: this is where to go.
Out — it has been read. The room for it is always taken, otherwise the rows would jump
sideways every time a turn starts and finishes. */
/* The same three rules serve the TILES IN THE RAIL'S HEAD (`.tot-pill .dot`): the sign «work
is going on here» and the sign «finished and unread» are obliged to be exactly the same in
the caption as they are on the rows below it — otherwise the head answers the same question
in a second, slightly different voice. */
.row .dot,.tot-pill .dot,.asks-btn .dot{width:8px;height:8px;border-radius:50%;flex:none;background:transparent}
/* «Finished and unread» — a tick: it differs from the pulsing dot in shape and not only in
movement, so it reads both with peripheral vision and on a still screen. */
/* The width is exactly that of the extinguished slot (8px): a wider tick made the row two
pixels longer, and the rail twitched sideways every time a turn ended. The glyph is bigger
than the slot — it is drawn on top, taking up no room. */
/* A DARKER GREEN THAN `--ok`, AND ONLY HERE. The owner asked for it twice on 04.09 («green a
bit darker», then «green — even darker»), so the disc keeps 50% of the theme's green: the
first ask took it to 65%, the second to 50. It is MIXED DOWN from the theme's own green and
never written as a hex, so all 11 palettes keep their own hue and only this disc goes deeper;
and the white tick inside gains contrast, which is the reason the request is right.
Mixing with pure black in sRGB scales all three channels by the same factor, which is exactly
what leaves the hue alone — a darker green, not a greyer one. That is why the second operand
is #000 and not some hand-picked dark green: a hand-picked one would drag every palette's hue
towards itself. `--ok` itself is untouched — it paints the lane dots, the toast and the diff,
and none of those carry a white glyph inside them. */
.row .dot.done,.tot-pill .dot.done,.asks-btn .dot.done{background:none;box-shadow:none;
color:color-mix(in srgb, var(--ok) 50%, #000);overflow:visible;
font:700 11px/1 var(--sans);display:flex;align-items:center;justify-content:center}
/* THE CLASSIC ✓ — THE DEFAULT AGAIN SINCE 10.09, and it takes `--ok` WHOLE. The darkened mix
above was computed for the filled square, where the green is a BODY carrying a white tick on
top of it; the bare ✓ is the glyph itself, and at 50% of the theme's green it reads as a
half-erased mark on every one of the eleven palettes. `.tick` is put on by `web/tree.js`
exactly when it draws the character, so the two looks can never take each other's colour. */
.row .dot.done.tick,.tot-pill .dot.done.tick{color:var(--ok)}
/* THE CHECKBOX, AND ITS SIZE IS HIS OWN MEASUREMENT. «Round checkbox instead of green V:
small — as circle near remove» (10px), then «15% bigger» (11.5), then «15% smaller» — 9.8
(04.09). The SHAPE stopped being round the same day — «let's change to rounded square to not
mix with green circle of ongoing process» — and it lives in `web/tree.js` (`svgDone`), not
here: the shape is the file's business, the size is the row's. The number lives HERE and not in the SVG for the same reason every other glyph in
this panel is sized in CSS: the shape is the file's business, the size is the row's.
The SLOT stays 8px and the icon is drawn ON TOP of it — the same trick «!» and «?» already
use. A beacon that took its own width would make the row two pixels longer the moment a turn
ended, and the rail would twitch sideways every time work finished.
⚠ ITS HEIGHT IS SET BY HAND, AND IT IS NOT THE GEOMETRIC CENTRE. Three asks on 04.09: «a
little more centered to the capital letter — now a bit higher — need even», then «position —
15% lower (compare to its size)». So the first ask lifted it 0.7px, and the second put it
0.8px BELOW the flex centre instead — 15% of 9.8px is 1.47px, and -0.7 + 1.47 = 0.77.
⚠ DO NOT «CORRECT» THIS BACK TO THE MEASURED CENTRE. The measurement says the opposite, and
the measurement is not the authority here: the flex box centres the icon on the LINE BOX (the
em box plus the leading), and the cap centre sits ABOVE that, so a level icon wants a lift,
not a drop — the icon centre stood 0.97px below the cap centre on a project row and 0.41px
below it on a task row. His eye asked for it lower anyway, twice in a row and the second time
with a number. The eye wins; the numbers are recorded so nobody spends the afternoon
rediscovering that this looks wrong on paper.
⚠ PIXELS AND NOT em, ON PURPOSE. `em` here resolves against the DOT'S OWN font-size, which
this file pins at 11px for the «!» and «?» glyphs — so an em rule would look like it follows
the row's letters and would in fact be a constant in disguise. The 15% he named is 15% of the
ICON, and the icon is a fixed 9.8px, so a pixel IS the honest unit for it.
A relative `top` and not a margin: the icon is drawn on top of a slot it does not own, so it
has to move without moving anything else. */
.row .dot.done .beacon-ok,.tot-pill .dot.done .beacon-ok{width:9.8px;height:9.8px;
display:block;flex:none;position:relative;top:0.8px}
/* WAITING FOR A KEY. Not trouble and not done: the work is accepted, it's queued and will
move on by itself. The mark is calm — it informs, it doesn't call; there's nowhere to call
to, nothing to do.
The colour and the glyph size are two separate decisions and both are kept: `--warn` is what
the SVG below inherits through `currentColor`, and the 11px/1 is the fallback scale for a row
that draws the sign as a character rather than as the SVG. */
.row .dot.wait{background:none;box-shadow:none;overflow:visible;color:var(--warn);
font-size:11px;line-height:1;
display:flex;align-items:center;justify-content:center;opacity:.85;
animation:wait-breathe 2.6s ease-in-out infinite}
/* A custom SVG (see svgWait in tree.js), not the hourglass emoji: the size is set in pixels
rather than font-size - for a colour-emoji glyph font-size did nothing at all, and the glyph
drew over the row as its own disproportionate blob. 11px is the same scale as the
neighbouring checkmark, and it overflows the 8px slot in exactly the way that checkmark does.
`min-width:0` and `flex:none` are the belt, not the cure: they keep the glyph from being
squeezed by whatever the slot happens to be, which is how it once computed `width: 0px` at
`height: 11px`. The cure was renaming the feed's waiting card - see `.wait-card` above. */
.row .dot.wait svg{width:11px;height:11px;min-width:0;min-height:0;flex:none;display:block}
@keyframes wait-breathe{0%,100%{opacity:.85}50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){.row .dot.wait{animation:none}}
/* Broke off — the same «you have to go in here» sign, but of another shape and another colour:
the work ended not with an answer but with a break, and a green tick would lie about that. */
/* IT BROKE OFF — THIS IS NOT «unread», THIS IS TROUBLE, AND IT SHOUTS.
A turn that fell on an error (the key, a limit, the death of the process) may not be shown with
the same quiet sign as finished work: you have to GO there, and better while the session is
warm — on a cooled one the same conversation will run again and at the cold price. So the sign
is large, bold, red and pulsing. Cooled down — the pulse leaves (there is nowhere left to
shout), but it stays red forever: there was a problem in this row, and it is visible even when
everything has been read. */
.row .dot.done.bad{color:var(--err);font-size:15px;font-weight:900;text-shadow:0 0 8px var(--err);
animation:bad-cry 1.05s ease-in-out infinite}
.row .dot.done.bad.cool{animation:none;text-shadow:none}
@keyframes bad-cry{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(1.5);opacity:.45}}
@media (prefers-reduced-motion: reduce){.row .dot.done.bad{animation:none}}
/* ASKED AND WAITING — the only beacon with a shelf life. Finished work can be read tomorrow too;
a question has to be closed while the session is warm, otherwise the same conversation will run
again and at the cold price. So it is red and it BLINKS — like the pulse of a running turn, but
with a «?» sign, so that «work is going on there» is not confused with «I am being waited for
there». */
/* The size is the same as that of «!»: an 11px «?» on a 27px row read as a speck — «it is very
small, it could be a little bigger». The glyph is drawn ON TOP of its own 8px slot, so the row
does not become one pixel wider because of it. */
.row .dot.done.ask,.asks-btn .dot.done.ask{color:var(--err);font-size:15px;font-weight:900;
text-shadow:0 0 8px var(--err);animation:ask-blink 1.6s ease-in-out infinite}
/* Cooled down — there is nowhere left to shout (the same conversation will run at the cold price
anyway), but the «?» stays red: in this row an answer is being waited for. */
.row .dot.done.ask.cool{animation:none;text-shadow:none}
@keyframes ask-blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.18)}}
@media (prefers-reduced-motion: reduce){.row .dot.done.ask,.asks-btn .dot.done.ask{animation:none}}
.row .dot.live,.tot-pill .dot.live{background:var(--ok);animation:beacon 1.15s ease-in-out infinite}
/* THE ROW'S BACKGROUND AGENTS: A BLUE NUMBER OVER THE BEACON, NOT A SECOND SIGN BESIDE IT.
«When you show the running agents, it is as if it shifts the tab further to the right. Although
by rights there is still room on the left, so that the line where the tabs' text begins would
stay a single one» (the owner, 28.08). A separate element in the flow is its width PLUS the
gap, that is, the names of all rows with agents moved 19px to the right and came back when the
agents finished: the rail is searched by eye along the left edge of the names, and a moving
edge costs more than any sign.
The technique is the same one «!» and «?» are already drawn with: the glyph is drawn ON TOP of
its own 8px slot (`.row .dot` — `position:relative`), so the row does not become one pixel
wider while the sign is large. The sign is opaque and covers the beacon under it — that is no
loss: while the agents are working the row is WORKING anyway (see `beaconOf` → 'live agents'),
and a green «done» tick under it would be a plain untruth. */
.row .dot{position:relative}
.row .dot .crew{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
min-width:14px;height:14px;border-radius:99px;background:var(--bot);white-space:nowrap;
color:var(--bg);font:700 9.5px/14px var(--mono);text-align:center;padding:0 3px;
animation:beacon-crew 1.6s ease-in-out infinite;z-index:2}
/* The turn ITSELF is running too, not only the agents — a green ring around the blue number: two
facts («work is going on here» and «and the agents too») are obliged to be visible at the same
time, and there is no room for a second sign and never will be. */
.row .dot.live:not(.agents) .crew{box-shadow:0 0 0 2px var(--ok)}
@keyframes beacon-crew{0%,100%{opacity:1;box-shadow:0 0 8px var(--bot)}50%{opacity:.45;box-shadow:0 0 0 var(--bot)}}
@media (prefers-reduced-motion: reduce){.row .dot .crew{animation:none}}
/* THE MICROPHONE TO THE LEFT OF THE BEACON: «what is being said now will travel into THIS row».
It pulses because it answers the question «is it still recording?» — a still sign does not
answer that one.
It takes up room only while the dictation is running: a permanent indent for the sake of a rare
sign would move the names of all rows to the right forever. */
.row .row-mic{flex:none;width:17px;height:17px;margin-right:3px;color:var(--err);
display:flex;align-items:center;justify-content:center;
animation:mic-pulse 1.1s ease-in-out infinite}
.row .row-mic svg{width:17px;height:17px;display:block;
filter:drop-shadow(0 0 4px color-mix(in srgb,var(--err) 65%,transparent))}
@keyframes mic-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.86)}}
@media (prefers-reduced-motion: reduce){.row .row-mic{animation:none}}
/* «WHERE THE RECORDING IS GOING ON» IS READ WITH PERIPHERAL VISION, AND A SIGN — ONLY WITH
CENTRAL VISION.
So the recording row is coloured whole and breathes together with the microphone: it is visible
from a neighbouring tab without peering at the rail. The red scar on the left — so the
background is not confused with the highlight of the open row, which has a background of its
own. */
.row.rec{border-radius:6px;box-shadow:inset 2px 0 0 var(--err);
animation:rec-row 1.6s ease-in-out infinite}
@keyframes rec-row{0%,100%{background:color-mix(in srgb,var(--err) 10%,transparent)}
50%{background:color-mix(in srgb,var(--err) 26%,transparent)}}
@media (prefers-reduced-motion: reduce){.row.rec{animation:none;
background:color-mix(in srgb,var(--err) 18%,transparent)}}
/* SELECTED MEANS ALREADY COPIED. The pill lives for a second and catches nothing: it is a
message, not a button, and it may not hang over the feed being clickable (this mine has already
gone off here). */
.sel-flash{position:fixed;left:50%;bottom:calc(var(--composer-h, 90px) + 18px);
transform:translateX(-50%);z-index:240;pointer-events:none;
padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
background:var(--bg-2);color:var(--tx);border:1px solid var(--line-2);
box-shadow:0 6px 20px rgba(0,0,0,.35);animation:sel-flash .9s ease forwards}
@keyframes sel-flash{0%{opacity:0;transform:translate(-50%,6px)}
18%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
/* THE STRIP OVER THE SELECTION — «first you select, then you are offered» (the owner, 27.08). It
arrives only when the selection has settled, and it leaves at any movement of it; `placeSelBar`
finds it a place so that it does not cover the letters themselves. z-index below the menu
(200): «⋯» opens the menu, and the menu is obliged to lie on top. The width has its ceiling
from the SCREEN, so it is divided by --ui-scale, and what does not fit scrolls away rather than
wrapping onto a line: a second line would turn the strip into a chip, that is, into exactly
what he complains about. */
.sel-bar{position:fixed;z-index:190;display:flex;gap:2px;align-items:center;
max-width:calc(96vw / var(--ui-scale,1));overflow-x:auto;scrollbar-width:none;
background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:3px;
box-shadow:0 12px 34px var(--shadow);user-select:none;-webkit-user-select:none;
animation:sel-bar-in .13s ease both}
.sel-bar::-webkit-scrollbar{display:none}
/* ⚠ THE HORIZONTAL PADDING IS THE ONLY SLACK THIS STRIP HAS. Five words at 11px of padding
measure 297 local px, and at his real --ui-scale 1.4 a 430px phone caps the strip at
96vw/1.4 = 295 — so the last button, «⋯», the only door into the full menu, was clipped by
the scroll. It fitted when the labels were shorter; the widths of the WORDS are not ours to
fix, the padding is. 9px brings the content to ~287 and leaves 8px of room for the next
label that grows. The gate measures the CLIPPING (scrollWidth > clientWidth) at 1.4. */
.sel-bar button{flex:none;background:none;border:none;color:var(--tx);
font:600 12.5px var(--sans);padding:10px 9px;border-radius:9px;cursor:pointer;white-space:nowrap}
.sel-bar button:active{background:var(--bg-4);color:var(--acc)}
.sel-bar .sel-more{font-size:16px;line-height:1;padding:9px 12px;color:var(--tx-2)}
@keyframes sel-bar-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* The «copied» pill does not hide under the strip when the strip is pressed to the bottom of the feed. */
html.sel-on .sel-flash{bottom:calc(var(--composer-h, 90px) + 74px)}
/* The task's spend: the figures the page is opened for are set large — «what you wrote up at the
top there is very small». */
.big-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin:10px 0 4px}
.big-tile{background:var(--bg-2);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px}
.big-tile .k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3)}
.big-tile .v{font-size:27px;line-height:1.15;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.big-tile .n{font-size:11.5px;color:var(--tx-3);margin-top:3px;line-height:1.35}
.left-at{color:var(--tx-3);font-weight:400}
/* How much written text is waiting for this row to free up. It lives on the task row and not in
the neighbouring row's composer: the queue belongs to the task. */
.pill.queued{color:var(--warn);background:var(--warn-bg);letter-spacing:0}
/* ✎ «something unfinished lies here» — in the accent colour, but with no background: this is not
an alarm but a reminder, and next to ⏳ (yellow) two equally loud signs would argue over one
glance. */
.pill.undone{color:var(--acc);letter-spacing:0}
/* ⚑ «there is work in here that is saved nowhere else». Bare INK, no fill — the loudest thing this
sign is allowed to be. ⛔ It may never take `--acc`: that token has exactly one job in this rail,
«I am standing here», and the project band that spent it on every project row was built on 04.09
and revoked on 05.09 («an accent spent eleven times is not an accent»). It may never take `--err`
either — unfinished work is the NORMAL state of a working machine, not a fault, and a rail with
five red flags on it every morning is a rail nobody reads. `--warn` ink says «worth a look»,
which is exactly what it is. The glyph sizes itself off the pill, `currentColor` does the rest. */
.pill.unfin{color:var(--warn);letter-spacing:0;display:inline-flex;align-items:center;gap:2px}
.pill.unfin .unfinmark{width:9px;height:9px;flex:0 0 auto}
/* ✉ «something came back here and I have not read it» — AND IT TAKES `--ok`, THE GREEN OF THE ✓,
DELIBERATELY. The envelope and the «finished, unread» beacon answer one and the same question;
they differ only in how long the panel has remembered it (the beacon is a live alert capped at
60, the envelope is a stored number with no cap). They are mutually exclusive by construction —
`unreadPill` draws nothing while the beacon is lit — so the green is never said twice about one
row, and the rail gains one plain reading instead of two competing ones: GREEN ANYWHERE ON A
ROW MEANS «there is something here for you», on the left while it is fresh news and on the
right once it is old news.
⛔ NOT `--acc`: that token has one job in this rail, «I am standing here» (05.09). ⛔ NOT `--err`:
an unread answer is the NORMAL state of a working machine — a rail with forty red marks every
morning is a rail nobody reads, which is the wall this feature exists to clear, not to rebuild.
⚠ It does NOT pulse. A light no press can extinguish is what makes a working panel feel broken
(canon 30.08), and this one is put out by READING the row, which can take a minute.
The glyph sizes itself off the pill and `currentColor` does the rest. */
.pill.unread{color:var(--ok);background:color-mix(in srgb, var(--ok) 13%, transparent);
letter-spacing:0;display:inline-flex;align-items:center;gap:2px}
.pill.unread .mailmark{width:10px;height:10px;flex:0 0 auto}
/* The rollup on a shut project carries a COUNT beside the same glyph — «3 rows in here are
waiting». Slightly larger, because it is answering for a whole branch and is read from further
away than a row's own mark. */
.row-project .pill.unread{font-size:10px}
.row-project .pill.unread .mailmark{width:11px;height:11px}
/* 🔁 — the row sends itself the same text on a timer. It is the one badge in the rail that means
MONEY IS BEING SPENT while nobody is looking, so it carries a fill like ⏳ rather than bare ink,
and it does not blink: it is switched off by a press, and a light no press can extinguish is
what makes a working panel feel broken (canon 30.08). */
.pill.loop{color:var(--ok);background:color-mix(in srgb, var(--ok) 14%, transparent);letter-spacing:0}
/* ⛔ No `.pill.bug` here any more — the rail draws no 🐞 (owner, 11.09). The count lives at the
top of the open task, `.bug-chip`. */
@keyframes beacon{0%,100%{opacity:1;box-shadow:0 0 8px var(--ok)}50%{opacity:.2;box-shadow:0 0 0 var(--ok)}}
/* An unread row stops being grey: its name is read, not skimmed. */
.row-task.has-dot .row-name{color:var(--tx)}
/* The disclosure arrow is also the node's heat indicator. It is drawn as a triangle and not as a
glyph: the size and the colour are then ours and not the font's, and it can no longer come out
small. */
.twist{width:13px;height:13px;flex:none;display:flex;align-items:center;justify-content:center;
transition:transform .16s ease;color:var(--tx-3)}
.twist i{display:block;width:0;height:0;border-left:7px solid currentColor;
border-top:5px solid transparent;border-bottom:5px solid transparent}
.twist.open{transform:rotate(90deg)}
.twist.w4{color:var(--ok)}
.twist.w3{color:var(--warn)}
.twist.w2{color:var(--acc)}
.twist.w1{color:var(--err)}
.twist.cold{color:var(--cold);opacity:.75}
.row:hover .twist{filter:brightness(1.3);opacity:1}
/* The period is the rail's main switch: what to show at all. */
/* The period moved into the «Projects» heading as a single chip — a strip of five buttons took up
a row of the rail always, and it is changed once a week. */
/* The period chip was removed from the head altogether (27.08) — it lived here and held the
`margin-left:auto` with which the right-hand group of buttons was pushed to the edge. The right
to push passed to the search: without it the ☰ group slid towards the name and the heading read
as a random heap. */
#tree-head{cursor:pointer}
/* ⚠ THE `auto` MARGIN MOVED ONTO THE FIRST BUTTON OF THE RIGHT-HAND GROUP, NOT COPIED ONTO BOTH.
It is what pushes that group to the rail's edge; written on both buttons it would push them
APART — the filter against the machine strip and the search against the edge — and the header
would grow a gap that changes width with the numbers beside it. `#btn-focus` is first in the
markup, so it carries it and `#btn-search` goes back to the ordinary 4px. Both are IDs, so they
outrank `.side-label .mini-btn` below whatever the order of the file. */
#btn-focus{margin-left:auto}
#btn-search{margin-left:4px}
/* ═══ RECENT ONLY: THE FUNNEL IS INK, AND ONLY THE «ON» STATE IS ALLOWED A COLOUR ═══
Off, it is one more quiet glyph in a line of quiet glyphs (`--tx-3`, like every `.mini-btn`).
On, it takes `--acc` AND says its span in words — and that pair is the point: a filter that
hides rows must be impossible to leave switched on by accident, because from the inside a
filtered rail and an emptied rail look exactly the same. ⛔ The accent is allowed here, and it
does not break the 05.09 law («an accent spent eleven times is not an accent»): that law is
about rows, of which there are hundreds, and this is ONE control in the header that is coloured
only while it is actively holding rows off the screen. */
.focus-btn{display:inline-flex;align-items:center;gap:3px;padding:0;line-height:1}
.focus-btn .focusmark{width:12px;height:12px;flex:0 0 auto}
.focus-btn .focus-span{font:10px var(--mono);letter-spacing:0}
.focus-btn.on{color:var(--acc)}
.focus-btn.on .focusmark{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--acc) 55%, transparent))}
@media (max-width:860px){.focus-btn .focusmark{width:16px;height:16px}.focus-btn .focus-span{font-size:12px}}
/* ⚠ EVERY BUTTON ON THE HEADING'S LINE IS THE SAME BOX, OR THEY ARE NOT ON ONE LINE (24.09).
`.focus-btn` is a flex box 12px high (its funnel); `#btn-search` was a bare inline button whose
height was the LINE BOX of its glyph — 17px at the same 13px font. The heading centres its
children, so two boxes of different heights put the two glyphs 2.5px apart vertically: not a
wrap, just a crooked line, and the pair drifts further apart at every font the machine happens
to have. Measured: focus top 49.5 · search top 47 at the default rail. `inline-flex` +
`line-height:1` gives every glyph here the same box, so the row is straight AND the gate's
ratchet («the search button has not stepped onto a second line», `npm run rail`) measures a
wrap instead of measuring rounding — it compares rounded tops within 2px, and 2.5px of
intrinsic offset made it a coin toss on the sub-pixel position of the heading. */
.side-label .mini-btn{margin-left:4px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* The voice assistant is taken rarely, but it is taken WITH THE HANDS and without looking — so it
is larger than its neighbours: a small button on a phone is hunted for with a finger on the
third try. */
.side-label .mini-btn.big{font-size:19px;line-height:1}
@media (max-width:860px){.side-label .mini-btn.big{font-size:24px}}
/* == A PROJECT ROW IS A HEADING, AND A HEADING IS WEIGHT, NOT PAINT (the owner, 05.09) ==
«Оформление вот этих оранжевого обводки проектов точно не было. Оно очень неудобно сейчас…
верни именно только схему выделения, как раньше… чтобы можно было просто сразу увидеть,
какая задача является актуальной, когда работает.»
The band drawn here on 04.09 — two accent hairlines, a 7% accent fill and 1.5x the height —
is REVOKED, together with the `dep1..3` ladder of 05.09 that only faded those three devices
per floor. It was asked for, and it was built to his words, and it still cost the rail the
thing the rail is for: the accent is the SAME token that says «you are standing here»
(`.row.current` → `--acc`), so a screen holding eleven projects held eleven accent frames,
and the one row that had earned the accent — the task running right now — stopped standing
out among them. A sign spent a dozen times on one screen is not a sign.
So the rail is back to ONE accented object: the current task and the project it lives in,
both wearing `.row.current`. A project is told apart from a task by what costs no accent —
the font weight, the indent and the twist glyph on the left. The height goes back to the
ordinary row's, which is what he means by «у нас все чуть-чуть плотнее было».
⚠ Do not re-add a fill, a hairline or a height here unless he asks a second time: the only
two things this rail may paint across a WHOLE row are a status (set by hand, once or twice a
screen) and «I am standing here». A heading is neither. */
/* ══ THE FOLDER IS LIT LIGHTLY, THE TASK HEAVILY (the owner, 06.09) ══
«Хотелось бы, чтобы активная задача подсвечивалась лёгким выделением, и сам проект легко
подсвечивался, а жирнее выделялась сама задача, на которой я стою, чтобы можно было хоть
понять, на какой же задаче я сейчас стою.» Both rows still wear `.current` — one accented
object plus the folder it lives in, exactly as 05.09 left it — but they may not read the
same: the project answers «which branch», the task answers «which work», and only the second
one is the question the rail exists for. So the folder keeps a step of fill and half a bar,
and the accent itself is spent on the task alone. This is NOT the revoked band of 04.09: it
is drawn on exactly ONE project row on the screen, the one holding the open task. */
.row-project.current{--row-bg:var(--bg-3);box-shadow:inset 2px 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}
.row-project{--pp:10px;font-weight:600}
/* What is left of the 05.09 hierarchy work, and it is all that was ever needed: a nested
project's count pill is a shade smaller than its parent's, and its indent (`web/tree.js →
projectRows`, `margin-left`) steps the whole row in — so a child reads as standing INSIDE its
parent with no colour spent at all. */
.row-project.dep1{--pp:9.4px}
.row-project.dep2{--pp:8.8px}
.row-project.dep3{--pp:8.4px}
.row-project .pill{font-size:var(--pp)}
.row-project .row-name{color:var(--tx);font-weight:600;letter-spacing:.1px}
/* The first child project revealed under a run of the node's OWN tasks: a little more air, so the
two kinds in one fold are not read as one list. `.swipe` wraps the row on a phone, hence both. */
.row-project.fold-cut,.fold-cut .row-project{margin-top:6px}
/* ══ THE BRANCH YOU ARE READING STAYS ON SCREEN (the owner, 06.09) ══
«Если я подлистываю, то проект остаётся фиксированным, пока я подлистываю другие проекты…
Как только я прилистываю последние задачи этого проекта и прихожу на другой проект, этот
проект становится закреплённым… Чтобы было понятно всегда, в какой ветке дерева я нахожусь.»
A rail scrolled past its first screen stops answering the one question it exists for: the
name of the folder these thirty task rows belong to is somewhere above the top edge.
⚠ THE CLASS LANDS ON `#tree`'S DIRECT CHILD, whatever shape it has. On a phone a project row
lives inside a `.swipe` wrapper, and `position:sticky` is CLIPPED by the nearest block-level
ancestor: put on the row inside the wrapper it would have exactly the row's own height to
travel in, i.e. it would never stick at all.
⚠ Flat siblings do not push each other out — a stuck heading of a finished project would hang
over the next one for ever — so WHICH rows may stick, at what `top` and with what push is
decided in `web/tree.js → stickApply`; this rule only supplies the mechanism and the paint. */
.tree>.rail-stick{position:sticky;z-index:20}
/* An opaque backing, or the rows travelling underneath show straight through the heading. It
reads the row's own decision (`--row-bg`) first, so the folder holding the open task keeps
its highlight while it is stuck, and falls back to the rail's own background. */
.tree>.rail-stick.row,.tree>.rail-stick .row{background-color:var(--row-bg,var(--bg-2))}
/* The hairline appears only while the heading is standing over other rows: it is the edge of a
heading that has left its place, not a permanent border (the band of 04.09 was revoked). */
.tree>.rail-stick.stick-over::after{content:'';position:absolute;left:0;right:0;bottom:-1px;
height:1px;background:var(--line);pointer-events:none}
/* ══ «ARCHIVED» — THE RAIL'S LAST LINE ══
It is a HEADING, so it is built like the project rows (the same weight, the same letter spacing)
and NOT like the fold strips: a fold is a state of some other rows, while this is a place of its
own that always stands in the same spot. What separates it from the list is a hairline above and
a little air — the shelf must read as the bottom of the rail and not as one more project — and
its name is a shade quieter than a project's: it is not work, it is where work is put away. */
.row-arch{font-weight:600;border-top:1px solid var(--line);margin-top:6px}
.row-arch .row-name{color:var(--tx-2);font-weight:600;letter-spacing:.1px}
.row-arch.open .row-name,.row-arch:hover .row-name{color:var(--tx)}
/* The glyph sets its own size and takes the row's colour, exactly like every other glyph here. */
.row-arch .arch-ico{font-size:12px;line-height:1;opacity:.8;margin-right:2px;flex:none}
/* ══ A BOX — A NAMED FOLDER OF ONE PROJECT, AT THE TOP OF IT ══
Built exactly like the «Archived» line, because it is the same kind of thing: a heading for a
place, not a state of other rows. Two deliberate differences, and both are about WHERE it stands.
No hairline and no air above it: the shelf wears them to read as the BOTTOM of the rail, while a
box is the project's first line and a rule there would draw a second border right under the
project's own heading. And its name is at full strength (`--tx`), not the shelf's quieter
`--tx-2`: the shelf holds work that is over, a box holds the work you are doing.
⛔ NO FILL AND NO ACCENT. The project band was built with one on 04.09 and revoked on 05.09 —
«an accent spent eleven times is not an accent»: `--acc` in this rail has exactly one job, «I am
standing here», and a colour drawn on every box line would take the answer away from the one row
that needs it. Weight, an icon and an indent are free; colour is not. */
.row-box{font-weight:600}
.row-box .row-name{color:var(--tx);font-weight:600;letter-spacing:.1px}
.row-box .box-ico{font-size:12px;line-height:1;opacity:.8;margin-right:2px;flex:none}
/* The task row is the only kind of row under a project (no more branches or sessions in the rail). */
.row-task{font-size:12px}
.row-task .row-name{color:var(--tx-2)}
.row-task.current .row-name{color:var(--tx)}
.row-task.cold .row-name{color:var(--tx-3)}
/* A fresh row is not read as a cooled one. Without this the tint would sit under the dimmest
`--tx-3` and the row would be lit and hard to read at the same time — the exact pair of layers
that made a status unreadable on 28.08. `--tx-2` is the ordinary task colour, not the open
row's full `--tx`: fresh means «still near», not «this is where you are». Same weight as
`.cold` and placed after it, so the clock that is nearer wins; the status rule below is later
still, so a hand beats both. */
.row-task.fresh .row-name{color:var(--tx-2)}
/* ⚠ THE TEXT OF A ROW WITH A STATUS IS BRIGHTER THAN AN ORDINARY ONE, NOT PALER («very faded and
hard to read», the owner, 28.08). A status is set BY HAND: such a row is going to be read, and
the cooling of the cache has nothing to do with it — «done» a week ago means exactly the same
as done an hour ago. It came out the other way round and in two layers: `.row-task.cold`
painted the name in the dimmest `--tx-3`, and on top of it lay a separate paleness of «done» —
on a coloured fill there was nothing left to read with.
⚠ The rule stands EXACTLY HERE, right after `.cold`, and deliberately at the same weight (two
classes + a descendant): the status is obliged to outrank the cooling, and at equal specificity
the order in the file decides. Up at the top, next to the fill, it would lose to `.cold` — and
an open row would lose its brightness exactly when work is being done in it. It also covers
`.current`: an open row has the same `--tx` colour, and its boldness is added by its own rule. */
.row-task.st-urgent .row-name,.row-task.st-almost .row-name,.row-task.st-done .row-name{color:var(--tx)}
/* The tail of the name stays quieter than the head, but on a row with a status it is `--tx-2` and
not `--tx-3`: on the fill the dimmest tone merges with the background. */
.row-task.st-urgent .row-tail,.row-task.st-almost .row-tail,.row-task.st-done .row-tail{color:var(--tx-2)}
/* ⚠ `--row-bg`, never `background:` — the shorthand would wipe the status tint that lives in
`background-image` right above. The open TASK is the loudest row in the rail: a wash of the
accent over `--bg-4`, against the folder's bare `--bg-3` one line up. */
.row-task.current{--row-bg:color-mix(in srgb,var(--acc) 13%,var(--bg-4))}
/* ⛓N is not a property of the work but a trace of the task surviving a couple of cache coolings. */
.pill.chain{color:var(--acc-2);border-color:var(--line-2);letter-spacing:0}
/* A row standing on a folder that is not there: nothing can be sent from it until the folder is
picked, so the mark is a warning colour and not a counter. */
.pill.gone{color:#e0a33a;border-color:#8a6520;letter-spacing:0}
/* ↳N — how many sub-tasks hang under this row, and the one pill in the rail that is a CONTROL:
it folds the family. So it says so with the cursor and a hover, which is the only budget it has
— a task row has no twist glyph, and giving it one would move every beacon, name and number in
the rail one column to the right for the sake of the few rows that have children.
⛔ NO FILL, and that is the project band's lesson of 05.09 («an accent spent eleven times is not
an accent»): `--acc` in this rail has exactly one job, «I am standing here». A tinted pill on
every parent row would take that answer away from the one row that needs it. Ink only. */
.row .pill.subs{color:var(--acc-2);letter-spacing:0;cursor:pointer}
.row .pill.subs:hover{color:var(--acc);background:var(--bg-5,var(--bg-4))}
/* Folded: the count is still there — a family you cannot see is exactly when the number matters —
and the pill is dimmed, the same way every folded thing in this panel is quieter than an open one. */
.row .pill.subs.shut{color:var(--tx-3);text-decoration:underline dotted}
/* A row that is written into from outside (the Telegram guest). The colour is the theme's accent
and not «Telegram blue»: the rail is painted with tokens only, otherwise one theme in ten gets
an invisible sign. */
.pill.chan{color:var(--acc);background:var(--warn-bg);letter-spacing:0}
/* WHOSE ROW THIS IS, in a project worked by the team. Drawn only on somebody ELSE's row, in the
same violet a guest's message wears in the feed (`--think`) — one colour for «not you» in both
places, so the rail and the feed do not teach two different alphabets. Tokens only: a hard-coded
colour would go invisible in one theme of the eleven. */
.pill.who{color:var(--think-2,#a99fe0);background:color-mix(in srgb, var(--think,#8b7fd4) 14%, transparent);
letter-spacing:0;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ══ A TASK IS PICKED UP BY HAND AND PUT ONTO A TASK (merging rows) ══
The filling strip on the left is the only way to learn about the gesture without reading the
instructions: it runs exactly the second you have to hold it for, and it breaks off if the hand
trembled.
The gesture is a mouse one: on a phone the row already has its swipes, and a second meaning for
the same movement would be a lottery, so none of this is switched on there. */
.row-hold{position:relative;background:var(--bg-3)}
.row-hold::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
border-radius:7px 0 0 7px;background:var(--acc);transform-origin:top;
animation:row-hold 1s linear both}
@keyframes row-hold{from{transform:scaleY(0);opacity:.45}to{transform:scaleY(1);opacity:1}}
.rail-dragging,.rail-dragging .row{cursor:grabbing}
.rail-dragging{user-select:none}
/* The lifted row stays in place as a pale shadow of itself: the list must not collapse under the
hand, or the target moves away at exactly the moment it is being aimed at. */
.row-lifted{opacity:.4;filter:grayscale(.45)}
.row-task.drop-into{background:var(--bg-4);box-shadow:inset 0 0 0 1px var(--acc)}
.row-task.drop-into .row-name{color:var(--acc);font-weight:600}
/* ══ THE SHELF'S OWN TWO TARGETS ══
The «🗄 Archived» line takes a row IN, any project row lets one back OUT — so both of them light
up exactly as a merge target does. One rule, not a copy of the one above: two highlights that are
meant to look identical and are written twice stop being identical at the first edit. */
/* A box line is the third target of the same gesture, so it joins the same rule rather than getting
a copy of it: two highlights meant to look identical and written twice stop being identical at
the first edit. It is also the ONLY one of the three that can refuse (a box of another project,
or the box the row is already in) — a refusal wears `.drop-no`, which is styled with the merge's. */
.row-arch.drop-into,.row-project.drop-into,.row-box.drop-into{background:var(--bg-4);box-shadow:inset 0 0 0 1px var(--acc)}
.row-arch.drop-into .row-name,.row-project.drop-into .row-name,.row-box.drop-into .row-name{color:var(--acc);font-weight:600}
/* THE PROJECT IN THE HAND, DRAWN WHOLE (11.09). The rail re-orders live while a project is carried,
so the row is already in its new place — what could not be seen was WHICH rows travel with it: a
project moves with its boxes, its tasks, its fold strip and its shelf. An insertion line answers
«between which two», which was never the question. Clipped to the rail by JS, so a block scrolled
half off is drawn half. ⚠ This is a transient drag mark, not decoration on `.row-project` — the
band built there on 04.09 was revoked on 05.09 and must not come back. */
.proj-block{position:fixed;z-index:204;pointer-events:none;border-radius:9px;
background:color-mix(in srgb,var(--acc) 8%,transparent);
box-shadow:inset 0 0 0 2px var(--acc),0 6px 20px rgba(0,0,0,.18)}
.row-ghost{position:fixed;z-index:205;pointer-events:none;display:flex;align-items:baseline;gap:8px;
max-width:min(calc(46vw / var(--ui-scale,1)),380px);padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);
background:var(--bg-2);color:var(--tx);font-size:12px;box-shadow:0 8px 24px var(--shadow)}
.row-ghost .ghost-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.row-ghost .ghost-hint{font-size:11px;color:var(--tx-3);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;flex:none;max-width:52%}
.row-ghost.armed{border-color:var(--acc)}
.row-ghost.armed .ghost-hint{color:var(--acc)}
/* THE REFUSAL IS VISIBLE BEFORE THE HAND IS LIFTED. A row taken hold of during its own turn
pushes back and reddens for a second (`row-nope`) — the gesture did not start and it is clear
why; a target that cannot accept is highlighted in that same red, and the ghost is struck through. */
/* A BOX LINE JOINS THIS RULE, because it is the one drop target in the rail that can say no — a box
of another project (a task cannot leave its folder), or the box the row is already in. Without
this the refusal would live only in the ghost's caption, i.e. only for whoever read it, while the
line under the cursor went on looking exactly like one that would accept. */
.row-task.drop-no,.row-box.drop-no{background:color-mix(in srgb,var(--err) 14%,transparent);
box-shadow:inset 0 0 0 1px var(--err)}
.row-task.drop-no .row-name,.row-box.drop-no .row-name{color:var(--err)}
.row-ghost.barred{border-color:var(--err)}
.row-ghost.barred .ghost-hint{color:var(--err)}
.row-nope{background:color-mix(in srgb,var(--err) 16%,transparent);
box-shadow:inset 0 0 0 1px var(--err);animation:row-nope .42s ease both}
@keyframes row-nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* ⚠ THE WIDTH IS DIVIDED BY --ui-scale TOO: `vw` is SCREEN pixels, while the menu lives inside a
`zoom`-ed root, and `min-width:200px` at 1.4 is 280 screen pixels. `menu()` in web/tree.js puts
the menu in its place, but the width ceiling is obliged to stand in the markup as well. */
.ctx-menu{position:fixed;z-index:200;background:var(--bg-3);border:1px solid var(--line-2);
border-radius:9px;padding:4px;min-width:200px;max-width:calc(92vw / var(--ui-scale,1));
box-shadow:0 14px 40px var(--shadow)}
.ctx-menu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--tx);
font:12.5px var(--sans);padding:6px 10px;border-radius:6px;cursor:pointer}
.ctx-menu button:hover{background:var(--bg-4);color:var(--acc)}
.ctx-menu button.danger:hover{background:var(--err-bg);color:var(--err)}
.ctx-sep{height:1px;background:var(--line);margin:4px 6px}
/* An item that unfolds to the right: twenty reports in the common list would turn the menu into a
bedsheet in which the commands themselves cannot be seen. */
.ctx-menu button.has-sub{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ctx-menu button.has-sub::after{content:'▸';color:var(--tx-3);font-size:11px}
.ctx-menu button.has-sub:hover::after{color:var(--acc)}
/* A SPLIT ROW ON A PHONE (`extra.split`, web/tree.js -> menu): the arrow is its own target -- 15% of
the row, never under 44 px, a bigger arrow behind a hairline -- and the rest of the row takes
the default. Same media test as the JS (`not (hover:hover)`), so the drawn zone and the hit
zone cannot disagree about which device this is. */
@media not all and (hover:hover){
.ctx-menu button.has-sub.split-sub{padding-right:0}
.ctx-menu button.has-sub.split-sub::after{flex:none;align-self:stretch;display:flex;align-items:center;
justify-content:center;width:15%;min-width:44px;margin:-6px 0;content:'▶';font-size:16px;border-left:1px solid var(--line)}
}
.ctx-sub{max-height:min(70vh,560px);overflow:auto;min-width:260px}
.ctx-menu button.ctx-dim{color:var(--tx-3);cursor:default}
/* A live preview under the cursor: the page inside is laid out at its own normal width and shown
as a card — picking a report by eye is faster than reading twenty names. */
.ctx-peek{position:fixed;z-index:210;width:640px;height:478px;overflow:hidden;pointer-events:none;
border:1px solid var(--line-2);border-radius:10px;background:Canvas;color-scheme:light dark;box-shadow:0 16px 44px var(--shadow)}
/* The size and the scale are set by JS (web/tree.js → peek): the side and the magnitude depend on
how much room is left to the right of the menu. Here there are only the fallback values. */
.peek-frame{width:1180px;height:880px;border:0;transform:scale(.542);transform-origin:0 0;background:Canvas;color-scheme:light dark}
/* ═══ the tooltip ═══
Our own, not the system's. The system tooltip arrives after a second and a half, is drawn in
the OS font, and can do neither a heading nor columns nor colour — that is, exactly what a rail
row differs by: heat, price, state. Here it is a card on the theme's tokens: a heading,
«what → how much» pairs, a footnote. */
.tip{position:fixed;z-index:400;max-width:340px;pointer-events:none;opacity:0;transform:translateY(3px);
background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;
box-shadow:0 8px 26px var(--shadow);transition:opacity .12s ease,transform .12s ease}
.tip.on{opacity:1;transform:none}
.tip-t{font:600 12.5px var(--sans);color:var(--tx);margin-bottom:3px;overflow-wrap:anywhere}
.tip-sub{font:11px var(--mono);color:var(--tx-3);margin-bottom:6px;overflow-wrap:anywhere}
.tip-rows{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:2px 10px;font-size:11.5px}
/* A key is a short label everywhere else, so it never wraps — but when something long is
handed in as one, it is clipped instead of stretching the card into a wall. */
.tip-k{color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* One row per task: the name takes what is left and is clipped, the project stays whole. */
.tip-item{display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.5;min-width:0}
.tip-item+.tip-item{margin-top:1px}
.tip-item-n{flex:1 1 auto;min-width:0;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tip-item-at{flex:none;color:var(--tx-3);font:10.5px var(--mono);opacity:.85}
.tip-more{margin-top:3px;font-size:11px;color:var(--tx-3)}
.tip-v{color:var(--tx-2);text-align:right;overflow-wrap:anywhere}
.tip-v.hot{color:var(--warn)}
.tip-v.ok{color:var(--ok)}
.tip-v.bad{color:var(--err)}
.tip-v.cold{color:var(--cold)}
.tip-note{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--tx-3);line-height:1.45}
.tip-hint{margin-top:6px;font-size:11px;color:var(--acc)}
/* ═══════════════════ flow overlay ═══════════════════ */
.flow-overlay{position:fixed;inset:auto 0 0 0;height:min(62vh,560px);background:var(--bg-2);
border-top:1px solid var(--line-2);box-shadow:0 -20px 60px var(--shadow);z-index:60;
transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);
display:flex;flex-direction:column}
.flow-overlay.open{transform:none}
.flow-head{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;
border-bottom:1px solid var(--line)}
.flow-title{font:600 13.5px var(--sans)}
.flow-sub{color:var(--tx-3);font:11.5px var(--mono);font-weight:400}
.flow-tools{display:flex;align-items:center;gap:12px}
.flow-body{flex:1;overflow-y:auto;padding:14px 18px}
.flow-grid{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.flow-lane{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.lane-head{display:flex;align-items:center;gap:6px;min-width:0}
.lane-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--acc)}
.lane-dot.live{animation:pulse 1.1s infinite}
.lane-dot.done{background:var(--ok);animation:none}
.lane-name{font:600 11.5px var(--mono);color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-tok{font:10.5px var(--mono);color:var(--tx-3);margin-left:auto}
.lane-track{position:relative;height:20px;background:var(--bg);border:1px solid var(--line);
border-radius:6px;overflow:hidden}
.blk{position:absolute;top:3px;bottom:3px;min-width:3px;border-radius:3px;opacity:.9;cursor:pointer}
.blk:hover{opacity:1;outline:1px solid var(--hair)}
.blk.running{animation:pulse 1.2s infinite}
.blk.bad{outline:1px solid var(--err)}
.lane-desc{grid-column:2;font-size:11px;color:var(--tx-3);margin-top:-4px}
.lane-cur{color:var(--acc-2);font-family:var(--mono)}
.flow-tally{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tally-col{min-width:0}
.flow-legend{display:flex;gap:14px;padding:9px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-3)}
.leg i{width:9px;height:9px;border-radius:3px;display:block}
/* mcp editor */
.modal-back{position:fixed;inset:0;background:var(--veil);z-index:150;display:grid;place-items:center;padding:20px}
.modal{width:min(680px,calc(94vw / var(--ui-scale,1)));max-height:86vh;background:var(--bg-2);border:1px solid var(--line-2);
border-radius:14px;display:flex;flex-direction:column;box-shadow:0 30px 80px var(--shadow)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-title{font:600 14px var(--sans)}
.modal-file{font:11px var(--mono);color:var(--tx-3)}
.modal-body{padding:14px 16px;overflow:auto;flex:1}
.modal-body textarea{width:100%;min-height:300px;background:var(--bg);border:1px solid var(--line);
border-radius:9px;padding:12px;color:var(--tx-2);font:12.2px/1.55 var(--mono);resize:vertical;outline:none}
.modal-body textarea:focus{border-color:var(--acc)}
.modal-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.modal-note{font-size:11.5px;color:var(--tx-3);flex:1;line-height:1.5}
@media(max-width:860px){.flow-tally{grid-template-columns:1fr}.flow-lane{grid-template-columns:96px 1fr}}
/* ═══ account ═══ */
.avatar{width:28px;height:28px;border-radius:50%;background:var(--acc);color:var(--on-acc);
border:none;cursor:pointer;font:600 12px var(--sans);display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.avatar:hover{background:var(--acc-2)}
.popover{position:fixed;top:52px;right:14px;width:330px;max-width:calc((100vw - 28px) / var(--ui-scale,1));z-index:60;
background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;
box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px) scale(.98);
pointer-events:none;transition:.16s ease}
.popover.open{opacity:1;transform:none;pointer-events:auto}
.pop-head{display:flex;align-items:flex-start;gap:10px;padding:13px 13px 10px;border-bottom:1px solid var(--line)}
.pop-who{flex:1;min-width:0}
.pop-name{font:600 14px var(--sans)}
.pop-note{font:12px/1.5 var(--sans);color:var(--tx-3)}
.pop-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:12px}
.pop-card{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}
.pop-ok{font:12px/1.5 var(--sans);color:var(--ok)}
.pop-warn{font:12px/1.5 var(--sans);color:var(--warn)}
.pop-section{display:flex;flex-direction:column;gap:7px}
.pop-label{font:600 10.5px var(--sans);letter-spacing:.9px;text-transform:uppercase;color:var(--tx-3)}
.popover input{background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
color:var(--tx);font:13px var(--sans);outline:none;width:100%}
.popover input:focus{border-color:var(--acc)}
.pop-actions{display:flex;align-items:center;gap:10px}
.pop-msg{font:12px var(--sans);color:var(--tx-3)}
.pop-msg.good{color:var(--ok)}
.pop-msg.bad{color:var(--err)}
.btn-primary{background:var(--acc);color:var(--on-acc);border:none;border-radius:8px;padding:8px 14px;
font:600 13px var(--sans);cursor:pointer;transition:.15s}
.btn-primary:hover{background:var(--acc-2)}
.btn-ghost{background:var(--bg-3);color:var(--tx-2);border:1px solid var(--line-2);border-radius:8px;
padding:8px 14px;font:500 13px var(--sans);cursor:pointer;transition:.15s}
.btn-ghost:hover{color:var(--err);border-color:var(--err)}
.btn-ghost.wide{width:100%}
/* NOT «Cancel», but not the main path either: `.btn-ghost` has a red hover — that is the language
of refusal, and as an option of choice («when it frees up») it would lie. */
.btn-soft{background:var(--bg-3);color:var(--tx);border:1px solid var(--line-2);border-radius:8px;
padding:8px 14px;font:500 13px var(--sans);cursor:pointer;transition:.15s}
.btn-soft:hover{color:var(--acc);border-color:var(--acc)}
/* An action that BREAKS SOMETHING (restart now, interrupting turns): the warning colour and not
the accent one — the hand must see the difference before it presses. */
.btn-warn{background:var(--warn);color:var(--on-warn);border:none;border-radius:8px;
padding:8px 14px;font:600 13px var(--sans);cursor:pointer;transition:.15s}
.btn-warn:hover{filter:brightness(1.08)}
/* ═══ flow: modes, graph, files ═══ */
.seg{display:flex;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:none;border:none;color:var(--tx-3);cursor:pointer;font:500 12px var(--sans);padding:5px 11px;transition:.14s}
.seg button:hover{color:var(--tx-2)}
.seg button.on{background:var(--bg-4);color:var(--acc)}
.graph-wrap{position:relative;display:flex;flex-direction:column;min-height:320px}
.graph{display:block;width:100%;cursor:grab;touch-action:none;background:
radial-gradient(circle at 22% 18%,rgba(217,119,87,.055),transparent 58%)}
.graph:active{cursor:grabbing}
.g-lab{fill:var(--tx-2);font:11.5px var(--sans)}
.g-note{fill:var(--tx-3);font:10px var(--mono)}
.g-edge{fill:var(--tx-3);font:9.5px var(--mono)}
.g-node{cursor:default}
.g-node:hover circle{stroke:var(--tx);stroke-width:1.5}
.graph-hint{display:flex;align-items:center;gap:12px;padding:6px 2px 0;font:11px var(--sans);color:var(--tx-3)}
.files-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.heat{display:flex;flex-direction:column;gap:4px}
.heat-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 54px;align-items:center;gap:9px}
.heat-name{font:11.5px var(--mono);color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heat-bar{display:flex;height:7px;background:var(--bg-4);border-radius:4px;overflow:hidden}
.heat-bar i{display:block;height:100%}
.heat-bar i.r{background:var(--cold)}
.heat-bar i.w{background:var(--warn)}
.heat-n{font:10.5px var(--mono);color:var(--tx-3);text-align:right}
.pane-empty.small{padding:10px 0;font-size:12px}
.mini-n.mono{font-family:var(--mono);font-size:11.5px}
@media (max-width:860px){.files-wrap{grid-template-columns:1fr}}
/* ═══ MCP: the price of a server and switching tools off one by one ═══ */
.mcp-chip{display:flex;align-items:center;gap:7px;margin:0 12px 10px;padding:7px 10px;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);color:var(--tx-2);font:11.5px var(--sans);cursor:pointer;text-align:left;transition:.15s}
.mcp-chip:hover{border-color:var(--acc);color:var(--tx)}
.mcp-chip .chip-ico{color:var(--acc)}
.mcp-chip .chip-tok{margin-left:auto;font:11px var(--mono);color:var(--acc-2)}
.mcp-chip.hot{border-color:var(--err)}
.mcp-chip.hot .chip-tok{color:var(--err)}
.mcp-sum{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-bottom:11px;padding:10px 12px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px}
.mcp-sum-big{font:600 24px var(--mono);color:var(--acc-2);line-height:1;flex:none}
.mcp-sum-txt{font-size:11.5px;color:var(--tx-2);line-height:1.5;min-width:0}
.mcp-sum-txt .muted{color:var(--tx-3);font-size:10.8px}
.mcp-row.plugin{border-style:dashed}
.mcp-est{color:var(--warn)}
.pane-note.hidden{display:none}
.pane-note.bad{border-color:var(--err);color:var(--err)}
.bar-row.deferred .bar-track i{opacity:.4;background:var(--tx-3)}
.mini-row.muted{color:var(--tx-3);justify-content:center}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.tool-pick{display:flex;align-items:center;gap:6px;font-size:11px;padding:2px 4px;border-radius:5px;cursor:pointer;color:var(--tx-2)}
.tool-pick:hover{background:var(--bg-4)}
.tool-pick.off{opacity:.45;text-decoration:line-through}
.tool-pick input{margin:0;accent-color:var(--acc)}
.tool-pick .tool-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.tool-pick .tool-v{font:10.5px var(--mono);color:var(--tx-3)}
@media (max-width:860px){.tool-grid{grid-template-columns:1fr}}
/* ═══ cutting the context right in the feed ═══ */
.cut-btn{margin-left:auto;background:var(--bg-3);border:1px solid var(--line-2);color:var(--tx-2);border-radius:7px;padding:3px 10px;font:11px var(--sans);cursor:pointer;transition:.15s}
.cut-btn:hover{border-color:var(--acc);color:var(--acc)}
.ctx-cut{display:flex;align-items:center;gap:10px;margin:16px 0;font:10.5px var(--mono);letter-spacing:.6px;text-transform:uppercase;color:var(--acc)}
.ctx-cut::before,.ctx-cut::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
/* The bar of a session shown from the middle carries the door up. It is the same size as the bar's
own letters — the bar is a place mark, not a toolbar — but it is a button, so it is underlined:
nothing else on that line can be pressed. */
.ctx-cut .linkish{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;
color:var(--blue);cursor:pointer;text-decoration:underline dotted;flex:none}
.ctx-cut .linkish:hover{color:var(--tx-1)}
/* ═══════════════════════════════════════════════════════════════════════════
THE MOBILE LAYER: one settings button, attachments, reading mode, reading aloud.
The rule for a screen in the car / in the hand: the answer is visible, not the controls.
═══════════════════════════════════════════════════════════════════════════ */
/* ── the header: one large key percent, the reset time in brackets ── */
.key-chip{display:flex;align-items:baseline;gap:6px;background:none;border:none;cursor:pointer;
padding:2px 6px;border-radius:8px;position:relative;color:var(--tx);transition:.15s}
.key-chip:hover{background:var(--bg-3)}
/* «~42%» in a muted tone — this key's number was measured long ago (on a non-main subscription
the numbers are refreshed only by a turn run on it). A bright figure with no caveat reads as
«this is how much there is now», and that is exactly how the header lied about somebody else's
key. */
#week-val.stale{opacity:.68;font-style:italic}
.key-pct{font:600 19px var(--mono);line-height:1.1}
.key-left{font:12px var(--mono);color:var(--tx-3)}
/* The account mark: the letter of the name of the subscription THIS row is running on. It exists
only while the work is not on the main one, so it is allowed very little room in the header. */
.key-acct{font:700 10px var(--sans);color:var(--acc);border:1px solid var(--acc);border-radius:4px;
padding:0 3px;line-height:1.3;align-self:center;opacity:.85;text-transform:uppercase}
.key-chip .bar{position:absolute;left:6px;right:6px;bottom:1px;margin:0;height:2px}
.cache{font:13px var(--mono);color:var(--tx-2);white-space:nowrap}
/* ── the task clocks: the owner's time on the left, Claude's time on the right ──
Two figures side by side read as a pair only when they are of one height and one font: a
different type size would turn them into «the main one and a footnote», and it is precisely
them that have to be compared. */
/* TWO LINES AND NOT ONE (the owner, 25.08: «put the time spent working on the task in two
lines»). In one line the pair «🧑 25m · 🤖 1h 24m» stretches across a third of the header and
takes width away from the key percent; one under the other the same two figures take the width
of one and read as a pair — their height and font are the same, and the separator between them
is no longer needed. */
.time-chip{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg-3);
border:1px solid var(--line);cursor:default;padding:1px 6px;border-radius:8px;
font:11.5px/1.32 var(--mono);color:var(--tx-2);white-space:nowrap}
.time-part{display:flex;align-items:center;gap:3px}
.time-ico{font-size:11px;opacity:.7}
.time-sep{display:none}
/* A turn is running — it is the agent's seconds that tick, and it is visible that they tick. */
.time-chip.ticking .time-part:last-of-type{color:var(--acc)}
/* ── AND THE OWNER'S HALF SAYS WHETHER IT IS COUNTING RIGHT NOW (the owner, 08.10) ──
A figure standing still is indistinguishable from a broken counter, which is how this errand
started. Resting = nothing has moved for a couple of minutes, or another window is active:
dimmed, no alarm, it comes back by itself at the first movement. Held = the turn is parked
behind a refused key and the clock is deliberately on pause: amber, because that one is worth
noticing. The reason is in the tooltip; `.time-chip` has `cursor:default`, so this is the whole
signal a glance gets. */
.time-chip.resting .time-part:first-of-type{opacity:.45}
.time-chip.held{border-color:var(--warn, #c9a227)}
.time-chip.held .time-part:first-of-type{color:var(--warn, #c9a227);opacity:.8}
@media(max-width:860px){
.time-chip{font-size:11.5px;gap:4px;padding:2px 3px}
.time-ico{font-size:10px}
}
/* ── the composer: 📎/⚙ on the left, the microphone above Send on the right ── */
.composer-row{align-items:stretch}
.composer-side{display:flex;flex-direction:column;gap:6px;flex:none;justify-content:flex-end}
/* ═══ THE FIELD HAS NO LEFT COLUMN IN ANY WINDOW (the owner, 25.08) ═══
«Let us hide these buttons from every window and leave them only in the right-button menu on
send.» 📎 and ⚙ move there for good — they are needed once in ten turns, and they took width
away from the field on every one of them. ↑/↓ through your own prompts is brought back by a
checkbox in the settings: it puts `hist-on` on the document, and only then does the column take
up room again — IN EVERY window. */
.composer-row > .composer-side:first-child{display:none}
html.hist-on .composer-row > .composer-side:first-child{display:flex}
#btn-attach,#btn-gear{display:none!important}
/* A button taken out of sight but not out of the panel: it is pressed not with a finger but with
a menu item and a hotkey, and the state (reading aloud) is painted on it as well. */
.only-menu{display:none!important}
/* ═══ THE SMALL COG UNDER «SEND» ═══
The right-button menu is invisible to the eye: «let us make a small cog at the bottom right, so
that it is clear there is something more there». `order:9` puts it last in the column — below
➤/■ — and not first, the way ⋯ is on the phone. */
.more-btn{order:9;flex:none;width:44px;min-height:24px;height:24px;padding:0;display:flex;
align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;
background:var(--bg-3);color:var(--tx-3);cursor:pointer;transition:.15s}
.more-btn:hover{color:var(--tx);border-color:var(--line-2)}
.more-cog{width:14px;height:14px}
.more-dots{display:none}
/* ── stepping through your own messages: two thin arrows next to the field ──
Not «two more buttons» but a replacement for the keyboard ↑/↓, which a phone does not have.
Thin, with no fill, fading to a third when there is nowhere left to go: a button that will do
nothing is obliged to say so before it is pressed. */
.hist-btn{width:30px;height:26px;border:1px solid var(--line-2);border-radius:8px;
background:var(--bg-3);color:var(--tx-2);display:grid;place-items:center;cursor:pointer;
padding:0;transition:opacity .12s ease,border-color .12s ease,color .12s ease}
.hist-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
.hist-btn:hover:not(:disabled){color:var(--acc);border-color:var(--acc)}
.hist-btn:active:not(:disabled){transform:scale(.92)}
.hist-btn:disabled{opacity:.28;cursor:default}
.side-btn{width:40px;height:40px;flex:none;border-radius:var(--r);border:1px solid var(--line);
background:var(--bg-3);color:var(--tx-2);cursor:pointer;font-size:16px;line-height:1;transition:.15s}
.side-btn:hover,.side-btn.on{border-color:var(--acc);color:var(--acc)}
.input{min-height:66px}
.composer-sum{background:none;border:none;color:var(--tx-3);font:11.5px var(--sans);cursor:pointer;
padding:2px 6px;border-radius:6px;text-align:left}
.composer-sum:hover{color:var(--acc);background:var(--bg-3)}
/* ── the attachments: large tiles above the input field ──
An attachment is checked with the eyes and not by the file's name: the question is always the
same — «is this the right screenshot». So it is not a chip with a 30×30 icon but the snapshot
itself; four in a row, more than that is not thrown in at once anyway. A tap on a tile opens it
whole. */
.attach-strip{display:flex;gap:8px;flex-wrap:wrap;max-width:var(--read-w);margin:0 auto 9px}
.attach-strip:empty{display:none}
.att{position:relative;flex:none;width:132px;height:99px;border-radius:10px;overflow:hidden;
border:1px solid var(--line-2);background:var(--bg-3);cursor:zoom-in}
.att:hover{border-color:var(--acc)}
.att img{width:100%;height:100%;object-fit:cover;display:block}
.att .att-n{position:absolute;left:0;right:0;bottom:0;padding:3px 7px;font:10px var(--mono);
color:var(--tx);background:linear-gradient(transparent,var(--veil) 60%);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att .att-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border:none;border-radius:50%;
background:var(--veil);color:var(--tx);font-size:11px;line-height:1;cursor:pointer;
display:grid;place-items:center;opacity:.6;transition:opacity .15s,background .15s}
.att:hover .att-x{opacity:1}
.att .att-x:hover{background:var(--err);color:var(--on-err);opacity:1}
/* Not a picture — a glyph filling the whole tile: the file type reads as fast as the snapshot itself. */
.att.att-file{display:grid;place-items:center;background:var(--bg-4)}
.att .att-ico{font-size:30px;line-height:1;margin-bottom:14px}
/* ── the attachment whole: the only question is «is it THIS screenshot?» ── */
#lightbox{display:none;z-index:240}
#lightbox.open{display:grid}
/* The measures are taken from the veil's BOX and not from the screen: `.modal-back` is already
divided by --ui-scale while `vw/vh` are not; that is exactly what once made the preview window
run off to the right. */
.lightbox{position:relative;width:min(1100px,100%);height:min(900px,100%);
display:flex;flex-direction:column;gap:9px}
/* ── THE WINDOW HE SIZED HIMSELF (owner, 15.09) ──
The margin left on each side is the setting, in percent of the veil's own box: that is the one
form of it that means the same thing on a 2560px monitor and in a hand. Absolute positioning
here, because `inset` percentages are the only ones that resolve against the BOX on all four
sides — a percentage `margin` resolves against the width even at the top and the bottom, which
would make a window picked at the desk a different shape on the phone. Nothing is applied until
he has actually dragged something: with no saved box the rule above stands, untouched. */
#lightbox.lb-boxed .lightbox{position:absolute;width:auto;height:auto;
top:var(--lb-t,0);right:var(--lb-r,0);bottom:var(--lb-b,0);left:var(--lb-l,0)}
/* No picture — the window is only its bar, and it may not be stretched down the screen. */
#lightbox.lb-boxed.nopic .lightbox{bottom:auto}
/* The cross hangs OUTSIDE the window by 8px, which is off the screen once the top margin is 0. */
#lightbox.lb-boxed .lightbox-x{top:2px;right:2px}
/* Invisible until the hand comes near: this is a viewer, and eight permanent bars around a
screenshot are eight things to look at instead of the picture. `touch-action:none` for the same
reason as `.lb-view` — without it the browser takes the drag and does nothing with it. */
.lb-grip{position:absolute;z-index:1;touch-action:none;display:block}
.lb-grip::after{content:'';position:absolute;inset:0;border-radius:6px;background:var(--acc);
opacity:0;transition:opacity .12s}
.lb-grip:hover::after,#lightbox.lb-sizing .lb-grip::after{opacity:.4}
.lb-grip[data-edge="n"]{top:-5px;left:16px;right:16px;height:12px;cursor:ns-resize}
.lb-grip[data-edge="s"]{bottom:-5px;left:16px;right:16px;height:12px;cursor:ns-resize}
.lb-grip[data-edge="w"]{left:-5px;top:16px;bottom:16px;width:12px;cursor:ew-resize}
.lb-grip[data-edge="e"]{right:-5px;top:16px;bottom:16px;width:12px;cursor:ew-resize}
.lb-grip[data-edge="nw"]{top:-5px;left:-5px;width:20px;height:20px;cursor:nwse-resize}
.lb-grip[data-edge="ne"]{top:-5px;right:-5px;width:20px;height:20px;cursor:nesw-resize}
.lb-grip[data-edge="sw"]{bottom:-5px;left:-5px;width:20px;height:20px;cursor:nesw-resize}
.lb-grip[data-edge="se"]{bottom:-5px;right:-5px;width:20px;height:20px;cursor:nwse-resize}
/* One corner says out loud that the window can be taken by its edges — on a phone there is no
hover to discover it with. */
.lb-grip[data-edge="se"]::before{content:'';position:absolute;right:4px;bottom:4px;width:9px;height:9px;
border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);opacity:.55;border-radius:0 0 3px 0}
/* While the size is being dragged the picture underneath is not a target: the same argument as
`.hv-win.sizing .hv-frame` — a player's seek bar would otherwise eat a gesture aimed at the edge. */
#lightbox.lb-sizing .lb-view{pointer-events:none}
#lightbox.lb-sizing{cursor:inherit;user-select:none}
/* THE PICTURE'S WINDOW CLIPS, THE PICTURE INSIDE PANS AND GROWS (web/zoom.js).
`touch-action:none` is mandatory: without it the pinch goes to the browser, and on this page
the browser cannot zoom at all (user-scalable=no) — that is, the gesture is lost outright. */
.lb-view{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;
overscroll-behavior:contain;border-radius:12px;border:1px solid var(--line-2);
background:var(--bg-2);box-shadow:0 30px 80px var(--shadow);cursor:zoom-in}
.lb-view.zoomed{cursor:grab}
.lb-view.zoomed.dragging{cursor:grabbing}
.lightbox img{position:absolute;top:0;left:0;transform-origin:0 0;max-width:none;max-height:none;
will-change:transform;user-select:none;-webkit-user-drag:none}
#lightbox.nopic .lb-view{display:none}
/* A VIDEO IS FITTED, NOT PANNED. `.lightbox img` above is absolutely positioned because the zoom
engine drives it by `transform`; a player must do the opposite — sit still, keep its control bar
reachable and never leave the window under a drag. Hence its own rules rather than a shared
selector, and `touch-action:auto`, or the seek bar could not be dragged with a thumb: `.lb-view`
kills touch actions on purpose, for the pinch. */
.lb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
touch-action:auto}
.lb-vid.hidden{display:none}
/* Zoom, «Copy» and «↗ Tab» are all questions about a picture. They are HIDDEN rather than
disabled here because they are not «unavailable for this file» — they are not this file's
questions at all, and a row of dead buttons only asks to be pressed. The arrows stay: the row
they walk holds recordings too. */
#lightbox.lb-video .lb-z,#lightbox.lb-video #lb-copy{display:none}
#lightbox.lb-video .lb-view{cursor:default}
/* The zoom figure is not a caption but a reading: monospaced digits, so that 100% and 940% do not
twitch the neighbouring buttons. */
.lb-z{min-width:40px;padding:5px 8px;font-variant-numeric:tabular-nums;text-align:center}
.lightbox-note{font:11px var(--mono);color:var(--tx-3);text-align:center;word-break:break-all}
/* Five buttons in a row is already too much width on a phone: let them wrap rather than squeeze
each other over the edge. */
.lightbox-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* No picture (a path with no snapshot) — the window may not fill the whole screen with emptiness. */
#lightbox.nopic .lightbox{height:auto}
.lb-act{width:auto;height:auto;padding:5px 12px;font:12px var(--sans);color:var(--tx-2);
background:var(--bg-3);border:1px solid var(--line-2);border-radius:9px}
.lb-act:hover{color:var(--tx);border-color:var(--acc)}
/* «⬇ Save» IS AN , NOT A — the browser's own save needs no script, and on a
phone it is what raises the proper «save / share» sheet. An anchor arrives underlined and with
the text cursor, so it is told to look like its neighbours in the row; `display:none` is what
`.hidden` means for it, since the button's rule cannot reach a link. */
a.lb-act{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
a.lb-act.hidden{display:none}
#lightbox.nopic .lightbox-bar{display:none}
/* ── moving between the task's pictures ──
The pair of arrows is soldered around the counter (as in the search): three separate buttons
would read as three unrelated actions, and this is one — «I am flipping through». The counter
is not decoration, it is the only thing that answers «and how many are there in all» and «how
far is it to the edge». */
.lb-nav{display:inline-flex;align-items:center;gap:0}
.lb-nav.hidden{display:none}
/* The arrow's ink is full (`--tx`) and not muted: a grey glyph on a grey tile has already been
judged «not a control» in the search bar, and there is no reason to pay for that lesson twice. */
.lb-arrow{min-width:34px;padding:5px 9px;font-size:16px;line-height:1;text-align:center;
color:var(--tx);font-weight:600}
#lb-prev{border-radius:9px 0 0 9px;border-right:none}
#lb-next{border-radius:0 9px 9px 0;border-left:none}
.lb-count{min-width:64px;padding:5px 6px;font:11.5px var(--sans);color:var(--tx-2);
text-align:center;background:var(--bg-3);border:1px solid var(--line-2);
font-variant-numeric:tabular-nums}
.lb-act:disabled{opacity:.45;cursor:default}
.lb-act:disabled:hover{color:var(--tx-2);border-color:var(--line-2)}
/* ON A PHONE YOU ZOOM WITH YOUR FINGERS. «−/percent/+» duplicate the pinch and the double tap —
that is, gestures that work here anyway — and the price for them was a second row of buttons
and a run past the right edge. Their place is a mouse one; on a narrow screen only those two
remain that cannot be done with a finger, and they stand in one row. */
@media(max-width:860px){
.lb-z{display:none}
.lightbox-bar{flex-wrap:nowrap;gap:6px}
.lb-act{padding:5px 10px;font-size:11.5px}
/* The arrows are NOT `.lb-z`: a finger is exactly what does them. A swipe over the picture
can do the same, but a gesture is invisible while a button is visible; we shrink, we do not hide. */
.lb-arrow{min-width:30px;padding:5px 7px;font-size:15px}
.lb-count{min-width:52px;padding:5px 3px;font-size:10.5px}
}
/* ── a picture right in the reply ──
The path to a snapshot is not a string of characters but the snapshot itself; the chip above it
stays a door. */
.imgcard{position:relative;display:inline-block;line-height:0;margin:8px 0 2px;
max-width:min(560px,100%);cursor:zoom-in;border:1px solid var(--line);border-radius:12px;
overflow:hidden;background:var(--bg-2);transition:opacity .22s ease,transform .22s ease}
/* IT COMES OUT ONCE AND WITHOUT TOUCHING THE LAYOUT: the class is removed on load (picCard) and
never comes back, and only the opacity and the transform move — the card's height is its own
the whole time, so the text under it does not creep. */
.imgcard.hatch{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
.imgcard{transition:none}
.imgcard.hatch{opacity:1;transform:none}
}
.imgcard:hover{border-color:var(--acc)}
/* `height:auto` — so that width/height known in advance set the BOX by the aspect ratio rather
than stretching the snapshot: without it a picture with the attributes 1920×1080 would stand
1080 tall and hit max-height. */
.imgcard-pic{display:block;max-width:100%;height:auto;max-height:340px;object-fit:contain}
/* A PICTURE THAT NEVER ARRIVED SAYS SO. Without this the card is an empty rectangle — «бросаю
скриншот, а он пустой» — and there is nothing to press, because nothing failed. */
.imgcard-deaf{min-width:220px;min-height:64px;line-height:1.4;padding:14px 16px;
border-style:dashed;cursor:pointer;color:var(--tx-2);font:13px var(--sans)}
.imgcard-deaf .imgcard-pic{min-height:32px}
.imgcard-bar{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.imgcard:hover .imgcard-bar,.imgcard-bar:focus-within{opacity:1}
.imgcard-btn{width:26px;height:26px;padding:0;font-size:13px;line-height:1;cursor:pointer;
color:var(--tx-2);background:var(--bg-4);border:1px solid var(--line-2);border-radius:7px}
.imgcard-btn:hover{color:var(--tx);border-color:var(--acc)}
/* On a phone there is no «hover» — the buttons are visible straight away. */
@media (hover:none){.imgcard-bar{opacity:1}}
/* ── a REPORT right in the reply (17.09) ──
«When you give me a link to an HTML, give it the way you give a picture — a little preview I
press.» The page itself is drawn small in the same sandboxed frame the preview window uses; the
frame is laid out at a DESKTOP width and scaled down, so the thumbnail is the document he is
about to open and not a phone-width re-flow of it. */
.repcard{position:relative;display:block;width:min(520px,100%);margin:8px 0 2px;cursor:pointer;
border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);
transition:opacity .22s ease,transform .22s ease,border-color .12s}
.repcard.hatch{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
.repcard{transition:none}
.repcard.hatch{opacity:1;transform:none}
}
.repcard:hover{border-color:var(--acc)}
.rc-shot{position:relative;height:196px;overflow:hidden;background:Canvas;color-scheme:light dark}
/* THE FRAME IS INERT. It is a foreign origin: left clickable it would swallow the press meant for
the card, and there is nothing inside a thumbnail worth pressing anyway. */
.rc-frame{position:absolute;left:0;top:0;width:1100px;height:1450px;border:0;
transform:scale(.4);transform-origin:0 0;pointer-events:none}
/* The page fades into the card's own floor instead of being cut off mid-sentence. */
.rc-veil{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--bg-2))}
.rc-bar{position:relative;display:flex;align-items:baseline;gap:8px;padding:6px 10px;
border-top:1px solid var(--line);font:12.5px/1.35 var(--sans)}
.rc-name{color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-when{margin-left:auto;color:var(--tx-3);font-style:normal;white-space:nowrap;font-family:var(--mono);font-size:11px}
@media(max-width:700px){.rc-shot{height:158px}.rc-frame{transform:scale(.32)}}
/* ── THE REPORT STANDS IN FOR THE ANSWER (17.09) ──
«Instead of this text report — only this HTML report, right inside our feed.» So the card of a
finished answer is not a thumbnail: full width, its own height (the frame says it by
postMessage — a foreign origin cannot be measured from outside), its own links live under the
finger, and the head keeps ⛶ for the full window. */
/* ⚠ AND THE CARD HAS TO BE A FLEX COLUMN FOR ANY OF THAT ORDER TO MEAN ANYTHING. `.repcard` is
`display:block`, where `order` is a declaration the engine ignores in silence — the head used to
carry `order:2` and sat under the page purely because it is last in the markup, so the first
attempt to lift it to the top changed exactly nothing and the gate said so. */
.repcard.rc-open{width:100%;cursor:zoom-in;background:var(--bg-2);border-color:var(--line-2);
display:flex;flex-direction:column}
.repcard.rc-open .rc-shot{order:1}
/* ── THE WINDOW IS SMALL UNTIL HE SAYS OTHERWISE, AND IT NEVER SCROLLS INSIDE ITSELF (17.09) ──
«Всё равно прокрутка полосы внутри окна есть… пусть окно будет свёрнуто, а кнопочка разворачивает
его полностью.» The CLIP lives here, on the shot; the frame keeps the full height of its own
document (`studioFrameH`), so there is never a second scrollbar and the feed's search still
reaches every word below the fold. */
.repcard.rc-open .rc-shot{height:auto;max-height:var(--rc-peek,460px);background:Canvas;color-scheme:light dark}
.repcard.rc-open.rc-tall .rc-shot{max-height:none}
.repcard.rc-open .rc-frame{position:relative;width:100%;height:520px;transform:none;pointer-events:auto;display:block}
/* A clipped page says so: the last visible line fades into the card's own floor instead of being
cut mid-sentence. It is a strip at the BOTTOM and eats no press — the report's own links live
under it. */
.repcard.rc-open .rc-veil{top:auto;bottom:0;height:88px;pointer-events:none;
background:linear-gradient(to bottom,transparent,var(--bg-2))}
.repcard.rc-open.rc-tall .rc-veil{display:none}
/* ⛔ THE TWO CONTROLS THAT ARE **NOT** «OPEN THE WINDOW» HAVE TO BE FINDABLE BY A THUMB (17.09).
The whole card is now the door into the full preview, so these are the exceptions to it — and a
12px glyph with 6px of padding is an exception nobody can hit on a phone («сделай её чуть
покрупнее, чтобы она была»). 36x30 is the smallest that is still comfortably pressed, and the
expander wears the accent because it is the one control the rest of the card does not do. */
.rc-btn{display:none;flex:0 0 auto;margin-left:6px;min-width:36px;height:30px;padding:0 9px;
font-size:16px;line-height:28px;text-align:center;cursor:pointer;
color:var(--tx-2);background:var(--bg-4);border:1px solid var(--line-2);border-radius:8px}
.repcard.rc-open .rc-btn{display:inline-block}
.rc-btn:hover{color:var(--tx);border-color:var(--acc);background:var(--bg-3)}
.rc-grow{color:var(--acc)}
.rc-grow[aria-expanded="true"]{background:color-mix(in srgb,var(--acc) 16%,var(--bg-4));border-color:var(--acc)}
/* The head stands ABOVE the page in an open card: under a document drawn at its own height it is
a screen and a half away from the eye, and a control you have to scroll to find is a control
nobody presses. */
.repcard.rc-open .rc-bar{order:0;align-items:center;border-top:0;border-bottom:1px solid var(--line)}
.repcard.rc-open .rc-when{margin-left:auto}
/* The card the search jumped into names itself for a moment, exactly like a message does. */
.repcard.find-jump{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}
@media(max-width:700px){.repcard.rc-open .rc-shot{max-height:var(--rc-peek,320px)}}
/* What the fold hides, and the one press that brings it back. `display:none` only while the
block is closed, so the toggle needs no second rule and nothing is ever deleted. */
.md.rep-answer:not(.rep-open) > .rep-hide{display:none}
.rep-more{display:block;margin:0 0 6px;padding:2px 9px;font:500 12px/1.7 var(--sans);cursor:pointer;
color:var(--tx-3);background:transparent;border:1px dashed var(--line-2);border-radius:999px}
.rep-more:hover{color:var(--acc);border-color:var(--acc)}
.md.rep-open .rep-more{color:var(--acc);border-style:solid}
/* An ending a Stop hook sent back (supersedeEndings in web/app.js): one muted line, the rest one press away. */
.md.redo:not(.redo-open) > :not(.redo-pill){display:none}
.redo-pill{display:block;margin:0 0 6px;padding:2px 9px;font:500 12px/1.6 var(--sans);cursor:pointer;text-align:left;
color:var(--mut);background:transparent;border:1px dashed var(--line);border-radius:10px}
.redo-pill:hover{color:var(--acc);border-color:var(--acc)}
.md.redo-open .redo-pill{color:var(--acc);border-style:solid}
/* ══════════════ A VIDEO IN THE FEED (08.09) ══════════════
The same box as a picture — same width ceiling, same appearance, same size memory — because
they answer the same question and standing in one column they must not disagree about it.
`cursor:default`: the card is not «zoom in», the player under the finger is the point. */
.vidcard{position:relative;display:inline-block;line-height:0;margin:8px 0 2px;
max-width:min(560px,100%);border:1px solid var(--line);border-radius:12px;
overflow:hidden;background:var(--bg-2);transition:opacity .22s ease,transform .22s ease}
.vidcard.hatch{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
.vidcard{transition:none}
.vidcard.hatch{opacity:1;transform:none}
}
.vidcard:hover{border-color:var(--acc)}
/* `height:auto` for the same reason as the picture: the attributes describe the BOX by aspect
ratio, so the feed does not jump when the metadata finally lands. */
.vidcard-vid{display:block;max-width:100%;height:auto;max-height:340px;background:#000}
/* THE VEIL IS THE SENTENCE «THIS HAS SOUND», AND IT IS ALSO THE BUTTON THAT TURNS IT ON.
It stops 44px short of the bottom so the player's own control bar is never covered: the native
buttons are the ones a thumb already knows, and taking them away to add one of ours would be a
worse panel. It goes away with the sound — a badge that stays after it has been obeyed is
noise, and worse, it reads as «still muted». */
.vidcard-veil{position:absolute;left:0;right:0;top:0;bottom:44px;display:flex;gap:7px;
align-items:center;justify-content:center;cursor:pointer;border:0;background:transparent;
color:var(--tx);font:600 12.5px var(--sans);transition:opacity .15s}
.vidcard-veil::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
width:170px;height:42px;border-radius:21px;background:var(--bg-2);opacity:.82;
border:1px solid var(--line-2)}
.vidcard-veil-ico,.vidcard-veil-txt{position:relative}
.vidcard-veil-ico{font-size:15px;line-height:1}
.vidcard-veil:hover::before{border-color:var(--acc);opacity:.92}
.vidcard.loud .vidcard-veil{display:none}
.vidcard-bar{position:absolute;top:6px;right:6px;display:flex;gap:4px;align-items:center;
opacity:0;transition:opacity .12s}
.vidcard:hover .vidcard-bar,.vidcard-bar:focus-within{opacity:1}
/* The length is a fact you want BEFORE pressing: «is this six seconds or six minutes». Tabular
digits so 0:07 and 12:40 do not twitch the button beside them. */
.vidcard-time{padding:0 7px;height:26px;display:inline-flex;align-items:center;
font:11.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--tx-2);
background:var(--bg-4);border:1px solid var(--line-2);border-radius:7px}
.vidcard-time:empty{display:none}
.vidcard-btn{width:26px;height:26px;padding:0;font-size:13px;line-height:1;cursor:pointer;
color:var(--tx-2);background:var(--bg-4);border:1px solid var(--line-2);border-radius:7px}
.vidcard-btn:hover{color:var(--tx);border-color:var(--acc)}
@media (hover:none){.vidcard-bar{opacity:1}}
/* A VIDEO TILE IS A FRAME PLUS A ▶. A still frame with nothing on it reads as a photograph, and
then the tile lies about what was sent. Same geometry as `.att-img`, so a screenshot and a
recording stand level in one strip. */
.att-vid{width:100%;height:98px;object-fit:cover;display:block;background:#000}
.att .att-vid{height:100%}
/* `.att` already stands `relative` (the ✕ hangs on it); the feed's tile did not need to until
now — the ▶ is the first thing inside it that is positioned. */
.att-cell{position:relative}
.att-play{position:absolute;left:50%;top:49px;translate:-50% -50%;pointer-events:none;
width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
font-size:13px;color:var(--tx);background:var(--bg-2);opacity:.85;border:1px solid var(--line-2)}
.att .att-play{top:50%}
.lightbox-x{position:absolute;top:-8px;right:-8px;z-index:2;background:var(--bg-4);
border:1px solid var(--line-2);border-radius:50%}
/* ── dragging a file into the window ── */
.drop-veil{position:fixed;inset:0;z-index:260;background:var(--veil);display:grid;place-items:center;
pointer-events:none}
.drop-msg{border:2px dashed var(--acc);border-radius:16px;padding:26px 34px;color:var(--acc);
font:600 15px var(--sans);background:var(--bg-2)}
/* ── the sheets from below: settings and attachments ── */
.sheet-back{position:fixed;inset:0;background:var(--veil);z-index:120;display:flex;align-items:flex-end;
justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
.sheet-back.open{opacity:1;pointer-events:auto}
.sheet{width:min(560px,100%);max-height:86vh;background:var(--bg-2);border:1px solid var(--line-2);
border-radius:16px 16px 0 0;display:flex;flex-direction:column;transform:translateY(12px);
transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 60px var(--shadow)}
.sheet-back.open .sheet{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.sheet-title{font:600 14px var(--sans)}
/* The turn's settings and the panel's settings are not mixed into one list. */
.sheet-tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--line);flex:none}
.sheet-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--tx-3);
font:600 12.5px var(--sans);padding:9px 6px;cursor:pointer;border-radius:8px 8px 0 0;transition:.15s}
.sheet-tab:hover{color:var(--tx-2);background:var(--bg-3)}
.sheet-tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.sheet-pane{display:none;flex-direction:column;gap:11px}
.sheet-pane.active{display:flex}
.theme-auto.off{opacity:.6}
/* `overflow-y:auto` makes the other axis `auto` BY ITSELF (by the specification visible+auto
cannot happen): any child that did not fit by width immediately added a horizontal scroll and
ran off the screen. The sheet does not scroll sideways — it narrows its content. */
.sheet-body{padding:14px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:11px}
/* ⛔ A ROW WRAPS RATHER THAN CLIPS, AND IT MAY NOT BE SCOPED TO A MEDIA QUERY (09.09).
The room this drawer draws in is the screen divided by --ui-scale, so at the 200% the owner
asked for it is ~262px on his phone rather than 374. `#model-default-pick` carries
min-width:190px and white-space:nowrap, i.e. it cannot yield: with the label beside it the row
needed ~302px, and because .sheet-body already refuses to pan sideways (the belt below) the
surplus was not scrolled — it was CUT, so «opus[1m] · high ▾» lost its tail and the row stopped
answering the one question it exists for.
⛔ MEASURED 09.09: a media query CANNOT see this. matchMedia('(max-width:400px)') is false at
--ui-scale 2 on a 524px screen — queries are answered from the screen width and are blind to
the zoom, so `@media(max-width:300px)` would never fire however small the room really got.
The cure therefore has to hold at every scale: the row wraps. While the contents fit, wrapping
changes nothing at all; when they do not, the control drops to a second line whole instead of
losing its right-hand end. */
.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sheet-row label{font-size:13px;color:var(--tx-2);flex:none}
.sheet-row .chip-select{width:auto;min-width:190px;font-size:13px;padding:7px 10px}
/* The model-picking button in the sheet is of exactly the height and weight of the list beside
it, otherwise the «Model» row stands higher than the «Permissions» row and reads as a different
class of setting. */
.sheet-row .pick-btn{margin-left:auto;min-width:190px;max-width:60%;text-align:left;
background:var(--bg-3);color:var(--tx);border:1px solid var(--line);border-radius:8px;
font:13px var(--sans);padding:7px 10px;cursor:pointer;outline:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-row .pick-btn:hover{border-color:var(--acc)}
/* The value's home stays a `` — simply an invisible one: all the memory hangs on it. */
.hidden-input{display:none !important}
/* The advanced mode: the effort level and the thinking are shown only when they have been asked
for. By default the model decides, and that is the right answer to almost every turn. */
.adv-only{display:none}
body.adv .adv-only{display:flex}
/* The only text field in the sheet is the send key phrase. It looks like the select beside it, so
that the settings row does not fall apart. */
.chip-input{width:auto;min-width:190px;font:13px var(--sans);padding:7px 10px;border-radius:7px;
background:var(--bg-3);border:1px solid var(--line);color:var(--tx);outline:none}
.chip-input:focus{border-color:var(--acc)}
.sheet-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tx-2);cursor:pointer;
padding:7px 2px;user-select:none}
.sheet-toggle input{width:17px;height:17px;accent-color:var(--acc)}
/* A SETTING THAT CONTROLS NOTHING ON THIS SCREEN IS A LIE. The spoken announcement happens only
on a phone, so at the desk the switch is simply not there: a checkbox that changes nothing reads
as a broken one. It has its own key per screen class anyway. */
.only-phone{display:none}
@media (max-width:860px){.sheet-toggle.only-phone{display:flex}}
.sheet-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.sheet-acts .act-btn{padding:9px 13px;font-size:13px}
.sheet-label{font:600 10.5px var(--sans);letter-spacing:.9px;text-transform:uppercase;color:var(--tx-3);margin-top:4px}
.sheet-note{font-size:11.5px;line-height:1.55;color:var(--tx-3)}
.sheet-note b{color:var(--tx-2)}
/* ── WHERE WE TAKE AN ATTACHMENT FROM ──
The button row (`.sheet-acts`) on a phone turned into a fine mush of three pills, in which
«gallery / file» promised nothing: you tapped it and the file manager opened. Here a source is
a large full-width row with a caption saying WHAT will open behind it, and a finger hits it
without looking. */
/* THE COLUMN IS SET TO `minmax(0,1fr)` AND NOT LEFT AS `auto`. An auto track's minimum equals the
content's min-content, and inside the button lies a caption with `nowrap`: the line «Downloads
and everything else on the phone» stretched the button WIDER than the sheet. `.sheet-body` has
`overflow-y:auto`, that is, auto horizontally too — and the buttons ran off the right edge of
the screen together with a horizontal scroll (the owner's screenshot, 22.08). */
.att-src{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:2px}
.src-btn{display:flex;align-items:center;gap:11px;width:100%;min-width:0;text-align:left;
background:var(--bg-4);border:1px solid var(--line-2);color:var(--tx);border-radius:11px;
padding:11px 13px;font:500 14px var(--sans);cursor:pointer}
.src-btn:hover,.src-btn:active{border-color:var(--acc);color:var(--acc)}
.src-ico{font-size:21px;line-height:1;flex:0 0 auto}
.src-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.src-txt i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--tx-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The computer's disk is needed rarely from a phone — it lives as a fold and IS NOT READ FROM THE
DISK until the fold has been opened: the list of another machine's screenshots must not be the
first thing a person reaching for his own gallery sees. */
.pc-toggle{display:flex;align-items:center;gap:8px;width:100%;margin-top:11px;
background:none;border:1px solid var(--line);color:var(--tx-2);border-radius:9px;
padding:9px 12px;font:500 12.5px var(--sans);cursor:pointer}
.pc-toggle:hover{border-color:var(--acc);color:var(--acc)}
.pc-caret{margin-left:auto;transition:transform .16s}
.pc-toggle[aria-expanded="true"] .pc-caret{transform:rotate(180deg)}
.pc-wrap{display:none;margin-top:9px}
.pc-wrap.open{display:block}
.pc-wrap .sheet-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
/* ── the grid of the machine's recent screenshots ── */
.shots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.shot{position:relative;padding:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;
background:var(--bg-3);cursor:pointer;aspect-ratio:4/3}
.shot:hover{border-color:var(--acc)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot .shot-n{position:absolute;left:0;right:0;bottom:0;background:var(--veil);color:var(--tx-2);
font:10px var(--mono);padding:2px 5px;text-align:left}
/* ── the statistics behind a tap on the key percent ── */
#stats{display:none}
#stats.open{display:grid}
/* ONE AND A HALF TIMES WIDER (28.08): «make it wider, about one and a half times, so that more
information fits». 520 → 780 — on a phone nothing changes (it is 94vw there anyway), while at
the desk four tiles stand in a row instead of two and the captions stop wrapping. */
.stats-modal{width:min(780px,calc(94vw / var(--ui-scale,1)))}
/* ═══════════ THE «DAY BY DAY» SHEET (a click on the clock in the header) ═══════════
Wider than the spend page: here it is not a column of figures that is read but the SHAPE —
where the spike is, where it is flat. On a narrow chart a hundred and fifty days turn into a
picket fence from which nothing can be seen. */
#tl{display:none}
#tl.open{display:grid}
.tl-modal{width:min(1020px,calc(96vw / var(--ui-scale,1)))}
/* THE FOUR SCOPES STAND SIDE BY SIDE AND NOT IN A DROP-DOWN LIST. They are compared by eye («the
task — 4 hours, the project — 40, the whole workshop — 300»), and a list that shows one row at
a time takes away precisely that comparison. */
.tl-scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:7px;margin-bottom:9px}
.tl-scope{text-align:left;padding:8px 10px;border-radius:11px;border:1px solid var(--line);
background:var(--bg-3);color:var(--tx-2);cursor:pointer;transition:border-color .13s,background .13s}
.tl-scope:hover{border-color:var(--acc)}
.tl-scope.on{border-color:var(--acc);background:var(--bg-4);color:var(--tx)}
.tl-scope-k{font:10px var(--mono);letter-spacing:.5px;text-transform:uppercase;color:var(--tx-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A first-level project is its own parent project: the button stays (the level exists) but is
dimmed — so that identical figures side by side read as «the same thing» and not as a counting
failure. */
.tl-scope.tl-twin{opacity:.62}
.tl-scope.tl-twin.on{opacity:1}
.tl-scope-n{font:600 12.5px var(--sans);margin:1px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-scope-v{display:flex;flex-wrap:wrap;gap:7px;font:11px var(--mono)}
.tl-me{color:var(--acc)} .tl-ai{color:var(--ok)} .tl-key{color:var(--warn)}
.tl-periods{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tl-per{padding:3px 11px;border-radius:999px;border:1px solid var(--line);background:transparent;
color:var(--tx-2);font:11.5px var(--sans);cursor:pointer}
.tl-per:hover{border-color:var(--acc)}
.tl-per.on{background:var(--bg-4);border-color:var(--acc);color:var(--tx)}
.tl-chart{margin-bottom:12px}
/* The total is under the chart and over THE SAME window: a sum that does not match the picture
above it is worse than a missing sum. */
.tl-tot{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.tl-tile{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:7px 9px}
.tl-tile-v{font:600 14px var(--mono)}
.tl-tile-k{font:10px var(--sans);color:var(--tx-3);margin-top:1px}
.tl-tile.me .tl-tile-v{color:var(--acc)}
.tl-tile.ai .tl-tile-v{color:var(--ok)}
.tl-tile.key .tl-tile-v{color:var(--warn)}
.tl-note{margin-top:10px;font:11px/1.55 var(--sans);color:var(--tx-3)}
@media (max-width:860px){
.tl-scopes{grid-template-columns:1fr 1fr}
.tl-tot{grid-template-columns:1fr 1fr 1fr}
}
/* ── 🔑 the key by hours (a section of the spend page, web/keyhours.js) ──────────────
The same language as the «time day by day» sheet: the `.tl-per` switches, the `.tl-tile` tiles,
the `.tl-note` footnote — the section is obliged to read as part of one system and not as a
second page about the same thing. The only thing of its own here is the card of the chosen hour. */
.kh-host{margin-bottom:14px}
.kh-chart{margin-bottom:10px}
/* THE HEADING OF THE SECOND AND THE THIRD CHART. Three pictures in a row with not a single word
between them read as one that has gone wrong: each has its own question, and the question is
written above it. */
.kh-h2{margin:16px 0 4px;font:600 12.5px var(--sans);color:var(--tx-2);
display:flex;gap:7px;align-items:baseline}
.kh-h2n{margin:0 0 7px;font:11px/1.55 var(--sans);color:var(--tx-3);max-width:78ch}
/* The breakdown of the third chart — by project or by task. It stands IN THE HEADING and not on a
line of its own: it is a refinement of the question «who ate it» and not a second question. */
.kh-switch{display:inline-flex;gap:4px;margin-left:auto}
.kh-sw{border:1px solid var(--line);background:transparent;color:var(--tx-3);
border-radius:999px;padding:1px 9px;font:11px var(--sans);cursor:pointer}
.kh-sw:hover{border-color:var(--acc)}
.kh-sw.on{color:var(--tx);border-color:var(--acc);background:rgba(217,119,87,.14)}
.kh-span{font:11px var(--mono);color:var(--tx-3);margin:2px 0 6px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.kh-zoom{color:var(--acc);font:11px var(--sans)}
/* The legend of the series: a dot of the same colour, the series' name, and what it is at all. As
a solid footnote it does not read — there is nothing to match the colour against. */
.kh-keys{margin:2px 0 8px;display:flex;flex-direction:column;gap:3px}
.kh-key{display:flex;gap:7px;align-items:baseline;font:11px/1.5 var(--sans);color:var(--tx-3)}
.kh-key b{color:var(--tx-2);font:600 11px var(--mono);flex:0 0 auto}
.kh-kdot{flex:0 0 auto;width:9px;height:9px;border-radius:3px;margin-top:2px}
.kh-kdot.line{height:3px;width:13px;border-radius:2px;margin-top:5px}
.tl-tile.gauge .tl-tile-v{color:var(--think)}
.kh-hint{font:11px var(--sans);color:var(--tx-3);text-align:center;padding:8px 0 2px;opacity:.85}
.kh-detail{margin-top:11px;border:1px solid var(--line);border-radius:12px;
background:var(--bg-3);padding:10px 12px}
.kh-dhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kh-dwhen{font:600 13px var(--sans);flex:1 1 auto;min-width:120px}
.kh-dpct{font:600 15px var(--mono);color:var(--warn)}
.kh-daud{font:12px var(--mono);color:var(--tx-3)}
.kh-dfacts{margin-top:5px;font:11.5px/1.6 var(--mono);color:var(--tx-2)}
.kh-dgauge{margin-top:4px;font:11px/1.6 var(--sans);color:var(--tx-3)}
.kh-dgauge b{color:var(--think);font-weight:600}
.kh-rows{margin-top:10px;display:flex;flex-direction:column;gap:9px}
.kh-row{border-top:1px solid var(--line);padding-top:8px}
.kh-rhead{display:flex;align-items:baseline;gap:8px}
/* The task's name is cut with an ellipsis rather than wrapped: there are up to twelve rows here,
and two lines for each turn the card into a bedsheet that can no longer be compared by eye. */
.kh-rname{flex:1 1 auto;min-width:0;font:12.5px var(--sans);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.kh-rpct{font:600 12px var(--mono);color:var(--warn);flex:0 0 auto}
.kh-more{margin-top:9px;font:11px var(--sans);color:var(--tx-3)}
@media (max-width:860px){ .kh-dfacts{font-size:11px} }
.stat-hero{text-align:center;padding:6px 0 14px}
.stat-hero .big{font:600 54px var(--mono);color:var(--acc-2);line-height:1}
.stat-hero .sub{font-size:12.5px;color:var(--tx-3);margin-top:6px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat-tile{background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.stat-tile .k{font:600 10px var(--sans);letter-spacing:.9px;text-transform:uppercase;color:var(--tx-3)}
.stat-tile .v{font:600 17px var(--mono);color:var(--tx);margin-top:3px}
.stat-tile .n{font-size:11px;color:var(--tx-3);margin-top:2px}
/* ── reading aloud ── */
.speak-btn{background:none;border:1px solid var(--line-2);color:var(--tx-3);border-radius:7px;
padding:3px 9px;font:11px var(--sans);cursor:pointer;transition:.15s}
.speak-btn:hover,.speak-btn.on{border-color:var(--acc);color:var(--acc)}
.speak-btn.on{background:var(--warn-bg)}
/* ── reading mode: the screen is given over to the text ── */
/* The composer's height is measured live (mobile.js) and arrives here: the floating buttons are
obliged to stand ABOVE the input field and not on top of «Send». In reading mode the composer
is collapsed, the variable becomes zero — and the buttons drop down by themselves. */
/* READING ALOUD DOES NOT BELONG TO READING MODE, AND IT DOES NOT BELONG TO THE PHONE EITHER.
🔊 lived INSIDE .read-fab, and that one only showed when the header and the composer went
away. As soon as that creeping-away was switched off by default (at the owner's request),
there was physically nothing left to speak a reply with on the phone: «the mobile version
does not work, read the last reply aloud».
⛔ THE SECOND HALF OF THE SAME DEFECT LIVED ON FOR ANOTHER FORTNIGHT: the rule that turned the
buttons on stood INSIDE `@media(max-width:860px)`, so on a wide screen the disc was drawn,
sized, animated — and invisible, at `opacity:0`. The desktop's only door to the voice was the
text button «🔊 read aloud» at the foot of a finished answer, i.e. nothing at all while the
turn is still running, and nothing on an answer that has scrolled away. «Make this button
available for desktop mode too — not only for mobile» (the owner, 07.09). The visible state is
the BASE state now, on every width; the fade-out below is only what hides it while the rail
curtain is open. */
/* ⚠ `--win-r` / `--win-b` / `--win-l` ARE THE EDGES OF WINDOW 1'S OWN COLUMN, and they are how
every floating thing here stops being a thing of the SCREEN and becomes a thing of the WINDOW
(web/workspace.js → anchor(), 11.09). `position:fixed` is measured against the viewport, and a
column window is an