` children of a single `.canvas-items-layer` wrapper that is always the FIRST child of `#canvas-stage`. Because the layer is the first child in DOM order, every item paints BEHIND the connections SVG (also a `#canvas-stage` child) and BEHIND every `.block` div (which are appended after). The stage's own `transform: translate(...) scale(...)` carries items through pan and zoom uniformly with blocks. CT-1 is render-only. Items don't accept pointer events here so they cannot intercept clicks meant for the canvas (pan), for blocks (select / drag), or for connections (right-click). CT-3 will introduce `pointer-events: auto` plus per-type handlers for select / drag / resize / inline edit. Three visual variants: • is-text-note — white card with subtle border. Reads as a neutral text note. • is-comment — sticky-note look. Yellow surface, slight drop shadow, no border. • is-simple-frame — dashed, low-saturation outline with no fill. Reads as a decorative section frame for grouping blocks by eye — NOT a true group (no membership semantics). Night-mode variants live at the bottom of this block and activate via `html.wf-theme-night` (set by topbar.js's `applyAppearance`). ============================================================ */ .canvas-items-layer { position: absolute; inset: 0; /* The wrapper itself must never block canvas events. Items inside opt back in with `pointer-events: auto` in later slices. */ pointer-events: none; /* Slice 4H-3B v2: the layer no longer sets `z-index: 0`. With position: absolute and z-index: auto it does NOT create a stacking context, so canvas items (with their own per-type z-index below) stack directly inside `#canvas-stage`'s context alongside `.connections-svg` (z-index: 1) and `.block` (z-index: 2). This is what lets Arrows promote ABOVE blocks via `.canvas-item.is-arrow { z-index: 3 }` without dragging every other canvas item along — frame / text_note / comment keep their existing z-index 0 / 1 / 1 values, which still rank them below blocks. */ } /* Phase 3 polish v2: per-type stacking. ``simple_frame`` acts as a visual container — anything the user places "inside" must paint ON TOP of it. So: • simple_frame → z-index: 0 (lowest) • text_note / comment → z-index: 1 • blocks → z-index: 2 (set in components.css) • Slice 4H-3B v2: arrow → z-index: 3 (annotation overlay) These stack in `#canvas-stage`'s context now that the layer no longer creates its own stacking context (see comment on `.canvas-items-layer` above). */ /* Slice 4H-5F: simple_frame deliberately has NO z-index so it does NOT create its own stacking context. Two reasons: 1. The frame's chip-row (z-index: 8) needs to live in the canvas-stage stacking context, where blocks (z-index: 2) and arrows (z-index: 3) sit, so the hidden hover-buttons render IN FRONT of any block that happens to overlap the chip-row's air space above the frame top edge. 2. The v5E lift to z-index 30 has been removed for frames (it was pushing the frame's contained items/blocks BEHIND the frame body). Without a stacking context, the frame body stays at z-auto — below the per-type items (notes at 1, blocks at 2, arrows at 3) — so contents remain visible on top of the frame's tinted fill as a natural sibling stacking, regardless of hover/selection state. */ .canvas-item.is-text-note, .canvas-item.is-comment { z-index: 1; } .canvas-item.is-arrow { z-index: 3; } .canvas-item { position: absolute; box-sizing: border-box; /* Slice 4G-1: canvas items accept pointer events so the user can click to select. text_note + comment cards are entirely hittable. simple_frame overrides this to ``none`` below and surfaces a small title-handle child as the only selection target, so the frame's empty interior never captures clicks meant for blocks INSIDE the frame or canvas pan. */ pointer-events: auto; /* User cannot select text yet (no inline editing in 4G-1). */ user-select: none; /* Sane defaults so a placed item is legible even before per-type styles override. */ font-family: inherit; font-size: 13px; color: var(--text, #1F2A26); padding: 8px 10px; border-radius: 8px; line-height: 1.35; white-space: pre-wrap; /* preserve line breaks in body */ /* Slice 4G-2: must be ``visible`` so the corner resize handles (which sit at -14 px offsets to centre on the bounding-box corners) aren't clipped by the parent. Text-content ellipsis lives on ``.canvas-item__body`` (text_note + comment) and on ``.canvas-item__handle`` (frame chip), so neither needs the parent to clip. */ overflow: visible; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, outline-color .12s; } /* Slice 4G-1: selected canvas item — subtle accent ring + slight shadow lift. ``outline`` sits OUTSIDE the box, so the ring never eats into the item's own padded text. Matches the visual language used by block selection (no fill flash, just a quiet outline). */ /* Phase 3 polish v5: softer selection ring — the previous ``2px solid + 2px offset`` accent outline read as too prominent relative to the rest of the layout. A 1.5 px line with reduced opacity + a lighter shadow keeps the selection clearly visible without dominating the canvas. */ .canvas-item.is-selected { outline: 1.5px solid rgba(46, 125, 108, 0.55); outline-offset: 2px; box-shadow: 0 1px 3px rgba(46, 125, 108, 0.10), 0 3px 8px rgba(46, 125, 108, 0.08); } /* Slice 4G-2: move cursor on the cards / chip / strips so the user has a sensory hint that these surfaces drag the item. Resize handles override this per-corner below. */ .canvas-item.is-text-note, .canvas-item.is-comment { cursor: move; } .canvas-item.is-simple-frame .canvas-item__handle, .canvas-item.is-simple-frame .canvas-item__edge { cursor: move; } /* During an active gesture, drop the smooth color/shadow transitions so the ring doesn't visibly lag the pointer. */ .canvas-item.is-dragging, .canvas-item.is-resizing { transition: none; } /* Slice 4G-2: body wrapper for text_note + comment. Holds the text content so resize handles can sit alongside it without being wiped by a textContent reassignment. Inherits font, color, and pre-wrap from the parent ``.canvas-item``. The block-level default sizing fills the parent's content box naturally. Slice 4G-3A polish: ``overflow: auto`` is on at all times (not just during edit) so the scrollbar's presence / text wrap don't shift between view and edit modes. ``scrollbar-gutter: stable`` reserves the scrollbar lane even when no bar is showing, so the text width is identical with and without a scrollbar — the visible text never re-wraps when content grows. Custom thin scrollbar styling keeps the bar quiet at rest. */ .canvas-item__body { width: 100%; height: 100%; pointer-events: inherit; white-space: inherit; overflow: auto; scrollbar-gutter: stable; /* Phase 3 polish: long unbroken strings (e.g. URLs, or no-space typed text) must wrap inside the body. Without this, ``white-space: pre-wrap`` only breaks at whitespace, so a long token typed without spaces renders as ONE LONG LINE that overflows horizontally after reload. The contenteditable wraps it visually during editing (the browser's own soft-wrap), but ``textContent`` doesn't carry soft-break markers, so on next render the wrap disappears. ``overflow-wrap: anywhere`` forces breaks inside long tokens at any character boundary when needed. */ overflow-wrap: anywhere; word-break: break-word; /* User cannot select text yet (no inline editing in 4G-2). */ user-select: none; } /* Slice 4G-2: invisible border strips for simple_frame. Each strip is a thin hit-zone overlaying one side of the dashed ring. The 12 px corner gaps belong to the resize handles, so middle-edge drag = move, corner drag = resize, no ambiguity. Strips are transparent (no visible appearance) — the dashed border on the parent does all the visual work. */ .canvas-item__edge { position: absolute; background: transparent; pointer-events: auto; z-index: 1; } .canvas-item__edge--top { top: 0; left: 12px; right: 12px; height: 12px; } .canvas-item__edge--right { top: 12px; right: 0; bottom: 12px; width: 12px; } .canvas-item__edge--bottom { bottom: 0; left: 12px; right: 12px; height: 12px; } .canvas-item__edge--left { top: 12px; left: 0; bottom: 12px; width: 12px; } /* Slice 4G-3A: inline-edit state. Applied to the parent ``.canvas-item`` while exactly one of its text children (``.canvas-item__body`` for text_note/comment, the ``.canvas-item__handle`` chip for simple_frame) is the active contenteditable target. Goals: - resize handles disappear (cannot be accidentally grabbed); - frame edge strips become inert (cannot start a move drag); - the parent itself drops ``cursor: move`` — the editable child now owns cursor behaviour with ``cursor: text``; - the editable child opts back into native text selection. Phase 1 polish (2026-05-28): the inset accent outline that previously decorated the editable body during edit has been removed. It caused a visible inward shift of the text content on edit-enter (the outline-offset:-1px + the visible ring made the body look smaller). The parent's ``.is-selected`` outline + the native caret are now the sole edit signal. */ .canvas-item.is-editing { cursor: default; transition: none; } .canvas-item.is-editing .canvas-item__resize-handle { display: none; } .canvas-item.is-editing .canvas-item__edge { pointer-events: none; } .canvas-item.is-editing .canvas-item__body, .canvas-item.is-editing .canvas-item__handle { user-select: text; cursor: text; /* Phase 3 polish v5: suppress the browser's default focus outline on the contenteditable region — the parent's ``.is-selected`` ring already signals what's active, and a second nested outline reads as visually noisy. */ outline: none; } /* Frame chip in edit mode: allow it to grow vertically + wrap instead of clipping. Keeps the chip compact when not editing, but readable as a real input while typing. */ .canvas-item.is-simple-frame.is-editing .canvas-item__handle { white-space: pre-wrap; max-width: calc(100% - 16px); } /* Slice 4G-3A: placeholder for empty bodies. ``:empty::before`` renders the per-type hint text (set on ``data-placeholder`` by ``applyCanvasItemNode``). Hidden during edit so a freshly- focused empty body shows the caret, not the hint. */ .canvas-item__body:empty::before, .canvas-item__handle:empty::before { content: attr(data-placeholder); opacity: 0.45; font-style: italic; pointer-events: none; user-select: none; } .canvas-item.is-editing .canvas-item__body:empty::before, .canvas-item.is-editing .canvas-item__handle:empty::before { content: none; } /* Slice 4H-4A polish (Issue 2): suppress the empty-body placeholder for Text notes entirely. The placeholder hint text was useful for Comment (which has structural chrome surrounding the body) but read as "stale fake content" on Text notes that the user intends to leave blank — e.g. a Text note repurposed as a colored shape/card. Selection + move + edit still work because the wrapper itself remains hittable. Comment placeholder is preserved (no change to `.is-comment` rule above). Frame title placeholder is also preserved. */ .canvas-item.is-text-note .canvas-item__body:empty::before { content: none; } /* Slice 4G-3A Phase 1: thin scrollbar styling for the canvas-item body. ``overflow: auto`` is on at all times so the scrollbar gutter doesn't reserve space differently between view and edit modes (see ``.canvas-item__body`` for the ``scrollbar-gutter: stable`` declaration). These rules keep the bar quiet — a thin muted track that's visible but doesn't shout. WebKit and Firefox use different syntaxes, both declared below. */ .canvas-item__body { scrollbar-width: thin; scrollbar-color: rgba(60, 74, 67, 0.22) transparent; } .canvas-item__body::-webkit-scrollbar { width: 6px; height: 6px; } .canvas-item__body::-webkit-scrollbar-track { background: transparent; } .canvas-item__body::-webkit-scrollbar-thumb { background: rgba(60, 74, 67, 0.22); border-radius: 3px; } .canvas-item__body::-webkit-scrollbar-thumb:hover { background: rgba(60, 74, 67, 0.42); } html.wf-theme-night .canvas-item__body { scrollbar-color: rgba(231, 239, 233, 0.22) transparent; } html.wf-theme-night .canvas-item__body::-webkit-scrollbar-thumb { background: rgba(231, 239, 233, 0.22); } html.wf-theme-night .canvas-item__body::-webkit-scrollbar-thumb:hover { background: rgba(231, 239, 233, 0.42); } /* Slice 4G-3A polish: toolchip row ABOVE the canvas item. Mirrors the LNM ``.wf-motion__box`` pattern (sidebar-nav.css:787-799) — a 32×32 glass chip with surface bg, white-ish border, soft shadow, and backdrop blur — but WITHOUT the second-state hover expand (no ``__txt`` label that fades in). Single state. The chip row floats above the item's top edge (like LNM's hidden-button reveal pattern). When an item carries multiple chips (e.g. simple_frame has Colors + Close), they sit side-by-side at the top, right-aligned. */ .canvas-item__chip-row { position: absolute; /* Slice 4H-4B anchor pass: keep the chip-row's BOTTOM edge a constant 10 screen-px above the item's top regardless of zoom. box.bottom_stage = -10 / scale ⇒ box.top_stage = -10/scale - 32 (32 = chip CSS height that drives the flex container height). The stage transform multiplies back, leaving a stable 10-px visual gap. Replaces the old static `top: -42px`. */ top: calc(-10px * var(--aw-canvas-ui-screen-px, 1) - 32px); right: 0; display: flex; gap: 6px; z-index: 8; pointer-events: none; opacity: 0; /* Slice 4H-4A polish (Issue 4) + 4H-4B anchor pass: chip-row composes the pre-existing reveal translateY animation WITH the canvas-zoom inverse scale so the close + colors chips stay approximately constant in screen size as the canvas zooms. `transform-origin: 100% 100%` anchors scaling at the bottom- right of the chip-row (which is glued to the wrapper's right edge by `right: 0`), so the scaled chip-row stays pinned to the wrapper's top-right corner regardless of zoom. The reveal translateY value is multiplied by `var(--screen-px)` so the 4-px slide-in is a constant 4 screen-px at every zoom level. */ transform: translateY(calc(4px * var(--aw-canvas-ui-screen-px, 1))) scale(var(--aw-canvas-ui-inverse-scale, 1)); transform-origin: 100% 100%; transition: opacity .26s var(--ease, cubic-bezier(.32, .72, 0, 1)), transform .26s var(--ease, cubic-bezier(.32, .72, 0, 1)); } .canvas-item.is-selected > .canvas-item__chip-row, .canvas-item:hover > .canvas-item__chip-row { opacity: 1; transform: translateY(0) scale(var(--aw-canvas-ui-inverse-scale, 1)); pointer-events: auto; } /* Slice 4H-5E: chip-row reachability bridge. The chip-row sits a constant 10 screen-px above the canvas-item's top edge (see the ``top: calc(-10px * screen-px - 32px)`` rule above). Without anything occupying that 10-px strip, the cursor traveling from the card up to the chips briefly enters a "dead zone" where no descendant catches pointer events: `.canvas-item:hover` turns OFF, the chip-row hides, and the chips become unreachable. A pseudo-element bridge fills the strip so hover survives the transit. The bridge is `pointer-events: none` by default — it does NOT initiate hover for nearby items hovering air-space above an unselected item — and flips to `pointer-events: auto` only while the same item is already hovered or selected. This matches the chip-row's own reveal rule. Arrows are excluded via :not(.is-arrow): they have `chip-row { display: none }` (see line ~3461) so there is no chip-row to reach, and an arrow's bounding box can span a large portion of the canvas — a 10-px strip atop a hovered arrow's bbox at the lifted z-index would silently intercept clicks on workflow blocks underneath. */ .canvas-item:not(.is-arrow)::before { content: ""; position: absolute; top: calc(-10px * var(--aw-canvas-ui-screen-px, 1)); left: 0; right: 0; height: calc(10px * var(--aw-canvas-ui-screen-px, 1)); pointer-events: none; } .canvas-item:not(.is-arrow):hover::before, .canvas-item:not(.is-arrow).is-selected::before { pointer-events: auto; } /* Slice 4H-5E: lift any interacting canvas-item above the neighbouring blocks/items so its chip-row (z-index 8 within the item's stacking context) renders ON TOP of everything on the canvas. Without this lift, a workflow `.block` at z-index 2 sitting visually in front of a canvas-item could obscure the item's hidden buttons even when revealed, because the chip-row's z-index is bounded by its parent's stacking context (the canvas-item itself at z-index 0/1/3 per type). The lift uses the same per-type specificity as the per-type z-index rules above so it actually wins without `!important`, and stays well below the floating chrome (toolbar at 42, header at 40+) so the chips never overlap the topbar/palette. Arrows are excluded for the same reason as the bridge above: they have no chip-row, so lifting their z-index would only produce a click-blocking band over neighbouring blocks. Slice 4H-5F: simple_frame is ALSO excluded. Lifting a frame to z-index 30 on hover/selection visibly pushed the frame's contained items/blocks BEHIND the frame's tinted body. v5F solves this differently: by removing the frame's per-type `z-index: 0` (above), the frame no longer creates a stacking context, so its chip-row at z-index 8 escapes into the canvas-stage context and renders above blocks WITHOUT needing to lift the whole frame. */ .canvas-item.is-text-note:hover, .canvas-item.is-text-note.is-selected, .canvas-item.is-comment:hover, .canvas-item.is-comment.is-selected { z-index: 30; } .canvas-item.is-editing > .canvas-item__chip-row { opacity: 0; transform: translateY(calc(4px * var(--aw-canvas-ui-screen-px, 1))) scale(var(--aw-canvas-ui-inverse-scale, 1)); pointer-events: none; } /* Individual chip (delete OR color picker) — shared visuals. Matches ``.wf-motion__box`` collapsed-state exactly: width:32px, surface bg, border, shadow, backdrop blur, border-radius:9px. */ .canvas-item__chip { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 9px; box-shadow: 0 2px 9px rgba(55, 72, 64, 0.10), 0 1px 2px rgba(55, 72, 64, 0.06); -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.03); backdrop-filter: blur(20px) saturate(180%) brightness(1.03); color: var(--muted, #6E8077); cursor: pointer; /* Slice 4H-5D: chip inherits pointer-events from its container (.canvas-item__chip-row). Previously this was `auto` always, which meant an invisible chip-row's chips were STILL pointer targets — hovering the air space above an unselected item fired the chip's :hover, propagated to .canvas-item:hover, and revealed the chip-row. With adjacent items, that air space could overlap a neighbour's visual card, so hovering the neighbour also revealed THIS item's hidden buttons. Inheriting fixes the bleed cleanly: chips are pointer-transparent when the chip-row is hidden (default) and pointer-active when the row reveals via the :hover/.is-selected rule above. */ pointer-events: inherit; transition: color .12s, background-color .12s, border-color .12s; } .canvas-item__chip:hover { color: var(--label-hover, #27543C); } .canvas-item__chip svg { width: 16px; height: 16px; display: block; pointer-events: none; } /* Hide the delete chip entirely for foreign comments — the parent ``.is-foreign`` modifier removes the close affordance even when the row is otherwise revealed. */ .canvas-item.is-foreign .canvas-item__chip--delete { display: none; } html.wf-theme-night .canvas-item__chip { background: rgba(28, 36, 32, 0.88); border-color: rgba(255, 255, 255, 0.16); color: rgba(231, 239, 233, 0.66); box-shadow: 0 2px 9px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.20); } html.wf-theme-night .canvas-item__chip:hover { color: rgba(150, 220, 200, 0.95); } /* Slice 4G-2: 4 corner resize handles. Always present in the DOM for every canvas item; CSS gates visibility on ``.is-selected`` so unselected items never expose handles. Visual pattern adopted from LNM (``.wf-grip``) and CTM (``.wf-toolbar__resize``): a large invisible hit box that sits centred on the bounding-box corner with a small inner glyph (``.canvas-item__rico``) that fades in on hover or while the gesture is active. The glyph is opacity:0 + scale(.55) at rest and opacity:.85 + scale(1) on hover/active — same easing values as the chrome grips. Active handle gets ``.is-active`` from JS so the glyph stays lit even when the cursor races outside the hit box during a fast drag. ``pointer-events: auto`` opts the hit box back in for simple_frame (whose body is ``pointer-events: none``). Each corner uses the matching nwse/nesw resize cursor. */ .canvas-item__resize-handle { position: absolute; width: 28px; height: 28px; background: transparent; border: 0; padding: 0; box-sizing: border-box; pointer-events: auto; display: none; align-items: center; justify-content: center; z-index: 7; touch-action: none; color: var(--muted, #7C9384); } /* Phase 3 redo: hover OR selection reveals the resize handles so the user doesn't need to click-first-then-resize. Matches the LNM ``.wf-grip`` reveal pattern (hover → grip icon fades in). */ .canvas-item.is-selected .canvas-item__resize-handle, .canvas-item:hover .canvas-item__resize-handle { display: flex; } /* The original -22 px offsets mirrored CTM's ``.wf-toolbar__resize`` exactly: a 28 px hit box positioned so the inner glyph sits ~8 px past the bounding-box corner, with a slim 6 px grab-zone overlap inside the parent. LNM uses the same pattern at a slightly larger scale (34 px box, -26 px offset). Slice 4H-4B anchor pass: the static -22 px offsets drifted as stage_scale * -22 px on screen (e.g. -44 screen-px at zoom 2x), floating the handles far away from item corners. Calibrated formula: position the box so its CENTER lands at a constant 8 screen-px outside the item corner regardless of zoom. box.center_stage = -8 / stage_scale (origin-50%-50% preserves it) box.top_stage = box.center - 14 (28 px box, half = 14) = -8 * var(--screen-px) - 14 The stage transform multiplies back, leaving a stable handle-center-to-corner gap of 8 screen-px at every zoom. */ .canvas-item__resize-handle--nw { top: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); left: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); cursor: nwse-resize; } .canvas-item__resize-handle--ne { top: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); right: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); cursor: nesw-resize; } .canvas-item__resize-handle--se { bottom: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); right: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); cursor: nwse-resize; } .canvas-item__resize-handle--sw { bottom: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); left: calc(-8px * var(--aw-canvas-ui-screen-px, 1) - 14px); cursor: nesw-resize; } /* Inner glyph — mirrors ``.wf-grip__ico`` / ``.wf-toolbar__rico``. Fades + scales in on hover or when JS adds ``.is-active`` to the parent handle (during a resize gesture). */ .canvas-item__rico { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; opacity: 0; transform: scale(.55); transform-origin: center; transition: opacity .18s var(--ease, cubic-bezier(.4, 0, .2, 1)), transform .18s var(--ease, cubic-bezier(.4, 0, .2, 1)); pointer-events: none; } .canvas-item__rico svg { width: 14px; height: 14px; display: block; } .canvas-item__resize-handle:hover .canvas-item__rico, .canvas-item__resize-handle.is-active .canvas-item__rico { opacity: .85; transform: scale(1); } .canvas-item__resize-handle.is-active { color: var(--accent, #2E7D6C); } /* NE / SW corners flip the NWSE-diagonal glyph horizontally so the arrows point along the NESW diagonal instead. The hover/active scale-up rule above flips its multiplier too, so both rest and active states stay mirrored. */ .canvas-item__resize-handle--ne .canvas-item__rico, .canvas-item__resize-handle--sw .canvas-item__rico { transform: scale(.55) scaleX(-1); } .canvas-item__resize-handle--ne:hover .canvas-item__rico, .canvas-item__resize-handle--ne.is-active .canvas-item__rico, .canvas-item__resize-handle--sw:hover .canvas-item__rico, .canvas-item__resize-handle--sw.is-active .canvas-item__rico { transform: scale(1) scaleX(-1); } /* --- Text note: white card, subtle border, gentle shadow --- */ .canvas-item.is-text-note { background: rgba(255, 255, 255, 0.95); border: 1px solid var(--border, rgba(60, 74, 67, 0.16)); box-shadow: 0 1px 2px rgba(55, 72, 64, 0.06), 0 4px 12px rgba(55, 72, 64, 0.06); } /* --- Slice 4H-4A: Text note style presets. Six preset families layered on top of the base `.is-text-note` rule so a Text note can also serve as a lightweight visual shape / card. Presets are class-based (no inline CSS, no free color picker) and preserve the pre-v4A visual exactly when applied at their "default" / current values. --- */ /* Fill (background) presets. */ .canvas-item.is-text-note.is-fill-default { background: rgba(255, 255, 255, 0.95); } .canvas-item.is-text-note.is-fill-yellow { background: #FFF9C4; } .canvas-item.is-text-note.is-fill-green { background: #DCEDC8; } .canvas-item.is-text-note.is-fill-blue { background: #BBDEFB; } .canvas-item.is-text-note.is-fill-purple { background: #E1BEE7; } .canvas-item.is-text-note.is-fill-red { background: #FFCDD2; } .canvas-item.is-text-note.is-fill-none { background: transparent; } /* Slice 4H-4A polish (Issue 1): transparent fill drops the card shadow too — a note with `is-fill-none` should read as bare text on the canvas, not as an invisible card casting a shadow. Border / selection ring continue to apply unchanged. */ .canvas-item.is-text-note.is-fill-none { box-shadow: none; } html.wf-theme-night .canvas-item.is-text-note.is-fill-none { box-shadow: none; } html.wf-theme-night .canvas-item.is-text-note.is-fill-default { background: rgba(28, 36, 32, 0.78); } html.wf-theme-night .canvas-item.is-text-note.is-fill-yellow { background: rgba(255, 235, 59, 0.18); } html.wf-theme-night .canvas-item.is-text-note.is-fill-green { background: rgba(76, 175, 80, 0.18); } html.wf-theme-night .canvas-item.is-text-note.is-fill-blue { background: rgba(33, 150, 243, 0.18); } html.wf-theme-night .canvas-item.is-text-note.is-fill-purple { background: rgba(156, 39, 176, 0.18); } html.wf-theme-night .canvas-item.is-text-note.is-fill-red { background: rgba(244, 67, 54, 0.18); } html.wf-theme-night .canvas-item.is-text-note.is-fill-none { background: transparent; } /* Border color presets. */ .canvas-item.is-text-note.is-border-default { border-color: var(--border, rgba(60, 74, 67, 0.16)); } .canvas-item.is-text-note.is-border-muted { border-color: rgba(60, 74, 67, 0.40); } .canvas-item.is-text-note.is-border-accent { border-color: var(--accent, #0FA46A); } .canvas-item.is-text-note.is-border-blue { border-color: #2D7CDB; } .canvas-item.is-text-note.is-border-orange { border-color: #E08540; } .canvas-item.is-text-note.is-border-red { border-color: #D9534F; } .canvas-item.is-text-note.is-border-purple { border-color: #8B5CF6; } html.wf-theme-night .canvas-item.is-text-note.is-border-default { border-color: rgba(255, 255, 255, 0.14); } html.wf-theme-night .canvas-item.is-text-note.is-border-muted { border-color: rgba(255, 255, 255, 0.30); } html.wf-theme-night .canvas-item.is-text-note.is-border-accent { border-color: var(--accent, #2DC78D); } /* Border width presets. `0` removes the border entirely; the other three set widths directly. */ .canvas-item.is-text-note.is-bwidth-0 { border-width: 0; } .canvas-item.is-text-note.is-bwidth-1 { border-width: 1px; } .canvas-item.is-text-note.is-bwidth-2 { border-width: 2px; } .canvas-item.is-text-note.is-bwidth-3 { border-width: 3px; } /* Corner radius presets. Missing key → no class → CSS base 8 px from the `.canvas-item` rule remains in force, so legacy text notes render unchanged. */ .canvas-item.is-text-note.is-radius-0 { border-radius: 0; } .canvas-item.is-text-note.is-radius-6 { border-radius: 6px; } .canvas-item.is-text-note.is-radius-12 { border-radius: 12px; } .canvas-item.is-text-note.is-radius-18 { border-radius: 18px; } .canvas-item.is-text-note.is-radius-24 { border-radius: 24px; } /* Font size presets. Applied to `.canvas-item__body` so the inline-editable content scales without affecting toolbar / chip-row chrome. Missing key → CSS base 13 px from the `.canvas-item` rule remains. */ .canvas-item.is-text-note.is-fsize-12 .canvas-item__body { font-size: 12px; } .canvas-item.is-text-note.is-fsize-14 .canvas-item__body { font-size: 14px; } .canvas-item.is-text-note.is-fsize-16 .canvas-item__body { font-size: 16px; } .canvas-item.is-text-note.is-fsize-18 .canvas-item__body { font-size: 18px; line-height: 1.35; } .canvas-item.is-text-note.is-fsize-22 .canvas-item__body { font-size: 22px; line-height: 1.30; } .canvas-item.is-text-note.is-fsize-28 .canvas-item__body { font-size: 28px; line-height: 1.25; } /* Font family presets — system font stacks only, no external font files. Applied to `.canvas-item__body` so toolbar + chip-row chrome stay on the wrapper's inherited stack. */ .canvas-item.is-text-note.is-ffamily-sans .canvas-item__body { font-family: inherit; } .canvas-item.is-text-note.is-ffamily-serif .canvas-item__body { font-family: Georgia, "Times New Roman", Times, serif; } .canvas-item.is-text-note.is-ffamily-mono .canvas-item__body { font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace; } /* --- Slice 4H-4A: Text note style toolbar. Two horizontal rows stacked vertically. Anchored below the wrapper bbox by default (`.is-below`), flips above when JS detects viewport-bottom clip. Hidden by default and during inline edit; visible only when the parent is `.is-text-note.is-selected` AND NOT `.is-editing`. Glass-card surface matches the Arrow toolbar visual vocabulary. --- */ .canvas-item__text-toolbar { position: absolute; display: none; flex-direction: column; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(55, 72, 64, 0.08), 0 8px 24px rgba(55, 72, 64, 0.16), 0 0 0 1px rgba(60, 74, 67, 0.06); -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.03); backdrop-filter: blur(20px) saturate(180%) brightness(1.03); z-index: 5; pointer-events: auto; white-space: nowrap; color: var(--text, #1F2A26); user-select: none; } /* Slice 4H-4A polish (Issue 4): each placement variant composes the default translate with a `scale(var(--aw-canvas-ui-inverse-scale))` so the toolbar stays approximately constant in SCREEN size as the canvas zooms. `transform-origin` is set per-variant to the anchor point on the toolbar's own box (top-center for is-below, bottom-center for is-above) so the scale grows/shrinks around that anchor — keeping the visual anchor at the JS-set left/top stage-pixel coordinate. */ .canvas-item__text-toolbar.is-below { transform: translate(-50%, 0) scale(var(--aw-canvas-ui-inverse-scale, 1)); transform-origin: 50% 0; } .canvas-item__text-toolbar.is-above { transform: translate(-50%, -100%) scale(var(--aw-canvas-ui-inverse-scale, 1)); transform-origin: 50% 100%; } /* Slice 4H-4A polish (Issue 3): grip handle on the left edge of the toolbar. Mousedown on the grip starts a session-local reposition; preset-button mousedown is unaffected. The 3 dots glyph is the same visual vocabulary used elsewhere for drag surfaces. */ .canvas-item__text-toolbar-grip { display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 22px; margin-right: 2px; border-radius: 4px; color: rgba(60, 74, 67, 0.45); cursor: grab; flex-shrink: 0; user-select: none; touch-action: none; } .canvas-item__text-toolbar-grip:hover { color: rgba(60, 74, 67, 0.80); background: rgba(60, 74, 67, 0.06); } .canvas-item__text-toolbar-grip:active { cursor: grabbing; } .canvas-item__text-toolbar-grip svg { display: block; pointer-events: none; } html.wf-theme-night .canvas-item__text-toolbar-grip { color: rgba(231, 239, 233, 0.45); } html.wf-theme-night .canvas-item__text-toolbar-grip:hover { color: rgba(231, 239, 233, 0.80); background: rgba(231, 239, 233, 0.06); } /* Slice 4H-4C-1 (expanded UX): the text style toolbar no longer auto-shows on selection. The `.is-style-open` class is added to the canvas-item only when the user clicks the "Aa" chip in the chip-row. Requiring BOTH classes here keeps the toolbar hidden on every plain click and surfaces it only on an explicit user gesture. See the matching `.is-style-open` chip + multi-mode hover rules near the end of this file. */ .canvas-item.is-text-note.is-selected.is-style-open:not(.is-editing) .canvas-item__text-toolbar { display: inline-flex; } .canvas-item__text-toolbar-row { display: inline-flex; align-items: center; gap: 2px; } .canvas-item__text-toolbar-group { display: inline-flex; align-items: center; gap: 2px; } .canvas-item__text-toolbar-sep { width: 1px; height: 18px; margin: 0 4px; background: rgba(60, 74, 67, 0.18); } .canvas-item__text-tool-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px; margin: 0; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; line-height: 0; font-size: 11px; transition: background-color 80ms, border-color 80ms; } .canvas-item__text-tool-btn:hover { background: rgba(60, 74, 67, 0.08); } .canvas-item__text-tool-btn.is-active { background: rgba(46, 125, 108, 0.12); border-color: rgba(46, 125, 108, 0.45); } .canvas-item__text-tool-btn svg { display: block; pointer-events: none; } /* Fill swatches mirror the corresponding `.is-fill-*` color. The `.is-fill-none` swatch shows a checkerboard hint. */ .canvas-item__text-swatch-dot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(60, 74, 67, 0.18); } .canvas-item__text-swatch.is-fill-default .canvas-item__text-swatch-dot { background: rgba(255, 255, 255, 0.95); } .canvas-item__text-swatch.is-fill-yellow .canvas-item__text-swatch-dot { background: #FFF9C4; } .canvas-item__text-swatch.is-fill-green .canvas-item__text-swatch-dot { background: #DCEDC8; } .canvas-item__text-swatch.is-fill-blue .canvas-item__text-swatch-dot { background: #BBDEFB; } .canvas-item__text-swatch.is-fill-purple .canvas-item__text-swatch-dot { background: #E1BEE7; } .canvas-item__text-swatch.is-fill-red .canvas-item__text-swatch-dot { background: #FFCDD2; } .canvas-item__text-swatch.is-fill-none .canvas-item__text-swatch-dot { background: linear-gradient(45deg, rgba(60,74,67,0.25) 25%, transparent 25%, transparent 75%, rgba(60,74,67,0.25) 75%), linear-gradient(45deg, rgba(60,74,67,0.25) 25%, transparent 25%, transparent 75%, rgba(60,74,67,0.25) 75%); background-position: 0 0, 4px 4px; background-size: 8px 8px; } /* Border swatches use a ring glyph at the preset's color. */ .canvas-item__text-swatch-ring { display: block; width: 14px; height: 14px; border-radius: 50%; background: transparent; border: 2px solid rgba(60, 74, 67, 0.40); } .canvas-item__text-swatch.is-border-swatch-default .canvas-item__text-swatch-ring { border-color: var(--border, rgba(60, 74, 67, 0.16)); } .canvas-item__text-swatch.is-border-swatch-muted .canvas-item__text-swatch-ring { border-color: rgba(60, 74, 67, 0.55); } .canvas-item__text-swatch.is-border-swatch-accent .canvas-item__text-swatch-ring { border-color: var(--accent, #0FA46A); } .canvas-item__text-swatch.is-border-swatch-blue .canvas-item__text-swatch-ring { border-color: #2D7CDB; } .canvas-item__text-swatch.is-border-swatch-orange .canvas-item__text-swatch-ring { border-color: #E08540; } .canvas-item__text-swatch.is-border-swatch-red .canvas-item__text-swatch-ring { border-color: #D9534F; } .canvas-item__text-swatch.is-border-swatch-purple .canvas-item__text-swatch-ring { border-color: #8B5CF6; } /* Font-size buttons render the numeric value as a tiny label. */ .canvas-item__text-fsize-label { display: inline-block; min-width: 18px; text-align: center; font-size: 11px; line-height: 1; font-weight: 500; } /* Font-family buttons render an "Aa" glyph in the corresponding font stack so the visual cue matches the resulting font. */ .canvas-item__text-ffamily-label { display: inline-block; min-width: 18px; text-align: center; font-size: 12px; line-height: 1; font-weight: 500; } .canvas-item__text-ffamily-label.is-ffamily-sans { font-family: inherit; } .canvas-item__text-ffamily-label.is-ffamily-serif { font-family: Georgia, "Times New Roman", Times, serif; } .canvas-item__text-ffamily-label.is-ffamily-mono { font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace; } /* Night-theme variants for the toolbar surface + buttons. */ html.wf-theme-night .canvas-item__text-toolbar { background: rgba(31, 42, 38, 0.96); border-color: rgba(255, 255, 255, 0.10); color: var(--text, #E7EFE9); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.06); } html.wf-theme-night .canvas-item__text-toolbar-sep { background: rgba(231, 239, 233, 0.18); } html.wf-theme-night .canvas-item__text-tool-btn:hover { background: rgba(231, 239, 233, 0.08); } html.wf-theme-night .canvas-item__text-tool-btn.is-active { background: rgba(45, 199, 141, 0.18); border-color: rgba(45, 199, 141, 0.55); } html.wf-theme-night .canvas-item__text-swatch-dot, html.wf-theme-night .canvas-item__text-swatch-ring { border-color: rgba(231, 239, 233, 0.20); } /* --- Slice 4H-3A: Arrow tool — visual annotation only, NOT a workflow execution edge. The bounding box is transparent (no background, no border, no shadow) so the arrow reads as a pure annotation glyph rather than a card. Color is a neutral muted text tone, deliberately distinct from the accent that workflow connection wires use. The inline ``.canvas-item__arrow`` SVG fills the bounding box and is pointer-events: none so it never intercepts clicks meant for the wrapper (the wrapper still owns selection / move / resize via the existing .canvas-item event handlers). The selection ring continues to come from the shared .canvas-item.is-selected rule above. --- */ .canvas-item.is-arrow { background: transparent; border: none; box-shadow: none; color: var(--text-dim, rgba(60, 74, 67, 0.70)); /* Slice 4H-3B v2: the wrapper itself is pointer-inert so its diagonal-bounding-box transparent area does NOT block clicks on items underneath. Interactive children opt back in: - the SVG (`.canvas-item__arrow`) catches clicks on its visible stroke + on the wider invisible hit-line built into `_buildArrowSvgMarkup` - resize handles + chip-row use their existing `pointer-events: auto`, redeclared below to be defensive against future rule re-ordering - endpoint handles use their existing selection-gated `pointer-events: auto` rule already in this file Combined with `z-index: 3` above (annotation overlay), the Arrow visually sits ABOVE blocks but doesn't intercept clicks anywhere except on the visible stroke + the handles. */ pointer-events: none; } .canvas-item.is-arrow .canvas-item__arrow { position: absolute; inset: 0; width: 100%; height: 100%; /* Slice 4H-3B v5: SVG root is pointer-inert. Earlier (v2) reasoning relied on SVG `pointer-events: visiblePainted` defaults applying to the `

