/* A trading terminal, not a document. * * Three things drive every decision below. The first is density: the numbers * on this page are read at a glance, often while something is going wrong, and * a figure that needs scrolling to reach is a figure that was not there when it * was wanted. The second is that the same page is read one-handed, outdoors, on * a phone -- so density is bought out of padding and layout, never out of tap * targets or type size. The third is restraint: on a dark ground, every border, * fill and shadow competes with the figures, so the surfaces are separated by * the quietest thing that still separates them and nothing else. * * Dark first. The light palette is still here and still complete, under a * `prefers-color-scheme: light` query; the dark one is the default because it * is what this thing is looked at in. * * `--surface`, `--text`, `--muted`, `--border`, `--accent`, `--ok` and * `--danger` are read by charts.js and handed to the charting library, whose * `fade()` understands `#rgb` and `#rrggbb` and nothing else. Those seven stay * hex -- which is why `--border` is written as the hex that a 6% white rule * resolves to over a card, rather than as the `rgb(255 255 255 / 0.06)` it is * conceptually. The two are the same colour; only one of them can also be a * gridline. * * One typeface, at one scale, stated once: * * page title 20px / 600 section label 11px / 600 / tracked / upper * metric 28px / 600 body 14px * * The monospace face is for prices, quantities and code. It is never used for * a label, because a label is a word and words are not columns. */ :root { color-scheme: dark light; /* -- surfaces. Four steps, and every one of them is meant to be *seen*. The sheet used to run from #0d1117 to #232a33 and the whole platform read as one flat sheet with lines drawn on it: the page, the cards and the tiles were separated by a border and by nothing else, so a card with a quiet border was a card that was not there. The whole ramp moves up a step and spreads, and the border comes up with it. --bg #161b22 the page --surface #1c2128 a card, a panel, a chart pane -- the objects --surface-2 #242930 *above* a card: the recommended plan, an open drawer's head, the lit top of a metric tile, the raised face of an outlined button --surface-3 #2d323b the lit inset a control, a meter track or a tile's own top edge is set in The numbers are a sequence, not a rank -- `--surface` is what charts.js reads for a pane and cannot be renamed without renaming it there too, so the step above a card is the one that had to keep the number 2. Read the list rather than the digits. */ --bg: #161b22; --surface: #1c2128; --surface-2: #242930; --surface-3: #2d323b; /* A 10% white rule over a card, and a 15% one where a box has to hold its own edge against the page -- an input, a picker, a button that is not filled. It used to be 6%, which is a hairline you have to look for; a card whose edge cannot be found is a card that is not there. Written as hex for charts.js -- the gridlines are this colour at 60% -- so it is the hex a 10% white rule resolves to over `--surface`, rather than the `rgb(255 255 255 / 0.1)` it is conceptually. */ --border: #33373e; --border-strong: #3d434c; --text: #e8eaed; --muted: #9aa0a6; /* The third rank, and it is deliberately almost unused. It measures 3.6:1 against a card, which is under the 4.5:1 a sentence needs -- so it is not allowed on one. The footnotes, hints and timestamps that a third rank is usually reached for all take `--muted` instead, which is 6.5:1 and still reads as quiet. What is left for this is marks whose meaning is carried by something beside them: the pip's dot, which also says its state in the colour of its word. A rank that cannot hold a sentence is not a text colour, and pretending otherwise is how a palette ends up unreadable in daylight. */ --dim: #6b7280; --accent: #4d90f8; --accent-soft: rgb(77 144 248 / 0.1); --accent-line: rgb(77 144 248 / 0.35); /* Text laid on the accent. White on #4d90f8 is 3.2:1 and fails at body size; this is 6:1 and passes. A saturated blue carrying near-black is also what the fill looks like on every terminal this is modelled on. */ --on-accent: #0a1020; /* Profit, loss, caution. Standard values on purpose: this is the one part of the palette a reader arrives already knowing, and a house green is a green somebody has to learn. */ --ok: #22c55e; --ok-bg: rgb(34 197 94 / 0.12); --warn: #f59e0b; --warn-bg: rgb(245 158 11 / 0.12); --danger: #f15c5c; --danger-bg: rgb(241 92 92 / 0.12); --idle: #9aa0a6; --idle-bg: rgb(255 255 255 / 0.06); --unknown-bg: rgb(255 255 255 / 0.06); /* -- the plan a rail's foot is badged with. Three tiers and a fourth state for an account on none of them, and the colour is the whole of the signal: the word beside it is the plan's own label, which on a 240px rail is two syllables the eye skips. `--plan-pro` is a violet and is *not* `--accent-2`. That one is decoration -- the palette says so where it is declared, and it measures 4.1:1 -- and this one carries a word, so it is a lighter step held to the same 4.5:1 floor as every other rank that lands under text. 6.4:1 over the page, and the rail's own gradient is lighter than the page rather than darker, so the badge only ever gets more contrast than that. Grey for free rather than for nothing: an account with no plan at all is the fourth case and takes the badge's default border and `--muted`, so "free" and "no plan" do not read as the same thing. */ --plan-free: #9aa0a6; --plan-free-bg: rgb(255 255 255 / 0.06); --plan-basic: #4d90f8; --plan-basic-bg: rgb(77 144 248 / 0.12); --plan-pro: #a78bfa; --plan-pro-bg: rgb(167 139 250 / 0.14); /* -- series colours, for a chart that draws more than one thing. Assigned in this order and never cycled: slot 1 is whichever pair sorted first, and it stays slot 1 when a second pair appears, because a colour that follows rank rather than identity repaints every line the moment the set changes. Read by rti.js off the stylesheet, like the seven above. Checked rather than chosen: each step sits inside the dark mode's lightness band, clears the chroma floor, clears 3:1 against `--surface`, and neighbouring slots stay apart under simulated protanopia and deuteranopia. Colour is never the only channel anyway -- each series is drawn in its own pane with its pair named above it. */ --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; /* -- one spacing scale, so a gap somewhere is the same gap everywhere. */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; /* -- one radius scale. A card, a control, a badge: three sizes, and nothing invents a fourth. */ --radius: 8px; --radius-sm: 6px; --radius-xs: 4px; /* The panel radius, for the surfaces that are read as objects rather than as boxes: the landing page's cards and the pricing columns. */ --radius-lg: 14px; --tap: 44px; --rail: 240px; --rail-collapsed: 56px; /* -- type. */ --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-title: 1.25rem; --fs-metric: 1.75rem; --fs-body: 0.875rem; --fs-sm: 0.8125rem; --fs-xs: 0.75rem; --fs-label: 0.6875rem; /* No drop shadows on the dark theme: over a near-black ground they read as smudge rather than as lift, and the border already says where the box ends. The token survives because the light theme still wants one. */ --shadow: none; /* The two exceptions, which are not lift but occlusion: a thing floating over the page has to prove it is over it. */ --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.5); /* -- the effects layer. Every glow, gradient and lift on this platform resolves to one of the tokens below, and the palette is the only place any of them is written down. That is the same bargain the colours already make: a shadow typed into a rule is a shadow the light theme cannot answer, and a glow written three ways is three glows. The gradients pair the brand blue with a violet. The violet is decoration only -- it never carries a reading, never lands under text, and never appears in the palette a chart is handed -- so it is not held to the contrast floor the seven text ranks are. */ --accent-2: #8b5cf6; --accent-grad: linear-gradient(135deg, #4d90f8 0%, #6366f1 50%, #8b5cf6 100%); --accent-grad-lit: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #a78bfa 100%); /* A wide ramp for the animated fills, which slide a 300%-wide background across a box rather than interpolating stops -- gradient stops are not animatable, and a background-position slide is composited. */ --accent-ramp: linear-gradient(100deg, #4d90f8, #8b5cf6, #22d3ee, #4d90f8); /* The filled button's own gradient, and the reason it is not `--accent-grad`: a label sits on this one. `--on-accent` clears 4.5:1 against the accent and against anything *lighter* than it, and fails against the indigo and violet the decorative ramp passes through. So the button ramps towards white and never away from it. */ --btn-grad: linear-gradient(135deg, #4d90f8 0%, #74aefb 100%); --btn-grad-lit: linear-gradient(135deg, #74aefb 0%, #9cc7fd 100%); /* What a panel does under a pointer, and it is the same thing on both themes now: `--glow`, a lit 1px edge and a 0.15 bloom around it with no offset in either, so a raised panel reads as light coming off it rather than as a shadow cast under it. `--glow-lit` is the same halo at hover strength. There was a `--lift` here, a black drop shadow for the panels; it went when the last rule that set it took the halo instead, which is the whole of the dark theme's argument about shadows applied to the one place that was still making an exception to it. */ --glow: 0 0 0 1px rgb(77 144 248 / 0.3), 0 0 28px rgb(77 144 248 / 0.15); --glow-lit: 0 0 0 1px rgb(77 144 248 / 0.55), 0 0 40px rgb(77 144 248 / 0.28); /* The focus ring, named rather than typed: it is the one box-shadow that appears on every control on the platform. */ --focus-ring: 0 0 0 3px rgb(77 144 248 / 0.28); --focus-ring-danger: 0 0 0 3px rgb(241 92 92 / 0.28); /* The inset hairline that turns a flat fill into a lit surface. */ --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 60%); --sheen-strong: linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 55%); /* Frosted glass. The fill is what a browser without `backdrop-filter` gets, so it is opaque enough to read on its own; the blur is the enhancement. Two of them, because there are two grounds being frosted. `--glass` is a *card* -- it resolves to `--surface` over the page, and its alpha is high enough that the mesh behind it cannot drag it back down to the page colour, which is the whole failure the surfaces above were re-stepped to fix. `--glass-page` is the top bar, which is the page itself with content running under it and must not read as a panel laid across the top. */ --glass: rgb(30 36 45 / 0.9); --glass-page: rgb(22 27 34 / 0.8); --glass-solid: #1d232c; --glass-line: rgb(255 255 255 / 0.1); /* The semantic glows. `text-shadow`, not `box-shadow`: what glows is the figure, and a box around a P&L would be a second rectangle inside a tile that is already one. */ --glow-text-ok: 0 0 18px rgb(34 197 94 / 0.45); --glow-text-danger: 0 0 18px rgb(241 92 92 / 0.45); --glow-text-accent: 0 0 22px rgb(77 144 248 / 0.4); /* The neon rank, and the landing page is the only thing that gets it. Three layers rather than one, because the sample report's headline figure is set at twice the size of the tiles around it and a single 18px halo at that size reads as a glyph that is out of focus rather than as light coming off one: the tight layer keeps the edge, the middle one is the glow, and the wide one is what the tile it sits in picks up. A dashboard where every P&L did this would be a dashboard where none of them stood out. */ --glow-text-ok-neon: 0 0 6px rgb(34 197 94 / 0.55), 0 0 18px rgb(34 197 94 / 0.4), 0 0 44px rgb(34 197 94 / 0.22); /* The page's ground. A mesh rather than a flat fill -- three very wide radials that never resolve into shapes, which is the whole point: it should read as depth and never as a picture. */ --mesh: radial-gradient(70rem 40rem at 12% -8%, rgb(77 144 248 / 0.09), transparent 60%), radial-gradient(60rem 36rem at 96% 4%, rgb(139 92 246 / 0.07), transparent 62%), radial-gradient(50rem 40rem at 50% 108%, rgb(34 211 238 / 0.045), transparent 60%); } @media (prefers-color-scheme: light) { :root { --bg: #eef1f5; --surface: #ffffff; --surface-2: #f6f8fa; --surface-3: #e9edf2; --border: #d8dee6; --border-strong: #c3ccd7; --text: #12151a; --muted: #5b6675; --dim: #6b7280; --accent: #1f5fd0; --accent-soft: rgb(31 95 208 / 0.1); --accent-line: rgb(31 95 208 / 0.35); --on-accent: #ffffff; --ok: #12764a; --ok-bg: rgb(18 118 74 / 0.1); --warn: #8a5300; --warn-bg: rgb(138 83 0 / 0.1); --danger: #b3261e; --danger-bg: rgb(179 38 30 / 0.1); --idle: #4a5261; --idle-bg: rgb(16 24 40 / 0.06); --unknown-bg: rgb(16 24 40 / 0.06); /* The three plan colours, stepped for a white card rather than flipped. The violet darkens to 6.3:1 over the page here, where the dark theme's lightens to 6.4:1 over its own -- the same reading, arrived at from the opposite end. */ --plan-free: #5b6675; --plan-free-bg: rgb(16 24 40 / 0.06); --plan-basic: #1f5fd0; --plan-basic-bg: rgb(31 95 208 / 0.12); --plan-pro: #6d28d9; --plan-pro-bg: rgb(109 40 217 / 0.12); --shadow: 0 1px 2px rgb(16 24 40 / 0.06); --shadow-pop: 0 12px 32px rgb(16 24 40 / 0.14); /* The same eight, stepped for a white surface rather than flipped from the dark ones. Slots 3, 4 and 5 sit under 3:1 here, which is why the pane label and the current value are text next to every line rather than a legend swatch: the reading never depends on telling two lines apart by colour. */ --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; /* The effects layer, answered for a white ground rather than inverted from the dark one. A glow over white is a tint and a bloom, not a halo: the same rule that reads as light in a dark room reads as dirt in a bright one, so the opacities come down: the halo is a tint and a bloom here rather than the light it is over near-black. */ --accent-2: #6d28d9; --accent-grad: linear-gradient(135deg, #1f5fd0 0%, #4f46e5 50%, #6d28d9 100%); --accent-grad-lit: linear-gradient(135deg, #1a52b8 0%, #4338ca 50%, #5b21b6 100%); --accent-ramp: linear-gradient(100deg, #1f5fd0, #6d28d9, #0e7490, #1f5fd0); /* White on this accent, so the ramp darkens rather than lightens. */ --btn-grad: linear-gradient(135deg, #1f5fd0 0%, #1a52b8 100%); --btn-grad-lit: linear-gradient(135deg, #1a52b8 0%, #164aa6 100%); --glow: 0 0 0 1px rgb(31 95 208 / 0.3), 0 0 24px rgb(31 95 208 / 0.15); --glow-lit: 0 0 0 1px rgb(31 95 208 / 0.5), 0 0 32px rgb(31 95 208 / 0.22); --focus-ring: 0 0 0 3px rgb(31 95 208 / 0.22); --focus-ring-danger: 0 0 0 3px rgb(179 38 30 / 0.22); --sheen: linear-gradient(180deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 60%); --sheen-strong: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 55%); --glass: rgb(255 255 255 / 0.92); --glass-page: rgb(246 248 250 / 0.8); --glass-solid: #ffffff; --glass-line: rgb(16 24 40 / 0.1); /* A glowing figure on white is a blurred figure. The semantic glows are kept in the palette so the rules that use them need no theme branch, and set to nothing at all here. */ --glow-text-ok: none; --glow-text-danger: none; --glow-text-accent: none; --mesh: radial-gradient(70rem 40rem at 12% -8%, rgb(31 95 208 / 0.07), transparent 60%), radial-gradient(60rem 36rem at 96% 4%, rgb(109 40 217 / 0.05), transparent 62%), radial-gradient(50rem 40rem at 50% 108%, rgb(14 116 144 / 0.04), transparent 60%); } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/1.5 var(--sans); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; /* The ground is not flat. See `body::before`. */ position: relative; } /* The mesh, as a fixed layer behind everything rather than as a background on the body itself. `background-attachment: fixed` is the obvious way to write this and the wrong one: it is repainted on every scroll frame on a phone, and iOS ignores it outright inside a scrolling container. A fixed pseudo-element is composited once and costs nothing to scroll past. Inert in every sense -- no pointer events, behind the stacking order, and `aria-hidden` by virtue of being a pseudo-element. Nothing on the page reads it, so nothing is lost when a browser declines to paint it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mesh); } /* -- motion -------------------------------------------------------------- * * Five keyframes, and every one of them is a loop that a reader is meant to * stop noticing after the first cycle. Nothing here moves layout: they animate * `opacity`, `transform` and `background-position`, which are the three the * compositor can do without laying the page out again. A dashboard that * dropped frames while a P&L was moving would be a dashboard that animated the * wrong properties. * * All of it is switched off at the foot of this sheet under * `prefers-reduced-motion`, which is why none of it may ever be the only thing * that carries a meaning. */ /* An accent halo breathing behind a mark. Opacity and scale only. */ @keyframes aura { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.08); } } /* A wide gradient slid across its own box. Gradient *stops* cannot be interpolated; a background three times wider than the box, walked from one end to the other, is how a gradient is animated without repainting it. */ @keyframes ramp { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } /* The quietest of them: the rail's mark, lit and unlit. */ @keyframes breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } } /* What an accordion body does when it is opened. A fade with a few pixels of travel, so the panel arrives rather than appearing. */ @keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* A dot that is telling you something is live. The halo is repeated in every frame, and that is the load-bearing part: an animated `box-shadow` *replaces* the one the rule set, so a keyframe list carrying only the ring would leave the pulsing dot dimmer at rest than the still one beside it -- the pip's own `0 0 8px` glow switched off for the whole of the animation. The ring expands past a lamp that stays lit. */ @keyframes ping { 0%, 100% { box-shadow: 0 0 8px rgb(34 197 94 / 0.6), 0 0 0 0 rgb(34 197 94 / 0.5); } 70% { box-shadow: 0 0 8px rgb(34 197 94 / 0.6), 0 0 0 5px rgb(34 197 94 / 0); } } /* -- the landing page's four, and they are all atmosphere: nothing below carries a reading, so the page is complete when the reduced-motion rule at the foot of this sheet switches every one of them off. Each one is written so that its *stopped* state is the state the rule already declares -- an orb at its resting offset, a beam parked off the left edge of its own line, a bloom at the middle of its range. An animation whose first frame is the only frame that looks right is an animation that breaks the page for the reader who asked not to see it. */ /* An orb, drifting. Twenty pixels over twenty-odd seconds, which is slow enough that it is never caught moving and only ever noticed as a page that is not quite still. Two of them, in opposite phase, so four orbs sharing one keyframe set do not rise and fall as one object. */ @keyframes drift { 0%, 100% { transform: translateY(-20px); } 50% { transform: translateY(20px); } } @keyframes drift-back { 0%, 100% { transform: translateY(18px); } 50% { transform: translateY(-18px); } } /* A bright spot travelling along a one-pixel rule. Thirty seconds for one pass, and the seams are given staggered negative delays below so the five of them are never lit at the same moment -- five beams in step would read as the page refreshing rather than as the page breathing. */ @keyframes beam { 0% { background-position: -30% 0, 0 0; } 100% { background-position: 130% 0, 0 0; } } /* The stats bar's scan. The pass itself is three seconds and the cycle is nine, so the strip is still for twice as long as it is swept: a highlight that arrived every three seconds without a rest is a strip that flickers in the corner of the eye of somebody reading the section below it. */ @keyframes scan { 0% { background-position: -80% 0; } 33% { background-position: 180% 0; } 100% { background-position: 180% 0; } } /* The bloom behind the call to action. The range is a pair of custom properties rather than two keyframe sets, so the hover can widen it without restarting the pulse -- the same argument the ramp's `animation-duration` makes one rule further down. */ @keyframes bloom { 0%, 100% { opacity: var(--bloom-lo); } 50% { opacity: var(--bloom-hi); } } a { color: var(--accent); } h1, h2, h3, h4 { letter-spacing: -0.011em; } /* Almost every `` on this dashboard holds an identifier somebody else chose -- a contract, an instance id, a strategy name, a vault fingerprint -- and none of them carry a break opportunity. In a card 296px wide that is the difference between a page and a page that scrolls sideways. */ code { font-family: var(--mono); font-size: 0.92em; overflow-wrap: anywhere; } /* Except in the guide's rule trees, which are pre-formatted and scroll inside their own box on purpose; see `.guide__code`. */ .guide__code code { overflow-wrap: normal; } .muted { color: var(--muted); } .small { font-size: var(--fs-sm); } /* The quietest rank, for a sentence that qualifies a panel rather than being one. `.muted.small` together is what the templates already write for it. */ .muted.small { color: var(--muted); } .neg { color: var(--danger); } .pos { color: var(--ok); } .tone-ok { color: var(--ok); } .tone-warn { color: var(--warn); } .tone-danger { color: var(--danger); font-weight: 600; } .tone-unknown, .tone-idle { color: var(--muted); } /* Every figure on this dashboard is a number in a column of numbers. */ dd, td, .metrics dd, .chip, .badge { font-variant-numeric: tabular-nums; } /* A price, a quantity, a size. The one place the monospace face is used outside ``, and it is used for the reason monospace exists: so that a column of figures lines up on the decimal without a table telling it to. */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* The keyboard's way past the navigation, on every page. Off-screen until it is focused, which is the only time it is of use to anybody. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 60; padding: var(--s2) var(--s3); background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .skip:focus { left: var(--s3); top: var(--s3); } /* -- the shell ---------------------------------------------------------- * * A fixed rail and a column of content beside it. The rail is `fixed` rather * than `sticky` because it is the full height of the viewport at every scroll * position, and because that is what lets the content column own the whole * scroll -- one scrollbar on the page, not two side by side. * * Three widths, and the middle one is the interesting one: * * >= 64rem the rail, 240px, labelled * 48-64rem the rail, 56px, icons only -- a tablet is wide enough to keep * navigation on screen and too narrow to spend 240px on it * < 48rem off-canvas, over the content, with a scrim * * The open state is a checkbox, not a script. Everything else on this * dashboard that discloses -- the tabs, the split controls, the settings * accordions -- is CSS-only for the same reason: the navigation of a trading * dashboard is not something to lose because a bundle did not arrive. */ .nav-switch { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; /* Not `display: none` and not `pointer-events: none`: it is the control, and a keyboard has to be able to reach and toggle it. */ } .shell { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--rail); display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s2); /* Still the ground rather than a panel -- but a lit one. The gradient runs from a shade above the page colour at the top to the page colour itself at the foot, which is what stops a 240px column of flat near-black reading as a hole beside the content. It resolves to `--bg` at both ends of the scale, so the rail and the page never disagree about where the edge is: the hairline does that, and the glow beside it is what makes the hairline look intentional rather than like a seam. */ background: linear-gradient(180deg, rgb(255 255 255 / 0.035) 0%, rgb(255 255 255 / 0) 42%), /* The landing page's own mesh, narrowed to a 240px column: an accent bloom behind the mark at the top and a violet one at the foot, both wide enough that neither ever resolves into a shape. It is the same ground the hero is painted on, which is what makes the rail read as part of the product rather than as a chrome bar bolted to the side of it. */ radial-gradient(24rem 20rem at 50% -10%, rgb(77 144 248 / 0.14), transparent 65%), radial-gradient(20rem 24rem at 30% 108%, rgb(139 92 246 / 0.1), transparent 68%), var(--bg); border-right: 1px solid var(--border); /* The lit edge. An inset rule rather than a second border, so it cannot widen the rail and cannot be undone by the collapse at tablet width. */ box-shadow: inset -1px 0 0 var(--glass-line); overflow-y: auto; overscroll-behavior: contain; } .sidebar__brand { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s2); } /* The mark, at the height the row already was. The same 36px survives the collapse to a 56px rail, which is the point of using the mark here and the lockup nowhere in the shell: it is the one thing up here that still reads once the labels are gone. `width: auto` off a square file is 36px either way; it is written so a re-cut file cannot stretch the row. */ .sidebar__brand img { display: block; height: 36px; width: auto; /* Lit rather than moved. A mark that changed size on a loop would drag the row's baseline with it forty times a minute; opacity and a halo do not lay anything out. `drop-shadow` rather than `box-shadow` because the file has transparency in it and a box glow would light its bounding box. */ filter: drop-shadow(0 0 10px rgb(77 144 248 / 0.35)); animation: breathe 4.5s ease-in-out infinite; } .sidebar__nav { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sidebar__nav a { display: flex; align-items: center; gap: var(--s2); /* 36px under a mouse. A coarse pointer takes the full target back, below. */ min-height: 36px; padding: 0 12px; font-size: var(--fs-body); font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); position: relative; /* The active item's left edge. Transparent rather than absent, so lighting it does not move the label by three pixels. */ border-left: 2px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } /* The icons. Attribute selectors rather than a class on each anchor, and a mask rather than an ``: the glyph then takes `currentColor`, so it lights with the label instead of needing a second copy in the accent. */ .sidebar__nav a::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / 16px 16px no-repeat; mask: var(--icon) center / 16px 16px no-repeat; opacity: 0.9; } .sidebar__nav a[href="/"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='3' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='3' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7.5' height='7.5' rx='1.5'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/instances"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='2'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1'/%3E%3Cpath d='M9.5 2.5v2M14.5 2.5v2M9.5 19.5v2M14.5 19.5v2M2.5 9.5h2M2.5 14.5h2M19.5 9.5h2M19.5 14.5h2'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/strategies"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.75 2.75 7.5 12 12.25 21.25 7.5 12 2.75Z'/%3E%3Cpath d='m2.75 12.5 9.25 4.75 9.25-4.75'/%3E%3Cpath d='m2.75 17 9.25 4.75L21.25 17'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/backtest"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.25 2.75v16.5a1.5 1.5 0 0 0 1.5 1.5h16.5'/%3E%3Cpath d='m7 15.25 3.75-4.5 3 2.75 4.5-6'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/credentials"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.75' cy='15.75' r='4.5'/%3E%3Cpath d='m11 12.5 8.25-8.25M16.5 6.75 19 9.25M13.75 9.5l2.5 2.5'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/account"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/admin/users"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.75 4.75 5.5v6c0 4.4 3 8.4 7.25 9.75 4.25-1.35 7.25-5.35 7.25-9.75v-6L12 2.75Z'/%3E%3C/svg%3E"); } .sidebar__nav a[href="/guide"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.25 4.75A2.5 2.5 0 0 1 6.75 2.25h13v16h-13a2.5 2.5 0 0 0-2.5 2.5v-16Z'/%3E%3Cpath d='M4.25 18.25a2.5 2.5 0 0 1 2.5-2.5h13'/%3E%3C/svg%3E"); } .sidebar__nav a[aria-current="page"] { color: var(--text); font-weight: 600; /* The fill fades out across the row rather than filling it evenly: the weight belongs at the lit edge, and a flat accent rectangle 240px wide is louder than the page it is pointing into. */ background: linear-gradient(90deg, var(--accent-soft), rgb(77 144 248 / 0)); border-left-color: var(--accent); /* Square against the rule and rounded away from it: the fill reads as something attached to the edge of the rail rather than a floating pill. */ border-radius: 0 var(--radius-sm) var(--radius-sm) 0; /* The glow on that edge. Inset and 2px wide, sitting exactly under the border, so it lights the rule rather than adding a second one. */ box-shadow: inset 2px 0 8px -2px rgb(77 144 248 / 0.7); } @media (hover: hover) { .sidebar__nav a:hover { color: var(--text); background: linear-gradient(90deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02)); } .sidebar__nav a[aria-current="page"]:hover { background: linear-gradient(90deg, var(--accent-soft), rgb(77 144 248 / 0.04)); } } /* Who is signed in, and the way out. Pushed to the bottom of the rail by the margin rather than by a spacer element. */ .sidebar__foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s1); } .sidebar__user { display: flex; align-items: center; gap: var(--s2); padding: 0 12px; min-width: 0; } .sidebar__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; } .sidebar__who { min-width: 0; } .sidebar__name { display: block; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The role and the plan on one line under the name. Wrapping rather than truncating: at 240px "administrator" and a plan badge do not always fit across, and a clipped role is worse than a second line. */ .sidebar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); min-width: 0; } .sidebar__role { font-size: var(--fs-xs); color: var(--muted); } /* The plan, badged by tier. The colour is the signal and the word is the confirmation -- never the colour alone, which is the rule every other mark on this dashboard is held to. Smaller than a `.badge` because it sits in a 24px row beside a role, and the inner glow rather than a fill so a lit pill on a lit rail still reads as a pill. */ .sidebar__plan { display: inline-block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.05rem 0.4rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap; } .sidebar__plan--free { border-color: var(--border-strong); background: var(--plan-free-bg); color: var(--plan-free); } .sidebar__plan--basic { border-color: var(--accent-line); background: var(--plan-basic-bg); color: var(--plan-basic); box-shadow: inset 0 0 8px rgb(77 144 248 / 0.22); } .sidebar__plan--pro { border-color: rgb(167 139 250 / 0.45); background: var(--plan-pro-bg); color: var(--plan-pro); box-shadow: inset 0 0 8px rgb(167 139 250 / 0.26); } .sidebar__foot .btn { justify-content: flex-start; padding: 0 12px; min-height: 36px; font-weight: 500; } .sidebar__foot form { display: block; } /* The scrim behind the open drawer. Present at every width and inert until the drawer is open, which is what lets it fade rather than appear. */ .nav-scrim { position: fixed; inset: 0; z-index: 39; background: rgb(3 6 12 / 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; } .main { margin-left: var(--rail); min-width: 0; } /* The strip above the content. On a phone it carries the drawer's handle and the brand; at every width it carries the live-updates pip, which is the one piece of state that belongs to the whole page rather than to any panel on it. Sticky, because "is this still live" is asked from halfway down a long page, which is exactly where an unpinned indicator is not. */ .appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s2); min-height: 36px; padding: var(--s3) var(--s5) 0; /* Opaque, because content scrolls under it, and borderless: on a wide screen this is the page's top gutter with a status pip in the corner of it, not a bar. It becomes a real bar on a phone, where it also carries the drawer's handle -- see the narrow-screen block. */ background: var(--bg); } /* Frosted where it can be. On a wide screen this bar is the page's top gutter and the blur is barely visible; on a phone it is a real bar with content running under it, which is where it earns its keep. Opaque fallback above, like the cards. */ @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) { .appbar { background: var(--glass-page); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .appbar__toggle, .appbar__brand { display: none; } .appbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .appbar__toggle { align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin-left: calc(var(--s2) * -1); border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; } .appbar__toggle::before { content: ""; width: 20px; height: 20px; background: currentColor; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3.5 6.5h17M3.5 12h17M3.5 17.5h17'/%3E%3C/svg%3E"); -webkit-mask: var(--icon) center / 20px 20px no-repeat; mask: var(--icon) center / 20px 20px no-repeat; } .appbar__brand { align-items: center; } /* Smaller than the rail's, because this bar is 36px tall and the mark is sharing it with a drawer handle and the live pip. */ .appbar__brand img { display: block; height: 28px; width: auto; } /* The checkbox is off-screen, so the thing that shows it has focus is the handle it is labelled by. */ .nav-switch:focus-visible ~ .shell .appbar__toggle { outline: 2px solid var(--accent); outline-offset: -2px; } /* -- the tablet rail. Wide enough to keep navigation on screen, too narrow to spend 240px on it: the labels go and the icons stay. The text is not removed -- `font-size: 0` leaves it in the document, so the accessible name of every link is still its word rather than its picture. */ @media (min-width: 48rem) and (max-width: 63.99rem) { .sidebar { width: var(--rail-collapsed); padding-left: var(--s1); padding-right: var(--s1); } .main { margin-left: var(--rail-collapsed); } .sidebar__nav a { justify-content: center; padding: 0; font-size: 0; gap: 0; border-left-width: 0; border-radius: var(--radius-sm); } /* The fill goes flat and the left rule goes with the labels: on a 40px row a gradient that fades out over 240px is one flat colour anyway, and a 2px rule down the edge of an icon-only square reads as a clipped box. The inner glow stays, so the row is still lit rather than merely tinted. */ .sidebar__nav a[aria-current="page"] { border-radius: var(--radius-sm); background: var(--accent-soft); box-shadow: inset 0 0 10px rgb(77 144 248 / 0.3); } /* The plan badge goes with the name it qualifies -- `.sidebar__who` is already hidden here, and this is inside it. Written anyway, because the row's `justify-content: center` is what a stray 30px pill would fight. */ .sidebar__meta { justify-content: center; } .sidebar__brand { justify-content: center; padding: 0; } .sidebar__user { justify-content: center; padding: 0; } .sidebar__who, .sidebar__foot .btn span { display: none; } /* The row's `font-size: 0` zeroes its children too, and one of them is not a label: the dot that says this account has no second factor. It is the reason the Account link is worth looking at, so it is given its size back and moved to the corner the label no longer occupies. */ .sidebar__nav a .dot { position: absolute; top: 5px; right: 9px; font-size: 12px; } .sidebar__foot .btn { justify-content: center; padding: 0; font-size: 0; } .sidebar__foot .btn::before { content: ""; width: 16px; height: 16px; background: currentColor; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3.75h4.25a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5H15'/%3E%3Cpath d='m10 8-4 4 4 4M6 12h9.5'/%3E%3C/svg%3E"); -webkit-mask: var(--icon) center / 16px 16px no-repeat; mask: var(--icon) center / 16px 16px no-repeat; } } /* -- the phone. The rail comes off the canvas and returns as a drawer over the content, with a scrim behind it. 200ms, which is long enough to read as a movement and short enough not to be a wait. */ @media (max-width: 47.99rem) { .sidebar { transform: translateX(-100%); transition: transform 0.15s ease; box-shadow: var(--shadow-pop); } .main { margin-left: 0; } .appbar { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); } .appbar__toggle, .appbar__brand { display: inline-flex; } .nav-switch:checked ~ .shell .sidebar { transform: none; } .nav-switch:checked ~ .shell .nav-scrim { opacity: 1; visibility: visible; } /* Nothing behind the drawer scrolls while it is open. */ .nav-switch:checked ~ .shell { overflow: hidden; height: 100vh; } } /* A coarse pointer takes the full target back, at every width. The rail is 36px because it is read with a mouse; a phone and a tablet with a touch screen are not, and that is not what the density is bought out of. */ @media (pointer: coarse) { .sidebar__nav a, .sidebar__foot .btn { min-height: var(--tap); } } .page { max-width: 90rem; margin: 0 auto; padding: var(--s4) var(--s5) 4rem; } /* The guide is prose. A 1400px measure is unreadable, whatever the rest of the dashboard wants. */ .page--prose { max-width: 56rem; } .page__title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--s4); } .crumb { margin: 0; font-size: var(--fs-sm); } /* The back link is the most-pressed control on every page that has one, and on a phone it is pressed one-handed at the top of the screen. It gets a real target rather than the 17px an inline anchor is by default. */ .crumb a { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap); color: var(--muted); text-decoration: none; } .crumb a::before { content: "\2190"; } @media (hover: hover) { .crumb a:hover { color: var(--text); } } .footer { max-width: 90rem; margin: 0 auto; padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); } /* -- the layout grid ---------------------------------------------------- * * One class, used everywhere two panels belong beside each other. Everything * inside gets `min-width: 0` because a grid track's default minimum is its * content, and a contract id is wider than half a phone. */ .cols { display: grid; gap: var(--s4); align-items: start; } .cols > * { min-width: 0; } /* Cards inside a grid are spaced by the grid, not by their own margin. */ .cols > .card, .cols > * > .card:last-child { margin-bottom: 0; } .cols--2 { grid-template-columns: 1fr; } @media (min-width: 60rem) { .cols--2 { grid-template-columns: 1fr 1fr; } } /* The overview's 2x2. The live region is `display: contents` so the two panels the websocket swaps sit in the same grid as the two it does not -- a wrapper with a box of its own would make them one cell between them. */ .dash__live { display: contents; } .dash > .banner, .dash__live > .banner { grid-column: 1 / -1; } /* -- cards ------------------------------------------------------------- */ /* A lit fill, a hairline, and a lit top edge. * * The fill is a very shallow sheen over the surface colour rather than the * flat colour alone: on a near-black ground an unlit rectangle reads as a hole * cut in the page, and the whole reason the panels are separated at all is so * the figures on them are read as belonging together. * * The top edge is a pseudo-element rather than a `border-image`, and that is * the load-bearing choice. `border-image` replaces the whole border, so a card * with a gradient top would lose the hairline down its other three sides -- * and those are what say where the box ends. This paints one gradient rule * over the top border instead, inset by the corner radius at both ends so it * fades out before the curve rather than being clipped by it. */ .card { position: relative; background: var(--sheen), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card::before { content: ""; position: absolute; top: -1px; left: var(--radius); right: var(--radius); /* Two pixels, which is the weight `.status` and `.metric--hero` already use for the same mark. At one it was a hairline sitting on a hairline border and the two read as one slightly paler line. */ height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); } /* Frosted, where the browser has it. Deliberately an enhancement rather than the design: the fill above is opaque and complete, and everything below only swaps it for a translucent one *once* the blur that makes translucency legible is known to exist. Without the guard, a browser with no `backdrop-filter` would render the panels as plain transparency over a gradient mesh, which is the one way to make a dashboard of figures harder to read rather than easier. */ @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) { .card { background: var(--sheen), var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } /* The lift. Two pixels, which is enough to read as a response and not enough to move a figure somebody is in the middle of reading -- and the edge takes the accent while it is raised, so the panel under the pointer is the one thing on the page wearing the brand colour. The halo is `--glow`: a lit 1px edge and a 0.15 bloom with no offset in either, which is light coming off a panel rather than a shadow cast under it. Pointer only: there is no hover on a phone, and a lift that stuck after a tap would leave one panel on the page permanently raised. */ @media (hover: hover) { .card:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--glow); } } .card--stale { opacity: 0.85; border-style: dashed; } /* The sign-in card is not a panel in a grid of panels -- it is the page. It keeps the surface and gives up the lift and the lit edge, because there is nothing beside it for either to distinguish it from. */ .card--narrow::before { content: none; } @media (hover: hover) { .card--narrow:hover { transform: none; box-shadow: none; border-color: var(--border); } } /* The signed-out pages: one card, centred on the page colour, with the brand above it. No illustration and no marketing -- this is the door to something that moves money, and it should read like one. */ .auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s5) var(--s4); } /* The full lockup, in the three places that get one: the landing page, the sign-in door and the guide. All three are pages a reader can reach without having been told what this is, which is the whole argument for spending the tagline on them and for giving the rail the bare mark instead. Sized together because they are the same object doing the same job -- and kept as one rule so the phone size below cannot be undone by whichever of them the sheet declares last. */ .auth__brand, .guide__brand, .landing__logo { display: block; width: 100%; max-width: 400px; height: auto; } /* Centred over a centred card; left-aligned over left-aligned prose. */ .auth__brand { margin: 0 auto var(--s5); } .guide__brand { margin: 0 0 var(--s4); } @media (max-width: 47.99rem) { .auth__brand, .guide__brand, .landing__logo { max-width: 280px; } } .card--narrow { width: 100%; max-width: 23rem; margin: 0 auto; padding: var(--s5); background: var(--surface-2); } .card--narrow h1 { margin: 0 0 var(--s4); font-size: 1.0625rem; font-weight: 600; } .auth__foot { margin: var(--s4) auto 0; max-width: 23rem; text-align: center; } /* Panel headings. `h3` is a section label -- Positions, Working orders, Trade log -- and reads as one: 11px, tracked, and quiet enough that the numbers under it are what the eye lands on. `h2` is a result and stays a heading. */ .card > h2, .card > h3, .card > form > h2 { margin: 0 0 var(--s3); } .card > h2, .card > form > h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; } /* `.card__label` is the same eyebrow for a heading the child selector cannot reach -- one nested inside a column of a grid, say. */ .card > h3, .card__label { margin: 0 0 var(--s3); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } /* The guide's own headings are headings, not panel labels. Written with the element as well as the class so they outrank `.card > h3` rather than tying with it and losing on source order. */ h2.guide__heading, h3.guide__heading { font-size: 1.0625rem; font-weight: 600; text-transform: none; letter-spacing: -0.015em; color: var(--text); } /* The child combinator plus the one place a subheading is legitimately a step further down: a long form inside a card divides itself into named parts, and its `h4` is the same heading as one sitting directly in the card. Without the second selector it renders at the browser's default 1.5em with the browser's default margins, which on the notification panel is a subheading twice the size of the panel's own title. */ .card > h4, .card form > h4 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-body); font-weight: 600; } .card > p:last-child { margin-bottom: 0; } /* A 1400px card is the right width for a table of figures and the wrong one for a sentence. The panel keeps the width; its prose does not. */ .card p, .card li, .accordion__body p { max-width: 84ch; } /* The bots list: a grid of bot cards rather than a column of them. Four across on a wide screen, one on a phone, and no arithmetic anywhere -- `auto-fill` with a sane minimum decides. */ .cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s4); } .cards > .card { margin-bottom: 0; } /* A bot card is a link to a bot, so it answers a pointer more strongly than a panel does: the accent halo as well as the lift. */ @media (hover: hover) { .cards > .card:hover { border-color: var(--accent-line); box-shadow: var(--glow); } } .card__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 1.0625rem; font-weight: 600; text-decoration: none; color: var(--text); min-height: var(--tap); } .card__chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0.2rem 0; } .card__detail { margin: var(--s2) 0 0; font-size: var(--fs-sm); } .panel__header { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-start; justify-content: space-between; } .panel__title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .panel__detail { margin: var(--s2) 0 0; font-size: var(--fs-sm); } /* -- the instance header row -------------------------------------------- * * Name, badges, status and every control on one line, because on this page * they are one thought: what this bot is, and what can be done to it. */ .inst__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); } .inst__id { flex: 1 1 16rem; min-width: 0; } .inst__meta { margin: 0.15rem 0 0; font-size: var(--fs-xs); color: var(--muted); } /* -- chips, badges, banners -------------------------------------------- */ /* Pill-shaped, and lit from inside in its own colour. The fill was always the status; the inset glow is the same fill concentrated at the edges, which is what stops a 10px word on a dark ground reading as flat ink. */ .chip { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; background: var(--unknown-bg); color: var(--muted); white-space: nowrap; } .chip--ok { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 8px rgb(34 197 94 / 0.28); } .chip--warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 8px rgb(245 158 11 / 0.28); } .chip--danger { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 8px rgb(241 92 92 / 0.28); } .chip--idle { background: var(--idle-bg); color: var(--idle); box-shadow: inset 0 0 8px rgb(255 255 255 / 0.06); } .badge { display: inline-block; font-family: var(--sans); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap; } .badge--live { border-color: rgb(241 92 92 / 0.5); background: var(--danger-bg); color: var(--danger); font-weight: 700; /* The loudest badge on the platform: this bot is trading real money. It gets the inner glow *and* an outer one, which is the only place on the dashboard both are used together. */ box-shadow: inset 0 0 10px rgb(241 92 92 / 0.35), 0 0 12px rgb(241 92 92 / 0.22); } /* Accent rather than a status colour. Read-only is not a fault and not an alarm -- it is a deliberate configuration -- but it does change what every other number on the card means, so it has to be the thing the eye lands on after the name. */ .badge--readonly { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 10px rgb(77 144 248 / 0.28); } /* Who placed an order. Accent for the operator's own, because in a table of mostly-strategy rows the exception is what has to be findable; the bot badge deliberately keeps the default muted border, so a page of them reads as texture rather than as forty highlighted rows. Not a status colour either way: a manual order is neither a warning nor a fault. */ .badge--manual { border-color: var(--accent-line); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 10px rgb(77 144 248 / 0.2); } .badge--strategy { color: var(--muted); } /* A rule down the left edge rather than a full tinted box: a banner is read next to the panel it qualifies, and four saturated rectangles in a column are what a page of warnings looks like when nobody reads any of them. */ .banner { border-radius: var(--radius-sm); padding: var(--s3); margin: var(--s3) 0; border: 1px solid var(--border); border-left: 2px solid var(--border-strong); background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.55; } .banner p { margin: 0.4rem 0 0; } .banner p:first-child { margin-top: 0; } .banner ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .banner--ok { background: var(--ok-bg); border-color: var(--border); border-left-color: var(--ok); } .banner--warn { background: var(--warn-bg); border-color: var(--border); border-left-color: var(--warn); } .banner--danger { background: var(--danger-bg); border-color: var(--border); border-left-color: var(--danger); } .banner--info { background: var(--surface-2); border-left-color: var(--accent); } .card > .banner:first-child { margin-top: 0; } /* -- metrics ------------------------------------------------------------ * * The row this dashboard is opened for. Every variant below is the same * reading at a different weight: a label above, a figure under it, aligned on * the decimal because they are read down a column as often as across a row. */ .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--s2); margin: var(--s4) 0 0; } .metrics > div { min-width: 0; } .metrics dt { color: var(--muted); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metrics dd { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; /* The `dt` above is clipped to an ellipsis; the `dd` must not be, because it is the figure. So it is allowed to break instead -- and it needs to be told it may, because a formatted money value has no break opportunity in it at all. `-$12,345.67` at the headline size is wider than a backtest result tile on a 375px screen, and without this it does not wrap, it does not clip, it simply extends past the tile and takes the width of the page with it. A wrapped P&L is ugly; a report page that scrolls sideways is the thing being traded away for it. */ min-width: 0; overflow-wrap: anywhere; } /* The same reading, packed to the left instead of stretched into equal columns. A four-figure row spread across 1400px reads as four unrelated panels; the point of `--compact` is that it is one line of figures. */ .metrics--compact { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); } .metrics--compact dd { font-size: 0.9375rem; } /* The quieter row under a reading: things that qualify the figures rather than being them. A flex row rather than a grid, so five short values sit next to each other instead of being stretched into five equal columns across 1400px -- which reads as five unrelated panels rather than one footnote. */ .metrics--meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s4); } .metrics--meta dd { font-size: var(--fs-body); } /* The tiled row -- the terminal strip. Each figure in a box of its own, which is what turns eight numbers from a paragraph of numbers into a row that can be read across. 12px of padding rather than 16: these are compact by intention, and the figure is what the space is for. */ .metrics--tiles { /* 7rem rather than 8: at 320px the card is 264px wide inside its padding, and 8rem tiles are one pixel too wide to sit two abreast -- which turns a row of readings into a column of them on the narrowest screen there is. */ grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; /* The tiles are separated by the grid gap showing the border colour through, not by eight separate outlines: one strip with hairlines in it reads as a row, and eight bordered boxes read as eight cards. */ background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); /* A ring rather than a shadow. The strip clips its children, so an *inset* shadow on it would be painted over by the first tile's own fill and an offset one would put a smudge under a console. A zero-offset hairline of light sits outside the border and simply lifts the whole instrument off the panel. */ box-shadow: 0 0 0 1px rgb(255 255 255 / 0.05); overflow: hidden; } .metrics--tiles > div { padding: var(--s3); /* Each tile lit from its own top edge. The strip is one object -- the gap between the tiles is the strip's background showing through -- so the gradient has to be per-tile for the row to read as instruments in a console rather than as one long panel with rules drawn on it. */ background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%); border: 0; transition: background 0.15s ease, box-shadow 0.15s ease; } /* The panels' hover answer, in the one form a tile can take it. The strip clips its children, so the halo a card gets outside its border would be cut off at the first hairline: the tile lifts a step instead and lights its own top edge in the accent, which is the same reading from inside the box. */ @media (hover: hover) { .metrics--tiles > div:hover { background: linear-gradient(180deg, var(--surface-3), var(--surface-2) 70%); box-shadow: inset 0 2px 0 rgb(77 144 248 / 0.55); } } .metrics--tiles dd { font-size: 1.125rem; font-weight: 600; } /* The glow is on the figure, in the figure's own meaning. `--glow-text-*` is `none` under a light theme, where a bloomed number is just a blurred one -- so these rules need no theme branch of their own. */ .metrics--tiles dd.pos, .metrics--headline dd.pos { text-shadow: var(--glow-text-ok); } .metrics--tiles dd.neg, .metrics--headline dd.neg { text-shadow: var(--glow-text-danger); } /* The one figure the page exists to report. Twice the size of the tiles around it and coloured by its sign, because the first question is never "how much" -- it is "up or down". It also gets the console's one lit tile: an accent wash under the figure and a rule along its top edge. Both are decoration over a reading that is already carried by size, colour and position, which is what makes it safe for either to be switched off. */ .metric--hero { grid-column: span 2; position: relative; } .metrics--tiles > .metric--hero { background: linear-gradient(180deg, rgb(77 144 248 / 0.1), rgb(77 144 248 / 0.02) 60%), linear-gradient(180deg, var(--surface-3), var(--surface) 70%); } @media (hover: hover) { .metrics--tiles > .metric--hero:hover { background: linear-gradient(180deg, rgb(77 144 248 / 0.2), rgb(77 144 248 / 0.05) 60%), linear-gradient(180deg, var(--surface-3), var(--surface-2) 70%); box-shadow: none; } } .metrics--tiles > .metric--hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-grad); opacity: 0.9; } .metric--hero dd { font-size: var(--fs-metric); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; /* The hero figure glows even when it is neither up nor down -- a flat zero is still the number the page was opened for. `.pos` and `.neg` above override it with the colour that means something. */ text-shadow: var(--glow-text-accent); } /* The headline block of a backtest: six figures, three across and two down on anything wider than a phone, two across below that. Stated rather than auto-fit, because these six are the result and a row of eight thin columns is not how a result should read. */ .metrics--headline { grid-template-columns: repeat(2, 1fr); } @media (min-width: 48rem) { .metrics--headline { grid-template-columns: repeat(3, 1fr); } } /* A backtest's six figures are the result the page was opened for, so they are set at the figure size the rest of the product uses for one rather than a step under it. */ .metrics--headline dd { font-size: var(--fs-metric); font-weight: 600; letter-spacing: -0.02em; } /* And they are six panels rather than six cells of one instrument. * * That is the difference between this block and the bot page's strip, and it * is a difference in what is being read. The strip is eight live readings of * one running thing, glanced across in one movement, so it is one object with * hairlines in it. These six are the *result* of a finished run -- read one at * a time, compared against another run's, screenshotted into a message -- and * each one is its own answer. So the strip's shared background and clipped * corners come off, and each tile takes the card treatment the rest of the * platform uses for a thing that is its own object: frosted fill, hairline, * lit top edge, and a lift under a pointer. */ .metrics--headline { gap: var(--s3); background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .metrics--headline > div { position: relative; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--sheen), var(--surface); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) { .metrics--headline > div { background: var(--sheen), var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .metrics--headline > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--accent-line), transparent); } @media (hover: hover) { .metrics--headline > div:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--glow); background: var(--sheen), var(--surface); } } /* Exposure against its cap. Still a hairline rather than a block -- it qualifies the figure above it and must not out-weigh it -- but a lit one: the track is sunk into the tile and the fill is a ramp that runs cyan to violet across the cap, so how full the bar is reads from its colour as well as from its length. One pixel taller than it was, which is what the ramp needs to be visible as a ramp at all. */ .meter { height: 4px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4); overflow: hidden; margin: var(--s2) 0 0; } .metrics--tiles .meter { margin: var(--s2) 0 0; } .meter__fill { height: 100%; /* The default ramp, for the bars that are progress rather than a reading -- a backtest's tick count is not closer to anything bad at 90%. The three semantic bands below are what a *cap* gets. */ background: linear-gradient(90deg, #22d3ee, #4d90f8 55%, #8b5cf6); border-radius: 999px; box-shadow: 0 0 10px rgb(77 144 248 / 0.5); transition: width 0.15s ease, background 0.15s ease; } /* A bar drawn against a cap, in the colour of how close to it this is: green under two thirds, amber past it, red at it. The band comes off the same fraction the width does, so the two channels cannot disagree -- and the width is still the one that carries the reading, which is what a reader who cannot separate the three colours is left with. The tone is on the track rather than on the fill so an empty bar in a red state is still visibly the bar of something that has reached its cap. */ .meter--ok .meter__fill { background: linear-gradient(90deg, #16a34a, var(--ok)); box-shadow: 0 0 10px rgb(34 197 94 / 0.45); } .meter--warn .meter__fill { background: linear-gradient(90deg, var(--ok), var(--warn) 85%); box-shadow: 0 0 10px rgb(245 158 11 / 0.5); } .meter--danger .meter__fill { background: linear-gradient(90deg, var(--ok), var(--warn) 55%, var(--danger)); box-shadow: 0 0 10px rgb(241 92 92 / 0.55); } /* Widths as classes rather than inline styles: the page's CSP has no unsafe-inline, which blocks style attributes outright. */ .meter__fill--0 { width: 0%; } .meter__fill--5 { width: 5%; } .meter__fill--10 { width: 10%; } .meter__fill--15 { width: 15%; } .meter__fill--20 { width: 20%; } .meter__fill--25 { width: 25%; } .meter__fill--30 { width: 30%; } .meter__fill--35 { width: 35%; } .meter__fill--40 { width: 40%; } .meter__fill--45 { width: 45%; } .meter__fill--50 { width: 50%; } .meter__fill--55 { width: 55%; } .meter__fill--60 { width: 60%; } .meter__fill--65 { width: 65%; } .meter__fill--70 { width: 70%; } .meter__fill--75 { width: 75%; } .meter__fill--80 { width: 80%; } .meter__fill--85 { width: 85%; } .meter__fill--90 { width: 90%; } .meter__fill--95 { width: 95%; } .meter__fill--100 { width: 100%; } /* -- the backtest's progress bar ---------------------------------------- */ /* The one bar on the platform that is watched rather than read. A replay is minutes long, and the question somebody is holding this page open to answer is not "how far" but "how much longer" -- so this is a bar, a line of figures and a sentence, and the sentence is the part that answers it. Wider and louder than `.meter`, which is the 4px reading a metric tile carries. This is the subject of its own card. */ .progress { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0 0; } .progress__track { height: 6px; border-radius: 999px; background: var(--surface-3); /* Inset, so the track reads as a channel cut into the card rather than as a grey bar laid on it. An offset shadow here would be a smudge; see the sheet's rule about drop shadows. */ box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4); overflow: hidden; } .progress__fill { height: 100%; /* 1% of width, out of two classes rather than out of a `style` attribute: the page's Content-Security-Policy has no `unsafe-inline`, so an inline width is dropped and the bar reads zero for ever. `--bar-tens` and `--bar-units` are set by the twenty-one classes below and added up here. The fallbacks are load-bearing: a `calc()` with an unresolved custom property in it is invalid at computed-value time and takes the whole declaration with it, so a bar rendered without its classes would be full width rather than empty. */ width: calc((var(--bar-tens, 0) + var(--bar-units, 0)) * 1%); border-radius: 999px; /* The accent ramp, walked along a background three times the width of the box. Gradient stops are not animatable; a background-position slide is, and it is composited. The movement is the point: a bar whose width has not changed for forty seconds because the chunk in flight is a big one still has to look like something is happening. */ background: var(--accent-ramp); background-size: 300% 100%; animation: ramp 3s linear infinite; box-shadow: 0 0 10px rgb(77 144 248 / 0.5); transition: width 0.3s ease; } /* A finished run keeps its bar and loses its motion. The animation is what says "in flight", so leaving it running under a result would be the page saying two different things about the same run. */ .progress--final .progress__fill { animation: none; background: linear-gradient(90deg, #22d3ee, #4d90f8 55%, #8b5cf6); } /* The figures. Percentage first because it is what the bar above it just said, the counts pushed to the other end, and both on one line -- this is a caption for the bar, not a second reading of it. */ .progress__line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0; font-size: var(--fs-sm); } .progress__percent { font-variant-numeric: tabular-nums; font-size: var(--fs-body); font-weight: 700; color: var(--text); } .progress__counts { font-variant-numeric: tabular-nums; color: var(--muted); } /* The sentence. What is being replayed, how far through it is, and how much longer -- the three clauses somebody watching wants, in the order they ask for them. Separated by a middle dot rather than by three labelled fields, because at 375px a definition list of three is three rows and this is one. */ .progress__status { margin: 0; font-size: var(--fs-sm); color: var(--muted); } .progress__status strong { color: var(--text); font-weight: 600; } .bar-t0 { --bar-tens: 0; } .bar-t1 { --bar-tens: 10; } .bar-t2 { --bar-tens: 20; } .bar-t3 { --bar-tens: 30; } .bar-t4 { --bar-tens: 40; } .bar-t5 { --bar-tens: 50; } .bar-t6 { --bar-tens: 60; } .bar-t7 { --bar-tens: 70; } .bar-t8 { --bar-tens: 80; } .bar-t9 { --bar-tens: 90; } .bar-t10 { --bar-tens: 100; } .bar-u0 { --bar-units: 0; } .bar-u1 { --bar-units: 1; } .bar-u2 { --bar-units: 2; } .bar-u3 { --bar-units: 3; } .bar-u4 { --bar-units: 4; } .bar-u5 { --bar-units: 5; } .bar-u6 { --bar-units: 6; } .bar-u7 { --bar-units: 7; } .bar-u8 { --bar-units: 8; } .bar-u9 { --bar-units: 9; } /* -- the console's small marks ------------------------------------------- * * A pip, a sparkline, a proportion bar, a row of beats and a trend arrow. * Everything below is drawn by `partials/macros.html` as inline SVG or as an * empty span, and every dimension in the markup is a presentation attribute * rather than a `style` -- the dashboard's Content-Security-Policy has no * `unsafe-inline`, and a blocked style attribute is a silent failure that * leaves an instrument reading zero. * * Colour is never the only channel. A pip sits beside the word it agrees * with, a sparkline beside the figure it draws, a bar beside the number it is * a proportion of. That is what makes it safe for the pulse below to be * switched off under `prefers-reduced-motion`, and for a reader who cannot * separate green from red to lose nothing at all. */ /* The pip. Eight pixels, flush with the cap height of the word beside it, with a halo in its own colour so a lit dot on a near-black panel reads as a lamp rather than as a full stop. */ .pip { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.05em; background: var(--idle); } .pip--ok { background: var(--ok); box-shadow: 0 0 8px rgb(34 197 94 / 0.6); } .pip--warn { background: var(--warn); box-shadow: 0 0 8px rgb(245 158 11 / 0.6); } .pip--danger { background: var(--danger); box-shadow: 0 0 8px rgb(241 92 92 / 0.6); } .pip--idle, .pip--unknown { background: var(--idle); } /* The pulse, and it is only ever on a state that is *happening*: a bot that is trading, a link that is up, a halt that is in force. A stopped bot is grey and still, which is the reading. `ping` animates a zero-offset shadow ring out from the dot -- no layout, no repaint of anything but the dot itself. */ .pip--pulse.pip--ok { animation: ping 2s ease-out infinite; } .pip--pulse.pip--danger { animation: ping-danger 1.4s ease-out infinite; } .pip--pulse.pip--warn { animation: ping-warn 2s ease-out infinite; } /* Both carry the pip's halo in every frame, for the reason `ping` states. */ @keyframes ping-danger { 0%, 100% { box-shadow: 0 0 8px rgb(241 92 92 / 0.6), 0 0 0 0 rgb(241 92 92 / 0.55); } 70% { box-shadow: 0 0 8px rgb(241 92 92 / 0.6), 0 0 0 6px rgb(241 92 92 / 0); } } @keyframes ping-warn { 0%, 100% { box-shadow: 0 0 8px rgb(245 158 11 / 0.6), 0 0 0 0 rgb(245 158 11 / 0.5); } 70% { box-shadow: 0 0 8px rgb(245 158 11 / 0.6), 0 0 0 6px rgb(245 158 11 / 0); } } /* The sparkline. A stroke and nothing else -- no fill, no axis, no baseline: the figure beside it is the measurement and this is the shape. Two pixels, round-joined, and `vector-effect` so a line drawn into a box stretched by `preserveAspectRatio="none"` keeps its weight instead of being scaled into a hairline at one end and a slab at the other. */ .spark { display: block; overflow: visible; } .spark__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .spark--ok .spark__line { stroke: var(--ok); } .spark--danger .spark__line { stroke: var(--danger); } .spark--accent .spark__line { stroke: var(--accent); } .spark--idle .spark__line { stroke: var(--border-strong); } /* The wash under the stroke, where a tile asked the macro for one. It needs a rule of its own and not just a tone: an SVG shape with no `fill` declared falls back to *black*, so a polygon shipped without this reads as a solid slab across the bottom of the tile rather than as a chart. Stated as a colour and a separate opacity so the tone rules below can override the one without restating the other. */ .spark__area { fill: var(--accent); fill-opacity: 0.14; } .spark--ok .spark__area { fill: var(--ok); } .spark--danger .spark__area { fill: var(--danger); } .spark--accent .spark__area { fill: var(--accent); } .spark--idle .spark__area { fill: var(--border-strong); fill-opacity: 0.22; } /* The proportion bar. The track is the sunk inset every meter on this platform uses; the ramp is declared in user space over the whole bar in the macro, so the colour at the fill's right-hand end is where in its range the reading is -- green under two thirds, amber at it, red at the cap. */ .xbar { display: block; } .xbar__track { fill: var(--surface-3); } .xbar__lo { stop-color: var(--ok); } .xbar__mid { stop-color: var(--warn); } .xbar__hi { stop-color: var(--danger); } /* The heartbeat row. Five beats, newest at the right and brightest, fading back through the four before it -- and a beat that has not happened is drawn as an unlit socket rather than removed, so the dial is the same width at every reading. */ .beats { display: block; } .beats__dot { fill: var(--ok); } .beats--warn .beats__dot { fill: var(--warn); } .beats--danger .beats__dot { fill: var(--danger); } .beats--idle .beats__dot, .beats--unknown .beats__dot { fill: var(--muted); } .beats__dot--1 { opacity: 0.2; } .beats__dot--2 { opacity: 0.4; } .beats__dot--3 { opacity: 0.6; } .beats__dot--4 { opacity: 0.8; } .beats__dot--5 { opacity: 1; } /* An unlit socket. Drawn in the border colour rather than in a text rank: this is the shape of a beat that did not happen, and it is read against the lit dots beside it rather than on its own. */ .beats__dot--out { fill: var(--border-strong); opacity: 0.9; } /* Which way a figure went. Decoration over a reading already carried by the sign in the number and by the colour of it. */ .trend { margin-left: 0.3rem; vertical-align: 0.06em; } .trend--up path { fill: var(--ok); } .trend--down path { fill: var(--danger); } /* -- section labels ------------------------------------------------------ * * Eleven pixels, tracked, upper, with a small accent square in front. The * square is the one piece of brand colour a panel heading carries, and it is a * pseudo-element rather than a character so it cannot be read aloud or * selected with the words. */ /* Every panel label on the dashboard, not just the ones that ask for it: the eyebrow is already 11px, tracked and upper, and the square is the one piece of brand colour a section heading carries. Written over `.card > h3` and `.card__label` together, which between them are every panel label on the platform -- so a template that writes a plain `

` inside a card gets the mark without knowing about it, and there is one rule rather than a class somebody has to remember. The guide's headings opt out below. They are prose headings that happen to sit in a card, and a marker in front of every paragraph of a knowledge base is a page of bullets. */ .card > h3, .card__label { display: flex; align-items: center; gap: 0.5rem; } .card > h3::before, .card__label::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--radius-xs); background: var(--accent-grad); box-shadow: 0 0 8px rgb(77 144 248 / 0.55); } /* The one opt-out. The guide's headings are prose headings that happen to sit in a card, and a marker in front of every section of a knowledge base is a page of bullets. They already declare their own `display: flex`, so only the square has to be taken back. */ h2.guide__heading::before, h3.guide__heading::before { content: none; } /* -- the system status strip -------------------------------------------- * * Three readings across the top of the overview: this box's link to the * trading engine, the trading engine's link to the venue, and this box's own * archive. Three cards rather than three rows of a definition list, because * they are independent -- any one can be red while the other two are green -- * and a row of three is what says so. */ .statuses { display: grid; grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s3); } @media (min-width: 48rem) { .statuses { grid-template-columns: repeat(3, 1fr); } } .status { position: relative; min-width: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--surface-2), var(--surface) 72%); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* The lit top edge, in the colour of the reading rather than in the accent. Two pixels, the full width of the card: this is the one place on the platform where the state of a thing is what the gradient means. */ .status::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--idle), transparent); } .status--ok::before { background: linear-gradient(90deg, var(--ok), transparent); } .status--warn::before { background: linear-gradient(90deg, var(--warn), transparent); } .status--danger::before { background: linear-gradient(90deg, var(--danger), transparent); } @media (hover: hover) { .status:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: var(--glow); } } .status__name { display: flex; align-items: center; margin: 0; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); min-width: 0; } /* A state is a pill and a count is a number, and the distinction is the whole of the hierarchy here: "down" is one of three words a reader already knows, and a tinted pill is how it is said everywhere else on this platform -- the chip carries the tone *and* the sentence explaining it, as a `title`. A tick count is a figure and is set as one. */ .status__value .chip { font-size: var(--fs-body); padding: 0.2rem 0.6rem; letter-spacing: 0.02em; } .status__value { margin: 0.3rem 0 0; font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; } .status--ok .status__value { color: var(--ok); text-shadow: var(--glow-text-ok); } .status--danger .status__value { color: var(--danger); text-shadow: var(--glow-text-danger); } .status--warn .status__value { color: var(--warn); } .status__meta { margin: 0.15rem 0 0; font-size: var(--fs-xs); } .status-panel p + p { margin-top: var(--s2); } /* -- the bot strips ------------------------------------------------------ * * One row per bot: state and name on the left, the shape in the middle, the * figure on the right. The columns are stated rather than auto-fit, because * the whole value of this shape is that the P&L is in the same place on every * row and can be read straight down. * * The whole row is the link. There is no second control on it, so there is * nothing to miss and nothing to hit by accident. */ .strips { list-style: none; margin: var(--s3) 0 0; padding: 0; } .strip + .strip { border-top: 1px solid var(--border); } .strip--stale { opacity: 0.75; } .strip__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4); /* A real target on a phone, and the row height on a desktop. */ min-height: var(--tap); padding: var(--s2) var(--s2); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background 0.15s ease, box-shadow 0.15s ease; } @media (min-width: 48rem) { .strip__link { grid-template-columns: minmax(0, 1fr) 100px auto; } } @media (hover: hover) { .strip__link:hover { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); } } .strip__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .strip__id { display: flex; flex-direction: column; min-width: 0; } .strip__name { display: flex; align-items: center; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .strip__sub { font-size: var(--fs-xs); /* Indented past the pip, so the two lines align on the name rather than on the lamp. */ padding-left: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The sparkline column is the first thing to go when the row runs out of width: it is the shape, and the shape is the part a phone has no room for and no need of -- the figure beside it says the same thing. */ .strip__spark { display: none; } @media (min-width: 48rem) { .strip__spark { display: block; } } .strip__pnl { display: flex; align-items: center; justify-content: flex-end; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .strip__pnl.pos { text-shadow: var(--glow-text-ok); } .strip__pnl.neg { text-shadow: var(--glow-text-danger); } /* -- the activity feed --------------------------------------------------- * * Five lines of what this dashboard was asked to do. A list rather than a * table: there are three fields and one of them is a timestamp that keeps * ticking, and folding a three-column table on a phone costs more than it * buys. */ .feed { list-style: none; margin: var(--s3) 0 0; padding: 0; } .feed__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); padding: var(--s2) var(--s1); font-size: var(--fs-sm); min-width: 0; } .feed__row + .feed__row { border-top: 1px solid var(--border); } .feed__what { font-weight: 600; } .feed__row--denied .feed__what { color: var(--warn); } .feed__row--error .feed__what { color: var(--danger); } .feed__on { font-family: var(--mono); font-size: var(--fs-xs); min-width: 0; overflow-wrap: anywhere; } .feed__when { margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; } /* -- the instrument strip ------------------------------------------------ * * `.metrics--tiles` with the column count stated rather than fitted. The * bot page's eight readings are one instrument, and `auto-fit` is the wrong * tool for an instrument: at 1400px it makes ten columns and puts two empty * cells at the end of the console, and at 1100px it makes seven and wraps the * eighth onto a row of its own. Three widths, stated: * * >= 64rem eight across, one row -- the whole reading at a glance * 48-64rem four across, two rows -- a tablet's honest half of that * < 48rem two across -- the narrowest a labelled figure survives * * The hero gives up its double width here. It is the same figure it is * everywhere else on the platform and it keeps the lit tile and the accent * rule that say so, but a tile spanning two of eight columns is a strip of * nine cells, which is not a row of eight readings. */ .metrics--strip { grid-template-columns: repeat(2, 1fr); } @media (min-width: 48rem) { .metrics--strip { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 64rem) { .metrics--strip { grid-template-columns: repeat(8, 1fr); } } .metrics--strip > .metric--hero { grid-column: auto; } /* One size for all eight, and it is the figure size rather than the headline one: eight readings at 28px in a 1150px card is a row that wraps, and a strip whose tiles are different heights is not a strip. */ .metrics--strip dd, .metrics--strip > .metric--hero dd { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; } /* The mark under the figure, and it is pinned to the foot of the tile rather than hung under the number. * * That is what keeps the strip an instrument. The eight figures are different * lengths and one of them wraps on a narrow screen, so a mark spaced from the * *figure* leaves eight marks on eight different lines; spaced from the * *tile*, they are one row across the bottom of the console whatever the * numbers above them do. `margin-top: auto` in a flex column is the whole * mechanism -- it works for a 22px sparkline and a 4px bar alike, because what * is being aligned is the bottom edge. */ .metrics--strip > div { display: flex; flex-direction: column; } .tile__viz { display: flex; align-items: flex-end; height: 22px; overflow: hidden; } .metrics--strip .tile__viz, .metrics--strip .meter { margin-top: auto; } /* A meter in a tile is a mark rather than a control, so it keeps clear of the figure above it even when the tile is tall enough not to need the room. */ .metrics--strip .meter { margin-bottom: 0.55rem; } .metrics--strip .tile__viz .spark, .metrics--strip .tile__viz .beats { align-self: flex-end; } /* A tile whose reading has gone past two thirds of its cap, and one that has reached it. The tint is on the tile rather than on the figure, because what has changed is not the number -- it is how much room is left. */ .metrics--tiles > .tile--warn { background: linear-gradient(180deg, rgb(245 158 11 / 0.12), rgb(245 158 11 / 0.02) 60%), linear-gradient(180deg, var(--surface-2), var(--surface) 70%); } .metrics--tiles > .tile--danger { background: linear-gradient(180deg, rgb(241 92 92 / 0.14), rgb(241 92 92 / 0.03) 60%), linear-gradient(180deg, var(--surface-2), var(--surface) 70%); } .tile--warn dd { color: var(--warn); } .tile--danger dd { color: var(--danger); } /* The feed lamp sits on the baseline of the word beside it rather than being pushed up by the figure size the other seven tiles use. */ .metrics--strip dd .pip { vertical-align: 0.02em; } .metrics--strip dd:has(.pip) { font-size: var(--fs-body); font-weight: 600; } /* -- the control bar ----------------------------------------------------- * * One line at desktop width and no wrapping: the identity shrinks, the * controls do not move, and Start is in the same place on every bot's page. * Below 64rem it wraps again, because six 44px targets do not fit a phone and * a control bar that scrolled sideways would put the kill switch off the * right-hand edge of the one page where that matters. */ @media (min-width: 64rem) { .inst__bar { flex-wrap: nowrap; } .inst__bar .controls--inline { flex-wrap: nowrap; flex: 0 0 auto; } /* The identity is the column that gives: a long bot name ellipses, and the buttons keep their width. */ .inst__bar .inst__id { flex: 1 1 auto; } .inst__bar .inst__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* -- a chart that fills its card ---------------------------------------- * * The panes take the card's side padding back, so the chart runs to the * card's own edges. A chart inset inside a box inside a panel is three nested * rectangles and only the innermost one is carrying a reading. The heading and * the sentence under it keep the padding -- they are prose, and prose against * the edge of a panel is not readable. */ .card--chart > [data-rti] { margin: var(--s3) calc(var(--s4) * -1) 0; } .card--chart .rti__head { padding: 0 var(--s4); } .card--chart .rti__empty { padding: 0 var(--s4); } .card--chart .chart--rti { border-radius: 0; border-left: 0; border-right: 0; } /* And the card's own top edge goes from a hairline to a real 2px gradient rule, because this panel is the one on the page that is a chart rather than a table of figures. */ .card--chart::before { height: 2px; left: 0; right: 0; top: 0; /* The card does not clip its children, so a rule run to both edges has to round its own top corners or it pokes out past the panel's. */ border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent); opacity: 0.75; } /* -- blotter rows -------------------------------------------------------- * * A coloured edge per row: a position by whether it is up or down, an order * by which way it is going. An inset shadow rather than a border, so the edge * costs the row no width and the columns stay aligned down the table -- the * same trick `.row--manual` already uses one rule below. */ .grid tbody tr.row--up { box-shadow: inset 2px 0 0 var(--ok); } .grid tbody tr.row--down { box-shadow: inset 2px 0 0 var(--danger); } .grid tbody tr.row--flat { box-shadow: inset 2px 0 0 var(--border-strong); } /* A blotter, packed. The instance page shows two tables side by side inside half a page each, and the default row height is a table read as a document rather than as a ledger. The modifier is on the *card* rather than on the ``, and that is not a style preference: the responsive rules are attached to `class="grid"` and a second class in that attribute is a table the phone check cannot see. See `test_mobile.ResponsiveTableTests`. */ .card--blotter .grid { font-size: var(--fs-xs); } .card--blotter .grid th, .card--blotter .grid td { padding: 0.3rem 0.5rem; } /* The exception to the packing above. Open positions is the primary table on the bot page -- it is what the page is for -- and reading it should not feel like reading the working-orders list beside it. It keeps the blotter's card and takes back the default row height. */ .card--positions .grid { font-size: var(--fs-sm); } .card--positions .grid th, .card--positions .grid td { padding: 0.45rem 0.6rem; } /* -- the account bar ----------------------------------------------------- * * Four figures under the controls: balance, unrealised, realised today, * exposure. It is the same tile strip the status card uses -- one object with * hairlines through it rather than four boxes -- pinned to four across so the * bar keeps its shape as the window moves. `auto-fit` would reflow it to five * or three at widths where the strip below is right to. * * At 44rem it folds to two across, which is two lines of two: a phone's * account bar. Nothing is dropped -- the exposure meter and the P&L shape both * come with their tile -- because a figure that disappears on a narrow screen * is a figure somebody stops looking for on a wide one. */ .account-bar { grid-template-columns: repeat(4, 1fr); } .account-bar__item { display: flex; flex-direction: column; } /* The mark sits on the floor of the tile whatever the figure above it does, so the four meters and sparklines line up across the bar rather than stepping with the label lengths. */ .account-bar__item .tile__viz, .account-bar__item .meter, .account-bar__note, .account-bar__split { margin-top: auto; } .account-bar__item .meter { margin-bottom: 0.35rem; } .account-bar__item .tile__viz .spark { align-self: flex-end; } .account-bar__note { padding-top: var(--s1); } .account-bar__split { display: flex; flex-wrap: wrap; gap: 0 var(--s2); padding-top: var(--s1); font-size: var(--fs-xs); } @media (max-width: 44rem) { .account-bar { grid-template-columns: repeat(2, 1fr); } } /* The YES/NO leg, as a tag rather than as a word in a column of words. A binary has no short side, so this is the whole of a position's direction and it has to survive being scanned down forty rows. Bordered rather than filled: a filled chip in every row of a blotter is a second colour competing with the one the P&L column is using to mean up and down. */ .side { display: inline-block; padding: 0 0.35rem; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; color: var(--muted); } .side--yes { border-color: var(--ok); color: var(--ok); } .side--no { border-color: var(--accent); color: var(--accent); } /* -- a blotter that scrolls inside itself -------------------------------- * * For the two lists on the bot page with no natural end: closed positions and * the trade log. Both are read as "the last few" and both used to run down the * page, which is what put the settings four screens below a live position. * * A height in `rem` rather than in rows: the rows are a different height on a * phone, where each one is a block rather than a line, and a box measured in * rows would be a third of the screen on one and a tenth on the other. * * `tabindex="0"` is on the element in the markup. A scroll container that only * a wheel can reach cannot be read from a keyboard at all, and the browser * only puts a scrollable box in the tab order if it is told to. */ .blotter__scroll { max-height: 22rem; overflow-y: auto; overscroll-behavior-y: contain; border-radius: var(--radius-xs); } /* The table's own top margin would be a gap that scrolls away inside the box, and on a wide screen it would put the pinned header a quarter-inch down. */ .blotter__scroll .grid { margin-top: 0; } .blotter__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The header stays put while the rows move under it. Only on a wide screen: the phone layout hides the header row entirely and labels each cell instead, so there is nothing to pin. */ @media (min-width: 40.0625rem) { .blotter__scroll .grid thead th { position: sticky; top: 0; z-index: 1; /* The lit strip the header already carries is transparent, and rows scrolling under a transparent header read as a smear. This is the card's own fill painted behind the same gradient. */ background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0)); background-color: var(--surface); } } @media (max-width: 40rem) { /* Shorter on a phone, where every row is a block of four labelled lines and 22rem of them is most of the screen. */ .blotter__scroll { max-height: 16rem; } } /* -- tables ------------------------------------------------------------- * * A blotter. No row rules: the rows are separated by alternating fills a few * percent apart, which is enough to follow a row across nine columns and not * enough to draw a grid over the figures. The header is a label row, not a * heading. */ .grid { width: 100%; border-collapse: collapse; margin-top: var(--s3); font-size: var(--fs-sm); } .grid th, .grid td { text-align: left; padding: 0.45rem 0.6rem; } .grid thead th { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); /* A lit strip rather than a fill: the header is a label row, and a solid bar across the top of a blotter competes with the figures under it. The gradient fades to nothing before the last row of the header, so what the eye actually sees is the rule -- lit from above. */ background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0)); border-bottom: 1px solid var(--border); white-space: nowrap; } .grid thead th:first-child { border-top-left-radius: var(--radius-xs); } .grid thead th:last-child { border-top-right-radius: var(--radius-xs); } .grid tbody tr { border-bottom: 0; } .grid tbody tr:nth-child(even) { background: rgb(255 255 255 / 0.018); } @media (hover: hover) { .grid tbody tr { transition: background-color 0.15s ease, box-shadow 0.15s ease; } .grid tbody tr:hover, .grid tbody tr:nth-child(even):hover { background: rgb(255 255 255 / 0.045); /* A wash from inside the row rather than an outline around it. A ring would draw a box around one row of a blotter, which is a grid line the rest of the table deliberately does not have. */ box-shadow: inset 0 0 30px rgb(77 144 248 / 0.09); } /* The operator's own trades keep their left edge *and* take the wash. Two shadows, because the hover rule above would otherwise replace the marker with the glow on exactly the rows it matters most on. */ .grid tbody tr.row--manual:hover, .grid tbody tr.row--manual:nth-child(even):hover { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 30px rgb(77 144 248 / 0.09); } } @media (prefers-color-scheme: light) { .grid tbody tr:nth-child(even) { background: rgb(16 24 40 / 0.02); } .grid tbody tr:hover, .grid tbody tr:nth-child(even):hover { background: rgb(16 24 40 / 0.045); } } .row--differs { background: var(--warn-bg); } /* A trade an operator caused. A left edge rather than a background: the P&L cell already uses colour to mean lost money, and tinting the whole row would put two unrelated meanings on one patch of colour. This one survives being read at a glance down the side of the table, which is how the log is actually scanned. */ .row--manual { box-shadow: inset 2px 0 0 var(--accent); } /* Narrow screens: each row becomes a labelled block. No horizontal scroll, no 9-point type, nothing hidden behind a swipe. */ @media (max-width: 40rem) { .grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .grid tbody tr { display: block; padding: var(--s2) 0; border-bottom: 1px solid var(--border); } .grid tbody tr:last-child { border-bottom: 0; } .grid td { display: flex; justify-content: space-between; gap: var(--s4); padding: 0.2rem 0; border: 0; /* The values in these cells are contract ids, vault fingerprints and strategy identifiers -- thirty characters with nothing to break at. A flex item will not shrink below its content unless it is allowed to, so without this the row is wider than the card, the card is wider than the page, and every page with a table on it scrolls sideways. */ min-width: 0; overflow-wrap: anywhere; } .grid td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); /* Never shrinks and never wraps: the label is what makes a headless row readable, and a "Contract" broken over two lines to make room for the value it labels is the wrong thing to sacrifice. */ flex: 0 0 auto; } .grid td:empty { display: none; } /* The value side of the row, when a cell wraps its content in an element of its own rather than leaving it as text. */ .grid td > * { min-width: 0; overflow-wrap: anywhere; } } /* The opt-out, for the tables that are genuinely tabular -- a backtest's trades, the guide's preset comparison. Those are columns of figures that only mean anything read across, and folding one into forty labelled blocks loses the comparison that is the entire point of it. They keep their columns and scroll inside their own box, which is a swipe over the table rather than a page that moves sideways under everything else. */ .scroll-x, .guide__scroll { overflow-x: auto; overscroll-behavior-x: contain; /* The standard scroll-shadow pair, and it is the only thing that says this box scrolls at all: a phone paints no scrollbar until it is being scrolled, so a table cut off at the edge is indistinguishable from a table with nothing more in it. The `local` gradients are covers painted in the surface colour and pinned to the content, the `scroll` ones are the shadows pinned to the box -- so a cover slides away exactly as far as there is something more to see. */ background: linear-gradient(to right, var(--surface) 40%, rgb(0 0 0 / 0)) left center / 24px 100% no-repeat local, linear-gradient(to left, var(--surface) 40%, rgb(0 0 0 / 0)) right center / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0)) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0)) right center / 12px 100% no-repeat scroll; } .scroll-x > .grid, .guide__scroll .grid { min-width: 34rem; } @media (max-width: 40rem) { .scroll-x .grid thead, .guide__scroll .grid thead { position: static; width: auto; height: auto; clip: auto; } .scroll-x .grid tbody tr, .guide__scroll .grid tbody tr { display: table-row; border-bottom: 0; } .scroll-x .grid td, .guide__scroll .grid td { display: table-cell; padding: 0.45rem 0.6rem; border: 0; white-space: nowrap; } .scroll-x .grid td::before, .guide__scroll .grid td::before { content: none; } .scroll-x .grid th, .guide__scroll .grid th { white-space: nowrap; } } /* -- forms and buttons -------------------------------------------------- * * One control shape, one focus state, one set of sizes. A select, a text box, * a date field and a multi-line box are the same box with different contents, * and anything that looks like an input on this platform is one. */ .stack { display: flex; flex-direction: column; gap: var(--s4); } /* A column flex container stretches its children, which turned every Save in a `.stack` into a 1400px-wide button. The ones that are *meant* to be full width say so with `--block`, and `width: 100%` still wins there. */ .stack > .btn { align-self: flex-start; } .stack > .btn--block { align-self: stretch; } .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s4); } /* Denser variants of the same grid. `--dense` is the modifier; `.order-ticket` reaches its own `.fields` rather than carrying the modifier, because the manual order form's field grid is asserted by class in the mobile tests and a compound class would read as a different one. */ .fields--dense, .order-ticket .fields { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s3) var(--s4); } .order-ticket { gap: var(--s3); } /* The label sits above its control, always. A floating label is a label that is not there when the box has something in it, which on a form that sends an order is the moment it is most wanted. */ .field { display: flex; flex-direction: column; gap: var(--s1); } /* A field whose *value* is long, in a grid sized for fields whose values are not. `.fields` packs as many 7.5rem columns as fit, which on a 375px screen is two of about 148px -- right for a quantity, a price, YES/NO, and wrong for the two controls on the order ticket that carry a sentence: a contract is `KXBTCD-26AUG1712-B109999.99`, and an order type is "Limit — rest until filled or cancelled". A `