/* ---------------------------------------------------------------------------------------------
SELF-SUFFICIENCY BLOCK -- rules this suite needs that used to live only in the PARENT SITE.
Added 2026-08-14 after dev.hawsedc.com's first deploy came up with no blue form backgrounds and
no table borders.
WHAT HAPPENED. Every page loads three stylesheets: bootstrap, this file, and `/hawsedc.css` --
and that third one sits at the SITE ROOT and is NOT tracked by the engcalcs repository. It
belongs to hawsedc.com. Deploy engcalcs on its own and it simply is not there, so `form`
backgrounds and table borders vanish while everything else looks fine. 464 bytes, outside the
repo, invisible to every check we have.
WHY IT MATTERS BEYOND ONE DEV BOX: LibreEPANET.org (ROADMAP Task 306) is BY DEFINITION a
standalone deploy of this suite on another domain. It would have walked into exactly this, and
the symptom -- most of the page fine, some styling missing -- is the kind that gets blamed on a
cache for a day before anyone looks at a 404.
DUPLICATION IS DELIBERATE AND SAFE. On hawsedc.com `/hawsedc.css` still loads LAST, so its
identical declarations win and nothing changes there. On a standalone deploy these are the only
copy. Kept at the TOP of this file so every engcalcs rule below can still override them, which is
how they behaved when they were in a stylesheet loaded before... nothing. Keep the VALUES in step
with `/hawsedc.css` if that file is ever edited.
--------------------------------------------------------------------------------------------- */
body { font-family: sans-serif; }
form {
background: #f7f9ff;
border: 1px solid #66c;
margin-bottom: 1px;
}
.left { float: left; margin: 0.5em; }
table, th, tr, td {
border: 1px solid blue;
border-collapse: collapse;
padding: 0px 2px 0px 2px;
}
/* "bare" tables and their immediate children show no border -- the layout tables the calculator
forms are built from. Without this every calculator is a grid of blue boxes. */
table.bare, table.bare > tbody > tr, table.bare > tbody > tr > td { border-width: 0px; }
.input {
width: 7em;
}
/* Wave 0 narrow-column mechanism (validated 2026-07-06): holds a results-table
header as narrow as the old hard breaks did, so breaks can be removed
from lang strings for clean translation. Wrap a header label in this span and
the column stays fixed-width while long/other-language text wraps. Class-scoped
so it never touches ip_/wi_ which share #CalcsTable. Default is deliberately
NARROW for no-drop-down columns (nothing sets a width floor there, so keep them
tight). Mid-word wrapping across the 26 languages is expected and accepted — do
NOT widen to make English wrap prettily (that only helps English). Override per
column with an inline width where a unit-select sets a wider floor. */
.ec-narrowcol {
display: inline-block;
width: 3.6em;
overflow-wrap: break-word;
white-space: normal;
vertical-align: top;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Opt back IN to the browser's native spinner arrows, per input (Tom, 2026-07-30, on the map-label
decimal-places field). The two rules above strip the arrows from every number input in the suite
-- right for a physical quantity, where the arrows are useless (a 1-unit step means nothing to a
diameter or a flow) and only steal width from the number. It is wrong for a SMALL BOUNDED INTEGER
like "decimal places, 0-4", where clicking up/down is the natural gesture and the arrows are what
tell the user at a glance that this field is not a free-form number. Add .ec-spin to such a field.
opacity:1 is not redundant: Chrome/Safari hide the spinner until the pointer is over the input, so
without it the control is invisible exactly when the user is looking for it. */
input.ec-spin::-webkit-outer-spin-button,
input.ec-spin::-webkit-inner-spin-button {
-webkit-appearance: auto;
appearance: auto;
opacity: 1;
margin: 0;
}
input.ec-spin[type=number] {
-moz-appearance: auto;
appearance: auto;
}
.blink {
animation: blinker 1s step-start 15;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
/* Validity/status check results (velocity checks, regime checks, DU quality,
D50 range checks, head-loss checks, conveyance efficiency, etc.) */
.ec-status-ok {
color: #267326;
}
.ec-status-info {
color: steelblue;
}
.ec-status-warn {
color: #c60;
}
.ec-status-bad {
color: #c00;
}
.ec-status-neutral {
color: gray;
}
/* The suite's one icon set (ROADMAP Task 231). Geometry lives once in lib/Icons.lib.php; this is
the only place its size and alignment are decided.
Sized in em, so an icon tracks whatever text it prefixes instead of fighting it at one fixed
pixel size. stroke:currentColor (set on the element) plus no colour here means an icon is
automatically right on a light row, a hover row, a disabled row and a dark print stylesheet --
the property colour emoji could never have. vertical-align sits it on the text's optical
centre; baseline alignment would hang it low next to a capital letter. */
.ec-icon {
width: 1.05em;
height: 1.05em;
vertical-align: -0.16em;
flex: none;
}
/* A control whose label is " Word" gets its gap from here rather than from a space character
baked into every call site -- a literal space is unremovable and wrong in a narrow toolbar.
margin-inline-end, not margin-right: in Arabic, Hebrew, Persian, Urdu and Pashto the icon sits
to the RIGHT of its word and the gap has to follow it there. */
button > .ec-icon, a > .ec-icon, label > .ec-icon { margin-inline-end: 0.4em; }
/* Except inside the lpn menu's fixed-width icon column, where the cell already provides the gap
and a margin on top of it would push every label off the column it is meant to line up with. */
.lpn-menu-icon > .ec-icon { margin-inline-end: 0; }
/* Hover-tip icons (⚠, ?) that carry a longer explanation in the title attribute */
.ec-tip {
cursor: help;
color: steelblue;
font-size: 0.9em;
}
/* Second line of an input label carrying that field's inline solver control
(solverControlHtml() in lib/Calculators.lib.php). Deliberately plain: no rule, no
indent glyph -- the leading button is enough to mark the line as a control, and any
directional decoration would have to be mirrored for the RTL languages. Line height
is left alone so the Q input keeps its natural height. */
.ec-solverline {
display: block;
margin-top: 2px;
font-weight: normal;
}
/* Whole-label wrapper: makes the entire label (not just the ? icon) the hover/tap
target for the tip carried in .ec-tip's title attribute. */
.ec-help {
cursor: help;
}
/* The welcome line under the page title (template_welcome). Set apart with italics
rather than the >> ... << that used to be typed into all 27 language strings: those
are not standard English or typography (Tom, 2026-07-27), they are directional
decoration that would have to be mirrored for the RTL languages -- the same reason
.ec-solverline above carries no indent glyph -- and they put presentation inside a
translated string, where every translator had to copy them by hand. */
.ec-welcome {
font-style: italic;
}
/* Scripts with no italic tradition, where the browser can only synthesize a slanted
face and the result reads as a rendering fault rather than as emphasis: Arabic,
Hebrew, Han, Ethiopic, Devanagari/Bengali, Khmer, Burmese. The line is already its
own paragraph under the
, so it stays legible with no substitute decoration. */
html[lang="am"] .ec-welcome,
html[lang="ar"] .ec-welcome,
html[lang="bn"] .ec-welcome,
html[lang="fa"] .ec-welcome,
html[lang="he"] .ec-welcome,
html[lang="hi"] .ec-welcome,
html[lang="km"] .ec-welcome,
html[lang="my"] .ec-welcome,
html[lang="ps"] .ec-welcome,
html[lang="ur"] .ec-welcome,
html[lang="zh"] .ec-welcome {
font-style: normal;
}
/* Looped Pipe Network map editor (prefix lpn_, ROADMAP Task 146). Canvas mechanics ported
from the validated dev/lpn-spike/canvas-spike.html -- see phase0-acceptance.md. */
/* --lpn-sym is the symbol-size factor (Settings > "Symbol size (relative to text)"), set on the
SVG element by refreshSymbolSizes() in looped-network.js. Every stroke width below is written as
its original fixed value times that factor, so the default of 1 renders exactly what shipped
before the setting existed. Radii and the flow-arrow chevron are geometry ATTRIBUTES, not styles,
so those are scaled in JS instead. */
/* PLAIN WHITE (Tom, 2026-08-10, very high priority). It was #f7f7f2 -- a faint warm tint that read
as "paper" on its own and as a dirty smudge next to the white page around it, and that no longer
matched anything now that a backdrop image can sit under the drawing.
--lpn-map-bg backs a reservoir/pump map symbol's occlusion patch (.lpn-node-symbol-backdrop/
.lpn-link-symbol-backdrop below, ROADMAP Task 146.10 follow-up, 2026-08-09), so it must equal
whatever the canvas itself is painted -- keep it in step with the inline `background` on
#lpn_canvas in Looped-Network.php. */
#lpn_canvas { touch-action: none; cursor: default; --lpn-sym: 1; --lpn-opacity: 1; --lpn-backdrop-opacity: 1; --lpn-map-bg: #fff; }
/* Fading the BACKDROP is the counterpart of fading the symbols below: a busy, dark aerial or plan
swallows a 0.5-wide pipe and a black flow arrow, and the standard answer everywhere else (AutoCAD
image fade, QGIS layer transparency) is to knock the reference material back rather than thicken
the drawing over it -- the drawing then still reads correctly on white and in print. */
.lpn-backdrop { opacity: var(--lpn-backdrop-opacity, 1); }
/* The OpenStreetMap tile layer (ROADMAP Task 145). pointer-events:none because it is scenery: every
pointer gesture on this page is resolved from the SVG's own coordinates and from the element under
the cursor, and a tile that could become an event target would sit between the user and every node
it happens to cover. It shares the backdrop's fade for the same reason the backdrop has one -- a
dense city map swallows a thin pipe. */
.lpn-basemap { opacity: var(--lpn-backdrop-opacity, 1); pointer-events: none; }
/* Symbol opacity, for laying the network out over a backdrop image: applied to the two whole
layers that hold symbols, so nodes/pipes/arrows/vertex handles fade together as one drawing
rather than each fading independently and showing where they overlap. Labels, masks and leaders
live in their own layers and are deliberately untouched. */
.lpn-symbols { opacity: var(--lpn-opacity, 1); }
/* A junction is a SOLID DOT, one colour, no stroke (Tom, 2026-08-09).
Two reasons, both from looking at a real drawing. The old two-tone treatment -- #2a6 fill
inside a heavy #144 ring -- stopped working once the node shrank: "the light green in the
middle has shrunk to nearly nothing", so it read as a dark blob with a colour fringe rather
than as a green node. And the ring was most of the size: a 1 unit stroke centred on the edge
adds 0.5 all round, taking a 1.44 fill out to 2.44 overall, which against a 2.5 unit font's
~1.8 cap height is the "about 1.33" too-big he measured by eye. Dropping the stroke and
sizing the fill alone (JUNCTION_R in looped-network.js) puts the whole dot at one cap height.
BLACK since 2026-08-14 (Tom: "Black reservoirs, pumps, valves, and nodes, I suppose"), and the
comment that used to sit here arguing for BLUE-NOT-GREEN has been removed rather than left to
contradict the rule below -- a stylesheet that explains a colour it no longer uses is worse than
one that explains nothing.
The reasoning it made is the reasoning that retired it, which is the satisfying part: "every
colour we spend on decoration now is one we cannot spend on meaning later". Blue was already the
restrained choice (EPANET draws everything black; epanet-js draws the normal case in one blue and
reserves colour for CONDITION). Going the last step to black spends nothing at all on the base
state, which is what Task 327's colour-by-value view needs in order to mean something -- and it
answers Tom's own complaint that EPANET makes it "practically an act of Congress to get a pipe to
show as black while showing values from the model on the map".
The one existing conditional style, .lpn-node-pending's red ring, still overrides stroke below
and is unaffected -- which is exactly the point: condition still reads, now against nothing. */.lpn-node { fill: #000; stroke: none; cursor: pointer; }
/* A reservoir now draws as a tank symbol, not this circle (ROADMAP Task 146.10) -- fill:none/
stroke:none hides the circle itself; pointer-events:all keeps its full disc clickable/draggable
anyway (data-node, drag, hit-testing all still read THIS element, unchanged), same trick used
for any invisible-but-clickable hit target. `.lpn-node-pending`'s ring below still overrides
stroke, so the pending-link indicator still shows on a reservoir mid-pipe-draw. */
.lpn-node-reservoir, .lpn-node-tank { fill: none; stroke: none; pointer-events: all; }
/* The tank/pump overlay symbols themselves (looped-network.js buildMapIconSvg()) -- purely
visual, never a click target; the interactive element is always the plain node circle or link
polyline underneath. `color` is the currentColor the icon paths read for both stroke and the
reservoir's translucent water-fill path. */
.lpn-node-symbol, .lpn-link-symbol { pointer-events: none; }
/* BLACK since 2026-08-14 (Tom: "Let's turn pumps and reservoirs black now"). This is the same
argument the blue was chosen under, now being cashed in: colour on this map is the budget we are
saving for MEANING, and Task 327's colour-by-value view is what will spend it. A reservoir that is
blue because reservoirs are watery is decoration, and decoration is what makes EPANET "practically
an act of Congress to get a pipe to show as black while showing values from the model" (Tom,
2026-08-14). Black base state, colour reserved for what the model says.
THE TANK GOES WITH IT even though Tom named only pumps and reservoirs: it shares this rule, and a
lone blue tank among black reservoirs would read as an oversight rather than a distinction --
the two are told apart by SHAPE, which is the test every symbol here is held to. Easy to revert
if that was not the intent. The junction dot is deliberately left blue for now; nobody asked. */
.lpn-node-symbol-reservoir, .lpn-node-symbol-tank { color: #000; }
/* THE SAME BLUE AS THE RESERVOIR, deliberately (Task 248). A tank and a reservoir are both
water bodies, and colour here is decoration, not meaning -- the two are told apart by SHAPE
(closed and tall against open and wide, lib/Icons.lib.php), which is what still works in
greyscale and for a colour-blind reader. Giving the tank its own hue would spend a colour on
a distinction the shape already carries, and colour is the budget this map is saving for
CONDITION -- see the note above. */
.lpn-link-symbol-pump { color: #000; }
/* Black with every other symbol (2026-08-14). It was the PIPE's own colour on the argument that a
valve is a fitting in the line rather than a separate kind of thing -- that argument still holds
and is now served better, since a black valve on a pipe stroke is a mark ON the line rather than
a differently-coloured object sitting in it. Told apart from a pump by SHAPE (an angular bowtie
against a circle), which is the test every symbol here is held to and the only one that survives
greyscale, print, and a colour-blind reader. */
.lpn-link-symbol-valve { color: #000; }
/* Opaque patch behind a symbol's own linework (prependSymbolBackdrop() in looped-network.js) so a
pipe running under a reservoir's open tank or a pump's unfilled casing doesn't show through --
the icon's own paths are untouched, this only paints underneath them. */
.lpn-node-symbol-backdrop, .lpn-link-symbol-backdrop { fill: var(--lpn-map-bg, #fff); stroke: none; }
/* stroke-width was 2 -- too wide relative to a 1.6-2.2 radius node (Tom, 2026-07-30), and it was
also why the arrow read as absorbed into the pipe rather than a distinct mark. Then 0.5, which
that correction overshot: a pipe network's PIPES are its primary content, and at 0.5 they were
drawn lighter than the node outlines (1.0) sitting on top of them. 0.7 is Tom's "a little"
rather than his "maybe double" -- heavier and easier to see over a busy backdrop, still lighter
than a node's own outline so the original over-wide problem does not come back. The flow arrow
is deliberately NOT thickened with it; see .lpn-arrow below. */
/* --lpn-lw, NOT --lpn-sym (Task 331, 2026-08-14). Pipe width is its own setting in screen pixels
now that text, symbols and links are decoupled: a pipe network's PIPES are its primary content,
and how heavy they are is a drawing decision in its own right rather than a consequence of how
big the junction dots happen to be. The three rules below (stroke, closed-link dashes, override
halo) are the link-weight family and all read --lpn-lw; every other stroke width on the map is
symbol furniture and stays on --lpn-sym. The multipliers preserve the exact proportions the
0.7-based versions had, so nothing about the drawing's appearance changed with the decoupling. */
/* BLACK (Tom, 2026-08-14, completing the sweep). The base drawing now spends NO colour at all --
pipes, nodes, reservoirs, tanks, pumps and valves are one black line-work, and every colour on the
map from here on means something: condition today (.lpn-node-pending's red, the override amber),
value tomorrow (Task 327). This is the state Tom named as the thing EPANET makes hard: "a pipe to
show as black while showing values from the model on the map". */
.lpn-link { stroke: #000; stroke-width: var(--lpn-lw, 0.7); cursor: pointer; }
/* Black with its symbol (2026-08-14) -- the pump's polyline and its circle are one mark. */
.lpn-link-pump { stroke: #000; }
/* No .lpn-link-valve rule: a valve's polyline is a pipe-coloured line by design -- see
.lpn-link-symbol-valve above. */
/* A CLOSED link (ROADMAP Task 146.07). Dashed, because a closed pipe carries no water and would
otherwise be indistinguishable from an open one -- an invisible cause for a network that will
not solve, or that solves to a surprising answer. The dash lengths are in WORLD units and scale
with --lpn-sym exactly as the stroke width above does, so the dashes keep their proportion to
the line at every zoom and symbol size rather than dissolving into a dotted line when zoomed
out. Colour is deliberately unchanged: a closed pipe is still the same pipe, and recolouring it
would collide with the per-field label colours (lpnFieldColors). */
.lpn-link-closed {
stroke-dasharray: calc(2.571 * var(--lpn-lw, 0.7)) calc(2 * var(--lpn-lw, 0.7));
}
/* Flow-direction arrow at each link's midpoint (Tom, 2026-07-30, matching EPANET) -- hidden
until a solve result exists (see updateArrow() in looped-network.js). pointer-events:none so
it never intercepts a click meant for the link/vertex underneath it.
An open chevron (unfilled polyline), not a solid triangle: a filled shape in the link's own
color read as absorbed into the (formerly thick) pipe stroke. Black and open protrudes above
and below the line instead of blending into it. */
/* NOT multiplied by --lpn-sym, unlike every other stroke width here (Tom, 2026-07-30: "flow arrows
are too wide… it seemed beautifully narrow before"). The arrow is the one symbol whose SHAPE is
scaled by an SVG transform (updateArrow() applies scale(symbolFactor()) to the chevron), and an
SVG transform scales the stroke along with the geometry -- so multiplying here as well squared
the factor, and the line grew twice as fast as the mark it outlines.
Left at 0.3 when .lpn-link went to 0.7 (Tom, 2026-07-30): he called this width "beautifully
narrow", and what makes an arrow vanish into a dark aerial is its pure BLACK against a dark
background, not its width -- fading the backdrop fixes that without coarsening the mark. */
.lpn-arrow { fill: none; stroke: #000; stroke-width: 0.3; pointer-events: none; }
/* Filled the same color as .lpn-link (Tom, 2026-07-30: vertices should read as "on the pipe",
not as a third node type) -- previously a hollow white circle with the pump's #a52 stroke,
which had no relation to the link it belonged to and could be mistaken for a small pump. */
.lpn-vhandle { fill: #000; stroke: #223; stroke-width: calc(0.25 * var(--lpn-sym, 1)); cursor: move; }
/* ---- Scenarios: the audit halo and the inactive element (ROADMAP Task 184) ----
AN OUTLINE, NEVER A FILL, and that is the whole reason a link gets a second element rather than
a restyle: the pipe's own stroke IS the pipe, so recolouring it to mark an override would
collide with the closed-link dashes, the pump's colour, and every future result-driven styling
this map spends colour on. A wider line UNDERNEATH composes with all of them.
Amber rather than red: an override is a deliberate act, not a fault, and red is spent on
condition here (.lpn-node-pending). Hidden until refreshScenarioMarks() adds .lpn-override,
which is why every link can carry one at no visual cost. */
.lpn-link-halo { stroke: none; pointer-events: none; }
/* ---- Scale-dependent visibility of GENERATED ANNOTATION (Task 331, 2026-08-14) ----
Set by applyLabelVisibility() when the visible map is wider than settings.labelMaxWidth.
THE LINE IS NOT "LABELS", IT IS "THINGS WE GENERATED TO BE READ" -- and the flow arrow proved it
belongs on this side (Tom, 2026-08-14: "Arrows also should hide at hideable zoom levels"). An
arrow is a symbol by construction and an annotation by purpose: nobody drew it, it exists to be
read, and zoomed out it is noise on top of a network you are trying to see the shape of. So:
HIDDEN data labels and their leaders (.lpn-datalbl-part), flow arrows
KEPT the network itself -- nodes, pipes, pumps, valves, tanks -- and the user's own Text
labels, which are authored content: they typed the words and chose the spot, and
vanishing them under a threshold that never mentions Text labels would read as a bug.
`visibility`, not `display`: a leader and an arrow each have their own show/hide logic and this
must compose with them rather than overwrite them -- something already hidden for its own reasons
stays hidden, and something visible is merely made invisible. visibility:hidden also drops
pointer events, so nothing suppressed here is still clickable.
ONE CLASS, DECLARED AT THE BUILD SITE (Task 334, 2026-08-15). This used to be a list of four
selectors naming each kind of annotation, and the extrema badge was missed out of it -- Tom
caught it on screen the same day: "Extrema glyphs forgot to hide when zoomed out." A list in a
stylesheet has to be remembered by whoever adds the next mark, months later, in another file.
`annotationEl()` in js/looped-network.js applies this class where the element is created, where
the author already knows what they are making. Add nothing here; build through that instead.
The extrema mark itself is no longer even a member: Task 333 made it the number's own
text-decoration, so it hides, moves and dies with the text. Prefer that where it is available. */
.lpn-labels-hidden .lpn-annotation { visibility: hidden; }
/* A USER'S OWN TEXT LABEL IS NOT ANNOTATION AND IS NOT IN THAT RULE -- it is authored content, and
it hides on its OWN threshold, scaled by its own size (Task 340): a title block drawn at 3x
survives to 3x the map width, exactly the way sheet lettering works. Per label, so it cannot be
a descendant selector; applyLabelVisibility() adds this class to the ones that are over it. */
.lpn-lbl-hidden { visibility: hidden; }
.lpn-link-halo.lpn-override { stroke: #e8a33d; stroke-width: calc(2.857 * var(--lpn-lw, 0.7)); }
/* A node's own circle carries its halo as a ring: it already draws as a filled disc, so a stroke
around it IS an outline. Placed BEFORE .lpn-node-pending below, so a node that is both
overridden and mid-pipe-draw shows the pending ring -- that one is about what your next click
does, and it is the more urgent of the two. */
.lpn-node.lpn-override { stroke: #e8a33d; stroke-width: calc(0.5 * var(--lpn-sym, 1)); }
/* SELECTED: the subject of the next command (ROADMAP Task 415, setSelection() in
js/looped-network.js). Blue, and it is not spending the map's colour budget on the model: red
says condition, amber says override, and both are statements about the DOCUMENT, while this one
is a statement about the VIEW and disappears the moment you click elsewhere. Blue is what every
editor uses for it, so it needs no legend.
A pipe wears the mark on its halo -- the same wider line underneath that the override uses -- so
it composes with the closed-link dashes and the pump's own colour rather than replacing them.
Both rules sit AFTER their .lpn-override twin (selection is the thing you are acting on now) and
BEFORE .lpn-node-pending (mid-pipe-draw is about what your next click does, which is more
urgent still). */
.lpn-link-halo.lpn-selected { stroke: #1976d2; stroke-width: calc(2.857 * var(--lpn-lw, 0.7)); }
.lpn-node.lpn-selected { stroke: #1976d2; stroke-width: calc(0.5 * var(--lpn-sym, 1)); }
.lpn-lbl.lpn-selected { fill: #1976d2; }
/* NOT IN THIS NETWORK: drawn, but out of the model (see isActive() in js/looped-network.js). Faded
rather than hidden, because the whole point of the inactive/active pair is to see both at once --
"with the new loop vs. without" wants the proposal visible beside the network it would join. */
.lpn-inactive { opacity: 0.3; }
/* The override marker under a property row, and Base's value beside it. Indented and small so the
row above stays the property and this reads as a note about it -- there is one of these under
every editable field once you are inside a scenario, and at full weight they would outnumber and
outshout the numbers they annotate. */
.lpn-ov-marker { margin-left: 1.5em; font-size: 0.85em; }
.lpn-ov-base { margin-left: 0.6em; color: #666; }
/* Feedback for the first-picked node of a pipe/pump (Tom, 2026-07-30: "otherwise there's no
indication that anything is working") -- a wide red ring around the existing node fill/stroke,
cleared by setPendingLinkFrom(null) in looped-network.js on completion or cancel. */
.lpn-node.lpn-node-pending { stroke: #d32f2f; stroke-width: calc(0.5 * var(--lpn-sym, 1)); }
/* Dashed line from the first-picked node to the live pointer, same context (add-pipe/add-pump
mode) -- shown/hidden and repositioned entirely from JS (rubberBandEl in looped-network.js). */
.lpn-rubberband { stroke: #d32f2f; stroke-width: calc(0.4 * var(--lpn-sym, 1)); stroke-dasharray: 1.2 1; pointer-events: none; fill: none; }
/* No font-size here -- it must be set inline in world units at each text element (see the
buildNodeEls/buildLabelEls comments in looped-network.js for why a screen-pixel-flavored
CSS font-size is wrong inside this scaled SVG group). */
/* THE LEGIBILITY BACKING IS A HALO ON THE GLYPHS, NOT A RECT BEHIND THEM (Task 376, the way
epanetjs does it). `paint-order: stroke fill` paints the stroke first and the fill on top, so a
white stroke reads as an outline that follows the letters and merges between close characters --
and it costs one declaration where the rect cost an element per label, a pad constant, a rotation
kept in step with the text, and a rect left behind whenever a label was hidden.
**WIDTH IS `em`, NOT --lpn-hair, AND THE DIFFERENCE MATTERS TWICE.** Both are screen-pixel
constants here -- the font-size on each label is itself a pixel size divided by the scale -- so
either one answers the defect the old world-unit pad had, where 0.4 world units reached 24px a
side at working zoom and turned every pipe a label lay along into pale grey. But `em` also stays
proportional to the LETTERING: a Text label at 3x gets a 3x halo instead of a hairline, and the
clearance arithmetic in alignedLabelPlacement(), which is written in fractions of the font size,
stays true at every text size rather than only at the shipped one.
0.2em is 0.1em of white outside the glyph (~1.1px at the shipped 11px), a little tighter than the
0.15-of-font-size pad the rect drew. Tighter on purpose: half the stroke falls INSIDE the glyph,
where the fill paints over it everywhere except in a counter -- the enclosed hole of an e or an
8 -- and a heavy halo closes those up. `stroke-linejoin: round` keeps a sharp corner from
throwing a spike. */
.lpn-lbl {
fill: #333; pointer-events: none; user-select: none;
paint-order: stroke fill;
stroke: #fff; stroke-width: 0.2em; stroke-linejoin: round;
}
/* pointer-events:none, found 2026-07-30 while verifying popup placement: labelsLayer draws ABOVE the
symbol layers, so a leader line crossing a node swallowed the click meant for that node and the
property popup simply never opened. A leader is not a thing you can click -- a label's own text
(.lpn-draglbl) is the drag/click target -- so it has no business in hit testing. (The extrema
badge needed the same rule and no longer exists to need it: Task 333 made the mark a
text-decoration inside the label's own text.) */
/* ONE SCREEN PIXEL, via --lpn-hair, not a fraction of the symbol size. A leader is a rule pointing
at something, not a symbol, and scaling it off --lpn-sym made it 0.49px at the shipped symbol
size and 0.14px if you turned symbols down -- which is why Tom reported "no leaders" while
looking at them (2026-08-15). A leader that cannot be seen is worse than none: the label it
belongs to then reads as floating free of the network. */
.lpn-leader { stroke: #000; stroke-width: var(--lpn-hair, 0.1); pointer-events: none; }
/* A LABEL THE USER HAS JUST PLACED SAYS SO, AND THEN STOPS SAYING IT (Tom, 2026-08-15, after
discovering he had dragged a label without meaning to: "put a timed box or highlight on dragged
labels for about a minute, maybe fading, maybe dashed, maybe animated so it's obviously
temporary"). It reads as a notification and never as part of the drawing -- there is no button to
press and nothing to clean up. */
/* **THE TEXT ITSELF CHANGES COLOUR. NO STROKE, NO BOX, NO NEW OBJECT** (Tom, 2026-08-15, after two
wrong answers from me: "All we need is something simple like the leader or label changing color
or blinking temporarily. No new object is needed.")
He is right, and the simplification deletes the whole bug: a fill has no width, so there is no
map-unit-versus-screen-pixel question to get wrong -- which is what produced a mark bigger than
the screen and then a full-page orange starburst, from the same three lines, twice.
RED, not the orange this started as (Tom: *"Red would be better. It looks orange or brown."*).
Two quick blinks so it is noticed, then a fade that starts AT ONCE and runs the rest of the way.
NO `forwards`: when the animation ends the property reverts to whatever the stylesheet says, so
the label returns to its normal colour on its own and nothing has to clean up after it.
**THE HOLD IS GONE, AND ITS ABSENCE IS THE POINT** (Tom, 2026-08-16: *"Start the long fade
immediately. Start appears to be delayed through about half the duration."*). It held full red
from 16% to 70% -- 24 of the 45 seconds -- and only then began to fade. A mark that does not
change for half its life reads as a mark that is stuck, so the fade was doing none of the work it
exists to do: saying "this is temporary" while you look at it.
The fade segment is LINEAR while the blinks keep the default easing. A per-keyframe
animation-timing-function governs the segment that STARTS at that keyframe, so this is the one
place to say it. Linear matters here: eased, most of the colour change happens in the first few
seconds and the tail is a long crawl through near-black, which is a hold by another name. */
.lpn-just-dragged { animation: lpn-just-dragged 45s ease-out; }
@keyframes lpn-just-dragged {
0% { fill: #d40000; }
4% { fill: #000; }
8% { fill: #d40000; }
12% { fill: #000; }
16% { fill: #d40000; animation-timing-function: linear; }
100% { fill: #000; }
}
@media (prefers-reduced-motion: reduce) {
.lpn-just-dragged { animation: none; }
}
/* The "you are in the middle of placing the background image" bar (ROADMAP Task 145 follow-up, Tom
2026-08-16). Fixed to the bottom of the viewport rather than placed near the canvas: while a
registration sequence runs, every normal interaction on the canvas is suppressed, so the message
has to be somewhere the eye lands no matter where the user was clicking. High z-index for the same
reason -- it must outrank the panels the sequence itself puts on screen. */
.lpn-regmode-bar {
position: fixed; left: 50%; transform: translateX(-50%); bottom: 1em;
z-index: 3000; display: flex; align-items: center; gap: 0.75em;
padding: 0.5em 0.9em; border-radius: 4px;
background: #222; color: #fff; font-size: 0.95em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lpn-regmode-bar button { font: inherit; padding: 0.15em 0.7em; cursor: pointer; }
@media print { .lpn-regmode-bar { display: none; } }
.lpn-draglbl { cursor: move; pointer-events: all; }
/* Masking is switchable (Task 330, Tom 2026-08-14: "We want to be able to turn off and on
background masking"). One class on the