/* Flow path viewer and editor. Gas is blue, liquid green and gas with liquid purple; a blocked joint is
   orange-red. Gas tubes are also dotted, and joints tell direction by shape, so no information is
   carried by colour alone. */
.flow-path { --fp-gas: #0072b2; --fp-liquid: #009e73; --fp-both: #7e57c2; --fp-blocked: #d55e00; --fp-busy: var(--cui-secondary-color, #6b7280); --fp-warning: #e69f00; --fp-error: #d55e00; --fp-offline: #9ca3af; --fp-actuator: #2f6fd0; --fp-selection: var(--cui-primary, #321fdb); --fp-canvas: var(--cui-tertiary-bg, #f3f4f7); display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; min-height: 520px; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .75rem; background: var(--cui-card-bg, #fff); overflow: hidden; outline: none; }
.flow-path:focus-visible { box-shadow: 0 0 0 2px var(--fp-selection); }

/* A snapshot: only the drawing, as a still picture on the overview's cards. */
.flow-path.is-snapshot { min-height: 0; height: 100%; border: 0; border-radius: 0; background: transparent; }
.flow-path.is-snapshot .flow-path__toolbar,
.flow-path.is-snapshot .flow-path__palette,
.flow-path.is-snapshot .flow-path__panel,
.flow-path.is-snapshot .flow-path__legend,
.flow-path.is-snapshot .flow-path__tooltip { display: none !important; }
.flow-path.is-snapshot .flow-path__canvas { background: transparent; }
.flow-path.is-snapshot .flow-path__svg { cursor: inherit; pointer-events: none; }
.flow-path.is-snapshot .flow-path__grid-dot { display: none; }

.flow-path__toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .45rem .75rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); }
.flow-path__toolbar-group { display: flex; align-items: center; gap: .3rem; }
.flow-path__toolbar-group[hidden] { display: none !important; }
.flow-path__toolbar-group + .flow-path__toolbar-group { padding-left: .5rem; border-left: 1px solid var(--cui-border-color, #d8dbe0); }
.flow-path__button { display: inline-flex; align-items: center; gap: .3rem; line-height: 1; }
.flow-path__button[hidden] { display: none; }
.flow-path__text-button { min-width: 2rem; justify-content: center; font-size: 1rem; }
.flow-path__button-text { font-size: .8rem; font-weight: 600; }
.flow-path__name { width: 9rem; }
.flow-path__tubing-type { width: 13rem; }
.flow-path__tubing-color { width: 7rem; }
.flow-path__zoom { min-width: 3.2rem; color: var(--cui-secondary-color, #6b7280); font-size: .78rem; text-align: center; font-variant-numeric: tabular-nums; }
.flow-path__status { margin-left: auto; max-width: 24rem; overflow: hidden; color: var(--cui-secondary-color, #6b7280); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-path__status.is-warning { color: var(--cui-warning-text-emphasis, #764705); font-weight: 600; }
.flow-path__status.is-error { color: var(--cui-danger-text-emphasis, #671414); font-weight: 600; }

/* Demo mode: a different frame and a hatched canvas, so a rehearsal is never mistaken for the machine. */
.flow-path { --fp-demo: #b45309; }
.flow-path.is-demo { border-color: var(--fp-demo); box-shadow: inset 0 0 0 1px var(--fp-demo); }
.flow-path.is-demo .flow-path__canvas { background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(180, 83, 9, .06) 18px 36px); }
.flow-path__mode-badge { padding: .15rem .5rem; border-radius: 999px; background: var(--fp-demo); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.flow-path__mode-badge[hidden] { display: none; }

.flow-path__body { display: flex; flex: 1 1 auto; min-height: 0; }
.flow-path__palette { flex: 0 0 11rem; padding: .5rem; border-right: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); overflow-y: auto; }
.flow-path__palette[hidden] { display: none !important; }
.flow-path__palette-heading { margin: .5rem 0 .25rem; color: var(--cui-secondary-color, #6b7280); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.flow-path__palette-heading:first-child { margin-top: 0; }
.flow-path__palette-item { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border: 1px solid transparent; border-radius: .4rem; color: var(--cui-body-color, #212631); cursor: grab; user-select: none; }
.flow-path__palette-item:hover { border-color: var(--cui-border-color, #d8dbe0); background: var(--fp-canvas); }
.flow-path__palette-item:focus-visible { outline: 2px solid var(--fp-selection); outline-offset: 1px; }
.flow-path__palette-item:active { cursor: grabbing; }
.flow-path__palette-preview { flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; color: var(--cui-body-color, #212631); }
.flow-path__palette-name { min-width: 0; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-path__palette-empty { color: var(--cui-secondary-color, #6b7280); font-size: .78rem; }

.flow-path__canvas { position: relative; flex: 1 1 auto; min-width: 0; background: var(--fp-canvas); overflow: hidden; }
.flow-path__svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.flow-path.is-dragging .flow-path__svg { cursor: grabbing; }
.flow-path.is-wire-tool .flow-path__svg { cursor: crosshair; }
.flow-path__grid-dot { fill: var(--cui-border-color, #c4c9d0); }

.flow-path__component { color: var(--cui-body-color, #212631); }
.flow-path.is-editing .flow-path__component { cursor: move; }
.flow-path.is-wire-tool .flow-path__component { cursor: crosshair; }
.flow-path__outline { fill: transparent; stroke: transparent; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flow-path__component[data-status="busy"] .flow-path__outline { stroke: var(--fp-busy); stroke-dasharray: 2 2; }
.flow-path__component[data-status="warning"] .flow-path__outline { stroke: var(--fp-warning); stroke-dasharray: 4 2; }
.flow-path__component[data-status="error"] .flow-path__outline { stroke: var(--fp-error); stroke-width: 2.5; }
.flow-path__component[data-status="offline"] { opacity: .5; }
.flow-path__component.is-selected .flow-path__outline { stroke: var(--fp-selection); stroke-width: 2; stroke-dasharray: none; }
/* Dropping a real device here puts it in the place of the one drawn. */
.flow-path__component.is-drop-target .flow-path__outline { stroke: var(--fp-selection); stroke-width: 2.5; stroke-dasharray: 4 2; }
.flow-path__component.is-drop-target { opacity: 1; }
.flow-path__placeholder { fill: none; stroke: var(--fp-offline); stroke-width: 1.5; stroke-dasharray: 4 3; }
.flow-path__placeholder-text { fill: var(--fp-offline); font-size: 16px; text-anchor: middle; }
.flow-path__label { fill: var(--cui-secondary-color, #6b7280); font-size: 8px; font-weight: 600; text-anchor: middle; pointer-events: none; }
/* Same colours as the panel's Disconnected badge. */
.flow-path__disconnected { pointer-events: none; }
/* Short labels on a component, such as the numbers of the method steps that use it. */
.flow-path__badge rect { fill: var(--cui-emphasis-color, #344054); }
.flow-path__badge text { fill: var(--cui-body-bg, #fff); font-size: 8px; font-weight: 700; text-anchor: middle; }
.flow-path__badge.is-highlighted rect { fill: var(--cui-primary, #2f5bd3); }
.flow-path__disconnected rect { fill: var(--cui-danger-bg-subtle, #f9d4d4); stroke: var(--cui-danger-border-subtle, #f2a9a9); stroke-width: .75; }
.flow-path__disconnected text { fill: var(--cui-danger-text-emphasis, #671414); font-size: 7px; font-weight: 700; text-anchor: middle; }

/* Parts of a component SVG that the server's state colours. The SVGs draw in currentColor. */
.flow-path__graphic .is-flowing.flow-gas { color: var(--fp-gas); }
.flow-path__graphic .is-flowing.flow-liquid { color: var(--fp-liquid); }
.flow-path__graphic .is-flowing.flow-both { color: var(--fp-both); }
.flow-path__graphic .is-blocked { color: var(--fp-blocked); }
/* What an actuator moves - a plunger and its carriage, a pump's rollers - is blue, so it is clear which
   parts move and are driven. */
.flow-path__graphic .flow-actuator { color: var(--fp-actuator); }
/* A channel with nothing in it is only scenery: light grey, so labels stay readable over it. */
.flow-path__graphic .flow-channel:not(.is-flowing):not(.is-blocked) { color: var(--cui-border-color, #c4c9d0); }
/* Contents a component SVG paints in a medium's colour, like the liquid inside a syringe. */
.flow-path__graphic .flow-medium-gas { fill: var(--fp-gas); }
.flow-path__graphic .flow-medium-liquid { fill: var(--fp-liquid); }
.flow-path__graphic .flow-medium-both { fill: var(--fp-both); }

.flow-path__connection { cursor: pointer; }
.flow-path__connection-hit { fill: none; stroke: transparent; stroke-width: 10; }
.flow-path__connection-casing { fill: none; stroke: var(--cui-card-bg, #fff); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: .8; pointer-events: none; }
.flow-path__connection-line { fill: none; stroke: var(--cui-secondary-color, #6b7280); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
/* The tubing colour is the tube's border, the white edge around its line; the line itself stays grey
   and takes the colour of what flows (gas, liquid or both). */
.flow-path__connection.has-tube-color .flow-path__connection-casing { stroke: var(--fp-tube); opacity: 1; }
/* The mark of a tube whose tubing is set: a small ring on the line, in the line's own grey. */
.flow-path__tubing-mark { cursor: pointer; }
.flow-path__tubing-mark-hit { fill: transparent; }
.flow-path__tubing-mark-ring { fill: var(--cui-card-bg, #fff); stroke: var(--cui-secondary-color, #6b7280); stroke-width: 1.2; pointer-events: none; }
.flow-path__connection.medium-gas .flow-path__connection-line { stroke-dasharray: 1 3; }
.flow-path__connection-line.is-flowing { stroke-width: 2.5; stroke-dasharray: 8 5; animation: flow-path-flow .8s linear infinite; }
.flow-path__connection-line.flow-gas { stroke: var(--fp-gas); }
.flow-path__connection-line.flow-liquid { stroke: var(--fp-liquid); }
.flow-path__connection-line.flow-both { stroke: var(--fp-both); }
.flow-path__connection.is-reversed .flow-path__connection-line { animation-direction: reverse; }
.flow-path__connection.is-selected .flow-path__connection-casing { stroke: var(--fp-selection); stroke-width: 6; opacity: .35; }
.flow-path__connection:hover .flow-path__connection-casing { stroke: var(--fp-selection); opacity: .2; }
.flow-path__connection-label { fill: var(--cui-secondary-color, #6b7280); font-size: 7px; text-anchor: middle; pointer-events: none; }
.flow-path__waypoint { fill: var(--cui-card-bg, #fff); stroke: var(--fp-selection); stroke-width: 1.5; cursor: move; }

/* Joint markers: colour is the medium, shape the direction (triangle in, triangle out, circle both). */
.flow-path__joint { cursor: default; }
.flow-path.is-editing .flow-path__joint { cursor: crosshair; }
.flow-path__joint-hit { fill: transparent; stroke: none; }
.flow-path__joint-shape { stroke: var(--cui-card-bg, #fff); stroke-width: 1; stroke-linejoin: round; transition: stroke-width .1s ease; }
.flow-path__joint.medium-gas .flow-path__joint-shape { fill: var(--fp-gas); }
.flow-path__joint.medium-liquid .flow-path__joint-shape { fill: var(--fp-liquid); }
.flow-path__joint.medium-both .flow-path__joint-shape { fill: var(--fp-both); }
.flow-path__joint:hover .flow-path__joint-shape { stroke: var(--fp-selection); stroke-width: 1.8; }
.flow-path__joint.is-compatible .flow-path__joint-shape { stroke: var(--fp-selection); stroke-width: 1.8; }
.flow-path__joint.is-incompatible { opacity: .3; }
.flow-path.is-editing .flow-path__joint.is-incompatible { cursor: not-allowed; }
.flow-path__joint.is-flowing .flow-path__joint-shape { stroke: var(--cui-body-color, #212631); stroke-width: 1.4; }
.flow-path__joint.is-blocked .flow-path__joint-shape { stroke: var(--fp-blocked); stroke-width: 2.2; }

.flow-path__tooltip { position: absolute; z-index: 5; max-width: 16rem; padding: .35rem .55rem; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .4rem; background: var(--cui-card-bg, #fff); box-shadow: 0 4px 14px rgba(15, 23, 42, .12); color: var(--cui-body-color, #212631); font-size: .75rem; line-height: 1.35; pointer-events: none; }
.flow-path__tooltip[hidden] { display: none; }
.flow-path__tooltip-title { font-weight: 700; }
.flow-path__tooltip-line { color: var(--cui-secondary-color, #6b7280); }

.flow-path__legend { position: absolute; left: .5rem; bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; max-width: calc(100% - 1rem); padding: .25rem .5rem; border: 1px solid var(--cui-border-color, #d8dbe0); border-radius: .4rem; background: color-mix(in srgb, var(--cui-card-bg, #fff) 88%, transparent); color: var(--cui-secondary-color, #6b7280); font-size: .7rem; pointer-events: none; }
.flow-path__legend-item { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.flow-path__legend svg { width: 12px; height: 12px; overflow: visible; }
.flow-path__legend .flow-path__joint-shape { stroke: none; }
.flow-path__legend .legend-neutral { fill: var(--cui-secondary-color, #6b7280); }
.flow-path__legend-divider { width: 1px; align-self: stretch; background: var(--cui-border-color, #d8dbe0); }

.flow-path__wire-preview { fill: none; stroke: var(--fp-selection); stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; }
.flow-path__wire-corner { fill: var(--fp-selection); pointer-events: none; }

/* A device already on the view: shown, so it is clear it exists, but it cannot be placed twice. */
.flow-path__palette-item.is-placed { opacity: .45; cursor: not-allowed; }
.flow-path__palette-item.is-placed:hover { border-color: transparent; background: none; }

/* The pane on the right for the selected component. What is in it is the device panel, a view of its
   own (DeviceResourcePanel.layout) rendered from the layout's Panel node; this only gives it its place. */
.flow-path__panel { flex: 0 0 18rem; min-width: 0; padding: .6rem .75rem; border-left: 1px solid var(--cui-border-color, #d8dbe0); background: var(--cui-card-bg, #fff); overflow-y: auto; }
.flow-path__panel[hidden] { display: none !important; }

@keyframes flow-path-flow { to { stroke-dashoffset: -13; } }
@media (prefers-reduced-motion: reduce) { .flow-path__connection-line.is-flowing { animation: none; } }

@media (max-width: 640px) {
    .flow-path__body { flex-wrap: wrap; }
    .flow-path__palette { flex-basis: 8.5rem; }
    .flow-path__canvas { min-height: 320px; }
    .flow-path__panel { flex: 1 1 100%; border-top: 1px solid var(--cui-border-color, #d8dbe0); border-left: none; }
    .flow-path__status { flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* Component builder: a popup over the page in which customers draw their own components. */
.flow-path-builder { --fp-gas: #0072b2; --fp-liquid: #009e73; --fp-both: #7e57c2; --fp-selection: var(--cui-primary, #321fdb); position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, .55); }
.flow-path-builder__window { display: flex; flex-direction: column; width: min(1200px, 100%); height: min(780px, 100%); border-radius: .75rem; background: var(--cui-card-bg, #fff); box-shadow: 0 20px 50px rgba(15, 23, 42, .3); color: var(--cui-body-color, #212631); outline: none; overflow: hidden; }
.flow-path-builder__header { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); }
.flow-path-builder__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.flow-path-builder__body { display: flex; flex: 1 1 auto; min-height: 0; }
.flow-path-builder__library { display: flex; flex: 0 0 13rem; flex-direction: column; gap: .5rem; padding: .75rem; border-right: 1px solid var(--cui-border-color, #d8dbe0); overflow-y: auto; }
.flow-path-builder__library-list { display: flex; flex-direction: column; gap: .25rem; }
.flow-path-builder__library-item { display: flex; flex-direction: column; align-items: flex-start; padding: .35rem .5rem; border: 1px solid transparent; text-align: left; }
.flow-path-builder__library-item:hover { border-color: var(--cui-border-color, #d8dbe0); }
.flow-path-builder__library-item.active { border-color: var(--fp-selection); background: color-mix(in srgb, var(--fp-selection) 8%, transparent); }
.flow-path-builder__library-name { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.flow-path-builder__library-category { color: var(--cui-secondary-color, #6b7280); font-size: .72rem; }
.flow-path-builder__editor { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.flow-path-builder__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); }
.flow-path-builder__tools .btn { display: inline-flex; align-items: center; gap: .3rem; }
.flow-path-builder__tools label.btn:focus-within { outline: 2px solid var(--fp-selection); outline-offset: 1px; }
.flow-path-builder__canvas { position: relative; flex: 1 1 auto; min-height: 0; background: var(--cui-tertiary-bg, #f3f4f7); }
.flow-path-builder__svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.flow-path-builder__svg.is-drawing { cursor: crosshair; }
.flow-path-builder__grid-dot { fill: var(--cui-secondary-color, #9ca3af); opacity: .6; }
.flow-path-builder__frame { fill: var(--cui-card-bg, #fff); fill-opacity: .6; stroke: var(--cui-secondary-color, #6b7280); stroke-width: .4; stroke-dasharray: 2 1.5; }
.flow-path-builder__drawing { color: var(--cui-body-color, #212631); }
.flow-path-builder__shape { cursor: move; }
.flow-path-builder__svg.is-drawing .flow-path-builder__shape { cursor: crosshair; }
.flow-path-builder__shape.is-selected { stroke: var(--fp-selection) !important; }
text.flow-path-builder__shape.is-selected { fill: var(--fp-selection); }
.flow-path-builder__draft { color: var(--fp-selection); stroke-dasharray: 2 1; }
.flow-path-builder__handle { fill: var(--cui-card-bg, #fff); stroke: var(--fp-selection); stroke-width: .6; cursor: nwse-resize; }
.flow-path-builder__joint { cursor: move; }
.flow-path-builder__joint circle { stroke: var(--cui-card-bg, #fff); stroke-width: .8; }
.flow-path-builder__joint.medium-gas circle { fill: var(--fp-gas); }
.flow-path-builder__joint.medium-liquid circle { fill: var(--fp-liquid); }
.flow-path-builder__joint.medium-both circle { fill: var(--fp-both); }
.flow-path-builder__joint.is-selected circle { stroke: var(--fp-selection); stroke-width: 1.4; }
.flow-path-builder__joint text { fill: var(--cui-secondary-color, #6b7280); font-size: 4px; font-weight: 600; pointer-events: none; }
.flow-path-builder__properties { display: flex; flex: 0 0 17rem; flex-direction: column; gap: .45rem; padding: .75rem; border-left: 1px solid var(--cui-border-color, #d8dbe0); overflow-y: auto; }
.flow-path-builder__heading { margin-top: .4rem; color: var(--cui-secondary-color, #6b7280); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.flow-path-builder__heading:first-child { margin-top: 0; }
.flow-path-builder__field .form-label { margin-bottom: .1rem; font-size: .74rem; }
.flow-path-builder__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.flow-path-builder__joint-item { padding: .25rem .45rem; border: 1px solid var(--cui-border-color, #d8dbe0); font-size: .76rem; text-align: left; }
.flow-path-builder__joint-item.active { border-color: var(--fp-selection); font-weight: 600; }
.flow-path-builder__note { color: var(--cui-secondary-color, #6b7280); font-size: .76rem; }
.flow-path-builder__footer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--cui-border-color, #d8dbe0); }
.flow-path-builder__footer .btn[hidden] { display: none; }
.flow-path-builder__status { flex: 1 1 12rem; min-width: 0; color: var(--cui-secondary-color, #6b7280); font-size: .8rem; }
.flow-path-builder__status.is-warning { color: var(--cui-warning-text-emphasis, #764705); font-weight: 600; }
.flow-path-builder__status.is-error { color: var(--cui-danger-text-emphasis, #671414); font-weight: 600; }

@media (max-width: 900px) {
    .flow-path-builder { padding: 0; }
    .flow-path-builder__window { height: 100%; border-radius: 0; }
    .flow-path-builder__body { flex-direction: column; overflow-y: auto; }
    .flow-path-builder__library, .flow-path-builder__properties { flex: 0 0 auto; border: none; border-bottom: 1px solid var(--cui-border-color, #d8dbe0); }
    .flow-path-builder__library-list { flex-direction: row; flex-wrap: wrap; }
    .flow-path-builder__editor { flex: 0 0 auto; }
    .flow-path-builder__canvas { height: 360px; flex: 0 0 auto; }
}
.flow-path-builder__header { gap: .75rem; }
.flow-path-builder__subtitle { margin-right: auto; color: var(--cui-secondary-color, #6b7280); font-size: .78rem; }
.flow-path-builder__upload:focus-within { outline: 2px solid var(--fp-selection); outline-offset: 1px; }

/* --------------------------------------------------------------------------------------------
   The builder embedded in a form (FlowPathComponentBuilderWidget) rather than opened as a window.
   No overlay, no library and no footer: the form around it carries the fields and the buttons,
   so only the tools, the canvas and the selection panel are drawn.
   -------------------------------------------------------------------------------------------- */
.flow-path-component-builder {
    /* The same palette .flow-path-builder declares for the window. Without it var(--fp-selection)
       resolves to nothing here and a selected shape loses its stroke instead of turning blue. */
    --fp-gas: #0072b2;
    --fp-liquid: #009e73;
    --fp-both: #7e57c2;
    --fp-selection: var(--cui-primary, #321fdb);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.flow-path-builder__embedded {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-areas: "tools tools" "canvas properties" "status status";
    grid-template-rows: auto minmax(280px, 1fr) auto;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--cui-border-color, #d8dbe0);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--cui-body-bg, #fff);
}

.flow-path-builder__embedded > .flow-path-builder__tools { grid-area: tools; }
.flow-path-builder__embedded > .flow-path-builder__canvas { grid-area: canvas; }
.flow-path-builder__embedded > .flow-path-builder__properties { grid-area: properties; }
.flow-path-builder__embedded > .flow-path-builder__status { grid-area: status; padding: .35rem .75rem; border-top: 1px solid var(--cui-border-color, #d8dbe0); min-height: 1.75rem; }

.flow-path-builder__properties--embedded { flex: 1 1 auto; min-height: 0; }
.flow-path-builder__properties--embedded[hidden] { display: none; }

/* The panel goes under the canvas once there is no room beside it. */
@media (max-width: 767.98px) {
    .flow-path-builder__embedded {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "tools" "canvas" "properties" "status";
        grid-template-rows: auto 320px auto auto;
    }

    .flow-path-builder__properties--embedded { border-left: none; border-top: 1px solid var(--cui-border-color, #d8dbe0); }
}

/* Selection, in the window and embedded alike. The wash is what makes an outline-only shape read as
   picked: a stroke change alone is easy to miss on a thin line. */
.flow-path-builder__shape.is-selected {
    stroke: var(--fp-selection, #321fdb) !important;
    stroke-width: 2 !important;
    fill: color-mix(in srgb, var(--fp-selection, #321fdb) 18%, transparent) !important;
}

/* A line has nothing to wash, so it gets the weight instead. */
line.flow-path-builder__shape.is-selected,
polyline.flow-path-builder__shape.is-selected {
    fill: none !important;
    stroke-width: 2.5 !important;
}

text.flow-path-builder__shape.is-selected {
    fill: var(--fp-selection, #321fdb) !important;
    stroke: none !important;
}

/* --------------------------------------------------------------------------------------------
   The component editor's form (FlowPathComponentDefinitionModel.layout), shared by its page and
   its dialog. Here rather than in the layout's <dynamiccss>, because that is matched to a layout
   by exact id and would have to be repeated for each; these class names are namespaced anyway.
   -------------------------------------------------------------------------------------------- */
.na-component-editor {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.na-component-editor .property-field-layout,
.na-component-editor .widget-holder,
.na-component-editor .field-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* The drawing and the fields beside it. Below a tablet they stack, canvas first. */
.na-component-top {
    /* The drawing gets the full width and the fields sit under it: side by side the labels had no
       room and ran into their values. */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.na-component-canvas {
    min-height: 360px;
}

/* Two fields to a row in the panel beside the canvas, one on a narrow screen. */
.na-component-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .5rem 1rem;
}

.na-component-fields-wide {
    grid-column: 1 / -1;
}

.na-component-section {
    min-width: 0;
}

/* The grids must not push the dialog wider than the screen. */
.na-component-section .ma-table,
.na-component-section .dp-table {
    min-width: 0;
    overflow-x: auto;

    /* Scrolling here makes this the box the grid's sticky header sticks to, and that header offsets
       itself by the height of the page's sticky view header (grid.css). Inside this box there is no
       view header above it, so the offset would push the header down over the first row. */
    --na-sticky-header-height: 0px;
}

.na-component-dialog {
    width: min(1100px, 92vw);
    max-height: 82vh;
    overflow-y: auto;
}
    

/* The line under a card's heading that says what the section is for. */
.na-component-help {
    max-width: 90ch;
    margin-top: .15rem;
    color: var(--cui-secondary-color, #6b7280);
    font-size: .82rem;
    line-height: 1.45;
}

/* Top view: the same components seen from above, on the bench. One millimetre is one canvas unit. Tables
   lie under the devices; a device's mounting point is marked while it is selected, since that is what
   snaps to a table's dots. */
.flow-path__perspective-badge { padding: .15rem .5rem; border-radius: 999px; background: var(--cui-secondary-bg, #e5e7eb); color: var(--cui-body-color, #212631); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.flow-path__perspective-badge[hidden] { display: none; }
.flow-path.is-top-view .flow-path__legend { display: none; }
.flow-path__top-grid-dot { fill: var(--cui-border-color, #c4c9d0); }
.flow-path__top-table { color: var(--cui-body-color, #212631); }
.flow-path.is-editing .flow-path__top-table { cursor: move; }
.flow-path__top-table .flow-path__outline { stroke: transparent; }
.flow-path__top-table.is-selected .flow-path__outline { stroke: var(--fp-selection); stroke-width: 2; }
.flow-path__top-anchor { fill: none; stroke: var(--fp-selection); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.flow-path__top-anchor-dot { fill: var(--fp-selection); pointer-events: none; }
.flow-path__top-placeholder { fill: var(--cui-tertiary-bg, #f3f4f7); stroke: var(--cui-secondary-color, #6b7280); stroke-width: 1; stroke-dasharray: 4 3; }
.flow-path__top-placeholder-text { fill: var(--cui-secondary-color, #6b7280); font-size: 9px; text-anchor: middle; pointer-events: none; }
.flow-path__palette-note { margin: 0 0 .5rem; color: var(--cui-secondary-color, #6b7280); font-size: .72rem; }

/* One component drawing on its own, on the device panel: the side view of a component selected on the
   top view, the footprint of one selected on the flow path. */
.flow-path-drawing { --fp-gas: #0072b2; --fp-liquid: #009e73; --fp-both: #7e57c2; --fp-actuator: #2f6fd0; display: flex; justify-content: center; width: 100%; min-width: 0; overflow: hidden; color: var(--cui-body-color, #212631); }
.flow-path-drawing[hidden] { display: none; }
.flow-path-drawing__svg { display: block; width: 100%; max-height: inherit; height: auto; }
.flow-path__top-plate { color: var(--cui-body-color, #212631); pointer-events: none; }
.flow-path__bench-select { margin-bottom: .5rem; font-size: .75rem; }
/* A device stands on the bench whether or not it is connected: only its outline says so here. */
.flow-path__top-svg .flow-path__component[data-status="offline"] { opacity: 1; }
.flow-path__top-svg .flow-path__component[data-status="offline"] .flow-path__outline { stroke: var(--fp-offline); stroke-dasharray: 3 2; }