ranger-compiler 3.5.1 → 3.5.2

package/dist/lib/evg/EVGLayout.rgr

@@ -0,0 +1,4220 @@
+; SPDX-License-Identifier: MIT
+
+; EVGLayout.rgr - Layout algorithm for EVG
+
+Import "EVGElement.rgr"
+Import "EVGStyleSheet.rgr"
+Import "EVGTextMeasurer.rgr"
+Import "EVGImageMeasurer.rgr"
+Import "EVGGrid.rgr"
+Import "EVGReject.rgr"
+Import "EVGTextEngine.rgr"
+Import "EVGConnector.rgr"
+
+; Where one candidate placement would put a surface, and what it costs.
+class OverlaySpot {
+    def x:double 0.0
+    def y:double 0.0
+    ; Pixels of the surface that would be off the page.
+    def over:double 0.0
+    ; Free space left between the surface and the page edge on that side.
+    def room:double 0.0
+}
+
+class EVGLayout {
+    def measurer:EVGTextMeasurer
+    ; The one text measurement + wrapping implementation. Layout must break
+    ; lines exactly where paint will, so both go through this.
+    def textEngine:EVGTextEngine (new EVGTextEngine())
+    def imageMeasurer:EVGImageMeasurer
+    def pageWidth:double 612.0
+    def pageHeight:double 792.0
+    def currentPage:int 0
+    def debug:boolean false
+    ; Overlay surfaces the pass could not place, by id and reason. An overlay
+    ; with no anchor would otherwise land at the top-left corner and read as a
+    ; styling mistake; this is what makes it a reportable one.
+    def overlayErrors:[string]
+    ; Every `anchor-name` and `#id` in the tree, collected once per layout and
+    ; read by both things that point at a box by name: the connectors and the
+    ; surfaces. See `EVGConnector.collectAnchors`.
+    def anchorNames:[string]
+    def anchorNodes:[EVGElement]
+    ; Grid track lists and placements that the engine could not honour.
+    ;
+    ; These used to go to this.log(), which is a no-op unless `debug` is on, so
+    ; `fit-content()`, row `subgrid` and a mistyped template were silently
+    ; dropped in every normal run — the page just came out with the wrong
+    ; number of columns. They are collected here instead and reported by the
+    ; tools the same way font warnings are.
+    def warnings:[string]
+    ; The document's stylesheet, parsed. Kept beside the text it came from so
+    ; a document laid out every frame parses its CSS once.
+    def docSheet@(optional):EVGStyleSheet
+    def docCssText:string ""
+    
+    Constructor () {
+        ; The process-wide default (`EVGDefaultMeasurer`): a host's own
+        ; measurer when one is installed, the table otherwise.
+        def m:EVGTextMeasurer (EVGDefaultMeasurer.measurer())
+        measurer = m
+        textEngine.setMeasurer(m)
+        def im (new SimpleImageMeasurer())
+        imageMeasurer = im
+    }
+    
+    fn setMeasurer:void (m:EVGTextMeasurer) {
+        measurer = m
+        textEngine.setMeasurer(m)
+    }
+
+    fn getTextEngine:EVGTextEngine () {
+        return textEngine
+    }
+
+    ; Refuse to measure a custom-font document with guessed widths (§4.1 rule 1).
+    fn setStrictFonts:void (s:boolean) {
+        textEngine.setStrict(s)
+    }
+    
+    fn setImageMeasurer:void (m:EVGImageMeasurer) {
+        imageMeasurer = m
+    }
+    
+    fn setPageSize:void (w:double h:double) {
+        pageWidth = w
+        pageHeight = h
+    }
+    
+    fn setDebug:void (d:boolean) {
+        debug = d
+    }
+    
+    fn log:void (msg:string) {
+        if debug {
+            print msg
+        }
+    }
+
+    ; Record something the author asked for that the engine could not do.
+    ; Deduplicated: one bad template on a repeated component would otherwise
+    ; report once per instance and bury everything else.
+    fn warn:void (msg:string) {
+        def i:int 0
+        while (i < (array_length warnings)) {
+            if ((itemAt warnings i) == msg) {
+                return
+            }
+            i = (i + 1)
+        }
+        push warnings msg
+        this.log(("  " + msg))
+    }
+
+    ; THE DOCUMENT'S OWN STYLESHEET.
+    ;
+    ; A `.evg.json` can carry one (`"css"` beside `"root"`), and this is where
+    ; it takes effect — one place rather than at every call site that loads a
+    ; document, so a tool that only knows how to lay a tree out gets the
+    ; cascade for free.
+    ;
+    ; Parsed once per text: the same document laid out again on every frame
+    ; must not re-parse a stylesheet that has not changed. Applying it again
+    ; is harmless and necessary — a rule is a value on an element, and layout
+    ; resets those.
+    ;
+    ; An inline property still wins, which is what lets the two mix: the sheet
+    ; says what a `.card` is, the node says what THIS card does differently,
+    ; and an agent's `set-prop` keeps meaning what it meant.
+    fn applyDocumentCss:void (root:EVGElement) {
+        if ((strlen root.documentCss) == 0) {
+            return
+        }
+        if (root.documentCss != docCssText) {
+            def s (new EVGStyleSheet())
+            s.parse(root.documentCss)
+            docSheet = s
+            docCssText = root.documentCss
+        }
+        if (null? docSheet) {
+            return
+        }
+        def sheet:EVGStyleSheet (unwrap docSheet)
+        ; Last pass's marks first. A rule that was edited out would otherwise
+        ; leave a property marked as the sheet's forever, and the document
+        ; would stop writing down a value it is the only record of.
+        EVGLayout.clearCssMarks(root)
+        ; The root's `theme` turns on the sheet's `.theme-<name> .class`
+        ; rules. Passing "" here made every theme-scoped rule in a document
+        ; dead: `{"theme":"dark"}` on the root parsed, round-tripped, and
+        ; styled nothing.
+        sheet.applyTree(root root.theme)
+    }
+
+    sfn clearCssMarks:void (el:EVGElement) {
+        el.clearCssMarks()
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            EVGLayout.clearCssMarks((el.getChild(i)))
+            i = (i + 1)
+        }
+    }
+
+    fn warningCount:int () {
+        return (array_length warnings)
+    }
+
+    fn warningAt:string (i:int) {
+        return (itemAt warnings i)
+    }
+    
+    fn layout:void (root:EVGElement) {
+        ; Layout the entire element tree
+        this.log("EVGLayout: Starting layout")
+        currentPage = 0
+        this.applyDocumentCss(root)
+
+        ; Start from a clean slate. `resolveUnits` refuses to run twice on the
+        ; same element — deliberately, so a percentage is not resolved against
+        ; an already-resolved parent — and it had no counterpart: nothing in the
+        ; engine called resetLayoutState(), so an element laid out ONCE kept its
+        ; resolved pixels forever, and a percentage written after that first
+        ; pass resolved to zero.
+        ;
+        ; Measured, not theorised: a slider whose thumb is placed with
+        ; `left: <n>%` sat correctly on first paint and then jumped to the far
+        ; left the moment it was dragged, because the fresh unit the controller
+        ; wrote was never resolved. Any retained tree that is laid out more than
+        ; once had the same bug; a document that is laid out once did not, which
+        ; is why it survived this long.
+        ;
+        ; A NEW PAGE SIZE is a new layout for every kept subtree too. The
+        ; root's viewport is what the last pass was given; when it differs, a
+        ; `vw` or `vh` anywhere below may mean something else, and nothing a
+        ; kept box compares — what the flow hands it — need have changed. The
+        ; stylesheet catches this for the trees it styles (a resize is a new
+        ; generation, so every element is layout-dirty); a tree with no sheet,
+        ; or one laid out without re-applying it, has only this.
+        if (root.hasLayout && ((root.viewportW != pageWidth) || (root.viewportH != pageHeight))) {
+            root.forgetLayout()
+        }
+        root.resetLayoutState()
+        
+        ; Resolve root dimensions
+        if (root.width.isSet == false) {
+            root.width = (EVGUnit.px(pageWidth))
+        }
+        if (root.height.isSet == false) {
+            root.height = (EVGUnit.px(pageHeight))
+        }
+        
+        ; The root inherits from nothing, so its own font-size has to be folded
+        ; in here or it is silently dropped. `rem` on the root itself resolves
+        ; against the initial size, which is why rootFontSize is only published
+        ; afterwards.
+        root.applyOwnFontSize()
+        root.rootFontSize = root.inheritedFontSize
+        ; THE VIEWPORT, published once and inherited from here. `vw` and `vh`
+        ; mean the page size this layout was given — which on paper is the page
+        ; AREA, because that is what the print renderers set it to: the section
+        ; less two margins. A host that wants `100vh` to mean its window says
+        ; so with `setPageSize`, which every host already calls.
+        root.viewportW = pageWidth
+        root.viewportH = pageHeight
+        root.viewportX = 0.0
+        root.viewportY = 0.0
+        ; The root has no parent to inherit a direction from, so it settles
+        ; its own. This is the switch: `direction: rtl` here and every
+        ; container below turns around with it.
+        root.applyOwnDirection(false)
+
+        ; Explicitly set root position to (0, 0)
+        ; This is important when re-laying out a page that was previously 
+        ; positioned elsewhere in a multi-page document
+        root.calculatedX = 0.0
+        root.calculatedY = 0.0
+        
+        ; Layout root at (0, 0)
+        this.layoutElement(root 0.0 0.0 pageWidth pageHeight)
+
+        ; The names first: a surface may be positioned against any box in the
+        ; tree, not only a sibling, and so may a connector.
+        clear anchorNames
+        clear anchorNodes
+        EVGConnector.collectAnchors(root anchorNames anchorNodes)
+
+        ; Then the overlays, once everything they anchor to has a rectangle.
+        clear overlayErrors
+        def anySurface:boolean (this.placeOverlaysIn(root))
+
+        ; The connectors, once every box they join has its final rectangle —
+        ; the overlay pass above is the last thing that moves one, and a line
+        ; solved before it would point at where a card used to be.
+        def connWarnings:[string] (EVGConnector.resolveWith(root anchorNames anchorNodes))
+        def cwi:int 0
+        while (cwi < (array_length connWarnings)) {
+            this.warn((itemAt connWarnings cwi))
+            cwi = (cwi + 1)
+        }
+
+        ; And where each subtree DRAWS, which is not where its box is: see
+        ; `EVGElement.paintTop`. Last, because it is a union over final
+        ; positions and the overlay pass above is the last thing that moves
+        ; one.
+        this.measurePaintBounds(root)
+
+        ; Everything `setAttribute` could not read, folded into the same list a
+        ; build already fails on. It is drained here rather than reported at
+        ; the point of parse because a parse has no idea whether anyone will
+        ; ever lay the tree out, and a warning nobody collects is the silence
+        ; this was written to end.
+        ;
+        ; The collector de-duplicates and caps itself, so this loop is bounded
+        ; by the number of DISTINCT bad declarations in the document — four,
+        ; typically, and never more than sixty-four.
+        this.drainRejects()
+
+        this.log("EVGLayout: Layout complete")
+    }
+
+    ; Move `EVGReject`'s entries into the layout's own warnings, once.
+    fn drainRejects:void () {
+        def n:int (EVGReject.noteCount())
+        if (n == 0) {
+            return
+        }
+        def i:int 0
+        while (i < n) {
+            this.warn((EVGReject.noteAt(i)))
+            i = (i + 1)
+        }
+        def total:int (EVGReject.noteTotal())
+        if (total > n) {
+            this.warn((((("… " + (to_string total)) + " rejected declarations in all, ") + (to_string n)) + " distinct"))
+        }
+    }
+
+    ; The union of an element's own box and every box beneath it, bottom-up.
+    ;
+    ; This is what `EVGDisplayList` culls against, and the reason it can cull
+    ; a subtree WITHOUT DESCENDING INTO IT — which is the whole saving. An
+    ; element's own rectangle would not do: a zero-height wrapper sits at the
+    ; top of the document while its rows are ten thousand pixels below it, and
+    ; culling on the wrapper would take the rows with it.
+    fn measurePaintBounds:void (el:EVGElement) {
+        ; A subtree the layout kept moved with its bounds; they still hold —
+        ; when they were measured since it was last laid out for real.
+        if (el.layoutSkipped && el.boundsFresh) {
+            return
+        }
+        el.boundsFresh = true
+        ; Where the first child sits relative to the box, for a kept subtree
+        ; to be moved by — see `EVGElement.kidOffX`.
+        if ((el.getChildCount()) > 0) {
+            def k0:EVGElement (el.getChild(0))
+            el.kidOffX = (k0.calculatedX - el.calculatedX)
+            el.kidOffY = (k0.calculatedY - el.calculatedY)
+        }
+        ; A degenerate box draws nothing of its own — a wrapper with no size
+        ; is a place in the tree, not a place on the page — so it does not
+        ; drag the union back to wherever it happens to sit.
+        def has:boolean ((el.calculatedWidth > 0.0) && (el.calculatedHeight > 0.0))
+        def minX:double el.calculatedX
+        def minY:double el.calculatedY
+        def maxX:double (el.calculatedX + el.calculatedWidth)
+        def maxY:double (el.calculatedY + el.calculatedHeight)
+        def started:boolean has
+        def unbounded:boolean (el.hasTransform())
+        def effect:boolean ((strlen el.surfaceEffect) > 0)
+
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            def kid:EVGElement (el.getChild(i))
+            this.measurePaintBounds(kid)
+            ; `display: none` paints nothing and nothing under it, so its
+            ; rectangle — usually a stale one, or the origin — is not part of
+            ; where this subtree draws.
+            if ((kid.isHidden()) == false) {
+                if kid.paintUnbounded {
+                    unbounded = true
+                }
+                if kid.paintHasEffect {
+                    effect = true
+                }
+                if (started == false) {
+                    minX = kid.paintLeft
+                    minY = kid.paintTop
+                    maxX = kid.paintRight
+                    maxY = kid.paintBottom
+                    started = true
+                } {
+                    if (kid.paintLeft < minX) { minX = kid.paintLeft }
+                    if (kid.paintTop < minY) { minY = kid.paintTop }
+                    if (kid.paintRight > maxX) { maxX = kid.paintRight }
+                    if (kid.paintBottom > maxY) { maxY = kid.paintBottom }
+                }
+            }
+            i = (i + 1)
+        }
+
+        el.paintLeft = minX
+        el.paintTop = minY
+        el.paintRight = maxX
+        el.paintBottom = maxY
+        el.paintUnbounded = unbounded
+        el.paintHasEffect = effect
+    }
+    
+    ; Whether the element about to be laid out sits along a ROW.
+    ;
+    ; A field rather than a parameter, and rather than reading `child.parent`,
+    ; because EVGElement deliberately has no parent back-reference: it was
+    ; write-only and, in the C++ backend, assigning `this` to a shared_ptr
+    ; field forces `enable_shared_from_this` and breaks the native build. Its
+    ; own comment says so, which is the only reason this is a field.
+    ;
+    ; The flex pass sets it before each child and puts it back afterwards. The
+    ; default is true, which is the block behaviour the root and any non-flex
+    ; parent want.
+    def layingOutAlongRow:boolean true
+
+    ; And, for a COLUMN parent, whether the cross axis shrink-wraps.
+    ;
+    ; `width: auto` on a flex item is stretch only while `align-items` is
+    ; stretch; under `center` or `flex-end` it is fit-content, which is the
+    ; difference between a breadcrumb trail centred under the label it belongs
+    ; to and one pinned to the left edge of a box it has filled.
+    ;
+    ; This engine's `alignItems` default is "flex-start" where CSS's is
+    ; "stretch", and everything built so far leans on the stretch. So only an
+    ; EXPLICIT centre or end shrinks: a container that never mentioned
+    ; `align-items` keeps exactly the behaviour it has today.
+    def columnCrossShrinks:boolean false
+
+    fn layoutElement:void (element:EVGElement parentX:double parentY:double parentWidth:double parentHeight:double) {
+        ; A subtree the app keeps — see `EVGElement.keepLayout` — with the
+        ; same inputs as last time is the same layout, moved: the flow
+        ; reads its size and baseline off it as if it had been laid out.
+        if element.keepLayout {
+            if (element.hasLayout && element.layoutClean) {
+                if ((((element.lastParentW == parentWidth) && (element.lastParentH == parentHeight))
+                     && (element.lastFlex == element.hasFlexWidth)) && ((element.lastFlexW == element.calculatedFlexWidth) && (element.lastFlexH == element.calculatedFlexHeight))) {
+                    ; The box is at (parentX, parentY): the flow wrote it there
+                    ; before this call, or means it at the origin to move it
+                    ; after. What is under it follows by the difference between
+                    ; where the first child is and where it sat relative to the
+                    ; box when the subtree was measured; the bounds, which were
+                    ; measured with the children, follow by the same.
+                    element.calculatedX = parentX
+                    element.calculatedY = parentY
+                    def n:int (element.getChildCount())
+                    if (n > 0) {
+                        def k0:EVGElement (element.getChild(0))
+                        def dx:double ((parentX + element.kidOffX) - k0.calculatedX)
+                        def dy:double ((parentY + element.kidOffY) - k0.calculatedY)
+                        if ((dx != 0.0) || (dy != 0.0)) {
+                            def i:int 0
+                            while (i < n) {
+                                def kid:EVGElement (element.getChild(i))
+                                kid.moveSubtree(dx dy)
+                                i = (i + 1)
+                            }
+                            element.paintLeft = (element.paintLeft + dx)
+                            element.paintRight = (element.paintRight + dx)
+                            element.paintTop = (element.paintTop + dy)
+                            element.paintBottom = (element.paintBottom + dy)
+                        }
+                    } {
+                        element.boundsFresh = false
+                    }
+                    element.layoutSkipped = true
+                    return
+                }
+            }
+            ; Laid out for real: what the root's reset left in place goes,
+            ; but not what the parent has just handed down — the flex width,
+            ; the flex height, and the box's place, which the flow wrote before
+            ; this call.
+            def flex:boolean element.hasFlexWidth
+            def flexW:double element.calculatedFlexWidth
+            def flexHSet:boolean element.hasFlexHeight
+            def flexH:double element.calculatedFlexHeight
+            def bx:double element.calculatedX
+            def by:double element.calculatedY
+            element.resetLayoutNow()
+            element.hasFlexWidth = flex
+            element.calculatedFlexWidth = flexW
+            element.hasFlexHeight = flexHSet
+            element.calculatedFlexHeight = flexH
+            element.calculatedX = bx
+            element.calculatedY = by
+        }
+        element.hasLayout = true
+        element.layoutSkipped = false
+        element.paintStamp = (element.paintStamp + 1)
+        element.lastParentW = parentWidth
+        element.lastParentH = parentHeight
+        element.lastFlex = element.hasFlexWidth
+        element.lastFlexW = element.calculatedFlexWidth
+        element.lastFlexH = element.calculatedFlexHeight
+        element.resolveUnits(parentWidth parentHeight)
+        ; `display: none` has no box and lays out nothing under it.
+        if (element.isHidden()) {
+            element.calculatedX = parentX
+            element.calculatedY = parentY
+            element.calculatedWidth = 0.0
+            element.calculatedHeight = 0.0
+            return
+        }
+        
+        ; Calculate element dimensions. Same order as `layoutChildren`: a width
+        ; the flex pass decided wins over the declared one, because it IS the
+        ; declared one after shrinking.
+        def width:double parentWidth
+        if element.width.isSet {
+            width = element.width.pixels
+        }
+        if element.hasFlexWidth {
+            width = element.calculatedFlexWidth
+        }
+        
+        ; Text leaf nodes without explicit width shrink-wrap to measured content
+        if ((element.width.isSet == false) && (element.hasFlexWidth == false)) {
+            def textContent:string element.textContent
+            if ((strlen textContent) > 0) {
+                if ((element.getChildCount()) == 0) {
+                    def fontSize:double element.inheritedFontSize
+                    if element.fontSize.isSet {
+                        fontSize = element.fontSize.pixels
+                    }
+                    if (fontSize <= 0.0) {
+                        fontSize = 14.0
+                    }
+                    def contentW:double (textEngine.maxLineWidthSpaced(textContent (element.effectiveFontFamily()) fontSize element.letterSpacing))
+                    def measuredW:double (contentW + element.box.paddingLeftPx + element.box.paddingRightPx + (element.box.borderWidthPx * 2.0))
+                    if (measuredW < parentWidth) {
+                        width = measuredW
+                    }
+                }
+            } {
+                ; A width-less flex CONTAINER shrink-wraps too — but only in a
+                ; ROW. This is `width: auto` in CSS and it resolves two
+                ; different ways: fit-content for an item laid out along a row,
+                ; and STRETCH for one in a column, where the cross axis fills
+                ; because `align-items` defaults to stretch.
+                ;
+                ; The first version of this shrank in both, and the damage was
+                ; exactly what the rule predicts: in a vertical panel group,
+                ; every panel collapsed to the width of the label inside it and
+                ; the divider collapsed to the width of its grip. Correct on
+                ; the axis it was written for and wrong on the other one.
+                if (element.display == "flex") {
+                    if (this.crossAxisFits(element)) {
+                        def intrinsic:double (this.intrinsicWidth(element false))
+                        if (intrinsic > 0.0) {
+                            if (intrinsic < parentWidth) {
+                                width = intrinsic
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        
+        def height:double 0.0
+        def autoHeight:boolean true
+        
+        ; Special handling for Page elements - they always use page size
+        if ((element.tagName == "Page") || (element.tagName == "page")) {
+            if (element.width.isSet == false) {
+                width = pageWidth
+            }
+            if (element.height.isSet == false) {
+                height = pageHeight
+                autoHeight = false
+            }
+        }
+        if element.height.isSet {
+            height = element.height.pixels
+            autoHeight = false
+        }
+        ; Column-axis flex grow / row alignItems:stretch: EVGLayout resolved a
+        ; target height for this child (height not explicitly set) — adopt it.
+        if (element.height.isSet == false) {
+            if (element.calculatedFlexHeight > 0.0) {
+                height = element.calculatedFlexHeight
+                autoHeight = false
+            }
+        }
+        ; Column-axis flex shrink squeezed a declared height: the squeezed one
+        ; wins, as `hasFlexWidth` does for the width.
+        if element.hasFlexHeight {
+            height = element.calculatedFlexHeight
+            autoHeight = false
+        }
+
+        ; For image elements, calculate dimensions based on aspect ratio
+        ; IMPORTANT: If the parent has fixed dimensions and the image should fill the parent,
+        ; use the parent dimensions as the container. The objectFit property handles 
+        ; how the actual image content is scaled within this container.
+        if ((element.tagName == "image") || (element.tagName == "Image") || (element.tagName == "img")) {
+            def imgSrc:string element.src
+            if ((strlen imgSrc) > 0) {
+                def dims:EVGImageDimensions (imageMeasurer.getImageDimensions(imgSrc))
+                if dims.isValid {
+                    ; Store source dimensions for objectFit calculations in renderer
+                    element.sourceWidth = (to_double dims.width)
+                    element.sourceHeight = (to_double dims.height)
+                    
+                    if (element.width.isSet && (element.height.isSet == false)) {
+                        ; Width is set but height is not
+                        ; If parent has a fixed height, use it as the container height
+                        ; This matches HTML behavior where image container fills parent
+                        if (parentHeight > 0.0) {
+                            height = parentHeight
+                            if debug {
+                                this.log(("  Image container using parent height: " + (to_string width) + "x" + (to_string height)))
+                            }
+                        } {
+                            ; No parent height constraint - calculate from aspect ratio
+                            height = (width / dims.aspectRatio)
+                            if debug {
+                                this.log(("  Image aspect ratio: " + (to_string dims.aspectRatio) + " -> height=" + (to_string height)))
+                            }
+                        }
+                        autoHeight = false
+                    }
+                    if ((element.width.isSet == false) && element.height.isSet) {
+                        ; Height is set but width is not
+                        ; If parent has a fixed width, use it as the container width
+                        if (parentWidth > 0.0) {
+                            width = parentWidth
+                            if debug {
+                                this.log(("  Image container using parent width: " + (to_string width) + "x" + (to_string height)))
+                            }
+                        } {
+                            ; No parent width constraint - calculate from aspect ratio
+                            width = (height * dims.aspectRatio)
+                            if debug {
+                                this.log(("  Image aspect ratio: " + (to_string dims.aspectRatio) + " -> width=" + (to_string width)))
+                            }
+                        }
+                    }
+                    if ((element.width.isSet == false) && (element.height.isSet == false)) {
+                        ; Neither set - if parent has dimensions, fill parent (like 100% 100%)
+                        if ((parentWidth > 0.0) && (parentHeight > 0.0)) {
+                            width = parentWidth
+                            height = parentHeight
+                            if debug {
+                                this.log(("  Image filling parent: " + (to_string width) + "x" + (to_string height)))
+                            }
+                        } {
+                            ; No parent constraints - use natural size (capped at parent)
+                            width = (to_double dims.width)
+                            height = (to_double dims.height)
+                            if (width > parentWidth) {
+                                if (parentWidth > 0.0) {
+                                    def scale:double (parentWidth / width)
+                                    width = parentWidth
+                                    height = (height * scale)
+                                }
+                            }
+                            if debug {
+                                this.log(("  Image natural size: " + (to_string width) + "x" + (to_string height)))
+                            }
+                        }
+                        autoHeight = false
+                    }
+                }
+            }
+        }
+        
+        ; Apply min/max constraints — MAX FIRST, so a min that contradicts it
+        ; wins. See `clampMain`; this is the same rule for a box that is not a
+        ; flex item, and it used to be the other way round here too.
+        if element.maxWidth.isSet {
+            if (width > element.maxWidth.pixels) {
+                width = element.maxWidth.pixels
+            }
+        }
+        if element.minWidth.isSet {
+            if (width < element.minWidth.pixels) {
+                width = element.minWidth.pixels
+            }
+        }
+        
+        ; A BOX HAS NO NEGATIVE SIDE. `width: -40%` is not a width — CSS throws
+        ; the declaration away — and a box that keeps the number draws MIRRORED
+        ; through its own left edge, which is how a progress bar reading "week
+        ; -41 of 104" came out as a full blue bar instead of an empty one. The
+        ; app's arithmetic is the app's; what this owes it is zero rather than
+        ; a picture of a number nobody can see is wrong.
+        if (width < 0.0) {
+            width = 0.0
+        }
+        if (height < 0.0) {
+            height = 0.0
+        }
+
+        ; Store calculated dimensions (before content layout for children to reference)
+        element.calculatedWidth = width
+        element.calculatedInnerWidth = (element.box.getInnerWidth(width))
+        
+        ; If height is explicitly set (not auto), pre-calculate inner height for children
+        ; This allows children with height="100%" to resolve correctly
+        element.hasDefiniteHeight = (autoHeight == false)
+        if (autoHeight == false) {
+            element.calculatedHeight = height
+            element.calculatedInnerHeight = (element.box.getInnerHeight(height))
+        }
+        
+        ; Handle absolute positioning
+        if element.isAbsolute {
+            this.layoutAbsolute(element parentWidth parentHeight)
+        }
+        
+        ; Layout children and get content height
+        def childCount:int (element.getChildCount())
+        def contentHeight:double 0.0
+        
+        if (childCount > 0) {
+            contentHeight = (this.layoutChildren(element))
+            ; Right to left, after the fact.
+            ;
+            ; Doing it this way rather than inside the placement loops is a
+            ; deliberate choice and it is the reason this is ~30 lines instead
+            ; of a rewrite of both engines. Every way a container can place a
+            ; child along the horizontal axis — flex row, flex row-reverse,
+            ; wrapping, `justify-content` in all its values, `gap`, grid
+            ; tracks, named grid lines, `dense` packing — ends with children
+            ; sitting at x positions inside a content box. Reflecting those
+            ; positions about that box turns ALL of it around at once, and
+            ; correctly: reversed order, packed from the right, the first grid
+            ; column rightmost. Anything added to either engine later is
+            ; mirrored the day it lands, without knowing this exists.
+            this.mirrorChildren(element)
+
+            ; fit-content, resolved now that there is content to fit.
+            ;
+            ; The children were placed against the parent's width, because that
+            ; is what a width-less box gets in EVG, so this measures what they
+            ; actually occupy and lays them out AGAIN inside the smaller box.
+            ; The second pass is not optional: justify-content, text-align and
+            ; every percentage below aligned against the wider box, and keeping
+            ; those positions while narrowing the box is how a "fixed" layout
+            ; ends up subtly wrong instead of obviously wrong.
+            if (element.width.unitType == 6) {
+                def fitW:double (this.contentExtent(element))
+                if ((fitW > 0.0) && (fitW < element.calculatedWidth)) {
+                    element.calculatedWidth = fitW
+                    element.calculatedInnerWidth = (element.box.getInnerWidth(fitW))
+                    def kr:int 0
+                    while (kr < childCount) {
+                        def kc:EVGElement (element.getChild(kr))
+                        kc.resetLayoutState()
+                        kr = (kr + 1)
+                    }
+                    contentHeight = (this.layoutChildren(element))
+                    this.mirrorChildren(element)
+                }
+            }
+        } {
+            ; No children - check if element has text content
+            def textContent:string element.textContent
+            if ((strlen textContent) > 0) {
+                ; Element has text content (View with text, span, text, Label, etc.)
+                def fontSize:double element.inheritedFontSize
+                if element.fontSize.isSet {
+                    fontSize = element.fontSize.pixels
+                }
+                if (fontSize <= 0.0) {
+                    fontSize = 14.0
+                }
+                
+                ; Get line height
+                ; `line-height: normal` — zero here means nobody asked for a
+                ; number — is the FACE's own line box, so it is asked of the
+                ; thing that knows about faces. It used to be a flat 1.2, which
+                ; is a number people type and not one a browser computes: the
+                ; sans fallback's normal is 1.15em and monospace's is 1.164.
+                ; One answer for the line box, shared with the display list:
+                ; `line-height` is a number, a length or `normal`, and only
+                ; `EVGElement.lineBoxFor` knows which. `normal` is the FACE's
+                ; box and so comes from the engine that knows about faces.
+                def lineSpacing:double (element.lineBoxFor(fontSize
+                    (textEngine.lineHeightFor((element.effectiveFontFamily()) fontSize))))
+                
+                ; Line count comes from the shared wrap, not a second estimate,
+                ; so the height reserved here matches the lines paint will draw.
+                ; THE SAME WIDTH THE PAINTER BREAKS AT. `getInnerWidth` takes
+                ; off the border as well as the padding, and it is what
+                ; `EVGDisplayList` hands the breaker; this took off only the
+                ; padding. A bordered text element was therefore counted at
+                ; one width here and broken at another there — the height was
+                ; reserved for the wrap the layout imagined and the painter
+                ; drew a different one, which is a box the last line falls out
+                ; of.
+                def availableWidth:double (element.wrapWidth((element.box.getInnerWidth(width))))
+                def lineCount:int (textEngine.lineCountSpaced(textContent (element.effectiveFontFamily()) fontSize availableWidth element.letterSpacing))
+
+                contentHeight = (lineSpacing * (to_double lineCount))
+                ; And the gaps between paragraphs, which are not line boxes:
+                ; reserving them here is what keeps the painter's last line
+                ; inside the box it was sized for.
+                contentHeight = (contentHeight + (textEngine.paragraphLeading(textContent (element.effectiveFontFamily()) fontSize availableWidth element.letterSpacing element.paragraphSpacing)))
+
+                ; Baseline of the FIRST line, measured from this element's top
+                ; border edge, for align-items: baseline. The glyphs sit inside
+                ; the line box, so half the leading is above the ascent.
+                ;
+                ; THE HALF-LEADING MAY BE NEGATIVE, and it used to be clamped at
+                ; zero. `line-height: 1` gives a line box smaller than the face
+                ; — 1.0em against 1.117 — and CSS lets the glyphs hang out of it
+                ; equally top and bottom rather than pushing them down to fit.
+                ; Measured: at line-height 1 the browser puts the baseline at
+                ; 0.846em, which is exactly -0.0585 + 0.905. The clamp made that
+                ; 0.905 and moved every tightly-led line down by the difference.
+                def metrics:EVGTextMetrics (textEngine.measureRunSpaced(textContent (element.effectiveFontFamily()) fontSize element.letterSpacing))
+                def leading:double ((lineSpacing - (metrics.ascent + metrics.descent)) / 2.0)
+                ; `textShiftY` is written below, once the height is final —
+                ; it is a share of the slack and there is no slack until then
+                ; — so the baseline is completed there as well.
+                element.calculatedBaseline = (element.box.paddingTopPx + element.box.borderWidthPx + leading + metrics.ascent)
+                element.calculatedDescent = metrics.descent
+                element.hasBaseline = true
+            }
+        }
+        
+        ; Finalize height
+        if autoHeight {
+            ; Add padding and border
+            height = contentHeight + element.box.paddingTopPx + element.box.paddingBottomPx + (element.box.borderWidthPx * 2.0)
+        }
+        
+        ; A border box cannot be smaller than its own padding and border. CSS
+        ; grows the box in that case rather than producing a negative content
+        ; box; EVG used to keep the declared size and collapse the children.
+        def vChrome:double (element.box.getVerticalChrome())
+        if (height < vChrome) {
+            height = vChrome
+        }
+        def hChrome:double (element.box.getHorizontalChrome())
+        if (width < hChrome) {
+            width = hChrome
+        }
+
+        ; Apply min/max height constraints — max first, min second, for the
+        ; reason given on the width above.
+        if element.maxHeight.isSet {
+            if (height > element.maxHeight.pixels) {
+                height = element.maxHeight.pixels
+            }
+        }
+        if element.minHeight.isSet {
+            if (height < element.minHeight.pixels) {
+                height = element.minHeight.pixels
+            }
+        }
+        
+        element.calculatedHeight = height
+        element.calculatedInnerHeight = (element.box.getInnerHeight(height))
+        ; THE ANONYMOUS FLEX ITEM. An element that is a flex container and
+        ; carries text of its own does not lay that text out as a block: CSS
+        ; wraps it in an item, and `align-items` (across a row) or
+        ; `justify-content` (along a column) then places it. This is the pill
+        ; — `display:flex; align-items:center` with the label as the element's
+        ; own text — whose label sat against the top edge because the line box
+        ; started at the content top and nothing ever asked where it should
+        ; go. Written once here; `EVGElement.textShiftY` says the rest.
+        element.textShiftY = 0.0
+        if ((strlen element.textContent) > 0) {
+            if ((element.getChildCount()) == 0) {
+                if (element.display == "flex") {
+                    def slack:double (element.calculatedInnerHeight - contentHeight)
+                    if (slack > 0.0) {
+                        ; A row's cross axis is the vertical one; a column's
+                        ; main axis is.
+                        def how@(mutable):string element.alignItems
+                        if ((element.flexDirection == "column") || (element.flexDirection == "column-reverse")) {
+                            how = element.justifyContent
+                        }
+                        if ((how == "center") || (how == "safe center")) {
+                            element.textShiftY = (slack / 2.0)
+                        }
+                        if ((how == "flex-end") || (how == "end")) {
+                            element.textShiftY = slack
+                        }
+                    }
+                }
+            }
+            if (element.hasBaseline && (element.textShiftY != 0.0)) {
+                element.calculatedBaseline = (element.calculatedBaseline + element.textShiftY)
+            }
+        }
+        element.calculatedPage = currentPage
+        element.isLayoutComplete = true
+
+        ; A container inherits the baseline of its first in-flow child (CSS
+        ; "first baseline"), so a Label wrapped in a View still aligns.
+        if ((element.hasBaseline == false) && (childCount > 0)) {
+            this.inheritBaselineFromFirstChild(element)
+        }
+
+        ; --- SCROLLING --------------------------------------------------------
+        ;
+        ; The last thing that happens to an element, and it has to be: the
+        ; extents are measured from where the children ENDED UP, so this runs
+        ; after every one of them is placed. `layoutChildren` has already been
+        ; through the whole subtree by the time control gets back here.
+        if (element.clipsContent()) {
+            this.applyScroll(element)
+        }
+        
+        if debug {
+            this.log(("  Laid out " + element.tagName + " id=" + element.id + " at (" + (to_string element.calculatedX) + "," + (to_string element.calculatedY) + ") size=" + (to_string width) + "x" + (to_string height)))
+        }
+    }
+    
+    ; What a scroll container owes: how big its content is, and where the
+    ; content currently sits.
+    ;
+    ; The offset is applied as a TRANSLATION of the placed subtree rather than
+    ; as an origin the flow is run from. That is not a shortcut. The flow has
+    ; to run at the content's natural size for the extent to mean anything —
+    ; measure first, then move — and running it from a shifted origin would
+    ; make the extent a function of the scroll position, which is how a
+    ; scrollbar ends up changing size as you drag it.
+    ;
+    ; EVERYTHING inside moves, absolutely positioned children and overlay
+    ; surfaces alike. That is what a browser does: an absolute box is
+    ; positioned against this one, so it belongs to its content, and a dropdown
+    ; opened from a row inside a scrolled panel travels with the row. Only
+    ; `position: fixed` escapes — it is furniture over the viewport rather than
+    ; content, and `moveSubtreeUnfixed` is the walk that steps over it.
+    ;
+    ; It reuses the mover the RTL mirror already had. One function that walks a
+    ; placed subtree and adds an offset to it is enough; a second one would be
+    ; two places for the same rule to be got wrong.
+    ; How far the content reaches, measured from where the children ended up.
+    ; Separate from `applyScroll` because the overlay pass has to ask the
+    ; question again after it has resized a surface, WITHOUT translating
+    ; anything a second time.
+    fn measureScrollExtent:void (el:EVGElement) {
+        def innerX:double (el.calculatedX + el.box.borderWidthPx + el.box.paddingLeftPx)
+        def innerY:double (el.calculatedY + el.box.borderWidthPx + el.box.paddingTopPx)
+        def w:double 0.0
+        def h:double 0.0
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            def kid:EVGElement (el.getChild(i))
+            def right:double ((kid.calculatedX + kid.calculatedWidth) - innerX)
+            def bottom:double ((kid.calculatedY + kid.calculatedHeight) - innerY)
+            if (right > w) {
+                w = right
+            }
+            if (bottom > h) {
+                h = bottom
+            }
+            i = (i + 1)
+        }
+        ; PADDING BOX, like the DOM: the content extent plus the paddings on
+        ; both sides. Measured, not assumed — eight 60-pixel rows in a box with
+        ; 10 of padding gives the browser 500.
+        el.scrollWidth = ((w + el.box.paddingLeftPx) + el.box.paddingRightPx)
+        el.scrollHeight = ((h + el.box.paddingTopPx) + el.box.paddingBottomPx)
+    }
+
+    fn applyScroll:void (el:EVGElement) {
+        this.measureScrollExtent(el)
+
+        ; Clamped, the way a browser clamps `scrollTop`: an application that
+        ; asks to scroll past the end has asked for the end. Doing it here and
+        ; not in the setter is what makes it correct — how far there is to go
+        ; is not known until the content has been measured, and it changes
+        ; every time the content does.
+        def maxY:double (el.maxScrollTop())
+        if (el.scrollTop > maxY) {
+            el.scrollTop = maxY
+        }
+        if (el.scrollTop < 0.0) {
+            el.scrollTop = 0.0
+        }
+        def maxX:double (el.maxScrollLeft())
+        if (el.scrollLeft > maxX) {
+            el.scrollLeft = maxX
+        }
+        if (el.scrollLeft < 0.0) {
+            el.scrollLeft = 0.0
+        }
+
+        ; Where the boxes now are, which is what `scrollOnly` moves FROM.
+        ; Written whether or not anything is translated: an unscrolled
+        ; container has applied zero, and that is a fact about it, not the
+        ; absence of one.
+        el.appliedScrollTop = el.scrollTop
+        el.appliedScrollLeft = el.scrollLeft
+
+        if ((el.scrollTop == 0.0) && (el.scrollLeft == 0.0)) {
+            return
+        }
+        def j:int 0
+        while (j < (el.getChildCount())) {
+            def moved:EVGElement (el.getChild(j))
+            if (moved.isFixedPosition()) {
+            } {
+                moved.moveSubtreeUnfixed((0.0 - el.scrollLeft) (0.0 - el.scrollTop))
+            }
+            j = (j + 1)
+        }
+    }
+
+    ; --- SCROLLING WITHOUT LAYING OUT -----------------------------------------
+    ;
+    ; A SCROLL DOES NOT CHANGE A LAYOUT. `applyScroll` above lays the content
+    ; out as if nothing were scrolled and then TRANSLATES the subtree by
+    ; -scrollTop, so two scroll positions of the same document differ by
+    ; exactly that translate: every width, every line break, every box is the
+    ; same at the top of the page as at the bottom.
+    ;
+    ; Running the whole layout again to arrive at that translate is what made
+    ; scrolling `gallery/realtrainer` with a real training diary in it slow
+    ; enough to see. Every wheel event measured every string in the document
+    ; and broke every paragraph into lines again — seconds of `measureText` and
+    ; `breakLines` per frame in the profile — to compute, character for
+    ; character, what it had computed on the frame before. On a phone the page
+    ; simply stopped moving.
+    ;
+    ; This moves each scrolled subtree by the DIFFERENCE between where it is
+    ; and where the new offset puts it, and touches nothing else. Call it when
+    ; NOTHING BUT `scrollTop`/`scrollLeft` HAS CHANGED; anything that changes
+    ; content, styles, fonts or the viewport needs the real `layout` again,
+    ; because the extents this clamps against were measured by it.
+    fn scrollOnly:void (root:EVGElement) {
+        this.scrollOnlyWalk(root)
+    }
+
+    ; The same, for ONE container the caller knows it scrolled — no walk to
+    ; find it. A container inside it that scrolls on its own is not touched:
+    ; its offset did not change, and its boxes move with the rest.
+    fn scrollOnlyFrom:void (el:EVGElement) {
+        if ((el.clipsContent()) == false) {
+            return
+        }
+        this.clampScroll(el)
+        def dy:double (el.appliedScrollTop - el.scrollTop)
+        def dx:double (el.appliedScrollLeft - el.scrollLeft)
+        if ((dx == 0.0) && (dy == 0.0)) {
+            return
+        }
+        def j:int 0
+        while (j < (el.getChildCount())) {
+            this.shiftNear((el.getChild(j)) dx dy el)
+            j = (j + 1)
+        }
+        el.appliedScrollTop = el.scrollTop
+        el.appliedScrollLeft = el.scrollLeft
+    }
+
+    ; How far from a scroll container's box, in its own heights, a row is
+    ; still moved for real by `scrollOnly`. Rows beyond it are owed the move
+    ; instead — `EVGElement.shiftDx` — and paid when they come within it or
+    ; when something descends into them. Wider than the display list's
+    ; overscan in either direction, so a row the list is about to draw has
+    ; already been moved rather than settled on the way in.
+    def nearHeights:double 3.0
+
+    ; Move a scrolled subtree the lazy way: the node's OWN box moves now —
+    ; that is what the culling and the hit test look at — and the move goes
+    ; on down only while the subtree is near the clip. A far node is left
+    ; owing the move to its children (`EVGElement.shiftDx`), and a node that
+    ; was owed one and has come near pays it together with this one. On a
+    ; document of a thousand rows a frame touches the rows near the viewport
+    ; and one node per row elsewhere, not every box in the document.
+    fn shiftNear:void (kid:EVGElement dx:double dy:double clip:EVGElement) {
+        ; A FIXED BOX IS NOT SCROLLED, here either. `applyScroll` steps over it
+        ; on a full layout and this is the incremental path; a rule kept in one
+        ; of the two is a rule that holds until the frame after the first one.
+        if (kid.isFixedPosition()) {
+            return
+        }
+        kid.moveSelf(dx dy)
+        if (this.nearClip(kid clip)) {
+            def tx:double (kid.shiftDx + dx)
+            def ty:double (kid.shiftDy + dy)
+            kid.shiftDx = 0.0
+            kid.shiftDy = 0.0
+            def i:int 0
+            def n:int (kid.getChildCount())
+            while (i < n) {
+                this.shiftNear((kid.getChild(i)) tx ty clip)
+                i = (i + 1)
+            }
+            return
+        }
+        kid.shiftDx = (kid.shiftDx + dx)
+        kid.shiftDy = (kid.shiftDy + dy)
+    }
+
+    ; Is this subtree within reach of the clip box, grown by `nearHeights`?
+    ; A subtree whose drawn output is not its boxes is always near: nothing
+    ; here can say where it will be looked at.
+    fn nearClip:boolean (kid:EVGElement el:EVGElement) {
+        if kid.paintUnbounded {
+            return true
+        }
+        def margin:double (el.calculatedHeight * nearHeights)
+        if (kid.paintBottom < (el.calculatedY - margin)) {
+            return false
+        }
+        if (kid.paintTop > ((el.calculatedY + el.calculatedHeight) + margin)) {
+            return false
+        }
+        def marginX:double (el.calculatedWidth * nearHeights)
+        if (kid.paintRight < (el.calculatedX - marginX)) {
+            return false
+        }
+        if (kid.paintLeft > ((el.calculatedX + el.calculatedWidth) + marginX)) {
+            return false
+        }
+        return true
+    }
+
+    ; The clamp alone, for a container whose offset was just written: what
+    ; `scrollOnly` would do to it first, without the walk that moves the
+    ; boxes. A host that gets six pointer reports between two frames clamps
+    ; six times — cheap, and it is what makes "did the page move" and the
+    ; offset it reads back right at once — and moves the subtree once, when
+    ; the frame asks for the layout.
+    fn clampScroll:void (el:EVGElement) {
+        if ((el.clipsContent()) == false) {
+            return
+        }
+        ; The same clamp `applyScroll` does, against the extents it
+        ; measured. They are still right: the content did not move.
+        def maxY:double (el.maxScrollTop())
+        if (el.scrollTop > maxY) {
+            el.scrollTop = maxY
+        }
+        if (el.scrollTop < 0.0) {
+            el.scrollTop = 0.0
+        }
+        def maxX:double (el.maxScrollLeft())
+        if (el.scrollLeft > maxX) {
+            el.scrollLeft = maxX
+        }
+        if (el.scrollLeft < 0.0) {
+            el.scrollLeft = 0.0
+        }
+    }
+
+    fn scrollOnlyWalk:void (el:EVGElement) {
+        if (el.clipsContent()) {
+            this.scrollOnlyFrom(el)
+        }
+        def i:int 0
+        while (i < (el.getChildCount())) {
+            def kid:EVGElement (el.getChild(i))
+            ; A subtree still owed a move is far from any viewport: nothing
+            ; in it is scrolling, so there is nothing to clamp in it.
+            if ((kid.shiftDx == 0.0) && (kid.shiftDy == 0.0)) {
+                this.scrollOnlyWalk(kid)
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; What a flex item starts from on the main axis before it grows or shrinks.
+    ; A stated `flex-basis` REPLACES `width` here, which is what CSS says and
+    ; what lets `flex: 0 0 120px` mean the same as `width: 120px` — see the
+    ; note in the basis branch of the row pass.
+    fn hasBaseMain:boolean (c:EVGElement) {
+        return (c.flexBasis.isSet || c.width.isSet)
+    }
+
+    fn baseMain:double (c:EVGElement) {
+        if c.flexBasis.isSet {
+            return c.flexBasis.pixels
+        }
+        return c.width.pixels
+    }
+
+    ; The cross-axis alignment that applies to ONE item: its own `align-self`
+    ; when it stated one, otherwise the container's `align-items`.
+    ;
+    ; `realtrainer.css` has been writing `align-self` since before the property
+    ; existed here, which is the usual way a gap gets found: somebody assumed
+    ; the CSS they know, and the declaration went nowhere.
+    fn crossAlignOf:string (child:EVGElement parentAlign:string) {
+        if ((strlen child.alignSelf) > 0) {
+            return child.alignSelf
+        }
+        return parentAlign
+    }
+
+    ; A main-axis size, clamped the way CSS clamps it.
+    ;
+    ; THE ORDER IS THE WHOLE POINT. `max-width` is applied first and
+    ; `min-width` second, so when the two conflict the MINIMUM wins:
+    ; `width: 50px; min-width: 200px; max-width: 100px` is 200 in every
+    ; browser. This engine applied them the other way round and got 100 — a
+    ; box that obeyed a maximum it was told to ignore, which shows up as a
+    ; panel that will not open to the size its own rule demands.
+    ;
+    ; `min-width: auto` on a flex item is NOT zero: it is the item's
+    ; min-content size, and that is what the `else` branch computes. The
+    ; exception is a clipping box, which is a statement that the content need
+    ; not fit — see the long note in the grow loop, which this replaced.
+    fn clampMain:double (c:EVGElement w:double) {
+        def out:double w
+        if c.maxWidth.isSet {
+            if (out > c.maxWidth.pixels) {
+                out = c.maxWidth.pixels
+            }
+        }
+        if c.minWidth.isSet {
+            if (out < c.minWidth.pixels) {
+                out = c.minWidth.pixels
+            }
+        } {
+            if ((c.clipsContent()) == false) {
+                def autoMin:double (this.minIntrinsicWidthOf(c))
+                if (out < autoMin) {
+                    out = autoMin
+                }
+            }
+        }
+        return out
+    }
+
+    ; An out-of-flow child — `position: fixed`, a `Layer`, or an absolutely
+    ; positioned box — sized and placed against this parent.
+    ;
+    ; Lifted out of `layoutChildren` because THE GRID NEVER RAN IT. `layoutGrid`
+    ; collects the in-flow items and skips `isAbsolute` ones, correctly, and then
+    ; nothing laid them out at all: an absolute child of a `display: grid`
+    ; container kept zero size at (0,0), so a box vanished and a `path` drew its
+    ; own coordinates in the page's top-left corner with `left`/`top` dropped.
+    ; The same child under a flex or block parent was placed correctly, which is
+    ; what made it look like a `path` bug rather than a grid one.
+    fn layoutOutOfFlowChild:void (parent:EVGElement child:EVGElement innerWidth:double innerHeight:double startX:double startY:double alongRow:boolean) {
+            ; A FIXED BOX IS POSITIONED AGAINST THE VIEWPORT, not against
+            ; this parent: its `top`, `right`, `bottom` and `left` and every
+            ; percentage inside it resolve against the page, and its origin
+            ; is the page's own (0,0) — so unlike an absolute child it is
+            ; NOT translated to the parent's content corner afterwards.
+            ; `applyScroll` then leaves it alone, which is the whole
+            ; difference between the two modes.
+            if (child.isFixedPosition()) {
+                child.unitsResolved = false
+                child.resolveUnits(child.viewportW child.viewportH)
+                def wasRowF:boolean layingOutAlongRow
+                def wasShrinkF:boolean columnCrossShrinks
+                layingOutAlongRow = alongRow
+                columnCrossShrinks = (this.crossShrinksUnder(parent))
+                this.layoutElement(child 0.0 0.0 child.viewportW child.viewportH)
+                layingOutAlongRow = wasRowF
+                columnCrossShrinks = wasShrinkF
+                ; The viewport's own origin. It is (0,0) for a page, so
+                ; this is a no-op for every host that has one viewport;
+                ; a stage with a frame per width moves the box onto its
+                ; frame, the same one translation the absolute branch
+                ; below makes for its own reason.
+                if ((child.viewportX != 0.0) || (child.viewportY != 0.0)) {
+                    this.translateSubtree(child child.viewportX child.viewportY)
+                }
+                return
+            }
+            ; Layer elements use parent's full dimensions, not inner dimensions
+            if ((child.tagName == "layer") || (child.tagName == "Layer")) {
+                ; Re-resolve Layer dimensions with parent's full width/height
+                child.unitsResolved = false
+                child.resolveUnits(parent.calculatedWidth parent.calculatedHeight)
+                
+                ; Set Layer's calculated dimensions to parent's full size
+                child.calculatedWidth = parent.calculatedWidth
+                child.calculatedHeight = parent.calculatedHeight
+                child.calculatedInnerWidth = (child.box.getInnerWidth(child.calculatedWidth))
+                child.calculatedInnerHeight = (child.box.getInnerHeight(child.calculatedHeight))
+                
+                ; Ensure height.isSet is true for alignment calculations.
+                ; Replace the unit rather than flipping the one that is
+                ; there: an unset height is the shared unset unit.
+                if child.height.isSet {
+                    child.height.pixels = child.calculatedHeight
+                } {
+                    child.height = (EVGUnit.px(child.calculatedHeight))
+                }
+                
+                this.layoutAbsolute(child parent.calculatedWidth parent.calculatedHeight)
+                ; Layer positions relative to parent's edge (0,0), not content area
+                child.calculatedX = child.calculatedX + parent.calculatedX
+                child.calculatedY = child.calculatedY + parent.calculatedY
+            } {
+                ; An absolutely positioned element is still an element: it
+                ; has a size. Nothing computed one — this branch called
+                ; layoutAbsolute, which sets x and y and nothing else — so
+                ; calculatedWidth stayed 0 for every one of them. A label
+                ; then had no box for text-align to align in, a rotation
+                ; "about its centre" turned about its left edge instead,
+                ; and a background painted nothing.
+                ;
+                ; So lay it out the way any other element is laid out, and
+                ; move the finished subtree into place afterwards: the
+                ; positions inside it are relative to the element, so one
+                ; translation carries all of them.
+                def wasRow0:boolean layingOutAlongRow
+                def wasShrink0:boolean columnCrossShrinks
+                layingOutAlongRow = alongRow
+                columnCrossShrinks = (this.crossShrinksUnder(parent))
+                this.layoutElement(child 0.0 0.0 innerWidth innerHeight)
+                layingOutAlongRow = wasRow0
+                columnCrossShrinks = wasShrink0
+                this.translateSubtree(child startX startY)
+            }
+    }
+
+    fn layoutChildren:double (parent:EVGElement) {
+        ; Layout all children using flow algorithm
+        ; Returns total content height
+        
+        def childCount:int (parent.getChildCount())
+        if (childCount == 0) {
+            return 0.0
+        }
+        
+        ; A grid container runs a different placement algorithm entirely.
+        if (parent.display == "grid") {
+            return (this.layoutGrid(parent))
+        }
+
+        def innerWidth:double parent.calculatedInnerWidth
+        def innerHeight:double parent.calculatedInnerHeight
+        
+        ; Starting position (after border and padding, NOT margin)
+        ; Margin is OUTSIDE the element, padding is INSIDE
+        def startX:double (parent.calculatedX + parent.box.borderWidthPx + parent.box.paddingLeftPx)
+        def startY:double (parent.calculatedY + parent.box.borderWidthPx + parent.box.paddingTopPx)
+        
+        def currentX:double startX
+        def currentY:double startY
+        def rowHeight:double 0.0
+        def rowElements:[EVGElement]
+        def totalHeight:double 0.0
+        ; Every wrapped line, flattened, so align-content can move whole lines
+        ; once the total content height is known.
+        def lineMembers:[EVGElement]
+        def lineCounts:[int]
+        def lineHeights:[double]
+        ; count of in-flow (non-absolute) children already placed, so `gap` is
+        ; added BETWEEN consecutive children only (not before the first).
+        def placedInFlow:int 0
+
+        ; Check layout direction using flexDirection (CSS standard)
+        def isColumn:boolean (parent.flexDirection == "column")
+
+        ; The two gaps, on the two axes.
+        ;
+        ; `gap` is the shorthand and `row-gap` / `column-gap` are the longhands
+        ; that override it — and which longhand belongs to which axis depends
+        ; on the direction, not on the name: in a ROW the space BETWEEN items
+        ; is `column-gap` (they are in different columns) and the space between
+        ; wrapped LINES is `row-gap`. A column swaps them.
+        ;
+        ; Both longhands parsed before this and neither did anything: a flex
+        ; container with `row-gap: 30px; column-gap: 5px` laid out as though it
+        ; had no gaps at all, because only `parent.gap` was ever read. And the
+        ; cross gap did not exist even for the shorthand, so `gap: 10px` on a
+        ; wrapping row put ten pixels between the items and nothing between the
+        ; lines.
+        def rowGapUnit:EVGUnit parent.gap
+        if parent.rowGap.isSet {
+            rowGapUnit = parent.rowGap
+        }
+        def colGapUnit:EVGUnit parent.gap
+        if parent.columnGap.isSet {
+            colGapUnit = parent.columnGap
+        }
+        def mainGapUnit:EVGUnit colGapUnit
+        def crossGapUnit:EVGUnit rowGapUnit
+        if isColumn {
+            mainGapUnit = rowGapUnit
+            crossGapUnit = colGapUnit
+        }
+
+        ; Percentages resolve against the inner extent of the axis they space;
+        ; px is idempotent, so re-resolving every layout costs nothing.
+        def gapPx:double 0.0
+        if mainGapUnit.isSet {
+            mainGapUnit.rootFontSize = parent.rootFontSize
+            if isColumn {
+                mainGapUnit.resolve(innerHeight parent.inheritedFontSize)
+            } {
+                mainGapUnit.resolve(innerWidth parent.inheritedFontSize)
+            }
+            gapPx = mainGapUnit.pixels
+        }
+        ; The cross gap is only ever read at a wrap, so a container that
+        ; cannot wrap does not pay for resolving it. Most of them cannot: the
+        ; benchmark fixtures say `flex-wrap: nowrap` on every row, and
+        ; resolving a unit nobody reads showed up as a few per cent.
+        def crossGapPx:double 0.0
+        def canWrap:boolean ((isColumn == false) && (parent.flexWrap != "nowrap"))
+        if (canWrap && crossGapUnit.isSet) {
+            crossGapUnit.rootFontSize = parent.rootFontSize
+            if isColumn {
+                crossGapUnit.resolve(innerWidth parent.inheritedFontSize)
+            } {
+                crossGapUnit.resolve(innerHeight parent.inheritedFontSize)
+            }
+            crossGapPx = crossGapUnit.pixels
+        }
+        
+        ; For row layout with flex items, we need to calculate available space first
+        if (isColumn == false) {
+            ; Calculate total fixed width and total flex
+            def fixedWidth:double 0.0
+            def totalFlex:double 0.0
+            def j:int 0
+            while (j < childCount) {
+                def c:EVGElement (parent.getChild(j))
+                c.inheritProperties(parent)
+                c.resolveUnits(innerWidth innerHeight)
+                ; Out of flow takes no share of the line: an absolute child,
+                ; or one the sheet has set `display: none`. This sum counted
+                ; every child's width, so a rail folded away at a breakpoint
+                ; still left a rail-wide hole beside the column that grew.
+                def hasBasis:boolean c.flexBasis.isSet
+                if c.isAbsolute {
+                } {
+                if ((c.flex > 0.0) && hasBasis) {
+                    totalFlex = totalFlex + c.flex
+                    fixedWidth = ((fixedWidth + c.flexBasis.pixels) + c.box.marginLeftPx) + c.box.marginRightPx
+                } {
+                    ; A BASIS ON AN ITEM THAT DOES NOT GROW IS STILL ITS SIZE.
+                    ; This branch did not exist: `flex-basis: 120px` with no
+                    ; `flex-grow` fell past every test below into the
+                    ; content-estimate case, the item was laid out with no
+                    ; width at all and so filled the row, and the growing
+                    ; sibling beside it was left with nothing —
+                    ;
+                    ;   width:120px      + flex-grow:1  ->  120 | 480   right
+                    ;   flex-basis:120px + flex-grow:1  ->  600 |   0   wrong
+                    ;
+                    ; which is a fixed rail beside a flexible panel, the most
+                    ; ordinary two-box layout there is. CSS says a definite
+                    ; basis REPLACES the width as the item's starting main
+                    ; size, so it is checked before `width` and not after.
+                    if hasBasis {
+                        def baseW:double (this.clampMain(c c.flexBasis.pixels))
+                        c.calculatedFlexWidth = baseW
+                        c.hasFlexWidth = true
+                        fixedWidth = ((fixedWidth + baseW) + c.box.marginLeftPx) + c.box.marginRightPx
+                    } {
+                    if c.width.isSet {
+                        fixedWidth = fixedWidth + c.width.pixels + c.box.marginLeftPx + c.box.marginRightPx
+                    } {
+                        if (c.flex > 0.0) {
+                            totalFlex = totalFlex + c.flex
+                            fixedWidth = fixedWidth + c.box.marginLeftPx + c.box.marginRightPx
+                        } {
+                            def avail:double (innerWidth - c.box.marginLeftPx - c.box.marginRightPx)
+                            ; This IS the row flex pass, so along a row by
+                            ; construction.
+                            def estW:double (this.estimateChildWidth(c avail true))
+                            fixedWidth = fixedWidth + estW + c.box.marginLeftPx + c.box.marginRightPx
+                        }
+                    }
+                    }
+                }
+                }
+                j = j + 1
+            }
+            
+            ; Calculate available space for flex items (row gaps consume it too)
+            def totalGap:double 0.0
+            if (childCount > 1) {
+                totalGap = ((to_double (childCount - 1)) * gapPx)
+            }
+            def availableForFlex:double ((innerWidth - fixedWidth) - totalGap)
+            if (availableForFlex < 0.0) {
+                availableForFlex = 0.0
+            }
+            
+            ; Assign flex widths to children: basis plus a share of the leftover.
+            ;
+            ; min/max are resolved as part of this rather than clamped after the
+            ; fact. An item that hits its limit is frozen at the limit and taken
+            ; out of the pool, and the space it did not use is offered to the
+            ; others — otherwise clamping just left a hole in the row. This is
+            ; the CSS "resolve flexible lengths" loop, bounded by the child count
+            ; because each pass freezes at least one item.
+            if (totalFlex > 0.0) {
+                def frozen:[boolean]
+                def jf:int 0
+                while (jf < childCount) {
+                    push frozen false
+                    jf = (jf + 1)
+                }
+
+                def poolSpace:double availableForFlex
+                def poolFlex:double totalFlex
+                def pass:int 0
+                def settled:boolean false
+                while ((pass < childCount) && (settled == false)) {
+                    settled = true
+                    j = 0
+                    while (j < childCount) {
+                        def c:EVGElement (parent.getChild(j))
+                        def isFlexItem:boolean false
+                        if (c.flex > 0.0) {
+                            if (c.flexBasis.isSet || (c.width.isSet == false)) {
+                                isFlexItem = true
+                            }
+                        }
+                        if (isFlexItem && ((itemAt frozen j) == false)) {
+                            def basisW:double 0.0
+                            if c.flexBasis.isSet {
+                                basisW = c.flexBasis.pixels
+                            }
+                            def sizeW:double basisW
+                            if (poolFlex > 0.0) {
+                                sizeW = (basisW + ((poolSpace * c.flex) / poolFlex))
+                            }
+                            ; Clamp, and if the clamp bit, freeze here and give
+                            ; the difference back to the remaining items.
+                            ;
+                            ; `clampMain` is shared with the basis pass above
+                            ; and with the shrink pass below, which is how the
+                            ; three of them stopped disagreeing about which of
+                            ; min and max wins. The long note about the
+                            ; automatic minimum lives there now.
+                            def clampedW:double (this.clampMain(c sizeW))
+                            if (clampedW != sizeW) {
+                                set frozen j true
+                                poolSpace = ((poolSpace - clampedW) + basisW)
+                                poolFlex = (poolFlex - c.flex)
+                                if (poolSpace < 0.0) {
+                                    poolSpace = 0.0
+                                }
+                                settled = false
+                            }
+                            c.calculatedFlexWidth = clampedW
+                            c.hasFlexWidth = true
+                        }
+                        j = j + 1
+                    }
+                    pass = (pass + 1)
+                }
+            }
+        }
+
+        ; Column-axis flex: grow (distribute leftover height to flex>0 children)
+        ; and, when there is no grow flex, shrink-to-fit so fixed children that
+        ; overflow the container height are scaled down instead of spilling out.
+        ;
+        ; Both need a definite container height to work against. An auto-height
+        ; column sizes to its content, so `innerHeight` here is stale (it is only
+        ; pre-computed in layoutElement when the height is definite) and using it
+        ; would shrink content to a height that does not exist yet — which is how
+        ; document flow (auto-height Views stacked down a page) differs from the
+        ; fixed-size panels this was originally written for.
+        if (isColumn && parent.hasDefiniteHeight) {
+            def fixedHeight:double 0.0
+            def totalFlexC:double 0.0
+            def flowCountC:int 0
+            def jc:int 0
+            while (jc < childCount) {
+                def c:EVGElement (parent.getChild(jc))
+                c.inheritProperties(parent)
+                c.resolveUnits(innerWidth innerHeight)
+                if (c.isAbsolute == false) {
+                    flowCountC = (flowCountC + 1)
+                    def mAxis:double (c.box.marginTopPx + c.box.marginBottomPx)
+                    if c.height.isSet {
+                        fixedHeight = (fixedHeight + c.height.pixels + mAxis)
+                    } {
+                        if (c.flex > 0.0) {
+                            totalFlexC = (totalFlexC + c.flex)
+                            fixedHeight = (fixedHeight + mAxis)
+                        } {
+                            ; auto-height non-flex child: 0 main-axis basis estimate
+                            fixedHeight = (fixedHeight + mAxis)
+                        }
+                    }
+                }
+                jc = (jc + 1)
+            }
+            def gapTotalC:double 0.0
+            if (flowCountC > 1) {
+                gapTotalC = ((to_double (flowCountC - 1)) * gapPx)
+            }
+            if (totalFlexC > 0.0) {
+                def availC:double ((innerHeight - fixedHeight) - gapTotalC)
+                if (availC < 0.0) { availC = 0.0 }
+                def jg:int 0
+                while (jg < childCount) {
+                    def c:EVGElement (parent.getChild(jg))
+                    if (c.isAbsolute == false) {
+                        if ((c.height.isSet == false) && (c.flex > 0.0)) {
+                            c.calculatedFlexHeight = ((availC * c.flex) / totalFlexC)
+                        }
+                    }
+                    jg = (jg + 1)
+                }
+            } {
+                ; No grow flex — shrink to fit. Each item gives up space in
+                ; proportion to (flex-shrink x its size), so flex-shrink: 0
+                ; holds its size while the rest absorb the overflow. With every
+                ; factor left at the CSS default of 1 this is the same uniform
+                ; scale as before.
+                ;
+                ; NOT in a scroll container. Shrinking is what a box does when
+                ; the overflow has nowhere to go; a scroll container is the
+                ; statement that it does have somewhere to go. This is the pass
+                ; the virtualiser had to route around — a 230,000-pixel spacer
+                ; in a 414-pixel column was scaled to fit and fourteen rows drew
+                ; on one 46-pixel line.
+                def contentH:double (fixedHeight + gapTotalC)
+                def overflowH:double (contentH - innerHeight)
+                if (parent.clipsContent()) {
+                    overflowH = 0.0
+                }
+                if ((overflowH > 0.0) && (fixedHeight > 0.0)) {
+                    def weightedH:double 0.0
+                    def jq:int 0
+                    while (jq < childCount) {
+                        def c:EVGElement (parent.getChild(jq))
+                        if ((c.isAbsolute == false) && c.height.isSet) {
+                            weightedH = (weightedH + (c.flexShrink * c.height.pixels))
+                        }
+                        jq = (jq + 1)
+                    }
+                    if (weightedH > 0.0) {
+                        def js:int 0
+                        while (js < childCount) {
+                            def c:EVGElement (parent.getChild(js))
+                            if ((c.isAbsolute == false) && c.height.isSet) {
+                                def cut:double ((overflowH * (c.flexShrink * c.height.pixels)) / weightedH)
+                                def finalH:double (c.height.pixels - cut)
+                                if (finalH < 0.0) {
+                                    finalH = 0.0
+                                }
+                                ; Said with a flag, as `hasFlexWidth` says it
+                                ; along a row: clearing `height.isSet` here
+                                ; destroyed the declaration, so the next pass
+                                ; saw an auto-height child and never shrank it
+                                ; again — which only looked right while the
+                                ; stale flex height was never cleared.
+                                c.calculatedFlexHeight = finalH
+                                c.hasFlexHeight = true
+                            }
+                            js = (js + 1)
+                        }
+                    }
+                }
+            }
+        }
+
+        ; Row-axis flex-shrink (nowrap only — with wrap the row wraps instead):
+        ; when there is no grow flex and fixed children overflow the width, scale
+        ; them to fit (they used to spill out). Applied by re-routing each fixed
+        ; child through the flex-width path (calculatedFlexWidth + clear width),
+        ; so layoutElement adopts the shrunk width instead of the explicit one.
+        if (isColumn == false) {
+            if (parent.flexWrap == "nowrap") {
+                def fixedW2:double 0.0
+                def totalFlex2:double 0.0
+                def flowCount2:int 0
+                def jr:int 0
+                while (jr < childCount) {
+                    def c:EVGElement (parent.getChild(jr))
+                    if (c.isAbsolute == false) {
+                        flowCount2 = (flowCount2 + 1)
+                        if (this.hasBaseMain(c)) {
+                            fixedW2 = (fixedW2 + (this.baseMain(c)) + c.box.marginLeftPx + c.box.marginRightPx)
+                        } {
+                            if (c.flex > 0.0) { totalFlex2 = (totalFlex2 + c.flex) }
+                        }
+                    }
+                    jr = (jr + 1)
+                }
+                def gapTotal2:double 0.0
+                if (flowCount2 > 1) { gapTotal2 = ((to_double (flowCount2 - 1)) * gapPx) }
+                def contentW2:double (fixedW2 + gapTotal2)
+                def overflowW:double (contentW2 - innerWidth)
+                ; Same reason as the column above: a scroll container's content
+                ; is not squeezed to fit, it is scrolled to.
+                if (parent.clipsContent()) {
+                    overflowW = 0.0
+                }
+                if ((totalFlex2 == 0.0) && (overflowW > 0.0) && (fixedW2 > 0.0)) {
+                    ; SHRINKING IS THE SAME LOOP AS GROWING, AND IT WAS NOT.
+                    ;
+                    ; This used to be one weighted pass with no minimum in it
+                    ; at all: each item gave up (flex-shrink x its size) of the
+                    ; overflow and that was the answer. An item that could not
+                    ; shrink that far — because it has a `min-width`, or
+                    ; because its own content will not go narrower — was
+                    ; clamped afterwards by `layoutElement`, and the space it
+                    ; refused to give up was never asked of anyone else. Two
+                    ; 300px items in a 300px row, the first with
+                    ; `min-width: 200px`, came out 200 | 150: three hundred and
+                    ; fifty pixels in a three-hundred pixel row.
+                    ;
+                    ; So it is CSS's freeze-and-repeat, the same shape as the
+                    ; grow loop above: distribute, clamp, freeze whoever
+                    ; clamped, hand what they did not take to the rest, repeat.
+                    ; Bounded by the child count because every pass freezes at
+                    ; least one item.
+                    ;
+                    ; THE MINIMUMS ARE MEASURED ONCE, not once per pass. The
+                    ; automatic minimum is an intrinsic measurement of the
+                    ; item's whole subtree, and asking for it inside the loop
+                    ; would make an overflowing row quadratic in its own depth.
+                    def minsW:[double]
+                    def basesW:[double]
+                    def shrinkable:[boolean]
+                    def jm:int 0
+                    while (jm < childCount) {
+                        def c:EVGElement (parent.getChild(jm))
+                        def canShrink:boolean ((c.isAbsolute == false) && (this.hasBaseMain(c)))
+                        push shrinkable canShrink
+                        if canShrink {
+                            push basesW (this.baseMain(c))
+                            ; ONLY AN EXPLICIT `min-width` FLOORS THIS PASS.
+                            ;
+                            ; The automatic minimum is tempting here and it is
+                            ; wrong: `minIntrinsicWidthOf` answers with the
+                            ; item's DEFINITE WIDTH when it has one — a
+                            ; definite width is both its min- and its
+                            ; max-content size — and every item in this pass
+                            ; has one by construction, so using it would floor
+                            ; each item at the size it is being asked to give
+                            ; up and nothing would shrink at all. CSS agrees:
+                            ; the content-based minimum is the SMALLER of the
+                            ; content suggestion and the specified size, so an
+                            ; empty 300px box may shrink to nothing.
+                            ;
+                            ; What is left out is the item whose CONTENT will
+                            ; not go narrower than its box — a run of text at
+                            ; `width: 300px` should stop at its min-content
+                            ; width, and here it does not. That needs an
+                            ; intrinsic measurement that ignores the element's
+                            ; own width, which this engine cannot ask for yet.
+                            ; It is also not a regression: this pass had no
+                            ; minimum of any kind before.
+                            if c.minWidth.isSet {
+                                push minsW c.minWidth.pixels
+                            } {
+                                push minsW 0.0
+                            }
+                        } {
+                            push basesW 0.0
+                            push minsW 0.0
+                        }
+                        jm = (jm + 1)
+                    }
+
+                    def frozenS:[boolean]
+                    def jf2:int 0
+                    while (jf2 < childCount) {
+                        push frozenS false
+                        jf2 = (jf2 + 1)
+                    }
+
+                    def toCut:double overflowW
+                    def passS:int 0
+                    def settledS:boolean false
+                    while ((passS < childCount) && (settledS == false)) {
+                        settledS = true
+                        def weightedW:double 0.0
+                        def jz:int 0
+                        while (jz < childCount) {
+                            def c:EVGElement (parent.getChild(jz))
+                            if ((itemAt shrinkable jz) && ((itemAt frozenS jz) == false)) {
+                                weightedW = (weightedW + (c.flexShrink * (itemAt basesW jz)))
+                            }
+                            jz = (jz + 1)
+                        }
+                        if (weightedW > 0.0) {
+                            def jw:int 0
+                            while (jw < childCount) {
+                                def c:EVGElement (parent.getChild(jw))
+                                if ((itemAt shrinkable jw) && ((itemAt frozenS jw) == false)) {
+                                    def baseW:double (itemAt basesW jw)
+                                    def cutW:double ((toCut * (c.flexShrink * baseW)) / weightedW)
+                                    def wantW:double (baseW - cutW)
+                                    if (wantW < 0.0) {
+                                        wantW = 0.0
+                                    }
+                                    def finalW:double wantW
+                                    if c.maxWidth.isSet {
+                                        if (finalW > c.maxWidth.pixels) {
+                                            finalW = c.maxWidth.pixels
+                                        }
+                                    }
+                                    def floorW:double (itemAt minsW jw)
+                                    if (finalW < floorW) {
+                                        finalW = floorW
+                                    }
+                                    if (finalW != wantW) {
+                                        set frozenS jw true
+                                        toCut = (toCut - (baseW - finalW))
+                                        if (toCut < 0.0) {
+                                            toCut = 0.0
+                                        }
+                                        settledS = false
+                                    }
+                                    c.calculatedFlexWidth = finalW
+                                    c.hasFlexWidth = true
+                                }
+                                jw = (jw + 1)
+                            }
+                        }
+                        passS = (passS + 1)
+                    }
+                }
+            }
+        }
+
+        def i:int 0
+        while (i < childCount) {
+            def child:EVGElement (parent.getChild(i))
+
+            ; Inherit properties from parent
+            child.inheritProperties(parent)
+            
+            ; Resolve child units
+            child.resolveUnits(innerWidth innerHeight)
+            
+            ; Out of flow: fixed, a Layer, or absolutely positioned. One pass,
+            ; shared with the grid — see `layoutOutOfFlowChild`.
+            if child.isAbsolute {
+                this.layoutOutOfFlowChild(parent child innerWidth innerHeight startX startY (isColumn == false))
+                i = i + 1
+                continue
+            }
+            
+            ; Calculate child dimensions
+            def availableForChild:double (innerWidth - child.box.marginLeftPx - child.box.marginRightPx)
+            def childWidth:double (this.estimateChildWidth(child availableForChild ((isColumn == false) || (this.crossShrinksUnder(parent)))))
+            
+            ; The flex pass gets the FIRST say, because when it has run it has
+            ; already taken the declared width into account and squeezed it.
+            ; It used to say so by clearing `width.isSet`, which destroyed the
+            ; declaration for every frame after; now it says so with a flag and
+            ; the declaration survives.
+            if child.hasFlexWidth {
+                childWidth = child.calculatedFlexWidth
+            } {
+                if child.width.isSet {
+                    ; If width is explicitly set and it's 100% (resolved to innerWidth),
+                    ; we should still subtract margins for proper fit
+                    if (child.width.pixels >= innerWidth) {
+                        ; Width was 100% - use available space after margins
+                        childWidth = availableForChild
+                    } {
+                        ; Width was set to a specific value - use it
+                        childWidth = child.width.pixels
+                    }
+                }
+            }
+            ; row alignItems:stretch — a child with no explicit height fills the
+            ; parent's cross (height) extent.
+            if (isColumn == false) {
+                if ((this.crossAlignOf(child parent.alignItems)) == "stretch") {
+                    if (child.height.isSet == false) {
+                        child.calculatedFlexHeight = innerHeight
+                    }
+                }
+            }
+
+            ; Total width including margins (estimated before layout)
+            def childTotalWidth:double (childWidth + child.box.marginLeftPx + child.box.marginRightPx)
+
+            ; main-axis `gap`: advance the cursor before every in-flow child
+            ; except the first on its row (row) / the first overall (column).
+            if (gapPx > 0.0) {
+                if (isColumn == false) {
+                    if ((array_length rowElements) > 0) { currentX = currentX + gapPx }
+                } {
+                    if (placedInFlow > 0) {
+                        currentY = currentY + gapPx
+                        totalHeight = totalHeight + gapPx
+                    }
+                }
+            }
+
+            ; Check if we need to wrap to next row (for row direction). Gated on
+            ; flexWrap: "nowrap" keeps everything on one line (children overflow /
+            ; shrink); the historical/default "wrap" auto-wraps.
+            ;
+            ; --- WHY THE COMPARISON HAS A TOLERANCE ---------------------------
+            ;
+            ; A `flex: 1` child's width was computed BY THIS LAYOUT, out of the
+            ; same `innerWidth` it is now being measured against: the flex pass
+            ; took the line, subtracted the fixed children and the gaps, and
+            ; handed back the remainder. Adding those parts back up is not
+            ; guaranteed to return the number they were subtracted from — in
+            ; binary floating point `(a - b - c) + b + c` can land one ulp
+            ; above `a` — and a bare `>` then says the row is too wide for
+            ; itself and wraps.
+            ;
+            ; That is not theoretical and it is not rare. A sidebar of 240px
+            ; beside a `flex: 1` panel, with `4vw` page padding, wrapped at 127
+            ; of the 680 window widths between 821 and 1500 — scattered, so
+            ; dragging a window edge flickered the panel below the sidebar and
+            ; back up again a pixel later. See lib/evg/web/responsive.
+            ;
+            ; A hundredth of a pixel is far below anything a painter can draw
+            ; and far above the error being cancelled (~1e-13 at these
+            ; magnitudes), so an overflow smaller than that is arithmetic
+            ; rather than a layout that does not fit. An item that genuinely
+            ; does not fit misses the line by whole pixels and still wraps.
+            if (isColumn == false) {
+                def availableWidth:double (((startX + innerWidth) - currentX) + 0.01)
+                if (((childTotalWidth > availableWidth) && ((array_length rowElements) > 0)) && (parent.flexWrap != "nowrap")) {
+                    ; Wrap to next row
+                    this.alignRow(rowElements parent rowHeight startX innerWidth)
+                    this.recordLine(lineMembers lineCounts lineHeights rowElements rowHeight)
+                    currentY = ((currentY + rowHeight) + crossGapPx)
+                    totalHeight = ((totalHeight + rowHeight) + crossGapPx)
+                    currentX = startX
+                    rowHeight = 0.0
+                    clear rowElements
+                }
+            }
+            
+            ; Position child
+            child.calculatedX = currentX + child.box.marginLeftPx
+            child.calculatedY = currentY + child.box.marginTopPx
+            
+            ; Layout child element (recursive)
+            ; Units were already resolved in layoutChildren, pass childWidth so layoutElement knows the actual size
+            ; Tell the child which axis it is being laid along, so a width-less
+            ; flex container knows whether `width: auto` means fit-content (a
+            ; row) or stretch (a column). Restored afterwards because this pass
+            ; recurses.
+            def wasRow:boolean layingOutAlongRow
+            def wasShrink:boolean columnCrossShrinks
+            layingOutAlongRow = (isColumn == false)
+            columnCrossShrinks = (this.crossShrinksUnder(parent))
+            this.layoutElement(child child.calculatedX child.calculatedY childWidth innerHeight)
+            layingOutAlongRow = wasRow
+            columnCrossShrinks = wasShrink
+            
+            ; Get actual child height after layout
+            def childHeight:double child.calculatedHeight
+            def childTotalHeight:double (childHeight + child.box.marginTopPx + child.box.marginBottomPx)
+            ; After shrink-wrap, use real width for row cursor advance
+            def placedWidth:double (child.calculatedWidth + child.box.marginLeftPx + child.box.marginRightPx)
+            
+            ; Update position tracking
+            if isColumn {
+                ; Column direction: stack vertically
+                currentY = currentY + childTotalHeight
+                totalHeight = totalHeight + childTotalHeight
+            } {
+                ; Row direction: advance horizontally
+                currentX = currentX + placedWidth
+                push rowElements child
+                if (childTotalHeight > rowHeight) {
+                    rowHeight = childTotalHeight
+                }
+            }
+            placedInFlow = (placedInFlow + 1)
+
+            ; Handle explicit line break
+            if child.lineBreak {
+                if (isColumn == false) {
+                    this.alignRow(rowElements parent rowHeight startX innerWidth)
+                    this.recordLine(lineMembers lineCounts lineHeights rowElements rowHeight)
+                    currentY = ((currentY + rowHeight) + crossGapPx)
+                    totalHeight = ((totalHeight + rowHeight) + crossGapPx)
+                    currentX = startX
+                    rowHeight = 0.0
+                    clear rowElements
+                }
+            }
+            
+            i = i + 1
+        }
+        
+        ; Handle final row (for row layout)
+        if ((isColumn == false) && ((array_length rowElements) > 0)) {
+            this.alignRow(rowElements parent rowHeight startX innerWidth)
+            this.recordLine(lineMembers lineCounts lineHeights rowElements rowHeight)
+            totalHeight = totalHeight + rowHeight
+        }
+        
+        ; Wrapped-line post-passes, in CSS order: wrap-reverse flips the cross
+        ; axis first, then align-content distributes the lines along it.
+        if (isColumn == false) {
+            this.applyWrapReverse(parent lineMembers lineCounts lineHeights totalHeight crossGapPx)
+            this.applyAlignContent(parent lineMembers lineCounts lineHeights totalHeight innerHeight)
+        }
+
+        ; Handle column alignment (for column layout)
+        if isColumn {
+            this.alignColumn(parent totalHeight startX startY innerWidth innerHeight)
+        }
+        
+        return totalHeight
+    }
+
+    ; Remember a finished line so align-content can move it later.
+    fn recordLine:void (members:[EVGElement] counts:[int] heights:[double] rowElements:[EVGElement] rowHeight:double) {
+        def n:int (array_length rowElements)
+        if (n == 0) {
+            return
+        }
+        def i:int 0
+        while (i < n) {
+            push members (itemAt rowElements i)
+            i = (i + 1)
+        }
+        push counts n
+        push heights rowHeight
+    }
+
+    ; Distribute spare cross-axis space between wrapped lines. alignItems places
+    ; a child WITHIN its line; this places the lines themselves, and only does
+    ; anything when the content actually wrapped and the container has a
+    ; definite height with room left over.
+    ;
+    ; `stretch` (the CSS default) would have to grow each line and re-lay its
+    ; children out, so it is treated as flex-start here and noted in the plan.
+    ; flex-wrap: wrap-reverse — the lines stack from the far edge of the cross
+    ; axis instead of the near one, so the first line ends up at the bottom.
+    ; The wrap POINTS are unchanged; only where each finished line sits moves.
+    fn applyWrapReverse:void (parent:EVGElement members:[EVGElement] counts:[int] heights:[double] contentHeight:double gapPx:double) {
+        if (parent.flexWrap != "wrap-reverse") {
+            return
+        }
+        def lineCount:int (array_length counts)
+        if (lineCount < 2) {
+            return
+        }
+        def idx:int 0
+        def offset:double 0.0
+        def li:int 0
+        while (li < lineCount) {
+            def h:double (itemAt heights li)
+            ; Mirror this line's position about the middle of the content box.
+            def newOffset:double ((contentHeight - offset) - h)
+            def shift:double (newOffset - offset)
+            def n:int (itemAt counts li)
+            def k:int 0
+            while (k < n) {
+                def el:EVGElement (itemAt members (idx + k))
+                if (shift != 0.0) {
+                    el.calculatedY = (el.calculatedY + shift)
+                    this.propagateOffsetToChildren(el 0.0 shift)
+                }
+                k = (k + 1)
+            }
+            idx = (idx + n)
+            ; A line's own position includes the gaps before it, or the mirror
+            ; puts every line back one gap short of where it belongs.
+            offset = ((offset + h) + gapPx)
+            li = (li + 1)
+        }
+    }
+
+    ; align-content: stretch — grow every line by an equal share of the spare
+    ; cross-axis space. A line growing means its items grow with it, so each
+    ; item that did not ask for a specific height is resized and its own
+    ; children are laid out again inside the taller box.
+    fn applyAlignContentStretch:void (parent:EVGElement members:[EVGElement] counts:[int] heights:[double] contentHeight:double innerHeight:double) {
+        def lineCount:int (array_length counts)
+        def free:double (innerHeight - contentHeight)
+        if (free <= 0.0) {
+            return
+        }
+        def extra:double (free / (to_double lineCount))
+        def idx:int 0
+        def li:int 0
+        while (li < lineCount) {
+            def shift:double (extra * (to_double li))
+            def grown:double ((itemAt heights li) + extra)
+            def n:int (itemAt counts li)
+            def k:int 0
+            while (k < n) {
+                def el:EVGElement (itemAt members (idx + k))
+                if (shift != 0.0) {
+                    el.calculatedY = (el.calculatedY + shift)
+                    this.propagateOffsetToChildren(el 0.0 shift)
+                }
+                ; Only items that were sized by the line grow with it; an
+                ; explicit height is still an explicit height.
+                if ((el.height.isSet == false) && (el.isAbsolute == false)) {
+                    def target:double ((grown - el.box.marginTopPx) - el.box.marginBottomPx)
+                    if (target > el.calculatedHeight) {
+                        el.calculatedHeight = target
+                        el.calculatedInnerHeight = (el.box.getInnerHeight(target))
+                        el.hasDefiniteHeight = true
+                        if ((el.getChildCount()) > 0) {
+                            this.layoutChildren(el)
+                        }
+                    }
+                }
+                k = (k + 1)
+            }
+            idx = (idx + n)
+            li = (li + 1)
+        }
+    }
+
+    fn applyAlignContent:void (parent:EVGElement members:[EVGElement] counts:[int] heights:[double] contentHeight:double innerHeight:double) {
+        def lineCount:int (array_length counts)
+        if (lineCount < 2) {
+            return
+        }
+        if ((parent.hasDefiniteHeight) == false) {
+            return
+        }
+        def mode:string parent.alignContent
+        if (mode == "flex-start") {
+            return
+        }
+        if (mode == "start") {
+            return
+        }
+        if (mode == "stretch") {
+            this.applyAlignContentStretch(parent members counts heights contentHeight innerHeight)
+            return
+        }
+        def free:double (innerHeight - contentHeight)
+        if (free <= 0.0) {
+            return
+        }
+
+        def first:double 0.0
+        def between:double 0.0
+        if ((mode == "flex-end") || (mode == "end")) {
+            first = free
+        }
+        if (mode == "center") {
+            first = (free / 2.0)
+        }
+        if (mode == "space-between") {
+            between = (free / (to_double (lineCount - 1)))
+        }
+        if (mode == "space-around") {
+            between = (free / (to_double lineCount))
+            first = (between / 2.0)
+        }
+        if (mode == "space-evenly") {
+            between = (free / (to_double (lineCount + 1)))
+            first = between
+        }
+
+        def idx:int 0
+        def li:int 0
+        while (li < lineCount) {
+            def shift:double (first + (between * (to_double li)))
+            def n:int (itemAt counts li)
+            def k:int 0
+            while (k < n) {
+                def el:EVGElement (itemAt members (idx + k))
+                if (shift != 0.0) {
+                    el.calculatedY = (el.calculatedY + shift)
+                    this.propagateOffsetToChildren(el 0.0 shift)
+                }
+                k = (k + 1)
+            }
+            idx = (idx + n)
+            li = (li + 1)
+        }
+    }
+    
+    fn alignColumn:void (parent:EVGElement contentHeight:double startX:double startY:double innerWidth:double innerHeight:double) {
+        ; Apply justifyContent (vertical) and alignItems (horizontal) alignment for column layout
+        def childCount:int (parent.getChildCount())
+        if (childCount == 0) {
+            return
+        }
+        
+        ; Get effective alignment values
+        ; For column direction: justifyContent = vertical (main axis), alignItems = horizontal (cross axis)
+        def verticalAlign:string parent.justifyContent
+        def horizontalAlign:string parent.alignItems
+        ; Legacy align= center|left|right (EVG spec horizontal alignment).
+        ; Default "left" must not clobber a set alignItems (left == flex-start).
+        if ((strlen parent.align) > 0) {
+            if (parent.align != "left") {
+                horizontalAlign = parent.align
+            }
+        }
+        
+        ; Calculate vertical offset based on justifyContent
+        def availableHeight:double innerHeight
+        if parent.height.isSet {
+            availableHeight = parent.calculatedInnerHeight
+        }
+        
+        def offsetY:double 0.0
+        if (verticalAlign == "center") {
+            offsetY = ((availableHeight - contentHeight) / 2.0)
+        }
+        if ((verticalAlign == "flex-end") || (verticalAlign == "end")) {
+            offsetY = (availableHeight - contentHeight)
+        }
+
+        ; Count non-absolute children for space distribution.
+        def flowCount:int 0
+        def fc:int 0
+        while (fc < childCount) {
+            def fchild:EVGElement (parent.getChild(fc))
+            if (fchild.isAbsolute == false) {
+                flowCount = (flowCount + 1)
+            }
+            fc = (fc + 1)
+        }
+
+        ; Space distribution (justifyContent) along the vertical main axis.
+        def freeSpaceY:double (availableHeight - contentHeight)
+        if (freeSpaceY < 0.0) {
+            freeSpaceY = 0.0
+        }
+        def distributeGapY:double 0.0
+        def distributeFirstY:double 0.0
+        if (verticalAlign == "space-between") {
+            if (flowCount > 1) {
+                distributeGapY = (freeSpaceY / (to_double (flowCount - 1)))
+            }
+        }
+        if (verticalAlign == "space-around") {
+            if (flowCount > 0) {
+                distributeGapY = (freeSpaceY / (to_double flowCount))
+                distributeFirstY = (distributeGapY / 2.0)
+            }
+        }
+        if (verticalAlign == "space-evenly") {
+            distributeGapY = (freeSpaceY / (to_double (flowCount + 1)))
+            distributeFirstY = distributeGapY
+        }
+        def usesDistributeY:boolean ((distributeGapY > 0.0) || (distributeFirstY > 0.0))
+        
+        ; Apply offsets to all non-absolute children
+        def i:int 0
+        def flowIndex:int 0
+        while (i < childCount) {
+            def child:EVGElement (parent.getChild(i))
+            
+            ; Skip absolute positioned elements (they're handled separately)
+            if (child.isAbsolute == false) {
+                ; Apply vertical offset
+                def elemOffsetY:double offsetY
+                if usesDistributeY {
+                    elemOffsetY = (distributeFirstY + (distributeGapY * (to_double flowIndex)))
+                }
+                if (elemOffsetY != 0.0) {
+                    child.calculatedY = child.calculatedY + elemOffsetY
+                    ; Propagate to descendants
+                    this.propagateOffsetToChildren(child 0.0 elemOffsetY)
+                }
+                flowIndex = (flowIndex + 1)
+                
+                ; Apply horizontal alignment (alignItems, or the child's own
+                ; align-self where it has one — in a column the cross axis is
+                ; the horizontal one).
+                def childAlign:string (this.crossAlignOf(child horizontalAlign))
+                def childTotalWidth:double (child.calculatedWidth + child.box.marginLeftPx + child.box.marginRightPx)
+                def offsetX:double 0.0
+                
+                if (childAlign == "center") {
+                    offsetX = ((innerWidth - childTotalWidth) / 2.0)
+                }
+                if ((childAlign == "flex-end") || (childAlign == "end")) {
+                    offsetX = (innerWidth - childTotalWidth)
+                }
+                
+                if (offsetX != 0.0) {
+                    child.calculatedX = child.calculatedX + offsetX
+                    ; Propagate to descendants
+                    this.propagateOffsetToChildren(child offsetX 0.0)
+                }
+            }
+            
+            i = i + 1
+        }
+    }
+    
+    ; Adopt the first in-flow child's baseline, expressed relative to this
+    ; element's own top edge.
+    fn inheritBaselineFromFirstChild:void (element:EVGElement) {
+        def i:int 0
+        def n:int (element.getChildCount())
+        while (i < n) {
+            def c:EVGElement (element.getChild(i))
+            if (c.isAbsolute == false) {
+                if c.hasBaseline {
+                    element.calculatedBaseline = ((c.calculatedY - element.calculatedY) + c.calculatedBaseline)
+                    element.calculatedDescent = c.calculatedDescent
+                    element.hasBaseline = true
+                    return
+                }
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; Distance from an element's top MARGIN edge to its baseline. CSS gives a
+    ; box with no text baseline the bottom of its margin box, which is what
+    ; makes an image in a row of captions sit on the text baseline.
+    fn baselineOffsetOf:double (el:EVGElement) {
+        if el.hasBaseline {
+            return (el.box.marginTopPx + el.calculatedBaseline)
+        }
+        return (el.box.marginTopPx + el.calculatedHeight + el.box.marginBottomPx)
+    }
+
+    fn alignRow:void (rowElements:[EVGElement] parent:EVGElement rowHeight:double startX:double innerWidth:double) {
+        ; Apply horizontal and vertical alignment to a row of elements
+        def elementCount:int (array_length rowElements)
+        if (elementCount == 0) {
+            return
+        }
+        
+        ; Calculate row width
+        def rowWidth:double 0.0
+        def i:int 0
+        while (i < elementCount) {
+            def el:EVGElement (itemAt rowElements i)
+            rowWidth = rowWidth + el.calculatedWidth + el.box.marginLeftPx + el.box.marginRightPx
+            i = i + 1
+        }
+        ; THE GAPS ARE PART OF THE ROW. This summed the boxes and forgot the
+        ; space the flow had already put between them, so `justify-content:
+        ; flex-end` pushed the row right by exactly the total gap and the last
+        ; item hung over the end of its container — a footer's two buttons with
+        ; an 8px gap ended 8px past the card. `space-between` and friends read
+        ; the same number for their free space, so they were out by the same
+        ; amount in the other direction.
+        def rowGapPx:double 0.0
+        if parent.gap.isSet {
+            rowGapPx = parent.gap.pixels
+        }
+        if parent.columnGap.isSet {
+            rowGapPx = parent.columnGap.pixels
+        }
+        if (elementCount > 1) {
+            rowWidth = (rowWidth + ((to_double (elementCount - 1)) * rowGapPx))
+        }
+        
+        ; Determine alignment based on flexDirection
+        ; For row direction: justifyContent = horizontal, alignItems = vertical
+        ; For column direction: justifyContent = vertical, alignItems = horizontal
+        def isColumn:boolean (parent.flexDirection == "column")
+        
+        ; Get effective alignment values
+        def mainAxisAlign:string parent.justifyContent
+        def crossAxisAlign:string parent.alignItems
+        
+        ; Horizontal alignment (justifyContent for row, alignItems for column)
+        def horizontalAlign:string mainAxisAlign
+        if isColumn {
+            horizontalAlign = crossAxisAlign
+        }
+        ; Legacy 'align' override — but default "left" must not clobber a set
+        ; justifyContent/alignItems (left == flex-start is a no-op anyway).
+        if ((strlen parent.align) > 0) {
+            if (parent.align != "left") {
+                horizontalAlign = parent.align
+            }
+        }
+        
+        def offsetX:double 0.0
+        if (horizontalAlign == "center") {
+            offsetX = ((innerWidth - rowWidth) / 2.0)
+        }
+        if ((horizontalAlign == "flex-end") || (horizontalAlign == "right")) {
+            offsetX = (innerWidth - rowWidth)
+        }
+
+        ; Space distribution (justifyContent). Applied as an incremental per-item
+        ; gap on top of the sequential flow position.
+        def freeSpace:double (innerWidth - rowWidth)
+        if (freeSpace < 0.0) {
+            freeSpace = 0.0
+        }
+        def distributeGap:double 0.0
+        def distributeFirst:double 0.0
+        if (horizontalAlign == "space-between") {
+            if (elementCount > 1) {
+                distributeGap = (freeSpace / (to_double (elementCount - 1)))
+            }
+        }
+        if (horizontalAlign == "space-around") {
+            distributeGap = (freeSpace / (to_double elementCount))
+            distributeFirst = (distributeGap / 2.0)
+        }
+        if (horizontalAlign == "space-evenly") {
+            distributeGap = (freeSpace / (to_double (elementCount + 1)))
+            distributeFirst = distributeGap
+        }
+        def usesDistribute:boolean ((distributeGap > 0.0) || (distributeFirst > 0.0))
+        
+        ; Vertical alignment (alignItems for row, justifyContent for column)
+        def verticalAlignVal:string crossAxisAlign
+        if isColumn {
+            verticalAlignVal = mainAxisAlign
+        }
+        ; Also check legacy 'verticalAlign' property
+        if ((strlen parent.verticalAlign) > 0) {
+            if (parent.verticalAlign != "top") {
+                verticalAlignVal = parent.verticalAlign
+            }
+        }
+        
+        ; The box a child is centred in. `alignItems` places a child inside its
+        ; LINE; when the parent cannot wrap there is only one line and the line
+        ; IS the content box, so the child may use all of it.
+        ;
+        ; The old test was `parent.height.isSet`, which asks where the height
+        ; came from rather than whether there is one. A divider whose height
+        ; came from the group's `align-items: stretch` has a perfectly definite
+        ; 298 pixels and no declaration, so it failed the test and its grip
+        ; stayed pinned to the top of a divider it was supposed to sit in the
+        ; middle of. `hasDefiniteHeight` is the question that was meant:
+        ; declared or resolved, the height is known before the children are
+        ; placed either way.
+        ;
+        ; A parent that CAN wrap keeps the old test. There the lines are placed
+        ; by `applyAlignContent` and a line is not the box — letting each line
+        ; claim the whole box would stack them all on top of one another.
+        def effectiveRowHeight:double rowHeight
+        def crossBox:double 0.0
+        if (parent.flexWrap == "nowrap") {
+            if parent.hasDefiniteHeight {
+                crossBox = parent.calculatedInnerHeight
+            }
+        } {
+            if parent.height.isSet {
+                crossBox = parent.calculatedInnerHeight
+            }
+        }
+        if (crossBox > rowHeight) {
+            effectiveRowHeight = crossBox
+        }
+
+        ; ALIGN-ITEMS: STRETCH IN A ROW WHOSE HEIGHT IS NOT KNOWN YET. The flow
+        ; hands a stretch item the row's inner height before the row has one,
+        ; so in an auto-height row that is nothing, and the item came out its
+        ; content height — a 1px vertical rule came out 0px tall. It used to
+        ; look right from the second layout on, because the row's inner height
+        ; from the LAST pass was still there to be read; now that a pass starts
+        ; from nothing (`EVGElement.resetLayoutNow`), the line is measured here
+        ; and each stretch item that is shorter than it is laid out again at
+        ; the line's height, which is what CSS does.
+        if (isColumn == false) {
+            def si:int 0
+            while (si < elementCount) {
+                def sel:EVGElement (itemAt rowElements si)
+                if (((this.crossAlignOf(sel verticalAlignVal)) == "stretch") && (sel.height.isSet == false)) {
+                    def target:double ((effectiveRowHeight - sel.box.marginTopPx) - sel.box.marginBottomPx)
+                    if ((target > (sel.calculatedHeight + 0.01)) && ((sel.isHidden()) == false)) {
+                        def sx:double sel.calculatedX
+                        def sy:double sel.calculatedY
+                        sel.calculatedFlexHeight = target
+                        ; A kept item resets itself when its handed height
+                        ; differs from last time; anything else has only its
+                        ; children to clear — its own units were resolved
+                        ; against the row, and must not be again.
+                        if (sel.keepLayout == false) {
+                            def sk:int 0
+                            while (sk < (sel.getChildCount())) {
+                                def skid:EVGElement (sel.getChild(sk))
+                                skid.resetLayoutState()
+                                sk = (sk + 1)
+                            }
+                        }
+                        def wasRowS:boolean layingOutAlongRow
+                        def wasShrinkS:boolean columnCrossShrinks
+                        layingOutAlongRow = true
+                        columnCrossShrinks = (this.crossShrinksUnder(parent))
+                        this.layoutElement(sel sx sy sel.lastParentW sel.lastParentH)
+                        layingOutAlongRow = wasRowS
+                        columnCrossShrinks = wasShrinkS
+                    }
+                }
+                si = (si + 1)
+            }
+        }
+        
+        ; align-items: baseline — line the row up on the text baselines rather
+        ; than on the box edges, so captions of different sizes read as one line.
+        ; Needs real ascent metrics, which is why this waited for the font work.
+        def useBaseline:boolean (verticalAlignVal == "baseline")
+        def maxBaseline:double 0.0
+        if useBaseline {
+            def b:int 0
+            while (b < elementCount) {
+                def bel:EVGElement (itemAt rowElements b)
+                def bo:double (this.baselineOffsetOf(bel))
+                if (bo > maxBaseline) {
+                    maxBaseline = bo
+                }
+                b = (b + 1)
+            }
+        }
+
+        ; Apply alignment offsets
+        i = 0
+        while (i < elementCount) {
+            def el:EVGElement (itemAt rowElements i)
+            
+            ; Horizontal offset - also propagate to children!
+            def elemOffsetX:double offsetX
+            if usesDistribute {
+                elemOffsetX = (distributeFirst + (distributeGap * (to_double i)))
+            }
+            if (elemOffsetX != 0.0) {
+                el.calculatedX = el.calculatedX + elemOffsetX
+                ; Propagate offset to all descendants
+                this.propagateOffsetToChildren(el elemOffsetX 0.0)
+            }
+            
+            ; Vertical alignment within row. `align-self` on the item wins
+            ; over the container's `align-items`; the row's own baseline pass
+            ; is only for the items that did not opt out of it.
+            def childTotalHeight:double (el.calculatedHeight + el.box.marginTopPx + el.box.marginBottomPx)
+            def offsetY:double 0.0
+            def elAlign:string verticalAlignVal
+            if (isColumn == false) {
+                elAlign = (this.crossAlignOf(el verticalAlignVal))
+            }
+            
+            if (elAlign == "center") {
+                offsetY = ((effectiveRowHeight - childTotalHeight) / 2.0)
+            }
+            if ((elAlign == "flex-end") || (elAlign == "bottom")) {
+                offsetY = (effectiveRowHeight - childTotalHeight)
+            }
+            if (elAlign == "baseline") {
+                if useBaseline {
+                    offsetY = (maxBaseline - (this.baselineOffsetOf(el)))
+                }
+            }
+            
+            if (offsetY != 0.0) {
+                el.calculatedY = el.calculatedY + offsetY
+                ; Propagate offset to all descendants
+                this.propagateOffsetToChildren(el 0.0 offsetY)
+            }
+            
+            i = i + 1
+        }
+    }
+    
+    ; Called right after `parent`'s own box moved by the same offset, so the
+    ; parent's paint bounds move here with everything under it: a kept
+    ; subtree's bounds are not measured again, and have to stay in step with
+    ; its boxes through every move the flow makes after laying it out.
+    fn propagateOffsetToChildren:void (parent:EVGElement offsetX:double offsetY:double) {
+        parent.paintLeft = (parent.paintLeft + offsetX)
+        parent.paintRight = (parent.paintRight + offsetX)
+        parent.paintTop = (parent.paintTop + offsetY)
+        parent.paintBottom = (parent.paintBottom + offsetY)
+        def childCount:int (parent.getChildCount())
+        def i:int 0
+        while (i < childCount) {
+            def child:EVGElement (parent.getChild(i))
+            if (offsetX != 0.0) {
+                child.calculatedX = child.calculatedX + offsetX
+            }
+            if (offsetY != 0.0) {
+                child.calculatedY = child.calculatedY + offsetY
+            }
+            ; Recurse to grandchildren
+            this.propagateOffsetToChildren(child offsetX offsetY)
+            i = i + 1
+        }
+    }
+    
+    ; Move a finished subtree, keeping everything inside it in step.
+    ; Reflect this container's children about its content box.
+    ;
+    ; What is reflected is each child's MARGIN box, and the border box is then
+    ; put back at its own margin-left inside it. That is CSS's rule and it is
+    ; worth being exact about, because the other reading is tempting and
+    ; wrong: `margin-left` stays physically on the left in a right-to-left
+    ; container. What reverses is the ORDER and the end the children pack
+    ; against, not which side of a child its own left margin is on. An author
+    ; who wants the margin to follow the direction says `margin-inline-start`.
+    ; With symmetric margins — nearly every toolbar and panel — the two
+    ; readings agree, which is exactly why picking the wrong one would have
+    ; survived a long time before something looked a pixel out.
+    ;
+    ; Absolutely positioned children are left alone: they were placed against
+    ; the edges they name, and `left: 0` means the left edge in any direction.
+    fn mirrorChildren:void (parent:EVGElement) {
+        if ((parent.resolvedRtl) == false) {
+            return
+        }
+        def left:double ((parent.calculatedX + parent.box.borderWidthPx) + parent.box.paddingLeftPx)
+        def right:double (left + parent.calculatedInnerWidth)
+        def span:double (left + right)
+        def n:int (parent.getChildCount())
+        def i:int 0
+        while (i < n) {
+            def ch:EVGElement (parent.getChild(i))
+            if (ch.isAbsolute == false) {
+                def mL:double ch.box.marginLeftPx
+                def mR:double ch.box.marginRightPx
+                def marginRightEdge:double ((ch.calculatedX + ch.calculatedWidth) + mR)
+                def nx:double ((span - marginRightEdge) + mL)
+                this.translateSubtree(ch (nx - ch.calculatedX) 0.0)
+            }
+            i = (i + 1)
+        }
+    }
+
+    ; The paint bounds move with the boxes they are the union of — see
+    ; `EVGElement.moveSubtree`. Missing that would leave `scrollOnly` culling
+    ; against where the content used to be, which is a row that scrolls into
+    ; view and stays blank.
+    fn translateSubtree:void (element:EVGElement dx:double dy:double) {
+        element.moveSubtree(dx dy)
+    }
+
+    fn layoutAbsolute:void (element:EVGElement parentWidth:double parentHeight:double) {
+        ; Position absolutely positioned element
+
+        ; BOTH EDGES AND NO SIZE IS A STRETCH. CSS 2.1 10.3.7: with `left` and
+        ; `right` both set and `width: auto`, the width is what is left of the
+        ; containing block between them. Without this the box kept its
+        ; content's width and `right` was simply dropped — a bar written
+        ; `left: 16; right: 16` came out as wide as its five icons.
+        if ((element.left.isSet && element.right.isSet) && (element.width.isSet == false)) {
+            def spanW:double ((((parentWidth - element.left.pixels) - element.right.pixels) - element.box.marginLeftPx) - element.box.marginRightPx)
+            if (spanW > 0.0) {
+                element.calculatedWidth = spanW
+                element.calculatedInnerWidth = (element.box.getInnerWidth(spanW))
+            }
+        }
+        if ((element.top.isSet && element.bottom.isSet) && (element.height.isSet == false)) {
+            def spanH:double ((((parentHeight - element.top.pixels) - element.bottom.pixels) - element.box.marginTopPx) - element.box.marginBottomPx)
+            if (spanH > 0.0) {
+                element.calculatedHeight = spanH
+                element.calculatedInnerHeight = (element.box.getInnerHeight(spanH))
+                element.hasDefiniteHeight = true
+            }
+        }
+
+        ; X position
+        if element.left.isSet {
+            element.calculatedX = element.left.pixels + element.box.marginLeftPx
+        } {
+            if element.x.isSet {
+                element.calculatedX = element.x.pixels + element.box.marginLeftPx
+            } {
+                if element.right.isSet {
+                    def width:double element.calculatedWidth
+                    if (width == 0.0) {
+                        if element.width.isSet {
+                            width = element.width.pixels
+                        }
+                    }
+                    element.calculatedX = parentWidth - element.right.pixels - width - element.box.marginRightPx
+                }
+            }
+        }
+        
+        ; Y position
+        if element.top.isSet {
+            element.calculatedY = element.top.pixels + element.box.marginTopPx
+        } {
+            if element.y.isSet {
+                element.calculatedY = element.y.pixels + element.box.marginTopPx
+            } {
+                if element.bottom.isSet {
+                    def height:double element.calculatedHeight
+                    if (height == 0.0) {
+                        if element.height.isSet {
+                            height = element.height.pixels
+                        }
+                    }
+                    element.calculatedY = parentHeight - element.bottom.pixels - height - element.box.marginBottomPx
+                }
+            }
+        }
+    }
+    
+    ; How far the in-flow children reach. Out-of-flow children — absolutes and
+    ; overlay surfaces — are excluded on purpose: a menu is as wide as its
+    ; trigger, not as wide as the panel that hangs off it.
+    fn contentExtent:double (element:EVGElement) {
+        def right:double 0.0
+        def i:int 0
+        def n:int (element.getChildCount())
+        while (i < n) {
+            def c:EVGElement (element.getChild(i))
+            if (c.isAbsolute == false) {
+                def r:double ((c.calculatedX + c.calculatedWidth) + c.box.marginRightPx)
+                if (r > right) {
+                    right = r
+                }
+            }
+            i = (i + 1)
+        }
+        if (right <= 0.0) {
+            return 0.0
+        }
+        return (((right - element.calculatedX) + element.box.paddingRightPx) + element.box.borderWidthPx)
+    }
+
+    ; --- overlays --------------------------------------------------------------
+    ; Four phases, of which the first is everything above: normal layout, then
+    ; anchor rectangles (already computed, because the anchors are ordinary flow
+    ; elements), then the overlay placement below, then the display list.
+    ;
+    ; The walk is top-down and places a surface BEFORE descending into it, which
+    ; is what makes a submenu work without knowing it is one: by the time the
+    ; Share sub-surface asks where its trigger is, the File surface that
+    ; contains that trigger has already moved, so the rectangle it reads is the
+    ; real one. Anchor-dependency order falls out of the tree order; there is no
+    ; second mechanism for nesting.
+
+    ; Every surface in the tree, placed against the anchor it names. This was
+    ; a plain walk of every element on every layout — three milliseconds a
+    ; frame on a long diary, to visit six thousand boxes and find the four
+    ; that are surfaces.
+    ;
+    ; The saving is the one `measurePaintBounds` already makes: a subtree the
+    ; layout KEPT moved whole, so a surface inside it moved with the anchor it
+    ; is placed against and its placement still holds. What the subtree holds
+    ; was counted the last time it was really laid out, and the answer is
+    ; cached on it — `overlayScanned` is false until a real scan, so a subtree
+    ; skipped in a later pass of the same layout is not taken at its word
+    ; before it has been asked once.
+    ;
+    ; Answers whether this subtree holds a surface, which is what lets a
+    ; parent cache it too.
+    fn placeOverlaysIn:boolean (el:EVGElement) {
+        if (el.layoutSkipped && el.overlayScanned) {
+            return el.hasOverlayBelow
+        }
+        def any@(mutable):boolean false
+        def i:int 0
+        while (i < (array_length el.children)) {
+            def c:EVGElement (itemAt el.children i)
+            if (c.isSurface()) {
+                this.placeOverlay(c el)
+                any = true
+            }
+            if (this.placeOverlaysIn(c)) {
+                any = true
+            }
+            i = (i + 1)
+        }
+        el.hasOverlayBelow = any
+        el.overlayScanned = true
+        return any
+    }
+
+    ; Three ways to say what a surface is positioned against, in the order
+    ; they win:
+    ;
+    ;   * the element itself, set from code (`overlayAnchor`);
+    ;   * `position-anchor`, an `anchor-name` or an `#id` — CSS's own way, and
+    ;     the only one that reaches OUT of the surface's own parent, so a menu
+    ;     no longer has to be declared beside its trigger;
+    ;   * the sibling convention: whichever sibling declared
+    ;     `overlay-anchor-role`, which is what lets a factory say
+    ;     `(Menu (Trigger …) (Content …))` with nothing joining the two by hand.
+    fn findOverlayAnchor@(optional):EVGElement (surface:EVGElement parent:EVGElement) {
+        if surface.overlayAnchor {
+            return surface.overlayAnchor
+        }
+        if ((strlen surface.positionAnchor) > 0) {
+            def named@(optional):EVGElement (EVGConnector.lookup(surface.positionAnchor anchorNames anchorNodes))
+            if (null? named) {
+            } {
+                return named
+            }
+        }
+        def i:int 0
+        while (i < (array_length parent.children)) {
+            def c:EVGElement (itemAt parent.children i)
+            if c.isOverlayAnchor {
+                def hit@(optional):EVGElement c
+                return hit
+            }
+            i = (i + 1)
+        }
+        def miss@(optional):EVGElement
+        return miss
+    }
+
+    ; --- collisions ------------------------------------------------------------
+    ; The part of a surface that falls off the page cannot be clicked and cannot
+    ; be read, so a menu that ignores the edge silently loses rows. Two moves,
+    ; in this order, and they are the two every real menu makes:
+    ;
+    ;   FLIP   the side it opens on, when the asked side does not fit and the
+    ;          opposite one does. A menu at the bottom of the page opens
+    ;          upwards; a submenu at the right edge opens to the left.
+    ;   SHIFT  along the other axis, sliding it back onto the page. This one is
+    ;          a slide and not a flip because the side was never the problem.
+    ;
+    ; Where NEITHER side fits — a surface taller than the page — the roomier
+    ; side wins and the surface is clamped to the page. It then covers its
+    ; anchor, which is what a browser does too: showing the rows is worth more
+    ; than the gap.
+
+    sfn oppositeSide:string (side:string) {
+        if (side == "top")    { return "bottom" }
+        if (side == "bottom") { return "top" }
+        if (side == "left")   { return "right" }
+        if (side == "right")  { return "left" }
+        return side
+    }
+
+    ; How much room there is between the anchor and the page edge on this side,
+    ; gap included. Negative means the surface does not fit.
+    fn overlayRoom:double (side:string ax:double ay:double aw:double ah:double w:double h:double gap:double) {
+        if (side == "top")    { return ((ay - gap) - h) }
+        if (side == "bottom") { return ((pageHeight - ((ay + ah) + gap)) - h) }
+        if (side == "left")   { return ((ax - gap) - w) }
+        if (side == "right")  { return ((pageWidth - ((ax + aw) + gap)) - w) }
+        return 0.0
+    }
+
+    sfn clampTo:double (v:double lo:double hi:double) {
+        if (hi < lo) {
+            ; The surface is bigger than the page on this axis. Show the start
+            ; of it: the first rows of a menu are the ones it puts its
+            ; most-used item in.
+            return lo
+        }
+        if (v < lo) {
+            return lo
+        }
+        if (v > hi) {
+            return hi
+        }
+        return v
+    }
+
+    ; --- presentation ----------------------------------------------------------
+    ;
+    ; anchored | sheet | fullscreen. The one part of this that is not CSS, and
+    ; the reason it is not: on a phone an anchored menu is the WRONG WIDGET
+    ; rather than a badly placed one. No amount of fallback placement turns a
+    ; dropdown into something usable at 390 wide; becoming a sheet along the
+    ; bottom edge does. `sheet-below` is the one line that covers the common
+    ; case; a `@media` block setting `presentation` is the general route, and
+    ; both end up here.
+    fn presentationOf:string (surface:EVGElement) {
+        def p:string surface.presentation
+        if ((strlen p) == 0) {
+            p = "anchored"
+        }
+        if (surface.sheetBelow > 0.0) {
+            if (pageWidth <= surface.sheetBelow) {
+                p = "sheet"
+            }
+        }
+        return p
+    }
+
+    ; A new box for a surface, and its children laid out in it again. A sheet
+    ; is as wide as the page and a menu is as wide as its content, so the two
+    ; are not the same layout of the same children — text rewraps, a row that
+    ; was two lines becomes one. Returns the content height that came out.
+    fn resizeSurface:double (surface:EVGElement w:double h:double) {
+        surface.calculatedWidth = w
+        surface.calculatedHeight = h
+        surface.calculatedInnerWidth = (surface.box.getInnerWidth(w))
+        surface.calculatedInnerHeight = (surface.box.getInnerHeight(h))
+        def kid:int 0
+        while (kid < (surface.getChildCount())) {
+            def kc:EVGElement (surface.getChild(kid))
+            kc.resetLayoutState()
+            kid = (kid + 1)
+        }
+        if ((surface.getChildCount()) == 0) {
+            return 0.0
+        }
+        def content:double (this.layoutChildren(surface))
+        this.mirrorChildren(surface)
+        return content
+    }
+
+    fn setSurfaceHeight:void (surface:EVGElement h:double) {
+        surface.calculatedHeight = h
+        surface.calculatedInnerHeight = (surface.box.getInnerHeight(h))
+    }
+
+    ; A sheet: the page's full width, along its bottom edge, as tall as its
+    ; content needs and never taller than the page.
+    fn sheetHeight:double (surface:EVGElement) {
+        def chrome:double (surface.calculatedHeight - surface.calculatedInnerHeight)
+        def had:double surface.calculatedHeight
+        def content:double (this.resizeSurface(surface pageWidth had))
+        def h:double had
+        if ((surface.getChildCount()) > 0) {
+            h = (content + chrome)
+        }
+        if surface.height.isSet {
+            h = surface.height.pixels
+        }
+        if (h > pageHeight) {
+            h = pageHeight
+            surface.overlayClamped = true
+        }
+        this.setSurfaceHeight(surface h)
+        return h
+    }
+
+    ; --- position-try ------------------------------------------------------------
+    ;
+    ; The areas a surface may be placed in, in the order they are tried: the
+    ; one it declared, then `position-try-fallbacks`, then — always — the
+    ; opposite side. That last candidate is the FLIP this pass has done since
+    ; it was written, kept as the final entry so a surface that declares no
+    ; fallbacks behaves exactly as it did before there were any.
+    fn tryCandidates:void (surface:EVGElement sides:[string] aligns:[string]) {
+        push sides surface.overlaySide
+        push aligns surface.overlayAlign
+        def spec:string surface.positionTryFallbacks
+        if ((strlen spec) > 0) {
+            def parts:[string] (EVGLayout.splitList(spec))
+            def i:int 0
+            while (i < (array_length parts)) {
+                def area:string (itemAt parts i)
+                def sd:string (EVGElement.areaSide(area))
+                if ((strlen sd) == 0) {
+                    this.warn(("position-try-fallbacks: \"" + area + "\" is not a position-area"))
+                } {
+                    push sides sd
+                    push aligns (EVGElement.areaAlign(area))
+                }
+                i = (i + 1)
+            }
+        }
+        push sides (EVGLayout.oppositeSide(surface.overlaySide))
+        push aligns surface.overlayAlign
+    }
+
+    sfn splitList:[string] (spec:string) {
+        def out:[string]
+        def cur:string ""
+        def i:int 0
+        def n:int (strlen spec)
+        while (i <= n) {
+            def brk:boolean (i == n)
+            if (brk == false) {
+                if ((charAt spec i) == 44) {
+                    brk = true
+                }
+            }
+            if brk {
+                def t:string (trim cur)
+                if ((strlen t) > 0) {
+                    push out t
+                }
+                cur = ""
+            } {
+                cur = (cur + (substring spec i (i + 1)))
+            }
+            i = (i + 1)
+        }
+        return out
+    }
+
+    ; Where one candidate would put the surface, and what it would cost: how
+    ; many pixels of it would be off the page, and how much free room is left
+    ; on that side. The first number decides whether a candidate is usable at
+    ; all; the second is what `position-try-order: most-space` maximises.
+    fn overlaySpot:OverlaySpot (side:string align:string ax:double ay:double aw:double ah:double w:double h:double gap:double) {
+        def spot (new OverlaySpot())
+        def x:double 0.0
+        def y:double 0.0
+        if (side == "top") {
+            x = (this.overlayCross(ax aw w align))
+            y = ((ay - h) - gap)
+        }
+        if (side == "bottom") {
+            x = (this.overlayCross(ax aw w align))
+            y = ((ay + ah) + gap)
+        }
+        if (side == "right") {
+            x = ((ax + aw) + gap)
+            y = (this.overlayCross(ay ah h align))
+        }
+        if (side == "left") {
+            x = ((ax - w) - gap)
+            y = (this.overlayCross(ay ah h align))
+        }
+        if (side == "center") {
+            x = ((pageWidth - w) / 2.0)
+            y = ((pageHeight - h) / 2.0)
+        }
+        spot.x = x
+        spot.y = y
+        spot.room = (this.overlayRoom(side ax ay aw ah w h gap))
+        def over:double 0.0
+        if (x < 0.0) {
+            over = (over - x)
+        }
+        def right:double ((x + w) - pageWidth)
+        if (right > 0.0) {
+            over = (over + right)
+        }
+        if (y < 0.0) {
+            over = (over - y)
+        }
+        def below:double ((y + h) - pageHeight)
+        if (below > 0.0) {
+            over = (over + below)
+        }
+        spot.over = over
+        return spot
+    }
+
+    ; An edge of the anchor, in page coordinates — what `anchor(right)` means.
+    sfn anchorEdgeX:double (a:EVGElement side:string) {
+        if (side == "right") {
+            return (a.calculatedX + a.calculatedWidth)
+        }
+        if (side == "center") {
+            return (a.calculatedX + (a.calculatedWidth / 2.0))
+        }
+        return a.calculatedX
+    }
+
+    sfn anchorEdgeY:double (a:EVGElement side:string) {
+        if (side == "bottom") {
+            return (a.calculatedY + a.calculatedHeight)
+        }
+        if (side == "center") {
+            return (a.calculatedY + (a.calculatedHeight / 2.0))
+        }
+        return a.calculatedY
+    }
+
+    ; `left: anchor(right)`, `top: calc(anchor(center) - 16px)`: the author has
+    ; said where each EDGE goes, so none of the area machinery applies — there
+    ; is no side to flip and no alignment to shift. Both insets on an axis
+    ; stretch the box between them, the same rule `layoutAbsolute` follows for
+    ; `left` and `right` together.
+    fn placeByAnchorInsets:void (surface:EVGElement parent:EVGElement) {
+        def maybe@(optional):EVGElement (this.findOverlayAnchor(surface parent))
+        if (null? maybe) {
+            push overlayErrors (surface.id + ": anchor() has no anchor — name one with `position-anchor`")
+            return
+        }
+        def a:EVGElement (unwrap maybe)
+        def w:double surface.calculatedWidth
+        def h:double surface.calculatedHeight
+        def x:double surface.calculatedX
+        def y:double surface.calculatedY
+
+        def hasL:boolean ((strlen surface.anchorLeftSide) > 0)
+        def hasR:boolean ((strlen surface.anchorRightSide) > 0)
+        def hasT:boolean ((strlen surface.anchorTopSide) > 0)
+        def hasB:boolean ((strlen surface.anchorBottomSide) > 0)
+        def lx:double ((EVGLayout.anchorEdgeX(a surface.anchorLeftSide)) + surface.anchorLeftOffset)
+        def rx:double ((EVGLayout.anchorEdgeX(a surface.anchorRightSide)) + surface.anchorRightOffset)
+        def ty:double ((EVGLayout.anchorEdgeY(a surface.anchorTopSide)) + surface.anchorTopOffset)
+        def by:double ((EVGLayout.anchorEdgeY(a surface.anchorBottomSide)) + surface.anchorBottomOffset)
+
+        if (hasL && hasR) {
+            x = lx
+            def spanW:double (rx - lx)
+            if (spanW > 0.0) {
+                this.resizeSurface(surface spanW h)
+                w = spanW
+            }
+        } {
+            if hasL {
+                x = lx
+            }
+            if hasR {
+                x = (rx - w)
+            }
+        }
+        if (hasT && hasB) {
+            y = ty
+            def spanH:double (by - ty)
+            if (spanH > 0.0) {
+                this.setSurfaceHeight(surface spanH)
+                h = spanH
+            }
+        } {
+            if hasT {
+                y = ty
+            }
+            if hasB {
+                y = (by - h)
+            }
+        }
+
+        surface.overlayPlacedSide = "anchor"
+        surface.overlayPlacedAlign = ""
+        surface.overlayPlacedPresentation = "anchored"
+        this.finishOverlay(surface x y)
+    }
+
+    fn placeOverlay:void (surface:EVGElement parent:EVGElement) {
+        def w:double surface.calculatedWidth
+        def h:double surface.calculatedHeight
+        def x:double 0.0
+        def y:double 0.0
+        surface.overlayClamped = false
+        surface.overlayPlacedAlign = surface.overlayAlign
+
+        ; EDGES BEFORE SIDES. `anchor()` in an inset is a different statement
+        ; from `position-area`: it places one edge of this box on one edge of
+        ; the anchor, which is what a badge hanging off a corner needs and
+        ; what no area can say.
+        if (surface.hasAnchorInsets()) {
+            this.placeByAnchorInsets(surface parent)
+            return
+        }
+
+        ; PRESENTATION FIRST, because it decides whether the anchor is
+        ; consulted at all. A sheet is not positioned against anything.
+        def pres:string (this.presentationOf(surface))
+        if (pres == "fullscreen") {
+            this.resizeSurface(surface pageWidth pageHeight)
+            surface.overlayPlacedSide = "cover"
+            surface.overlayPlacedPresentation = "fullscreen"
+            this.finishOverlay(surface 0.0 0.0)
+            return
+        }
+        if (pres == "sheet") {
+            def sheetH:double (this.sheetHeight(surface))
+            surface.overlayPlacedSide = "bottom"
+            surface.overlayPlacedAlign = "start"
+            surface.overlayPlacedPresentation = "sheet"
+            this.finishOverlay(surface 0.0 (pageHeight - sheetH))
+            return
+        }
+        surface.overlayPlacedPresentation = "anchored"
+
+        if (surface.overlaySide == "cover") {
+            ; The page itself: a modal's backdrop. It is sized here rather than
+            ; with `width: 100%` because a percentage resolves against the
+            ; PARENT, and the parent of a dialog's backdrop is whatever part of
+            ; the page happened to declare the dialog — a card, a toolbar, a
+            ; row. A backdrop that covers its card and not the page is the
+            ; thing it exists to prevent.
+            x = 0.0
+            y = 0.0
+            this.resizeSurface(surface pageWidth pageHeight)
+            w = pageWidth
+            h = pageHeight
+            surface.overlayPlacedSide = "cover"
+        } {
+        if (surface.overlaySide == "center") {
+            ; Centred on the page: a modal, which has no anchor by definition.
+            if surface.fitViewport {
+                if (h > pageHeight) {
+                    h = pageHeight
+                    this.setSurfaceHeight(surface h)
+                    surface.overlayClamped = true
+                }
+            }
+            x = ((pageWidth - w) / 2.0)
+            y = ((pageHeight - h) / 2.0)
+            surface.overlayPlacedSide = "center"
+        } {
+        if (surface.overlaySide == "free") {
+            ; Wherever it was put. A window someone has dragged has no anchor
+            ; and no side: its owner holds the coordinates and this pass takes
+            ; them as given. It is still an overlay — out of its parent's flow,
+            ; painted above the page, hit-tested in front — and that is the
+            ; only reason it comes through here at all.
+            ;
+            ; Not clamped to the page either. Where a window is allowed to go
+            ; is its controller's rule, not the layout's: `WindowCtl` keeps
+            ; enough of it on screen to grab, and a different owner might want
+            ; a palette that hangs off the edge.
+            x = surface.overlayX
+            y = surface.overlayY
+            surface.overlayPlacedSide = "free"
+        } {
+            def maybe@(optional):EVGElement (this.findOverlayAnchor(surface parent))
+            if (null? maybe) {
+                ; Named, not silently at (0,0). An unanchored surface in the
+                ; corner looks like a stylesheet mistake and is not one.
+                push overlayErrors (surface.id + ": overlay has no anchor — give a sibling `overlay-anchor-role`, name one with `position-anchor`, or use `overlay-side: center`")
+                return
+            }
+            def a:EVGElement (unwrap maybe)
+            def ax:double a.calculatedX
+            def ay:double a.calculatedY
+            def aw:double a.calculatedWidth
+            def ah:double a.calculatedHeight
+            def gap:double surface.overlayGap
+
+            ; Try each candidate area and take the first that is wholly on the
+            ; page — or, with `position-try-order: most-space`, the one with
+            ; the most room left over. When NONE fits, the one that hangs off
+            ; by the least wins: a surface half off the page is worse than one
+            ; that covers its anchor.
+            def sides:[string]
+            def aligns:[string]
+            this.tryCandidates(surface sides aligns)
+            def mostSpace:boolean (surface.positionTryOrder == "most-space")
+            def bestFit:int (0 - 1)
+            def bestFitRoom:double 0.0
+            def bestOver:int 0
+            def bestOverVal:double 0.0
+            def ci:int 0
+            while (ci < (array_length sides)) {
+                def cs:string (itemAt sides ci)
+                def ca:string (itemAt aligns ci)
+                def probe:OverlaySpot (this.overlaySpot(cs ca ax ay aw ah w h gap))
+                if (ci == 0) {
+                    bestOverVal = probe.over
+                } {
+                    if (probe.over < bestOverVal) {
+                        bestOver = ci
+                        bestOverVal = probe.over
+                    }
+                }
+                if (probe.over <= 0.0) {
+                    if (bestFit < 0) {
+                        bestFit = ci
+                        bestFitRoom = probe.room
+                    } {
+                        if mostSpace {
+                            if (probe.room > bestFitRoom) {
+                                bestFit = ci
+                                bestFitRoom = probe.room
+                            }
+                        }
+                    }
+                }
+                ci = (ci + 1)
+            }
+            def pick:int bestOver
+            if (bestFit >= 0) {
+                pick = bestFit
+            }
+            def side:string (itemAt sides pick)
+            def align:string (itemAt aligns pick)
+            def spot:OverlaySpot (this.overlaySpot(side align ax ay aw ah w h gap))
+
+            ; `fit-viewport`: take the room there is rather than running off
+            ; the page. The surface then clips, and `scrollHeight` says how far
+            ; there is to scroll — which is the rest of the menu.
+            if surface.fitViewport {
+                def availH:double pageHeight
+                if ((side == "top") || (side == "bottom")) {
+                    availH = (spot.room + h)
+                }
+                if (availH < h) {
+                    h = availH
+                    if (h < 0.0) {
+                        h = 0.0
+                    }
+                    this.setSurfaceHeight(surface h)
+                    surface.overlayClamped = true
+                    spot = (this.overlaySpot(side align ax ay aw ah w h gap))
+                }
+            }
+
+            surface.overlayPlacedSide = side
+            surface.overlayPlacedAlign = align
+            x = spot.x
+            y = spot.y
+
+            ; Shift onto the page. Both axes are clamped, not only the cross
+            ; one: after a flip that did not help there is nothing else left to
+            ; do, and a surface half off the page is worse than one that covers
+            ; its anchor.
+            x = (EVGLayout.clampTo(x 0.0 (pageWidth - w)))
+            y = (EVGLayout.clampTo(y 0.0 (pageHeight - h)))
+        }
+        }
+        }
+
+        this.finishOverlay(surface x y)
+    }
+
+    ; Move the surface AND everything under it — the same helper a page break
+    ; already uses. The subtree was laid out relative to wherever layoutAbsolute
+    ; left the surface, so the whole thing travels together.
+    ;
+    ; Then, if it clips, how far there is to scroll. The extents are RE-MEASURED
+    ; and not re-applied: `applyScroll` already ran during the normal pass and
+    ; translated the children by `scrollTop`, and doing that twice would move
+    ; them twice. What is stale after a clamp is only the extent.
+    fn finishOverlay:void (surface:EVGElement x:double y:double) {
+        surface.overlayX = x
+        surface.overlayY = y
+        this.translateSubtree(surface (x - surface.calculatedX) (y - surface.calculatedY))
+        if (surface.clipsContent()) {
+            this.measureScrollExtent(surface)
+        }
+    }
+
+    ; Start, centre or end along the axis the side does not occupy.
+    fn overlayCross:double (anchorStart:double anchorSize:double size:double align:string) {
+        if (align == "center") {
+            return (anchorStart + ((anchorSize - size) / 2.0))
+        }
+        if (align == "end") {
+            return ((anchorStart + anchorSize) - size)
+        }
+        return anchorStart
+    }
+
+    fn getOverlayErrors:[string] () {
+        return overlayErrors
+    }
+
+    fn printLayout:void (element:EVGElement indent:int) {
+        ; Print layout tree for debugging
+        def indentStr:string ""
+        def i:int 0
+        while (i < indent) {
+            indentStr = indentStr + "  "
+            i = i + 1
+        }
+        
+        print (indentStr + element.tagName + " id=\"" + element.id + "\" (" + (to_string element.calculatedX) + ", " + (to_string element.calculatedY) + ") " + (to_string element.calculatedWidth) + "x" + (to_string element.calculatedHeight))
+        
+        def childCount:int (element.getChildCount())
+        i = 0
+        while (i < childCount) {
+            def child:EVGElement (element.getChild(i))
+            this.printLayout(child (indent + 1))
+            i = i + 1
+        }
+    }
+    
+    ; =========================================================================
+    ; CSS Grid subset (see EVGGrid.rgr for the supported syntax)
+    ; =========================================================================
+    ;
+    ; Auto-flow row placement over a fixed column count. Items may span columns
+    ; and rows; an occupancy map keeps spans from overlapping. Returns the total
+    ; content height, same contract as layoutChildren.
+    ; What an item contributes to an intrinsic size — CSS's `max-content` and
+    ; `min-content`, and now for CONTAINERS as well as leaves.
+    ;
+    ; A definite width is both the min- and max-content size, so it is the
+    ; whole answer. A text leaf contributes its longest unbroken line (or its
+    ; longest word, for the min). A CONTAINER contributes the sum of its
+    ; children along the row axis and the widest of them down the column axis,
+    ; plus gaps and its own chrome — which is the recursive definition, and it
+    ; terminates on the leaves above.
+    ;
+    ; This used to stop at the leaves, and the comment here said why: sizing a
+    ; container to its subtree needs a real intrinsic pass. This IS that pass.
+    ; It was written when the alternative was reporting a made-up number; the
+    ; alternative now is every component hand-setting a width its own children
+    ; already know, which is worse and does not stay correct.
+    fn intrinsicWidthOf:double (el:EVGElement) {
+        return (this.intrinsicWidth(el false))
+    }
+
+    ; The narrowest the item can be squeezed to — for text, its longest word.
+    fn minIntrinsicWidthOf:double (el:EVGElement) {
+        return (this.intrinsicWidth(el true))
+    }
+
+    ; The intrinsic width of a kept subtree is kept with it: measuring it
+    ; is a walk of the subtree, and a subtree that is the same has the
+    ; same width.
+    fn intrinsicWidth:double (el:EVGElement wantMin:boolean) {
+        if (el.keepLayout && (el.hasLayout && el.layoutClean)) {
+            if wantMin {
+                if el.hasIntrinsicMin {
+                    return el.intrinsicMin
+                }
+            } {
+                if el.hasIntrinsicMax {
+                    return el.intrinsicMax
+                }
+            }
+            def measured:double (this.intrinsicWidthNow(el wantMin))
+            if wantMin {
+                el.intrinsicMin = measured
+                el.hasIntrinsicMin = true
+            } {
+                el.intrinsicMax = measured
+                el.hasIntrinsicMax = true
+            }
+            return measured
+        }
+        return (this.intrinsicWidthNow(el wantMin))
+    }
+
+    fn intrinsicWidthNow:double (el:EVGElement wantMin:boolean) {
+        def outer:double 0.0
+        ; A PERCENTAGE IS NOT A DEFINITE WIDTH HERE. Intrinsic sizing is the
+        ; question "how wide would this be with unlimited / with no space",
+        ; asked while the containing block's width is still being worked out —
+        ; so there is nothing for a percentage to be a percentage OF, and CSS
+        ; says such a width behaves as `auto` for the contribution. Taking it
+        ; as definite reads it as whatever the last resolve happened to leave
+        ; behind, which in the middle of a flex pass is zero: a cell holding
+        ; `.chartBox { width: 100% }` around a 220px chart reported a
+        ; min-content width of NOTHING, and the automatic minimum that is
+        ; supposed to stop the cell being squeezed below its contents let it
+        ; be squeezed to half a row instead.
+        def definite:boolean el.width.isSet
+        if (el.width.isPercent()) {
+            definite = false
+        }
+        if definite {
+            ; A definite width is both the min- and the max-content size.
+            outer = el.width.pixels
+        } {
+            def textContent:string el.textContent
+            if ((strlen textContent) > 0) {
+                if ((el.getChildCount()) == 0) {
+                    def fs:double el.inheritedFontSize
+                    if el.fontSize.isSet {
+                        fs = el.fontSize.pixels
+                    }
+                    if (fs <= 0.0) {
+                        fs = 14.0
+                    }
+                    def contentW:double 0.0
+                    if wantMin {
+                        contentW = (textEngine.minLineWidthSpaced(textContent (el.effectiveFontFamily()) fs el.letterSpacing))
+                    } {
+                        contentW = (textEngine.maxLineWidthSpaced(textContent (el.effectiveFontFamily()) fs el.letterSpacing))
+                    }
+                    outer = (contentW + (el.box.getHorizontalChrome()))
+                }
+            } {
+                outer = (this.intrinsicOfChildren(el wantMin))
+            }
+        }
+        if (outer <= 0.0) {
+            return 0.0
+        }
+        return ((outer + el.box.marginLeftPx) + el.box.marginRightPx)
+    }
+
+    ; Is this element laid out along a row? An element with no parent, or one
+    ; whose parent is not a flex container, is treated as a row item — which is
+    ; the block default: `width: auto` on a block fills, and the caller has
+    ; already set `width = parentWidth` before asking.
+    fn parentIsRow:boolean (el:EVGElement) {
+        return layingOutAlongRow
+    }
+
+    ; Does a width-less child of this container shrink to its content?
+    ; Only when the container is a column that has explicitly asked for
+    ; something other than the stretch.
+    fn crossShrinksUnder:boolean (parent:EVGElement) {
+        if (parent.flexDirection != "column") {
+            return false
+        }
+        def a:string parent.alignItems
+        if (a == "center") {
+            return true
+        }
+        if (a == "flex-end") {
+            return true
+        }
+        if (a == "end") {
+            return true
+        }
+        return false
+    }
+
+    ; Whether `width: auto` on this element means fit-content rather than
+    ; stretch: along a row it always does, and down a column it does when the
+    ; parent aligns its items anywhere but the stretch.
+    fn crossAxisFits:boolean (el:EVGElement) {
+        if (this.parentIsRow(el)) {
+            return true
+        }
+        return columnCrossShrinks
+    }
+
+    ; The recursive half. A row adds its children up; a column takes the widest.
+    ; Absolutely positioned children are out of flow and contribute nothing, the
+    ; same way they contribute nothing to the flow itself.
+    ;
+    ; `wrap` is treated as a row here on purpose: max-content is defined as the
+    ; size the box would take with unlimited space, and with unlimited space a
+    ; wrapping row does not wrap.
+    fn intrinsicOfChildren:double (el:EVGElement wantMin:boolean) {
+        def n:int (el.getChildCount())
+        if (n == 0) {
+            return 0.0
+        }
+        def isColumn:boolean ((el.flexDirection == "column") || (el.flexDirection == "column-reverse"))
+        def gapPx:double 0.0
+        if el.gap.isSet {
+            gapPx = el.gap.pixels
+        }
+        if el.columnGap.isSet {
+            gapPx = el.columnGap.pixels
+        }
+
+        def total:double 0.0
+        def widest:double 0.0
+        def counted:int 0
+        def i:int 0
+        while (i < n) {
+            def kid:EVGElement (el.getChild(i))
+            ; Out of flow — absolute, or `display: none` — takes no share of
+            ; the intrinsic size. This asked the position string rather than
+            ; `isAbsolute`, so a rail the sheet had folded away still claimed
+            ; its icons' width from the row and the page beside it came up
+            ; 32px short.
+            if (kid.isAbsolute || (kid.isHidden())) {
+            } {
+                ; RESOLVE THE KID FIRST. Its padding and border live in
+                ; `kid.box` as pixels, and `resolveUnits` is what puts them
+                ; there — the flow calls it on each child just before laying it
+                ; out, so a child IS resolved by the time it is measured, and a
+                ; GRANDCHILD is not. This pass walks grandchildren.
+                ;
+                ; The symptom was a container narrower than the things inside
+                ; it: a footer's two buttons came to 216 and their row was
+                ; sized 164, which is 216 less exactly two buttons' worth of
+                ; chrome, and the pair hung out over the right edge of the
+                ; card. "Containers leak over" is what a missing padding term
+                ; looks like from the outside.
+                ;
+                ; The basis is this element's own inner box, which is what the
+                ; flow will use a moment later. It matters only for a
+                ; PERCENTAGE padding, whose max-content size is undefined in
+                ; CSS anyway and which nothing in this gallery uses; `px` and
+                ; `em` resolve the same whatever they are given.
+                ;
+                ; AND A MEASUREMENT MUST NOT FREEZE THE RESOLUTION. `el` is
+                ; being MEASURED, so its inner width is not decided yet — a
+                ; `flex: 1` item is asked for its min-content size in the
+                ; middle of the pass that works out how wide it gets, and
+                ; `calculatedInnerWidth` is still zero there. Resolving a kid
+                ; against that zero is harmless for the measure (a percentage
+                ; contributes nothing to min-content, which is what CSS says
+                ; too) and fatal afterwards: `resolveUnits` latches
+                ; `unitsResolved`, so `width: 100%` stayed at the 0 it was
+                ; measured with and the flow never asked again.
+                ;
+                ; That is the charts sliding off the left of the showcase
+                ; pages. `.chartBox { width: 100%; align-items: center }` in a
+                ; `flex: 1` cell came out zero wide, and centring a 220px chart
+                ; in a 0px box puts its left edge at -110.
+                ;
+                ; So a kid that was NOT resolved before this pass is handed
+                ; back unresolved, and the flow resolves it for real against
+                ; the width it actually got. A kid that was already resolved
+                ; keeps what it had — the flow resolved it, not this.
+                def wasResolved:boolean kid.unitsResolved
+                kid.resolveUnits(el.calculatedInnerWidth el.calculatedInnerHeight)
+                def w:double (this.intrinsicWidth(kid wantMin))
+                if (wasResolved == false) {
+                    kid.unitsResolved = false
+                }
+                if (w > widest) {
+                    widest = w
+                }
+                if (counted > 0) {
+                    total = (total + gapPx)
+                }
+                total = (total + w)
+                counted = (counted + 1)
+            }
+            i = (i + 1)
+        }
+        def inner:double total
+        if isColumn {
+            inner = widest
+        }
+        if (inner <= 0.0) {
+            return 0.0
+        }
+        return (inner + (el.box.getHorizontalChrome()))
+    }
+
+    ; The grid's out-of-flow children, once the tracks are sized.
+    ;
+    ; `layoutGrid` gathers the in-flow items and leaves an `isAbsolute` child
+    ; out of the placement, which is right — an absolute box takes no track.
+    ; What was missing is this: nothing laid it out afterwards either, so it
+    ; kept zero size at the page origin. `contentHeight` is the rows' own
+    ; height, used when the container has no definite one, so a percentage
+    ; offset resolves against the box the grid actually came out as.
+    fn layoutGridOutOfFlow:void (parent:EVGElement innerWidth:double contentHeight:double startX:double startY:double) {
+        def n:int (parent.getChildCount())
+        def i:int 0
+        while (i < n) {
+            def c:EVGElement (parent.getChild(i))
+            if c.isAbsolute {
+                c.unitsResolved = false
+                c.resolveUnits(innerWidth contentHeight)
+                this.layoutOutOfFlowChild(parent c innerWidth contentHeight startX startY true)
+            }
+            i = (i + 1)
+        }
+    }
+
+    fn layoutGrid:double (parent:EVGElement) {
+        def innerWidth:double parent.calculatedInnerWidth
+        def innerHeight:double parent.calculatedInnerHeight
+
+        def startX:double (parent.calculatedX + parent.box.borderWidthPx + parent.box.paddingLeftPx)
+        def startY:double (parent.calculatedY + parent.box.borderWidthPx + parent.box.paddingTopPx)
+
+        ; `row-gap` / `column-gap` fall back to `gap` when unset.
+        def colGapPx:double 0.0
+        def rowGapPx:double 0.0
+        if parent.gap.isSet {
+            parent.gap.rootFontSize = parent.rootFontSize
+            parent.gap.resolve(innerWidth parent.inheritedFontSize)
+            colGapPx = parent.gap.pixels
+            rowGapPx = parent.gap.pixels
+        }
+        if parent.columnGap.isSet {
+            parent.columnGap.rootFontSize = parent.rootFontSize
+            parent.columnGap.resolve(innerWidth parent.inheritedFontSize)
+            colGapPx = parent.columnGap.pixels
+        }
+        if parent.rowGap.isSet {
+            parent.rowGap.rootFontSize = parent.rootFontSize
+            parent.rowGap.resolve(innerHeight parent.inheritedFontSize)
+            rowGapPx = parent.rowGap.pixels
+        }
+
+        ; Columns. With no template a grid is a single full-width column, which
+        ; keeps `display: grid` from silently collapsing content to zero width.
+        def colSpec:string parent.gridTemplateColumns
+        if ((strlen colSpec) == 0) {
+            colSpec = "1fr"
+        }
+
+        ; grid-template-columns: subgrid — adopt the enclosing grid's tracks for
+        ; the span this element occupies, so a nested card's columns line up with
+        ; every other card's instead of each one splitting its own width. The
+        ; parent filled these in before laying this element out; with no
+        ; enclosing grid there is nothing to inherit and it falls back to 1fr.
+        if (colSpec == "subgrid") {
+            if ((array_length parent.subgridColumnSizes) > 0) {
+                def sgSpec:string ""
+                def sg:int 0
+                while (sg < (array_length parent.subgridColumnSizes)) {
+                    if (sg > 0) {
+                        sgSpec = sgSpec + " "
+                    }
+                    sgSpec = sgSpec + (to_string (itemAt parent.subgridColumnSizes sg)) + "px"
+                    sg = (sg + 1)
+                }
+                colSpec = sgSpec
+            } {
+                ; During an enclosing grid's content-measuring pass the sizes
+                ; do not exist yet, and falling back is correct rather than
+                ; wrong — subgridPending is what tells that apart from having
+                ; no enclosing grid at all.
+                if (parent.subgridPending == false) {
+                    this.warn("grid-template-columns: subgrid has no enclosing grid to inherit tracks from; falling back to 1fr")
+                }
+                colSpec = "1fr"
+            }
+        }
+        ; grid-template-areas names a rectangle per area and, when no explicit
+        ; column template was given, decides the column count.
+        def areas:EVGGridAreas (EVGGridAreas.parse(parent.gridTemplateAreas))
+        def hasAreas:boolean false
+        if ((strlen parent.gridTemplateAreas) > 0) {
+            if (areas.hadError) {
+                this.warn(("grid-template-areas: " + areas.errorText))
+            } {
+                hasAreas = true
+                if ((strlen parent.gridTemplateColumns) == 0) {
+                    ; Derive the columns from the picture.
+                    def derived:string ""
+                    def dc:int 0
+                    while (dc < areas.columns) {
+                        if (dc > 0) {
+                            derived = derived + " "
+                        }
+                        derived = derived + "1fr"
+                        dc = (dc + 1)
+                    }
+                    colSpec = derived
+                }
+            }
+        }
+
+        def cols:EVGGridTemplate (EVGGridTemplate.parse(colSpec))
+        if (cols.hadError) {
+            this.warn(("grid-template-columns: " + cols.errorText))
+        }
+        def colCount:int (cols.count())
+        if (colCount < 1) {
+            return 0.0
+        }
+        def colGapTotal:double ((to_double (colCount - 1)) * colGapPx)
+        ; Column sizing is deferred until after placement: an `auto` or
+        ; `fit-content()` track is sized from the items that land in it, so
+        ; the tracks cannot be resolved until it is known which those are.
+        ; Nothing between here and there reads a track extent.
+
+        ; The row template is parsed here as well as where the rows are sized,
+        ; because a `grid-row` naming a line has to be resolved before
+        ; placement runs. With no row template it holds no names, and every
+        ; named row line is reported as unknown — which is the truth.
+        def rowTemplateSpec:string parent.gridTemplateRows
+        if (rowTemplateSpec == "subgrid") {
+            ; Inherited tracks carry no names of their own.
+            rowTemplateSpec = ""
+        }
+        def rowTemplate:EVGGridTemplate (EVGGridTemplate.parse(rowTemplateSpec))
+
+        ; Collect the in-flow children and their placements.
+        def items:[EVGElement]
+        def colStarts:[int]
+        def colSpans:[int]
+        def rowStarts:[int]
+        def rowSpans:[int]
+        def i:int 0
+        def childCount:int (parent.getChildCount())
+        while (i < childCount) {
+            def c:EVGElement (parent.getChild(i))
+            c.inheritProperties(parent)
+            c.resolveUnits(innerWidth innerHeight)
+            ; Claim it now: the tracks cannot be handed over until they are
+            ; sized, but the child needs to know an enclosing grid exists long
+            ; before that — it may be laid out during the measuring pass below.
+            if ((c.gridTemplateColumns == "subgrid") || (c.gridTemplateRows == "subgrid")) {
+                c.subgridPending = true
+            }
+            if (c.isAbsolute == false) {
+                ; Named lines live on the container's template, so the
+                ; placement is parsed first and pointed at real lines here,
+                ; where both are in hand.
+                def cp:EVGGridPlacement (EVGGridPlacement.parse(c.gridColumn))
+                cp.resolveNames(cols)
+                if (cp.hadError) {
+                    this.warn(("grid-column: " + cp.errorText))
+                }
+                def rp:EVGGridPlacement (EVGGridPlacement.parse(c.gridRow))
+                rp.resolveNames(rowTemplate)
+                if (rp.hadError) {
+                    this.warn(("grid-row: " + rp.errorText))
+                }
+                ; grid-area names win over grid-column/grid-row: the picture is
+                ; the more specific statement of intent.
+                if hasAreas {
+                    if ((strlen c.gridArea) > 0) {
+                        def at:int (areas.indexOfName(c.gridArea))
+                        if (at >= 0) {
+                            cp.start = ((itemAt areas.colStart at) + 1)
+                            cp.span = (itemAt areas.colSpan at)
+                            rp.start = ((itemAt areas.rowStart at) + 1)
+                            rp.span = (itemAt areas.rowSpan at)
+                        } {
+                            this.warn(("grid-area: no area named \"" + c.gridArea + "\" in grid-template-areas"))
+                        }
+                    }
+                }
+                def cspan:int cp.span
+                if (cspan > colCount) {
+                    cspan = colCount
+                }
+                push items c
+                push colStarts cp.start
+                push colSpans cspan
+                push rowStarts rp.start
+                push rowSpans rp.span
+            }
+            i = (i + 1)
+        }
+        def itemCount:int (array_length items)
+        if (itemCount == 0) {
+            ; No tracks to size, but an overlay or a connector may still be
+            ; sitting here out of flow.
+            this.layoutGridOutOfFlow(parent innerWidth innerHeight startX startY)
+            return 0.0
+        }
+
+        ; --- placement -------------------------------------------------------
+        def isDense:boolean ((indexOf parent.gridAutoFlow "dense") >= 0)
+        ; occupancy[(row * colCount) + col]; grown a row at a time.
+        def occupied:[boolean]
+        def rowsUsed:int 0
+        def placedRow:[int]
+        def placedCol:[int]
+
+        def cursorRow:int 0
+        def cursorCol:int 0
+        def k:int 0
+        while (k < itemCount) {
+            def wantCol:int (itemAt colStarts k)
+            def wantRow:int (itemAt rowStarts k)
+            def span:int (itemAt colSpans k)
+            def rspan:int (itemAt rowSpans k)
+
+            def col:int 0
+            def row:int 0
+            if (wantCol > 0) {
+                col = (wantCol - 1)
+                if (col > (colCount - span)) {
+                    col = (colCount - span)
+                }
+                if (col < 0) {
+                    col = 0
+                }
+            }
+            if (wantRow > 0) {
+                row = (wantRow - 1)
+            }
+
+            if ((wantCol > 0) && (wantRow > 0)) {
+                ; Fully explicit placement — take it as given.
+            } {
+                ; Auto-flow: scan forward from the cursor for a free run of
+                ; `span` columns, wrapping to the next row when it does not fit.
+                if (wantRow > 0) {
+                    cursorRow = row
+                    cursorCol = 0
+                }
+                if (wantCol > 0) {
+                    ; Column pinned, row auto: find the first row where it is free.
+                    row = cursorRow
+                    while (this.gridOccupied(occupied colCount row col span rspan)) {
+                        row = (row + 1)
+                    }
+                } {
+                    ; grid-auto-flow: dense restarts the scan from the top for
+                    ; every item, so a later small item backfills a hole a wider
+                    ; one left behind. The default only ever moves forward,
+                    ; which keeps source order but can leave gaps.
+                    if isDense {
+                        row = 0
+                        col = 0
+                    } {
+                        row = cursorRow
+                        col = cursorCol
+                    }
+                    def searching:boolean true
+                    while searching {
+                        if ((col + span) > colCount) {
+                            row = (row + 1)
+                            col = 0
+                        } {
+                            if (this.gridOccupied(occupied colCount row col span rspan)) {
+                                col = (col + 1)
+                            } {
+                                searching = false
+                            }
+                        }
+                    }
+                    if (isDense == false) {
+                        cursorRow = row
+                        cursorCol = (col + span)
+                    }
+                }
+            }
+
+            ; Grow the occupancy map to cover this item, then mark it.
+            def needRows:int (row + rspan)
+            while (rowsUsed < needRows) {
+                def g:int 0
+                while (g < colCount) {
+                    push occupied false
+                    g = (g + 1)
+                }
+                rowsUsed = (rowsUsed + 1)
+            }
+            def rr:int 0
+            while (rr < rspan) {
+                def cc:int 0
+                while (cc < span) {
+                    def idx:int ((((row + rr) * colCount) + col) + cc)
+                    set occupied idx true
+                    cc = (cc + 1)
+                }
+                rr = (rr + 1)
+            }
+            push placedRow row
+            push placedCol col
+            k = (k + 1)
+        }
+
+        ; --- column sizing ---------------------------------------------------
+        ; Intrinsic tracks take the widest item placed in them. Only items that
+        ; occupy a single column contribute: an item spanning several has no
+        ; one track to charge, and CSS distributes it in a later step this
+        ; engine does not have — so it is left out rather than guessed at.
+        def colContent:[double]
+        def colMinContent:[double]
+        def ci:int 0
+        while (ci < colCount) {
+            push colContent 0.0
+            push colMinContent 0.0
+            ci = (ci + 1)
+        }
+        if (cols.hasIntrinsicTrack()) {
+            def ic:int 0
+            while (ic < (array_length items)) {
+                if ((itemAt colSpans ic) == 1) {
+                    def col2:int (itemAt placedCol ic)
+                    if (col2 < colCount) {
+                        def it:EVGElement (itemAt items ic)
+                        def w2:double (this.intrinsicWidthOf(it))
+                        if (w2 > (itemAt colContent col2)) {
+                            set colContent col2 w2
+                        }
+                        def m2:double (this.minIntrinsicWidthOf(it))
+                        if (m2 > (itemAt colMinContent col2)) {
+                            set colMinContent col2 m2
+                        }
+                    }
+                }
+                ic = (ic + 1)
+            }
+        }
+        cols.resolveWithContent((innerWidth - colGapTotal) colContent colMinContent)
+
+        ; --- row sizing ------------------------------------------------------
+        def rowSpec:string parent.gridTemplateRows
+        def rowSizes:[double]
+        def rowGapTotal:double 0.0
+        if (rowsUsed > 1) {
+            rowGapTotal = ((to_double (rowsUsed - 1)) * rowGapPx)
+        }
+
+        ; grid-template-rows: subgrid — adopt the enclosing grid's row tracks
+        ; for the rows this element occupies, so the pieces of a card line up
+        ; with every other card's instead of each one dividing its own height.
+        ;
+        ; The rows are handed down at final placement, by which point the
+        ; parent has sized them either from its own template or from its
+        ; content pass. That is why this could wait until the rest of grid was
+        ; in place: it needs the parent's rows to be settled, and they are.
+        def usingRowSubgrid:boolean false
+        if (rowSpec == "subgrid") {
+            if ((array_length parent.subgridRowSizes) > 0) {
+                usingRowSubgrid = true
+                def sgrSpec:string ""
+                def sgr:int 0
+                while (sgr < (array_length parent.subgridRowSizes)) {
+                    if (sgr > 0) {
+                        sgrSpec = sgrSpec + " "
+                    }
+                    sgrSpec = sgrSpec + (to_string (itemAt parent.subgridRowSizes sgr)) + "px"
+                    sgr = (sgr + 1)
+                }
+                rowSpec = sgrSpec
+            } {
+                if (parent.subgridPending == false) {
+                    this.warn("grid-template-rows: subgrid has no enclosing grid to inherit tracks from; falling back to content-sized rows")
+                }
+                rowSpec = ""
+            }
+        }
+
+        def haveTemplateRows:boolean false
+        if ((strlen rowSpec) > 0) {
+            ; Inherited rows are already absolute pixels, so they do not need
+            ; the container's own height to resolve against.
+            if (parent.hasDefiniteHeight || usingRowSubgrid) {
+                haveTemplateRows = true
+            }
+        }
+
+        if haveTemplateRows {
+            ; Explicit row tracks against a definite container height.
+            def rows:EVGGridTemplate (EVGGridTemplate.parse(rowSpec))
+            if (rows.hadError) {
+                this.warn(("grid-template-rows: " + rows.errorText))
+            }
+            rows.resolve((innerHeight - rowGapTotal))
+            def r2:int 0
+            while (r2 < rowsUsed) {
+                if (r2 < (rows.count())) {
+                    def tk:EVGGridTrack (rows.trackAt(r2))
+                    push rowSizes tk.sizePx
+                } {
+                    ; More rows than tracks: implicit rows repeat the last track.
+                    if ((rows.count()) > 0) {
+                        def lastTk:EVGGridTrack (rows.trackAt((rows.count()) - 1))
+                        push rowSizes lastTk.sizePx
+                    } {
+                        push rowSizes 0.0
+                    }
+                }
+                r2 = (r2 + 1)
+            }
+        } {
+            ; Content-sized rows: measure each single-row item at its cell width
+            ; and take the tallest per row. Items spanning rows are left out of
+            ; this max — they get whatever their spanned rows add up to.
+            def r3:int 0
+            while (r3 < rowsUsed) {
+                push rowSizes 0.0
+                r3 = (r3 + 1)
+            }
+            def m:int 0
+            while (m < itemCount) {
+                def it:EVGElement (itemAt items m)
+                def rspanM:int (itemAt rowSpans m)
+                def ri:int (itemAt placedRow m)
+                ; A row subgrid always spans several rows, so the span-1 rule
+                ; below would leave it out — and with only subgrid cards in the
+                ; grid every row would measure zero and the cards collapse.
+                ; With subgrid it is the grandchildren that size these rows, so
+                ; the card is measured on its own terms and the rows it worked
+                ; out are adopted one for one.
+                def isRowSubgrid:boolean (it.gridTemplateRows == "subgrid")
+                if ((rspanM == 1) || isRowSubgrid) {
+                    def cw:double (cols.extentOf((itemAt placedCol m) (itemAt colSpans m) colGapPx))
+                    def avail:double (cw - it.box.marginLeftPx - it.box.marginRightPx)
+                    ; Measure with auto height: clear any inherited flex height.
+                    it.calculatedFlexHeight = 0.0
+                    this.layoutElement(it 0.0 0.0 avail 0.0)
+                    if isRowSubgrid {
+                        def sub:int 0
+                        while (sub < rspanM) {
+                            if (sub < (array_length it.computedRowSizes)) {
+                                def sh:double (itemAt it.computedRowSizes sub)
+                                if (sh > (itemAt rowSizes (ri + sub))) {
+                                    set rowSizes (ri + sub) sh
+                                }
+                            }
+                            sub = (sub + 1)
+                        }
+                    } {
+                        def h:double (it.calculatedHeight + it.box.marginTopPx + it.box.marginBottomPx)
+                        if (h > (itemAt rowSizes ri)) {
+                            set rowSizes ri h
+                        }
+                    }
+                }
+                m = (m + 1)
+            }
+
+            ; An explicit row template on a container with no definite height
+            ; used to be dropped whole, so `grid-template-rows: 170px auto` on
+            ; an auto-height deck sized every row from content and the fixed
+            ; band vanished. A track that needs no container height to resolve
+            ; is applied here; a `%` or `fr` row genuinely does need one and is
+            ; left content-sized.
+            if ((strlen rowSpec) > 0) {
+                def declared:EVGGridTemplate (EVGGridTemplate.parse(rowSpec))
+                if (declared.hadError) {
+                    this.warn(("grid-template-rows: " + declared.errorText))
+                }
+                def dr:int 0
+                while (dr < rowsUsed) {
+                    if (dr < (declared.count())) {
+                        def dt:EVGGridTrack (declared.trackAt(dr))
+                        if (dt.kind == 0) {
+                            set rowSizes dr dt.value
+                        }
+                    }
+                    dr = (dr + 1)
+                }
+            }
+        }
+
+        ; --- final placement -------------------------------------------------
+        def p:int 0
+        while (p < itemCount) {
+            def el:EVGElement (itemAt items p)
+            def cIdx:int (itemAt placedCol p)
+            def rIdx:int (itemAt placedRow p)
+            def cSpan:int (itemAt colSpans p)
+            def rSpan:int (itemAt rowSpans p)
+
+            def cellW:double (cols.extentOf(cIdx cSpan colGapPx))
+            def cellH:double (this.gridRowExtent(rowSizes rIdx rSpan rowGapPx))
+            def offX:double (cols.offsetOf(cIdx colGapPx))
+            def offY:double (this.gridRowOffset(rowSizes rIdx rowGapPx))
+
+            el.calculatedX = (startX + offX + el.box.marginLeftPx)
+            el.calculatedY = (startY + offY + el.box.marginTopPx)
+
+            def boxW:double (cellW - el.box.marginLeftPx - el.box.marginRightPx)
+            def boxH:double (cellH - el.box.marginTopPx - el.box.marginBottomPx)
+            if (boxW < 0.0) {
+                boxW = 0.0
+            }
+            if (boxH < 0.0) {
+                boxH = 0.0
+            }
+
+            ; Grid items stretch to their cell by default (§7.1), which is what
+            ; photo cells want. An explicit height still wins: layoutElement only
+            ; consults calculatedFlexHeight when height.isSet is false.
+            if (boxH > 0.0) {
+                el.calculatedFlexHeight = boxH
+            }
+
+            ; Hand this cell's tracks down to a subgrid child before it lays
+            ; itself out. Both axes work the same way; the rows are simply
+            ; known later, which is the only reason columns landed first.
+            if (el.gridTemplateColumns == "subgrid") {
+                clear el.subgridColumnSizes
+                def sgi:int 0
+                while (sgi < cSpan) {
+                    def tk:EVGGridTrack (cols.trackAt(cIdx + sgi))
+                    push el.subgridColumnSizes tk.sizePx
+                    sgi = (sgi + 1)
+                }
+            }
+            if (el.gridTemplateRows == "subgrid") {
+                clear el.subgridRowSizes
+                def sgj:int 0
+                while (sgj < rSpan) {
+                    def rIdx2:int (rIdx + sgj)
+                    if (rIdx2 < (array_length rowSizes)) {
+                        push el.subgridRowSizes (itemAt rowSizes rIdx2)
+                    }
+                    sgj = (sgj + 1)
+                }
+            }
+
+            ; A grid item's containing block is its CELL, not the grid's
+            ; content box. Its units were resolved against the container before
+            ; the tracks were sized, so `width: 100%` on a cell came out as the
+            ; whole grid's width — every item in the album spread was laid out
+            ; at full size and simply overlapped. Resolve them again now that
+            ; the cell is known.
+            el.unitsResolved = false
+            el.resolveUnits(boxW boxH)
+
+            this.layoutElement(el el.calculatedX el.calculatedY boxW boxH)
+            p = (p + 1)
+        }
+
+        ; Leave the rows behind for an enclosing grid that has to size its own
+        ; rows around this one.
+        clear parent.computedRowSizes
+        def cr:int 0
+        while (cr < rowsUsed) {
+            push parent.computedRowSizes (itemAt rowSizes cr)
+            cr = (cr + 1)
+        }
+
+        def total:double 0.0
+        def s:int 0
+        while (s < rowsUsed) {
+            total = (total + (itemAt rowSizes s))
+            s = (s + 1)
+        }
+        total = (total + rowGapTotal)
+
+        def absH:double innerHeight
+        if (absH <= 0.0) {
+            absH = total
+        }
+        this.layoutGridOutOfFlow(parent innerWidth absH startX startY)
+
+        return total
+    }
+
+    ; True if any cell of the rspan x span block at (row, col) is already taken.
+    ; Rows beyond the current map are by definition free.
+    fn gridOccupied:boolean (occupied:[boolean] colCount:int row:int col:int span:int rspan:int) {
+        def total:int (array_length occupied)
+        def rr:int 0
+        while (rr < rspan) {
+            def cc:int 0
+            while (cc < span) {
+                def idx:int ((((row + rr) * colCount) + col) + cc)
+                if (idx < total) {
+                    if (itemAt occupied idx) {
+                        return true
+                    }
+                }
+                cc = (cc + 1)
+            }
+            rr = (rr + 1)
+        }
+        return false
+    }
+
+    fn gridRowExtent:double (rowSizes:[double] from:int span:int gap:double) {
+        def total:double 0.0
+        def n:int (array_length rowSizes)
+        def i:int from
+        def placed:int 0
+        while ((i < n) && (placed < span)) {
+            total = (total + (itemAt rowSizes i))
+            placed = (placed + 1)
+            i = (i + 1)
+        }
+        if (placed > 1) {
+            total = (total + ((to_double (placed - 1)) * gap))
+        }
+        return total
+    }
+
+    fn gridRowOffset:double (rowSizes:[double] index:int gap:double) {
+        def total:double 0.0
+        def i:int 0
+        while (i < index) {
+            total = (total + (itemAt rowSizes i))
+            total = (total + gap)
+            i = (i + 1)
+        }
+        return total
+    }
+
+    ; `alongRow` is the same question `crossAxisFits` asks of the element being
+    ; laid out, asked here of one being estimated: does `width: auto` mean
+    ; fit-content, or stretch? It has to be passed rather than read off the
+    ; ambient flag, because this runs BEFORE the child is laid out and the flag
+    ; still describes whoever was laid out last.
+    ;
+    ; Getting it wrong is not subtle. Shrink-wrapping unconditionally shrank
+    ; the profile card's header — a column child that should fill — to the
+    ; width of the two things inside it.
+    fn estimateChildWidth:double (child:EVGElement maxInnerWidth:double alongRow:boolean) {
+        ; Width used for row flow / flex pre-calc — matches layoutElement shrink-wrap
+        if child.width.isSet {
+            return child.width.pixels
+        }
+        if (child.hasFlexWidth) {
+            return child.calculatedFlexWidth
+        }
+        def textContent:string child.textContent
+        if ((strlen textContent) > 0) {
+            if ((child.getChildCount()) == 0) {
+                def fontSize:double child.inheritedFontSize
+                if child.fontSize.isSet {
+                    fontSize = child.fontSize.pixels
+                }
+                if (fontSize <= 0.0) {
+                    fontSize = 14.0
+                }
+                def contentW:double (textEngine.maxLineWidthSpaced(textContent (child.effectiveFontFamily()) fontSize child.letterSpacing))
+                def measuredW:double (contentW + child.box.paddingLeftPx + child.box.paddingRightPx + (child.box.borderWidthPx * 2.0))
+                if (measuredW < maxInnerWidth) {
+                    return measuredW
+                }
+            }
+        }
+        ; A width-less flex CONTAINER is worth as much as its contents, the
+        ; same as it is in `layoutElement`. This used to fall straight through
+        ; to `maxInnerWidth` — the whole row — so a row holding a container and
+        ; a `flex: 1` spacer computed no free space at all and the spacer got
+        ; nothing. The header of the profile demo is exactly that shape: a
+        ; title block, a spacer, and a badge that was supposed to sit at the
+        ; far end and sat against the title instead.
+        ;
+        ; It is the same question `layoutElement` asks two hundred lines up,
+        ; and asking it two different ways is what let the flex basis and the
+        ; finished width disagree.
+        if ((child.display == "flex") && alongRow) {
+            def intrinsic:double (this.intrinsicWidth(child false))
+            if (intrinsic > 0.0) {
+                if (intrinsic < maxInnerWidth) {
+                    return intrinsic
+                }
+            }
+        }
+        return maxInnerWidth
+    }
+    
+}