/* ~~ codemap ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * @title Console Styles * @category ui * @plane control * @description The console's entire presentation layer: three deploy knobs * that every surface, ink and line is derived from, the Material * 3 token set every screen reads off them, the two self-hosted * faces, the icon rules, and one block per component. Nothing in * `app/` writes a colour or a size in JS -- the one styling * rule, stated in full below. * @links app/ui/static/dashboard.html, docs/CONSOLE-VOCABULARY.md * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ============================================================================ THE SYSTEM, IN ONE PLACE Read this before adding a component. Everything below picks from these ladders; a new thing that needs a value not on one of them is either mis-measured or an argument for adding a rung, and adding a rung is a decision made here rather than a literal written at the call site. Each ladder is documented where it is declared, in `:root`. This is the index. KNOBS --ds-ground --ds-tint the three numbers a deploy sets. --ds-lines Every surface, ink and line below is derived from them, so the ground moves without anything being re-picked by eye TYPE --text-1 .. --text-13 thirteen steps, 10px to 24px no `font-size` in this file is anything else INK --on --on-variant --outline one ramp, brightest first, and --dim --faint --fainter every glyph is on it SURFACE --surface --surface-low what a thing sits on, plus the --surface-cont --surface-high three shell columns --surface-est (--surface-rail/-nav/-pane) SHELL --shell-ink grey text on a shell surface, where a tinted grey would read as a colour. The rail and the sub-nav only LINES --hairline --edge --rule shell columns / round a group / between rows in a group SPACE --space-1 .. --space-6 gaps between things: 4 8 12 16 24 32 PANE --pane-x --pane-y a shell column's own inset, --pane-x-side which is not a gap ROWS --row-y --row-x one inset for every row of every --row-y-block bordered group CONTROLS --control-h-sm/-h/-h-lg 26 / 32 / 38, with the matching --control-x-sm/-x/-x-lg 10 / 14 / 18 FIELDS --field --field-border a control you type into: it has --field-border-hover an inside, so it is brighter --field-y --field-x than any line CHIPS --chip-y/-x a word with a box round it, --chip-y-sm/-x-sm ordinary and tiny RADIUS --radius-sm/--radius 8 / 12 / 16 / pill --radius-lg/--radius-pill MOTION --motion-short --motion-long 120ms for a thumb, 260ms for --easing something entering the page TWO VOCABULARIES, AND WHICH ONE TO REACH FOR The console's layout rule is that **the main column is where a thing is changed and the right pane is where it is read**. That is not a convention about columns; it is what the two component families mean: `.field-row` + `.field-rows` a settings row: a label, one line on `C.sectionHead` `C.fieldRows` why, and the control that changes it, inside a bordered group under a head. `.side-label` `.side-stat` the information vocabulary: a small-caps `.side-quote` heading, a key and its value, and a `C.sideLabel` `C.sideStat` quotation of prose this console did not `C.sideQuote` write. They look like duplicates of each other and are not. `.field-row` holds a control; `.side-stat` holds a fact. The names say "side" for historical reasons -- the information vocabulary grew in the right pane -- but it is the *job* that picks one, not the column: a client's Identity section is `sideStat` rows inside `.field-row`s in the main column, because it is information, and that is correct. The one thing neither family does is put a control in the right pane. A switch there is a second copy of one that is already on the row the pane is about, and the pane is the half of the screen a reader is not expected to be careful in. ============================================================================ */ /* Self-hosted, latin subset, one variable file per family. Same origin because the alternative degrades badly: a console that reaches fonts.googleapis.com renders in a fallback face on a locked-down network, and the icon font it used to pull alongside these degraded to the literal word `handyman` in place of every glyph. The icons are inline SVG now (console-icons.js) and the text is these two files. Flat in static/ rather than in a fonts/ subdirectory: router.py serves one path segment out of an explicit allowlist, and a subdirectory needs {filename:path}, which re-opens the traversal class that allowlist closed. Same reasoning the console-*.js files are flat for. */ @font-face { font-family: "DM Sans"; src: url("/dashboard/static/dm-sans.woff2") format("woff2"); font-weight: 100 1000; /* one variable file covers the range */ font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/dashboard/static/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* The one line that makes every *native* control agree with the palette: a select's dropdown, a date picker, a number spinner, the text caret. It is not a token -- it is a declaration about the document -- but it belongs with them, because without it the browser draws those parts in its light default and the only dark-looking bits of a select are the ones this stylesheet reaches. */ color-scheme: dark; /* ============================== THE THREE DEPLOY KNOBS ================== A deploy does not pick colours. It picks three numbers, and every surface, ink and line below re-derives from them: --ds-ground 0 near-black 1 graphite --ds-tint 0 true neutral grey 1 tinted towards the primary --ds-lines 0 barely there 1 assertive borders This replaces a palette of fifty-odd hand-picked hexes, and the reason is not tidiness. The hexes could not be moved: darkening the ground meant re-picking every line and every grey against it by eye, so in practice nobody did, and the shell's neutral axis had to be bolted on as four separate tokens (`--neutral-deep`, `--neutral`, `--neutral-high`, `--neutral-ink`) rather than turned down out of the palette that was already there. Those four are gone; `--ds-tint` is what they were asking for, and it reaches the whole file instead of two columns. A deploy does not edit this file to change them. The knobs, the tint hue and the two accents below are a deployment's own setting, chosen on the console's Appearance section or in the MCP_BRAND_* variables, and `/dashboard/colours.css` (app/colours.py) repaints them over the values written here. What is written here is the default a deployment gets when it has chosen nothing: a teal accent on true grey, which is nobody's brand. `test_framework.py` §19g fails if these defaults and app/colours.py's stop agreeing. Nothing ever writes a component rule. The rule that makes the colour pop, and the one thing not to undo: the shell is neutral and the content is not. The rail and the sub-nav -- the two columns that hold no content, only the way to it -- carry almost no chroma at any tint (`--c-shell`), so colour sits inside a frame that has none. That is what makes a coloured switch read as coloured rather than as a slightly brighter piece of the surface behind it. */ --ds-ground: 0.25; --ds-tint: 0; --ds-lines: 0.5; /* The hue everything tinted leans on: the primary accent's own hue, which app/colours.py reads off whatever primary the deployment chose. Named by its job rather than by whose it is. */ --tint-h: 185.9; /* How strongly the codebase chart's brand-family colours carry that hue: the primary's chroma against the old violet's. Grey brand, grey chart. */ --brand-sat: 0.751; /* ------------------------------------------------------------ surfaces -- Derived lightnesses, darkest on the outside. The content pane sits one step up from the sub-nav so the page beside the nav reads as lit rather than as another column of chrome. Five content steps rather than the three the pre-M3 theme had, because the layout stacks a rail on a page on a card on a row and three greys cannot keep those apart. */ --l-rail: calc(0.098 + 0.052 * var(--ds-ground)); --l-nav: calc(0.132 + 0.052 * var(--ds-ground)); --l-pane: calc(0.146 + 0.050 * var(--ds-ground)); --l-surface: calc(0.162 + 0.050 * var(--ds-ground)); --l-low: calc(0.202 + 0.050 * var(--ds-ground)); --l-cont: calc(0.242 + 0.048 * var(--ds-ground)); --l-high: calc(0.300 + 0.046 * var(--ds-ground)); --l-est: calc(0.368 + 0.044 * var(--ds-ground)); /* Chroma, in three strengths. The shell carries almost none of it whatever the tint, because the shell is the thing an accent is read against. */ --c-shell: calc(0.006 * var(--ds-tint)); --c-surface: calc(0.020 * var(--ds-tint)); --c-ink: calc(0.016 * var(--ds-tint)); --surface: oklch(var(--l-surface) var(--c-surface) var(--tint-h)); --surface-low: oklch(var(--l-low) var(--c-surface) var(--tint-h)); --surface-cont: oklch(var(--l-cont) var(--c-surface) var(--tint-h)); --surface-high: oklch(var(--l-high) var(--c-surface) var(--tint-h)); --surface-est: oklch(var(--l-est) var(--c-surface) var(--tint-h)); /* ------------------------------------------------------ shell surfaces -- The four columns of every screen. The rail and the sub-nav are on `--c-shell` and are therefore neutral by construction rather than by a separate set of tokens somebody has to remember to keep in step. The content pane is one surface at every depth. It carried a lighter step once you had drilled in, on the argument that a settings level should say it replaced the list -- but the level's own head, the breadcrumb and the sub-nav all say that already, and the tint only made two pages of the same screen look like two different screens. */ --surface-rail: oklch(var(--l-rail) var(--c-shell) var(--tint-h)); --surface-nav: oklch(var(--l-nav) var(--c-shell) var(--tint-h)); --surface-pane: oklch(var(--l-pane) var(--c-surface) var(--tint-h)); /* Grey text on a shell surface, where a violet-tinted grey reads as a faint *colour* against a neutral ground rather than as quiet text. The shell's own ink, and nothing outside it may ask: a component outside the rail or the sub-nav reaching for this is claiming to be part of the shell, which is the same rule `--hairline` already carries. Deliberately not a second ink ramp. `--dim`, `--faint` and `--fainter` stay the console's greys everywhere content is. */ --shell-ink: oklch(calc(0.60 + 0.04 * var(--ds-ground)) var(--c-shell) var(--tint-h)); /* ---------------------------------------------------------------- lines -- Three, and nothing else draws a line. All much darker than a border usually is: at this brightness a divider separates two surfaces without drawing a box round either, which is what lets four columns sit side by side without the screen reading as a grid of cards. Pick by *what the line separates*, never by how dark it should look: `--hairline` between the columns of the shell -- and nothing else. A component reaching for this is claiming to be part of the shell. `--edge` round a group. A card, a list, a bordered box, a banner, a tile -- anything with an inside. `--rule` between two rows inside one group, and under a group's own head. It never closes; it only divides. There were four. `--hairline-soft` sat half a step between `--edge` and `--rule` and was used for both jobs, which meant the answer to "which line do I draw" depended on which file you had read last. */ --l-line: calc(0.198 + 0.072 * var(--ds-lines)); --hairline: oklch(calc(var(--l-line) - 0.022) var(--c-shell) var(--tint-h)); --rule: oklch(var(--l-line) var(--c-surface) var(--tint-h)); --edge: oklch(calc(var(--l-line) + 0.048) var(--c-surface) var(--tint-h)); /* --------------------------------------------------------------- fields -- A control you can type into has to look like it has an inside, and that means a border brighter than any of the three lines above. Its own tokens rather than reusing `--edge`: a divider separates two surfaces, and a field is a hole in one. `--edge` got darker when the layout became four columns, and every text field that had taken it disappeared into the pane behind it. */ --field: oklch(calc(var(--l-surface) - 0.018) var(--c-surface) var(--tint-h)); --field-border: oklch(calc(0.330 + 0.03 * var(--ds-ground)) calc(0.014 * var(--ds-tint)) var(--tint-h)); --field-border-hover: oklch(calc(0.430 + 0.03 * var(--ds-ground)) calc(0.020 * var(--ds-tint)) var(--tint-h)); --field-y: 7px; --field-x: 10px; /* ----------------------------------------------------------------- ink -- One ramp, six steps, brightest first. Every colour a glyph is ever drawn in is on it, and a component picks a step by how loudly the thing should speak rather than by naming a new colour: `--on` the thing you came to read (the deployment's text colour) `--on-variant` a label beside it `--outline` quoted prose, a monospaced value, a switch's track `--dim` a hint, a count, an aside -- still meant to be read `--faint` a slug under a name, a unit after a figure `--fainter` the quietest thing on the screen that is still text Below `--fainter` is decoration, and decoration takes a line or a surface colour, not an ink. Every rung here is a rung something is *read* at, so every rung clears 4.5:1 on the surfaces it is painted on -- `--surface` and `--surface-low` both, since the quiet rungs get used inside cards. That is a repair, not a restatement: `--fainter` was #6f6183 and measured 3.48:1 on `--surface` and 3.3:1 on `--surface-low`, which made the quietest step decorative in fact while this list called it text -- and it carries the section counts and the sentence under every settings label. It measures 4.9 and 4.53 now. Measured, not eyeballed, and the tightest pair is `--fainter` on `--surface-low` at 4.53:1: moving `--ds-ground` up lightens both and moving it down darkens both, so the ramp holds across the knob's range, but a rung edited by hand needs re-measuring against both grounds. The top of the ramp moved with the bottom to keep six distinct rungs; the bottom two are 0.02 apart, which is the least that still reads as two. */ /* The top two rungs are a deployment's setting (Text colour), derived by app/colours.py like the accents. The console launched with a cream here, which was one agency's brand; the default is a plain off-white. */ --on: #f2f2f2; --on-variant: #e6e6e6; --outline: oklch(0.820 var(--c-ink) var(--tint-h)); --dim: oklch(0.705 var(--c-ink) var(--tint-h)); --faint: oklch(0.625 var(--c-ink) var(--tint-h)); --fainter: oklch(0.605 var(--c-ink) var(--tint-h)); /* ------------------------------------------------------------- primary -- The deployment's accent. `--primary` is the switch, the active rail item, the focus ring, the page's own action. Every screen follows these six lines, which is the one styling rule stated as a test. Only `--primary` is chosen. The other five are derived from it by app/colours.py, each at a fixed lightness, which is what keeps every pairing clear of 4.5:1 whatever hue a deployment picks. The lightnesses are the ones the hand-picked violet palette used, where `--primary-cont` was a brand guide's deep purple at 5.98:1 under `--on-primary-cont`. It lands on the rail's active pill and the agency badge. */ --primary: #7fc8bf; --on-primary: #042320; --primary-cont: #00625b; --on-primary-cont: #cae7e3; --secondary-cont: #003b36; --on-secondary-cont: #a9dad3; /* ------------------------------------------------------------- accent-2 A second hue, because one is not a palette. It has to sit far enough round the wheel from the primary to read as a different *kind* of thing rather than a lighter shade of it. The default is sage. Like the primary it is a deployment's choice, and its container and ink are derived from it. It carries one meaning, consistently: **this is the thing you are looking at or editing** -- the selected row, the last crumb, a field being edited, a section head about what a thing *is*. Violet stays "this is on, this is the action". Keeping the two jobs apart is the whole reason for a second hue; a third accent, or either of these used because a section looked plain, spends the only two meanings the console has. */ --accent-2: #babf95; --accent-2-cont: #393b28; --on-accent-2-cont: #dee2c2; /* --------------------------------------------------------------- state -- Three, not four: there is no "success" here. A thing that worked says so by looking ordinary. Where "this is live" genuinely must be stated, sage says it. */ --info: #9dc3de; --error: #f0a8ac; --warn: #e2b67f; /* ------------------------------------------------------------- metrics */ --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ------------------------------------------------------------ type scale -- Thirteen steps, and nothing off them. Every `font-size` in this file is one of these, so a new panel picks a step rather than inventing 13.5px because it looked right that afternoon -- which is how the console came to have seventeen sizes, four of them used once each. What lands where, so a new thing can be placed without measuring: 1 10px small-caps group labels, the kind mark on a row 2 10.5px the quietest real text: section counts, a sub-slug 3 11px hints, slugs, chips, counted asides 4 11.5px secondary body -- a stat, a quoted paragraph, a row's blurb 5 12px controls: buttons, nav items, banners, a tool's name 6 12.5px a row's own label, and every form control 7 13px names you scan a list by, and text inputs 8 14px the document default, and a pane's title 9 15px a crumb, a card's heading 10 16px the head of a pane or a section of a level 11 17px the title of a drilled-in level 12 19px the screen's name in the header 13 24px a figure on the Dashboard, which is read across the room Steps 1-4 are half-point apart on purpose: they are the four weights of "quieter than the body text", and the console leans on all four. */ --text-1: 10px; --text-2: 10.5px; --text-3: 11px; --text-4: 11.5px; --text-5: 12px; --text-6: 12.5px; --text-7: 13px; --text-8: 14px; --text-9: 15px; --text-10: 16px; --text-11: 17px; --text-12: 19px; --text-13: 24px; /* --------------------------------------------------------- row metrics -- One inset for every row of every bordered group, and one for the taller rows that hold a block rather than a line. These exist because "a row in a list" is the single most repeated thing in this console -- a tool, a module, a client, a seat, a setting, a memory, an account -- and they had drifted to 9px/10px/11px/12px/16px of vertical inset with four different horizontal ones, which is exactly the difference a reader notices between two screens without being able to name it. Pulled to the density the Modules list already read at, rather than the Modules list being loosened to match the settings pages: the list is the thing this console is mostly looking at. */ --row-y: 8px; --row-x: 13px; --row-y-block: 11px; /* ------------------------------------------------------------ controls -- Three sizes of clickable thing, each a height and a horizontal inset, and every button in the console is one of them. Heights rather than vertical padding, because the defect these fix is two buttons of different classes sitting on one bar at different heights -- which is a thing you see immediately and cannot fix by choosing a padding, since the type inside them differs too. sm 26px an escape hatch beside a control: `Inherit`, `Open these` md 32px the ordinary button, the sub-nav item, the quiet icon lg 38px a page's own action: Save, the right pane's way out Six pixels apart, so two rungs are never mistaken for one rung and a rendering difference. The type step goes with the size -- --text-3 on sm, --text-5 on md, --text-6 on lg -- and is written on each rule rather than tokenised, because a button's font is one declaration and a token for it would only be read once. */ --control-h-sm: 26px; --control-h: 32px; --control-h-lg: 38px; --control-x-sm: 10px; --control-x: 14px; --control-x-lg: 18px; /* --------------------------------------------------------------- chips -- A chip is a word with a box round it and it is never clicked to mean something -- a tag, a state, a scope, a kind. Two densities, because the console genuinely has two: an ordinary chip beside a name, and the tiny uppercase mark that labels a row without competing with it. There were seven insets across nine rules that all drew the same object. If a tenth is needed it is one of these two. */ --chip-y: 2px; --chip-x: 9px; --chip-y-sm: 1px; --chip-x-sm: 7px; /* ---------------------------------------------------------- pane inset -- What a column of the shell holds its contents in from its own edges. Not a `--space-*` step: those are gaps *between* things and this is the margin of the page itself, which is wider than any gap on it and would drag the gap scale up with it if they shared a number. The right pane is tighter than the content pane because it is narrower -- the same inset on a 300px column reads as a wide empty border. */ --pane-x: 18px; --pane-y: 14px; --pane-x-side: 15px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* M3 motion: the short one is for state a finger is holding (a switch thumb), the long one for something entering or leaving the page. */ --motion-short: 120ms; --motion-long: 260ms; --easing: cubic-bezier(.2, 0, 0, 1); --icon-size: 20px; --icon-size-sm: 16px; --icon-size-lg: 24px; /* ----------------------------------------------------------------- type -- Two faces, both self-hosted above, and the reason is in that @font-face block: a console that reaches fonts.googleapis.com renders in a fallback on a locked-down network. `--font-display` is the seam for the brand's titular face. The design system names Ubuntu for anything titular and Noto Sans for prose; both arrive over Google Fonts, and a face that resolves only by luck of a local install is worse than one face everywhere -- two admins would see two consoles. So the seam exists and points at the face we actually ship. Landing Ubuntu is three things: a woff2 beside the other two, an @font-face above, and its name at the front of this line. */ --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif; --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------- categories -- codeweb.js reads these off the document so the graph and the legend can never drift apart. The mockup names seven; the other eight are real categories in this repo's codemap that it never drew. They are derived in the same hue family rather than left at the old blue-green, because half a graph in each palette is worse than either palette. That family used to be one agency's violet, written as hexes. It is the deployment's primary hue now (`--tint-h`), each colour keeping the lightness and chroma it had, so the graph wears whichever brand the console does. The literals left are the fixed meanings -- blue, amber, pink, magenta, green -- which are the same on every deployment and are listed in test_framework.py §19g. */ --cat-entrypoint: var(--on); --cat-core: oklch(0.750 calc(0.099 * var(--brand-sat)) var(--tint-h)); --cat-module: oklch(0.709 calc(0.159 * var(--brand-sat)) var(--tint-h)); --cat-tool: #9dc3de; --cat-support: #e2b67f; --cat-ui: #e08fc0; --cat-table: oklch(0.624 calc(0.063 * var(--brand-sat)) var(--tint-h)); --cat-tooling: oklch(0.812 calc(0.081 * var(--brand-sat)) var(--tint-h)); --cat-config: oklch(0.663 calc(0.056 * var(--brand-sat)) var(--tint-h)); --cat-docs: oklch(0.573 calc(0.052 * var(--brand-sat)) var(--tint-h)); --cat-legacy: oklch(0.518 calc(0.048 * var(--brand-sat)) var(--tint-h)); --cat-unmapped: oklch(0.409 calc(0.041 * var(--brand-sat)) var(--tint-h)); --cat-schema: oklch(0.733 calc(0.090 * var(--brand-sat)) var(--tint-h)); --cat-database: oklch(0.778 calc(0.104 * var(--brand-sat)) var(--tint-h)); --cat-service: #f0a8ac; /* Plane colours. Deliberately unlike the categories above: a plane is a region of the web, not a kind of node, and the two groupings have to stay tellable apart on one canvas. Kept cooler and flatter for that reason. */ --plane-control: #9dc3de; --plane-data: #a8c7b5; --plane-shared: oklch(0.718 calc(0.046 * var(--brand-sat)) var(--tint-h)); /* Direction colours for the satellites in services mode: who calls whom. */ --dir-inbound: #9dc3de; --dir-outbound: oklch(0.750 calc(0.099 * var(--brand-sat)) var(--tint-h)); --dir-bidirectional: #e2b67f; /* ---------------------------------------------------------------- tags -- A tag's colour is its meaning, so it is named for the meaning. `money` and `destructive` are the two worth stopping on. */ --tag-money: #e2b67f; --tag-destructive: #f0a8ac; --tag-pii: #9dc3de; --tag-beta: #e08fc0; --tag-bulk: oklch(0.718 calc(0.046 * var(--brand-sat)) var(--tint-h)); /* Roles, in the ordering the old stylesheet already encoded. */ --role-admin: var(--warn); --role-operator: var(--primary); --role-reader: var(--outline); } /* --------------------------------------------------------------- icons -- The complete set the library needs; everything else is per-component. `console-icons.js` returns an with no size, no colour and no style attribute, so size comes from here and colour from `currentColor` -- an icon follows the text beside it through every hover and state class without one extra rule. */ .icon { width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; /* never squashed by a flex row */ display: block; /* no inline baseline gap */ } /* The three sizes the console actually uses. A fourth is a smell -- check whether the component beside it should be resizing instead. */ .icon-sm { --icon-size: var(--icon-size-sm); } .icon-lg { --icon-size: var(--icon-size-lg); } /* Icons carrying a state colour rather than inheriting one. */ .icon-danger { color: var(--error); } .icon-warn { color: var(--warn); } .icon-dim { color: var(--dim); } /* Motion is a preference, not a decoration. Honoured globally so no component has to remember it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } * { box-sizing: border-box; } /* `hidden` is semantic, and every `display` in this file outranks it -- which is not a nuisance, it is a security bug waiting to happen. The console hides what a principal may not use rather than showing a control that always 403s, and it does that by setting this attribute; a component rule with `display: flex` silently un-hides it. It cost an empty snackbar sitting on every screen, and then a reader seeing four rail items that would refuse them. `!important` is right here for the reason it is usually wrong: nothing should ever out-rank this. */ [hidden] { display: none !important; } ::selection { background: var(--primary-cont); color: var(--on); } body { margin: 0; background: var(--surface); color: var(--on); font-family: var(--font); font-size: var(--text-8); line-height: 1.5; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Four columns means up to four scroll containers side by side, and a browser's default bar is a bright band down each of the seams. Thin and in the palette instead -- still visible, still draggable, no longer the loudest vertical line on the screen. */ * { scrollbar-width: thin; scrollbar-color: var(--surface-est) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-est); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--surface-est) 60%, var(--dim)); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* 500 rather than 600, which is what every *named* title in this console already uses -- `.level-title`, `.side-title`, `.pane-bar-title` and the topbar's own h1, which overrode this base rule to get there. The base was the outlier, and the two bare

s left in the markup were the only things reading heavier than the headings beside them. */ h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } h1 { font-size: var(--text-9); } h2 { font-size: var(--text-11); } h3 { font-size: var(--text-10); } p { margin: 0 0 var(--space-2); } code { font-family: var(--mono); font-size: 0.92em; color: var(--outline); } .muted { color: var(--dim); } .warn-ink { color: var(--warn); } .small { font-size: var(--text-5); } /* ---------------------------------------------------------------- shell -- */ .shell { flex: 1 1 auto; min-height: 0; display: grid; /* The rail is a fixed column because its contents are fixed: eight screens and the two controls under them. Everything that grows lives in the page beside it. Narrow, because it holds a glyph and one word -- the column that holds this screen's own filters is the next one along, and it belongs to the screen rather than to the shell. */ grid-template-columns: 68px minmax(0, 1fr); } .shell-page { min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ----------------------------------------------------------------- rail -- */ .rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) 0; background: var(--surface-rail); border-right: 1px solid var(--hairline); overflow-y: auto; overflow-x: hidden; } /* The mark alone. The deployment's own name used to sit under it, cut to two lines; at 72px there is no width for a sentence, and the name is on the sign-in page, in the tab title and in the Dashboard's right pane -- three places that can hold it whole. The `title` carries it here. */ .rail-brand { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; margin-bottom: 13px; border-radius: var(--radius); background: var(--primary-cont); color: var(--on-primary-cont); } .rail-brand-mark { display: grid; place-items: center; } .rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; flex: 0 0 auto; padding: 4px 0 2px; background: transparent; border: 0; /* Grey, on a ground that is now actually black. `--dim` is a violet grey and reads as a faint colour against a neutral surface rather than as quiet text -- which is the same swap the sub-nav's labels make, and the whole reason the neutral axis carries an ink of its own. */ color: var(--shell-ink); font: inherit; font-size: var(--text-2); line-height: 1.2; text-align: center; cursor: pointer; transition: color var(--motion-short) var(--easing); } .rail-item:hover { color: var(--on); } .rail-item:hover .rail-pill { background: var(--surface-cont); color: var(--on-variant); } .rail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius); } /* The active screen is a filled pill behind the glyph, the way M3 marks a navigation destination -- not a border, which would shift the label. */ .rail-pill { display: grid; place-items: center; width: 50px; height: 29px; border-radius: var(--radius-pill); color: var(--shell-ink); transition: background var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .rail-glyph { display: grid; place-items: center; } .rail-item.is-active { color: var(--on); font-weight: 500; } .rail-item.is-active .rail-pill { background: var(--primary-cont); color: var(--on-primary-cont); } .rail-label { display: block; white-space: nowrap; } .rail-foot { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } .rail-action { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius-pill); background: var(--surface-cont); color: var(--on-variant); cursor: pointer; transition: background var(--motion-short) var(--easing); } .rail-action:hover { background: var(--surface-high); } .rail-action:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Who is signed in, as one letter. The whole string -- principal and role -- is the `title`, and the Dashboard's right pane says it in full. */ .rail-avatar { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-pill); background: var(--surface-est); color: var(--on); font: inherit; font-size: var(--text-5); font-weight: 500; cursor: pointer; text-transform: uppercase; } .rail-avatar.is-static { cursor: default; } .rail-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* --------------------------------------------------------------- topbar -- */ /* One row, fixed height, on every screen. The left half says where you are and how you got there; the right half is the save cluster, which holds its slot whether or not there is anything to save -- so the place a change is committed never moves from screen to screen. */ .topbar { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 56px; padding: 0 var(--pane-x) 0 22px; border-bottom: 1px solid var(--hairline); } .topbar h1 { margin: 0; flex: 0 0 auto; font-size: var(--text-12); font-weight: 500; letter-spacing: -.015em; } /* The trail into a screen. The screen's own name stays in the

