/* Scada Studio - the page a project renders to, and the designer around it.
   Colours are the Industrial theme's tokens, so the designer looks like what it builds. */

:root {
    --st-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --st-mono: Consolas, "Courier New", monospace;
}

/* ── The rendered page (app and designer canvas) ───────────────────────── */

body.studio-app {
    margin: 0;
    min-height: 100vh;
    font-family: var(--st-font);
    background: var(--smart-industrial-canvas, var(--smart-body-background-color, #ccd4dd));
    color: var(--smart-text-color, #131c25);
}

.studio-app-page {
    padding: 16px;
}

/* an app embedded in another page (studio-embed.js): the canvas colours on the element, the host page's chrome around it */
.studio-embed {
    font-family: var(--st-font);
    background: var(--smart-industrial-canvas, var(--smart-body-background-color, #ccd4dd));
    color: var(--smart-text-color, #131c25);
    min-height: 200px;
    /* inside the host's box: a container given a height scrolls, rather than the app running over the page below */
    overflow: auto;
}

.studio-app-pages {
    display: flex;
    gap: 4px;
    padding: 8px 16px 0;
}

.studio-app-pages a {
    padding: 6px 14px;
    border-radius: 3px 3px 0 0;
    color: var(--smart-text-secondary-color, #3c4855);
    text-decoration: none;
    font-size: 13px;
}

.studio-app-pages a[aria-current="page"] {
    background: var(--smart-industrial-panel-background, #fff);
    color: var(--smart-text-color, #131c25);
    font-weight: 600;
}

.studio-app-empty {
    padding: 40px 24px;
    text-align: center;
}

/* Nothing of the page under the corner: with no page tabs to share a row with, the page starts
   below it - it sat on an alarm banner in row 1 and covered its Ack button. */
body.studio-app:has(.studio-app-corner > :not([hidden])) .studio-app-pages[hidden] + .studio-app-page {
    padding-top: 52px;
}

/* The page tabs keep clear of the corner (who is signed in, the designer link). */
.studio-app-pages {
    padding-right: 260px;
    flex-wrap: wrap;
}

/* A phone: the twelve columns become one, in reading order, each component its own height.
   A page drawn for a 1920 wall scrolled sideways at 390 px, with its Stop buttons cut off
   outside their cards. The designer's canvas keeps its grid - this is the published screen. */
@media (max-width: 640px) {
    .studio-app-page {
        padding: 8px;
    }

    body.studio-app .studio-app-page.studio-page {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.studio-app .studio-app-page.studio-page > .studio-cell {
        grid-column: 1 / -1 !important;
        grid-row: span var(--studio-rows, 3) !important;
        order: var(--studio-order, 0);
    }

    .studio-app-pages {
        padding: 8px 8px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .studio-app-pages a {
        flex: 0 0 auto;
    }

    /* the corner goes to the bottom of the screen, clear of the tabs */
    .studio-app-corner {
        top: auto;
        bottom: 8px;
        right: 8px;
    }

    .studio-app-update:not([hidden]) ~ .studio-app-corner {
        top: auto;
    }

    .studio-app-page {
        padding-bottom: 56px;
    }
}

.studio-page {
    /* the runtime sets the grid; the cells fill their area */
    align-items: stretch;
}

.studio-cell {
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    position: relative;
}

/* what a request came to when the answer was no: a write refused, a station not connected */
.studio-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 40;
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 16px;
    border-radius: 6px;
    background: #7a1c1c;
    color: #ffffff;
    font: 600 14px/1.4 system-ui, "Segoe UI", sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transform: translateX(-50%);
}

.studio-notice[hidden] {
    display: none;
}

/* A component whose tags have no live value: the last reading may still be drawn, and must
   not pass for a current one. ISA-101 greys and hatches bad data rather than colouring it. */
.studio-cell[data-quality] {
    outline: 2px dashed var(--st-quality-bad, #8a8f98);
    outline-offset: -2px;
}

.studio-cell[data-quality] > * {
    opacity: .45;
    filter: grayscale(1);
}

.studio-cell[data-quality]::before {
    content: "NO DATA";
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    max-width: calc(100% - 8px);
    padding: 0 5px;
    border-radius: 3px;
    font: 600 10px/15px system-ui, sans-serif;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    color: #fff;
    background: #5b616b;
    pointer-events: none;
}

.studio-cell[data-quality="stale"]::before,
.studio-cell[data-quality="uncertain"]::before {
    content: "STALE";
}

.studio-cell > .studio-element {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* elements laid out to a height take the cell's; the fixed-size ones keep their own */
.studio-cell > smart-trend,
.studio-cell > smart-strip-chart,
.studio-cell > smart-scope,
.studio-cell > smart-spectrum,
.studio-cell > smart-control-chart,
.studio-cell > smart-waveform-graph,
.studio-cell > smart-intensity-graph,
.studio-cell > smart-digital-waveform,
.studio-cell > smart-bode-plot,
.studio-cell > smart-polar-plot,
.studio-cell > smart-octave-bands,
.studio-cell > smart-alarm-grid,
.studio-cell > smart-mimic,
.studio-cell > smart-sequence-editor,
.studio-cell > smart-terminal,
.studio-cell > smart-audit-trail,
.studio-cell > smart-anomaly-heatmap,
.studio-cell > smart-state-timeline,
.studio-cell > smart-hmi-shell {
    height: 100%;
}

.studio-cell > smart-bar-graph {
    height: 100%;
    --smart-bar-graph-height: calc(100% - 28px);
}

.studio-cell > smart-tank {
    height: 100%;
}

/* a thermometer lays its scale out to its stem: the stem takes the cell's height, and laid
   flat it takes the cell's width instead */
.studio-cell > smart-thermometer {
    height: 100%;
}

/* a panel meter draws its face inside one viewBox: it takes the cell's width and the case
   keeps the instrument's proportions */
.studio-cell > smart-panel-meter {
    height: 100%;
    --smart-panel-meter-width: 100%;
}

.studio-cell > smart-thermometer[orientation="horizontal"] {
    --smart-thermometer-length: 100%;
}

/* a slide lays its scale out to its height: it takes the cell's, with or without a label; a vertical one keeps its own width, at the left */
.studio-cell > smart-slider {
    height: 100%;
}

.studio-cell > smart-slider[orientation="vertical"],
.studio-cell.has-caption > smart-slider[orientation="vertical"].studio-element {
    flex: 0 0 auto;
    /* the track sits at the right of the box and the scale 32px left of it: 60px keeps two-digit labels inside */
    width: 60px;
    max-width: 100%;
    align-self: flex-start;
}

/* a round instrument draws itself from its width: as wide as the cell is high, centred, so a wide cell does not make it overflow below */
.studio-cell {
    --studio-cell-height: calc(var(--studio-rows, 3) * var(--studio-row, 40px) + (var(--studio-rows, 3) - 1) * var(--studio-gap, 12px));
}

.studio-cell > smart-gauge.studio-element {
    flex: none;
    width: min(100%, var(--studio-cell-height));
    margin: 0 auto;
}

.studio-cell.has-caption > smart-gauge.studio-element {
    width: min(100%, calc(var(--studio-cell-height) - 14px));
    min-height: 0;
    align-self: center;
}

.studio-cell > smart-status-tile,
.studio-cell > smart-alarm-banner,
.studio-cell > smart-multi-state-indicator,
.studio-cell > smart-stack-light,
.studio-cell > smart-seven-segment {
    width: 100%;
}

.studio-heading,
.studio-text,
.studio-label {
    margin: 0;
    align-self: center;
    width: 100%;
}

.studio-heading {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--smart-text-title-color, #0b131b);
}

.studio-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color, #3c4855);
}

.studio-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--smart-text-tertiary-color, #4a5663);
    align-self: end;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
}

/* ── Decorations: a box behind a group of controls ─────────────────────── */

.studio-cell {
    z-index: 1;
}

.studio-cell.studio-cell-box {
    z-index: 0;
}

.studio-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
}

.studio-box.raised {
    background: var(--smart-industrial-panel-background, #f4f4f4);
    border: 1px solid var(--smart-industrial-panel-border, #b5b5b5);
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 3px rgba(0, 0, 0, 0.18);
}

.studio-box.recessed {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25) inset;
}

/* a shade darker than the dark canvas is no shade at all: the recessed frame had vanished */
[theme="industrial-dark"] .studio-box.recessed {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) inset;
}

.studio-box.flat {
    background: transparent;
    border: 1px solid var(--smart-industrial-panel-border, #8c8c8c);
}

.studio-box-title {
    position: absolute;
    left: 6px;
    top: 2px;
    padding: 0 4px;
    font: 600 12px/18px var(--st-font);
    color: var(--smart-text-color, #1a1a1a);
}

/* ── Owned labels and the studio's LED ─────────────────────────────────── */

.studio-cell.has-caption {
    flex-direction: column;
    align-items: stretch;
}

.studio-caption {
    flex: none;
    padding: 0 0 1px 2px;
    font: 600 11px/13px var(--st-font);
    color: var(--smart-text-color, #131c25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* under an owned label the column's cross axis is the width: the control takes it, whatever width it has of its own */
.studio-cell.has-caption > .studio-element {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 26px;
}

/* a numeric or a string is one line high, as on a front panel: it keeps its height under the label */
.studio-cell.has-caption > smart-numeric-text-box.studio-element,
.studio-cell.has-caption > smart-input.studio-element,
.studio-cell.has-caption > studio-led.studio-element {
    flex: 0 0 auto;
}

/* a button in a one-row cell under its label: the text fits the 26px left */
.studio-cell.has-caption > smart-button .smart-button,
.studio-cell.has-caption > smart-toggle-button .smart-button {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
}

.studio-cell.has-caption > .studio-heading,
.studio-cell.has-caption > .studio-text,
.studio-cell.has-caption > .studio-label {
    min-height: 0;
}

studio-led {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    --studio-led-color: #22cc22;
    --studio-led-off: #0c5a0c;
}

studio-led[data-color="red"] { --studio-led-color: #ff3b30; --studio-led-off: #6a1512; }
studio-led[data-color="yellow"] { --studio-led-color: #ffd21f; --studio-led-off: #6b5a0c; }
studio-led[data-color="blue"] { --studio-led-color: #3b8bff; --studio-led-off: #14396b; }
studio-led[data-color="orange"] { --studio-led-color: #ff9a1f; --studio-led-off: #6b420c; }
studio-led[data-color="white"] { --studio-led-color: #ffffff; --studio-led-off: #6b6b6b; }

.studio-led-lamp {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #555;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45), transparent 45%), var(--studio-led-off);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: background 120ms, box-shadow 120ms;
}

studio-led[data-shape="square"] .studio-led-lamp {
    border-radius: 3px;
}

studio-led.on .studio-led-lamp {
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.7), transparent 45%), var(--studio-led-color);
    box-shadow: 0 0 8px var(--studio-led-color), inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.studio-led-text {
    font: 12px var(--st-font);
}

.studio-led-text:empty {
    display: none;
}

/* the drop-down: one line high, as a numeric is, and the width of its cell */
studio-select {
    display: flex;
    align-items: stretch;
    min-height: 26px;
}

.studio-cell.has-caption > studio-select.studio-element {
    flex: 0 0 auto;
}

.studio-select-field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border, #8c8c8c);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: var(--smart-text-color, #222);
    font: inherit;
    font-size: 13px;
}

.studio-select-field:focus-visible {
    outline: 2px solid var(--smart-primary, #1f5c94);
    outline-offset: 1px;
}

.studio-select-field:disabled {
    opacity: 1;
    background: var(--smart-surface, #f0f0f0);
    cursor: default;
}

/* asked for, not yet confirmed by the tag: the same dashed edge a faceplate gives a pending setpoint */
studio-select.pending .studio-select-field {
    border-style: dashed;
    border-color: var(--smart-primary, #1f5c94);
}

/* the tag holds a value none of the choices stands for */
studio-select.unknown .studio-select-field {
    border-color: var(--smart-warning, #b35c00);
}

/* ── The Bench theme: a front panel as a graphical language draws it ─────────────────
   The panel is the classic light grey, the labels its application font, the controls flat
   with grey borders and a blue accent (the Modern/NXG style); a Stop button is grey with
   STOP in red. The components take these tokens; the industrial ones keep their own colours
   for what colour means (alarms, states). */
body[theme="bench"] {
    --smart-primary-rgb: 47, 111, 181;
    --smart-primary: rgb(var(--smart-primary-rgb));
    --smart-primary-color: #ffffff;
    --smart-base: #e4e4e4;
    --smart-background: #ffffff;
    --smart-background-color: #1a1a1a;
    --smart-surface: #f4f4f4;
    --smart-surface-color: #1a1a1a;
    --smart-body-background-color: #e4e4e4;
    --smart-border: #8c8c8c;
    --smart-border-rgb: 140, 140, 140;
    --smart-border-normal: #8c8c8c;
    --smart-border-hover: #5a5a5a;
    --smart-outline: #5a5a5a;
    --smart-border-radius: 2px;
    --smart-border-top-left-radius: 2px;
    --smart-border-top-right-radius: 2px;
    --smart-border-bottom-left-radius: 2px;
    --smart-border-bottom-right-radius: 2px;
    --smart-text-title-color: #000000;
    --smart-text-color: #1a1a1a;
    --smart-text-secondary-color: #333333;
    --smart-text-tertiary-color: #4d4d4d;
    --smart-ui-state-hover: #dfe7f2;
    --smart-ui-state-color-hover: #1a1a1a;
    --smart-font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    --smart-industrial-canvas: #e4e4e4;
    --smart-industrial-panel-background: #f4f4f4;
    --smart-industrial-panel-border: #8c8c8c;
    --smart-industrial-panel-header-background: #e8e8e8;
    --smart-industrial-accent-line: #cfcfcf;
    --smart-industrial-readout-background: #0e0e0e;
    --smart-industrial-readout-color: #3cff3c;
    --smart-industrial-focus: #2f6fb5;
    --st-font: "Segoe UI", Tahoma, Arial, sans-serif;
}

body[theme="bench"].studio-app {
    background: #e4e4e4;
}

body[theme="bench"] .studio-heading {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

body[theme="bench"] .studio-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    border-bottom: 0;
    color: #1a1a1a;
}

body[theme="bench"] .studio-caption {
    font-weight: 400;
    font-size: 13px;
}

body[theme="bench"] smart-button,
body[theme="bench"] smart-toggle-button {
    --smart-background: #ececec;
    --smart-border: #6f6f6f;
}

body[theme="bench"] smart-button.lv-stop {
    --smart-background: #e6e6e6;
    color: #a3271b;   /* 4.5:1 on the bench theme's button face */
    font-weight: 700;
    letter-spacing: 1px;
}

body[theme="bench"] smart-numeric-text-box,
body[theme="bench"] smart-input {
    --smart-background: #ffffff;
    --smart-border: #6f6f6f;
}

/* the designer's canvas in the Bench theme: the grey panel with the classic alignment dots */
body.studio-designer[theme="bench"] .st-canvas {
    background-color: #e4e4e4;
    background-image: radial-gradient(#b9b9b9 1px, transparent 1px);
    background-size: 12px 12px;
}

/* ── The designer ──────────────────────────────────────────────────────── */

body.studio-designer {
    margin: 0;
    height: 100vh;
    display: grid;
    /* the bar is as tall as it needs: one row, or two when its controls do not fit on one */
    grid-template-rows: minmax(48px, auto) minmax(0, 1fr) auto;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    grid-template-areas:
        "bar bar bar"
        "palette canvas inspector"
        "sources sources sources";
    font: 13px/1.45 var(--st-font);
    background: var(--smart-industrial-canvas, #ccd4dd);
    color: var(--smart-text-color, #131c25);
    overflow: hidden;
}

/* A bar too narrow for its controls - a 1280 window, a German or French designer, a station link
   shown - wraps onto a second row: Save, Preview and Publish went off the right edge, where the
   mouse could not reach them and Tab to them slid the whole designer sideways. */
/* The top bar and the Project menu in the project's theme: light on Industrial, Bench and Default,
   dark on Industrial Dark. The bar was dark on every theme, so the light/dark switch left the one
   strip at the top of the window behind. */
body.studio-designer {
    --st-bar-bg: #eef2f6;
    --st-bar-fg: #131c25;
    --st-bar-field: #ffffff;
    --st-bar-line: #b9c6d3;
    --st-bar-muted: #4a5663;
    --st-bar-soft: #55606b;
    --st-bar-hover: #1f5c94;
    --st-bar-chip: #1f3b57;
    --st-bar-warn: #7d4a00;
    --st-bar-menu-hover: #e1e8ef;
    --st-bar-danger-bg: #fdeced;
    --st-bar-danger-fg: #a51f1f;
    --st-bar-lamp: #7a5c00;
    --st-bar-lamp-line: #c9a93a;
    --st-bar-lamp-bg: #fff6d6;
    --st-bar-ok: #1a6029;
}

body.studio-designer[theme="industrial-dark"] {
    --st-bar-bg: #131c25;
    --st-bar-fg: #eaf0f6;
    --st-bar-field: #1e2731;
    --st-bar-line: #313e4b;
    --st-bar-muted: #8b98a6;
    --st-bar-soft: #a7b4c1;
    --st-bar-hover: #6fb2ec;
    --st-bar-chip: #cfe0f0;
    --st-bar-warn: #ffd79a;
    --st-bar-menu-hover: #26313d;
    --st-bar-danger-bg: #3a1f1c;
    --st-bar-danger-fg: #f3c7c2;
    --st-bar-lamp: #ffd54a;
    --st-bar-lamp-line: #8a7a2a;
    --st-bar-lamp-bg: #2e2a16;
    --st-bar-ok: #5fc98a;
}

.st-bar {
    grid-area: bar;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 6px 8px;
    padding: 6px 12px;
    box-sizing: border-box;
    min-height: 48px;
    white-space: nowrap;
    overflow: visible;   /* the Project menu drops below the bar */
    background: var(--st-bar-bg);
    color: var(--st-bar-fg);
    position: relative;
    z-index: 20;
}

.st-bar label,
.st-flow-debug-head label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}

/* where the project in hand came from, and the screen it runs as */
.st-bar .st-station {
    display: inline-block;
    /* it gives way when the bar is full, but stays readable: a long station name pushed Preview and Publish off the bar */
    flex: 0 1 auto;
    min-width: 72px;
    max-width: 180px;
    height: 24px;
    line-height: 22px;
    padding: 0 8px;
    box-sizing: border-box;
    border: 1px solid var(--st-bar-line);
    border-radius: 12px;
    color: var(--st-bar-chip);
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-bar .st-station:hover {
    border-color: var(--st-bar-hover);
    color: var(--st-bar-fg);
}

/* the station serves a version this designer did not open: publishing would replace it */
.st-bar .st-station.behind {
    border-color: #d9a441;
    color: var(--st-bar-warn);
}

.st-bar .st-station[hidden] {
    display: none;
}

/* the screens a station serves, in the Publish dialog */
.st-apps ol {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 150px;
    overflow: auto;
}

.st-apps li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid var(--smart-border, #e1e6ec);
}

.st-apps li b {
    font-weight: 600;
}

.st-apps li .st-apps-meta {
    flex: 1;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-bar .st-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 8px;
}

.st-bar .st-brand small {
    font-weight: 400;
    color: var(--st-bar-muted);
    margin-left: 6px;
}

.st-bar input[type="text"] {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--st-bar-line);
    border-radius: 3px;
    background: var(--st-bar-field);
    color: var(--st-bar-fg);
    font: inherit;
    width: 150px;
}

.st-bar select,
.st-bar button,
.st-bar label.st-file {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--st-bar-line);
    border-radius: 3px;
    background: var(--st-bar-field);
    color: var(--st-bar-fg);
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.st-bar button:hover,
.st-bar label.st-file:hover {
    border-color: var(--st-bar-hover);
}

.st-bar button.primary {
    background: #1f5c94;
    border-color: #1f5c94;
    color: #fff;
    font-weight: 600;
}

.st-bar .st-spacer {
    flex: 1;
}

/* the status says what happened - a save that failed among it - in room it can be read in:
   it had 65 pixels at 1440 and none in German, where "Not saved: quota exceeded" read "Not sav…" */
.st-bar .st-status {
    color: var(--st-bar-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 60px;
    max-width: 36vw;
    flex: 3 1 60px;
    text-align: right;
}

.st-bar .st-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.st-bar .st-group span {
    color: var(--st-bar-muted);
    font-size: 12px;
    margin-right: 2px;
}

.st-palette,
.st-inspector {
    background: var(--smart-industrial-panel-background, #fff);
    border-right: 1px solid var(--smart-border, #ccd6e0);
    overflow: auto;
}

.st-palette {
    grid-area: palette;
    display: grid;
    /* the pane takes what it asks for, up to 45% of the panel: past that the palette has
       no room left and the components below the fold may as well not be there */
    grid-template-rows: min(var(--st-project-height, 220px), 45%) 6px auto auto minmax(0, 1fr);
    row-gap: 0;
    overflow: hidden;
}

/* The palette is the grid's last row and the panel above it does not scroll, so the palette
   has to scroll itself or everything past the fold is unreachable. min-height:0 because a grid
   item's automatic minimum is its content, which would push the row taller than its track and
   defeat the overflow. */
#palette,
#nodePalette {
    /* the scroll box its tiles' hidden names are placed in: without it they escaped to the page,
       made it 3748 px tall, and a scrollIntoView (Find) scrolled the whole designer, bar and all */
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* the same scroll shadow as the project tree: present only while something is below */
    background:
        linear-gradient(var(--smart-industrial-panel-background, #fff) 30%, transparent) top / 100% 12px no-repeat,
        linear-gradient(transparent, rgba(0, 0, 0, 0.16)) bottom / 100% 10px no-repeat;
    background-attachment: local, scroll;
}

/* the project: pages, diagrams and sources, one tree */
.st-project {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.st-project .st-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.st-project .st-panel-title button {
    height: 24px;
    width: 24px;
    padding: 0;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.st-project-find {
    height: 26px;
    margin: 0 12px 6px;
    padding: 0 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
}

.st-project-tree {
    overflow: auto;
    padding: 0 6px 8px;
    /* the shadow rides on the scroll: present only while something is below the fold */
    background:
        linear-gradient(var(--smart-industrial-panel-background, #fff) 30%, transparent) top / 100% 12px no-repeat,
        linear-gradient(transparent, rgba(0, 0, 0, 0.16)) bottom / 100% 10px no-repeat;
    background-attachment: local, scroll;
}

/* what the search found, in place of the tree */
.st-found-kind {
    padding: 6px 6px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-project-item .st-found-where {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 11px;
}

.st-project-group {
    margin: 2px 0 6px;
}

.st-project-group > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--smart-text-tertiary-color, #4a5663);
    cursor: pointer;
    list-style: none;
}

.st-project-group > summary::-webkit-details-marker {
    display: none;
}

.st-project-group > summary::before {
    content: "\25be";
    font-size: 10px;
    width: 10px;
}

.st-project-group:not([open]) > summary::before {
    content: "\25b8";
}

.st-project-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 26px;
    padding: 0 6px 0 22px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-project-item:hover {
    background: var(--smart-surface, #f1f4f7);
}

.st-project-item[aria-current="true"] {
    background: rgba(31, 92, 148, 0.12);
    font-weight: 600;
}

.st-project-item .st-project-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-project-item .st-project-meta {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 11px;
    white-space: nowrap;
}

.st-project-item .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2a7a3d;
    flex: 0 0 auto;
}

.st-project-item .dot.off {
    background: #a51f1f;
}

.st-project-resizer {
    /* a grab area of 24 pixels around a line of one: the line is drawn in the middle of it */
    height: 24px;
    margin: -9px 0;
    cursor: row-resize;
    background: linear-gradient(to bottom, transparent 11px, var(--smart-border, #ccd6e0) 11px, var(--smart-border, #ccd6e0) 13px, transparent 13px);
    position: relative;
    z-index: 1;
}

.st-project-resizer:hover,
.st-project-resizer:focus-visible {
    background: var(--smart-primary, #1f5c94);
}

.st-type-dialog {
    width: min(640px, 92vw);
}

.st-type-fields {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.st-type-fields th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--smart-text-tertiary-color, #4a5663);
    padding: 0 6px 4px 0;
}

.st-type-fields td {
    padding: 2px 6px 2px 0;
}

.st-type-fields input,
.st-type-fields select {
    width: 100%;
    height: 26px;
    box-sizing: border-box;
}

.st-kinds {
    display: grid;
    gap: 8px;
    margin: 4px 0 12px;
}

.st-kinds button {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-kinds button:hover {
    border-color: var(--smart-primary, #1f5c94);
}

.st-kinds button span {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
}

.st-inspector {
    grid-area: inspector;
    border-right: 0;
    border-left: 1px solid var(--smart-border, #ccd6e0);
}

.st-panel-title {
    margin: 0;
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-palette-search {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 8px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    font: inherit;
    background: var(--smart-background, #fff);
    color: inherit;
}

.st-palette-group h4 {
    margin: 10px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-text-tertiary-color, #4a5663);
}

#palette .st-palette-item {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px 2px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: grab;
}

#palette .st-palette-item small {
    display: block;
    font-family: var(--st-mono);
    font-size: 10.5px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* the controls palette on the panel side: pictures of the components, two to a row */
#palette .st-palette-group summary {
    margin: 4px 10px 1px;
    /* a target of at least 24 pixels (WCAG 2.2, 2.5.8) */
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-text-tertiary-color, #4a5663);
    cursor: pointer;
    list-style: none;
}

#palette .st-palette-group summary::before {
    content: "▾";
    display: inline-block;
    width: 12px;
    font-size: 10px;
}

#palette .st-palette-group:not([open]) summary::before {
    content: "▸";
}

.st-ctrls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 3px;
    padding: 0 8px 6px;
}

#palette .st-palette-item.st-ctrl {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    text-align: center;
    min-width: 0;
}

.st-ctrl-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* a 24px target is the floor (WCAG 2.2, 2.5.8); 38 gives the picture room to be read */
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    /* behind a picture while it loads: the theme's own shade, not a dark tile on the light theme */
    background: var(--st-bar-bg, #eef2f6);
}

/* the whole tile is the target, and it says which one it is on hover */
#palette .st-palette-item.st-ctrl:hover .st-ctrl-pic,
#palette .st-palette-item.st-ctrl:focus-visible .st-ctrl-pic {
    border-color: var(--smart-primary, #1f5c94);
    outline: 1px solid var(--smart-primary, #1f5c94);
}

.st-ctrl-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}



.st-ctrl-pic.st-ctrl-face {
    background: #f4f4f4;
    padding: 4px;
    box-sizing: border-box;
}

.st-ctrl-pic.st-ctrl-face svg {
    width: 100%;
    height: 100%;
}

/* The control drawings on the dark theme: the same drawings on the dark surface, so the palette
   does not stay a row of white tiles when the rest of the designer goes dark. */
body.studio-designer[theme="industrial-dark"] .st-ctrl-pic.st-ctrl-face { background: #1b242e; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#fff"] { fill: #26313d; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#e9e9e9"] { fill: #3a4757; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#555"] { stroke: #8b98a6; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#555"] { fill: #8b98a6; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#222"],
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#333"] { fill: #eaf0f6; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#333"] { stroke: #eaf0f6; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#ddd"] { stroke: #3a4757; }
/* the decorations' drawings too: a raised box and a recessed frame stayed light tiles */
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#f4f4f4"] { fill: #26313d; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [fill="#dcdcdc"] { fill: #1b242e; }
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#999"],
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#bbb"],
body.studio-designer[theme="industrial-dark"] .st-ctrl-face [stroke="#8c8c8c"] { stroke: #56687c; }

/* A component's picture in each theme: the one taken in the other is not shown, and not loaded. */
body.studio-designer[theme="industrial-dark"] .st-ctrl-pic img.st-pic-light,
body.studio-designer:not([theme="industrial-dark"]) .st-ctrl-pic img.st-pic-dark {
    display: none;
}

#palette .st-lv-group summary {
    color: var(--smart-text-color, #131c25);
}

.st-ctrl-pic.st-ctrl-text {
    background: var(--lv-node-bg, #fff);
    font-family: var(--st-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--lv-ink, #2b333d);
}

/* The name is in the tooltip the tile already carried. Writing it under every picture cost
   two lines of text per component and took the palette from forty visible to ten. It stays in
   the DOM for the search, which matches on it, and for a screen reader. */
.st-ctrl-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#nodePalette .st-palette-group {
    margin: 0 0 2px;
}

#nodePalette .st-palette-group summary {
    margin: 6px 12px 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-text-tertiary-color, #4a5663);
    cursor: pointer;
    list-style: none;
}

#nodePalette .st-palette-group summary::before {
    content: "▾";
    display: inline-block;
    width: 12px;
    font-size: 10px;
}

#nodePalette .st-palette-group:not([open]) summary::before {
    content: "▸";
}

.st-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 0 8px 4px;
}

#nodePalette .st-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 2px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: grab;
    min-width: 0;
}

.st-palette-item:hover {
    background: var(--smart-ui-state-hover, #eef2f6);
    border-color: var(--smart-border, #ccd6e0);
}

.st-tile-name {
    display: block;
    width: 100%;
    font-size: 10px;
    line-height: 12px;
    color: var(--smart-text-secondary-color, #3c4855);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-tile-glyph,
.st-tile-abbr,
.st-tile-const,
.st-tile-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--lv-line, #3b4450);
    border-radius: 2px;
    background: var(--lv-node-bg, #fff);
    font-family: var(--st-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--lv-ink, #2b333d);
}

.st-tile-glyph svg { width: 18px; height: 18px; }

.st-palette-item[data-category="Math"] .st-tile-glyph { background: var(--lv-math, #fff3c4); }
.st-palette-item[data-category="Compare and logic"] .st-tile-glyph { background: var(--lv-logic, #e3f3e2); }
.st-palette-item[data-category="Text"] .st-tile-glyph { background: var(--lv-text, #fbe3ef); }
.st-palette-item[data-category="Arrays"] .st-tile-glyph { background: var(--lv-arrays, #fde7d3); }
.st-palette-item[data-category="Time"] .st-tile-glyph { background: var(--lv-time, #e2ecfb); }
.st-palette-item[data-category="Structures"] .st-tile-glyph { background: var(--lv-structures, #e9e6f7); }
.st-palette-item[data-category="Outputs"] .st-tile-glyph { background: var(--lv-outputs, #eef0f3); }
.st-palette-item[data-category="Logic"] .st-tile-glyph { background: var(--lv-time, #e2ecfb); }

.st-tile-abbr {
    width: 36px;
    height: 20px;
    font-size: 10px;
    font-weight: 700;
    color: var(--lv-any, #6b7480);
    border-color: var(--lv-any, #6b7480);
}

.st-tile-abbr.st-control { border-width: 3px; }

.st-tile-const {
    width: 30px;
    height: 20px;
    font-size: 10.5px;
    border-width: 1.5px;
    border-radius: 3px;
}

.st-tile-const.t-number { border-color: var(--lv-number, #e08a00); }
.st-tile-const.t-boolean { border-color: var(--lv-boolean, #2f8f4e); color: var(--lv-boolean, #2f8f4e); }
.st-tile-const.t-string { border-color: var(--lv-string, #c0459a); }
.st-tile-const.t-array { border-color: var(--lv-array, #d97a2b); border-width: 2.5px; }

.st-tile-frame {
    position: relative;
    width: 36px;
    height: 26px;
    border: 2.5px solid var(--lv-frame, #6b7480);
    background: transparent;
}

.st-tile-frame i {
    position: absolute;
    left: 2px;
    bottom: 1px;
    font-size: 8px;
    font-style: italic;
    color: #2f6fb5;
}

.st-tile-frame b {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid #c0392b;
}

/* the workspace is one region (the panel and the diagram share its area) so a screen reader and the skip link have one place to land */
.st-workspace {
    grid-area: canvas;
    display: grid;
    grid-template-areas: "canvas";
    min-width: 0;
    min-height: 0;
    outline: none;
}

.st-canvas-wrap {
    grid-area: canvas;
    overflow: auto;
    padding: 16px;
    /* renderCanvas puts the scroll back itself; the browser's anchoring would add its own
       adjustment on top of that and the view would creep down on every edit */
    overflow-anchor: none;
}

/* the first stop of a keyboard walk: off screen until it is focused */
.st-skip {
    position: fixed;
    top: -60px;
    left: 8px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: 4px;
    background: #ffffff;
    color: #131c25;
    font: 600 13px/1.4 var(--st-font);
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: top 0.12s;
}

.st-skip:focus {
    top: 8px;
    outline: 2px solid #1f5c94;
    outline-offset: 2px;
}

/* the canvas laid out at the width of the target screen, scaled to fit the window */
.st-canvas-wrap.st-scaled {
    overflow: auto;
}

/* zoom, not a transform: a transformed canvas kept its 1920 px layout box, and the scroll area
   ran 1000 px past the drawing into blank canvas. Zoomed, the box is the size it is drawn. */
.st-canvas-wrap.st-scaled .st-canvas {
    width: var(--st-target-width);
    zoom: var(--st-canvas-scale, 1);
}

/* the room the scaled canvas really takes, so the scrollbars are honest */
.st-canvas-wrap.st-scaled .st-canvas-room {
    width: calc(var(--st-target-width) * var(--st-canvas-scale, 1));
    height: 1px;
}

/* the ruler: one cell per column, numbered, on the canvas's own grid so it cannot drift */
.st-ruler {
    position: sticky;
    top: -16px;
    z-index: 3;
    display: grid;
    height: 16px;
    margin: -16px 0 0;
    padding-bottom: 2px;
    background: var(--smart-industrial-panel-background, #fff);
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    transform-origin: top left;
    pointer-events: none;
    user-select: none;
}

.st-ruler i {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-left: 1px solid var(--smart-border, #ccd6e0);
    font: 9px/1 var(--st-mono);
    font-style: normal;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-canvas-wrap.st-scaled .st-ruler {
    width: var(--st-target-width);
    zoom: var(--st-canvas-scale, 1);
}

body.st-flows-mode .st-ruler,
body.st-system-mode .st-ruler {
    display: none;
}

.st-canvas {
    position: relative;
    min-height: 100%;
    background-image: linear-gradient(var(--smart-industrial-accent-line, rgba(19, 28, 37, 0.06)) 1px, transparent 1px);
    background-size: 100% var(--st-row, 52px);
    padding-bottom: 240px;
}

.st-canvas .studio-cell {
    outline: 1px dashed transparent;
    outline-offset: 2px;
    cursor: move;
    transition: outline-color 0.1s;
}

.st-canvas .studio-cell:hover {
    outline-color: var(--smart-outline, #94a3b3);
}

.st-canvas .studio-cell.selected {
    outline: 2px solid #1f5c94;
    outline-offset: 2px;
}

/* reached with Tab: the dashed hover line was transparent at rest, so the keyboard user could not
   see which component had the focus */
.st-canvas .studio-cell:focus-visible {
    outline: 2px dashed #1f5c94;
    outline-offset: 2px;
}

/* #1f5c94 on the dark surface is 2.2:1: the selection needs the lighter blue there */
body.studio-designer[theme="industrial-dark"] .st-canvas .studio-cell.selected,
body.studio-designer[theme="industrial-dark"] .st-canvas .studio-cell:focus-visible {
    outline-color: #6fb1ea;
}

.st-canvas .studio-cell.dragging {
    opacity: 0.7;
}

.st-canvas .studio-cell.drop-target {
    outline: 2px solid #2a7a3d;
}

/* the designer's cells must not let the live element eat the pointer. The element is its own
   stacking context under the cover: a slider's thumb carries a z-index, rose above the cover,
   and a drag meant to move the component moved the value too. The resize handle (2) stays on top. */
.st-canvas .studio-cell > :not(.st-handle):not(.st-cell-name):not(.studio-caption) {
    position: relative;
    z-index: 0;
}

.st-canvas .studio-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.st-canvas .studio-cell.interactive::after,
/* the mimic being drawn on: the element needs the pointer, so the cell stops taking it */
.st-canvas .studio-cell.st-drawing::after {
    display: none;
}

.st-canvas .studio-cell.st-drawing {
    outline: 2px solid var(--lv-select, #1f5c94);
    outline-offset: 2px;
}

/* the process symbols, while drawing */
.st-symbol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px;
    padding: 6px 0 10px;
}

.st-symbol-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    height: 64px;
    overflow: hidden;
    padding: 5px 2px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 10px;
    cursor: grab;
}

.st-symbol-tile:hover {
    border-color: var(--lv-select, #1f5c94);
}

.st-symbol-tile smart-mimic-symbol {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 32px;
    overflow: hidden;
    pointer-events: none;
}

.st-symbol-tile span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--smart-text-secondary-color, #4a5663);
}

.st-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 12px;
    height: 12px;
    border: 2px solid #1f5c94;
    border-radius: 2px;
    background: #fff;
    cursor: nwse-resize;
    z-index: 2;
    display: none;
}

.st-canvas .studio-cell.selected .st-handle {
    display: block;
}

.st-cell-name {
    position: absolute;
    left: 0;
    top: -18px;
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    background: #1f5c94;
    color: #fff;
    font-size: 10px;
    font-family: var(--st-mono);
    display: none;
    z-index: 2;
    white-space: nowrap;
}

.st-canvas .studio-cell.selected .st-cell-name {
    display: block;
    /* a long id stops at the cell's width (or 160 px): it ran past the canvas's edge */
    max-width: max(100%, 160px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* in the first row the name went under the ruler: there it hangs below the cell */
.st-canvas .studio-cell.selected[style^="grid-area: 1 /"] .st-cell-name {
    top: auto;
    bottom: -18px;
    border-radius: 0 0 3px 3px;
}

.st-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* inspector */
.st-tabs {
    display: flex;
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    margin: 0 12px;
}

.st-tabs button {
    flex: 1;
    padding: 8px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--smart-text-secondary-color, #3c4855);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.st-tabs button[aria-selected="true"] {
    color: #1f5c94;
    border-bottom-color: #1f5c94;
}

.st-inspector-body {
    padding: 8px 12px 16px;
}

.st-field {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 4px 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--smart-border-light, #e3e8ee);
}

.st-sign { margin: -4px 0 10px; font-size: 12px; display: grid; gap: 4px; }
.st-sign select { font: inherit; }
/* the signing panel: over the page, centred, with the page dimmed behind it; the component hides itself when not opened */
.studio-signer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; max-width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); }
.studio-signer[opened]::before { content: ''; position: fixed; inset: -100vh -100vw; background: rgba(19, 28, 37, 0.55); z-index: -1; }
.st-versions ol { margin: 4px 0 0; padding-left: 18px; }
.st-versions li { margin: 2px 0; }
.st-versions li.current { font-weight: 600; }
.st-versions button { margin-left: 8px; }
.st-instrument { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; align-items: center; }
.st-instrument select { grid-column: 1 / -1; }
.st-instrument .st-desc, .st-instrument .st-agent-sources { grid-column: 1 / -1; }
.st-agent-sources { font-size: 12px; color: var(--st-muted, #6b7785); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.st-agent-sources button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 2px; }
.st-agent-sources button:hover { color: var(--st-danger, #c0392b); }
.st-field label {
    font-family: var(--st-mono);
    font-size: 11.5px;
    color: var(--smart-text-secondary-color, #3c4855);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-field input[type="text"],
.st-field input[type="number"],
.st-field input[type="password"],
.st-field input[type="email"],
.st-field input[type="url"],
.st-field input[type="search"],
.st-field select,
.st-field textarea {
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 12px var(--st-font);
}

.st-field textarea {
    height: 72px;
    padding: 4px 6px;
    font-family: var(--st-mono);
    font-size: 11px;
    resize: vertical;
}

.st-field input:focus,
.st-field select:focus,
.st-field textarea:focus {
    outline: 2px solid rgba(31, 92, 148, 0.35);
    outline-offset: 0;
}

.st-field.bound label::after {
    content: " ⇐";
    color: #d98014;
}

.st-field .st-desc {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--smart-text-tertiary-color, #4a5663);
    display: none;
}

/* how a bound property reads its tag - its units, its value map - under the tag chooser */
.st-bind-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--smart-text-secondary-color, #3c4855);
}

.st-bind-units {
    display: flex;
    align-items: center;
    gap: 4px;
}

.st-bind-options input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 22px;
    box-sizing: border-box;
    padding: 0 5px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 11px var(--st-mono);
}

.st-colour input.st-invalid,
.st-bind-options input.st-invalid {
    border-color: #a51f1f;
}

.st-field:hover .st-desc,
.st-field:focus-within .st-desc {
    display: block;
}

.st-inspector .st-hint {
    font-size: 12px;
    color: var(--smart-text-tertiary-color, #4a5663);
    padding: 12px;
}

.st-inspector-head {
    padding: 10px 12px 0;
    /* a long name or id wraps rather than running under the tabs */
    overflow-wrap: anywhere;
}

.st-inspector-head h3 {
    margin: 0;
    font-size: 15px;
}

.st-inspector-head code {
    font-size: 11px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-inspector .st-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px 0;
}

.st-inspector .st-actions button,
.st-alarms-help .st-actions button,
.st-small-button {
    height: 26px;
    padding: 0 10px;
    white-space: nowrap;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 12px var(--st-font);
    cursor: pointer;
}

.st-inspector .st-actions button:hover,
.st-alarms-help .st-actions button:hover,
.st-small-button:hover {
    border-color: #1f5c94;
}

.st-inspector .st-actions button.danger {
    color: #a51f1f;
}

/* the dark theme needs a lighter red: #a51f1f on the dark surface is 2.4:1 */
body.studio-designer[theme="industrial-dark"] .st-inspector .st-actions button.danger {
    color: #ff8a80;
}

/* a station that asks who you are, in the System view */
.st-signin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    align-items: end;
    padding: 10px 12px 12px;
}

.st-signin p {
    grid-column: 1 / -1;
    margin: 0;
}

.st-signin label {
    display: grid;
    gap: 3px;
    font-size: 12px;
}

.st-signin input {
    min-height: 28px;
    box-sizing: border-box;
}

.st-signin button {
    min-height: 28px;
}

.st-signin-state {
    grid-column: 1 / -1;
    min-height: 1.4em;
    font-size: 12px;
}

/* the diagram's zoom, in the corner of the canvas */
.st-zoom {
    position: absolute;
    top: 8px;
    right: 22px;
    z-index: 4;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid #c3ccd6;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.st-zoom button {
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #1d2733;
    font: 600 12px/24px var(--st-font, system-ui, sans-serif);
    cursor: pointer;
}

.st-zoom button:hover,
.st-zoom button:focus-visible {
    background: #e6edf4;
}

body.studio-designer[theme="industrial-dark"] .st-zoom {
    border-color: #3a4856;
    background: #1b242e;
}

body.studio-designer[theme="industrial-dark"] .st-zoom button {
    color: #eaf0f6;
}

body.studio-designer[theme="industrial-dark"] .st-zoom button:hover,
body.studio-designer[theme="industrial-dark"] .st-zoom button:focus-visible {
    background: #2a3642;
}

/* the debugger's Step and Continue while a run is paused: over the top of the diagram, where the run
   is - in the top bar the strip made the bar wrap to a second row and moved everything under it */
.st-flow-debugger {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #a51f1f;
    border-radius: 4px;
    background: var(--st-bar-danger-bg, #fdeced);
    color: var(--st-bar-danger-fg, #a51f1f);
    font: 12px var(--st-font, system-ui, sans-serif);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(19, 28, 37, 0.2);
}

.st-flow-debugger button {
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--st-bar-line, #b9c6d3);
    border-radius: 3px;
    background: var(--st-bar-field, #ffffff);
    color: var(--st-bar-fg, #131c25);
    font: 600 12px var(--st-font, system-ui, sans-serif);
    cursor: pointer;
}

.st-flow-debugger button:hover,
.st-flow-debugger button:focus-visible {
    border-color: var(--st-bar-hover, #1f5c94);
}

.st-flow-debugger[hidden] {
    display: none !important;
}

/* how a diagram on the station is doing, in its inspector */
.st-station-run {
    display: block;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.st-station-run.has-errors {
    color: #a51f1f;
    font-weight: 600;
}

body.studio-designer[theme="industrial-dark"] .st-station-run.has-errors {
    color: #ff8a80;
}

/* what a dialog is waiting for: a part's parameter left empty */
.st-error-text {
    color: #a51f1f;
    font-weight: 600;
}

body.studio-designer[theme="industrial-dark"] .st-error-text {
    color: #ff8a80;
}

/* sources and tags */
.st-sources {
    grid-area: sources;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    max-height: 132px;
    background: var(--smart-industrial-panel-header-background, #eef2f6);
    border-top: 1px solid var(--smart-border, #ccd6e0);
}

.st-sources > div {
    padding: 8px 12px;
    overflow: auto;
}

.st-sources .st-source {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.st-sources .st-source > span:not(.dot) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-sources .st-source-actions {
    flex-shrink: 0;
}

.st-sources .st-source .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a7a3d;
    margin-right: 6px;
    flex: 0 0 auto;
}

/* Not open is not green. One rule for every dot the designer draws, because the markup that
   emits them is in five different places and the next one will forget - written at the same
   specificity as the rules it has to beat, or the base green wins and says the opposite. */
.dot.off,
.st-sources .st-source .dot.off,
.st-station-card .dot.off,
.st-station-card-head .dot.off {
    background: #a51f1f;
}

/* A station card's dot had no colour at all: the base rule is scoped to the source strip and
   the project tree, so the card drew an 8px hole. */
.st-station-card .dot,
.st-station-card-head .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a7a3d;
    margin-right: 6px;
    flex: 0 0 auto;
}

.st-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-content: flex-start;
}

.st-tag {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 3px 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 999px;
    background: var(--smart-background, #fff);
    font-family: var(--st-mono);
    font-size: 11px;
    cursor: grab;
    user-select: none;
}

.st-tag:hover {
    border-color: #1f5c94;
}

.st-tag .v {
    color: #1a6029;
    min-width: 42px;
    text-align: right;
}

/* a source that is not open: its last values are not current, and look it */
.st-tag.stale {
    opacity: 0.55;
    border-style: dashed;
}

.st-tag .src {
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-tags .st-hint {
    font-size: 12px;
    color: var(--smart-text-tertiary-color, #4a5663);
    width: 100%;
}

/* dialogs */
.st-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    box-sizing: border-box;
    overflow: auto;
    padding: 18px 20px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 6px;
    background: var(--smart-industrial-panel-background, #fff);
    color: var(--smart-text-color, #131c25);
    font: 13px/1.45 var(--st-font);
}

.st-dialog::backdrop {
    background: rgba(19, 28, 37, 0.45);
}

.st-dialog h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.st-dialog .st-field {
    grid-template-columns: 90px minmax(0, 1fr);
}

.st-dialog .st-field .st-desc {
    display: block;
}

.st-field[hidden] {
    display: none;
}

.st-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.st-small-button.primary {
    background: #1f5c94;
    border-color: #1f5c94;
    color: #fff;
}

.st-help ol {
    padding-left: 20px;
    margin: 0 0 10px;
}

.st-help li {
    margin-bottom: 8px;
}

.st-help p {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
}

.st-link {
    border: 0;
    background: transparent;
    color: #1f5c94;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 0 2px;
}

.st-link:hover {
    text-decoration: underline;
}

.st-guides {
    position: absolute;
    inset: 0;
    display: grid;
    pointer-events: none;
    z-index: 1;
}

.st-guides i {
    display: block;
    background: rgba(31, 92, 148, 0.06);
    border-left: 1px dashed rgba(31, 92, 148, 0.35);
    border-right: 1px dashed rgba(31, 92, 148, 0.35);
}

/* dark theme for the designer chrome, driven by the project's theme on the body */
body.studio-designer[theme="industrial-dark"] {
    /* the native parts - selects' lists, number spinners, date pickers, scroll bars - were light */
    color-scheme: dark;
    --smart-industrial-panel-background: #1e2731;
    --smart-industrial-panel-header-background: #26313d;
    --smart-border: #313e4b;
    --smart-border-light: #2a3540;
    --smart-background: #10161d;
    --smart-text-color: #eaf0f6;
    --smart-text-secondary-color: #c2ced9;
    --smart-text-tertiary-color: #a7b4c1;
    --smart-text-title-color: #f3f7fb;
    --smart-ui-state-hover: #26313d;
    --smart-industrial-canvas: #10161d;
    --smart-industrial-accent-line: rgba(255, 255, 255, 0.05);
}

body.studio-designer[theme="industrial-dark"] .st-handle {
    background: #10161d;
}

body.studio-designer[theme="industrial-dark"] .st-link {
    color: #6fb2ec;
}

body.studio-designer[theme="industrial-dark"] .st-guides i {
    background: rgba(111, 178, 236, 0.07);
    border-color: rgba(111, 178, 236, 0.35);
}

body.studio-designer[theme="industrial-dark"] .st-tag .v {
    color: #5fc98a;
}

body.studio-designer[theme="industrial-dark"] .st-tabs button[aria-selected="true"] {
    color: #6fb2ec;
    border-bottom-color: #6fb2ec;
}

@media (max-width: 1100px) {
    body.studio-designer {
        grid-template-columns: 180px minmax(0, 1fr) 260px;
    }
}

/* a 1024-pixel window: the bar keeps every button on screen - the name and the page list narrow, the group words go */
@media (max-width: 1180px) {
    .st-bar {
        gap: 6px;
        padding: 0 8px;
    }

    .st-bar #projectName {
        width: 110px;
    }

    .st-bar .st-brand {
        margin-right: 0;
    }

    /* the group words go; the status stays - the bar wraps rather than hide what a save said */
    .st-bar .st-group > span:first-child {
        display: none;
    }

    .st-bar #pageSelect,
    .st-bar #flowSelect {
        max-width: 110px;
    }
}

/* what the system says about motion is what the designer and the app do */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* the way back to the designer, on a screen a station serves */
/* the top right corner of a published screen: who is signed in, and the way to the designer */
.studio-app-corner {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 19;
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: calc(100vw - 24px);
}

.studio-app-user,
.studio-app-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 4px 2px 10px;
    border: 1px solid var(--smart-border, #c3ccd6);
    border-radius: 4px;
    background: var(--smart-background, #ffffff);
    color: var(--smart-text-color, #131c25);
    font: 600 12px/1.4 var(--st-font);
}

.studio-app-user[hidden],
.studio-app-signin[hidden] {
    display: none;
}

.studio-app-signin {
    padding: 2px 12px;
    cursor: pointer;
}

.studio-app-user button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--smart-border, #c3ccd6);
    border-radius: 3px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.studio-app-edit {
    padding: 4px 10px;
    border: 1px solid var(--smart-border, #c3ccd6);
    border-radius: 4px;
    background: var(--smart-background, #ffffff);
    color: var(--smart-text-color, #131c25);
    font: 600 12px/1.4 var(--st-font);
    text-decoration: none;
    opacity: 0.85;
}

.studio-app-edit:hover,
.studio-app-edit:focus-visible {
    opacity: 1;
}

/* what runs here is no longer what the station holds */
/* the notice of a newer version pushes the screen down rather than covering its page tabs */
body:has(.studio-app-update:not([hidden])) {
    padding-top: 40px;
}

.studio-app-update {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 21;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #1f5c94;
    color: #ffffff;
    font: 600 13px/1.4 var(--st-font);
}

.studio-app-update[hidden] {
    display: none;
}

/* the notice spans the top of the screen: the way to the designer moves below it, not under it */
.studio-app-update:not([hidden]) ~ .studio-app-corner {
    top: 52px;
}

.studio-app-update button {
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* the measurement panel: what a source really carries, before a screen exists */
.st-measure {
    width: min(940px, 94vw);
}

.st-measure-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

/* the table scrolls inside its column rather than running under the trace beside it */
.st-measure-tags {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 13px;
}

.st-measure-tags th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--smart-text-tertiary-color, #4a5663);
    padding: 0 8px 4px 0;
}

.st-measure-tags td {
    padding: 3px 8px 3px 0;
    border-top: 1px solid var(--smart-border, #e1e6ec);
    white-space: nowrap;
}

.st-measure-tags tr.selected td {
    background: var(--smart-surface, #f4f6f8);
}

.st-measure-tags .v {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.st-measure-tags .age {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 11px;
}

.st-measure-tags input {
    width: 88px;
    height: 24px;
}

.st-measure-tags tbody tr {
    cursor: pointer;
}

.st-measure-trace {
    color: var(--smart-primary, #1f5c94);
}

.st-measure-trace svg {
    width: 100%;
    height: 80px;
    background: var(--smart-surface, #f4f6f8);
    border: 1px solid var(--smart-border, #e1e6ec);
    border-radius: 4px;
}

/* a picture, a camera and an embedded page: the media fills its cell and nothing else */
.studio-image,
.studio-camera,
.studio-frame {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.studio-media {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.studio-media-empty,
.studio-media-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--smart-border, #ccd6e0);
    border-radius: 3px;
    color: var(--smart-text-secondary-color, #4a5663);
    font-size: 12px;
    text-align: center;
}

.studio-media-broken {
    border-color: #a51f1f;
    color: #a51f1f;
}

/* a page inside a page */
.studio-page-inside {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.studio-page-inside.studio-page {
    padding: 0;
}

/* a component the page does not have: said where it stands, as a refused page is */
.studio-unknown {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 8px;
    border: 1px dashed #a51f1f;
    border-radius: 4px;
    color: #a51f1f;
    font-size: 12px;
    text-align: center;
}

.studio-page-inside-refused {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px dashed #a51f1f;
    border-radius: 4px;
    color: #a51f1f;
    font-size: 12px;
    text-align: center;
}

/* a source that is not open, said at the bottom of the app */
.studio-app-health {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 6px 16px;
    background: #a51f1f;
    color: #fff;
    font: 600 13px/1.4 var(--st-font);
}

.studio-app-health[hidden] {
    display: none;
}

/* the edition line of a published app: shown only for an evaluation copy */
.studio-app-edition {
    display: none;
    margin: 0;
    padding: 4px 16px 8px;
    font: 11px var(--st-font);
    color: var(--smart-text-tertiary-color, #4a5663);
}

.studio-app-edition[data-edition="evaluation"] {
    display: block;
}

/* the login an agent may ask an app for */
.studio-login {
    width: min(380px, calc(100vw - 32px));
    padding: 22px 24px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 6px;
    background: var(--smart-industrial-panel-background, #fff);
    color: var(--smart-text-color, #131c25);
    font: 14px/1.5 var(--st-font);
}

.studio-login-oidc { margin-top: 8px; background: transparent; }
.studio-login::backdrop {
    background: rgba(19, 28, 37, 0.55);
}

.studio-login h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

/* the dialog's own parts only: the docked touch keyboard moves into this dialog, and these rules
   painted its keys - Done, ?123 and the arrows came out white on white */
.studio-login form > p {
    margin: 0 0 14px;
    color: var(--smart-text-secondary-color, #3c4855);
}

.studio-login form > label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--smart-text-secondary-color, #3c4855);
}

.studio-login form > label > input {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 4px;
    padding: 0 10px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 14px var(--st-font);
}

.studio-login form > button {
    height: 36px;
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-radius: 3px;
    background: #1f5c94;
    color: #fff;
    font: 600 14px var(--st-font);
    cursor: pointer;
}

.studio-login-error {
    color: #a51f1f;
    font-weight: 600;
}

/* the plant's value is past this control's range: it is drawn at the end of the range (85 shown
   as the max of 80), so the control says it is not the plant's value */
.studio-element[out-of-range] {
    outline: 2px dashed var(--smart-industrial-alarm-warning, #b26b00);
    outline-offset: 2px;
}

/* kiosk: the app alone, no page tabs, no pointer over static parts */
body.studio-kiosk .studio-app-pages {
    display: none;
}

body.studio-kiosk {
    overflow: hidden;
}

.st-desc[hidden] {
    display: none;
}

/* ── The flow editor ────────────────────────────────────────────────────── */

.st-bar .st-mode {
    display: inline-flex;
    border: 1px solid var(--st-bar-line);
    border-radius: 3px;
    overflow: hidden;
}

.st-bar .st-mode button {
    border: 0;
    border-radius: 0;
    height: 26px;
    padding: 0 12px;
    background: transparent;
    color: var(--st-bar-soft);
}

.st-bar .st-mode button[aria-selected="true"] {
    background: #1f5c94;
    color: #fff;
    font-weight: 600;
}

/* A toolbar's buttons: square, icon-only, grouped with a rule between groups - so a thing is
   findable by where it sits rather than by reading every label. */
.st-bar .st-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid var(--st-bar-line);
}

.st-bar button.st-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 28 square: over the 24px floor of WCAG 2.2 (2.5.8) with room for the glyph */
    width: 28px;
    height: 28px;
    padding: 0;
}

.st-bar button.st-icon svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

.st-bar button.st-icon[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* the classic run arrow, and the abort square while it runs */
.st-bar button.st-run {
    gap: 6px;
    padding: 0 10px 0 6px;
}

.st-run-arrow {
    width: 18px;
    height: 18px;
    fill: #fff;
    stroke: var(--st-bar-hover);
    stroke-width: 1;
    stroke-linejoin: round;
}

.st-run-arrow.broken {
    fill: #f0a35a;
    stroke: #f0a35a;
}

.st-run-abort {
    width: 18px;
    height: 18px;
    fill: #e05a4f;
}

.st-bar button.st-run[data-running="true"] {
    background: var(--st-bar-danger-bg);
    border-color: #a51f1f;
}

.st-bar button.st-highlight {
    width: 30px;
    padding: 0;
    justify-content: center;
    color: var(--st-bar-muted);
}

.st-bar button.st-highlight svg {
    width: 18px;
    height: 18px;
}

.st-bar button.st-highlight[aria-pressed="true"] {
    color: var(--st-bar-lamp);
    border-color: var(--st-bar-lamp-line);
    background: var(--st-bar-lamp-bg);
}

/* the system view: one card per station, one row per device */
.st-system-wrap {
    grid-area: canvas;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

body:not(.st-system-mode) .st-system-wrap {
    display: none;
}

body.st-system-mode .st-palette-search,
body.st-system-mode .st-canvas-wrap,
body.st-system-mode .st-flow-wrap,
body.st-system-mode [data-mode-only="screen"],
body.st-system-mode [data-mode-only="flows"] {
    display: none;
}

.st-system-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    background: var(--smart-industrial-panel-background, #fff);
}

.st-system-views {
    display: inline-flex;
    gap: 2px;
}

.st-system-views button {
    height: 26px;
    padding: 0 12px;
    /* a two-character Chinese label broke onto two lines in a 26px button */
    white-space: nowrap;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.st-system-views button[aria-selected="true"] {
    background: var(--smart-primary, #1f5c94);
    border-color: var(--smart-primary, #1f5c94);
    color: #fff;
}

/* a device that is planned rather than present */
.st-station-card.planned {
    border-style: dashed;
}

.st-station-card-device.planned .st-station-card-device-head b::after {
    content: " (planned)";
    font-weight: 400;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-device-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.st-system-bar input {
    height: 26px;
    width: 240px;
    padding: 0 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
}

.st-system-canvas {
    overflow: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* each card as tall as what it holds, the canvas scrolling: a card clips (overflow hidden), so
       its least height is 0 and the rows were squeezed to share the view - the first station's
       jobs were cut off and could not be reached */
    grid-auto-rows: max-content;
    gap: 16px;
    align-content: start;
}

.st-station-card {
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 6px;
    background: var(--smart-industrial-panel-background, #fff);
    overflow: hidden;
}

/* a station asked and not answered yet: its place in the list, until its card comes */
.st-station-card-waiting {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-station-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    background: var(--smart-surface, #f4f6f8);
}

/* a station this view listed on its own account: taken out again from its card */
.st-station-card-head .st-station-remove {
    margin-left: auto;
}

.st-station-card-head b {
    font-size: 14px;
}

.st-station-card-head .st-station-card-where {
    flex: 1;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-station-card-device {
    padding: 8px 12px;
    border-bottom: 1px solid var(--smart-border, #e8edf2);
}

.st-station-card-device:last-child {
    border-bottom: 0;
}

.st-station-card-device-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.st-station-card-device-head b {
    font-size: 13px;
}

.st-station-card-device-head code {
    flex: 1;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-station-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.st-station-card-tags .st-tag {
    cursor: grab;
}

.st-station-card-apps {
    padding: 8px 12px;
    border-top: 1px solid var(--smart-border, #ccd6e0);
    background: var(--smart-surface, #f4f6f8);
    font-size: 12px;
}

.st-station-card-apps a {
    color: var(--smart-primary, #1f5c94);
}

.st-station-card-empty {
    padding: 10px 12px;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
}

body.st-flows-mode .st-canvas-wrap,
body.st-flows-mode [data-mode-only="screen"],
body:not(.st-flows-mode) [data-mode-only="flows"],
body:not(.st-flows-mode) .st-flow-wrap {
    display: none;
}

.st-flow-wrap {
    grid-area: canvas;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

/* context help: a small window in the canvas's corner, as the classic */
/* the Error list */
.st-error-list ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 50vh;
    overflow: auto;
}

.st-error-list li {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 2px 10px;
    padding: 7px 8px;
    border-top: 1px solid var(--smart-border, #ccd6e0);
    cursor: pointer;
    font-size: 12.5px;
}

.st-error-list li:hover {
    background: rgba(31, 92, 148, 0.08);
}

.st-error-list li b {
    font-weight: 600;
}

.st-error-list li.sev-error b {
    color: #c0392b;
}

.st-error-list li.sev-warning b {
    color: #a86400;
}

.st-error-list li small {
    grid-column: 2;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-family: var(--st-mono);
    font-size: 11px;
}

.st-context-help .st-ch-problem {
    margin: 8px 0 0;
    padding: 4px 6px;
    border-left: 3px solid #c0392b;
    background: rgba(192, 57, 43, 0.06);
}

.st-context-help .st-ch-problem.sev-warning {
    border-left-color: #a86400;
    background: rgba(168, 100, 0, 0.06);
}

/* the right-click menu */
.st-popup {
    position: absolute;
    min-width: 200px;
    padding: 4px 0;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--lv-node-bg, #fff);
    color: var(--lv-ink, #2b333d);
    box-shadow: 0 6px 20px rgba(19, 28, 37, 0.22);
    z-index: 8;
    font-size: 12.5px;
}

.st-popup button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-popup button span,
.st-popup button kbd {
    margin-left: auto;
    font-family: var(--st-mono);
    font-size: 10.5px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-popup button[aria-checked="true"]::before {
    content: "✓ ";
}

.st-popup button:hover:not([disabled]),
.st-popup button:focus-visible {
    background: rgba(31, 92, 148, 0.1);
    outline: none;
}

.st-popup button[disabled] {
    opacity: 0.45;
    cursor: default;
}

.st-popup .st-popup-back {
    color: var(--smart-text-tertiary-color, #4a5663);
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    margin-bottom: 4px;
}

.st-popup hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--smart-border, #ccd6e0);
}

/* find, in the canvas's top-right corner */
.st-find {
    position: absolute;
    right: 14px;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--lv-node-bg, #fff);
    box-shadow: 0 6px 20px rgba(19, 28, 37, 0.18);
    z-index: 6;
}

.st-find[hidden] {
    display: none;
}

.st-find input {
    width: 300px;
    font: 12.5px var(--st-font);
}

.st-find span {
    min-width: 46px;
    font-size: 11.5px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-find button {
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: var(--lv-ink, #2b333d);
}

.st-context-help {
    position: absolute;
    right: 14px;
    bottom: 182px;
    width: 280px;
    max-height: 46%;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--lv-node-bg, #fff);
    color: var(--lv-ink, #2b333d);
    box-shadow: 0 6px 20px rgba(19, 28, 37, 0.18);
    font-size: 12px;
    line-height: 1.4;
    z-index: 6;
}

.st-context-help h4 {
    margin: 0 0 2px;
    font-size: 13px;
}

.st-context-help h4 small {
    margin-left: 6px;
    font-family: var(--st-mono);
    font-weight: 400;
    color: var(--lv-label, #4d5866);
}

.st-context-help p {
    margin: 0 0 8px;
    color: var(--lv-label, #4d5866);
}

.st-context-help .st-ch-terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    font-family: var(--st-mono);
    font-size: 11px;
}

.st-context-help .st-ch-terms div {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-context-help .st-ch-terms i {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 1.5px;
    border: 1.5px solid var(--lv-any, #6b7480);
}

.st-context-help .st-ch-terms i.t-number { border-color: var(--lv-number, #e08a00); }
.st-context-help .st-ch-terms i.t-boolean { border-color: var(--lv-boolean, #2f8f4e); }
.st-context-help .st-ch-terms i.t-string { border-color: var(--lv-string, #c0459a); }
.st-context-help .st-ch-terms i.t-array { border-color: var(--lv-array, #d97a2b); }
.st-context-help .st-ch-terms i.t-record { border-color: var(--lv-record, #8a5a2b); }
.st-context-help .st-ch-terms div.wired { font-weight: 600; }
.st-context-help .st-ch-terms div.out { justify-content: flex-end; }

.st-flow-scroll {
    overflow: auto;
    position: relative;
}

.st-flow {
    position: relative;
    width: 2400px;
    height: 1600px;
    background-color: var(--lv-canvas, #ffffff);
    background-image: radial-gradient(var(--lv-dot, #d5dbe3) 1px, transparent 1px);
    background-size: 20px 20px;
}

.st-flow.dropping {
    outline: 2px dashed #1f5c94;
    outline-offset: -2px;
}

.st-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.st-wires path {
    fill: none;
    stroke: var(--lv-any, #6b7480);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: butt;
    cursor: pointer;
    transition: stroke-width 120ms;
}

.st-wires path.hit {
    stroke: transparent;
    stroke-width: 14px;
}

.st-wires path.selected {
    stroke: #1f5c94;
    stroke-width: 4px;
}

/* a broken wire: to a terminal that is gone, of the wrong type, or closing a loop; the Error list says which */
#flowWires path.broken {
    stroke: #c0392b;
    stroke-dasharray: 5 4;
    stroke-width: 2px;
}

.st-wires path.kind-number { stroke: var(--lv-number, #e08a00); }
.st-wires path.kind-boolean { stroke: var(--lv-boolean, #2f8f4e); stroke-dasharray: 5 3; }
.st-wires path.kind-string { stroke: var(--lv-string, #c0459a); stroke-dasharray: 2 3; }
.st-wires path.kind-record { stroke: var(--lv-record, #8a5a2b); stroke-width: 3px; }
.st-wires path.kind-array { stroke: var(--lv-array, #d97a2b); stroke-width: 4px; }
.st-wires path.kind-message { stroke: var(--lv-message, #6b7480); }
.st-wires path.pulse { stroke-width: 4.5px; }
.st-wires path.drawing { stroke: var(--lv-select, #1f5c94); stroke-dasharray: 6 4; pointer-events: none; }

/* ── The block diagram: nodes the graphical way ──────────────────────────────
   An icon node is a small tinted square with a glyph and typed terminals on its edges; a
   constant is a value box in its type's colour; a front-panel or device terminal is a box
   with the type's abbreviation, thick-bordered when it gives a value (a control), thin when
   it takes one (an indicator); a structure is a frame with the classic chrome. */
:root {
    --lv-ink: #2b333d;
    --lv-line: #3b4450;
    --lv-label: #4d5866;
    --lv-number: #e08a00;
    --lv-boolean: #2f8f4e;
    --lv-string: #c0459a;
    --lv-array: #d97a2b;
    --lv-record: #8a5a2b;
    --lv-any: #6b7480;
    --lv-message: #6b7480;
    --lv-math: #fff3c4;
    --lv-logic: #e3f3e2;
    --lv-text: #fbe3ef;
    --lv-arrays: #fde7d3;
    --lv-time: #e2ecfb;
    --lv-structures: #e9e6f7;
    --lv-outputs: #eef0f3;
    --lv-devices: #f4f6f8;
    --lv-frame: #6b7480;
    --lv-node-bg: #ffffff;
    --lv-value-bg: #ffffff;
    --lv-select: #1f5c94;
}

.st-node {
    position: absolute;
    user-select: none;
    cursor: grab;
    z-index: 2;
    font-family: var(--st-font);
    color: var(--lv-ink);
}

.st-node.dragging {
    cursor: grabbing;
    z-index: 3;
}

/* an icon node is as wide as its terminal names: shrink-to-fit would squeeze the columns when the canvas is short of room */
.st-node.st-icon {
    width: max-content;
}

.st-node.st-hidden {
    display: none;
}

/* while Clean up measures: the nodes of the cases not shown are laid out, unseen */
#flowNodes.st-measuring .st-node.st-hidden {
    display: block;
    visibility: hidden;
}

.st-node-label {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 2px;
    max-width: 180px;
    font-size: 10.5px;
    line-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--lv-label);
}

.st-node-frame {
    display: flex;
    align-items: center;
}

/* the terminal columns: a port square on the edge, its name inside when the side names them */
.st-terms {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.st-term {
    display: flex;
    align-items: center;
    height: 12px;
    gap: 3px;
}

.st-terms i {
    display: none;
    font-style: normal;
    font-family: var(--st-mono);
    font-size: 9.5px;
    line-height: 1;
    color: var(--lv-label);
    white-space: nowrap;
}

.st-terms.named i {
    display: inline;
}

/* the names sit against the icon, not under it */
.st-terms.in { margin-right: -1px; }
.st-terms.out { margin-left: -1px; }
/* the port square sits on the node's edge (-5px); the opposite margin keeps the column as wide as its names */
.st-terms.in .st-term { margin-left: -5px; margin-right: 5px; }
.st-terms.out .st-term { margin-right: -5px; margin-left: 5px; justify-content: flex-end; }

.st-port {
    position: relative;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
    border: 1.5px solid var(--lv-any);
    background: var(--lv-node-bg);
    pointer-events: auto;
    cursor: crosshair;
    z-index: 1;
}

.st-port:hover,
.st-port.target {
    border-color: var(--lv-select);
    background: var(--lv-select);
}

/* a terminal that refused a wire */
.st-port.refused {
    animation: st-refused 900ms ease-out;
}

@keyframes st-refused {
    0%, 60% { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.55); border-color: #c0392b; background: #c0392b; }
    100% { box-shadow: none; }
}

/* typed terminals: the colour says what the wire carries */
.st-port.t-number { border-color: var(--lv-number); background: #fff3e0; }
.st-port.t-boolean { border-color: var(--lv-boolean); background: #e6f5ea; }
.st-port.t-string { border-color: var(--lv-string); background: #fbe6f3; }
.st-port.t-array { border-color: var(--lv-array); border-width: 2.5px; }
.st-port.t-record { border-color: var(--lv-record); background: #f4e8dc; }
.st-port.t-any { border-color: var(--lv-any); }

/* a note: the classic free label */
.st-node.st-note .st-note-text {
    max-width: 260px;
    padding: 6px 9px;
    border: 1px solid #d8c77a;
    border-radius: 2px;
    background: #fff9c4;
    color: #3a3a1f;
    font-size: 11.5px;
    line-height: 1.4;
    white-space: normal;
}

body.studio-designer[theme="industrial-dark"] .st-node.st-note .st-note-text {
    background: #4a4520;
    border-color: #6f6730;
    color: #f2ecc0;
}

/* an enum constant: the name and the ▾ that says there are others */
.st-const.st-enum .st-value i {
    font-style: normal;
    margin-left: 6px;
    opacity: 0.6;
}

/* the icon square */
.st-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lv-line);
    border-radius: 2px;
    background: var(--lv-node-bg);
    font-family: var(--st-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--lv-ink);
}

.st-glyph svg {
    width: 20px;
    height: 20px;
}

.st-node[data-category="Math"] .st-glyph { background: var(--lv-math); }
.st-node[data-category="Compare and logic"] .st-glyph { background: var(--lv-logic); }
.st-node[data-category="Text"] .st-glyph { background: var(--lv-text); }
.st-node[data-category="Arrays"] .st-glyph { background: var(--lv-arrays); }
.st-node[data-category="Time"] .st-glyph { background: var(--lv-time); }
.st-node[data-category="Structures"] .st-glyph { background: var(--lv-structures); }
.st-node[data-category="Outputs"] .st-glyph { background: var(--lv-outputs); }
.st-node[data-category="Devices"] .st-glyph,
.st-node[data-category="Inputs"] .st-glyph { background: var(--lv-devices); }
.st-node[data-category="Logic"] .st-glyph { background: var(--lv-time); }

.st-node.selected .st-glyph,
.st-node.selected .st-abbr,
.st-node.selected .st-value {
    outline: 2px solid var(--lv-select);
    outline-offset: 1px;
}

.st-node-sub {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2px;
    max-width: 150px;
    font-family: var(--st-mono);
    font-size: 9.5px;
    line-height: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--lv-label);
}

/* the last value that passed, as a small bubble under the node (a frame shows it by its i) */
.st-node-status {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 3px;
    max-width: 220px;
    padding: 1px 5px;
    border: 1px solid #d5dbe3;
    border-radius: 3px;
    background: var(--lv-value-bg);
    font-family: var(--st-mono);
    font-size: 10px;
    line-height: 13px;
    color: var(--lv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.st-node-sub + .st-node-status {
    margin-top: 16px;
}

.st-node-status:empty {
    display: none;
}

.st-node-status.error {
    border-color: #a51f1f;
    color: #a51f1f;
}

/* a constant: the value in a box bordered in its type's colour */
.st-value {
    min-width: 22px;
    max-width: 160px;
    height: 20px;
    padding: 0 6px;
    border: 1.5px solid var(--lv-number);
    border-radius: 3px;
    background: var(--lv-value-bg);
    font-family: var(--st-mono);
    font-size: 11px;
    line-height: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-const.t-boolean .st-value { border-color: var(--lv-boolean); color: var(--lv-boolean); font-weight: 700; text-align: center; }
.st-const.t-string .st-value { border-color: var(--lv-string); }
.st-const.t-array .st-value { border-color: var(--lv-array); border-width: 2.5px; }

/* a terminal: the type's abbreviation in a box; thick when it gives a value, thin when it takes one */
.st-abbr {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--lv-any);
    border-radius: 2px;
    background: var(--lv-node-bg);
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--lv-any);
}

.st-terminal.st-control .st-abbr { border-width: 3px; }
.st-terminal.t-number .st-abbr { border-color: var(--lv-number); color: var(--lv-number); }
.st-terminal.t-boolean .st-abbr { border-color: var(--lv-boolean); color: var(--lv-boolean); }
.st-terminal.t-string .st-abbr { border-color: var(--lv-string); color: var(--lv-string); }
.st-terminal.t-array .st-abbr { border-color: var(--lv-array); color: var(--lv-array); }
.st-terminal.t-record .st-abbr { border-color: var(--lv-record); color: var(--lv-record); }
.st-terminal.t-message .st-abbr { border-color: var(--lv-message); }

/* an icon terminal: the front-panel control's picture in the box */
.st-icon-terminal .st-abbr {
    padding: 0;
    overflow: hidden;
    background: #f4f4f4;
}

.st-icon-terminal .st-abbr img {
    display: block;
    width: 40px;
    height: 22px;
    object-fit: cover;
    object-position: center top;
}

.st-icon-terminal .st-abbr img[src^="data:"] {
    object-fit: contain;
    padding: 1px;
    box-sizing: border-box;
}

body.studio-designer[theme="industrial-dark"] .st-icon-terminal .st-abbr {
    background: #263038;
}

/* Industrial Dark: the controls' pictures - the palette's Front panel tiles and the icon terminals on
   the diagram - were drawn on a light page and stayed light on the dark ones. Inverted with the hue
   turned back, they go dark and keep their colours: a blue switch stays blue, a green LED green. */
body.studio-designer[theme="industrial-dark"] .st-icon-terminal .st-abbr img,
body.studio-designer[theme="industrial-dark"] .st-tile-abbr.st-panel img {
    filter: invert(0.88) hue-rotate(180deg);
}

/* a diagram's own terminals: chevrons, as a connector's */
.st-node[data-category="Structures"].st-control .st-abbr { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); padding-right: 9px; }
.st-node[data-category="Structures"].st-indicator .st-abbr { clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); padding-left: 9px; }

/* a frame: a structure whose body is what lies inside its rectangle */
.st-node.st-frame {
    z-index: 1;
    border: 3px solid var(--lv-frame);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--lv-node-bg), inset 0 0 0 2px rgba(107, 116, 128, 0.45);
    background: rgba(107, 116, 128, 0.03);
    cursor: move;
}

.st-node.st-frame.selected {
    border-color: var(--lv-select);
}

.st-node.st-frame.st-case {
    border-style: solid;
    box-shadow: inset 0 0 0 1px var(--lv-node-bg), inset 0 0 0 2px rgba(107, 116, 128, 0.45), inset 0 0 0 3px transparent;
}

.st-frame-label {
    position: absolute;
    left: 6px;
    bottom: 100%;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--lv-label);
    white-space: nowrap;
}

/* the terminals on a frame's border: period and N at the top-left, i at the bottom-left, stop at the bottom-right, ? on the left */
.st-frame-term {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--st-mono);
    font-size: 9.5px;
    color: var(--lv-label);
    white-space: nowrap;
}

.st-frame-term i {
    font-style: normal;
}

.st-frame-term.tl { left: -6px; top: 6px; }
.st-frame-term.bl { left: 6px; bottom: 6px; }
.st-frame-term.br { right: -6px; bottom: 6px; }
.st-frame-term.ml { left: -6px; top: 50%; transform: translateY(-50%); }
.st-frame-term.mr { right: -6px; top: 50%; transform: translateY(-50%); }

/* A frame terminal named beside it - a For loop's collect and array, a While loop's stop, a Case's
   tunnel: the name above the terminal, on the side away from the border (array and a tunnel outside
   the frame, collect and stop inside), on a chip of the canvas's colour. The border ran through
   "array" and the wires through all of them; the wire's own lead (pathBetween) turns clear of it. */
.st-term-pair {
    position: relative;
    display: inline-flex;
}

.st-term-pair > i {
    position: absolute;
    bottom: 100%;
    left: 100%;
    margin: 0 0 1px 1px;
    padding: 0 2px;
    border-radius: 2px;
    background: var(--lv-canvas, #ffffff);
    line-height: 12px;
    pointer-events: none;
}

.st-term-pair.st-label-left > i {
    left: auto;
    right: 100%;
    margin: 0 1px 1px 0;
}

/* an output tunnel of a Case frame: the hollow square centred on the border - the row is the inner
   terminal, the square and the outer terminal, 12px each - whatever the tunnel is called */
.st-frame-term.st-tunnel {
    gap: 0;
    right: auto;
    left: calc(100% - 16.5px);
}

.st-tunnel-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 1px;
    border: 2px solid var(--lv-frame, #6b7480);
    background: var(--lv-node-bg, #fff);
    box-sizing: border-box;
}

.st-iter,
.st-sel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #2f6fb5;
    border-radius: 2px;
    background: #e2ecfb;
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    color: #2f6fb5;
}

.st-sel {
    border-color: var(--lv-boolean);
    background: #e6f5ea;
    color: var(--lv-boolean);
    font-style: normal;
}

.st-iter.st-index {
    width: auto;
    padding: 0 3px;
    font-style: normal;
    border-color: var(--lv-array, #d97a2b);
    background: #fde7d3;
    color: var(--lv-array, #d97a2b);
}

/* the conditional terminal: the classic red stop sign */
.st-port.st-stop {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #c0392b;
    background: radial-gradient(#fff 0 35%, #c0392b 40% 100%);
}

.st-frame .st-node-status {
    left: 40px;
    top: auto;
    bottom: 5px;
    margin: 0;
    /* short of the terminals on the frame's right edge (collect, [ ], stop) */
    max-width: calc(100% - 150px);
}

.st-frame-resize {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--lv-frame);
    border-bottom: 3px solid var(--lv-frame);
    cursor: nwse-resize;
}

.st-node.st-frame.selected .st-frame-resize {
    border-color: var(--lv-select);
}

/* the case selector, centred on the top border */
.st-case-nav {
    position: absolute;
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 3px;
    border: 1.5px solid var(--lv-frame);
    border-radius: 3px;
    background: var(--lv-node-bg);
    font-size: 10px;
    color: var(--lv-ink);
}

.st-case-nav button {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: inherit;
    font-size: 8px;
    line-height: 1;
    cursor: pointer;
}

.st-case-nav button:hover {
    background: rgba(31, 92, 148, 0.12);
}

.st-case-nav b {
    min-width: 40px;
    padding: 0 4px;
    text-align: center;
    font-family: var(--st-mono);
    font-size: 11px;
    font-weight: 700;
}

.st-case-nav small {
    font-size: 9px;
    color: var(--lv-label);
}

.st-node-trigger {
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--lv-line);
    border-radius: 3px;
    background: var(--lv-node-bg);
    font: 10px var(--st-font);
    color: var(--lv-ink);
    cursor: pointer;
}

.st-node-trigger:hover {
    border-color: var(--lv-select);
    color: var(--lv-select);
}

/* the values on the wires while execution highlighting is on */
.st-wire-value rect {
    fill: #fffbe6;
    stroke: #d8b84a;
    stroke-width: 1px;
}

.st-wire-value text {
    font: 10px var(--st-mono);
    fill: var(--lv-ink);
    text-anchor: middle;
}

.st-palette-note {
    padding: 4px 12px 8px;
    font-size: 11.5px;
}

.st-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.st-kinds button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 6px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-kinds button:hover {
    border-color: #1f5c94;
}

.st-patterns {
    grid-template-columns: 1fr 1fr;
}

.st-patterns button {
    padding: 8px 10px;
}

.st-kinds button span {
    font-size: 12px;
    color: var(--smart-text-secondary-color, #3c4855);
}

/* the block diagram in the dark theme: the same language, on a dark canvas */
body.studio-designer[theme="industrial-dark"] {
    --lv-ink: #e6ecf3;
    --lv-line: #8b98a6;
    --lv-label: #a9b4c0;
    --lv-number: #f0a35a;
    --lv-boolean: #5fc98a;
    --lv-string: #f08ac9;
    --lv-array: #f09a5a;
    --lv-record: #d9a066;
    --lv-any: #8b98a6;
    --lv-message: #8b98a6;
    --lv-math: #4a4426;
    --lv-logic: #234232;
    --lv-text: #4a2a3d;
    --lv-arrays: #4a3524;
    --lv-time: #263a52;
    --lv-structures: #33304a;
    --lv-outputs: #2a3541;
    --lv-devices: #263038;
    --lv-frame: #8b98a6;
    --lv-node-bg: #1e2731;
    --lv-value-bg: #1e2731;
    --lv-select: #6fb2ec;
    --lv-canvas: #1d2530;
    --lv-dot: #2f3a47;
}

body.studio-designer[theme="industrial-dark"] .st-port.t-number { background: #3a2c18; }
body.studio-designer[theme="industrial-dark"] .st-port.t-boolean { background: #1f3a2a; }
body.studio-designer[theme="industrial-dark"] .st-port.t-string { background: #3a2233; }
body.studio-designer[theme="industrial-dark"] .st-port.t-record { background: #3a2e22; }
body.studio-designer[theme="industrial-dark"] .st-node-status { border-color: #3a4655; }
body.studio-designer[theme="industrial-dark"] .st-iter { background: #263a52; border-color: #6fb2ec; color: #9ccbf5; }
body.studio-designer[theme="industrial-dark"] .st-sel { background: #234232; }
body.studio-designer[theme="industrial-dark"] .st-wire-value rect { fill: #3a3520; stroke: #8a7a2a; }

.st-node-trigger {
    position: absolute;
    left: -30px;
    top: 4px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, #fff);
    font: 11px var(--st-font);
    cursor: pointer;
}

.st-node-trigger:hover {
    border-color: #1f5c94;
    color: #1f5c94;
}

.st-flow-empty {
    position: absolute;
    left: 40px;
    top: 40px;
    max-width: 480px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* the message inspector under the canvas */
.st-flow-debug {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 168px;
    border-top: 1px solid var(--smart-border, #ccd6e0);
    background: var(--smart-industrial-panel-background, #fff);
    font-size: 12px;
}

.st-flow-debug-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--smart-industrial-panel-header-background, #eef2f6);
    border-bottom: 1px solid var(--smart-border-light, #e3e8ee);
}

.st-flow-debug-head .st-panel-title {
    padding: 0;
}

.st-flow-debug-head label {
    font-size: 11px;
    color: var(--smart-text-secondary-color, #3c4855);
}

.st-flow-debug-head .st-spacer {
    flex: 1;
}

.st-flow-messages {
    overflow: auto;
    font-family: var(--st-mono);
    font-size: 11px;
    padding: 4px 12px;
    /* its size is the panel's, not its rows': a run writes it several times a second, and each
       write had the whole designer laid out and painted again */
    contain: strict;
}

.st-flow-messages div {
    display: grid;
    grid-template-columns: 62px 120px minmax(0, 1fr);
    gap: 10px;
    padding: 1px 0;
    border-bottom: 1px solid var(--smart-border-light, #e3e8ee);
    white-space: nowrap;
    /* the rows scrolled out of sight are not laid out */
    content-visibility: auto;
    contain-intrinsic-size: auto 17px;
}

.st-flow-messages div span:first-child {
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-flow-messages div span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.st-flow-messages div span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-flow-messages .kind-number span:last-child { color: #b35a10; }
.st-flow-messages .kind-boolean span:last-child { color: #1a6029; }
.st-flow-messages .kind-string span:last-child { color: #9a2f6e; }
.st-flow-messages .kind-record span:last-child { color: #6b4520; }
.st-flow-messages .error span:last-child { color: #a51f1f; }

.st-flow-messages .st-hint {
    padding: 4px 0;
}

/* a node's inspector */
.st-field textarea.st-code {
    font-family: var(--st-mono);
    font-size: 11.5px;
    min-height: 96px;
    white-space: pre;
}

.st-field.st-wide {
    grid-template-columns: minmax(0, 1fr);
}

.st-flow-stats {
    display: flex;
    gap: 14px;
    padding: 6px 0 2px;
    font-size: 12px;
    color: var(--smart-text-secondary-color, #3c4855);
}

.st-flow-stats b {
    display: block;
    font-size: 16px;
    color: var(--smart-text-color, #131c25);
}

body.studio-designer[theme="industrial-dark"] .st-port:hover,
body.studio-designer[theme="industrial-dark"] .st-port.target {
    background: #6fb2ec;
    border-color: #6fb2ec;
}

body.studio-designer[theme="industrial-dark"] .st-wires path.selected {
    stroke: #6fb2ec;
}

.st-bar > * {
    flex-shrink: 0;
}

/* the Project menu: the settings and the rare actions, out of the row */
.st-menu {
    position: relative;
}

.st-menu summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--st-bar-line);
    border-radius: 3px;
    background: var(--st-bar-field);
    color: var(--st-bar-fg);
    cursor: pointer;
    user-select: none;
}

.st-menu summary::-webkit-details-marker {
    display: none;
}

.st-menu summary:hover,
.st-menu[open] summary {
    border-color: var(--st-bar-hover);
}

.st-menu-list {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 30;
    min-width: 240px;
    padding: 6px;
    border: 1px solid var(--st-bar-line);
    border-radius: 4px;
    background: var(--st-bar-field);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.st-menu.st-menu-flip .st-menu-list {
    right: auto;
    left: 0;
}

.st-menu-list button,
.st-menu-list label.st-file,
.st-menu-list .st-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--st-bar-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-menu-list button:hover,
.st-menu-list label.st-file:hover {
    background: var(--st-bar-menu-hover);
    border-color: transparent;
}

.st-menu-list .st-menu-row span {
    color: var(--st-bar-soft);
    font-size: 12px;
}

/* one width for all of them, inside the menu's edge: they were as wide as their longest word,
   ragged, and ran 3 px past the border */
.st-menu-list select {
    box-sizing: border-box;
    width: 150px;
    max-width: 100%;
    height: 26px;
    padding: 0 6px;
}

.st-menu-list hr {
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--st-bar-line);
}

.st-menu-list .st-licence b {
    font-weight: 600;
    color: var(--st-bar-soft);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-menu-list .st-licence[data-state="valid"] b {
    color: var(--st-bar-ok);
}

.st-bar .st-status,
.st-bar .st-spacer {
    flex-shrink: 1;
}

.st-bar #flowSelect,
.st-bar #pageSelect {
    max-width: 150px;
}

body.studio-designer[theme="industrial-dark"] .st-flow-messages .kind-number span:last-child { color: #f0a35a; }
body.studio-designer[theme="industrial-dark"] .st-flow-messages .kind-boolean span:last-child { color: #5fc98a; }
body.studio-designer[theme="industrial-dark"] .st-flow-messages .kind-string span:last-child { color: #f08ac9; }
body.studio-designer[theme="industrial-dark"] .st-flow-messages .kind-record span:last-child { color: #d9a066; }
body.studio-designer[theme="industrial-dark"] .st-flow-messages .error span:last-child { color: #ff8a80; }

.st-bar button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* the front panel's terminals in the palette: a small panel picture, thick-bordered for a control */
.st-tile-abbr.st-panel svg {
    width: 16px;
    height: 16px;
}

.st-tile-abbr.st-panel.st-control {
    border-color: var(--lv-number, #e08a00);
    color: var(--lv-number, #e08a00);
}

/* a table for an array of records in the inspector: pens, alarms, states */
.st-table-editor {
    grid-column: 1 / -1;
    overflow: auto;
    max-width: 100%;
}

.st-table-editor table {
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
}

.st-table-editor th {
    padding: 2px 4px;
    text-align: left;
    font-family: var(--st-mono);
    font-weight: 600;
    color: var(--smart-text-tertiary-color, #4a5663);
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    white-space: nowrap;
}

.st-table-editor td {
    padding: 1px 2px;
}

.st-table-editor td input {
    width: 100%;
    min-width: 48px;
    box-sizing: border-box;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 2px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 11px var(--st-mono);
}

.st-table-editor td button,
.st-table-actions button {
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 2px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: 11px var(--st-font);
    cursor: pointer;
}

.st-table-editor td button:hover,
.st-table-actions button:hover {
    border-color: #1f5c94;
}

.st-table-actions {
    display: flex;
    gap: 6px;
    padding: 6px 0 2px;
}

/* the marquee of an area selection on the panel, and the alignment tools */
.st-marquee {
    position: absolute;
    border: 1px dashed #1f5c94;
    background: rgba(31, 92, 148, 0.08);
    pointer-events: none;
    z-index: 5;
}

.st-canvas-wrap {
    position: relative;
}

.st-align {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.st-align button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-width: 0;
}

.st-align button:hover {
    border-color: #1f5c94;
}

.st-align button span {
    font-size: 16px;
    line-height: 1;
}

/* two short lines rather than one cut: "Distribute…" twice said nothing */
.st-align button small {
    font-size: 9px;
    line-height: 10px;
    color: var(--smart-text-tertiary-color, #4a5663);
    text-align: center;
    max-width: 100%;
}

/* the Sequence frame: the classic film strip */
.st-node.st-frame.st-sequence {
    border-style: solid;
    box-shadow: inset 0 0 0 1px var(--lv-node-bg), inset 0 0 0 2px rgba(107, 116, 128, 0.45),
        inset 0 10px 0 -3px repeating-linear-gradient(90deg, transparent 0 6px, var(--lv-frame) 6px 12px);
}

.st-node.st-frame.st-sequence::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: repeating-linear-gradient(90deg, transparent 0 6px, var(--lv-frame) 6px 12px);
    opacity: 0.8;
    pointer-events: none;
}

.st-case-nav.st-seq-nav i {
    font-style: normal;
    font-size: 9.5px;
    color: var(--lv-label);
    margin-right: 2px;
}

.st-tile-frame i.st-tile-seq {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    font-size: 7px;
    font-style: normal;
    letter-spacing: 1px;
    color: var(--lv-ink, #2b333d);
}

/* the Event frame: the bolt names the event it waits for */
.st-node.st-frame.st-event {
    border-style: double;
    border-width: 4px;
    box-shadow: none;
}

.st-bolt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #b8860b;
    border-radius: 2px;
    background: #fff6d6;
    color: #b8860b;
}

.st-bolt svg {
    width: 12px;
    height: 12px;
}

body.studio-designer[theme="industrial-dark"] .st-bolt {
    background: #3a3520;
}

.st-tile-frame i.st-tile-bolt {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    color: #b8860b;
}

.st-tile-frame i.st-tile-bolt svg {
    width: 12px;
    height: 12px;
}

/* a drag on the panel or in the palettes selects components, not text */
.st-palette,
.st-canvas-wrap,
.st-flow-wrap {
    user-select: none;
}

/* the evaluation badges the library shows: kept, small, stacked at the bottom-right corner, where the tag bar leaves room */
body.studio-designer #smart-watermark,
body.studio-designer #jqx-watermark {
    bottom: 12px !important;
    right: 12px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
}

/* The component library's GitHub badge is marketing, not a licence notice, and an
   operator screen is not a place to ask for a star: on the plant overview it sat on top of
   the trend and hid part of the pen list. The evaluation watermark stays - that one is
   honest and it is what an unlicensed copy is for. */
body.studio-designer #smart-github-rate,
body.studio-designer #jqx-github-rate,
body.studio-app #smart-github-rate,
body.studio-app #jqx-github-rate,
body:has(.studio-embed) #smart-github-rate,
body:has(.studio-embed) #jqx-github-rate {
    display: none !important;
}

.st-sources > div:last-child {
    padding-right: 250px;
}

/* the wire inspector: its type and the last value, in the wire's colour */
.st-wire-type,
.st-wire-last {
    font-family: var(--st-mono);
    font-size: 12px;
    padding: 4px 0;
}

.st-wire-type.kind-number, .st-wire-last.kind-number { color: var(--lv-number, #e08a00); }
.st-wire-type.kind-boolean, .st-wire-last.kind-boolean { color: var(--lv-boolean, #2f8f4e); }
.st-wire-type.kind-string, .st-wire-last.kind-string { color: var(--lv-string, #c0459a); }
.st-wire-type.kind-array, .st-wire-last.kind-array { color: var(--lv-array, #d97a2b); }
.st-wire-type.kind-record, .st-wire-last.kind-record { color: var(--lv-record, #8a5a2b); }

/* breakpoints and the paused node */
/* at the corner, above the first input, and not in the way: it sat on the first input terminal,
   so a wire could not be made to it nor its menu opened while the breakpoint was set */
.st-breakpoint {
    position: absolute;
    left: -9px;
    top: -9px;
    pointer-events: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c0392b;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #c0392b;
    z-index: 3;
}

.st-node.st-frame .st-breakpoint {
    left: -9px;
    top: -9px;
}

.st-node.paused .st-glyph,
.st-node.paused .st-abbr,
.st-node.paused .st-value,
.st-node.paused.st-frame {
    outline: 3px solid #c0392b;
    outline-offset: 2px;
    animation: st-paused 900ms ease-in-out infinite alternate;
}

@keyframes st-paused {
    from { outline-color: #c0392b; }
    to { outline-color: rgba(192, 57, 43, 0.35); }
}

.st-bar .st-debugger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    height: 28px;
    border: 1px solid #a51f1f;
    border-radius: 3px;
    background: var(--st-bar-danger-bg);
    color: var(--st-bar-danger-fg);
    font-size: 12px;
}

.st-bar .st-debugger button {
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
}

/* the marquee on the diagram */
.st-flow .st-marquee {
    position: absolute;
    border: 1px dashed var(--lv-select, #1f5c94);
    background: rgba(31, 92, 148, 0.08);
    pointer-events: none;
    z-index: 4;
}

/* a front-panel terminal's tile shows the component's picture */
.st-tile-abbr.st-panel {
    width: 40px;
    height: 26px;
    padding: 0;
    overflow: hidden;
    background: #131c25;
}

.st-tile-abbr.st-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}


/* a front-panel tile with a drawn face: light, as the palette draws it */
.st-tile-abbr.st-panel img[src^="data:"] {
    background: #f4f4f4;
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}

/* Bench theme: the switch stays down in blue, the buttons have a bezel, the LED a label beside it */
body[theme="bench"] smart-toggle-button .smart-button,
body[theme="bench"] smart-button .smart-button {
    border: 1px solid #6f6f6f;
    border-radius: 3px;
    background: linear-gradient(#f8f8f8, #dcdcdc);
    color: #1a1a1a;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

body[theme="bench"] smart-toggle-button[checked] .smart-button,
body[theme="bench"] smart-toggle-button[aria-pressed="true"] .smart-button {
    background: linear-gradient(#4f86c9, #2f6fb5);
    color: #ffffff;
    border-color: #245a94;
}

body[theme="bench"] smart-button.lv-stop .smart-button {
    color: #a3271b;
    font-weight: 800;
    letter-spacing: 1px;
    /* STOP fits a one-column cell */
    padding-left: 2px;
    padding-right: 2px;
    overflow: visible;
}

body[theme="bench"] .studio-page {
    gap: 12px 12px;
}

body[theme="bench"] smart-numeric-text-box,
body[theme="bench"] smart-input {
    --smart-editor-height: 26px;
}

.st-bar .st-debugger[hidden] {
    display: none !important;
}

/* ── Operations: the recipes and jobs of a station ───────────────────────────
   Two tables in a station card, built to be read at a glance rather than to look
   like a form: what it does and when it last did it are the two columns somebody
   opens this view for. */
/* Operations is a list, not a wall of tiles: one column, as wide as the view */
body.st-system-mode .st-system-canvas:has(.st-ops-card) {
    grid-template-columns: minmax(0, 1100px);
}

.st-ops-card .st-ops-section {
    padding: 8px 12px 12px;
    border-top: 1px solid var(--smart-border, #ccd6e0);
}

.st-ops-card .st-ops-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--smart-text-secondary-color, #3c4855);
}

.st-ops-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

/* the two ends of a row stay on one line; the middle takes what is left */
.st-ops-table th:nth-child(2),
.st-ops-table td:nth-child(2),
.st-ops-table .st-ops-last {
    white-space: nowrap;
}

.st-ops-table tr[data-job] td:first-child,
.st-ops-table tr[data-recipe] td:first-child {
    min-width: 140px;
}

/* A job's "when" in words can be long ("at 06:00 and 18:00, Monday to Friday"): it wraps,
   so the buttons at the end of the row stay inside the card - Edit, the only way to delete
   a job, was drawn past its edge at 1440 px. */
.st-ops-table tr[data-job] td:nth-child(2) {
    white-space: normal;
    min-width: 130px;
    max-width: 240px;
}

.st-ops-table tr[data-job] td:nth-child(3) {
    min-width: 150px;
    overflow-wrap: anywhere;
}

/* a failed run's message is as long as the station made it: kept on one line, it pushed Run
   now, Disable and Edit under the inspector at 1366-1600 px, and the job could not be reached */
.st-ops-table tr[data-job] .st-ops-last {
    white-space: normal;
    min-width: 120px;
    max-width: 260px;
    overflow-wrap: anywhere;
}

.st-ops-table .st-ops-buttons {
    width: 1%;
    white-space: nowrap;
}

.st-ops-table th {
    text-align: left;
    padding: 2px 8px 4px 0;
    font-weight: 500;
    color: var(--smart-text-tertiary-color, #4a5663);
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
}

.st-ops-table td {
    padding: 6px 8px 6px 0;
    vertical-align: top;
    border-bottom: 1px solid var(--smart-surface, #f4f6f8);
}

.st-ops-table tr:last-child td {
    border-bottom: 0;
}

/* a disabled job keeps its place and says so by fading, not by hiding */
.st-ops-table tr.st-ops-off td {
    opacity: 0.55;
}

.st-ops-values {
    font-family: Consolas, "SF Mono", Menlo, monospace;
    line-height: 1.5;
}

.st-ops-note {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-weight: 400;
}

.st-ops-last {
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-ops-bad {
    color: #a51f1f;
}

body.studio-designer[theme="industrial-dark"] .st-ops-bad {
    color: #ff8a80;
}

/* a table cell stays one: display:flex on a td took the buttons out of the row, over "it does"
   and "last run", and pushed Edit - the way to delete a job - past the card's edge */
.st-ops-buttons {
    text-align: right;
    white-space: nowrap;
}

.st-ops-buttons > button + button {
    margin-left: 4px;
}

/* the recipe's value table, and the job's day boxes */
.st-recipe-entries {
    width: 100%;
    border-collapse: collapse;
}

.st-recipe-entries th {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    padding: 0 6px 2px 0;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-recipe-entries td {
    padding: 2px 6px 2px 0;
}

.st-recipe-entries input {
    width: 100%;
    box-sizing: border-box;
}

.st-job-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.st-job-days label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

/* ── The Cards block ─────────────────────────────────────────────────────────
   A landing screen's tiles. Sized to be pressed with a glove on a panel PC, so
   the target is the whole card and not a line of text in it. */
.studio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    align-content: start;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

.studio-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--smart-background, #fff);
    color: var(--smart-text-color, #1c2833);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.studio-card:hover {
    border-color: var(--smart-primary, #1f5c94);
}

.studio-card:focus-visible {
    outline: 2px solid var(--smart-primary, #1f5c94);
    outline-offset: 2px;
}

.studio-card-name {
    font-size: 15px;
    font-weight: 600;
}

.studio-card-meta {
    font-size: 12px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* the colour strip: only while a shape is selected, so it is never dead chrome */
.st-swatches {
    grid-area: canvas;
    align-self: end;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin: 0 16px 8px;
    padding: 6px 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--smart-industrial-panel-background, #fff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* display: flex above beat the hidden attribute: the strip stayed up with nothing selected */
.st-swatches[hidden] {
    display: none;
}

.st-swatches b {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--smart-text-tertiary-color, #4a5663);
}

.st-swatches button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    cursor: pointer;
}

.st-swatches button:focus-visible {
    outline: 2px solid var(--smart-primary, #1f5c94);
    outline-offset: 1px;
}

.st-swatches .st-swatches-hint {
    margin-left: 6px;
    font-size: 11px;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* ── Shapes and process symbols ──────────────────────────────────────────────
   A palette tile for something that is drawn rather than photographed: the
   figure or the equipment symbol itself, on a light face so a dark-filled shape
   is visible in both themes. */
.st-ctrl-pic.st-ctrl-art {
    padding: 4px;
    box-sizing: border-box;
    background: var(--smart-background, #fff);
    color: var(--smart-text-secondary-color, #3c4855);
}

.st-ctrl-pic.st-ctrl-art svg,
.st-ctrl-pic.st-ctrl-art smart-mimic-symbol,
.st-ctrl-pic.st-ctrl-art jqx-mimic-symbol {
    width: 100%;
    height: 100%;
}

/* the block on the canvas: the figure fills its cell, and any label sits over it */
.studio-shape {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.studio-shape-art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.studio-shape-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--smart-text-title-color, #131c25);
    pointer-events: none;
}

/* ── Alarms: the project's alarm table ────────────────────────────────────
   A fourth view beside the panel, the diagram and the system: one row per alarm, its live
   state in the first column. */
.st-alarms-wrap {
    grid-area: canvas;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
}

body:not(.st-alarms-mode) .st-alarms-wrap {
    display: none;
}

body.st-alarms-mode .st-palette-search,
body.st-alarms-mode .st-canvas-wrap,
body.st-alarms-mode .st-flow-wrap,
body.st-alarms-mode .st-system-wrap,
body.st-alarms-mode .st-ruler,
body.st-alarms-mode .st-swatches,
body.st-alarms-mode [data-mode-only="screen"],
body.st-alarms-mode [data-mode-only="flows"] {
    display: none;
}

.st-alarms-bar .st-alarm-filter {
    width: 240px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 12px;
}

.st-alarm-counts {
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
    white-space: nowrap;
}

.st-small-button.st-primary-small {
    border-color: var(--smart-primary, #1f5c94);
    background: var(--smart-primary, #1f5c94);
    color: var(--smart-primary-color, #fff);
}

.st-alarms-bar .st-file {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.st-alarms-body {
    overflow: auto;
    min-height: 0;
    padding: 0 16px 24px;
}

.st-alarms-wrap.st-drop-target .st-alarms-body {
    outline: 2px dashed var(--smart-primary, #1f5c94);
    outline-offset: -6px;
}

.st-alarm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.st-alarm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 6px 6px;
    background: var(--smart-industrial-panel-background, #fff);
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
    color: var(--smart-text-tertiary-color, #4a5663);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.st-alarm-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--smart-border, #e2e8ef);
    vertical-align: middle;
}

/* "not delivering" and "not equal to" whole: they read "not deliver…" */
.st-alarm-table select[data-field="condition"] {
    min-width: 126px;
}

.st-alarm-table input[type="text"],
.st-alarm-table input[type="number"],
.st-alarm-table select {
    width: 100%;
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
}

.st-alarm-table input:disabled {
    opacity: 0.45;
}

/* the widths a row reads at: the message takes what is left */
.st-alarm-table { table-layout: fixed; min-width: 860px; }
/* the widths include the cell's padding, so what is written is what a column takes */
.st-alarm-table th,
.st-alarm-table td { box-sizing: border-box; }
.st-alarm-table th:nth-child(1) { width: 126px; }
.st-alarm-table th:nth-child(2) { width: 14%; }
.st-alarm-table th:nth-child(3) { width: 100px; }
.st-alarm-table th:nth-child(4) { width: 64px; }
.st-alarm-table th:nth-child(5) { width: 72px; }
.st-alarm-table th:nth-child(6) { width: 62px; }
.st-alarm-table th:nth-child(7) { width: 106px; }
.st-alarm-table th:nth-child(9) { width: 84px; }
.st-alarm-table th:nth-child(10) { width: 36px; }
.st-alarm-table th:nth-child(11) { width: 38px; }

.st-alarm-on {
    text-align: center;
}

.st-alarm-state {
    line-height: 1.25;
}

/* the state's words wrap rather than lose their end: "returned, unacknowledged" is the one that matters */
.st-alarm-state .st-alarm-word {
    display: inline-block;
    max-width: calc(100% - 16px);
    vertical-align: top;
}

.st-alarm-state .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--smart-border, #ccd6e0);
    vertical-align: -1px;
}

/* the value under the state, in the tag's unit */
.st-alarm-value {
    display: block;
    margin-left: 15px;
    font-size: 11px;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-variant-numeric: tabular-nums;
}

/* the states in the theme's alarm colours: red waits for someone, amber is seen, a hollow dot came back */
tr[data-state="unacknowledged"] .st-alarm-state .dot { background: var(--smart-industrial-alarm-critical, #a51f1f); animation: st-alarm-blink 1s steps(2, start) infinite; }
tr[data-state="acknowledged"] .st-alarm-state .dot { background: var(--smart-industrial-alarm-warning, #b85c00); }
tr[data-state="rtn-unacknowledged"] .st-alarm-state .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--smart-industrial-alarm-critical, #a51f1f); }
tr[data-state="pending"] .st-alarm-state .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--smart-industrial-alarm-warning, #b85c00); }
tr[data-state="normal"] .st-alarm-state .dot { background: var(--smart-industrial-ok, #2a7a3d); }
tr[data-state="shelved"] .st-alarm-state .dot,
tr[data-state="disabled"] .st-alarm-state .dot { background: var(--smart-disabled, #9aa6b2); }
tr[data-state="unacknowledged"] .st-alarm-word { font-weight: 700; }
tr[data-state="disabled"] td:not(:first-child):not(:nth-last-child(-n+2)) { opacity: 0.55; }

.st-alarm-invalid td {
    background: rgba(165, 31, 31, 0.07);
}

.st-alarm-invalid .st-alarm-word {
    color: var(--smart-industrial-alarm-critical, #a51f1f);
    white-space: normal;
}

@keyframes st-alarm-blink {
    to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    tr[data-state="unacknowledged"] .st-alarm-state .dot { animation: none; }
}

.st-alarms-empty {
    max-width: 640px;
    margin: 48px auto;
    font-size: 13px;
    line-height: 1.6;
}

.st-alarm-help {
    padding: 4px 12px 16px;
    font-size: 12px;
}

.st-alarm-help h4 {
    margin: 16px 0 4px;
    font-size: 12px;
}

.st-alarm-help .st-hint,
.st-alarm-help .st-actions {
    padding-left: 0;
    padding-right: 0;
}

.st-alarm-facts {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    margin: 8px 0;
}

.st-alarm-facts dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.st-alarm-tags {
    margin: 4px 0;
    padding-left: 16px;
    line-height: 1.6;
}

.st-project-item .st-alarm-dot {
    background: var(--smart-border, #ccd6e0);
}

.st-project-item .st-alarm-dot.on {
    background: var(--smart-industrial-alarm-critical, #a51f1f);
}

.st-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── The start: a project that works, to make one's own ─────────────────── */
.st-dialog.st-start {
    width: min(920px, calc(100vw - 48px));
    max-width: none;
}

.st-start-lead {
    margin: 4px 0 14px;
    font-size: 13px;
    color: inherit;
}

.st-start-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.st-start-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 6px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-start-card:hover,
.st-start-card:focus-visible {
    border-color: var(--smart-primary, #1f5c94);
    box-shadow: 0 0 0 1px var(--smart-primary, #1f5c94);
}

.st-start-card.st-start-open {
    border-color: var(--smart-primary, #1f5c94);
}

.st-start-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #1e2731;
    border-bottom: 1px solid var(--smart-border, #ccd6e0);
}

.st-start-card img.st-start-missing {
    visibility: hidden;
}

.st-start-name {
    padding: 6px 10px 0;
    font-size: 13px;
    font-weight: 700;
}

.st-start-name small {
    margin-left: 4px;
    font-weight: 400;
    color: var(--smart-primary, #1f5c94);
}

.st-start-text {
    padding: 0 10px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--smart-text-tertiary-color, #4a5663);
}

/* inside .st-help, whose "ol" rule would otherwise take the margin away: the numbers touched the cards */
.st-help .st-start-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 6px;
    padding: 0;
    list-style: none;
    counter-reset: start;
    font-size: 12px;
}

.st-start-steps li {
    counter-increment: start;
    padding-left: 28px;
    position: relative;
}

.st-start-steps li::before {
    content: counter(start);
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--smart-primary, #1f5c94);
    color: var(--smart-primary-color, #fff);
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
}

.st-start-steps b {
    display: block;
}

.st-start-more {
    font-size: 12px;
}

@media (max-width: 900px) {
    .st-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── System › Users ─────────────────────────────────────────────────────── */
.st-users-table td:first-child {
    font-weight: 600;
}

.st-users-table select {
    height: 26px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 12px;
}

.st-users-me {
    margin-left: 6px;
    font-weight: 400;
    color: var(--smart-primary, #1f5c94);
}

.st-users-signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 12px;
}

.st-users-signin input {
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 3px;
    background: var(--smart-background, #fff);
    color: inherit;
    font: inherit;
    font-size: 12px;
}

.st-users-note {
    padding: 4px 12px 10px;
    color: var(--smart-text-tertiary-color, #4a5663);
    font-size: 12px;
}

.st-users-note code {
    font-size: 11px;
}

/* the Alarms view takes the inspector's column too: a table of alarms needs the width, and
   what the inspector would say is in the panel above the table */
body.studio-designer.st-alarms-mode {
    grid-template-areas:
        "bar bar bar"
        "palette canvas canvas"
        "sources sources sources";
}

body.st-alarms-mode .st-inspector {
    display: none;
}

.st-alarm-table th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.25;
}

.st-alarms-help {
    margin: 10px 0 2px;
    font-size: 12px;
}

.st-alarms-help > summary {
    cursor: pointer;
    color: var(--smart-primary, #1f5c94);
    font-weight: 600;
    width: max-content;
}

.st-alarms-help .st-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 0;
}

.st-alarms-help[open] > div {
    max-width: 760px;
    margin-top: 6px;
    padding: 4px 12px 8px;
    border-left: 3px solid var(--smart-border, #ccd6e0);
}

/* ── The Alarm actions block: the buttons beside an alarm grid ───────────── */
.studio-alarm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    height: 100%;
    font-size: 13px;
}

/* On a phone the buttons wrapped out of their one-row cell, and Shelve and Unshelve went under
   the grid: in one row there, which scrolls. The corner tools stop covering the page too. */
@media (max-width: 700px) {
    .studio-alarm-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .studio-app-corner {
        position: static;
        justify-content: flex-end;
        margin: 4px 8px;
    }
}

.studio-alarm-actions button,
.studio-alarm-actions select {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--smart-border, #ccd6e0);
    border-radius: 4px;
    background: var(--smart-surface, #fff);
    color: var(--smart-surface-color, inherit);
    font: inherit;
    cursor: pointer;
}

.studio-alarm-actions button:hover {
    border-color: var(--smart-primary, #1f5c94);
}

.studio-alarm-shelve {
    display: inline-flex;
    gap: 0;
}

.studio-alarm-shelve button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.studio-alarm-shelve select {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0 6px;
}

.studio-alarm-actions-say {
    color: var(--smart-industrial-alarm-warning, #b85c00);
}

/* a request's JSON in the Events tab: it wraps inside the inspector rather than past its edge */
.st-wrap-code {
    overflow-wrap: anywhere;
    white-space: normal;
}