/* oba.css - the look of every Oba window.
*
* ONE PALETTE, EIGHT COLOURS, AND NO NINTH. The block below is the founder's
* design system of 2026-09-05, written out whole: slate is the ground, chalk
* and steel are the only two inks, surface-1 and surface-2 are the only two
* raises, border is every hairline, and ochre is the accent. Nothing here may
* add a colour to that list, in a declaration or in a comment, because a proof
* reads this file's RAW text and counts the hexes it finds.
*
* The page is dark, and dark from its first painted frame, because the palette
* is written on bare :root rather than inside a block a host has to switch on:
* every one of these applications ships dark and a white ground inside a docked
* palette is jarring. The host still stamps data-theme on and the
* "theme" message still lands; there is no light block for either of them to
* reach, and there will not be one until the system names the colours a light
* ground is built from. --oba-ochre-deep is declared and unused for exactly
* that reason: it is the token that answer arrives through.
*
* OCHRE MEANS ONE THING: the agent did this, or it needs you. It is spent in
* exactly two selectors, the option a pending question is standing on and the
* Stop control while a turn runs, plus the mark's own pulse. Never a hover,
* never a focus ring, never a link, and never Send, which is a person acting
* and not the agent. Elevation is a surface and a hairline and nothing else.
*
* Every size here has to hold from a 260 px palette (AutoCAD's minimum is 300,
* and people drag it narrower than they should) out to about 600 px. That rules
* out fixed widths anywhere and is why the prompt chips wrap their own text
* instead of staying on one line. One spacing scale, 4, 8, 12 and 16 px with
* 1 px hairlines; one radius set, var(--oba-r) for boxes, 999px for pills and
* 50% for circles, or none, where the cost row turns the bubble's box back
* off; three type sizes, 13, 12.5 and 11.5 px; one weight above 400, on the
* wordmark and the loud zone.
*
* No @font-face, and the one url() in this sheet points at a file beside it
* (the status mark's mask): nothing here is ever fetched from a network, which
* is the rule - see the note in index.html. The wordmark is asked for in a
* geometric grotesque and set in the system sans, because fetching a face is
* the one thing this page may never do.
*
* ONE GRADIENT, and it is the founder's own (2026-09-12 evening): the chalk
* band that sweeps across the status line while Oba works. The system says no
* gradient; his word for this line says a gradient clipped to the letters, in
* the two inks, and his word is the later one. It is the only one in the sheet
* and the repository's colour census pins it declaration for declaration, so a
* second one anywhere is still a gate red.
*/
:root {
--oba-slate: #1E1E1E; /* the page's ground */
--oba-chalk: #EBEBEB; /* primary text, hairline rings, hovers */
--oba-ochre: #E8A400; /* THE accent, two selectors only */
--oba-ochre-deep: #A67200; /* light grounds; unused while the page is dark */
--oba-steel: #9A9A9A; /* secondary text, captions, disabled, machinery */
--oba-surface-1: #252526; /* raised: the bar, bubbles, options, chips */
--oba-surface-2: #2D2D2D; /* higher: the composer, the user's bubble, flags */
--oba-border: #3C3C3C; /* hairlines, scrollbar thumbs */
/* THE NINTH, AND IT IS A DEFAULT AND NOT HIS WORD. The founder asked for
the compacting word in "a light blue" (2026-09-13) and did not name one;
the design system says to stop and ask before a colour that is not in the
eight, so this is taken as a default, said out loud here and in
docs/look-pass-2026-09-05/design-system.md, and it is HIS TO CONFIRM.
9.07:1 on slate, against steel's own 4.50:1, so the fold reads brighter
than "thinking…" - which is what a second state should do. It paints ONE
thing, the status word while the word is "compacting", and a census
counts its bearers. */
--oba-compact: #D6EAF8; /* the compacting word: a very light blue, his word 2026-09-13 */
--oba-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--oba-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
--oba-r: 4px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
overflow: hidden; /* the transcript scrolls; the page never does */
background: var(--oba-slate);
color: var(--oba-chalk);
font-family: var(--oba-sans);
font-size: 12.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* -- every scroller the page owns --------------------------------------- */
/* One rule for all five, because a scroller nobody painted is drawn by the
browser in a colour that is none of the eight, and the live block at the end
of the transcript was exactly that until this pass. The five are the
transcript itself, that block, the bubble the answer grows in while Oba
writes it, the strip of chats where a host keeps several, and the composer's
own box. The thumb is a hairline, the track is
nothing at all, and the hover is the one step up to steel. #entry is here
although its overflow-y is hidden in this sheet: oba.js turns it to auto the
moment a request runs past five lines. */
.log,
.live,
.answering .bubble,
.chat-rows,
#entry {
scrollbar-width: thin;
scrollbar-color: var(--oba-border) transparent;
}
.log::-webkit-scrollbar,
.live::-webkit-scrollbar,
.answering .bubble::-webkit-scrollbar,
.chat-rows::-webkit-scrollbar,
#entry::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-track,
.live::-webkit-scrollbar-track,
.answering .bubble::-webkit-scrollbar-track,
.chat-rows::-webkit-scrollbar-track,
#entry::-webkit-scrollbar-track { background: transparent; }
.log::-webkit-scrollbar-thumb,
.live::-webkit-scrollbar-thumb,
.answering .bubble::-webkit-scrollbar-thumb,
.chat-rows::-webkit-scrollbar-thumb,
#entry::-webkit-scrollbar-thumb {
background: var(--oba-border);
border-radius: var(--oba-r);
}
.log::-webkit-scrollbar-thumb:hover,
.live::-webkit-scrollbar-thumb:hover,
.answering .bubble::-webkit-scrollbar-thumb:hover,
.chat-rows::-webkit-scrollbar-thumb:hover,
#entry::-webkit-scrollbar-thumb:hover { background: var(--oba-steel); }
/* -- header ------------------------------------------------------------- */
.bar {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
padding: 8px 12px;
background: var(--oba-surface-1);
border-bottom: 1px solid var(--oba-border);
}
/* THE MARK'S MOUNT POINT. The inside it is the whole mark until the
animated file lands; when it lands it finds this element by its id, draws
itself into it and takes the out ITSELF, on success. So the flex-child
rule lives on the mount and not on the image: whichever of the two is
standing here, the header lays it out the same way. */
.bar-mark {
display: block;
flex: 0 0 auto;
line-height: 0;
}
.bar-icon { display: block; }
.bar-name {
font-size: 13px;
font-weight: 500;
letter-spacing: .2px;
}
.bar-app {
margin-left: auto;
padding: 0 8px;
border: 1px solid var(--oba-border);
border-radius: 999px;
background: var(--oba-surface-2);
color: var(--oba-chalk);
font-size: 11.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 55%;
}
/* -- the chats open in this drawing -------------------------------------- */
/* ONE STRIP UNDER THE BAR, drawn only where the host declared `chats`. It is
the bar's own surface over the bar's own hairline, so the top of the window
reads as one band with two jobs rather than as two bars; the rows are a
vertical list, which is the shape the founder asked for ("a vertical list at
the top of the window"), and the plus stands at the top of it where he put
it and stays there however many rows there are.
THE LIT ROW IS THE SLASH LIST'S LIGHT, WORD FOR WORD: a surface step, a
hairline and chalk ink. NEVER OCHRE. The accent means the agent did this or
needs you, and a person choosing which of their own chats to look at is
neither; the repository's source census counts the bearers
and there are still two.
NO FACE IS NAMED HERE. The rows carry the page's one sans through `font:
inherit`, exactly as the composer does: the monospace face belongs to the
five aligned numerics and a sixth rule naming a face is a gate red.
AND THE STRIP SCROLLS INSIDE ITSELF rather than pushing the transcript off
the bottom of a docked palette. Its thumb is the hairline every other
scroller on this page wears, which is why .chat-rows joins the four groups
above rather than being left to the browser to paint. */
/* THE TAB STRIP IS THE CHROME the tabs sit in, like a browser's (the founder,
2026-09-13/14): the bar's own surface, and the tabs meet its bottom edge so
the one in front can open down into the transcript below it. align-items is
flex-end and there is no bottom padding, so the tabs reach that edge; the
plus keeps a little room above it. */
.chats {
display: flex;
align-items: flex-end;
gap: 8px;
flex: 0 0 auto;
padding: 6px 12px 0;
background: var(--oba-surface-1);
border-bottom: 1px solid var(--oba-border);
}
/* THE TABS ARE HORIZONTAL, like a browser's (the founder, 2026-09-13): side by
side along one row, the front one lit, up to ten of them, and the row scrolls
sideways rather than growing tall when they do not all fit. */
.chat-rows {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 2px;
overflow-x: auto;
overflow-y: hidden;
}
/* ONE TAB, a switch and a close side by side in one box, like a browser tab:
its own first words cut with an ellipsis, and an X on the right that ends the
chat. The box is the tab; the two buttons inside it do the two things, so
neither is a button inside a button. */
/* A TAB, not a pill: rounded at the top only, square at the bottom, and its
bottom edge overlaps the strip's own hairline (margin-bottom -1px) so the one
in front joins the transcript below with no line between them, the way a
browser tab joins its page. An inactive tab shows the chrome through it; the
front tab is filled with the transcript's own ground, so it reads as opened
into the content and not floating on top of it. */
.chat-row {
flex: 0 1 auto;
display: flex;
align-items: center;
min-width: 0;
max-width: 160px;
border: 1px solid transparent;
border-bottom: none;
border-radius: var(--oba-r) var(--oba-r) 0 0;
background: none;
margin-bottom: -1px;
}
.chat-row[aria-selected="true"] {
background: var(--oba-slate);
border-color: var(--oba-border);
}
/* The switch: the tab's own words, steel until it is the one in front. */
.chat-switch {
flex: 1 1 auto;
min-width: 0;
padding: 4px 4px 4px 8px;
border: 0;
background: none;
color: var(--oba-steel);
font: inherit;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.chat-row[aria-selected="true"] .chat-switch { color: var(--oba-chalk); }
/* The close X: steel, the page's one hover idiom, and never ochre; ending a
chat is a person acting, not the agent. */
.chat-close {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 16px;
height: 16px;
margin-right: 4px;
padding: 0;
border: 0;
border-radius: var(--oba-r);
background: none;
color: var(--oba-steel);
cursor: pointer;
}
.chat-close:hover { color: var(--oba-chalk); }
/* THE CONFIRM, when a chat is closed: a small box over the window, the way a
browser asks. "Never ask again" saves the answer so it is not asked twice
(kept in the page's own store). */
/* NO SCRIM. The design system forbids shadows and glows, and a dark wash over
the window is the same idea; the confirm is a bordered box floating on the
surface it is raised from, and the overlay is transparent, there only to
catch a click outside the box as a cancel. */
.chat-close-ask {
position: fixed;
inset: 0;
z-index: 20;
display: grid;
place-items: center;
background: transparent;
}
.chat-close-box {
width: min(280px, 82vw);
padding: 16px;
border: 1px solid var(--oba-border);
border-radius: var(--oba-r);
background: var(--oba-surface-2);
color: var(--oba-chalk);
}
.chat-close-q { margin: 0 0 12px; }
.chat-close-never {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: var(--oba-steel);
font-size: 11.5px;
cursor: pointer;
}
.chat-close-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.chat-close-actions button {
padding: 4px 12px;
border: 1px solid var(--oba-border);
border-radius: var(--oba-r);
background: none;
color: var(--oba-chalk);
font: inherit;
cursor: pointer;
}
.chat-close-actions button:hover { border-color: var(--oba-chalk); }
/* The same 20 px box the plus has had since it was drawn, on the strip's own
surface with no fill of its own: a raised button inside a raised band is a
step nobody can see, so what says it is a control is the hairline and the
glyph. */
.chat-new {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 20px;
height: 20px;
padding: 0;
border: 1px solid var(--oba-border);
border-radius: var(--oba-r);
background: none;
color: var(--oba-steel);
cursor: pointer;
transition: border-color .12s ease;
}
/* The page's one hover idiom, on the hairline, and nothing else moving. */
.chat-new:hover { border-color: var(--oba-chalk); }
/* GREYED WHILE IT CANNOT BE PRESSED, the way Send is and for Send's own
reason: a control that answers nothing has to look like one. Two moments
only, since the founder's word of 2026-09-14 left the strip live through a
turn: before the host has spoken once, when nothing on the strip may be
pressed, and the running tab's own X, whose reply is on its way to it. The
same measurable step down, .55, and the pointer says so too.
AND IT IS THE TWO BUTTONS THAT GREY, NEVER THE ROW. The row is a div -
oba.js builds it with document.createElement('div') and role="tab", and the
switch and the close are the buttons inside it - so :disabled and
:focus-visible on .chat-row match nothing, ever. They stood there until
2026-09-27, which left the running tab's X at full opacity, with its pointer
cursor and its chalk hover, for the whole of a turn in which a press on it
did nothing at all. */
.chat-switch:disabled,
.chat-close:disabled,
.chat-new:disabled { opacity: .55; cursor: default; }
.chat-close:disabled:hover { color: var(--oba-steel); }
.chat-new:disabled:hover { border-color: var(--oba-border); }
.chat-switch:focus-visible,
.chat-close:focus-visible,
.chat-new:focus-visible { outline: 1px solid var(--oba-chalk); outline-offset: 2px; }
/* -- transcript --------------------------------------------------------- */
.log {
flex: 1 1 auto;
min-height: 0; /* without this the flex child refuses to scroll */
overflow-y: auto;
overflow-x: hidden;
padding: 12px 12px 4px;
}
.row {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 12px;
}
.row.user { align-items: flex-end; }
.bubble {
max-width: 88%;
padding: 8px 12px;
border-radius: var(--oba-r);
background: var(--oba-surface-1);
/* The reply is shown exactly as Oba wrote it: the line breaks in a report of
what was drawn carry the shape of the answer, and wrapping them away turns
a checked list of entities into a paragraph nobody reads. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* The person's own line. It is told from a reply by one surface step, one
hairline and the side of the window it sits on, and by nothing else: ochre
is the agent's colour and a person typing is not the agent. */
.row.user .bubble {
background: var(--oba-surface-2);
border: 1px solid var(--oba-border);
color: var(--oba-chalk);
}
/* The intro is an Oba bubble, but the full width of the window rather than the
88% a reply gets: it is the window introducing itself, not a turn in the
conversation, and it is gone the moment there is one. */
.row.intro .bubble {
max-width: 100%;
padding: 8px 12px;
}
.at {
margin-top: 4px;
padding: 0 4px;
color: var(--oba-steel);
font-family: var(--oba-mono);
font-size: 11.5px;
}
/* -- a question with options -------------------------------------------- */
/* When Oba asks before it guesses, its numbered list is drawn as boxes instead
of text. They live in the same column an Oba bubble does - 88 %, hard against
the left - because they are part of what Oba said, not a control panel that
arrived from somewhere else. Everything below has to hold at 260 px, where
an option's text is down to a few characters a line; nothing is given a fixed
width, and the text wraps rather than pushing the box out of the window. */
.options {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
/* Both, and both are needed. The row lays its children out from the left and
lets each one be as wide as its content, which would leave the boxes as
ragged as the words inside them; width: 100 % squares them off against each
other and max-width holds them in the same column as the bubble above. */
width: 100%;
max-width: 88%;
}
/* WHERE THE KEYBOARD IS, WHICH IS NOT THE SAME THING AS A BOX BEING LIT. The
page hands the list the keyboard by itself the moment a question arrives, and
:focus-visible is what keeps that hand-off from drawing anything for somebody
who is using the mouse. For somebody who typed their way here it does draw,
and it should: a keyboard with nowhere visible is worse than a quiet line.
It is the page's ONE focus idiom, a 1 px chalk ring at 2 px offset, worn
here, on the fold's toggle, on a chip, on Send and on Stop alike: every
control the page itself puts in the Tab order wears it except the
composer's own box, and a control that wore none would fall back on the
browser's own doubled ring in a colour that is none of the eight. The
composer is the exemption and not a gap: it shows the keyboard on the box
round the textarea through .composer:focus-within, and #entry keeps
outline: none for exactly that reason, since a ring of its own inside a box
already lit would be two rings for one caret. It is not the light: the light
is ochre and one box wears it, and a ring round the whole list in the
light's own colour would read as though the whole list were lit, which is
the one thing this list must never say. The box a question was answered ON
drops to a steel border for the same reason, so the settled mark and this
ring cannot be confused either. */
.options:focus-visible {
outline: 1px solid var(--oba-chalk);
outline-offset: 2px;
}
/* The number, the text and the tag, in three columns. The middle one takes
what is left and is allowed to shrink to nothing (min-width: 0), which is
what keeps a long option from widening the row instead of wrapping. */
.option {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--oba-border);
border-radius: var(--oba-r);
background: var(--oba-surface-1);
transition: border-color .12s ease, background-color .12s ease;
}
/* The key that takes this option, drawn as the key it is. The monospace face
is what makes the badges one width whichever digit is in them, and it is the
same declaration the four other aligned numerics on this page carry. */
.option .num {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--oba-surface-2);
color: var(--oba-chalk);
font-family: var(--oba-mono);
font-size: 11.5px;
}
.option .text {
min-width: 0;
overflow-wrap: anywhere;
}
/* "recommended" - Oba's own mark, kept quiet. It never wraps: it is the one
thing here narrow enough to have a width of its own, and a two-line pill
next to a one-line option reads as a second option. */
.option .tag {
padding: 0 8px;
border: 1px solid var(--oba-border);
border-radius: 999px;
color: var(--oba-steel);
font-size: 11.5px;
line-height: 18px;
white-space: nowrap;
}
/* The one the person is on, and THE OCHRE OF THE WHOLE TRANSCRIPT. A question
standing unanswered is the pending confirmation the design system reserves
the accent for, and its primary action is this border. The mouse and the
keyboard put this same class on the same box - oba.js moves it on a
mouseover and on an arrow key alike - so there is never a second box
outlined somewhere else, and never a question about which number Enter would
take.
A question arrives with none of them wearing it. Until the pointer is on a
box, or an arrow key has walked onto one, every option looks exactly like
every other: a box lit before anybody touched it is the window choosing, and
Enter is one key away from sending it. That is also why the accent may not
be spent twice here: the border is the light, and the badge inside it steps
one surface DOWN with a hairline of its own, which is the most the eight
colours allow a badge that has to stay legible on the lit ground. */
.option.active {
border-color: var(--oba-ochre);
background: var(--oba-surface-2);
}
.option.active .num {
background: var(--oba-surface-1);
color: var(--oba-chalk);
border: 1px solid var(--oba-border);
}
/* Hover paints nothing of its own. The light is .active and the mouseover is
what puts it there, which is what keeps the two ways of pointing at a box
down to one mark; all that is left here is the shape of the cursor, saying
the box can be pressed. */
.options:not(.done) .option:hover {
cursor: pointer;
}
/* Settled: answered, or waiting on the host to echo the pick back. Dimmed and
not pressable, because the moment for it has gone - except the one that was
taken, which stays at full strength with a steel border, so scrolling back
through a long conversation shows what was decided at each turn. Steel and
not ochre: the question is answered, so nothing here needs anybody any more,
and steel is also what keeps the taken box from reading as this page's chalk
focus ring. */
.options.done .option {
opacity: .6;
cursor: default;
}
.options.done .option.chosen {
opacity: 1;
border-color: var(--oba-steel);
}
.options.done .option.chosen .num {
background: var(--oba-surface-1);
color: var(--oba-chalk);
border: 1px solid var(--oba-border);
}
/* A palette dragged in past about 340 px has no line left to share. The tag is
the thing that gives way - it is Oba's aside, and the option's own words are
what the person is choosing between - so it drops under the text and the
text gets the whole width back. Measured: at 260 px this is the difference
between an option reading over three lines and reading over two. */
@media (max-width: 340px) {
.option { grid-template-columns: auto 1fr; }
.option .tag {
grid-column: 2;
justify-self: start;
margin-top: 4px;
}
}
/* The line under the options that Oba did not write: "this turn: $0.03", and
any warning the application put beneath it. Shown, always - a window that
swallowed the cost line would be hiding what a turn cost - but a bare steel
line and not a box: it carries .bubble because the host writes it into the
reply's own row, and everything that makes a bubble a bubble is turned back
off here. Monospace, because a cost is an aligned numeric. */
.bubble.trailer {
margin-top: 8px;
background: none;
padding: 0;
border-radius: 0;
color: var(--oba-steel);
font-family: var(--oba-mono);
font-size: 11.5px;
}
/* -- the zones of a labelled reply -------------------------------------- */
/* What went wrong stands loud ABOVE the answer: full size, never folded, never
truncated. Loud by weight, position and a chalk hairline, and not by a hue -
the eight colours have no red and no yellow, and ochre would be wrong here on
its own terms, because it means "the agent did this, or it needs you" and a
failed step is neither a pending confirmation nor a live control. */
.flags {
max-width: 88%;
margin-bottom: 8px;
padding: 8px 12px;
border-left: 1px solid var(--oba-chalk);
background: var(--oba-surface-2);
border-radius: var(--oba-r);
color: var(--oba-chalk);
font-weight: 500;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* The machinery, folded behind one tap and never dropped. The toggle reads
like the steel trailer; the lines keep their exact text. */
.detail { max-width: 88%; margin-top: 8px; }
.detail-toggle {
border: 0;
padding: 0;
background: none;
color: var(--oba-steel);
font: inherit;
font-size: 11.5px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
/* The toggle is a real