/* DBOT QS — the finish layer.
===========================================================================
Everything here is *additive*. It loads after `style.css` and overrides it;
nothing in the app reads a class defined here, and no screen script depends
on it. Take the two lines out of `index.html` -- the below and the
motion module -- and the platform is exactly as it was, to the pixel.
That is the point: a look you can put back.
The direction is the one the app was already heading in and did not finish:
Swiss, dense, quiet. A QS reads figures here for eight hours; the interface
has to hold still, tell the eye where it is, and get out of the way. So no
gradients, no glass, no colour that does not mean something. What changes
is the things a dense tool actually needs and this one lacked -- a real
elevation scale, motion that says what just happened, focus you can find
from a keyboard, and a loading state that is not the word "Loading".
Two things asked for are not here, and this is where to say so:
* **anime.js** is unreachable from this machine -- every CDN (cdnjs,
jsdelivr, unpkg) is refused by the egress proxy, and the project has no
npm step to vendor it with (`make run`, one process, no build). The
motion is written on the Web Animations API instead, which is the same
capability natively: `motion.js` keeps an anime-shaped helper so the
library can be dropped in later without touching a call site.
* **Kokonut UI** is a React + Tailwind + shadcn registry. There is no
React, no Tailwind and no build step in this codebase, so it cannot be
installed without changing what this platform *is*. What is taken from
it is the language -- soft elevation, generous radii, motion that
responds to the pointer -- written in plain CSS below.
=========================================================================== */
:root {
/* ---- elevation ---------------------------------------------------------
Four steps, and each one means something: a card sits on the page, a
menu sits over it, a panel sits over the screen, a dialog over
everything. One shadow used for all of them, which is what was here
before, flattens that order into nothing. */
--e1: 0 1px 2px rgba(16, 24, 40, .04);
--e2: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px -1px rgba(16, 24, 40, .04);
--e3: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .05);
--e4: 0 18px 40px -12px rgba(16, 24, 40, .22), 0 6px 12px -6px rgba(16, 24, 40, .08);
--shadow: var(--e2);
/* ---- motion ------------------------------------------------------------
Chosen by distance, not by taste. A hover travels no distance, so it is
fast; a panel crosses 400px, so it is not. Exits run at ~60% of their
entrance, because leaving should feel like the interface getting out of
your way rather than a second event to wait through. */
--t-fast: 110ms; /* a tint, a border: no distance at all */
--t-base: 170ms; /* hover, press, a cell changing state */
--t-enter: 240ms; /* something arriving from off-screen */
--t-exit: 150ms; /* the same thing leaving */
--ease: cubic-bezier(.22, .61, .36, 1); /* decelerate: arriving */
/* Leaving is fast out of the gate too: an accelerating curve starts slow,
which is exactly when the eye is on it. And nothing overshoots -- a
settle, not a bounce. (`premium.css` has always overridden both; these
now say what actually runs.) */
--ease-in: cubic-bezier(.23, 1, .32, 1);
--ease-spring: cubic-bezier(.32, .72, 0, 1);
--tempo: var(--t-base);
/* ---- surface -----------------------------------------------------------
A touch cooler and a touch lighter, so the white of an editable cell
reads as white against it. That contrast is the whole legend in the
sidebar: white is yours, grey is the system's. */
--bg: #f4f6f9;
--line: #e4e8ee;
--radius-1: 6px;
--radius-2: 10px;
--radius-3: 14px;
}
/* ===========================================================================
Shell
=========================================================================== */
/* The bar is the one element on screen at every moment, so it is the one
that must not wobble. It gets its own hairline plus a shadow that only
appears once the page beneath it has scrolled -- set by `motion.js`, so
the bar looks flat against a page that has not moved and lifted over one
that has. */
#topbar {
transition: box-shadow var(--t-base) var(--ease);
backdrop-filter: saturate(1.1);
}
#topbar.lifted { box-shadow: 0 1px 0 var(--line), 0 6px 16px -12px rgba(16, 24, 40, .5); }
/* --- the bar's composition -------------------------------------------------
It carries three unrelated things -- which project this is, what it comes
to, and what you can do -- and they were a single run of items at one
weight, so 278 / 32 / 2,47,170 read as one wall of digits and your own
name sat at the same volume as Sign out.
Three groups now, divided by rules that are actually visible: a full-height
one between the groups, a short centred one between figures inside a
group. Nothing was added and nothing removed -- the same elements, given
room and an order to be read in. */
#topbar { gap: 0; padding: 0 14px 0 16px; }
.brand {
gap: 11px; min-width: 0; padding-right: 18px; align-self: stretch;
align-items: center; position: relative;
}
/* As wide as the rail below it, less the bar's own 16px of left padding, so
the hairline drawn at its right edge lands on the sidebar's border for
every project rather than wherever that project's name happened to end.
A name that needs more than that is cut with an ellipsis -- the full
name is in the sidebar's own box and the Projects list. Off a project the
sidebar is hidden and there is nothing to line up with, so the block is
free to take its own width there. */
#app:not(.no-project) .brand {
width: calc(var(--rail) - 16px); box-sizing: border-box; flex: none;
}
.brand > div { min-width: 0; }
.project-name, .project-sub {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand::before {
content: ""; position: absolute; right: 0; top: 12px; bottom: 12px;
width: 1px; background: var(--line-strong);
}
.logo { height: 24px; }
.project-name { font-size: 13.5px; letter-spacing: -.012em; line-height: 1.25; }
.project-sub { font-size: 10.5px; letter-spacing: .005em; }
/* The figures. A shorter rule between them than between the groups, so they
read as one set of readings rather than five separate facts -- and enough
air that the eye lands on a number instead of sliding off a wall. */
.headline { padding-left: 18px; align-items: stretch; }
.stat {
display: flex; flex-direction: column; justify-content: center; gap: 1px;
padding: 0 20px; position: relative; border-left: 0;
}
.stat::before {
content: ""; position: absolute; left: 0; top: 17px; bottom: 17px;
width: 1px; background: var(--line-strong);
}
.stat:first-child { padding-left: 0; }
.stat:first-child::before { display: none; }
.stat .v { font-size: 14.5px; font-weight: 640; letter-spacing: -.015em; }
.stat .k { font-size: 10.5px; letter-spacing: .06em; font-weight: 600; }
/* What you can do, behind its own rule and in its own order: what is
happening to this project, then what you can do about it, then who you
are, then which build. The rule belongs to the group, not to the first
thing that happens to be in it -- it used to be drawn by the health chip,
so it vanished on the Projects screen, where that chip is hidden. */
#topbar .health { padding-left: 0; margin-left: 0; border-left: 0; }
.bar-tools::before {
content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
width: 1px; background: var(--line-strong);
}
/* A rhythm rather than a single spacing: things that belong together sit
closer than things that merely follow one another. The project's state,
then a step, then what you can do about it, then a step, then you. */
.bar-tools > #paletteBtn { margin-left: 6px; }
.bar-tools > #whoami { margin-left: 6px; }
/* Off a project there are no figures to divide from. */
#app.no-project .bar-tools::before { display: none; }
#app.no-project .bar-tools { padding-left: 0; }
/* The group sits hard right on every screen, by the one auto margin in the
bar, which is on `.bar-tools` itself. One, deliberately: an auto margin
on more than one item does not "claim what is left", it splits it --
flexbox shares free space equally between every auto margin it finds --
and the toggle used to sit in the middle of the Projects screen with the
profile at the edge. */
#whoami { display: flex; align-items: center; }
/* Scoped. `.who` is also the class on a colleague's initials in the presence
chip, and this rule's 6px of right padding was pushing those initials off
the centre of their circle -- two features sharing a class name, one of
them silently misdrawn. */
#whoami .who { font-size: 12px; color: var(--ink-2); padding-right: 6px; }
/* The build is a stamp, not a control: it was a pill of the same shape and
weight as the health chip, which is the one thing in this group somebody
should actually click. */
#buildStamp .chip.mute {
background: none; border: 0; color: var(--ink-3); font-family: var(--mono);
font-size: 11px; padding: 4px 0; letter-spacing: -.01em;
}
/* Where you are, said by position as well as by colour. The tick is the fast
read -- you find it in peripheral vision without parsing the label -- and
the size, weight and colour stay for everyone who cannot see the blue.
It sits inside the link's own padding, at its left edge. It used to hang
10px outside it, and the folding group's `overflow: hidden` clipped it
away: the mark had been drawn and never seen.
The move is the link growing from its left edge while the one you left
shrinks back -- both on `transform`, so the compositor runs them and a
slow screen render cannot stall them, and both on the strong ease-out:
it answers the click at once and settles. 180ms: this is a navigation
done dozens of times an hour. */
#sidebar a {
position: relative;
transition: color var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
#sidebar a::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 3px; height: 16px; border-radius: 3px;
background: var(--accent);
/* Grown from the middle by a scale rather than a height: a height
transition is a layout on every frame. Scaled to .88 at rest so that,
inside a link grown by 1.14, it is the 3 x 16 it was drawn as. */
transform: translateY(-50%) scale(.88, 0);
transition: transform var(--t-base) var(--ease);
}
#sidebar a.active::before { transform: translateY(-50%) scale(.88); }
/* The rail belongs to the screens, not to the group headings or the way out,
both of which are `#sidebar a` or close enough to inherit it. */
.nav-sec-head::before, .nav-out::before { content: none !important; }
/* --- the groups ------------------------------------------------------------
Four labels in 10px type were a list with captions in it rather than a
structure. A heading is a control now: a chevron that turns and the
stage's name, lit when the screen you are on is behind it. */
.nav-sec-head {
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-sec-head:hover { background: var(--row-hover); color: var(--ink-2); }
.nav-sec-head:focus-visible {
outline: 2px solid var(--accent); outline-offset: -2px; color: var(--ink-2);
}
.nav-chev {
transform: rotate(0deg);
transition: transform var(--t-base) var(--ease-spring);
}
.nav-sec.is-open .nav-chev { transform: rotate(90deg); }
/* The same caret, on a project row that folds its towers out. One rule and one
token, so the two carets on screen turn at the same speed and with the same
curve -- and, being here rather than in `style.css`, the motion comes off
with this stylesheet exactly as every other animation does. */
.proj-fold svg { transition: transform var(--t-fast) var(--ease); }
/* The fold. `grid-template-rows` from 0fr to 1fr is how a list of unknown
height opens without its height being measured in JavaScript, and the row
inside it clips. It is a layout transition, which this stylesheet avoids
on anything that runs during a navigation -- this one runs on a click, on
one column of seven links, and on nothing else at the same time. */
.nav-sec-body { transition: grid-template-rows var(--t-base) var(--ease); }
/* On the first paint, and whenever a group is put right rather than folded
by somebody: opened, not unfolded. */
.nav-sec.no-fold .nav-sec-body, .nav-sec.no-fold .nav-chev { transition: none; }
.nav-out { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
.nav-sec-body, .nav-chev { transition: none; }
}
/* A screen arrives rather than appearing. 6px and 200ms: enough for the eye
to register that the content changed, not enough to wait for.
`backwards`, never `both` -- see the note in `motion.js`. A fill that
outlives the animation leaves a transform on the element for ever, and any
transform makes it the containing block for `position: fixed` children,
which is what sent the row menu on Projects to the wrong place. */
#main > .screen > * { animation: screen-in var(--t-enter) var(--ease) backwards; }
/* Not on a redraw in place. The router marks the container it rebuilds after
a committed cell; that screen has arrived already, and rising six pixels
again on every value typed is the page moving under somebody's hands. */
#main > .screen.redraw > * { animation: none; }
@keyframes screen-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* A room's heading inside a unit-type block, in the workbook's own header
blue. The block above it is the sheet title (`--wb-title`, navy) and the
tables below are its rows; the room is the band between them, and on a
white card it read as another row rather than as the head of one. Same
token the column headers use, so the sheet has one blue and not two. */
.card-body.room-head {
background: var(--wb-header); color: var(--wb-header-ink);
border-top: 1px solid var(--wb-title-line);
}
.card-body.room-head .muted,
.card-body.room-head .blk-figs .k { color: var(--wb-header-ink); opacity: .78; }
.card-body.room-head .blk-figs .v,
.card-body.room-head .blk-figs .k.tot,
.card-body.room-head .blk-figs .v.tot { color: var(--wb-header-ink); opacity: 1; }
/* A figure that lands after its screen has -- the dashboard's estimate,
which waits on the summary -- fades in where the ellipsis was rather than
swapping under the reader. Opacity only: a rise on a line of text three
tiles in would move the eye off the figure it is trying to read. */
.tile .arrived { animation: figure-in var(--t-enter) var(--ease) backwards; }
@keyframes figure-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tile .arrived { animation: none; }
}
/* ===========================================================================
Cards, tiles, tables
=========================================================================== */
.card {
border-radius: var(--radius-2); box-shadow: var(--e2);
border-color: var(--line);
transition: box-shadow var(--t-base) var(--ease);
}
/* The workbook's navy sheet title. This layer is the one that paints a card
header -- `style.css` sets its box and this sets its colour -- so the
colour code goes here or it is overruled by a gradient. */
.card > h2 {
background: linear-gradient(var(--wb-title), var(--wb-title));
letter-spacing: -.005em;
}
.tile {
border-radius: var(--radius-2); box-shadow: var(--e1);
transition: box-shadow var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),
transform var(--t-base) var(--ease);
}
/* A figure you can question lifts under the pointer -- 1px, the smallest
movement that still reads as "this responds". Transform only: nothing
around it moves (`layout-shift-avoid`). A mouse only: on a phone a tap
left the tile lifted until the next tap landed somewhere else. */
@media (hover: hover) and (pointer: fine) {
.tile.clickable:hover { transform: translateY(-1px); box-shadow: var(--e3); }
}
.tile.clickable:active { transform: translateY(0); box-shadow: var(--e1); }
.tile .v { letter-spacing: -.02em; }
/* Every figure in the app is read in a column against the figure above it,
so every figure in the app is tabular. Proportional digits shift the
decimal point by a pixel a row and the column stops reading as a column. */
.stat .v, .tile .v, td.cell, td.derived, .list-table .num,
.deriv-value, .deriv-input .v, .status .why {
font-variant-numeric: tabular-nums;
}
/* The header of a scrolled table sat on the same hairline as its rows, so a
long take-off scrolled its first row *under* the header with nothing to
say it had gone. */
table.grid th { box-shadow: inset 0 -1px 0 var(--line-strong); }
table.grid tbody tr { transition: background var(--t-fast) linear; }
/* A cell that has just been written to says so, once, and stops. This is the
only confirmation a QS gets that a number reached the server -- the row
redraws with the same value it showed while being typed, and without this
nothing on screen distinguishes "saved" from "not sent yet". */
@keyframes cell-saved {
0% { background: var(--flash-ok); }
100% { background: transparent; }
}
td.saved { animation: cell-saved 900ms var(--ease); }
/* The unit under a column heading -- "sq.m", "m", "Rs" -- was set at 10px,
below the 10.5px floor the stylesheet's own `--ink-3` note claims for the
smallest text in the app, and there are 67 of them on Room Configuration
alone. It is the label that says what every figure in the column *is*, so
it is the last thing that should be hard to read. */
.col-sub { font-size: 10.5px; letter-spacing: .01em; }
/* ===========================================================================
Controls
=========================================================================== */
button.btn {
border-radius: var(--radius-1); font-weight: 520;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
box-shadow: var(--e1);
}
button.btn:hover:not(:disabled) { box-shadow: var(--e2); }
/* Pressed is felt, not read: the button goes *down*, the way a key does. */
button.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button.btn.primary { box-shadow: var(--e2); }
button.btn.primary:hover:not(:disabled) { box-shadow: var(--e3); }
button.btn:disabled { box-shadow: none; }
select.sel-input, select.text-input, input.text-input, .field textarea.text-input {
border-radius: var(--radius-1);
transition: border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease);
}
select.sel-input:hover, select.text-input:hover, input.text-input:hover {
border-color: var(--ink-3);
}
/* The ring is on the field, not around the whole row, and it is the accent
rather than a browser default -- so it is the same shape as every other
focus in the app and a keyboard can never lose itself. */
select.sel-input:focus, select.text-input:focus, input.text-input:focus,
.field textarea.text-input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.chip.act { transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease); }
/* ===========================================================================
Panel, dialog, toast
=========================================================================== */
/* The panel is over the screen, so it carries the third step of elevation,
and it comes in from the edge it lives on rather than materialising. */
#panel { box-shadow: var(--e4); border-left: 1px solid var(--line); }
.panel-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
/* Rising from the bottom edge it is anchored to, and leaving faster than it
arrived.
Both directions in CSS, and deliberately so. The first attempt drove the
exit from `motion.js` by watching the `hidden` attribute -- and the write
that held the element open re-triggered the observer that had just made
it, so the panel animated out and then never hid at all. `allow-discrete`
is the feature for this: it defers `display: none` until the transition
has finished, with no script, no observer and nothing to re-enter.
A browser without it simply snaps, which is what happened before. */
#toast, #panel {
transition: opacity var(--t-exit) var(--ease-in),
transform var(--t-exit) var(--ease-in),
display var(--t-exit) allow-discrete;
opacity: 1;
}
#toast[hidden] { display: none; opacity: 0; transform: translateY(8px) scale(.98); }
#panel[hidden] { display: none; opacity: 0; transform: translateX(16px); }
@starting-style {
#toast:not([hidden]) { opacity: 0; transform: translateY(12px) scale(.97); }
#panel:not([hidden]) { opacity: 0; transform: translateX(24px); }
}
#toast { border-radius: var(--radius-2); box-shadow: var(--e4); }
/* ===========================================================================
Waiting
=========================================================================== */
/* A centred "Loading…" is a word where a shape should be. The words this app
uses are better than that -- "Measuring every room and pricing it…" says
what the wait is for -- so they stay, moved to where the reading starts,
with the shape of the table underneath them. The skeleton holds the space
the content is about to take, so the screen does not jump when it lands
(`content-jumping`), and the shimmer says the wait is progressing rather
than stuck. Under reduced motion the shimmer stops and the block stays:
the message is the shape, not the movement. */
.loading {
padding: 2px 0 0; text-align: left; display: grid; gap: 12px;
justify-items: stretch;
}
.loading::after {
content: ""; display: block; height: 220px; border-radius: var(--radius-2);
background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 37%, var(--skeleton-a) 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
from { background-position: 100% 0; }
to { background-position: 0 0; }
}
/* ===========================================================================
The explanations, shown properly
=========================================================================== */
/* Positioned by transform from the top-left, so showing one never moves
anything else on the page and the browser can put it on its own layer. */
.tip {
position: fixed; top: 0; left: 0; z-index: 60; max-width: 300px;
padding: 7px 10px; border-radius: var(--radius-1);
background: var(--tip-bg); color: var(--tip-ink); box-shadow: var(--e4);
font-size: 11.5px; line-height: 1.45; letter-spacing: .002em;
pointer-events: none; white-space: normal;
}
.tip::after {
content: ""; position: absolute; left: 50%; margin-left: -4px;
border: 4px solid transparent; border-bottom-color: var(--tip-bg); top: -8px;
}
.tip.above::after { top: auto; bottom: -8px; border-bottom-color: transparent;
border-top-color: var(--tip-bg); }
/* ===========================================================================
The cost bands, as lengths
=========================================================================== */
/* A grid rather than a flex row, so the nine names share one column width and
the nine bars share one track -- the bars all start at the same x, which is
the whole point of drawing them. `minmax(0, 1fr)` on the track: without the
0 the track refuses to shrink below its content and a long section name
pushes the chart off the card. */
.bands {
display: grid;
grid-template-columns: minmax(96px, 168px) minmax(0, 1fr) auto auto;
align-items: center;
gap: 2px 14px;
}
/* Each band is a button, because it opens its own working -- so it has to be
reachable by keyboard, and a div with a click handler is not. Everything
that makes a button look like a button is taken back off. */
.band {
display: grid; grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
appearance: none; background: none; border: 0; padding: 5px 6px;
margin: 0 -6px; border-radius: var(--radius-1);
font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.band:hover { background: var(--row-hover); }
.band:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.band-name {
font-size: 12.5px; color: var(--ink-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.band-track {
position: relative; height: 14px; border-radius: 3px;
background: var(--chart-track);
}
/* The data end is rounded and the baseline end is square, so the bar reads as
growing out of the axis rather than floating beside it.
`--bar` arrives as the fraction the engine computed; the multiply into a
width is CSS's, not JavaScript's. */
.band-fill {
position: absolute; inset: 0 auto 0 0;
width: calc(var(--bar, 0) * 100%);
min-width: 3px; /* a band under half a per cent is
still a band, and must be visible */
background: var(--chart-bar);
border-radius: 0 4px 4px 0;
transform-origin: left center;
}
.band-amt { font-size: 12.5px; text-align: right; min-width: 92px; }
.band-share { font-size: 12px; color: var(--ink-3); text-align: right;
min-width: 48px; }
/* M8. The bars grow from nothing once, on entry. `scaleX` and nothing else,
so there is no layout to redo per frame; the stagger is nine custom
`transition-delay`s rather than nine animations. `.drawn` is the
reduced-motion state and the resting state both -- no transition, full
length -- so a screen that never animates still looks right. */
.bands .band-fill { transform: scaleX(1); }
.bands.drawing .band-fill {
transform: scaleX(0);
animation: band-draw 400ms cubic-bezier(.22, .61, .36, 1) forwards;
}
.bands.drawing .band:nth-child(1) .band-fill { animation-delay: 0ms; }
.bands.drawing .band:nth-child(2) .band-fill { animation-delay: 30ms; }
.bands.drawing .band:nth-child(3) .band-fill { animation-delay: 60ms; }
.bands.drawing .band:nth-child(4) .band-fill { animation-delay: 90ms; }
.bands.drawing .band:nth-child(5) .band-fill { animation-delay: 120ms; }
.bands.drawing .band:nth-child(6) .band-fill { animation-delay: 150ms; }
.bands.drawing .band:nth-child(7) .band-fill { animation-delay: 180ms; }
.bands.drawing .band:nth-child(8) .band-fill { animation-delay: 210ms; }
.bands.drawing .band:nth-child(9) .band-fill { animation-delay: 240ms; }
/* Past nine they all draw together rather than trailing off the end of a
list of delays -- the platform may not assume nine bands (non-negotiable
5), and a tenth must not arrive undrawn. */
@keyframes band-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.bands.drawing .band-fill { animation: none; transform: scaleX(1); }
}
@media (max-width: 720px) {
.bands { grid-template-columns: minmax(0, 1fr) auto; }
.band { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.band-track { grid-column: 1 / -1; }
.band-share { min-width: 0; }
}
/* ===========================================================================
Narrowing a grid: the filter row and the column choice
=========================================================================== */
/* A second header row of plain boxes. They sit under the headings they
filter and take the heading's width, so what you type lines up with what
it narrows. */
.grid thead tr.filter-row th { padding: 3px 4px; background: var(--surface-2); }
.grid thead tr.filter-row input {
width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px;
background: var(--surface); color: var(--ink);
}
.grid thead tr.filter-row input::placeholder { color: var(--ink-3); }
.grid thead tr.filter-row input:focus-visible {
outline: 2px solid var(--accent); outline-offset: -1px;
}
/* Pressed while the row is showing. Outranks the quiet-button rule further
down, which would otherwise wash it back to plain. */
.grid-actions .btn.quiet[data-filter-toggle][aria-pressed="true"] {
background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.grid-count { font-size: 12px; margin-left: 4px; }
/* The column choice, a `` in the actions bar. Positioned against
the bar rather than the viewport: the bar sits under the grid and is not
clipped, unlike the row menus on the Projects screen. */
.col-pick { position: relative; display: inline-block; }
.col-pick > summary { list-style: none; cursor: pointer; }
.col-pick > summary::-webkit-details-marker { display: none; }
.col-pick-body {
position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30;
min-width: 220px; max-height: 320px; overflow: auto;
padding: 8px 10px; display: grid; gap: 4px;
background: var(--surface); border: 1px solid var(--line-strong);
border-radius: var(--radius-1); box-shadow: var(--e4);
}
.col-pick-body label {
display: flex; align-items: center; gap: 8px; font-size: 12.5px;
white-space: nowrap;
}
.col-pick-body input[disabled] + span, .col-pick-body label:has(input[disabled]) { color: var(--ink-3); }
/* ===========================================================================
Anywhere by name: the palette
=========================================================================== */
/* The way in, drawn as what it is. A magnifier beside a bare `K` said
neither "search" nor which key to hold, and at 28px tall beside a 38px
profile it read as a stray fragment. It is a field-shaped control now:
icon, the word, the shortcut for this machine, on the same ground the
grid's own inputs use. Wide enough to click at any width, and the word
steps out first when the bar runs short. */
.palette-btn {
display: inline-flex; align-items: center; gap: 7px;
height: 32px; min-width: 32px; padding: 0 8px 0 9px; justify-content: center;
border: 1px solid var(--line); border-radius: 8px;
background: var(--surface-2); color: var(--ink-3); cursor: pointer;
font: inherit;
transition: background var(--t-base) var(--ease),
border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.palette-btn svg { width: 15px; height: 15px; flex: none; }
.palette-word { font-size: 12.5px; letter-spacing: -.01em; }
.palette-btn kbd {
font: 600 10px/1 var(--mono); color: var(--ink-3);
background: var(--surface); border: 1px solid var(--line-strong);
border-radius: 4px; padding: 3px 5px; white-space: nowrap;
}
.palette-btn:hover {
color: var(--ink); border-color: var(--line-strong); background: var(--surface);
}
.palette-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Short bar: the word goes, then the shortcut, and the icon alone is still a
32px target. Nothing is ever cut off mid-word. */
@media (max-width: 1360px) { .palette-word { display: none; } }
@media (max-width: 1180px) { .palette-btn kbd { display: none; } }
/* The overlay is a plain fixed layer, the box is a card, and the list under
the box is the combobox's own `.cs-list` -- one control, everywhere it
appears. The box does not move while its list changes height. */
.palette-veil {
position: fixed; inset: 0; z-index: 70;
background: color-mix(in srgb, var(--ink) 28%, transparent);
display: grid; justify-items: center; align-items: start;
padding-top: 12vh;
animation: veil-in 120ms var(--ease);
}
.palette {
width: min(560px, calc(100vw - 32px));
background: var(--surface); border: 1px solid var(--line);
border-radius: 10px; box-shadow: var(--e4);
padding: 10px;
animation: palette-in 120ms var(--ease);
}
.palette input {
width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
padding: 10px 12px; border: 1px solid var(--line-strong);
border-radius: var(--radius-1); background: var(--surface); color: var(--ink);
}
.palette input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.palette .palette-hint {
display: flex; justify-content: space-between; gap: 12px;
margin: 8px 4px 0; font-size: 11.5px; color: var(--ink-3);
}
.palette .palette-hint kbd {
font: 600 10px/1 ui-monospace, monospace; border: 1px solid var(--line-strong);
border-radius: 3px; padding: 2px 4px; color: var(--ink-3);
}
@keyframes veil-in { from { opacity: 0; } }
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
.palette-veil, .palette { animation: none; }
}
/* ===========================================================================
Who else is here
=========================================================================== */
/* A person's colour is a hue, chosen from their name and the same every
time; the lightness and chroma are the theme's, so the same hue reads on
both grounds. 38% lightness keeps white initials over 4.5:1 for every
hue, yellows included, which a brighter swatch would not. */
.presence { display: flex; align-items: center; }
/* Everything the circle needs is set here, `padding` and `box-sizing`
included. It is not the only `.who` in the stylesheet -- the profile block
has one too -- and inheriting that one's right padding is what pushed a
colleague's initials a third of the way off their own circle. */
.presence .who {
box-sizing: border-box; width: 26px; height: 26px; padding: 0;
border-radius: 50%; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
text-indent: .01em; /* the letter-spacing's trailing gap */
color: var(--on-ink);
background: hsl(var(--who-hue, 220) 55% 38%);
border: 2px solid var(--surface);
animation: who-in 150ms var(--ease);
}
.presence .who + .who { margin-left: -6px; }
@keyframes who-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* A row somebody else just changed. A background wash, as the landing flash
is: paint, not layout, once, on one row. It is a person's colour and not
the accent, so it cannot be mistaken for the row you were sent to. */
@keyframes touched {
from { background-color: hsl(var(--who-hue, 220) 70% 88%); }
to { background-color: transparent; }
}
.grid tbody tr.touched > td { animation: touched 2.4s var(--ease) both; }
:root[data-theme="dark"] .grid tbody tr.touched > td {
animation-name: touched-dark;
}
@keyframes touched-dark {
from { background-color: hsl(var(--who-hue, 220) 40% 24%); }
to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.presence .who { animation: none; }
/* Still says which row, without fading; the script takes it off again. */
.grid tbody tr.touched > td { animation: none; background: hsl(var(--who-hue, 220) 70% 88%); }
:root[data-theme="dark"] .grid tbody tr.touched > td { background: hsl(var(--who-hue, 220) 40% 24%); }
}
/* ===========================================================================
One cell's history, and the way back
=========================================================================== */
/* M4. The cell says which cell the panel is about -- the panel opens at the
right-hand edge and a grid has two hundred rows, so without this the answer
to "which one did I press?" is on the far side of the screen.
A ring on a pseudo-element, so nothing on the cell itself moves and no
neighbour is relaid out. */
td.cell.pulse { position: relative; }
td.cell.pulse::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border: 2px solid var(--accent); border-radius: 3px;
animation: cell-ring 300ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes cell-ring {
from { transform: scale(1.15); opacity: 0; }
40% { opacity: 1; }
to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
td.cell.pulse::after { animation: none; display: none; }
}
/* The change log's own filters. Links, not buttons: each one is an address,
so it can be shared, bookmarked and reached with the back button. */
.log-filters { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; }
.log-chip {
font-size: 12px; padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--line-strong); color: var(--ink-2);
text-decoration: none; white-space: nowrap;
}
.log-chip:hover { background: var(--row-hover); color: var(--ink); }
.log-chip.on {
background: var(--accent-soft); border-color: var(--accent);
color: var(--accent); font-weight: 560;
}
.log-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hist { display: grid; gap: 2px; }
.hist-row {
display: grid; grid-template-columns: 96px 1fr auto;
gap: 10px; align-items: baseline;
padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px;
}
.hist-row:first-child { border-top: 0; }
.hist-when { color: var(--ink-3); font-size: 11.5px; line-height: 1.35; }
.hist-move { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.hist-old { color: var(--ink-3); text-decoration: line-through; }
.hist-arrow { color: var(--ink-3); }
.hist-new { color: var(--ink); font-weight: 560; }
.hist-why { flex-basis: 100%; font-size: 11.5px; }
@media (max-width: 720px) {
.hist-row { grid-template-columns: 1fr; }
}
/* ===========================================================================
Two revisions, side by side
=========================================================================== */
.compare-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compare-pick .picker {
font: inherit; font-size: 13px; padding: 6px 9px; min-width: 200px;
border: 1px solid var(--line-strong); border-radius: var(--radius-1);
background: var(--surface); color: var(--ink);
}
.compare-pick .picker:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px;
}
/* The sign is part of the value, not decoration on it: the direction has to
survive being printed, and being read by somebody who cannot tell these two
apart by hue. */
.delta { font-variant-numeric: tabular-nums; font-weight: 560; }
.delta.up { color: var(--chart-up); }
.delta.down { color: var(--chart-down); }
/* A delta band is a div, not a button -- there is no working behind a
difference to open, so it must not look like there is. */
.band.static { cursor: default; }
.band.static:hover { background: none; }
.band.up .band-fill { background: var(--chart-up); }
.band.down .band-fill { background: var(--chart-down); }
/* A band that shrank grows its bar from the right, so the two directions are
apart before any sign is read. */
.band.down .band-fill {
inset: 0 0 0 auto; border-radius: 4px 0 0 4px;
transform-origin: right center;
}
.band.static .band-share { min-width: 170px; }
/* A band that did not move draws no bar. The 3px floor on .band-fill is there
so a real but tiny band stays visible; applied to a zero it puts a stub
against every unchanged band and reads as a small movement that is not
there. */
.band.zero .band-fill { display: none; }
/* What changed, collection by collection. */
.cmp-group { border-top: 1px solid var(--line); padding: 8px 0; }
.cmp-group:first-child { border-top: 0; padding-top: 0; }
.cmp-group > summary {
cursor: pointer; list-style: none; display: flex; gap: 10px;
align-items: baseline; padding: 4px 0; font-size: 13px;
}
.cmp-group > summary::-webkit-details-marker { display: none; }
.cmp-group > summary::before {
content: "›"; display: inline-block; width: 12px; color: var(--ink-3);
transition: transform 120ms ease;
}
.cmp-group[open] > summary::before { transform: rotate(90deg); }
.cmp-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-rows { padding: 4px 0 8px 22px; }
.cmp-row {
display: grid; grid-template-columns: 74px minmax(120px, 220px) 1fr;
gap: 4px 12px; align-items: baseline;
padding: 5px 0; border-top: 1px solid var(--line);
}
.cmp-row:first-child { border-top: 0; }
.cmp-name { font-size: 12.5px; }
.cmp-detail { display: grid; gap: 2px; }
.cmp-field {
display: grid; grid-template-columns: minmax(0, 150px) 1fr 14px 1fr;
gap: 8px; align-items: baseline; font-size: 12px;
}
.cmp-what { color: var(--ink-3); }
.cmp-a { color: var(--ink-2); text-align: right; }
.cmp-arrow { color: var(--ink-3); text-align: center; }
.cmp-b { color: var(--ink); font-weight: 540; }
ul.plain { margin: 6px 0 0; padding-left: 18px; }
ul.plain li { margin: 3px 0; }
@media (max-width: 720px) {
.cmp-row { grid-template-columns: 74px 1fr; }
.cmp-detail { grid-column: 1 / -1; }
.cmp-field { grid-template-columns: 1fr; gap: 0; }
.cmp-a, .cmp-arrow, .cmp-b { text-align: left; }
.band.static .band-share { min-width: 0; }
}
/* ===========================================================================
The small things
=========================================================================== */
/* Scrollbars. Every screen here is a table taller than the window, so these
are on screen constantly -- at the OS default width they are a grey slab
down the side of every card. Thin, and only as dark as they need to be.
The two ways of asking are not additive, and that is why this had stopped
working. Chrome 121 shipped the standard `scrollbar-width` / `scrollbar-color`
and gave them precedence: where both are written, the whole
`::-webkit-scrollbar` block below is ignored. So the rounded 10px thumb this
app draws was never reaching the screen, and what showed instead was Chrome's
own scrollbar -- a wide track with a stepper arrow at each end, in the middle
of a page where nothing else is the operating system's. Nothing here changed;
the browser did.
So the standard properties are handed only to an engine that has no
`::-webkit-scrollbar` to style -- Firefox -- and everything else uses the
rules written for it. The colour is the token rather than a literal, because
a literal stayed light grey in dark mode. */
@supports not selector(::-webkit-scrollbar) {
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb); border-radius: 6px;
border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Selected text in the app's own blue rather than the browser's, and dark
enough to read through. */
::selection { background: var(--select-bg); color: var(--ink); }
/* A select had the operating system's arrow, which is a different size and a
different grey on every machine this runs on. One chevron, the app's. */
select.sel-input, select.text-input, .compare-pick .picker {
appearance: none; -webkit-appearance: none;
padding-right: 26px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636c79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center;
}
/* The focus ring on a cell arrived instantly and left instantly, which on a
grid you are arrowing across reads as a flicker rather than as a cursor. */
td.cell, td.derived { transition: background var(--t-fast) linear,
box-shadow var(--t-fast) var(--ease); }
/* Deleting a row is the one irreversible thing in a table, so its control
stays quiet until the row is under the pointer, and then says clearly what
it is. It was at full strength on all 1,480 rows at once. */
button.row-del {
opacity: .35; transition: opacity var(--t-fast) var(--ease),
background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
tr:hover button.row-del, button.row-del:focus-visible { opacity: 1; }
/* One focus ring, everywhere, in the accent -- so a keyboard never has to
work out which of three shapes means "you are here". */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
td.cell:focus, td.cell:focus-visible { outline-offset: -2px; border-radius: 0; }
/* ===========================================================================
Reduced motion
=========================================================================== */
/* Not "less motion": none. Every animation above is decoration on top of a
final state that is already correct, so removing them costs nothing and
showing them to somebody who gets sick from them costs a great deal. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.tile.clickable:hover { transform: none; }
}
/* ===========================================================================
The change log
=========================================================================== */
/* A day at a time. Eighty rows each repeating "15 Sep 2026" is eighty
readings of one fact; the heading says it once and the rows under it carry
only the clock. Sticky, so the day you are reading stays named while you
scroll through it. */
.grid.log tr.log-day th {
position: sticky; top: 0; z-index: 2;
text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .02em;
color: var(--ink-2); background: var(--surface-2);
padding: 7px 10px; border-bottom: 1px solid var(--line);
}
.grid.log .log-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* What changed, then what it changed on, then why -- in that order, because
that is the order the question is asked in. The field is the answer; the
record is where to look; the reason is there when something other than a
person typing put the row here. */
.grid.log .log-what { font-weight: 560; }
.grid.log .log-of { color: var(--ink-3); margin-left: 6px; }
/* On the same line as the rest, not under it: a row is one line tall, and a
reason that dropped to a second line made that row eight pixels taller
than its neighbours. */
.grid.log .log-why {
color: var(--ink-3); font-size: 11px; font-style: italic; margin-left: 8px;
}
/* ===========================================================================
The dropdown, as a sheet draws one
=========================================================================== */
/* It was a native