` and never touched `.wrap` - was the one drawing it correctly. */ .tabsbar{padding-top:2px;padding-bottom:8px} /* ============================================================================================ THE CHIP ROW WRAPS. IT DOES NOT SCROLL, AND THAT IS THE WHOLE OF THIS RULE. IT WAS `overflow-x:auto` WITH THE SCROLLBAR HIDDEN UNTIL 2026-09-17, and measured at 390px that row hid 477px of its own content on the orders page (eight chips) and 142px on the five sales pages (five chips) - with no scrollbar, no fade and no edge, so nothing on the screen said the rest existed. Worse, the chip carrying `aria-current` was itself cut in half on `?tab=ready`, `?tab=confirmed`, `/quotations` and `/won`: the reader could not see WHERE THEY WERE. A SCROLLER CANNOT FIX THE SECOND HALF OF THAT WITHOUT SCRIPT. A scroll container starts at `scrollLeft: 0` and only script moves it, so "scroll the current chip into view" is a line of JavaScript - and this app links exactly three scripts, each enhancing something that already works without it, under `script-src 'self'` with no inline. A chip row that is WRONG until a script runs is not that bargain. There is no CSS that scrolls a box to one of its children; `order:-1` on the current chip would do it by reordering, and the order of these five is the owner's own ruling (see `SALES_PAGES` in views/layout.js) and not ours to shuffle per page. SO IT WRAPS, at every width. Nothing is ever hidden, so there is nothing to advertise with a fade, and the rule "the current chip is never clipped" holds by construction rather than by arithmetic that could stop being true when a page grows a seventh chip - the orders row already has eight. It costs height on a phone and nothing at all from 700px up, where every row fits on one line: measured after this change, three lines at 390 for the orders row, two for the sales row, one line everywhere at 1280. ============================================================================================ */ /* ONE LINE, ALWAYS - the owner's ruling of 2026-09-17, looking at the five Sales chips broken over two rows: "بدي ياهن على صف واحد و بخط اصغر / دائما يظهرو على سطر واحد". IT WRAPPED FOR A REASON AND THE REASON IS ANSWERED, NOT IGNORED. Wrapping replaced a clipping scroller a round earlier, because a scroller starts at scrollLeft 0 and the chip you are ON could sit off the right edge - a reader who cannot see where they are. No CSS scrolls a box to one of its children, so the fix is four lines in `finder.js`, the script this app already puts on every signed-in page, and it is progressive: with no script the row still scrolls by hand and nothing is hidden, which is what wrapping was protecting against. SMALLER, AS ASKED: 12px to 11, the pill 41px high to 34, its padding 14 to 11. The five Sales chips come to ~430px against 362 of phone, so they do not all fit at any size worth reading - the row scrolls, and the one that matters is scrolled to. `scroll-padding-inline` leaves the page's own 14px gutter beside the chip when it is scrolled into place, so it never lands flush against the edge. The scrollbar is hidden on every engine: this is chrome, not a pane. */ .tabsrow{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;padding:2px 0 4px; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch;scroll-padding-inline:14px;overscroll-behavior-x:contain} .tabsrow::-webkit-scrollbar{display:none} .tab{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;text-decoration:none; border:1px solid var(--rule);background:var(--card);border-radius:11px;font-family:var(--ui); font-size:11px;font-weight:680;color:var(--ink2);padding:0 11px;min-height:34px; white-space:nowrap;box-shadow:var(--e-1)} .tab:hover{border-color:var(--brassInk);color:var(--ink)} .tab[aria-current="page"]{background:var(--priGrad); border-color:transparent;color:var(--priOn);box-shadow:var(--e-2)} .tab .c{color:var(--ink3);font-variant-numeric:tabular-nums} .tab[aria-current="page"] .c{color:#fff;opacity:.75} /* ============================================================================================ THE WORKFLOW TABS - the three lists on Creative Request, one drawn at a time. 2026-09-18. WHY THEY ARE NOT `.tab`, WHICH WAS THE FIRST THING TRIED. This page already carries a `.tabsrow` of five pill chips - the SALES pages - directly under its header. A second pill row under that one would be two identical-looking controls stacked two lines apart doing two unrelated things: the first changes which PAGE you are on, the second which LIST of this page you are reading. A reader who learns that a pill navigates has learned the wrong thing about half of them. SO THE SECOND CONTROL IS DRAWN AS THE SECOND CONTROL IN THE REFERENCE: underline tabs. A rule along the bottom of the strip, the active one marked by a heavier segment of that rule under its own label. It is the oldest tab idiom there is and it cannot be mistaken for a chip. THE INDICATOR IS `--priInk` AND NOT GOLD, IN BOTH THEMES, AND THAT IS A DECISION RATHER THAN A CONSTRAINT. The owner's ruling is that gold lives on the navy rail and nothing on a light surface is painted with it: `#D4A15A` is 2.32:1 on white and has no legal use there, which settles the light theme on its own. The DARK theme is the interesting half - the workspace card is `#141C2E`, a navy, and the dark gold `#E7BE7E` measures 9.77:1 against it, so gold would have been legal here. It is still not used, because the alternative is one control with two identities: navy in light, gold in dark, for no reason a reader could name. `--priInk` already flips per theme (`#14417E` on white, `#A8C4EC` on the dark card) and passes in both, so the tab is the brand colour in the sense the rest of this app means it. Gold stays the rail's. ========================================================================================== IT WRAPS, AND THE FIRST BUILD OF IT SCROLLED. That version was written believing three tabs would fit a phone; the walk measured them at 158 + 133 + 85 px plus two 16px gaps = 408 against the 362 a 390px phone has, and on `?tab=delivered` the tab carrying `aria-current` was itself cut off the right edge. That is the exact fault `.tabsrow` above was corrected for in September - THE READER CANNOT SEE WHERE THEY ARE - and it is worse here, because this strip is the only thing on the page that says which of the three lists is drawn. It was not visible in a screenshot: the shot is taken at `captureBeyondViewport` and the clipped tab is simply absent. TIGHTENING IT TO FIT WAS COSTED AND REFUSED. Gap 16->12, inner gap 8->6, 12px type to 11, a smaller badge: 39 of the 46 pixels needed, on a font stack that is SF on his phone and something else on this machine. A layout that fits by four pixels on one device does not fit. THE SCRIPT ANSWER WAS ALSO REFUSED. `finder.js` already scrolls `.tabsrow`'s current chip into view and is linked on every signed-in page, so pointing it at a second selector would have worked. This slice's constraint is no JavaScript beyond what exists, and a row that is WRONG until a script runs is the bargain that rule exists to refuse. SO THE BASELINE RULE MOVED ONTO THE TABS THEMSELVES, which is what makes wrapping legible. A rule on the STRIP with wrapped children leaves the first line's tabs floating 38px above it and the active indicator pointing at nothing. Each tab carrying its own 2px bottom border instead - `--rule` when it is not current, `--priInk` when it is - draws one continuous baseline on one line and one per line when it wraps, with the indicator always directly under its own label. The gaps are PADDING and not `gap` for exactly this: a flex gap would break the baseline into three dashes. Measured after: one line from 834 up, two lines at 390, nothing ever hidden. ========================================================================================== AND THEN THERE WERE FOUR, AND THEY FIT - 2026-09-18, the same day, later. THE OWNER REPLACED THE THREE TABS WITH FOUR (To assign / Active / Paused / Delivered) and his standing requirement about this strip is the one sentence he has repeated: "اهم شي يكونو دائما بسطر واحد و بشكل انيق" - above all, always on one line, and elegant. The three that were here never were: 174.4 + 148.9 + 106.4 = 429.7px against 362, wrapping since the hour they shipped. SO THE FOUR ARE SHORT BECAUSE THE COLUMN IS 362px AND THE CHROME IS HALF OF IT. Per tab: 18px of padding, an 8px gap, and a badge that is 17px at one digit and 23.8px at two - about 190px before a letter of a label is drawn. What is left for four words is roughly 180px, which is why "Waiting to assigned" (160.5px on its own) could not be one of them. MEASURED IN HEADLESS CHROME ON `-apple-system`, WHICH ON A MAC IS SF - the same face the phone draws, so this is no longer the "SF on his phone and something else on this machine" the note above had to discount. At 390px, in the 362px column: To assign 98.0 + Active 87.2 + Paused 93.6 + Delivered 106.4 = 385.2 at two digits each the same four at the counts this page shows today = 349.0 ONE LINE and with the Delivered count past 99 = 362.7 two lines THE LAST-CHILD RULE IS WHAT BOUGHT THE LAST NINE PIXELS, and it is a correction rather than a shave: `:first-child` has had `padding-left:0` since this strip was written, so that the first tab's label and its 2px baseline start flush with the content column. The last tab's padding was ending the baseline 9px short of the same column on the right. Mirroring it makes the strip symmetrical with the list under it AND is the only tightening taken - no gap, no type size and no badge was touched, because the note above is right that a layout which fits by four pixels does not fit. WHAT IS STILL TRUE IS THAT THIS IS THE CEILING. A fifth tab does not fit at any wording, and the four wrap the day the Delivered count reaches three digits. That is a real date rather than a hypothetical - the delivered list is "has ever been delivered" and only grows - and the fix when it arrives is a shorter first label (`Waiting` buys 11px, `Assign` 16px), measured the same way, and not another two pixels off the padding. ============================================================================================ */ /* ONE LINE, AND IT SCROLLS IF IT HAS TO - the owner, 2026-09-18, looking at four tabs broken over two rows on his own phone: "بدي هدول يكونو بسطر واحد حتى لو بدي مررن تمرير إذا ماكفو". THE MEASUREMENT SAID THEY FIT AND HIS PHONE SAID THEY DID NOT. 355.8px of a 362px column, in headless Chrome on this Mac - and then a wrap on the device, because Safari's own text size, the zoom he happens to be at and a hairline of scrollbar gutter are not the harness's. Six pixels of headroom was never a fit; it was a coin toss that the harness kept winning. SO THE ROW STOPS DEPENDING ON THE ARITHMETIC. It scrolls, exactly as `.tabsrow` above it does and for the same reason, and `finder.js` scrolls the lit tab into view so the one that matters is never the one off the edge. That is what makes a non-wrapping row safe here; without it a reader on `Delivered` opens the page looking at `To assign`. THE FLUSH EDGES SURVIVE: `:first-child` and `:last-child` still strip their outer padding, so the underline starts and ends with the column. `scroll-padding-inline` keeps the page's gutter beside a tab that has just been scrolled to. */ .wtabs{display:flex;flex-wrap:nowrap;align-items:stretch;margin:0 0 var(--sp-3); overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch;scroll-padding-inline:14px;overscroll-behavior-x:contain} .wtabs::-webkit-scrollbar{display:none} .wtab{display:inline-flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;text-decoration:none; font-family:var(--ui);font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink3); padding:var(--sp-2) 9px;min-height:38px;white-space:nowrap; border-bottom:2px solid var(--rule)} .wtab:first-child{padding-left:0} .wtab:last-child{padding-right:0} .wtab:hover{color:var(--ink)} .wtab[aria-current="page"]{color:var(--priInk);border-bottom-color:var(--priInk); font-weight:var(--w-bold)} /* THE COUNT AS A SMALL BADGE, which is what the reference draws and what tells a reader the tab they are NOT on has work on it. `min-width` plus tabular figures so one digit and two digits are the same pill; `line-height` and not padding sets its height, so it cannot push the tab taller than the 38px the strip is. */ .wtab .c{min-width:17px;padding:0 5px;border-radius:999px;background:var(--paper2); color:var(--ink3);font-size:var(--t-micro);font-weight:var(--w-bold);line-height:16px; text-align:center;font-variant-numeric:tabular-nums} /* ============================================================================================ THE ACTIVE BADGE IS `--pri` AND NOT `--priInk`, AND THE WALK IS WHY. IT SHIPPED AS `--priInk` WITH `--priOn` AND MEASURED 1.78:1 IN THE DARK THEME on every one of the six shots of this page. `--priInk` is the INK token - `#14417E` on white in light, and in dark it inverts to `#A8C4EC`, a pale blue meant to be read ON the dark card. Filling a badge with an ink token and then writing white on it is asking the palette to work upside down, and in exactly one of the two themes it does not. Nothing in the light theme showed it: there the same rule measures 8.8:1, which is why this was found by the probe and not by looking. `--pri` IS THE FILL TOKEN AND IT FLIPS THE RIGHT WAY - `#0B1F44` in light, `#25426F` in dark, both of them deep enough for `--priOn` white to sit on: measured 15.1:1 and 10.0:1. It is the same pairing `.make` and `.tab[aria-current]` already use, so the active badge is now the one filled brand mark on the page rather than a fourth idea about what navy means. THE TINTED ALTERNATIVE WAS MEASURED AND REJECTED: `--priBg` with `--priInk` passes in both themes (8.8 and 8.1) and is nearly the same VALUE as the inactive badge's `--paper2`, so active and inactive would have been two pale pills a shade apart. Contrast against the text is not the only thing a badge has to do. ============================================================================================ */ .wtab[aria-current="page"] .c{background:var(--pri);color:var(--priOn)} footer{font-family:var(--ui);font-size:10px;color:var(--mute);text-align:center;margin-top:26px; line-height:1.7} .health{font:11px/1.6 var(--mono);color:var(--ink3);margin-top:20px;overflow-wrap:anywhere} /* ---------- forms (sign in, first admin, accounts) ---------- */ .card{max-width:30rem;border-radius:18px;box-shadow:var(--shadow);background:var(--card); border:1px solid var(--rule);padding:18px 18px 22px} .card label{display:block;margin:14px 0 5px;font-family:var(--ui);font-size:10px;font-weight:750; letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)} .card input,.card select,.card textarea{width:100%;font:inherit;font-size:15px;padding:11px 12px; min-height:46px;border-radius:12px;border:1px solid var(--rule);background:var(--paper); color:var(--ink)} /* The quotation note is the first multi-line field in this app. It takes the same box as every other control above and adds only what a textarea needs: room for three lines, a vertical handle, and a line height a paragraph can be read at. Horizontal resizing is off because the card is already the width the page decided. */ .card textarea{min-height:92px;resize:vertical;line-height:1.5;font-family:inherit} .card button{margin-top:18px;font:inherit;font-size:13.5px;font-weight:750;padding:12px 18px; min-height:46px;border-radius:13px;cursor:pointer;border:1px solid transparent; background:var(--priGrad);color:var(--priOn)} .hint{font-size:11.5px;color:var(--ink3);margin:6px 0 0;line-height:1.5} /* THE NEW-ORDER FORM, on the sign-in card's own bones. Wider than that card because half of it is two or three columns of dates and dropdowns, and a phone still gets one column - `auto-fit` over a minimum decides that, not a breakpoint, so the same rule covers a phone, a tablet held either way and the rail-width desktop. */ .card.wide{max-width:46rem} .nogrid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))} .nofoot{margin-top:20px;padding-top:15px;border-top:1px solid var(--rule2)} /* ============================================================================================ THE ONE FORM WHOSE VALUES HAVE TO BE READ BACK CHARACTER BY CHARACTER. ============================================================================================ `/admin/document` holds the bank block that prints on every quotation a client receives. A 46rem card at 1280 left 272px of page empty beside it and gave each of its three columns 222px, in which `IQ31NBIQ857002000204312` was sliced four pixels short of its last digit and the company's registered Arabic name lost its trailing 138px. An IBAN a person cannot read back is the whole point of the page failing: the blast radius of a wrong digit is money arriving at the wrong account, which is the reason `quote-doc.js` gives for the page being admin-only. SO IT TAKES THE ROOM THAT WAS ALREADY THERE, and the two lines that are genuinely long - a registered company name in Arabic, a street address that names two other businesses as landmarks - take a whole row instead of a third of one. Everything is still `auto-fit` over a minimum, so a phone still gets one column and nothing here is a breakpoint. `.widest` is not `.wide` because every other wide form in the app is a form somebody FILLS IN, where a measured column is easier to read down; this is a form somebody CHECKS. */ .card.widest{max-width:none} .nogrid > .long{grid-column:1/-1} /* ONE LINE OF A QUOTATION. A block per line, never a row of a six-column table of inputs: this form is filled in on a phone, and `.nogrid` already lays a pair of fields out as one column under 13.5rem and two above it, decided by the content rather than by a breakpoint. The number is drawn rather than typed - it is the position in the form, renumbered from 1 on the way in - and it sits in the corner rather than on a line of its own so a line costs no extra height. */ .qline{position:relative;margin-top:12px;padding:4px 13px 13px;border-radius:16px; border:1px solid var(--rule2);background:var(--paper2)} .qline > .qlno{position:absolute;top:10px;right:13px;font-family:var(--ui);font-size:10px; font-weight:750;letter-spacing:.06em;color:var(--ink3)} /* ============================================================================================ A `