on the left and the crumbs append to it, so the way back out is always the leftmost thing rather than something that moved. */ .crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .crumbs:empty { display: none; } .crumb-sep { display: grid; place-items: center; color: var(--fainter); } .crumb { background: transparent; border: 0; padding: 0; font: inherit; font-size: var(--text-9); color: var(--dim); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb { transition: color var(--motion-short) var(--easing); } .crumb:hover { color: var(--on); } .crumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* The last crumb is where you are, so it carries the colour that means "this is the thing you are looking at" and is not a button. */ .crumb.is-current { color: var(--accent-2); cursor: default; } .screen-meta { flex: 0 1 auto; font-family: var(--mono); font-size: var(--text-3); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The save cluster, at the right of every header. Three items that were three different heights: a bare span with no control height at all, a Discard button at `--control-h`, and Save at `--control-h-lg`. Read left to right that is a stepped line rather than a cluster. They share the tallest of the three now, so the state reads as part of the control group it describes rather than as text that happens to sit beside it. The other half of the unevenness was motion: Discard is only there while something is staged, and it was `hidden`, so the whole cluster changed width as you moved between screens and the Save button slid left. Its slot is reserved instead -- see `.is-reserved` -- and nothing in this corner moves any more. */ .topbar-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: 0 0 auto; } .topbar-right .ghost { height: var(--control-h-lg); } /* Present, and holding its space, but neither seen nor reachable: hidden this way an element keeps its box, and `visibility` takes it out of the tab order and the accessibility tree exactly as `hidden` would. */ .is-reserved { visibility: hidden; } /* Quiet when nothing is pending, which is most of the time -- switches apply on click with an undo snackbar, and only the forms that stage edits ever light this up. */ .save-state { display: inline-flex; align-items: center; height: var(--control-h-lg); font-size: var(--text-4); color: var(--faint); white-space: nowrap; } .save-state.is-dirty { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); } .save-state.is-dirty::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--warn); } .save-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-lg); padding: 0 var(--control-x-lg); border: 0; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font: inherit; font-size: var(--text-6); font-weight: 500; cursor: pointer; } .save-btn:disabled { background: var(--surface-cont); color: var(--fainter); cursor: default; } .save-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .save-btn [data-icon] { display: grid; place-items: center; } .pill { font-family: var(--mono); font-size: var(--text-5); color: var(--dim); background: var(--surface-cont); border: 1px solid var(--edge); border-radius: var(--radius-pill); padding: var(--chip-y) var(--chip-x); } /* Widened from `button.ghost` when the Context screen needed one of these to be an anchor: its export endpoint sets its own filename, and an ordinary navigation carries the session cookie, so a link is the honest element for it. A second near-identical block for `a.ghost` is exactly the duplication the one styling rule exists to prevent -- the two would drift, and the one that drifted would be the one nobody was looking at. */ .ghost { background: transparent; /* An anchor is inline and would sit on the text baseline beside the buttons; the buttons are already inline-flex boxes. */ display: inline-flex; align-items: center; text-decoration: none; border: 1px solid var(--edge); color: var(--dim); border-radius: var(--radius-pill); height: var(--control-h); padding: 0 var(--control-x); font: inherit; font-size: var(--text-5); cursor: pointer; transition: color var(--motion-short) var(--easing), border-color var(--motion-short) var(--easing); } .ghost:hover { color: var(--on); border-color: var(--surface-est); } .ghost:disabled { opacity: .45; cursor: default; } .ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* --------------------------------------------------------------- panels -- */ main { flex: 1 1 auto; min-height: 0; display: flex; } /* Every screen is the same three columns: what to show, the thing itself, and the one row you picked. A screen differs from its neighbour in what it puts in those columns and never in whether it has them -- which is what lets a reader who has learned one screen navigate all eight. */ .panel { display: none; flex: 1 1 auto; min-width: 0; } .panel.is-active { display: flex; } /* ------------------------------------------------------------- sub-nav -- */ /* The permanent second column. On a list screen it holds that list's filters and sorting; drilled into a row it holds that row's setting sections with the way back at its top. It is never a bar above the list, because a bar takes width from the thing it filters and moves every time the filters change shape. */ .subnav { flex: 0 0 216px; min-width: 0; display: flex; flex-direction: column; background: var(--surface-nav); border-right: 1px solid var(--hairline); } .subnav:empty { display: none; } .subnav-head { flex: 0 0 auto; padding: var(--space-3); /* One control's worth, whether or not it holds one -- see `subnav` in console-core.js for why an empty head is the right answer on the one screen that has nothing to put in it. The `1px` is the border below: `box-sizing` is border-box everywhere, so a min-height that left it out would come up exactly one pixel short of a head that has a control in it, and the column under it would sit a pixel high on that one screen. */ min-height: calc(var(--control-h) + var(--space-3) * 2 + 1px); border-bottom: 1px solid var(--hairline); } .subnav-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--space-2) 9px var(--space-4); } /* ------------------------------------------------------ the column's foot -- Where a SLICE'S ACTIONS live. "Enable shown" and "Disable shown" act on whatever this column narrowed to, so they sit under the filters that built it -- and the count on the group's own label is what says how many the gesture will reach. Not on the list's caption bar. The caption bar *describes* what is on screen, and an action there reads as "enable this list" instead of "enable what I just narrowed to", which are different sets the moment a filter is on. So no bulk action goes on `.pane-bar`. Other buttons still sit there on some screens -- Refresh, Export, the Memories screen's Add -- and none of those acts on a filtered set. */ .subnav-foot { flex: 0 0 auto; padding: var(--space-2) 9px var(--space-3); border-top: 1px solid var(--hairline); } /* An action row, not a filter: it does something rather than narrowing the list. The glyph is what says so, and it is the only thing in this column that takes an ink brighter than the shell's. */ .subnav-item.is-act { color: var(--dim); } .subnav-item.is-act:hover { color: var(--on); } .subnav-item.is-act > [data-icon] { color: var(--primary); } .subnav-item.is-act.is-off > [data-icon] { color: var(--faint); } .subnav-item.is-act > [data-icon] { display: grid; place-items: center; flex: 0 0 auto; } .subnav-item.is-act > [data-icon] svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } /* Nothing on screen it could reach, or a token that may not switch things. No hover either: a row that lights up under the pointer is offering itself. */ .subnav-item.is-act:disabled, .subnav-item.is-act:disabled:hover { color: var(--faint); background: transparent; cursor: default; } /* The group's label carries the count the gesture reaches, at the right edge where every filter row above it keeps its own count. Full opacity on the number: the title already dims to .72, and the rule below would dim the count again inside it. */ .subnav-foot .subnav-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .subnav-foot .subnav-title .subnav-n { opacity: 1; } .subnav-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--control-x); background: var(--surface-cont); border-radius: var(--radius-pill); color: var(--faint); } .subnav-search [data-icon] { display: grid; place-items: center; flex: 0 0 auto; } .subnav-search [data-icon] svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } .subnav-search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; padding: 0; font-family: var(--mono); font-size: var(--text-3); color: var(--on); } .subnav-search input::placeholder { color: var(--fainter); } .subnav-search input:focus { outline: none; } .subnav-search:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; } .subnav-title { padding: 9px var(--control-x) 5px; font-size: var(--text-1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--shell-ink); } .subnav-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-h); padding: 0 var(--control-x); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--shell-ink); font: inherit; font-size: var(--text-5); text-align: left; cursor: pointer; transition: background var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .subnav-item > .subnav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subnav-item:hover { color: var(--on); background: var(--surface-cont); } /* A row that leaves this screen rather than narrowing it. The chevron is the only thing that says so, so it is what moves on hover. */ .subnav-item.is-go > [data-icon] { display: grid; place-items: center; flex: 0 0 auto; margin-left: 2px; margin-right: -2px; color: var(--fainter); transition: transform var(--motion-short) var(--easing), color var(--motion-short) var(--easing); } .subnav-item.is-go > [data-icon] svg { width: 14px; height: 14px; } .subnav-item.is-go:hover > [data-icon] { color: var(--dim); transform: translateX(2px); } .subnav-item.is-on { background: var(--secondary-cont); color: var(--on-secondary-cont); font-weight: 500; } .subnav-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .subnav-n { flex: 0 0 auto; font-family: var(--mono); font-size: var(--text-1); color: var(--shell-ink); } .subnav-item.is-on .subnav-n { color: var(--on-secondary-cont); } /* Scoped to the column, because `.subnav-n` is borrowed by the right pane's side labels for the same "quiet count" job -- and the right pane is content, which stays violet. The ancestor is what says "this one is in the shell". */ .subnav .subnav-title, .subnav .subnav-n { color: var(--shell-ink); opacity: .72; } /* A filter row that carries its own control. The row is a