/* ADDING, REMOVING AND REORDERING A STEP WHERE IT IS READ — 27 October 2026. * * "Also o cant delete a step i should be abel to add or remove steps." * "i also wanto to be able to drag and drop and change the order of the steps." * * The controls themselves are section 11 of public/catalogue-ui.js. This is the little that is * not already styled: the drag handle, the drop line, and the one button that has to look * different from the others — the one that removes something. * * It is its own sheet because public/styles.css is regenerated whole by the other run and * public/layout.css is that run's own. Linked from index.html after both. */ /* The handle. Quiet until the step is under the cursor, because a flow of thirty steps with a grip printed beside every one of them reads as a form rather than as a flow. */ .idrag { cursor: grab; color: var(--faint); font-size: 12px; line-height: 1; padding: 2px 4px 2px 0; margin-right: 2px; opacity: 0; transition: opacity .12s; user-select: none; } .rlist > li:hover .idrag, .llegend > li:hover .idrag, .rlist > li.open .idrag, .llegend > li.open .idrag, .idrag:focus-visible { opacity: 1; } .idrag:active { cursor: grabbing; } /* A finger has no hover, so on a touch screen it is always there. */ @media (hover: none) { .idrag { opacity: .55; font-size: 15px; padding: 6px 8px 6px 0; } } /* The step being carried, and the line it would land on. */ .dragging { opacity: .45; } .dragover { box-shadow: inset 0 2px 0 var(--gold-ink); } /* The three controls sit in the open step's tools row, which is already styled; only the remove button differs, and only once it is armed. */ .isteps .itool.iup { padding: 6px 9px; } .isteps .itool.idel { margin-left: auto; } .isteps .itool.idel:hover { border-style: solid; border-color: #B5462F; color: #B5462F; } .isteps .itool.idel.armed { border-style: solid; border-color: #B5462F; background: #F8ECE8; color: #B5462F; font-weight: 600; } /* THE SAVE BAR WHEN NOTHING CAN BE SAVED — 27 October 2026. * * "i'm logging in as a differnt user, with "author" rights, when i perform a change i can see * that the changes acumulate but the save button is ot present." * * The bar now says why instead of quietly losing its button (public/app.js, `mayWrite`). The * sentence is the important thing on the bar in that state, so it reads as the warning it is. */ .savebar .barwhy{flex:1 1 100%;order:2;color:var(--assume);font-size:12px;line-height:1.4} .savebar.noway{background:color-mix(in srgb,var(--assume) 7%,transparent);border-color:var(--assume)} .savebar.noway .sb b{color:var(--assume)} /* MOVING A LANE — 27 October 2026. * * "also i want to be able to re-order hte lanes, if i wanted to have the onboarding ones on * top for example." * * Two buttons on the lane heading (section 12 of public/catalogue-ui.js). Quiet until the heading * is under the cursor, like the pencil beside them: a row of arrows printed down the page would * read as a control panel rather than as a register. */ /* AND THE GROUP HEADINGS TOO, 28 October 2026: "i think that the awweows to make the sublanes ordering are not visible but can be clicked." The hover rule named `.glane` — the MAIN lane — so the buttons on a group heading were there, pressable and invisible, which is worse than not being there at all. Any heading that carries them shows them. */ .lanemv{display:inline-flex;gap:2px;margin-left:8px;opacity:0;transition:opacity .12s} tr.grp:hover .lanemv,tr.grp:focus-within .lanemv{opacity:1} .lanebtn{border:1px solid var(--rule);background:var(--paper);color:var(--muted);cursor:pointer; border-radius:5px;font:500 11px/1 var(--sans);padding:4px 6px} .lanebtn:hover{color:var(--gold-ink);border-color:var(--gold-ink)} @media (hover:none){.lanemv{opacity:1}.lanebtn{padding:8px 10px;font-size:13px}} /* THE STATUS, AS A CONTROL — 27 October 2026. * * "also i want to take a flow out of "drafting" so can you make the the think a the top * editable?" * * It keeps the chip's shape and colour (`.st-chip` in styles.css, which already knew the four * states) and only stops looking like a label: a caret, and a border that answers on hover. A * select that is styled as a pill has to have its own arrow drawn, because `appearance:none` * takes the browser's away with the rest of the chrome. */ select.st-chip.stsel{appearance:none;-webkit-appearance:none;cursor:pointer;background:transparent; padding-right:20px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-size:4px 4px,4px 4px;background-position:right 9px top 54%,right 5px top 54%; background-repeat:no-repeat} select.st-chip.stsel:hover,select.st-chip.stsel:focus-visible{border-color:currentColor;color:var(--ink)} select.st-chip.stsel:focus-visible{outline:2px solid var(--gold);outline-offset:1px} /* THE CHANGE LOG, FOLDED — 27 October 2026. * * "dis does dnto have to be visible all the time it can be a collapses section" * * It is a record of the past and the panel is about the present, so it is shut until somebody * asks. The summary carries the count and the date of the last change, which is usually the * whole question — whether anything has happened, and when. */ details.histsec > summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none} details.histsec > summary::-webkit-details-marker{display:none} details.histsec > summary::before{content:"›";color:var(--faint);font-size:15px;line-height:1; transition:transform .12s;display:inline-block} details.histsec[open] > summary::before{transform:rotate(90deg)} details.histsec > summary h4{margin:0} details.histsec > summary:hover h4{color:var(--gold-ink)} details.histsec ul.hist{margin-top:10px} ul.hist .hwhat{color:var(--body)} ul.hist .hnote{font-size:12px} /* THE USE CASES, ON THEIR OWN LINE — 27 October 2026. * * "If it applies ornot oculd be jsut marked at th topwhen it says PM applies, hospo, Lite, so * something more in thse terms not a full section. with detail" * * They were the tail of the line under the title and are now a line of their own, directly under * it, carrying the pencil that edits them — close enough to read as one block with the meta line, * far enough to be its own section. The pencil is quiet until the row is under the cursor, like * every other section's. */ .usesrow{display:flex;align-items:center;gap:6px;margin:-10px 0 16px;min-height:24px} .usesrow .secedit{opacity:0;transition:opacity .12s} .usesrow:hover .secedit,.usesrow:focus-within .secedit{opacity:1} @media (hover:none){.usesrow .secedit{opacity:1}} /* THE STEP'S NAME IN FULL, AND THE MUST-HAVE BESIDE IT — 28 October 2026. * * "can you make the must have kust next ot hte name, and by the name is still truncated." * * Two halves of one line. The lanes key is a grid, and layout.css gave the name a column capped * at 250px — so a name longer than that was cut with an ellipsis on every reading, and the * hover that gives it back (public/fulltext.js) is an answer to "what did it say", not to "I * want to read my flow". A step's name is the one thing on that line somebody is actually * reading, so it gets the room: twice the share of what is left over, a floor of 220px, and it * WRAPS rather than truncating. A two-line name makes its row taller, which is the correct * trade — a name nobody can read costs more than a row that is 20px deeper. * * The chips sit in column 3, `.ilife`, which layout.css already reserved directly after the * name; `auto` so they take exactly their own width and no more. This sheet loads after * layout.css, so these override without touching the page run's file. */ .drawer .llegend > li > .lsum{ /* NO `auto` TRACK ANYWHERE, 30 October 2026 — "i will lie the items asligned (must have, buitl the actor, the surface, so it visually easier to follow)" Every step line is its own grid, so the columns only line up down the list if each track resolves to the same width in every row — and an `auto` track resolves to ITS OWN row's content. Three of them were auto, and the first was the must-have/built pair, so a step with a long name or a long actor pushed its whole row out of step with the ones above it. Fixed and fr tracks only: fr splits the leftover the same way in every row, and a minmax track beside an fr one sits at its minimum, which is the same number in every row. The cost is that a long chip is clipped rather than widening its row — which is the trade the alignment is worth, and `min-width:0` in layout.css already keeps it from overflowing. */ /* The hand-off cell gets more of the leftover than the reads-from one beside it — 2 November 2026, "if its not a gate and more that two workflows are activated i want to see if in the collapsed line, currently only 1 fits". It was an even split, and at that width not even ONE hand-off fitted: "→ WF-84 Quoting and budget approval" is 239px of text in a 114px cell. Twenty-six steps hand to more than one, and one of them to six. */ grid-template-columns:16px 26px minmax(200px,1.7fr) 152px minmax(110px,170px) minmax(130px,230px) minmax(0,.7fr) minmax(0,1.9fr) 118px 14px; column-gap:10px; } .drawer .lsum > .llab{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35} /* EVERY CELL NAMED, because one that is not gets auto-placed. The grip was drawn first in the markup and had no column of its own, so the grid put it at the FAR RIGHT of the row — invisible as a mistake because the line still READ correctly, textContent being markup order. A grid gives no warning about this: it simply fills the next free cell. So the whole row is mapped here, in reading order, and a new span added later lands beside them rather than at the end. */ .drawer .lsum > .idrag{grid-column:1;justify-self:center;margin:0;padding:0} .drawer .lsum > b{grid-column:2} .drawer .lsum > .llab{grid-column:3} .drawer .lsum > .ilife{grid-column:4;flex-wrap:nowrap} .drawer .lsum > .dotted{grid-column:5} .drawer .lsum > .sbadge{grid-column:6} /* THE TWO ARROWS TOGETHER, AND THE REST AFTER THEM — 28 October 2026. * * "its foof but it hould be net to in outbound flow, it is now at the end, which is not * visuallry correct. the nees confirming and the arrow need to be after it." * * The lanes key is a GRID, and every cell in it is placed by name — so a new span with no column * of its own was auto-placed wherever there was room, which is the end. In the markup it already * sat before the hand-off; the grid is what put it last. * So the row gains a column for it, immediately before the hand-off: what this step READS * (← WF-15) and what it HANDS ON (→ WF-28) are one question asked twice and belong side by side. * Everything that is about the step rather than about its neighbours — the needs-confirming mark * and the caret that opens it — follows them. */ .drawer .lsum > .fromflow{grid-column:7;margin-left:0} .drawer .lsum > .toflow{grid-column:8} .drawer .lsum > .iflags{grid-column:9} .drawer .lsum > .rcar{grid-column:10} /* NEEDS CONFIRMING, VISIBLE ON THE LINE — 28 October 2026. * * "also the hightlight for the needs confirming will need to get back" * * Two marks for one fact, and they do different jobs. The CHIP says it in words and carries the * reason on its hover; the LINE is marked so a flow with a doubt in it can be found without * reading every line of it. Both are in the in-progress colour rather than the gold — gold is * this page's voice for "decided", and a doubt is the opposite of decided. * * Quiet on purpose: an edge and a tint, not a block of colour. A marked step is still a step * somebody has to read, and a highlight that shouts drowns the words it is about. */ .llegend > li.flagged > .lsum, li.sb.flagged > .hd, .rlist > li.flagged > .rsum{ box-shadow:inset 3px 0 0 var(--prog); background:color-mix(in srgb, var(--prog) 5%, transparent); border-radius:6px; } /* The offer to mark one is quiet until the line is under the cursor — every line would otherwise carry a button inviting a doubt nobody has. */ .lsum .revadd,.hd .revadd{opacity:0;transition:opacity .12s} .llegend > li:hover .revadd,.llegend > li:focus-within .revadd, li.sb:hover .revadd,li.sb:focus-within .revadd{opacity:1} @media (hover:none){.revadd{opacity:1}} /* THE FOUR STATES, IN FOUR COLOURS — 28 October 2026. * * "for the drafting, in review - signed off and built status can you use colors so its easier * to identify - also i wnat to be able to filter by that." * * styles.css gave them two colours between four: drafting and in review shared one, signed off * and in build shared the other — so the two answers that matter most, "somebody still has to * look at this" and "this is being built", were the same colour as their neighbours. * * Four now, and they read as a progression rather than as four unrelated labels: * Drafting grey, hollow. The state a record is born in; it should not shout. * In review amber — this page's voice for "in progress, do not rely on it yet", the same * colour a step wears while it needs confirming. * Signed off green. Settled, which is what green has meant here since the first reading. * In build gold, filled. Gold is this page's "decided", and a flow being built is a * decision somebody is acting on — the only one of the four that is filled, so it * is findable down a column of sixty rows at a glance. * Anything else — "Pending" is on one record — keeps the plain chip, because a colour it has * never been given would be a meaning nobody agreed. */ .st-chip.s-Drafting{color:var(--pend);border-color:var(--rule-strong);background:transparent} .st-chip.s-In-review{color:var(--prog);border-color:currentColor;background:var(--prog-bg)} .st-chip.s-Signed-off{color:var(--built);border-color:currentColor;background:var(--built-bg)} /* FILLED, not another shade of amber. `--prog` (#8A6212) and `--gold-ink` (#86682F) are close enough to read as one colour in a column of sixty rows — which is exactly the failure she reported — so "in build" is told apart by FILL rather than by hue: a solid gold pill, the only one of the four, findable at a glance and still gold, which is this page's "decided". */ .st-chip.s-In-build{color:var(--ground);border-color:var(--gold);background:var(--gold);font-weight:600} /* The picker keeps the colour of whatever is chosen, so the control and the chip agree. */ select.st-chip.stsel.s-In-build{font-weight:600} /* The filter pills wear the same four colours, quietly — a filter row is a row of controls and four filled pills would out-shout the catalogue they sit above. Colour on the word, the fill only when it is the one that is on. */ .fpills.statusf button.sp.s-Drafting{color:var(--pend)} .fpills.statusf button.sp.s-In-review{color:var(--prog)} .fpills.statusf button.sp.s-Signed-off{color:var(--built)} .fpills.statusf button.sp.s-In-build{color:var(--gold-ink)} .fpills.statusf button[aria-pressed="true"]{background:var(--ink);color:var(--ground)} .fpills.statusf button.sp.s-In-review[aria-pressed="true"]{background:var(--prog);color:var(--paper)} .fpills.statusf button.sp.s-Signed-off[aria-pressed="true"]{background:var(--built);color:var(--paper)} .fpills.statusf button.sp.s-In-build[aria-pressed="true"]{background:var(--gold-ink);color:var(--paper)} /* Same guard as the "where it runs" row: `.fpills` is a flex box that must be allowed to wrap. */ .fpills.statusf{display:flex;flex-wrap:wrap;min-width:0} /* WHERE A STEP READS FROM — 28 October 2026. * * "i have the capacity of adding a workflow to a step, as somethign that comes next, but in * some items i would liketo have it as a dependency ... in rent calculation i have a step that * is Rent model idenfiiied and that comes from the lease extraction - the flow is not trigger * by it but dependent on thte step i would like to be able to get that in" * * The arrow is the whole design. A hand-off already reads `→ WF-28`; a dependency reads * `← WF-15`, in the same place, in the same shape, pointing the other way. One glance down a * flow says what it hands on and what it waits for, and nobody has to learn a second vocabulary. * Blue rather than the gold: gold is this page's "decided", and this is a fact about somewhere * else — the same blue the before-and-after columns use for the side that comes first. */ .fromflow{display:inline-block;font:500 10.5px/1.5 var(--sans);color:#2F5D8A; border:1px solid currentColor;border-radius:4px;padding:0 5px;margin-left:6px;white-space:nowrap} :root[data-theme="dark"] .fromflow{color:#8FB4DA} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fromflow{color:#8FB4DA}} /* The picker: a workflow, then — when she knows it — the step of it. Two selects on a line, with the second saying "the flow as a whole" when nobody has narrowed it down, because a dependency named roughly is worth more than one nobody recorded. */ .ipickf{display:flex;flex-direction:column;gap:5px;min-width:0} .ifrow{display:flex;gap:5px;align-items:center;min-width:0} .ifrow .ifwf{flex:1 1 46%;min-width:0} .ifrow .ifst{flex:1 1 54%;min-width:0} .ifrow select{font:400 12px/1.3 var(--sans);padding:4px 6px;border:1px solid var(--rule-strong); border-radius:6px;background:var(--ground);color:var(--ink);max-width:100%} .ifdel{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;padding:0 3px} .ifdel:hover{color:var(--assume)} .ifadd{align-self:flex-start;font:500 11.5px/1 var(--sans);padding:5px 9px;border-radius:999px; border:1px dashed var(--rule-strong);background:transparent;color:var(--muted);cursor:pointer} .ifadd:hover{color:#2F5D8A;border-color:#2F5D8A} /* THE CATALOGUE AS A MAP — 28 October 2026. * * "i want the lifechyle view to be a other view in hte main screen so i want to be able to see * the workflows as a list, or as a relation to each other, and i fh click on them i want to be * able to edit them" * * The cards and the columns are needs.css's — one definition, so the map on the catalogue and the * map on the requirements page cannot drift into looking like two different things. What is here * is only what the catalogue adds: the room around it and the lead above it. */ #catMap{margin:4px 0 24px} #catMap .lcmap{padding-bottom:6px} .seg.catview{margin-right:10px} /* WHAT COMES BEFORE AND AFTER, WITH THE ARROWS — 28 October 2026. * * "i would like to see as the other view that i have when i click fo rht fist time i get the * first view on what is beofre and after with the arrows. and then i can edit form that view * not the list." * * Three columns and two arrows between them, reading left to right the way the dependency does: * what must be live first, then this workflow, then what needs it. The record is one press * further, on the card in the middle — somebody has seen what they would be editing before they * open it. */ #catMap .mfbar{display:flex;align-items:center;gap:12px;margin:0 0 12px} #catMap .mfocus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); gap:10px;align-items:start} #catMap .mfside{position:relative;display:flex;flex-direction:column;gap:7px;padding-right:22px} #catMap .mfside.after{padding-right:0;padding-left:22px} #catMap .mfside h4,#catMap .mfalso h4{margin:0 0 2px;font:600 10.5px/1.3 var(--sans); letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} #catMap .mfarrow{position:absolute;right:2px;top:50%;transform:translateY(-50%); font-size:18px;color:var(--faint);line-height:1} #catMap .mfside.after .mfarrow{right:auto;left:2px} #catMap .mfmid{display:flex;flex-direction:column;gap:8px;border:1px solid var(--rule-strong); border-radius:12px;background:var(--paper);padding:12px} #catMap .mfmid .lccard{border-width:2px;border-color:var(--ink);background:var(--cream)} #catMap .mfalso{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start} #catMap .mfalso h4{flex:1 1 100%} #catMap .mfalso .lccard{flex:0 1 240px} @media (max-width:860px){ #catMap .mfocus{grid-template-columns:1fr} #catMap .mfside,#catMap .mfside.after{padding:0 0 18px} #catMap .mfarrow{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(90deg)} } /* AND THE RINGS KEEP GOING, 28 October 2026: * "also on the lifecyles i want to have it layers a little bit more, so the immediate before, * and after linked with arrows (as on the other view) and then the othesrs linked in toher * layers i o want ot anavigate. so i can see the immediate inpact but also other flows that * come after" * * One column per layer, outermost on the left, so every arrow points the same way: each column * feeds the one to its right and the middle is where the two sides meet. Auto columns rather * than three named ones, because how many there are is how far out she has asked to look; the * middle keeps its weight so the eye still finds the workflow being read. */ #catMap .mfocus.layered{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr);overflow-x:auto;padding-bottom:4px} #catMap .mfocus.layered .mfmid{min-width:200px} #catMap .mflayer{position:relative;display:flex;flex-direction:column;gap:7px;padding-right:22px} #catMap .mflayer.after{padding-right:0;padding-left:22px} #catMap .mflayer h4{margin:0 0 2px;font:600 10.5px/1.3 var(--sans); letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} #catMap .mflayer h4 i{font-style:normal;opacity:.7} /* A layer two or more out is context rather than the answer, so it is drawn quieter — the immediate ring stays the loudest thing on either side of the middle. */ #catMap .mflayer:not([data-step="1"]) .lccard{opacity:.78} #catMap .mflayer:not([data-step="1"]) .lccard:hover{opacity:1} #catMap .mflayer .mfhid{margin:2px 0 0;font-style:italic} #catMap .mfdepth{margin-left:auto;display:flex;align-items:center;gap:8px; font-size:11.5px;color:var(--muted)} @media (max-width:860px){ /* Stacked, outermost first, with the arrows turned to match — a row of five columns on a phone is five unreadable columns. */ #catMap .mfocus.layered{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible} #catMap .mflayer,#catMap .mflayer.after{padding:0 0 18px} #catMap .mflayer .mfarrow{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(90deg)} #catMap .mfdepth{margin-left:0;flex-wrap:wrap} } /* A BLOCKER, WHERE THE EYE ALREADY IS, 28 October 2026: * "also when i marked a step a s blocker cn i see a read dot next o it in the step collapsed * view?" * The "⛔ stops the flow" chip sits in the flags column at the end of the row, which is the * first place the row runs out of width. The dot goes immediately before the step's name * instead — the one part of the line that is never squeezed — and the chip keeps the words. */ .drawer .stopdot{flex:none;display:inline-block;width:8px;height:8px;border-radius:50%; background:#B5462F;margin-right:6px;vertical-align:middle} @media (max-width:640px){ .drawer .stopdot{width:9px;height:9px} } /* EDITING IN A LENS, 28 October 2026: * "when i;m editing, and i decide to edit using a specif use case or asset clase, do thoe * cairations get reistered ... i can set as -> same as Core / PM or add a new step and that * will aonly aply to the variation i'm in" * The class's own answer reads as the field; the core sits under it in small type with the one * control that matters next to it. Quiet, because most fields have no override and the two that * do should be the only places the eye stops. */ .drawer .lenswas{display:block;margin:3px 0 0;font:400 11.5px/1.45 var(--sans);color:var(--muted)} .drawer .lenswas em{font-style:normal;font-weight:600;color:var(--gold-ink,#8a6a1f)} .drawer .lenssame{font:inherit;font-size:11px;background:none;border:1px solid var(--line,#e3ddd2); border-radius:5px;padding:1px 6px;margin-left:4px;cursor:pointer;color:inherit;min-height:22px} /* Two ways for the words to move, 30 October 2026 — "use core -> override current one with core valeue - and Make core -> override core with current". The second changes what every class reads, so it carries the gold rather than sitting in the same grey as the first. */ .drawer .lenssame.lensmake{border-color:rgba(198,160,58,.55);color:var(--gold-ink,#8a6a1f)} .drawer .lenssame.lensmake:hover{border-color:var(--gold,#c6a03a);background:rgba(198,160,58,.1)} .drawer .lenssame:hover{border-color:var(--gold,#c6a03a)} .drawer .lensnote .lensedit{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)} @media (max-width:640px){ .drawer .lenssame{min-height:32px;padding:2px 10px} } /* The inferred neighbours, under the strict ones and reading as what they are. Quieter than a layer, because "shares a party with" is not an order. */ #catMap .mfinf .mfinfl{flex:1 1 100%;margin:0 0 4px} #catMap .lccard.r-inf{opacity:.8;border-style:dashed} #catMap .lccard.r-inf:hover{opacity:1} /* THE MUST-HAVE MARK IN THE CLASS CELLS, 29 October 2026, in place of the maturity rung: * "as we're not usning the maturity levels now, you can hide them both form the lsiting and * form the views ... the must have's if how many of the must haves are presnt or not." * Three answers and three weights: met reads as the quiet good news it is, short carries the * count, and nothing marked is a dash that does not pretend to be an answer. */ .wl.must,.state.must{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px; font:600 11px/1.5 var(--sans);white-space:nowrap} .wl.must.m-ready,.state.must.m-ready{background:rgba(46,125,74,.14);color:#2E7D4A} .wl.must.m-short,.state.must.m-short{background:rgba(198,160,58,.18);color:var(--gold-ink,#8a6a1f)} .wl.must.m-unmarked,.state.must.m-unmarked{background:transparent;color:var(--faint);font-weight:400} .legend2 .wl.must{width:auto;height:auto;min-width:14px;min-height:10px} .cov .barline .seg.r-ready{background:#2E7D4A} /* Filing a workflow in a lane, beside the chip that reads it. 29 October 2026 — * "i want to be able to to change a worfklow to a different sublane, and i currently can't". */ .drawer .meta .lnpick{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:6px} /* The background and the ink are TOKENS, not #fff and `inherit`. Written light-only, this read as pale grey on white the moment the page went dark — the worst contrast on the page at 1.52:1. Every select the other run styles already does it this way. 3 November 2026. */ .drawer .meta .lnpick select{font:inherit;font-size:11.5px;padding:2px 6px;min-height:28px; border:1px solid var(--rule-strong);border-radius:6px;background:var(--ground);color:var(--ink);max-width:200px} .drawer .meta .lnpick select:disabled{opacity:.55} @media (max-width:640px){ .drawer .meta .lnpick select{min-height:36px;max-width:100%} } /* WHERE A BRANCH GOES, ON THE LINE — 29 October 2026: * "if something is a gate and then the steps are going to a workflow or antoher step or * finishing the flow, then that should be ivislbe some how not in a complex way gur mabe * arrows or somehing that indicated it." * One chip per branch, under the step's own line: the answer that takes it, an arrow, and where * it goes. Three destinations and three colours — another step, another workflow, the end — so * the shape of a fork reads before any of the words do. */ .drawer .brstrip{display:flex;flex-wrap:wrap;gap:5px;align-items:center; margin:3px 0 2px;padding-left:28px} .drawer .brstrip .brg{font:400 11px/1.6 var(--sans);color:#8a6a1f;padding:0 2px 0 0} .drawer .brc{display:inline-flex;align-items:center;gap:4px;max-width:340px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font:400 11px/1.7 var(--sans); border:1px solid var(--line,#e3ddd2);border-radius:999px;padding:0 8px;color:var(--muted)} .drawer .brc em{font-style:normal;font-weight:600;color:var(--ink,#2b2b2b)} .drawer .brc i{font-style:normal;opacity:.65} .drawer .brc.to-step{border-color:rgba(43,43,43,.18)} .drawer .brc.to-flow{border-color:rgba(58,110,165,.45);color:#3A6EA5} .drawer .brc.to-end{border-color:rgba(181,70,47,.4);color:#B5462F} /* What the record said in words, where the parser could not place it: no colour, because an unresolved destination is not a destination. */ .drawer .brc.to-as{border-style:dashed} .drawer li.open > .brstrip{opacity:.65} @media (max-width:640px){ .drawer .brstrip{padding-left:10px} .drawer .brc{max-width:100%} } /* The gate's own mark, 29 October 2026 — "so can you add a ◆ simbol to the gate ones so are easy to idenfify?" Beside the name, the same cell the blocker dot uses. */ .drawer .gatedot{flex:none;margin-right:5px;font-size:10.5px;line-height:1;color:#8a6a1f;vertical-align:middle} .drawer li.gate > .lsum .gatedot,.drawer li.gate > .hd .gatedot{color:#8a6a1f} /* The way back to the core, on the lens note. 29 October 2026 — "i'm getting flagged the my flow differers to the core one but i dont see a way to edit the core one." */ .drawer .lensnote .lenscore,.drawer .lanelead.useread .lenscore{margin-left:8px;font-size:11px;min-height:26px;padding:1px 8px} .drawer .lanelead.useread .lensedit{display:block;margin-top:3px} @media (max-width:640px){ .drawer .lensnote .lenscore,.drawer .lanelead.useread .lenscore{display:block;margin:6px 0 0;min-height:34px} } /* THE SURFACES ON ONE LINE, 30 October 2026 — "Try to ensure they fit on the same line." * Seven names and seven boxes in a row that also carries its own label, so the gaps come down * and "Outside the platform" is shortened to "Outside" where it is a checkbox: the full name is * on the hover and everywhere the surface is READ. Below 820px it wraps rather than scrolls, * because a row of checkboxes that runs off the side is a row with options nobody finds. */ .drawer .ichk{gap:4px 10px;flex-wrap:nowrap;overflow:visible} .drawer .ichk > span{min-width:72px;flex:none} .drawer .ichk label{white-space:nowrap;font-size:12px} .drawer .ichk label input{margin:0} .surfs{gap:4px 10px;flex-wrap:nowrap} .surfs label{white-space:nowrap;font-size:11.5px} @media (max-width:820px){ .drawer .ichk,.surfs{flex-wrap:wrap} } /* ------------------------------------------------------------------ 22. CLEARING A SCOPING 30 October 2026 — "i want to have a wat to clear comments like these: in this is not current any more but it remains to be there". The way out sits on the line that states the scoping, quiet until the line is under the pointer: it is a real edit, not a dismissal, and it should not compete with the step's own name for attention. */ .drawer .unscope{font:inherit;font-size:11px;background:none;border:1px solid var(--line,#e3ddd2); border-radius:5px;padding:1px 7px;margin-left:8px;cursor:pointer;color:var(--muted);min-height:22px; opacity:.45;transition:opacity .12s ease,border-color .12s ease} .dropped li:hover .unscope,.drawer .unscope:focus-visible,li:hover > .unscope{opacity:1} .drawer .unscope:hover{opacity:1;border-color:var(--gold,#c6a03a);color:var(--gold-ink,#8a6a1f)} .drawer .lensbits{color:var(--muted)} @media (max-width:640px){ .drawer .unscope{min-height:32px;padding:3px 10px;opacity:1} } /* A STEP NOBODY HAS BUILT MUST NOT SIT 2px OUT, 30 October 2026 — the same ask as the grid above: "i will lie the items asligned (must have, buitl the actor, the surface...)". The dashed edge on an absent step was a real border, so that row was 2px narrower than its neighbours and every fr track in it resolved a pixel short — the columns were aligned everywhere except on the rows the reader most wants to compare. Drawn as an inset shadow instead, the way the flagged rows already are: the same mark, outside the box model. */ .drawer .llegend > li.absent,.drawer .rlist > li.absent,.drawer li.sb.absent{ border-left:0; box-shadow:inset 2px 0 0 var(--rule-strong); } .drawer .llegend > li.absent.flagged,.drawer .rlist > li.absent.flagged,.drawer li.sb.absent.flagged{ box-shadow:inset 3px 0 0 var(--prog); } /* ------------------------------------------------------------------ 23. WHAT CAME OFF THE CLASS GRID, AND THE WORD THAT REPLACED IT — 30 October 2026. The grid lost its "Build state" column ("for each use case we have removed the concept of the status per each in pending build"), so the row is a name and two answers rather than three. `.clsgrid`'s own rule is written for three, and a grid with a column too many leaves a gap down the right of every row. */ .drawer .clsgrid.cls3{grid-template-columns:150px repeat(2,minmax(0,1fr))} @media (max-width:700px){ .drawer .clsgrid.cls3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* And the size of the flow in one word, on the line that carries the count it comes from — "you can use the maturiry form it jsut in the sense of its basic or advane based on the number of steps". Said in the same voice as the rest of the meta line: it is a reading, not a badge, and a word that shouts would read as a grade on the people who wrote the flow. */ .drawer .imeta .isize{font-weight:500;color:var(--ink);border-bottom:1px dotted var(--rule-strong);cursor:help} /* ------------------------------------------------------------------ 24. FINDING A WORKFLOW BY TYPING ITS NAME — 30 October 2026, "as for the search in worflows (to make the relation of a workflow in or out) i shoudl be able to search by starting to type it by name". The box looks like the select it replaces; the answers hang under it rather than opening a menu, because the list IS the answer once two or three letters are in. */ .drawer .wffind{position:relative;display:block;margin-top:10px} .drawer .wffind .wfq{font:400 13px/1.2 var(--sans);padding:8px 10px;width:100%; border-radius:8px;border:1px solid var(--rule-strong);background:var(--ground);color:var(--ink)} .drawer .wffind .wfq:focus{outline:none;border-color:var(--gold,#c6a03a)} .drawer .wfhits{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px; list-style:none;max-height:244px;overflow:auto;background:var(--ground); border:1px solid var(--rule-strong);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.12)} .drawer .wfhits li{margin:0} .drawer .wfhit{display:block;width:100%;text-align:left;font:400 13px/1.35 var(--sans); padding:7px 9px;border:0;border-radius:6px;background:none;color:var(--ink);cursor:pointer} .drawer .wfhit b{font:400 11.5px/1 var(--mono);color:var(--faint);margin-right:7px} .drawer .wfhit:hover,.drawer .wfhit.on{background:rgba(198,160,58,.12)} .drawer .wfhit.on b{color:var(--gold-ink,#8a6a1f)} .drawer .wfnone{font:400 12.5px/1.4 var(--sans);color:var(--muted);padding:7px 9px} /* ------------------------------------------------------------------ 25. HOW URGENT THE FLOW ITSELF IS — 30 October 2026, "another item per worfklow and at the top but also int eh list and flows view i want to have also a must-have so that i know the priority of building the flow." The same three words a step gives, in the same colours, so nobody learns a second vocabulary for the same question. The UNANSWERED state is drawn rather than hidden: dashed and quiet, so a flow waiting on the decision looks like one instead of looking like a "later". It is only drawn unanswered on the record, which is where it is answered. */ .wfgo{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px; font:500 11px/1 var(--sans);letter-spacing:.02em;white-space:nowrap; border:1px solid var(--rule-strong);color:var(--muted);background:transparent} /* MUST-HAVE IS RED — 2 November 2026, "can you makr the must haves in red". It was gold, which is this page's voice for "decided" and reads as approval; a flow that has to be built before the platform can go live is not an approval, it is the thing standing in the way. The same red the catalogue already uses for an answer nobody has stood behind. */ .wfgo-must{border-color:var(--assume,#A2412F);color:var(--assume,#A2412F); background:color-mix(in srgb, var(--assume,#A2412F) 8%, transparent)} .wfgo-medium{border-color:var(--prog,#9a7a2e);color:var(--prog,#9a7a2e);background:transparent} .wfgo-later{border-style:dashed} .wfgo-none{border-style:dashed;color:var(--faint)} /* THE SAME SIZE AS THE BADGES BESIDE IT — "can you ple the pull the same size as the others". `.vetbadge` and `.openbadge` are 600 11.5px with 6px/11px of padding and no fixed height; this was 500 11px in a 20px box, so it sat a hair smaller than the two it stands next to and the row read as two chips and an afterthought. Matched here rather than by changing the badges, because those are drawn by the file the other run regenerates. */ .ptitle .wfgo{margin-left:8px;height:auto;font:600 11.5px/1 var(--sans);padding:6px 11px} .wfgosel{cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center; text-align-last:center} .wfgosel:focus-visible{outline:2px solid var(--gold,#c6a03a);outline-offset:1px} td.wf .wfgo{margin-left:8px;vertical-align:middle} .lcch .wfgo{height:16px;padding:0 6px;font-size:10px;margin-left:6px} /* ------------------------------------------------------------------ 26. THE NAME ON THE STICKY BAR — 2 November 2026, "the sticly title should also inclde the tittle of the worflow i'm in". It arrives only once the heading has left the top of the panel, so the two are never on screen at the same time. Hidden by width rather than by display:none so it does not jump the row's other cells about as it comes and goes. */ .drawer .ph2 .phname,.drawer .ph2 .phopen{ max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding:0;margin:0;border:0; background:none;color:inherit;font:inherit;transition:max-width .18s ease,opacity .14s ease} .drawer .ph2.named .phname{max-width:min(44ch,46vw);opacity:1;cursor:pointer; font:500 14px/1.3 var(--sans);color:var(--ink);text-overflow:ellipsis;padding:0 2px} .drawer .ph2.named .phname:hover{color:var(--gold-ink,#8a6a1f)} .drawer .ph2.named .phopen{max-width:14ch;opacity:1;cursor:pointer; font:500 11px/1 var(--sans);color:var(--gold-ink,#8a6a1f); border:1px solid var(--gold,#c6a03a);border-radius:999px;padding:3px 9px;margin-left:2px; background:rgba(198,160,58,.10)} @media (max-width:640px){ .drawer .ph2.named .phname{max-width:min(22ch,52vw);font-size:13px} .drawer .ph2.named .phopen{max-width:10ch} } /* ------------------------------------------------------------------ 27. THE PRIORITY FILTER — 2 November 2026, "i would like to have a fitering enabled on the priority in the view". It sits with the other filters and looks like them; the gold edge is only to say it is ON, since a filter that is on and looks like a filter that is off is how somebody spends ten minutes wondering where half the catalogue went. */ #fPrio.on{border-color:var(--gold,#c6a03a);color:var(--gold-ink,#8a6a1f);background:rgba(198,160,58,.10)} /* ------------------------------------------------------------------ 28. WHICH STEPS DIFFER — 2 November 2026, "on the hightlight i want to have which steps are fifferent ... i f enter each steap i can't see waht those differnece are". The one mark that existed was a gold edge on `li.varied`, styled only inside `.flow` — which is not the list a record opens on, so in the lanes key nothing was drawn at all. The edge is drawn in both readings now, and the line says WHICH fields differ rather than only that something does. */ .drawer li.differs > .lsum,.drawer li.differs > .rsum,.drawer li.differs > .hd{ box-shadow:inset 3px 0 0 var(--gold,#c6a03a)} .drawer .dfmark{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px; border-radius:999px;border:1px dashed var(--gold,#c6a03a); font:500 10.5px/1.3 var(--sans);color:var(--gold-ink,#8a6a1f); white-space:nowrap;max-width:28ch;overflow:hidden;text-overflow:ellipsis} .drawer .lensnote .dfwhich{color:var(--muted)} .drawer .lensnote .dfwhich i{font-style:normal} .drawer .dfgo{font:inherit;font-size:11.5px;background:none;border:1px solid var(--rule,#e3ddd2); border-radius:5px;padding:1px 7px;margin:0 3px;cursor:pointer;color:var(--gold-ink,#8a6a1f)} .drawer .dfgo:hover{border-color:var(--gold,#c6a03a);background:rgba(198,160,58,.1)} .drawer .dfonly.on{border-color:var(--gold,#c6a03a);color:var(--gold-ink,#8a6a1f); background:rgba(198,160,58,.12)} /* The whole of the difference, in one place, inside the step. Every layered field — including the five that already carry their own note under them — so there is somewhere complete to look rather than five notes and five silences. */ .drawer .dfbox{border:1px solid var(--gold,#c6a03a);border-radius:10px; background:rgba(198,160,58,.06);padding:10px 12px;margin:0 0 12px} .drawer .dfbox .dfh{margin:0 0 8px;font:500 10.5px/1.3 var(--sans);letter-spacing:.1em; text-transform:uppercase;color:var(--gold-ink,#8a6a1f)} .drawer .dfrow{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1fr) auto; gap:4px 12px;align-items:baseline;padding:5px 0;border-top:1px solid rgba(198,160,58,.25)} .drawer .dfrow:first-of-type{border-top:0} .drawer .dfrow .dff{font:500 11px/1.4 var(--sans);color:var(--muted)} .drawer .dfrow .dfv{font-size:13px;line-height:1.45;color:var(--ink)} .drawer .dfrow .dfc{font-size:12.5px;line-height:1.45;color:var(--muted)} .drawer .dfrow .dfc i{font-style:normal;color:var(--faint)} .drawer .dfrow .dfb{white-space:nowrap} @media (max-width:760px){ .drawer .dfrow{grid-template-columns:1fr} .drawer .dfmark{max-width:18ch} } /* ------------------------------------------------------------------ 29. FINDING A WORKFLOW INSIDE A STEP — 2 November 2026, "the ability to search on the wordklws linking piece on the steps detial (th next and prior)". The same box as the Before/after columns, narrower because it sits in a row with a step picker beside it. Once a workflow is chosen on the "comes from" side it reads as a chip: the answer is the name, and the box has done its job. */ .drawer .iffind{display:inline-block;position:relative;min-width:min(320px,100%);flex:1 1 240px} .drawer .iffind .wfq{font:400 12.5px/1.2 var(--sans);padding:6px 9px} .drawer .ifwfpick{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:8px; border:1px solid var(--rule-strong);background:var(--paper);font:400 12.5px/1.3 var(--sans); color:var(--ink);flex:1 1 240px;min-width:0} .drawer .ifwfpick b{font:400 11.5px/1 var(--mono);color:var(--gold-ink,#8a6a1f)} .drawer .ifwfx{margin-left:auto;border:0;background:none;cursor:pointer;color:var(--faint); font-size:14px;line-height:1;padding:0 2px} .drawer .ifwfx:hover{color:var(--assume,#A2412F)} /* The search sits IN THE BRANCH ROW, beside the dropdown that says what kind of destination it is — 2 November 2026: "open next and ahve the search in there, not in another field". The dropdown keeps the destinations that are short and knowable (a step of this flow, the end of it); the hand-off, which was sixty-one options sorted by id, is found by name. */ .drawer .inxrow .inxfind{flex:1 1 220px;min-width:0;max-width:380px} /* The same metrics as the select beside it, so the two sit on one line rather than one floating a few pixels above the other. */ .drawer .inxrow .inxfind{display:block} .drawer .inxrow .inxfind .wfq{font:400 13px/1.2 var(--sans);padding:7px 9px} .drawer .inxrow .inxwf{flex:1 1 220px;max-width:380px} /* ROOM FOR THE SEARCH — 2 November 2026: "make that dropdown somaer so there is no room for the selection. also tefirst one, the condition where i put yes, and no can be smaller". The row is three things wide and the two that were already there were sized for a row with nothing else in it: the condition took a fixed 200px to hold the word "yes", and the destination dropdown took every pixel that was left. Both shrink to what they actually hold — the condition is a word, the dropdown is one of fourteen short phrases — and the search gets the rest, because it is the one that has a name typed into it. */ .drawer .inxrow .inxl{flex:0 0 112px;min-width:0} .drawer .inxrow .inxt{flex:0 1 196px;min-width:0} /* With no search beside it the dropdown has the row to itself again, as it did before. */ .drawer .inxrow:not(:has(.inxfind)):not(:has(.inxwf)) .inxt{flex:1 1 auto} @media (max-width:760px){ .drawer .inxrow{flex-wrap:wrap} .drawer .inxrow .inxl{flex:0 0 92px} .drawer .inxrow .inxt{flex:1 1 150px} .drawer .inxrow .inxfind,.drawer .inxrow .inxwf{flex:1 1 100%} } /* The scoping block reads like the wording one, because it answers the same question about a different kind of difference — 2 November 2026, "so i can select if to override the core flow, or override the current flow using core". One row, one sentence, the two directions. */ .drawer .dfsrow{grid-template-columns:minmax(0,1fr) auto} .drawer .dfrm{border-color:rgba(162,65,47,.45);color:var(--assume,#A2412F)} .drawer .dfrm:hover{border-color:var(--assume,#A2412F);background:rgba(162,65,47,.08)} .drawer .dfrm.armed{background:var(--assume,#A2412F);border-color:var(--assume,#A2412F);color:#fff} /* ------------------------------------------------------------------ 30. SEVERAL HAND-OFFS ON ONE LINE — 2 November 2026, "if its not a gate and more that two workflows are activated i want to see if in the collapsed line, currently only 1 fits". One hand-off keeps its name; two or more become ids, which are short enough to sit side by side, with the names on the hover. The cell stops clipping and starts listing. */ /* It WRAPS rather than clipping: the point of the cell is to say where the work goes, and a second line costs less than an ellipsis that hides a workflow. */ .drawer .toflow.hands{white-space:normal;overflow:visible;text-overflow:clip;cursor:help;line-height:1.7} .drawer .toflow.hands .hid{display:inline-block;font:400 11px/1 var(--mono);font-style:normal; padding:3px 6px;margin-left:4px;border-radius:5px; border:1px solid #9DB6CF;color:#2F5D8A;background:transparent} .drawer .toflow.hands .hid.more{border-style:dashed;color:var(--muted);border-color:var(--rule-strong)} @media (max-width:760px){ .drawer .toflow.hands .hid{padding:2px 4px;margin-left:3px} } /* ------------------------------------------------------------------ 31. DARK MODE HAD TO BE MEASURED, NOT LOOKED AT — 3 November 2026 "the dark mode has some issues with contracts that needs to be fixed;" Measured in a dark browser, every element with text, foreground against the first opaque background behind it. Four faults, and none of them was a dark-mode rule gone wrong — all four were a LIGHT value written with no dark counterpart: 1.52:1 a