` to the viewport during a drag gesture; this rule gives it a visible dashed border + translucent fill. pointer-events:none so the box never intercepts the in-flight mousemove. */ .canvas-marquee { position: absolute; pointer-events: none; border: 1px dashed rgba(46, 125, 108, 0.65); background: rgba(46, 125, 108, 0.08); border-radius: 2px; z-index: 50; } html.wf-theme-night .canvas-marquee { border-color: rgba(150, 220, 200, 0.65); background: rgba(150, 220, 200, 0.06); } /* During a marquee gesture the body gains `is-marquee-active` (added on mousedown, removed on mouseup). Suppress native text-selection globally so dragging the marquee across the right drawer or any other selectable text doesn't leave a ghost native-selection behind. */ body.is-marquee-active, body.is-marquee-active * { -webkit-user-select: none !important; user-select: none !important; } /* Non-primary members of a multi-selection. Same accent hue as `.is-selected` (line ~2440 of this file's history before the slice) at lower alpha so the user sees at a glance which item is the primary (drives chrome) versus the rest of the group. Arrow exception: arrows signal selection via their endpoint handles + floating toolbar; the bbox outline is suppressed. */ .canvas-item.is-multi-selected { outline: 1.5px solid rgba(46, 125, 108, 0.40); outline-offset: 2px; box-shadow: 0 1px 3px rgba(46, 125, 108, 0.08); } .canvas-item.is-arrow.is-multi-selected { outline: none; box-shadow: none; } html.wf-theme-night .canvas-item.is-multi-selected { outline-color: rgba(150, 220, 200, 0.40); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); } /* Multi-mode hover-reveal: per the UX rule "chrome only shows on hover in multi-mode," these rules let hovering a specific multi-selected item surface its style toolbar / endpoint handles. Without these the chrome would never appear during multi-mode because `.is-selected` is suppressed by the JS class-sync (see canvas.js _syncCanvasItemSelectionDom). */ .canvas-item.is-text-note.is-multi-selected.is-style-open:hover:not(.is-editing) .canvas-item__text-toolbar { display: inline-flex; } .canvas-item.is-arrow.is-multi-selected:hover .canvas-item__arrow-toolbar { display: inline-flex; } .canvas-item.is-arrow.is-multi-selected:hover .canvas-item__arrow-handle { opacity: 1; pointer-events: auto; } /* Text-note style toolbar — click-to-reveal gating. The toolbar is HIDDEN by default on selection; the user clicks the "Aa" chip in the chip-row to flip `.is-style-open` on the canvas-item. Without `.is-style-open` the toolbar never shows. Replaces the auto-on-selection behaviour where the toolbar would surface every time a text note was clicked. */ .canvas-item.is-text-note.is-selected.is-style-open:not(.is-editing) .canvas-item__text-toolbar { display: inline-flex; } /* "Aa" style-toggle chip — text_note only. Same chip-row visibility gates as the expand / reset chips: visible when the canvas-item is text_note, hidden during inline edit. `.is-active` accent-tints the chip when the toolbar is open so the user has a clear affordance for which chip toggles styling. */ .canvas-item__chip-row > .canvas-item__chip--style { display: none; } .canvas-item.is-text-note > .canvas-item__chip-row > .canvas-item__chip--style { display: flex; } .canvas-item.is-editing > .canvas-item__chip-row > .canvas-item__chip--style { display: none; } .canvas-item__chip--style.is-active { background: rgba(46, 125, 108, 0.18); color: rgba(46, 125, 108, 0.95); border-color: rgba(46, 125, 108, 0.30); } html.wf-theme-night .canvas-item__chip--style.is-active { background: rgba(150, 220, 200, 0.18); color: rgba(220, 240, 232, 0.95); border-color: rgba(150, 220, 200, 0.30); } /* Slice 4H-4C-2 polish: copy-confirmation pill — small glass chip that appears at top-center just below the topbar when the user copies a canvas selection (keyboard Ctrl/Cmd+C or right-click Copy from the multi-select menu). Lives outside the bottom-right .toast-host because the standard toast positioning felt awkward for a near-instant local-state action with no async confirmation. Glass chrome matches the .toolbar-group family from the canvas chrome family (4H-4B / 4H-4C-1) so it reads as canvas UI, not as a global notification. Pointer-events:none so it never blocks a click. Position calc keys off --bar-h / --bar-gap from the topbar so the pill stays in the right place across collapse/expand. */ .canvas-copy-pill { position: fixed; top: calc(var(--bar-gap, 14px) + var(--bar-h, 48px) + 14px); left: 50%; transform: translate(-50%, -6px); padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: 1.25; color: rgba(30, 38, 48, 0.95); background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset; opacity: 0; pointer-events: none; z-index: 70; transition: opacity 150ms ease, transform 200ms ease; } .canvas-copy-pill.is-visible { opacity: 1; transform: translate(-50%, 0); } html.wf-theme-night .canvas-copy-pill { color: rgba(231, 239, 233, 0.95); background: rgba(20, 28, 42, 0.78); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.04) inset; } /* Hide on routes that don't show the canvas (Pages list, etc.) so the pill never leaks into non-canvas screens. Audit fix: the router sets ``route-page`` (singular) — the old ``route-pages`` selector matched nothing. */ body.route-page .canvas-copy-pill { display: none !important; } /* ============================================================ Slice 4H-CH1 — coordinated help tile + LNM height containment. Owner requests C1 / C2. The help "?" tile used to be pinned by static CSS at `right: var(--bar-gap)` — the SAME corner the PlanFlow inspector docks in. A collapsed inspector chip covered 38x40 of its 40x40 at z-index 101 against the tile's 30, so the "?" was not merely unclickable, it was not visible anywhere on the page. Nothing in the coordinator knew the tile existed (`grep -c toolbar-help topbar-adapter.js` was 0). The fix is positional, not a z-index bump: the tile becomes a first-class coordinated surface. Pass D (topbar-adapter.js, after Pass C) anchors it to the POST-Pass-C zoom cluster and writes --aw-tools-help-dx/-dy on .app; the tile's `top`/`right` stay exactly as they were and the offset composes as the `translate` property, the same contract .wf-nav, .canvas-toolbar and .wf-toolbar already use. Why `translate` and not top/left: `translate` is GPU-composited, composes additively with any `transform`, and — critically — leaves the base CSS rule the single source of truth for the tile's NATURAL position, which is what lets the coordinator reconstruct that position from tokens instead of measuring an element it writes to. TRANSITION CURVE — deliberately the zoom group's WIDTH curve (.26s cubic-bezier(.4,0,.2,1), topbar.css ~1642), not the canvas-toolbar's `left` curve (.42s cubic-bezier(.32,.72,0,1)). Two different animations move the tile's anchor: · the cluster GLIDES sideways — `.canvas-toolbar { left }`, .42s · the cluster GROWS/SHRINKS — `#zoom-group { width }`, .26s, left edge fixed, right edge sweeping 202px The tile tracks the cluster's RIGHT edge, so the growth case is the dangerous one: with the slower .42s curve the tile was still only part-way through its 204px trip when the cluster had finished expanding, and the cluster's right edge overtook it — reproduced as a full 40x40 help-over-zoom overlap during the expand. Matching the width curve exactly makes that case perfect: both edges interpolate identically, so the 14px gap between them is CONSTANT for the whole animation. In the glide case the tile now arrives slightly early, i.e. ahead of the cluster rather than under it — the safe side of the error. ============================================= */ .app > .toolbar-group.toolbar-help { translate: var(--aw-tools-help-dx, 0px) var(--aw-tools-help-dy, 0px); will-change: translate; /* --aw-tools-help-delay is a one-shot, direction-aware start delay written by the coordinator: 0s when the tile moves RIGHT (it must lead the cluster's growing right edge) and .2s when it moves LEFT (its destination is inside the cluster's CURRENT box, so it has to let the cluster clear the lane first). Timing only — the offsets themselves are identical either way. */ /* ROUND 30: on the chrome clock, no direction-aware delay - with the cluster and the tile on one curve the tile's lane is vacated at the rate it is entered */ transition: translate var(--aw-chrome-dur) var(--aw-chrome-ease); } /* The canvas-shortcuts popover is `position: absolute; z-index: 7` INSIDE .toolbar-help's own stacking context (fixed + z 30), so 7 could never beat an inspector's 101 — opening Help produced a dialog the user could not read. Pass D keeps the tile away from the inspector dock geometrically, which is the real fix; this rule covers the remaining case where the user has dragged a panel across the tile's row. It is scoped to the OPEN state, so it is a dialog-on-top rule, not a static bump used to paper over a positioning bug. */ .app > .toolbar-group.toolbar-help:has(#canvas-help-popover.open) { z-index: 8600; } /* LNM height containment (matrix ruling 5, and the second half of owner request C5). `.wf-nav`'s base rule is `max-height: calc(100vh - 110px)`, which assumes the nav starts at its natural y. Once the nav is pushed DOWN — by Pass A when the tools bar wraps to its own row, or by the user's own drag — that assumption breaks and the nav hangs off the bottom (measured visibleFrac 0.724 at 1280x540). --aw-tools-nav-maxh is written ONLY when the room actually below the nav is tighter than the base rule, so the default layout is unchanged; the fallback below is the base expression verbatim. `.wf-scroll` already scrolls (`flex: 1; min-height: 0; overflow-y: auto`), so the nav shrinks instead of escaping — which is exactly ruling 5's small-viewport clause: containment wins, the surface shrinks and scrolls internally. `!important` is unavoidable here and is NOT a z-index-style shortcut: the nav's own resize grip writes `max-height: none` as an INLINE style (sidebar-nav.js bindResize) so a hand-dragged height is not clipped by the base cap. Without `!important`, a nav the user had grown kept running off the bottom (measured visibleFrac 0.634 at 1280x540) because that inline `none` beat this rule. The grip's contract stays intact because the coordinator ECHOES the inline value into --aw-tools-nav-maxh whenever it has no clamp of its own — so `none` still means none, and the user's dragged height is only ever overridden when it would leave the viewport. */ body.route-workflow .app > .wf-nav { max-height: var(--aw-tools-nav-maxh, calc(100vh - 110px)) !important; } /* ============================================================ ROUND 23 (owner report 5, track H) - the collapsed-chrome Run tile and the dock column it shares with the collapsed palette. "when all menu elements are collapsed, add above the collapsed-tiles stack a button, aligned with the design and similar to the collapsed icons, that would start the workflow - but only when the Run CTA is not shown". #aw-dockcol is a fixed column at the top-right corner, on the same 16 px edge and 16 px top as the inspector dock (planflow-inspector.js AW_DOCK_EDGE / AW_DOCK_TOP) with the dock's 14 px pitch, so a tile here and a collapsed inspector tile below it read as ONE column (owner ruling: the dock is a vertical column). The coordinator publishes the column's box as a chrome obstacle, so the inspector dock starts underneath it. Only the flag paints any of this (body.aw-newblocks); the tiles are display:none until their state says otherwise. Tile recipe = the help tile's / the collapsed zoom cluster's glass card: 40 x 40, 12 px radius, .56 white, blur. */ body.aw-newblocks #aw-dockcol { position: fixed; top: 18px; /* ROUND 30: the logo's row (it sat 2 px above it) */ right: 14px; /* the bar gap, like the left edge */ z-index: 61; /* one above the inspector dock's tiles (60) */ display: flex; flex-direction: column; gap: 16px; /* ROUND 30: 18 + 40 + 16 = 74, the second row when the bar is folded */ pointer-events: none; /* the gaps are not a hit surface */ } body.aw-newblocks #aw-dockcol > * { pointer-events: auto; } body.aw-newblocks #aw-dockcol:empty { display: none; } body.aw-newblocks .wf-runtile { display: none; width: 40px; height: 40px; padding: 0; margin: 0; box-sizing: border-box; align-items: center; justify-content: center; cursor: pointer; font: inherit; color: #41584C; background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(255, 255, 255, 0.70); border-radius: 12px; -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.03); backdrop-filter: blur(20px) saturate(180%) brightness(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 30px rgba(55, 72, 64, 0.14); transition: background-color .12s, color .12s, transform .12s var(--ease, cubic-bezier(.4, 0, .2, 1)); animation: wf-group-in var(--aw-chrome-dur) var(--aw-chrome-ease); } body.aw-newblocks .wf-runtile.is-shown { display: flex; } body.aw-newblocks .wf-runtile.is-hiding { animation: wf-group-out var(--aw-chrome-dur) var(--aw-chrome-ease) forwards; pointer-events: none; } @keyframes wf-group-out { to { transform: scale(.86) translateY(5px); opacity: 0; } } body.aw-newblocks .wf-runtile:hover { background: rgba(56, 120, 90, 0.09); color: #1F6E45; } body.aw-newblocks .wf-runtile:active { transform: translateY(1px); } body.aw-newblocks .wf-runtile:focus-visible { outline: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(60, 120, 92, .55); } body.aw-newblocks .wf-runtile svg { width: 18px; height: 18px; display: block; } /* the CTA's own states, mirrored: a running tile carries the stop glyph in the CTA's green, a paused one the play glyph again */ body.aw-newblocks .wf-runtile.is-running { color: #1C6240; background: rgba(56, 120, 90, 0.14); } body.aw-newblocks .wf-runtile.is-paused { color: #1C6240; } /* night mode (REVIEW FIX 2, round 23): the same night recipe the help tile gets above (`html.wf-theme-night .app > .toolbar-group.toolbar-help`, the night glass at rgba(28,36,32,.56) with the .80 light glyph) so the Run tile reads like the tile beside it. Before: the day glass over the night canvas, glyph at 2.64:1 (spec 36 arm K, red run). */ html.wf-theme-night body.aw-newblocks .wf-runtile { background: rgba(28, 36, 32, 0.56); border-color: rgba(255, 255, 255, 0.16); color: rgba(231, 239, 233, 0.80); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 10px 30px rgba(0, 0, 0, 0.30); } html.wf-theme-night body.aw-newblocks .wf-runtile:hover { background: rgba(150, 220, 200, 0.10); color: rgba(231, 239, 233, 1); } html.wf-theme-night body.aw-newblocks .wf-runtile:focus-visible { box-shadow: 0 0 0 2px #0E1411, 0 0 0 4px rgba(127, 211, 168, .6); } html.wf-theme-night body.aw-newblocks .wf-runtile.is-running { color: #7FD3A8; background: rgba(120, 200, 160, 0.14); } html.wf-theme-night body.aw-newblocks .wf-runtile.is-paused { color: #7FD3A8; } @keyframes wf-group-in { from { transform: scale(.86) translateY(5px); } to { transform: none; } } /* ROUND 39: Undo in the bar — muted while there is nothing to reverse */ .wf-bar .wf-bar__ic.wf-undo.is-muted{opacity:.38} .wf-bar .wf-bar__ic.wf-undo[disabled]{cursor:default} .wf-bar .wf-bar__ic.wf-undo[disabled]:hover{background:transparent} /* round 67: the workspace chip beside the account avatar */ .wf-acct-ws{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-right:8px;border-radius:999px; border:1px solid rgba(47,107,77,.28);background:rgba(255,255,255,.55);color:#2F6B4D;font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.02em;text-decoration:none;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer} .wf-acct-ws:hover{background:rgba(255,255,255,.85)} .wf-acct-ws.is-personal{color:rgba(44,106,77,.7);border-style:dashed} /* round 70: the presence chip before the workspace chip — who else is here / running */ .wf-acct-presence{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-right:8px;border-radius:999px; border:1px solid rgba(47,107,77,.28);background:rgba(255,255,255,.55);color:#2F6B4D;font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.02em;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default} .wf-acct-presence::before{content:"";width:7px;height:7px;border-radius:50%;background:#3E8E6E;margin-right:6px;flex:none} .wf-acct-presence.is-alone{color:rgba(44,106,77,.6);border-style:dashed} .wf-acct-presence.is-alone::before{background:rgba(62,142,110,.45)} .wf-acct-presence.is-running::before{background:#D08A2E;animation:wfPresencePulse 1.2s ease-in-out infinite} @keyframes wfPresencePulse{0%,100%{opacity:1}50%{opacity:.35}}