/* Web dashboard runtime styling (ADR 0030). The station owns the look — the palette is the app's dark/light theme so a dashboard reads the same in the in-app webview and on a remote tablet. Theme is driven by data-theme on , resolved on the host (the station's preference, never the browser's). Icons render from Fluent UI System Icons (MIT, ADR 0030 §4): a bundled MIT font, served via @font-face so the web stays OS-independent and license-clean (Segoe could not be served; this MIT set can). User SVG icon assets still render inline as . */ /* Theme comes entirely from tokens.css (ADR 0031 §5): this file reads the canonical --color-* tokens directly — no dashboard-private alias set anymore. The reset, the typography defaults and the FluentSystemIcons @font-face all live in base.css, which is always loaded before this sheet by App.razor, so they are not repeated here. The @import keeps the tokens resolvable if this sheet is ever inspected in isolation. */ @import url('tokens.css'); /* The grid fills the viewport and scales — no scroll. The casing that a crossing route paints to knock a gap out of the route below it is the STAGE tone: the stage is --color-bg windowed and full screen alike, so one declaration covers both and the gap never stops matching what shows through it. */ .dash-grid { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; isolation: isolate; --dashboard-connection-casing-color: var(--color-bg); } .dash-cell { --dash-cell-inset: 4px; position: relative; min-width: 0; min-height: 0; padding: var(--dash-cell-inset); } /* A component paints in two layers with the connection routes running between them (see the shared appearance below), and only one stacking context can interleave them: the grid, which is what orders a whole dashboard. So the cell must not open one of its own — that would collapse both layers back into a single level and bury the routes under the background again. The canvases still write the component's layer on the cell; the chrome is what turns it into the two bands. */ .dash-cell:has(> .dash-component) { z-index: auto !important; } .dash-component { width: 100%; height: 100%; overflow: hidden; } /* A Symbol's connection anchors sit ON its view-box border, so half of every edge marker falls outside this box. The clip that keeps artwork inside the cell lives one level in, on .cmp-symbol-image, which occupies the identical rect — artwork stays bounded and the anchor overlay beside it is never cut, in edit or in operation. Descendant, not child: the shared appearance wraps the view in .dash-component-body, so the artwork hangs one level deeper. */ .dash-component:has(.cmp-symbol) { overflow: visible; } /* ---- Content follows the cell ------------------------------------------------ A component is as big as the cell the operator drew it in: every surface below sizes its type in container-query height units, so dragging the resize handle grows and shrinks the text, the indicator and the button with the box instead of leaving air around a fixed 15 px. The containers are declared with the shared appearance further down — the body for the component's content, the component itself for the corner title. --cmp-scale is the knob ComponentChrome writes from the component's own column: the same multiplier-inside-the-box the Symbol's artwork transform reads, applied here to type. Each surface therefore reads clamp(, calc(cqh * var(--cmp-scale, 1)), cqh) where is the share of the box the surface takes at the neutral knob position and is the share at which its content exactly fills the box — the ceiling is what stops a long text in a wide cell from growing past its own row. 11 px is the readability floor, and the value display rule in the next section is what holds it — and what carries the knob the rest of the way, onto the size the box and the declaration resolve to together. A surface sized as a SHARE of another — the unit beside a number, the answer under a command, a label against its readout — reaches neither of those two: the family's clamp was already resolved on the parent, so nothing puts the floor under the share. Every share therefore carries the floor of its own, as max(11px, ). In a short cell the proportion stops holding — the part reads larger against its number than the drawing asks — and it reads. That size is published a second time under a name of its own: --cmp-type on the component root, the type size the whole family scales off, and --display-height on each text surface, where it is the tall end of the size the shared rule resolves. Both are registered , so container units resolve to px. Ratios between surfaces (a label against its readout) multiply --cmp-type in px instead of using em, which would resolve against the very font-size being computed. */ @property --cmp-type { syntax: ''; inherits: true; initial-value: 0px; } /* ---- Value display (ADR 0034) ------------------------------------------------ How big a text surface renders follows from what is DECLARED about it and never from the value it happens to be showing, and nothing measures text: the two rules below are the whole computation. Every surface is in one of two modes and the markup says which. AUTOMATIC (.display-auto) is the cell's answer bounded by a declared reserve — --display-reserve, the width the content needs at font size 1, computed on the host from a point's declared digits, separator, decimals and unit, or from an authored string weighted per character. STATED (.display-stated) is a size in points the operator gave, and it is literal: it renders at that size in whatever cell it lands in and is never reduced to make content fit. Keeping a stated size legible is the model's job — it clamps the points to a legible range — and this sheet does not second-guess it. Each surface states the room it has as --display-avail, a container-query width with the family's own padding taken off, and the tall end of the automatic answer as --display-height. The content-scale knob multiplies the size those two RESOLVE to — never under the readability floor, and upward only as far as the room and the family's own ceiling still hold it — so turning it moves what is on screen whichever of the two was the binding one. A family holding more than one surface publishes that line once as --display-room and each surface takes the share of it it can count on; a share stated short costs a hair of type size, where a share stated long costs an ellipsis. The size therefore depends only on the box, the declarations, the knob and the interface's own face: two cells of the same size holding the same declarations always come out the same size, and nothing that moves at the rate of the data is an input to it. What exceeds its declaration is drawn by kind, and each mark says exactly one thing. A number (.display-num) is never rendered cut: past the digits declared for it the host adds .display-over and the surface draws #### — the spreadsheet's and the DCS's mark for a field too narrow for its value — with the whole reading in the tooltip. Free text (.display-text) truncates with an ellipsis and keeps the whole of itself in the tooltip. Whether the point is READING at all is a different fact and keeps its own mark: the markup writes the gap dash as the value and tags the surface with data-ganter-quality, the same word the shared appearance takes for the frame it draws around the whole component and symbol.js writes on a symbol that lost its point. Absence of a reading and absence of room never borrow each other's mark. */ @property --display-reserve { syntax: ''; inherits: false; initial-value: 0.01; } @property --display-height { syntax: ''; inherits: false; initial-value: 0px; } /* Registered for the same reason the reserve is, and with the opposite extreme: an unregistered length missing from a surface makes the one formula below invalid at computed-value time, which drops the whole declaration and leaves the surface at whatever it inherited. Stated wide instead, a family that publishes no room of its own falls back on its height candidate — the same courtesy the reserve gets, and a legible surface rather than a silent one. */ @property --display-avail { syntax: ''; inherits: false; initial-value: 100000px; } /* The one formula, and the readability floor with the last word over it. The reserve's registered initial value is small and non-zero, so a surface whose family states no reserve keeps a defined division and lands far above any candidate height — it falls back on the height alone. The knob multiplies what the two candidates RESOLVED to, which is why it stands on the division here: the height candidate arrives carrying it already — the family's own clamp, where its ceiling is what stops the growth — so the room is the half still to take it. Downward the line gives way with everything else, which is what makes the knob visible in a cell whose WIDTH is what limits the size; on the height alone it moved nothing there. Upward the room does not give: the division IS the width the reading fits in, and past it the number would be drawn cut, which this contract never does. */ .display-auto { font-size: max( 11px, min( var(--display-height), calc(var(--display-avail) / var(--display-reserve) * min(var(--cmp-scale, 1), 1)))); } .display-stated { font-size: var(--display-size); } /* A NUMBER at a stated size answers the same rule as one in automatic mode: it is never rendered cut. The size stays literal — nothing shrinks it — so what gives way is the number itself, replaced by the mark for a field that cannot hold its value, with the whole reading in the tooltip. The comparison is a length against a length and both are known here: the reserve times the stated size is the width the reading needs AT that size, and the box is the room the family states. CSS forbids dividing a length by a length in calc, but atan2 takes two lengths and tan undoes it, which turns the difference into a plain number of pixels — positive where the field is short. Clamped, that is the switch below, exact to the pixel; and still nothing measures text, because both halves of the product are declarations. */ /* Inherited, because the mark below is drawn by a pseudo-element and a registered property that does not inherit reaches it as its initial value instead of the answer. */ @property --display-cut { syntax: ''; inherits: true; initial-value: 0; } /* The number gives way to nothing — a size of zero draws neither the digits nor the unit beside them, whatever colour either was carrying — and the field keeps the one line the mark needs. Not the line the stated size asked for: that line is taller than the cell in exactly the case this rule is for, and a mark centred in it is a mark centred below the cell's edge, which is a silent field again. */ .display-num.display-stated { position: relative; --display-cut: clamp( 0, tan(atan2(var(--display-size) * var(--display-reserve) - var(--display-avail), 1px)), 1); font-size: calc(var(--display-size) * (1 - var(--display-cut))); min-height: calc(11px * 1.4 * var(--display-cut)); } /* The mark, over the field the number left empty — the same mark, at the same readability floor, in the same place as the one automatic mode draws, so the operator reads one thing and not two. It collapses to nothing while the field can hold its number, rather than standing as an invisible box over a reading that is perfectly legible. */ .display-num.display-stated::after { content: "####"; position: absolute; left: 0; top: 0; width: calc(100% * var(--display-cut)); height: calc(100% * var(--display-cut)); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: calc(11px * var(--display-cut)); color: var(--color-text-secondary); } .display-num, .display-text { white-space: nowrap; } /* A number rests on the RIGHT of the field it reserved, in tabular figures: the separator holds its column as the integer part grows, and a column of readings lines up with itself. */ .display-num { text-align: right; font-variant-numeric: tabular-nums; } .display-num.display-over { color: transparent; position: relative; } .display-num.display-over > * { visibility: hidden; } /* The mark stands at the readability floor, which is the smallest size a number may be written in — it reports the field, not the box. A mark sized off the cell would be sized off the cell's HEIGHT, the type size every family scales from, and drawn wider than the field it is standing in. Centred in the surface and clipped to it, so a narrow cell shows what room there is rather than spilling into the next one. */ .display-num.display-over::after { content: "####"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 11px; color: var(--color-text-secondary); } /* Ellipsis needs a block container over its own inline content — each of these families is a flex container, so the text ellipsizes on the inner span it holds (a blockified flex item). */ .cmp-led .state, .cmp-label .text, .cmp-command button > .display-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The words take the whole line rather than shrinking to themselves: the line is what gives the operator's alignment something to set them in, and the whole-line box is the room the reserve is resolved against. The component's own type size is the tall end of that answer. */ .cmp-label .text { flex: 1 1 auto; min-width: 0; --display-height: var(--cmp-type); --display-avail: 100cqw; text-align: var(--label-align, left); } /* ---- Components ------------------------------------------------------------- */ /* The Label is the one surface whose composition is the operator's own: where the words sit in the cell, how big they are, what weight and slant they carry and what ink they take. Each choice arrives as a class or a custom property LabelView writes, so one rule serves every combination and no class has to multiply with another. */ .cmp-label { display: flex; align-items: var(--label-anchor, safe center); width: 100%; height: 100%; --cmp-type: clamp(11px, calc(64cqh * var(--cmp-scale, 1)), 83cqh); font-size: var(--cmp-type); } .cmp-label.is-bold { font-weight: var(--font-weight-bold); } .cmp-label.is-italic { font-style: italic; } /* The ink is the operator's PAIR — the same shape as the component's background fill: LabelView writes both halves inline and the running theme picks one here, so flipping the theme repaints without a round trip. A Label that chose no ink of its own carries neither the class nor either half, and the interface's own text colour stands. */ .cmp-label.is-inked { color: var(--label-ink-light); } [data-theme='dark'] .cmp-label.is-inked { color: var(--label-ink-dark); } .cmp-frame { width: 100%; height: 100%; border: 1px solid var(--color-stroke); border-radius: 8px; background: transparent; } .cmp-frame .frame-title { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); padding: 4px 10px; border-bottom: 1px solid var(--color-stroke); } /* The reading is the whole component, so its ceiling is a whole box: there is no caption row above it to leave space for, and a Label the operator placed beside it has a cell of its own. The room the reading has across is the cell less this family's own side padding. */ .cmp-value { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 4px 8px; --cmp-type: clamp(11px, calc(70cqh * var(--cmp-scale, 1)), 84cqh); --display-room: calc(100cqw - 16px); font-size: var(--cmp-type); } .cmp-value .readout { --display-height: var(--cmp-type); --display-avail: var(--display-room); font-weight: 600; line-height: 1.1; /* A line is centred by its BOX, and the box a font gives a line always keeps room under the baseline for descenders — room a reading never puts ink in, since figures and the unit beside them all sit ON the baseline. Centre the box and the number comes out low, with that empty descender room above it reading as a first line nothing was written on. The face here rises about 1.08 em over the baseline and hangs 0.25 em under it against figures 0.70 em tall, which leaves the ink about 0.06 em below the middle; the margin is twice that, because centring splits it between the two sides. What ends up centred is then the ink. */ margin-bottom: 0.13em; } /* A point answering in WORDS — an order, a batch, the name of a profile — reads as free text here: the declared width is its characters, and what runs past it truncates with the ellipsis rather than the number's mark, whole in the tooltip. It rests where a line of words rests, on the left, which is what the sheet already gives it: the right-hand column a separator holds is the number's rule and stays scoped to .display-num. */ .cmp-value .readout.display-text { overflow: hidden; text-overflow: ellipsis; } .cmp-value .readout[data-ganter-quality='bad'] { color: var(--color-text-secondary); } .cmp-value .unit { font-size: max(11px, 0.54em); /* em off the number, so it follows the size the number resolved to */ font-weight: 400; color: var(--color-text-secondary); margin-left: 0.15em; } /* The word for the state the reading is in, under the number it belongs to. It is a line of the cell and not an overlay, so the number above keeps every pixel that is left; it holds its height while nothing is named — the number must not grow and shrink as a reading crosses a bound — and truncates with an ellipsis, its whole word in the tooltip, because it is a name the operator typed and not a reading. Sized off the component's own type scale so it stays a register below the reading at every cell size, and never smaller than the family's floor. */ .cmp-value .state { flex: 0 0 auto; min-height: 1.2em; font-size: max(11px, calc(var(--cmp-type) * 0.26)); line-height: 1.2; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The indicator is em-sized off the component's type size, so it grows with the cell — and it is centred in it, because the indication is all there is: nothing shares the line, so a lamp pinned to one edge would be holding room for a caption that never comes. */ .cmp-led { display: flex; align-items: center; justify-content: safe center; width: 100%; height: 100%; padding: 0 8px; --cmp-type: clamp(11px, calc(54cqh * var(--cmp-scale, 1)), 76cqh); --display-room: calc(100cqw - 16px); font-size: var(--cmp-type); } /* The lamp is em off the component's type, which comes from the cell's HEIGHT — so in a tall narrow cell it would ask for more than the cell is wide. The room between the family's own side padding caps it, exactly, rather than a share picked by eye; the same expression on both axes keeps it round. */ .cmp-led .dot { width: min(1.3em, 100cqw - 16px); height: min(1.3em, 100cqw - 16px); border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--color-led-bezel); } .cmp-led .dot.hollow { background: transparent !important; border: 2px dashed var(--color-neutral); } .cmp-led .dot.blink { animation: led-blink 1s steps(1, end) infinite; } @keyframes led-blink { 50% { opacity: 0.25; } } /* The other presentation: the state written out in its own colour. A tinted face with the colour's own ink reads in both themes for every entry of the palette, which a filled one would not — white on the yellow lamp is not a state anybody reads. */ /* The face hugs its word, which is what makes it a pill and not a bar across the cell — so the sized surface is not the pill but the room around it, the whole flex line, the same box the command button's caption is given. The pill then inherits the size the line resolved to. The tall end is the share of the family type the pill always carried; under it a tall cell can no longer push the word past the cell's own width. The pill's side padding is drawn INSIDE this line and scales with the size being solved for, so it belongs to what the CONTENT needs rather than to the room: the view model adds it to the reserve (see LedComponentViewModel.TextReserve), which is the only side of the division where a share of the type size can go. Past the room the word still truncates, with the whole state in the tooltip the markup gives it. */ .cmp-led.is-label .state-room { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: safe center; --display-height: max(11px, calc(var(--cmp-type) * 0.8)); --display-avail: calc(var(--display-room) - 2px); } .cmp-led.is-label .state { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 0.08em 0.55em; border: 1px solid var(--led-ink); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--led-ink) 16%, transparent); color: var(--led-ink); font-weight: var(--font-weight-semibold); } /* Nothing to read: the dashed face is the label's hollow lamp, and the gap is already the text. */ .cmp-led.is-label .state.no-reading { border-style: dashed; border-color: var(--color-neutral); background: transparent; color: var(--color-text-secondary); } .cmp-led.is-label .state.blink { animation: led-blink 1s steps(1, end) infinite; } /* The third thing the indicator can be: reading, but reporting a code no declared state claims. It is not lit — a colour would name a state the declaration does not have — and it is not the dashed lamp either, which is the point saying nothing at all. A solid neutral ring is the answer to that pair: the point ANSWERED, and what it answered has no name here. The fill is overridden the way the hollow lamp overrides it, because the state's colour rides in on the element's own style. */ .cmp-led .dot.unclaimed { background: transparent !important; border: 2px solid var(--color-neutral); } /* The same, written: the pill keeps the solid edge that says it is reading, drops the state tint it has no state for, and holds the reading itself instead of a word nobody declared for it. */ .cmp-led.is-label .state.unclaimed { border-color: var(--color-neutral); background: transparent; color: var(--color-text-secondary); } /* A state may name a glyph, and then the glyph is the lamp. It is a mark and not writing — there is no readability floor under it, exactly as there is none under the lamp it replaces — so it is sized by the same expression the lamp is: em off the component's type, which comes from the cell's HEIGHT, capped by the room the family's own side padding leaves across it. A cell too narrow for the mark makes it small; it never makes it wider than the cell. */ .cmp-led .glyph { font-family: 'FluentSystemIcons-Resizable'; font-weight: var(--font-weight-regular); line-height: 1; flex: 0 0 auto; font-size: min(1.3em, 100cqw - 16px); } .cmp-led .glyph.blink { animation: led-blink 1s steps(1, end) infinite; } .cmp-chart { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; } /* Which mode the chart is drawing in — whether what is on screen is the measurement or a reduction of it, and which reduction. It sits in the corner opposite the toolbar so the two never meet, and it stays a mark rather than a badge: it is a fact about the drawing, not a condition to act on. The whole sentence, with the counts behind it, rides the title attribute. The corner it stands in is the left end of the row the chart's own title is drawn in, and the title gives that room up — this width, the offset it stands at and a clearance beside it — instead of being written under the mark (EChartsOptionBuilder.StateMarkRoomPx). The width is capped here for exactly that reason: a state named longer than the room ellipsizes, and the whole sentence is on the title attribute either way, rather than the mark growing back over the line the title was fitted to. */ .chart-mode { position: absolute; top: 4px; left: 6px; z-index: 5; max-width: 132px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-secondary); font-size: 10px; line-height: 15px; letter-spacing: 0.01em; opacity: 0.75; pointer-events: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bar and pie: the same column as the time chart, because both hang a note under the drawing and both give up exactly the room that note takes. They sit inside the same .chart-wrap, so the one shared toolbar can find them — told to draw only the few tools a comparison can honour, since there is no time axis to walk and no zoom to reset. */ .cmp-categorical { display: flex; flex-direction: column; width: 100%; height: 100%; } /* What a component says when a ceiling stood between the retention it was configured with and the one the station granted. It is the runtime twin of the editor's .edit-hint.is-capped and keeps that register: one quiet tinted line under the drawing, never a banner over it, because the component still works — it just keeps less than it was asked to. The full sentence rides the title attribute, so a narrow cell truncates without losing it. */ .cmp-cap-note { flex: 0 0 auto; margin-top: 2px; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--color-caution-bg); color: var(--color-caution); font-size: 11px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Occurrence episodes --------------------------------------------------- */ .cmp-occurrences { width: 100%; height: 100%; overflow: auto; border: 1px solid var(--color-stroke); background: var(--color-surface); } .cmp-occurrences .occ-header { position: sticky; top: 0; z-index: 1; padding: 4px 8px; border-bottom: 1px solid var(--color-stroke); background: var(--color-surface); font-size: 12px; font-weight: 600; } .cmp-occurrences .occ-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--color-stroke); } .cmp-occurrences .occ-row.active { border-left: 3px solid var(--color-accent); padding-left: 5px; } .cmp-occurrences .occ-title-line, .cmp-occurrences .occ-clocks { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .cmp-occurrences .occ-clocks { flex-wrap: wrap; column-gap: var(--space-3); row-gap: var(--space-2); } .cmp-occurrences .occ-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .cmp-occurrences .occ-status { flex: 0 0 auto; color: var(--color-text-secondary); font-size: 11px; } .cmp-occurrences .occ-status.active { color: var(--color-accent-text); } .cmp-occurrences .occ-clock, .cmp-occurrences .occ-signal { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .cmp-occurrences .occ-clock { color: var(--color-text-secondary); } .cmp-occurrences .occ-signal { padding: 1px 4px; border: 1px solid var(--color-caution); border-radius: var(--radius-sm); color: var(--color-text); background: var(--color-caution-bg); } .cmp-occurrences .occ-empty { padding: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); line-height: 1.4; } .cmp-occurrences .occ-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: 11px; } /* The chart's
has no intrinsic height, so it collapses to ECharts' 100px default. Force it to fill the cell; the resize tick (echart-behaviors.js / ganterChart) then sizes the canvas to match. A chart takes the room its cell leaves instead of the whole cell, because a capped retention adds a line under it; the same tick re-sizes the canvas. */ .cmp-chart > .echart, .cmp-categorical > .echart { flex: 1 1 auto; min-height: 0; width: 100% !important; } /* The dial takes the room its cell leaves rather than the whole of it, because the state the bands name is written on a line under the arc; the same resize tick sizes the canvas to match. */ .cmp-gauge > .echart { flex: 1 1 auto; min-height: 0; width: 100% !important; } /* ---- KPI card (value + mini-chart over a rolling window) --------------------- */ .cmp-kpi { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 4px 8px; --display-room: calc(100cqw - 16px); } /* A card that draws no mini-chart is its reading, so the text takes the box the drawing left instead of leaving air under it. */ .cmp-kpi.no-mini .kpi-text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; } /* The card's metrics are the card's own and not the cell's — a KPI reads as one register whatever room it was given — so the content knob meets them here, on the candidate itself, where the other families meet it in the cqh clamp they publish. */ .cmp-kpi .readout { --display-height: calc(22px * var(--cmp-scale, 1)); --display-avail: var(--display-room); font-weight: 600; line-height: 1.1; } .cmp-kpi .readout[data-ganter-quality='bad'] { color: var(--color-text-secondary); } .cmp-kpi .unit { font-size: max(11px, 0.54em); /* em off the number, so it follows the size the number resolved to */ font-weight: 400; color: var(--color-text-secondary); margin-left: 0.15em; /* the gap the reserve charges for the unit */ } /* The window's three statistics as one line. Their candidate height IS the readability floor, so at the neutral knob the line reads at 11 px in every cell and the reserve has nothing to take off it; the gap is em-based so it stays proportional to that line. The row is what they share with the state below, so the room stated here is the half of it they can count on. */ .cmp-kpi .kpi-stats { display: flex; flex: 1 1 auto; min-width: 0; gap: 0.9em; --display-height: calc(11px * var(--cmp-scale, 1)); --display-avail: calc(var(--display-room) * 0.55); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; } /* The row the two of them share: the word for the state the card is in, and the window's statistics beside it. Two boxes and not one, because the statistics stand at the floor — they have nowhere to shrink to, only the mark to stand down behind — and a word inside them would take three good numbers behind that mark. */ .cmp-kpi .kpi-stats-row { display: flex; align-items: baseline; gap: 0.9em; min-width: 0; } /* The word holds the row's height while nothing is named, so the mini-chart under it does not grow and shrink as a reading crosses a bound. It is also what gives way when the row runs short — by a wide margin, and never past a share of the line — because a name cut short still reads and can be had whole from its tooltip, where a statistic cut short would be a number shown wrong. It is a name and not a reading, so it carries the family's floor as its own size. */ .cmp-kpi .kpi-state { flex: 0 8 auto; min-width: 0; max-width: 45%; min-height: 1.2em; line-height: 1.2; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); } /* The line the difference stands on, and the carrier of what it is measured against: a number that overran its field draws the #### mark over its own box, so the box around it is where the markup names the reference and has it survive. */ .cmp-kpi .kpi-delta-row { min-width: 0; } /* The difference from the reference reads with the value, not with the window statistics: a register above them, still secondary to the reading it belongs to. */ .cmp-kpi .kpi-delta { --display-height: calc(13px * var(--cmp-scale, 1)); --display-avail: var(--display-room); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; } .cmp-kpi .kpi-mini { position: relative; flex: 1; min-height: 0; } /* Hidden rather than removed: the view releases the chart instance by naming this element, and an element already out of the document could not be named. */ .cmp-kpi.no-mini .kpi-mini { display: none; } .cmp-kpi .kpi-mini .echart { position: absolute; inset: 0; } /* What the distribution counted. Quiet and last, so it explains the bars without competing with the reading above them. */ .cmp-kpi .kpi-mini-note { flex: 0 0 auto; font-size: 10px; line-height: 1.3; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Progress (one bounded reading, drawn here and not by a chart engine) ---- */ /* Everything below is fractions of the scale the view model already placed: --len is how much of the track something takes, --at is where on it something sits, and these rules only decide which edge each one is measured from. That is what lets one set of markup serve a bar across the cell and a level column up it, in either direction. */ .cmp-progress { display: flex; flex-direction: column; justify-content: center; gap: 0.25em; width: 100%; height: 100%; padding: 4px 8px; /* The reading labels the indicator, it is not the whole of it, so its growth is capped where a bare readout's is not: what a bigger cell buys here is a longer track. */ --cmp-type: clamp(11px, calc(30cqh * var(--cmp-scale, 1)), 30px); --display-room: calc(100cqw - 16px); font-size: var(--cmp-type); /* The fill's ink arrives as the operator's pair, written inline by the view; the running theme picks the half here, and a track nobody accented takes the interface's indication ink. */ --progress-ink: var(--progress-ink-light, var(--color-accent)); } [data-theme='dark'] .cmp-progress { --progress-ink: var(--progress-ink-dark, var(--color-accent)); } .cmp-progress .progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5em; min-width: 0; } /* The pair on the head never negotiates (ADR 0034): the number takes the width it reserved, the caption takes what is left and ellipsizes, and neither is sized from the other. Each is given a share of the head as its room — the number the larger one, since it is the reading — and a share stated short costs a hair of type size where a share stated long would cost the caption its tail. */ .cmp-progress .label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; --display-height: max(11px, calc(var(--cmp-type) * 0.72)); --display-avail: calc(var(--display-room) * 0.38); color: var(--color-text-secondary); } .cmp-progress .readout { flex: 0 0 auto; --display-height: var(--cmp-type); --display-avail: calc(var(--display-room) * 0.62); font-weight: 600; line-height: 1.1; } /* The field is exactly the width that was reserved for it: 1em here is the size the rule above resolved, so the box holds the declared digits, the separator, the decimals and the unit — and holds still as the reading ticks. A stated size states no reserve and takes the room its own content needs, which is what makes it literal. */ .cmp-progress .readout.display-auto { width: calc(var(--display-reserve) * 1em); } .cmp-progress .readout[data-ganter-quality='bad'] { color: var(--color-text-secondary); } .cmp-progress .unit { font-size: max(11px, 0.54em); /* em off the number, so it follows the size the number resolved to */ font-weight: 400; color: var(--color-text-secondary); margin-left: 0.15em; } /* The word for the state the track is in, on the head between the caption and the reading. It is sized as a share of the component's type and so carries the readability floor itself, and it is what gives way when the head runs short — by a wide margin over the caption beside it, and never past a share of the line, so the caption is only reached once the name has given up nearly all of its own width. The reading never shrinks at all. It holds a line while nothing is named, which is what the standing head needs so the column below it does not move as a reading crosses a bound. */ .cmp-progress .state { flex: 0 8 auto; min-width: 0; max-width: 45%; min-height: 1.2em; font-size: max(11px, calc(var(--cmp-type) * 0.72)); line-height: 1.2; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-progress .progress-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; } .cmp-progress .progress-track { position: relative; box-sizing: border-box; flex: 0 0 auto; height: clamp(8px, calc(24cqh * var(--cmp-scale, 1)), 28px); border-radius: var(--radius-sm); background: var(--color-overlay-grid); overflow: hidden; } /* Nothing to read: no fill at all, and a dashed outline in its place. An empty bar would be read as a measured zero, which is the one thing this component must never say. */ .cmp-progress .progress-track.no-reading { background: transparent; border: 1px dashed var(--color-neutral); } /* Horizontal, forward — the scale starts at the left edge and everything is measured from it. */ .cmp-progress .progress-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--len); background: var(--progress-ink); } .cmp-progress .progress-span { position: absolute; top: 0; bottom: 0; left: var(--at); width: var(--len); background: var(--span-ink, var(--color-neutral)); opacity: 0.5; } .cmp-progress .progress-needle, .cmp-progress .progress-mark { position: absolute; top: 0; bottom: 0; left: var(--at); width: 3px; margin-left: -1.5px; border-radius: 1px; } .cmp-progress .progress-needle { background: var(--progress-ink); } /* The reference is not a reading, so it is drawn in the text ink with a hairline of the surface around it: it must stay legible over a fill and over a band alike. */ .cmp-progress .progress-mark { background: var(--color-text); box-shadow: 0 0 0 1px var(--color-surface); } /* Horizontal, reversed — the scale starts at the right edge instead. */ .cmp-progress.is-reverse .progress-fill { left: auto; right: 0; } .cmp-progress.is-reverse .progress-span { left: auto; right: var(--at); } .cmp-progress.is-reverse .progress-needle, .cmp-progress.is-reverse .progress-mark { left: auto; right: var(--at); margin-left: 0; margin-right: -1.5px; } /* Vertical — the track runs up the cell and the scale starts at the bottom. */ .cmp-progress.is-vertical { justify-content: flex-start; /* Standing up, the head is a header over the column, and the room it has is the cell's WIDTH: a tall cell must not print a title as tall as the level it labels. */ --cmp-type: clamp(11px, calc(18cqw * var(--cmp-scale, 1)), 30px); } .cmp-progress.is-vertical .progress-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; } /* Standing up, the head is a stack of lines and nothing shares one, so each has the whole width. */ .cmp-progress.is-vertical .label, .cmp-progress.is-vertical .readout { --display-avail: var(--display-room); } .cmp-progress.is-vertical .progress-body { flex: 1 1 auto; flex-direction: row; gap: 4px; } .cmp-progress.is-vertical .progress-track { flex: 0 0 auto; height: auto; width: clamp(8px, calc(24cqw * var(--cmp-scale, 1)), 28px); } .cmp-progress.is-vertical .progress-fill { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--len); } .cmp-progress.is-vertical .progress-span { top: auto; bottom: var(--at); left: 0; right: 0; width: auto; height: var(--len); } .cmp-progress.is-vertical .progress-needle, .cmp-progress.is-vertical .progress-mark { top: auto; bottom: var(--at); left: 0; right: 0; width: auto; height: 3px; margin: 0 0 -1.5px; } /* Vertical, reversed — the scale starts at the top. */ .cmp-progress.is-vertical.is-reverse .progress-fill { bottom: auto; top: 0; } .cmp-progress.is-vertical.is-reverse .progress-span { bottom: auto; top: var(--at); } .cmp-progress.is-vertical.is-reverse .progress-needle, .cmp-progress.is-vertical.is-reverse .progress-mark { bottom: auto; top: var(--at); margin: -1.5px 0 0; } /* The bargraph: the same fill in steps, so a glance reads how many rather than how far. The cells run the way the scale does, which is the one thing the flex direction has to say. */ .cmp-progress .progress-track.is-segmented { display: flex; gap: 2px; background: transparent; } .cmp-progress .progress-cell { flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 1px; background: var(--color-overlay-grid); } .cmp-progress .progress-cell.lit { background: var(--progress-ink); } .cmp-progress.is-reverse .progress-track.is-segmented { flex-direction: row-reverse; } .cmp-progress.is-vertical .progress-track.is-segmented { flex-direction: column-reverse; } .cmp-progress.is-vertical.is-reverse .progress-track.is-segmented { flex-direction: column; } /* The two ends of the scale, written where they sit: first child is the near end, so the vertical column reverses to put it at the bottom. */ .cmp-progress .progress-scale { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 0.5em; font-size: clamp(9px, calc(14cqh * var(--cmp-scale, 1)), 13px); line-height: 1.2; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .cmp-progress.is-vertical .progress-scale { flex-direction: column-reverse; align-items: flex-start; } /* The travel of the fill is the reading moving, not the interface decorating itself, so it keeps its own duration under the system's reduced-motion preference — beside the alarm blink and the indeterminate progress base.css already exempts for the same reason. */ .cmp-progress .progress-fill, .cmp-progress .progress-cell, .cmp-progress .progress-needle, .cmp-progress .progress-mark { transition-property: width, height, top, bottom, left, right, background-color; transition-duration: var(--dur-base) !important; transition-timing-function: var(--ease-out); } /* Unit live chart stack (one ChartView per plot group): vertical stack, each chart a fixed height, the page scrolls when there are more groups than fit. */ .unit-charts-page { position: fixed; inset: 0; padding: 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .unit-chart { flex: 0 0 auto; height: 240px; } .cmp-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cmp-icon .glyph { font-family: 'FluentSystemIcons-Resizable'; line-height: 1; } /* The operator's own SVG mark, in the box the component's Size field states — the same field the font glyph is set at, so one panel answers for both. The box carries the ink; the drawing takes it wherever it declares no paint of its own, which leaves a coloured artwork alone and lets a monochrome one be tinted. */ .cmp-icon .glyph-svg { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .cmp-icon .glyph-svg svg { width: 100%; height: 100%; fill: currentColor; } .cmp-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .cmp-image img { max-width: 100%; max-height: 100%; } /* Fitted inside the cell whole, taking the room the shape allows — the mark beside the name draws the picture entire, inside the box, and a small picture grows to it. */ .cmp-image img.uniform { width: 100%; height: 100%; object-fit: contain; } /* At the size the picture was made, whatever the cell is: a small one stays small and a large one is clipped by the cell, which is the mark drawn beside that name. */ .cmp-image img.none { max-width: none; max-height: none; width: auto; height: auto; } .cmp-image img.fill { width: 100%; height: 100%; object-fit: fill; } .cmp-image img.uniformfill { width: 100%; height: 100%; object-fit: cover; } /* Command components render read-only until commanding is enabled (ADR 0030 §7). The control and the reserved answer line are em-sized off one type size, so the whole stack — not just its text — follows the cell. Every kind of the family draws those same two rows and no more: the control the operator's hand goes to, and under it the line that answers the touch. That is what lets one type size serve all of them, and why the ceiling is the share at which the two rows exactly fill the box — the way to a bigger command is a taller cell, never a stack that leaves the one the operator drew, so the knob mostly tunes downward. Centring is the safe kind: in a cell too short for even the floor, the stack hangs from the top and stays reachable instead of being cut at both ends. */ .cmp-command { display: flex; flex-direction: column; justify-content: safe center; gap: 0.43em; width: 100%; height: 100%; padding: 0.29em 0.57em; --cmp-type: clamp(11px, calc(22cqh * var(--cmp-scale, 1)), 23cqh); /* The line the two rows are drawn on: the cell across, less this family's own side padding. Its padding is em off the type size, which is already resolved in px here. */ --display-room: calc(100cqw - var(--cmp-type) * 1.14); font-size: var(--cmp-type); } /* Whatever the kind puts on the control row — a key, a field row, a switch — that row is what the cell is for, and it never gives way. The answer line under it is what yields when the two rows want more than the operator drew. */ .cmp-command > button, .cmp-command .input-row, .cmp-command .toggle-switch { flex: 0 0 auto; } /* What the two controls share is their metrics — one type size and one box. What they ARE is drawn apart right below, because a field and a key must be told apart before either is read. */ .cmp-command button, .cmp-command input { font-size: 1em; padding: 0.43em 0.86em; border: 1px solid var(--color-stroke); color: var(--color-text); } /* The field is a WELL: the recessed fill and the inset shadow every text surface in the app is drawn with, so it reads sunken in both themes without either being named here — in light the fill steps down from the surface, in dark it steps up and the deeper inset carries the recess. Its corner is tighter than the key's: a slot is cut into the surface, a key sits on it. And it must be allowed to shrink — an asks for its own default width, which is more than a narrow cell has. */ .cmp-command input { min-width: 0; border-radius: var(--radius-sm); background: var(--color-surface-alt); box-shadow: var(--shadow-inset-well); cursor: text; } /* Focus lights the bottom edge over the well rather than thickening the border, so the field never shifts by the pixel a heavier border would add (the app's reveal focus). */ .cmp-command input:focus { outline: none; box-shadow: var(--shadow-inset-well), inset 0 -2px 0 0 var(--color-accent); } /* The key is the opposite reading: its own face, a caption in the weight a command is read at, and a rounder corner. The face itself is not set here for the Button kind — it carries the operator's colour pair below — so this rule stays at the family's specificity and never takes that choice away. */ .cmp-command button { border-radius: var(--radius-md); background: var(--color-surface); font-weight: var(--font-weight-semibold); cursor: pointer; } /* …and it stands off the surface, which is the other half of the reading. The switch's track is a button too and is left out of it: the track is the slot its knob runs in, not something that comes up to meet the finger. Nothing here paints a background — a rule this specific would beat the operator's own face. */ .cmp-command button:not(.track) { box-shadow: var(--shadow-card); transition: transform var(--dur-press) var(--ease-out); } /* Hover tints the face without replacing it: on background-color the operator's colour would be thrown away and whatever sits behind the button would show through — the rule every button in the app follows. */ .cmp-command button:not(.track):hover:not(:disabled) { background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover)); } /* The press lands: a small dip, never below 0.95. */ .cmp-command button:not(.track):active:not(:disabled) { transform: scale(0.97); } /* The caption is its own block inside the key, which is what gives the ellipsis an inline box to cut. Its room is the key's: the family's line less the key's own padding and its edge. */ .cmp-command button > .display-text { display: block; --display-height: var(--cmp-type); --display-avail: calc(var(--display-room) - var(--cmp-type) * 1.72 - 2px); } /* The Button kind is the one command control that carries a look of its own: a colour PAIR — one half per running theme, the same shape as the component background above — and an optional mark from the app's icon library. The class and the four halves always travel together from ButtonView, and both halves are always there because a button is born holding the product colour; the theme picks its two here, so flipping it repaints without a round trip. The edge is one small step of the face's own ink rather than the neutral control stroke, which would ring a saturated face with a stray hairline — the step is small enough that at the product colour the edge lands on the control stroke the neighbouring controls draw. Nothing below is sized in px: the glyph and the gap are em off .cmp-command's type size, so the painted button follows the cell like the rest of the family. */ .cmd-faced { --cmd-face: var(--cmd-face-light); --cmd-ink: var(--cmd-ink-light); --cmd-edge: color-mix(in srgb, var(--cmd-ink) 14%, var(--cmd-face)); } [data-theme='dark'] .cmd-faced { --cmd-face: var(--cmd-face-dark); --cmd-ink: var(--cmd-ink-dark); } .cmd-faced button { display: flex; align-items: center; gap: 0.5em; background: var(--cmd-face); color: var(--cmd-ink); border-color: var(--cmd-edge); } /* The caption takes the whole line beside the mark rather than hugging its own words, so the operator's key reads as one face and not as a word adrift on it. */ .cmd-faced button > .display-text { flex: 1 1 auto; min-width: 0; } /* A mark on the key takes its own width off what the caption is left: the glyph and the gap between the two, both em off the family's type size. */ .cmd-faced button:has(> .glyph) > .display-text { --display-avail: calc(var(--display-room) - var(--cmp-type) * 3.47 - 2px); } .cmd-faced button > .glyph { flex: 0 0 auto; font-family: 'FluentSystemIcons-Resizable'; font-size: 1.25em; line-height: 1; } /* One row, whatever the cell: the field and the key side by side. Each asks for the width its job needs — the field for the most, since it is what the row is for, and the key for exactly its own word — so what a wider cell has to give goes to the box being typed in. */ .cmp-command .input-row { display: flex; align-items: center; gap: 0.57em; min-width: 0; } .cmp-command .input-row > input { flex: 2 1 5em; } .cmp-command .input-row > button { flex: 0 0 auto; /* the command never shrinks under its own word */ } /* Over a two-state point the row carries a key per state instead of a box to type in, and those two ARE the row: they split what the field would have taken and give way with it, because a pair that never shrank would carry the cell out with them. */ .cmp-command .input-row > button.flag { flex: 1 1 0; min-width: 0; } /* Blocked is not blank. A command the operator may not press is still drawing the point's state, and the state is why the component is on the screen at all — so only the FACE the hand goes to steps back, and only a step. What says the press will not land is the cursor here and the lock the shared appearance draws on the frame, never a fade over the whole control. */ .cmp-command button:disabled, .cmp-command input:disabled { opacity: 0.7; cursor: not-allowed; } /* …and these are not faces at all: the switch's track, the option in force, the closed picker naming the mode the plant is in and the travel the handle stands on each ARE the reading, drawn by the control itself. They keep their full strength whoever is signed in — a lit track gone grey reads as a switch that is off, which is the screen lying about the plant. */ .cmp-command button.track:disabled, .cmp-command button.option.active:disabled, .cmp-command .ui-combobox:disabled, .cmp-command input.travel:disabled { opacity: 1; } /* A key standing in a set of them is its OWN box, and no share of the LINE can say how wide that box came out: how many keys the row carries is the point's business, not the stylesheet's. So the key states ITSELF as the container its word is sized against, and 100cqw below is then the width the row actually gave it. The air around the word is drawn by the CAPTION rather than by the key, which is what makes it a share of the very size being solved for — and the reserve is the only side of that division where a share of the type size can stand, so the host adds the two sides there (see SelectorComponentViewModel.TextReserve and the key reserve InputView publishes). Drawn by the key it would be a fixed share of the family type instead: most of a narrow key, with no legible size left to stand beside it. Past the key's own box the word still truncates, with an ellipsis. */ .cmp-command .input-row > button.flag, .cmp-selector .selector-row > .option { container-type: inline-size; padding-inline: 0; } /* …and on a key the row left narrow, the AIR is what yields. Air is negotiable and the word is not: at the readability floor a full share of air is most of a small key, and a word cut so that its own padding could stay whole is the wrong thing to have kept. Bounded by a share of the key, the two sides give way exactly as the key gets narrow, and never take more than the reserve accounted for — so the size the sheet resolves stays a size the word fits in, or truncates at the floor because no size would have held it. */ .cmp-command .input-row > button.flag > .display-text, .cmp-selector .selector-row > .option > .display-text { padding-block: 0; padding-inline: min(0.86em, 8cqw); --display-avail: 100cqw; } /* The answer to the touch: one line sized off the component's own type, reserved while empty so a result never shifts the control above it, and the first thing to give way when the cell is shorter than the two rows want — what the operator presses has to be there whole, and half an answer is still worth the room it has. One line only: a long message truncates instead of growing rows the cell does not have. A share of the type is a share that carries the readability floor itself; the line box follows the size that comes out of it. */ .cmp-command .feedback { flex: 0 1 auto; height: 1.27em; min-height: 0; overflow: hidden; font-size: max(11px, calc(var(--cmp-type) * 0.79)); color: var(--color-text-secondary); white-space: nowrap; text-overflow: ellipsis; } .cmp-command .feedback.error { color: var(--color-critical); } /* The caption a command draws beside or over its control is a text surface like any other (ADR 0034): the family's own type size is the tall end of the answer and the line the family publishes is the room it is measured against, so the caption grows with the cell instead of standing at one size, and what runs past the line ellipsizes with the whole of itself in the tooltip. */ .cmp-command .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-secondary); --display-height: var(--cmp-type); --display-avail: var(--display-room); } /* The switch is drawn in em so it follows .cmp-command's type size — a toggle in a taller cell is a bigger toggle, not a small one adrift in the middle of it. */ .toggle-switch { display: inline-flex; align-items: center; gap: 0.57em; min-width: 0; } .toggle-switch .track { width: 2.86em; height: 1.57em; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--color-neutral); position: relative; transition: background var(--dur-quick) var(--ease-out); } .toggle-switch .track.on { background: var(--color-accent); } .toggle-switch .track .knob { position: absolute; top: 0.14em; left: 0.14em; width: 1.29em; height: 1.29em; border-radius: 50%; background: var(--color-text-on-accent); transition: transform var(--dur-quick) var(--ease-out); } .toggle-switch .track.on .knob { transform: translateX(1.29em); } /* Alarm banner + procedure tables */ .cmp-table { width: 100%; height: 100%; overflow: auto; font-size: 13px; } .cmp-table table { width: 100%; border-collapse: collapse; } .cmp-table th, .cmp-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--color-stroke); } /* ---- Run comments ----------------------------------------------------------- The timeline is a record, so every recorded line carries the two gestures that keep it honest: rewrite it where it stands, or remove it. They ride the trailing edge of the line they act on, the removal in the danger ink and last, and the line itself is what gives way when the cell is narrow — a cluster that shrank would put the verbs somewhere new on every row. Removing asks first and asks in the row, so what is being answered is the very line the eye is already on: the question in the quiet ink, and only the key that removes wearing the danger. */ .cmp-comments .comment-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 2px 0; min-width: 0; } .cmp-comments .comment-said { flex: 1 1 55%; min-width: 0; overflow-wrap: anywhere; } .cmp-comments .comment-at { color: var(--color-text-secondary); } .cmp-comments .comment-phase { margin: 0 4px; } .cmp-comments .comment-gestures { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; margin-left: auto; } /* The question takes what the row has left and wraps under the line rather than pushing the two keys off it: the answer must stay reachable at every cell width. */ .cmp-comments .comment-confirm { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; } .cmp-comments .comment-confirm-said { flex: 1 1 auto; min-width: 0; color: var(--color-text-secondary); font-size: 11px; } /* A row verb is read beside its line rather than pressed like the command a cell is for, so it takes the family's key and steps it down: the list's own small type, a tighter corner and no lift, since what stands off the surface here is the cell's command and not a verb over one line of it. The family's fill, edge and greyed-out refusal are inherited untouched, and a mistaken press costs nothing because the removal only arms. */ .cmp-comments .comment-gestures button, .cmp-comments .comment-confirm button { flex: 0 0 auto; padding: 1px 6px; border-radius: var(--radius-sm); box-shadow: none; font-size: 11px; } /* Being rewritten, the comment IS the row: the field takes the whole line, in the same box the add row below it is typed in, so one habit serves both. */ .cmp-comments .comment-edit { flex: 1 1 auto; min-width: 0; margin-top: 0; } /* The alarm banner's three presentations share one box: the summary sentence is always there, the severity chips ride under it, and only the list asks for the room a table takes. The box itself does not scroll — the rows do, between a head that keeps the sentence and Ack all in place and the answer line at the foot. On a full-screen station that is the whole point: the command that clears an alarm can never be scrolled out of reach of the finger that needs it. A summary in a one-row cell has no rows to scroll and centres in the cell instead of hanging from the top. */ .cmp-alarms { /* The size of an answer target, declared once here and raised by whichever signal says the finger is the pointer (see the two blocks at the end of this section). */ --alarm-ack-width: 3.6em; --alarm-ack-height: 2em; --alarm-ack-row-padding: 2px 8px; display: flex; flex-direction: column; overflow: hidden; } .cmp-alarms.is-summary { justify-content: center; } .cmp-alarms .alarm-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-right: 8px; } .cmp-alarms .alarm-summary { flex: 1 1 auto; min-width: 0; padding: 4px 8px; font-weight: var(--font-weight-semibold); } .cmp-alarms .alarm-rows { flex: 1 1 auto; min-height: 0; overflow: auto; } .cmp-alarms .alarm-severities { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 4px; padding: 0 8px 4px; } .cmp-alarms .alarm-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; line-height: 1.5; white-space: nowrap; } .cmp-alarms .alarm-chip .count { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } /* What still awaits an answer, said quietly beside the count rather than in a second colour: the chip already carries the severity, and two inks in one chip would compete over which is the meaning. */ .cmp-alarms .alarm-chip .unacked { opacity: 0.75; } .cmp-alarms .alarm-chip.critical { color: var(--color-critical); background: var(--color-critical-bg); } .cmp-alarms .alarm-chip.high { color: var(--color-caution); background: var(--color-caution-bg); } .cmp-alarms .alarm-chip.medium { color: var(--color-accent-text); background: var(--color-accent-bg); } .cmp-alarms .alarm-chip.low { color: var(--color-text-secondary); background: var(--color-neutral-bg); } /* A row still awaiting an acknowledge is the one the operator is being asked to answer, so it is marked at the edge instead of being repainted — the row's own text stays as readable as its neighbours'. */ .cmp-alarms tr.unacked td:first-child { border-left: 3px solid var(--color-critical); padding-left: 5px; } /* An answered alarm whose condition had already cleared has left the reading; the row holds its place for a moment so the list does not close the gap under the finger that answered it, and it is drawn as what it now is — on its way out, not something still waiting. */ .cmp-alarms tr.settling { opacity: 0.5; } /* The two answer targets, drawn as targets and not as links: a box of their own, a word inside it and one width per column. The row's box keeps that width whether it holds the button or the mark of an answer already given, so a column of them reads as a checklist and never jumps as rows are answered. The ink is the accent rather than the alarm's own red — what clears an alarm is not a second alarm. */ .cmp-alarms .alarm-ack-all, .cmp-alarms td.alarm-ack > * { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alarm-ack-width); min-height: var(--alarm-ack-height); padding: 2px 10px; border-radius: 6px; font-weight: var(--font-weight-semibold); white-space: nowrap; } .cmp-alarms .alarm-ack-all, .cmp-alarms .alarm-ack button { flex: 0 0 auto; /* the head's summary yields room; the command never shrinks under its word */ border: 1px solid var(--color-stroke); background: var(--color-surface); color: var(--color-accent-text); cursor: pointer; } .cmp-alarms .alarm-ack-all:hover:not(:disabled), .cmp-alarms .alarm-ack button:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-bg); } /* Blocked, not answered: the box stays where it is and goes quiet. Which of the two a row is showing has to be readable at a glance — this one still asks to be pressed and cannot be. */ .cmp-alarms .alarm-ack-all:disabled, .cmp-alarms .alarm-ack button:disabled { color: var(--color-text-disabled); cursor: not-allowed; } /* Answered: the mark alone, no box and no edge, in the room the button would have taken. */ .cmp-alarms .alarm-ack .acked { border: 1px solid transparent; color: var(--color-text-secondary); } .cmp-alarms td.alarm-ack { width: 1%; padding: var(--alarm-ack-row-padding); text-align: right; } /* The answer to a press, on the component's own box (ADR 0020 §E/§F): reserved while empty so a result never shifts the rows, and outside the scrolling region so it is read where the press happened. It is drawn only by a banner that offers the acknowledge — an informational one keeps the whole cell for what it reports. */ .cmp-alarms .feedback { flex: 0 0 auto; padding: 0 8px 3px; font-size: 11px; line-height: 1.4; min-height: 1.4em; color: var(--color-text-secondary); } .cmp-alarms .feedback.error { color: var(--color-critical); } /* Two signals say the finger is the pointer, and either one is enough — a panel PC with a maintenance mouse plugged in answers "hover: hover" and would otherwise keep the desk-sized target in the very mode the operator works in. So the touch query is one of them and the full-screen dashboard, which is how a machine runs, is the other. Both raise the answer targets to the 44px minimum (WCAG 2.5.5) and leave the banner's type where it is: what a finger needs is a bigger target, not bigger text. Placed after the base declarations so the touch query wins at equal specificity; the full-screen anchor outweighs both. */ @media (hover: none) { .cmp-alarms { --alarm-ack-width: 64px; --alarm-ack-height: 44px; --alarm-ack-row-padding: 4px 8px; } } .dnav-page.fullscreen .cmp-alarms { --alarm-ack-width: 64px; --alarm-ack-height: 44px; --alarm-ack-row-padding: 4px 8px; } /* The point table: several readings as one list, sharing the table box above. It is a SCROLLING list, which is one of the shapes the size-follows-the-cell rule leaves out — the cell decides how many rows are visible, not how big each one is — so the rows take the table's own type and no row reserves a width of its own. The box itself does not scroll — the rows do, so the sentence about what the ceiling held back stays at the foot of the cell where it can be read rather than scrolling away under the rows it is talking about. */ .cmp-points { display: flex; flex-direction: column; overflow: hidden; } /* A size stated for the list is the list's, in any cell (ADR 0034), and it is the whole list that rises: what it has to beat is the table type above, which is why it is said again here. */ .cmp-points.display-stated { font-size: var(--display-size); } .cmp-points .point-rows { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Fixed layout: the columns are declared here instead of following the readings, so a number that gains a digit cannot make the whole table re-flow ten times a second, and the name is the only column that has to yield room. */ .cmp-points table { table-layout: fixed; } .cmp-points .point-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The reading, cut with an ellipsis wherever it runs past the column: wider than the column the table declared for it, the head would otherwise be drawn over the name beside it and the tail clipped away by the scroll box, with neither readable. Cut, it says so with the ellipsis and keeps the whole of itself in the tooltip the markup gives every row alike, word or number. */ .cmp-points .point-value { width: 45%; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A NUMBER rests on the right of the column in tabular figures, so a column of them lines up on the decimal point and no row jitters as its value ticks (ADR 0034 §5). Scoped to the numeric family: a row answering in words is free text instead (ADR 0034 §2) and rests where the table's own cells already rest — on the left, which .cmp-table td gives it for nothing. */ .cmp-points .point-value.display-num { text-align: right; font-variant-numeric: tabular-nums; } /* A reading the row does not have is the gap, and the gap is quiet: it is the absence of a reading, not an alarm about one. */ .cmp-points .point-value[data-ganter-quality='bad'] { color: var(--color-text-secondary); } .cmp-points .point-unit { width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); } .cmp-points .point-empty { padding: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); line-height: 1.4; } /* ---- The three adjustments --------------------------------------------------- Selector, Setpoint slider and Step keys are members of the command family above: they sit inside .cmp-command, so they take its type size off the cell, its field-and-key paints, its disabled treatment and its one answer line. What each one adds here is only its own control row — and each row is declared 0 0 auto for the family's reason: what the operator's hand goes to is what the cell is for, and the line under it is what yields when the two rows want more than he drew. */ .cmp-selector .selector-row, .cmp-slider .slider-row, .cmp-step .step-row { display: flex; flex: 0 0 auto; align-items: center; gap: 0.57em; min-width: 0; } /* The keys ARE the row: they split what is available and give way together, like the two the Input draws over a flag point — a set that never shrank would carry the cell out with it. Their words sit on the block span the family's own rule gives every key. */ .cmp-selector .selector-row > .option { flex: 1 1 0; min-width: 0; } /* The option in force is lit — and it is lit off the READING, never off the touch: the key the operator pressed goes on looking like every other one until the point reports the mode it asked for. The accent is the interface's own, so nothing here holds a palette of its own. */ .cmp-selector .selector-row > .option.active { border-color: var(--color-accent); background: var(--color-accent-bg); color: var(--color-accent-text); } .cmp-selector .no-options { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; } /* The picker takes the room the keys would have had, so the list presentation reads at the same width as the keys it replaces. */ .cmp-selector .selector-row > .ui-combobox { flex: 2 1 5em; min-width: 0; } /* The travel is what the slider's row is for, so it takes the spare width ahead of the keys; the keys never shrink under their own words. */ .cmp-slider .slider-row > .travel { flex: 3 1 5em; min-width: 0; } /* The two keys take the width their captions need and no more — the travel is what the row is for. */ .cmp-slider .slider-row > .release, .cmp-slider .slider-row > .send { flex: 0 0 auto; } /* Their captions read at the family's type size and carry its floor themselves: a key whose width is its own caption states no room for a reserve to resolve against. The Set key's caption holds a value, so its width really does move — it truncates at a share of the line rather than stretching the row it shares with the travel. */ .cmp-slider .slider-row > .release > .key, .cmp-slider .slider-row > .send > .key { display: block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(11px, var(--cmp-type)); } /* The handle is drawn in em off the family's type size, so a slider in a taller cell is a bigger slider and not a small one adrift in the middle of it. The track carries the app's own recess and the handle the app's own accent; the browser's default paint is dropped so both themes are drawn from the tokens rather than from whatever the platform picked. */ .cmp-slider input[type='range'] { appearance: none; height: 1.6em; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; } /* The keyboard is how this control is reached without a pointer — the arrow keys move the handle a step at a time and each press arms exactly as a drag does — so the ring that says where the focus is has to survive the family's quiet field treatment. The pointer keeps its quiet field: the ring is drawn for the focus a keyboard put there. */ .cmp-slider input[type='range']:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); } .cmp-slider input[type='range']::-webkit-slider-runnable-track { height: 0.36em; border-radius: var(--radius-pill); background: var(--color-surface-alt); box-shadow: var(--shadow-inset-well); } .cmp-slider input[type='range']::-moz-range-track { height: 0.36em; border-radius: var(--radius-pill); background: var(--color-surface-alt); box-shadow: var(--shadow-inset-well); } .cmp-slider input[type='range']::-webkit-slider-thumb { appearance: none; width: 1.1em; height: 1.1em; margin-top: -0.37em; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-accent); box-shadow: var(--shadow-card); } .cmp-slider input[type='range']::-moz-range-thumb { width: 1.1em; height: 1.1em; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-accent); box-shadow: var(--shadow-card); } /* Armed: the handle is the operator's hand and no longer the plant's position, and the caution ink is the whole of what says so — calmly, because nothing has been written yet and the key beside it already names what would be. */ .cmp-slider.is-armed input[type='range']::-webkit-slider-thumb { background: var(--color-caution); } .cmp-slider.is-armed input[type='range']::-moz-range-thumb { background: var(--color-caution); } /* Nothing to draw at: no reading and nothing armed is no position, so the handle is not drawn at all and the track states the absence the way every other surface does. A thumb parked at the minimum would be a setpoint the screen invented. */ .cmp-slider.no-handle input[type='range']::-webkit-slider-thumb { visibility: hidden; } .cmp-slider.no-handle input[type='range']::-moz-range-thumb { visibility: hidden; } .cmp-slider.no-handle input[type='range']::-webkit-slider-runnable-track { background: transparent; box-shadow: none; border: 1px dashed var(--color-neutral); } .cmp-slider.no-handle input[type='range']::-moz-range-track { background: transparent; box-shadow: none; border: 1px dashed var(--color-neutral); } /* The two keys ARE the row: they split it and give way with it, like the two the Input draws over a flag point — and a − and a + are the two widest-reaching targets on a touch panel, so the row the cell gave is theirs whole. */ .cmp-step .step-row > .step { flex: 1 1 0; min-width: 0; } /* A sign asks for its own width off the family's type size, and nothing else asks for room in there. */ .cmp-step .step-row > .step > .display-text { --display-avail: calc(var(--cmp-type) * 0.68); } .cmp-status { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 4px 10px; gap: 4px; } .badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; } .badge.ok { background: var(--color-success-bg); color: var(--color-success); } .badge.nok { background: var(--color-critical-bg); color: var(--color-critical); } .badge.neutral { background: var(--color-overlay-grid); color: var(--color-text-secondary); } .cmp-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-text-secondary); font-size: 12px; } /* A component this build cannot render. It states what is in the cell and what to do about it, in the same quiet register as an empty state — the screen is intact, one piece of it is not available, and nothing about that is an error. */ .cmp-unsupported { display: flex; flex-direction: column; gap: var(--space-1); align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--space-2); overflow: hidden; border: 1px dashed var(--color-stroke); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-description); line-height: 1.4; text-align: center; } .cmp-unsupported strong { min-width: 0; color: var(--color-text); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } /* ---- Editor workbench: real canvas flanked by page-level task tools -------- */ /* The host the stage draws into, on every page that mounts the runtime or the editor: it is markup of the shared canvas, so it is dressed here beside the rest of what that canvas draws rather than in the stylesheet of one page that happens to mount it. */ .dnav-canvas-host { flex: 1 1 auto; /* Without this the flex item's min-height is its content — the runtime grid holding the chart canvases at their last measured pixels — so a window made smaller could never take height back from the stage. Zero frees the shrink; the canvases refit right after. */ min-height: 0; position: relative; width: 100%; overflow: hidden; background: var(--color-bg); } .dashboard-editor-stage { min-width: 0; min-height: 0; position: relative; z-index: 0; isolation: isolate; } .edit-canvas-host { width: 100%; height: 100%; position: relative; overflow: hidden; } .edit-grid { background-image: linear-gradient(to right, var(--color-overlay-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--color-overlay-grid) 1px, transparent 1px); /* background-size is set inline per the dashboard's column/row count. */ } .edit-cmp { cursor: move; border: 1px solid transparent; border-radius: 4px; touch-action: none; } .editor-selection-overlay { pointer-events: none; border-color: var(--color-accent); box-shadow: 0 0 0 var(--focus-ring-width) var(--color-accent); } .editor-selection-overlay .resize-grip { pointer-events: auto; } /* Clicks select/drag the cell, never reach the rendered component. */ .edit-pointerless { pointer-events: none; } /* The press lands on the background layer rather than falling through to the cell: the cell sits below every component band, so only a component layer can answer in the order the operator sees. The terminal handles keep winning — they ride the content band, above this one. */ .edit-cmp > .dash-component-chrome { pointer-events: auto; } .symbol-anchor-guide-note { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0; padding-left: var(--space-3); border-left: 2px solid var(--color-accent); } .symbol-anchor-guide-note strong { color: var(--color-text); font-weight: var(--font-weight-semibold); } .resize-grip { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; background: var(--color-accent); border: 2px solid var(--color-surface); border-radius: 3px; cursor: nwse-resize; } .dashboard-tools-splitter { min-width: 0; overflow: hidden; } /* Collapsed there is no pane width to drag, so the gutter is spacing only: the splitter keeps its grid track — the tool rail stands off the stage by the same air as the open pane — and gives up its hairline, its grip and the pointer. */ .dashboard-tools-splitter.collapsed { pointer-events: none; visibility: hidden; } .dashboard-tools { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--color-stroke); border-radius: var(--radius-lg); background: var(--color-surface-alt); } .dashboard-tools.collapsed { border-radius: var(--radius-md); } .dashboard-tools-header { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2); border-bottom: 1px solid var(--color-stroke); } .dashboard-tools-tabs { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); } .dashboard-tools-tabs.collapsed { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); } .dashboard-tools-tab { min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: var(--font-size-description); cursor: pointer; } .dashboard-tools-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-tools-tab:hover { background: var(--color-overlay-hover); color: var(--color-text); } .dashboard-tools-tab.active { border-color: var(--color-stroke); background: var(--color-surface); color: var(--color-accent-text); font-weight: var(--font-weight-semibold); } .dashboard-tools-tab:focus-visible, .dashboard-tools-collapse:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: calc(-1 * var(--focus-ring-offset)); } .dashboard-tools-collapse { flex: 0 0 40px; } .dashboard-tools-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-4); } /* The region of a task panel that ANSWERS something, held apart from the heading above it. It repeats the panel's own column: the fields inside stack exactly as they did under it. */ .dashboard-task-form { display: flex; flex-direction: column; min-width: 0; } .dashboard-task-panel { display: flex; flex-direction: column; min-width: 0; } .dashboard-task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .dashboard-task-heading h2 { margin: 0; color: var(--color-text); font-size: var(--font-size-card-title); font-weight: var(--font-weight-semibold); } .dashboard-task-heading h2:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } .dashboard-task-heading p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font-size: var(--font-size-description); line-height: 1.4; text-wrap: pretty; } /* The Properties header names what is being edited: the kind's palette mark and name, and under them the component's own name — or, when it has none, whatever already identifies it. It rides the heading's own line, flushed to the far end, so it reads as an answer to "Properties of what" rather than as a second title under it, and takes no height off the panel it heads. It is also the side that gives way: the heading keeps its word and a long name ellipsizes below. */ .dashboard-properties-identity { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; margin-left: auto; } .dashboard-properties-identity-icon { flex: 0 0 auto; color: var(--color-text-secondary); } .dashboard-properties-identity-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .dashboard-properties-identity-type, .dashboard-properties-identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-properties-identity-type { color: var(--color-text); font-size: var(--font-size-description); font-weight: var(--font-weight-semibold); } .dashboard-properties-identity-name { color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); } .dashboard-task-count { flex: 0 0 auto; min-width: 24px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--font-size-micro); font-variant-numeric: tabular-nums; text-align: center; } .dashboard-task-filters { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(112px, .65fr); gap: var(--space-3); margin-bottom: var(--space-3); } .dashboard-palette-list, .dashboard-component-list, .dashboard-properties-stack { display: flex; flex-direction: column; min-width: 0; } .dashboard-component-search { margin: 0 0 var(--space-3); } /* Glyph + text, like Add: the icon keeps a fixed column and identification, type and grid address stack beside it — never as a third text line above them. */ .dashboard-component-row { width: 100%; min-height: 56px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; } .dashboard-component-row:hover { background: var(--color-overlay-hover); } .dashboard-component-row.selected { border-color: var(--color-stroke); background: var(--color-surface); box-shadow: inset 3px 0 0 var(--color-accent); } .dashboard-component-row:focus-visible { outline: var(--focus-ring-width) solid var(--color-accent); outline-offset: calc(-1 * var(--focus-ring-offset)); } .dashboard-component-row-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-1); } .dashboard-component-row-main strong, .dashboard-component-row-main span, .dashboard-component-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-component-row-main strong { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); } .dashboard-component-row-main span, .dashboard-component-location { color: var(--color-text-secondary); font-size: var(--font-size-eyebrow); } .dashboard-component-location { width: 100%; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: left; } .dashboard-task-empty { margin-top: var(--space-3); padding: var(--space-5); border: 1px dashed var(--color-stroke); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-description); line-height: 1.5; text-align: center; } .dashboard-task-empty.prominent { margin-top: var(--space-5); } .edit-section-title { font-size: 14px; font-weight: 600; margin: 12px 0 6px; } .edit-section-sub { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin: 10px 0 4px; } .palette-category { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); margin: 8px 0 2px; } .palette-item { width: 100%; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); cursor: grab; border: 1px solid transparent; background: transparent; color: var(--color-text); text-align: left; } .palette-item:hover { background: var(--color-overlay-grid); border-color: var(--color-stroke); } .palette-item .pal-name { font-size: 13px; } .palette-item .pal-desc { font-size: 11px; color: var(--color-text-secondary); } .edit-field { display: block; font-size: 12px; color: var(--color-text-secondary); margin: 8px 0 0; } .edit-field input, .edit-field select, .edit-field textarea { display: block; width: 100%; margin-top: 3px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-stroke); background: var(--color-surface); color: var(--color-text); font-size: 13px; box-sizing: border-box; } .edit-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; } /* A row left with only its handles — the ordering arrows of a band whose scale has no state to word — keeps them at the end of the line they have always sat at. Nothing stretches to push them there any more, and at the left edge a pair of arrows reads as the row's subject instead of its grip. */ .edit-row.edit-row-end { justify-content: flex-end; } .edit-row input, .edit-row select { flex: 1 1 0; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-stroke); background: var(--color-surface); color: var(--color-text); font-size: 13px; } /* The shared ComboBox in the editor: block-level (drops below its caption) and sized like the fields beside it; in a row two share the width just as the old