` WEARING `.qline`, WHICH IS A DIFFERENT SHAPE FROM A FORM LINE WEARING IT. FOUND ON 2026-09-17 BY WALKING EVERY PAGE AT 390px, AND IT IS OLDER THAN THIS SLICE - the same collision is in the screenshots taken at the commit this work started from. The quotation RECORD page reuses `.qline` for the `PRICING` fold (`

`), and `.qlno` above is absolutely positioned into the block's top-right corner because on the quotation FORM it is a line number over a stack of fields with nothing else on that line. On the record the badge is a LABEL and the summary's own sentence is long: at 390px "…sent by Anas Rahmon on 14 Sep 2026" reaches the corner and runs straight under the word PRICING, which then reads as grey mush over black text. The fix is to let the badge join the flow wherever it is a summary's label rather than a block's corner number. The form is untouched - `.qline` there is a ``, never a `
`, so the rule above still owns it and the numbers still sit in their corners. `nowrap` AND NOT `wrap`, which took one more look at a browser to get right. The summary's three parts are the badge, a BARE TEXT NODE and the chevron, and an anonymous flex item takes `flex:0 1 auto` - so on a wrapping line the sentence claimed the whole remaining width and pushed the chevron onto a third line of its own. Told not to wrap, the sentence shrinks and breaks inside itself instead, and the three parts stay one row at every width. ============================================================================================ */ summary.qline{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:nowrap; padding:11px 13px;font-size:var(--t-sm)} summary.qline > .qlno{position:static;flex:0 0 auto} summary.qline > .tchev{margin-left:auto} .qline label{margin-top:10px} .qline textarea{min-height:56px} /* The totals block reads as a summary and not as another list of things to tap. Two of its seven rows are heavier - what the client pays, and what is left to pay - and WHICH two is decided by the view, which has the figures, rather than by a `:nth-child` here that would move the emphasis onto the wrong line the day a row is inserted. `.qtot` rides on `.rows`/`.row`, the surface every list in this app already uses. */ .qtot .row.big{background:var(--paper2)} .qtot .row.big .v{font-size:15px;font-weight:800} /* Tick-boxes as pills. NATIVE CHECKBOXES under the styling, never buttons toggling a class: this app serves a policy that forbids script outright, and a checkbox already submits once per ticked box and nothing for the rest - which is exactly the list the server wants. Both overrides below are there to beat `.card label` and `.card input`, which style the stacked fields above. */ .nopick{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px} .card .nopick label{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:42px; padding:0 13px;border:1px solid var(--rule);border-radius:13px;background:var(--paper); font-family:var(--ui);font-size:12px;font-weight:640;letter-spacing:0;text-transform:none; color:var(--ink2);cursor:pointer} .card .nopick label:hover{border-color:var(--brassInk);color:var(--ink)} .card .nopick input[type=checkbox]{width:auto;min-width:0;min-height:0;padding:0;margin:0; accent-color:var(--pri)} /* The ticked pill, tinted. `:has()` and nothing else - progressive: where it is unsupported the checkbox itself still shows the state, which is the whole answer and not merely a fallback. */ .card .nopick label:has(input:checked){border-color:var(--brassInk);color:var(--ink); background:var(--priBg)} /* THE PO DOCUMENT FIELD. A file input is the one control a browser will not let a page fake without script, and on an iPhone or iPad the native one is what opens Files, iCloud and the camera - so only the box around it is ours. The overrides beat `.card input`, whose 46px and vertical padding are meant for a text field and leave the button sitting low inside it. */ .card input[type=file]{padding:9px 12px;line-height:1.7} .card input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:640; margin:0 11px 0 0;padding:7px 12px;border-radius:10px;border:1px solid var(--rule); background:var(--card);color:var(--ink2);cursor:pointer} /* THE TWO NOTICE BANNERS - the red one over a form that was refused, the green one over a form that worked. `p.` AND NOT A BARE CLASS, and the element is doing real work in that selector. `.ok` is also the tone word this stylesheet uses for "good" on the CHIPS - `.pchip.ok` is the preparation chip reading Done, and every `Done` row inside a picker is one. A bare `.ok` here matches all of them, and since `border` and `padding` are properties `.pchip` sets at the same specificity and EARLIER in the file, this rule won them: every green chip on every card came out with a green outline and a banner's padding while its neighbours had neither. Both banners are `
` in `pages.js` - all six of them, login, setup, new order, users - so naming the element costs nothing and takes the rule off every chip in the app. */ p.err{background:var(--lateBg);border:1px solid var(--late);color:var(--ink);padding:11px 13px; border-radius:13px;margin:0 0 16px;font-size:13px} p.ok{background:var(--okBg);border:1px solid var(--ok);color:var(--ink);padding:11px 13px; border-radius:13px;margin:0 0 16px;font-size:13px} /* THE SAME RED BOX, UNDER THE FIELD THAT CAUSED IT - 2026-09-17, the owner's instruction that a refusal is "رسالة حمراء بمكانها" and never a whole page. Nothing about the colour, the border or the radius changes: a reader has already learned what this box means at the top of a form, and it must mean the same thing six fields down. What changes is only the MARGIN - a banner needs room under it and a field error needs room ABOVE it, tight against the input it belongs to. */ p.err.efld{margin:7px 0 0;font-size:12.5px;padding:9px 12px} /* ============================================================================================== THE THREE FORMS BUILT OUT OF ONE VOCABULARY - Create RFQ, Add client, New creative request. `.qform` IS THE LAYOUT ELEMENT AND `.qsec` IS A SECTION CARD INSIDE IT. That much is shared by all three pages and is what this small block holds; what each page then adds is its own, scoped to a class it invented - `.rsec` and the line table below, `.csec` and the tinted strip near the foot of this file. THE ONE THING BORROWED AND NOT RESTATED IS `.card`: every input rule in this stylesheet is scoped under it - the label, the box, the radius, the textarea - so a section that was not a card would have had to copy all of them. `container` ON THE FORM is what lets a line table and a field pair ask how wide THEY are rather than how wide the window is. This app's navy sidebar is 192px from 768 up and `.wrap` caps at 760 until 1200, so a "768px tablet" is 528px of actual page and an 834px iPad in portrait is 594px; asking the window would give the one device these forms are most filled in on the phone shape. Every breakpoint below is a `@container` for that reason. ============================================================================================== */ .qform{container:rfqform / inline-size} /* ONE SECTION HEADING, AND THE NUMBERED BADGE THE TWO CLIENT FORMS PUT IN IT. `.qsn` is `.ptile`'s shape one step down - same tint family, same radius - so a section number reads as the same family of mark as the page's own icon and never as a status. `/rfqs/new` draws `.rsn` in that slot instead: an icon rather than a digit, because its three cards are not a sequence. There is no sentence under the heading on any of the three: see `HEAD_SUB_MAX` in `views/layout.js` for the instruction that governs that, given three times in the same words. */ .qsh{display:flex;align-items:center;gap:var(--sp-3);margin:0;font-family:var(--ui); font-size:var(--t-title);font-weight:var(--w-heavy);letter-spacing:var(--ls-title);color:var(--ink)} .qsn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:var(--r-sm);background:var(--priGrad);color:var(--priOn); font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-heavy);letter-spacing:0} /* The first label of a section sits under the heading rather than against it - `.card label`'s own 14px top margin is measured against a preceding INPUT, not against a 28px tile. Both pages that tighten this - `.qsec.csec` and `.qsec.rsec` - override it at two classes, which is written out at each of them rather than left to source order. */ .qsec > .qsh + label,.qsec > .qsh + .nogrid,.qsec > .qsh + .qtab{margin-top:var(--sp-4)} /* ============================================================================================== CREATE RFQ, 2026-09-21 - THREE CARDS, A TABLE OF LIVE ROWS, AND A BOTTOM BAR. WHAT WENT, AND IT IS MORE THAN WHAT ARRIVED. The two-column layout (`.qcols`, `.qmain`, `.qside`), the two utility panels (`.qpanel`, `.qph`, `.qtipsbox`, `.qtips`) and the whole fold-per-line editor (`.qsum`, `.qcn` cells, `.qchev`, `.qedit`, `.qrm`) are deleted rather than overridden: the owner's picture has one column of three cards and a line that is a row of live boxes, and a stylesheet that kept the old rules beside the new ones would be two designs for one page waiting to be confused. `.qsh`, `.qsn`, `.qadd`, `.qcount`, `.qfoot`, `.nogrid` and `p.err.efld` stayed because OTHER pages draw them - `/clients/new` and `/creative-request/new` are built out of exactly that vocabulary, and this block was written so that not one of their bytes moved. EVERY RULE BELOW IS SCOPED TO A CLASS THIS PAGE INVENTED - `.rsec`, `.rsn`, `.rfill`, `.rauto`, `.rq` (shared with the two client forms, and unchanged), `.qtab` and its `.r*` children. The working-days chips are NOT in that list: they are `.wdays` at the foot of this file, drawn by `deliveryTimeField` in `views/quotations.js` for this page and for the quotation form both. The two exceptions are named where they are made: `.ficon > select` extends an existing rule by one element, and `.qfoot.rfoot > a` joins `.qfoot.sfirst > a`'s selector rather than copying its four declarations. AND WHAT IT COST, MEASURED RATHER THAN CLAIMED. The commit that landed this block said the stylesheet had got smaller. It had not, and the correction belongs where the next reader will be standing: the RULES grew by about 2.1KB (81.4KB to 83.5KB with comments stripped and whitespace collapsed) and the FILE grew by 11.7KB, because the block that went carried less prose than the block that arrived. Over the wire - `asset.js` serves these bytes compressed and never minified - that is about 3.9KB of gzip on a ~90KB file. THE TRADE IS STATED SO THAT IT CAN BE DISAGREED WITH. Seven live cells per line need more rules than five read-only ones behind a fold, and two of the seven (BRIEF and ATTACHMENTS) are new. The one place this block could be made smaller without losing a rule is its own commentary, and this file's standing bet - written at the top of it and at every block since - is that a rule whose reason is not beside it comes back wrong. `@container` AND NOT `@media`, which is this file's standing bias and is load-bearing here rather than stylistic. This app's navy sidebar is 192px wide from 768 up and `.wrap` caps at 760 until 1200 - so a "768px tablet" is 528px of actual page and an 834px iPad in portrait is 594px. Asking the WINDOW how many columns a line has would have given the one device this form is most filled in on the phone shape. The form asks itself instead. ============================================================================================== */ /* ---------------------------------------------------------------------------------------------- THE CARD, AND ITS DENSITY IS NOT A NEW OPINION. 14/16/16 with a 16px gap under it, a 10/4 label block and a 40px control are `/clients/new`'s own numbers, measured and tightened on this same day after the owner opened that page on a 1900px window and asked for "a little smaller the ratio so the fields and info visual better". He then asked for THIS page in the same picture language, so the density is copied deliberately and not re-decided. The density block at the foot of this file is where those numbers are set for `.csec`; they are restated here rather than shared through one selector because the two pages differ in the one thing that would have to be undone - `.csec` bleeds a tinted strip across the card's header and this page's picture has none. ------------------------------------------------------------------------------------------- */ .qsec.rsec{padding:14px 16px 16px;margin-bottom:var(--sp-4)} /* The first row sits under the heading rather than against it. 12 against a 36px tile is the same optical 18px the `.qsh + label` case reaches through the label's own top margin. */ .qsec.rsec > .qsh + .nogrid,.qsec.rsec > .qsh + .qtab{margin-top:var(--sp-3)} /* THE ICON TILE, WHICH IS WHERE THE SECTION NUMBER USED TO BE. `.qsn` is a navy gradient badge holding a digit; this is the same square one shade paler holding the glyph for what the card is about, which is what the owner drew. `--priBg` over `--priInk` is the existing pale-blue-on-blue pair and is the one that inverts correctly in the dark theme, where `--priBg` becomes a deep panel and `--priInk` a light blue. */ .rsn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:var(--r-sm);background:var(--priBg);color:var(--priInk)} .rsn > svg{width:19px;height:19px} /* THE LABEL - navy, 13px, sentence case, and this is the one typographic departure from the two client forms. Theirs are 10px uppercase with .09em of tracking, which is this app's older field label; his Create RFQ picture draws `Company Name *`, `Requested By`, `Delivery Time` in a readable navy sentence case, and the brief's own words for it are "compact navy labels". The SPACING is the client forms' - 10 above, 4 below - so the rhythm of the two pages is identical even where the type is not. `--priInk` and not `--pri`: `--pri` is near-black in the light theme and a mid navy in the dark one, which would put a dark label on a dark card. */ .qsec.rsec label{display:block;margin:10px 0 4px;font-family:var(--ui);font-size:var(--t-sm); font-weight:var(--w-semi);letter-spacing:0;text-transform:none;color:var(--priInk)} /* THE CONTROL - 40px, which is the floor of the 40-46 range his own earlier spec named and the height his picture draws. Checkboxes and radios are excluded by attribute, as they are in the density block: a `min-height` on either is how this rule would silently break a control it was not written about. This page has none of either today; the exclusion is a guard against the day it does. */ .qsec.rsec input:not([type=checkbox]):not([type=radio]),.qsec.rsec select{min-height:40px} .qsec.rsec input:not([type=checkbox]):not([type=radio]),.qsec.rsec select, .qsec.rsec textarea{padding-top:8px;padding-bottom:8px} /* A GLYPH INSIDE A BOX - `.ficon`, which already exists for the chain against the creative form's reference link, reused rather than copied. All this block adds is the one element that rule did not cover: a `` when a clock or a tag sits in front of it. Two of the five boxes that wear it on this page ARE selects. */ .ficon > select{padding-left:40px} /* THE AUTO-FILLED BOX - who is asking, filled in and read-only. THE PADDING ON THE RIGHT IS THE BADGE'S OWN WIDTH plus its inset, so a long name is clipped by the box rather than running under a floating pill. The badge is `pointer-events:none` because it is a statement and not a control: a tap on it should land on the box underneath, which is where a reader's finger is aiming. */ .rfill > input{background:var(--panel);color:var(--ink2);padding-right:100px} .rauto{position:absolute;right:7px;top:50%;margin-top:-11px;height:22px; display:inline-flex;align-items:center;padding:0 9px;border-radius:var(--r-pill); background:var(--priBg);color:var(--priInk);font-family:var(--ui);font-size:var(--t-micro); font-weight:var(--w-bold);letter-spacing:.02em;pointer-events:none} /* ============================================================================================== THE LINE TABLE - one line is one item, and every box on it is standing. THE SEVEN COLUMNS AND THEIR PROPORTIONS ARE THE OWNER'S: `# · CATEGORY · ITEM · QTY · BRIEF · ATTACHMENTS · ACTIONS` at roughly 4/15/18/7/28/18/10 per cent. They are declared ONCE, in `--rcols`, and used by the heading row and by every line - the heading and the rows must agree about where a column starts or the alignment is a lie, and one custom property is one edit rather than two that drift. THREE OF THE SEVEN ARE FIXED AND FOUR ARE FLEXIBLE, and the split is a measurement rather than a preference. `#` holds one or two digits, `QTY` holds up to four, and `ACTIONS` holds two 44px targets side by side - none of the three gets wider with the page, so an `fr` on any of them takes room from the four that need it. `minmax(0,…)` ON EVERY FLEXIBLE TRACK, and the zero is load-bearing: a grid hands out `fr` space AFTER every track's minimum is satisfied, and an input's default intrinsic minimum is its `size` attribute's width - about 170px - which at four tracks is 680px of floor on a 424px table. That is the exact shape of the overflow `figures.test.js` guards the whole app against. ATTACHMENTS IS THE ONE TRACK WITH A FLOOR, AND 100 IS THE WORD `2 files` PLUS ITS CLIP AND ITS INSETS. It is `minmax(100px,15fr)` rather than a flat 100 because his picture gives it real width at a desk, and rather than `minmax(0,15fr)` because a chip narrower than its own word would be the one cell in the row whose CONTENT is a fixed string. The floor is affordable because this template only ever applies from 700px of table, where the four flexible tracks still share 384px after it is taken. ============================================================================================== */ .qtab{--rcols:28px minmax(0,16fr) minmax(0,18fr) 48px minmax(0,27fr) minmax(100px,15fr) 92px; margin-top:var(--sp-3);border:1px solid var(--rule);border-radius:var(--r-md); background:var(--card);overflow:hidden} /* THE HEADING ROW IS OFF ON A PHONE, which is the half of "compact rows, not a squeezed table" that a template change cannot do on its own: seven headings over a four-line stacked row would be labelling positions that are no longer there. */ .qth{display:none} /* ONE LINE, AND THE DEFAULT TEMPLATE IS THE STACKED ONE - `Category | Item`, `Qty | Attachment`, `Brief`, which is the owner's own phone shape said in his own order. The ACTIONS column is a fourth track that SPANS ALL THREE ROWS rather than a row of its own under them: a 44px strip down the right is the same two targets in a third of the height, and a stacked line has to stay far smaller than the expanded editor this redesign removed or it has bought nothing. `min-height:44px` is the floor for the targets inside the row rather than for the row itself; the boxes are 38, which is the bottom of the 38-42 band the owner's spec names for a line control and is what keeps six lines on one screen. */ .qln{display:grid;align-items:center;gap:6px;padding:5px 6px; grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 44px; grid-template-areas:"n cat it ac" "n qty at ac" "n br br ac"; border-top:1px solid var(--rule2);min-height:44px} .qln:first-of-type{border-top:0} .qtab > .qth + .qln{border-top:0} /* THE ENTRY ROW - always there, always empty, and the last one. A different surface so that "this one is not filed yet" is visible without a word, which is what his picture does with it. */ .qln.rnew{background:var(--paper2)} .rcn{grid-area:n;display:flex;align-items:center;justify-content:center; font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-bold);color:var(--ink2); font-variant-numeric:tabular-nums} /* THE `+` WHERE A NUMBER WOULD BE, drawn as a CSS mark rather than an element: a row is rendered up to sixty times and every element in it is paid sixty times. The number is still in the markup on this row, hidden - `views/lines.js` reads a line's position out of `b.qcn`, so a row without one would be a row the script cannot renumber. */ .rnew > .rcn > .qcn{display:none} .rnew > .rcn::before{content:"+";font-size:20px;line-height:1;font-weight:var(--w-bold); color:var(--priInk)} .rc{min-width:0;display:block} .rcat{grid-area:cat;position:relative} .rit{grid-area:it} .rqt{grid-area:qty} .rbr{grid-area:br} .rat{grid-area:at} .rac{grid-area:ac} /* THE BOXES IN A ROW. 38px rather than the 40 the header fields carry, which is the one place this page is denser than the card above it and is the owner's own number for a line control. The radius is one step down from a header box for the same reason. */ .qln input,.qln select{min-height:38px;padding:6px 10px; border-radius:var(--r-xs);font-size:var(--t-sm)} /* A LINE'S REFUSAL, INSIDE ITS OWN CELL - the red line has to sit under the box it names and the box is 15% of a row, so it wraps rather than pushing the table sideways. */ .qln .err.efld{margin:4px 0 0;font-size:var(--t-xs);overflow-wrap:anywhere} /* THE CHEVRON AGAINST THE CATEGORY BOX. The control is an `` - free text with suggestions, because the column it posts to is free text and a closed menu would be a rule invented in a view and enforced nowhere - so the affordance that says "there is a list here" has to be drawn. Two borders and a rotation, `.qchev`'s own drawing, which cost this file no icon entry when the fold editor used it and costs none now. */ .rcat::after{content:"";position:absolute;right:10px;top:50%;margin-top:-4px; width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3); transform:rotate(45deg);pointer-events:none} /* 24 AND NOT 28, WHICH IS A MEASUREMENT. `Select category` at this file's 13px is 103px wide and the CATEGORY track at the owner's own 15 per cent is 149px at 1280; 10 + 24 of inset leaves 115, so the placeholder fits whole rather than being clipped to `Select categor`. Measured at 1280 and again at 700, which is the narrowest width this table is drawn as seven columns at. AT 390 IT DOES NOT FIT AND THAT IS ACCEPTED RATHER THAN SOLVED. A phone gives each of the two stacked columns about 131px, which holds every VALUE this box takes - `Signage`, `Printing`, `Shop Decoration` all measure under 100 - and clips the last two characters of the PLACEHOLDER. The alternatives were a 12px control (under this file's smallest body size), a second shorter placeholder that the owner's picture does not say, or giving Category a row of its own and making every line a quarter taller on the device where height costs most. A word nobody has typed yet losing its tail is the cheapest of the four. */ .rcat > input{padding-right:22px} /* THE ATTACHMENTS CELL. It is a box the size of the boxes beside it so that the row reads as seven cells rather than five and a gap, and it is drawn in the muted ink of something not yet done. `.on` is the state the other half of this slice turns on when a line has files staged against it; both states are here so that the day it is wired nothing in this block moves. */ .ratt{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 10px; border:1px solid var(--rule);border-radius:var(--r-xs);background:var(--card); font-family:var(--ui);font-size:var(--t-sm);color:var(--ink3); text-decoration:none;overflow:hidden;white-space:nowrap} .ratt > svg{flex:0 0 auto;width:15px;height:15px} .ratt.on{background:var(--priBg);border-color:var(--priRule);color:var(--priInk); font-weight:var(--w-semi)} a.ratt:hover{border-color:var(--ink3);color:var(--ink)} /* THE ACTIONS. Two 44px targets and a 44px button in a 96px track - which is why that track is 96 and not the 10% his proportions give it at the narrowest width this table is drawn at. A finger presses all three, so all three are at the floor whatever the glyph inside them measures. */ .rac{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .ract{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:var(--r-xs);color:var(--ink3);text-decoration:none} .ract:hover{background:var(--paper2);color:var(--ink)} .ract.rdel:hover{color:var(--late)} .rnew > .rac > .ract{display:none} /* THE NAVY `+`. `.card button` gives every button inside a card the primary gradient AND an 18px top margin AND a 46px height - the first is exactly right here and the other two are measured against a form whose last element is one Submit. Taking two of the three back is what these three declarations are; the same collision is written up against `.qrm` in the file this block replaced, and it is worth keeping the note because it will happen again. */ /* TWO CLASSES, BECAUSE IT HAS TO BE. `.card button` is a class AND an element, so `.radd` alone loses every declaration it tries to take back - which is how the first cut of this rule shipped a 44px button that measured 46. The same collision is recorded against `.qrm` in the block this one replaced and against `.cbx` in the density pass; it is worth the third telling. */ .qln .radd{display:none;align-items:center;justify-content:center;width:44px;height:44px; min-height:44px;margin-top:0;padding:0;border:0;border-radius:var(--r-xs); font-family:var(--ui);font-size:20px;font-weight:var(--w-bold);line-height:1} .qln .rnew > .rac > .radd,.rnew > .rac > .radd{display:inline-flex} /* ---------------------------------------------------------------------------------------------- WHAT DOES NOT FIT THE ROW - the description behind the pencil, and the confirm behind the bin. `:target` AND NOT `
`, and the choice is forced by the grid: a `
` lays its open panel out inside the box its `
` sits in, and that box here is a 96px Actions cell. A panel the width of the row has to BE a child of the row, which `grid-column:1/-1` makes it, and the only no-script way to open a plain child from an anchor elsewhere is the fragment. ONE OPEN AT A TIME COMES FREE. `:target` is one element per document by construction, so opening a second panel closes the first - the property the `
` accordion this block replaced had to ask the browser for. THE PANEL IS DISPLAY:NONE AND NEVER `disabled`. Its box is in the document and is posted by every submit this form has, which is what lets the `+`, a removal and a refusal all carry a description nobody has opened the panel to look at. `rfq-lines.test.js` sweeps the whole page for a `disabled` control precisely so that this cannot be "tidied" later. ------------------------------------------------------------------------------------------- */ .rmore{display:none;grid-column:1/-1;margin:2px 0 6px;padding:10px 12px; border-radius:var(--r-xs);background:var(--panel);border:1px solid var(--panelRule)} .rmore:target{display:block} .rmore > label{margin-top:0} .rshut{display:inline-flex;align-items:center;min-height:44px; font-family:var(--ui);font-size:var(--t-xs);font-weight:var(--w-semi);color:var(--ink3)} .rshut:hover{color:var(--ink)} .rgone{display:none;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .rgone:target{display:flex} .rgone > .linkbtn{min-height:44px;display:inline-flex;align-items:center;background:none;border:0; margin-top:0;padding:0;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-semi); color:var(--late)} /* ---------------------------------------------------------------------------------------------- §3 - THE DROP AREA, WHICH IS A STATEMENT AND NOT A CONTROL. No ``, no `enctype`, no drag handler: a file cannot ride this POST, and the three reasons are in `attachCell`'s note in `views/rfq-new.js`. What is drawn is the shape of his panel with the supported types and the one sentence that answers "where do the photos go?". `cursor` IS DELIBERATELY NOT `pointer` - a hand cursor over something that cannot be pressed is the page making the promise the markup was careful not to make. ------------------------------------------------------------------------------------------- */ .rdz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-height:96px;margin-top:22px;padding:var(--sp-4);text-align:center; border:1px dashed var(--rule);border-radius:var(--r-md);background:var(--panel);color:var(--ink3)} .rdz > svg{width:22px;height:22px} .rdz1{margin:2px 0 0;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-semi); color:var(--ink2)} .rdz2{margin:0;font-size:var(--t-xs);color:var(--ink3)} /* ---------------------------------------------------------------------------------------------- FROM 700 OF CONTENT THE LINE IS A ROW OF SEVEN, with a heading row over it and the SAME `--rcols` for both so the two cannot come apart. 700 WAS MEASURED AND NOT CHOSEN, AND IT IS HIGHER THAN THE 480 THE FIVE-COLUMN TABLE THIS BLOCK REPLACED USED. Seven columns is two more than five, and the two that arrived - BRIEF and ATTACHMENTS - are the widest of the seven. Walked at 834 with the old number, an iPad in portrait (594px of page behind this app's 192px sidebar) drew `Si` in the category box and `LED Li` in the item: a table whose VALUES are clipped is worse than no table, because the row then has to be tapped to be read, which is the exact defect this redesign exists to remove. SO THE BAND FROM 480 TO 699 GETS THE OWNER'S OWN STACK instead - `Category | Item`, `Qty | Attachment`, `Brief`, which is what his spec asks for on a phone and which at 594px is two comfortable 270px columns rather than a squeeze. An iPad in LANDSCAPE is 728px of page and gets the full seven; a 1280 window is 1012 and gets them with room. What this costs is the seven-column table on a 768px window, and that is the honest reading of "from tablet up" on a shell that spends 212px before the page starts. ------------------------------------------------------------------------------------------- */ @container rfqform (min-width:700px){ .qth{display:grid;grid-template-columns:var(--rcols);gap:var(--sp-2);align-items:center; padding:7px 8px;background:var(--paper2);border-bottom:1px solid var(--rule2); font-family:var(--ui);font-size:var(--t-micro);font-weight:var(--w-bold); letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink3)} .qth > span:nth-child(1),.qth > span:nth-child(4){text-align:center} .qth > span:nth-child(7){text-align:right} .qln{grid-template-columns:var(--rcols); grid-template-areas:"n cat it qty br at ac";gap:4px var(--sp-2)} /* SIDE BY SIDE ONCE THERE IS A COLUMN FOR THEM, rather than stacked down a 44px strip. */ .rac{flex-direction:row;justify-content:flex-end} .rqt > input{text-align:center} } /* A FULL-WIDTH `+` AT THE FOOT OF A REPEATING BLOCK, AND THE COUNT UNDER IT. `.qadd` IS `/clients/new`'s ALONE SINCE 2026-09-21. Create RFQ drew it as `+ Add Item` under its line table until that page's redesign moved the act into the entry row's own navy `+`; the Add client form still ends its contacts block with one, so the rule stays exactly as it was and the selector did not have to change. `.qcount` IS STILL BOTH PAGES'. It is two numbers in one phrase - "5 of 60 items" - and never a sentence beside the control: what the ceiling is is a fact about the form rather than a warning about the press, and it is the only place either page states its cap out loud. */ .qadd{margin:0;border-top:1px solid var(--rule2);padding:0} .qadd > .linkbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%; min-height:48px;background:none;border:0;margin-top:0;border-radius:0; font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-bold); color:var(--brassInk)} .qadd > .linkbtn:hover{background:var(--priBg)} .qcount{margin:var(--sp-3) 0 0;font-family:var(--ui);font-size:var(--t-xs); font-weight:var(--w-semi);color:var(--ink3);font-variant-numeric:tabular-nums} /* THE FOOTER - Cancel and the one act, and nothing else on the row. It is a `.card` so that `.card button` styles the one button on it; the margin that rule gives a stacked form is the one thing taken back, because here the button is beside something rather than under it. THREE PAGES, TWO ORDERS. `.qfoot` alone is Cancel-left / primary-right, which is Add Client's and Create RFQ's; `.sfirst` puts Send first with Cancel after it, which is the creative form's own written-down order. `.rfoot` is Create RFQ asking for `.sfirst`'s OUTLINED Cancel without its reordering - his picture draws the link as a pill - so it joins that selector rather than copying its four declarations. */ .qfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-4)} .qfoot > a{font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-semi); text-decoration:none;color:var(--ink3);min-height:44px;display:inline-flex;align-items:center; padding:0 var(--sp-3)} .qfoot > a:hover{color:var(--ink)} .qfoot > button{margin-top:0;min-height:48px;min-width:9.5rem} /* ============================================================================================= NEW CREATIVE REQUEST, 2026-09-21. Six selectors, and the count is the point of this block. The owner sent this form back as a picture - "هي فورم الزبون بدي نفسها ذاتها", this is the client form, I want it exactly the same - and what the picture shows is the visual language this stylesheet already speaks: numbered cards with a navy badge, a tinted header strip, `.nogrid` pairs, thin borders, red asterisks on the required fields only. `/rfqs/new` draws that today and the Add Client page was rebuilt in it on the 21st. So the page is composed out of `.qform`, `.card widest qsec`, `.qsh`, `.qsn`, `.nogrid`, `.qfoot` and `p.err.efld`, and what is below is only the details of his picture that had no expression anywhere in this file. TWO OF THE SIX ARE ADD CLIENT'S OWN BYTES AND NOT A SECOND COPY OF THE IDEA. `.csec > .qsh` and `.rq` are that slice's rules character for character, so the two pages tint one strip and draw one asterisk; the day the branches meet, one of the two blocks is deleted and nothing on either page moves. A second card vocabulary for the same shape is the drift this file argues against in every block it has. WHAT IS *NOT* HERE IS THE ARGUMENT. No new card, no new input rule, no new label rule, no new button rule, no second grid, no breakpoint. The stylesheet is served at a content-addressed `immutable` URL and is sha-pinned in eleven test files - one byte is a fresh ~92KB download on every phone on shop-floor wifi - so a redesign that could be composed was composed. */ /* THE TINTED HEADER STRIP - a full-bleed band across the top of the card, so the negative margins undo `.card`'s padding exactly; `--panel` is the existing "a surface inside a surface" token and inverts correctly. SCOPED TO `.csec`, which `/rfqs/new` does not carry, so its own section headers are untouched - checked by that page's byte and layout tests rather than by eye. */ /* THE NEGATIVE MARGINS ARE `.qsec.csec`'s OWN PADDING NEGATED, and the two move together: see the density block at the foot of this file, which is where that padding is now set. -14/-16 rather than -18/-18 since 2026-09-21. */ .csec > .qsh{margin:-14px -16px var(--sp-2);padding:var(--sp-2) var(--sp-4); background:var(--panel);border-bottom:1px solid var(--panelRule); border-radius:17px 17px 0 0;flex-wrap:wrap} /* THE RED ASTERISK, AND IT IS THE ONLY NEW COLOUR USE IN THIS BLOCK. `--late` is the existing refusal red and is the one that meets contrast in both themes; a literal would have been a fourth red in a palette that deliberately has one. */ .rq{color:var(--late);font-weight:var(--w-bold);margin-left:3px} /* HOW MANY CHARACTERS ARE IN THE BOX, INSIDE THE BOX'S OWN LOWER EDGE - his `28/2000`. IT IS THE SERVER'S COUNT AND NOT A LIVE ONE, and that is the whole of what is here: no page in this app may REQUIRE JavaScript, and a live tally is the one thing on his picture that cannot be drawn without one. So the number is true at render - `0` on a fresh form, and the length of the paragraph that came back on a refusal - and the ceiling beside it is the one `maxlength` enforces. `.cwrap` is its positioning parent and exists only for that. `right:22px` CLEARS THE RESIZE GRIP. `.card textarea` is `resize:vertical`, and Chrome draws its handle in exactly the corner his counter sits in; measured at 390 and 1280. */ .cwrap{position:relative;display:block} .ccnt{position:absolute;right:22px;bottom:8px;font-family:var(--ui);font-size:var(--t-xs); font-variant-numeric:tabular-nums;color:var(--ink3);background:var(--paper); padding:0 2px;pointer-events:none} /* THE CHAIN AGAINST THE REFERENCE LINK - his icon at the left edge of that one box. An inline `
` under a form - is a line of text about 13px tall, and this tree's floor for anything a finger presses is 44: the same floor `.cbx`/`.smi` were raised to in the density pass of 2026-09-21 and the one every browser test in `test/` asserts. `inline-flex` is what lets a link have a height at all; the padding and the hover tint are the `.rb` rail entry's, so a link somebody presses reads as this app's own vocabulary. THE `Cancel` ON THE CREATE-ACCOUNT FORM IS DELIBERATELY NOT GIVEN THIS. It is 13px today and was before this slice; raising it is a change to a control nobody asked about, on a form nobody was told would move. When it is measured it joins this selector. */ /* THE NEGATIVE MARGINS EAT THE CELL'S OWN PADDING, and without them the row is 62px tall with this link's text sitting 13px below the username beside it: `th,td` is `vertical-align:top` with 9px of padding, so a 44px box in a cell grows the row by its whole height and centres its text inside itself. Cancelling the padding makes the ROW 44px - the target's own height, which is the height it should have been - and leaves the two baselines 4px apart, which is the closest they get without editing `th,td`. That selector is shared with every table in the app and is not being touched for one link. The `
` on the password form has no such padding to cancel, so the same rule simply sits there. */ .upwl{display:inline-flex;align-items:center;min-height:44px;margin:-9px 0; padding:0 10px;border-radius:11px; font-family:var(--ui);font-size:12px;font-weight:650;text-decoration:none;color:var(--ink3)} .upwl:hover{color:var(--ink);background:var(--paper2)} /* ============================================================ THE OWNER'S PERSONAL "HIDE IQD" SWITCH. READ THIS BEFORE REUSING THE PATTERN. This IS a CSS class over a figure that was sent to the browser, and here that is correct: it is Anas hiding numbers he is allowed to see from someone reading over his shoulder on the shop floor. It is cosmetic, it is his own choice, and View Source showing the figure underneath costs him nothing. It is worthless as a PERMISSION and must never be pressed into service as one. A role that may not see a figure never receives it - see `src/redact.js`. If you ever find yourself adding a role name to a rule in this block, the change belongs in redact.js instead. ============================================================ */ .mny{font-variant-numeric:tabular-nums} body.nomoney .mny{color:transparent;position:relative} body.nomoney .mny::after{content:"·····";position:absolute;left:0;top:0;color:var(--ink3); letter-spacing:.12em} @media(min-width:620px){ body{font-size:15.5px} /* THE ONE TOKEN THAT IS NOT A FIXED NUMBER. A 26px page title over a 44px tile leaves about 300px of line on a 390px phone, which is two or three lines for any heading carrying a project code. Everything else in the type scale holds at every width; the display step is the only one big enough for the difference to matter. */ :root{--t-display:26px} } /* ============================================================================================ iPad AND UP - 700: the bottom bar becomes the branded sidebar down the left edge. FLUSH TO THE EDGE AND FULL HEIGHT, which is the change of shape in the 2026-09-17 shell and not a change of colour. It was a floating pill - inset 14px on all four sides, a 22px radius and the page colour showing all round it - and a floating pill is a PANEL OF THE PAGE. The reference draws the company's own edge of the window: navy, flush, top to bottom, with the wordmark at the head and the line at the foot. There is no gap for the page to show through because the sidebar is not standing on the page. IT IS NAVY IN LIGHT, DARK AND AUTO. See `--side-*` in the token block at the top of this file for why that is deliberate rather than an oversight, and why dark still gets its own deeper value rather than the same one. `body{padding-left}` IS STILL WHAT MAKES ROOM, unchanged in mechanism - the sidebar is `position:fixed` and is out of flow, so the page has to be told how wide it is. The two numbers are the token and the token plus the gutter, so widening the sidebar is one edit. ============================================================================================ */ /* ============================================================================================ 768 AND UP - THE TABLET. One labelled navy sidebar, at the reference's own breakpoint. IT WAS TWO RAILS AND IS NOW ONE. Until 2026-09-18 this file drew a 76px ICON-ONLY rail from 700px and only gave it labels from 820 - so a device between 700 and 819 got a column of unlabelled glyphs, and the 820 number was itself a guess at "about where an iPad is". The reference names the boundary instead: mobile 320-767, tablet 768-1199, desktop 1200+. There is no device in that scheme that wants an unlabelled rail, so the icon-only form is gone and with it the 76px width token, the column-direction `.rb`, and an entire second block of overrides. WHAT A READER GAINS: at 768-819 - a small tablet, and an iPhone in landscape - the six destinations are now words rather than glyphs. What a reader loses: nothing. The bottom bar still serves every width below 768, which is every phone in portrait. ============================================================================================ */ @media(min-width:768px){ .nav{display:none} .brandm{display:none} .railnav{display:flex;flex-direction:column;align-items:stretch; position:fixed;left:0;top:0;bottom:0;width:var(--side-w-md);z-index:40; padding:var(--sp-5) var(--sp-3) var(--sp-4); background:linear-gradient(180deg,var(--side-bg),var(--side-bg2)); border-right:1px solid var(--side-rule);overflow:hidden} /* THE DIAGONAL AT THE FOOT, drawn with a gradient and not with a picture. Two hairlines at 45 degrees across the bottom corner - the reference's own mark, and the one piece of decoration in this shell. A gradient because an SVG in CSS needs a namespace URL, and the note at the top of `views/icons.js` records what that costs this project; there is no anywhere in this sidebar either, by the owner's rule for this round. */ .railnav::after{content:"";position:absolute;right:-24px;bottom:-24px;width:118px;height:118px; opacity:.75; background:repeating-linear-gradient(135deg,transparent 0 11px,var(--side-mark) 11px 16px); pointer-events:none} /* THE WORDMARK. The company's NAME as text - there is no logo here and that is the owner's own rule for this round, not a thing left to do later. */ .brand{display:block;text-decoration:none;padding:var(--sp-2) var(--sp-3) var(--sp-6); color:var(--side-ink)} .bname{display:block;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-heavy); letter-spacing:.08em;line-height:1.2;color:var(--side-ink);text-align:left; overflow-wrap:anywhere} .bsub{display:block;margin-top:3px;font-family:var(--ui);font-size:9px; font-weight:var(--w-semi);letter-spacing:.07em;color:var(--side-ink3);text-align:left} .raillinks{display:flex;flex-direction:column;gap:var(--sp-1);align-items:stretch; min-height:0;overflow-y:auto;scrollbar-width:none} .raillinks::-webkit-scrollbar{display:none} .rb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start; gap:var(--sp-3);width:100%;min-height:44px; padding:0 var(--sp-3);border-radius:var(--r-md);text-decoration:none; color:var(--side-ink2);font-family:var(--ui);font-size:var(--t-sm); font-weight:var(--w-med);position:relative;border:1px solid transparent;text-align:left; transition:background .14s ease,color .14s ease} .rb:hover{background:var(--side-hover);color:var(--side-ink)} .rb[aria-current="page"]{background:var(--side-on-bg);color:var(--side-on-ink); border-color:transparent;font-weight:var(--w-bold); box-shadow:0 2px 8px rgba(0,0,0,.25)} /* A WHITE RING AND NOT THE PAGE'S OWN. `:focus-visible` at the top of this file draws `2px solid var(--cool)` - a mid blue picked to be seen on paper - and on a #111C33 sidebar it is very nearly invisible. Every focusable thing inside the rail gets the ring that works on the surface it is actually sitting on, which is the whole reason the rail's colours are their own token family rather than the page's. */ .rb:focus-visible,.brand:focus-visible{outline:2px solid #fff;outline-offset:-2px; border-radius:var(--r-md)} .rb .pip{position:static;margin-left:auto} /* THE LINE AT THE FOOT. `margin-top:auto` pins it to the bottom whatever the link count is - four doors for production, six for the admin - so it never floats mid-rail on a short bar. */ .railfoot{margin:auto 0 0;padding:var(--sp-4) var(--sp-3) 0;font-family:var(--ui); font-size:var(--t-micro);font-weight:var(--w-semi);line-height:1.45; letter-spacing:.04em;color:var(--side-ink3);text-align:left;position:relative;z-index:1} body{padding-left:calc(var(--side-w-md) + var(--sp-5));padding-bottom:var(--sp-8)} /* THE PAGE TITLE AT ITS DESKTOP STEP. The reference asks for 24-26 on a phone and 28-32 from a tablet up; this is the only type token that is restated anywhere, and the note in THE NAMED SYSTEM says why it is the only one allowed to be. */ :root{--t-display:29px} /* THE ACTION STOPS WRAPPING and takes its place at the right-hand end of the header's line. */ .pact{flex:0 0 auto;margin-left:auto;padding-top:2px} .pact > .make{flex:0 0 auto;min-height:40px} } /* ============================================================================================ 1200 AND UP - THE DESKTOP. A wider rail, and more room for the page. THE RAIL GOES 192 -> 216, which is the reference's two bands (tablet 180-210, desktop 200-230) and the only thing that changes about it: same links, same labels, same gold active door. AND THE PAGE GETS WIDER, BUT NOT TO 1600. The brief asks for "fluid main content, max width ~1600px". What fills 1600px in the reference is the DESKTOP TABLE, and the table is a later stage - it is on this slice's do-not-build list. A single column of cards and list rows stretched to 1376px of main content is the "giant blank area" the same brief's QA list forbids, so the cap moves one honest step - 1040 -> 1280 - which is measured room for two card columns plus their gutter, and stops there until there is content shaped like 1600px to put in it. ============================================================================================ */ @media(min-width:1200px){ .railnav{width:var(--side-w)} body{padding-left:calc(var(--side-w) + var(--sp-6))} .wrap{max-width:1280px} } /* ============================================================ CARD EDITING — the deadline, the status, the delivery status, the shipping date, each station, each preparation task, and the PO file link. Present ONLY when the deployment has editing switched on AND the reader's role may write the field; otherwise the server sends none of this markup (see redact/app.js — the control is a courtesy, the server refusal is the enforcement). No script anywhere: native inputs and plain POST forms, the same no-JS ethos as the rest of the page. EVERY CONTROL SITS BESIDE THE THING IT CHANGES, and each is its own form with its own Save: the server writes one cell per request, so one Save per cell is the only shape that can tell the truth about what it did. ============================================================ */ .jedit{margin:9px 15px 0;padding-top:11px;border-top:1px solid var(--rule2); display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center} .jeditl{font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase; color:var(--ink3);flex:0 0 auto} /* NO PICKER IS STACKED IN A `.jedit` BOX ANY MORE, AND ONLY ONE CONTROL IS STILL A `.jedit`. One box held the status and the delivery pickers and another the three preparation ones, which was worth a rule and 11px of padding while each panel inside carried a visible header row. None does: every panel is opened by the chip, the bar or the tile that shows its state. THE TWO DATE FIELDS LEFT THIS SECTION ON 2026-09-11. They were `` + Save, which is the one thing on the card the owner came back on — "مابدي يكون هيك التسجيل التاريخ" — and they are now calendars, under `THE DATE PICKER` further down. What is left of `.jedit` is the PO file link, which is genuinely typed: collapsing a URL into a chip would remove the only way to enter one. */ /* 44px SINCE 2026-09-26, AND IT WAS 38 - the floor for anything a finger presses, which this control had been under since it was written. It was defensible on a CARD, where it was one of two dozen things competing for the height of a list item; §3 moved it into a details panel where it is one of three controls on the whole surface, so there is nothing left for it to be short on behalf of. Measured at 390 in a real browser, which is where the rule is enforced. */ .jedit input[type=url]{font:inherit;font-size:12.5px; color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:11px; height:44px;padding:0 11px;min-width:0} /* ---------- THE PICKER ---------- One panel per writable field. Inside is one row per option, each row a submit button carrying that option's value — so a change is ONE TAP, with no select wheel to open and no Save to find afterwards. A PANEL'S OPENER IS NEVER ON THE PANEL. Every one of the twelve used to draw its own header row — the field's name and the chip it currently wears — and that row was the link. All twelve are gone, in two goes on 2026-09-11: first the seven stations, then the status, the delivery and the three preparation tasks. Each of those rows said in words, 40px lower, what the chip above it already said in colour, and the owner asked for the same treatment across the card. THE OPENER IS THE THING THAT SHOWS THE STATE — the bar over a station, the delivery chip in the header, a preparation chip, the status chip inside the card's own
— so a panel at rest is an empty box with no header, and a card at rest is its chips and nothing else. THE FOLD IS `:target`, NOT `
`, AND THAT IS THE WHOLE MECHANISM OF THIS SECTION. The owner taps the coloured bar over CNC and expects CNC's list. A `
` cannot be opened by a link, so the panel carries an `id` and the bar is an `` at it: the four rules below are the entire opening and closing behaviour, with no script on a page whose policy forbids one. WHAT CLOSES A PICKER, and there are four ways, all of them the same rule seen from a different angle: - the CLOSE row, which every panel has open — it goes to the block the panel belongs to, `#land--`, which is where the chip or the bar that opened it sits; - another bar, another chip — a document has ONE :target, so opening the next picker closes this one with no extra rule to write; - a save, because the 303 lands on that same block anchor; - folding the card, which puts the whole panel inside a closed
. `scroll-margin` is the last part: a fragment jump puts the panel at the very top of the viewport, and this keeps the strip or the chip that opened it on screen above it. THE ROWS ARE `.pchip`s, deliberately. The preparation chip is already "coloured dot, word, tinted pill", which is exactly what an option in this list has to be, and reusing it means the row you press looks like the chip you will get. The four extra state names below are the station strip's and the delivery chip's own — same tokens, so there is one palette on this card and not two that drift. NO SCRIPT AND NO POPOVER LAYER: the list is in flow, directly under the chip or the bar that opened it, which is what keeps this working under `default-src 'none'`. */ .pick{margin:0;min-width:0;scroll-margin:96px 0 26px} /* WHERE A SAVE LANDS, AND WHERE "Close" GOES — the block holding the control that was used, never the top of a card that can be nine hundred pixels tall. The same scroll-margin as the panel above, for the same reason: the masthead is sticky and a bare fragment jump would put the block under it. One attribute selector because the ids are generated per field per card (see `land` in card.js) and there is no class worth inventing for six of them. */ [id^="land-"]{scroll-margin:96px 0 26px} /* A CLOSED PANEL IS AN EMPTY BOX, AND THAT IS THE WHOLE SAVING. Its two children — the close row and the list — are both out of flow until `:target` names it, and there is no third child left to hold a height: the header row that used to be here is gone from all twelve. So `.pick` itself is given no padding, no border and no vertical margin, and twelve of them cost a writable card nothing. */ .pickx{display:none;align-items:center;gap:9px;min-height:40px;padding:1px 0; text-decoration:none;color:inherit;cursor:pointer} .pick:target > .pickx{display:flex} /* WHERE EACH PANEL SITS IS WHERE ITS OPENER IS, and the vertical separation is put on only when the panel is OPEN — twelve collapsed panels each carrying a margin would put back most of what taking the rows off just saved. - the status and delivery panels are direct children of the CARD, so they take the card's own 15px gutter: the status under the
whose chip opens it, the delivery under `.jdd`; - the station and preparation panels are inside their own tinted block and take its padding; `.pickx` is every panel's only header, which is why it carries the field's NAME and not just a cross: with the rows gone it is the one place an open panel says whose it is. */ .job > .pick{margin:0 15px} .job > .pick:target{margin:6px 15px 0;padding-top:9px;border-top:1px solid var(--panelRule)} .jprod > .pick:target,.jprep > .pick:target{margin-top:9px;padding-top:9px; border-top:1px solid var(--panelRule)} .pickl{flex:0 0 84px;font-size:12.5px;font-weight:650;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pickx > em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:750; letter-spacing:.11em;text-transform:uppercase;color:var(--ink3)} /* The cross is drawn by the stylesheet and not written into the markup, for two reasons that agree: it is decoration, so it belongs out of the accessible name the word "Close" already provides — and a card carries fourteen pickers. Since 2026-09-11 only ONE card on a page carries any (the `?open=` card; see `panels` in card.js), so this is paid fourteen times rather than five hundred — but it is still markup, and markup is what the DOM is built from whatever the wire costs. */ .pickx::after{content:"\00D7";flex:0 0 auto;display:inline-flex;align-items:center; justify-content:center;width:20px;height:20px;font-size:17px;line-height:1;color:var(--ink3)} .pickx:hover > em,.pickx:hover::after{color:var(--brassInk)} .prows{display:grid;gap:5px;margin:3px 0 9px;padding:7px;border-radius:14px; background:var(--panel);border:1px solid var(--panelRule)} /* The list exists on every card and is in flow only for the one picker the fragment names. Both rules name `.pick` so they outrank `.prows` above, which keeps `display:grid` as the open value and `.prows.two`'s columns working inside it. */ .pick > .prows{display:none} .pick:target > .prows{display:grid;box-shadow:0 0 0 2px var(--brassBg)} /* The delivery vocabulary is the only seven-entry one, and seven full-width rows is a scroll on a phone. Two columns as soon as the card is wide enough to read two labels. */ @container job (min-width:340px){.prows.two{grid-template-columns:1fr 1fr}} .prow{width:100%;text-align:left;cursor:pointer;min-height:42px;justify-content:flex-start; font-size:12.5px} .prow > span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prow > em{flex:0 0 auto;margin-left:auto;text-transform:uppercase;letter-spacing:.08em; font-size:9px} /* The row that is already true: outlined rather than pressable, and it is NOT a button — writing a cell the value it already holds costs a round trip and an edit in the sheet's history for nothing. */ .prow.now{cursor:default;box-shadow:inset 0 0 0 1.5px currentColor} /* …and the same line for a cell holding a word none of this app's lists has. It keeps the grey dashed "not set" dot, because what it is showing is the cell, not an option. */ .prow.odd{font-style:italic} .prow.odd > span{font-style:normal} /* The chip vocabulary, extended to the words the station strip and the delivery chip already use, in the colours those already carry. `.pchip` itself paints the dot from `currentColor`. */ .pchip.done,.pchip.dlv{background:var(--okBg);color:var(--ok)} .pchip.active{background:var(--brassBg);color:var(--brassInk)} .pchip.rdy{background:var(--shipBg);color:var(--ship)} .pchip.hold{background:var(--riskBg);color:var(--risk)} .pchip.iss{background:var(--lateBg);color:var(--late)} .pchip.na{background:var(--paper2);color:var(--ink2)} /* STATUS IS THE ONE VOCABULARY WHERE `dlv` IS NOT GREEN. `.stat.dlv` — the chip in the card's own header — draws a finished job in neutral grey, because on that row green is spoken for by the delivery column. The picker that sets column I has to agree with the chip it sets, summary and rows alike, which is why the vocabulary's name is on the panel and not only on the list. */ .pick.status .pchip.dlv{background:var(--paper2);color:var(--ink2)} /* THE CHIPS THAT ARE ALSO THE WAY IN — the status chip in the card's
, the delivery chip on the header row, and each preparation chip the reader may write. They are the same element they always were with a fragment on them, so the tint, the box and the row height do not change with the role; `.go` adds the press affordance and nothing else, and a reader who may not write that column gets the identical span. THE STATUS CHIP IS HERE NOW, AND IT IS THE ONE INSIDE THE FOLD CONTROL. A click is dispatched to the deepest element under the finger, and DOM's dispatch gives `activationTarget` to the event target when that target has activation behaviour — an does, so the link takes the tap and
's toggle never runs. Measured in Chrome with trusted mouse events before this shipped; see `statusChip` in card.js for the measurement and the one residual it leaves. THE TWO DATE TILES ARE HERE FOR THE SAME REASON, since 2026-09-11: the red `Deadline · yours` half of the header row, and the `Shipping date` row inside the dates fold. Each is the same tile or row it was with a fragment on it — `color:inherit` because a tile's text colour is its own (`.ddb.own .ddx b` is red) and a link must not repaint it. */ a.stat,a.dstat,a.pchip{text-decoration:none} a.ddb,a.dline{text-decoration:none;color:inherit} .stat.go,.dstat.go,.pchip.go,.ddb.go,.dline.go{cursor:pointer; -webkit-tap-highlight-color:transparent} .stat.go:hover,.dstat.go:hover,.pchip.go:hover{box-shadow:0 0 0 1.5px currentColor} .ddb.go:hover,.dline.go:hover{box-shadow:0 0 0 1.5px var(--brassInk)} .stat.go:focus-visible,.dstat.go:focus-visible,.pchip.go:focus-visible, .ddb.go:focus-visible,.dline.go:focus-visible{outline:2px solid var(--brassInk); outline-offset:2px} /* AND ITS SAVE BUTTON WITH IT. The two sit on one row and a 44px box beside a 38px button reads as a mistake before it reads as a target that is too small. */ .jedit .chip{height:44px;padding:0 17px;flex:0 0 auto;font-weight:720; background:var(--brass);border-color:var(--brass);color:var(--priOn)} .jedit .chip:hover{filter:brightness(1.06)} /* THE PO FILE LINK, under the drawing frame. The box takes the row and the Save button sits beside it; the note below runs full width, because it is a sentence and a sentence squeezed into a flex gap is unreadable. */ .jedit.filelink input[type=url]{flex:1 1 200px} .jeditn{flex:1 1 100%;font-size:10.5px;line-height:1.45;color:var(--ink3)} /* ============================================================ THE PROJECT IMAGE ON THE ORDER CARD, AND THE ONE TAP THAT ASKS FIRST — 2026-09-26. Seven selectors, every one of them needing `.jpic` or `.jpicc`, which `pictureEditor()` in `views/card.js` is the only thing in this tree that emits. Nothing else on this card, on `/orders/new` or on any other page moves by a pixel. WHY IT IS HERE AT ALL, when the note above says `.jedit` costs no CSS. Two reasons, and both are floors rather than taste: THE FILE INPUT WAS THE BROWSER'S OWN, unstyled, in a row of 38px chips — so it read as a foreign control and, on a phone, was under the 44px this tree puts under anything a finger presses. `.card input[type=file]` two thousand lines up is the same treatment for the same reason on the forms; this is that rule's shape on the card's own surface. AND A BARE `
` IS A LINE OF TEXT. The confirm has to be a target before it is a sentence, so it gets the 44px floor and the pill the rest of the card is made of. `list-style:none` + the WebKit pseudo-element takes the disclosure triangle off in both engines; the fold still works with every stylesheet in this app blocked, because it is a `
` and not a script. THE BUTTON WEARS THE RED ONLY WHERE THE ACT IS DESTRUCTIVE. `.warn` is added by the view exactly when the order HAS a picture, which is the only case where pressing this takes something away; on an order with none it is an ordinary brass Save, because nothing is being replaced and a red button would be a warning about nothing. Same two colours `p.err` uses, so no new colour enters the stylesheet. ============================================================ */ .jedit.jpic input[type=file]{flex:1 1 200px;min-width:0;min-height:44px;font:inherit; font-size:12.5px;line-height:1.6;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:11px;padding:9px 10px} .jedit.jpic input[type=file]::file-selector-button{font:inherit;font-size:12px;font-weight:640; margin:0 10px 0 0;padding:6px 11px;border-radius:9px;border:1px solid var(--rule); background:var(--paper);color:var(--ink2);cursor:pointer} .jpicc{flex:1 1 100%;margin:0} .jpicc > summary{display:inline-flex;align-items:center;min-height:44px;padding:0 15px; border:1px solid var(--rule);border-radius:13px;background:var(--paper);color:var(--ink2); font-family:var(--ui);font-size:12px;font-weight:700;cursor:pointer;list-style:none} .jpicc > summary::-webkit-details-marker{display:none} .jpicc > summary:hover{border-color:var(--brassInk);color:var(--ink)} .jpicc > p{margin:9px 0 0;font-size:10.5px;line-height:1.45;color:var(--ink3)} .jpicc > button{font:inherit;font-size:12.5px;font-weight:750;margin:9px 0 0;min-height:44px; padding:0 16px;border-radius:13px;cursor:pointer;border:1px solid var(--brass); background:var(--brass);color:var(--priOn)} .jpicc > button.warn{background:var(--lateBg);border-color:var(--late);color:var(--ink)} /* PREPARATION AND STATIONS, inside their own rounded panels. The label on a close row is a task or a station name, and those are longer than `Status`, so the column is wider. The picker's own list sits on the CARD's colour rather than the panel's, or two tinted boxes end up inside one another. */ .jprep .pickl,.jprod .pickl{flex:0 0 104px} .jprep .prows,.jprod .prows{background:var(--card);border-color:var(--rule)} /* ---------- THE DATE PICKER: a month sheet, and every day on it is a save ---------- The deadline's panel hangs off the card like the status and delivery ones; the shipping date's sits inside the date rail, on the rail's own colour, because that is where its row is. THE GRID IS ALWAYS 42 CELLS — six rows of seven, Sunday first — which is what makes the two `:nth-child` rules below possible: with a fixed count, columns six and seven ARE Friday and Saturday in every month, so the weekend is tinted without one byte of markup asking for it. It is also what keeps the panel one height: a grid that grew a row between March and April would move the Clear row under the reader's thumb mid-navigation. */ .prows.cal{gap:6px} /* ‹ month › — the arrows are page links (there is no script to swap a grid with), so each is a real 40px target rather than a glyph. At the edge of the 2024–2028 window there is nothing to link to and the arrow becomes a dashed stub: a gap there would let the title slide across the row. */ .cnav{display:flex;align-items:center;gap:6px;min-height:38px} .cnav > b{flex:1 1 auto;min-width:0;text-align:center;font-size:12.5px;font-weight:750; color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cnv{flex:0 0 38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border-radius:11px;text-decoration:none;font-size:19px;line-height:1;color:var(--ink2); background:var(--card);border:1px solid var(--rule);-webkit-tap-highlight-color:transparent} .cnv:hover{border-color:var(--brassInk);color:var(--brassInk)} .cnv:focus-visible{outline:2px solid var(--brassInk);outline-offset:2px} .cnv.off{color:var(--ink3);background:none;border-style:dashed;font-size:12px} .cwk,.cald{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px} .cwk > b{text-align:center;font-family:var(--ui);font-size:8.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);overflow:hidden} /* One rule for all 42, whatever element the cell turned out to be — a button for a day that can be written, a span for the one already written, an `` for a day outside the window. Styling by ELEMENT and not by a class on each cell is worth ~500 bytes a calendar, and 42 fewer class attributes for the parser to build; see the note on `.pickx::after`. */ .cald > *{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0; font:inherit;font-size:12.5px;font-weight:650;color:var(--ink);background:var(--card); border:1px solid transparent;border-radius:11px} .cald > i{background:none} .cald > button{cursor:pointer;-webkit-tap-highlight-color:transparent} .cald > button:hover{border-color:var(--brassInk);color:var(--brassInk)} .cald > button:focus-visible{outline:2px solid var(--brassInk);outline-offset:-2px} /* Friday and Saturday, by position. The working week here is Sunday to Thursday. */ .cwk > b:nth-child(n+6),.cald > *:nth-child(7n+6),.cald > *:nth-child(7n){color:var(--ink3)} .cald > *:nth-child(7n+6),.cald > *:nth-child(7n){background:var(--paper2)} .cald > i:nth-child(7n+6),.cald > i:nth-child(7n){background:none} /* A day belonging to the month either side of the title — real, pressable, and quieter. */ .cald > .oth{color:var(--ink3);font-weight:500;opacity:.75} /* TODAY, ringed in the app's accent. */ .cald > .tdy{border-color:var(--brassInk);color:var(--brassInk);font-weight:800} /* THE DAY THE CELL ALREADY HOLDS: not a button, in the colour that field wears on the card — red for his deadline, blue for the shipping date — so the mark in the grid and the tile that opened it are the same thing said twice in one colour, not two. */ .cald > .now{font-weight:800;box-shadow:inset 0 0 0 1.5px currentColor;cursor:default} .pick.dd .cald > .now{background:var(--lateBg);color:var(--late)} .pick.ship .cald > .now{background:var(--shipBg);color:var(--ship)} /* The shipping date's panel lives in the rail, which is `--panel`, so its box takes the card's colour exactly as the station and preparation panels do. */ .jdates .pick:target{margin:2px 0 0} .jdates .prows{background:var(--card);border-color:var(--rule)} /* AND THE RAIL TAKES THE ROOM IT NEEDS WHILE THAT PANEL IS OPEN. On a card wide enough to put the drawing beside the dates, the rail is 212–272px — seven columns of about 32px, which is a thumb target the owner would miss. Widening the rail for as long as its picker is targeted takes the cells to ~50px and gives the drawing back its width the moment the panel closes; nothing has to be reverted, because the row is a flex box and `.shot` already takes what is left. Measured on a 644px card: 32px → 51px per day. */ @container job (min-width:470px){ .jshow:has(.pick:target) > .jdates{flex:0 0 clamp(320px,62%,440px); width:clamp(320px,62%,440px)} } /* ============================================================================================ THE CRM PAGE: INDUSTRY GROUPS, AND A CORRECTION THIS APP HOLDS. ============================================================================================ FOUR RULES, AND THREE OF THEM ARE ADJUSTMENTS TO THINGS THAT ALREADY EXIST. The client list, the client page and both of its correction panels are drawn out of the vocabulary above - `.rows`, `.row`, `.k`, `.v`, `a.qopen`, `.tchev`, `.pick`, `.pickx`, `.prows`, `.pchip`, `.prow`, `.stat`, `.empty`, `.costnote` - because a client row, an RFQ row and a Numbers row are one shape carrying different cells. What is genuinely new is a
used as a list row and a box to type in inside a picker panel. THE GROUPS ARE
AND NOT `:target`, which is the opposite of the card's pickers and is the right way round for this one reason: a document has exactly ONE target, so `:target` groups would close each other, and the whole point of grouping 469 clients is that a reader can open Retail and Signage and compare them. The pickers want mutual exclusion; a list of folds does not. Neither needs a script. */ /* A GROUP HEADING IS A `.row` THAT OPENS. `summary{cursor:pointer;list-style:none}` and the marker suppression are already global, and `details[open] > summary .tchev` already turns the chevron, so this is the two things a heading needs that a row does not: the interface face, and a tint while it is open so the boundary between one group's rows and the next is visible while scrolling. The first heading loses its rule for the same reason `.row:first-child` does - it sits against the surface's own border. */ .rows > details:first-child > summary{border-top:0} .rows > details > summary{font-family:var(--ui);font-weight:700} .rows > details[open] > summary{background:var(--paper2)} /* THE BOX INSIDE A CORRECTION PANEL. `.card input` is the same shape and is scoped to a form card; a panel is not one, and widening that selector would restyle every picker in the app. `min-width:0` because `.prows` is a grid and an input's default intrinsic width would otherwise push the panel wider than the row it hangs under. */ .prows .ptxt{width:100%;min-width:0;font:inherit;font-size:15px;padding:10px 12px; border-radius:11px;border:1px solid var(--rule);background:var(--card);color:var(--ink)} /* ============================================================================================== THE DROP ZONE AND THE UPLOAD BAR - 2026-09-18. EVERY SELECTOR BELOW NAMES A CLASS NOTHING ELSE IN THIS APP USES, and every one of those classes is created by `views/upload.js` at run time rather than rendered by a view. That is the whole of why this block cannot reach another page: with the script blocked not one of these elements exists, so not one of these rules matches anything. The diff that added it is insertions only - no existing selector, token, theme block, media query or `:root` entry was touched. THERE IS NO `.dz` ON A PHONE, and that is not done here. A media query hiding the zone would still have put the element in the document, where a screen reader would read a drop target that cannot be dropped on; `roomToDrop()` in `upload.js` decides whether the element is MADE at all, and it is the same `(min-width:768px) and (min-height:600px)` written once, in JavaScript, where the decision is. Duplicating it here would be a second place for it to be wrong. ============================================================================================ */ /* THE ZONE. It sits directly under the picker it belongs to and never in place of it - `.card input[type=file]` is untouched above and is still the first control in the tab order. 44px IS THE FLOOR AND THIS IS WELL OVER IT. A drop target that is also tappable (it opens the picker) has to be a real touch target on the iPad it is drawn for; `min-height:96px` is the smallest that still reads as an area rather than as a button. */ .dz{margin:9px 0 0;padding:var(--sp-4);min-height:96px;display:flex;flex-direction:column; gap:var(--sp-2);justify-content:center;cursor:pointer; border:2px dashed var(--rule);border-radius:var(--r-lg);background:var(--surface2); transition:border-color .14s ease,background .14s ease} .dz:hover{border-color:var(--priRule);background:var(--paper2)} /* WHILE A FILE IS OVER IT. The only state this zone has, and it is set by the drag handlers rather than by `:hover` - a drag does not hover. */ .dz.on{border-color:var(--priInk);background:var(--priBg);border-style:solid} /* "Drop files here", and the types after it. Two weights on one line, because the owner has asked seven times for less explanatory text and this is the least that still says what the zone takes. */ .dzh{margin:0;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-semi); color:var(--ink2);text-align:center} .dzk{display:block;margin-top:2px;font-weight:400;font-size:var(--t-micro); letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)} /* WHAT IT IS HOLDING - one line per file, the name on the left and the size hard right. No count, no total, no instruction. `min-width:0` + `overflow:hidden` so a long filename shortens instead of pushing the size off the card. */ .dzl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .dzl li{display:flex;align-items:center;gap:var(--sp-2);min-width:0; padding:7px var(--sp-3);border-radius:var(--r-sm);background:var(--card); border:1px solid var(--line2); font-family:var(--ui);font-size:var(--t-xs);color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dzs{margin-left:auto;flex:0 0 auto;color:var(--ink3);font-variant-numeric:tabular-nums} /* A FILE OVER THE CEILING THE SERVER PUT ON THE PAGE. IT IS A MARK AND NOT A REFUSAL: there is no sentence here, nothing is disabled, and the file is still in the input. It says only that this size is over that number, both of which came off the server - and when the press comes, `upload.js` hands it to the browser and the server writes the refusal in its own words. */ .dzl li.over{border-color:var(--late);background:var(--lateBg)} .dzl li.over .dzs{color:var(--late);font-weight:var(--w-semi)} /* THE X THAT TAKES ONE FILE BACK OFF - 2026-09-22, and the owner's own words for why it is here: "اذا بدي الغي يلي رفعتو، مافي اشارة سلة او X اقدر الغي". There was no way to unchoose a file short of starting the pick over, which on a list of five is four files re-chosen to lose one. THE CROSS IS THIS RULE AND NOT A GLYPH, and that is deliberate rather than clever. `upload.js` creates the button with NO CHILD NODES AT ALL - two rotated bars out of `::before`/`::after` are the whole icon - so three things stay true at once: the script builds no markup from a string (it has never had an `innerHTML` and this did not give it one), the row's `textContent` is STILL the file's name and its size and nothing else, which is what the oversize mark is read out of, and the accessible name is the button's `aria-label` - "Remove " - rather than a word sitting in the row a reader has to skip past. No sentence anywhere. 44px IS THE FLOOR AND THIS IS EXACTLY IT, on the control most likely to miss it: a 16px cross at the end of a 30px row is the thumb target that gets this wrong everywhere. The negative margins spend the row's own 7px of padding instead of adding to it, so the button's box is a full 44 while the row grows to 44 and not to 58 - and it stays inside the li's border box, so `overflow:hidden` above has nothing to clip. EVERY DECLARATION AFTER `background` IS AN UNDO OF `.card button`, which reaches this element because these lists are drawn inside cards: an 18px top margin, 12/18 padding and the primary gradient would have made a submit button out of a remove icon. Two classes beat one class and one type, so this wins without an `!important` and without touching the rule above it. NO `:focus-visible` OF ITS OWN. The stylesheet has one at the top for every focusable thing on every page, and a second here would be a second place for the focus ring to be wrong. */ .dzl .dzx{position:relative;flex:0 0 auto; width:44px;min-width:44px;height:44px;min-height:44px; margin:-7px calc(var(--sp-3) * -1) -7px 0;padding:0; display:inline-flex;align-items:center;justify-content:center; border:0;border-radius:var(--r-sm);background:none;color:var(--ink3); cursor:pointer;-webkit-appearance:none;appearance:none} .dzl .dzx::before,.dzl .dzx::after{content:"";position:absolute; width:13px;height:2px;border-radius:1px;background:currentColor} .dzl .dzx::before{transform:rotate(45deg)} .dzl .dzx::after{transform:rotate(-45deg)} .dzl .dzx:hover{color:var(--ink);background:var(--paper2)} /* ON A ROW THAT IS ALREADY MARKED, the X takes the mark's colour - it is the control that answers the mark, and a grey X on a red row reads as the one part of it that is not actionable. */ .dzl li.over .dzx{color:var(--late)} /* ---------------------------------------------------------------------------------------------- THE BAR. Appended to the form when the bytes start moving and taken away if the form is handed back to the browser. ------------------------------------------------------------------------------------------- */ .upw{margin:var(--sp-4) 0 0;display:flex;flex-direction:column;gap:var(--sp-2)} /* A REAL ``, WHICH IS WHY THERE ARE THREE RULES FOR ONE ELEMENT. Chrome and Safari paint the bar with `::-webkit-progress-bar` / `::-webkit-progress-value`, Firefox with `::-moz-progress-bar`, and neither vendor reads the other's. `appearance:none` is what stops the platform's own lozenge being drawn underneath. IT IS THE BROWSER'S CONTROL AND NOT A DIV WITH A WIDTH, because the width would have had to be an inline style and the policy is `style-src 'self'` with no `unsafe-inline` - and because a `` announces itself to a screen reader with its value and needs no ARIA written here. */ .upm{appearance:none;-webkit-appearance:none;display:block;width:100%;height:10px;border:0; border-radius:var(--r-pill);background:var(--paper2);overflow:hidden} .upm::-webkit-progress-bar{background:var(--paper2);border-radius:var(--r-pill)} .upm::-webkit-progress-value{background:var(--priInk);border-radius:var(--r-pill); transition:width .12s linear} .upm::-moz-progress-bar{background:var(--priInk);border-radius:var(--r-pill)} /* "148.2MB of 201.4MB" - the figures off the socket. Tabular so the digits do not jitter as they climb, which on a four-minute upload is the difference between a bar you trust and one you watch. */ .upn{margin:0;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-semi); color:var(--ink);font-variant-numeric:tabular-nums} /* THE UNWELCOME LINE, AND IT IS DELIBERATELY QUIET. It is true for the whole four minutes and a reader should be able to stop reading it after the first time; drawn at banner weight it would read as something going wrong. */ .upr{margin:0;font-family:var(--ui);font-size:var(--t-xs);color:var(--ink3)} /* THE UPLOAD DIED. The same red box `p.err.efld` is, with its own class because the sentence in it is this file's own and not the server's - see `lost()` in `upload.js`. Kept in step with `p.err.efld` above by eye and by the walk; it is deliberately not a shared selector, so that nobody can later widen one and silently move the other. */ .upe{background:var(--lateBg);border:1px solid var(--late);color:var(--ink); padding:9px 12px;border-radius:13px;margin:0;font-size:12.5px} /* ============================================================================================= ADD CLIENT, 2026-09-21 - and what is left of its block after the merge. Two redesigns landed the same day. Both copied `.csec > .qsh` and `.rq` - the tinted section header and the red asterisk - so that whichever merged second could delete its own copy and move nothing. That is what happened: those two rules are in the New creative request block above, byte for byte, and only the thirteen selectors this page alone invented are here. EVERY ONE IS SCOPED TO A CLASS THIS PAGE INVENTED. No new card, no new input rule, no new label rule, no new button rule, no second grid, no breakpoint. The stylesheet is served at a content-addressed `immutable` URL and is sha-pinned in eleven test files - one byte is a fresh ~92KB download on every phone on shop-floor wifi - so a redesign that could be composed was composed. ============================================================================================= */ .qsx{margin-left:auto;font-family:var(--ui);font-size:var(--t-xs);font-weight:var(--w-med); letter-spacing:0;color:var(--ink3);white-space:nowrap} /* THE STATUS DOT - his "small green status dot". `--ok` is the existing green. IT IS POSITIONED AGAINST `.sdw` AND NOT AGAINST THE PAGE, which is the whole of why `.sdw` exists. An `position:absolute` element whose ancestors are all static resolves against the INITIAL CONTAINING BLOCK - it leaves the card, leaves the column, and at 390px it made the document 609px wide. Measured, not reasoned about: see the walk in `client-add.test.js`. */ .sdw{position:relative;display:block} .sdot{position:absolute;right:32px;top:50%;margin-top:-4px;width:8px;height:8px; border-radius:999px;background:var(--ok);pointer-events:none} /* THE SEGMENTED RADIO GROUP. `.seg` draws this shape already but is built of links, because choosing a theme is navigation; choosing a contact method is one answer on a form that is posted once. The radio is `.vh` - visually hidden, NOT `display:none` - so it is still focusable, still announced, and still posts when the stylesheet never loads. */ /* `10px` SINCE 2026-09-21, THE SAME NUMBER A FIELD LABEL NOW CARRIES. This group IS a field - a label over a control - and 16px above it read as a gap in a rhythm rather than as a group. */ .smeth{margin:10px 0 0} .smel{display:block;margin:0 0 4px;font-family:var(--ui);font-size:10px;font-weight:750; letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)} .smg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line); border-radius:var(--r-md);background:var(--surface);max-width:100%} /* `position:relative` IS LOAD-BEARING AND NOT TIDINESS. The radio inside is `.vh`, which is `position:absolute` - with no positioned ancestor it resolves against the initial containing block, escapes the card entirely and widens the DOCUMENT. At 390px the three radios in §2 made the page 609px wide and it scrolled sideways. Measured; see `client-add.test.js`. */ /* `44px` SINCE 2026-09-21. 38 was under the floor for something a finger presses, and the group is SHORTER at 44 than it was at 38 - the 19px of `.card label` margin each pill was carrying comes off in the density block at the foot of this file, which is where a rule that has to beat `.card label` can be written at a specificity that actually does. */ .smi{position:relative;display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 14px; border-radius:var(--r-xs);font-family:var(--ui);font-size:var(--t-sm); font-weight:var(--w-semi);color:var(--ink3);cursor:pointer;white-space:nowrap} .smi:hover{color:var(--ink)} .smi:has(input:checked){background:var(--pri);color:#fff} .smi:has(input:focus-visible){outline:2px solid var(--cool);outline-offset:2px} /* THE CHECKBOX GRID - his multi-select, as seven visible tap targets rather than a scrolling `` cannot wrap and cannot ellipsise its own resting option, so at 110px the placeholder rendered as `Select cate`. The 1.15/1.15 split gives both 127px at the 1012px cap, which fits `Select category` with its chevron and still leaves the Brief the widest flexible track in the row. */ .qlt{--qlc:26px minmax(0,1.15fr) minmax(0,1.15fr) 56px minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.45fr) 72px 92px} .qlh{display:grid;grid-template-columns:var(--qlc);gap:var(--sp-2);align-items:center; padding:var(--sp-2) var(--sp-3);background:var(--paper2);border-bottom:1px solid var(--rule2); border-radius:15px 15px 0 0;font-family:var(--ui);font-size:var(--t-micro); font-weight:var(--w-bold);letter-spacing:var(--ls-caps);text-transform:uppercase; color:var(--ink3)} .qlh > span:nth-child(1){text-align:center} .qlh > span:nth-child(4),.qlh > span:nth-child(5),.qlh > span:nth-child(6){text-align:right} .qlh > span:nth-child(9){text-align:center} .qlt .qline{grid-template-columns:var(--qlc);gap:var(--sp-2);align-items:center; padding:var(--sp-2) var(--sp-3)} /* THE LABELS STAY IN THE DOCUMENT AND LEAVE THE SCREEN. `display:none` would take them out of the accessibility tree as well, and the heading row above is `aria-hidden` - so between them every box in this table would lose its name. This is `.vh`'s own displacement, written here rather than by putting `.vh` on nine labels that must be VISIBLE at 390. */ .qlt .qline label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .qlt .qlc{justify-content:center} .qlt .qline > .qlnum{grid-column:auto;justify-content:center;min-height:0} .qlt .qline > .qlnum > b::before{content:""} .qlt .qlat{justify-content:center;gap:4px;font-size:var(--t-micro)} .qlt .qlac{justify-content:center} .qlt .qline input,.qlt .qline select{min-height:40px;padding:8px 10px;font-size:var(--t-sm)} .qlt .qlsum{min-height:40px;padding:8px 10px} /* AND `/orders/new`'s OWN FIVE TRACKS - 2026-09-25. The nine above are the quotation line's and this row draws five cells plus a number it does not show, so it cannot take a prefix of them: `Item or service` is the one column that must be WIDE (it is the whole of what a line is called now that Specification has gone), `Qty` is the 56px track the block above sized for a quantity, `Unit` is a short word, and the last is 44 for one bin rather than 92 for a bin and a `+` - the `+` is not in a cell on this form. */ /* THE LAST TRACK IS 72 AND NOT 44, WHICH IS THE BIN'S OWN WIDTH. The heading over it is the word REMOVE - his mock-up's, not a shortening of it - and at 10px uppercase with .09em of tracking that measures 52px. A 44px track drew it over the Unit column beside it; the bin stays 44 and centres in 72. Measured at 1024 and 1280, where this shape exists at all. */ .qlt.oreq{--qlc:9.5rem minmax(0,1fr) 56px 6.5rem 72px} /* THE NUMBER IS OFF IN THE TABLE AND STAYS IN THE MARKUP - see the `.oreq` block above. */ .qlt.oreq .qline > .qlnum{display:none} /* FOUR HEADINGS LEFT AND ONE CENTRED, WHICH IS WHERE THE THINGS UNDER THEM ACTUALLY ARE. The generic block above right-aligns headings 4, 5 and 6 because on a quotation line those tracks hold FIGURES and a column of right-aligned numbers wants a right-aligned heading. Nothing in this table is a figure - `Qty` is a typed string this app does no arithmetic on - and a right-aligned `UNIT` over a left-aligned box drew the word above the gap between two columns, reading as a heading for the bin. `REMOVE` stays centred over a centred bin. */ .oreq .qlh > span{text-align:left} .oreq .qlh > span:nth-child(5){text-align:center} } /* ---------------------------------------------------------------------------------------------- DELIVERY TIME - the chips, and the box behind `Custom`. THE CHIPS THEMSELVES COST NOTHING: `.smg` and `.smi` are Add Client's own pill group, radios inside `.vh` labels at the 44px floor, tuned in the owner's density pass on the 21st. What is here is only the reveal, plus taking back the one rule that makes a pill read as a field label. `:has()` AND THE FALLBACK RUNS THE SAFE WAY ROUND. The box is hidden when a PRESET is checked, not shown when `Custom` is - so a browser that does not know `:has()` simply always draws it, which is a form somebody can still fill in. The other polarity would have hidden the only way to type 12 on exactly those browsers, silently. ------------------------------------------------------------------------------------------- */ .wdays{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)} .wdbox{flex:0 1 7.5rem;min-width:6rem} .wdays:has(.wdp:checked) > .wdbox{display:none} /* `.card label` IS A CLASS AND AN ELEMENT AND `.smi` IS ONE CLASS, so every pill in this group was drawn at 10px, uppercase, with .09em of tracking and in `--ink3` - which is the treatment for the WORD ABOVE a field and turns `10` into a caption and `Custom` into `CUSTOM`. The pills are the control here, so they take the control's type back. Scoped to `.wdays`, which only this one field emits, so Add Client's own three pills are untouched. */ .wdays .smi{font-size:var(--t-sm);font-weight:var(--w-semi);letter-spacing:0; text-transform:none;color:var(--ink2)} .wdays .smi:has(input:checked){color:#fff} /* SEVEN PILLS IN A THIRD OF THE FORM, ON ONE LINE, AND THE TWO NUMBERS ARE MEASURED. `.smi`'s own `0 14px` is right for three words in a row of its own (`WhatsApp / Phone / Email` on Add Client) and puts these seven over 315px, which is what a third of the 1012px form is - so the row wrapped and the field became 94px tall beside two 40px neighbours. At 8px a side with a 38px floor the seven measure 310 and the group is one line and 52px tall. THE FLOOR IS WHAT KEEPS `1` PRESSABLE: a pill holding one digit is 24px wide without it, and the height is already 44. */ .wdays .smi{padding:0 8px;min-width:38px} /* ---------------------------------------------------------------------------------------------- THE TWO SMALL MARKS ON THE DETAILS CARD, AND THE PANELS ON THE FILES ONE. ------------------------------------------------------------------------------------------- */ /* `Auto-filled`, INSIDE THE BOX IT IS ABOUT - his own badge, and it is a statement rather than a control: the name in that box is this session's and nobody asked for it. `.ccnt`'s positioning above is the same idea against a textarea's corner; this one clears a 12px radius. */ .qafw{position:relative;display:block} .qafl{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none; padding:3px 8px;border-radius:var(--r-pill);background:var(--priBg);color:var(--brassInk); font-family:var(--ui);font-size:var(--t-micro);font-weight:var(--w-bold);white-space:nowrap} /* THE BOX UNDER IT KEEPS ITS WORDS CLEAR OF THE BADGE. 6.5rem is the badge plus its own inset, measured at the 10px uppercase this file draws it in. */ .qafw > input{padding-right:6.5rem} /* WHERE THE FILES AND THE REFERENCE LINK GO - a sentence and a dashed rule, which is what "drag and drop" honestly looks like on a form that cannot carry a file. See `filesCard` in `views/quotations.js` for why there is no control in either panel. */ .qdrop{display:flex;align-items:center;gap:var(--sp-3);min-height:88px;padding:var(--sp-4); border:1px dashed var(--rule);border-radius:var(--r-md);background:var(--paper); color:var(--ink3);margin-top:var(--sp-2)} .qdrop > svg{flex:0 0 auto;width:22px;height:22px} .qdrop p{margin:0;font-size:var(--t-sm);line-height:1.5} /* ============================================================================================== PPPPPPPPPP THE SALES DASHBOARD, 2026-09-22 - /sales, REDRAWN PPPPPPPPPP WHAT MOVED IT: the owner commissioned `design-refs/sales-dashboard.png` and `/sales` stopped being a hub of doors. It is four sections - a header with a greeting, four Quick Action cards, five Sales Overview figures and a Recent Activity table under a tab strip - and three of those four are shapes this stylesheet did not have. `views/hub.js` is UNTOUCHED and still draws `Production`, `Admin` and `Dashboard` out of `.rows`/`.row.door`; not one byte of that block or of any other existing rule was edited by this round. EVERY SELECTOR BELOW NEEDS `.sdash`, `.qacts`, `.qact`, `.ovw`, `.ocard`, `.mom`, `.shello`, `.sday`, `.shi`, `.sline`, `.ssh`, `.sact`, `.vall`, `.atwrap` OR `.atab`, and `views/sales.js` is the only file in this app that emits any of them. The two that reach a control which was already there are named where they are made: `.ocard .fig .k`/`.v` retune the app's own figure INSIDE this page's card (the same two-class scoping `.qsec.csec` and `.qsec.rsec` use, and for the same reason - they have to beat `.fig`'s own rule and a specificity tie settled by source order is not a thing to leave to a later reader), and `.sact > .wtabs` zeroes the strip's bottom margin because here it sits INSIDE a heading row rather than above a list. THE ONE NEW COLOUR IS `--vio`/`--vioBg`, declared in all three theme states at the head of this file with both of its measurements. Everything else here resolves through tokens that already existed and already flip per theme; there is no literal colour, no inline style, no `!important` and no script anywhere in this block. @container AND NOT @media, WHICH IS LOAD-BEARING HERE AND NOT A STYLE PREFERENCE - the same argument the Create RFQ block makes one screen up. This app's navy rail is 192px from 768 and 216px from 1200, and `.wrap` caps at 760 until 1200 and 1280 after it, so the COLUMN this page actually gets is 362px at a 390 phone, 594px on an 834 iPad in portrait, 732px on a 1024 iPad in landscape and 1012px at 1280. Asking the WINDOW how many columns a row has would have given the iPad in landscape - 1024, which sounds like a desktop - a desktop's five tracks inside 732px. So the page asks itself, and the four column counts below are the four real widths: container device Quick Actions Sales Overview Recent Activity under 520 390 phone (362) 1 1 compact rows 520-699 834 iPad portrait (594) 2 2 table 700-939 1024 iPad landscape (732) 4 3 table 940 and up 1280 desktop (1012) 4 5 table which is the owner's spec read literally: "4-across and 5-across on desktop, wrapping to 2 on iPad portrait, stacked on a phone, and the activity table becoming compact rows". NO HORIZONTAL OVERFLOW AT ANY OF THE FOUR, and the table is where that had to be bought rather than assumed: six columns do not fit 594px however they are written, so `.atwrap` is its own `overflow-x:auto` box and the table scrolls INSIDE it - `test/figures.test.js` asserts the PAGE never scrolls sideways, and a scroller of its own is the one way a wide table keeps that true. Below 520 the table is not a table at all and `.atwrap` stops scrolling, because a stack of compact rows is already as narrow as the column. 44px UNDER EVERYTHING PRESSED. The month `` HAS NO RULE IN THIS FILE and on the two pages that already draw this control it is the browser's own box. Here it is given the reference's pill, scoped to this heading so neither of those pages moves - and it is 44px rather than the reference's 38, because the standing floor under anything a finger presses is 44 and a control is not an exception to it. */ .ssh > .tools select{font:inherit;font-family:var(--ui);font-size:var(--t-sm); font-weight:var(--w-semi);min-height:44px;padding:0 var(--sp-3); border-radius:var(--r-md);border:1px solid var(--rule);background:var(--card); color:var(--ink);max-width:100%} .ssh > .tools .chip{min-height:44px;height:auto;border-radius:var(--r-md);font-size:var(--t-sm)} /* ---------------------------------------------------------------------------------------------- THE FOUR QUICK ACTIONS. A CARD IS A LINK AND THE WHOLE CARD IS THE TARGET, which is this codebase's one rule about controls applied to a tile: there is nothing else on a Quick Action to press, so an inner anchor would have been a smaller target inside a box that looks pressable. It is `.qact` and not `.tile`: `.tile` is a PANEL with an `h3` and figures in it (the Money tile, the shop today), and giving it an `:hover` border and a text-decoration reset would have changed four panels on `/orders` to make one card on this page. ------------------------------------------------------------------------------------------- */ .qacts{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)} .qact{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-6); min-width:0;min-height:44px;padding:var(--sp-4);border-radius:var(--r-lg); background:var(--card);border:1px solid var(--rule);box-shadow:var(--e-1); text-decoration:none;color:var(--ink); transition:border-color .14s ease,box-shadow .14s ease} .qact:hover{border-color:var(--brassInk);box-shadow:var(--e-2)} .qact:focus-visible{outline:2px solid var(--brassInk);outline-offset:2px} /* THE SQUARE IS A `.tico` ONE BAND UP - 34px is a row mark and the reference's action tile is 44. The tone is the destination's, and the glyph is the destination's own nav mark through `navIcon`, so the square on `New RFQ` is the price tag `/rfqs` wears on the rail. */ .qact > .tico{width:44px;height:44px;border-radius:var(--r-md)} .qact > .tico svg{width:22px;height:22px} .qatx{display:flex;flex-direction:column;gap:3px;min-width:0} .qatx > b{font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-heavy); letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere} .qatx > em{font-style:normal;font-family:var(--ui);font-size:var(--t-xs);color:var(--ink3)} /* ---------------------------------------------------------------------------------------------- 3. THE FIVE FIGURES. THE INSIDE OF A CARD IS THE APP'S OWN `.fig` - `` over ``, the same two elements `/orders`, `/won`, `/clients`, `/rfqs` and `/quotations` print every figure in this app with. What is retuned, scoped to `.ocard`, is the two type steps: `.fig .k` is 10px uppercase at .09em tracking, which is right above a 23px number in a panel and reads as shouting beside a 26px number in a 193px card, and the reference's label is a plain small grey line. So inside this card it is `--t-xs`, sentence case, untracked - and on every other page in the app `.fig` is byte-identical. ------------------------------------------------------------------------------------------- */ .ovw{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)} /* THE CARD IS THE DOOR - see the block above `card()` in `views/sales.js` for why the reference's plain tile had to become a link. `text-decoration:none` and the body ink, so it reads as a card and not as five blue headings; the hover is `.qact`'s, because they are the same kind of object. */ .ocard{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0; padding:var(--sp-3) var(--sp-4) var(--sp-4);border-radius:var(--r-lg); background:var(--card);border:1px solid var(--rule);box-shadow:var(--e-1); text-decoration:none;color:var(--ink); transition:border-color .14s ease,box-shadow .14s ease} .ocard:hover{border-color:var(--brassInk);box-shadow:var(--e-2)} .ocard:focus-visible{outline:2px solid var(--brassInk);outline-offset:2px} .ocard > .tico{width:38px;height:38px;border-radius:var(--r-md);margin-top:2px} .ocard > .tico svg{width:19px;height:19px} /* `.fig` IS A `` HERE AND NOT A `
`, because its parent is now an anchor - so the flex column it has always been has to be declared rather than inherited from `display:block`. */ .ocard > .fig{flex:1 1 0;display:flex;flex-direction:column;min-width:0} .ocard .fig .k{font-size:var(--t-xs);font-weight:var(--w-semi);letter-spacing:0; text-transform:none;color:var(--ink2);margin-bottom:1px} .ocard .fig .v{font-size:26px;line-height:1.16;margin-top:0} /* THE MONTH-ON-MONTH LINE, AND IT IS DRAWN ONLY WHERE THE COMPARISON WAS ACTUALLY COMPUTED - see `figureOf` in `src/sales-hub.js`. Green up, red down, grey level; the words `vs last month` sit under the figure in the body grey, which is what the reference draws and what keeps the coloured part to the claim itself. `tabular-nums` so `↑ 8%` and `↑ 14%` start at the same pixel down a row of five cards. */ .mom{display:block;margin-top:5px;font-family:var(--ui);font-size:var(--t-xs); font-weight:var(--w-bold);color:var(--ink2);font-variant-numeric:tabular-nums} .mom.up{color:var(--ok)} .mom.down{color:var(--late)} .mom > em{display:block;margin-top:1px;font-style:normal;font-weight:var(--w-reg); color:var(--ink3)} /* ---------------------------------------------------------------------------------------------- 4. RECENT ACTIVITY - the heading row, and the table. THE HEADING, THE TAB STRIP AND `View all` SHARE ONE LINE, which is the reference's own arrangement and is why the strip is a flex ITEM here rather than a block above the list. `flex:1 1 240px` with `min-width:0` is what lets it keep its contract on a phone: the strip still does not wrap, it still scrolls, and `finder.js` still brings the lit tab into view - which is the owner's explicit ruling about this control and is measured on this page by `test/figures.test.js` at 390 and 320. On a phone the whole row wraps to three lines and the strip takes the full column. ------------------------------------------------------------------------------------------- */ .sact{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-3)} .sact > h3{margin:0;flex:0 0 auto;font-family:var(--ui);font-size:var(--t-title); font-weight:var(--w-heavy);letter-spacing:var(--ls-title);color:var(--ink)} .sact > .wtabs{flex:1 1 240px;min-width:0;margin:0;align-self:stretch} .vall{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:5px; min-height:44px;padding:0 var(--sp-2);font-family:var(--ui);font-size:var(--t-sm); font-weight:var(--w-semi);color:var(--priInk);text-decoration:none;white-space:nowrap} .vall:hover{text-decoration:underline} /* THE TABLE'S OWN SCROLLER. Six columns cannot fit 594px of iPad portrait at any honest wording, so the table is allowed to be wider than the column and to scroll inside this box - which is what keeps the PAGE from scrolling sideways. The rounded card is on the wrapper rather than on the table so the corners survive the scroll. */ .atwrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;border-radius:var(--r-lg);background:var(--card); border:1px solid var(--rule);box-shadow:var(--e-1)} .atab{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:var(--t-sm)} .atab th{font-family:var(--ui);font-size:var(--t-micro);font-weight:var(--w-bold); letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink3); text-align:left;white-space:nowrap;padding:var(--sp-3) var(--sp-4); background:var(--paper2);border-bottom:1px solid var(--rule)} .atab td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--rule2); vertical-align:middle;color:var(--ink2)} .atab tbody tr:first-child td{border-top:0} /* THE DATE AND THE ACTION NEVER WRAP AND NEVER SHRINK; the three text columns may. */ .atab td.ad{white-space:nowrap;color:var(--ink3);font-variant-numeric:tabular-nums} .atab td.at{white-space:nowrap} .atab td.as,.atab td.ax{white-space:nowrap} .atab td.ax{text-align:right} /* THE TYPE CELL: the kind's own mark, and the kind's own word beside it. The mark is the same glyph and the same tone as that kind's Overview card, so a reader who has learnt the yellow flag at the top of the page meets the yellow flag on the row. */ .atype{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0} .atype > .tico{width:28px;height:28px;border-radius:9px} .atype > .tico svg{width:15px;height:15px} .atype > span{font-family:var(--ui);font-size:var(--t-sm);color:var(--ink2)} /* THE IDENTIFIER OVER WHAT IT IS - the row shape every list in this app already uses (`.qno` over `em` on the RFQ and quotation rows), in a table cell. */ .atab b{display:block;font-family:var(--ui);font-size:var(--t-sm);font-weight:var(--w-bold); color:var(--ink);overflow-wrap:anywhere} .atab em{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink3); overflow-wrap:anywhere} /* THE CHEVRON IS THE `ACTION`, and it is a real link with a 44px box round it rather than a mark beside one. Two rotated borders draw it, exactly as `a.qopen::after` draws the hub's - no markup, no glyph, and nothing added to the bytes of a page that renders on every visit. */ a.achev{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;margin:-11px -8px -11px 0;color:var(--ink3);text-decoration:none} a.achev::after{content:"";width:7px;height:7px;border-top:2px solid currentColor; border-right:2px solid currentColor;transform:rotate(45deg)} a.achev:hover{color:var(--priInk)} a.achev:focus-visible{outline:2px solid var(--brassInk);outline-offset:-2px; border-radius:var(--r-sm)} /* ---------------------------------------------------------------------------------------------- THE FOUR COLUMN COUNTS. See the table at the head of this block for which device each is. ------------------------------------------------------------------------------------------- */ @container sdash (min-width:520px){ .qacts,.ovw{grid-template-columns:repeat(2,minmax(0,1fr))} } @container sdash (min-width:700px){ .qacts{grid-template-columns:repeat(4,minmax(0,1fr))} .ovw{grid-template-columns:repeat(3,minmax(0,1fr))} } @container sdash (min-width:940px){ .ovw{grid-template-columns:repeat(5,minmax(0,1fr))} } /* ---------------------------------------------------------------------------------------------- AND THE QUICK ACTION IS A ROW ON A PHONE RATHER THAN A COLUMN. MEASURED IN THE WALK AT 390: stacked, four cards are 480px of screen - the mark on its own line with 24px of air under it, four times over, before the reader reaches the figures. As a row - mark, then the two lines beside it - they are 288px and read as a list of four things to do, which is what they are. The 44px mark and the 44px minimum are untouched. ------------------------------------------------------------------------------------------- */ @container sdash (max-width:519px){ .qact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)} .qatx{flex:1 1 auto} } /* ---------------------------------------------------------------------------------------------- AND THE COMPACT ROW - the owner's spec for the activity table, below 700px of COLUMN. 700 AND NOT 520, WHICH THE WALK DECIDED AND NOT A GUESS. Six columns of this table need about 670px: DATE 100, TYPE 110, TITLE/REFERENCE 180, CLIENT 140, STATUS 90, ACTION 52. An 834px iPad in portrait gives this page 594px of column, and the shot at that width had `Granite Fit-Out` broken as `Granit / e Fit- / Out` across three lines with the chevron column scrolled off the right-hand edge. There is no wording of six honest columns that fits 594px. A 1024px iPad in LANDSCAPE gives 732px, which does fit - measured, with the chevron on screen - so the table starts there and everything below it is the compact row. THE HEADER ROW GOES AND THE CELLS ARE LABELLED BY POSITION, which is the one thing a responsive table has to decide. `display:none` on `